566 lines
18 KiB
CSS
566 lines
18 KiB
CSS
:root {
|
|
/* Roles (defaults) */
|
|
--primary: 221 83% 53%;
|
|
--primary-foreground: 210 40% 98%;
|
|
--secondary: 262 83% 58%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
--tertiary: 26 95% 55%;
|
|
--tertiary-foreground: 26 100% 10%;
|
|
--accent: 173 80% 40%;
|
|
--accent-foreground: 168 75% 97%;
|
|
--info: 199 89% 48%;
|
|
--info-foreground: 210 40% 98%;
|
|
--success: 142 71% 45%;
|
|
--success-foreground: 144 60% 98%;
|
|
--warning: 38 92% 50%;
|
|
--warning-foreground: 26 83% 15%;
|
|
--danger: 0 84% 60%;
|
|
--danger-foreground: 0 0% 100%;
|
|
--neutral: 215 16% 47%;
|
|
--neutral-foreground: 210 40% 98%;
|
|
--link: 221 83% 53%;
|
|
--link-visited: 262 83% 58%;
|
|
--background: 0 0% 100%;
|
|
--foreground: 222 47% 11%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 222 47% 11%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 222 47% 11%;
|
|
--muted: 220 14% 96%;
|
|
--muted-foreground: 215 16% 46%;
|
|
--border: 214 31% 91%;
|
|
--input: 214 31% 91%;
|
|
--ring: 221 83% 53%;
|
|
--background-50: hsl(230.8 86.7% 97.1%);
|
|
--background-100: hsl(231.7 87.9% 93.5%);
|
|
--background-200: hsl(230 90.9% 87.1%);
|
|
--background-300: hsl(230 90% 80.4%);
|
|
--background-400: hsl(228.3 89.8% 73.1%);
|
|
--background-500: hsl(225.5 89.9% 64.9%);
|
|
--background-600: hsl(221 83.3% 53.1%);
|
|
--background-700: hsl(221.2 75.7% 40.4%);
|
|
--background-800: hsl(221.1 79.9% 27.3%);
|
|
--background-900: hsl(221.1 88% 16.3%);
|
|
--background-950: hsl(223.2 89.3% 11%);
|
|
}
|
|
|
|
/* ---------- Brand palettes (swap only role colors) ---------- */
|
|
/* ocean */
|
|
[data-color="ocean"] {
|
|
--primary: 199 89% 48%;
|
|
--primary-foreground: 210 40% 98%;
|
|
--secondary: 172 66% 45%;
|
|
--secondary-foreground: 168 75% 97%;
|
|
--tertiary: 260 84% 60%;
|
|
--tertiary-foreground: 260 100% 98%;
|
|
--accent: 205 100% 36%;
|
|
--accent-foreground: 210 40% 98%;
|
|
--info: 199 95% 62%;
|
|
--success: 145 65% 43%;
|
|
--success-foreground: 144 60% 98%;
|
|
--warning: 38 92% 50%;
|
|
--warning-foreground: 26 83% 15%;
|
|
--danger: 0 84% 60%;
|
|
--danger-foreground: 0 0% 100%;
|
|
--neutral: 215 16% 47%;
|
|
--neutral-foreground: 210 40% 98%;
|
|
--background-50: hsl(212.5 100% 95.3%);
|
|
--background-100: hsl(210.7 100% 91.2%);
|
|
--background-200: hsl(208.4 97.9% 81%);
|
|
--background-300: hsl(203.5 98.9% 65.1%);
|
|
--background-400: hsl(199 89.3% 47.8%);
|
|
--background-500: hsl(199.2 91.1% 39.6%);
|
|
--background-600: hsl(199.2 93.6% 30.8%);
|
|
--background-700: hsl(199.5 95% 23.5%);
|
|
--background-800: hsl(200.3 97.6% 16.1%);
|
|
--background-900: hsl(202 96.1% 10%);
|
|
--background-950: hsl(203.2 100% 6.1%);
|
|
}
|
|
|
|
/* forest */
|
|
[data-color="forest"] {
|
|
--primary: 142 71% 35%;
|
|
--primary-foreground: 144 60% 98%;
|
|
--secondary: 84 64% 35%;
|
|
--secondary-foreground: 60 30% 96%;
|
|
--tertiary: 25 86% 50%;
|
|
--tertiary-foreground: 26 100% 10%;
|
|
--accent: 160 84% 39%;
|
|
--accent-foreground: 150 80% 96%;
|
|
--info: 199 89% 48%;
|
|
--success: 142 71% 42%;
|
|
--success-foreground: 144 60% 98%;
|
|
--warning: 38 92% 50%;
|
|
--warning-foreground: 26 83% 15%;
|
|
--danger: 0 84% 60%;
|
|
--danger-foreground: 0 0% 100%;
|
|
--neutral: 215 16% 47%;
|
|
--neutral-foreground: 210 40% 98%;
|
|
--background-50: hsl(132.3 95.7% 91%);
|
|
--background-100: hsl(135.4 98.4% 75.9%);
|
|
--background-200: hsl(141.7 81% 54.5%);
|
|
--background-300: hsl(141.7 68% 47.8%);
|
|
--background-400: hsl(141.8 69.5% 41.2%);
|
|
--background-500: hsl(141.7 70.9% 35.1%);
|
|
--background-600: hsl(141.8 73.9% 27.1%);
|
|
--background-700: hsl(142 78.2% 19.8%);
|
|
--background-800: hsl(141.1 85.1% 13.1%);
|
|
--background-900: hsl(136.4 89.2% 7.3%);
|
|
--background-950: hsl(133 92% 4.9%);
|
|
}
|
|
|
|
/* sunset */
|
|
[data-color="sunset"] {
|
|
--primary: 14 90% 57%;
|
|
--primary-foreground: 24 100% 97%;
|
|
--secondary: 340 82% 52%;
|
|
--secondary-foreground: 0 0% 100%;
|
|
--tertiary: 48 96% 53%;
|
|
--tertiary-foreground: 26 100% 12%;
|
|
--accent: 262 83% 58%;
|
|
--accent-foreground: 210 40% 98%;
|
|
--info: 199 89% 48%;
|
|
--success: 142 71% 45%;
|
|
--success-foreground: 144 60% 98%;
|
|
--warning: 38 92% 50%;
|
|
--warning-foreground: 26 83% 15%;
|
|
--danger: 0 84% 60%;
|
|
--danger-foreground: 0 0% 100%;
|
|
--neutral: 215 16% 47%;
|
|
--neutral-foreground: 210 40% 98%;
|
|
--background-50: hsl(6.7 81.8% 95.7%);
|
|
--background-100: hsl(6.5 86% 91.6%);
|
|
--background-200: hsl(7.1 86.4% 82.7%);
|
|
--background-300: hsl(8.9 88.9% 71.8%);
|
|
--background-400: hsl(14 90% 57.1%);
|
|
--background-500: hsl(13.9 68.9% 46.7%);
|
|
--background-600: hsl(14 71.1% 36.7%);
|
|
--background-700: hsl(14 73.8% 28.4%);
|
|
--background-800: hsl(14.4 79.8% 19.4%);
|
|
--background-900: hsl(12 86.2% 11.4%);
|
|
--background-950: hsl(8.6 89.7% 7.6%);
|
|
}
|
|
|
|
/* grape */
|
|
[data-color="grape"] {
|
|
--primary: 262 83% 58%;
|
|
--primary-foreground: 210 40% 98%;
|
|
--secondary: 292 84% 61%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
--tertiary: 199 89% 48%;
|
|
--tertiary-foreground: 210 40% 98%;
|
|
--accent: 316 73% 52%;
|
|
--accent-foreground: 0 0% 100%;
|
|
--info: 199 89% 48%;
|
|
--success: 150 70% 40%;
|
|
--success-foreground: 150 40% 96%;
|
|
--warning: 38 92% 50%;
|
|
--warning-foreground: 26 83% 15%;
|
|
--danger: 0 84% 60%;
|
|
--danger-foreground: 0 0% 100%;
|
|
--neutral: 215 16% 47%;
|
|
--neutral-foreground: 210 40% 98%;
|
|
--background-50: hsl(254.3 84% 95.1%);
|
|
--background-100: hsl(253.2 83.7% 90.4%);
|
|
--background-200: hsl(255 85.7% 80.8%);
|
|
--background-300: hsl(257.1 84% 70.6%);
|
|
--background-400: hsl(261.9 83.2% 58%);
|
|
--background-500: hsl(263.9 71% 48.6%);
|
|
--background-600: hsl(264.1 73.1% 39.4%);
|
|
--background-700: hsl(263.9 74.7% 31%);
|
|
--background-800: hsl(264.1 79.3% 22.7%);
|
|
--background-900: hsl(263.2 86.1% 14.1%);
|
|
--background-950: hsl(261.7 88.7% 10.4%);
|
|
}
|
|
|
|
/* slate (low-chroma) */
|
|
[data-color="slate"] {
|
|
--primary: 215 20% 50%;
|
|
--primary-foreground: 210 40% 98%;
|
|
--secondary: 220 14% 34%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
--tertiary: 220 10% 60%;
|
|
--tertiary-foreground: 222 47% 10%;
|
|
--accent: 215 16% 47%;
|
|
--accent-foreground: 210 40% 98%;
|
|
--info: 215 20% 65%;
|
|
--success: 142 25% 45%;
|
|
--success-foreground: 144 40% 96%;
|
|
--warning: 38 60% 50%;
|
|
--warning-foreground: 26 83% 15%;
|
|
--danger: 0 70% 55%;
|
|
--danger-foreground: 0 0% 100%;
|
|
--neutral: 216 10% 40%;
|
|
--neutral-foreground: 210 40% 98%;
|
|
--background-50: hsl(220 29% 93.9%);
|
|
--background-100: hsl(219 32.3% 87.8%);
|
|
--background-200: hsl(218 33.3% 75.9%);
|
|
--background-300: hsl(215.2 33% 62.5%);
|
|
--background-400: hsl(215.3 20% 50%);
|
|
--background-500: hsl(214.9 20.2% 41.8%);
|
|
--background-600: hsl(215 21.4% 32.9%);
|
|
--background-700: hsl(216.4 21.5% 25.5%);
|
|
--background-800: hsl(217.1 23.6% 17.5%);
|
|
--background-900: hsl(216 27.3% 10.8%);
|
|
--background-950: hsl(218.2 35.5% 6.1%);
|
|
}
|
|
|
|
/* mint */
|
|
[data-color="mint"] {
|
|
--primary: 158 64% 45%;
|
|
--primary-foreground: 160 84% 98%;
|
|
--secondary: 174 60% 40%;
|
|
--secondary-foreground: 168 75% 97%;
|
|
--tertiary: 192 84% 40%;
|
|
--tertiary-foreground: 210 40% 98%;
|
|
--accent: 173 80% 40%;
|
|
--accent-foreground: 168 75% 97%;
|
|
--info: 199 90% 50%;
|
|
--success: 156 72% 36%;
|
|
--success-foreground: 158 70% 96%;
|
|
--warning: 38 92% 50%;
|
|
--warning-foreground: 26 83% 15%;
|
|
--danger: 2 83% 63%;
|
|
--danger-foreground: 0 0% 100%;
|
|
--neutral: 215 16% 47%;
|
|
--neutral-foreground: 210 40% 98%;
|
|
--background-50: hsl(149.4 95.9% 90.4%);
|
|
--background-100: hsl(152.1 98.2% 77.6%);
|
|
--background-200: hsl(158 83.6% 57.1%);
|
|
--background-300: hsl(157.7 65.6% 51%);
|
|
--background-400: hsl(158 64.2% 44.9%);
|
|
--background-500: hsl(158 65.8% 36.7%);
|
|
--background-600: hsl(158 68.1% 28.2%);
|
|
--background-700: hsl(157.9 71.7% 20.8%);
|
|
--background-800: hsl(158.6 80% 13.7%);
|
|
--background-900: hsl(156.4 89.2% 7.3%);
|
|
--background-950: hsl(152.7 91.7% 4.7%);
|
|
}
|
|
|
|
/* amber */
|
|
[data-color="amber"] {
|
|
--primary: 38 94% 55%;
|
|
--primary-foreground: 26 83% 12%;
|
|
--secondary: 14 90% 57%;
|
|
--secondary-foreground: 24 100% 97%;
|
|
--tertiary: 26 100% 55%;
|
|
--tertiary-foreground: 26 100% 12%;
|
|
--accent: 199 89% 48%;
|
|
--accent-foreground: 210 40% 98%;
|
|
--info: 199 89% 48%;
|
|
--success: 142 71% 45%;
|
|
--success-foreground: 144 60% 98%;
|
|
--warning: 38 94% 55%;
|
|
--warning-foreground: 26 83% 15%;
|
|
--danger: 0 84% 60%;
|
|
--danger-foreground: 0 0% 100%;
|
|
--neutral: 215 16% 47%;
|
|
--neutral-foreground: 210 40% 98%;
|
|
--background-50: hsl(26.7 100% 96.5%);
|
|
--background-100: hsl(25.7 94.6% 92.7%);
|
|
--background-200: hsl(28.1 97.5% 84.5%);
|
|
--background-300: hsl(32.1 98.6% 72.2%);
|
|
--background-400: hsl(38.1 93.9% 54.9%);
|
|
--background-500: hsl(38.1 79% 44.9%);
|
|
--background-600: hsl(37.9 80.9% 34.9%);
|
|
--background-700: hsl(38 84.8% 25.9%);
|
|
--background-800: hsl(37.2 90.8% 17.1%);
|
|
--background-900: hsl(35.7 92.2% 10%);
|
|
--background-950: hsl(33.1 93.5% 6.1%);
|
|
}
|
|
|
|
/* crimson */
|
|
[data-color="crimson"] {
|
|
--primary: 350 85% 55%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 0 84% 60%;
|
|
--secondary-foreground: 0 0% 100%;
|
|
--tertiary: 17 88% 60%;
|
|
--tertiary-foreground: 26 100% 12%;
|
|
--accent: 262 83% 58%;
|
|
--accent-foreground: 210 40% 98%;
|
|
--info: 199 89% 48%;
|
|
--success: 142 71% 45%;
|
|
--success-foreground: 144 60% 98%;
|
|
--warning: 38 92% 50%;
|
|
--warning-foreground: 26 83% 15%;
|
|
--danger: 0 84% 60%;
|
|
--danger-foreground: 0 0% 100%;
|
|
--neutral: 215 16% 47%;
|
|
--neutral-foreground: 210 40% 98%;
|
|
--background-50: hsl(357 83.3% 95.3%);
|
|
--background-100: hsl(355.5 83.3% 90.6%);
|
|
--background-200: hsl(355.7 85.6% 81%);
|
|
--background-300: hsl(354.6 88.1% 70.4%);
|
|
--background-400: hsl(350.2 85.2% 55.1%);
|
|
--background-500: hsl(349.9 70.9% 45.9%);
|
|
--background-600: hsl(350.2 72.2% 36.7%);
|
|
--background-700: hsl(350.4 75.7% 27.5%);
|
|
--background-800: hsl(350 81.3% 18.8%);
|
|
--background-900: hsl(352.2 87.1% 12.2%);
|
|
--background-950: hsl(354.9 89.7% 7.6%);
|
|
}
|
|
|
|
/* indigo */
|
|
[data-color="indigo"] {
|
|
--primary: 231 89% 60%;
|
|
--primary-foreground: 210 40% 98%;
|
|
--secondary: 262 83% 58%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
--tertiary: 173 80% 40%;
|
|
--tertiary-foreground: 168 75% 97%;
|
|
--accent: 199 89% 48%;
|
|
--accent-foreground: 210 40% 98%;
|
|
--info: 201 96% 48%;
|
|
--success: 142 71% 45%;
|
|
--success-foreground: 144 60% 98%;
|
|
--warning: 38 92% 50%;
|
|
--warning-foreground: 26 83% 15%;
|
|
--danger: 0 84% 60%;
|
|
--danger-foreground: 0 0% 100%;
|
|
--neutral: 215 16% 47%;
|
|
--neutral-foreground: 210 40% 98%;
|
|
--background-50: hsl(234.5 91.7% 95.3%);
|
|
--background-100: hsl(235.9 91.7% 90.6%);
|
|
--background-200: hsl(235.7 89.2% 81.8%);
|
|
--background-300: hsl(234.4 90.2% 72%);
|
|
--background-400: hsl(231.1 89.2% 60%);
|
|
--background-500: hsl(228.2 78.6% 50.6%);
|
|
--background-600: hsl(228.1 78.6% 40.4%);
|
|
--background-700: hsl(228.2 81.5% 31.8%);
|
|
--background-800: hsl(228.5 86.1% 22.5%);
|
|
--background-900: hsl(229.7 89.7% 15.3%);
|
|
--background-950: hsl(231.6 92.6% 10.6%);
|
|
}
|
|
|
|
[data-color="neutral"] {
|
|
--primary: 215 16% 47%;
|
|
--primary-foreground: 210 40% 98%;
|
|
--secondary: 220 14% 34%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
--tertiary: 220 10% 60%;
|
|
--tertiary-foreground: 222 47% 10%;
|
|
--accent: 216 12% 52%;
|
|
--accent-foreground: 210 40% 98%;
|
|
--info: 201 96% 48%;
|
|
--success: 142 71% 45%;
|
|
--success-foreground: 144 60% 98%;
|
|
--warning: 38 92% 50%;
|
|
--warning-foreground: 26 83% 15%;
|
|
--danger: 0 84% 60%;
|
|
--danger-foreground: 0 0% 100%;
|
|
--neutral: 215 16% 47%;
|
|
--neutral-foreground: 210 40% 98%;
|
|
--background-50: hsl(217.5 25% 93.7%);
|
|
--background-100: hsl(218.8 24.6% 86.5%);
|
|
--background-200: hsl(215.7 27% 73.1%);
|
|
--background-300: hsl(215 24% 60.8%);
|
|
--background-400: hsl(214.7 15.8% 47.1%);
|
|
--background-500: hsl(214.5 16.4% 39.4%);
|
|
--background-600: hsl(214.6 16.7% 30.6%);
|
|
--background-700: hsl(214.3 17.6% 23.3%);
|
|
--background-800: hsl(216 18.1% 16.3%);
|
|
--background-900: hsl(212.7 22.4% 9.6%);
|
|
--background-950: hsl(217.5 26.7% 5.9%);
|
|
}
|
|
|
|
[data-color="gray"] {
|
|
--primary: 220 9% 46%;
|
|
--primary-foreground: 210 40% 98%;
|
|
--secondary: 220 7% 38%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
--tertiary: 220 10% 60%;
|
|
--tertiary-foreground: 222 47% 10%;
|
|
--accent: 220 12% 52%;
|
|
--accent-foreground: 210 40% 98%;
|
|
--info: 201 96% 48%;
|
|
--success: 142 71% 45%;
|
|
--success-foreground: 144 60% 98%;
|
|
--warning: 38 92% 50%;
|
|
--warning-foreground: 26 83% 15%;
|
|
--danger: 0 84% 60%;
|
|
--danger-foreground: 0 0% 100%;
|
|
--neutral: 220 10% 40%;
|
|
--neutral-foreground: 210 40% 98%;
|
|
--color-background-50: hsl(225 10.5% 92.5%);
|
|
--color-background-100: hsl(220 12.7% 86.1%);
|
|
--color-background-200: hsl(220 12.9% 72.5%);
|
|
--color-background-300: hsl(219.2 12.6% 59.6%);
|
|
--color-background-400: hsl(220 8.9% 46.1%);
|
|
--color-background-500: hsl(218.8 8.7% 38.2%);
|
|
--color-background-600: hsl(222.9 9% 30.6%);
|
|
--color-background-700: hsl(220 10.2% 23.1%);
|
|
--color-background-800: hsl(220 10.8% 16.3%);
|
|
--color-background-900: hsl(220 12% 9.8%);
|
|
--color-background-950: hsl(225 13.3% 5.9%);
|
|
}
|
|
|
|
/* =======================
|
|
Dark surfaces baseline
|
|
======================= */
|
|
:root.dark {
|
|
color-scheme: dark;
|
|
--background: 222 14% 12%;
|
|
--foreground: 210 40% 96%;
|
|
--card: 222 12% 14%;
|
|
--card-foreground: 210 40% 96%;
|
|
--popover: 222 12% 14%;
|
|
--popover-foreground: 210 40% 96%;
|
|
--muted: 220 10% 18%;
|
|
--muted-foreground: 215 20% 72%;
|
|
--border: 220 12% 22%;
|
|
--input: 220 12% 22%;
|
|
--ring: 217 91% 60%;
|
|
}
|
|
|
|
/* =======================
|
|
Dark platters (surface-only)
|
|
======================= */
|
|
|
|
/* gray */
|
|
:root.dark[data-color="ocean"] {
|
|
--background: 201 20% 13%;
|
|
--foreground: 210 40% 96%;
|
|
--card: 201 18% 15%;
|
|
--card-foreground: 210 40% 96%;
|
|
--popover: 201 18% 15%;
|
|
--popover-foreground: 210 40% 96%;
|
|
--muted: 201 16% 20%;
|
|
--muted-foreground: 200 20% 78%;
|
|
--border: 201 16% 24%;
|
|
--input: 201 16% 24%;
|
|
}
|
|
|
|
:root.dark[data-color="forest"] {
|
|
--background: 150 16% 12%;
|
|
--foreground: 160 30% 96%;
|
|
--card: 150 14% 14%;
|
|
--card-foreground: 160 30% 96%;
|
|
--popover: 150 14% 14%;
|
|
--popover-foreground: 160 30% 96%;
|
|
--muted: 150 12% 19%;
|
|
--muted-foreground: 150 16% 78%;
|
|
--border: 150 12% 23%;
|
|
--input: 150 12% 23%;
|
|
}
|
|
|
|
:root.dark[data-color="sunset"] {
|
|
--background: 18 20% 12%;
|
|
--foreground: 24 30% 96%;
|
|
--card: 18 18% 14%;
|
|
--card-foreground: 24 30% 96%;
|
|
--popover: 18 18% 14%;
|
|
--popover-foreground: 24 30% 96%;
|
|
--muted: 18 16% 20%;
|
|
--muted-foreground: 20 20% 80%;
|
|
--border: 18 16% 24%;
|
|
--input: 18 16% 24%;
|
|
}
|
|
|
|
:root.dark[data-color="grape"] {
|
|
--background: 275 22% 13%;
|
|
--foreground: 0 0% 98%;
|
|
--card: 275 20% 15%;
|
|
--card-foreground: 0 0% 98%;
|
|
--popover: 275 20% 15%;
|
|
--popover-foreground: 0 0% 98%;
|
|
--muted: 275 18% 21%;
|
|
--muted-foreground: 275 14% 78%;
|
|
--border: 275 16% 25%;
|
|
--input: 275 16% 25%;
|
|
}
|
|
|
|
:root.dark[data-color="slate"] {
|
|
--background: 220 12% 12%;
|
|
--foreground: 210 40% 96%;
|
|
--card: 220 11% 14%;
|
|
--card-foreground: 210 40% 96%;
|
|
--popover: 220 11% 14%;
|
|
--popover-foreground: 210 40% 96%;
|
|
--muted: 220 8% 20%;
|
|
--muted-foreground: 215 18% 74%;
|
|
--border: 220 10% 24%;
|
|
--input: 220 10% 24%;
|
|
}
|
|
|
|
:root.dark[data-color="indigo"] {
|
|
--background: 238 22% 14%;
|
|
--foreground: 210 40% 96%;
|
|
--card: 238 20% 16%;
|
|
--card-foreground: 210 40% 96%;
|
|
--popover: 238 20% 16%;
|
|
--popover-foreground: 210 40% 96%;
|
|
--muted: 238 18% 22%;
|
|
--muted-foreground: 220 25% 80%;
|
|
--border: 238 18% 26%;
|
|
--input: 238 18% 26%;
|
|
}
|
|
|
|
/* Aliases for the remaining brands */
|
|
:root.dark[data-color="mint"] {
|
|
/* use forest surfaces */
|
|
--background: 150 16% 12%;
|
|
--foreground: 160 30% 96%;
|
|
--card: 150 14% 14%;
|
|
--card-foreground: 160 30% 96%;
|
|
--popover: 150 14% 14%;
|
|
--popover-foreground: 160 30% 96%;
|
|
--muted: 150 12% 19%;
|
|
--muted-foreground: 150 16% 78%;
|
|
--border: 150 12% 23%;
|
|
--input: 150 12% 23%;
|
|
}
|
|
|
|
:root.dark[data-color="amber"] {
|
|
/* use sunset surfaces */
|
|
--background: 18 20% 12%;
|
|
--foreground: 24 30% 96%;
|
|
--card: 18 18% 14%;
|
|
--card-foreground: 24 30% 96%;
|
|
--popover: 18 18% 14%;
|
|
--popover-foreground: 24 30% 96%;
|
|
--muted: 18 16% 20%;
|
|
--muted-foreground: 20 20% 80%;
|
|
--border: 18 16% 24%;
|
|
--input: 18 16% 24%;
|
|
}
|
|
|
|
:root.dark[data-color="crimson"] {
|
|
/* use gray baseline surfaces */
|
|
--background: 222 14% 12%;
|
|
--foreground: 210 40% 96%;
|
|
--card: 222 12% 14%;
|
|
--card-foreground: 210 40% 96%;
|
|
--popover: 222 12% 14%;
|
|
--popover-foreground: 210 40% 96%;
|
|
--muted: 220 10% 18%;
|
|
--muted-foreground: 215 20% 72%;
|
|
--border: 220 12% 22%;
|
|
--input: 220 12% 22%;
|
|
}
|
|
|
|
:root.dark[data-color="neutral"] {
|
|
--background: 220 12% 12%;
|
|
--foreground: 210 40% 96%;
|
|
--card: 220 11% 14%;
|
|
--card-foreground: 210 40% 96%;
|
|
--popover: 220 11% 14%;
|
|
--popover-foreground: 210 40% 96%;
|
|
--muted: 220 8% 20%;
|
|
--muted-foreground: 215 18% 74%;
|
|
--border: 220 10% 24%;
|
|
--input: 220 10% 24%;
|
|
}
|
|
|
|
:root.dark[data-color="gray"] {
|
|
--background: 220 10% 12%;
|
|
--foreground: 210 40% 96%;
|
|
--card: 220 9% 14%;
|
|
--card-foreground: 210 40% 96%;
|
|
--popover: 220 9% 14%;
|
|
--popover-foreground: 210 40% 96%;
|
|
--muted: 220 8% 19%;
|
|
--muted-foreground: 215 18% 74%;
|
|
--border: 220 9% 23%;
|
|
--input: 220 9% 23%;
|
|
} |