mirror of
https://github.com/bookorbit/bookorbit.git
synced 2026-11-03 00:11:37 -06:00
feat: expand accent palette and replace ThemeToggle with ThemePicker
- add 16 pastel accent colors (coral, peach, butter, lemon, celadon, sage, mint, seafoam, powder, mist, periwinkle, wisteria, lavender, orchid, blush, grey) - replace ThemeToggle icon button with ThemePicker segmented light/dark control - wire ThemePicker into AppHeader alongside existing accent/radius/background pickers - update AccentPicker, BackgroundPicker, RadiusPicker to reflect new palette structure - update theme store with ACCENT_VIVID/ACCENT_PASTEL split and full type union
This commit is contained in:
neon
@@ -5,97 +5,528 @@
|
||||
Amber/yellow/lime/butter/lemon use dark foreground text.
|
||||
────────────────────────────────────────────────────────────── */
|
||||
|
||||
/* Vivid — 15 colors, rainbow order */
|
||||
/* Vivid — 17 colors, neutral + rainbow order */
|
||||
|
||||
html.accent-rose { --tint-h: 15; --primary: oklch(0.57 0.24 15); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.57 0.24 15); --sidebar-primary: oklch(0.57 0.24 15); --sidebar-primary-foreground: oklch(0.985 0 0); }
|
||||
html.accent-rose.dark { --primary: oklch(0.73 0.2 15); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.73 0.2 15); --sidebar-primary: oklch(0.73 0.2 15); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-white {
|
||||
--tint-h: 0;
|
||||
--tint-c: 0;
|
||||
--primary: oklch(0.2 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--ring: oklch(0.2 0 0);
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.2 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
}
|
||||
html.accent-white.dark {
|
||||
--tint-h: 0;
|
||||
--tint-c: 0;
|
||||
--primary: oklch(0.985 0 0);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.985 0 0);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-primary: oklch(0.985 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
html.accent-orange { --tint-h: 42; --primary: oklch(0.64 0.22 42); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.64 0.22 42); --sidebar-primary: oklch(0.64 0.22 42); --sidebar-primary-foreground: oklch(0.985 0 0); }
|
||||
html.accent-orange.dark { --primary: oklch(0.78 0.18 42); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.78 0.18 42); --sidebar-primary: oklch(0.78 0.18 42); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-grey {
|
||||
--tint-h: 0;
|
||||
--tint-c: 0;
|
||||
--primary: oklch(0.55 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--ring: oklch(0.55 0 0);
|
||||
--sidebar: oklch(0.96 0 0);
|
||||
--sidebar-primary: oklch(0.55 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
}
|
||||
html.accent-grey.dark {
|
||||
--tint-h: 0;
|
||||
--tint-c: 0;
|
||||
--primary: oklch(0.75 0 0);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.75 0 0);
|
||||
--sidebar: oklch(0.22 0 0);
|
||||
--sidebar-primary: oklch(0.75 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
html.accent-amber { --tint-h: 70; --primary: oklch(0.72 0.17 70); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.72 0.17 70); --sidebar-primary: oklch(0.72 0.17 70); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-amber.dark { --primary: oklch(0.82 0.17 70); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.82 0.17 70); --sidebar-primary: oklch(0.82 0.17 70); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-rose {
|
||||
--tint-h: 15;
|
||||
--primary: oklch(0.57 0.24 15);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--ring: oklch(0.57 0.24 15);
|
||||
--sidebar-primary: oklch(0.57 0.24 15);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
}
|
||||
html.accent-rose.dark {
|
||||
--primary: oklch(0.73 0.2 15);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.73 0.2 15);
|
||||
--sidebar-primary: oklch(0.73 0.2 15);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
html.accent-yellow { --tint-h: 95; --primary: oklch(0.75 0.18 95); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.75 0.18 95); --sidebar-primary: oklch(0.75 0.18 95); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-yellow.dark { --primary: oklch(0.84 0.16 95); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.84 0.16 95); --sidebar-primary: oklch(0.84 0.16 95); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-orange {
|
||||
--tint-h: 42;
|
||||
--primary: oklch(0.64 0.22 42);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--ring: oklch(0.64 0.22 42);
|
||||
--sidebar-primary: oklch(0.64 0.22 42);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
}
|
||||
html.accent-orange.dark {
|
||||
--primary: oklch(0.78 0.18 42);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.78 0.18 42);
|
||||
--sidebar-primary: oklch(0.78 0.18 42);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
html.accent-lime { --tint-h: 118; --primary: oklch(0.64 0.2 118); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.64 0.2 118); --sidebar-primary: oklch(0.64 0.2 118); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-lime.dark { --primary: oklch(0.77 0.18 118); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.77 0.18 118); --sidebar-primary: oklch(0.77 0.18 118); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-amber {
|
||||
--tint-h: 70;
|
||||
--primary: oklch(0.72 0.17 70);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.72 0.17 70);
|
||||
--sidebar-primary: oklch(0.72 0.17 70);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
html.accent-amber.dark {
|
||||
--primary: oklch(0.82 0.17 70);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.82 0.17 70);
|
||||
--sidebar-primary: oklch(0.82 0.17 70);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
html.accent-green { --tint-h: 142; --primary: oklch(0.527 0.18 142); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.527 0.18 142); --sidebar-primary: oklch(0.527 0.18 142); --sidebar-primary-foreground: oklch(0.985 0 0); }
|
||||
html.accent-green.dark { --primary: oklch(0.72 0.18 142); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.72 0.18 142); --sidebar-primary: oklch(0.72 0.18 142); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-yellow {
|
||||
--tint-h: 95;
|
||||
--primary: oklch(0.75 0.18 95);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.75 0.18 95);
|
||||
--sidebar-primary: oklch(0.75 0.18 95);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
html.accent-yellow.dark {
|
||||
--primary: oklch(0.84 0.16 95);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.84 0.16 95);
|
||||
--sidebar-primary: oklch(0.84 0.16 95);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
html.accent-emerald { --tint-h: 162; --primary: oklch(0.52 0.17 162); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.52 0.17 162); --sidebar-primary: oklch(0.52 0.17 162); --sidebar-primary-foreground: oklch(0.985 0 0); }
|
||||
html.accent-emerald.dark { --primary: oklch(0.72 0.15 162); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.72 0.15 162); --sidebar-primary: oklch(0.72 0.15 162); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-lime {
|
||||
--tint-h: 118;
|
||||
--primary: oklch(0.64 0.2 118);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.64 0.2 118);
|
||||
--sidebar-primary: oklch(0.64 0.2 118);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
html.accent-lime.dark {
|
||||
--primary: oklch(0.77 0.18 118);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.77 0.18 118);
|
||||
--sidebar-primary: oklch(0.77 0.18 118);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
html.accent-teal { --tint-h: 180; --primary: oklch(0.52 0.18 180); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.52 0.18 180); --sidebar-primary: oklch(0.52 0.18 180); --sidebar-primary-foreground: oklch(0.985 0 0); }
|
||||
html.accent-teal.dark { --primary: oklch(0.74 0.16 180); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.74 0.16 180); --sidebar-primary: oklch(0.74 0.16 180); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-green {
|
||||
--tint-h: 142;
|
||||
--primary: oklch(0.527 0.18 142);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--ring: oklch(0.527 0.18 142);
|
||||
--sidebar-primary: oklch(0.527 0.18 142);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
}
|
||||
html.accent-green.dark {
|
||||
--primary: oklch(0.72 0.18 142);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.72 0.18 142);
|
||||
--sidebar-primary: oklch(0.72 0.18 142);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
html.accent-cyan { --tint-h: 197; --primary: oklch(0.52 0.2 197); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.52 0.2 197); --sidebar-primary: oklch(0.52 0.2 197); --sidebar-primary-foreground: oklch(0.985 0 0); }
|
||||
html.accent-cyan.dark { --primary: oklch(0.75 0.17 197); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.75 0.17 197); --sidebar-primary: oklch(0.75 0.17 197); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-emerald {
|
||||
--tint-h: 162;
|
||||
--primary: oklch(0.52 0.17 162);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--ring: oklch(0.52 0.17 162);
|
||||
--sidebar-primary: oklch(0.52 0.17 162);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
}
|
||||
html.accent-emerald.dark {
|
||||
--primary: oklch(0.72 0.15 162);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.72 0.15 162);
|
||||
--sidebar-primary: oklch(0.72 0.15 162);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
html.accent-sky { --tint-h: 213; --primary: oklch(0.54 0.21 213); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.54 0.21 213); --sidebar-primary: oklch(0.54 0.21 213); --sidebar-primary-foreground: oklch(0.985 0 0); }
|
||||
html.accent-sky.dark { --primary: oklch(0.75 0.18 213); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.75 0.18 213); --sidebar-primary: oklch(0.75 0.18 213); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-teal {
|
||||
--tint-h: 180;
|
||||
--primary: oklch(0.52 0.18 180);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--ring: oklch(0.52 0.18 180);
|
||||
--sidebar-primary: oklch(0.52 0.18 180);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
}
|
||||
html.accent-teal.dark {
|
||||
--primary: oklch(0.74 0.16 180);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.74 0.16 180);
|
||||
--sidebar-primary: oklch(0.74 0.16 180);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
html.accent-blue { --tint-h: 263; --primary: oklch(0.487 0.25 263); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.487 0.25 263); --sidebar-primary: oklch(0.487 0.25 263); --sidebar-primary-foreground: oklch(0.985 0 0); }
|
||||
html.accent-blue.dark { --primary: oklch(0.72 0.2 263); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.72 0.2 263); --sidebar-primary: oklch(0.72 0.2 263); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-cyan {
|
||||
--tint-h: 197;
|
||||
--primary: oklch(0.52 0.2 197);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--ring: oklch(0.52 0.2 197);
|
||||
--sidebar-primary: oklch(0.52 0.2 197);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
}
|
||||
html.accent-cyan.dark {
|
||||
--primary: oklch(0.75 0.17 197);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.75 0.17 197);
|
||||
--sidebar-primary: oklch(0.75 0.17 197);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
html.accent-indigo { --tint-h: 276; --primary: oklch(0.51 0.26 276); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.51 0.26 276); --sidebar-primary: oklch(0.51 0.26 276); --sidebar-primary-foreground: oklch(0.985 0 0); }
|
||||
html.accent-indigo.dark { --primary: oklch(0.72 0.22 276); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.72 0.22 276); --sidebar-primary: oklch(0.72 0.22 276); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-sky {
|
||||
--tint-h: 213;
|
||||
--primary: oklch(0.54 0.21 213);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--ring: oklch(0.54 0.21 213);
|
||||
--sidebar-primary: oklch(0.54 0.21 213);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
}
|
||||
html.accent-sky.dark {
|
||||
--primary: oklch(0.75 0.18 213);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.75 0.18 213);
|
||||
--sidebar-primary: oklch(0.75 0.18 213);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
html.accent-violet { --tint-h: 292; --primary: oklch(0.491 0.27 292); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.491 0.27 292); --sidebar-primary: oklch(0.491 0.27 292); --sidebar-primary-foreground: oklch(0.985 0 0); }
|
||||
html.accent-violet.dark { --primary: oklch(0.72 0.23 292); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.72 0.23 292); --sidebar-primary: oklch(0.72 0.23 292); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-blue {
|
||||
--tint-h: 263;
|
||||
--primary: oklch(0.487 0.25 263);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--ring: oklch(0.487 0.25 263);
|
||||
--sidebar-primary: oklch(0.487 0.25 263);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
}
|
||||
html.accent-blue.dark {
|
||||
--primary: oklch(0.72 0.2 263);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.72 0.2 263);
|
||||
--sidebar-primary: oklch(0.72 0.2 263);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
html.accent-fuchsia { --tint-h: 312; --primary: oklch(0.56 0.27 312); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.56 0.27 312); --sidebar-primary: oklch(0.56 0.27 312); --sidebar-primary-foreground: oklch(0.985 0 0); }
|
||||
html.accent-fuchsia.dark { --primary: oklch(0.75 0.22 312); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.75 0.22 312); --sidebar-primary: oklch(0.75 0.22 312); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-indigo {
|
||||
--tint-h: 276;
|
||||
--primary: oklch(0.51 0.26 276);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--ring: oklch(0.51 0.26 276);
|
||||
--sidebar-primary: oklch(0.51 0.26 276);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
}
|
||||
html.accent-indigo.dark {
|
||||
--primary: oklch(0.72 0.22 276);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.72 0.22 276);
|
||||
--sidebar-primary: oklch(0.72 0.22 276);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
html.accent-pink { --tint-h: 328; --primary: oklch(0.56 0.26 328); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.56 0.26 328); --sidebar-primary: oklch(0.56 0.26 328); --sidebar-primary-foreground: oklch(0.985 0 0); }
|
||||
html.accent-pink.dark { --primary: oklch(0.75 0.22 328); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.75 0.22 328); --sidebar-primary: oklch(0.75 0.22 328); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-violet {
|
||||
--tint-h: 292;
|
||||
--primary: oklch(0.491 0.27 292);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--ring: oklch(0.491 0.27 292);
|
||||
--sidebar-primary: oklch(0.491 0.27 292);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
}
|
||||
html.accent-violet.dark {
|
||||
--primary: oklch(0.72 0.23 292);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.72 0.23 292);
|
||||
--sidebar-primary: oklch(0.72 0.23 292);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
html.accent-fuchsia {
|
||||
--tint-h: 312;
|
||||
--primary: oklch(0.56 0.27 312);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--ring: oklch(0.56 0.27 312);
|
||||
--sidebar-primary: oklch(0.56 0.27 312);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
}
|
||||
html.accent-fuchsia.dark {
|
||||
--primary: oklch(0.75 0.22 312);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.75 0.22 312);
|
||||
--sidebar-primary: oklch(0.75 0.22 312);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
html.accent-pink {
|
||||
--tint-h: 328;
|
||||
--primary: oklch(0.56 0.26 328);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--ring: oklch(0.56 0.26 328);
|
||||
--sidebar-primary: oklch(0.56 0.26 328);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
}
|
||||
html.accent-pink.dark {
|
||||
--primary: oklch(0.75 0.22 328);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.75 0.22 328);
|
||||
--sidebar-primary: oklch(0.75 0.22 328);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
/* Pastel — 15 colors, rainbow order */
|
||||
|
||||
html.accent-coral { --tint-h: 25; --primary: oklch(0.6 0.12 25); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.6 0.12 25); --sidebar-primary: oklch(0.6 0.12 25); --sidebar-primary-foreground: oklch(0.985 0 0); }
|
||||
html.accent-coral.dark { --primary: oklch(0.76 0.1 25); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.76 0.1 25); --sidebar-primary: oklch(0.76 0.1 25); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-coral {
|
||||
--tint-h: 25;
|
||||
--primary: oklch(0.6 0.12 25);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--ring: oklch(0.6 0.12 25);
|
||||
--sidebar-primary: oklch(0.6 0.12 25);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
}
|
||||
html.accent-coral.dark {
|
||||
--primary: oklch(0.76 0.1 25);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.76 0.1 25);
|
||||
--sidebar-primary: oklch(0.76 0.1 25);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
html.accent-peach { --tint-h: 38; --primary: oklch(0.63 0.11 38); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.63 0.11 38); --sidebar-primary: oklch(0.63 0.11 38); --sidebar-primary-foreground: oklch(0.985 0 0); }
|
||||
html.accent-peach.dark { --primary: oklch(0.78 0.09 38); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.78 0.09 38); --sidebar-primary: oklch(0.78 0.09 38); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-peach {
|
||||
--tint-h: 38;
|
||||
--primary: oklch(0.63 0.11 38);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--ring: oklch(0.63 0.11 38);
|
||||
--sidebar-primary: oklch(0.63 0.11 38);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
}
|
||||
html.accent-peach.dark {
|
||||
--primary: oklch(0.78 0.09 38);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.78 0.09 38);
|
||||
--sidebar-primary: oklch(0.78 0.09 38);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
html.accent-butter { --tint-h: 80; --primary: oklch(0.66 0.13 80); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.66 0.13 80); --sidebar-primary: oklch(0.66 0.13 80); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-butter.dark { --primary: oklch(0.8 0.11 80); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.8 0.11 80); --sidebar-primary: oklch(0.8 0.11 80); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-butter {
|
||||
--tint-h: 80;
|
||||
--primary: oklch(0.66 0.13 80);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.66 0.13 80);
|
||||
--sidebar-primary: oklch(0.66 0.13 80);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
html.accent-butter.dark {
|
||||
--primary: oklch(0.8 0.11 80);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.8 0.11 80);
|
||||
--sidebar-primary: oklch(0.8 0.11 80);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
html.accent-lemon { --tint-h: 100; --primary: oklch(0.7 0.12 100); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.7 0.12 100); --sidebar-primary: oklch(0.7 0.12 100); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-lemon.dark { --primary: oklch(0.82 0.1 100); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.82 0.1 100); --sidebar-primary: oklch(0.82 0.1 100); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-lemon {
|
||||
--tint-h: 100;
|
||||
--primary: oklch(0.7 0.12 100);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.7 0.12 100);
|
||||
--sidebar-primary: oklch(0.7 0.12 100);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
html.accent-lemon.dark {
|
||||
--primary: oklch(0.82 0.1 100);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.82 0.1 100);
|
||||
--sidebar-primary: oklch(0.82 0.1 100);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
html.accent-celadon { --tint-h: 122; --primary: oklch(0.61 0.1 122); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.61 0.1 122); --sidebar-primary: oklch(0.61 0.1 122); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-celadon.dark { --primary: oklch(0.76 0.08 122); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.76 0.08 122); --sidebar-primary: oklch(0.76 0.08 122); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-celadon {
|
||||
--tint-h: 122;
|
||||
--primary: oklch(0.61 0.1 122);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.61 0.1 122);
|
||||
--sidebar-primary: oklch(0.61 0.1 122);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
html.accent-celadon.dark {
|
||||
--primary: oklch(0.76 0.08 122);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.76 0.08 122);
|
||||
--sidebar-primary: oklch(0.76 0.08 122);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
html.accent-sage { --tint-h: 142; --primary: oklch(0.52 0.1 142); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.52 0.1 142); --sidebar-primary: oklch(0.52 0.1 142); --sidebar-primary-foreground: oklch(0.985 0 0); }
|
||||
html.accent-sage.dark { --primary: oklch(0.72 0.09 142); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.72 0.09 142); --sidebar-primary: oklch(0.72 0.09 142); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-sage {
|
||||
--tint-h: 142;
|
||||
--primary: oklch(0.52 0.1 142);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--ring: oklch(0.52 0.1 142);
|
||||
--sidebar-primary: oklch(0.52 0.1 142);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
}
|
||||
html.accent-sage.dark {
|
||||
--primary: oklch(0.72 0.09 142);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.72 0.09 142);
|
||||
--sidebar-primary: oklch(0.72 0.09 142);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
html.accent-mint { --tint-h: 158; --primary: oklch(0.6 0.1 158); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.6 0.1 158); --sidebar-primary: oklch(0.6 0.1 158); --sidebar-primary-foreground: oklch(0.985 0 0); }
|
||||
html.accent-mint.dark { --primary: oklch(0.75 0.09 158); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.75 0.09 158); --sidebar-primary: oklch(0.75 0.09 158); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-mint {
|
||||
--tint-h: 158;
|
||||
--primary: oklch(0.6 0.1 158);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--ring: oklch(0.6 0.1 158);
|
||||
--sidebar-primary: oklch(0.6 0.1 158);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
}
|
||||
html.accent-mint.dark {
|
||||
--primary: oklch(0.75 0.09 158);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.75 0.09 158);
|
||||
--sidebar-primary: oklch(0.75 0.09 158);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
html.accent-seafoam { --tint-h: 178; --primary: oklch(0.61 0.09 178); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.61 0.09 178); --sidebar-primary: oklch(0.61 0.09 178); --sidebar-primary-foreground: oklch(0.985 0 0); }
|
||||
html.accent-seafoam.dark { --primary: oklch(0.76 0.08 178); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.76 0.08 178); --sidebar-primary: oklch(0.76 0.08 178); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-seafoam {
|
||||
--tint-h: 178;
|
||||
--primary: oklch(0.61 0.09 178);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--ring: oklch(0.61 0.09 178);
|
||||
--sidebar-primary: oklch(0.61 0.09 178);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
}
|
||||
html.accent-seafoam.dark {
|
||||
--primary: oklch(0.76 0.08 178);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.76 0.08 178);
|
||||
--sidebar-primary: oklch(0.76 0.08 178);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
html.accent-powder { --tint-h: 205; --primary: oklch(0.59 0.1 205); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.59 0.1 205); --sidebar-primary: oklch(0.59 0.1 205); --sidebar-primary-foreground: oklch(0.985 0 0); }
|
||||
html.accent-powder.dark { --primary: oklch(0.75 0.09 205); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.75 0.09 205); --sidebar-primary: oklch(0.75 0.09 205); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-powder {
|
||||
--tint-h: 205;
|
||||
--primary: oklch(0.59 0.1 205);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--ring: oklch(0.59 0.1 205);
|
||||
--sidebar-primary: oklch(0.59 0.1 205);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
}
|
||||
html.accent-powder.dark {
|
||||
--primary: oklch(0.75 0.09 205);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.75 0.09 205);
|
||||
--sidebar-primary: oklch(0.75 0.09 205);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
html.accent-mist { --tint-h: 218; --primary: oklch(0.56 0.1 218); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.56 0.1 218); --sidebar-primary: oklch(0.56 0.1 218); --sidebar-primary-foreground: oklch(0.985 0 0); }
|
||||
html.accent-mist.dark { --primary: oklch(0.74 0.09 218); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.74 0.09 218); --sidebar-primary: oklch(0.74 0.09 218); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-mist {
|
||||
--tint-h: 218;
|
||||
--primary: oklch(0.56 0.1 218);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--ring: oklch(0.56 0.1 218);
|
||||
--sidebar-primary: oklch(0.56 0.1 218);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
}
|
||||
html.accent-mist.dark {
|
||||
--primary: oklch(0.74 0.09 218);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.74 0.09 218);
|
||||
--sidebar-primary: oklch(0.74 0.09 218);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
html.accent-periwinkle { --tint-h: 265; --primary: oklch(0.54 0.11 265); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.54 0.11 265); --sidebar-primary: oklch(0.54 0.11 265); --sidebar-primary-foreground: oklch(0.985 0 0); }
|
||||
html.accent-periwinkle.dark { --primary: oklch(0.73 0.1 265); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.73 0.1 265); --sidebar-primary: oklch(0.73 0.1 265); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-periwinkle {
|
||||
--tint-h: 265;
|
||||
--primary: oklch(0.54 0.11 265);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--ring: oklch(0.54 0.11 265);
|
||||
--sidebar-primary: oklch(0.54 0.11 265);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
}
|
||||
html.accent-periwinkle.dark {
|
||||
--primary: oklch(0.73 0.1 265);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.73 0.1 265);
|
||||
--sidebar-primary: oklch(0.73 0.1 265);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
html.accent-wisteria { --tint-h: 285; --primary: oklch(0.55 0.1 285); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.55 0.1 285); --sidebar-primary: oklch(0.55 0.1 285); --sidebar-primary-foreground: oklch(0.985 0 0); }
|
||||
html.accent-wisteria.dark { --primary: oklch(0.73 0.09 285); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.73 0.09 285); --sidebar-primary: oklch(0.73 0.09 285); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-wisteria {
|
||||
--tint-h: 285;
|
||||
--primary: oklch(0.55 0.1 285);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--ring: oklch(0.55 0.1 285);
|
||||
--sidebar-primary: oklch(0.55 0.1 285);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
}
|
||||
html.accent-wisteria.dark {
|
||||
--primary: oklch(0.73 0.09 285);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.73 0.09 285);
|
||||
--sidebar-primary: oklch(0.73 0.09 285);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
html.accent-lavender { --tint-h: 300; --primary: oklch(0.55 0.11 300); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.55 0.11 300); --sidebar-primary: oklch(0.55 0.11 300); --sidebar-primary-foreground: oklch(0.985 0 0); }
|
||||
html.accent-lavender.dark { --primary: oklch(0.73 0.1 300); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.73 0.1 300); --sidebar-primary: oklch(0.73 0.1 300); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-lavender {
|
||||
--tint-h: 300;
|
||||
--primary: oklch(0.55 0.11 300);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--ring: oklch(0.55 0.11 300);
|
||||
--sidebar-primary: oklch(0.55 0.11 300);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
}
|
||||
html.accent-lavender.dark {
|
||||
--primary: oklch(0.73 0.1 300);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.73 0.1 300);
|
||||
--sidebar-primary: oklch(0.73 0.1 300);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
html.accent-orchid { --tint-h: 315; --primary: oklch(0.56 0.11 315); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.56 0.11 315); --sidebar-primary: oklch(0.56 0.11 315); --sidebar-primary-foreground: oklch(0.985 0 0); }
|
||||
html.accent-orchid.dark { --primary: oklch(0.74 0.1 315); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.74 0.1 315); --sidebar-primary: oklch(0.74 0.1 315); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
|
||||
html.accent-blush { --tint-h: 345; --primary: oklch(0.54 0.11 345); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.54 0.11 345); --sidebar-primary: oklch(0.54 0.11 345); --sidebar-primary-foreground: oklch(0.985 0 0); }
|
||||
html.accent-blush.dark { --primary: oklch(0.73 0.1 345); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.73 0.1 345); --sidebar-primary: oklch(0.73 0.1 345); --sidebar-primary-foreground: oklch(0.145 0 0); }
|
||||
html.accent-orchid {
|
||||
--tint-h: 315;
|
||||
--primary: oklch(0.56 0.11 315);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--ring: oklch(0.56 0.11 315);
|
||||
--sidebar-primary: oklch(0.56 0.11 315);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
}
|
||||
html.accent-orchid.dark {
|
||||
--primary: oklch(0.74 0.1 315);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.74 0.1 315);
|
||||
--sidebar-primary: oklch(0.74 0.1 315);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
html.accent-blush {
|
||||
--tint-h: 345;
|
||||
--primary: oklch(0.54 0.11 345);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--ring: oklch(0.54 0.11 345);
|
||||
--sidebar-primary: oklch(0.54 0.11 345);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
}
|
||||
html.accent-blush.dark {
|
||||
--primary: oklch(0.73 0.1 345);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--ring: oklch(0.73 0.1 345);
|
||||
--sidebar-primary: oklch(0.73 0.1 345);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
@@ -12,44 +12,45 @@
|
||||
/* Tint controls — warm amber base */
|
||||
--tint-h: 80;
|
||||
--tint-c: 0.006;
|
||||
--tint-c-surface: var(--tint-c);
|
||||
|
||||
/* Colour roles */
|
||||
--background: oklch(0.99 var(--tint-c) var(--tint-h));
|
||||
--foreground: oklch(0.145 0.015 var(--tint-h));
|
||||
--background: oklch(0.99 var(--tint-c-surface) var(--tint-h));
|
||||
--foreground: oklch(0.145 var(--tint-c-surface) var(--tint-h));
|
||||
|
||||
--card: oklch(0.975 var(--tint-c) var(--tint-h));
|
||||
--card-foreground: oklch(0.145 0.015 var(--tint-h));
|
||||
--card: oklch(0.975 var(--tint-c-surface) var(--tint-h));
|
||||
--card-foreground: oklch(0.145 var(--tint-c-surface) var(--tint-h));
|
||||
|
||||
--popover: oklch(0.975 var(--tint-c) var(--tint-h));
|
||||
--popover-foreground: oklch(0.145 0.015 var(--tint-h));
|
||||
--popover: oklch(0.975 var(--tint-c-surface) var(--tint-h));
|
||||
--popover-foreground: oklch(0.145 var(--tint-c-surface) var(--tint-h));
|
||||
|
||||
--primary: oklch(0.21 0.015 var(--tint-h));
|
||||
--primary: oklch(0.21 var(--tint-c-surface) var(--tint-h));
|
||||
--primary-foreground: oklch(0.985 0.004 var(--tint-h));
|
||||
|
||||
--secondary: oklch(0.955 var(--tint-c) var(--tint-h));
|
||||
--secondary-foreground: oklch(0.21 0.015 var(--tint-h));
|
||||
--secondary: oklch(0.955 var(--tint-c-surface) var(--tint-h));
|
||||
--secondary-foreground: oklch(0.21 var(--tint-c-surface) var(--tint-h));
|
||||
|
||||
--muted: oklch(0.955 var(--tint-c) var(--tint-h));
|
||||
--muted: oklch(0.955 var(--tint-c-surface) var(--tint-h));
|
||||
--muted-foreground: oklch(0.52 0.008 var(--tint-h));
|
||||
|
||||
--accent: oklch(0.955 var(--tint-c) var(--tint-h));
|
||||
--accent-foreground: oklch(0.21 0.015 var(--tint-h));
|
||||
--accent: oklch(0.955 var(--tint-c-surface) var(--tint-h));
|
||||
--accent-foreground: oklch(0.21 var(--tint-c-surface) var(--tint-h));
|
||||
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--destructive-foreground: oklch(0.985 0 0);
|
||||
|
||||
--border: oklch(0.878 0.01 var(--tint-h));
|
||||
--input: oklch(0.878 0.01 var(--tint-h));
|
||||
--ring: oklch(0.65 0.01 var(--tint-h));
|
||||
--border: oklch(0.878 var(--tint-c-surface) var(--tint-h));
|
||||
--input: oklch(0.878 var(--tint-c-surface) var(--tint-h));
|
||||
--ring: oklch(0.65 var(--tint-c-surface) var(--tint-h));
|
||||
|
||||
--sidebar: oklch(0.965 var(--tint-c) var(--tint-h));
|
||||
--sidebar-foreground: oklch(0.145 0.015 var(--tint-h));
|
||||
--sidebar-primary: oklch(0.21 0.015 var(--tint-h));
|
||||
--sidebar: oklch(0.965 var(--tint-c-surface) var(--tint-h));
|
||||
--sidebar-foreground: oklch(0.145 var(--tint-c-surface) var(--tint-h));
|
||||
--sidebar-primary: oklch(0.21 var(--tint-c-surface) var(--tint-h));
|
||||
--sidebar-primary-foreground: oklch(0.985 0.004 var(--tint-h));
|
||||
--sidebar-accent: oklch(0.955 var(--tint-c) var(--tint-h));
|
||||
--sidebar-accent-foreground: oklch(0.21 0.015 var(--tint-h));
|
||||
--sidebar-border: oklch(0.878 0.01 var(--tint-h));
|
||||
--sidebar-ring: oklch(0.65 0.01 var(--tint-h));
|
||||
--sidebar-accent: oklch(0.955 var(--tint-c-surface) var(--tint-h));
|
||||
--sidebar-accent-foreground: oklch(0.21 var(--tint-c-surface) var(--tint-h));
|
||||
--sidebar-border: oklch(0.878 var(--tint-c-surface) var(--tint-h));
|
||||
--sidebar-ring: oklch(0.65 var(--tint-c-surface) var(--tint-h));
|
||||
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
@@ -58,10 +59,10 @@
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
|
||||
/* Elevation surfaces */
|
||||
--surface-1: oklch(0.975 var(--tint-c) var(--tint-h));
|
||||
--surface-2: oklch(0.955 var(--tint-c) var(--tint-h));
|
||||
--surface-3: oklch(0.93 0.01 var(--tint-h));
|
||||
--surface-4: oklch(0.91 0.012 var(--tint-h));
|
||||
--surface-1: oklch(0.975 var(--tint-c-surface) var(--tint-h));
|
||||
--surface-2: oklch(0.955 var(--tint-c-surface) var(--tint-h));
|
||||
--surface-3: oklch(0.93 var(--tint-c-surface) var(--tint-h));
|
||||
--surface-4: oklch(0.91 var(--tint-c-surface) var(--tint-h));
|
||||
|
||||
/* Shadows */
|
||||
--elevation-xs: 0 1px 2px oklch(0 0 0 / 0.05);
|
||||
@@ -74,32 +75,33 @@
|
||||
/* Shape */
|
||||
--radius: 0.625rem;
|
||||
|
||||
--dot-color: oklch(0.82 0.01 var(--tint-h));
|
||||
--dot-color: oklch(0.82 var(--tint-c-surface) var(--tint-h));
|
||||
}
|
||||
|
||||
.dark {
|
||||
--tint-c: 0.01;
|
||||
--tint-c-surface: var(--tint-c);
|
||||
--bg-lift: 0;
|
||||
|
||||
--background: oklch(calc(0.145 + var(--bg-lift)) var(--tint-c) var(--tint-h));
|
||||
--background: oklch(calc(0.145 + var(--bg-lift)) var(--tint-c-surface) var(--tint-h));
|
||||
--foreground: oklch(0.985 0.004 var(--tint-h));
|
||||
|
||||
--card: oklch(calc(0.205 + var(--bg-lift)) 0.012 var(--tint-h));
|
||||
--card: oklch(calc(0.205 + var(--bg-lift)) var(--tint-c-surface) var(--tint-h));
|
||||
--card-foreground: oklch(0.985 0.004 var(--tint-h));
|
||||
|
||||
--popover: oklch(calc(0.205 + var(--bg-lift)) 0.012 var(--tint-h));
|
||||
--popover: oklch(calc(0.205 + var(--bg-lift)) var(--tint-c-surface) var(--tint-h));
|
||||
--popover-foreground: oklch(0.985 0.004 var(--tint-h));
|
||||
|
||||
--primary: oklch(0.91 var(--tint-c) var(--tint-h));
|
||||
--primary-foreground: oklch(0.205 0.012 var(--tint-h));
|
||||
--primary: oklch(0.91 var(--tint-c-surface) var(--tint-h));
|
||||
--primary-foreground: oklch(0.205 var(--tint-c-surface) var(--tint-h));
|
||||
|
||||
--secondary: oklch(calc(0.265 + var(--bg-lift)) 0.012 var(--tint-h));
|
||||
--secondary: oklch(calc(0.265 + var(--bg-lift)) var(--tint-c-surface) var(--tint-h));
|
||||
--secondary-foreground: oklch(0.985 0.004 var(--tint-h));
|
||||
|
||||
--muted: oklch(calc(0.265 + var(--bg-lift)) 0.012 var(--tint-h));
|
||||
--muted: oklch(calc(0.265 + var(--bg-lift)) var(--tint-c-surface) var(--tint-h));
|
||||
--muted-foreground: oklch(0.68 0.008 var(--tint-h));
|
||||
|
||||
--accent: oklch(calc(0.265 + var(--bg-lift)) 0.012 var(--tint-h));
|
||||
--accent: oklch(calc(0.265 + var(--bg-lift)) var(--tint-c-surface) var(--tint-h));
|
||||
--accent-foreground: oklch(0.985 0.004 var(--tint-h));
|
||||
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
@@ -109,11 +111,11 @@
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.52 0.008 var(--tint-h));
|
||||
|
||||
--sidebar: oklch(calc(0.205 + var(--bg-lift)) 0.012 var(--tint-h));
|
||||
--sidebar: oklch(calc(0.205 + var(--bg-lift)) var(--tint-c-surface) var(--tint-h));
|
||||
--sidebar-foreground: oklch(0.985 0.004 var(--tint-h));
|
||||
--sidebar-primary: oklch(0.91 var(--tint-c) var(--tint-h));
|
||||
--sidebar-primary-foreground: oklch(0.205 0.012 var(--tint-h));
|
||||
--sidebar-accent: oklch(calc(0.265 + var(--bg-lift)) 0.012 var(--tint-h));
|
||||
--sidebar-primary: oklch(0.91 var(--tint-c-surface) var(--tint-h));
|
||||
--sidebar-primary-foreground: oklch(0.205 var(--tint-c-surface) var(--tint-h));
|
||||
--sidebar-accent: oklch(calc(0.265 + var(--bg-lift)) var(--tint-c-surface) var(--tint-h));
|
||||
--sidebar-accent-foreground: oklch(0.985 0.004 var(--tint-h));
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.52 0.008 var(--tint-h));
|
||||
@@ -125,10 +127,10 @@
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
|
||||
/* Elevation surfaces */
|
||||
--surface-1: oklch(calc(0.205 + var(--bg-lift)) 0.012 var(--tint-h));
|
||||
--surface-2: oklch(calc(0.235 + var(--bg-lift)) 0.012 var(--tint-h));
|
||||
--surface-3: oklch(calc(0.265 + var(--bg-lift)) 0.012 var(--tint-h));
|
||||
--surface-4: oklch(calc(0.295 + var(--bg-lift)) 0.012 var(--tint-h));
|
||||
--surface-1: oklch(calc(0.205 + var(--bg-lift)) var(--tint-c-surface) var(--tint-h));
|
||||
--surface-2: oklch(calc(0.235 + var(--bg-lift)) var(--tint-c-surface) var(--tint-h));
|
||||
--surface-3: oklch(calc(0.265 + var(--bg-lift)) var(--tint-c-surface) var(--tint-h));
|
||||
--surface-4: oklch(calc(0.295 + var(--bg-lift)) var(--tint-c-surface) var(--tint-h));
|
||||
|
||||
/* Shadows */
|
||||
--elevation-xs: 0 1px 2px oklch(0 0 0 / 0.4);
|
||||
@@ -138,6 +140,5 @@
|
||||
--elevation-xl: 0 20px 30px -5px oklch(0 0 0 / 0.6), 0 8px 12px -6px oklch(0 0 0 / 0.4);
|
||||
--elevation-2xl: 0 25px 50px -12px oklch(0 0 0 / 0.7);
|
||||
|
||||
--dot-color: oklch(calc(0.3 + var(--bg-lift)) 0.01 var(--tint-h));
|
||||
--dot-color: oklch(calc(0.3 + var(--bg-lift)) var(--tint-c-surface) var(--tint-h));
|
||||
}
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ const themeStore = useThemeStore()
|
||||
|
||||
<template>
|
||||
<div class="space-y-1.5">
|
||||
<div class="flex items-center gap-0.5">
|
||||
<div class="flex items-center gap-0.5 flex-wrap">
|
||||
<Tooltip v-for="opt in ACCENT_VIVID" :key="opt.id">
|
||||
<TooltipTrigger as-child>
|
||||
<button
|
||||
@@ -24,7 +24,7 @@ const themeStore = useThemeStore()
|
||||
<TooltipContent>{{ opt.label }}</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div class="flex items-center gap-0.5">
|
||||
<div class="flex items-center gap-0.5 flex-wrap">
|
||||
<Tooltip v-for="opt in ACCENT_PASTEL" :key="opt.id">
|
||||
<TooltipTrigger as-child>
|
||||
<button
|
||||
|
||||
@@ -18,7 +18,7 @@ import AccentPicker from '@/components/AccentPicker.vue'
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
|
||||
import RadiusPicker from '@/components/RadiusPicker.vue'
|
||||
import BackgroundPicker from '@/components/BackgroundPicker.vue'
|
||||
import ThemeToggle from '@/components/ThemeToggle.vue'
|
||||
import ThemePicker from '@/components/ThemePicker.vue'
|
||||
import { useGlobalSearch, type GlobalSearchResult } from '@/features/book/composables/useGlobalSearch'
|
||||
import BookCoverImage from '@/features/book/components/BookCoverImage.vue'
|
||||
import { useAuth } from '@/features/auth/composables/useAuth'
|
||||
@@ -243,7 +243,10 @@ function formatBadgeClass(fmt: string): string {
|
||||
ref="desktopSearchInput"
|
||||
v-model="globalSearchQuery"
|
||||
@focus="searchFocused = true"
|
||||
@blur="searchFocused = false; selectedIndex = -1"
|
||||
@blur="
|
||||
searchFocused = false
|
||||
selectedIndex = -1
|
||||
"
|
||||
@keydown="handleSearchKeydown"
|
||||
placeholder="Search all books..."
|
||||
class="w-full h-8 pl-9 pr-8 text-[13px] rounded-full border-none bg-primary/5 text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1.5 focus:ring-primary/30 transition-all duration-300 shadow-inner shadow-black/5"
|
||||
@@ -252,7 +255,10 @@ function formatBadgeClass(fmt: string): string {
|
||||
<button v-if="globalSearchQuery" @click="clearSearch()" class="text-muted-foreground/60 hover:text-foreground transition-colors">
|
||||
<X :size="13" />
|
||||
</button>
|
||||
<kbd v-else class="hidden lg:inline-flex h-4.5 select-none items-center gap-1 rounded border border-sidebar-border/50 bg-background/50 px-1.5 font-mono text-[9px] font-medium text-muted-foreground/40 opacity-100">
|
||||
<kbd
|
||||
v-else
|
||||
class="hidden lg:inline-flex h-4.5 select-none items-center gap-1 rounded border border-sidebar-border/50 bg-background/50 px-1.5 font-mono text-[9px] font-medium text-muted-foreground/40 opacity-100"
|
||||
>
|
||||
<span class="text-xs">⌘</span>K
|
||||
</kbd>
|
||||
</div>
|
||||
@@ -369,6 +375,10 @@ function formatBadgeClass(fmt: string): string {
|
||||
<PopoverContent class="w-72 p-4" align="end">
|
||||
<div class="space-y-4">
|
||||
<p class="text-xs font-semibold text-foreground uppercase tracking-wider">Appearance</p>
|
||||
<div class="space-y-1.5">
|
||||
<span class="text-xs text-muted-foreground">Theme</span>
|
||||
<ThemePicker />
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<span class="text-xs text-muted-foreground">Accent</span>
|
||||
<AccentPicker />
|
||||
@@ -396,8 +406,6 @@ function formatBadgeClass(fmt: string): string {
|
||||
<TooltipContent>Settings</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<ThemeToggle />
|
||||
|
||||
<!-- User avatar dropdown -->
|
||||
<DropdownMenu v-if="user">
|
||||
<DropdownMenuTrigger as-child>
|
||||
|
||||
@@ -1,29 +1,24 @@
|
||||
<script setup lang="ts">
|
||||
import { BACKGROUND_OPTIONS, useThemeStore } from '@/stores/theme'
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
|
||||
|
||||
const themeStore = useThemeStore()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<button
|
||||
v-for="opt in BACKGROUND_OPTIONS"
|
||||
:key="opt.id"
|
||||
type="button"
|
||||
class="flex flex-col items-center gap-1 cursor-pointer focus:outline-none"
|
||||
@click="themeStore.setBackground(opt.id)"
|
||||
>
|
||||
<div
|
||||
class="w-full h-9 rounded overflow-hidden ring-2 transition-all"
|
||||
:class="themeStore.background === opt.id ? 'ring-primary' : 'ring-border hover:ring-muted-foreground/40'"
|
||||
>
|
||||
<div class="w-full h-full bg-background" :class="opt.cssClass" />
|
||||
</div>
|
||||
<span
|
||||
class="text-[10px] font-medium transition-colors leading-none"
|
||||
:class="themeStore.background === opt.id ? 'text-primary' : 'text-muted-foreground'"
|
||||
>{{ opt.label }}</span
|
||||
>
|
||||
</button>
|
||||
<div class="grid grid-cols-5 gap-2">
|
||||
<Tooltip v-for="opt in BACKGROUND_OPTIONS" :key="opt.id">
|
||||
<TooltipTrigger as-child>
|
||||
<button type="button" class="flex flex-col items-center cursor-pointer focus:outline-none" @click="themeStore.setBackground(opt.id)">
|
||||
<div
|
||||
class="w-full h-8 rounded overflow-hidden ring-2 transition-all"
|
||||
:class="themeStore.background === opt.id ? 'ring-primary' : 'ring-border hover:ring-muted-foreground/40'"
|
||||
>
|
||||
<div class="w-full h-full bg-background" :class="opt.cssClass" />
|
||||
</div>
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{{ opt.label }}</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -5,19 +5,19 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip
|
||||
const themeStore = useThemeStore()
|
||||
|
||||
const shapes = [
|
||||
{ id: 'sharp' as const, rx: '1' },
|
||||
{ id: 'default' as const, rx: '4' },
|
||||
{ id: 'rounded' as const, rx: '9' },
|
||||
{ id: 'pill' as const, rx: '999' },
|
||||
{ id: 'sharp' as const, rx: '0' },
|
||||
{ id: 'default' as const, rx: '3' },
|
||||
{ id: 'rounded' as const, rx: '8' },
|
||||
{ id: 'pill' as const, rx: '99' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center gap-1">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<Tooltip v-for="s in shapes" :key="s.id">
|
||||
<TooltipTrigger as-child>
|
||||
<button
|
||||
class="w-4 h-4 border-2 transition-colors focus:outline-none"
|
||||
class="w-8 h-5 border-2 transition-colors focus:outline-none"
|
||||
:style="{
|
||||
borderRadius: `${s.rx}px`,
|
||||
borderColor: themeStore.radius === s.id ? 'var(--primary)' : 'var(--muted-foreground)',
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import { Moon, Sun } from 'lucide-vue-next'
|
||||
import { useThemeStore } from '@/stores/theme'
|
||||
|
||||
const themeStore = useThemeStore()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center gap-1 p-1 rounded-md border border-border bg-muted/50 w-fit">
|
||||
<button
|
||||
class="flex items-center gap-1.5 px-2.5 py-1 rounded text-[10px] font-medium transition-colors focus:outline-none"
|
||||
:class="themeStore.theme === 'light' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'"
|
||||
@click="themeStore.theme = 'light'"
|
||||
>
|
||||
<Sun :size="12" /> Light
|
||||
</button>
|
||||
<button
|
||||
class="flex items-center gap-1.5 px-2.5 py-1 rounded text-[10px] font-medium transition-colors focus:outline-none"
|
||||
:class="themeStore.theme === 'dark' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'"
|
||||
@click="themeStore.theme = 'dark'"
|
||||
>
|
||||
<Moon :size="12" /> Dark
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,23 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { Moon, Sun } from 'lucide-vue-next'
|
||||
import { useThemeStore } from '@/stores/theme'
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
|
||||
|
||||
const themeStore = useThemeStore()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<button
|
||||
@click="themeStore.toggleTheme()"
|
||||
class="p-2 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
|
||||
:aria-label="themeStore.theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'"
|
||||
>
|
||||
<Sun v-if="themeStore.theme === 'dark'" :size="16" />
|
||||
<Moon v-else :size="16" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{{ themeStore.theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode' }}</TooltipContent>
|
||||
</Tooltip>
|
||||
</template>
|
||||
@@ -4,6 +4,7 @@ import { storage } from '@/services/storage'
|
||||
|
||||
type Theme = 'light' | 'dark'
|
||||
export type Accent =
|
||||
| 'grey'
|
||||
// Vivid — rainbow order
|
||||
| 'rose'
|
||||
| 'orange'
|
||||
@@ -21,6 +22,7 @@ export type Accent =
|
||||
| 'fuchsia'
|
||||
| 'pink'
|
||||
// Pastel — rainbow order
|
||||
| 'white'
|
||||
| 'coral'
|
||||
| 'peach'
|
||||
| 'butter'
|
||||
@@ -54,6 +56,7 @@ export type Background =
|
||||
| 'terminal'
|
||||
|
||||
export const ACCENT_VIVID: { id: Accent; label: string; color: string }[] = [
|
||||
{ id: 'white', label: 'White', color: '#fafafa' },
|
||||
{ id: 'rose', label: 'Rose', color: '#e11d48' },
|
||||
{ id: 'orange', label: 'Orange', color: '#ea580c' },
|
||||
{ id: 'amber', label: 'Amber', color: '#d97706' },
|
||||
@@ -72,6 +75,7 @@ export const ACCENT_VIVID: { id: Accent; label: string; color: string }[] = [
|
||||
]
|
||||
|
||||
export const ACCENT_PASTEL: { id: Accent; label: string; color: string }[] = [
|
||||
{ id: 'grey', label: 'Grey', color: '#737373' },
|
||||
{ id: 'coral', label: 'Coral', color: '#e8968a' },
|
||||
{ id: 'peach', label: 'Peach', color: '#e8b08a' },
|
||||
{ id: 'butter', label: 'Butter', color: '#d4be7a' },
|
||||
|
||||
Reference in New Issue
Block a user