@esportsplus/ui 0.57.0 → 0.58.0

package/src/components/inline-edit/scss/index.scss

@@ -1,5 +1,8 @@
-@use '/shared';
 @use '/tokens';
+@use 'css-utilities/font/geist';
+@use 'css-utilities/hidden';
+@use 'css-utilities/icon';
+@use 'css-utilities/surface';
 @use 'variables';
 
 // Pulled out by its own padding, so the text lines up with the surrounding content while the tint still has room.
@@ -26,7 +29,7 @@
 
     // Stays in the cell while editing (hidden), so the field inherits its exact width and starting height.
     &-display {
-        background: transparent;
+        background: var(--background);
         border: 0;
         color: inherit;
         cursor: text;
@@ -37,10 +40,6 @@
         outline: none;
         transition: background-color var(--transition-duration) var(--transition-timing-function);
 
-        &:hover {
-            background: var(--background-hover);
-        }
-
         &:focus-visible {
             outline: var(--border-width-500) solid var(--outline-color);
         }
@@ -65,18 +64,17 @@
 
     // Always editable, so a click drops the caret where it lands; the field look only shows while editing.
     &-editor {
+        background: var(--background);
         caret-color: currentColor;
         cursor: text;
         outline: none;
         position: relative;
         transition: background-color var(--transition-duration) var(--transition-timing-function);
 
-        &:hover {
-            background: var(--background-hover);
-        }
-
         #{tokens.state(active, '.inline-edit')} > & {
-            background: var(--field-background);
+            @extend %surface-raised-level;
+            --background-default: var(--field-background, var(--surface-background-default));
+            --background-hover: var(--background-default);
             box-shadow: var(--field-ring);
             text-overflow: clip;
         }
@@ -88,11 +86,15 @@
             position: absolute;
         }
 
+        > * + * {
+            margin-top: var(--paragraph-gap);
+        }
+
         a {
             color: inherit;
             text-decoration: underline;
             text-decoration-color: var(--link-underline-color);
-            text-underline-offset: 4px;
+            text-underline-offset: calc(var(--size-100) / 2);
         }
 
         blockquote {
@@ -112,16 +114,21 @@
             margin: 0;
         }
 
+        code {
+            border-radius: var(--border-radius-100);
+            padding: 0.125em 0.3em;
+        }
+
         code,
         pre {
-            background: var(--code-background);
-            font-family: var(--font-family-mono);
+            @extend %font-geist-mono, %surface-sunken-level;
+            background: var(--surface-background-default);
+            font-family: var(--font-family);
             font-size: 0.875em;
         }
 
-        code {
-            border-radius: var(--border-radius-100);
-            padding: 0.125em 0.3em;
+        h1 {
+            font-size: var(--heading-1-size);
         }
 
         h1,
@@ -131,10 +138,6 @@
             line-height: 1.3;
         }
 
-        h1 {
-            font-size: var(--heading-1-size);
-        }
-
         h2 {
             font-size: var(--heading-2-size);
         }
@@ -161,7 +164,7 @@
 
         pre {
             border-radius: var(--border-radius-400);
-            padding: 8px 12px;
+            padding: var(--size-100) 12px;
             white-space: pre-wrap;
         }
 
@@ -173,10 +176,6 @@
             list-style: none;
             padding-inline-start: 0;
         }
-
-        > * + * {
-            margin-top: var(--paragraph-gap);
-        }
     }
 
     // One set of three dots throughout: a single dot means there are changes, it splits into three that pulse while
@@ -194,6 +193,29 @@
         white-space: nowrap;
         width: var(--width);
 
+        &--saved &-check {
+            opacity: 1;
+            stroke-dashoffset: 0;
+            transition:
+                opacity var(--check-duration) var(--timing-function) var(--check-delay),
+                stroke-dashoffset var(--check-duration) var(--timing-function) var(--check-delay);
+        }
+
+        &--saving &-dot {
+            opacity: 1;
+            scale: 1;
+            translate: calc((var(--i) - 1) * var(--dot-gap));
+
+            &::before {
+                animation: inline-edit-status-pulse var(--pulse-duration) var(--easing-in-out) calc(var(--i) * var(--pulse-stagger)) infinite;
+            }
+        }
+
+        &--unsaved &-dot:nth-child(2) {
+            opacity: 1;
+            scale: 1.5;
+        }
+
         &-announcement {
             @extend %hidden-visually;
         }
@@ -264,29 +286,6 @@
                 }
             }
         }
-
-        &--saved &-check {
-            opacity: 1;
-            stroke-dashoffset: 0;
-            transition:
-                opacity var(--check-duration) var(--timing-function) var(--check-delay),
-                stroke-dashoffset var(--check-duration) var(--timing-function) var(--check-delay);
-        }
-
-        &--saving &-dot {
-            opacity: 1;
-            scale: 1;
-            translate: calc((var(--i) - 1) * var(--dot-gap));
-
-            &::before {
-                animation: inline-edit-status-pulse var(--pulse-duration) ease-in-out calc(var(--i) * var(--pulse-stagger)) infinite;
-            }
-        }
-
-        &--unsaved &-dot:nth-child(2) {
-            opacity: 1;
-            scale: 1.5;
-        }
     }
 
     // The checklist box: an atomic inline, so the done item's strike-through doesn't run across it.
@@ -321,13 +320,17 @@
         color: var(--icon-color);
         display: grid;
         height: 24px;
-        inset-block-start: 4px;
-        inset-inline-end: 6px;
+        inset-block-start: calc(var(--size-100) / 2);
+        inset-inline-end: calc(var(--size-300) / 2);
         place-items: center;
         pointer-events: none;
         position: absolute;
         width: 24px;
 
+        &-check {
+            color: var(--icon-color-saved);
+        }
+
         // Only the shared check takes these; it carries no stroke of its own and is drawn on a 24 unit grid.
         &-check,
         &-pencil {
@@ -338,21 +341,12 @@
             width: var(--icon-size);
         }
 
-        &-check {
-            color: var(--icon-color-saved);
-        }
-
         // The pencil rests in place but faded, showing only on hover or keyboard focus.
         &-pencil {
             @extend %icon-swap-active;
             opacity: 0;
         }
 
-        // Not while saved: the saved pencil is hidden by the shared swap rules, which come first, so they'd lose a tie.
-        .inline-edit:not(.inline-edit--saved):is(:hover, :has(:focus-visible)) &-pencil {
-            opacity: 1;
-        }
-
         .inline-edit.inline-edit--saved &-check {
             @extend %icon-swap-active;
         }
@@ -361,6 +355,11 @@
             @extend %icon-swap;
         }
 
+        // Not while saved: the saved pencil is hidden by the shared swap rules, which come first, so they'd lose a tie.
+        .inline-edit:not(.inline-edit--saved):is(:hover, :has(:focus-visible)) &-pencil {
+            opacity: 1;
+        }
+
         #{tokens.state(active, '.inline-edit')} > & {
             visibility: hidden;
         }
@@ -370,27 +369,22 @@
         @extend %hidden-visually;
     }
 
-    // Placed over the selection through '--toolbar-x'/'--toolbar-y', scaling out of it from '--toolbar-origin'.
-    // Visible overflow lets the block select's list hang outside the bar.
-    // Qualified so it wins over the reused tooltip styles regardless of stylesheet order.
-    &-toolbar.tooltip-content {
-        left: 0;
-        overflow: visible;
-        padding: 4px;
-        top: 0;
-        transform-origin: var(--toolbar-origin);
-        translate: var(--toolbar-x) var(--toolbar-y);
-    }
-
     // Shown afresh, it jumps to the selection rather than gliding from where it last was.
     &-toolbar--instant.tooltip-content {
         transition: none;
     }
 
-    // The block select is a bare trigger here; its own list still opens as a panel.
+    // The block select is a bare trigger here, stepping like the toolbar's buttons; its own list still opens as a
+    // panel.
     &-toolbar-block.select {
-        --background: transparent;
-        --box-shadow: none;
+        --background-active: var(--background-hover);
+        --background-default: transparent;
+        --background-hover: color-mix(in oklab, var(--toolbar-color) 6%, transparent);
+        --background-pressed: var(--background-hover);
+        --box-shadow-active: none;
+        --box-shadow-default: none;
+        --box-shadow-hover: none;
+        --box-shadow-pressed: none;
         --height: var(--toolbar-button-size);
         --width: var(--toolbar-select-width);
         color: var(--toolbar-color);
@@ -410,15 +404,10 @@
         height: var(--toolbar-button-size);
         outline: none;
         transition:
-            background-color var(--toolbar-button-duration) ease-out,
-            color var(--toolbar-button-duration) ease-out,
-            scale var(--toolbar-button-duration) ease-out;
+            background-color var(--duration-fast) var(--easing-spring),
+            color var(--duration-fast) var(--easing-spring);
         width: var(--toolbar-button-size);
 
-        &:active {
-            scale: 0.96;
-        }
-
         &:focus-visible {
             outline: 2px solid var(--toolbar-focus-color);
         }
@@ -437,24 +426,20 @@
     &-toolbar-divider {
         background: var(--toolbar-divider-color);
         flex: none;
-        height: 20px;
-        margin-inline: 4px;
+        height: var(--size-500);
+        margin-inline: calc(var(--size-100) / 2);
         width: 1px;
     }
 
-    // One pane shows at a time: the buttons, or the link field while a link is being set.
-    &-toolbar-format,
-    &-toolbar-link {
-        align-items: center;
-        gap: 2px;
-    }
-
     &-toolbar-format {
         display: var(--toolbar-format-display);
     }
 
+    // One pane shows at a time: the buttons, or the link field while a link is being set.
+    &-toolbar-format,
     &-toolbar-link {
-        display: var(--toolbar-link-display);
+        align-items: center;
+        gap: calc(var(--size-100) / 4);
     }
 
     // Only the shared check takes the stroke; it carries none of its own and is drawn on a 24 unit grid.
@@ -468,10 +453,14 @@
         width: var(--toolbar-icon-size);
     }
 
+    &-toolbar-link {
+        display: var(--toolbar-link-display);
+    }
+
     &-toolbar-url.input {
         --background-default: transparent;
         --color-default: var(--toolbar-color);
-        --padding-horizontal: 8px;
+        --padding-horizontal: var(--size-100);
         --padding-vertical: 0px;
         font-size: var(--toolbar-font-size);
         height: var(--toolbar-button-size);
@@ -483,6 +472,18 @@
             --color-default: var(--color-red-400);
         }
     }
+
+    // Placed over the selection through '--toolbar-x'/'--toolbar-y', scaling out of it from '--toolbar-origin'.
+    // Visible overflow lets the block select's list hang outside the bar.
+    // Qualified so it wins over the reused tooltip styles regardless of stylesheet order.
+    &-toolbar.tooltip-content {
+        left: 0;
+        overflow: visible;
+        padding: calc(var(--size-100) / 2);
+        top: 0;
+        transform-origin: var(--toolbar-origin);
+        translate: var(--toolbar-x) var(--toolbar-y);
+    }
 }
 
 @keyframes inline-edit-status-enter {
@@ -515,28 +516,22 @@
     }
 }
 
-// Every motion but the icon swap (stilled by '%icon-swap' itself) runs on these durations, so zeroing them stills the
-// component.
+// Only the fades remain; the icon swap is stilled by '%icon-swap' itself.
 @media (prefers-reduced-motion: reduce) {
     .inline-edit {
-        --toolbar-button-duration: 0s;
-
         &-status {
+            --blur: 0px;
             --check-delay: 0s;
             --check-duration: 0s;
-            --enter-duration: 0s;
-            --exit-duration: 0s;
             --move-duration: 0s;
             --pulse-duration: 0s;
             --pulse-stagger: 0s;
+            --shift: 0px;
         }
 
         &-toolbar.tooltip-content {
-            --transition-duration: 0s;
+            --scale: 1;
+            transition-property: opacity;
         }
     }
-
-    .inline-edit-toolbar-button.button:active {
-        scale: 1;
-    }
 }

package/src/components/inline-edit/scss/variables.scss

@@ -1,74 +1,76 @@
+@use 'css-utilities/background';
+
+
 .inline-edit {
-    --background-hover: oklch(from var(--color-text-500) l c h / 0.04);
     --box-border-radius: var(--border-radius-400);
     --box-overflow-wrap: normal;
-    --box-padding-block: 4px;
+    --box-padding-block: calc(var(--size-100) / 2);
     --box-padding-end: 36px;
-    --box-padding-start: 8px;
+    --box-padding-start: var(--size-100);
     --box-text-overflow: ellipsis;
     --box-white-space: pre;
-    --code-background: oklch(from var(--color-text-500) l c h / 0.06);
     --color: var(--color-text-500);
-    --field-background: var(--color-white-300);
-    --field-ring: 0 0 0 1.5px oklch(from var(--color-text-500) l c h / 0.25);
+    --field-ring: 0 0 0 1.5px var(--surface-border-pressed);
     --heading-1-size: 1.5em;
     --heading-2-size: 1.25em;
     --heading-3-size: 1.125em;
-    --icon-color: var(--color-text-300);
-    --icon-color-saved: var(--color-text-500);
-    --icon-size: 16px;
-    --icon-swap-duration: 300ms;
+    --icon-color: var(--color-primary-300);
+    --icon-color-saved: var(--color-primary-500);
+    --icon-size: var(--size-400);
+    --icon-swap-duration: var(--duration-moderate);
     --icon-swap-timing-function: linear(0, 0.035, 0.118, 0.216, 0.319, 0.424, 0.515, 0.6, 0.669, 0.728, 0.781, 0.822, 0.856, 0.885, 0.908, 0.927, 0.942, 0.954, 0.964, 0.971, 0.977, 0.982, 0.986, 0.989, 0.991, 0.993, 0.995, 0.996, 0.997, 0.997, 1);
-    --link-underline-color: oklch(from var(--color-text-500) l c h / 0.4);
-    --mark-background: oklch(from var(--color-text-500) l c h / 0.15);
-    --outline-color: var(--color-text-500);
+    --link-underline-color: oklch(from var(--color-primary-500) l c h / 0.4);
+    --mark-background: oklch(from var(--color-primary-500) l c h / 0.15);
+    --outline-color: var(--color-primary-500);
     --paragraph-gap: 12px;
     --placeholder-color: var(--color-text-300);
-    --quote-border-color: var(--color-border-300);
+    --quote-border-color: var(--surface-border-default);
     --quote-color: var(--color-text-400);
-    --status-margin-top: 4px;
-    --task-border-color: var(--color-text-300);
-    --task-check-color: var(--color-white-300);
-    --task-checked-color: var(--color-text-500);
+    --status-margin-top: calc(var(--size-100) / 2);
+    --task-border-color: var(--color-primary-300);
+    --task-check-color: var(--color-surface);
+    --task-checked-color: var(--color-primary-500);
     --task-done-color: var(--color-text-300);
-    --toolbar-background: var(--color-grey-400);
-    --toolbar-box-shadow:
-        0 0 0 1px color-mix(in oklab, var(--color-black-300) 6%, transparent),
-        0 1px 2px color-mix(in oklab, var(--color-black-300) 6%, transparent),
-        0 6px 16px -6px color-mix(in oklab, var(--color-black-300) 12%, transparent);
-    --toolbar-button-duration: 150ms;
     --toolbar-button-size: 36px;
     --toolbar-color: var(--color-text-500);
     --toolbar-color-muted: var(--color-text-300);
-    --toolbar-divider-color: var(--color-border-300);
-    --toolbar-focus-color: color-mix(in oklab, var(--color-text-500) 38%, transparent);
+    --toolbar-divider-color: var(--surface-border-default);
+    --toolbar-focus-color: var(--surface-border-pressed);
     --toolbar-font-size: var(--font-size-300);
     --toolbar-format-display: flex;
-    --toolbar-icon-size: 16px;
+    --toolbar-icon-size: var(--size-400);
     --toolbar-link-display: none;
     --toolbar-select-width: 132px;
     --toolbar-url-width: 220px;
 
+    // Tinted on hover, until editing turns the editor into a field.
+    &-display,
+    &-editor {
+        @extend %background-state;
+        --background-hover: var(--surface-background-hover);
+        --background-pressed: var(--background-hover);
+    }
+
     // The save status, as wide as its longest label so the icon never shifts and old and new words cross in one spot.
     &-status {
-        --blur: 3px;
-        --check-color: var(--color-text-500);
+        --blur: var(--blur-400);
+        --check-color: var(--color-primary-500);
         --check-delay: 0.12s;
-        --check-duration: 0.35s;
+        --check-duration: var(--duration-slow);
         --check-stroke-width: 2.4;
         --color: var(--color-text-300);
         --dot-gap: calc(var(--icon-size) * 0.3125);
         --dot-size: calc(var(--icon-size) / 4);
-        --enter-duration: 0.22s;
-        --exit-duration: 0.12s;
+        --enter-duration: var(--duration-moderate);
+        --exit-duration: var(--duration-moderate-exit);
         --font-size: var(--font-size-300);
         --gap: 0.5rem;
         --icon-size: 1.25em;
-        --move-duration: 0.4s;
+        --move-duration: var(--duration-slow);
         --pulse-duration: 1s;
         --pulse-stagger: 0.16s;
         --shift: 3px;
-        --timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+        --timing-function: var(--easing-spring);
         --width: 11em;
     }
 
@@ -79,20 +81,19 @@
     }
 
     // Feeds the reused tooltip content; qualified so it wins over the tooltip defaults regardless of stylesheet order.
+    // A surface through the tooltip content it reuses, so its colors are read at its own level.
     &-toolbar.tooltip-content {
-        --background: var(--toolbar-background);
+        --background-default: var(--surface-background-default);
         --border-radius: var(--border-radius-600);
-        --box-shadow: var(--toolbar-box-shadow);
+        --box-shadow-default: var(--surface-shadow-default);
         --scale: 0.96;
-        --transition-duration: 180ms;
-        --transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
         --width: max-content;
     }
 
 
     // Qualified by the root so it wins over the reused input/textarea styles regardless of stylesheet order.
     & > #{&}-field {
-        --background-default: var(--field-background);
+        --background-default: var(--field-background, var(--surface-background-default));
         --color-default: currentColor;
     }
 

package/src/components/input/scss/_field.scss

@@ -1,10 +1,13 @@
-@use '/shared';
-@use '/tokens';
+@use 'css-utilities/background';
+@use 'css-utilities/border';
+@use 'css-utilities/box-shadow';
+@use 'css-utilities/color';
+
 
 // The text field '.input' and '.textarea' both are: one box with its states, padded so its border sits inside it.
 // It ends in nested rules, so it is included after the field's own declarations.
 @mixin base {
-    @extend %background-state, %border-state, %color-state;
+    @extend %background-state, %border-state, %box-shadow-state, %color-state;
     background: var(--background);
     border: var(--border-width) var(--border-style) var(--border-color);
     border-radius: var(--border-radius);
@@ -24,30 +27,13 @@
     }
 }
 
-// Included after the field's own variables, for the same reason.
 @mixin variables {
     --border-color-default: var(--background);
     --border-radius: var(--border-radius-400);
     --border-style: solid;
     --border-width: 0px;
-    --box-shadow: var(--box-shadow-default);
-    --box-shadow-default: none;
     --font-size: var(--font-size-400);
     --padding-horizontal: var(--size-400);
     --padding-vertical: var(--size-400);
     --size: var(--size-400);
-
-    #{tokens.state(inactive)} {
-        @include tokens.state(hover) {
-            --box-shadow: var(--box-shadow-hover);
-        }
-
-        @include tokens.state(pressed) {
-            --box-shadow: var(--box-shadow-pressed);
-        }
-    }
-
-    #{tokens.state(active)} {
-        --box-shadow: var(--box-shadow-active);
-    }
 }

package/src/components/input/scss/_scrub.scss

@@ -1,4 +1,6 @@
-@use '/shared';
+@use 'css-utilities/absolute';
+@use 'css-utilities/color';
+
 
 .input-scrub {
     align-items: center;
@@ -25,8 +27,12 @@
     }
 
     &-label {
+        @extend %color-state;
+        --color-default: var(--label-color);
+        --color-hover: var(--label-color-active);
+        --color-pressed: var(--color-hover);
         align-items: center;
-        color: var(--label-color);
+        color: var(--color);
         cursor: ew-resize;
         display: flex;
         flex-shrink: 0;
@@ -38,13 +44,9 @@
         user-select: none;
         width: var(--label-width);
 
-        &:hover {
-            color: var(--label-color-active);
-        }
-
         svg {
-            height: 16px;
-            width: 16px;
+            height: var(--size-400);
+            width: var(--size-400);
         }
     }