clone/logseq
1
0
Fork 0
mirror of https://github.com/logseq/logseq.git synced 2026-04-24 22:25:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

enhance(ui): refator the accent color for the tippy content

Browse Source
This commit is contained in:
charlie
2024-01-04 15:55:50 +08:00
parent 3c26fbfe07
commit 9856f32f34
6 changed files with 207 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/ui/src/colors.css
View File

@@ -12,6 +12,21 @@ html {
--lx-accent-10: var(--rx-logseq-10);
--lx-accent-11: var(--rx-logseq-11);
--lx-accent-12: var(--rx-logseq-12);
&[data-theme=light] {
--lx-gray-01: var(--rx-gray-01);
--lx-gray-02: var(--rx-gray-02);
--lx-gray-03: var(--rx-gray-03);
--lx-gray-04: var(--rx-gray-04);
--lx-gray-05: var(--rx-gray-05);
--lx-gray-06: var(--rx-gray-06);
--lx-gray-07: var(--rx-gray-07);
--lx-gray-08: var(--rx-gray-08);
--lx-gray-09: var(--rx-gray-09);
--lx-gray-10: var(--rx-gray-10);
--lx-gray-11: var(--rx-gray-11);
--lx-gray-12: var(--rx-gray-12);
}
}
&[data-color=tomato] {

180
packages/ui/src/vars-classic.css Normal file
View File

@@ -0,0 +1,180 @@
:root {
--ls-tag-text-opacity: 0.8;
--ls-tag-text-hover-opacity: 1;
--ls-page-text-size: 1em;
--ls-page-title-size: 36px;
--ls-main-content-max-width: 810px;
--ls-main-content-max-width-wide: 1280px;
--ls-font-family: Inter;
--ls-scrollbar-width: 6px;
--ls-border-radius-low: 4px;
--ls-border-radius-medium: 8px;
--ls-headbar-height: 3rem;
--ls-headbar-inner-top-padding: 0px;
--ls-left-sidebar-width: 246px;
--ls-left-sidebar-sm-width: 74vw;
--ls-left-sidebar-nav-btn-size: 38px;
--ls-native-kb-height: 0px;
--ls-error-color: var(--color-red-500);
--ls-warning-color: var(--color-orange-500);
--ls-success-color: var(--color-green-500);
--ls-highlight-color-default: var(--ls-secondary-background-color);
}
.dark-theme,
html[data-theme='dark'] {
--ls-primary-background-color: #002b36;
--ls-secondary-background-color: #023643;
--ls-tertiary-background-color: #08404f;
--ls-quaternary-background-color: #094b5a;
--ls-table-tr-even-background-color: #03333f;
--ls-active-primary-color: #8ec2c2;
--ls-active-secondary-color: #d0e8e8;
--ls-block-properties-background-color: #06323e;
--ls-page-properties-background-color: #06323e;
--ls-block-ref-link-text-color: #1a6376;
--ls-border-color: #0e5263;
--ls-secondary-border-color: #126277;
--ls-tertiary-border-color: rgba(0, 2, 0, 0.1);
--ls-guideline-color: #0b4a5a;
--ls-menu-hover-color: var(--ls-secondary-background-color);
--ls-primary-text-color: #a4b5b6;
--ls-secondary-text-color: #dfdfdf;
--ls-title-text-color: #93a1a1;
--ls-link-text-color: rgb(138, 187, 187);
--ls-link-text-hover-color: var(--ls-active-secondary-color);
--ls-link-ref-text-color: var(--ls-link-text-color);
--ls-link-ref-text-hover-color: var(--ls-link-text-hover-color);
--ls-tag-text-color: var(--ls-link-text-color);
--ls-tag-text-hover-color: var(--ls-link-text-hover-color);
--ls-slide-background-color: var(--ls-primary-background-color);
--ls-block-bullet-border-color: #0f4958;
--ls-block-bullet-color: #608e91;
--ls-block-highlight-color: #0a3d4b;
--ls-selection-background-color: #338fff;
--ls-selection-text-color: #fff;
--ls-page-checkbox-color: #6093a0;
--ls-page-checkbox-border-color: var(--ls-primary-background-color);
--ls-page-blockquote-color: var(--ls-primary-text-color);
--ls-page-blockquote-bg-color: var(--ls-secondary-background-color);
--ls-page-blockquote-border-color: var(--ls-border-color);
--ls-page-mark-color: #262626;
--ls-page-mark-bg-color: #fef3ac;
--ls-page-inline-code-color: var(--ls-primary-text-color);
--ls-page-inline-code-bg-color: #01222a;
--ls-scrollbar-foreground-color: #11505f;
--ls-scrollbar-background-color: rgba(30, 60, 67, 0.1);
--ls-scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.2);
--ls-cloze-text-color: #8fbc8f;
--ls-icon-color: var(--ls-link-text-color);
--ls-search-icon-color: var(--ls-primary-text-color);
--ls-search-icon-hover-color: var(--ls-secondary-text-color);
--ls-a-chosen-bg: var(--ls-quaternary-background-color);
--ls-pie-bg-color: #01303b;
--ls-pie-fg-color: #0b5869;
--ls-highlight-color-gray: var(--color-gray-900);
--ls-highlight-color-red: var(--color-red-900);
--ls-highlight-color-yellow: var(--color-yellow-900);
--ls-highlight-color-green: var(--color-green-900);
--ls-highlight-color-blue: var(--color-blue-900);
--ls-highlight-color-purple: var(--color-purple-900);
--ls-highlight-color-pink: var(--color-pink-900);
--ls-error-text-color: var(--color-red-400);
--ls-error-background-color: var(--color-red-900);
--ls-warning-text-color: var(--color-yellow-400);
--ls-warning-background-color: var(--color-yellow-900);
--ls-success-text-color: var(--color-green-100);
--ls-success-background-color: var(--color-green-900);
--ls-focus-ring-color: rgba(18, 98, 119, 0.5);
--ls-header-button-background: #dee4ea;
--ls-left-sidebar-text-color: var(--lx-gray-11);
--ls-button-background-hsl: 200 98% 35%;
--ls-button-background: hsl(var(--ls-button-background-hsl));
--color-level-1: var(--ls-secondary-background-color);
--color-level-2: var(--ls-tertiary-background-color);
--color-level-3: var(--ls-quaternary-background-color);
--color-level-4: #195d6c;
--color-level-5: #266c7d;
--color-level-6: #3a7e8e;
}
/* You should always use .light-theme for light mode, the .white-theme is just for backward compatibility.
See: https://github.com/logseq/logseq/pull/4652. */
.white-theme,
.light-theme,
html[data-theme='light'] {
--ls-primary-background-color: #ffffff;
--ls-secondary-background-color: #f7f7f7;
--ls-tertiary-background-color: #eaeaea;
--ls-quaternary-background-color: #dcdcdc;
--ls-table-tr-even-background-color: var(--ls-secondary-background-color);
--ls-active-primary-color: rgb(0, 105, 182);
--ls-active-secondary-color: #00477c;
--ls-block-properties-background-color: var(--ls-secondary-background-color);
--ls-page-properties-background-color: var(--ls-secondary-background-color);
--ls-block-ref-link-text-color: #d8e1e8;
--ls-border-color: #ccc;
--ls-secondary-border-color: #e2e2e2;
--ls-tertiary-border-color: rgba(200, 200, 200, 0.3);
--ls-guideline-color: rgba(46, 27, 5, 0.08);
--ls-menu-hover-color: var(--ls-a-chosen-bg);
--ls-primary-text-color: #433f38;
--ls-secondary-text-color: #161e2e;
--ls-title-text-color: var(--ls-header-button-background);
--ls-link-text-color: #106ba3;
--ls-link-text-hover-color: #1a537c;
--ls-link-ref-text-color: var(--ls-link-text-color);
--ls-link-ref-text-hover-color: var(--ls-link-text-hover-color);
--ls-tag-text-color: var(--ls-link-ref-text-color);
--ls-tag-text-hover-color: var(--ls-link-ref-text-hover-color);
--ls-slide-background-color: #fff;
--ls-block-bullet-border-color: #dedede;
--ls-block-bullet-color: rgba(67, 63, 56, 0.25);
--ls-block-highlight-color: #c0e6fd;
--ls-selection-background-color: #e4f2ff;
--ls-selection-text-color: var(--ls-secondary-text-color);
--ls-page-checkbox-color: #9dbbd8;
--ls-page-checkbox-border-color: var(--ls-page-checkbox-color);
--ls-page-blockquote-color: var(--ls-primary-text-color);
--ls-page-blockquote-bg-color: var(--lx-gray-03, #fbfaf8);
--ls-page-blockquote-border-color: var(--lx-gray-08, #799bbc);
--ls-page-mark-color: #262626;
--ls-page-mark-bg-color: #fef3ac;
--ls-page-inline-code-bg-color: var(--ls-secondary-background-color);
--ls-page-inline-code-color: var(--ls-primary-text-color);
--ls-scrollbar-foreground-color: rgba(0, 0, 0, 0.1);
--ls-scrollbar-background-color: rgba(0, 0, 0, 0.05);
--ls-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.2);
--ls-cloze-text-color: #0000cd;
--ls-icon-color: #646464;
--ls-search-icon-color: var(--ls-primary-text-color);
--ls-search-icon-hover-color: var(--ls-secondary-text-color);
--ls-a-chosen-bg: var(--ls-quaternary-background-color);
--ls-pie-bg-color: #e1e1e1;
--ls-pie-fg-color: #0a4a5d;
--ls-highlight-color-gray: var(--color-gray-100);
--ls-highlight-color-red: var(--color-red-100);
--ls-highlight-color-yellow: var(--color-yellow-100);
--ls-highlight-color-green: var(--color-green-100);
--ls-highlight-color-blue: var(--color-blue-100);
--ls-highlight-color-purple: var(--color-purple-100);
--ls-highlight-color-pink: var(--color-pink-100);
--ls-error-text-color: var(--color-red-600);
--ls-error-background-color: var(--color-red-100);
--ls-warning-text-color: var(--color-yellow-700);
--ls-warning-background-color: var(--color-yellow-100);
--ls-success-text-color: var(--color-green-800);
--ls-success-background-color: var(--color-green-100);
--ls-focus-ring-color: rgba(66, 133, 244, 0.5);
--ls-header-button-background: rgba(15, 20, 25, 1);
--ls-left-sidebar-text-color: var(--lx-gray-12);
--ls-button-background-hsl: 200 98% 35%;
--ls-button-background: hsl(var(--ls-button-background-hsl));
--color-level-1: var(--ls-secondary-background-color);
--color-level-2: var(--ls-tertiary-background-color);
--color-level-3: var(--ls-quaternary-background-color);
--color-level-4: #d0e6fa;
--color-level-5: #bbdaf6;
--color-level-6: #a7cef1;
}

181
src/main/frontend/common.css
View File

@@ -1,26 +1,3 @@
:root {
--ls-tag-text-opacity: 0.8;
--ls-tag-text-hover-opacity: 1;
--ls-page-text-size: 1em;
--ls-page-title-size: 36px;
--ls-main-content-max-width: 810px;
--ls-main-content-max-width-wide: 1280px;
--ls-font-family: Inter;
--ls-scrollbar-width: 6px;
--ls-border-radius-low: 4px;
--ls-border-radius-medium: 8px;
--ls-headbar-height: 3rem;
--ls-headbar-inner-top-padding: 0px;
--ls-left-sidebar-width: 246px;
--ls-left-sidebar-sm-width: 74vw;
--ls-left-sidebar-nav-btn-size: 38px;
--ls-native-kb-height: 0px;
--ls-error-color: var(--color-red-500);
--ls-warning-color: var(--color-orange-500);
--ls-success-color: var(--color-green-500);
--ls-highlight-color-default: var(--ls-secondary-background-color);
}
@media (prefers-color-scheme: dark) {
html {
background-color: #002b36;
@@ -37,164 +14,6 @@
}
}
.dark-theme,
html[data-theme='dark'] {
--ls-primary-background-color: #002b36;
--ls-secondary-background-color: #023643;
--ls-tertiary-background-color: #08404f;
--ls-quaternary-background-color: #094b5a;
--ls-table-tr-even-background-color: #03333f;
--ls-active-primary-color: #8ec2c2;
--ls-active-secondary-color: #d0e8e8;
--ls-block-properties-background-color: #06323e;
--ls-page-properties-background-color: #06323e;
--ls-block-ref-link-text-color: #1a6376;
--ls-border-color: #0e5263;
--ls-secondary-border-color: #126277;
--ls-tertiary-border-color: rgba(0, 2, 0, 0.1);
--ls-guideline-color: #0b4a5a;
--ls-menu-hover-color: var(--ls-secondary-background-color);
--ls-primary-text-color: #a4b5b6;
--ls-secondary-text-color: #dfdfdf;
--ls-title-text-color: #93a1a1;
--ls-link-text-color: rgb(138, 187, 187);
--ls-link-text-hover-color: var(--ls-active-secondary-color);
--ls-link-ref-text-color: var(--ls-link-text-color);
--ls-link-ref-text-hover-color: var(--ls-link-text-hover-color);
--ls-tag-text-color: var(--ls-link-text-color);
--ls-tag-text-hover-color: var(--ls-link-text-hover-color);
--ls-slide-background-color: var(--ls-primary-background-color);
--ls-block-bullet-border-color: #0f4958;
--ls-block-bullet-color: #608e91;
--ls-block-highlight-color: #0a3d4b;
--ls-selection-background-color: #338fff;
--ls-selection-text-color: #fff;
--ls-page-checkbox-color: #6093a0;
--ls-page-checkbox-border-color: var(--ls-primary-background-color);
--ls-page-blockquote-color: var(--ls-primary-text-color);
--ls-page-blockquote-bg-color: var(--ls-secondary-background-color);
--ls-page-blockquote-border-color: var(--ls-border-color);
--ls-page-mark-color: #262626;
--ls-page-mark-bg-color: #fef3ac;
--ls-page-inline-code-color: var(--ls-primary-text-color);
--ls-page-inline-code-bg-color: #01222a;
--ls-scrollbar-foreground-color: #11505f;
--ls-scrollbar-background-color: rgba(30, 60, 67, 0.1);
--ls-scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.2);
--ls-cloze-text-color: #8fbc8f;
--ls-icon-color: var(--ls-link-text-color);
--ls-search-icon-color: var(--ls-primary-text-color);
--ls-search-icon-hover-color: var(--ls-secondary-text-color);
--ls-a-chosen-bg: var(--ls-quaternary-background-color);
--ls-pie-bg-color: #01303b;
--ls-pie-fg-color: #0b5869;
--ls-highlight-color-gray: var(--color-gray-900);
--ls-highlight-color-red: var(--color-red-900);
--ls-highlight-color-yellow: var(--color-yellow-900);
--ls-highlight-color-green: var(--color-green-900);
--ls-highlight-color-blue: var(--color-blue-900);
--ls-highlight-color-purple: var(--color-purple-900);
--ls-highlight-color-pink: var(--color-pink-900);
--ls-error-text-color: var(--color-red-400);
--ls-error-background-color: var(--color-red-900);
--ls-warning-text-color: var(--color-yellow-400);
--ls-warning-background-color: var(--color-yellow-900);
--ls-success-text-color: var(--color-green-100);
--ls-success-background-color: var(--color-green-900);
--ls-focus-ring-color: rgba(18, 98, 119, 0.5);
--ls-header-button-background: #dee4ea;
--ls-left-sidebar-text-color: var(--lx-gray-11);
--ls-button-background-hsl: 200 98% 35%;
--ls-button-background: hsl(var(--ls-button-background-hsl));
--color-level-1: var(--ls-secondary-background-color);
--color-level-2: var(--ls-tertiary-background-color);
--color-level-3: var(--ls-quaternary-background-color);
--color-level-4: #195d6c;
--color-level-5: #266c7d;
--color-level-6: #3a7e8e;
}
/* You should always use .light-theme for light mode, the .white-theme is just for backward compatibility.
See: https://github.com/logseq/logseq/pull/4652. */
.white-theme,
.light-theme,
html[data-theme='light'] {
--ls-primary-background-color: #ffffff;
--ls-secondary-background-color: #f7f7f7;
--ls-tertiary-background-color: #eaeaea;
--ls-quaternary-background-color: #dcdcdc;
--ls-table-tr-even-background-color: var(--ls-secondary-background-color);
--ls-active-primary-color: rgb(0, 105, 182);
--ls-active-secondary-color: #00477c;
--ls-block-properties-background-color: var(--ls-secondary-background-color);
--ls-page-properties-background-color: var(--ls-secondary-background-color);
--ls-block-ref-link-text-color: #d8e1e8;
--ls-border-color: #ccc;
--ls-secondary-border-color: #e2e2e2;
--ls-tertiary-border-color: rgba(200, 200, 200, 0.3);
--ls-guideline-color: rgba(46, 27, 5, 0.08);
--ls-menu-hover-color: var(--ls-a-chosen-bg);
--ls-primary-text-color: #433f38;
--ls-secondary-text-color: #161e2e;
--ls-title-text-color: var(--ls-header-button-background);
--ls-link-text-color: #106ba3;
--ls-link-text-hover-color: #1a537c;
--ls-link-ref-text-color: var(--ls-link-text-color);
--ls-link-ref-text-hover-color: var(--ls-link-text-hover-color);
--ls-tag-text-color: var(--ls-link-ref-text-color);
--ls-tag-text-hover-color: var(--ls-link-ref-text-hover-color);
--ls-slide-background-color: #fff;
--ls-block-bullet-border-color: #dedede;
--ls-block-bullet-color: rgba(67, 63, 56, 0.25);
--ls-block-highlight-color: #c0e6fd;
--ls-selection-background-color: #e4f2ff;
--ls-selection-text-color: var(--ls-secondary-text-color);
--ls-page-checkbox-color: #9dbbd8;
--ls-page-checkbox-border-color: var(--ls-page-checkbox-color);
--ls-page-blockquote-color: var(--ls-primary-text-color);
--ls-page-blockquote-bg-color: var(--lx-gray-03, #fbfaf8);
--ls-page-blockquote-border-color: var(--lx-gray-08, #799bbc);
--ls-page-mark-color: #262626;
--ls-page-mark-bg-color: #fef3ac;
--ls-page-inline-code-bg-color: var(--ls-secondary-background-color);
--ls-page-inline-code-color: var(--ls-primary-text-color);
--ls-scrollbar-foreground-color: rgba(0, 0, 0, 0.1);
--ls-scrollbar-background-color: rgba(0, 0, 0, 0.05);
--ls-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.2);
--ls-cloze-text-color: #0000cd;
--ls-icon-color: #646464;
--ls-search-icon-color: var(--ls-primary-text-color);
--ls-search-icon-hover-color: var(--ls-secondary-text-color);
--ls-a-chosen-bg: var(--ls-quaternary-background-color);
--ls-pie-bg-color: #e1e1e1;
--ls-pie-fg-color: #0a4a5d;
--ls-highlight-color-gray: var(--color-gray-100);
--ls-highlight-color-red: var(--color-red-100);
--ls-highlight-color-yellow: var(--color-yellow-100);
--ls-highlight-color-green: var(--color-green-100);
--ls-highlight-color-blue: var(--color-blue-100);
--ls-highlight-color-purple: var(--color-purple-100);
--ls-highlight-color-pink: var(--color-pink-100);
--ls-error-text-color: var(--color-red-600);
--ls-error-background-color: var(--color-red-100);
--ls-warning-text-color: var(--color-yellow-700);
--ls-warning-background-color: var(--color-yellow-100);
--ls-success-text-color: var(--color-green-800);
--ls-success-background-color: var(--color-green-100);
--ls-focus-ring-color: rgba(66, 133, 244, 0.5);
--ls-header-button-background: rgba(15, 20, 25, 1);
--ls-left-sidebar-text-color: var(--lx-gray-12);
--ls-button-background-hsl: 200 98% 35%;
--ls-button-background: hsl(var(--ls-button-background-hsl));
--color-level-1: var(--ls-secondary-background-color);
--color-level-2: var(--ls-tertiary-background-color);
--color-level-3: var(--ls-quaternary-background-color);
--color-level-4: #d0e6fa;
--color-level-5: #bbdaf6;
--color-level-6: #a7cef1;
}
html:not(.is-native-android) {
font-family: var(--ls-font-family), sans-serif, system-ui, -apple-system,
BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',

2
src/main/frontend/components/block.css
View File

@@ -296,11 +296,9 @@
}
.page-ref {
--lx-text-override: var(--ls-link-ref-text-color);
@apply text-accent-11;
&:hover {
--lx-text-override: var(--ls-link-ref-text-hover-color);
@apply text-accent-12;
}
}

19
src/main/frontend/tippy-tooltip.css
View File

@@ -5,7 +5,7 @@
.tippy-popper[x-placement^=top] [x-arrow],
.tippy-popper[x-placement^=top] [x-arrow].arrow-small,
.tippy-popper[x-placement^=top] [x-arrow].arrow-big {
border-top-color: var(--ls-quaternary-background-color);
border-top-color: var(--ls-tertiary-background-color);
}
.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-circle],
@@ -25,7 +25,7 @@
.tippy-popper[x-placement^=bottom] [x-arrow],
.tippy-popper[x-placement^=bottom] [x-arrow].arrow-small,
.tippy-popper[x-placement^=bottom] [x-arrow].arrow-big {
border-bottom-color: var(--ls-quaternary-background-color);
border-bottom-color: var(--ls-tertiary-background-color);
}
.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow],
@@ -37,7 +37,7 @@
.tippy-popper[x-placement^=left] [x-arrow],
.tippy-popper[x-placement^=left] [x-arrow].arrow-small,
.tippy-popper[x-placement^=left] [x-arrow].arrow-big {
border-left-color: var(--ls-quaternary-background-color);
border-left-color: var(--ls-tertiary-background-color);
}
.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow],
@@ -49,21 +49,22 @@
.tippy-popper[x-placement^=right] [x-arrow],
.tippy-popper[x-placement^=right] [x-arrow].arrow-small,
.tippy-popper[x-placement^=right] [x-arrow].arrow-big {
border-right-color: var(--ls-quaternary-background-color);
border-right-color: var(--ls-tertiary-background-color);
}
.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow],
.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-small,
.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-big {
border-right-color: var(--ls-secondary-background-color);
border-right-color: var(--ls-tertiary-background-color);
}
.tippy-tooltip {
@apply shadow border border-gray-07 dark:border-gray-05 px-2 py-1;
color: var(--ls-primary-text-color);
font-size: inherit;
padding: 0;
will-change: auto;
background-color: var(--ls-quaternary-background-color);
background-color: var(--ls-tertiary-background-color);
}
.tippy-tooltip [x-circle] {
@@ -75,7 +76,9 @@
}
.tippy-wrapper {
background-color: var(--ls-quaternary-background-color);
background-color: var(--ls-tertiary-background-color);
overflow: visible;
border-radius: 8px;
}
.tippy-hover {

1
tailwind.all.css
View File

@@ -5,6 +5,7 @@
@import "packages/ui/src/radix.css";
@import "packages/ui/src/radix-hsl.css";
@import "packages/ui/src/vars-classic.css";
@import "packages/ui/src/colors.css";
@import "packages/ui/src/index.css";
@import "resources/css/shui.css";