Skip to content

Commit 5643bcc

Browse files
griimickgriimick
authored
feat: setting to override whiteboard to latte (#30)
* organise whiteboard vars * remove hardcoded var in main * feat: add whiteboard override setting * whiteboard latte override working v1 * latte override working 2 * more minor changes * fix: minor * fix: whiteboard fill colors * fix: whiteboard fill colors
1 parent 64487bb commit 5643bcc

File tree

13 files changed

+411
-284
lines changed

13 files changed

+411
-284
lines changed

‎index.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,43 @@ const settings = [
2929
enumChoices: accentNames,
3030
default: "Full palette"
3131
},
32+
{
33+
key: "CtpWhiteboard",
34+
title: "Override Whiteboard theme to light theme?",
35+
description: " Override whiteboard theme to use Latte theme flavor",
36+
type: "boolean",
37+
default: false,
38+
},
3239
];
3340

41+
function setWhiteboardOverride(bool) {
42+
const rootContainer = parent.document.querySelector(`html`);
43+
if (bool) {
44+
rootContainer.classList.add('whiteboard-latte');
45+
} else {
46+
rootContainer.classList.remove('whiteboard-latte');
47+
}
48+
}
49+
3450
function setAccent(accentName) {
3551
logseq.provideStyle({
3652
key: 'ctp-accent',
3753
style: `
3854
:root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
3955
--ctp-accent: ${accentMap[accentName]};
4056
}
57+
html.whiteboard-latte div.whiteboard-page {
58+
--ctp-accent: ${accentMap[accentName]};
59+
}
60+
html.whiteboard-latte div.dashboard-card {
61+
--ctp-accent: ${accentMap[accentName]};
62+
}
63+
html.whiteboard-latte div.tl-tooltip-content {
64+
--ctp-accent: ${accentMap[accentName]};
65+
}
66+
html.whiteboard-latte div.tl-select-input-content {
67+
--ctp-accent: ${accentMap[accentName]};
68+
}
4169
`,
4270
});
4371
}
@@ -54,6 +82,9 @@ async function main() {
5482
if (setAccent(updatedSettings.CtpAccent)) {
5583
console.log(`Applied ${updatedSettings.CtpAccent} accent✨`);
5684
}
85+
if (setWhiteboardOverride(updatedSettings.CtpWhiteboard)) {
86+
console.log(`${updatedSettings.CtpWhiteboard ? 'Applied' : 'Removed'} Latte whiteboard flavor✨`);
87+
}
5788
});
5889
}
5990

‎scss/_ctp-vars.scss‎

Lines changed: 7 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
:root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
2-
// following are mapped to variables used in logseq
1+
@mixin variables {
2+
// following are custom ctp variables mapped to logseq variables
33
--ctp-primary-background-color: rgb(var(--ctp-base));
44
--ctp-secondary-background-color: rgb(var(--ctp-mantle));
55
--ctp-tertiary-background-color: rgb(var(--ctp-crust));
@@ -94,49 +94,6 @@
9494
--ctp-success-color: var(--ctp-green);
9595
--ctp-info-color: var(--ctp-yellow);
9696

97-
/* Whiteboard */
98-
99-
/* Whiteboard object colors */
100-
101-
--ctp-wb-background-color-gray: color-mix(in srgb, rgb(var(--ctp-gray)), rgb(var(--ctp-base)) 60%);
102-
--ctp-wb-background-color-red: color-mix(in srgb, rgb(var(--ctp-red)), rgb(var(--ctp-base)) 60%);
103-
--ctp-wb-background-color-yellow: color-mix(in srgb, rgb(var(--ctp-yellow)), rgb(var(--ctp-base)) 60%);
104-
--ctp-wb-background-color-green: color-mix(in srgb, rgb(var(--ctp-green)), rgb(var(--ctp-base)) 60%);
105-
--ctp-wb-background-color-blue: color-mix(in srgb, rgb(var(--ctp-blue)), rgb(var(--ctp-base)) 60%);
106-
--ctp-wb-background-color-purple: color-mix(in srgb, rgb(var(--ctp-mauve)), rgb(var(--ctp-base)) 60%);
107-
--ctp-wb-background-color-pink: color-mix(in srgb, rgb(var(--ctp-pink)), rgb(var(--ctp-base)) 60%);
108-
109-
// NOTE: drawn lines with the pencil use the text color
110-
// and not this stroke color
111-
--ctp-wb-stroke-color-gray: rgb(var(--ctp-overlay2));
112-
--ctp-wb-stroke-color-red: rgb(var(--ctp-red));
113-
--ctp-wb-stroke-color-yellow: rgb(var(--ctp-yellow));
114-
--ctp-wb-stroke-color-green: rgb(var(--ctp-green));
115-
--ctp-wb-stroke-color-blue: rgb(var(--ctp-blue));
116-
--ctp-wb-stroke-color-purple: rgb(var(--ctp-mauve));
117-
--ctp-wb-stroke-color-pink: rgb(var(--ctp-pink));
118-
119-
--ctp-wb-text-color-gray: rgb(var(--ctp-overlay2));
120-
--ctp-wb-text-color-red: rgb(var(--ctp-red));
121-
--ctp-wb-text-color-yellow: rgb(var(--ctp-yellow));
122-
--ctp-wb-text-color-green: rgb(var(--ctp-green));
123-
--ctp-wb-text-color-blue: rgb(var(--ctp-blue));
124-
--ctp-wb-text-color-purple: rgb(var(--ctp-mauve));
125-
--ctp-wb-text-color-pink: rgb(var(--ctp-pink));
126-
127-
// since text and lines share a color, it is not possible to have a fill color
128-
// with the regular ctp colors
129-
// so the options are to either shade the fill/bg color or
130-
// override the text color variable inside the shape labels
131-
132-
--ctp-wb-shape-label-color-gray: rgb(var(--ctp-gray));
133-
--ctp-wb-shape-label-color-red: rgb(var(--ctp-red));
134-
--ctp-wb-shape-label-color-yellow: rgb(var(--ctp-yellow));
135-
--ctp-wb-shape-label-color-green: rgb(var(--ctp-green));
136-
--ctp-wb-shape-label-color-blue: var(--ctp-blue);
137-
--ctp-wb-shape-label-color-purple: rgb(var(--ctp-purple));
138-
--ctp-wb-shape-label-color-pink: rgb(var(--ctp-pink));
139-
14097
// following used in _custom.scss
14198

14299
// Switches
@@ -163,41 +120,14 @@
163120
--ctp-dropdown-border-color: var(--color-base-50);
164121

165122
// Full accent overrides
166-
--ctp-text-bold: var(var(--ctp-primary-text-color));
123+
--ctp-text-bold: var(--ctp-primary-text-color);
167124
--ctp-text-heading: var(--ctp-accent, var(--ctp-lavender));
168125
--ctp-text-italics: var(--ctp-accent, var(--ctp-green));
169126
--ctp-text-underline: var(--ctp-primary-text-color);
170127
--ctp-text-strikethrough: var(--ctp-accent, var(--ctp-maroon));
171128
--ctp-blockquote-line: var(--ctp-accent);
172129
--ctp-active-setting: var(--ctp-accent, var(--ctp-blue));
173130

174-
// Whiteboard Buttons
175-
176-
// selected tool button
177-
--ctp-wb-button-selected-foreground: var(--ctp-accent, var(--ctp-mauve));
178-
--ctp-wb-button-selected-background: var(--ctp-surface0);
179-
180-
// regular tool button
181-
--ctp-wb-button-foreground: var(--ctp-text);
182-
--ctp-wb-button-menu-foreground: var(--ctp-accent, var(--ctp-teal));
183-
184-
// double click or "add block or page" from toolbar -> bottom icons
185-
--ctp-wb-button-type-tag-background-active: var(--ctp-accent, var(--ctp-mauve));
186-
--ctp-wb-button-type-tag-background-inactive: var(--ctp-surface0);
187-
--ctp-wb-button-type-tag-foreground: var(--ctp-text);
188-
189-
// page reference block -> hover -> below button to referenced page
190-
--ctp-wb-quick-links-button: var(--ctp-accent, var(--ctp-blue));
191-
--ctp-wb-quick-links-button-hover: var(--ctp-sky);
192-
193-
// select multiple objects -> right click -> align buttons on top
194-
--ctp-wb-layout-button-foreground: var(--ctp-accent, var(--ctp-teal));
195-
196-
// selected item bg in e.g. a dropdown
197-
--ctp-tl-select-input-select-item: var(--ctp-surface2);
198-
--ctp-tl-selectFill: var(--ctp-accent, var(--ctp-blue));
199-
--ctp-tl-selectStroke: var(--ctp-accent, var(--ctp-blue));
200-
201131
// priorites variables
202132
--ctp-priority-bg-color: var(--ctp-crust);
203133
--ctp-priority-todo: var(--ctp-teal);
@@ -215,4 +145,8 @@
215145
--ctp-marker-size: 16px;
216146
}
217147

148+
:root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
149+
@include variables;
150+
}
151+
218152

‎scss/_custom.scss‎

Lines changed: 15 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ html[data-theme=dark][data-color='logseq'],
44
html[data-color='none'] {
55
// place for selection to customise elements not supported by default variables
66

7+
#left-sidebar {
8+
background-color: var(--ctp-secondary-background-color);
9+
}
710
// Search bar placeholder
811
div.input-wrap>input::placeholder {
912
color: var(--ctp-search-input-placeholder);
@@ -233,7 +236,7 @@ html[data-color='none'] {
233236
}
234237

235238
.cp__settings-inner>aside ul>li>a>strong {
236-
color: rgb(var(--ctp-primary-text-color));
239+
color: var(--ctp-primary-text-color);
237240
}
238241

239242
.cp__settings-inner>aside ul>li.active {
@@ -245,7 +248,7 @@ html[data-color='none'] {
245248
}
246249

247250
.cp__all_pages_table td>span {
248-
color: rgb(var(--ctp-primary-text-color));
251+
color: var(--ctp-primary-text-color);
249252
}
250253

251254
// full pallete overrides
@@ -257,7 +260,7 @@ html[data-color='none'] {
257260

258261
b,
259262
strong {
260-
color: rgb(var(--ctp-text-bold));
263+
color: var(--ctp-text-bold);
261264
}
262265

263266
i {
@@ -300,108 +303,6 @@ html[data-color='none'] {
300303
background: var(--ctp-tertiary-background-color);
301304
}
302305

303-
304-
// Whiteboard
305-
306-
// Whiteboard tool button
307-
.tl-button[data-selected=true] {
308-
background: rgb(var(--ctp-wb-button-selected-background));
309-
310-
i {
311-
color: rgb(var(--ctp-wb-button-selected-foreground));
312-
}
313-
}
314-
315-
.ti,
316-
.tie {
317-
color: rgb(var(--ctp-wb-button-foreground));
318-
}
319-
320-
.tl-context-bar {
321-
322-
.ti,
323-
.tie {
324-
color: rgb(var(--ctp-wb-button-menu-foreground));
325-
}
326-
}
327-
328-
// double click or "add block or page" from toolbar -> icons
329-
// by default, bg color is hardcoded
330-
.tl-type-tag {
331-
background-color: rgb(var(--ctp-wb-button-type-tag-background-inactive));
332-
border-color: rgb(var(--ctp-wb-button-type-tag-background-inactive));
333-
// color: #ff00ff; // fg color has to be set on inner i element (.tie)
334-
335-
.tie {
336-
color: rgb(var(--ctp-wb-button-type-tag-foreground));
337-
}
338-
}
339-
340-
html[data-theme=dark] .tl-type-tag[data-active=true] {
341-
342-
background-color: rgba(var(--ctp-wb-button-type-tag-background-active), 0.8);
343-
344-
border-color: rgb(var(--ctp-wb-button-type-tag-background-active));
345-
346-
.tie {
347-
color: rgb(var(--ctp-wb-button-type-tag-foreground));
348-
}
349-
}
350-
351-
// Whiteboard context menu button icon
352-
.tl-menu-item i {
353-
color: rgb(var(--ctp-wb-button-menu-foreground));
354-
}
355-
356-
// Button that appears below a page reference block (on hover)
357-
.tl-quick-links-row:first-child {
358-
background-color: rgb(var(--ctp-wb-quick-links-button));
359-
360-
:hover {
361-
background-color: rgb(var(--ctp-wb-quick-links-button-hover));
362-
}
363-
}
364-
365-
// selected item bg in e.g. a dropdown
366-
.tl-select-input-select-item[data-state=checked] {
367-
background: rgb(var(--ctp-tl-select-input-select-item));
368-
}
369-
370-
// align-buttons that appear when right clicking after
371-
// selecting multiple objects
372-
i[class*="ti-layout-"] {
373-
color: rgb(var(--ctp-wb-layout-button-foreground));
374-
}
375-
376-
// these are the colors that appear when selecting a color (e.g. for fill)
377-
.bg-gray-500 {
378-
background-color: rgb(var(--ctp-gray));
379-
}
380-
381-
.bg-red-500 {
382-
background-color: rgb(var(--ctp-red));
383-
}
384-
385-
.bg-yellow-500 {
386-
background-color: rgb(var(--ctp-yellow));
387-
}
388-
389-
.bg-green-500 {
390-
background-color: rgb(var(--ctp-green));
391-
}
392-
393-
.bg-blue-500 {
394-
background-color: rgb(var(--ctp-blue));
395-
}
396-
397-
.bg-purple-500 {
398-
background-color: rgb(var(--ctp-mauve));
399-
}
400-
401-
.bg-pink-500 {
402-
background-color: rgb(var(--ctp-pink));
403-
}
404-
405306
// Priorities custom styles
406307

407308
.block-marker {
@@ -503,6 +404,9 @@ html[data-color='none'] {
503404
.sidebar-item-header .item-actions {
504405
button {
505406
background-color: transparent;
407+
.ui__icon {
408+
color: var(--ctp-primary-text-color);
409+
}
506410
}
507411
button:hover {
508412
background-color: var(--ctp-menu-hover-color);
@@ -573,19 +477,14 @@ html[data-color='none'] {
573477

574478
}
575479

576-
.tl-container {
577-
--ls-primary-background-color: var(--ctp-primary-background-color);
578-
--ls-secondary-background-color: var(--ctp-secondary-background-color);
579-
--ls-tertiary-background-color: var(--ctp-tertiary-background-color);
580-
--ls-quaternary-background-color: var(--ctp-quaternary-background-color);
581-
}
582-
583-
.tl-button:hover {
584-
background-color: var(--ctp-tertiary-background-color);
585-
}
586-
587480
.cp__themes-installed .it.is-active, .cp__themes-installed .it:hover {
588481
background-color: var(--ctp-menu-hover-color);
589482
opacity: 1;
590483
}
484+
485+
.search-results {
486+
.text-gray-12 {
487+
color: var(--ctp-text-primary-color);
488+
}
489+
}
591490
}

0 commit comments

Comments
 (0)