35b96042f0
* chore: add storybook * chore: unify FE codeabse * chore: update eslint rules * chore: harmonize the use of "subtle" color * chore: remove an extra sidebar rail * refactor: make panel items more consistent * chore: cleanups after merging new code from base * refactor: refine composables * fix: add lost import * chore: make icon style consistent * fix: don't show empty "supported" methods * refactor: solidify select items
115 lines
4.0 KiB
CSS
115 lines
4.0 KiB
CSS
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
@theme {
|
|
/*
|
|
* Typography System.
|
|
*/
|
|
|
|
--font-sans:
|
|
Figtree, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
|
'Segoe UI Symbol', 'Noto Color Emoji';
|
|
--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
|
|
--font-mono:
|
|
ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
|
|
|
|
/*
|
|
* Color System (Light Mode).
|
|
*/
|
|
|
|
/* Base Colors */
|
|
--color-background: oklch(1 0 0);
|
|
--color-foreground: oklch(0.279 0.02 262.86);
|
|
--color-subtle: hsl(0 0% 98%);
|
|
--color-subtle-foreground: oklch(0.48 0.024 262.37);
|
|
|
|
/* Surface Colors */
|
|
--color-card: oklch(1 0 0);
|
|
--color-card-foreground: oklch(0.279 0.02 262.86);
|
|
--color-popover: oklch(1 0 0);
|
|
--color-popover-foreground: oklch(0.48 0.024 262.37);
|
|
|
|
/* Border & Input Colors */
|
|
--color-border: var(--color-zinc-200);
|
|
--color-input: oklch(0.96 0.015 240.01);
|
|
--color-ring: oklch(87.15% 0.0094 258.34);
|
|
|
|
/* Semantic Colors */
|
|
--color-primary: oklch(21.03% 0.0318 264.65);
|
|
--color-primary-foreground: oklch(98.43% 0.0017 247.84);
|
|
--color-secondary: oklch(96.71% 0.0029 264.54);
|
|
--color-secondary-foreground: oklch(21.03% 0.0318 264.65);
|
|
--color-accent: oklch(96.71% 0.0029 264.54);
|
|
--color-accent-foreground: oklch(21.03% 0.0318 264.65);
|
|
--color-destructive: var(--color-rose-500);
|
|
--color-destructive-foreground: oklch(98.43% 0.0017 247.84);
|
|
|
|
/* Status Colors */
|
|
--color-success: var(--color-emerald-600);
|
|
--color-success-foreground: oklch(98% 0.01 140);
|
|
--color-warning: var(--color-amber-600);
|
|
--color-warning-foreground: oklch(20% 0.01 60);
|
|
--color-info: oklch(60% 0.15 240);
|
|
--color-info-foreground: oklch(98% 0.01 240);
|
|
|
|
/* Sidebar Colors */
|
|
--sidebar-background: var(--color-subtle);
|
|
--sidebar-foreground: hsl(240 5.3% 26.1%);
|
|
--sidebar-primary: hsl(240 5.9% 10%);
|
|
--sidebar-primary-foreground: hsl(0 0% 98%);
|
|
--sidebar-accent: hsl(240 4.8% 95.9%);
|
|
--sidebar-accent-foreground: hsl(240 5.9% 10%);
|
|
--sidebar-border: hsl(220 13% 91%);
|
|
--sidebar-ring: hsl(217.2 91.2% 59.8%);
|
|
}
|
|
|
|
.dark {
|
|
/*
|
|
* Color System (Dark Mode).
|
|
*/
|
|
|
|
/* Base Colors */
|
|
--color-background: var(--color-zinc-950);
|
|
--color-foreground: oklch(1 0 0);
|
|
--color-subtle: var(--color-zinc-900);
|
|
--color-subtle-foreground: var(--color-zinc-300);
|
|
|
|
/* Surface Colors */
|
|
--color-card: oklch(12.94% 0.0273 261.67);
|
|
--color-card-foreground: oklch(98.43% 0.0017 247.84);
|
|
--color-popover: oklch(12.94% 0.0273 261.67);
|
|
--color-popover-foreground: oklch(98.43% 0.0017 247.84);
|
|
|
|
/* Border & Input Colors */
|
|
--color-border: var(--color-zinc-800);
|
|
--color-input: oklch(27.84% 0.0296 256.85);
|
|
--color-ring: oklch(87.15% 0.0094 258.34);
|
|
|
|
/* Semantic Colors */
|
|
--color-primary: oklch(98.43% 0.0017 247.84);
|
|
--color-primary-foreground: oklch(21.03% 0.0318 264.65);
|
|
--color-secondary: oklch(27.84% 0.0296 256.85);
|
|
--color-secondary-foreground: oklch(98.43% 0.0017 247.84);
|
|
--color-accent: oklch(27.84% 0.0296 256.85);
|
|
--color-accent-foreground: oklch(98.43% 0.0017 247.84);
|
|
--color-destructive: oklch(39.59% 0.1331 25.72);
|
|
--color-destructive-foreground: oklch(98.43% 0.0017 247.84);
|
|
|
|
/* Status Colors */
|
|
--color-success: oklch(70% 0.15 140);
|
|
--color-success-foreground: oklch(15% 0.01 140);
|
|
--color-warning: oklch(80% 0.15 60);
|
|
--color-warning-foreground: oklch(15% 0.01 60);
|
|
--color-info: oklch(70% 0.15 240);
|
|
--color-info-foreground: oklch(15% 0.01 240);
|
|
|
|
/* Sidebar Colors */
|
|
--sidebar-background: var(--color-subtle);
|
|
--sidebar-foreground: hsl(240 4.8% 95.9%);
|
|
--sidebar-primary: hsl(224.3 76.3% 48%);
|
|
--sidebar-primary-foreground: hsl(0 0% 100%);
|
|
--sidebar-accent: var(--color-accent);
|
|
--sidebar-accent-foreground: hsl(240 4.8% 95.9%);
|
|
--sidebar-border: hsl(240 3.7% 15.9%);
|
|
--sidebar-ring: hsl(217.2 91.2% 59.8%);
|
|
}
|