[data-theme="indigo"] { color-scheme: dark; --primary: hsl(220 90% 66%); --primary-fg: hsl(222 30% 8%); --secondary: hsl(270 65% 70%); --secondary-fg: hsl(270 30% 10%); --success: hsl(145 55% 54%); --success-fg: hsl(145 40% 8%); --warning: hsl(38 92% 62%); --warning-fg: hsl(35 35% 10%); --danger: hsl(0 75% 66%); --danger-fg: hsl(0 35% 10%); --neutral: hsl(220 10% 72%); --neutral-fg: hsl(222 24% 8%); --surface: hsl(222 24% 8%); --surface-raised: hsl(222 22% 11%); --surface-subtle: hsl(222 18% 15%); --surface-solid: hsl(0 0% 96%); --text: hsl(0 0% 96%); --text-muted: hsl(220 10% 68%); --text-subtle: hsl(220 8% 55%); --border: hsl(222 14% 24%); --focus: var(--primary); --shadow-color: hsl(222 40% 3%); --hover-overlay: hsl(0 0% 100% / 0.06); } [data-theme="dim"] { color-scheme: dark; --primary: hsl(210 92% 70%); --primary-fg: hsl(218 28% 10%); --secondary: hsl(270 70% 74%); --secondary-fg: hsl(270 30% 10%); --success: hsl(150 56% 58%); --success-fg: hsl(150 38% 9%); --warning: hsl(40 92% 64%); --warning-fg: hsl(35 35% 10%); --danger: hsl(0 74% 68%); --danger-fg: hsl(0 35% 10%); --neutral: hsl(220 10% 72%); --neutral-fg: hsl(220 24% 10%); --surface: hsl(220 20% 13%); --surface-raised: hsl(220 18% 16%); --surface-subtle: hsl(220 16% 20%); --surface-solid: hsl(0 0% 96%); --text: hsl(220 18% 94%); --text-muted: hsl(220 10% 70%); --text-subtle: hsl(220 8% 58%); --border: hsl(220 12% 28%); --focus: var(--primary); --shadow-color: hsl(220 40% 4%); --hover-overlay: hsl(0 0% 100% / 0.06); } [data-theme="corporate"] { color-scheme: light dark; --primary: hsl(214 82% 44%); --primary-fg: white; --secondary: hsl(250 45% 48%); --secondary-fg: white; --success: hsl(152 62% 32%); --success-fg: white; --warning: hsl(40 94% 48%); --warning-fg: hsl(35 30% 12%); --danger: hsl(355 70% 50%); --danger-fg: white; --neutral: hsl(220 12% 42%); --neutral-fg: white; --surface: hsl(0 0% 100%); --surface-raised: hsl(214 30% 98%); --surface-subtle: hsl(214 35% 95%); --surface-solid: hsl(220 24% 12%); --text: hsl(220 24% 12%); --text-muted: hsl(220 10% 42%); --text-subtle: hsl(220 8% 55%); --border: hsl(220 16% 86%); --focus: var(--primary); --hover-overlay: hsl(220 30% 10% / 0.04); --shadow-color: hsl(220 30% 10%); } @supports (color: light-dark(red, blue)) { [data-theme="corporate"] { --primary: light-dark(hsl(214 82% 44%), hsl(214 75% 80%)); --primary-fg: light-dark(white, hsl(214 30% 12%)); --secondary: light-dark(hsl(250 45% 48%), hsl(250 53% 80%)); --secondary-fg: light-dark(white, hsl(250 30% 12%)); --success: light-dark(hsl(152 62% 32%), hsl(152 70% 80%)); --success-fg: light-dark(white, hsl(152 30% 12%)); --warning: light-dark(hsl(40 94% 48%), hsl(40 75% 80%)); --warning-fg: light-dark(hsl(35 30% 12%), hsl(40 30% 12%)); --danger: light-dark(hsl(355 70% 50%), hsl(355 75% 80%)); --danger-fg: light-dark(white, hsl(355 30% 12%)); --neutral: light-dark(hsl(220 12% 42%), hsl(220 20% 80%)); --neutral-fg: light-dark(white, hsl(220 30% 12%)); --surface: light-dark(hsl(0 0% 100%), hsl(214 18% 8%)); --surface-raised: light-dark(hsl(214 30% 98%), hsl(214 16% 11%)); --surface-subtle: light-dark(hsl(214 35% 95%), hsl(214 14% 16%)); --surface-solid: light-dark(hsl(220 24% 12%), hsl(0 0% 96%)); --text: light-dark(hsl(220 24% 12%), hsl(0 0% 96%)); --text-muted: light-dark(hsl(220 10% 42%), hsl(214 8% 68%)); --text-subtle: light-dark(hsl(220 8% 55%), hsl(214 7% 55%)); --border: light-dark(hsl(220 16% 86%), hsl(214 12% 24%)); --hover-overlay: light-dark(hsl(220 30% 10% / 0.04), hsl(0 0% 100% / 0.06)); --shadow-color: light-dark(hsl(220 30% 10%), hsl(0 0% 0%)); } } [data-theme="forest"] { color-scheme: light dark; --primary: hsl(175 48% 26%); --primary-fg: white; --secondary: hsl(82 42% 34%); --secondary-fg: white; --success: hsl(148 58% 32%); --success-fg: white; --warning: hsl(42 88% 48%); --warning-fg: hsl(35 35% 12%); --danger: hsl(4 62% 48%); --danger-fg: white; --neutral: hsl(120 10% 34%); --neutral-fg: white; --surface: hsl(48 36% 96%); --surface-raised: hsl(45 36% 98%); --surface-subtle: hsl(112 26% 91%); --surface-solid: hsl(130 22% 15%); --text: hsl(130 20% 14%); --text-muted: hsl(125 10% 38%); --text-subtle: hsl(125 8% 50%); --border: hsl(105 18% 78%); --focus: var(--primary); --hover-overlay: hsl(220 30% 10% / 0.04); --shadow-color: hsl(220 30% 10%); --radius: 0.75rem; --radius-sm: 0.5rem; --radius-lg: 1.25rem; } @supports (color: light-dark(red, blue)) { [data-theme="forest"] { --primary: light-dark(hsl(175 48% 26%), hsl(175 45% 76%)); --primary-fg: light-dark(white, hsl(175 30% 12%)); --secondary: light-dark(hsl(82 42% 34%), hsl(82 50% 80%)); --secondary-fg: light-dark(white, hsl(82 30% 12%)); --success: light-dark(hsl(148 58% 32%), hsl(148 66% 80%)); --success-fg: light-dark(white, hsl(148 30% 12%)); --warning: light-dark(hsl(42 88% 48%), hsl(42 75% 80%)); --warning-fg: light-dark(hsl(35 35% 12%), hsl(42 30% 12%)); --danger: light-dark(hsl(4 62% 48%), hsl(4 70% 80%)); --danger-fg: light-dark(white, hsl(4 30% 12%)); --neutral: light-dark(hsl(120 10% 34%), hsl(120 18% 80%)); --neutral-fg: light-dark(white, hsl(120 30% 12%)); --surface: light-dark(hsl(48 36% 96%), hsl(130 18% 8%)); --surface-raised: light-dark(hsl(45 36% 98%), hsl(130 16% 11%)); --surface-subtle: light-dark(hsl(112 26% 91%), hsl(130 14% 16%)); --surface-solid: light-dark(hsl(130 22% 15%), hsl(0 0% 96%)); --text: light-dark(hsl(130 20% 14%), hsl(0 0% 96%)); --text-muted: light-dark(hsl(125 10% 38%), hsl(130 8% 68%)); --text-subtle: light-dark(hsl(125 8% 50%), hsl(130 7% 55%)); --border: light-dark(hsl(105 18% 78%), hsl(130 12% 24%)); --hover-overlay: light-dark(hsl(220 30% 10% / 0.04), hsl(0 0% 100% / 0.06)); --shadow-color: light-dark(hsl(220 30% 10%), hsl(0 0% 0%)); } } [data-theme="ocean"] { color-scheme: light dark; --primary: hsl(198 82% 35%); --primary-fg: white; --secondary: hsl(174 58% 30%); --secondary-fg: white; --success: hsl(160 62% 30%); --success-fg: white; --warning: hsl(36 90% 50%); --warning-fg: hsl(35 35% 12%); --danger: hsl(350 70% 52%); --danger-fg: white; --neutral: hsl(205 12% 38%); --neutral-fg: white; --surface: hsl(200 50% 98%); --surface-raised: hsl(0 0% 100%); --surface-subtle: hsl(198 42% 94%); --surface-solid: hsl(204 38% 16%); --text: hsl(205 34% 14%); --text-muted: hsl(205 12% 42%); --text-subtle: hsl(205 10% 56%); --border: hsl(198 30% 84%); --focus: var(--primary); --hover-overlay: hsl(220 30% 10% / 0.04); --shadow-color: hsl(220 30% 10%); } @supports (color: light-dark(red, blue)) { [data-theme="ocean"] { --primary: light-dark(hsl(198 82% 35%), hsl(198 75% 80%)); --primary-fg: light-dark(white, hsl(198 30% 12%)); --secondary: light-dark(hsl(174 58% 30%), hsl(174 66% 80%)); --secondary-fg: light-dark(white, hsl(174 30% 12%)); --success: light-dark(hsl(160 62% 30%), hsl(160 70% 80%)); --success-fg: light-dark(white, hsl(160 30% 12%)); --warning: light-dark(hsl(36 90% 50%), hsl(36 75% 80%)); --warning-fg: light-dark(hsl(35 35% 12%), hsl(36 30% 12%)); --danger: light-dark(hsl(350 70% 52%), hsl(350 75% 80%)); --danger-fg: light-dark(white, hsl(350 30% 12%)); --neutral: light-dark(hsl(205 12% 38%), hsl(205 20% 80%)); --neutral-fg: light-dark(white, hsl(205 30% 12%)); --surface: light-dark(hsl(200 50% 98%), hsl(200 18% 8%)); --surface-raised: light-dark(hsl(0 0% 100%), hsl(200 16% 11%)); --surface-subtle: light-dark(hsl(198 42% 94%), hsl(200 14% 16%)); --surface-solid: light-dark(hsl(204 38% 16%), hsl(0 0% 96%)); --text: light-dark(hsl(205 34% 14%), hsl(0 0% 96%)); --text-muted: light-dark(hsl(205 12% 42%), hsl(200 8% 68%)); --text-subtle: light-dark(hsl(205 10% 56%), hsl(200 7% 55%)); --border: light-dark(hsl(198 30% 84%), hsl(200 12% 24%)); --hover-overlay: light-dark(hsl(220 30% 10% / 0.04), hsl(0 0% 100% / 0.06)); --shadow-color: light-dark(hsl(220 30% 10%), hsl(0 0% 0%)); } } [data-theme="spruce"] { color-scheme: light dark; --primary: hsl(174 45% 24%); --primary-fg: hsl(160 30% 97%); --secondary: hsl(24 48% 42%); --secondary-fg: hsl(0 0% 98%); --success: hsl(135 38% 33%); --success-fg: hsl(0 0% 98%); --warning: hsl(42 72% 35%); --warning-fg: hsl(0 0% 98%); --danger: hsl(3 55% 44%); --danger-fg: hsl(0 0% 98%); --neutral: hsl(185 8% 40%); --neutral-fg: hsl(0 0% 98%); --surface: hsl(0 0% 100%); --surface-raised: hsl(160 20% 98%); --surface-subtle: hsl(168 18% 95%); --surface-solid: hsl(185 25% 11%); --text: hsl(185 25% 11%); --text-muted: hsl(183 9% 40%); --text-subtle: hsl(182 7% 55%); --border: hsl(170 12% 86%); --focus: var(--primary); --hover-overlay: hsl(185 30% 10% / 0.04); --shadow-color: hsl(185 30% 10%); } @supports (color: light-dark(red, blue)) { [data-theme="spruce"] { --primary: light-dark(hsl(174 45% 24%), hsl(170 35% 66%)); --primary-fg: light-dark(hsl(160 30% 97%), hsl(174 40% 9%)); --secondary: light-dark(hsl(24 48% 42%), hsl(26 50% 70%)); --secondary-fg: light-dark(hsl(0 0% 98%), hsl(26 35% 11%)); --success: light-dark(hsl(135 38% 33%), hsl(135 35% 60%)); --success-fg: light-dark(hsl(0 0% 98%), hsl(135 35% 8%)); --warning: light-dark(hsl(42 72% 35%), hsl(44 60% 62%)); --warning-fg: light-dark(hsl(0 0% 98%), hsl(42 35% 10%)); --danger: light-dark(hsl(3 55% 44%), hsl(3 58% 69%)); --danger-fg: light-dark(hsl(0 0% 98%), hsl(3 35% 10%)); --neutral: light-dark(hsl(185 8% 40%), hsl(183 10% 70%)); --neutral-fg: light-dark(hsl(0 0% 98%), hsl(185 18% 10%)); --surface: light-dark(hsl(0 0% 100%), hsl(182 20% 8%)); --surface-raised: light-dark(hsl(160 20% 98%), hsl(182 17% 11%)); --surface-subtle: light-dark(hsl(168 18% 95%), hsl(182 14% 15%)); --surface-solid: light-dark(hsl(185 25% 11%), hsl(0 0% 96%)); --text: light-dark(hsl(185 25% 11%), hsl(175 12% 94%)); --text-muted: light-dark(hsl(183 9% 40%), hsl(180 8% 66%)); --text-subtle: light-dark(hsl(182 7% 55%), hsl(180 7% 52%)); --border: light-dark(hsl(170 12% 86%), hsl(182 12% 23%)); --hover-overlay: light-dark(hsl(185 30% 10% / 0.04), hsl(0 0% 100% / 0.06)); --shadow-color: light-dark(hsl(185 30% 10%), hsl(0 0% 0%)); } } [data-theme="petrol"] { color-scheme: light dark; --primary: hsl(203 55% 30%); --primary-fg: hsl(0 0% 98%); --secondary: hsl(22 55% 47%); --secondary-fg: hsl(0 0% 98%); --success: hsl(155 45% 32%); --success-fg: hsl(0 0% 98%); --warning: hsl(38 70% 36%); --warning-fg: hsl(0 0% 98%); --danger: hsl(357 55% 45%); --danger-fg: hsl(0 0% 98%); --neutral: hsl(210 8% 43%); --neutral-fg: hsl(0 0% 98%); --surface: hsl(0 0% 100%); --surface-raised: hsl(204 30% 98%); --surface-subtle: hsl(204 25% 96%); --surface-solid: hsl(207 25% 12%); --text: hsl(207 25% 12%); --text-muted: hsl(206 9% 42%); --text-subtle: hsl(205 7% 57%); --border: hsl(205 15% 87%); --focus: var(--primary); --hover-overlay: hsl(207 30% 10% / 0.04); --shadow-color: hsl(207 30% 10%); } @supports (color: light-dark(red, blue)) { [data-theme="petrol"] { --primary: light-dark(hsl(203 55% 30%), hsl(202 55% 72%)); --primary-fg: light-dark(hsl(0 0% 98%), hsl(204 40% 10%)); --secondary: light-dark(hsl(22 55% 47%), hsl(24 55% 70%)); --secondary-fg: light-dark(hsl(0 0% 98%), hsl(24 35% 11%)); --success: light-dark(hsl(155 45% 32%), hsl(155 40% 60%)); --success-fg: light-dark(hsl(0 0% 98%), hsl(155 35% 8%)); --warning: light-dark(hsl(38 70% 36%), hsl(40 62% 63%)); --warning-fg: light-dark(hsl(0 0% 98%), hsl(38 35% 10%)); --danger: light-dark(hsl(357 55% 45%), hsl(357 58% 70%)); --danger-fg: light-dark(hsl(0 0% 98%), hsl(357 35% 10%)); --neutral: light-dark(hsl(210 8% 43%), hsl(208 10% 71%)); --neutral-fg: light-dark(hsl(0 0% 98%), hsl(208 18% 10%)); --surface: light-dark(hsl(0 0% 100%), hsl(206 22% 9%)); --surface-raised: light-dark(hsl(204 30% 98%), hsl(206 19% 12%)); --surface-subtle: light-dark(hsl(204 25% 96%), hsl(206 15% 16%)); --surface-solid: light-dark(hsl(207 25% 12%), hsl(0 0% 96%)); --text: light-dark(hsl(207 25% 12%), hsl(205 12% 95%)); --text-muted: light-dark(hsl(206 9% 42%), hsl(205 8% 67%)); --text-subtle: light-dark(hsl(205 7% 57%), hsl(205 7% 53%)); --border: light-dark(hsl(205 15% 87%), hsl(206 12% 24%)); --hover-overlay: light-dark(hsl(207 30% 10% / 0.04), hsl(0 0% 100% / 0.06)); --shadow-color: light-dark(hsl(207 30% 10%), hsl(0 0% 0%)); } } [data-theme="sunset"] { color-scheme: light dark; --primary: hsl(16 84% 43%); --primary-fg: white; --secondary: hsl(330 60% 52%); --secondary-fg: white; --success: hsl(142 52% 34%); --success-fg: white; --warning: hsl(42 94% 52%); --warning-fg: hsl(30 35% 12%); --danger: hsl(358 72% 52%); --danger-fg: white; --neutral: hsl(24 12% 38%); --neutral-fg: white; --surface: hsl(34 70% 97%); --surface-raised: hsl(30 80% 99%); --surface-subtle: hsl(28 62% 92%); --surface-solid: hsl(18 34% 18%); --text: hsl(20 34% 14%); --text-muted: hsl(20 12% 42%); --text-subtle: hsl(20 10% 55%); --border: hsl(25 38% 84%); --focus: var(--primary); --selection-bg: var(--secondary); --selection-fg: var(--secondary-fg); --shadow-color: hsl(20 60% 12%); --hover-overlay: hsl(220 30% 10% / 0.04); } @supports (color: light-dark(red, blue)) { [data-theme="sunset"] { --primary: light-dark(hsl(16 84% 43%), hsl(16 75% 80%)); --primary-fg: light-dark(white, hsl(16 30% 12%)); --secondary: light-dark(hsl(330 60% 52%), hsl(330 68% 80%)); --secondary-fg: light-dark(white, hsl(330 30% 12%)); --success: light-dark(hsl(142 52% 34%), hsl(142 60% 80%)); --success-fg: light-dark(white, hsl(142 30% 12%)); --warning: light-dark(hsl(42 94% 52%), hsl(42 75% 80%)); --warning-fg: light-dark(hsl(30 35% 12%), hsl(42 30% 12%)); --danger: light-dark(hsl(358 72% 52%), hsl(358 75% 80%)); --danger-fg: light-dark(white, hsl(358 30% 12%)); --neutral: light-dark(hsl(24 12% 38%), hsl(24 20% 80%)); --neutral-fg: light-dark(white, hsl(24 30% 12%)); --surface: light-dark(hsl(34 70% 97%), hsl(20 18% 8%)); --surface-raised: light-dark(hsl(30 80% 99%), hsl(20 16% 11%)); --surface-subtle: light-dark(hsl(28 62% 92%), hsl(20 14% 16%)); --surface-solid: light-dark(hsl(18 34% 18%), hsl(0 0% 96%)); --text: light-dark(hsl(20 34% 14%), hsl(0 0% 96%)); --text-muted: light-dark(hsl(20 12% 42%), hsl(20 8% 68%)); --text-subtle: light-dark(hsl(20 10% 55%), hsl(20 7% 55%)); --border: light-dark(hsl(25 38% 84%), hsl(20 12% 24%)); --hover-overlay: light-dark(hsl(220 30% 10% / 0.04), hsl(0 0% 100% / 0.06)); --shadow-color: light-dark(hsl(20 60% 12%), hsl(20 40% 2%)); } } [data-theme="lavender"] { color-scheme: light dark; --primary: hsl(258 70% 58%); --primary-fg: white; --secondary: hsl(305 45% 48%); --secondary-fg: white; --success: hsl(150 50% 33%); --success-fg: white; --warning: hsl(42 90% 52%); --warning-fg: hsl(35 35% 12%); --danger: hsl(350 68% 52%); --danger-fg: white; --neutral: hsl(260 10% 42%); --neutral-fg: white; --surface: hsl(260 45% 98%); --surface-raised: hsl(0 0% 100%); --surface-subtle: hsl(260 35% 94%); --surface-solid: hsl(260 30% 18%); --text: hsl(260 28% 15%); --text-muted: hsl(260 12% 43%); --text-subtle: hsl(260 10% 57%); --border: hsl(260 28% 85%); --focus: var(--primary); --soft-bg-mix: 92%; --soft-hover-alpha: 8%; --shadow-color: hsl(260 45% 20%); --hover-overlay: hsl(220 30% 10% / 0.04); } @supports (color: light-dark(red, blue)) { [data-theme="lavender"] { --primary: light-dark(hsl(258 70% 58%), hsl(258 75% 80%)); --primary-fg: light-dark(white, hsl(258 30% 12%)); --secondary: light-dark(hsl(305 45% 48%), hsl(305 53% 80%)); --secondary-fg: light-dark(white, hsl(305 30% 12%)); --success: light-dark(hsl(150 50% 33%), hsl(150 58% 80%)); --success-fg: light-dark(white, hsl(150 30% 12%)); --warning: light-dark(hsl(42 90% 52%), hsl(42 75% 80%)); --warning-fg: light-dark(hsl(35 35% 12%), hsl(42 30% 12%)); --danger: light-dark(hsl(350 68% 52%), hsl(350 75% 80%)); --danger-fg: light-dark(white, hsl(350 30% 12%)); --neutral: light-dark(hsl(260 10% 42%), hsl(260 18% 80%)); --neutral-fg: light-dark(white, hsl(260 30% 12%)); --surface: light-dark(hsl(260 45% 98%), hsl(260 18% 8%)); --surface-raised: light-dark(hsl(0 0% 100%), hsl(260 16% 11%)); --surface-subtle: light-dark(hsl(260 35% 94%), hsl(260 14% 16%)); --surface-solid: light-dark(hsl(260 30% 18%), hsl(0 0% 96%)); --text: light-dark(hsl(260 28% 15%), hsl(0 0% 96%)); --text-muted: light-dark(hsl(260 12% 43%), hsl(260 8% 68%)); --text-subtle: light-dark(hsl(260 10% 57%), hsl(260 7% 55%)); --border: light-dark(hsl(260 28% 85%), hsl(260 12% 24%)); --hover-overlay: light-dark(hsl(220 30% 10% / 0.04), hsl(0 0% 100% / 0.06)); --shadow-color: light-dark(hsl(260 45% 20%), hsl(260 40% 2%)); } } [data-theme="mono"] { color-scheme: light dark; --primary: hsl(220 8% 18%); --primary-fg: white; --secondary: hsl(220 7% 34%); --secondary-fg: white; --success: hsl(145 42% 32%); --success-fg: white; --warning: hsl(40 70% 44%); --warning-fg: hsl(35 35% 10%); --danger: hsl(0 56% 46%); --danger-fg: white; --neutral: hsl(220 6% 45%); --neutral-fg: white; --surface: hsl(0 0% 99%); --surface-raised: hsl(0 0% 100%); --surface-subtle: hsl(220 8% 94%); --surface-solid: hsl(220 8% 15%); --text: hsl(220 8% 12%); --text-muted: hsl(220 6% 42%); --text-subtle: hsl(220 5% 58%); --border: hsl(220 8% 84%); --focus: var(--primary); --hover-overlay: hsl(220 30% 10% / 0.04); --shadow-color: hsl(220 30% 10%); } @supports (color: light-dark(red, blue)) { [data-theme="mono"] { --primary: light-dark(hsl(220 8% 18%), hsl(220 16% 80%)); --primary-fg: light-dark(white, hsl(220 30% 12%)); --secondary: light-dark(hsl(220 7% 34%), hsl(220 15% 80%)); --secondary-fg: light-dark(white, hsl(220 30% 12%)); --success: light-dark(hsl(145 42% 32%), hsl(145 50% 80%)); --success-fg: light-dark(white, hsl(145 30% 12%)); --warning: light-dark(hsl(40 70% 44%), hsl(40 75% 80%)); --warning-fg: light-dark(hsl(35 35% 10%), hsl(40 30% 12%)); --danger: light-dark(hsl(0 56% 46%), hsl(0 64% 80%)); --danger-fg: light-dark(white, hsl(0 30% 12%)); --neutral: light-dark(hsl(220 6% 45%), hsl(220 14% 80%)); --neutral-fg: light-dark(white, hsl(220 30% 12%)); --surface: light-dark(hsl(0 0% 99%), hsl(0 0% 8%)); --surface-raised: light-dark(hsl(0 0% 100%), hsl(0 0% 11%)); --surface-subtle: light-dark(hsl(220 8% 94%), hsl(0 0% 16%)); --surface-solid: light-dark(hsl(220 8% 15%), hsl(0 0% 96%)); --text: light-dark(hsl(220 8% 12%), hsl(0 0% 96%)); --text-muted: light-dark(hsl(220 6% 42%), hsl(0 0% 68%)); --text-subtle: light-dark(hsl(220 5% 58%), hsl(0 0% 55%)); --border: light-dark(hsl(220 8% 84%), hsl(0 0% 24%)); --hover-overlay: light-dark(hsl(220 30% 10% / 0.04), hsl(0 0% 100% / 0.06)); --shadow-color: light-dark(hsl(220 30% 10%), hsl(0 0% 0%)); } } [data-theme="square"] { color-scheme: light dark; --primary: hsl(220 90% 56%); --primary-fg: white; --secondary: hsl(270 60% 56%); --secondary-fg: white; --success: hsl(145 60% 32%); --success-fg: white; --warning: hsl(38 92% 50%); --warning-fg: hsl(35 30% 12%); --danger: hsl(0 75% 51%); --danger-fg: white; --neutral: hsl(220 10% 42%); --neutral-fg: white; --surface: hsl(0 0% 100%); --surface-raised: hsl(0 0% 100%); --surface-subtle: hsl(220 20% 96%); --surface-solid: hsl(222 22% 12%); --text: hsl(222 22% 12%); --text-muted: hsl(220 10% 42%); --text-subtle: hsl(220 8% 55%); --border: hsl(220 15% 88%); --focus: var(--primary); --hover-overlay: hsl(220 30% 10% / 0.04); --shadow-color: hsl(220 30% 10%); --radius: 0; --radius-sm: 0; --radius-lg: 0; } @supports (color: light-dark(red, blue)) { [data-theme="square"] { --primary: light-dark(hsl(220 90% 56%), hsl(220 75% 80%)); --primary-fg: light-dark(white, hsl(220 30% 12%)); --secondary: light-dark(hsl(270 60% 56%), hsl(270 68% 80%)); --secondary-fg: light-dark(white, hsl(270 30% 12%)); --success: light-dark(hsl(145 60% 32%), hsl(145 68% 80%)); --success-fg: light-dark(white, hsl(145 30% 12%)); --warning: light-dark(hsl(38 92% 50%), hsl(38 75% 80%)); --warning-fg: light-dark(hsl(35 30% 12%), hsl(38 30% 12%)); --danger: light-dark(hsl(0 75% 51%), hsl(0 75% 80%)); --danger-fg: light-dark(white, hsl(0 30% 12%)); --neutral: light-dark(hsl(220 10% 42%), hsl(220 18% 80%)); --neutral-fg: light-dark(white, hsl(220 30% 12%)); --surface: light-dark(hsl(0 0% 100%), hsl(222 18% 8%)); --surface-raised: light-dark(hsl(0 0% 100%), hsl(222 16% 11%)); --surface-subtle: light-dark(hsl(220 20% 96%), hsl(222 14% 16%)); --surface-solid: light-dark(hsl(222 22% 12%), hsl(0 0% 96%)); --text: light-dark(hsl(222 22% 12%), hsl(0 0% 96%)); --text-muted: light-dark(hsl(220 10% 42%), hsl(222 8% 68%)); --text-subtle: light-dark(hsl(220 8% 55%), hsl(222 7% 55%)); --border: light-dark(hsl(220 15% 88%), hsl(222 12% 24%)); --hover-overlay: light-dark(hsl(220 30% 10% / 0.04), hsl(0 0% 100% / 0.06)); --shadow-color: light-dark(hsl(220 30% 10%), hsl(0 0% 0%)); } } [data-theme="brutalist"] { color-scheme: light; --primary: hsl(48 100% 50%); --primary-fg: hsl(0 0% 4%); --secondary: hsl(215 100% 55%); --secondary-fg: white; --success: hsl(135 70% 42%); --success-fg: hsl(0 0% 4%); --warning: hsl(35 100% 52%); --warning-fg: hsl(0 0% 4%); --danger: hsl(0 85% 52%); --danger-fg: white; --neutral: hsl(0 0% 5%); --neutral-fg: white; --surface: hsl(50 30% 97%); --surface-raised: white; --surface-subtle: hsl(48 100% 88%); --surface-solid: hsl(0 0% 5%); --text: hsl(0 0% 5%); --text-muted: hsl(0 0% 25%); --text-subtle: hsl(0 0% 40%); --border: hsl(0 0% 5%); --focus: hsl(215 100% 50%); --link: hsl(215 100% 30%); --hover-overlay: rgb(0 0 0 / 0.1); --radius: 0; --radius-sm: 0; --radius-lg: 0; --border-width: 2px; --shadow: 0.3rem 0.3rem 0 var(--text); --shadow-popout: 0.45rem 0.45rem 0 var(--text); --shadow-color: var(--text); --soft-bg-mix: 72%; --soft-border-mix: 25%; --soft-fg-mix: 45%; --font-sans: Arial, Helvetica, sans-serif; --font-weight-medium: 600; --font-weight-semibold: 700; --font-weight-bold: 800; --line-height: 1.4; --selection-bg: var(--text); --selection-fg: var(--surface); } [data-theme="edge"] { color-scheme: light dark; --primary: hsl(224 72% 42%); --primary-fg: white; --secondary: hsl(166 54% 30%); --secondary-fg: white; --success: hsl(145 46% 32%); --success-fg: white; --warning: hsl(36 80% 38%); --warning-fg: hsl(34 35% 10%); --danger: hsl(354 62% 46%); --danger-fg: white; --neutral: hsl(228 9% 42%); --neutral-fg: white; --surface: hsl(40 20% 99%); --surface-raised: hsl(0 0% 100%); --surface-subtle: hsl(220 24% 95%); --surface-solid: hsl(228 26% 12%); --text: hsl(228 24% 12%); --text-muted: hsl(228 9% 42%); --text-subtle: hsl(228 7% 56%); --border: hsl(220 14% 86%); --focus: var(--primary); --hover-overlay: hsl(228 30% 10% / 0.04); --shadow-color: hsl(228 30% 10%); --radius: 0.375rem; --radius-sm: 0.25rem; --radius-lg: 0.625rem; --btn-default-bg: var(--surface-subtle); --btn-default-border: transparent; --btn-border-color: transparent; --btn-border-block-end-width: 2px; --control-border-block-end-color: var(--primary); --control-border-block-end-width: 2px; } [data-theme="edge"] .btn:not(.link) { --btn-border-block-end-color: var(--intent, var(--primary)); } [data-theme="edge"] .btn:not(:where(.solid, .soft, .outline, .ghost, .link)) { --btn-default-fg: var(--intent, var(--text)); --ui-hover-bg: var(--surface-raised); } [data-theme="edge"] .btn:not( :where(:disabled, [aria-disabled="true"], .solid, .soft, .outline, .ghost, .link) ):hover { box-shadow: none; } [data-theme="edge"] .alert { --alert-border-inline-start-color: var(--intent, var(--primary)); --alert-border-inline-start-width: 4px; } [data-theme="edge"] :is(.input, .textarea, .select):focus-visible { --control-border: var(--border); --control-border-block-end-width: 3px; } @supports (color: light-dark(red, blue)) { [data-theme="edge"] { --primary: light-dark(hsl(224 72% 42%), hsl(220 80% 76%)); --primary-fg: light-dark(white, hsl(224 35% 10%)); --secondary: light-dark(hsl(166 54% 30%), hsl(166 58% 70%)); --secondary-fg: light-dark(white, hsl(166 35% 9%)); --success: light-dark(hsl(145 46% 32%), hsl(145 48% 64%)); --success-fg: light-dark(white, hsl(145 35% 8%)); --warning: light-dark(hsl(36 80% 38%), hsl(40 72% 66%)); --warning-fg: light-dark(hsl(34 35% 10%), hsl(38 35% 10%)); --danger: light-dark(hsl(354 62% 46%), hsl(354 66% 72%)); --danger-fg: light-dark(white, hsl(354 35% 10%)); --neutral: light-dark(hsl(228 9% 42%), hsl(228 12% 72%)); --neutral-fg: light-dark(white, hsl(228 24% 10%)); --surface: light-dark(hsl(40 20% 99%), hsl(228 20% 8%)); --surface-raised: light-dark(hsl(0 0% 100%), hsl(228 17% 11%)); --surface-subtle: light-dark(hsl(220 24% 95%), hsl(228 14% 16%)); --surface-solid: light-dark(hsl(228 26% 12%), hsl(0 0% 96%)); --text: light-dark(hsl(228 24% 12%), hsl(0 0% 96%)); --text-muted: light-dark(hsl(228 9% 42%), hsl(228 8% 68%)); --text-subtle: light-dark(hsl(228 7% 56%), hsl(228 7% 55%)); --border: light-dark(hsl(220 14% 86%), hsl(228 12% 24%)); --hover-overlay: light-dark(hsl(228 30% 10% / 0.04), hsl(0 0% 100% / 0.06)); --shadow-color: light-dark(hsl(228 30% 10%), hsl(0 0% 0%)); } } [data-theme="cyberpunk"] { color-scheme: light; --primary: hsl(330 100% 60%); --primary-fg: hsl(330 100% 10%); --secondary: hsl(187 100% 42%); --secondary-fg: hsl(187 100% 8%); --success: hsl(150 100% 35%); --success-fg: hsl(150 100% 6%); --warning: hsl(25 95% 50%); --warning-fg: hsl(25 100% 8%); --danger: hsl(0 85% 44%); --danger-fg: hsl(0 0% 98%); --neutral: hsl(56 30% 8%); --neutral-fg: hsl(56 100% 55%); --surface: hsl(56 100% 50%); --surface-raised: hsl(54 100% 64%); --surface-subtle: hsl(53 100% 80%); --surface-solid: hsl(56 30% 8%); --text: hsl(56 60% 6%); --text-muted: hsl(56 25% 22%); --text-subtle: hsl(56 14% 34%); --border: hsl(56 60% 6%); --focus: hsl(330 100% 42%); --hover-overlay: hsl(56 100% 8% / 0.08); --radius: 0; --radius-sm: 0; --radius-lg: 0; --border-width: 2px; --shadow: 0.25rem 0.25rem 0 hsl(56 60% 6%); --shadow-popout: 0.25rem 0.25rem 0 hsl(56 60% 6%); --shadow-color: hsl(56 60% 6%); --soft-bg-mix: 78%; --soft-border-mix: 40%; --selection-bg: hsl(56 60% 6%); --selection-fg: hsl(56 100% 50%); } [data-theme="neon"] { color-scheme: dark; --primary: hsl(315 95% 62%); --primary-fg: hsl(315 100% 8%); --secondary: hsl(182 100% 46%); --secondary-fg: hsl(182 100% 7%); --success: hsl(135 85% 52%); --success-fg: hsl(135 100% 6%); --warning: hsl(55 95% 55%); --warning-fg: hsl(55 100% 7%); --danger: hsl(350 100% 64%); --danger-fg: hsl(350 100% 8%); --neutral: hsl(260 12% 76%); --neutral-fg: hsl(260 25% 8%); --surface: hsl(260 25% 6%); --surface-raised: hsl(260 22% 9%); --surface-subtle: hsl(260 20% 13%); --surface-solid: hsl(0 0% 96%); --text: hsl(0 0% 97%); --text-muted: hsl(260 12% 70%); --text-subtle: hsl(260 8% 55%); --border: hsl(260 18% 24%); --focus: var(--secondary); --focus-ring: hsl(182 100% 46% / 0.35); --hover-overlay: hsl(0 0% 100% / 0.07); --shadow-color: hsl(260 60% 3%); --soft-bg-mix: 80%; --soft-border-mix: 45%; --soft-hover-alpha: 20%; --shadow-popout: 0 0 1rem hsl(315 95% 62% / 0.25); } @media (color-gamut: p3) { @supports (color: oklch(0% 0 0)) { [data-theme="neon"] { --primary: oklch(70% 0.32 340); --secondary: oklch(85% 0.17 195); --success: oklch(85% 0.28 148); --warning: oklch(92% 0.2 105); --danger: oklch(68% 0.26 15); --focus-ring: oklch(85% 0.17 195 / 0.35); --shadow-popout: 0 0 1rem oklch(70% 0.32 340 / 0.3); } } } [data-theme="gradient"] { color-scheme: light dark; --primary: hsl(211 100% 50%); --primary-fg: white; --secondary: hsl(208 7% 46%); --secondary-fg: white; --success: hsl(134 61% 41%); --success-fg: white; --warning: hsl(45 100% 51%); --warning-fg: hsl(45 100% 10%); --danger: hsl(354 70% 54%); --danger-fg: white; --neutral: hsl(210 10% 23%); --neutral-fg: white; --surface: hsl(0 0% 100%); --surface-raised: hsl(0 0% 100%); --surface-subtle: hsl(210 17% 95%); --surface-solid: hsl(210 10% 15%); --text: hsl(210 11% 15%); --text-muted: hsl(208 7% 46%); --text-subtle: hsl(210 9% 62%); --border: hsl(210 14% 89%); --focus: var(--primary); --hover-overlay: hsl(210 30% 10% / 0.04); --shadow-color: hsl(210 30% 10%); --radius: 0.25rem; --radius-sm: 0.2rem; --radius-lg: 0.3rem; } @supports (color: light-dark(red, blue)) { [data-theme="gradient"] { --primary: light-dark(hsl(211 100% 50%), hsl(211 90% 72%)); --primary-fg: light-dark(white, hsl(211 40% 10%)); --secondary: light-dark(hsl(208 7% 46%), hsl(208 10% 72%)); --secondary-fg: light-dark(white, hsl(208 15% 10%)); --success: light-dark(hsl(134 61% 41%), hsl(134 55% 65%)); --success-fg: light-dark(white, hsl(134 40% 8%)); --warning: light-dark(hsl(45 100% 51%), hsl(45 90% 70%)); --danger: light-dark(hsl(354 70% 54%), hsl(354 75% 74%)); --danger-fg: light-dark(white, hsl(354 40% 10%)); --neutral: light-dark(hsl(210 10% 23%), hsl(210 12% 75%)); --neutral-fg: light-dark(white, hsl(210 15% 10%)); --surface: light-dark(hsl(0 0% 100%), hsl(210 15% 8%)); --surface-raised: light-dark(hsl(0 0% 100%), hsl(210 13% 11%)); --surface-subtle: light-dark(hsl(210 17% 95%), hsl(210 12% 16%)); --surface-solid: light-dark(hsl(210 10% 15%), hsl(0 0% 96%)); --text: light-dark(hsl(210 11% 15%), hsl(0 0% 96%)); --text-muted: light-dark(hsl(208 7% 46%), hsl(210 8% 68%)); --text-subtle: light-dark(hsl(210 9% 62%), hsl(210 7% 55%)); --border: light-dark(hsl(210 14% 89%), hsl(210 12% 24%)); --hover-overlay: light-dark(hsl(210 30% 10% / 0.04), hsl(0 0% 100% / 0.06)); --shadow-color: light-dark(hsl(210 30% 10%), hsl(0 0% 0%)); } } @supports (color: color-mix(in oklch, red, white)) { [data-theme="gradient"] .btn:not(:where(.soft, .outline, .ghost, .link, .surface)) { --gradient-hover-color: color-mix(in oklch, var(--intent, var(--neutral)) 88%, black); --ui-bg: linear-gradient( 180deg, color-mix(in oklch, white 15%, var(--intent, var(--neutral))), var(--intent, var(--neutral)) ); --btn-default-bg: var(--ui-bg); --ui-hover-bg: linear-gradient( 180deg, color-mix(in oklch, white 15%, var(--gradient-hover-color)), var(--gradient-hover-color) ); } }