@ropav/styles 0.5.0 → 0.6.0

package/dist/components/switch.css

@@ -22,7 +22,7 @@
     }
 
     .switch__thumb {
-      @apply bg-default-foreground/20;
+      background-color: var(--switch-thumb-bg-disabled);
 
       @media (forced-colors: active) {
         background-color: GrayText;
@@ -84,16 +84,14 @@
 /* Switch control (track) */
 .switch__control {
   /* Default size (medium) */
-  @apply relative flex shrink-0 items-center overflow-hidden rounded-xl;
+  @apply relative flex shrink-0 items-center overflow-hidden;
+
+  border-radius: min(32px, var(--component-radius));
   height: 1.25rem; /* 20px on desktop (14px base), 20px on mobile (16px base) - scales with font-size */
   width: 2.5rem; /* 35px on desktop, 40px on mobile - scales with font-size */
 
   background-color: var(--switch-control-bg);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     background-color 250ms var(--ease-smooth),
     box-shadow 150ms var(--ease-out);
@@ -167,7 +165,6 @@
 
 /* Size-specific control dimensions */
 .switch--sm .switch__control {
-  @apply rounded-lg;
   height: 1rem; /* ~14px on desktop, ~16px on mobile */
   width: 2rem; /* ~32px on desktop, ~36px on mobile */
 }
@@ -184,7 +181,15 @@
 /* Switch thumb */
 .switch__thumb {
   /* Default size (medium) with margin-based positioning */
-  @apply ms-0.5 flex origin-center rounded-lg bg-white text-black shadow-field;
+  @apply ms-0.5 flex origin-center text-black shadow-field;
+
+  border-radius: min(32px, var(--component-radius));
+
+  --switch-thumb-bg: var(--white);
+  --switch-thumb-bg-selected: var(--accent-foreground);
+  --switch-thumb-bg-disabled: color-mix(in oklab, var(--default-foreground) 20%, transparent);
+
+  background-color: var(--switch-thumb-bg);
   height: 1rem; /* ~14px on desktop, ~16px on mobile */
   width: 1.375rem; /* ~19px on desktop, ~22px on mobile */
 
@@ -195,10 +200,6 @@
     color: Canvas;
   }
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     margin 300ms var(--ease-out-fluid),
     background-color 200ms var(--ease-out);
@@ -207,7 +208,9 @@
   /* Selected/checked state - use margin instead of translate */
   .switch[aria-checked="true"] &,
   .switch[data-selected="true"] & {
-    @apply ms-[calc(100%-1.5rem)] bg-accent-foreground text-accent;
+    @apply ms-[calc(100%-1.5rem)] text-accent;
+
+    background-color: var(--switch-thumb-bg-selected);
     box-shadow:
       0px 0px 5px 0px rgb(0 0 0 / 0.02),
       0px 2px 10px 0px rgb(0 0 0 / 0.06),
@@ -226,7 +229,6 @@
 
 /* Size-specific thumb dimensions */
 .switch--sm .switch__thumb {
-  @apply rounded-md;
   height: 0.75rem; /* ~10.5px on desktop, ~12px on mobile */
   width: 1.03125rem; /* ~14.4px on desktop, ~16.5px on mobile - maintains 1.375:1 ratio */
 
@@ -238,7 +240,6 @@
 }
 
 .switch--lg .switch__thumb {
-  @apply rounded-xl;
   height: 1.25rem; /* ~17.5px on desktop, ~20px on mobile */
   width: 1.71875rem; /* ~24px on desktop, ~27.5px on mobile - maintains 1.375:1 ratio */
 

package/dist/components/table.css

@@ -24,7 +24,8 @@
 
 .table-root--primary {
   @apply bg-surface-secondary px-1 pb-1;
-  border-radius: min(32px, calc(var(--radius) * 2.5));
+
+  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. */
@@ -58,8 +59,8 @@
     th.table__column:first-child,
     [role="row"] > [role="presentation"]:first-of-type > .table__column
   ) {
-  border-start-start-radius: min(32px, var(--radius-2xl));
-  border-end-start-radius: min(32px, var(--radius-2xl));
+  border-start-start-radius: min(32px, var(--component-radius));
+  border-end-start-radius: min(32px, var(--component-radius));
 }
 
 .table-root--secondary
@@ -67,8 +68,8 @@
     th.table__column:last-child,
     [role="row"] > [role="presentation"]:last-of-type > .table__column
   ) {
-  border-start-end-radius: min(32px, var(--radius-2xl));
-  border-end-end-radius: min(32px, var(--radius-2xl));
+  border-start-end-radius: min(32px, var(--component-radius));
+  border-end-end-radius: min(32px, var(--component-radius));
 }
 
 /* Secondary: body has no shadow or rounded corners */
@@ -92,14 +93,10 @@
 /* Secondary: rows are transparent and keep bottom border on every row */
 .table-root--secondary .table__row {
   .table__cell {
-    @apply border-b border-separator-tertiary/50 bg-transparent;
-  }
+    @apply border-b border-separator-tertiary/50;
 
-  @media (hover: hover) {
-    &:hover .table__cell,
-    &[data-hovered="true"] .table__cell {
-      @apply bg-default/50;
-    }
+    --table-cell-bg: transparent;
+    --table-cell-bg-hover: color-mix(in oklab, var(--state-layer) 50%, transparent);
   }
 }
 
@@ -126,7 +123,12 @@
    Table Column (<th>)
    -------------------------------------------------------------------------- */
 .table__column {
-  @apply relative px-4 py-2.5 text-start text-xs font-medium text-muted;
+  @apply relative px-4 py-2.5 text-start text-xs font-medium;
+
+  --table-column-fg: var(--muted);
+  --table-column-fg-hover: var(--foreground);
+
+  color: var(--table-column-fg);
 
   /* Separator between columns — a short vertical line on the right edge */
   &::after {
@@ -138,6 +140,13 @@
     content: none;
   }
 
+  /* A column holding nothing but the select-all box has no heading for the line to divide from
+   * the next one, and where the end padding is collapsed it lands on the box's own edge and
+   * reads as a border the box grew. */
+  &:has(> .checkbox:only-child)::after {
+    content: none;
+  }
+
   /* Sortable columns */
   &[data-allows-sorting="true"] {
     cursor: var(--cursor-interactive);
@@ -146,7 +155,7 @@
   @media (hover: hover) {
     &[data-allows-sorting="true"]:hover,
     &[data-allows-sorting="true"][data-hovered="true"] {
-      @apply text-foreground;
+      color: var(--table-column-fg-hover);
     }
   }
 
@@ -193,16 +202,16 @@
      (border-radius on <tbody> itself has no effect).
      Logical properties so corners follow `dir` in RTL. */
   & tr:first-child td:first-child {
-    border-start-start-radius: min(32px, var(--radius-2xl));
+    border-start-start-radius: min(32px, var(--component-radius));
   }
   & tr:first-child td:last-child {
-    border-start-end-radius: min(32px, var(--radius-2xl));
+    border-start-end-radius: min(32px, var(--component-radius));
   }
   & tr:last-child td:first-child {
-    border-end-start-radius: min(32px, var(--radius-2xl));
+    border-end-start-radius: min(32px, var(--component-radius));
   }
   & tr:last-child td:last-child {
-    border-end-end-radius: min(32px, var(--radius-2xl));
+    border-end-end-radius: min(32px, var(--component-radius));
   }
 
   /* Virtualized: elements are divs, not tr/td, and only a window of the rows
@@ -210,7 +219,7 @@
      than the table's. Round the body itself and clip overflow instead. */
   &:not(tbody) {
     @apply relative h-full overflow-clip;
-    border-radius: min(32px, var(--radius-2xl));
+    border-radius: min(32px, var(--component-radius));
   }
 }
 
@@ -232,16 +241,26 @@
   @media (hover: hover) {
     &:hover .table__cell,
     &[data-hovered="true"] .table__cell {
-      @apply bg-surface/40;
+      background-color: var(--table-cell-bg-hover);
     }
   }
 
   /* Selected state */
   &[data-selected="true"] .table__cell {
-    @apply bg-surface/10;
+    background-color: var(--table-cell-bg-selected);
+
     @apply forced-selected;
   }
 
+  /* A selected row still answers the pointer. Without this the rule above swallows the hover -
+   * it is later and equally specific, so the row that is both reads as merely selected. */
+  @media (hover: hover) {
+    &[data-selected="true"]:hover .table__cell,
+    &[data-selected="true"][data-hovered="true"] .table__cell {
+      background-color: var(--table-cell-bg-selected-hover);
+    }
+  }
+
   /* Disabled state */
   &[aria-disabled="true"],
   &[data-disabled="true"] {
@@ -261,7 +280,7 @@
 
   /* Drop target state */
   &[data-drop-target="true"] .table__cell {
-    @apply bg-accent-soft;
+    background-color: var(--table-cell-bg-drop-target);
   }
 }
 
@@ -269,7 +288,17 @@
    Table Cell (<td>)
    -------------------------------------------------------------------------- */
 .table__cell {
-  @apply h-full bg-surface px-4 py-3 align-middle text-sm text-foreground;
+  @apply h-full px-4 py-3 align-middle text-sm text-foreground;
+
+  /* The row's fill, per state, declared on the cell because that is what paints — Firefox clips a
+   * row's own background outside the border radius. `.table-root--secondary` re-points two. */
+  --table-cell-bg: var(--surface);
+  --table-cell-bg-hover: var(--surface-hover);
+  --table-cell-bg-selected: var(--accent-soft);
+  --table-cell-bg-selected-hover: var(--accent-soft-hover);
+  --table-cell-bg-drop-target: var(--accent-soft);
+
+  background-color: var(--table-cell-bg);
 
   @apply border-b border-separator-tertiary/50;
 
@@ -354,24 +383,37 @@
    -------------------------------------------------------------------------- */
 .table__column-resizer {
   /* Match the ::after separator: absolute, right edge, short vertical line */
-  @apply absolute end-0 top-1/2 h-4 w-px -translate-y-1/2 rounded-sm bg-separator;
+  @apply absolute end-0 top-1/2 h-4 w-px -translate-y-1/2 rounded-sm;
   /* Make it interactive — wider hit area with transparent padding */
   @apply box-content translate-x-1/2 cursor-col-resize touch-none px-2;
   /* Reset appearance */
   @apply border-none bg-clip-content outline-none;
 
+  --table-resizer-bg: var(--separator);
+  --table-resizer-bg-hover: var(--accent);
+  --table-resizer-bg-resizing: var(--table-resizer-bg-hover);
+  --table-resizer-bg-focus-visible: var(--focus);
+
+  background-color: var(--table-resizer-bg);
+
   &[data-hovered="true"],
   &:hover {
-    @apply h-full w-0.5 bg-accent;
+    @apply h-full w-0.5;
+
+    background-color: var(--table-resizer-bg-hover);
   }
 
   &[data-resizing="true"] {
-    @apply h-full w-0.5 bg-accent;
+    @apply h-full w-0.5;
+
+    background-color: var(--table-resizer-bg-resizing);
   }
 
   &[data-focus-visible="true"],
   &:focus-visible {
-    @apply h-full w-0.5 bg-focus;
+    @apply h-full w-0.5;
+
+    background-color: var(--table-resizer-bg-focus-visible);
   }
 }
 

package/dist/components/tabs.css

@@ -16,7 +16,7 @@
 .tabs__list-container {
   @apply relative bg-default;
 
-  border-radius: calc(var(--radius) * 2.5);
+  border-radius: min(32px, var(--component-radius));
 
   /* Vertical scroller fills the container height so overflow detection
      engages when the wrapper height is constrained (e.g. h-[240px]) */
@@ -29,10 +29,6 @@
   > .tabs__list-container__scroll-next {
     @apply absolute z-2 hidden size-4 cursor-(--cursor-interactive) items-center justify-center rounded-full border-0 bg-transparent p-0 text-foreground outline-none;
 
-    /**
-    * Transitions
-    * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-    */
     transition: opacity 150ms var(--ease-smooth);
     @apply motion-reduce:transition-none;
 
@@ -121,15 +117,16 @@
 
 /* Individual tab */
 .tabs__tab {
-  @apply relative flex h-8 w-full items-center justify-center rounded-component px-4 text-center text-sm font-medium text-muted outline-none no-highlight;
+  @apply relative flex h-8 w-full items-center justify-center rounded-component px-4 text-center text-sm font-medium outline-none no-highlight;
+
+  --tabs-tab-fg: var(--muted);
+  --tabs-tab-fg-selected: var(--segment-foreground);
+
+  color: var(--tabs-tab-fg);
 
   z-index: 1;
   cursor: var(--cursor-interactive);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     color 150ms var(--ease-smooth),
     background-color 150ms var(--ease-smooth),
@@ -139,7 +136,7 @@
 
   /* Selected state */
   &[data-selected="true"] {
-    @apply text-segment-foreground;
+    color: var(--tabs-tab-fg-selected);
 
     /* Sits on top of the indicator, which forced colors paints `Highlight`. `forced-color-adjust`
      * suppresses the `Canvas` backplate Chromium would otherwise paint behind this label - it
@@ -182,10 +179,6 @@
 .tabs__separator {
   @apply pointer-events-none absolute rounded-sm bg-muted/25;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition: opacity 150ms var(--ease-smooth);
   @apply motion-reduce:transition-none;
 
@@ -232,10 +225,6 @@
     background-color: Highlight;
   }
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition-duration: 250ms;
   transition-property: translate, width, height;
   transition-timing-function: var(--ease-out-fluid);

package/dist/components/tag.css

@@ -2,12 +2,21 @@
 .tag {
   --optical-offset: 0.031em;
 
-  @apply relative inline-flex items-center gap-1 rounded-xl font-medium select-none no-highlight;
+  @apply relative inline-flex items-center gap-1 font-medium select-none no-highlight;
+
+  border-radius: min(32px, var(--component-radius));
+
+  /* The fill and label, per state. The variants re-point these and declare nothing else. */
+  --tag-bg: transparent;
+  --tag-bg-hover: var(--tag-bg);
+  --tag-bg-selected: var(--accent-soft);
+  --tag-bg-selected-hover: var(--accent-soft-hover);
+  --tag-fg: currentcolor;
+  --tag-fg-selected: var(--accent-soft-foreground);
+
+  background-color: var(--tag-bg);
+  color: var(--tag-fg);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     color 100ms var(--ease-smooth),
     scale 100ms var(--ease-smooth),
@@ -28,6 +37,13 @@
     outline-offset: -1px;
   }
 
+  /* Hover state (when not selected or disabled) */
+  @media (hover: hover) {
+    &:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) {
+      background-color: var(--tag-bg-hover);
+    }
+  }
+
   /* SVG icon styling */
   & svg {
     @apply pointer-events-none size-3 shrink-0 self-center text-current;
@@ -50,13 +66,15 @@
 
 /* Selected state */
 .tag:is([data-selected="true"], [aria-selected="true"]) {
-  @apply bg-accent-soft text-accent-soft-foreground;
+  background-color: var(--tag-bg-selected);
+  color: var(--tag-fg-selected);
+
   @apply forced-selected;
 
   /* Selected + Hover state */
   @media (hover: hover) {
     &:is(:hover, [data-hovered="true"]) {
-      @apply bg-accent-soft-hover;
+      background-color: var(--tag-bg-selected-hover);
     }
   }
 }
@@ -71,30 +89,20 @@
 }
 
 .tag--lg {
-  @apply rounded-2xl px-2.5 py-1.5 text-sm;
+  @apply px-2.5 py-1.5 text-sm;
 }
 
 /* Variant */
 .tag--default {
-  @apply bg-default text-default-foreground;
-
-  /* Hover state (when not selected or disabled) */
-  @media (hover: hover) {
-    &:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) {
-      @apply bg-default-hover;
-    }
-  }
+  --tag-bg: var(--default);
+  --tag-bg-hover: var(--default-hover);
+  --tag-fg: var(--default-foreground);
 }
 
 .tag--surface {
-  @apply bg-surface text-surface-foreground;
-
-  /* Hover state (when not selected or disabled) */
-  @media (hover: hover) {
-    &:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) {
-      @apply bg-surface-hover;
-    }
-  }
+  --tag-bg: var(--surface);
+  --tag-bg-hover: var(--surface-hover);
+  --tag-fg: var(--surface-foreground);
 }
 
 /* Remove Button  */

package/dist/components/textarea.css

@@ -1,6 +1,13 @@
 /* use textarea instead of text-area to avoid conflict with Tailwind `text-` prefix */
 .textarea {
-  @apply rounded-field border bg-field px-3 field-line-md text-field-foreground shadow-field outline-none placeholder:text-field-placeholder;
+  @apply rounded-field border px-3 field-line-md text-field-foreground shadow-field outline-none placeholder:text-field-placeholder;
+
+  /* The fill, per state. The `--secondary` variant re-points these and declares nothing else. */
+  --textarea-bg: var(--field-background, var(--default));
+  --textarea-bg-hover: var(--field-hover);
+  --textarea-bg-focus: var(--field-focus);
+
+  background-color: var(--textarea-bg);
 
   min-height: 38px;
 
@@ -17,10 +24,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),
@@ -30,7 +33,7 @@
   @media (hover: hover) {
     &:hover:not(:focus):not(:focus-visible),
     &[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) {
-      @apply bg-field-hover;
+      background-color: var(--textarea-bg-hover);
       border-color: var(--field-border-hover);
     }
   }
@@ -40,7 +43,7 @@
   &[data-focused="true"] {
     @apply status-focused-field;
     border-color: var(--field-border-focus);
-    background-color: var(--field-focus);
+    background-color: var(--textarea-bg-focus);
   }
 
   /* Focus visible state */
@@ -50,7 +53,7 @@
 
   &[data-invalid="true"] {
     @apply status-invalid-field;
-    background-color: var(--field-focus);
+    background-color: var(--textarea-bg-focus);
   }
 
   /* Disabled state */
@@ -68,34 +71,10 @@
 
 .textarea--secondary {
   @apply shadow-none;
-  background-color: var(--textarea-bg);
 
   --textarea-bg: var(--default);
   --textarea-bg-hover: var(--default-hover);
   --textarea-bg-focus: var(--default);
-
-  @media (hover: hover) {
-    &:hover:not(:focus):not(:focus-visible),
-    &[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) {
-      background-color: var(--textarea-bg-hover);
-    }
-  }
-
-  &:focus,
-  &[data-focused="true"] {
-    background-color: var(--textarea-bg-focus);
-  }
-
-  /* Focus visible state */
-  &:focus-visible:not(:focus),
-  &[data-focus-visible="true"] {
-  }
-
-  /* Invalid state */
-  &[data-invalid="true"] {
-    @apply status-invalid-field;
-    background-color: var(--textarea-bg-focus);
-  }
 }
 
 /* Full width modifier */

package/dist/components/toast.css

@@ -131,6 +131,8 @@
 /* Toast close button */
 .toast__close-button {
   @apply pointer-events-none absolute -end-1 -top-1 size-5 border-border bg-default opacity-0 sm:border sm:bg-overlay;
+
+  --toast-close-button-bg-hover: var(--default);
   transition: opacity 150ms var(--ease-smooth);
   @apply motion-reduce:transition-none;
   /* Overrides close button default icon size from 16px to 12px */
@@ -142,7 +144,7 @@
   @media (hover: hover) {
     &:hover,
     &[data-hovered="true"] {
-      @apply bg-default;
+      background-color: var(--toast-close-button-bg-hover);
     }
   }
 }

package/dist/components/toggle-button-group.css

@@ -93,10 +93,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/toggle-button.css

@@ -6,10 +6,6 @@
 .toggle-button {
   @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),
@@ -133,8 +129,8 @@
 
 .toggle-button--ghost {
   --toggle-button-bg: transparent;
-  --toggle-button-bg-hover: var(--default);
-  --toggle-button-bg-pressed: var(--default);
+  --toggle-button-bg-hover: var(--state-layer);
+  --toggle-button-bg-pressed: var(--state-layer);
   --toggle-button-fg: var(--default-foreground);
 }
 

package/dist/components/tooltip.css

@@ -75,10 +75,6 @@
 .tooltip__trigger {
   @apply inline-block;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     color 150ms var(--ease-smooth),
     background-color 150ms var(--ease-smooth),

package/dist/components/typography.css

@@ -35,7 +35,9 @@
 }
 
 .typography-prose code {
-  @apply rounded-md bg-default px-1.5 py-0.5 font-mono text-sm text-foreground;
+  @apply bg-default px-1.5 py-0.5 font-mono text-sm text-foreground;
+
+  border-radius: min(32px, var(--component-radius));
 
   /* Code is marked out by a tinted background and nothing else, so forced colors leaves it
    * indistinguishable from the prose around it - the monospace face is all that is left. */
@@ -70,7 +72,9 @@
 }
 
 .typography-prose pre {
-  @apply my-4 overflow-x-auto rounded-xl bg-default p-4 font-mono text-sm leading-relaxed;
+  @apply my-4 overflow-x-auto bg-default p-4 font-mono text-sm leading-relaxed;
+
+  border-radius: min(32px, var(--component-radius));
 
   /* Code is marked out by a tinted background and nothing else, so forced colors leaves it
    * indistinguishable from the prose around it - the monospace face is all that is left. */
@@ -89,7 +93,9 @@
 }
 
 .typography-prose img {
-  @apply my-4 rounded-xl;
+  @apply my-4;
+
+  border-radius: min(32px, var(--component-radius));
 }
 
 .typography--h1 {
@@ -129,7 +135,9 @@
 }
 
 .typography--code {
-  @apply rounded-md bg-default px-1.5 py-0.5 font-mono text-sm text-foreground;
+  @apply bg-default px-1.5 py-0.5 font-mono text-sm text-foreground;
+
+  border-radius: min(32px, var(--component-radius));
 
   /* Code is marked out by a tinted background and nothing else, so forced colors leaves it
    * indistinguishable from the prose around it - the monospace face is all that is left. */