@ropav/styles 0.4.0 → 0.5.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);
@@ -184,6 +188,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);

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);
@@ -184,6 +188,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);

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 */
@@ -170,9 +171,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 */
 
@@ -240,6 +248,10 @@
     /* 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 */

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);
@@ -184,6 +188,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);

package/dist/themes/hero.css

@@ -0,0 +1,262 @@
+/**
+ * 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 */
+    --border: oklch(90% 0.004 286.32);
+    --separator: oklch(92% 0.004 286.32);
+    --focus: var(--accent);
+    --link: var(--foreground);
+
+    /* Calculated Colors */
+    --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
+
+    --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: oklch(28% 0.006 286.033);
+    --separator: oklch(25% 0.006 286.033);
+    --focus: var(--accent);
+    --link: var(--foreground);
+
+    /* Calculated Colors */
+    --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
+
+    --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);
@@ -184,6 +188,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);

package/dist/themes/mint.css

@@ -19,6 +19,7 @@
   [data-theme="mint"] {
     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 155);
+    --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 13.88);
@@ -184,6 +188,7 @@
       var(--field-foreground, var(--foreground)) 2%
     );
     --field-placeholder: oklch(70.5% 0.003 155);
+    --field-shadow: 0 0 0 0 transparent inset;
 
     /* Status Colors */
     --danger: oklch(59.4% 0.1973 12.77);

package/dist/themes/netflix.css

@@ -19,6 +19,7 @@
   [data-theme="netflix"] {
     color-scheme: light;
 
+    --component-radius: calc(var(--radius) * 3);
     --field-radius: 0.125rem;
     --radius: 0.125rem;
 
@@ -81,6 +82,9 @@
       var(--field-foreground, var(--foreground)) 2%
     );
     --field-placeholder: oklch(51.6% 0 27.99);
+    --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.4823 0.1938 27.64);
@@ -184,6 +188,7 @@
       var(--field-foreground, var(--foreground)) 2%
     );
     --field-placeholder: oklch(70.5% 0 27.99);
+    --field-shadow: 0 0 0 0 transparent inset;
 
     /* Status Colors */
     --danger: oklch(0.4964 0.1994 28.56);

package/dist/themes/rabbit.css

@@ -19,6 +19,7 @@
   [data-theme="rabbit"] {
     color-scheme: light;
 
+    --component-radius: calc(var(--radius) * 3);
     --field-radius: 1rem;
     --radius: 0.5rem;
 
@@ -81,6 +82,9 @@
       var(--field-foreground, var(--foreground)) 2%
     );
     --field-placeholder: oklch(51.6% 0.02 36.66);
+    --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.6291 0.2565 29.09);
@@ -184,6 +188,7 @@
       var(--field-foreground, var(--foreground)) 2%
     );
     --field-placeholder: oklch(70.5% 0.02 36.66);
+    --field-shadow: 0 0 0 0 transparent inset;
 
     /* Status Colors */
     --danger: oklch(0.6291 0.2565 29.09);

package/dist/themes/shared/theme.css

@@ -52,7 +52,7 @@
   --color-field-foreground: var(--field-foreground, var(--foreground));
   --color-field-placeholder: var(--field-placeholder, var(--muted));
   --color-field-border: var(--field-border, var(--border));
-  --radius-field: var(--field-radius, calc(var(--radius) * 1.5));
+  --radius-field: var(--field-radius, calc(var(--radius) * 0.75));
   --border-width-field: var(--field-border-width, var(--border-width));
 
   /* Color Tokens */
@@ -100,7 +100,13 @@
   --color-border-secondary: var(--border-secondary);
   --color-border-tertiary: var(--border-tertiary);
 
-  /* Radius and default sizes - defaults can change by just changing the --radius */
+  /* Radius and default sizes - defaults can change by just changing the --radius.
+   *
+   * `inline` is what makes that work in a subtree: the value is substituted into the utility, so
+   * `rounded-3xl` compiles to `calc(var(--radius) * 3)` and resolves against the element wearing
+   * the class. A `data-theme` that sets its own `--radius` gets the whole scale for free, with
+   * nothing to re-declare - unlike the colour tokens, which are real properties on `:root` and do
+   * have to be re-emitted per theme. */
   --radius-xs: calc(var(--radius) * 0.25); /* 0.125rem (2px) */
   --radius-sm: calc(var(--radius) * 0.5); /* 0.25rem (4px) */
   --radius-md: calc(var(--radius) * 0.75); /* 0.375rem (6px) */
@@ -110,6 +116,17 @@
   --radius-3xl: calc(var(--radius) * 3); /* 1.5rem (24px) */
   --radius-4xl: calc(var(--radius) * 4); /* 2rem (32px) */
 
+  /* The one radius every control and surface reads, so a theme can pair them with its fields
+   * instead. Unset falls through to the pill-ish 3x that every theme but `default` still wants.
+   * Kept off the `--radius-*` scale on purpose: overriding a scale step would leave `2xl`
+   * larger than `3xl`.
+   *
+   * This alias is for the utilities only - `inline` substitutes it into `rounded-component`, so
+   * the var() resolves at the element wearing the class. Raw CSS must say
+   * `var(--component-radius)` instead: read through this alias, the var() resolves here on
+   * `:root` and then inherits the root theme's value into every `data-theme` subtree. */
+  --radius-component: var(--component-radius, calc(var(--radius) * 3));
+
   /* Transition Timing Functions  */
   --ease-smooth: ease; /* same as transition: ease; */
   /* These custom curves are made by https://twitter.com/bdc */

package/dist/themes/sky.css

@@ -19,6 +19,7 @@
   [data-theme="sky"] {
     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 225);
+    --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 22.28);
@@ -184,6 +188,7 @@
       var(--field-foreground, var(--foreground)) 2%
     );
     --field-placeholder: oklch(70.5% 0.003 225);
+    --field-shadow: 0 0 0 0 transparent inset;
 
     /* Status Colors */
     --danger: oklch(59.4% 0.1973 21.17);

package/dist/themes/spotify.css

@@ -19,6 +19,7 @@
   [data-theme="spotify"] {
     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 148.67);
+    --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.5509 0.2166 25.29);
@@ -184,6 +188,7 @@
       var(--field-foreground, var(--foreground)) 2%
     );
     --field-placeholder: oklch(70.5% 0.004 148.67);
+    --field-shadow: 0 0 0 0 transparent inset;
 
     /* Status Colors */
     --danger: oklch(0.5931 0.2338 25.42);

package/dist/themes/uber.css

@@ -19,6 +19,7 @@
   [data-theme="uber"] {
     color-scheme: light;
 
+    --component-radius: calc(var(--radius) * 3);
     --field-radius: 0.25rem;
     --radius: 0.25rem;
 
@@ -81,6 +82,9 @@
       var(--field-foreground, var(--foreground)) 2%
     );
     --field-placeholder: oklch(51.6% 0 0);
+    --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.573 0.2249 21.97);
@@ -184,6 +188,7 @@
       var(--field-foreground, var(--foreground)) 2%
     );
     --field-placeholder: oklch(70.5% 0 0);
+    --field-shadow: 0 0 0 0 transparent inset;
 
     /* Status Colors */
     --danger: oklch(0.7044 0.1872 23.19);

package/dist/utilities/index.css

@@ -151,3 +151,30 @@
   scrollbar-gutter: auto;
   -ms-overflow-style: none;
 }
+
+/* === Field metrics === */
+/*
+ * One line of a field, at each size. The size scale is the control scale: 32px, 36px, 40px, the
+ * same three heights a button stands at, so a field and a button of the same size line up.
+ *
+ * The padding is what carries it rather than a height, because a field is content-driven - some
+ * shells grow (a group around a textarea, a multi-select trigger wrapping its chips) and a height
+ * would fight them. The shell states its own floor: `min-h-8` / `min-h-9` / `min-h-10` where it may
+ * grow, `h-8` / `h-9` / `h-10` where it may not.
+ *
+ * The padding also changes at `sm` where the type does. 16px type below that breakpoint is what
+ * stops mobile Safari zooming the page on focus, and 16px sets a 24px line where 14px sets a 20px
+ * one - so the padding gives back the 4px difference and the height comes out the same either way.
+ * `lg` keeps 16px throughout, as the large button does.
+ */
+@utility field-line-sm {
+  @apply py-1 text-base sm:py-1.5 sm:text-sm;
+}
+
+@utility field-line-md {
+  @apply py-1.5 text-base sm:py-2 sm:text-sm;
+}
+
+@utility field-line-lg {
+  @apply py-2 text-base;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ropav/styles",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Ropav core styles - framework-agnostic CSS and Tailwind variants",
   "keywords": [
     "css",