feat(machine): add 6 webapp-aligned themes, retune Catppuccin
Pulls webapp's tuned Catppuccin oklch palette (mauve primary, teal accent, white card) over the prior straight-from-the-spec hex values, and adds the other six webapp themes: Countryside Castle, Dark Matter, Emerald Forest, Light Green, Neo Brutalist, Starry Night. Each new block extends the webapp palette with ATM-specific success/warning/ bitcoin/qr semantic colors tuned to the theme's vibe. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
055afba894
commit
db074e2ddd
2 changed files with 491 additions and 59 deletions
|
|
@ -1,6 +1,18 @@
|
||||||
import { ref, computed, watch } from 'vue'
|
import { ref, computed, watch } from 'vue'
|
||||||
|
|
||||||
export type ThemeId = 'gruvbox' | 'catppuccin' | 'cyberpunk' | 'dracula' | 'nord' | 'tokyo-night'
|
export type ThemeId =
|
||||||
|
| 'gruvbox'
|
||||||
|
| 'catppuccin'
|
||||||
|
| 'cyberpunk'
|
||||||
|
| 'dracula'
|
||||||
|
| 'nord'
|
||||||
|
| 'tokyo-night'
|
||||||
|
| 'countrysidecastle'
|
||||||
|
| 'darkmatter'
|
||||||
|
| 'emeraldforest'
|
||||||
|
| 'lightgreen'
|
||||||
|
| 'neobrut'
|
||||||
|
| 'starrynight'
|
||||||
export type ColorMode = 'light' | 'dark' | 'system'
|
export type ColorMode = 'light' | 'dark' | 'system'
|
||||||
|
|
||||||
export interface ThemeOption {
|
export interface ThemeOption {
|
||||||
|
|
@ -15,6 +27,12 @@ export const themes: ThemeOption[] = [
|
||||||
{ id: 'nord', label: 'Nord' },
|
{ id: 'nord', label: 'Nord' },
|
||||||
{ id: 'tokyo-night', label: 'Tokyo Night' },
|
{ id: 'tokyo-night', label: 'Tokyo Night' },
|
||||||
{ id: 'cyberpunk', label: 'Cyberpunk' },
|
{ id: 'cyberpunk', label: 'Cyberpunk' },
|
||||||
|
{ id: 'countrysidecastle', label: 'Countryside Castle' },
|
||||||
|
{ id: 'darkmatter', label: 'Dark Matter' },
|
||||||
|
{ id: 'emeraldforest', label: 'Emerald Forest' },
|
||||||
|
{ id: 'lightgreen', label: 'Light Green' },
|
||||||
|
{ id: 'neobrut', label: 'Neo Brutalist' },
|
||||||
|
{ id: 'starrynight', label: 'Starry Night' },
|
||||||
]
|
]
|
||||||
|
|
||||||
const THEME_KEY = 'lamassu-theme'
|
const THEME_KEY = 'lamassu-theme'
|
||||||
|
|
|
||||||
|
|
@ -144,74 +144,74 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Catppuccin Palette
|
* Catppuccin Palette (tuned, matches webapp)
|
||||||
* https://github.com/catppuccin/catppuccin
|
* https://github.com/catppuccin/catppuccin
|
||||||
*/
|
*/
|
||||||
|
|
||||||
[data-theme='catppuccin'] {
|
[data-theme='catppuccin'] {
|
||||||
--radius: 0.625rem;
|
--radius: 0.35rem;
|
||||||
|
|
||||||
/* Catppuccin Latte (light) */
|
/* Catppuccin Latte (light) */
|
||||||
--background: #eff1f5; /* base */
|
--background: oklch(0.9578 0.0058 264.5321);
|
||||||
--foreground: #4c4f69; /* text */
|
--foreground: oklch(0.4355 0.0430 279.3250);
|
||||||
--card: #e6e9ef; /* mantle */
|
--card: oklch(1 0 0);
|
||||||
--card-foreground: #4c4f69;
|
--card-foreground: oklch(0.4355 0.0430 279.3250);
|
||||||
--popover: #e6e9ef;
|
--popover: oklch(0.8575 0.0145 268.4756);
|
||||||
--popover-foreground: #4c4f69;
|
--popover-foreground: oklch(0.4355 0.0430 279.3250);
|
||||||
--primary: #8839ef; /* mauve */
|
--primary: oklch(0.5547 0.2503 297.0156); /* mauve */
|
||||||
--primary-foreground: #eff1f5;
|
--primary-foreground: oklch(1 0 0);
|
||||||
--secondary: #ccd0da; /* surface0 */
|
--secondary: oklch(0.8575 0.0145 268.4756);
|
||||||
--secondary-foreground: #4c4f69;
|
--secondary-foreground: oklch(0.4355 0.0430 279.3250);
|
||||||
--muted: #ccd0da;
|
--muted: oklch(0.9060 0.0117 264.5071);
|
||||||
--muted-foreground: #6c6f85; /* subtext0 */
|
--muted-foreground: oklch(0.5471 0.0343 279.0837);
|
||||||
--accent: #1e66f5; /* blue */
|
--accent: oklch(0.6820 0.1448 235.3822); /* teal */
|
||||||
--accent-foreground: #eff1f5;
|
--accent-foreground: oklch(1 0 0);
|
||||||
--destructive: #d20f39; /* red */
|
--destructive: oklch(0.5505 0.2155 19.8095);
|
||||||
--border: #bcc0cc; /* surface1 */
|
--border: oklch(0.8083 0.0174 271.1982);
|
||||||
--input: #bcc0cc;
|
--input: oklch(0.8575 0.0145 268.4756);
|
||||||
--ring: #8839ef;
|
--ring: oklch(0.5547 0.2503 297.0156);
|
||||||
|
|
||||||
--success: #40a02b; /* green */
|
--success: #40a02b; /* catppuccin green */
|
||||||
--success-foreground: #eff1f5;
|
--success-foreground: oklch(0.9578 0.0058 264.5321);
|
||||||
--warning: #df8e1d; /* yellow */
|
--warning: #df8e1d; /* catppuccin yellow */
|
||||||
--warning-foreground: #4c4f69;
|
--warning-foreground: oklch(0.4355 0.0430 279.3250);
|
||||||
--bitcoin: #fe640b; /* peach */
|
--bitcoin: #fe640b; /* catppuccin peach */
|
||||||
--bitcoin-foreground: #eff1f5;
|
--bitcoin-foreground: oklch(0.9578 0.0058 264.5321);
|
||||||
|
|
||||||
--qr: #eff1f5;
|
--qr: oklch(0.9578 0.0058 264.5321);
|
||||||
--qr-foreground: #4c4f69;
|
--qr-foreground: oklch(0.4355 0.0430 279.3250);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme='catppuccin'].dark {
|
[data-theme='catppuccin'].dark {
|
||||||
/* Catppuccin Mocha (dark) */
|
/* Catppuccin Mocha (dark) */
|
||||||
--background: #1e1e2e; /* base */
|
--background: oklch(0.2155 0.0254 284.0647);
|
||||||
--foreground: #cdd6f4; /* text */
|
--foreground: oklch(0.8787 0.0426 272.2767);
|
||||||
--card: #181825; /* mantle */
|
--card: oklch(0.2429 0.0304 283.9110);
|
||||||
--card-foreground: #cdd6f4;
|
--card-foreground: oklch(0.8787 0.0426 272.2767);
|
||||||
--popover: #181825;
|
--popover: oklch(0.4037 0.0320 280.1520);
|
||||||
--popover-foreground: #cdd6f4;
|
--popover-foreground: oklch(0.8787 0.0426 272.2767);
|
||||||
--primary: #cba6f7; /* mauve */
|
--primary: oklch(0.7871 0.1187 304.7693); /* mauve */
|
||||||
--primary-foreground: #1e1e2e;
|
--primary-foreground: oklch(0.2429 0.0304 283.9110);
|
||||||
--secondary: #313244; /* surface0 */
|
--secondary: oklch(0.4765 0.0340 278.6430);
|
||||||
--secondary-foreground: #cdd6f4;
|
--secondary-foreground: oklch(0.8787 0.0426 272.2767);
|
||||||
--muted: #313244;
|
--muted: oklch(0.2973 0.0294 276.2144);
|
||||||
--muted-foreground: #a6adc8; /* subtext0 */
|
--muted-foreground: oklch(0.7510 0.0396 273.9320);
|
||||||
--accent: #89b4fa; /* blue */
|
--accent: oklch(0.8467 0.0833 210.2545); /* teal */
|
||||||
--accent-foreground: #1e1e2e;
|
--accent-foreground: oklch(0.2429 0.0304 283.9110);
|
||||||
--destructive: #f38ba8; /* red */
|
--destructive: oklch(0.7556 0.1297 2.7642);
|
||||||
--border: #45475a; /* surface1 */
|
--border: oklch(0.3240 0.0319 281.9784);
|
||||||
--input: #45475a;
|
--input: oklch(0.3240 0.0319 281.9784);
|
||||||
--ring: #cba6f7;
|
--ring: oklch(0.7871 0.1187 304.7693);
|
||||||
|
|
||||||
--success: #a6e3a1; /* green */
|
--success: #a6e3a1; /* catppuccin green */
|
||||||
--success-foreground: #1e1e2e;
|
--success-foreground: oklch(0.2155 0.0254 284.0647);
|
||||||
--warning: #f9e2af; /* yellow */
|
--warning: #f9e2af; /* catppuccin yellow */
|
||||||
--warning-foreground: #1e1e2e;
|
--warning-foreground: oklch(0.2155 0.0254 284.0647);
|
||||||
--bitcoin: #fab387; /* peach */
|
--bitcoin: #fab387; /* catppuccin peach */
|
||||||
--bitcoin-foreground: #1e1e2e;
|
--bitcoin-foreground: oklch(0.2155 0.0254 284.0647);
|
||||||
|
|
||||||
--qr: #eff1f5;
|
--qr: #f5f0e6;
|
||||||
--qr-foreground: #1e1e2e;
|
--qr-foreground: oklch(0.2155 0.0254 284.0647);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -498,6 +498,420 @@
|
||||||
--qr-foreground: #1a1b26;
|
--qr-foreground: #1a1b26;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Countryside Castle Palette
|
||||||
|
* Warm stone-and-moss tones, calm primaries
|
||||||
|
*/
|
||||||
|
|
||||||
|
[data-theme='countrysidecastle'] {
|
||||||
|
--radius: 0.3rem;
|
||||||
|
|
||||||
|
--background: oklch(0.9730 0.0058 84.5664);
|
||||||
|
--foreground: oklch(0.3247 0.0226 57.3596);
|
||||||
|
--card: oklch(0.9459 0.0117 84.5794);
|
||||||
|
--card-foreground: oklch(0.2724 0.0177 57.4319);
|
||||||
|
--popover: oklch(0.9595 0.0088 84.5733);
|
||||||
|
--popover-foreground: oklch(0.2175 0.0125 57.5482);
|
||||||
|
--primary: oklch(0.5698 0.0614 230.9798); /* dusty blue */
|
||||||
|
--primary-foreground: oklch(1 0 0);
|
||||||
|
--secondary: oklch(0.8197 0.0295 76.4350);
|
||||||
|
--secondary-foreground: oklch(0.3750 0.0273 57.3103);
|
||||||
|
--muted: oklch(0.8903 0.0080 91.4872);
|
||||||
|
--muted-foreground: oklch(0.5129 0.0202 57.8140);
|
||||||
|
--accent: oklch(0.5425 0.0625 154.6280); /* moss green */
|
||||||
|
--accent-foreground: oklch(1 0 0);
|
||||||
|
--destructive: oklch(0.5107 0.1226 22.3963);
|
||||||
|
--border: oklch(0.8540 0.0188 76.5358);
|
||||||
|
--input: oklch(0.9130 0.0111 76.5933);
|
||||||
|
--ring: oklch(0.5698 0.0614 230.9798);
|
||||||
|
|
||||||
|
--success: oklch(0.5425 0.0625 154.6280); /* moss green */
|
||||||
|
--success-foreground: oklch(1 0 0);
|
||||||
|
--warning: oklch(0.6550 0.0929 74.2249); /* warm amber */
|
||||||
|
--warning-foreground: oklch(0.2724 0.0177 57.4319);
|
||||||
|
--bitcoin: oklch(0.5570 0.0685 47.4365); /* burnt orange */
|
||||||
|
--bitcoin-foreground: oklch(1 0 0);
|
||||||
|
|
||||||
|
--qr: oklch(0.9730 0.0058 84.5664);
|
||||||
|
--qr-foreground: oklch(0.3247 0.0226 57.3596);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme='countrysidecastle'].dark {
|
||||||
|
--background: oklch(0.2299 0.0198 256.8306);
|
||||||
|
--foreground: oklch(0.8894 0.0105 76.5953);
|
||||||
|
--card: oklch(0.2605 0.0240 256.8358);
|
||||||
|
--card-foreground: oklch(0.9266 0.0069 76.6174);
|
||||||
|
--popover: oklch(0.2090 0.0169 256.8258);
|
||||||
|
--popover-foreground: oklch(0.9635 0.0034 76.6361);
|
||||||
|
--primary: oklch(0.7041 0.0385 211.1736); /* slate-blue */
|
||||||
|
--primary-foreground: oklch(0.2079 0.0203 256.8404);
|
||||||
|
--secondary: oklch(0.4265 0.0167 76.4097);
|
||||||
|
--secondary-foreground: oklch(0.8894 0.0105 76.5953);
|
||||||
|
--muted: oklch(0.3137 0.0183 256.8010);
|
||||||
|
--muted-foreground: oklch(0.7169 0.0173 256.7349);
|
||||||
|
--accent: oklch(0.5342 0.0451 158.8384); /* moss */
|
||||||
|
--accent-foreground: oklch(0.9635 0.0034 76.6361);
|
||||||
|
--destructive: oklch(0.4708 0.1367 24.0033);
|
||||||
|
--border: oklch(0.3591 0.0295 256.8271);
|
||||||
|
--input: oklch(0.2920 0.0224 256.8218);
|
||||||
|
--ring: oklch(0.7041 0.0385 211.1736);
|
||||||
|
|
||||||
|
--success: oklch(0.5810 0.0497 158.8087);
|
||||||
|
--success-foreground: oklch(0.2299 0.0198 256.8306);
|
||||||
|
--warning: oklch(0.6763 0.0649 75.6254);
|
||||||
|
--warning-foreground: oklch(0.2299 0.0198 256.8306);
|
||||||
|
--bitcoin: oklch(0.6009 0.0747 47.4204);
|
||||||
|
--bitcoin-foreground: oklch(0.2299 0.0198 256.8306);
|
||||||
|
|
||||||
|
--qr: oklch(0.9266 0.0069 76.6174);
|
||||||
|
--qr-foreground: oklch(0.2299 0.0198 256.8306);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Dark Matter Palette
|
||||||
|
* Clean orange/teal with high-contrast surfaces
|
||||||
|
*/
|
||||||
|
|
||||||
|
[data-theme='darkmatter'] {
|
||||||
|
--radius: 0.75rem;
|
||||||
|
|
||||||
|
--background: oklch(1 0 0);
|
||||||
|
--foreground: oklch(0.2101 0.0318 264.6645);
|
||||||
|
--card: oklch(1 0 0);
|
||||||
|
--card-foreground: oklch(0.2101 0.0318 264.6645);
|
||||||
|
--popover: oklch(1 0 0);
|
||||||
|
--popover-foreground: oklch(0.2101 0.0318 264.6645);
|
||||||
|
--primary: oklch(0.6716 0.1368 48.5130); /* orange */
|
||||||
|
--primary-foreground: oklch(1 0 0);
|
||||||
|
--secondary: oklch(0.5360 0.0398 196.0280); /* teal */
|
||||||
|
--secondary-foreground: oklch(1 0 0);
|
||||||
|
--muted: oklch(0.9670 0.0029 264.5419);
|
||||||
|
--muted-foreground: oklch(0.5510 0.0234 264.3637);
|
||||||
|
--accent: oklch(0.9491 0 0);
|
||||||
|
--accent-foreground: oklch(0.2101 0.0318 264.6645);
|
||||||
|
--destructive: oklch(0.6368 0.2078 25.3313);
|
||||||
|
--border: oklch(0.9276 0.0058 264.5313);
|
||||||
|
--input: oklch(0.9276 0.0058 264.5313);
|
||||||
|
--ring: oklch(0.6716 0.1368 48.5130);
|
||||||
|
|
||||||
|
--success: oklch(0.6250 0.1772 140.4448);
|
||||||
|
--success-foreground: oklch(1 0 0);
|
||||||
|
--warning: oklch(0.7800 0.1500 86.0000);
|
||||||
|
--warning-foreground: oklch(0.2101 0.0318 264.6645);
|
||||||
|
--bitcoin: oklch(0.6716 0.1368 48.5130);
|
||||||
|
--bitcoin-foreground: oklch(1 0 0);
|
||||||
|
|
||||||
|
--qr: oklch(1 0 0);
|
||||||
|
--qr-foreground: oklch(0.2101 0.0318 264.6645);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme='darkmatter'].dark {
|
||||||
|
--background: oklch(0.1797 0.0043 308.1928);
|
||||||
|
--foreground: oklch(0.8109 0 0);
|
||||||
|
--card: oklch(0.1822 0 0);
|
||||||
|
--card-foreground: oklch(0.8109 0 0);
|
||||||
|
--popover: oklch(0.1797 0.0043 308.1928);
|
||||||
|
--popover-foreground: oklch(0.8109 0 0);
|
||||||
|
--primary: oklch(0.7214 0.1337 49.9802); /* warm orange */
|
||||||
|
--primary-foreground: oklch(0.1797 0.0043 308.1928);
|
||||||
|
--secondary: oklch(0.5940 0.0443 196.0233); /* teal */
|
||||||
|
--secondary-foreground: oklch(0.1797 0.0043 308.1928);
|
||||||
|
--muted: oklch(0.2520 0 0);
|
||||||
|
--muted-foreground: oklch(0.6268 0 0);
|
||||||
|
--accent: oklch(0.3211 0 0);
|
||||||
|
--accent-foreground: oklch(0.8109 0 0);
|
||||||
|
--destructive: oklch(0.5940 0.0443 196.0233);
|
||||||
|
--border: oklch(0.2520 0 0);
|
||||||
|
--input: oklch(0.2520 0 0);
|
||||||
|
--ring: oklch(0.7214 0.1337 49.9802);
|
||||||
|
|
||||||
|
--success: oklch(0.7500 0.1700 145.0000);
|
||||||
|
--success-foreground: oklch(0.1797 0.0043 308.1928);
|
||||||
|
--warning: oklch(0.8721 0.0864 68.5474);
|
||||||
|
--warning-foreground: oklch(0.1797 0.0043 308.1928);
|
||||||
|
--bitcoin: oklch(0.7214 0.1337 49.9802);
|
||||||
|
--bitcoin-foreground: oklch(0.1797 0.0043 308.1928);
|
||||||
|
|
||||||
|
--qr: oklch(0.9276 0.0058 264.5313);
|
||||||
|
--qr-foreground: oklch(0.1797 0.0043 308.1928);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Emerald Forest Palette
|
||||||
|
* Deep greens with soft sage neutrals
|
||||||
|
*/
|
||||||
|
|
||||||
|
[data-theme='emeraldforest'] {
|
||||||
|
--radius: 0.5rem;
|
||||||
|
|
||||||
|
--background: oklch(0.9793 0.0077 145.5161);
|
||||||
|
--foreground: oklch(0.2464 0.0358 168.9829);
|
||||||
|
--card: oklch(0.9649 0.0108 145.4913);
|
||||||
|
--card-foreground: oklch(0.2464 0.0358 168.9829);
|
||||||
|
--popover: oklch(0.9793 0.0077 145.5161);
|
||||||
|
--popover-foreground: oklch(0.2464 0.0358 168.9829);
|
||||||
|
--primary: oklch(0.5767 0.1258 156.2896); /* emerald */
|
||||||
|
--primary-foreground: oklch(0.9860 0.0025 165.0756);
|
||||||
|
--secondary: oklch(0.8935 0.0214 156.7700);
|
||||||
|
--secondary-foreground: oklch(0.3633 0.0586 159.6692);
|
||||||
|
--muted: oklch(0.9274 0.0118 150.6461);
|
||||||
|
--muted-foreground: oklch(0.4883 0.0348 172.3051);
|
||||||
|
--accent: oklch(0.9398 0.0317 164.2277);
|
||||||
|
--accent-foreground: oklch(0.4557 0.0902 161.0214);
|
||||||
|
--destructive: oklch(0.5714 0.2121 27.2502);
|
||||||
|
--border: oklch(0.8935 0.0214 156.7700);
|
||||||
|
--input: oklch(0.9293 0.0141 156.9525);
|
||||||
|
--ring: oklch(0.5767 0.1258 156.2896);
|
||||||
|
|
||||||
|
--success: oklch(0.6610 0.1560 154.8128); /* leaf green */
|
||||||
|
--success-foreground: oklch(1 0 0);
|
||||||
|
--warning: oklch(0.7012 0.1322 65.5000); /* amber */
|
||||||
|
--warning-foreground: oklch(0.2464 0.0358 168.9829);
|
||||||
|
--bitcoin: oklch(0.6920 0.2041 42.4293); /* warm orange */
|
||||||
|
--bitcoin-foreground: oklch(1 0 0);
|
||||||
|
|
||||||
|
--qr: oklch(0.9793 0.0077 145.5161);
|
||||||
|
--qr-foreground: oklch(0.2464 0.0358 168.9829);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme='emeraldforest'].dark {
|
||||||
|
--background: oklch(0.1554 0.0140 178.0345);
|
||||||
|
--foreground: oklch(0.9650 0.0064 164.9697);
|
||||||
|
--card: oklch(0.1965 0.0190 176.6910);
|
||||||
|
--card-foreground: oklch(0.9650 0.0064 164.9697);
|
||||||
|
--popover: oklch(0.1703 0.0163 177.0235);
|
||||||
|
--popover-foreground: oklch(0.9650 0.0064 164.9697);
|
||||||
|
--primary: oklch(0.7355 0.1793 154.0472); /* bright emerald */
|
||||||
|
--primary-foreground: oklch(0.1703 0.0163 177.0235);
|
||||||
|
--secondary: oklch(0.2896 0.0276 171.3798);
|
||||||
|
--secondary-foreground: oklch(0.9297 0.0128 164.7776);
|
||||||
|
--muted: oklch(0.2503 0.0187 172.1743);
|
||||||
|
--muted-foreground: oklch(0.7753 0.0200 164.4487);
|
||||||
|
--accent: oklch(0.3031 0.0438 164.4442);
|
||||||
|
--accent-foreground: oklch(0.9059 0.0980 161.8651);
|
||||||
|
--destructive: oklch(0.5181 0.1747 25.7610);
|
||||||
|
--border: oklch(0.2852 0.0226 172.0143);
|
||||||
|
--input: oklch(0.3190 0.0263 171.8953);
|
||||||
|
--ring: oklch(0.7355 0.1793 154.0472);
|
||||||
|
|
||||||
|
--success: oklch(0.7403 0.1521 151.7821);
|
||||||
|
--success-foreground: oklch(0.1554 0.0140 178.0345);
|
||||||
|
--warning: oklch(0.8237 0.1015 52.6294);
|
||||||
|
--warning-foreground: oklch(0.1554 0.0140 178.0345);
|
||||||
|
--bitcoin: oklch(0.7869 0.1601 51.8584);
|
||||||
|
--bitcoin-foreground: oklch(0.1554 0.0140 178.0345);
|
||||||
|
|
||||||
|
--qr: oklch(0.9650 0.0064 164.9697);
|
||||||
|
--qr-foreground: oklch(0.1554 0.0140 178.0345);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Light Green Palette
|
||||||
|
* Lime primary on cool blue neutrals
|
||||||
|
*/
|
||||||
|
|
||||||
|
[data-theme='lightgreen'] {
|
||||||
|
--radius: 1rem;
|
||||||
|
|
||||||
|
--background: oklch(0.9892 0.0054 117.9205);
|
||||||
|
--foreground: oklch(0.2077 0.0398 265.7549);
|
||||||
|
--card: oklch(1 0 0);
|
||||||
|
--card-foreground: oklch(0.2077 0.0398 265.7549);
|
||||||
|
--popover: oklch(1 0 0);
|
||||||
|
--popover-foreground: oklch(0.2077 0.0398 265.7549);
|
||||||
|
--primary: oklch(0.8871 0.2122 128.5041); /* lime */
|
||||||
|
--primary-foreground: oklch(0 0 0);
|
||||||
|
--secondary: oklch(0.3717 0.0392 257.2870);
|
||||||
|
--secondary-foreground: oklch(0.9842 0.0034 247.8575);
|
||||||
|
--muted: oklch(0.9683 0.0069 247.8956);
|
||||||
|
--muted-foreground: oklch(0.5544 0.0407 257.4166);
|
||||||
|
--accent: oklch(0.9819 0.0181 155.8263);
|
||||||
|
--accent-foreground: oklch(0.4479 0.1083 151.3277);
|
||||||
|
--destructive: oklch(0.6368 0.2078 25.3313);
|
||||||
|
--border: oklch(0.9288 0.0126 255.5078);
|
||||||
|
--input: oklch(0.9288 0.0126 255.5078);
|
||||||
|
--ring: oklch(0.8871 0.2122 128.5041);
|
||||||
|
|
||||||
|
--success: oklch(0.7227 0.1920 149.5793); /* fresh green */
|
||||||
|
--success-foreground: oklch(0 0 0);
|
||||||
|
--warning: oklch(0.7686 0.1647 70.0804); /* amber */
|
||||||
|
--warning-foreground: oklch(0 0 0);
|
||||||
|
--bitcoin: oklch(0.6920 0.2041 42.4293); /* warm orange */
|
||||||
|
--bitcoin-foreground: oklch(1 0 0);
|
||||||
|
|
||||||
|
--qr: oklch(1 0 0);
|
||||||
|
--qr-foreground: oklch(0.2077 0.0398 265.7549);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme='lightgreen'].dark {
|
||||||
|
--background: oklch(0.1288 0.0406 264.6952);
|
||||||
|
--foreground: oklch(0.9842 0.0034 247.8575);
|
||||||
|
--card: oklch(0.2077 0.0398 265.7549);
|
||||||
|
--card-foreground: oklch(0.9842 0.0034 247.8575);
|
||||||
|
--popover: oklch(0.2077 0.0398 265.7549);
|
||||||
|
--popover-foreground: oklch(0.9842 0.0034 247.8575);
|
||||||
|
--primary: oklch(0.8871 0.2122 128.5041); /* lime */
|
||||||
|
--primary-foreground: oklch(0 0 0);
|
||||||
|
--secondary: oklch(0.2795 0.0368 260.0310);
|
||||||
|
--secondary-foreground: oklch(0.9842 0.0034 247.8575);
|
||||||
|
--muted: oklch(0.2795 0.0368 260.0310);
|
||||||
|
--muted-foreground: oklch(0.7107 0.0351 256.7878);
|
||||||
|
--accent: oklch(0.3925 0.0896 152.5353);
|
||||||
|
--accent-foreground: oklch(0.8871 0.2122 128.5041);
|
||||||
|
--destructive: oklch(0.4437 0.1613 26.8994);
|
||||||
|
--border: oklch(0.2795 0.0368 260.0310);
|
||||||
|
--input: oklch(0.2795 0.0368 260.0310);
|
||||||
|
--ring: oklch(0.8871 0.2122 128.5041);
|
||||||
|
|
||||||
|
--success: oklch(0.7227 0.1920 149.5793);
|
||||||
|
--success-foreground: oklch(0.1288 0.0406 264.6952);
|
||||||
|
--warning: oklch(0.7686 0.1647 70.0804);
|
||||||
|
--warning-foreground: oklch(0.1288 0.0406 264.6952);
|
||||||
|
--bitcoin: oklch(0.7869 0.1601 51.8584);
|
||||||
|
--bitcoin-foreground: oklch(0.1288 0.0406 264.6952);
|
||||||
|
|
||||||
|
--qr: oklch(0.9842 0.0034 247.8575);
|
||||||
|
--qr-foreground: oklch(0.1288 0.0406 264.6952);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Neo Brutalist Palette
|
||||||
|
* Black borders, primary-color blocks, zero radius
|
||||||
|
*/
|
||||||
|
|
||||||
|
[data-theme='neobrut'] {
|
||||||
|
--radius: 0px;
|
||||||
|
|
||||||
|
--background: oklch(1 0 0);
|
||||||
|
--foreground: oklch(0 0 0);
|
||||||
|
--card: oklch(1 0 0);
|
||||||
|
--card-foreground: oklch(0 0 0);
|
||||||
|
--popover: oklch(1 0 0);
|
||||||
|
--popover-foreground: oklch(0 0 0);
|
||||||
|
--primary: oklch(0.6489 0.2370 26.9728); /* red */
|
||||||
|
--primary-foreground: oklch(1 0 0);
|
||||||
|
--secondary: oklch(0.9680 0.2110 109.7692); /* yellow */
|
||||||
|
--secondary-foreground: oklch(0 0 0);
|
||||||
|
--muted: oklch(0.9551 0 0);
|
||||||
|
--muted-foreground: oklch(0.3211 0 0);
|
||||||
|
--accent: oklch(0.5635 0.2408 260.8178); /* blue */
|
||||||
|
--accent-foreground: oklch(1 0 0);
|
||||||
|
--destructive: oklch(0 0 0);
|
||||||
|
--border: oklch(0 0 0);
|
||||||
|
--input: oklch(0 0 0);
|
||||||
|
--ring: oklch(0.6489 0.2370 26.9728);
|
||||||
|
|
||||||
|
--success: oklch(0.7323 0.2492 142.4953); /* bright green */
|
||||||
|
--success-foreground: oklch(0 0 0);
|
||||||
|
--warning: oklch(0.9680 0.2110 109.7692); /* bright yellow */
|
||||||
|
--warning-foreground: oklch(0 0 0);
|
||||||
|
--bitcoin: oklch(0.7800 0.1900 60.0000); /* bright orange */
|
||||||
|
--bitcoin-foreground: oklch(0 0 0);
|
||||||
|
|
||||||
|
--qr: oklch(1 0 0);
|
||||||
|
--qr-foreground: oklch(0 0 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme='neobrut'].dark {
|
||||||
|
--background: oklch(0 0 0);
|
||||||
|
--foreground: oklch(1 0 0);
|
||||||
|
--card: oklch(0.3211 0 0);
|
||||||
|
--card-foreground: oklch(1 0 0);
|
||||||
|
--popover: oklch(0.3211 0 0);
|
||||||
|
--popover-foreground: oklch(1 0 0);
|
||||||
|
--primary: oklch(0.7044 0.1872 23.1858); /* bright red */
|
||||||
|
--primary-foreground: oklch(0 0 0);
|
||||||
|
--secondary: oklch(0.9691 0.2005 109.6228); /* yellow */
|
||||||
|
--secondary-foreground: oklch(0 0 0);
|
||||||
|
--muted: oklch(0.2178 0 0);
|
||||||
|
--muted-foreground: oklch(0.8452 0 0);
|
||||||
|
--accent: oklch(0.6755 0.1765 252.2592); /* blue */
|
||||||
|
--accent-foreground: oklch(0 0 0);
|
||||||
|
--destructive: oklch(1 0 0);
|
||||||
|
--border: oklch(1 0 0);
|
||||||
|
--input: oklch(1 0 0);
|
||||||
|
--ring: oklch(0.7044 0.1872 23.1858);
|
||||||
|
|
||||||
|
--success: oklch(0.7395 0.2268 142.8504);
|
||||||
|
--success-foreground: oklch(0 0 0);
|
||||||
|
--warning: oklch(0.9691 0.2005 109.6228);
|
||||||
|
--warning-foreground: oklch(0 0 0);
|
||||||
|
--bitcoin: oklch(0.8000 0.1800 60.0000);
|
||||||
|
--bitcoin-foreground: oklch(0 0 0);
|
||||||
|
|
||||||
|
--qr: oklch(1 0 0);
|
||||||
|
--qr-foreground: oklch(0 0 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Starry Night Palette
|
||||||
|
* Van Gogh blues, golden secondary
|
||||||
|
*/
|
||||||
|
|
||||||
|
[data-theme='starrynight'] {
|
||||||
|
--radius: 0.5rem;
|
||||||
|
|
||||||
|
--background: oklch(0.9755 0.0045 258.3245);
|
||||||
|
--foreground: oklch(0.2558 0.0433 268.0662);
|
||||||
|
--card: oklch(0.9341 0.0132 251.5628);
|
||||||
|
--card-foreground: oklch(0.2558 0.0433 268.0662);
|
||||||
|
--popover: oklch(0.9856 0.0278 98.0540);
|
||||||
|
--popover-foreground: oklch(0.2558 0.0433 268.0662);
|
||||||
|
--primary: oklch(0.4815 0.1178 263.3758); /* deep blue */
|
||||||
|
--primary-foreground: oklch(0.9856 0.0278 98.0540);
|
||||||
|
--secondary: oklch(0.8567 0.1164 81.0092); /* gold */
|
||||||
|
--secondary-foreground: oklch(0.2558 0.0433 268.0662);
|
||||||
|
--muted: oklch(0.9202 0.0080 106.5563);
|
||||||
|
--muted-foreground: oklch(0.4815 0.1178 263.3758);
|
||||||
|
--accent: oklch(0.6896 0.0714 234.0387);
|
||||||
|
--accent-foreground: oklch(0.9856 0.0278 98.0540);
|
||||||
|
--destructive: oklch(0.2611 0.0376 322.5267);
|
||||||
|
--border: oklch(0.7791 0.0156 251.1926);
|
||||||
|
--input: oklch(0.6896 0.0714 234.0387);
|
||||||
|
--ring: oklch(0.8567 0.1164 81.0092);
|
||||||
|
|
||||||
|
--success: oklch(0.6610 0.1560 154.8128);
|
||||||
|
--success-foreground: oklch(0.9856 0.0278 98.0540);
|
||||||
|
--warning: oklch(0.8567 0.1164 81.0092); /* matches gold secondary */
|
||||||
|
--warning-foreground: oklch(0.2558 0.0433 268.0662);
|
||||||
|
--bitcoin: oklch(0.6920 0.2041 42.4293);
|
||||||
|
--bitcoin-foreground: oklch(0.9856 0.0278 98.0540);
|
||||||
|
|
||||||
|
--qr: oklch(0.9755 0.0045 258.3245);
|
||||||
|
--qr-foreground: oklch(0.2558 0.0433 268.0662);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme='starrynight'].dark {
|
||||||
|
--background: oklch(0.2204 0.0198 275.8439);
|
||||||
|
--foreground: oklch(0.9366 0.0129 266.6974);
|
||||||
|
--card: oklch(0.2703 0.0407 281.3036);
|
||||||
|
--card-foreground: oklch(0.9366 0.0129 266.6974);
|
||||||
|
--popover: oklch(0.2703 0.0407 281.3036);
|
||||||
|
--popover-foreground: oklch(0.9097 0.1440 95.1120);
|
||||||
|
--primary: oklch(0.4815 0.1178 263.3758); /* deep blue */
|
||||||
|
--primary-foreground: oklch(0.9097 0.1440 95.1120);
|
||||||
|
--secondary: oklch(0.9097 0.1440 95.1120); /* gold */
|
||||||
|
--secondary-foreground: oklch(0.2703 0.0407 281.3036);
|
||||||
|
--muted: oklch(0.2424 0.0324 281.0890);
|
||||||
|
--muted-foreground: oklch(0.6243 0.0412 262.0375);
|
||||||
|
--accent: oklch(0.8469 0.0524 264.7751);
|
||||||
|
--accent-foreground: oklch(0.2204 0.0198 275.8439);
|
||||||
|
--destructive: oklch(0.5280 0.1200 357.1130);
|
||||||
|
--border: oklch(0.3072 0.0287 281.7681);
|
||||||
|
--input: oklch(0.4815 0.1178 263.3758);
|
||||||
|
--ring: oklch(0.9097 0.1440 95.1120);
|
||||||
|
|
||||||
|
--success: oklch(0.7403 0.1521 151.7821);
|
||||||
|
--success-foreground: oklch(0.2204 0.0198 275.8439);
|
||||||
|
--warning: oklch(0.9097 0.1440 95.1120);
|
||||||
|
--warning-foreground: oklch(0.2204 0.0198 275.8439);
|
||||||
|
--bitcoin: oklch(0.7869 0.1601 51.8584);
|
||||||
|
--bitcoin-foreground: oklch(0.2204 0.0198 275.8439);
|
||||||
|
|
||||||
|
--qr: oklch(0.9366 0.0129 266.6974);
|
||||||
|
--qr-foreground: oklch(0.2204 0.0198 275.8439);
|
||||||
|
}
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
* {
|
* {
|
||||||
@apply border-border outline-ring/50;
|
@apply border-border outline-ring/50;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue