@esportsplus/ui 0.57.0 → 0.58.0

package/src/components/surface-field/scss/index.scss

@@ -1,5 +1,8 @@
-@use '/shared';
 @use '/tokens';
+@use 'css-utilities/absolute';
+@use 'css-utilities/layer';
+@use 'css-utilities/surface';
+@use 'css-utilities/text';
 @use 'variables';
 
 // Typed, so the canvas can transition it and JS hears it change.
@@ -35,8 +38,10 @@
 
     // Geometry is written every pointer move, so only the lift eases: a scale and the fade of a second shadow, both
     // composited rather than repainted per frame.
+    // A surface of its own, so its background is a level above whatever it floats over.
     &-surface {
-        background: var(--surface-background);
+        @extend %surface-raised-level;
+        background: var(--surface-background-default);
         border-radius: var(--surface-border-radius);
         box-shadow: 0 0 0 1px var(--surface-border-color), var(--surface-box-shadow);
         display: flex;
@@ -62,10 +67,39 @@
             display: flex;
             flex: 1;
             flex-direction: column;
-            gap: 8px;
+            gap: var(--size-100);
             min-height: 0;
             overflow: hidden;
-            padding: 0 16px 16px;
+            padding: 0 var(--size-400) var(--size-400);
+        }
+
+        &-handle {
+            align-self: stretch;
+            border-radius: 0 var(--surface-border-radius) 0 0;
+            cursor: inherit;
+            flex-shrink: 0;
+            position: relative;
+            width: var(--surface-grip-width);
+
+            &::before {
+                background: currentColor;
+                border-radius: 999px;
+                content: '';
+                height: 2px;
+                left: 50%;
+                opacity: 0.7;
+                position: absolute;
+                top: 50%;
+                translate: -50% -50%;
+                width: 18px;
+            }
+
+            // Alone in the header it is the whole bar, grip centred.
+            &:only-child {
+                border-radius: var(--surface-border-radius) var(--surface-border-radius) 0 0;
+                flex: 1;
+                margin-inline-start: calc(var(--size-400) * -1);
+            }
         }
 
         &-handle,
@@ -78,7 +112,7 @@
 
             &:focus-visible {
                 outline: 2px solid oklch(from var(--color) l c h / 0.4);
-                outline-offset: -2px;
+                outline-offset: calc(var(--size-100) / -4);
             }
         }
 
@@ -88,9 +122,9 @@
             cursor: var(--surface-header-cursor);
             display: flex;
             flex-shrink: 0;
-            gap: 4px;
+            gap: calc(var(--size-100) / 2);
             min-height: var(--surface-handle-height);
-            padding-inline-start: 16px;
+            padding-inline-start: var(--size-400);
             touch-action: none;
         }
 
@@ -102,35 +136,6 @@
             transition: opacity var(--surface-lift-duration) ease;
         }
 
-        &-handle {
-            align-self: stretch;
-            border-radius: 0 var(--surface-border-radius) 0 0;
-            cursor: inherit;
-            flex-shrink: 0;
-            position: relative;
-            width: var(--surface-grip-width);
-
-            &::before {
-                background: currentColor;
-                border-radius: 999px;
-                content: '';
-                height: 2px;
-                left: 50%;
-                opacity: 0.7;
-                position: absolute;
-                top: 50%;
-                translate: -50% -50%;
-                width: 18px;
-            }
-
-            // Alone in the header it is the whole bar, grip centred.
-            &:only-child {
-                border-radius: var(--surface-border-radius) var(--surface-border-radius) 0 0;
-                flex: 1;
-                margin-inline-start: -16px;
-            }
-        }
-
         // Two diagonal ticks in the corner, drawn with a gradient so no icon is needed.
         &-resize {
             background:
@@ -151,12 +156,12 @@
             @extend %text-truncate;
             color: var(--surface-title-color);
             flex: 0 1 auto;
-            font-weight: 600;
+            font-weight: var(--font-weight-600);
             min-width: 0;
-        }
 
-        &-title + &-handle {
-            margin-inline-start: auto;
+            & + .surface-field-surface-handle {
+                margin-inline-start: auto;
+            }
         }
     }
 

package/src/components/surface-field/scss/variables.scss

@@ -5,18 +5,17 @@
     --color: var(--color-text-500);
     // Read by JS: 1 draws a still texture, as the 'still' option does.
     --still: 0;
-    --surface-background: var(--color-white-300);
     --surface-body-color: var(--color-text-300);
     --surface-body-font-size: calc(var(--font-size-400) * 0.8125);
-    --surface-border-color: oklch(from var(--color-black-300) l c h / 0.06);
+    --surface-border-color: var(--surface-border-default);
     --surface-border-radius: 14px;
-    --surface-box-shadow: 0 1px 2px oklch(from var(--color-black-300) l c h / 0.06), 0 8px 24px -8px oklch(from var(--color-black-300) l c h / 0.14);
-    --surface-box-shadow-active: 0 2px 4px oklch(from var(--color-black-300) l c h / 0.08), 0 20px 40px -12px oklch(from var(--color-black-300) l c h / 0.24);
-    --surface-grip-color: var(--color-text-300);
+    --surface-box-shadow: 0 1px 2px oklch(from var(--surface-shadow-color) l c h / calc(alpha * 0.6)), 0 8px 24px -8px oklch(from var(--surface-shadow-color) l c h / calc(alpha * 1.55));
+    --surface-box-shadow-active: 0 2px 4px oklch(from var(--surface-shadow-color) l c h / calc(alpha * 0.8)), 0 20px 40px -12px oklch(from var(--surface-shadow-color) l c h / calc(alpha * 2.7));
+    --surface-grip-color: var(--color-primary-300);
     --surface-grip-width: 32px;
     --surface-handle-height: 28px;
     --surface-header-cursor: grab;
-    --surface-lift-duration: 200ms;
+    --surface-lift-duration: var(--duration-moderate);
     --surface-lift-opacity: 0;
     --surface-title-color: var(--color-text-500);
 

package/src/components/tasklist/scss/index.scss

@@ -1,5 +1,5 @@
-@use '/shared';
 @use '/tokens';
+@use 'css-utilities/reset';
 @use 'variables';
 
 .tasklist {
@@ -9,6 +9,23 @@
     gap: var(--gap);
 
 
+    // Numbered by task position, not DOM position, so a step keeps its number after moving
+    &--plan {
+        .tasklist-item {
+            counter-set: tasklist var(--index);
+        }
+
+        .tasklist-label::before {
+            color: var(--color);
+            content: counter(tasklist, decimal-leading-zero);
+            font-family: var(--font-family);
+            font-size: var(--font-size);
+            font-variant-numeric: tabular-nums;
+            font-weight: var(--font-weight);
+            margin-right: var(--gap);
+        }
+    }
+
     // '--line-height' comes from the row, so the box centers on the first line of the label
     &-checkbox {
         margin-top: calc((var(--line-height) - var(--size)) / 2);
@@ -24,7 +41,7 @@
         color: var(--color);
         display: block;
         font-size: var(--font-size);
-        margin-top: 2px;
+        margin-top: calc(var(--size-100) / 4);
     }
 
     &-item {
@@ -81,21 +98,4 @@
             transition: opacity var(--transition-duration) var(--timing-function);
         }
     }
-
-    // Numbered by task position, not DOM position, so a step keeps its number after moving
-    &--plan {
-        .tasklist-item {
-            counter-set: tasklist var(--index);
-        }
-
-        .tasklist-label::before {
-            color: var(--color);
-            content: counter(tasklist, decimal-leading-zero);
-            font-family: var(--font-family);
-            font-size: var(--font-size);
-            font-variant-numeric: tabular-nums;
-            font-weight: var(--font-weight);
-            margin-right: var(--gap);
-        }
-    }
 }

package/src/components/tasklist/scss/variables.scss

@@ -1,10 +1,12 @@
 @use '/tokens';
+@use 'css-utilities/background';
+@use 'css-utilities/font/geist';
 
 // Shared by every part so the check, strike, and fade stay in sequence
 .tasklist {
-    --check-duration: 150ms;
-    --gap: 2px;
-    --strike-duration: 200ms;
+    --check-duration: var(--duration-fast);
+    --gap: calc(var(--size-100) / 4);
+    --strike-duration: var(--duration-moderate);
     --timing-function: cubic-bezier(0.65, 0, 0.35, 1);
 
     @media (prefers-reduced-motion: reduce) {
@@ -13,11 +15,20 @@
     }
 
 
+    &--plan .tasklist-label::before {
+        @extend %font-geist-mono;
+        --color: var(--color-text-300);
+        --font-size: var(--font-size-200);
+        --font-weight: var(--font-weight-500);
+        --gap: calc(var(--size-300) / 2);
+    }
+
     &-checkbox {
-        --background-active: var(--color-text-500);
-        --border-color-active: var(--color-text-500);
-        --border-color-default: var(--color-border-400);
+        --background-active: var(--color-primary-500);
+        --border-color-active: var(--color-primary-500);
+        --border-color-default: var(--surface-border-hover);
         --border-width: var(--border-width-400);
+        --indicator-color-default: var(--color-surface);
         --size: var(--size-500);
     }
 
@@ -33,10 +44,10 @@
     }
 
     &-item {
-        --background: var(--background-default);
-        --background-default: transparent;
+        @extend %background-state;
         // Tints the default instead of replacing it, so an opaque row stays opaque while hovered
-        --background-hover: color-mix(in oklch, var(--color-text-500) 3%, var(--background-default));
+        --background-hover: color-mix(in oklch, var(--color-primary-500) 3%, var(--background-default));
+        --background-pressed: var(--background-hover);
         --border-radius: var(--border-radius-400);
         // Read by JS: the slide that carries a row to its new place. Spring with stiffness 320 and damping 30,
         // sampled across its 500ms settle
@@ -45,10 +56,9 @@
         // The strike and fade wait on the check while it draws
         --strike-delay: 0s;
         --strike-length: 0%;
-        --transition-duration: 150ms;
 
-        @include tokens.state(hover) {
-            --background: var(--background-hover);
+        &--checking {
+            --strike-delay: var(--check-duration);
         }
 
         &:has(.checkbox-tag:checked) {
@@ -59,10 +69,6 @@
             }
         }
 
-        &--checking {
-            --strike-delay: var(--check-duration);
-        }
-
         @media (prefers-reduced-motion: reduce) {
             --move-duration: 0ms;
         }
@@ -71,25 +77,24 @@
     &-label {
         --color: var(--color-text-500);
         --font-weight: var(--font-weight-500);
-        --strike-color: var(--color-border-400);
+        --strike-color: var(--surface-border-hover);
         --strike-width: 2px;
     }
 
     &-row {
         --font-size: var(--font-size-400);
-        --gap: 10px;
+        --gap: var(--size-200);
         --line-height: var(--size-500);
         --padding-horizontal: var(--size-100);
         --padding-vertical: var(--size-100);
 
         &--sortable {
             &::before {
-                --background: var(--color-text-300);
+                --background: var(--color-primary-300);
                 --opacity: var(--opacity-default);
                 --opacity-default: 0;
                 --opacity-hover: 1;
-                --size: 16px;
-                --transition-duration: 150ms;
+                --size: var(--size-400);
             }
 
             @include tokens.state(hover) {
@@ -99,12 +104,4 @@
             }
         }
     }
-
-    &--plan .tasklist-label::before {
-        --color: var(--color-text-300);
-        --font-family: var(--font-family-mono);
-        --font-size: var(--font-size-200);
-        --font-weight: var(--font-weight-500);
-        --gap: 6px;
-    }
 }

package/src/components/text/scss/index.scss

@@ -1,4 +1,5 @@
-@use '/shared';
+@use 'css-utilities/text';
+
 
 .text {
     @extend %text;

package/src/components/textarea/scss/variables.scss

@@ -1,7 +1,7 @@
 @use '../../input/scss/field';
 
 .textarea {
-    --resize-duration: 240ms;
+    --resize-duration: var(--duration-moderate);
     --resize-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     @include field.variables;
 }

package/src/{css-utilities → components}/theme/index.ts

@@ -1,4 +1,5 @@
 import { reactive } from '@esportsplus/reactivity';
+import './scss/index.scss';
 
 
 type Mode = 'dark' | 'light';
@@ -13,6 +14,8 @@ type Store = {
 };
 
 
+const ATTRIBUTE = 'data-theme';
+
 const KEY = 'theme';
 
 const PREFERENCES: readonly unknown[] = ['dark', 'light', 'system'];
@@ -20,6 +23,18 @@ const PREFERENCES: readonly unknown[] = ['dark', 'light', 'system'];
 const QUERY = '(prefers-color-scheme: dark)';
 
 
+// 'system' leaves <html> bare, so the stylesheet's own prefers-color-scheme default shows.
+function apply(preference: Preference) {
+    let root = document.documentElement;
+
+    if (preference === 'system') {
+        root.removeAttribute(ATTRIBUTE);
+    }
+    else {
+        root.setAttribute(ATTRIBUTE, preference);
+    }
+}
+
 function system(dark: boolean): Mode {
     return dark ? 'dark' : 'light';
 }
@@ -38,15 +53,13 @@ export default (store?: Store) => {
         (value) => {
             if (!touched && PREFERENCES.includes(value)) {
                 state.preference = value as Preference;
+                apply(state.preference);
             }
         },
         () => {}
     );
 
     return {
-        get class() {
-            return `--theme-${this.mode}`;
-        },
         get mode(): Mode {
             return state.preference === 'system' ? state.system : state.preference;
         },
@@ -56,6 +69,7 @@ export default (store?: Store) => {
         set(preference: Preference) {
             touched = true;
             state.preference = preference;
+            apply(preference);
 
             if (preference === 'system') {
                 void store?.delete(KEY);

package/src/components/theme/scss/index.scss

@@ -0,0 +1 @@
+@use 'variables';

package/src/components/theme/scss/variables.scss

@@ -0,0 +1,78 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '/shared';
+@use '/tokens';
+@use 'css-utilities/surface';
+
+
+// Each color role and weight as one 'light-dark()' of its light and dark values; a role with a single color has no
+// weights.
+@function schemes($themes) {
+    $colors: ();
+
+    @each $role, $weights in map.get($themes, light, color) {
+        @if meta.type-of($weights) == 'map' {
+            @each $weight, $light in $weights {
+                $dark: map.get($themes, dark, color, $role, $weight);
+                $colors: map.set($colors, $role, $weight, light-dark($light, $dark));
+            }
+        }
+        @else {
+            $colors: map.set($colors, $role, light-dark($weights, map.get($themes, dark, color, $role)));
+        }
+    }
+
+    @return $colors;
+}
+
+// A text weight from the theme's text, holding the mode's text step contrast against it, lighter or darker.
+// Luminance is taken as lightness cubed, exact for a neutral and close for text's faint tint, so the step solves in
+// closed form where the color is used. Chroma fades toward the end the weight moves to, never above 400's.
+@function text-weight($direction, $mode) {
+    $step: map.get(tokens.$themes, $mode, text);
+    $l: 'pow(max(0, (pow(l, 3) + 0.05) / #{$step} - 0.05), 1 / 3)';
+    $fade: '#{$l} / max(l, 0.01)';
+
+    @if $direction == lighter {
+        $l: 'min(1, pow(#{$step} * (pow(l, 3) + 0.05) - 0.05, 1 / 3))';
+        $fade: '(1 - #{$l}) / max(1 - l, 0.01)';
+    }
+
+    @return 'oklch(from var(--color-text) #{$l} calc(c * min(1, #{$fade})) h)';
+}
+
+
+// Unregistered custom properties keep 'light-dark()' unresolved, so it picks a side where it is used, by that element's
+// color-scheme; colors declared on the root, such as '--surface-shadow-color', follow every subtree's mode too.
+:root {
+    @include shared.css-variables(color, schemes(tokens.$themes));
+    // The page is level 0 of the surface ladder.
+    @include surface.surface-colors;
+    @include surface.surface-shadow(0);
+    @include surface.surface-shadows;
+
+    @include shared.color-weights(
+        primary,
+        map.get(tokens.$themes, light, surface, color),
+        map.get(tokens.$themes, dark, surface, color)
+    );
+
+    --background: var(--surface-background-default);
+    --color: var(--color-text-400);
+    // The text is 400; 300 is muted, toward the page, and 500 strongest, away from it: lighter and darker in light,
+    // the reverse in dark.
+    --color-text-300: light-dark(#{text-weight(lighter, light)}, #{text-weight(darker, dark)});
+
+    --color-text-400: var(--color-text);
+    --color-text-500: light-dark(#{text-weight(darker, light)}, #{text-weight(lighter, dark)});
+    color-scheme: light dark;
+}
+
+// Set on <html> by 'theme()' to pin the page; any element can carry it to pin its subtree.
+[data-theme='dark'] {
+    color-scheme: dark;
+}
+
+[data-theme='light'] {
+    color-scheme: light;
+}