@ropav/styles 0.5.0 → 0.6.0

package/dist/components/progress-bar.css

@@ -13,6 +13,12 @@
   /* Default color token (accent) */
   --progress-bar-fill: var(--accent);
 
+  /* Derived from the fill rather than declared per colour: mixing toward the track's own colour
+   * lands lighter in the light theme and darker in the dark one, so the band separates whichever
+   * side of the fill it falls on. */
+  --progress-bar-stripe: color-mix(in oklab, var(--progress-bar-fill) 80%, var(--default));
+  --progress-bar-stripe-size: 1rem;
+
   [data-slot="label"] {
     @apply w-fit text-sm font-medium;
 
@@ -26,7 +32,9 @@
   }
 
   .progress-bar__track {
-    @apply relative overflow-hidden rounded-sm bg-default;
+    @apply relative overflow-hidden bg-default;
+
+    border-radius: min(32px, var(--component-radius));
 
     grid-area: track;
 
@@ -43,7 +51,9 @@
   }
 
   .progress-bar__fill {
-    @apply absolute start-0 top-0 h-full rounded-sm;
+    @apply absolute start-0 top-0 h-full;
+
+    border-radius: min(32px, var(--component-radius));
 
     background-color: var(--progress-bar-fill);
 
@@ -51,10 +61,6 @@
       background-color: Highlight;
     }
 
-    /**
-     * Transitions
-     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-     */
     transition: width 300ms var(--ease-out);
     @apply motion-reduce:transition-none;
   }
@@ -100,12 +106,12 @@
    ========================================================================== */
 
 .progress-bar--sm {
-  .progress-bar__track {
-    @apply h-1 rounded-xs;
-  }
+  /* One 1rem tile spans more than the track is tall, so a 4px bar would show a single smear
+   * rather than a run of stripes. The tile tracks the height instead. */
+  --progress-bar-stripe-size: 0.5rem;
 
-  .progress-bar__fill {
-    @apply rounded-xs;
+  .progress-bar__track {
+    @apply h-1;
   }
 }
 
@@ -114,12 +120,10 @@
 }
 
 .progress-bar--lg {
-  .progress-bar__track {
-    @apply h-3 rounded-md;
-  }
+  --progress-bar-stripe-size: 1.25rem;
 
-  .progress-bar__fill {
-    @apply rounded-md;
+  .progress-bar__track {
+    @apply h-3;
   }
 }
 
@@ -146,3 +150,65 @@
 .progress-bar--danger {
   --progress-bar-fill: var(--danger);
 }
+
+/* ==========================================================================
+   Stripes
+
+   The band paints on the fill's `::after`, not on the fill. `animation` on the fill itself is
+   already spoken for by the indeterminate slide, at a specificity a modifier class does not
+   reach, so a band put there would be the one that loses. On a box of its own it composes with
+   the slide instead of trading places with it.
+   ========================================================================== */
+
+.progress-bar--striped,
+.progress-bar--animated {
+  .progress-bar__fill::after {
+    @apply absolute inset-0 content-[''];
+
+    border-radius: inherit;
+
+    /* Tiled by `background-size` rather than repeated by the gradient, so one tile is exactly the
+     * distance the animation travels and the loop closes without a seam. */
+    background-image: linear-gradient(
+      45deg,
+      var(--progress-bar-stripe) 25%,
+      transparent 25% 50%,
+      var(--progress-bar-stripe) 50% 75%,
+      transparent 75%
+    );
+    background-size: var(--progress-bar-stripe-size) var(--progress-bar-stripe-size);
+  }
+
+  /* Forced colors flattens the fill to `Highlight` and leaves this `background-image` painting over
+   * it in author colours. */
+  @media (forced-colors: active) {
+    .progress-bar__fill::after {
+      content: none;
+    }
+  }
+}
+
+.progress-bar--animated {
+  .progress-bar__fill {
+    /* On the host, not inside the `::after` block: the variant carries its own `::before`/`::after`
+     * slot, and written under the pseudo-element instead its ancestor condition would land after
+     * the pseudo-element and compile to an empty `:is()`. Stopped this way the band stays put
+     * rather than disappearing, which is `--striped`. */
+    @apply motion-reduce:animate-none;
+
+    &::after {
+      animation: progress-bar-stripes 1s linear infinite;
+    }
+
+    /* Travelling toward the inline end is what reads as progress; in RTL that is the other way. */
+    &:dir(rtl)::after {
+      animation-direction: reverse;
+    }
+  }
+}
+
+@keyframes progress-bar-stripes {
+  to {
+    background-position-x: var(--progress-bar-stripe-size);
+  }
+}

package/dist/components/progress-circle.css

@@ -34,10 +34,6 @@
       stroke: Highlight;
     }
 
-    /**
-     * Transitions
-     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-     */
     transition: stroke-dashoffset 300ms var(--ease-out);
     @apply motion-reduce:transition-none;
   }

package/dist/components/radio.css

@@ -54,10 +54,6 @@
 .radio__control {
   @apply relative inline-flex size-4 shrink-0 items-center justify-center rounded-lg border [border-width:var(--border-width-field)] border-field-border bg-field shadow-field outline-none no-highlight;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     background-color 200ms var(--ease-out),
     border-color 200ms var(--ease-out),
@@ -134,6 +130,13 @@
   @apply absolute inset-0 flex items-center justify-center;
 
   pointer-events: none;
+
+  /* On the indicator, not in `:empty::before` where the transition lives: the variant reaches a
+   * pseudo-element from its originating element, and appending its condition after `::before`
+   * matches nothing. `:empty` because without it this ties with that rule and loses on order. */
+  &:empty {
+    @apply motion-reduce:transition-none;
+  }
 }
 
 /* :empty pseudo-class ensures these styles only apply when the indicator has no custom children
@@ -146,14 +149,9 @@
   height: 100%;
   scale: 1;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     scale 200ms var(--ease-out),
     background-color 200ms var(--ease-out);
-  @apply motion-reduce:transition-none;
 }
 
 /* Selected state */

package/dist/components/range-calendar.css

@@ -80,14 +80,12 @@
 }
 
 .range-calendar__nav-button {
-  @apply flex size-6 items-center justify-center rounded-xl text-accent-soft-foreground;
+  @apply flex size-6 items-center justify-center text-accent-soft-foreground;
+
+  border-radius: min(32px, var(--component-radius));
 
   will-change: scale;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     transform 250ms var(--ease-out),
     background-color 100ms var(--ease-out),
@@ -101,7 +99,7 @@
   @media (hover: hover) {
     &:hover,
     &[data-hovered="true"] {
-      @apply bg-default text-accent-soft-foreground;
+      @apply bg-state-layer;
     }
   }
 
@@ -182,14 +180,35 @@
  * RangeCalendar Cells
  * -------------------------------------------------------------------------- */
 .range-calendar__cell {
-  @apply relative z-1 mx-0 my-[2px] rounded-3xl p-0 outline-none;
+  @apply relative z-1 mx-0 my-[2px] p-0 outline-none;
+
+  --range-calendar-day-radius: min(32px, var(--component-radius));
+  --range-calendar-wrap-radius: calc(var(--range-calendar-day-radius) / 3);
+
+  border-radius: var(--range-calendar-day-radius);
   cursor: var(--cursor-interactive);
 
+  /* The range track paints on the cell and the day paints on the button inside it, so both sets
+   * are declared here and the button reads them by inheritance. A cap is a day at either end of
+   * the range; several states land in pairs, and one declaration cannot tell them apart. */
+  --range-calendar-cell-bg: transparent;
+  --range-calendar-cell-bg-selected: var(--accent-soft);
+  --range-calendar-cell-bg-selected-outside-month: color-mix(
+    in oklab,
+    var(--state-layer) 20%,
+    transparent
+  );
+  --range-calendar-day-bg-hover: var(--state-layer);
+  --range-calendar-day-bg-today: var(--accent-soft);
+  --range-calendar-day-bg-today-hover: var(--accent-soft-hover);
+  --range-calendar-day-bg-cap: var(--accent);
+  --range-calendar-day-bg-cap-pressed: var(--accent-hover);
+  --range-calendar-day-fg-today: var(--accent-soft-foreground);
+  --range-calendar-day-fg-cap: var(--accent-foreground);
+
+  background-color: var(--range-calendar-cell-bg);
+
   will-change: background-color, border-color;
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     box-shadow 100ms var(--ease-out),
     border-color 100ms var(--ease-out);
@@ -197,7 +216,9 @@
 
   /* Inner interactive circle/capsule (equivalent to React Aria "button-base") */
   .range-calendar__cell-button {
-    @apply flex aspect-square w-full items-center justify-center rounded-3xl text-sm font-medium text-foreground no-highlight;
+    @apply flex aspect-square w-full items-center justify-center text-sm font-medium text-foreground no-highlight;
+
+    border-radius: var(--range-calendar-day-radius);
 
     will-change: scale;
     transition: scale 200ms var(--ease-out);
@@ -217,7 +238,8 @@
   /* Today indicator */
   &[data-today="true"] {
     .range-calendar__cell-button {
-      @apply bg-accent-soft text-accent-soft-foreground;
+      background-color: var(--range-calendar-day-bg-today);
+      color: var(--range-calendar-day-fg-today);
 
       /* An edge rather than a fill, so today still reads as itself once it is also in range */
       @media (forced-colors: active) {
@@ -230,7 +252,7 @@
       &:hover:not([data-selected="true"]),
       &[data-hovered="true"]:not([data-selected="true"]) {
         .range-calendar__cell-button {
-          @apply bg-accent-soft-hover;
+          background-color: var(--range-calendar-day-bg-today-hover);
         }
       }
     }
@@ -238,7 +260,9 @@
 
   /* Range selected track (middle segment) */
   &[data-selected="true"]:not([data-outside-month="true"]) {
-    @apply rounded-none bg-accent-soft;
+    @apply rounded-none;
+
+    background-color: var(--range-calendar-cell-bg-selected);
 
     /* The track is a background and nothing else, so Forced Colors Mode flattens it into the
      * page and the range stops being visible. The day button declares its own `color`, so
@@ -257,16 +281,22 @@
 
   /* Round row boundaries so the range track looks continuous across weeks */
   &[data-selected="true"]:is(td:first-child > *, [aria-disabled] + td > *) {
-    @apply rounded-ss-lg rounded-es-lg;
+    border-start-start-radius: var(--range-calendar-wrap-radius);
+    border-end-start-radius: var(--range-calendar-wrap-radius);
+
     &[data-selection-start="true"] {
-      @apply rounded-ss-3xl rounded-es-3xl;
+      border-start-start-radius: var(--range-calendar-day-radius);
+      border-end-start-radius: var(--range-calendar-day-radius);
     }
   }
 
   &[data-selected="true"]:is(td:last-child > *, td:has(+ [aria-disabled]) > *) {
-    @apply rounded-se-lg rounded-ee-lg;
+    border-start-end-radius: var(--range-calendar-wrap-radius);
+    border-end-end-radius: var(--range-calendar-wrap-radius);
+
     &[data-selection-end="true"] {
-      @apply rounded-se-3xl rounded-ee-3xl;
+      border-start-end-radius: var(--range-calendar-day-radius);
+      border-end-end-radius: var(--range-calendar-day-radius);
     }
   }
 
@@ -276,7 +306,8 @@
     @apply z-2;
 
     .range-calendar__cell-button {
-      @apply bg-accent text-accent-foreground;
+      background-color: var(--range-calendar-day-bg-cap);
+      color: var(--range-calendar-day-fg-cap);
 
       /* Caps read the same as the track here. Forced colors offers one selection colour, and
        * spending it on the shape that matters - the range - beats splitting it. */
@@ -293,11 +324,13 @@
   } */
 
   &[data-selection-start="true"]:not([data-outside-month="true"]) {
-    @apply rounded-ss-3xl rounded-es-3xl;
+    border-start-start-radius: var(--range-calendar-day-radius);
+    border-end-start-radius: var(--range-calendar-day-radius);
   }
 
   &[data-selection-end="true"]:not([data-outside-month="true"]) {
-    @apply rounded-se-3xl rounded-ee-3xl;
+    border-start-end-radius: var(--range-calendar-day-radius);
+    border-end-end-radius: var(--range-calendar-day-radius);
   }
 
   /* Pressed state */
@@ -310,7 +343,7 @@
     &[data-selection-start="true"],
     &[data-selection-end="true"] {
       .range-calendar__cell-button {
-        @apply bg-accent-hover;
+        background-color: var(--range-calendar-day-bg-cap-pressed);
       }
     }
   }
@@ -320,7 +353,7 @@
     &:hover:not([data-selected="true"]),
     &[data-hovered="true"]:not([data-selected="true"]) {
       .range-calendar__cell-button {
-        @apply bg-default;
+        background-color: var(--range-calendar-day-bg-hover);
       }
     }
   }
@@ -334,7 +367,7 @@
       [data-selection-start="true"],
       [data-selection-end="true"]
     ) {
-    @apply bg-default/20;
+    background-color: var(--range-calendar-cell-bg-selected-outside-month);
   }
 
   /* Unavailable dates */
@@ -356,11 +389,13 @@
   td:has(> .range-calendar__cell[data-outside-month="true"])
   + td
   > .range-calendar__cell[data-selected="true"] {
-  @apply rounded-ss-lg rounded-es-lg;
+  border-start-start-radius: var(--range-calendar-wrap-radius);
+  border-end-start-radius: var(--range-calendar-wrap-radius);
 
   &[data-outside-month="true"],
   &[data-selection-start="true"] {
-    @apply rounded-ss-3xl rounded-es-3xl;
+    border-start-start-radius: var(--range-calendar-day-radius);
+    border-end-start-radius: var(--range-calendar-day-radius);
   }
 }
 
@@ -370,20 +405,27 @@
     + td > .range-calendar__cell[data-outside-month="true"]
   )
   > .range-calendar__cell[data-selected="true"] {
-  @apply rounded-se-lg rounded-ee-lg;
+  border-start-end-radius: var(--range-calendar-wrap-radius);
+  border-end-end-radius: var(--range-calendar-wrap-radius);
 
   &[data-outside-month="true"],
   &[data-selection-end="true"] {
-    @apply rounded-se-3xl rounded-ee-3xl;
+    border-start-end-radius: var(--range-calendar-day-radius);
+    border-end-end-radius: var(--range-calendar-day-radius);
   }
 }
 
 /* Cell indicator - small dot at bottom center of cell */
 .range-calendar__cell-indicator {
-  @apply absolute bottom-1 left-1/2 size-[3px] -translate-x-1/2 rounded-xs bg-muted;
+  @apply absolute bottom-1 left-1/2 size-[3px] -translate-x-1/2 rounded-xs;
+
+  --range-calendar-cell-indicator-bg: var(--muted);
+  --range-calendar-cell-indicator-bg-selected: var(--accent-foreground);
+
+  background-color: var(--range-calendar-cell-indicator-bg);
 
   /* Indicator color changes when cell is selected */
   [data-selected="true"] > & {
-    @apply bg-accent-foreground;
+    background-color: var(--range-calendar-cell-indicator-bg-selected);
   }
 }

package/dist/components/search-field.css

@@ -21,7 +21,14 @@
 }
 
 .search-field__group {
-  @apply relative inline-flex h-9 items-center overflow-hidden rounded-field border bg-field text-sm text-field-foreground shadow-field outline-none;
+  @apply relative inline-flex h-9 items-center overflow-hidden rounded-field border text-sm text-field-foreground shadow-field outline-none;
+
+  /* The fill, per state. The `--secondary` variant re-points these and declares nothing else. */
+  --search-field-group-bg: var(--field-background, var(--default));
+  --search-field-group-bg-hover: var(--field-hover);
+  --search-field-group-bg-focus: var(--field-focus);
+
+  background-color: var(--search-field-group-bg);
   border-width: var(--border-width-field);
   border-color: var(--field-border);
 
@@ -33,10 +40,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),
@@ -47,7 +50,7 @@
   @media (hover: hover) {
     &:hover:not(:focus-within),
     &[data-hovered="true"]:not([data-focus-within="true"]) {
-      @apply bg-field-hover;
+      background-color: var(--search-field-group-bg-hover);
       border-color: var(--field-border-hover);
     }
   }
@@ -61,7 +64,7 @@
   /* Invalid state */
   &[data-invalid="true"] {
     @apply status-invalid-field;
-    background-color: var(--field-focus);
+    background-color: var(--search-field-group-bg-focus);
     border-color: var(--color-field-border-invalid);
   }
 
@@ -82,7 +85,7 @@
    */
   &:has([data-slot="search-field-input"]:-webkit-autofill),
   &:has([data-slot="search-field-input"]:autofill) {
-    background-color: var(--field-focus);
+    background-color: var(--search-field-group-bg-focus);
     border-color: var(--field-border-focus);
   }
 }
@@ -154,31 +157,11 @@
 
 .search-field--secondary .search-field__group {
   @apply shadow-none;
-  background-color: var(--search-field-group-bg);
 
   --search-field-group-bg: var(--default);
   --search-field-group-bg-hover: var(--default-hover);
   --search-field-group-bg-focus: var(--default);
 
-  @media (hover: hover) {
-    &:hover:not(:focus-within),
-    &[data-hovered="true"]:not([data-focus-within="true"]) {
-      background-color: var(--search-field-group-bg-hover);
-    }
-  }
-
-  &:focus-within,
-  &[data-focus-within="true"] {
-    background-color: var(--search-field-group-bg-focus);
-  }
-
-  /* Invalid state */
-  &[data-invalid="true"] {
-    @apply status-invalid-field;
-    border-color: var(--color-field-border-invalid);
-    background-color: var(--search-field-group-bg-focus);
-  }
-
   [data-slot="search-field-input"] {
     @apply bg-transparent;
   }

package/dist/components/segmented-control.css

@@ -38,15 +38,17 @@
    ========================================================================== */
 
 .segmented-control__item {
-  @apply relative inline-flex h-7 min-w-0 shrink-0 appearance-none items-center justify-center gap-2 rounded-component border-0 bg-transparent px-3 text-center text-sm font-medium whitespace-nowrap text-muted outline-none select-none no-highlight;
+  @apply relative inline-flex h-7 min-w-0 shrink-0 appearance-none items-center justify-center gap-2 rounded-component border-0 bg-transparent px-3 text-center text-sm font-medium whitespace-nowrap outline-none select-none no-highlight;
+
+  --segmented-control-item-fg: var(--muted);
+  --segmented-control-item-fg-hover: var(--foreground);
+  --segmented-control-item-fg-selected: var(--segment-foreground);
+
+  color: var(--segmented-control-item-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),
     opacity 150ms var(--ease-smooth);
@@ -54,7 +56,7 @@
 
   /* Selected state */
   &[data-selected="true"] {
-    @apply text-segment-foreground;
+    color: var(--segmented-control-item-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
@@ -69,7 +71,7 @@
   @media (hover: hover) {
     &:not([data-selected="true"]):not([data-disabled="true"]):hover,
     &[data-hovered="true"]:not([data-selected="true"]):not([data-disabled="true"]) {
-      @apply text-foreground;
+      color: var(--segmented-control-item-fg-hover);
     }
   }
 
@@ -107,10 +109,6 @@
 .segmented-control__separator {
   @apply pointer-events-none absolute start-0 top-1/4 h-1/2 w-px 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;
 
@@ -148,9 +146,6 @@
   }
 
   /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   *
    * `useSharedElement` reads this very declaration to decide what to carry across the handoff,
    * so the stylesheet stays the only place that decides what animates. `height` is listed even
    * though the pill only travels along one axis today, so a vertical orientation needs no

package/dist/components/select.css

@@ -15,7 +15,14 @@
 }
 
 .select__trigger {
-  @apply relative isolate inline-flex min-h-9 rounded-field border bg-field px-3 field-line-md 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. */
+  --select-trigger-bg: var(--field-background, var(--default));
+  --select-trigger-bg-hover: var(--field-hover);
+  --select-trigger-bg-focus: var(--field-focus);
+
+  background-color: var(--select-trigger-bg);
 
   /* Forced Colors Mode flattens the fill onto the page and strips the shadow, leaving a field that
    * reads as bare text - `--border-width-field` is 0, so the declared border brings nothing back on
@@ -26,10 +33,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),
@@ -51,7 +54,7 @@
   @media (hover: hover) {
     &:hover,
     &[data-hovered="true"] {
-      @apply bg-field-hover;
+      background-color: var(--select-trigger-bg-hover);
       border-color: var(--field-border-hover);
     }
   }
@@ -61,7 +64,7 @@
   &[data-focus-visible="true"] {
     @apply status-focused;
     border-color: var(--field-border-focus);
-    background-color: var(--field-focus);
+    background-color: var(--select-trigger-bg-focus);
   }
 
   /* Focus state */
@@ -73,7 +76,7 @@
   .select[data-invalid="true"] &,
   .select[aria-invalid="true"] & {
     @apply status-invalid-field;
-    background-color: var(--field-focus);
+    background-color: var(--select-trigger-bg-focus);
   }
 
   /* Disabled state */
@@ -91,39 +94,22 @@
 
 .select--secondary .select__trigger {
   @apply shadow-none;
-  background-color: var(--select-trigger-bg);
 
   --select-trigger-bg: var(--default);
   --select-trigger-bg-hover: var(--default-hover);
   --select-trigger-bg-focus: var(--default);
-
-  @media (hover: hover) {
-    &:hover,
-    &[data-hovered="true"] {
-      background-color: var(--select-trigger-bg-hover);
-    }
-  }
-
-  &:focus-visible:not(:focus),
-  &[data-focus-visible="true"] {
-    background-color: var(--select-trigger-bg-focus);
-  }
-
-  &:focus,
-  &[data-focus="true"] {
-  }
-
-  .select[data-invalid="true"] &,
-  .select[aria-invalid="true"] & {
-    background-color: var(--select-trigger-bg-focus);
-  }
 }
 
 .select__value {
-  @apply flex-1 text-start wrap-break-word text-current;
+  @apply flex-1 text-start wrap-break-word;
+
+  --select-value-fg: currentcolor;
+  --select-value-fg-placeholder: var(--field-placeholder, var(--muted));
+
+  color: var(--select-value-fg);
 
   &[data-placeholder="true"] {
-    @apply text-field-placeholder;
+    color: var(--select-value-fg-placeholder);
   }
 
   /* Removes the list-box-item indicator element from the select value*/