feat: replace default Neutral theme with Catppuccin (Latte/Mocha)
Use OKLch color space with semantic tokens matching the webapp project. Add Bitcoin orange, float, fade-in-up, and glow animation tokens. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Patrick Mulligan
parent
47809dfaf6
commit
af52a7686f
1 changed files with 128 additions and 102 deletions
226
src/style.css
226
src/style.css
|
|
@ -1,5 +1,5 @@
|
||||||
@import "tailwindcss";
|
@import 'tailwindcss';
|
||||||
@import "tw-animate-css";
|
@import 'tw-animate-css';
|
||||||
|
|
||||||
@custom-variant dark (&:is(.dark *));
|
@custom-variant dark (&:is(.dark *));
|
||||||
|
|
||||||
|
|
@ -8,112 +8,138 @@
|
||||||
--radius-md: calc(var(--radius) - 2px);
|
--radius-md: calc(var(--radius) - 2px);
|
||||||
--radius-lg: var(--radius);
|
--radius-lg: var(--radius);
|
||||||
--radius-xl: calc(var(--radius) + 4px);
|
--radius-xl: calc(var(--radius) + 4px);
|
||||||
--color-background: var(--background);
|
|
||||||
--color-foreground: var(--foreground);
|
--color-background: oklch(var(--background));
|
||||||
--color-card: var(--card);
|
--color-foreground: oklch(var(--foreground));
|
||||||
--color-card-foreground: var(--card-foreground);
|
--color-card: oklch(var(--card));
|
||||||
--color-popover: var(--popover);
|
--color-card-foreground: oklch(var(--card-foreground));
|
||||||
--color-popover-foreground: var(--popover-foreground);
|
--color-popover: oklch(var(--popover));
|
||||||
--color-primary: var(--primary);
|
--color-popover-foreground: oklch(var(--popover-foreground));
|
||||||
--color-primary-foreground: var(--primary-foreground);
|
--color-primary: oklch(var(--primary));
|
||||||
--color-secondary: var(--secondary);
|
--color-primary-foreground: oklch(var(--primary-foreground));
|
||||||
--color-secondary-foreground: var(--secondary-foreground);
|
--color-secondary: oklch(var(--secondary));
|
||||||
--color-muted: var(--muted);
|
--color-secondary-foreground: oklch(var(--secondary-foreground));
|
||||||
--color-muted-foreground: var(--muted-foreground);
|
--color-muted: oklch(var(--muted));
|
||||||
--color-accent: var(--accent);
|
--color-muted-foreground: oklch(var(--muted-foreground));
|
||||||
--color-accent-foreground: var(--accent-foreground);
|
--color-accent: oklch(var(--accent));
|
||||||
--color-destructive: var(--destructive);
|
--color-accent-foreground: oklch(var(--accent-foreground));
|
||||||
--color-border: var(--border);
|
--color-destructive: oklch(var(--destructive));
|
||||||
--color-input: var(--input);
|
--color-destructive-foreground: oklch(var(--destructive-foreground));
|
||||||
--color-ring: var(--ring);
|
--color-border: oklch(var(--border));
|
||||||
--color-chart-1: var(--chart-1);
|
--color-input: oklch(var(--input));
|
||||||
--color-chart-2: var(--chart-2);
|
--color-ring: oklch(var(--ring));
|
||||||
--color-chart-3: var(--chart-3);
|
--color-chart-1: oklch(var(--chart-1));
|
||||||
--color-chart-4: var(--chart-4);
|
--color-chart-2: oklch(var(--chart-2));
|
||||||
--color-chart-5: var(--chart-5);
|
--color-chart-3: oklch(var(--chart-3));
|
||||||
--color-sidebar: var(--sidebar);
|
--color-chart-4: oklch(var(--chart-4));
|
||||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
--color-chart-5: oklch(var(--chart-5));
|
||||||
--color-sidebar-primary: var(--sidebar-primary);
|
|
||||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
/* Bitcoin orange for branding */
|
||||||
--color-sidebar-accent: var(--sidebar-accent);
|
--color-bitcoin: oklch(0.75 0.18 55);
|
||||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
--color-bitcoin-foreground: oklch(1.0 0 0);
|
||||||
--color-sidebar-border: var(--sidebar-border);
|
|
||||||
--color-sidebar-ring: var(--sidebar-ring);
|
--animate-accordion-down: accordion-down 0.2s ease-out;
|
||||||
|
--animate-accordion-up: accordion-up 0.2s ease-out;
|
||||||
|
|
||||||
|
@keyframes accordion-down {
|
||||||
|
from { height: 0; }
|
||||||
|
to { height: var(--reka-accordion-content-height); }
|
||||||
|
}
|
||||||
|
@keyframes accordion-up {
|
||||||
|
from { height: var(--reka-accordion-content-height); }
|
||||||
|
to { height: 0; }
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
@keyframes float {
|
||||||
--radius: 0.625rem;
|
0%, 100% { transform: translateY(0); }
|
||||||
--background: oklch(1 0 0);
|
50% { transform: translateY(-10px); }
|
||||||
--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);
|
|
||||||
--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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark {
|
@keyframes fade-in-up {
|
||||||
--background: oklch(0.145 0 0);
|
from { opacity: 0; transform: translateY(20px); }
|
||||||
--foreground: oklch(0.985 0 0);
|
to { opacity: 1; transform: translateY(0); }
|
||||||
--card: oklch(0.205 0 0);
|
}
|
||||||
--card-foreground: oklch(0.985 0 0);
|
|
||||||
--popover: oklch(0.205 0 0);
|
@keyframes glow {
|
||||||
--popover-foreground: oklch(0.985 0 0);
|
0% { text-shadow: 0 0 20px oklch(0.75 0.18 55 / 0.3); }
|
||||||
--primary: oklch(0.922 0 0);
|
100% { text-shadow: 0 0 30px oklch(0.75 0.18 55 / 0.6); }
|
||||||
--primary-foreground: oklch(0.205 0 0);
|
}
|
||||||
--secondary: oklch(0.269 0 0);
|
|
||||||
--secondary-foreground: oklch(0.985 0 0);
|
--animate-float: float 4s ease-in-out infinite;
|
||||||
--muted: oklch(0.269 0 0);
|
--animate-fade-in-up: fade-in-up 1s ease-out;
|
||||||
--muted-foreground: oklch(0.708 0 0);
|
--animate-glow: glow 2s ease-in-out infinite alternate;
|
||||||
--accent: oklch(0.269 0 0);
|
|
||||||
--accent-foreground: oklch(0.985 0 0);
|
|
||||||
--destructive: oklch(0.704 0.191 22.216);
|
|
||||||
--border: oklch(1 0 0 / 10%);
|
|
||||||
--input: oklch(1 0 0 / 15%);
|
|
||||||
--ring: oklch(0.556 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.205 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(1 0 0 / 10%);
|
|
||||||
--sidebar-ring: oklch(0.556 0 0);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
* {
|
:root {
|
||||||
@apply border-border outline-ring/50;
|
/* Catppuccin Latte */
|
||||||
|
--background: 0.98 0.005 235;
|
||||||
|
--foreground: 0.25 0.02 235;
|
||||||
|
--card: 1.0 0.005 235;
|
||||||
|
--card-foreground: 0.25 0.02 235;
|
||||||
|
--popover: 1.0 0.005 235;
|
||||||
|
--popover-foreground: 0.25 0.02 235;
|
||||||
|
--primary: 0.60 0.18 250;
|
||||||
|
--primary-foreground: 1.0 0.005 235;
|
||||||
|
--secondary: 0.92 0.04 235;
|
||||||
|
--secondary-foreground: 0.25 0.02 235;
|
||||||
|
--muted: 0.95 0.03 235;
|
||||||
|
--muted-foreground: 0.45 0.03 235;
|
||||||
|
--accent: 0.70 0.18 290;
|
||||||
|
--accent-foreground: 0.25 0.02 235;
|
||||||
|
--destructive: 0.70 0.28 0;
|
||||||
|
--destructive-foreground: 1.0 0.005 235;
|
||||||
|
--border: 0.90 0.04 235;
|
||||||
|
--input: 0.90 0.04 235;
|
||||||
|
--ring: 0.60 0.18 250;
|
||||||
|
--chart-1: 0.70 0.28 0;
|
||||||
|
--chart-2: 0.80 0.25 30;
|
||||||
|
--chart-3: 0.85 0.20 90;
|
||||||
|
--chart-4: 0.75 0.20 150;
|
||||||
|
--chart-5: 0.65 0.20 180;
|
||||||
|
--radius: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
/* Catppuccin Mocha */
|
||||||
|
--background: 0.25 0.03 256;
|
||||||
|
--foreground: 0.98 0.02 256;
|
||||||
|
--card: 0.27 0.03 256;
|
||||||
|
--card-foreground: 0.98 0.02 256;
|
||||||
|
--popover: 0.27 0.03 256;
|
||||||
|
--popover-foreground: 0.98 0.02 256;
|
||||||
|
--primary: 0.80 0.15 270;
|
||||||
|
--primary-foreground: 0.20 0.02 256;
|
||||||
|
--secondary: 0.32 0.04 256;
|
||||||
|
--secondary-foreground: 0.98 0.02 256;
|
||||||
|
--muted: 0.29 0.03 256;
|
||||||
|
--muted-foreground: 0.85 0.03 256;
|
||||||
|
--accent: 0.75 0.18 300;
|
||||||
|
--accent-foreground: 0.20 0.02 256;
|
||||||
|
--destructive: 0.75 0.28 10;
|
||||||
|
--destructive-foreground: 0.98 0.02 256;
|
||||||
|
--border: 0.32 0.04 256;
|
||||||
|
--input: 0.32 0.04 256;
|
||||||
|
--ring: 0.80 0.15 270;
|
||||||
|
--chart-1: 0.75 0.28 10;
|
||||||
|
--chart-2: 0.85 0.22 40;
|
||||||
|
--chart-3: 0.88 0.18 95;
|
||||||
|
--chart-4: 0.80 0.18 155;
|
||||||
|
--chart-5: 0.70 0.18 190;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
::after,
|
||||||
|
::before,
|
||||||
|
::backdrop,
|
||||||
|
::file-selector-button {
|
||||||
|
border-color: var(--color-gray-200, currentColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
@apply border-border;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@apply bg-background text-foreground;
|
@apply bg-background text-foreground;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue