@ropav/styles 0.4.0 → 0.6.0

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);
@@ -108,10 +112,10 @@
     --segment-foreground: oklch(21.03% 0.0015 155);
 
     /* Borders and separators */
-    --border: oklch(90% 0.0015 155);
+    --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 155);
+    --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="mint"].dark,
@@ -184,6 +189,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);
@@ -211,10 +217,10 @@
     --segment-foreground: oklch(99.11% 0.0015 155);
 
     /* Borders and separators */
-    --border: oklch(28% 0.0015 155);
+    --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 155);
+    --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/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);
@@ -108,10 +112,10 @@
     --segment-foreground: oklch(21.03% 0 27.99);
 
     /* Borders and separators */
-    --border: oklch(90% 0 27.99);
+    --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 27.99);
+    --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="netflix"].dark,
@@ -184,6 +189,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);
@@ -211,10 +217,10 @@
     --segment-foreground: oklch(99.11% 0 27.99);
 
     /* Borders and separators */
-    --border: oklch(28% 0 27.99);
+    --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 27.99);
+    --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/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);
@@ -108,10 +112,10 @@
     --segment-foreground: oklch(21.03% 0.01 36.66);
 
     /* Borders and separators */
-    --border: oklch(90% 0.01 36.66);
+    --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 36.66);
+    --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="rabbit"].dark,
@@ -184,6 +189,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);
@@ -211,10 +217,10 @@
     --segment-foreground: oklch(99.11% 0.01 36.66);
 
     /* Borders and separators */
-    --border: oklch(28% 0.01 36.66);
+    --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 36.66);
+    --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/shared/theme.css

@@ -5,6 +5,7 @@
   --color-surface: var(--surface);
   --color-surface-foreground: var(--surface-foreground);
   --color-surface-hover: var(--surface-hover);
+  --color-state-layer: var(--state-layer);
 
   --color-surface-secondary: var(--surface-secondary);
   --color-surface-secondary-foreground: var(--surface-secondary-foreground);
@@ -52,7 +53,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 +101,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 +117,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);
@@ -108,10 +112,10 @@
     --segment-foreground: oklch(21.03% 0.0015 225);
 
     /* Borders and separators */
-    --border: oklch(90% 0.0015 225);
+    --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 225);
+    --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="sky"].dark,
@@ -184,6 +189,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);
@@ -211,10 +217,10 @@
     --segment-foreground: oklch(99.11% 0.0015 225);
 
     /* Borders and separators */
-    --border: oklch(28% 0.0015 225);
+    --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 225);
+    --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/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);
@@ -108,10 +112,10 @@
     --segment-foreground: oklch(21.03% 0.002 148.67);
 
     /* Borders and separators */
-    --border: oklch(90% 0.002 148.67);
+    --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 148.67);
+    --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="spotify"].dark,
@@ -184,6 +189,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);
@@ -211,10 +217,10 @@
     --segment-foreground: oklch(99.11% 0.002 148.67);
 
     /* Borders and separators */
-    --border: oklch(28% 0.002 148.67);
+    --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 148.67);
+    --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/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);
@@ -108,10 +112,10 @@
     --segment-foreground: oklch(21.03% 0 0);
 
     /* Borders and separators */
-    --border: oklch(90% 0 0);
+    --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 0);
+    --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="uber"].dark,
@@ -184,6 +189,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);
@@ -211,10 +217,10 @@
     --segment-foreground: oklch(99.11% 0 0);
 
     /* Borders and separators */
-    --border: oklch(28% 0 0);
+    --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 0);
+    --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/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.6.0",
   "description": "Ropav core styles - framework-agnostic CSS and Tailwind variants",
   "keywords": [
     "css",

package/src/components/autocomplete/autocomplete.styles.ts

@@ -5,6 +5,7 @@ import { tv } from "tailwind-variants";
 export const autocompleteVariants = tv({
   defaultVariants: {
     fullWidth: false,
+    size: "md",
     variant: "primary",
   },
   slots: {
@@ -24,6 +25,17 @@ export const autocompleteVariants = tv({
         trigger: "autocomplete__trigger--full-width",
       },
     },
+    size: {
+      lg: {
+        base: "autocomplete--lg",
+        popover: "autocomplete__popover--lg",
+      },
+      md: {},
+      sm: {
+        base: "autocomplete--sm",
+        popover: "autocomplete__popover--sm",
+      },
+    },
     variant: {
       primary: {
         base: "autocomplete--primary",

package/src/components/color-input-group/color-input-group.styles.ts

@@ -5,6 +5,7 @@ import { tv } from "tailwind-variants";
 export const colorInputGroupVariants = tv({
   defaultVariants: {
     fullWidth: false,
+    size: "md",
     variant: "primary",
   },
   slots: {
@@ -20,6 +21,15 @@ export const colorInputGroupVariants = tv({
         base: "color-input-group--full-width",
       },
     },
+    size: {
+      lg: {
+        base: "color-input-group--lg",
+      },
+      md: {},
+      sm: {
+        base: "color-input-group--sm",
+      },
+    },
     variant: {
       primary: {
         base: "color-input-group--primary",

package/src/components/combo-box/combo-box.styles.ts

@@ -5,6 +5,7 @@ import { tv } from "tailwind-variants";
 export const comboBoxVariants = tv({
   defaultVariants: {
     fullWidth: false,
+    size: "md",
   },
   slots: {
     base: "combo-box",
@@ -21,6 +22,17 @@ export const comboBoxVariants = tv({
         inputGroup: "combo-box__input-group--full-width",
       },
     },
+    /* The field itself is the `Input` inside, which takes its own size class from the context the
+     * root provides. Only the popover is left, and it is teleported out of this tree. */
+    size: {
+      lg: {
+        popover: "combo-box__popover--lg",
+      },
+      md: {},
+      sm: {
+        popover: "combo-box__popover--sm",
+      },
+    },
   },
 });
 

package/src/components/date-input-group/date-input-group.styles.ts

@@ -5,6 +5,7 @@ import { tv } from "tailwind-variants";
 export const dateInputGroupVariants = tv({
   defaultVariants: {
     fullWidth: false,
+    size: "md",
     variant: "primary",
   },
   slots: {
@@ -22,6 +23,15 @@ export const dateInputGroupVariants = tv({
         base: "date-input-group--full-width",
       },
     },
+    size: {
+      lg: {
+        base: "date-input-group--lg",
+      },
+      md: {},
+      sm: {
+        base: "date-input-group--sm",
+      },
+    },
     variant: {
       primary: {
         base: "date-input-group--primary",

package/src/components/drop-zone/drop-zone.styles.ts

@@ -0,0 +1,12 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const dropZoneVariants = tv({
+  slots: {
+    base: "drop-zone",
+    trigger: "drop-zone__trigger",
+  },
+});
+
+export type DropZoneVariants = VariantProps<typeof dropZoneVariants>;

package/src/components/drop-zone/index.ts

@@ -0,0 +1 @@
+export * from "./drop-zone.styles";

package/src/components/index.ts

@@ -32,6 +32,7 @@ export * from "./description";
 export * from "./drawer";
 export * from "./disclosure";
 export * from "./disclosure-group";
+export * from "./drop-zone";
 export * from "./dropdown";
 export * from "./empty-state";
 export * from "./error-message";
@@ -61,11 +62,14 @@ export * from "./radio";
 export * from "./radio-group";
 export * from "./scroll-shadow";
 export * from "./search-field";
+export * from "./segmented-control";
 export * from "./select";
 export * from "./separator";
+export * from "./sidebar";
 export * from "./skeleton";
 export * from "./slider";
 export * from "./spinner";
+export * from "./splitter";
 export * from "./surface";
 export * from "./switch";
 export * from "./switch-group";
@@ -82,3 +86,4 @@ export * from "./toggle-button";
 export * from "./toggle-button-group";
 export * from "./toolbar";
 export * from "./tooltip";
+export * from "./virtualizer";

package/src/components/input/input.styles.ts

@@ -6,6 +6,7 @@ export const inputVariants = tv({
   base: "input",
   defaultVariants: {
     fullWidth: false,
+    size: "md",
     variant: "primary",
   },
   variants: {
@@ -13,6 +14,11 @@ export const inputVariants = tv({
       false: "",
       true: "input--full-width",
     },
+    size: {
+      lg: "input--lg",
+      md: "",
+      sm: "input--sm",
+    },
     variant: {
       primary: "input--primary",
       secondary: "input--secondary",