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:
parent
c2434bc67e
commit
f0f65a63dd
1 changed files with 100 additions and 68 deletions
168
ui/src/index.css
168
ui/src/index.css
|
|
@ -45,73 +45,109 @@
|
||||||
:root {
|
:root {
|
||||||
color-scheme: light;
|
color-scheme: light;
|
||||||
--radius: 0;
|
--radius: 0;
|
||||||
--background: oklch(1 0 0);
|
--background: #eff1f5;
|
||||||
--foreground: oklch(0.145 0 0);
|
--foreground: #4c4f69;
|
||||||
--card: oklch(1 0 0);
|
--card: #e6e9ef;
|
||||||
--card-foreground: oklch(0.145 0 0);
|
--card-foreground: #4c4f69;
|
||||||
--popover: oklch(1 0 0);
|
--popover: #e6e9ef;
|
||||||
--popover-foreground: oklch(0.145 0 0);
|
--popover-foreground: #4c4f69;
|
||||||
--primary: oklch(0.205 0 0);
|
--primary: #1e66f5;
|
||||||
--primary-foreground: oklch(0.985 0 0);
|
--primary-foreground: #eff1f5;
|
||||||
--secondary: oklch(0.97 0 0);
|
--secondary: #ccd0da;
|
||||||
--secondary-foreground: oklch(0.205 0 0);
|
--secondary-foreground: #4c4f69;
|
||||||
--muted: oklch(0.97 0 0);
|
--muted: #ccd0da;
|
||||||
--muted-foreground: oklch(0.556 0 0);
|
--muted-foreground: #9ca0b0;
|
||||||
--accent: oklch(0.97 0 0);
|
--accent: #bcc0cc;
|
||||||
--accent-foreground: oklch(0.205 0 0);
|
--accent-foreground: #4c4f69;
|
||||||
--destructive: oklch(0.577 0.245 27.325);
|
--destructive: #d20f39;
|
||||||
--destructive-foreground: oklch(0.577 0.245 27.325);
|
--destructive-foreground: #eff1f5;
|
||||||
--border: oklch(0.922 0 0);
|
--border: #ccd0da;
|
||||||
--input: oklch(0.922 0 0);
|
--input: #ccd0da;
|
||||||
--ring: oklch(0.708 0 0);
|
--ring: #1e66f5;
|
||||||
--chart-1: oklch(0.646 0.222 41.116);
|
--chart-1: #1e66f5;
|
||||||
--chart-2: oklch(0.6 0.118 184.704);
|
--chart-2: #40a02b;
|
||||||
--chart-3: oklch(0.398 0.07 227.392);
|
--chart-3: #8839ef;
|
||||||
--chart-4: oklch(0.828 0.189 84.429);
|
--chart-4: #df8e1d;
|
||||||
--chart-5: oklch(0.769 0.188 70.08);
|
--chart-5: #d20f39;
|
||||||
--sidebar: oklch(0.985 0 0);
|
--sidebar: #e6e9ef;
|
||||||
--sidebar-foreground: oklch(0.145 0 0);
|
--sidebar-foreground: #4c4f69;
|
||||||
--sidebar-primary: oklch(0.205 0 0);
|
--sidebar-primary: #1e66f5;
|
||||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
--sidebar-primary-foreground: #eff1f5;
|
||||||
--sidebar-accent: oklch(0.97 0 0);
|
--sidebar-accent: #ccd0da;
|
||||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
--sidebar-accent-foreground: #4c4f69;
|
||||||
--sidebar-border: oklch(0.922 0 0);
|
--sidebar-border: #ccd0da;
|
||||||
--sidebar-ring: oklch(0.708 0 0);
|
--sidebar-ring: #1e66f5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark {
|
.dark {
|
||||||
--background: oklch(0.145 0 0);
|
color-scheme: dark;
|
||||||
--foreground: oklch(0.985 0 0);
|
--background: #1e1e2e;
|
||||||
--card: oklch(0.205 0 0);
|
--foreground: #cdd6f4;
|
||||||
--card-foreground: oklch(0.985 0 0);
|
--card: #181825;
|
||||||
--popover: oklch(0.205 0 0);
|
--card-foreground: #cdd6f4;
|
||||||
--popover-foreground: oklch(0.985 0 0);
|
--popover: #181825;
|
||||||
--primary: oklch(0.985 0 0);
|
--popover-foreground: #cdd6f4;
|
||||||
--primary-foreground: oklch(0.205 0 0);
|
--primary: #89b4fa;
|
||||||
--secondary: oklch(0.269 0 0);
|
--primary-foreground: #1e1e2e;
|
||||||
--secondary-foreground: oklch(0.985 0 0);
|
--secondary: #313244;
|
||||||
--muted: oklch(0.269 0 0);
|
--secondary-foreground: #cdd6f4;
|
||||||
--muted-foreground: oklch(0.708 0 0);
|
--muted: #313244;
|
||||||
--accent: oklch(0.269 0 0);
|
--muted-foreground: #6c7086;
|
||||||
--accent-foreground: oklch(0.985 0 0);
|
--accent: #45475a;
|
||||||
--destructive: oklch(0.637 0.237 25.331);
|
--accent-foreground: #cdd6f4;
|
||||||
--destructive-foreground: oklch(0.985 0 0);
|
--destructive: #f38ba8;
|
||||||
--border: oklch(0.269 0 0);
|
--destructive-foreground: #1e1e2e;
|
||||||
--input: oklch(0.269 0 0);
|
--border: #313244;
|
||||||
--ring: oklch(0.439 0 0);
|
--input: #313244;
|
||||||
--chart-1: oklch(0.488 0.243 264.376);
|
--ring: #89b4fa;
|
||||||
--chart-2: oklch(0.696 0.17 162.48);
|
--chart-1: #89b4fa;
|
||||||
--chart-3: oklch(0.769 0.188 70.08);
|
--chart-2: #a6e3a1;
|
||||||
--chart-4: oklch(0.627 0.265 303.9);
|
--chart-3: #cba6f7;
|
||||||
--chart-5: oklch(0.645 0.246 16.439);
|
--chart-4: #f9e2af;
|
||||||
--sidebar: oklch(0.145 0 0);
|
--chart-5: #f38ba8;
|
||||||
--sidebar-foreground: oklch(0.985 0 0);
|
--sidebar: #181825;
|
||||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
--sidebar-foreground: #cdd6f4;
|
||||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
--sidebar-primary: #89b4fa;
|
||||||
--sidebar-accent: oklch(0.269 0 0);
|
--sidebar-primary-foreground: #1e1e2e;
|
||||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
--sidebar-accent: #313244;
|
||||||
--sidebar-border: oklch(0.269 0 0);
|
--sidebar-accent-foreground: #cdd6f4;
|
||||||
--sidebar-ring: oklch(0.439 0 0);
|
--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 {
|
@layer base {
|
||||||
|
|
@ -160,10 +196,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Dark mode scrollbars */
|
/* Dark mode scrollbars */
|
||||||
.dark {
|
|
||||||
color-scheme: dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark *::-webkit-scrollbar {
|
.dark *::-webkit-scrollbar {
|
||||||
width: 8px;
|
width: 8px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue