Skip to content

Commit

Permalink
fix: regression issues from v0.5 (#29)
Browse files Browse the repository at this point in the history
* fix: whiteboard tooltip container styles

* fix: button icon color fav and recent tab

* comment out temp vars

* fix: theme selection hover, selected color

* init support for logseq accent

* feat: start using catppuccin/palette

* fix: whiteboard shape background color

* fix: latte in logseq accent

* fix
  • Loading branch information
griimick authored Mar 6, 2024
1 parent 7999983 commit 64487bb
Show file tree
Hide file tree
Showing 13 changed files with 170 additions and 176 deletions.
2 changes: 1 addition & 1 deletion index.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ function setAccent(accentName) {
logseq.provideStyle({
key: 'ctp-accent',
style: `
:root:not([data-color]), :root[data-color='none'] {
:root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
--ctp-accent: ${accentMap[accentName]};
}
`,
Expand Down
2 changes: 1 addition & 1 deletion scss/_ctp-vars.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
:root:not([data-color]), :root[data-color='none'] {
:root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
// following are mapped to variables used in logseq
--ctp-primary-background-color: rgb(var(--ctp-base));
--ctp-secondary-background-color: rgb(var(--ctp-mantle));
Expand Down
23 changes: 22 additions & 1 deletion scss/_custom.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
html:not(html[data-color]),
html[data-theme=light][data-color='logseq'],
html[data-theme=dark][data-color='logseq'],
html[data-color='none'] {
// place for selection to customise elements not supported by default variables

Expand Down Expand Up @@ -176,7 +178,7 @@ html[data-color='none'] {
}

html[data-theme=dark] .cp__header a,
html[data-theme=dark] .cp__header button,
html[data-theme=dark] .cp__header button.button,
html[data-theme=dark] .cp__right-sidebar-topbar button {
opacity: 1;
}
Expand Down Expand Up @@ -510,6 +512,9 @@ html[data-color='none'] {
button.ui__button {
background: transparent;
}
span.ui__icon {
color: var(--ctp-primary-text-color);
}
}

button.ui__button {
Expand Down Expand Up @@ -567,4 +572,20 @@ html[data-color='none'] {
}

}

.tl-container {
--ls-primary-background-color: var(--ctp-primary-background-color);
--ls-secondary-background-color: var(--ctp-secondary-background-color);
--ls-tertiary-background-color: var(--ctp-tertiary-background-color);
--ls-quaternary-background-color: var(--ctp-quaternary-background-color);
}

.tl-button:hover {
background-color: var(--ctp-tertiary-background-color);
}

.cp__themes-installed .it.is-active, .cp__themes-installed .it:hover {
background-color: var(--ctp-menu-hover-color);
opacity: 1;
}
}
3 changes: 1 addition & 2 deletions scss/_highlightjs.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
@use "@catppuccin/highlightjs/sass/catppuccin.variables";

html:not(html[data-color]),
html[data-color='none'] {
html:not(html[data-color]), html[data-color='logseq'], html[data-color='none'] {
code.hljs {
background-color: var(--ctp-tertiary-background-color);
}
Expand Down
79 changes: 42 additions & 37 deletions scss/_ls-vars.scss
Original file line number Diff line number Diff line change
@@ -1,40 +1,11 @@
// Source: https://github.com/logseq/logseq/blob/master/resources/css/common.css
:root:not([data-color]), :root[data-color='none'] {
--ls-error-color: var(--ctp-error-color);
--ls-warning-color: var(--ctp-warning-color);
--ls-success-color: var(--ctp-success-color);
--ls-text-on-accent: rgb(var(--ctp-text));

.logseq-tldraw {
--tl-selectFill: rgba(var(--ctp-tl-selectFill), 0.05);
--tl-selectStroke: rgb(var(--ctp-tl-selectStroke));
}

.tl-text-label-inner-wrapper {
// this is for overriding the text colors inside shapes (e.g. the label color of a rectangle)
--ls-wb-text-color-gray: var(--ctp-wb-shape-label-color-gray);
--ls-wb-text-color-red: var(--ctp-wb-shape-label-color-red);
--ls-wb-text-color-yellow: var(--ctp-wb-shape-label-color-yellow);
--ls-wb-text-color-green: var(--ctp-wb-shape-label-color-green);
--ls-wb-text-color-blue: var(--ctp-wb-shape-label-color-blue);
--ls-wb-text-color-purple: var(--ctp-wb-shape-label-color-purple);
--ls-wb-text-color-pink: var(--ctp-wb-shape-label-color-pink);
}
}

@media (prefers-color-scheme: dark) {

html:not(html[data-color]),
html[data-color='none'] {
background-color: rgb(var(--ctp-primary-background-color));
}

html[data-theme='light'] {
background-color: transparent;
}
}

.light-theme,
.dark-theme,
html:not(html[data-color]),
html[data-theme='dark'][data-color='logseq'],
html[data-theme='light'][data-color='logseq'],
html[data-theme='dark'],
html[data-theme='light'],
html[data-color='none'] {
--ls-primary-background-color: var(--ctp-primary-background-color);
--ls-secondary-background-color: var(--ctp-secondary-background-color);
Expand Down Expand Up @@ -128,7 +99,7 @@ html[data-color='none'] {
--ls-focus-ring-color: var(--ctp-focus-ring-color);
--ls-header-button-background: var(--ctp-header-button-background);

--ls-left-sidebar-active-background: var(--ls-active-primary-color);
--ls-left-sidebar-active-background: var(--ctp-color-level-4);

/* Whiteboard */

Expand Down Expand Up @@ -161,4 +132,38 @@ html[data-color='none'] {
--ls-color-file-sync-error: rgb(var(--ctp-red));
--ls-color-file-sync-pending: rgb(var(--ctp-yellow));
--ls-color-file-sync-idle: rgb(var(--ctp-green));
;}
}

:root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
--ls-error-color: var(--ctp-error-color);
--ls-warning-color: var(--ctp-warning-color);
--ls-success-color: var(--ctp-success-color);
--ls-text-on-accent: rgb(var(--ctp-text));

.logseq-tldraw {
--tl-selectFill: rgba(var(--ctp-tl-selectFill), 0.05);
--tl-selectStroke: rgb(var(--ctp-tl-selectStroke));
}

.tl-text-label-inner-wrapper {
// this is for overriding the text colors inside shapes (e.g. the label color of a rectangle)
--ls-wb-text-color-gray: var(--ctp-wb-shape-label-color-gray);
--ls-wb-text-color-red: var(--ctp-wb-shape-label-color-red);
--ls-wb-text-color-yellow: var(--ctp-wb-shape-label-color-yellow);
--ls-wb-text-color-green: var(--ctp-wb-shape-label-color-green);
--ls-wb-text-color-blue: var(--ctp-wb-shape-label-color-blue);
--ls-wb-text-color-purple: var(--ctp-wb-shape-label-color-purple);
--ls-wb-text-color-pink: var(--ctp-wb-shape-label-color-pink);
}
}

@media (prefers-color-scheme: dark) {

html:not(html[data-color]), html[data-color='logseq'], html[data-color='none'] {
background-color: rgb(var(--ctp-primary-background-color));
}

html[data-theme='light'] {
background-color: transparent;
}
}
57 changes: 56 additions & 1 deletion scss/_lx-vars.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,58 @@
:root:not([data-color]), :root[data-color='none'] {
:root:not([data-color]), :root[data-color='none'], :root[data-theme=dark][data-color='logseq'] {
/*
--background: 192 100% 11%;
--foreground: 0 0% 95%;
--accent: 192 80% 10%;
--accent-foreground: 255 92% 100%;
--primary: 200 97% 37%;
--primary-foreground: 255 92% 100%;
--ring: 200 97% 37%;
--secondary: 203 50% 20%;
--secondary-foreground: 0 0% 98%;
--muted: 192 100% 13%;
--card: 192 100% 10%;
--card-foreground: 0 0% 95%;
--popover: 192 100% 11%;
--input: 203 35% 25%;
*/
--border: var(--ctp-surface0-hsl);

--lx-popover-bg: var(--ctp-secondary-background-color);
}

html[data-color=logseq][data-theme=light] {
/*
--primary: 200 97% 37%;
--primary-foreground: 255 92% 100%;
--accent: 200 97% 37%;
--accent-foreground: 255 92% 100%;
--ring: 200 97% 37%;
*/
--lx-gray-01: initial;
--lx-gray-02: initial;
--lx-gray-03: initial;
--lx-gray-04: initial;
--lx-gray-05: initial;
--lx-gray-06: initial;
--lx-gray-07: initial;
--lx-gray-08: initial;
--lx-gray-09: initial;
--lx-gray-10: initial;
--lx-gray-11: initial;
--lx-gray-12: initial;
}

html[data-color=logseq] {
--lx-accent-01: initial;
--lx-accent-02: initial;
--lx-accent-03: initial;
--lx-accent-04: initial;
--lx-accent-05: initial;
--lx-accent-06: initial;
--lx-accent-07: initial;
--lx-accent-08: initial;
--lx-accent-09: initial;
--lx-accent-10: initial;
--lx-accent-11: initial;
--lx-accent-12: initial;
}
2 changes: 1 addition & 1 deletion scss/_theme.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
:root:not([data-color]), :root[data-color='none'] {
:root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
// darkest -> lightest (dark theme)
--color-base-00: rgb(var(--ctp-crust));
--color-base-10: rgb(var(--ctp-mantle));
Expand Down
26 changes: 26 additions & 0 deletions scss/_utils.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
@use "@catppuccin/palette/scss/catppuccin" as catppuccin;
@use 'sass:math';

@function strip-unit($value) {
@return math.div($value, ($value * 0 + 1));
}

@function hex-to-hsl($hexColor) {
@return #{math.round(strip-unit(hue($hexColor)))}, #{math.round(saturation($hexColor))}, #{math.round(lightness($hexColor))}
}

@function hex-to-rgb($hexColor) {
@return #{red($hexColor)}, #{green($hexColor)}, #{blue($hexColor)}
}

@mixin ctp-hsl-vars ($flavor) {
@each $color, $hex in map-get(catppuccin.$palette, $flavor) {
--ctp-#{$color}-hsl: #{hex-to-hsl($hex)};
}
}

@mixin ctp-rgb-vars ($flavor) {
@each $color, $hex in map-get(catppuccin.$palette, $flavor) {
--ctp-#{$color}: #{hex-to-rgb($hex)};
}
}
31 changes: 4 additions & 27 deletions scss/ctp-frappe.scss
Original file line number Diff line number Diff line change
@@ -1,33 +1,10 @@
@use "main.scss";
@use "utils.scss" as utils;

:root:not([data-color]), :root[data-color='none'] {
:root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
--ctp-cm-theme: 'ctp-frappe';
--ctp-rosewater: 242, 213, 207;
--ctp-flamingo: 238, 190, 190;
--ctp-pink: 244, 184, 228;
--ctp-mauve: 202, 158, 230;
--ctp-red: 231, 130, 132;
--ctp-maroon: 234, 153, 156;
--ctp-peach: 239, 159, 118;
--ctp-yellow: 229, 200, 144;
--ctp-green: 166, 209, 137;
--ctp-teal: 129, 200, 190;
--ctp-sky: 153, 209, 219;
--ctp-sapphire: 133, 193, 220;
--ctp-blue: 140, 170, 238;
--ctp-lavender: 186, 187, 241;
--ctp-text: 198, 206, 239;
--ctp-subtext1: 181, 189, 220;
--ctp-subtext0: 165, 172, 201;
--ctp-overlay2: 148, 155, 183;
--ctp-overlay1: 131, 138, 164;
--ctp-overlay0: 115, 120, 145;
--ctp-surface2: 98, 103, 126;
--ctp-surface1: 81, 86, 108;
--ctp-surface0: 65, 69, 89;
--ctp-base: 48, 52, 70;
--ctp-mantle: 41, 44, 60;
--ctp-crust: 35, 38, 52;
@include utils.ctp-rgb-vars(frappe);
@include utils.ctp-hsl-vars(frappe);
}

// custom check box checked image
Expand Down
31 changes: 4 additions & 27 deletions scss/ctp-latte.scss
Original file line number Diff line number Diff line change
@@ -1,33 +1,10 @@
@use "main.scss";
@use "utils.scss" as utils;

:root:not([data-color]), :root[data-color='none'] {
:root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
--ctp-cm-theme: 'ctp-latte';
--ctp-rosewater: 222, 149, 132;
--ctp-flamingo: 221, 120, 120;
--ctp-pink: 236, 131, 208;
--ctp-mauve: 136, 57, 239;
--ctp-red: 210, 15, 57;
--ctp-maroon: 230, 69, 83;
--ctp-peach: 254, 100, 11;
--ctp-yellow: 228, 147, 32;
--ctp-green: 64, 160, 43;
--ctp-teal: 23, 146, 153;
--ctp-sky: 4, 165, 229;
--ctp-sapphire: 32, 159, 181;
--ctp-blue: 42, 110, 245;
--ctp-lavender: 114, 135, 253;
--ctp-text: 76, 79, 105;
--ctp-subtext1: 92, 95, 119;
--ctp-subtext0: 108, 111, 133;
--ctp-overlay2: 124, 127, 147;
--ctp-overlay1: 140, 143, 161;
--ctp-overlay0: 156, 160, 176;
--ctp-surface2: 172, 176, 190;
--ctp-surface1: 188, 192, 204;
--ctp-surface0: 204, 208, 218;
--ctp-base: 239, 241, 245;
--ctp-mantle: 230, 233, 239;
--ctp-crust: 220, 224, 232;
@include utils.ctp-rgb-vars(latte);
@include utils.ctp-hsl-vars(latte);
}

// custom check box checked image
Expand Down
31 changes: 4 additions & 27 deletions scss/ctp-macchiato.scss
Original file line number Diff line number Diff line change
@@ -1,33 +1,10 @@
@use "main.scss";
@use "utils.scss" as utils;

:root:not([data-color]), :root[data-color='none'] {
:root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
--ctp-cm-theme: 'ctp-macchiato';
--ctp-rosewater: 244, 219, 214;
--ctp-flamingo: 240, 198, 198;
--ctp-pink: 245, 189, 230;
--ctp-mauve: 198, 160, 246;
--ctp-red: 237, 135, 150;
--ctp-maroon: 238, 153, 160;
--ctp-peach: 245, 169, 127;
--ctp-yellow: 238, 212, 159;
--ctp-green: 166, 218, 149;
--ctp-teal: 139, 213, 202;
--ctp-sky: 145, 215, 227;
--ctp-sapphire: 125, 196, 228;
--ctp-blue: 138, 173, 244;
--ctp-lavender: 183, 189, 248;
--ctp-text: 197, 207, 245;
--ctp-subtext1: 179, 188, 224;
--ctp-subtext0: 161, 170, 203;
--ctp-overlay2: 143, 151, 183;
--ctp-overlay1: 125, 132, 162;
--ctp-overlay0: 108, 114, 141;
--ctp-surface2: 90, 95, 120;
--ctp-surface1: 72, 76, 100;
--ctp-surface0: 54, 58, 79;
--ctp-base: 36, 39, 58;
--ctp-mantle: 30, 32, 48;
--ctp-crust: 24, 25, 38;
@include utils.ctp-rgb-vars(macchiato);
@include utils.ctp-hsl-vars(macchiato);
}

// custom check box checked image
Expand Down
Loading

0 comments on commit 64487bb

Please sign in to comment.