@esportsplus/ui 0.57.0 → 0.58.0

package/src/components/pull-to-refresh/scss/variables.scss

@@ -1,3 +1,7 @@
+@use 'css-utilities/background';
+@use 'css-utilities/surface';
+
+
 // Registered so a transition can spring the offset. Not inherited, or every item in the feed would restyle on every frame of
 // the spring; the indicator, glyph, spinner, scroller and feed follow the one interpolated value by declaring
 // '--pull-to-refresh-y: inherit', and so can any element of yours whose parent has it.
@@ -8,13 +12,14 @@
 }
 
 .pull-to-refresh {
-    --background: var(--color-white-300);
+    @extend %background-state, %surface-raised-level;
+    --background-default: var(--surface-background-default);
     --color: var(--color-text-500);
-    --fade-duration: 0.15s;
-    --fade-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-    --fresh-blur: 4px;
-    --fresh-duration: 0.3s;
-    --fresh-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+    --fade-duration: var(--duration-fast);
+    --fade-timing-function: var(--easing-out);
+    --fresh-blur: var(--blur-400);
+    --fresh-duration: var(--duration-moderate);
+    --fresh-timing-function: var(--easing-out);
     --height: 100%;
     // Critically damped at a 0.35s visual duration: an indicator that overshoots would bounce the feed.
     --settle-duration: 617ms;

package/src/components/range/index.ts

@@ -23,7 +23,7 @@ function plain(
     return html`
         <input
             aria-orientation='${orientation}'
-            class='range --border-black ${orientation === 'vertical' && 'range--vertical'}'
+            class='range ${orientation === 'vertical' && 'range--vertical'}'
             style='${() => `--thumb-position: ${((state.value - min) / (max - min)) * 100}%`}'
             type='range'
             ${this?.attributes}

package/src/components/range/scss/_filter.scss

@@ -1,12 +1,16 @@
-@use '/shared';
 @use '/tokens';
+@use 'css-utilities/absolute';
+@use 'css-utilities/background';
+@use 'css-utilities/box-shadow';
+@use 'css-utilities/color';
+@use 'css-utilities/hidden';
 @use 'variables';
 
 .range-filter {
     color: var(--color);
     display: flex;
     flex-direction: column;
-    gap: 20px;
+    gap: var(--size-500);
     margin-inline: auto;
     max-width: 100%;
     width: var(--width);
@@ -14,7 +18,7 @@
     &-body {
         display: flex;
         flex-direction: column;
-        gap: 8px;
+        gap: var(--size-100);
 
         &--vertical {
             align-self: center;
@@ -23,45 +27,51 @@
     }
 
     &-clear {
+        @extend %background-state, %color-state;
+        --background-default: var(--clear-background);
+        --background-hover: var(--clear-hover);
+        --background-pressed: var(--background-hover);
+        --color-default: var(--muted-color);
+        --color-hover: var(--clear-color-hover);
+        --color-pressed: var(--color-hover);
         align-items: center;
-        background: var(--clear-background);
+        background: var(--background);
         border: 1px solid var(--clear-border);
-        border-radius: 6px;
-        box-shadow: 0 1px 2px oklch(from var(--color-black-300) l c h / 0.05);
-        color: var(--muted-color);
+        border-radius: var(--border-radius-300);
+        box-shadow: var(--surface-shadow-default);
+        color: var(--color);
         cursor: pointer;
         display: var(--clear-display);
         flex-shrink: 0;
         font: inherit;
-        font-size: 12px;
+        font-size: var(--font-size-300);
         font-weight: var(--font-weight-500);
-        gap: 4px;
+        gap: calc(var(--size-100) / 2);
         height: 24px;
         outline: 0 solid var(--focus-color);
-        outline-offset: 2px;
-        padding: 0 8px;
+        outline-offset: calc(var(--size-100) / 4);
+        padding: 0 var(--size-100);
         transition:
-            background-color 150ms ease-out,
-            color 150ms ease-out,
-            opacity 150ms ease-out;
+            background-color var(--duration-fast) var(--easing-spring),
+            color var(--duration-fast) var(--easing-spring),
+            opacity var(--duration-fast) var(--easing-spring);
+
+        &-icon {
+            height: 12px;
+            width: 12px;
+        }
 
         &:disabled {
+            --background-hover: var(--background-default);
+            --background-pressed: var(--background-default);
+            --color-hover: var(--color-default);
+            --color-pressed: var(--color-default);
             cursor: default;
             opacity: 0.5;
         }
 
         &:focus-visible {
-            outline-width: 2px;
-        }
-
-        &:not(:disabled):hover {
-            background: var(--clear-hover);
-            color: var(--color);
-        }
-
-        &-icon {
-            height: 12px;
-            width: 12px;
+            outline-width: var(--border-width-500);
         }
     }
 
@@ -114,22 +124,17 @@
         cursor: var(--field-cursor);
         display: flex;
         flex: 1 1 0;
-        gap: 6px;
+        gap: calc(var(--size-300) / 2);
         height: var(--field-height);
         min-width: 0;
         outline: 0 solid var(--focus-color);
-        outline-offset: 2px;
+        outline-offset: calc(var(--size-100) / 4);
         padding-inline: 12px;
 
-        &:has(:focus-visible) {
-            outline-width: 2px;
-        }
-
         &-label {
             color: var(--muted-color);
-            font-size: 12px;
+            font-size: var(--font-size-300);
             font-weight: var(--font-weight-500);
-            letter-spacing: 0.05em;
             text-transform: uppercase;
         }
 
@@ -138,6 +143,14 @@
             margin-inline-start: auto;
         }
 
+        &-prefix + .range-filter-input {
+            margin-inline-start: 0;
+        }
+
+        &:has(:focus-visible) {
+            outline-width: var(--border-width-500);
+        }
+
         // Qualified by the field so it wins over the reused input styles regardless of stylesheet order.
         .range-filter-input {
             flex: 0 1 72px;
@@ -148,10 +161,6 @@
             text-align: right;
             width: 72px;
         }
-
-        &-prefix + .range-filter-input {
-            margin-inline-start: 0;
-        }
     }
 
     &-fields {
@@ -170,9 +179,9 @@
         position: absolute;
         top: 50%;
         transition:
-            left 75ms ease-out,
-            opacity 100ms ease-out,
-            width 75ms ease-out;
+            left 75ms var(--easing-out),
+            opacity 100ms var(--easing-out),
+            width 75ms var(--easing-out);
         translate: 0 -50%;
         z-index: 1;
 
@@ -184,9 +193,9 @@
             left: 50%;
             top: auto;
             transition:
-                bottom 75ms ease-out,
-                opacity 100ms ease-out,
-                height 75ms ease-out;
+                bottom 75ms var(--easing-out),
+                opacity 100ms var(--easing-out),
+                height 75ms var(--easing-out);
             translate: -50% 0;
             width: var(--track-height);
         }
@@ -207,7 +216,6 @@
         color: var(--label-color);
         font-size: var(--label-font-size);
         font-weight: var(--font-weight-500);
-        letter-spacing: var(--label-letter-spacing);
         margin: var(--label-margin);
         text-transform: var(--label-text-transform);
     }
@@ -270,15 +278,18 @@
 
     // Held inside the track like Radix does it: the centre travels from half a thumb in at each end.
     &-thumb {
+        @extend %box-shadow-state;
+        --box-shadow-active: var(--thumb-shadow-active);
+        --box-shadow-default: var(--thumb-shadow);
         background: var(--thumb-background);
         border: var(--thumb-border-width) solid var(--thumb-border);
         border-radius: 50%;
-        box-shadow: var(--thumb-shadow);
+        box-shadow: var(--box-shadow);
         cursor: var(--thumb-cursor);
         height: var(--thumb-size);
         left: calc(var(--thumb-size) / 2 + var(--position) * (100% - var(--thumb-size)));
         outline: var(--thumb-outline);
-        outline-offset: 2px;
+        outline-offset: calc(var(--size-100) / 4);
         position: absolute;
         top: 50%;
         transition: var(--thumb-transition);
@@ -298,9 +309,10 @@
             translate: -50% 50%;
         }
 
+        // The default, so a held thumb still takes its press shadow.
         &:focus-visible {
-            box-shadow: var(--thumb-shadow-focus);
-            outline-width: 3px;
+            --box-shadow-default: var(--thumb-shadow-focus);
+            outline-width: var(--border-width-600);
         }
 
         &:hover {
@@ -309,7 +321,6 @@
 
         // Last, so a held thumb keeps its press look while hovered or focused.
         @include tokens.state(active) {
-            box-shadow: var(--thumb-shadow-active);
             cursor: var(--thumb-cursor-active);
             scale: var(--thumb-scale-active);
         }
@@ -318,7 +329,7 @@
     &-ticks {
         color: var(--tick-color);
         display: flex;
-        font-size: 11px;
+        font-size: var(--font-size-200);
         font-weight: var(--font-weight-500);
         justify-content: space-between;
         user-select: none;
@@ -357,7 +368,7 @@
     &-values {
         align-items: center;
         display: flex;
-        gap: 6px;
+        gap: calc(var(--size-300) / 2);
     }
 
     &.--disabled {

package/src/components/range/scss/_slider.scss

@@ -1,4 +1,5 @@
 @use '/tokens';
+@use 'css-utilities/surface';
 
 @mixin thumb {
     background: var(--thumb-background);
@@ -8,22 +9,72 @@
     cursor: grab;
     height: var(--thumb-size);
     transition:
-        box-shadow 150ms ease-out,
-        scale 150ms ease-out;
+        box-shadow var(--duration-fast) var(--easing-spring),
+        scale var(--duration-fast) var(--easing-spring);
     width: var(--thumb-size);
 }
 
 .range--slider {
-    --focus-color: oklch(from var(--color-text-500) l c h / 0.24);
-    --range-color: var(--color-text-500);
+    --focus-color: var(--surface-border-pressed);
+    --range-color: var(--color-primary-500);
+    // A physical knob stays white in both modes.
     --thumb-background: var(--color-white-300);
-    --thumb-border: var(--color-border-300);
-    --thumb-shadow: 0 1px 2px oklch(from var(--color-black-300) l c h / 0.05), 0 1px oklch(from var(--color-black-300) l c h / 0.04);
-    --thumb-size: 16px;
-    --track-color: var(--color-border-300);
+    --thumb-border: var(--surface-border-default);
+    --thumb-shadow: var(--surface-shadow-default);
+    --thumb-size: var(--size-400);
+    // A level below what holds the slider. Painted in the range's own background beside the fill, so it takes the
+    // level's color rather than the range counting as a surface, which would flatten the thumb's shadow.
+    --track-color: #{surface.surface-background('calc(var(--surface-level) - 1)')};
 
     @media (pointer: coarse) {
-        --thumb-size: 20px;
+        --thumb-size: var(--size-500);
+    }
+}
+
+.range-filter.range--slider {
+    --clear-display: none;
+    --ghost-display: none;
+    // The heading's label and value join the header row.
+    --header-align: center;
+    --header-gap: var(--size-100);
+    --heading-display: contents;
+    --label-color: currentColor;
+    --label-font-size: 1em;
+    --label-margin: 0;
+    --label-text-transform: none;
+    --range-border-radius: 999px;
+    --thumb-border-width: var(--border-width-400);
+    --thumb-cursor: grab;
+    --thumb-cursor-active: grabbing;
+    --thumb-outline: none;
+    --thumb-scale-active: 1.2;
+    --thumb-scale-hover: 1;
+    --thumb-shadow-active: none;
+    --thumb-shadow-focus: 0 0 0 3px var(--focus-color);
+    --thumb-transition:
+        box-shadow var(--duration-fast) var(--easing-spring),
+        scale var(--duration-fast) var(--easing-spring);
+    --track-height: 4px;
+    // Match the fill to the existing thumb travel without changing range behavior.
+    --track-inset: calc(var(--thumb-size) / 2);
+    --track-overflow: visible;
+    --value-font-size: calc(var(--font-size-400) * 0.875);
+    // Unset, so the value takes the weight around it.
+    --value-font-weight: initial;
+    --width: 100%;
+    font-size: var(--value-font-size);
+    gap: var(--size-100);
+
+    @include tokens.state(disabled) {
+        --thumb-cursor: not-allowed;
+        --thumb-cursor-active: not-allowed;
+        --thumb-scale-active: 1;
+        opacity: 0.64;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        --thumb-scale-active: 1;
+        --thumb-transition: box-shadow var(--duration-fast) var(--easing-spring);
     }
 }
 
@@ -31,35 +82,25 @@
     --background-default: linear-gradient(to right, var(--range-color) var(--thumb-position), var(--track-color) var(--thumb-position));
     --height: 4px;
 
-    // Keep browser pseudo-elements separate: an unknown pseudo invalidates a selector list.
-    &::-webkit-slider-thumb {
+    &::-moz-range-thumb {
         @include thumb;
         appearance: none;
     }
 
-    &::-moz-range-thumb {
+    // Keep browser pseudo-elements separate: an unknown pseudo invalidates a selector list.
+    &::-webkit-slider-thumb {
         @include thumb;
         appearance: none;
     }
 
-    &:focus-visible {
-        &::-webkit-slider-thumb {
-            box-shadow: 0 0 0 3px var(--focus-color);
-        }
-
-        &::-moz-range-thumb {
-            box-shadow: 0 0 0 3px var(--focus-color);
-        }
-    }
-
     &:active:not(:disabled) {
-        &::-webkit-slider-thumb {
+        &::-moz-range-thumb {
             box-shadow: none;
             cursor: grabbing;
             scale: 1.2;
         }
 
-        &::-moz-range-thumb {
+        &::-webkit-slider-thumb {
             box-shadow: none;
             cursor: grabbing;
             scale: 1.2;
@@ -69,72 +110,34 @@
     &:disabled {
         opacity: 0.64;
 
+        &::-moz-range-thumb {
+            cursor: not-allowed;
+        }
+
         &::-webkit-slider-thumb {
             cursor: not-allowed;
         }
+    }
 
+    &:focus-visible {
         &::-moz-range-thumb {
-            cursor: not-allowed;
+            box-shadow: 0 0 0 3px var(--focus-color);
+        }
+
+        &::-webkit-slider-thumb {
+            box-shadow: 0 0 0 3px var(--focus-color);
         }
     }
 
     @media (prefers-reduced-motion: reduce) {
         &:active:not(:disabled) {
-            &::-webkit-slider-thumb {
+            &::-moz-range-thumb {
                 scale: 1;
             }
 
-            &::-moz-range-thumb {
+            &::-webkit-slider-thumb {
                 scale: 1;
             }
         }
     }
 }
-
-.range-filter.range--slider {
-    --clear-display: none;
-    --ghost-display: none;
-    // The heading's label and value join the header row.
-    --header-align: center;
-    --header-gap: 8px;
-    --heading-display: contents;
-    --label-color: currentColor;
-    --label-font-size: 1em;
-    --label-letter-spacing: normal;
-    --label-margin: 0;
-    --label-text-transform: none;
-    --range-border-radius: 999px;
-    --thumb-border-width: 1px;
-    --thumb-cursor: grab;
-    --thumb-cursor-active: grabbing;
-    --thumb-outline: none;
-    --thumb-scale-active: 1.2;
-    --thumb-scale-hover: 1;
-    --thumb-shadow-active: none;
-    --thumb-shadow-focus: 0 0 0 3px var(--focus-color);
-    --thumb-transition:
-        box-shadow 150ms ease-out,
-        scale 150ms ease-out;
-    --track-height: 4px;
-    // Match the fill to the existing thumb travel without changing range behavior.
-    --track-inset: calc(var(--thumb-size) / 2);
-    --track-overflow: visible;
-    --value-font-size: calc(var(--font-size-400) * 0.875);
-    // Unset, so the value takes the weight around it.
-    --value-font-weight: initial;
-    --width: 100%;
-    font-size: var(--value-font-size);
-    gap: 8px;
-
-    @include tokens.state(disabled) {
-        --thumb-cursor: not-allowed;
-        --thumb-cursor-active: not-allowed;
-        --thumb-scale-active: 1;
-        opacity: 0.64;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-        --thumb-scale-active: 1;
-        --thumb-transition: box-shadow 150ms ease-out;
-    }
-}

package/src/components/range/scss/_vertical.scss

@@ -2,8 +2,13 @@
     --vertical-size: 176px;
 }
 
+// The filter's parts take their vertical layout from their own '--vertical' modifiers.
+.range-filter.range--vertical {
+    --width: max-content;
+}
+
 .range.range--vertical {
-    --background-default: linear-gradient(to top, var(--thumb-background) var(--thumb-position), var(--color-black-300) var(--thumb-position));
+    --background-default: linear-gradient(to top, var(--thumb-background) var(--thumb-position), var(--color-primary-300) var(--thumb-position));
     direction: rtl;
     height: var(--vertical-size);
     margin-block: var(--margin-vertical);
@@ -15,8 +20,3 @@
         --background-default: linear-gradient(to top, var(--range-color) var(--thumb-position), var(--track-color) var(--thumb-position));
     }
 }
-
-// The filter's parts take their vertical layout from their own '--vertical' modifiers.
-.range-filter.range--vertical {
-    --width: max-content;
-}

package/src/components/range/scss/index.scss

@@ -1,5 +1,6 @@
 @use 'sass:meta';
-@use '/shared';
+@use 'css-utilities/background';
+@use 'css-utilities/border';
 @use 'filter';
 @use 'variables';
 
@@ -15,7 +16,7 @@
 }
 
 .range {
-    @extend %background-state, %border-state;
+    @extend %background-state, %border-primary, %border-state;
     appearance: none;
     background: var(--background);
     border: 0px;

package/src/components/range/scss/variables.scss

@@ -1,59 +1,62 @@
 @use '/tokens';
+@use 'css-utilities/surface';
 
 .range {
-    --background-default: linear-gradient(to right, var(--thumb-background) var(--thumb-position), var(--color-black-300) var(--thumb-position));
+    --background-default: linear-gradient(to right, var(--thumb-background) var(--thumb-position), var(--color-primary-300) var(--thumb-position));
     --border-width: var(--border-width-700);
     --height: var(--size-200);
     --margin-horizontal: 0px;
     --margin-vertical: 0px;
-    --thumb-background: var(--color-white-400);
+    --thumb-background: var(--surface-background-default);
     --thumb-size: var(--size-400);
     --width: 100%;
 
     &-filter {
-        --clear-background: var(--color-white-300);
-        --clear-border: var(--color-border-300);
+        @extend %surface-raised-level;
+        --clear-background: var(--surface-background-default);
+        --clear-border: var(--surface-border-default);
+        // Resolved here, since the clear button's color state redefines --color on it.
+        --clear-color-hover: var(--color);
         --clear-display: inline-flex;
-        --clear-hover: var(--color-grey-400);
+        --clear-hover: var(--surface-background-hover);
         --color: var(--color-text-500);
-        --field-background: var(--color-white-300);
+        --field-background: var(--surface-background-default);
         --field-border-radius: var(--border-radius-400);
         --field-cursor: text;
         --field-height: 40px;
-        --focus-color: oklch(from var(--color-text-500) l c h / 0.3);
-        --ghost-color: oklch(from var(--color-text-500) l c h / 0.3);
+        --focus-color: var(--surface-border-pressed);
+        --ghost-color: oklch(from var(--color-primary-500) l c h / 0.3);
         --ghost-display: block;
         --header-align: flex-start;
-        --header-gap: 16px;
+        --header-gap: var(--size-400);
         --heading-display: block;
         --label-color: var(--muted-color);
-        --label-font-size: 12px;
-        --label-letter-spacing: 0.05em;
-        --label-margin: 0 0 4px;
+        --label-font-size: var(--font-size-300);
+        --label-margin: 0 0 calc(var(--size-100) / 2);
         --label-text-transform: uppercase;
         --muted-color: var(--color-text-300);
         --range-border-radius: 0px;
-        --range-color: var(--color-text-500);
+        --range-color: var(--color-primary-500);
         --roll-duration: 500ms;
-        --roll-ease: cubic-bezier(0.23, 1, 0.32, 1);
+        --roll-ease: var(--easing-out);
         --root-cursor: pointer;
-        --thumb-background: var(--color-white-300);
-        --thumb-border: var(--color-text-500);
-        --thumb-border-width: 2px;
+        --thumb-background: var(--surface-background-default);
+        --thumb-border: var(--color-primary-500);
+        --thumb-border-width: var(--border-width-500);
         // Unset, so the thumb takes the cursor around it.
         --thumb-cursor: initial;
         --thumb-cursor-active: initial;
         --thumb-outline: 0 solid var(--focus-color);
         --thumb-scale-active: 1.25;
         --thumb-scale-hover: 1.25;
-        --thumb-shadow: 0 4px 6px -1px oklch(from var(--color-black-300) l c h / 0.1), 0 2px 4px -2px oklch(from var(--color-black-300) l c h / 0.1);
+        --thumb-shadow: var(--surface-shadow-default);
         --thumb-shadow-active: var(--thumb-shadow);
         --thumb-shadow-focus: var(--thumb-shadow);
-        --thumb-size: 20px;
-        --thumb-transition: scale 150ms ease-out;
-        --tick-color: oklch(from var(--color-text-300) l c h / 0.6);
-        --track-color: var(--color-grey-500);
-        --track-height: 8px;
+        --thumb-size: var(--size-500);
+        --thumb-transition: scale var(--duration-fast) var(--easing-spring);
+        --tick-color: oklch(from var(--color-primary-300) l c h / 0.6);
+        --track-color: var(--surface-border-default);
+        --track-height: var(--size-100);
         --track-inset: 0px;
         --track-overflow: hidden;
         --value-font-size: var(--font-size-500);