actual-css 0.2.0 → 0.3.1

package/CHANGELOG.md

@@ -4,6 +4,46 @@ All notable changes will be documented here.
 
 This project follows Keep a Changelog and uses semver, including during 0.x.
 
+## [0.3.1] - 2026-08-20
+
+### Changed
+
+* `.stack` children keep their inline margins; only block-axis margins are reset (`margin-block: 0`), so self-centering children via `margin-inline: auto` work inside a stack.
+* Improved `.inverted` contract
+* Tooltip performance when not visible
+* Flyout edge cases are better handled
+* Docs improvements
+
+
+## [0.3.0] - 2026-08-19
+
+### Added
+
+* New documentation site with search, theme switching, examples, and documented public CSS hooks.
+* New optional CSS bundle with OTP, Chat, Aura, FAB, and floating-field components.
+* Built-in dismiss handling for dialogs and alerts with the generic `--dismiss` command.
+* Richer menus and context menus with improved keyboard, focus, and touch interactions.
+
+### Changed
+
+* Expanded component and layout customization hooks, including grid, cluster, form actions, buttons, tabs, and alerts.
+* Added native color input styling and icon-only button support.
+* Enhancement lifecycle and cleanup are stricter and more predictable.
+
+### Breaking
+
+* Spacing tokens move from `--space-1`…`--space-6` to the extensible `--space-10`…`--space-60` scale.
+* Size-related `--variant-*` tokens become `--density-*`; density now affects spacing and geometry, not typography or icon size.
+* `.nowrap` becomes `.text-nowrap`; cards now use `--surface-raised`.
+* The named `dark` theme becomes `indigo`; `data-theme="dark"` now forces the default theme into dark mode.
+* The JavaScript runtime now targets the Minimal tier (Firefox 98+, Safari 15.4+, Chromium 99+); the legacy dialog fallback and `enhance().forget()` are removed.
+
+### Fixed
+
+* Improved focus, forced-colors, validation, and control accessibility.
+* Improved menu, surface, and context-menu lifecycle and dismissal behavior.
+
+
 ## [0.2.0] - 2026-07-28
 
 ### Added
@@ -12,7 +52,7 @@ This project follows Keep a Changelog and uses semver, including during 0.x.
 - `enhancementSelector()`, `hasEnhancement()`, `registerEnhancement()` in
   `actual-css/js/enhance`.
 - Primitive subpath exports: `events`, `focus`, `keys`, `menu`, `surface`.
-- `.alert.callout` — neutral surface with inset intent accent band.
+- `.alert.callout` — neutral surface with 4px accent border on the leading edge.
 - `.alert.admonition` + `.alert-title` / `.alert-body` — structured anatomy.
 - `.scroller.stable-gutter` — opt-in `scrollbar-gutter: stable`.
 - `--shadow-xs` and two-layer `--shadow` token.
@@ -42,6 +82,14 @@ This project follows Keep a Changelog and uses semver, including during 0.x.
 - `selectors.js` holds written-state vocabulary only (discovery entries removed).
 - `surface.js` owns its own teardown via `data-actual-surface` marker and
   per-document binding.
+- Spacing tokens move to an extensible tens namespace: `--space-1`…`--space-6`
+  become `--space-10`…`--space-60`. Actual CSS reserves multiples of 10;
+  applications can intercalate intermediate values (`--space-15`, `--space-45`)
+  without colliding with a future framework step (breaking).
+- `.nowrap` is renamed `.text-nowrap` (text wrapping only); keeping a
+  `.cluster` on one row is now `--cluster-wrap: nowrap` (breaking).
+- `.card` background now falls back to `--surface-raised` instead of `--surface`
+  (breaking where the two differ).
 
 ### Fixed
 - Menu-item detection no longer matches items of a neighbouring surface (D11).

package/README.md

@@ -62,7 +62,7 @@ Add classes to your HTML. Components define the structure, variants change the s
 
 Intents such as `.primary`, `.secondary`, `.success`, `.warning`, and `.danger` work across components.
 
-Variants such as `.solid`, `.soft`, and `.outline` are shared by components like buttons, badges, alerts, and cards. `.ghost` and `.link` are button-only variants.
+Variants such as `.solid`, `.soft`, and `.outline` are shared by components like buttons, badges, alerts, and cards. `.inverted` is a shared surface modifier: it paints any block with the inverse surface. `.ghost` and `.link` are button-only variants.
 
 Size variants `.sm` and `.lg` scale controls consistently.
 
@@ -74,7 +74,7 @@ Actual CSS uses a small unprefixed class grammar:
 .component [intent] [variant] [size] [modifier]
 ```
 
-Components, layout helpers, form helpers, and utilities claim their documented class names. Intents are `.primary`, `.secondary`, `.success`, `.warning`, and `.danger`; shared variants are `.solid`, `.soft`, and `.outline`; button-only variants are `.ghost` and `.link`; shared sizes are `.sm` and `.lg`.
+Components, layout helpers, form helpers, and utilities claim their documented class names. Intents are `.primary`, `.secondary`, `.success`, `.warning`, and `.danger`; shared variants are `.solid`, `.soft`, and `.outline`; `.inverted` is a shared surface modifier; button-only variants are `.ghost` and `.link`; shared sizes are `.sm` and `.lg`.
 
 Undocumented `is-*` classes are runtime internals.
 
@@ -109,7 +109,7 @@ Browse [`src/css/optional/`](src/css/optional/) for available modules such as cu
 
 Some components can be enhanced with JavaScript: dialog/drawer, flyout, tooltip, tabs, scrollspy, context menu, floating UI, opt-in `data-filter` input filtering, and input masks.
 
-In 0.2, presentation (`class`) and behaviour (`data-enhance`) are separate layers — import any primitive independently to build custom widgets. See [enhancement contract](docs/design-notes/enhancement-contract.md) and [widget primitives](docs/design-notes/widget-primitives.md).
+Presentation (`class`) and behaviour (`data-enhance`) are separate layers — import any primitive independently to build custom widgets. See [enhancement contract](docs/design-notes/enhancement-contract.md) and [widget primitives](docs/design-notes/widget-primitives.md).
 
 Use the full module:
 
@@ -129,7 +129,7 @@ import "actual-css/js/tooltip";
 
 The package does not maintain separate partial bundles. Modular entrypoints map to source files, so each project can compose the framework shape it needs. To customize the full runtime, comment the imports you do not want in `src/js/index.js` and rebuild the JavaScript bundle. JavaScript modules are safe to import during server-side rendering; outside a browser, registration is a no-op.
 
-For project-specific behavior, use `actual-css/js/enhance` and the small input helpers rather than patching built-in modules. See [JavaScript](docs/javascript.md) for custom filters, textarea autogrow, ajax forms, and htmx-like patterns.
+For project-specific behavior, use `actual-css/js/enhance` and the small input helpers rather than patching built-in modules. See [Progressive Enhancements](docs/pages/enhancements/overview.md) for custom filters, textarea autogrow, ajax forms, and htmx-like patterns.
 
 ## Distribution
 
@@ -146,10 +146,22 @@ For more conservative fallbacks, import and compose the source entrypoints direc
 
 Actual CSS is built around progressive enhancement.
 
-* **Degraded** — Firefox 78+, Safari 14+, Chromium 88+. Core layout, typography, forms, and components.
-* **Minimum** — Firefox 98+, Safari 15.4+, Chromium 99+. Dialog, drawer, and top-layer behavior.
-* **Intermediate** — Firefox 121+, Safari 16+, Chromium 106+. `:has()`, container queries, alert icon layout, and intent tints.
-* **Recommended** — Firefox 129+, Safari 17.5+, Chromium 123+. `light-dark()`, `color-mix()`, and full theming.
+| Tier         | Firefox |    Safari | Chromium |
+| ------------ | ------: | --------: | -------: |
+| Degraded     |     78+ |       14+ |      88+ |
+| **Minimal**  | **98+** | **15.4+** |  **99+** |
+| Intermediate |    121+ |       16+ |     106+ |
+| Recommended  |    129+ |     17.5+ |     123+ |
+
+**Degraded** — semantic HTML and core CSS remain usable. JavaScript
+enhancements are outside the supported contract.
+
+**Minimal** — full Actual support, including the JavaScript runtime. The
+runtime assumes modern browser APIs and does not ship legacy compatibility
+layers or polyfills.
+
+Degraded browsers may execute some enhancements successfully, but this
+behavior is not tested or preserved.
 
 ## Cascade layers
 
@@ -165,4 +177,7 @@ MIT
 
 ## Docs
 
-Start with [`docs/README.md`](docs/README.md).
+The documentation site is generated into [`site/`](site/) from the
+source pages under [`docs/pages/`](docs/pages/). Start at
+[`site/index.html`](site/index.html), or build it locally with
+`bun run build:docs`.

package/dist/actual-themes.min.css

@@ -0,0 +1 @@
+[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); --focus-ring: hsl(220 90% 66% / 0.28); --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); --focus-ring: hsl(210 92% 70% / 0.28); --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); --focus-ring: hsl(214 82% 44% / 0.22); } @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%)); --focus-ring: light-dark(hsl(214 82% 44% / 0.22), hsl(214 75% 80% / 0.28)); --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); --focus-ring: hsl(175 48% 26% / 0.22); --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%)); --focus-ring: light-dark(hsl(175 48% 26% / 0.22), hsl(175 45% 76% / 0.28)); --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); --focus-ring: hsl(198 82% 35% / 0.22); } @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%)); --focus-ring: light-dark(hsl(198 82% 35% / 0.22), hsl(198 75% 80% / 0.28)); --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); --focus-ring: hsl(174 45% 24% / 0.22); } @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%)); --focus-ring: light-dark(hsl(174 45% 24% / 0.22), hsl(170 35% 66% / 0.28)); --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); --focus-ring: hsl(203 55% 30% / 0.22); } @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%)); --focus-ring: light-dark(hsl(203 55% 30% / 0.22), hsl(202 55% 72% / 0.28)); --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); --focus-ring: hsl(16 84% 43% / 0.22); --selection-bg: var(--secondary); --selection-fg: var(--secondary-fg); --shadow-color: hsl(20 60% 12%); } @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%)); --focus-ring: light-dark(hsl(16 84% 43% / 0.22), hsl(16 75% 80% / 0.28)); --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); --focus-ring: hsl(258 70% 58% / 0.22); --soft-bg-mix: 92%; --soft-hover-alpha: 8%; --shadow-color: hsl(260 45% 20%); } @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%)); --focus-ring: light-dark(hsl(258 70% 58% / 0.22), hsl(258 75% 80% / 0.28)); --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); --focus-ring: hsl(220 8% 18% / 0.22); } @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%)); --focus-ring: light-dark(hsl(220 8% 18% / 0.22), hsl(220 16% 80% / 0.28)); --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); --focus-ring: hsl(220 90% 56% / 0.22); --hover-overlay: hsl(220 30% 10% / 0.04); --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%)); --focus-ring: light-dark(hsl(220 90% 56% / 0.22), hsl(220 75% 80% / 0.28)); --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="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); --focus-ring: hsl(224 72% 42% / 0.22); --hover-overlay: hsl(228 30% 10% / 0.04); --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%)); --focus-ring: light-dark(hsl(224 72% 42% / 0.22), hsl(220 80% 76% / 0.28)); --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%); --focus-ring: hsl(330 100% 42% / 0.3); --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); --focus-ring: hsl(211 100% 50% / 0.25); --hover-overlay: hsl(210 30% 10% / 0.04); --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%)); --warning-fg: light-dark(hsl(45 100% 10%), hsl(45 100% 10%)); --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%)); --focus-ring: light-dark(hsl(211 100% 50% / 0.25), hsl(211 90% 72% / 0.3)); --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)) { --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) ); } }