@ropav/styles 0.5.0 → 0.7.0

package/dist/themes/airbnb.css

@@ -112,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%);
 
@@ -123,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,
@@ -216,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%);
 
@@ -227,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/coinbase.css

@@ -112,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%);
 
@@ -123,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,
@@ -216,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%);
 
@@ -227,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

@@ -98,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);
 
@@ -109,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);
@@ -237,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);
 
@@ -256,6 +275,7 @@
 
     /* 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

@@ -112,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%);
 
@@ -123,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,
@@ -216,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%);
 
@@ -227,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

@@ -90,14 +90,33 @@
     --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);
+    /* 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);
@@ -198,13 +217,14 @@
     --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);
 
     /* 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/lavender.css

@@ -112,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%);
 
@@ -123,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,
@@ -216,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%);
 
@@ -227,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/mint.css

@@ -112,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%);
 
@@ -123,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,
@@ -216,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%);
 
@@ -227,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

@@ -112,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%);
 
@@ -123,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,
@@ -216,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%);
 
@@ -227,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

@@ -112,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%);
 
@@ -123,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,
@@ -216,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%);
 
@@ -227,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);

package/dist/themes/sky.css

@@ -112,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%);
 
@@ -123,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,
@@ -216,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%);
 
@@ -227,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

@@ -112,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%);
 
@@ -123,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,
@@ -216,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%);
 
@@ -227,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

@@ -112,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%);
 
@@ -123,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,
@@ -216,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%);
 
@@ -227,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.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Every bundled theme — GENERATED, do not edit by hand.
+ *
+ * Run `pnpm generate:themes` after changing `scripts/themes/presets.ts`.
+ *
+ * `themeIds` is in presentation order, which a picker should follow. `themeLabels` is keyed
+ * for the linter, so read the order from `themeIds` and the name from here.
+ */
+export declare const themeIds: readonly ["default", "hero", "sky", "lavender", "mint", "netflix", "uber", "spotify", "coinbase", "airbnb", "discord", "rabbit"];
+export type ThemeId = (typeof themeIds)[number];
+export declare const themeLabels: Record<ThemeId, string>;
+//# sourceMappingURL=themes.d.ts.map

package/dist/themes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,eAAO,MAAM,QAAQ,YACnB,SAAS,EACT,MAAM,EACN,KAAK,EACL,UAAU,EACV,MAAM,EACN,SAAS,EACT,MAAM,EACN,SAAS,EACT,UAAU,EACV,QAAQ,EACR,SAAS,EACT,QAAQ,CACA,CAAC;AAEX,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;AAEhD,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,CAa/C,CAAC"}

package/dist/themes.js

@@ -0,0 +1,39 @@
+//#region src/themes.ts
+/**
+* Every bundled theme — GENERATED, do not edit by hand.
+*
+* Run `pnpm generate:themes` after changing `scripts/themes/presets.ts`.
+*
+* `themeIds` is in presentation order, which a picker should follow. `themeLabels` is keyed
+* for the linter, so read the order from `themeIds` and the name from here.
+*/
+const themeIds = [
+	"default",
+	"hero",
+	"sky",
+	"lavender",
+	"mint",
+	"netflix",
+	"uber",
+	"spotify",
+	"coinbase",
+	"airbnb",
+	"discord",
+	"rabbit"
+];
+const themeLabels = {
+	airbnb: "Airbnb",
+	coinbase: "Coinbase",
+	default: "Default",
+	discord: "Discord",
+	hero: "Hero",
+	lavender: "Lavender",
+	mint: "Mint",
+	netflix: "Netflix",
+	rabbit: "Rabbit",
+	sky: "Sky",
+	spotify: "Spotify",
+	uber: "Uber"
+};
+//#endregion
+export { themeIds, themeLabels };

package/dist/tv.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Maps variant props onto class names.
+ *
+ * Every class a recipe emits is a BEM name, so there is nothing to deduplicate and no conflict
+ * to resolve: a caller's utility already wins on cascade order, since component rules sit in the
+ * `components` layer and utilities in the later `utilities` one. Concatenation is the whole job.
+ */
+type ClassValue = ClassValue[] | string | false | null | undefined;
+type VariantClasses = string | Record<string, string>;
+interface Config {
+    base?: string;
+    defaultVariants?: Record<string, unknown>;
+    slots?: Record<string, string>;
+    variants?: Record<string, Record<string, VariantClasses>>;
+}
+type ClassProp = {
+    class?: ClassValue;
+};
+type StringToBoolean<T> = T extends "false" | "true" ? boolean : T;
+type Selection<C> = C extends {
+    variants: infer V;
+} ? {
+    [K in keyof V]?: StringToBoolean<keyof V[K] & string>;
+} : object;
+type Recipe<C> = C extends {
+    slots: infer S;
+} ? (props?: ClassProp & Selection<C>) => {
+    [K in keyof S]: (props?: ClassProp & Selection<C>) => string;
+} : (props?: ClassProp & Selection<C>) => string;
+/** The variant props a recipe accepts, for deriving a component's own prop types. */
+export type VariantProps<T> = T extends (props?: infer P) => unknown ? Omit<NonNullable<P>, "class"> : never;
+export declare const tv: <C extends Config>(config: C) => Recipe<C>;
+export {};
+//# sourceMappingURL=tv.d.ts.map

package/dist/tv.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tv.d.ts","sourceRoot":"","sources":["../src/tv.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,KAAK,UAAU,GAAG,UAAU,EAAE,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;AAInE,KAAK,cAAc,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEtD,UAAU,MAAM;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC;CAC3D;AAED,KAAK,SAAS,GAAG;IAAE,KAAK,CAAC,EAAE,UAAU,CAAA;CAAE,CAAC;AAExC,KAAK,eAAe,CAAC,CAAC,IAAI,CAAC,SAAS,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,CAAC,CAAC;AAEnE,KAAK,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS;IAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;CAAE,GAC/C;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC;CAAE,GACzD,MAAM,CAAC;AAEX,KAAK,MAAM,CAAC,CAAC,IAAI,CAAC,SAAS;IAAE,KAAK,EAAE,MAAM,CAAC,CAAA;CAAE,GACzC,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,KAAK;KACnC,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,KAAK,MAAM;CAC7D,GACD,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC;AAEjD,qFAAqF;AACrF,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,KAAK,OAAO,GAChE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,GAC7B,KAAK,CAAC;AAKV,eAAO,MAAM,EAAE,GAAI,CAAC,SAAS,MAAM,UAAU,CAAC,KAAG,MAAM,CAAC,CAAC,CAsCxD,CAAC"}