feat(07-01): replace CSS variable blocks with Catppuccin Mocha, Tokyo Night, and Catppuccin Latte palettes
- Replace :root block with Catppuccin Latte light theme values (#eff1f5 base) - Replace .dark block with Catppuccin Mocha dark theme values (#1e1e2e base) - Add .theme-tokyo-night.dark block with Tokyo Night values (#1a1b26 base) - Remove redundant color-scheme: dark; from scrollbar section (moved into .dark block)
This commit is contained in:
Nexus Dev
parent
8790e939c1
commit
545b77a29b
1 changed files with 100 additions and 68 deletions
168
ui/src/index.css
168
ui/src/index.css
|
|
@ -45,73 +45,109 @@
|
|||
:root {
|
||||
color-scheme: light;
|
||||
--radius: 0;
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--destructive-foreground: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
--background: #eff1f5;
|
||||
--foreground: #4c4f69;
|
||||
--card: #e6e9ef;
|
||||
--card-foreground: #4c4f69;
|
||||
--popover: #e6e9ef;
|
||||
--popover-foreground: #4c4f69;
|
||||
--primary: #1e66f5;
|
||||
--primary-foreground: #eff1f5;
|
||||
--secondary: #ccd0da;
|
||||
--secondary-foreground: #4c4f69;
|
||||
--muted: #ccd0da;
|
||||
--muted-foreground: #9ca0b0;
|
||||
--accent: #bcc0cc;
|
||||
--accent-foreground: #4c4f69;
|
||||
--destructive: #d20f39;
|
||||
--destructive-foreground: #eff1f5;
|
||||
--border: #ccd0da;
|
||||
--input: #ccd0da;
|
||||
--ring: #1e66f5;
|
||||
--chart-1: #1e66f5;
|
||||
--chart-2: #40a02b;
|
||||
--chart-3: #8839ef;
|
||||
--chart-4: #df8e1d;
|
||||
--chart-5: #d20f39;
|
||||
--sidebar: #e6e9ef;
|
||||
--sidebar-foreground: #4c4f69;
|
||||
--sidebar-primary: #1e66f5;
|
||||
--sidebar-primary-foreground: #eff1f5;
|
||||
--sidebar-accent: #ccd0da;
|
||||
--sidebar-accent-foreground: #4c4f69;
|
||||
--sidebar-border: #ccd0da;
|
||||
--sidebar-ring: #1e66f5;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.205 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.205 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.985 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.637 0.237 25.331);
|
||||
--destructive-foreground: oklch(0.985 0 0);
|
||||
--border: oklch(0.269 0 0);
|
||||
--input: oklch(0.269 0 0);
|
||||
--ring: oklch(0.439 0 0);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
--sidebar: oklch(0.145 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(0.269 0 0);
|
||||
--sidebar-ring: oklch(0.439 0 0);
|
||||
color-scheme: dark;
|
||||
--background: #1e1e2e;
|
||||
--foreground: #cdd6f4;
|
||||
--card: #181825;
|
||||
--card-foreground: #cdd6f4;
|
||||
--popover: #181825;
|
||||
--popover-foreground: #cdd6f4;
|
||||
--primary: #89b4fa;
|
||||
--primary-foreground: #1e1e2e;
|
||||
--secondary: #313244;
|
||||
--secondary-foreground: #cdd6f4;
|
||||
--muted: #313244;
|
||||
--muted-foreground: #6c7086;
|
||||
--accent: #45475a;
|
||||
--accent-foreground: #cdd6f4;
|
||||
--destructive: #f38ba8;
|
||||
--destructive-foreground: #1e1e2e;
|
||||
--border: #313244;
|
||||
--input: #313244;
|
||||
--ring: #89b4fa;
|
||||
--chart-1: #89b4fa;
|
||||
--chart-2: #a6e3a1;
|
||||
--chart-3: #cba6f7;
|
||||
--chart-4: #f9e2af;
|
||||
--chart-5: #f38ba8;
|
||||
--sidebar: #181825;
|
||||
--sidebar-foreground: #cdd6f4;
|
||||
--sidebar-primary: #89b4fa;
|
||||
--sidebar-primary-foreground: #1e1e2e;
|
||||
--sidebar-accent: #313244;
|
||||
--sidebar-accent-foreground: #cdd6f4;
|
||||
--sidebar-border: #313244;
|
||||
--sidebar-ring: #89b4fa;
|
||||
}
|
||||
|
||||
.theme-tokyo-night.dark {
|
||||
--background: #1a1b26;
|
||||
--foreground: #c0caf5;
|
||||
--card: #16161e;
|
||||
--card-foreground: #c0caf5;
|
||||
--popover: #16161e;
|
||||
--popover-foreground: #c0caf5;
|
||||
--primary: #7aa2f7;
|
||||
--primary-foreground: #1a1b26;
|
||||
--secondary: #292e42;
|
||||
--secondary-foreground: #c0caf5;
|
||||
--muted: #292e42;
|
||||
--muted-foreground: #565f89;
|
||||
--accent: #3b4261;
|
||||
--accent-foreground: #c0caf5;
|
||||
--destructive: #f7768e;
|
||||
--destructive-foreground: #1a1b26;
|
||||
--border: #292e42;
|
||||
--input: #292e42;
|
||||
--ring: #7aa2f7;
|
||||
--chart-1: #7aa2f7;
|
||||
--chart-2: #9ece6a;
|
||||
--chart-3: #bb9af7;
|
||||
--chart-4: #e0af68;
|
||||
--chart-5: #f7768e;
|
||||
--sidebar: #16161e;
|
||||
--sidebar-foreground: #c0caf5;
|
||||
--sidebar-primary: #7aa2f7;
|
||||
--sidebar-primary-foreground: #1a1b26;
|
||||
--sidebar-accent: #292e42;
|
||||
--sidebar-accent-foreground: #c0caf5;
|
||||
--sidebar-border: #292e42;
|
||||
--sidebar-ring: #7aa2f7;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
|
|
@ -160,10 +196,6 @@
|
|||
}
|
||||
|
||||
/* Dark mode scrollbars */
|
||||
.dark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
.dark *::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue