@esportsplus/ui 0.57.0 → 0.58.0

package/src/components/relative-time/scss/index.scss

@@ -1,45 +1,22 @@
-@use '/shared';
 @use '/tokens';
+@use 'css-utilities/hidden';
 @use 'variables';
 
 .relative-time {
     border-radius: var(--border-radius-100);
+    color: var(--color);
     display: inline-flex;
     font-variant-numeric: tabular-nums;
     outline: none;
-    transition: color 0.15s ease-out;
+    transition: color var(--duration-fast) var(--easing-spring);
     white-space: nowrap;
 
-    // Qualified so it beats the reused tooltip's own cursor.
-    &.tooltip {
-        cursor: default;
-    }
-
-    // Brightens on hover so the text reads as something with more to say.
-    &:focus-visible,
-    &:hover {
-        color: var(--color-hover);
-    }
-
-    &:focus-visible {
-        outline: 2px solid var(--focus-color);
-        outline-offset: 2px;
-    }
-
     &-digit,
     &-rest {
         display: inline-block;
         white-space: pre;
     }
 
-    &-digits,
-    &-rests,
-    &-roll,
-    &-slot {
-        display: inline-flex;
-        position: relative;
-    }
-
     &-digit--entering,
     &-rest--entering,
     &-slot--entering {
@@ -54,6 +31,14 @@
         position: absolute;
     }
 
+    &-digits,
+    &-rests,
+    &-roll,
+    &-slot {
+        display: inline-flex;
+        position: relative;
+    }
+
     // An empty flex item would lend the line its bottom edge as a baseline, lifting "just now".
     &-digits:empty {
         display: none;
@@ -71,7 +56,7 @@
 
     // Opens from slightly below, smaller and blurred; closes faster than it opens.
     &-tooltip.tooltip-message {
-        filter: blur(2px);
+        filter: blur(var(--blur-300));
         transform-origin: bottom center;
         transition:
             filter var(--transition-duration) var(--transition-timing-function),
@@ -88,6 +73,21 @@
         }
     }
 
+    // Qualified so it beats the reused tooltip's own cursor.
+    &.tooltip {
+        cursor: default;
+    }
+
+    // Brightens on hover so the text reads as something with more to say.
+    &:focus-visible {
+        --color: var(--color-hover);
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--focus-color);
+        outline-offset: calc(var(--size-100) / 4);
+    }
+
     @media (prefers-reduced-motion: reduce) {
         &-tooltip.tooltip-message {
             filter: none;

package/src/components/relative-time/scss/variables.scss

@@ -1,12 +1,16 @@
-@use '/tokens';
+@use 'css-utilities/color';
+
 
 .relative-time {
+    @extend %color-state;
+    --color-active: var(--color-hover);
+    --color-default: currentColor;
     --color-hover: var(--color-text-500);
-    --focus-color: var(--color-text-500);
+    --focus-color: var(--color-primary-500);
     --placeholder: '0 min ago';
-    --roll-blur: 3px;
+    --roll-blur: var(--blur-400);
     // Long enough to read as motion, short enough that a seconds counter never has two rolls overlapping.
-    --roll-duration: 0.3s;
+    --roll-duration: var(--duration-moderate);
     --roll-enter-offset: 0.55em;
     // Travels less than the entrance did: the exit shouldn't hold the eye.
     --roll-exit-offset: -0.4em;
@@ -22,20 +26,14 @@
 
 .relative-time-tooltip.tooltip-message {
     --border-radius: var(--border-radius-300);
-    --box-shadow: var(--box-shadow-200);
+    --box-shadow-default: var(--surface-shadow-default);
     --font-size: var(--font-size-300);
     --font-weight: var(--font-weight-500);
-    --offset: 3px;
+    --offset: calc(var(--size-300) / 4);
     --padding-horizontal: var(--size-100);
     --padding-vertical: calc(var(--size-100) / 2);
     --scale: 0.9;
     --spacer: 6px;
-    --transition-duration: 0.1s;
-    --transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-
-    #{tokens.state(active, '.relative-time')} > & {
-        --transition-duration: 0.16s;
-    }
 
     @media (prefers-reduced-motion: reduce) {
         --offset: 0px;

package/src/components/root/scss/index.scss

@@ -1,5 +1,70 @@
 @use 'variables';
 
+
+// The weight as a number, so it can animate and the tracking below can follow it.
+@property --font-weight {
+    inherits: true;
+    initial-value: 400;
+    syntax: '<number>';
+}
+
+// The surface counter. Registered as an integer so a level is always whole, starts at 0, the page, and matches the
+// surface style queries exactly.
+@property --surface-level {
+    inherits: true;
+    initial-value: 0;
+    syntax: '<integer>';
+}
+
+// A surface's step on the shadow ladder. Not inherited, since each surface sets its own, and a number so a weight can
+// fall between two steps and animate.
+@property --surface-shadow-weight {
+    inherits: false;
+    initial-value: 0;
+    syntax: '<number>';
+}
+
+* {
+    // Recalculate at each element's font size instead of inheriting the body's computed length. A font's '-uniwidth'
+    // placeholder sets '--font-weight-tracking', tightening tracking as the weight rises past the body's, so a label
+    // changing weight keeps its width; without one it is 0.
+    letter-spacing: calc(
+        var(--letter-spacing) - (var(--font-weight) - var(--font-weight-400)) * var(--font-weight-tracking, 0em)
+    );
+    line-height: var(--line-height);
+
+    &,
+    &::after,
+    &::before {
+        box-sizing: border-box;
+    }
+}
+
+a {
+    color: var(--color, inherit);
+    cursor: pointer;
+    outline: none;
+    text-decoration: none;
+}
+
+b,
+strong {
+    color: var(--color, inherit);
+    font-weight: var(--font-weight);
+}
+
+body {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    background-color: var(--background);
+    color: var(--color);
+    font-family: var(--font-family);
+    font-size: var(--font-size);
+    font-weight: var(--font-weight);
+    min-width: var(--min-width);
+    text-rendering: optimizeLegibility;
+}
+
 body,
 html {
     height: 100%;
@@ -29,53 +94,11 @@ h6 {
     }
 }
 
-b,
-strong {
-    color: var(--color, inherit);
-    font-weight: var(--font-weight);
-}
-
-sub,
-sup {
-    font-size: 0.8em;
-}
-
-body {
-    background-color: var(--background);
-    color: var(--color);
-    font-family: var(--font-family);
-    font-size: var(--font-size);
-    font-weight: var(--font-weight);
-    min-width: var(--min-width);
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-* {
-    // Recalculate at each element's font size instead of inheriting
-    // the body's computed length.
-    letter-spacing: var(--letter-spacing);
-    line-height: var(--line-height);
-
-    &,
-    &::after,
-    &::before {
-        box-sizing: border-box;
-    }
-}
-
-a {
-    color: var(--color, inherit);
-    cursor: pointer;
-    outline: none;
-    text-decoration: none;
-}
-
 p {
     margin: 0;
     overflow-wrap: break-word;
     padding: 0;
+    text-wrap: pretty;
     width: 100%;
 }
 
@@ -100,6 +123,11 @@ sub {
     bottom: -0.48em;
 }
 
+sub,
+sup {
+    font-size: 0.8em;
+}
+
 sup {
     top: -0.48em;
 }

package/src/components/root/scss/variables.scss

@@ -1,36 +1,50 @@
 @use 'sass:list';
+@use 'sass:map';
 @use '/shared';
 @use '/tokens';
 
 
+* {
+    --border-radius: calc(1em / 1.618);
+    --gap: calc(1em / 1.618);
+    --gap-horizontal: var(--gap);
+    --gap-vertical: var(--gap);
+    --letter-spacing: clamp(-0.022em, calc(0.060542rem - 0.051418em), 0em);
+    --line-height: clamp(1.128em, calc(0.95em + 0.668rem), 1.618em);
+    --padding-horizontal: 1em;
+    --padding-vertical: calc(1em * 1.272 / (1.618 * 1.618));
+}
+
 :root {
+    @include shared.css-variables(blur, tokens.$blur);
     @include shared.css-variables(border-radius, tokens.$border-radius);
     @include shared.css-variables(border-width, tokens.$border-width);
-    @include shared.css-variables(box-shadow, tokens.$box-shadow);
     @include shared.css-variables(color, tokens.$color);
-    @include shared.css-variables(font-family, tokens.$font-family);
+    @include shared.css-variables(duration, map.get(tokens.$transition, duration));
+    @include shared.css-variables(easing, map.get(tokens.$transition, easing));
     @include shared.css-variables(font-size, tokens.$font-size);
     @include shared.css-variables(size, tokens.$size);
     @include shared.css-variables(spacer, tokens.$spacer);
 
-    --background: var(--color-white-400);
-    --color: var(--color-text-400);
+    @each $name in map.keys(tokens.$color) {
+        @include shared.color-weights(
+            $name,
+            map.get(tokens.$themes, light, surface, color),
+            map.get(tokens.$themes, dark, surface, color)
+        );
+    }
+
     --font-size: var(--font-size-400);
     --font-weight: var(--font-weight-400);
     --min-width: 320px;
-    --transition-duration: #{shared.map-get(tokens.$transition, 'duration')};
-    --transition-timing-function: #{shared.map-get(tokens.$transition, 'timing-function')};
+    --transition-duration: var(--duration-fast);
+    --transition-timing-function: var(--easing-spring);
 }
 
-* {
-    --border-radius: calc(1em / 1.618);
-    --gap: calc(1em / 1.618);
-    --gap-horizontal: var(--gap);
-    --gap-vertical: var(--gap);
-    --letter-spacing: clamp(-0.022em, calc(0.060542rem - 0.051418em), 0em);
-    --line-height: clamp(1.128em, calc(0.95em + 0.668rem), 1.618em);
-    --padding-horizontal: 1em;
-    --padding-vertical: calc(1em * 1.272 / (1.618 * 1.618));
+// Light, as a page declaring no color scheme is drawn, until the page declares one: 'light-dark()' needs a scheme,
+// and the fallback Lightning CSS writes for older browsers has none to read without it.
+:where(:root) {
+    color-scheme: light;
 }
 
 b,
@@ -39,6 +53,10 @@ strong {
     --font-weight: var(--font-weight-500);
 }
 
+h1 {
+    --font-size: var(--font-size-800);
+}
+
 h1,
 h2,
 h3,
@@ -47,32 +65,18 @@ h4 {
     --font-weight: var(--font-weight-500);
 }
 
-h1 {
-    --font-size: var(--font-size-800);
-}
-
 h2 {
-    --font-size: var(--font-size-700);
-}
-
-h3 {
     --font-size: var(--font-size-600);
 }
 
-h4 {
+h3 {
     --font-size: var(--font-size-500);
 }
 
-h5 {
+h4 {
     --font-size: var(--font-size-400);
 }
 
 section {
     --width: 100%;
 }
-
-// Light, as a page declaring no color scheme is drawn, until the page declares one: 'light-dark()' needs a scheme,
-// and the fallback Lightning CSS writes for older browsers has none to read without it.
-:where(:root) {
-    color-scheme: light;
-}

package/src/components/section/scss/index.scss

@@ -0,0 +1,31 @@
+@use 'variables';
+
+.section {
+    &,
+    &-header {
+        display: flex;
+        flex-flow: column;
+        gap: var(--gap-vertical) var(--gap-horizontal);
+        position: relative;
+        width: 100%;
+    }
+
+    &-subtitle,
+    &-suptitle {
+        font-size: var(--font-size);
+    }
+
+    &-subtitle,
+    &-suptitle,
+    &-title {
+        color: var(--color);
+        display: block;
+        position: relative;
+        width: 100%;
+        z-index: 1;
+    }
+
+    &-title {
+        text-wrap: balance;
+    }
+}

package/src/components/section/scss/variables.scss

@@ -0,0 +1,21 @@
+.section {
+    --gap-horizontal: 0px;
+    --gap-vertical: 0px;
+
+    &-header {
+        --gap-horizontal: var(--size-300);
+        --gap-vertical: calc(var(--size-100) / 2);
+    }
+
+    &-subtitle,
+    &-suptitle {
+        --color: var(--color-default);
+        --color-default: var(--color-text-400);
+        --font-size: var(--font-size-400);
+    }
+
+    &-title {
+        --color: var(--color-default);
+        --color-default: var(--color-text-500);
+    }
+}

package/src/components/select/index.ts

@@ -38,6 +38,9 @@ type A = Attributes & {
 
 
 type Option = {
+    // Replaces the whole row (check, label and detail); a '.select-menu-option-label' inside it keeps the open panel's
+    // text aligned with the trigger's, and a '.select-menu-check' still shows on the chosen row.
+    content?: Renderable<unknown>;
     detail?: string;
     label: Renderable<unknown>;
     selected?: Renderable<unknown>;
@@ -453,8 +456,8 @@ function template(
                     class='select-menu-scroller'
                     ${{
                         onconnect: (element: HTMLElement) => {
-                            parts.label = element.querySelector<HTMLElement>('.select-menu-option-label') ?? undefined;
                             parts.option = element.querySelector<HTMLElement>('.select-menu-option') ?? undefined;
+                            parts.label = element.querySelector<HTMLElement>('.select-menu-option-label') ?? parts.option;
                             parts.scroller = element;
                         },
                         onscroll: function(this: HTMLElement) {
@@ -493,11 +496,13 @@ function template(
                                     }
                                 }}
                             >
-                                <svg aria-hidden='true' class='select-menu-check'><use href='#${check}' /></svg>
-                                <span class='select-menu-option-label'>
-                                    ${option.label}
-                                </span>
-                                ${option.detail && html`<span class='select-menu-option-detail'>${option.detail}</span>`}
+                                ${option.content ?? html`
+                                    <svg aria-hidden='true' class='select-menu-check'><use href='#${check}' /></svg>
+                                    <span class='select-menu-option-label'>
+                                        ${option.label}
+                                    </span>
+                                    ${option.detail && html`<span class='select-menu-option-detail'>${option.detail}</span>`}
+                                `}
                             </div>
                         `)}
                     </div>

package/src/components/select/scss/index.scss

@@ -1,5 +1,7 @@
-@use '/shared';
 @use '/tokens';
+@use 'css-utilities/hidden';
+@use 'css-utilities/icon';
+@use 'css-utilities/text';
 @use 'variables';
 
 .select {
@@ -18,16 +20,16 @@
         &-check {
             @extend %icon-stroke, %icon-swap;
             flex: 0 0 auto;
-            height: 16px;
+            height: var(--size-400);
             stroke-width: 2.25;
-            width: 16px;
+            width: var(--size-400);
         }
 
         &-chevron {
             color: var(--color-muted);
             flex: 0 0 auto;
-            height: 16px;
-            width: 16px;
+            height: var(--size-400);
+            width: var(--size-400);
         }
 
         &-label {
@@ -36,6 +38,7 @@
 
         &-option {
             align-items: center;
+            background: var(--background);
             border-radius: var(--border-radius-400);
             cursor: default;
             display: flex;
@@ -44,14 +47,11 @@
             padding: 0 var(--size-100);
             user-select: none;
 
-            // No transition on the highlight: it follows every move, so easing would read as lag.
+            // No transition on the highlight: it follows every move, so easing would read as lag. Highlighting moves
+            // the option's resting fill, so the pointer's own hover adds nothing and pressing still steps from it.
             &--highlighted,
             &:focus {
-                background: var(--highlight);
-            }
-
-            &[aria-selected='true'] .select-menu-check {
-                @extend %icon-swap-active;
+                --background-default: var(--highlight);
             }
 
             &-detail {
@@ -66,6 +66,10 @@
                 flex: 1;
                 min-width: 0;
             }
+
+            &[aria-selected='true'] .select-menu-check {
+                @extend %icon-swap-active;
+            }
         }
 
         // Closed, it is inert, so it takes no pointer or focus while it fades out.
@@ -105,7 +109,7 @@
             opacity: 0;
             pointer-events: none;
             position: absolute;
-            transition: opacity 150ms ease-out;
+            transition: opacity var(--duration-fast) var(--easing-spring);
 
             @include tokens.state(active) {
                 opacity: 1;
@@ -152,20 +156,15 @@
             height: var(--height);
             margin: 0;
             outline: none;
-            padding: 0 10px 0 var(--size-300);
+            padding: 0 var(--size-200) 0 var(--size-300);
             text-align: left;
             touch-action: manipulation;
-            transition: scale var(--transition-duration) var(--transition-timing-function);
             user-select: none;
             width: 100%;
 
-            &:active {
-                scale: var(--press-scale);
-            }
-
             &:focus-visible {
                 outline: var(--focus-width) solid var(--color);
-                outline-offset: 2px;
+                outline-offset: calc(var(--size-100) / 4);
             }
         }
 
@@ -177,19 +176,9 @@
     }
 
     @media (prefers-reduced-motion: reduce) {
-        &-menu {
-            &-check {
-                filter: none;
-                scale: 1;
-            }
-
-            &-trigger {
-                transition: none;
-
-                &:active {
-                    scale: 1;
-                }
-            }
+        &-menu-check {
+            filter: none;
+            scale: 1;
         }
     }
 }

package/src/components/select/scss/variables.scss

@@ -1,21 +1,26 @@
 @use '/tokens';
+@use 'css-utilities/background';
+@use 'css-utilities/box-shadow';
+@use 'css-utilities/surface';
 
+// The trigger is a surface, lifting on hover, settling when pressed and holding the selected fill while open; its panel
+// is a surface above it, whose options take the panel's own hover and pressed steps.
 .select {
-    --background: var(--color-grey-400);
-    --box-shadow:
-        0 0 0 1px 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);
+    @extend %background-state, %box-shadow-state, %surface-raised-level;
+    --background-active: var(--surface-background-active);
+    --background-default: var(--surface-background-default);
+    --background-hover: var(--surface-background-hover);
+    --background-pressed: var(--surface-background-pressed);
+    --box-shadow-active: var(--surface-shadow-active);
+    --box-shadow-default: var(--surface-shadow-default);
+    --box-shadow-hover: var(--surface-shadow-hover);
+    --box-shadow-pressed: var(--surface-shadow-pressed);
     --color: var(--color-text-500);
     --color-muted: var(--color-text-300);
     --focus-width: var(--border-width-500);
     --font-size: calc(var(--font-size-400) * 0.875);
     --height: 40px;
-    --highlight: color-mix(in oklch, var(--color) 6%, transparent);
     --item-height: 36px;
-    --press-scale: 0.96;
-    --transition-duration: 150ms;
-    --transition-timing-function: ease-out;
     --trigger-border-radius: var(--border-radius-400);
     --width: min(260px, 100%);
 
@@ -23,28 +28,30 @@
     &-menu {
         // Read by the option's check, which pops in once the option is chosen.
         &-option {
-            --icon-swap-duration: 300ms;
+            @extend %background-state;
+            --background-pressed: var(--highlight-pressed);
+            --icon-swap-duration: var(--duration-moderate);
             --icon-swap-timing-function: 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);
         }
 
         &-panel {
-            --background: var(--color-grey-400);
+            @extend %background-state, %box-shadow-state, %surface-raised-level;
+            --background-default: var(--surface-background-default);
             --border-radius: var(--border-radius-600);
-            --box-shadow:
-                0 0 0 1px 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);
             --fade: 24px;
+            --highlight: var(--surface-background-hover);
+            --highlight-pressed: var(--surface-background-pressed);
             --pad: 4px;
             --rows: 8;
             --scale: 0.96;
-            --transition-duration: 150ms;
-            --transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+            --transition-duration: var(--duration-moderate);
+            --transition-timing-function: var(--easing-spring);
             --width: auto;
 
             // Leaves faster than it arrives, so choosing never waits on the list.
             @include tokens.state(inactive) {
-                --transition-duration: 100ms;
+                --transition-duration: var(--duration-moderate-exit);
             }
 
             @media (prefers-reduced-motion: reduce) {