@ropav/styles 0.4.0 → 0.6.0

package/README.md

@@ -112,6 +112,11 @@ component that publishes it as an attribute.
 
 `components/button.css` is the densest example of both — read it before writing a new component file.
 
+**Every `ropav` component takes a `class` prop**, merged through its `tv()` recipe rather than
+concatenated, so a utility that conflicts with one the recipe already carries replaces it. That is
+the first thing to reach for. It cannot reach a part drawn in `::before`/`::after`, and it flattens
+every state of whatever property it sets — see [State colors](#state-colors) for the way round both.
+
 ## Theming
 
 Two independent axes. `data-theme` picks the palette, a `light`/`dark` class picks the appearance:
@@ -126,8 +131,9 @@ did before the other themes existed.
 
 ### Bundled themes
 
-Eleven, ported from HeroUI's theme gallery. The default one is already in `@ropav/styles`; the rest are
-opt-in, one file each:
+The default one, plus a theme per brand ported from HeroUI's gallery — `hero` among them, being
+HeroUI's own palette. The default is already in `@ropav/styles`; the others are opt-in, one file
+each:
 
 ```css
 @import "@ropav/styles";
@@ -136,10 +142,10 @@ opt-in, one file each:
 
 | `data-theme` | | `data-theme` | | `data-theme` |
 | --- | --- | --- | --- | --- |
-| `default` | | `netflix` | | `airbnb` |
+| `default` | | `mint` | | `coinbase` |
+| `hero` | | `netflix` | | `airbnb` |
 | `sky` | | `uber` | | `discord` |
 | `lavender` | | `spotify` | | `rabbit` |
-| `mint` | | `coinbase` | | |
 
 Each carries both a light and a dark palette, so a theme is a brand rather than an appearance. There is
 no `netflix-dark` — it is `data-theme="netflix"` plus `class="dark"`.
@@ -147,11 +153,15 @@ no `netflix-dark` — it is `data-theme="netflix"` plus `class="dark"`.
 `themes/all.css` pulls in all of them at once. That is for docs and playgrounds; an app should import
 only the themes it actually offers, since each is around 10 kB before compression.
 
-The ten non-default themes are **generated** — edit `scripts/themes/presets.ts` and run
+Every theme but `default` and `hero` is **generated** — edit `scripts/themes/presets.ts` and run
 `pnpm generate:themes`, never the CSS. A preset is four numbers (accent lightness, chroma and hue, plus
 the chroma of the neutral ramp), a radius pair, and any exact brand colours that should beat the
 calculated ones.
 
+Those two stay hand-written, each file's header saying what the generator cannot reproduce about it.
+Their presets carry the label and the presentation order; the CSS is the source of truth for their
+tokens.
+
 ### Retheming
 
 Every token is a CSS custom property, so overriding them in your own stylesheet is enough — no rebuild
@@ -198,6 +208,80 @@ scrollbar set, and shadows.
 stale the moment a token moves. `themes/shared/theme.css` holds what is derived from those tokens: the
 `--radius-xs` … `--radius-4xl` scale and the easing curves.
 
+### State colors
+
+A component's own properties are the third tier, declared on its block and private to its file —
+`--button-bg`, `--switch-control-bg-checked-hover`, `--sidebar-rail-line`. The convention:
+
+> **A color a state rule paints goes through a custom property — where more than one state paints
+> that property.**
+
+That is what makes one state retunable on its own. A color written straight into the rule is not:
+the resting and the lit value are the same property on the same element, so the one declaration a
+caller writes to change either beats every state rule at once — and a utility beats them all
+whatever their specificity, `utilities` being a later layer than `components`. The only way left is
+to restate the whole state set behind `:not()`, which drifts silently the day a state is added.
+
+So a caller sets the property instead, and the states that read the others are left standing:
+
+```html
+<!-- No line at rest; it still flares on hover and while dragging. -->
+<SidebarRoot class="[--sidebar-rail-line:transparent]">
+```
+
+The qualifier is what keeps this from becoming surface for its own sake. Where exactly one state
+paints a property, a caller can name that state from the call site — `hover:bg-*`, `focus-visible:outline-*` —
+and there is no other state for it to flatten, so no property is minted. It is the second state
+painting the same thing that makes the call site unable to tell them apart.
+
+Defaults chain, so retuning one carries the states below it unless they are set too —
+`--sidebar-rail-line-dragging` follows `--sidebar-rail-line-hover`, the way `--button-bg-pressed`
+follows `--button-bg-hover`. Read `components/button.css` for the shape and
+`components/sidebar.css` for a part painted on a pseudo-element, which a class cannot reach at all.
+
+Two limits. The properties are per component and resolve to the tokens above, so a palette change
+belongs in a theme rather than here. And Forced Colors Mode is not covered: those blocks paint the
+system keywords, which are the only colors exempt from the override and not a component's to
+retune — `[--sidebar-rail-line:transparent]` leaves the line drawn under High Contrast, on purpose.
+
+`state-colors.test.ts` in the `ropav` package reads every component file and fails on a state color
+that does not go through a property. Its ledger of exceptions is currently empty, so an entry
+appearing there is debt to pay down rather than a licence to add more.
+
+### Translucent surfaces
+
+A `surface--transparent` paints nothing of its own, and so does a surface a caller has thinned to
+let something through — a blurred header, a panel over an image, a window whose material the OS
+draws. What sits on one of those has no way to know what is behind it, and that splits the palette
+in two.
+
+**Safe on anything: the tokens that are an alpha.** `--state-layer` is what a state paints, and
+`--separator` and `--border` are the lines — each an alpha of `--surface-foreground` rather than a
+neutral of its own. An alpha darkens or lightens whatever it lands on, so it holds its contrast
+against a fill it was never tuned for: another surface, the far half of the theme, or a photograph.
+The `-soft` family and `--scrollbar-thumb` are alphas too, which is why a selection is
+`--accent-soft` wherever the library marks one.
+
+**Not safe: the fills.** `--default`, `--accent`, the status colors, `--surface` and its secondary
+and tertiary steps are opaque, and they are meant to be — a badge you can read the page through is a
+broken badge. They assume a background because they *are* one. Use them to fill a box, never to mark
+a state on a box that is already transparent.
+
+`--surface-hover` sits on the fill side of that line despite the name: it is a surface that has been
+tinted and stays opaque, for a component opaque at rest whose hover must stay that way.
+`--state-layer` is the one for a component transparent at rest. Reaching for the wrong one fails
+quietly — a translucent hover on an opaque tag shows the page through it, and a flat neutral on a
+transparent row vanishes the moment the fill behind it matches.
+
+The line between the two is what a color is for, not what it looks like. `--default` is a fine grey
+until it is asked to be a state layer: then it is a fixed lightness laid on an unknown one, and the
+day those two match it is gone with nothing to fail but the eye.
+
+**Contrast on a translucent surface is the app's to guarantee.** `contrast.browser.test.ts` holds
+the floor for text on the fills, where both sides are known. Once the background is whatever happens
+to be behind the window, ropav cannot see it and does not claim to — an app that thins a surface
+owns the legibility of what it puts there.
+
 ### Reduced motion
 
 `data-reduce-motion="true"` on any ancestor forces animations off, `"false"` forces them on regardless

package/dist/components/accordion.css

@@ -59,10 +59,6 @@
   /* Base Styles */
   @apply flex flex-1 items-center justify-between px-4 py-4 text-start text-sm font-medium no-highlight;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     opacity 150ms var(--ease-out),
     box-shadow 150ms var(--ease-out);
@@ -98,10 +94,6 @@
   height: var(--disclosure-panel-height);
   overflow: clip;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     height 200ms var(--ease-out-quad),
     opacity 200ms var(--ease-out);
@@ -116,7 +108,7 @@
 /* Surface variant */
 .accordion--surface {
   @apply bg-surface;
-  border-radius: min(32px, var(--radius-3xl));
+  border-radius: min(32px, var(--component-radius));
 
   /* Forced Colors Mode flattens the fill onto the page and strips the shadow, so the container
    * stops having any shape and its contents sit loose on the page. */
@@ -129,7 +121,7 @@
     @media (hover: hover) {
       &:hover:not([aria-expanded="true"]),
       &[data-hovered="true"]:not([aria-expanded="true"]) {
-        @apply bg-default;
+        @apply bg-state-layer;
       }
     }
   }
@@ -147,13 +139,13 @@
 
   /* Special rounding for first and last items in surface variant */
   &:first-child [data-slot="accordion-trigger"] {
-    border-start-start-radius: min(32px, var(--radius-3xl));
-    border-start-end-radius: min(32px, var(--radius-3xl));
+    border-start-start-radius: min(32px, var(--component-radius));
+    border-start-end-radius: min(32px, var(--component-radius));
   }
 
   &:last-child:not(:has([data-slot="accordion-trigger"][aria-expanded="true"]))
     [data-slot="accordion-trigger"] {
-    border-end-start-radius: min(32px, var(--radius-3xl));
-    border-end-end-radius: min(32px, var(--radius-3xl));
+    border-end-start-radius: min(32px, var(--component-radius));
+    border-end-end-radius: min(32px, var(--component-radius));
   }
 }

package/dist/components/alert-dialog.css

@@ -10,10 +10,6 @@
   @apply inline-block;
   @apply cursor-(--cursor-interactive);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     transform 250ms var(--ease-out-quart),
     background-color 150ms var(--ease-smooth),
@@ -57,10 +53,6 @@
     @apply animate-out duration-100 ease-out fade-out-0;
   }
 
-  /**
-   * Reduce Animation
-   * CRITICAL: motion-reduce must be AFTER animate for correct override specificity
-   */
   &[data-exiting="true"],
   &[data-entering="true"] {
     @apply will-change-[opacity];
@@ -126,10 +118,6 @@
     @apply animate-out duration-100 ease-out-quad fade-out-0 zoom-out-95;
   }
 
-  /**
-   * Reduce Animation
-   * CRITICAL: motion-reduce must be AFTER animate for correct override specificity
-   */
   &[data-exiting="true"],
   &[data-entering="true"] {
     @apply will-change-[opacity,transform];
@@ -145,7 +133,7 @@
   @apply flex min-h-0 w-full flex-col;
   @apply max-h-full;
   @apply bg-overlay shadow-overlay outline-none;
-  border-radius: min(32px, var(--radius-3xl));
+  border-radius: min(32px, var(--component-radius));
   @apply p-6;
   @apply overflow-clip;
   @apply pointer-events-auto;

package/dist/components/alert.css

@@ -11,7 +11,7 @@
     outline: 1px solid CanvasText;
     outline-offset: -1px;
   }
-  border-radius: min(32px, var(--radius-3xl));
+  border-radius: min(32px, var(--component-radius));
 }
 
 /* Alert elements */

package/dist/components/autocomplete/autocomplete.styles.d.ts

@@ -7,6 +7,17 @@ export declare const autocompleteVariants: import("tailwind-variants").TVReturnT
             trigger: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+            popover: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+            popover: string;
+        };
+    };
     variant: {
         primary: {
             base: string;
@@ -31,6 +42,17 @@ export declare const autocompleteVariants: import("tailwind-variants").TVReturnT
             trigger: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+            popover: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+            popover: string;
+        };
+    };
     variant: {
         primary: {
             base: string;
@@ -55,6 +77,17 @@ export declare const autocompleteVariants: import("tailwind-variants").TVReturnT
             trigger: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+            popover: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+            popover: string;
+        };
+    };
     variant: {
         primary: {
             base: string;

package/dist/components/autocomplete/autocomplete.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.styles.d.ts","sourceRoot":"","sources":["../../../src/components/autocomplete/autocomplete.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,oBAAoB;;QAgB3B,KAAK;QACL,IAAI;YACF,IAAI;YACJ,OAAO;;;;QAIT,OAAO;YACL,IAAI;;QAEN,SAAS;YACP,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC"}
+{"version":3,"file":"autocomplete.styles.d.ts","sourceRoot":"","sources":["../../../src/components/autocomplete/autocomplete.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,oBAAoB;;QAiB3B,KAAK;QACL,IAAI;YACF,IAAI;YACJ,OAAO;;;;QAIT,EAAE;YACA,IAAI;YACJ,OAAO;;QAET,EAAE;QACF,EAAE;YACA,IAAI;YACJ,OAAO;;;;QAIT,OAAO;YACL,IAAI;;QAEN,SAAS;YACP,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC"}

package/dist/components/autocomplete/autocomplete.styles.js

@@ -3,6 +3,7 @@ import { tv } from "tailwind-variants";
 const autocompleteVariants = tv({
 	defaultVariants: {
 		fullWidth: false,
+		size: "md",
 		variant: "primary"
 	},
 	slots: {
@@ -22,6 +23,17 @@ 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" },
 			secondary: { base: "autocomplete--secondary" }

package/dist/components/autocomplete.css

@@ -4,7 +4,14 @@
 }
 
 .autocomplete__trigger {
-  @apply relative isolate inline-flex min-h-9 rounded-field border bg-field px-3 py-2 text-sm text-field-foreground shadow-field outline-none select-none no-highlight;
+  @apply relative isolate inline-flex min-h-9 rounded-field border px-3 field-line-md text-field-foreground shadow-field outline-none select-none no-highlight;
+
+  /* The fill, per state. The `--secondary` variant re-points these and declares nothing else. */
+  --autocomplete-trigger-bg: var(--field-background, var(--default));
+  --autocomplete-trigger-bg-hover: var(--field-hover);
+  --autocomplete-trigger-bg-focus: var(--field-focus);
+
+  background-color: var(--autocomplete-trigger-bg);
 
   /* Forced Colors Mode flattens the fill onto the page and strips the shadow, leaving a control
    * with nothing to say it is one. `ButtonBorder` is the keyword the platform uses for a
@@ -14,10 +21,6 @@
     outline-offset: -1px;
   }
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     background-color 150ms var(--ease-smooth),
     border-color 150ms var(--ease-smooth),
@@ -39,7 +42,7 @@
   @media (hover: hover) {
     &:hover:not(:has(.autocomplete__clear-button:hover)),
     &[data-hovered="true"]:not(:has(.autocomplete__clear-button:hover)) {
-      @apply bg-field-hover;
+      background-color: var(--autocomplete-trigger-bg-hover);
       border-color: var(--field-border-hover);
     }
   }
@@ -49,7 +52,7 @@
   &[data-focus-visible="true"] {
     @apply status-focused;
     border-color: var(--field-border-focus);
-    background-color: var(--field-focus);
+    background-color: var(--autocomplete-trigger-bg-focus);
   }
 
   /* Focus state */
@@ -61,7 +64,7 @@
   .autocomplete[data-invalid="true"] &,
   .autocomplete[aria-invalid="true"] & {
     @apply status-invalid-field;
-    background-color: var(--field-focus);
+    background-color: var(--autocomplete-trigger-bg-focus);
   }
 
   /* Disabled state */
@@ -79,40 +82,22 @@
 
 .autocomplete--secondary .autocomplete__trigger {
   @apply shadow-none;
-  background-color: var(--autocomplete-trigger-bg);
 
   --autocomplete-trigger-bg: var(--default);
   --autocomplete-trigger-bg-hover: var(--default-hover);
   --autocomplete-trigger-bg-focus: var(--default);
-
-  /* Exclude when clear button is hovered to prevent double hover effect */
-  @media (hover: hover) {
-    &:hover:not(:has(.autocomplete__clear-button:hover)),
-    &[data-hovered="true"]:not(:has(.autocomplete__clear-button:hover)) {
-      background-color: var(--autocomplete-trigger-bg-hover);
-    }
-  }
-
-  &:focus-visible:not(:focus),
-  &[data-focus-visible="true"] {
-    background-color: var(--autocomplete-trigger-bg-focus);
-  }
-
-  &:focus,
-  &[data-focus="true"] {
-  }
-
-  .autocomplete[data-invalid="true"] &,
-  .autocomplete[aria-invalid="true"] & {
-    background-color: var(--autocomplete-trigger-bg-focus);
-  }
 }
 
 .autocomplete__value {
-  @apply flex-1 text-start text-base wrap-break-word text-current sm:text-sm;
+  @apply flex-1 text-start wrap-break-word;
+
+  --autocomplete-value-fg: currentcolor;
+  --autocomplete-value-fg-placeholder: var(--field-placeholder, var(--muted));
+
+  color: var(--autocomplete-value-fg);
 
   &[data-placeholder="true"] {
-    @apply text-field-placeholder;
+    color: var(--autocomplete-value-fg-placeholder);
   }
 
   /* Removes the list-box-item indicator element from the autocomplete value*/
@@ -139,7 +124,7 @@
 /* Similar to popover content styles */
 .autocomplete__popover {
   @apply flex w-(--trigger-width) max-w-(--trigger-width) origin-(--trigger-anchor-point) scroll-py-1 flex-col overflow-hidden overscroll-contain bg-overlay p-0 pt-2 text-sm outline-none;
-  border-radius: min(32px, var(--radius-3xl));
+  border-radius: min(32px, var(--component-radius));
   box-shadow: var(--shadow-overlay);
 
   &:focus,
@@ -252,7 +237,12 @@
 /* Clear Button styles */
 .autocomplete__clear-button {
   @apply relative isolate inline-flex h-6 w-6 shrink-0 origin-center items-center justify-center rounded-xl p-1 text-muted select-none no-highlight;
-  @apply me-0 size-5 shrink-0 self-center bg-transparent;
+  @apply me-0 size-5 shrink-0 self-center;
+
+  --autocomplete-clear-button-bg: transparent;
+  --autocomplete-clear-button-bg-hover: var(--default-hover);
+
+  background-color: var(--autocomplete-clear-button-bg);
 
   /* Cursor */
   cursor: var(--cursor-interactive);
@@ -280,7 +270,7 @@
   @media (hover: hover) {
     &:hover,
     &[data-hovered="true"] {
-      @apply bg-default-hover;
+      background-color: var(--autocomplete-clear-button-bg-hover);
     }
   }
 
@@ -289,3 +279,31 @@
     transform: scale(0.93);
   }
 }
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+/* The trigger's own metrics, and the option rows in a popover that is portalled out of this tree -
+ * which is why the popover carries its own size class rather than being reached from the base. */
+.autocomplete--sm .autocomplete__trigger {
+  @apply min-h-8 field-line-sm;
+}
+
+.autocomplete--lg .autocomplete__trigger {
+  @apply min-h-10 field-line-lg;
+}
+
+.autocomplete__popover--sm {
+  [data-slot="list-box-item"] {
+    @apply min-h-8 py-1;
+  }
+}
+
+.autocomplete__popover--lg {
+  @apply text-base;
+
+  [data-slot="list-box-item"] {
+    @apply min-h-10 py-2;
+  }
+}

package/dist/components/breadcrumbs.css

@@ -4,7 +4,12 @@
 
   /* Breadcrumb link */
   .breadcrumbs__link {
-    @apply relative px-0.5 text-sm leading-5 font-medium text-muted no-underline opacity-100;
+    @apply relative px-0.5 text-sm leading-5 font-medium no-underline opacity-100;
+
+    --breadcrumbs-link-fg: var(--muted);
+    --breadcrumbs-link-fg-current: var(--link);
+
+    color: var(--breadcrumbs-link-fg);
 
     &:hover,
     &[data-hovered="true"] {
@@ -12,7 +17,9 @@
     }
 
     &[data-current="true"] {
-      @apply text-link opacity-100;
+      @apply opacity-100;
+
+      color: var(--breadcrumbs-link-fg-current);
     }
   }
 

package/dist/components/button-group.css

@@ -26,32 +26,32 @@
 
 /* Apply border radius to first button (start edge) */
 .button-group--horizontal .button:first-child {
-  @apply rounded-s-3xl;
+  @apply rounded-s-component;
 }
 
 /* Apply border radius to last button (end edge) */
 .button-group--horizontal .button:last-child {
-  @apply rounded-e-3xl;
+  @apply rounded-e-component;
 }
 
 /* If only one button, apply both rounded edges */
 .button-group--horizontal .button:first-child:last-child {
-  @apply rounded-3xl;
+  @apply rounded-component;
 }
 
 /* Apply border radius to first button (top edge) in vertical */
 .button-group--vertical .button:first-child {
-  @apply rounded-t-3xl;
+  @apply rounded-t-component;
 }
 
 /* Apply border radius to last button (bottom edge) in vertical */
 .button-group--vertical .button:last-child {
-  @apply rounded-b-3xl;
+  @apply rounded-b-component;
 }
 
 /* If only one button in vertical, apply all rounded edges */
 .button-group--vertical .button:first-child:last-child {
-  @apply rounded-3xl;
+  @apply rounded-component;
 }
 
 /* Remove scale transform on active/pressed state for buttons in group */
@@ -75,10 +75,6 @@
   position: absolute;
   pointer-events: none;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition: opacity 150ms var(--ease-smooth);
   @apply motion-reduce:transition-none;
 

package/dist/components/button.css

@@ -2,12 +2,8 @@
 
 /* Base button styles */
 .button {
-  @apply relative isolate inline-flex h-10 w-fit origin-center items-center justify-center gap-2 rounded-3xl px-4 text-sm font-medium whitespace-nowrap outline-none select-none no-highlight md:h-9;
+  @apply relative isolate inline-flex h-9 w-fit origin-center items-center justify-center gap-2 rounded-component px-4 text-sm font-medium whitespace-nowrap outline-none select-none no-highlight;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     transform 250ms var(--ease-smooth),
     background-color 100ms var(--ease-out),
@@ -69,17 +65,13 @@
 
   /* SVG icon styling - exclude spinner and link-icon svgs */
   & svg:not([data-slot="spinner"] svg, [data-slot="link-icon"] svg) {
-    @apply pointer-events-none -mx-0.5 my-0.5 size-5 shrink-0 self-center sm:my-1 sm:size-4;
+    @apply pointer-events-none -mx-0.5 my-1 size-4 shrink-0 self-center;
   }
 }
 
 /* Size variants */
 .button--sm {
-  @apply h-9 px-3 md:h-8;
-
-  & svg:not([data-slot="spinner"] svg, [data-slot="link-icon"] svg) {
-    @apply size-4;
-  }
+  @apply h-8 px-3;
 
   &:active,
   &[data-pressed="true"] {
@@ -92,7 +84,7 @@
 }
 
 .button--lg {
-  @apply h-11 text-base md:h-10;
+  @apply h-10 text-base;
 
   &:active,
   &[data-pressed="true"] {
@@ -134,14 +126,14 @@
 .button--ghost,
 .button--outline {
   --button-bg: transparent;
-  --button-bg-hover: var(--default);
-  --button-bg-pressed: var(--default);
+  --button-bg-hover: var(--state-layer);
+  --button-bg-pressed: var(--state-layer);
   --button-fg: var(--default-foreground);
 }
 
 .button--outline {
   @apply border border-border;
-  --button-bg-hover: color-mix(in srgb, var(--default) 60%, transparent);
+  --button-bg-hover: color-mix(in oklab, var(--state-layer) 60%, transparent);
 }
 
 .button--danger {
@@ -168,15 +160,15 @@
 
 /* Icon-only modifier */
 .button--icon-only {
-  @apply w-10 p-0 md:w-9;
+  @apply w-9 p-0;
 }
 
 .button--icon-only.button--sm {
-  @apply w-9 md:w-8;
+  @apply w-8;
 }
 
 .button--icon-only.button--lg {
-  @apply w-11 md:w-10;
+  @apply w-10;
 }
 
 /* Full width modifier */