mirror of https://github.com/logseq/logseq
enhance(ui): polish whiteboard colors for the non-accent colors
parent
1bfa802a56
commit
976885a34a
|
@ -119,8 +119,8 @@ html {
|
|||
--ls-link-text-color: var(--rx-tomato-11);
|
||||
--ls-link-text-hover-color: var(--rx-tomato-12);
|
||||
--ls-block-ref-link-text-color: var(--rx-tomato-09);
|
||||
--ls-secondary-text-color: var(--rx-mauve-12);
|
||||
--ls-primary-text-color: var(--rx-mauve-11);
|
||||
--ls-secondary-text-color: var(--rx-mauve-11);
|
||||
--ls-primary-text-color: var(--rx-mauve-12);
|
||||
--ls-border-color: var(--rx-mauve-05);
|
||||
--ls-secondary-border-color: var(--rx-tomato-05);
|
||||
--ls-page-checkbox-color: var(--rx-mauve-07);
|
||||
|
@ -205,8 +205,8 @@ html {
|
|||
--ls-link-text-color: var(--rx-red-11);
|
||||
--ls-link-text-hover-color: var(--rx-red-12);
|
||||
--ls-block-ref-link-text-color: var(--rx-red-09);
|
||||
--ls-secondary-text-color: var(--rx-mauve-12);
|
||||
--ls-primary-text-color: var(--rx-mauve-11);
|
||||
--ls-secondary-text-color: var(--rx-mauve-11);
|
||||
--ls-primary-text-color: var(--rx-mauve-12);
|
||||
--ls-border-color: var(--rx-mauve-05);
|
||||
--ls-secondary-border-color: var(--rx-red-05);
|
||||
--ls-page-checkbox-color: var(--rx-mauve-07);
|
||||
|
@ -290,8 +290,8 @@ html {
|
|||
--ls-link-text-color: var(--rx-blue-11);
|
||||
--ls-link-text-hover-color: var(--rx-blue-12);
|
||||
--ls-block-ref-link-text-color: var(--rx-blue-09);
|
||||
--ls-secondary-text-color: var(--rx-slate-12);
|
||||
--ls-primary-text-color: var(--rx-slate-11);
|
||||
--ls-secondary-text-color: var(--rx-slate-11);
|
||||
--ls-primary-text-color: var(--rx-slate-12);
|
||||
--ls-border-color: var(--rx-slate-05);
|
||||
--ls-secondary-border-color: var(--rx-blue-05);
|
||||
--ls-page-checkbox-color: var(--rx-slate-07);
|
||||
|
@ -376,8 +376,8 @@ html {
|
|||
--ls-link-text-color: var(--rx-crimson-11);
|
||||
--ls-link-text-hover-color: var(--rx-crimson-12);
|
||||
--ls-block-ref-link-text-color: var(--rx-crimson-09);
|
||||
--ls-secondary-text-color: var(--rx-mauve-12);
|
||||
--ls-primary-text-color: var(--rx-mauve-11);
|
||||
--ls-secondary-text-color: var(--rx-mauve-11);
|
||||
--ls-primary-text-color: var(--rx-mauve-12);
|
||||
--ls-border-color: var(--rx-mauve-05);
|
||||
--ls-secondary-border-color: var(--rx-crimson-05);
|
||||
--ls-page-checkbox-color: var(--rx-mauve-07);
|
||||
|
@ -460,8 +460,8 @@ html {
|
|||
--ls-link-text-color: var(--rx-pink-11);
|
||||
--ls-link-text-hover-color: var(--rx-pink-12);
|
||||
--ls-block-ref-link-text-color: var(--rx-pink-09);
|
||||
--ls-secondary-text-color: var(--rx-mauve-12);
|
||||
--ls-primary-text-color: var(--rx-mauve-11);
|
||||
--ls-secondary-text-color: var(--rx-mauve-11);
|
||||
--ls-primary-text-color: var(--rx-mauve-12);
|
||||
--ls-border-color: var(--rx-mauve-05);
|
||||
--ls-secondary-border-color: var(--rx-pink-05);
|
||||
--ls-page-checkbox-color: var(--rx-mauve-07);
|
||||
|
@ -544,8 +544,8 @@ html {
|
|||
--ls-link-text-color: var(--rx-plum-11);
|
||||
--ls-link-text-hover-color: var(--rx-plum-12);
|
||||
--ls-block-ref-link-text-color: var(--rx-plum-09);
|
||||
--ls-secondary-text-color: var(--rx-mauve-12);
|
||||
--ls-primary-text-color: var(--rx-mauve-11);
|
||||
--ls-secondary-text-color: var(--rx-mauve-11);
|
||||
--ls-primary-text-color: var(--rx-mauve-12);
|
||||
--ls-border-color: var(--rx-mauve-05);
|
||||
--ls-secondary-border-color: var(--rx-plum-05);
|
||||
--ls-page-checkbox-color: var(--rx-mauve-07);
|
||||
|
@ -628,8 +628,8 @@ html {
|
|||
--ls-link-text-color: var(--rx-purple-11);
|
||||
--ls-link-text-hover-color: var(--rx-purple-12);
|
||||
--ls-block-ref-link-text-color: var(--rx-purple-09);
|
||||
--ls-secondary-text-color: var(--rx-mauve-12);
|
||||
--ls-primary-text-color: var(--rx-mauve-11);
|
||||
--ls-secondary-text-color: var(--rx-mauve-11);
|
||||
--ls-primary-text-color: var(--rx-mauve-12);
|
||||
--ls-border-color: var(--rx-mauve-05);
|
||||
--ls-secondary-border-color: var(--rx-purple-05);
|
||||
--ls-page-checkbox-color: var(--rx-mauve-07);
|
||||
|
@ -712,8 +712,8 @@ html {
|
|||
--ls-link-text-color: var(--rx-violet-11);
|
||||
--ls-link-text-hover-color: var(--rx-violet-12);
|
||||
--ls-block-ref-link-text-color: var(--rx-violet-09);
|
||||
--ls-secondary-text-color: var(--rx-mauve-12);
|
||||
--ls-primary-text-color: var(--rx-mauve-11);
|
||||
--ls-secondary-text-color: var(--rx-mauve-11);
|
||||
--ls-primary-text-color: var(--rx-mauve-12);
|
||||
--ls-border-color: var(--rx-mauve-05);
|
||||
--ls-secondary-border-color: var(--rx-violet-05);
|
||||
--ls-page-checkbox-color: var(--rx-mauve-07);
|
||||
|
@ -796,8 +796,8 @@ html {
|
|||
--ls-link-text-color: var(--rx-indigo-11);
|
||||
--ls-link-text-hover-color: var(--rx-indigo-12);
|
||||
--ls-block-ref-link-text-color: var(--rx-indigo-09);
|
||||
--ls-secondary-text-color: var(--rx-slate-12);
|
||||
--ls-primary-text-color: var(--rx-slate-11);
|
||||
--ls-secondary-text-color: var(--rx-slate-11);
|
||||
--ls-primary-text-color: var(--rx-slate-12);
|
||||
--ls-border-color: var(--rx-slate-05);
|
||||
--ls-secondary-border-color: var(--rx-indigo-05);
|
||||
--ls-page-checkbox-color: var(--rx-slate-07);
|
||||
|
@ -882,8 +882,8 @@ html {
|
|||
--ls-link-text-color: var(--rx-cyan-11);
|
||||
--ls-link-text-hover-color: var(--rx-cyan-12);
|
||||
--ls-block-ref-link-text-color: var(--rx-cyan-09);
|
||||
--ls-secondary-text-color: var(--rx-slate-12);
|
||||
--ls-primary-text-color: var(--rx-slate-11);
|
||||
--ls-secondary-text-color: var(--rx-slate-11);
|
||||
--ls-primary-text-color: var(--rx-slate-12);
|
||||
--ls-border-color: var(--rx-slate-05);
|
||||
--ls-secondary-border-color: var(--rx-cyan-05);
|
||||
--ls-page-checkbox-color: var(--rx-slate-07);
|
||||
|
@ -966,8 +966,8 @@ html {
|
|||
--ls-link-text-color: var(--rx-teal-11);
|
||||
--ls-link-text-hover-color: var(--rx-teal-12);
|
||||
--ls-block-ref-link-text-color: var(--rx-teal-09);
|
||||
--ls-secondary-text-color: var(--rx-sage-12);
|
||||
--ls-primary-text-color: var(--rx-sage-11);
|
||||
--ls-secondary-text-color: var(--rx-sage-11);
|
||||
--ls-primary-text-color: var(--rx-sage-12);
|
||||
--ls-border-color: var(--rx-sage-05);
|
||||
--ls-secondary-border-color: var(--rx-teal-05);
|
||||
--ls-page-checkbox-color: var(--rx-sage-07);
|
||||
|
@ -1051,8 +1051,8 @@ html {
|
|||
--ls-link-text-color: var(--rx-green-11);
|
||||
--ls-link-text-hover-color: var(--rx-green-12);
|
||||
--ls-block-ref-link-text-color: var(--rx-green-09);
|
||||
--ls-secondary-text-color: var(--rx-sage-12);
|
||||
--ls-primary-text-color: var(--rx-sage-11);
|
||||
--ls-secondary-text-color: var(--rx-sage-11);
|
||||
--ls-primary-text-color: var(--rx-sage-12);
|
||||
--ls-border-color: var(--rx-sage-05);
|
||||
--ls-secondary-border-color: var(--rx-green-05);
|
||||
--ls-page-checkbox-color: var(--rx-sage-07);
|
||||
|
@ -1135,8 +1135,8 @@ html {
|
|||
--ls-link-text-color: var(--rx-grass-11);
|
||||
--ls-link-text-hover-color: var(--rx-grass-12);
|
||||
--ls-block-ref-link-text-color: var(--rx-grass-09);
|
||||
--ls-secondary-text-color: var(--rx-olive-12);
|
||||
--ls-primary-text-color: var(--rx-olive-11);
|
||||
--ls-secondary-text-color: var(--rx-olive-11);
|
||||
--ls-primary-text-color: var(--rx-olive-12);
|
||||
--ls-border-color: var(--rx-olive-05);
|
||||
--ls-secondary-border-color: var(--rx-grass-05);
|
||||
--ls-page-checkbox-color: var(--rx-olive-07);
|
||||
|
@ -1219,8 +1219,8 @@ html {
|
|||
--ls-link-text-color: var(--rx-orange-11);
|
||||
--ls-link-text-hover-color: var(--rx-orange-12);
|
||||
--ls-block-ref-link-text-color: var(--rx-orange-09);
|
||||
--ls-secondary-text-color: var(--rx-sand-12);
|
||||
--ls-primary-text-color: var(--rx-sand-11);
|
||||
--ls-secondary-text-color: var(--rx-sand-11);
|
||||
--ls-primary-text-color: var(--rx-sand-12);
|
||||
--ls-border-color: var(--rx-sand-05);
|
||||
--ls-secondary-border-color: var(--rx-orange-05);
|
||||
--ls-page-checkbox-color: var(--rx-sand-07);
|
||||
|
@ -1304,8 +1304,8 @@ html {
|
|||
--ls-link-text-color: var(--rx-brown-11);
|
||||
--ls-link-text-hover-color: var(--rx-brown-12);
|
||||
--ls-block-ref-link-text-color: var(--rx-brown-09);
|
||||
--ls-secondary-text-color: var(--rx-sand-12);
|
||||
--ls-primary-text-color: var(--rx-sand-11);
|
||||
--ls-secondary-text-color: var(--rx-sand-11);
|
||||
--ls-primary-text-color: var(--rx-sand-12);
|
||||
--ls-border-color: var(--rx-sand-05);
|
||||
--ls-secondary-border-color: var(--rx-brown-05);
|
||||
--ls-page-checkbox-color: var(--rx-sand-07);
|
||||
|
|
|
@ -94,6 +94,13 @@ html {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tl-container {
|
||||
--ls-primary-background-color: hsl(var(--background));
|
||||
--ls-secondary-background-color: var(--rx-gray-01);
|
||||
--ls-tertiary-background-color: var(--rx-gray-03);
|
||||
--ls-quaternary-background-color: var(--rx-gray-05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -174,6 +181,12 @@ html[data-theme=dark] {
|
|||
opacity: .6;
|
||||
}
|
||||
}
|
||||
|
||||
.tl-button {
|
||||
&:hover {
|
||||
@apply bg-accent-02;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -188,7 +188,7 @@
|
|||
(fn [e]
|
||||
(util/stop e)
|
||||
(whiteboard-handler/create-new-whiteboard-and-redirect!))}
|
||||
(ui/icon "plus")
|
||||
(ui/icon "plus" {:size 32})
|
||||
[:span.dashboard-create-card-caption.select-none
|
||||
(t :whiteboard/dashboard-card-new-whiteboard)]])
|
||||
|
||||
|
|
|
@ -44,19 +44,30 @@ h1.title.whiteboard-dashboard-title {
|
|||
}
|
||||
|
||||
.dashboard-preview-card {
|
||||
@apply transition;
|
||||
border: 1px solid var(--ls-border-color);
|
||||
@apply transition border;
|
||||
}
|
||||
|
||||
.dashboard-create-card {
|
||||
@apply items-center justify-center relative;
|
||||
background-color: or(--ls-create-whiteboard-background, --lx-gray-02, --ls-secondary-background-color);
|
||||
@apply items-center justify-center relative border opacity-90 hover:shadow-lg;
|
||||
|
||||
background-color: var(--lx-gray-02, var(--ls-secondary-background-color, var(--rx-gray-02)));
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid transparent;
|
||||
|
||||
.ls-icon-plus, .dashboard-create-card-caption {
|
||||
@apply opacity-60;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@apply opacity-100;
|
||||
|
||||
.ls-icon-plus, .dashboard-create-card-caption {
|
||||
@apply opacity-90;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dark .dashboard-create-card {
|
||||
background-color: or(--ls-create-whiteboard-background, --lx-gray-03, --ls-secondary-background-color);
|
||||
background-color: var(--lx-gray-03, var(--ls-secondary-background-color, var(--rx-gray-03)));
|
||||
}
|
||||
|
||||
.dashboard-create-card i {
|
||||
|
@ -72,23 +83,14 @@ h1.title.whiteboard-dashboard-title {
|
|||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dashboard-create-card:hover {
|
||||
background-color: var(--ls-selection-background-color);
|
||||
box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.1),
|
||||
0 2px 4px -2px rgba(16, 24, 40, 0.06);
|
||||
border: 1px solid var(--ls-page-blockquote-border-color);
|
||||
}
|
||||
|
||||
.dashboard-card-title {
|
||||
@apply px-4 py-3 flex flex-col;
|
||||
gap: 4px;
|
||||
border-bottom: 1px solid var(--ls-border-color);
|
||||
background-color: or(--ls-whiteboard-card-title-background, --lx-gray-02, --ls-secondary-background-color);
|
||||
font-size: 16px;
|
||||
@apply px-4 py-3 flex flex-col gap-1 border-b;
|
||||
|
||||
background-color: var(--lx-gray-02, var(--ls-secondary-background-color, var(--rx-gray-02)));
|
||||
}
|
||||
|
||||
.dark .dashboard-card-title {
|
||||
background-color: or(--ls-whiteboard-card-title-background, --lx-gray-03, --ls-secondary-background-color);
|
||||
background-color: var(--lx-gray-03, var(--ls-secondary-background-color, var(--rx-gray-03)));
|
||||
}
|
||||
|
||||
.dashboard-card-title-name {
|
||||
|
@ -153,11 +155,11 @@ input.tl-text-input {
|
|||
z-index: 2000;
|
||||
gap: 4px;
|
||||
line-height: 1.4;
|
||||
background: or(--ls-whiteboard-title-background, --lx-gray-01, --ls-primary-background-color);
|
||||
background: var(--lx-gray-01, var(--ls-primary-background-color, hsl(var(--background))));
|
||||
}
|
||||
|
||||
.dark .whiteboard-page-title-root {
|
||||
background: or(--ls-whiteboard-title-background, --lx-gray-02, --ls-primary-background-color);
|
||||
background: var(--lx-gray-02, var(--ls-primary-background-color, hsl(var(--background))));
|
||||
}
|
||||
|
||||
.whiteboard-page-title {
|
||||
|
|
|
@ -6,19 +6,19 @@
|
|||
--ls-wb-stroke-color-blue: var(--color-blue-500, blue);
|
||||
--ls-wb-stroke-color-purple: var(--color-purple-500, purple);
|
||||
--ls-wb-stroke-color-pink: var(--color-pink-500, pink);
|
||||
--ls-wb-stroke-color-default: var(--ls-secondary-border-color);
|
||||
--ls-wb-text-color-default: var(--ls-primary-text-color);
|
||||
--ls-wb-background-color-default: var(--ls-tertiary-background-color);
|
||||
--ls-wb-stroke-color-default: var(--ls-secondary-border-color, hsl(var(--border, var(--rx-gray-05-hsl))));
|
||||
--ls-wb-text-color-default: var(--ls-primary-text-color, hsl(var(--primary)));
|
||||
--ls-wb-background-color-default: var(--ls-tertiary-background-color, var(--rx-gray-03));
|
||||
}
|
||||
|
||||
.logseq-tldraw {
|
||||
--color-panel: var(--ls-tertiary-background-color);
|
||||
--color-panel: var(--ls-tertiary-background-color, hsl(var(--secondary)));
|
||||
--color-panel-inverted: var(--ls-secondary-text-color);
|
||||
--color-text: var(--ls-primary-text-color);
|
||||
--color-text-inverted: var(--ls-tertiary-background-color);
|
||||
--color-hover: var(--ls-secondary-background-color);
|
||||
--color-selectedStroke: var(--ls-button-background);
|
||||
--color-selectedFill: hsl(var(--ls-button-background-hsl) / 0.9);
|
||||
--color-hover: var(--ls-secondary-background-color, hsl(var(--secondary)));
|
||||
--color-selectedStroke: var(--ls-button-background, hsl(var(--accent) / 0.9));
|
||||
--color-selectedFill: hsl(var(--ls-button-background-hsl, var(--accent)) / 0.1);
|
||||
--color-selectedContrast: #fff;
|
||||
--shadow-small: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-medium: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
|
@ -167,7 +167,7 @@ html[data-theme='light'] {
|
|||
|
||||
pointer-events: all;
|
||||
position: relative;
|
||||
background-color: or(--logseq-whiteboard-toolbar-background, --lx-gray-03, --ls-secondary-background-color);
|
||||
background-color: var(--lx-gray-03, var(--ls-secondary-background-color, var(--rx-gray-03)));
|
||||
border-radius: 8px;
|
||||
white-space: nowrap;
|
||||
gap: 8px;
|
||||
|
@ -554,7 +554,7 @@ button.tl-select-input-trigger {
|
|||
@apply flex items-center rounded-lg text-base max-w-full;
|
||||
|
||||
min-height: 40px;
|
||||
background-color: var(--ls-secondary-background-color);
|
||||
background-color: var(--ls-secondary-background-color, hsl(var(--background)));
|
||||
padding: 6px 16px;
|
||||
box-shadow: var(--shadow-small);
|
||||
}
|
||||
|
@ -602,6 +602,7 @@ button.tl-select-input-trigger {
|
|||
}
|
||||
|
||||
.tl-quick-search .tl-text-input {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
@ -620,7 +621,7 @@ button.tl-select-input-trigger {
|
|||
@apply absolute left-0 w-full flex z-10;
|
||||
|
||||
top: calc(100% + 12px);
|
||||
background-color: var(--ls-primary-background-color);
|
||||
background-color: var(--ls-primary-background-color, hsl(var(--background)));
|
||||
max-height: 300px;
|
||||
min-width: 460px;
|
||||
box-shadow: var(--shadow-large);
|
||||
|
@ -850,7 +851,7 @@ html[data-theme='dark'] {
|
|||
}
|
||||
|
||||
.tl-toolbar-separator {
|
||||
background-color: var(--ls-border-color);
|
||||
background-color: var(--ls-border-color, var(--rx-gray-06));
|
||||
width: 1px;
|
||||
opacity: 0.9;
|
||||
|
||||
|
|
|
@ -66,15 +66,15 @@ const css = (strings: TemplateStringsArray, ...args: unknown[]) =>
|
|||
)
|
||||
|
||||
const defaultTheme: TLTheme = {
|
||||
accent: 'rgb(255, 0, 0)',
|
||||
accent: 'var(--lx-accent-09, hsl(var(--primary)))',
|
||||
brushFill: 'var(--ls-scrollbar-background-color, rgba(0, 0, 0, .05))',
|
||||
brushStroke: 'var(--ls-scrollbar-thumb-hover-color, rgba(0, 0, 0, .05))',
|
||||
selectStroke: 'var(--color-selectedFill)',
|
||||
selectFill: 'rgba(65, 132, 244, 0.05)',
|
||||
binding: 'rgba(65, 132, 244, 0.5)',
|
||||
background: 'var(--ls-primary-background-color)',
|
||||
foreground: 'var(--ls-primary-text-color)',
|
||||
grid: 'var(--ls-quaternary-background-color)',
|
||||
selectStroke: 'var(--color-selectedStroke)',
|
||||
selectFill: 'var(--color-selectedFill)',
|
||||
binding: 'var(--color-binding, rgba(65, 132, 244, 0.5))',
|
||||
background: 'var(--ls-primary-background-color, hsl(var(--background)))',
|
||||
foreground: 'var(--ls-primary-text-color, hsl(var(--foreground)))',
|
||||
grid: 'var(--ls-quaternary-background-color, hsl(var(--secondary)))',
|
||||
}
|
||||
|
||||
const tlcss = css`
|
||||
|
@ -234,7 +234,7 @@ const tlcss = css`
|
|||
|
||||
.tl-clone-handle:hover {
|
||||
fill: var(--tl-selectStroke);
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tl-clone-handle:hover line {
|
||||
|
|
Loading…
Reference in New Issue