@esportsplus/ui 0.57.0 → 0.58.0

package/src/components/input/scss/_tag.scss

@@ -1,20 +1,28 @@
-@use '/shared';
-@use '/tokens';
+@use 'css-utilities/absolute';
+@use 'css-utilities/background';
+@use 'css-utilities/color';
+@use 'css-utilities/hidden';
+@use 'css-utilities/reset';
+@use 'css-utilities/surface';
+@use 'css-utilities/text';
+
 
 .input-tag {
     color: var(--color);
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: var(--size-100);
     width: var(--width);
 
 
+    // The field is a surface, and each chip a surface above it.
     &-box {
-        background: var(--box-background);
+        @extend %surface-raised-level;
+        background: var(--box-background, var(--surface-background-default));
         border-radius: var(--box-border-radius);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--surface-shadow-default);
         cursor: text;
-        outline-offset: 2px;
+        outline-offset: calc(var(--size-100) / 4);
         padding: var(--box-padding);
 
         &:has(.input-tag-field:focus-visible) {
@@ -23,37 +31,43 @@
     }
 
     &-chip {
+        @extend %color-state;
+        --color-active: var(--chip-color-active);
+        --color-default: var(--chip-color);
         align-items: center;
-        color: var(--chip-color);
+        color: var(--color);
         display: flex;
         font-size: var(--font-size);
-        gap: 2px;
+        gap: calc(var(--size-100) / 4);
         height: var(--chip-height);
         max-width: 100%;
-        padding-inline: var(--text-inset) 4px;
+        padding-inline: var(--text-inset) calc(var(--size-100) / 2);
         position: relative;
         transition: color var(--transition-duration) var(--transition-timing-function);
 
-        @include tokens.state(active) {
-            color: var(--chip-color-active);
-        }
-
         &-body {
-            @extend %absolute-full;
-            background: var(--chip-background);
+            @extend %absolute-full, %surface-raised-level;
+            // The surface's, until an active chip fills with ink and drops its shadow.
+            background: var(--chip-background, var(--surface-background-default));
             border-radius: var(--chip-border-radius);
-            box-shadow: var(--chip-shadow);
+            box-shadow: var(--chip-shadow, var(--surface-shadow-default));
             transition:
                 background-color var(--transition-duration) var(--transition-timing-function),
                 box-shadow var(--transition-duration) var(--transition-timing-function);
         }
 
         &-button {
+            @extend %background-state, %color-state;
+            --background-hover: var(--chip-remove-hover-background);
+            --background-pressed: var(--background-hover);
+            --color-default: var(--chip-remove-color);
+            --color-hover: var(--chip-remove-color-hover);
+            --color-pressed: var(--color-hover);
             align-items: center;
-            background: transparent;
+            background: var(--background);
             border: 0;
             border-radius: var(--border-radius-300);
-            color: var(--chip-remove-color);
+            color: var(--color);
             cursor: pointer;
             display: flex;
             flex-shrink: 0;
@@ -64,26 +78,16 @@
             position: relative;
             transition:
                 background-color var(--transition-duration) var(--transition-timing-function),
-                color var(--transition-duration) var(--transition-timing-function),
-                scale var(--transition-duration) var(--transition-timing-function);
+                color var(--transition-duration) var(--transition-timing-function);
             width: 24px;
 
             // Grows the hit area to 32px without growing the icon.
             &::after {
                 content: '';
-                inset: -4px;
+                inset: calc(var(--size-100) / -2);
                 position: absolute;
             }
 
-            &:hover {
-                background: var(--chip-remove-hover-background);
-                color: var(--chip-remove-color-hover);
-            }
-
-            &:active {
-                scale: 0.96;
-            }
-
             &:focus-visible {
                 outline: var(--border-width-500) solid var(--outline-color);
             }
@@ -119,7 +123,7 @@
         min-height: 0;
         min-width: 0;
         outline: none;
-        padding: 0 8px 0 var(--text-inset);
+        padding: 0 var(--size-100) 0 var(--text-inset);
 
         &::placeholder {
             color: var(--placeholder-color);
@@ -154,9 +158,3 @@
         @extend %hidden-visually;
     }
 }
-
-@media (prefers-reduced-motion: reduce) {
-    .input-tag-chip-button:active {
-        scale: 1;
-    }
-}

package/src/components/input/scss/variables.scss

@@ -1,4 +1,6 @@
 @use '/tokens';
+@use 'css-utilities/background';
+@use 'css-utilities/surface';
 @use 'field';
 
 .input {
@@ -6,113 +8,112 @@
 }
 
 
-.input-scrub {
-    --background: var(--color-white-300);
-    --border-radius: var(--border-radius-400);
-    --color: var(--color-text-500);
-    --field-padding: 10px;
-    --font-size: var(--font-size-300);
-    --height: 40px;
-    --label-color: var(--color-text-300);
-    --label-color-active: var(--color-text-500);
-    --label-width: 36px;
-    --needle-color: var(--color-text-500);
-    --outline-color: var(--color-text-500);
-    --outline-width: var(--border-width-500);
-    --tape-color: var(--color-text-300);
-    --tape-duration: var(--tape-leave-duration);
-    --tape-enter-duration: 150ms;
-    --tape-height: 8px;
-    --tape-leave-duration: 200ms;
-    --tape-major-height: 6px;
-    --tape-minor-height: 3px;
-    --tape-opacity: 0;
-    --tape-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-    --tape-translate: 0 4px;
-    // Keep in sync with the component's TICK constant; the tape offset is computed against it.
-    --tick: 6px;
+.input {
+    &-scrub {
+        @extend %background-state, %surface-raised-level;
+        --background-default: var(--surface-background-default);
+        --border-radius: var(--border-radius-400);
+        --color: var(--color-text-500);
+        --field-padding: var(--size-200);
+        --font-size: var(--font-size-300);
+        --height: 40px;
+        --label-color: var(--color-text-300);
+        --label-color-active: var(--color-text-500);
+        --label-width: 36px;
+        --needle-color: var(--color-primary-500);
+        --outline-color: var(--color-primary-500);
+        --outline-width: var(--border-width-500);
+        --tape-color: var(--color-primary-300);
+        --tape-duration: var(--tape-leave-duration);
+        --tape-enter-duration: var(--duration-fast);
+        --tape-height: var(--size-100);
+        --tape-leave-duration: var(--duration-moderate);
+        --tape-major-height: 6px;
+        --tape-minor-height: 3px;
+        --tape-opacity: 0;
+        --tape-timing-function: var(--easing-out);
+        --tape-translate: 0 4px;
+        // Keep in sync with the component's TICK constant; the tape offset is computed against it.
+        --tick: 6px;
 
-    // Scrubbing lights the label and raises the tape under the needle.
-    @include tokens.state(active) {
-        --label-color: var(--label-color-active);
-        --tape-duration: var(--tape-enter-duration);
-        --tape-opacity: 1;
-        --tape-translate: 0 0;
-    }
+        // Scrubbing lights the label and raises the tape under the needle.
+        @include tokens.state(active) {
+            --label-color: var(--label-color-active);
+            --tape-duration: var(--tape-enter-duration);
+            --tape-opacity: 1;
+            --tape-translate: 0 0;
+        }
 
-    // Qualified by the root so it wins over the reused input styles regardless of stylesheet order.
-    & > #{&}-field {
-        --color-default: currentColor;
-        --font-size: inherit;
-        --padding-horizontal: 0px;
-        --padding-vertical: 0px;
+        // Qualified by the root so it wins over the reused input styles regardless of stylesheet order.
+        & > #{&}-field {
+            --color-default: currentColor;
+            --font-size: inherit;
+            --padding-horizontal: 0px;
+            --padding-vertical: 0px;
+        }
     }
-}
 
 
-.input-tag {
-    --box-background: var(--color-grey-400);
-    --box-border-radius: 14px;
-    --box-padding: 6px;
-    --box-shadow: var(--box-shadow-200);
-    --chip-background: var(--color-white-300);
-    --chip-background-active: var(--color-text-500);
-    // Read by JS: how far a chip blurs as it comes and goes; half that leaving.
-    --chip-blur: 4px;
-    // 8px inside 6px of box padding keeps the 14px box concentric.
-    --chip-border-radius: var(--border-radius-400);
-    --chip-color: var(--color-text-500);
-    --chip-color-active: var(--color-white-300);
-    --chip-height: 32px;
-    --chip-remove-color: var(--color-text-300);
-    --chip-remove-color-hover: var(--color-text-500);
-    --chip-remove-hover-background: oklch(from var(--color-text-500) l c h / 0.06);
-    // Read by JS: what a formed chip's remove button grows from, what a chip grows from and shrinks to, how far a
-    // repeated tag's chip shakes and how dim it goes, and how the row slides (no bounce: closing up reads as settled).
-    --chip-remove-scale: 0.25;
-    --chip-scale: 0.9;
-    --chip-shadow: var(--box-shadow-100);
-    --chip-shake: 4px;
-    --chip-shake-opacity: 1;
-    --chip-slide-duration: 410ms;
-    --chip-slide-easing: linear(0, 0.038, 0.116, 0.219, 0.326, 0.43, 0.518, 0.602, 0.674, 0.731, 0.782, 0.825, 0.858, 0.886, 0.91, 0.928, 0.942, 0.955, 0.964, 0.971, 0.977, 0.982, 0.986, 0.989, 0.991, 0.993, 0.995, 0.996, 0.997, 0.997, 1);
-    --color: var(--color-text-500);
-    --entry-min-width: 120px;
-    --font-size: var(--font-size-300);
-    --gap: 6px;
-    --hint-color: var(--color-text-300);
-    --hint-font-size: var(--font-size-200);
-    --label-font-size: var(--font-size-300);
-    --label-font-weight: var(--font-weight-500);
-    --outline-color: var(--color-text-500);
-    --placeholder-color: var(--color-text-300);
-    // Shared by a chip's text and the field, so a typed tag becomes a chip without its letters shifting.
-    --text-inset: 10px;
-    --width: min(440px, 100%);
+    &-tag {
+        --box-border-radius: 14px;
+        --box-padding: calc(var(--size-300) / 2);
+        --chip-background-active: var(--color-primary-500);
+        // Read by JS: how far a chip blurs as it comes and goes; half that leaving.
+        --chip-blur: var(--blur-400);
+        // 8px inside 6px of box padding keeps the 14px box concentric.
+        --chip-border-radius: var(--border-radius-400);
+        --chip-color: var(--color-text-500);
+        --chip-color-active: var(--color-surface);
+        --chip-height: 32px;
+        --chip-remove-color: var(--color-primary-300);
+        --chip-remove-color-hover: var(--color-primary-500);
+        --chip-remove-hover-background: var(--surface-background-hover);
+        // Read by JS: what a formed chip's remove button grows from, what a chip grows from and shrinks to, how far a
+        // repeated tag's chip shakes and how dim it goes, and how the row slides (no bounce: closing up reads as settled).
+        --chip-remove-scale: 0.25;
+        --chip-scale: 0.9;
+        --chip-shake: 4px;
+        --chip-shake-opacity: 1;
+        --chip-slide-duration: 410ms;
+        --chip-slide-easing: linear(0, 0.038, 0.116, 0.219, 0.326, 0.43, 0.518, 0.602, 0.674, 0.731, 0.782, 0.825, 0.858, 0.886, 0.91, 0.928, 0.942, 0.955, 0.964, 0.971, 0.977, 0.982, 0.986, 0.989, 0.991, 0.993, 0.995, 0.996, 0.997, 0.997, 1);
+        --color: var(--color-text-500);
+        --entry-min-width: var(--spacer-400);
+        --font-size: var(--font-size-300);
+        --gap: calc(var(--size-300) / 2);
+        --hint-color: var(--color-text-300);
+        --hint-font-size: var(--font-size-200);
+        --label-font-size: var(--font-size-300);
+        --label-font-weight: var(--font-weight-500);
+        --outline-color: var(--color-primary-500);
+        --placeholder-color: var(--color-text-300);
+        // Shared by a chip's text and the field, so a typed tag becomes a chip without its letters shifting.
+        --text-inset: var(--size-200);
+        --width: min(440px, 100%);
 
-    // Chips fade where they stand, and a repeated tag's chip dims instead of shaking.
-    @media (prefers-reduced-motion: reduce) {
-        --chip-blur: 0px;
-        --chip-remove-scale: 1;
-        --chip-scale: 1;
-        --chip-shake: 0px;
-        --chip-shake-opacity: 0.4;
-        --chip-slide-duration: 0s;
-    }
+        // Chips fade where they stand, and a repeated tag's chip dims instead of shaking.
+        @media (prefers-reduced-motion: reduce) {
+            --chip-blur: 0px;
+            --chip-remove-scale: 1;
+            --chip-scale: 1;
+            --chip-shake: 0px;
+            --chip-shake-opacity: 0.4;
+            --chip-slide-duration: 0s;
+        }
 
-    // An armed chip inverts, and its remove button follows it onto the dark surface.
-    &-chip {
-        @include tokens.state(active) {
-            --chip-background: var(--chip-background-active);
-            --chip-remove-color: oklch(from var(--chip-color-active) l c h / 0.7);
-            --chip-remove-color-hover: var(--chip-color-active);
-            --chip-remove-hover-background: transparent;
-            --chip-shadow: none;
+        // An armed chip inverts, and its remove button follows it onto the dark surface.
+        &-chip {
+            @include tokens.state(active) {
+                --chip-background: var(--chip-background-active);
+                --chip-remove-color: oklch(from var(--chip-color-active) l c h / 0.7);
+                --chip-remove-color-hover: var(--chip-color-active);
+                --chip-remove-hover-background: transparent;
+                --chip-shadow: none;
+            }
         }
-    }
 
-    // Qualified so it wins over the reused input styles regardless of stylesheet order.
-    &-entry > #{&}-field {
-        --color-default: currentColor;
+        // Qualified so it wins over the reused input styles regardless of stylesheet order.
+        &-entry > #{&}-field {
+            --color-default: currentColor;
+        }
     }
 }

package/src/components/link/scss/index.scss

@@ -1,4 +1,7 @@
-@use '/shared';
+@use 'css-utilities/background';
+@use 'css-utilities/border';
+@use 'css-utilities/color';
+@use 'css-utilities/text';
 @use 'variables';
 
 .link {

package/src/components/loading/scss/index.scss

@@ -1,4 +1,4 @@
-@use '/shared';
+@use 'css-utilities/absolute';
 @use 'variables';
 
 .loading {

package/src/components/loading/scss/variables.scss

@@ -2,7 +2,7 @@
     --animation-duration: 0.64s;
     --border-color: var(--color);
     --border-width: var(--border-width-400);
-    --color: var(--color-black-400);
+    --color: var(--color-text-400);
     --size: var(--size-400);
     --timing-function: cubic-bezier(0.5, 0, 0.5, 1);
     --track-color: color-mix(in srgb, var(--border-color), transparent 90%);

package/src/components/marquee/scss/index.scss

@@ -1,4 +1,6 @@
-@use '/shared';
+@use 'css-utilities/color';
+@use 'css-utilities/hidden';
+@use 'css-utilities/reset';
 @use 'variables';
 
 // Typed, so the track can transition it and JS hears it change.
@@ -43,12 +45,15 @@
         flex-shrink: 0;
         gap: var(--size-200);
         height: var(--item-height);
-        letter-spacing: -0.01em;
         padding: 0 var(--item-padding-horizontal);
         text-decoration: none;
         white-space: nowrap;
 
         &--link {
+            @extend %color-state;
+            --color-default: var(--item-color);
+            --color-hover: var(--item-color-hover);
+            --color-pressed: var(--color-hover);
             background: none;
             border: 0;
             cursor: pointer;
@@ -61,9 +66,8 @@
                 box-shadow: inset 0 0 0 1px var(--focus-color);
             }
 
-            &:focus-visible,
-            &:hover {
-                color: var(--color-hover);
+            &:focus-visible {
+                --color: var(--color-hover);
             }
         }
     }

package/src/components/marquee/scss/variables.scss

@@ -9,11 +9,13 @@
     --font-size: var(--font-size-300);
     --font-weight: var(--font-weight-500);
     --item-border-radius: var(--border-radius-300);
+    // Resolved here, since a link item's color state redefines --color and --color-hover on it.
+    --item-color: var(--color);
+    --item-color-hover: var(--color-hover);
     --item-gap: 40px;
     --item-height: 40px;
     --item-padding-horizontal: var(--size-300);
     --track-will-change: transform;
-    --transition-duration: 0.15s;
     --viewport-overflow-x: hidden;
 
     @media (prefers-reduced-motion: reduce) {

package/src/components/metric/scss/_flash.scss

@@ -1,4 +1,6 @@
-@use '/shared';
+@use 'css-utilities/hidden';
+@use 'css-utilities/layer';
+
 
 .metric-flash {
     align-items: center;

package/src/components/metric/scss/index.scss

@@ -1,10 +1,13 @@
-@use '/shared';
+@use 'css-utilities/absolute';
+@use 'css-utilities/hidden';
+@use 'css-utilities/icon';
 @use 'flash';
 @use 'variables';
 
 .metric {
     background: var(--background);
     border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
     box-sizing: border-box;
     color: var(--color);
     container-type: inline-size;
@@ -79,7 +82,7 @@
         @extend %absolute-full;
         opacity: var(--overlay-opacity);
         pointer-events: none;
-        transition: opacity var(--overlay-duration) ease-out;
+        transition: opacity var(--overlay-duration) var(--easing-out);
     }
 
     &-plot {
@@ -94,7 +97,7 @@
 
         &:focus-visible {
             outline: 2px solid var(--focus-color);
-            outline-offset: 4px;
+            outline-offset: calc(var(--size-100) / 2);
         }
     }
 
@@ -118,8 +121,8 @@
         display: flex;
         font-size: var(--tip-font-size);
         gap: var(--size-300);
-        margin-bottom: 10px;
-        padding: 6px 12px;
+        margin-bottom: var(--size-200);
+        padding: calc(var(--size-300) / 2) 12px;
         position: absolute;
         translate: -50% 0;
         white-space: nowrap;
@@ -142,7 +145,6 @@
         font-size: var(--value-font-size);
         font-variant-numeric: tabular-nums;
         font-weight: var(--value-font-weight);
-        letter-spacing: -0.025em;
         line-height: 1.2;
     }
 

package/src/components/metric/scss/variables.scss

@@ -1,35 +1,41 @@
 @use '/tokens';
+@use 'css-utilities/background';
+@use 'css-utilities/box-shadow';
+@use 'css-utilities/surface';
 
+// A surface: its own level's background, lifted to match.
 .metric {
+    @extend %background-state, %box-shadow-state, %surface-raised-level;
     --area-color: color-mix(in oklab, var(--line-color) 8%, transparent);
-    --background: var(--color-grey-400);
+    --background-default: var(--surface-background-default);
     --border-radius: var(--border-radius-700);
+    --box-shadow-default: var(--surface-shadow-default);
     --color: var(--color-text-500);
-    --cursor-color: color-mix(in oklab, var(--color-text-300) 40%, transparent);
+    --cursor-color: color-mix(in oklab, var(--color-primary-300) 40%, transparent);
+    --dot-color: var(--line-color);
+    --dot-ring-color: var(--background);
+    --dot-size: 12px;
     // Long for a UI animation on purpose: the draw introduces the shape once, and a faster line reads as a flicker.
     --draw-duration: 0.7s;
     // Hidden and undrawn until the plot is shown.
     --draw-offset: 1;
     --draw-opacity: 0;
-    --draw-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-    --dot-color: var(--line-color);
-    --dot-ring-color: var(--background);
-    --dot-size: 12px;
-    --focus-color: var(--color-text-500);
+    --draw-timing-function: var(--easing-out);
+    --focus-color: var(--color-primary-500);
     --font-size: var(--font-size-400);
-    --line-color: var(--color-text-500);
+    --line-color: var(--color-primary-500);
     --line-width: 2.5;
     --muted-color: var(--color-text-300);
     // Shown while the plot is active.
-    --overlay-duration: 0.15s;
+    --overlay-duration: var(--duration-fast);
     --overlay-opacity: 0;
     --padding: var(--size-500);
     // Tracks the card's width (cqi) between a floor that keeps small cards readable and the full-size chart.
     --plot-height: clamp(64px, 30cqi, 160px);
     // Never below the tip's height plus its margin, so the tip clears the header.
     --plot-offset: clamp(40px, 9cqi, 48px);
-    --tip-background: var(--color-text-500);
-    --tip-color: var(--color-white-300);
+    --tip-background: var(--color-primary-500);
+    --tip-color: var(--color-surface);
     --tip-font-size: var(--font-size-300);
     --value-font-size: var(--font-size-700);
     --value-font-size-compact: var(--font-size-600);
@@ -62,32 +68,32 @@
     --arrow-size: 0.68em;
     --border-radius: var(--border-radius-300);
     --cell: linear(0, 0.092, 0.262, 0.426, 0.567, 0.679, 0.764, 0.827, 0.874, 0.908, 0.933, 0.951, 0.964, 0.974, 0.981, 0.986, 0.99, 0.993, 0.995, 0.996, 0.997, 0.998, 0.999, 0.999, 1);
-    --cell-duration: 360ms;
+    --cell-duration: var(--duration-slow);
     --clear: cubic-bezier(0.4, 0, 1, 1);
-    --clear-duration: 160ms;
+    --clear-duration: var(--duration-fast);
     --color-down: var(--color-red-500);
     // The green scale is tuned for dark surfaces; drop lightness so text stays legible on light ones.
     --color-up: oklch(from var(--color-green-500) 0.6 c h);
-    --drop-blur: 4px;
-    --drop-duration: 140ms;
+    --drop-blur: var(--blur-400);
+    --drop-duration: var(--duration-fast);
     --drop-offset: 0.7em;
     --font-size: var(--font-size-300);
     --font-weight: var(--font-weight-500);
-    --gap: 6px;
+    --gap: calc(var(--size-300) / 2);
     --lift: linear(0, 0.06, 0.193, 0.351, 0.506, 0.644, 0.758, 0.845, 0.909, 0.954, 0.983, 1.001, 1.011, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.003, 1.002, 1.001, 1.001, 1);
     --lift-duration: 390ms;
     --lift-scale: 1.05;
-    --padding: 3px 6px;
+    --padding: calc(var(--size-300) / 4) calc(var(--size-300) / 2);
     --pop: linear(0, 0.136, 0.423, 0.722, 0.953, 1.092, 1.145, 1.138, 1.1, 1.055, 1.017, 0.992, 0.98, 0.979, 0.983, 0.99, 0.996, 1, 1.003, 1.003, 1.003, 1.002, 1.001, 1, 1);
     --pop-duration: 460ms;
     --roll: linear(0, 0.065, 0.201, 0.348, 0.487, 0.606, 0.703, 0.779, 0.837, 0.881, 0.913, 0.937, 0.955, 0.968, 0.977, 0.984, 0.988, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 1);
-    --roll-blur: 5px;
-    --roll-duration: 340ms;
+    --roll-blur: var(--blur-400);
+    --roll-duration: var(--duration-slow);
     --roll-offset: 0.85em;
     --settle: linear(0, 0.086, 0.242, 0.399, 0.533, 0.641, 0.725, 0.79, 0.84, 0.879, 0.908, 0.93, 0.947, 0.96, 0.969, 0.977, 0.982, 0.987, 0.99, 0.992, 0.994, 0.995, 0.997, 0.997, 1);
     --settle-duration: 660ms;
     --tint-opacity: 14%;
-    --tone-duration: 200ms;
+    --tone-duration: var(--duration-moderate);
 
     &--down {
         --tone: var(--color-down);

package/src/components/nav/index.ts

@@ -10,4 +10,4 @@ const nav: { spy: typeof spy, toc: typeof toc, tree: typeof tree } = { spy, toc,
 export default nav;
 export type { Mode, Spy } from './spy';
 export type { TocLink } from './toc';
-export type { Current, TreeGroup, TreeLink, TreeSection } from './tree';
+export type { Current, Indicator, TreeGroup, TreeLink, TreeSection } from './tree';