@ropav/styles 0.4.0 → 0.6.0

package/dist/themes/airbnb.css

@@ -19,6 +19,7 @@
   [data-theme="airbnb"] {
     color-scheme: light;
 
+    --component-radius: calc(var(--radius) * 3);
     --field-radius: 0.75rem;
     --radius: 0.5rem;
 
@@ -81,6 +82,9 @@
       var(--field-foreground, var(--foreground)) 2%
     );
     --field-placeholder: oklch(51.6% 0 17.07);
+    --field-shadow:
+      0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06),
+      0 0 1px 0 rgba(0, 0, 0, 0.06);
 
     /* Status Colors */
     --danger: oklch(0.5392 0.1816 33.72);
@@ -108,10 +112,10 @@
     --segment-foreground: oklch(21.03% 0 17.07);
 
     /* Borders and separators */
-    --border: oklch(90% 0 17.07);
+    --border: color-mix(in oklab, var(--surface-foreground) 14%, transparent);
     --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
     --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
-    --separator: oklch(92% 0 17.07);
+    --separator: color-mix(in oklab, var(--surface-foreground) 12%, transparent);
     --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
     --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
 
@@ -119,6 +123,7 @@
     --background-inverse: var(--foreground);
     --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
     --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
+    --state-layer: color-mix(in oklab, var(--surface-foreground) 9%, transparent);
   }
 
   [data-theme="airbnb"].dark,
@@ -184,6 +189,7 @@
       var(--field-foreground, var(--foreground)) 2%
     );
     --field-placeholder: oklch(70.5% 0 17.07);
+    --field-shadow: 0 0 0 0 transparent inset;
 
     /* Status Colors */
     --danger: oklch(0.5392 0.1816 33.72);
@@ -211,10 +217,10 @@
     --segment-foreground: oklch(99.11% 0 17.07);
 
     /* Borders and separators */
-    --border: oklch(28% 0 17.07);
+    --border: color-mix(in oklab, var(--surface-foreground) 7%, transparent);
     --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
     --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
-    --separator: oklch(25% 0 17.07);
+    --separator: color-mix(in oklab, var(--surface-foreground) 4%, transparent);
     --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
     --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
 
@@ -222,5 +228,6 @@
     --background-inverse: var(--foreground);
     --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
     --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
+    --state-layer: color-mix(in oklab, var(--surface-foreground) 7%, transparent);
   }
 }

package/dist/themes/all.css

@@ -4,6 +4,7 @@
  * Convenience for docs and playgrounds. Apps should import only the themes they offer.
  * Import without a `layer()` wrapper.
  */
+@import "./hero.css";
 @import "./sky.css";
 @import "./lavender.css";
 @import "./mint.css";

package/dist/themes/coinbase.css

@@ -19,6 +19,7 @@
   [data-theme="coinbase"] {
     color-scheme: light;
 
+    --component-radius: calc(var(--radius) * 3);
     --field-radius: 0.125rem;
     --radius: 0.5rem;
 
@@ -81,6 +82,9 @@
       var(--field-foreground, var(--foreground)) 2%
     );
     --field-placeholder: oklch(51.6% 0.004 262.87);
+    --field-shadow:
+      0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06),
+      0 0 1px 0 rgba(0, 0, 0, 0.06);
 
     /* Status Colors */
     --danger: oklch(0.5507 0.2062 24);
@@ -108,10 +112,10 @@
     --segment-foreground: oklch(21.03% 0.002 262.87);
 
     /* Borders and separators */
-    --border: oklch(90% 0.002 262.87);
+    --border: color-mix(in oklab, var(--surface-foreground) 14%, transparent);
     --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
     --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
-    --separator: oklch(92% 0.002 262.87);
+    --separator: color-mix(in oklab, var(--surface-foreground) 12%, transparent);
     --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
     --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
 
@@ -119,6 +123,7 @@
     --background-inverse: var(--foreground);
     --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
     --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
+    --state-layer: color-mix(in oklab, var(--surface-foreground) 9%, transparent);
   }
 
   [data-theme="coinbase"].dark,
@@ -184,6 +189,7 @@
       var(--field-foreground, var(--foreground)) 2%
     );
     --field-placeholder: oklch(70.5% 0.004 262.87);
+    --field-shadow: 0 0 0 0 transparent inset;
 
     /* Status Colors */
     --danger: oklch(0.6545 0.2145 22.31);
@@ -211,10 +217,10 @@
     --segment-foreground: oklch(99.11% 0.002 262.87);
 
     /* Borders and separators */
-    --border: oklch(28% 0.002 262.87);
+    --border: color-mix(in oklab, var(--surface-foreground) 7%, transparent);
     --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
     --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
-    --separator: oklch(25% 0.002 262.87);
+    --separator: color-mix(in oklab, var(--surface-foreground) 4%, transparent);
     --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
     --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
 
@@ -222,5 +228,6 @@
     --background-inverse: var(--foreground);
     --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
     --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
+    --state-layer: color-mix(in oklab, var(--surface-foreground) 7%, transparent);
   }
 }

package/dist/themes/default.css

@@ -39,7 +39,8 @@
 
     /* Radius */
     --radius: 0.5rem;
-    --field-radius: calc(var(--radius) * 1.5);
+    --field-radius: calc(var(--radius) * 0.75);
+    --component-radius: var(--field-radius);
 
     /* == Light Theme Variables == */
 
@@ -73,7 +74,7 @@
     --default: oklch(94% 0.001 286.375);
     --default-foreground: var(--eclipse);
 
-    --accent: oklch(0.6204 0.195 253.83);
+    --accent: oklch(0.62 0.2 260);
     --accent-foreground: var(--snow);
 
     /* Form Fields */
@@ -97,8 +98,12 @@
     --segment-foreground: var(--eclipse);
 
     /* Misc Colors */
-    --border: oklch(90% 0.004 286.32);
-    --separator: oklch(92% 0.004 286.32);
+    /* An edge, as an alpha of the surface foreground - `--surface-hover`'s reasoning, applied to a
+     * line. A flat neutral is picked against one fill and then disappears against any other of its
+     * own lightness: in the dark half `--separator` sat 0.7% from `--surface-secondary`, so a box
+     * drawn on the secondary fill had no edge left. */
+    --border: color-mix(in oklab, var(--surface-foreground) 14%, transparent);
+    --separator: color-mix(in oklab, var(--surface-foreground) 12%, transparent);
     --focus: var(--accent);
     --link: var(--foreground);
 
@@ -108,6 +113,21 @@
     /* Calculated Colors */
     --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
 
+    /* The layer a state paints on whatever is behind it, named for what it is rather than for one
+     * of the states it serves - hover reads it, so do a press and the muted selection a calendar
+     * gives a day outside the month. Distinct from `--surface-hover` above, which is a surface
+     * that has been tinted and stays opaque: this one is an alpha, so a component transparent at
+     * rest can mark a state without inventing a fill of its own.
+     *
+     * A neutral cannot do this job. It has to be picked against one background and is then wrong
+     * on every other - invisible against a fill of its own lightness, and against a translucent
+     * surface it cannot know what is behind at all. An alpha darkens whatever it lands on.
+     *
+     * The halves carry different percentages because compositing happens in sRGB while the palette
+     * is authored in Oklab: the same alpha reads stronger over a dark surface than a light one.
+     * These are the pair that lands where the flat neutral used to. */
+    --state-layer: color-mix(in oklab, var(--surface-foreground) 9%, transparent);
+
     --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
     --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
     --background-inverse: var(--foreground);
@@ -170,9 +190,16 @@
     --overlay-shadow:
       0 2px 8px 0 rgba(0, 0, 0, 0.06), 0 -6px 12px 0 rgba(0, 0, 0, 0.03),
       0 14px 28px 0 rgba(0, 0, 0, 0.08);
+    /* The edge of an overlay that has an arrow, as a filter over the combined silhouette:
+     * `--overlay-shadow` restated as drop-shadows, so the shadow wraps the arrow too. A theme
+     * whose overlays wear a hairline instead points this at `url(#ropav-overlay-edge)` — the
+     * filter every arrow carries — and colours the line with `--overlay-edge-line`. */
+    --overlay-edge: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.06))
+      drop-shadow(0 -6px 12px rgba(0, 0, 0, 0.03)) drop-shadow(0 14px 28px rgba(0, 0, 0, 0.08));
+    --overlay-edge-line: transparent;
     --field-shadow:
-      0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06),
-      0 0 1px 0 rgba(0, 0, 0, 0.06);
+      0 2px 4px 0 rgba(0, 0, 0, 0.02), 0 1px 2px 0 rgba(0, 0, 0, 0.03),
+      0 0 1px 0 rgba(0, 0, 0, 0.03);
     /* Skeleton Default Global Animation */
     --skeleton-animation: shimmer; /* shimmer, pulse, none */
 
@@ -229,8 +256,8 @@
     --segment-foreground: var(--foreground);
 
     /* Misc Colors */
-    --border: oklch(28% 0.006 286.033);
-    --separator: oklch(25% 0.006 286.033);
+    --border: color-mix(in oklab, var(--surface-foreground) 7%, transparent);
+    --separator: color-mix(in oklab, var(--surface-foreground) 4%, transparent);
     --focus: var(--accent);
     --link: var(--foreground);
 
@@ -240,10 +267,15 @@
     /* Shadows */
     --surface-shadow: 0 0 0 0 transparent inset; /* No shadow on dark mode */
     --overlay-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3) inset;
+    /* The arrowed overlays' edge: the same hairline, drawn by the filter the arrow carries so it
+     * follows the arrow's silhouette as well as the body's. */
+    --overlay-edge: url(#ropav-overlay-edge);
+    --overlay-edge-line: rgba(255, 255, 255, 0.3);
     --field-shadow: 0 0 0 0 transparent inset; /* Transparent shadow to allow ring utilities to work */
 
     /* Calculated Colors */
     --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
+    --state-layer: color-mix(in oklab, var(--surface-foreground) 7%, transparent);
 
     --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
     --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);

package/dist/themes/discord.css

@@ -19,6 +19,7 @@
   [data-theme="discord"] {
     color-scheme: light;
 
+    --component-radius: calc(var(--radius) * 3);
     --field-radius: 0.75rem;
     --radius: 0.25rem;
 
@@ -81,6 +82,9 @@
       var(--field-foreground, var(--foreground)) 2%
     );
     --field-placeholder: oklch(51.6% 0.02 273.85);
+    --field-shadow:
+      0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06),
+      0 0 1px 0 rgba(0, 0, 0, 0.06);
 
     /* Status Colors */
     --danger: oklch(0.5884 0.1993 24.39);
@@ -108,10 +112,10 @@
     --segment-foreground: oklch(21.03% 0.01 273.85);
 
     /* Borders and separators */
-    --border: oklch(90% 0.01 273.85);
+    --border: color-mix(in oklab, var(--surface-foreground) 14%, transparent);
     --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
     --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
-    --separator: oklch(92% 0.01 273.85);
+    --separator: color-mix(in oklab, var(--surface-foreground) 12%, transparent);
     --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
     --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
 
@@ -119,6 +123,7 @@
     --background-inverse: var(--foreground);
     --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
     --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
+    --state-layer: color-mix(in oklab, var(--surface-foreground) 9%, transparent);
   }
 
   [data-theme="discord"].dark,
@@ -184,6 +189,7 @@
       var(--field-foreground, var(--foreground)) 2%
     );
     --field-placeholder: oklch(70.5% 0.02 273.85);
+    --field-shadow: 0 0 0 0 transparent inset;
 
     /* Status Colors */
     --danger: oklch(0.6318 0.2075 24.57);
@@ -211,10 +217,10 @@
     --segment-foreground: oklch(99.11% 0.01 273.85);
 
     /* Borders and separators */
-    --border: oklch(28% 0.01 273.85);
+    --border: color-mix(in oklab, var(--surface-foreground) 7%, transparent);
     --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
     --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
-    --separator: oklch(25% 0.01 273.85);
+    --separator: color-mix(in oklab, var(--surface-foreground) 4%, transparent);
     --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
     --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
 
@@ -222,5 +228,6 @@
     --background-inverse: var(--foreground);
     --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
     --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
+    --state-layer: color-mix(in oklab, var(--surface-foreground) 7%, transparent);
   }
 }

package/dist/themes/hero.css

@@ -0,0 +1,282 @@
+/**
+ * Hero theme — hand-written.
+ *
+ * HeroUI v3's own palette — the one Ropav's style layer was vendored from, offered under its own
+ * `data-theme` alongside the other brand themes.
+ *
+ * Not generated. The generator derives every grey from one hue and one chroma, and this palette
+ * does neither: its greys sit around hue 286 while its accent is at 253.83, its grey chroma runs
+ * from 0 (`--background`) to 0.0138 (`--muted`), and `--surface-tertiary` strays to 247.91 on
+ * dark. Its `scripts/themes/presets.ts` entry records the accent seeds and the radius pair, which
+ * is what the theme list and the Storybook toolbar read; `pnpm generate:themes` skips it.
+ *
+ * Colours, radii and the field shadow, like every other theme — `--spacing`, `--cursor-*`, the
+ * primitives, the surface and overlay shadows and `--backdrop` stay on `:root` / `.dark` in
+ * `themes/default.css`, which keeps matching an element that carries a `data-theme`. The primitive *values* are spelled out rather than
+ * aliased through `var(--eclipse)`, so this palette holds whatever the default theme is tuned to.
+ *
+ * The `theme` layer is declared inside this file, so it can be imported with or without a
+ * `layer()` wrapper:
+ *
+ *   @import "@ropav/styles";
+ *   @import "@ropav/styles/themes/hero.css";
+ *
+ * Light is the default; dark needs the `dark` class alongside the attribute:
+ *   <html data-theme="hero">               light
+ *   <html data-theme="hero" class="dark">  dark
+ */
+@layer theme {
+  [data-theme="hero"] {
+    color-scheme: light;
+
+    /* Radius */
+    --radius: 0.5rem;
+    --field-radius: calc(var(--radius) * 1.5);
+    --component-radius: calc(var(--radius) * 3);
+
+    /* == Light Theme Variables == */
+
+    /* Base Colors */
+    --background: oklch(0.9702 0 0);
+    --foreground: oklch(0.2103 0.0059 285.89);
+
+    /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
+    --surface: oklch(100% 0 0);
+    --surface-foreground: var(--foreground);
+
+    --surface-secondary: oklch(0.9524 0.0013 286.37);
+    --surface-secondary-foreground: var(--foreground);
+
+    --surface-tertiary: oklch(0.9373 0.0013 286.37);
+    --surface-tertiary-foreground: var(--foreground);
+
+    /* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) */
+    --overlay: oklch(100% 0 0);
+    --overlay-foreground: var(--foreground);
+
+    --muted: oklch(0.516 0.0138 285.94);
+
+    --scrollbar: var(--scrollbar-thumb);
+    --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
+    --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+
+    --default: oklch(94% 0.001 286.375);
+    --default-foreground: oklch(0.2103 0.0059 285.89);
+
+    --accent: oklch(0.6204 0.195 253.83);
+    --accent-foreground: oklch(0.9911 0 0);
+
+    /* Form Fields */
+    --field-background: oklch(100% 0 0);
+    --field-foreground: oklch(0.2103 0.0059 285.89);
+    --field-placeholder: var(--muted);
+    --field-border: transparent; /* no border by default on form fields */
+    --field-shadow:
+      0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06),
+      0 0 1px 0 rgba(0, 0, 0, 0.06);
+
+    /* Status Colors */
+    --success: oklch(0.7329 0.1935 150.81);
+    --success-foreground: oklch(0.2103 0.0059 285.89);
+
+    --warning: oklch(0.7819 0.1585 72.33);
+    --warning-foreground: oklch(0.2103 0.0059 285.89);
+
+    --danger: oklch(0.6532 0.2328 25.74);
+    --danger-foreground: oklch(0.9911 0 0);
+
+    /* Component Colors */
+    --segment: oklch(100% 0 0);
+    --segment-foreground: oklch(0.2103 0.0059 285.89);
+
+    /* Misc Colors */
+    /* An edge, as an alpha of the surface foreground - `--surface-hover`'s reasoning, applied to a
+     * line. A flat neutral is picked against one fill and then disappears against any other of its
+     * own lightness: in the dark half `--separator` sat 0.7% from `--surface-secondary`, so a box
+     * drawn on the secondary fill had no edge left. */
+    --border: color-mix(in oklab, var(--surface-foreground) 14%, transparent);
+    --separator: color-mix(in oklab, var(--surface-foreground) 12%, transparent);
+    --focus: var(--accent);
+    --link: var(--foreground);
+
+    /* Calculated Colors */
+    --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
+
+    /* The layer a state paints on whatever is behind it, named for what it is rather than for one
+     * of the states it serves - hover reads it, so do a press and the muted selection a calendar
+     * gives a day outside the month. Distinct from `--surface-hover` above, which is a surface
+     * that has been tinted and stays opaque: this one is an alpha, so a component transparent at
+     * rest can mark a state without inventing a fill of its own.
+     *
+     * A neutral cannot do this job. It has to be picked against one background and is then wrong
+     * on every other - invisible against a fill of its own lightness, and against a translucent
+     * surface it cannot know what is behind at all. An alpha darkens whatever it lands on.
+     *
+     * The halves carry different percentages because compositing happens in sRGB while the palette
+     * is authored in Oklab: the same alpha reads stronger over a dark surface than a light one.
+     * These are the pair that lands where the flat neutral used to. */
+    --state-layer: color-mix(in oklab, var(--surface-foreground) 9%, transparent);
+
+    --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
+    --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
+    --background-inverse: var(--foreground);
+
+    --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
+    --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
+    --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
+    --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
+    --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
+
+    --field-hover: color-mix(
+      in oklab,
+      var(--field-background, var(--default)) 90%,
+      var(--field-foreground, var(--foreground)) 2%
+    );
+    --field-focus: var(--field-background, var(--default));
+    --field-border-hover: color-mix(
+      in oklab,
+      var(--field-border, var(--border)) 88%,
+      var(--field-foreground, var(--foreground)) 10%
+    );
+    --field-border-focus: color-mix(
+      in oklab,
+      var(--field-border, var(--border)) 74%,
+      var(--field-foreground, var(--foreground)) 22%
+    );
+
+    --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
+    --default-soft-foreground: var(--default-foreground);
+    --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
+
+    --accent-soft: color-mix(in oklab, var(--accent) 15%, transparent);
+    --accent-soft-foreground: color-mix(in oklab, var(--accent) 70%, var(--foreground) 45%);
+    --accent-soft-hover: color-mix(in oklab, var(--accent) 20%, transparent);
+
+    --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
+    --danger-soft-foreground: color-mix(in oklab, var(--danger) 70%, var(--foreground) 40%);
+    --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
+
+    --warning-soft: color-mix(in oklab, var(--warning) 15%, transparent);
+    --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 70%);
+    --warning-soft-hover: color-mix(in oklab, var(--warning) 20%, transparent);
+
+    --success-soft: color-mix(in oklab, var(--success) 15%, transparent);
+    --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 75%);
+    --success-soft-hover: color-mix(in oklab, var(--success) 20%, transparent);
+
+    --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
+    --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
+
+    --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
+    --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
+  }
+
+  [data-theme="hero"].dark,
+  .dark [data-theme="hero"] {
+    color-scheme: dark;
+    /* == Dark Theme Variables == */
+
+    /* Base Colors */
+    --background: oklch(12% 0.005 285.823);
+    --foreground: oklch(0.9911 0 0);
+
+    /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
+    --surface: oklch(0.2103 0.0059 285.89);
+    --surface-foreground: var(--foreground);
+
+    --surface-secondary: oklch(0.257 0.0037 286.14);
+    --surface-tertiary: oklch(0.2721 0.0024 247.91);
+
+    /* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) - lighter for contrast */
+    --overlay: oklch(0.2103 0.0059 285.89);
+    --overlay-foreground: var(--foreground);
+
+    --muted: oklch(70.5% 0.015 286.067);
+
+    --scrollbar: var(--scrollbar-thumb);
+    --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
+    --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+
+    --default: oklch(27.4% 0.006 286.033);
+    --default-foreground: oklch(0.9911 0 0);
+
+    /* Form Fields */
+    --field-background: oklch(0.2103 0.0059 285.89);
+    --field-foreground: var(--foreground);
+    --field-shadow: 0 0 0 0 transparent inset; /* placeholder, so ring utilities still compose */
+
+    /* Status Colors */
+    --warning: oklch(0.8203 0.1388 76.34);
+    --warning-foreground: oklch(0.2103 0.0059 285.89);
+
+    --danger: oklch(0.594 0.1967 24.63);
+    --danger-foreground: oklch(0.9911 0 0);
+
+    /* Component Colors */
+    --segment: oklch(0.3964 0.01 285.93);
+    --segment-foreground: var(--foreground);
+
+    /* Misc Colors */
+    --border: color-mix(in oklab, var(--surface-foreground) 7%, transparent);
+    --separator: color-mix(in oklab, var(--surface-foreground) 4%, transparent);
+    --focus: var(--accent);
+    --link: var(--foreground);
+
+    /* Calculated Colors */
+    --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
+    --state-layer: color-mix(in oklab, var(--surface-foreground) 7%, transparent);
+
+    --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
+    --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
+    --background-inverse: var(--foreground);
+
+    --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
+    --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
+    --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
+    --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
+    --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
+
+    --field-hover: color-mix(
+      in oklab,
+      var(--field-background, var(--default)) 90%,
+      var(--field-foreground, var(--foreground)) 2%
+    );
+    --field-focus: var(--field-background, var(--default));
+    --field-border-hover: color-mix(
+      in oklab,
+      var(--field-border, var(--border)) 88%,
+      var(--field-foreground, var(--foreground)) 10%
+    );
+    --field-border-focus: color-mix(
+      in oklab,
+      var(--field-border, var(--border)) 74%,
+      var(--field-foreground, var(--foreground)) 22%
+    );
+
+    --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
+    --default-soft-foreground: var(--default-foreground);
+    --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
+
+    --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
+    --accent-soft-foreground: color-mix(in oklab, var(--accent) 80%, var(--foreground) 30%);
+    --accent-soft-hover: color-mix(in oklab, var(--accent) 16%, transparent);
+
+    --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
+    --danger-soft-foreground: color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%);
+    --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
+
+    --warning-soft: color-mix(in oklab, var(--warning) 12%, transparent);
+    --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%);
+    --warning-soft-hover: color-mix(in oklab, var(--warning) 16%, transparent);
+
+    --success-soft: color-mix(in oklab, var(--success) 12%, transparent);
+    --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 30%);
+    --success-soft-hover: color-mix(in oklab, var(--success) 16%, transparent);
+
+    --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
+    --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
+
+    --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
+    --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
+  }
+}

package/dist/themes/lavender.css

@@ -19,6 +19,7 @@
   [data-theme="lavender"] {
     color-scheme: light;
 
+    --component-radius: calc(var(--radius) * 3);
     --field-radius: 0.75rem;
     --radius: 0.5rem;
 
@@ -81,6 +82,9 @@
       var(--field-foreground, var(--foreground)) 2%
     );
     --field-placeholder: oklch(51.6% 0.003 305);
+    --field-shadow:
+      0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06),
+      0 0 1px 0 rgba(0, 0, 0, 0.06);
 
     /* Status Colors */
     --danger: oklch(65.32% 0.2335 31.88);
@@ -108,10 +112,10 @@
     --segment-foreground: oklch(21.03% 0.0015 305);
 
     /* Borders and separators */
-    --border: oklch(90% 0.0015 305);
+    --border: color-mix(in oklab, var(--surface-foreground) 14%, transparent);
     --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
     --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
-    --separator: oklch(92% 0.0015 305);
+    --separator: color-mix(in oklab, var(--surface-foreground) 12%, transparent);
     --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
     --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
 
@@ -119,6 +123,7 @@
     --background-inverse: var(--foreground);
     --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
     --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
+    --state-layer: color-mix(in oklab, var(--surface-foreground) 9%, transparent);
   }
 
   [data-theme="lavender"].dark,
@@ -184,6 +189,7 @@
       var(--field-foreground, var(--foreground)) 2%
     );
     --field-placeholder: oklch(70.5% 0.003 305);
+    --field-shadow: 0 0 0 0 transparent inset;
 
     /* Status Colors */
     --danger: oklch(59.4% 0.1973 30.77);
@@ -211,10 +217,10 @@
     --segment-foreground: oklch(99.11% 0.0015 305);
 
     /* Borders and separators */
-    --border: oklch(28% 0.0015 305);
+    --border: color-mix(in oklab, var(--surface-foreground) 7%, transparent);
     --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
     --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
-    --separator: oklch(25% 0.0015 305);
+    --separator: color-mix(in oklab, var(--surface-foreground) 4%, transparent);
     --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
     --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
 
@@ -222,5 +228,6 @@
     --background-inverse: var(--foreground);
     --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
     --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
+    --state-layer: color-mix(in oklab, var(--surface-foreground) 7%, transparent);
   }
 }