@ropav/styles 0.5.0 → 0.6.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/package.json

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

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";

package/src/components/progress-bar/progress-bar.styles.ts

@@ -5,6 +5,8 @@ import { tv } from "tailwind-variants";
 export const progressBarVariants = tv({
   defaultVariants: {
     color: "accent",
+    isAnimated: false,
+    isStriped: false,
     size: "md",
   },
   slots: {
@@ -31,6 +33,18 @@ export const progressBarVariants = tv({
         base: "progress-bar--warning",
       },
     },
+    isAnimated: {
+      false: {},
+      true: {
+        base: "progress-bar--animated",
+      },
+    },
+    isStriped: {
+      false: {},
+      true: {
+        base: "progress-bar--striped",
+      },
+    },
     size: {
       lg: {
         base: "progress-bar--lg",

package/src/components/sidebar/sidebar.styles.ts

@@ -16,6 +16,7 @@ export const sidebarVariants = tv({
   defaultVariants: {
     collapsible: "icon",
     side: "left",
+    variant: "sidebar",
   },
   slots: {
     base: "sidebar",
@@ -88,6 +89,28 @@ export const sidebarVariants = tv({
         panel: "sidebar__panel--right",
       },
     },
+    /*
+     * How much chrome the shell paints. Each slot's modifier is named for what that slot does
+     * rather than for the value, the way `inDrawer` becomes `--drawer` and `isSub` becomes
+     * `--sub`: `inset` is already a slot, so echoing the value would read `sidebar__inset--inset`,
+     * and `sidebar__panel--inset` would be false besides — under it the panel is the bare one and
+     * the inset is the card.
+     *
+     * `sidebar` emits nothing, because the base rules already are that look. A modifier saying so
+     * would be an empty rule restating the block above it.
+     */
+    variant: {
+      floating: {
+        panel: "sidebar__panel--floating",
+        rail: "sidebar__rail--quiet",
+      },
+      inset: {
+        inset: "sidebar__inset--card",
+        panel: "sidebar__panel--bare",
+        rail: "sidebar__rail--quiet",
+      },
+      sidebar: {},
+    },
   },
 });