@esportsplus/ui 0.57.0 → 0.58.0

package/src/components/tooltip/scss/_shared.scss

@@ -1,5 +1,5 @@
-@use '/shared';
 @use '/tokens';
+@use 'css-utilities/reset';
 
 // A popover, so it sits in the top layer; the UA popover styles are undone here. The padding on the anchor side is
 // the gap to the trigger, which also carries the pointer across to interactive content. 'tooltip.shared' sets the
@@ -33,11 +33,6 @@
         translate: 0;
     }
 
-    // A warm handoff from another delayed tooltip swaps straight in.
-    &.tooltip-shared--instant > .tooltip-shared-box {
-        transition: none;
-    }
-
     &--e {
         padding-left: var(--spacer);
     }
@@ -68,7 +63,6 @@
         padding-right: var(--spacer);
     }
 
-
     &-box {
         background: var(--background);
         border-radius: var(--radius);
@@ -88,6 +82,7 @@
         translate: var(--box-translate);
     }
 
+
     // A 'frame--swap', centered in the box so the box can resize around it; centering takes 'transform', leaving
     // 'translate' to the frame. 'tooltip.shared' sets '--travel-x' and '--travel-y' to the unit vector of the trip
     // between triggers, so incoming content drifts in along it and outgoing content carries on out the far side.
@@ -106,4 +101,9 @@
             --color: inherit;
         }
     }
+
+    // A warm handoff from another delayed tooltip swaps straight in.
+    &.tooltip-shared--instant > .tooltip-shared-box {
+        transition: none;
+    }
 }

package/src/components/tooltip/scss/_south.scss

@@ -1,14 +1,4 @@
 @mixin south($active) {
-    &--se,
-    &--sw {
-        position: absolute;
-        top: calc(100% + var(--spacer) - var(--offset));
-
-        #{$active} {
-            translate: 0 var(--offset);
-        }
-    }
-
     &--s {
         position: absolute;
         right: 50%;
@@ -26,6 +16,16 @@
         transform-origin: top right;
     }
 
+    &--se,
+    &--sw {
+        position: absolute;
+        top: calc(100% + var(--spacer) - var(--offset));
+
+        #{$active} {
+            translate: 0 var(--offset);
+        }
+    }
+
     &--sw {
         left: 0;
         transform-origin: top left;

package/src/components/tooltip/scss/_west.scss

@@ -1,14 +1,4 @@
 @mixin west($active) {
-    &--wn,
-    &--ws {
-        position: absolute;
-        right: calc(100% + var(--spacer) - var(--offset));
-
-        #{$active} {
-            translate: calc(var(--offset) * -1);
-        }
-    }
-
     &--w {
         bottom: 50%;
         position: absolute;
@@ -26,6 +16,16 @@
         transform-origin: top right;
     }
 
+    &--wn,
+    &--ws {
+        position: absolute;
+        right: calc(100% + var(--spacer) - var(--offset));
+
+        #{$active} {
+            translate: calc(var(--offset) * -1);
+        }
+    }
+
     &--ws {
         bottom: 0;
         transform-origin: bottom right;

package/src/components/tooltip/scss/index.scss

@@ -1,5 +1,5 @@
-@use '/shared';
 @use '/tokens';
+@use 'css-utilities/layer';
 @use 'center' as *;
 @use 'east' as *;
 @use 'menu';
@@ -53,23 +53,12 @@
         filter: url(#tooltip-morph-goo);
     }
 
-    // Morph tooltips (-2) sit behind the trigger. A child can't paint under its parent's own
-    // background, so repaint that background above them; the label still paints on top.
-    // Shares '.button::after' (its shadow layer) when the trigger is a button.
-    &:has(> .tooltip-content--morph, > .tooltip-message--morph, > :not(.tooltip) > .tooltip-content--morph, > :not(.tooltip) > .tooltip-message--morph)::after {
-        @extend %layer;
-        background: inherit;
-        content: '';
-        display: block;
-        z-index: -1;
-    }
-
-
     &-arrow {
         margin-inline: -1px;
         rotate: var(--rotate);
     }
 
+
     &-content,
     &-message {
         background: var(--background);
@@ -93,6 +82,7 @@
         $not-active: '#{tokens.state(inactive, ".tooltip")} > &, #{tokens.state(inactive, ".tooltip")} :not(.tooltip) > &';
 
         #{$active} {
+            --transition-duration: var(--duration-moderate);
             opacity: 1;
             scale: 1;
         }
@@ -103,17 +93,17 @@
             }
         }
 
+        &--context {
+            position: absolute;
+        }
+
+
         // A warm handoff between delayed tooltips ('delay') swaps straight in. Single-class specificity and
         // ahead of the '--morph' variant, so it keeps its own motion.
         &:where(.tooltip.tooltip--instant > *, .tooltip.tooltip--instant :not(.tooltip) > *) {
             transition: none;
         }
 
-
-        &--context {
-            position: absolute;
-        }
-
         @include center($active);
         @include east($active);
         @include north($active);
@@ -130,8 +120,6 @@
             // The overshooting clip would reveal the shadow around the box mid-spring.
             box-shadow: none;
             clip-path: inset(var(--morph-top) var(--morph-right) var(--morph-bottom) var(--morph-left) round var(--morph-radius));
-            // Lets the background layer reach back to the trigger; clip-path does the clipping.
-            overflow: visible;
             // Blurs the content. The background layer is one flat colour overhanging the clip by three
             // blur radii, so within the clip only text and media visibly blur; the container stays
             // crisp and flat. (A backdrop-filter overlay instead paints its blur as an unclipped
@@ -141,6 +129,8 @@
             // a transparent trigger, or before the first open when there's no clip yet), switching
             // off only once the close has finished.
             opacity: 1;
+            // Lets the background layer reach back to the trigger; clip-path does the clipping.
+            overflow: visible;
             // Closing: content blurs quickly as the shape starts to shrink.
             transition:
                 filter var(--morph-close-duration) cubic-bezier(0.16, 1, 0.3, 1),
@@ -190,6 +180,17 @@
         pointer-events: none;
         white-space: nowrap;
     }
+
+    // Morph tooltips (-2) sit behind the trigger. A child can't paint under its parent's own
+    // background, so repaint that background above them; the label still paints on top.
+    // Shares '.button::after' (its shadow layer) when the trigger is a button.
+    &:has(> .tooltip-content--morph, > .tooltip-message--morph, > :not(.tooltip) > .tooltip-content--morph, > :not(.tooltip) > .tooltip-message--morph)::after {
+        @extend %layer;
+        background: inherit;
+        content: '';
+        display: block;
+        z-index: -1;
+    }
 }
 
 

package/src/components/tooltip/scss/variables.scss

@@ -1,30 +1,40 @@
 @use '/tokens';
+@use 'css-utilities/background';
+@use 'css-utilities/box-shadow';
+@use 'css-utilities/surface';
 
 .tooltip {
     // Set a translucent color to review the safe area shape.
     --safe-color: transparent;
 
+    &-arrow {
+        --rotate: 0deg;
+    }
+
+    // Floating layers, a level above whatever opened them.
     &-content,
     &-message {
-        --background: var(--background-default);
-        --background-default: transparent;
+        @extend %background-state, %box-shadow-state, %surface-raised-level;
         --border-radius: var(--border-radius-400);
-        --box-shadow: var(--box-shadow-400);
+        --box-shadow-default: var(--surface-shadow-default);
         --max-width: calc(90vw - (var(--size-700) * 2));
         --min-width: auto;
         --offset: calc(var(--spacer) * 2);
         --scale: 1;
         --spacer: var(--size-300);
+        // Closing; the open state swaps in the entrance duration.
+        --transition-duration: var(--duration-moderate-exit);
+        --transition-timing-function: var(--easing-spring);
         --width: auto;
 
         &--morph {
-            --morph-blur: 4px;
-            --morph-close-duration: 0.16s;
+            --morph-blur: var(--blur-400);
+            --morph-close-duration: var(--duration-moderate-exit);
             // Starts clearing as soon as content emerges from behind the trigger, settling with the shape.
             --morph-focus-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
             --morph-land: 2px;
-            --morph-open-duration: 0.12s;
-            --morph-timing-function: cubic-bezier(0.2, 0, 0, 1);
+            --morph-open-duration: var(--duration-moderate);
+            --morph-timing-function: var(--easing-spring);
             // Motion comes from the morph, not the slide/scale.
             --offset: 0px;
             --scale: 1;
@@ -38,29 +48,21 @@
         &--scale-spring {
             --offset: var(--spacer);
             --scale: 0.88;
-            --transition-duration: 0.24s;
-            --transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
         }
 
         &--spring {
             --offset: calc(var(--spacer) * 3);
             --scale: 0.96;
-            --transition-duration: 0.24s;
-            --transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
         }
     }
 
-    &-arrow {
-        --rotate: 0deg;
-    }
-
     &-content[role='menu'] {
         --option-focus-background: color-mix(in srgb, currentColor 12%, transparent);
     }
 
     &-message {
-        --background-default: var(--color-black-400);
-        --color: var(--color-white-400);
+        --background-default: var(--color-primary-400);
+        --color: var(--surface-background-default);
         --font-size: var(--font-size-300);
         --font-weight: var(--font-weight-400);
         --padding-horizontal: var(--size-300);
@@ -69,97 +71,103 @@
 }
 
 
-.tooltip--menu {
-    --background: var(--color-white-400);
-    --background-hover: var(--color-grey-500);
-    --border-radius: var(--border-radius-600);
-    --box-shadow: var(--box-shadow-500);
-    --close-duration: 0.12s;
-    --color: var(--color-text-500);
-    --color-danger: var(--color-red-400);
-    --color-disabled: var(--color-text-300);
-    --color-hint: var(--color-text-300);
-    --font-size: 0.875rem;
-    --gap: var(--size-200);
-    --item-border-radius: var(--border-radius-400);
-    --item-height: 36px;
-    --item-padding: var(--size-200);
-    --offset: var(--size-200);
-    --open-duration: 0.28s;
-    --open-timing-function: cubic-bezier(0.2, 0, 0, 1);
-    --padding: 4px;
-    --scrim: oklch(from var(--color-black-400) l c h / 0.08);
-    --width: 17rem;
-
-    &.tooltip--instant {
-        --close-duration: 0s;
-        --open-duration: 0s;
-    }
+.tooltip {
+    &--menu {
+        --border-radius: var(--border-radius-600);
+        --close-duration: var(--duration-moderate-exit);
+        --color: var(--color-text-500);
+        --color-danger: var(--color-red-400);
+        --color-disabled: var(--color-text-300);
+        --color-hint: var(--color-text-300);
+        --font-size: var(--font-size-300);
+        --gap: var(--size-200);
+        --item-border-radius: var(--border-radius-400);
+        --item-height: 36px;
+        --item-padding: var(--size-200);
+        --offset: var(--size-200);
+        --open-duration: var(--duration-moderate);
+        --open-timing-function: var(--easing-spring);
+        --padding: calc(var(--size-100) / 2);
+        --scrim: oklch(from var(--surface-shadow-color) 0 0 0 / calc(alpha * 0.9));
+        --width: 17rem;
+
+        &.tooltip--instant {
+            --close-duration: 0s;
+            --open-duration: 0s;
+        }
 
-    @media (pointer: coarse) {
-        --item-height: 44px;
+        @media (pointer: coarse) {
+            --item-height: 44px;
+        }
     }
 
-    @media (prefers-reduced-motion: reduce) {
-        --close-duration: 0s;
-        --open-duration: 0s;
+    // Items take the hover and pressed steps of the panel they sit in.
+    &-menu-item {
+        @extend %background-state;
+        --background-hover: var(--surface-background-hover);
+        --background-pressed: var(--surface-background-pressed);
     }
-}
 
-// Read by a branch panel's header title, which crossfades to bold while that panel is open. Every panel sets its
-// own, so a parent panel's state never reaches its children's titles.
-.tooltip-menu-panel {
-    --title-bold-opacity: 0;
-    --title-regular-opacity: 1;
-
-    @include tokens.state(active) {
-        --title-bold-opacity: 1;
-        --title-regular-opacity: 0;
+    // A surface of its own, so a branch panel sits a level above the panel it opened from. The title opacities are read
+    // by a branch panel's header title, which crossfades to bold while that panel is open; every panel sets its own, so a
+    // parent panel's state never reaches its children's titles.
+    &-menu-panel {
+        @extend %background-state, %box-shadow-state, %surface-raised-level;
+        --background-default: var(--surface-background-default);
+        --box-shadow-default: var(--surface-shadow-default);
+        --title-bold-opacity: 0;
+        --title-regular-opacity: 1;
+
+        @include tokens.state(active) {
+            --title-bold-opacity: 1;
+            --title-regular-opacity: 0;
+        }
     }
-}
 
 
-// '--padding' and '--radius' rather than the usual names: the root resets '--padding-*' and '--border-radius' on
-// every element, so the box and layers inside would never see them.
-.tooltip-shared {
-    --background: var(--color-black-400);
-    --blur: 7px;
-    --box-shadow: var(--box-shadow-400);
-    --close-duration: 0.128s;
-    --color: var(--color-white-400);
-    --font-size: var(--font-size-300);
-    --font-weight: var(--font-weight-400);
-    --glide-duration: 0.4s;
-    --glide-timing-function: cubic-bezier(0.22, 1.12, 0.36, 1);
-    --max-width: calc(90vw - (var(--size-700) * 2));
-    --open-duration: 0.16s;
-    --padding: var(--size-300);
-    --radius: var(--border-radius-400);
-    --rise: 4px;
-    --scale: 0.94;
-    --spacer: var(--size-300);
-    --timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-    --white-space: nowrap;
-
-    // Read by the box: where it rises from, toward the trigger.
-    &--e {
-        --box-translate: calc(var(--rise) * -1) 0;
-    }
+    // '--padding' and '--radius' rather than the usual names: the root resets '--padding-*' and '--border-radius' on
+    // every element, so the box and layers inside would never see them.
+    &-shared {
+        @extend %background-state, %box-shadow-state, %surface-raised-level;
+        --background-default: var(--color-primary-400);
+        --blur: var(--blur-500);
+        --box-shadow-default: var(--surface-shadow-default);
+        --close-duration: var(--duration-moderate-exit);
+        --color: var(--surface-background-default);
+        --font-size: var(--font-size-300);
+        --font-weight: var(--font-weight-400);
+        --glide-duration: var(--duration-moderate);
+        --glide-timing-function: var(--easing-spring);
+        --max-width: calc(90vw - (var(--size-700) * 2));
+        --open-duration: var(--duration-moderate);
+        --padding: var(--size-300);
+        --radius: var(--border-radius-400);
+        --rise: 4px;
+        --scale: 0.94;
+        --spacer: var(--size-300);
+        --timing-function: var(--easing-spring);
+        --white-space: nowrap;
 
-    &--interactive {
-        --white-space: normal;
-    }
+        // Read by the box: where it rises from, toward the trigger.
+        &--e {
+            --box-translate: calc(var(--rise) * -1) 0;
+        }
 
-    &--n {
-        --box-translate: 0 var(--rise);
-    }
+        &--interactive {
+            --white-space: normal;
+        }
 
-    &--s {
-        --box-translate: 0 calc(var(--rise) * -1);
-    }
+        &--n {
+            --box-translate: 0 var(--rise);
+        }
 
-    &--w {
-        --box-translate: var(--rise) 0;
+        &--s {
+            --box-translate: 0 calc(var(--rise) * -1);
+        }
+
+        &--w {
+            --box-translate: var(--rise) 0;
+        }
     }
 }
 

package/src/components/typewriter/scss/_retype.scss

@@ -1,4 +1,5 @@
-@use '/shared';
+@use 'css-utilities/hidden';
+
 
 // The caret is solid while keys move and hidden while a selection is up, as in a real text field.
 .typewriter-retype {
@@ -9,11 +10,6 @@
         animation: typewriter-retype--ink var(--ink-duration) var(--ease-out);
     }
 
-    &-line,
-    &-sizer {
-        grid-area: 1 / 1;
-    }
-
     &-line {
         text-align: left;
 
@@ -26,6 +22,11 @@
         }
     }
 
+    &-line,
+    &-sizer {
+        grid-area: 1 / 1;
+    }
+
     &-sizer {
         visibility: hidden;
     }
@@ -41,6 +42,11 @@
         isolation: isolate;
         position: relative;
 
+        &--selecting::before {
+            scale: 1 1;
+            transition: scale var(--select-duration) var(--ease-out);
+        }
+
         &::before {
             background: var(--selection-color);
             border-radius: var(--selection-radius);
@@ -51,11 +57,6 @@
             transform-origin: right;
             z-index: -1;
         }
-
-        &--selecting::before {
-            scale: 1 1;
-            transition: scale var(--select-duration) var(--ease-out);
-        }
     }
 }
 

package/src/components/typewriter/scss/_rotate.scss

@@ -1,4 +1,5 @@
-@use '/shared';
+@use 'css-utilities/hidden';
+
 
 .typewriter-rotate {
     color: var(--color);

package/src/components/typewriter/scss/variables.scss

@@ -1,3 +1,43 @@
+.typewriter {
+    &-retype {
+        --ease-out: var(--easing-out);
+        --ink-blur: var(--blur-300);
+        --ink-duration: var(--duration-fast);
+        // Read by JS: each key's delay, a base plus up to the jitter, which lands around 8 to 14 keys a second, the pace
+        // of someone who knows the word.
+        --key-duration: 62ms;
+        --key-jitter-duration: 64ms;
+        --select-duration: 220ms;
+        --selection-color: oklch(from var(--color-primary-500) l c h / 0.15);
+        --selection-radius: 3px;
+
+        // Words land whole and still fade in and get selected, without the blur or the sweep.
+        @media (prefers-reduced-motion: reduce) {
+            --ink-blur: 0px;
+            --key-duration: 0s;
+            --select-duration: 0s;
+        }
+    }
+
+    &-rotate {
+        --color: inherit;
+        // Read by JS: how the letters a swap keeps travel to their new places, and the width with them. Shared letters
+        // can travel most of a word across, so they get longer than a typical UI tween; any shorter and it reads as a
+        // jump.
+        --glide-duration: 440ms;
+        --glide-easing: cubic-bezier(0.77, 0, 0.175, 1);
+
+        // A swap is a plain crossfade.
+        @media (prefers-reduced-motion: reduce) {
+            --glide-duration: 0s;
+        }
+
+        &--accent {
+            --color: var(--color-blue-400);
+        }
+    }
+}
+
 .typewriter,
 .typewriter-retype {
     --caret: '';
@@ -6,7 +46,7 @@
     --caret-color: currentColor;
     --caret-duration: 1.06s;
     --caret-height: 1.1em;
-    --caret-offset: 2px;
+    --caret-offset: calc(var(--size-100) / 4);
     --caret-radius: 999px;
     --caret-timing-function: linear;
     --caret-width: 2px;
@@ -34,41 +74,3 @@
         --caret-width: auto;
     }
 }
-
-.typewriter-retype {
-    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
-    --ink-blur: 2px;
-    --ink-duration: 140ms;
-    // Read by JS: each key's delay, a base plus up to the jitter, which lands around 8 to 14 keys a second, the pace
-    // of someone who knows the word.
-    --key-duration: 62ms;
-    --key-jitter-duration: 64ms;
-    --select-duration: 220ms;
-    --selection-color: oklch(from var(--color-text-500) l c h / 0.15);
-    --selection-radius: 3px;
-
-    // Words land whole and still fade in and get selected, without the blur or the sweep.
-    @media (prefers-reduced-motion: reduce) {
-        --ink-blur: 0px;
-        --key-duration: 0s;
-        --select-duration: 0s;
-    }
-}
-
-.typewriter-rotate {
-    --color: inherit;
-    // Read by JS: how the letters a swap keeps travel to their new places, and the width with them. Shared letters
-    // can travel most of a word across, so they get longer than a typical UI tween; any shorter and it reads as a
-    // jump.
-    --glide-duration: 440ms;
-    --glide-easing: cubic-bezier(0.77, 0, 0.175, 1);
-
-    // A swap is a plain crossfade.
-    @media (prefers-reduced-motion: reduce) {
-        --glide-duration: 0s;
-    }
-
-    &--accent {
-        --color: var(--color-blue-400);
-    }
-}