@esportsplus/ui 0.57.0 → 0.58.0

package/src/components/shortcut-recorder/scss/index.scss

@@ -1,7 +1,13 @@
-@use '/shared';
 @use '/tokens';
+@use 'css-utilities/background';
+@use 'css-utilities/border';
 @use 'variables';
 
+// The field renders inside an 'error', which takes its place in the layout, so the wrapper keeps it from shrinking.
+.error:has(> .shortcut-recorder) {
+    flex-shrink: 0;
+}
+
 .shortcut-recorder {
     @extend %background-state, %border-state;
     align-items: center;
@@ -32,7 +38,7 @@
     }
 
     &-dot {
-        animation: shortcut-recorder-blink 1.1s ease-in-out infinite;
+        animation: shortcut-recorder-blink 1.1s var(--easing-in-out) infinite;
         background: var(--color-dot);
         border-radius: 50%;
         height: 6px;
@@ -44,11 +50,11 @@
         pointer-events: none;
 
         &--enter {
-            animation: shortcut-recorder-enter 300ms var(--timing-function-spring) backwards;
+            animation: shortcut-recorder-enter var(--duration-moderate) var(--timing-function-spring) backwards;
         }
 
         &--settle {
-            animation: shortcut-recorder-settle 300ms var(--timing-function-spring) calc(var(--index) * 30ms) backwards;
+            animation: shortcut-recorder-settle var(--duration-moderate) var(--timing-function-spring) calc(var(--index) * 30ms) backwards;
         }
     }
 
@@ -57,8 +63,8 @@
         color: var(--color-muted);
         display: flex;
         font-size: var(--font-size-small);
-        gap: 6px;
-        padding: 0 6px;
+        gap: calc(var(--size-300) / 2);
+        padding: 0 calc(var(--size-300) / 2);
         transition: color var(--transition-duration) var(--timing-function-out);
 
         &--fade {
@@ -77,11 +83,6 @@
     }
 }
 
-// The field renders inside an 'error', which takes its place in the layout, so the wrapper keeps it from shrinking.
-.error:has(> .shortcut-recorder) {
-    flex-shrink: 0;
-}
-
 @keyframes shortcut-recorder-blink {
     50% {
         opacity: 0.25;
@@ -90,7 +91,7 @@
 
 @keyframes shortcut-recorder-enter {
     from {
-        filter: blur(3px);
+        filter: blur(var(--blur-400));
         opacity: 0;
         scale: 0.8;
     }

package/src/components/shortcut-recorder/scss/variables.scss

@@ -1,35 +1,34 @@
 @use '/tokens';
 
 .shortcut-recorder {
-    --background-active: var(--color-white-300);
-    --background-default: var(--color-grey-400);
-    --background-hover: var(--color-white-300);
+    --background-active: var(--surface-background-active);
+    --background-default: var(--surface-background-default);
+    --background-hover: var(--surface-background-hover);
     // Held down it keeps the hover look until the click starts recording.
     --background-pressed: var(--background-hover);
-    --border-color-active: var(--color-text-500);
-    --border-color-default: var(--color-border-400);
+    --border-color-active: var(--color-primary-500);
+    --border-color-default: var(--surface-border-hover);
     --border-color-hover: var(--border-color-default);
     --border-color-pressed: var(--border-color-hover);
     --border-radius: var(--border-radius-500);
     --border-width: var(--border-width-default);
     --border-width-active: 1.5px;
-    --border-width-default: 1px;
+    --border-width-default: var(--border-width-400);
     --color: var(--color-text-500);
     --color-dot: var(--color-red-400);
     --color-error: var(--color-red-400);
     --color-muted: var(--color-text-300);
-    --focus-color: var(--color-text-500);
-    --focus-offset: 2px;
-    --focus-width: 2px;
+    --focus-color: var(--color-primary-500);
+    --focus-offset: calc(var(--size-100) / 4);
+    --focus-width: var(--border-width-500);
     --font-size: var(--font-size-400);
     --font-size-small: var(--font-size-300);
-    --gap: 4px;
+    --gap: calc(var(--size-100) / 2);
     --height: 36px;
     --min-width: 96px;
-    --padding-horizontal: 6px;
-    --timing-function-out: cubic-bezier(0.23, 1, 0.32, 1);
+    --padding-horizontal: calc(var(--size-300) / 2);
+    --timing-function-out: var(--easing-spring);
     --timing-function-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-    --transition-duration: 150ms;
 
     #{tokens.state(active)} {
         --border-width: var(--border-width-active);

package/src/components/sortable/scss/index.scss

@@ -1,4 +1,7 @@
-@use '/shared';
+@use 'css-utilities/drag';
+@use 'css-utilities/layer';
+@use 'css-utilities/reset';
+@use 'css-utilities/surface';
 @use 'variables';
 
 // Typed, so the drop can transition them; not inherited, so a write per frame restyles the copy alone.
@@ -21,44 +24,13 @@
 }
 
 .sortable {
-    > * {
-        @extend %drag-item;
-    }
-
-    // The dragged item stays in the list as its own placeholder: its contents fade out behind a dashed outline while
-    // it moves through the list. Leaving the class drops the transition, so they are back at once on landing.
-    > .sortable-item--held {
-        background: var(--placeholder-background);
-        border-color: transparent;
-        box-shadow: none;
-        color: transparent;
-        outline: var(--placeholder-border-width) dashed var(--placeholder-border-color);
-        outline-offset: calc(var(--placeholder-border-width) * -1);
-        transition:
-            background-color var(--transition-duration) var(--transition-timing-function),
-            color var(--transition-duration) var(--transition-timing-function);
-
-        > * {
-            opacity: 0;
-            transition: opacity var(--transition-duration) var(--transition-timing-function);
-        }
-    }
-
-    // Shows again at once under the fading copy: its own transitions, or its contents', would ease it back in after the
-    // copy has gone. Important, since they can come from any rule.
-    > .sortable-item--revealing,
-    > .sortable-item--revealing * {
-        transition: none !important;
-    }
-
-
     // The copy following the pointer, a popover in the top layer: fixed at the box the item was picked up from,
     // then moved by the pointer's offset and the swing, which JS writes every frame.
     &-drag {
-        @extend %reset-popover;
+        @extend %reset-popover, %surface-raised-level;
         animation: var(--drag-animation);
         border-radius: var(--sortable-radius);
-        box-shadow: var(--drag-box-shadow);
+        box-shadow: var(--surface-shadow-default);
         box-sizing: border-box;
         height: var(--sortable-height);
         left: var(--sortable-left);
@@ -77,14 +49,6 @@
             scale: 1;
         }
 
-        // The copy takes the box the item was picked up from.
-        > * {
-            box-sizing: border-box;
-            height: 100%;
-            margin: 0;
-            width: 100%;
-        }
-
         // Shrinks onto the item, settling the lift, the swing and any animation on the way, then blurs and fades out
         // over it for the last quarter, as the item shows again under it. The fade eases plainly: the drop's
         // overshoot would clamp it at 0.
@@ -99,14 +63,22 @@
                 --sortable-x var(--drop-duration) var(--drop-easing),
                 --sortable-y var(--drop-duration) var(--drop-easing),
                 box-shadow var(--drop-duration) var(--drop-easing),
-                filter calc(var(--drop-duration) / 4) ease-out calc(var(--drop-duration) * 0.75),
+                filter calc(var(--drop-duration) / 4) var(--easing-out) calc(var(--drop-duration) * 0.75),
                 height var(--drop-duration) var(--drop-easing),
-                opacity calc(var(--drop-duration) / 4) ease-out calc(var(--drop-duration) * 0.75),
+                opacity calc(var(--drop-duration) / 4) var(--easing-out) calc(var(--drop-duration) * 0.75),
                 rotate var(--drop-duration) var(--drop-easing),
                 scale var(--drop-duration) var(--drop-easing),
                 translate var(--drop-duration) var(--drop-easing),
                 width var(--drop-duration) var(--drop-easing);
         }
+
+        // The copy takes the box the item was picked up from.
+        > * {
+            box-sizing: border-box;
+            height: 100%;
+            margin: 0;
+            width: 100%;
+        }
     }
 
     // Nested anywhere inside an item; shown only in the copy, which it covers.
@@ -135,6 +107,37 @@
             opacity: 0;
         }
     }
+
+    > * {
+        @extend %drag-item;
+    }
+
+
+    // The dragged item stays in the list as its own placeholder: its contents fade out behind a dashed outline while
+    // it moves through the list. Leaving the class drops the transition, so they are back at once on landing.
+    > .sortable-item--held {
+        background: var(--placeholder-background);
+        border-color: transparent;
+        box-shadow: none;
+        color: transparent;
+        outline: var(--placeholder-border-width) dashed var(--placeholder-border-color);
+        outline-offset: calc(var(--placeholder-border-width) * -1);
+        transition:
+            background-color var(--transition-duration) var(--transition-timing-function),
+            color var(--transition-duration) var(--transition-timing-function);
+
+        > * {
+            opacity: 0;
+            transition: opacity var(--transition-duration) var(--transition-timing-function);
+        }
+    }
+
+    // Shows again at once under the fading copy: its own transitions, or its contents', would ease it back in after the
+    // copy has gone. Important, since they can come from any rule.
+    > .sortable-item--revealing,
+    > .sortable-item--revealing * {
+        transition: none !important;
+    }
 }
 
 

package/src/components/sortable/scss/variables.scss

@@ -1,13 +1,12 @@
 .sortable {
     --drag-animation: none;
-    --drag-box-shadow: var(--box-shadow-400);
     --drag-scale: 1.06;
-    --drop-blur: 4px;
-    --drop-duration: 0.26s;
+    --drop-blur: var(--blur-400);
+    --drop-duration: var(--duration-moderate);
     --drop-easing: cubic-bezier(0.34, 1.3, 0.64, 1);
-    --overlay-transition-duration: 0.16s;
+    --overlay-transition-duration: var(--duration-fast);
     --placeholder-background: transparent;
-    --placeholder-border-color: var(--color-border-500);
+    --placeholder-border-color: var(--surface-border-pressed);
     --placeholder-border-width: var(--border-width-400);
     // Read once per drag (JS): how the items around the placeholder slide when it moves.
     --shift-duration: 0.22s;

package/src/components/sticky-header/index.ts

@@ -1,6 +1,6 @@
 import { reactive } from '@esportsplus/reactivity';
 import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
-import scrollbar from '~/css-utilities/scrollbar';
+import scrollbar from '~/modifiers/scrollbar';
 import '~/components/card/scss/index.scss';
 import './scss/index.scss';
 
@@ -13,7 +13,7 @@ let uid = 0;
 
 
 // Engines without scroll-driven animations get the progress and the swap from scroll events instead of the timeline.
-function fallback(fade: ReturnType<typeof scrollbar.fade>) {
+function fallback(fade: ReturnType<typeof scrollbar>) {
     let range = 0,
         state = reactive({ progress: 0 });
 
@@ -42,7 +42,7 @@ export default component<Attributes & {
     before: Renderable<unknown>;
 }>(
     function({ after, before, ...attributes }, content) {
-        let fade = scrollbar.fade(),
+        let fade = scrollbar({ fade: true }),
             id = `sticky-header-${++uid}`,
             legacy = typeof CSS === 'undefined' || CSS.supports('timeline-scope: none') ? null : fallback(fade);
 
@@ -50,7 +50,7 @@ export default component<Attributes & {
             <div class='card sticky-header' ${attributes} ${legacy?.root}>
                 <div
                     aria-labelledby='${id}'
-                    class='sticky-header-scroll --scrollbar'
+                    class='sticky-header-scroll'
                     role='region'
                     tabindex='0'
                     ${legacy?.scroll ?? fade}

package/src/components/sticky-header/scss/index.scss

@@ -1,4 +1,5 @@
-@use '/shared';
+@use 'css-utilities/absolute';
+@use 'css-utilities/layer';
 @use 'variables';
 
 // The scroller's timeline is scoped to the whole header so the bar, its sibling, can run on it.
@@ -6,13 +7,6 @@
     timeline-scope: --sticky-header;
 
 
-    // Covers the whole card and clips to its corners, since the card itself can't clip without losing its shadow;
-    // the plate slides up past the top and the edges hang below the header.
-    &-bar {
-        @extend %layer;
-        overflow: clip;
-    }
-
     &-after {
         @extend %absolute-top;
         align-items: center;
@@ -31,6 +25,13 @@
         }
     }
 
+    // Covers the whole card and clips to its corners, since the card itself can't clip without losing its shadow;
+    // the plate slides up past the top and the edges hang below the header.
+    &-bar {
+        @extend %layer;
+        overflow: clip;
+    }
+
     &-before {
         @extend %absolute-top;
         opacity: clamp(0, 1 - var(--sticky-header-progress) / 0.45, 1);
@@ -48,7 +49,7 @@
 
         &--fade {
             background: linear-gradient(var(--background), transparent);
-            height: 20px;
+            height: var(--size-500);
         }
 
         &--line {
@@ -91,6 +92,10 @@
     // Scroll-linked, not eased: the scroll itself is the motion. The sides swap at the midpoint, where both are
     // faded out, and hiding the faded one keeps it out of the tab order, the pointer and the accessibility tree.
     @supports (timeline-scope: none) {
+        &-after {
+            animation-name: sticky-header-after;
+        }
+
         &-after,
         &-bar,
         &-before {
@@ -101,10 +106,6 @@
             animation-timing-function: linear;
         }
 
-        &-after {
-            animation-name: sticky-header-after;
-        }
-
         &-bar {
             animation-name: sticky-header-progress;
         }

package/src/components/sticky-header/scss/variables.scss

@@ -14,16 +14,16 @@
 
 // Surface comes from '.card'.
 .sticky-header {
-    --background-default: var(--color-white-300);
-    --border-color-default: var(--color-border-300);
+    --background-default: var(--surface-background-default);
+    --border-color-default: var(--surface-border-default);
     --border-radius: var(--border-radius-600);
     --border-width: 0px;
     --box-shadow-default:
         0 0 0 var(--border-width-400) var(--border-color),
-        0 1px 2px oklch(from var(--color-black-300) l c h / 0.06),
-        0 4px 10px -8px oklch(from var(--color-black-300) l c h / 0.45);
+        0 1px 2px oklch(from var(--surface-shadow-color) l c h / calc(alpha * 0.6)),
+        0 4px 10px -8px oklch(from var(--surface-shadow-color) l c h / calc(alpha * 5));
     --compact-height: 48px;
-    --edge-shadow: 0 6px 16px -10px oklch(from var(--color-black-300) l c h / 0.4);
+    --edge-shadow: 0 6px 16px -10px oklch(from var(--surface-shadow-color) l c h / calc(alpha * 4.4));
     --expanded-height: 68px;
     --focus-color: var(--color-blue-300);
     // Its own name: the global per-element reset would swallow '--padding-horizontal' on the bar's children.
@@ -34,13 +34,13 @@
     --sticky-header-range: max(64px, var(--travel) * 3);
     --travel: calc(var(--expanded-height) - var(--compact-height));
 
+    &-after {
+        --reveal: clamp(0, (var(--sticky-header-progress) - 0.55) / 0.35, 1);
+    }
+
     // Derived here rather than on the root, so they follow the progress animated on the bar.
     &-bar {
         --lifted: clamp(0, var(--sticky-header-progress) / 0.12, 1);
         --offset: calc(var(--travel) * var(--sticky-header-progress));
     }
-
-    &-after {
-        --reveal: clamp(0, (var(--sticky-header-progress) - 0.55) / 0.35, 1);
-    }
 }

package/src/components/story/scss/index.scss

@@ -1,5 +1,7 @@
-@use '/shared';
 @use '/tokens';
+@use 'css-utilities/color';
+@use 'css-utilities/hidden';
+@use 'css-utilities/icon';
 @use 'variables';
 
 .story {
@@ -18,11 +20,6 @@
     user-select: none;
     width: min(var(--max-width), 100%);
 
-    &:focus-visible {
-        outline: 2px solid var(--focus-ring-color);
-        outline-offset: 2px;
-    }
-
     &--paused {
         --play-state: paused;
     }
@@ -46,13 +43,13 @@
 
     &-bars {
         display: flex;
-        gap: 4px;
+        gap: calc(var(--size-100) / 2);
         padding: 12px 12px 0;
     }
 
     &-count {
         color: var(--muted-color);
-        font-size: 12px;
+        font-size: var(--font-size-300);
         font-variant-numeric: tabular-nums;
     }
 
@@ -71,7 +68,7 @@
         display: flex;
         height: 44px;
         justify-content: space-between;
-        padding: 0 16px;
+        padding: 0 var(--size-400);
     }
 
     // Static cue for the paused state, so the frozen bar isn't the only signal.
@@ -79,14 +76,8 @@
     &-play {
         @extend %icon-swap;
         grid-area: 1 / 1;
-        height: 16px;
-        width: 16px;
-    }
-
-    // Keyed off the toggle, since the icons are <svg>s, which take no dynamic class.
-    &-toggle:not(.story-toggle--paused) &-pause,
-    &-toggle--paused &-play {
-        @extend %icon-swap-active;
+        height: var(--size-400);
+        width: var(--size-400);
     }
 
     &-slide {
@@ -108,29 +99,29 @@
         background: transparent;
         border: 0;
         border-radius: 999px;
-        color: var(--muted-color);
+        @extend %color-state;
+        --color-default: var(--muted-color);
+        --color-hover: var(--toggle-color-hover);
+        --color-pressed: var(--color-hover);
+        color: var(--color);
         cursor: pointer;
         display: grid;
         height: 40px;
-        margin-right: -8px;
+        margin-right: calc(var(--size-100) * -1);
         outline: none;
         padding: 0;
         place-items: center;
-        transition:
-            color 0.15s ease-out,
-            scale 0.15s ease-out;
+        transition: color var(--duration-fast) var(--easing-spring);
         width: 40px;
 
-        &:active {
-            scale: 0.96;
-        }
-
         &:focus-visible {
             outline: 2px solid var(--focus-ring-color);
         }
 
-        &:hover {
-            color: var(--color);
+        // Keyed off the toggle, since the icons are <svg>s, which take no dynamic class.
+        &:not(.story-toggle--paused) .story-pause,
+        &--paused .story-play {
+            @extend %icon-swap-active;
         }
     }
 
@@ -140,7 +131,7 @@
         flex: 1;
         min-height: 0;
         position: relative;
-        transition: opacity 0.2s ease-out;
+        transition: opacity var(--duration-fast) var(--easing-spring);
         z-index: 1;
 
         &--dimmed {
@@ -171,9 +162,14 @@
         top: 60px;
     }
 
+    &:focus-visible {
+        outline: 2px solid var(--focus-ring-color);
+        outline-offset: calc(var(--size-100) / 4);
+    }
+
     @media (prefers-reduced-motion: reduce) {
         &-toggle {
-            transition: color 0.15s ease-out;
+            transition: color var(--duration-fast) var(--easing-spring);
         }
     }
 }

package/src/components/story/scss/variables.scss

@@ -1,25 +1,32 @@
+@use 'css-utilities/background';
+@use 'css-utilities/box-shadow';
+@use 'css-utilities/surface';
+
+
+
+// A surface: a level above whatever it sits in.
 .story {
-    --background: var(--color-grey-400);
-    --bar-color: oklch(from var(--color-text-500) l c h / 0.15);
+    @extend %background-state, %box-shadow-state, %surface-raised-level;
+    --background-default: var(--surface-background-default);
+    --bar-color: oklch(from var(--color-primary-500) l c h / 0.15);
     --bar-height: 3px;
-    --box-shadow:
-        0 0 0 var(--border-width-400) oklch(from var(--color-black-500) l c h / 0.06),
-        0 1px 2px oklch(from var(--color-black-500) l c h / 0.06),
-        0 6px 16px -6px oklch(from var(--color-black-500) l c h / 0.12);
+    --box-shadow-default: var(--surface-shadow-default);
     --color: var(--color-text-500);
     --dim-opacity: 0.6;
     // Long enough to read a short caption, the same as Instagram's default.
     --duration: 4s;
-    --fill-color: var(--color-text-500);
-    --focus-ring-color: oklch(from var(--color-text-500) l c h / 0.38);
+    --fill-color: var(--color-primary-500);
+    --focus-ring-color: var(--surface-border-pressed);
     --height: 480px;
-    --icon-swap-duration: 0.3s;
+    --icon-swap-duration: var(--duration-moderate);
     --icon-swap-timing-function: var(--spring);
     --max-width: 320px;
     --muted-color: var(--color-text-300);
     --radius: 24px;
     // Critically damped spring (no bounce) sampled over its duration.
     --spring: linear(0, 0.0575, 0.1803, 0.3208, 0.4551, 0.5729, 0.6711, 0.7501, 0.8122, 0.8601, 0.8966, 0.924, 0.9445, 0.9596, 0.9708, 0.9789, 0.9848, 0.9891, 0.9922, 0.9944, 0.996, 0.9972, 0.998, 0.9986, 1);
+    // Resolved here, since the toggle's color state redefines --color on it.
+    --toggle-color-hover: var(--color);
 
     // Neighbours dragged into view read at full strength, like the story they are about to become.
     &-slide.frame {