@esportsplus/ui 0.57.0 → 0.58.0

package/src/components/color-picker/scss/variables.scss

@@ -1,27 +1,27 @@
 .color-picker {
-    --checker: repeating-conic-gradient(var(--color-border-300) 0 25%, var(--color-white-300) 0 50%) 0 0 / 8px 8px;
+    --checker: repeating-conic-gradient(var(--surface-border-default) 0 25%, var(--color-white-300) 0 50%) 0 0 / 8px 8px;
     --color: var(--color-text-500);
     --color-invalid: var(--color-red-400);
     --color-muted: var(--color-text-300);
-    --control-border-color: var(--color-border-300);
+    --control-border-color: var(--surface-border-default);
     --control-border-radius: var(--border-radius-400);
     --control-height: 36px;
-    --copy-inset: 4px;
+    --copy-inset: calc(var(--size-100) / 2);
     --focus-width: var(--border-width-500);
     --font-size: calc(var(--font-size-400) * 0.875);
     --hairline: inset 0 0 0 1px color-mix(in oklch, var(--color) 10%, transparent);
     --pad-height: 176px;
     --preview-size: 44px;
     // Gap between a selected swatch and its ring; match it to the surface the picker sits on.
-    --ring-offset-color: var(--color-white-300);
+    --ring-offset-color: var(--surface-background-default);
     --spacing: 12px;
     // How a recent swatch grows in, leaves and slides along when the history changes; JS reads the enter and shift
     // timings and the blur and scale it grows from.
-    --swatch-blur: 4px;
-    --swatch-duration: 300ms;
+    --swatch-blur: var(--blur-400);
+    --swatch-duration: var(--duration-moderate);
     --swatch-easing: linear(0, 0.058, 0.18, 0.321, 0.455, 0.573, 0.671, 0.75, 0.812, 0.86, 0.897, 0.924, 0.944, 0.96, 0.971, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
-    --swatch-exit-duration: 150ms;
-    --swatch-exit-easing: cubic-bezier(0.23, 1, 0.32, 1);
+    --swatch-exit-duration: var(--duration-fast);
+    --swatch-exit-easing: var(--easing-out);
     --swatch-scale: 0.6;
     --swatch-shift-duration: var(--swatch-duration);
     --swatch-shift-easing: var(--swatch-easing);
@@ -31,12 +31,10 @@
     // Grows a touch while held so you can tell you've got hold of it.
     --thumb-scale-pressed: 1.1;
     --thumb-shadow:
-        0 0 0 1px oklch(from var(--color-black-500) l c h / 0.12),
-        0 1px 3px oklch(from var(--color-black-500) l c h / 0.3);
-    --thumb-size: 20px;
+        0 0 0 1px var(--surface-border-default),
+        0 1px 3px oklch(from var(--surface-shadow-color) l c h / calc(alpha * 3));
+    --thumb-size: var(--size-500);
     --track-height: 12px;
-    --transition-duration: 150ms;
-    --transition-timing-function: ease-out;
 
     // Swatches fade in and out where they stand, and held thumbs keep their size.
     @media (prefers-reduced-motion: reduce) {
@@ -46,6 +44,15 @@
         --thumb-scale-pressed: 1;
     }
 
+    &--compact {
+        --pad-height: 184px;
+        --rail-radius: var(--border-radius-100);
+        --rail-thumb-height: 6px;
+        --rail-width: 28px;
+        --spacing: var(--size-100);
+        --thumb-size: 12px;
+    }
+
     &-channel {
         &--alpha {
             --thumb: linear-gradient(rgb(var(--rgb) / var(--alpha)), rgb(var(--rgb) / var(--alpha))), var(--checker);
@@ -59,6 +66,17 @@
         }
     }
 
+    // Upright rails run top to bottom: hue from 0, opacity from full.
+    &--compact #{&}-channel {
+        &--alpha {
+            --track: linear-gradient(rgb(var(--rgb)), rgb(var(--rgb) / 0)), var(--checker);
+        }
+
+        &--hue {
+            --track: linear-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
+        }
+    }
+
     // Qualified by the row so it wins over the reused input styles regardless of stylesheet order.
     .color-picker-copy {
         --border-radius: calc(var(--control-border-radius) - var(--copy-inset));
@@ -73,10 +91,10 @@
         --border-color-hover: var(--control-border-color);
         --border-color-pressed: var(--control-border-color);
         --border-radius: var(--control-border-radius);
-        --border-width: 1px;
+        --border-width: var(--border-width-400);
         --color-default: currentColor;
         --font-size: inherit;
-        --padding-horizontal: 10px;
+        --padding-horizontal: var(--size-200);
         --padding-vertical: 0px;
         --size: var(--control-height);
 

package/src/components/command/index.ts

@@ -4,13 +4,13 @@ import highlight from '~/components/highlight';
 import icon from '~/components/icon';
 import input from '~/components/input';
 import overlay from '~/components/overlay';
+import scrollbar from '~/modifiers/scrollbar';
 import { mac } from '~/shared/platform';
 import down from '@esportsplus/ui/svg/arrow-down.svg';
 import up from '@esportsplus/ui/svg/arrow-up.svg';
 import enter from '@esportsplus/ui/svg/enter.svg';
 import magnifier from '@esportsplus/ui/svg/search.svg';
 import '~/components/frame/scss/index.scss';
-import '~/css-utilities/scrollbar/scss/index.scss';
 import './scss/index.scss';
 
 
@@ -822,9 +822,10 @@ export default component(
                                     >
                                         <div
                                             aria-label='${view.label}'
-                                            class='command-list --scrollbar'
+                                            class='command-list'
                                             id='${view.key}-listbox'
                                             role='listbox'
+                                            ${scrollbar()}
                                             ${{
                                                 class: () => !read(view.results).flat.length && 'command-list--empty',
                                                 onmouseleave: () => {

package/src/components/command/scss/index.scss

@@ -1,4 +1,4 @@
-@use '/shared';
+@use 'css-utilities/text';
 @use 'variables';
 
 .command {
@@ -15,9 +15,9 @@
     }
 
     &-dialog.overlay {
-        background: var(--dialog-background);
+        background: var(--surface-background-default);
         border-radius: var(--dialog-border-radius);
-        box-shadow: var(--raised);
+        box-shadow: var(--surface-shadow-default);
         color: var(--color);
         // Pinned from the top rather than centered, so the input stays put while filtering resizes the list.
         margin-block: var(--dialog-offset) auto;
@@ -171,12 +171,18 @@
         scrollbar-width: none;
     }
 
+    &-trigger-label {
+        @extend %text-truncate;
+        flex: 1 1 auto;
+        text-align: left;
+    }
+
     &-trigger.button {
         touch-action: manipulation;
         user-select: none;
 
         &:focus-visible {
-            outline: var(--border-width-500) solid var(--color-text-500);
+            outline: var(--border-width-500) solid var(--color-primary-500);
             outline-offset: var(--border-width-500);
         }
 
@@ -186,12 +192,6 @@
         }
     }
 
-    &-trigger-label {
-        @extend %text-truncate;
-        flex: 1 1 auto;
-        text-align: left;
-    }
-
     &-view {
         display: flex;
         flex-direction: column;
@@ -215,9 +215,5 @@
                 transition: opacity var(--transition-duration) var(--transition-timing-function);
             }
         }
-
-        &-trigger.button:active {
-            scale: 1;
-        }
     }
 }

package/src/components/command/scss/variables.scss

@@ -1,39 +1,28 @@
-@use '/tokens';
+@use 'css-utilities/color';
 
-// The trigger also dresses page-level search buttons outside a palette, so it carries the shared shadow itself.
-.command,
-.command-trigger {
-    --raised:
-        0 0 0 1px oklch(from var(--color-black-300) l c h / 0.06),
-        0 1px 2px oklch(from var(--color-black-300) l c h / 0.06),
-        0 6px 16px -6px oklch(from var(--color-black-300) l c h / 0.12);
-}
 
 .command {
-    --close-duration: 0.1s;
     --color: var(--color-text-500);
     --color-muted: var(--color-text-300);
     --count-fade: 48px;
-    --dialog-backdrop: color-mix(in srgb, var(--color-text-500) 10%, transparent);
-    --dialog-background: var(--color-white-300);
+    // Black at the theme's shadow strength, so the scrim still dims under a colored or glowing shadow.
+    --dialog-backdrop: oklch(from var(--surface-shadow-color) 0 0 0 / calc(alpha + 0.01));
     --dialog-border-radius: var(--border-radius-600);
     --dialog-offset: 20vh;
     --dialog-scale: 0.98;
     --dialog-width: 600px;
-    --divider-color: var(--color-border-300);
+    --divider-color: var(--surface-border-default);
     --font-size: calc(var(--font-size-400) * 0.875);
     --footer-height: 44px;
     --input-mask: none;
     --kbd-icon-size: 12px;
     --label-font-size: var(--font-size-200);
     --list-max-height: min(320px, 50vh);
-    --open-duration: 0.15s;
-    --option-background: var(--color-grey-400);
+    --option-background: var(--surface-background-hover);
     --option-border-radius: var(--border-radius-400);
     --option-height: 36px;
     --search-height: 48px;
     --tab-height: 32px;
-    --timing-function: cubic-bezier(0.23, 1, 0.32, 1);
 
     &--centered {
         --dialog-offset: auto;
@@ -44,18 +33,11 @@
         --margin-horizontal: var(--size-400);
         --max-width: var(--dialog-width);
         --scale: var(--dialog-scale);
-        --transition-duration: var(--open-duration);
-        --transition-timing-function: var(--timing-function);
-
-        @include tokens.state(inactive) {
-            --transition-duration: var(--close-duration);
-        }
     }
 
     // Rests on the active option; the palette moves `--active` for both pointer and keys.
     &-highlight.highlight {
         --background-active: var(--option-background);
-        --glide-duration: 0.3s;
     }
 
     // 'inherit' passes the palette's '--font-size' through the input's own; 'var(--font-size)' here would refer to
@@ -74,11 +56,9 @@
 
     // Takes '--active' alongside its option.
     &-option-icon.icon {
-        --color: var(--color-muted);
-
-        @include tokens.state(active) {
-            --color: inherit;
-        }
+        @extend %color-state;
+        --color-active: currentColor;
+        --color-default: var(--color-muted);
     }
 
     // Long queries fade out before they reach the result count instead of running into it.
@@ -100,23 +80,20 @@
 
     &-tabs-highlight.highlight {
         --background-active: var(--option-background);
-        --glide-duration: 0.4s;
     }
 
     // One 24px keycap line plus 6px either side makes the 36px trigger.
     &-trigger.button {
-        --background-default: var(--color-white-400);
+        --background-default: var(--surface-background-default);
         --border-radius: var(--border-radius-400);
-        --box-shadow-default: var(--raised);
+        --box-shadow-default: var(--surface-shadow-default);
         --color-default: var(--color-text-300);
         --color-hover: var(--color-text-500);
         --font-size: calc(var(--font-size-400) * 0.875);
         --gap-horizontal: var(--size-100);
         --line-height: 24px;
-        --padding-horizontal: 6px;
-        --padding-vertical: 6px;
-        --transition-duration: 0.15s;
-        --transition-timing-function: ease-out;
+        --padding-horizontal: calc(var(--size-300) / 2);
+        --padding-vertical: calc(var(--size-300) / 2);
         --width: 240px;
     }
 

package/src/components/copy/scss/index.scss

@@ -1,4 +1,4 @@
-@use '/shared';
+@use 'css-utilities/icon';
 @use 'variables';
 
 .copy {
@@ -20,11 +20,6 @@
         color var(--transition-duration) var(--transition-timing-function);
     width: var(--size);
 
-    &:focus-visible {
-        outline: var(--outline-width) solid var(--outline-color);
-        outline-offset: calc(var(--outline-width) * -1);
-    }
-
     &-icon {
         flex-shrink: 0;
         height: var(--icon-size);
@@ -42,6 +37,11 @@
             }
         }
     }
+
+    &:focus-visible {
+        outline: var(--outline-width) solid var(--outline-color);
+        outline-offset: calc(var(--outline-width) * -1);
+    }
 }
 
 

package/src/components/copy/scss/variables.scss

@@ -1,22 +1,19 @@
+@use 'css-utilities/background';
+@use 'css-utilities/color';
+
+
 .copy {
-    --background: var(--background-default);
-    --background-default: transparent;
-    --background-hover: var(--color-grey-400);
-    --border-radius: 6px;
-    --color: var(--color-default);
+    @extend %background-state, %color-state;
+    --background-hover: var(--surface-background-hover);
+    --background-pressed: var(--surface-background-pressed);
+    --border-radius: var(--border-radius-300);
     --color-default: var(--color-text-300);
     --color-hover: var(--color-text-500);
-    --draw-duration: 280ms;
+    --color-pressed: var(--color-hover);
+    --draw-duration: var(--duration-moderate);
     --draw-timing-function: ease;
-    --icon-size: 16px;
+    --icon-size: var(--size-400);
     --outline-color: var(--color-blue-400);
-    --outline-width: 2px;
+    --outline-width: var(--border-width-500);
     --size: 28px;
-    --transition-duration: 150ms;
-    --transition-timing-function: ease-out;
-
-    &:hover {
-        --background: var(--background-hover);
-        --color: var(--color-hover);
-    }
 }

package/src/components/counter/scss/index.scss

@@ -1,20 +1,15 @@
-@use '/shared';
+@use 'css-utilities/hidden';
 @use 'variables';
 
 .counter {
     color: var(--color);
     display: flex;
-    gap: 2px;
+    gap: calc(var(--size-100) / 4);
     place-items: center;
     transition: transform calc(var(--transition-duration) / 4) var(--transition-duration);
 
-    // Only the elements holding glyphs are painted, so a translucent '--fill' never stacks over itself.
-    // The text fill goes transparent rather than 'color', which keeps 'currentColor' usable in '--fill'.
-    &-character--symbol,
-    &-digit {
-        background: var(--fill, linear-gradient(currentColor, currentColor));
-        background-clip: text;
-        -webkit-text-fill-color: transparent;
+    &--ticker {
+        gap: 0;
     }
 
     &-character {
@@ -34,8 +29,8 @@
         // --index counts digits from the right, so the rightmost digit settles first.
         &-track {
             display: grid;
-            translate: 0 calc((var(--value) + 1) * (1lh * -1));
             transition: translate var(--transition-duration) var(--timing-function) calc(var(--index) * var(--stagger));
+            translate: 0 calc((var(--value) + 1) * (1lh * -1));
 
             // Each roll names its own animation, which only '--blur' sets.
             @media (prefers-reduced-motion: no-preference) {
@@ -48,6 +43,15 @@
         }
     }
 
+    // Only the elements holding glyphs are painted, so a translucent '--fill' never stacks over itself.
+    // The text fill goes transparent rather than 'color', which keeps 'currentColor' usable in '--fill'.
+    &-character--symbol,
+    &-digit {
+        -webkit-text-fill-color: transparent;
+        background: var(--fill, linear-gradient(currentColor, currentColor));
+        background-clip: text;
+    }
+
     &-digit {
         height: 1lh;
     }
@@ -56,10 +60,6 @@
         @extend %hidden-visually;
     }
 
-    &--ticker {
-        gap: 0;
-    }
-
     @media (prefers-reduced-motion: reduce) {
         &,
         &-character-track {

package/src/components/counter/scss/variables.scss

@@ -1,6 +1,6 @@
 .counter {
     --blur: 0.05em;
-    --color: var(--color-black-400);
+    --color: var(--color-text-400);
     // A gradient here paints the digits in place of '--color'; 'initial' also stops an ancestor's from leaking in.
     --fill: initial;
     // Sized by the surrounding text; set 'font-size' on the counter or a parent to scale it.

package/src/components/datalist/index.ts

@@ -1,7 +1,7 @@
 import { component, html, on, type Attributes, type Element, type Renderable } from '@esportsplus/template';
 import { effect, onCleanup, reactive, untrack } from '@esportsplus/reactivity';
 import form from '~/components/form';
-import scrollbar from '~/css-utilities/scrollbar';
+import scrollbar from '~/modifiers/scrollbar';
 import { observeSize } from '~/shared/resize';
 import './scss/index.scss';
 
@@ -177,12 +177,12 @@ export default component(
                 <div class='datalist-lens' aria-hidden='true' ${this?.attributes?.[DATALIST_LENS]} ${attributes[DATALIST_LENS]}></div>
 
                 <div
-                    class='datalist-scroller --scrollbar-hidden'
+                    class='datalist-scroller'
                     role='listbox'
                     tabindex='0'
                     ${this?.attributes?.[DATALIST_SCROLLER]}
                     ${attributes[DATALIST_SCROLLER]}
-                    ${scrollbar.drag('vertical')}
+                    ${scrollbar({ drag: 'vertical', hidden: true })}
                     ${observeSize(measure)}
                     ${{
                         'aria-activedescendant': () => {

package/src/components/datalist/scss/index.scss

@@ -1,4 +1,4 @@
-@use '/shared';
+@use 'css-utilities/hidden';
 @use 'variables';
 
 .datalist {
@@ -12,11 +12,12 @@
     width: min(100%, var(--width));
 
     &-lens {
-        @include shared.position(absolute, 50% var(--padding) null var(--padding));
         background: var(--background);
         border-radius: var(--border-radius);
         height: var(--item-height);
+        inset: 50% var(--padding) auto;
         pointer-events: none;
+        position: absolute;
         translate: 0 -50%;
     }
 
@@ -71,14 +72,14 @@
         }
     }
 
+    &-tag {
+        @extend %hidden-field;
+    }
+
     // Padding lives on the track, not the scroller, since some engines drop a scroller's block-end padding from its scroll range
     &-track {
         padding-block: calc((var(--height) - var(--item-height)) / 2);
     }
-
-    &-tag {
-        @extend %hidden-field;
-    }
 }
 
 @keyframes datalist-drum {

package/src/components/datalist/scss/variables.scss

@@ -1,9 +1,11 @@
+@use 'css-utilities/surface';
+
 .datalist {
     --background: transparent;
     --border-radius: var(--border-radius-700);
     --color: var(--color-text-500);
-    --focus-color: var(--color-border-500);
-    --focus-width: 2px;
+    --focus-color: var(--surface-border-pressed);
+    --focus-width: var(--border-width-500);
     --font-size: var(--font-size-400);
     --font-weight: var(--font-weight-500);
     --height: calc(var(--item-height) * 5);
@@ -16,8 +18,10 @@
     --scale-falloff: 0.34;
     --width: 224px;
 
+    // A well a level below the list it frames.
     &-lens {
-        --background: var(--color-border-300);
+        @extend %surface-sunken-level;
+        --background: var(--surface-background-default);
         --border-radius: var(--border-radius-600);
     }
 

package/src/components/dock/scss/index.scss

@@ -23,23 +23,18 @@
         transform-origin: 50% 100%;
         transition:
             height var(--magnify-duration) var(--magnify-timing-function),
-            scale 0.15s ease-out,
             width var(--magnify-duration) var(--magnify-timing-function);
         width: var(--size);
 
-        &:active {
-            scale: 0.96;
+        &--launching {
+            animation:
+                dock-hop var(--hop-duration),
+                dock-squash var(--hop-duration) var(--easing-in-out);
         }
 
         &:focus-visible {
             outline: 2px solid var(--color);
-            outline-offset: 2px;
-        }
-
-        &--launching {
-            animation:
-                dock-hop var(--hop-duration),
-                dock-squash var(--hop-duration) ease-in-out;
+            outline-offset: calc(var(--size-100) / 4);
         }
 
         // Relative to the button, so the icon follows the transition too.
@@ -76,15 +71,15 @@
         // 4px under the resting button.
         top: calc(100% - var(--inset) + 4px);
         transition:
-            opacity 0.15s cubic-bezier(0.23, 1, 0.32, 1),
-            scale 0.15s cubic-bezier(0.23, 1, 0.32, 1);
+            opacity var(--duration-fast-exit) var(--easing-spring),
+            scale var(--duration-fast-exit) var(--easing-spring);
         width: var(--light-size);
 
         @include tokens.state(active) {
             opacity: 1;
             scale: 1;
             transition-delay: var(--light-delay);
-            transition-duration: 0.2s;
+            transition-duration: var(--duration-fast);
         }
     }
 }
@@ -93,7 +88,7 @@
 // Up fast and down with gravity; each landing is the quickest part.
 @keyframes dock-hop {
     0% {
-        animation-timing-function: ease-out;
+        animation-timing-function: var(--easing-out);
         translate: 0 0;
     }
     30% {
@@ -101,7 +96,7 @@
         translate: 0 -22px;
     }
     55% {
-        animation-timing-function: ease-out;
+        animation-timing-function: var(--easing-out);
         translate: 0 0;
     }
     78% {