@ropav/styles 0.4.0 → 0.6.0

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,24 +202,24 @@
      (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. VirtualizerItem wrappers
-     break :first-child/:last-child on rows and cells, so round the body
-     itself and clip overflow instead. */
+  /* Virtualized: elements are divs, not tr/td, and only a window of the rows
+     is in the DOM, so :first-child/:last-child name the window's edges rather
+     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-3xl 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;
 
@@ -221,7 +214,7 @@
 
 /* Tab indicator - React Aria's SelectionIndicator */
 .tabs__indicator {
-  @apply absolute start-0 top-0 size-full rounded-3xl bg-segment shadow-surface;
+  @apply absolute start-0 top-0 size-full rounded-component bg-segment shadow-surface;
 
   z-index: -1;
 
@@ -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/textarea.styles.d.ts

@@ -4,6 +4,11 @@ export declare const textAreaVariants: import("tailwind-variants").TVReturnType<
         false: "";
         true: "textarea--full-width";
     };
+    size: {
+        lg: "textarea--lg";
+        md: "";
+        sm: "textarea--sm";
+    };
     variant: {
         primary: "textarea--primary";
         secondary: "textarea--secondary";
@@ -13,6 +18,11 @@ export declare const textAreaVariants: import("tailwind-variants").TVReturnType<
         false: "";
         true: "textarea--full-width";
     };
+    size: {
+        lg: "textarea--lg";
+        md: "";
+        sm: "textarea--sm";
+    };
     variant: {
         primary: "textarea--primary";
         secondary: "textarea--secondary";
@@ -22,6 +32,11 @@ export declare const textAreaVariants: import("tailwind-variants").TVReturnType<
         false: "";
         true: "textarea--full-width";
     };
+    size: {
+        lg: "textarea--lg";
+        md: "";
+        sm: "textarea--sm";
+    };
     variant: {
         primary: "textarea--primary";
         secondary: "textarea--secondary";

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.styles.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/textarea.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;cAgB3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"textarea.styles.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/textarea.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAsB3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/components/textarea/textarea.styles.js

@@ -4,6 +4,7 @@ const textAreaVariants = tv({
 	base: "textarea",
 	defaultVariants: {
 		fullWidth: false,
+		size: "md",
 		variant: "primary"
 	},
 	variants: {
@@ -11,6 +12,11 @@ const textAreaVariants = tv({
 			false: "",
 			true: "textarea--full-width"
 		},
+		size: {
+			lg: "textarea--lg",
+			md: "",
+			sm: "textarea--sm"
+		},
 		variant: {
 			primary: "textarea--primary",
 			secondary: "textarea--secondary"

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 py-2 text-base text-field-foreground shadow-field outline-none placeholder:text-field-placeholder sm:text-sm;
+  @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,37 +71,25 @@
 
 .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 */
 .textarea--full-width {
   @apply w-full;
 }
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.textarea--sm {
+  @apply field-line-sm;
+}
+
+.textarea--lg {
+  @apply field-line-lg;
+}

package/dist/components/toast.css

@@ -47,7 +47,7 @@
   inset-inline-end: 0;
 
   @apply pointer-events-auto flex flex-row items-start justify-start gap-1.5 bg-surface px-4 py-3 shadow-overlay;
-  border-radius: min(32px, var(--radius-3xl));
+  border-radius: min(32px, var(--component-radius));
 }
 
 .toast--bottom,
@@ -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

@@ -38,32 +38,32 @@
 
 /* Apply border radius to first button (start edge) */
 .toggle-button-group--horizontal .toggle-button:first-child {
-  @apply rounded-s-3xl;
+  @apply rounded-s-component;
 }
 
 /* Apply border radius to last button (end edge) */
 .toggle-button-group--horizontal .toggle-button:last-child {
-  @apply rounded-e-3xl;
+  @apply rounded-e-component;
 }
 
 /* If only one button, apply both rounded edges */
 .toggle-button-group--horizontal .toggle-button:first-child:last-child {
-  @apply rounded-3xl;
+  @apply rounded-component;
 }
 
 /* Apply border radius to first button (top edge) in vertical */
 .toggle-button-group--vertical .toggle-button:first-child {
-  @apply rounded-t-3xl;
+  @apply rounded-t-component;
 }
 
 /* Apply border radius to last button (bottom edge) in vertical */
 .toggle-button-group--vertical .toggle-button:last-child {
-  @apply rounded-b-3xl;
+  @apply rounded-b-component;
 }
 
 /* If only one button in vertical, apply all rounded edges */
 .toggle-button-group--vertical .toggle-button:first-child:last-child {
-  @apply rounded-3xl;
+  @apply rounded-component;
 }
 
 /* Remove scale transform on active/pressed state for buttons in group */
@@ -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;
 
@@ -127,7 +123,7 @@
 
 /* Restore border radius in detached mode */
 .toggle-button-group--detached .toggle-button {
-  @apply rounded-3xl;
+  @apply rounded-component;
 }
 
 /* Hide separators in detached mode */