@esportsplus/ui 0.57.0 → 0.58.0

package/src/components/breadcrumb/scss/variables.scss

@@ -1,43 +1,38 @@
-@use '/tokens';
-
 .breadcrumb {
     --color: var(--color-text-300);
     --color-active: var(--color-text-500);
-    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
     // Arriving segments fade in slower than leaving ones fade out, so the gap a leaving one opens is already
     // closing by the time the eye looks for it.
-    --enter-duration: 200ms;
-    --exit-duration: 120ms;
-    --focus-color: var(--color-text-500);
+    --enter-duration: var(--duration-moderate);
+    --exit-duration: var(--duration-moderate-exit);
+    --focus-color: var(--color-primary-500);
     --font-size: var(--font-size-300);
     --font-weight-current: var(--font-weight-500);
-    --height: 36px;
-    --hover-background: oklch(from var(--color-text-500) l c h / 0.06);
-    --link-padding: 6px;
+    --height: 24px;
+    --hover-background: var(--surface-background-hover);
+    // Resolved here, since a link's color state redefines --color and --color-active on it.
+    --link-color: var(--color);
+    --link-color-hover: var(--color-active);
+    --link-padding: calc(var(--size-300) / 2);
     --link-radius: var(--border-radius-300);
-    --menu-background: var(--color-grey-400);
-    --menu-box-shadow: 0 0 0 var(--border-width-400) var(--color-border-300), var(--box-shadow-300);
-    --menu-duration-in: 0.18s;
-    --menu-duration-out: 0.1s;
     --menu-radius: var(--border-radius-600);
     --menu-width: 192px;
     // Options are '.link's, and '.text' redefines --color and --color-active on them, so these resolve here first.
     --option-color: var(--color-active);
     --option-icon-color: var(--color);
-    --separator-color: oklch(from var(--color-text-300) l c h / 0.5);
-    --separator-size: 16px;
-    --slide-duration: 310ms;
-    // Critically damped (no bounce) spring: a trail that overshoots reads as unstable.
-    --slide-easing: linear(0, 0.0432 4.2%, 0.1402 8.3%, 0.2575 12.5%, 0.3764 16.7%, 0.4867 20.8%, 0.584 25%, 0.667 29.2%, 0.7361 33.3%, 0.7925 37.5%, 0.838 41.7%, 0.8743 45.8%, 0.9029 50%, 0.9254 54.2%, 0.9428 58.3%, 0.9564 62.5%, 0.9668 66.7%, 0.9748 70.8%, 0.9809 75%, 0.9856 79.2%, 0.9892 83.3%, 0.9918 87.5%, 0.9939 91.7%, 0.9954 95.8%, 1);
-    --trigger-width: 36px;
-    --underline-color: oklch(from var(--color-text-500) l c h / 0.4);
+    --separator-color: oklch(from var(--color-primary-300) l c h / 0.5);
+    --separator-size: var(--size-400);
+    --slide-duration: var(--duration-moderate);
+    --slide-easing: var(--easing-spring);
+    --trigger-width: var(--height);
+    --underline-color: oklch(from var(--color-primary-500) l c h / 0.4);
 
 
     &--compact {
-        --height: 28px;
-        --link-padding: 4px;
+        --height: var(--size-400);
+        --link-padding: calc(var(--size-100) / 2);
         --separator-size: 14px;
-        --trigger-width: 28px;
+        --trigger-width: var(--height);
     }
 
     // Zeroes every fold timing, so nothing transitions until the first fit has painted.
@@ -47,19 +42,16 @@
         --slide-duration: 0s;
     }
 
+    // A surface through the tooltip content it reuses, so its colors are read at its own level.
     &-menu.tooltip-content {
-        --background-default: var(--menu-background);
+        --background-default: var(--surface-background-default);
         --border-radius: var(--menu-radius);
-        --box-shadow: var(--menu-box-shadow);
+        --box-shadow-default:
+            0 0 0 var(--border-width-400) var(--surface-border-default),
+            var(--surface-shadow-default);
         --offset: 0px;
         --scale: 0.95;
         --spacer: 6px;
-        --transition-duration: var(--menu-duration-out);
-        --transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-
-        @include tokens.state(active) {
-            --transition-duration: var(--menu-duration-in);
-        }
     }
 
     // Clips the body only while folded or unfolding, so focus rings and the menu aren't cut off at rest.

package/src/components/button/scss/_fan.scss

@@ -8,18 +8,6 @@
     @include tokens.state(active) {
         z-index: 9;
 
-        > .button-fan-options > .button-fan-option {
-            --delay: calc(var(--i) * var(--stagger));
-            opacity: 1;
-            pointer-events: auto;
-            scale: 1;
-            translate: 0 0;
-
-            &:active {
-                scale: var(--option-pressed-scale);
-            }
-        }
-
         > .button--fan .button-fan-swap {
             > :first-child {
                 opacity: 0;
@@ -31,6 +19,39 @@
                 rotate: 0deg;
             }
         }
+
+        > .button-fan-options > .button-fan-option {
+            --delay: calc(var(--i) * var(--stagger));
+            opacity: 1;
+            pointer-events: auto;
+            scale: 1;
+            translate: 0 0;
+        }
+    }
+
+
+    &--e > .button-fan-options {
+        flex-direction: row;
+        inset: 0 auto 0 100%;
+        padding-left: var(--spacer);
+    }
+
+    &--n > .button-fan-options {
+        flex-direction: column-reverse;
+        inset: auto 0 100% 0;
+        padding-bottom: var(--spacer);
+    }
+
+    &--s > .button-fan-options {
+        flex-direction: column;
+        inset: 100% 0 auto 0;
+        padding-top: var(--spacer);
+    }
+
+    &--w > .button-fan-options {
+        flex-direction: row-reverse;
+        inset: 0 100% 0 auto;
+        padding-right: var(--spacer);
     }
 
 
@@ -67,7 +88,7 @@
         scale: var(--option-scale);
         transform-origin: var(--origin);
         transition:
-            opacity var(--option-opacity-duration) ease-out var(--delay),
+            opacity var(--option-opacity-duration) var(--option-spring) var(--delay),
             scale var(--option-spring-duration) var(--option-spring) var(--delay),
             translate var(--option-spring-duration) var(--option-spring) var(--delay);
         translate:
@@ -84,42 +105,17 @@
     }
 
 
-    &--e > .button-fan-options {
-        flex-direction: row;
-        inset: 0 auto 0 100%;
-        padding-left: var(--spacer);
-    }
-
-    &--n > .button-fan-options {
-        flex-direction: column-reverse;
-        inset: auto 0 100% 0;
-        padding-bottom: var(--spacer);
-    }
-
-    &--s > .button-fan-options {
-        flex-direction: column;
-        inset: 100% 0 auto 0;
-        padding-top: var(--spacer);
-    }
-
-    &--w > .button-fan-options {
-        flex-direction: row-reverse;
-        inset: 0 100% 0 auto;
-        padding-right: var(--spacer);
-    }
-
-
     @media (prefers-reduced-motion: reduce) {
         --swap-rotate: 0deg;
 
+        .button-fan-swap > * {
+            transition: opacity var(--swap-spring-duration) var(--swap-spring);
+        }
+
         > .button-fan-options > .button-fan-option {
             scale: 1;
-            transition: opacity 0.15s ease-out;
+            transition: opacity var(--option-opacity-duration) var(--option-spring) var(--delay);
             translate: none;
         }
-
-        .button-fan-swap > * {
-            transition: opacity 0.15s ease-out;
-        }
     }
 }

package/src/components/button/scss/_morph.scss

@@ -1,5 +1,67 @@
-@use '/shared';
 @use '/tokens';
+@use 'css-utilities/hidden';
+@use 'css-utilities/icon';
+
+.button {
+    &--morph {
+        // Wait for the width to mostly open before shaking the settled shape.
+        &-error {
+            animation: button-morph-shake var(--morph-shake-duration) var(--morph-shake-easing) 150ms;
+        }
+
+        // Keyed off the status, since the icons are <svg>s, which take no dynamic class.
+        &-loading .button-morph-icon--loading,
+        &-success .button-morph-icon--success {
+            @extend %icon-swap-active;
+        }
+    }
+
+    &-morph {
+        // Every layer shares one grid cell, so the idle width is the widest label;
+        // in the circle the cell overflows both sides equally and the button clips it.
+        &-content {
+            display: grid;
+            flex-shrink: 0;
+            place-items: center;
+        }
+
+        &-icon {
+            @extend %icon-stroke, %icon-swap;
+            grid-area: 1 / 1;
+            height: var(--morph-icon-size);
+            width: var(--morph-icon-size);
+        }
+
+        &-live {
+            @extend %hidden-visually;
+        }
+
+        // Turns about the icon box: the arc alone is off-centre, so its own box would wobble. The turn is the
+        // '.button--processing' keyframes, which '.button-icon--spin' shares too.
+        &-spinner {
+            animation: button--processing 700ms linear infinite;
+            transform-box: view-box;
+            transform-origin: center;
+        }
+
+        // Leaves before the width has closed on it; arrives as it opens.
+        &-text {
+            filter: blur(var(--blur-400));
+            grid-area: 1 / 1;
+            opacity: 0;
+            transition:
+            filter var(--duration-fast-exit) var(--easing-spring),
+            opacity var(--duration-fast-exit) var(--easing-spring);
+            white-space: nowrap;
+
+            @include tokens.state(active) {
+                filter: blur(0px);
+                opacity: 1;
+                transition-duration: var(--duration-fast);
+            }
+        }
+    }
+}
 
 // Compound selector so these win over `.button`, whose rules follow this partial.
 .button.button--morph {
@@ -10,92 +72,18 @@
     overflow: hidden;
     touch-action: manipulation;
     transition:
-        background-color 200ms ease-out,
-        color 200ms ease-out,
-        scale 200ms ease-out;
+        background-color var(--duration-fast) var(--easing-spring),
+        color var(--duration-fast) var(--easing-spring);
     user-select: none;
 
-    &:active:not([aria-disabled='true']) {
-        scale: var(--morph-scale-pressed);
-    }
-
     &:focus-visible {
         outline: 2px solid var(--morph-focus-color);
-        outline-offset: 2px;
+        outline-offset: calc(var(--size-100) / 4);
     }
 
     &[aria-disabled='true'] {
         cursor: default;
     }
-
-    @media (prefers-reduced-motion: reduce) {
-        transition:
-            background-color 200ms ease-out,
-            color 200ms ease-out;
-
-        &:active:not([aria-disabled='true']) {
-            scale: 1;
-        }
-    }
-}
-
-.button--morph {
-    // Wait for the width to mostly open before shaking the settled shape.
-    &-error {
-        animation: button-morph-shake var(--morph-shake-duration) var(--morph-shake-easing) 150ms;
-    }
-
-    // Keyed off the status, since the icons are <svg>s, which take no dynamic class.
-    &-loading .button-morph-icon--loading,
-    &-success .button-morph-icon--success {
-        @extend %icon-swap-active;
-    }
-}
-
-.button-morph {
-    // Every layer shares one grid cell, so the idle width is the widest label;
-    // in the circle the cell overflows both sides equally and the button clips it.
-    &-content {
-        display: grid;
-        flex-shrink: 0;
-        place-items: center;
-    }
-
-    &-icon {
-        @extend %icon-stroke, %icon-swap;
-        grid-area: 1 / 1;
-        height: var(--morph-icon-size);
-        width: var(--morph-icon-size);
-    }
-
-    &-live {
-        @extend %hidden-visually;
-    }
-
-    // Turns about the icon box: the arc alone is off-centre, so its own box would wobble. The turn is the
-    // '.button--processing' keyframes, which '.button-icon--spin' shares too.
-    &-spinner {
-        animation: button--processing 700ms linear infinite;
-        transform-box: view-box;
-        transform-origin: center;
-    }
-
-    // Leaves in 150ms, before the width has closed on it; arrives in 200ms as it opens.
-    &-text {
-        filter: blur(4px);
-        grid-area: 1 / 1;
-        opacity: 0;
-        transition:
-            filter 150ms ease-out,
-            opacity 150ms ease-out;
-        white-space: nowrap;
-
-        @include tokens.state(active) {
-            filter: blur(0px);
-            opacity: 1;
-            transition-duration: 200ms;
-        }
-    }
 }
 
 

package/src/components/button/scss/_sidebar.scss

@@ -1,50 +1,61 @@
 .button-sidebar {
-    // Hidden panels keep the divider slid out; hover and focus preview the opposite state.
-    &[aria-expanded='false'],
-    &[aria-expanded='true']:focus-visible {
-        --divider-x: var(--divider-travel);
-    }
-
-    &[aria-expanded='false']:focus-visible {
-        --divider-x: 0px;
+    &--right &-graphic {
+        scale: -1 1;
     }
 
-    @media (hover: hover) {
-        &[aria-expanded='false']:hover {
-            --divider-x: 0px;
-        }
+    // Chained through '.icon' so it wins over the icon's own size and fill regardless of stylesheet order.
+    &-icon.icon {
+        --size: var(--icon-size);
 
-        &[aria-expanded='true']:hover {
-            --divider-x: var(--divider-travel);
+        // Drawn in strokes, with fills set per path, where the icon would fill the whole SVG.
+        .button-sidebar-graphic {
+            fill: none;
+            overflow: hidden;
         }
     }
 
-    // The frame clips the divider, so it disappears as it leaves rather than sliding past the glyph.
-    &-divider {
-        transform: translateX(var(--divider-x));
-        transition: transform var(--divider-duration) ease;
+    // A round-capped stroke stays rounded at every width; the shift pins its outer edge against the frame as it thins
+    // from 3 units to 1, whole units that keep the closed line on the pixel grid at the default icon size. Caps add
+    // the width to the 5-unit line, so the stretch restores what thinning takes to hold it 8 units tall.
+    &-panel {
+        stroke-width: calc(1px + 2px * var(--panel-open));
+        transform:
+            translateX(calc((var(--panel-open) - 1) * 1px))
+            scaleY(calc((7 - 2 * var(--panel-open)) / 5));
+        transform-box: fill-box;
+        transform-origin: center;
+        transition:
+            stroke-width var(--panel-duration) var(--easing-spring),
+            transform var(--panel-duration) var(--easing-spring);
 
         @media (prefers-reduced-motion: reduce) {
             transition: none;
         }
     }
 
-    // Chained through '.icon' so it wins over the icon's own size and fill regardless of stylesheet order.
-    &-icon.icon {
-        --size: var(--icon-size);
+    &:not(&--held) {
+        &[aria-expanded='false']:focus-visible {
+            --panel-open: 1;
+        }
 
-        // Drawn in strokes, with fills set per path, where the icon would fill the whole SVG.
-        .button-sidebar-graphic {
-            fill: none;
-            overflow: hidden;
+        &[aria-expanded='true']:focus-visible {
+            --panel-open: 0;
         }
-    }
 
-    &-shadow {
-        opacity: var(--shadow-opacity);
+        @media (hover: hover) {
+            &[aria-expanded='false']:hover {
+                --panel-open: 1;
+            }
+
+            &[aria-expanded='true']:hover {
+                --panel-open: 0;
+            }
+        }
     }
 
-    &--right &-graphic {
-        scale: -1 1;
+    // Hidden panels thin the pill to a line; hover and focus preview the opposite state unless a toggle
+    // just happened under them.
+    &[aria-expanded='false'] {
+        --panel-open: 0;
     }
 }

package/src/components/button/scss/_split.scss

@@ -23,6 +23,15 @@
         border-start-end-radius: 0;
     }
 
+    > .button-split-action,
+    > .button-split-menu > .button-split-trigger {
+        &:focus-visible {
+            outline: var(--focus-width) solid var(--focus-color);
+            outline-offset: var(--focus-offset);
+            z-index: 1;
+        }
+    }
+
     // Overlaps the shared edge so the two borders read as one divider.
     > .button-split-menu > .button-split-trigger {
         --padding-horizontal: var(--trigger-padding-horizontal);
@@ -35,15 +44,6 @@
         }
     }
 
-    > .button-split-action,
-    > .button-split-menu > .button-split-trigger {
-        &:focus-visible {
-            outline: var(--focus-width) solid var(--focus-color);
-            outline-offset: var(--focus-offset);
-            z-index: 1;
-        }
-    }
-
 
     @media (prefers-reduced-motion: reduce) {
         &-chevron {

package/src/components/button/scss/index.scss

@@ -1,5 +1,13 @@
-@use '/shared';
 @use '/tokens';
+@use 'css-utilities/absolute';
+@use 'css-utilities/background';
+@use 'css-utilities/border';
+@use 'css-utilities/box-shadow';
+@use 'css-utilities/color';
+@use 'css-utilities/hidden';
+@use 'css-utilities/icon';
+@use 'css-utilities/layer';
+@use 'css-utilities/text';
 @use 'fan';
 @use 'kbd';
 @use 'morph';
@@ -8,7 +16,7 @@
 @use 'variables';
 
 .button {
-    @extend %background-state, %border-state, %color-state, %text;
+    @extend %background-state, %border-state, %box-shadow-state, %color-state, %text;
     align-content: center;
     align-items: center;
     background: var(--background);
@@ -26,25 +34,16 @@
         opacity var(--transition-duration) var(--transition-timing-function),
         scale var(--transition-duration) var(--transition-timing-function),
         translate var(--transition-duration) var(--transition-timing-function);
-    white-space: nowrap;
     translate: 0;
-
-
-    // Pseudo Element Box Shadow
-    &::after {
-        @extend %layer-box-shadow;
-    }
+    white-space: nowrap;
 
 
     // Stacks above the options so they reveal from behind it
     &--fan {
         z-index: 1;
-
-        @include tokens.state(pressed) {
-            scale: var(--trigger-pressed-scale);
-        }
     }
 
+
     &--feedback {
         -webkit-touch-callout: none;
         touch-action: manipulation;
@@ -218,6 +217,11 @@
         @extend %hidden-visually;
     }
 
+    // Pseudo Element Box Shadow
+    &::after {
+        @extend %layer-box-shadow;
+    }
+
     // An icon resolves '--color' itself rather than inheriting the label's eased colour, so it eases alongside. Zero
     // specificity, so an icon's own transition wins.
     :where(&) :where(.icon) {
@@ -227,6 +231,12 @@
     }
 
     @media (prefers-reduced-motion: reduce) {
+        &--kbd {
+            @include tokens.state(active pressed) {
+                translate: none;
+            }
+        }
+
         &--skeleton,
         &-icon--spin {
             animation: none;
@@ -236,11 +246,5 @@
         &-icon--draw {
             transition: none;
         }
-
-        &--kbd {
-            @include tokens.state(active pressed) {
-                translate: none;
-            }
-        }
     }
 }