@esportsplus/ui 0.57.0 → 0.58.0

package/src/components/dock/scss/variables.scss

@@ -1,21 +1,26 @@
+@use 'css-utilities/surface';
+
+
+
+// A surface, and each button a surface above it.
 .dock {
-    --background-default: var(--color-grey-400);
+    @extend %surface-raised-level;
+    --background-default: var(--surface-background-default);
     --border-radius: 999px;
     --border-width: 0px;
-    --box-shadow-default: 0 0 0 var(--border-width-400) var(--color-border-300), var(--box-shadow-200);
+    --box-shadow-default: 0 0 0 var(--border-width-400) var(--surface-border-default), var(--surface-shadow-default);
     // Long on purpose: it is the "starting up" signal itself, it plays once per app, and input is never blocked while it plays.
     --hop-duration: 0.7s;
     --icon-ratio: 0.45;
     // Shelf space around the resting icons. Its own name: the global per-element reset would swallow '--padding-*' on the items.
     --inset: 12px;
     --item-radius: 999px;
-    --light-color: var(--color-text-500);
+    --light-color: var(--color-primary-500);
     // The running light comes on as the icon first lands (55% into 'dock-hop'), not on click.
     --light-delay: calc(var(--hop-duration) * 0.55);
     --light-size: 4px;
-    // Stands in for the overdamped spring the swell used to run on: no overshoot, settled in about 0.3s.
-    --magnify-duration: 0.3s;
-    --magnify-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+    --magnify-duration: var(--duration-fast);
+    --magnify-timing-function: var(--easing-spring);
     --padding-horizontal: calc(var(--inset) - var(--spacing) / 2);
     --padding-vertical: 0px;
     // The hovered icon peaks and each neighbour steps a third of the way back to rest.
@@ -24,7 +29,7 @@
     --size-peak: 54px;
     --size-rest: 40px;
     // Split into padding on each item so the gaps are hoverable too.
-    --spacing: 8px;
+    --spacing: var(--size-100);
 
 
     &--square {
@@ -33,9 +38,10 @@
     }
 
     &-button {
-        --background-default: var(--color-white-300);
+        @extend %surface-raised-level;
+        --background-default: var(--surface-background-default);
         --border-radius: var(--item-radius);
-        --box-shadow-default: 0 0 0 var(--border-width-400) var(--color-border-300), var(--box-shadow-100);
+        --box-shadow-default: 0 0 0 var(--border-width-400) var(--surface-border-default), var(--surface-shadow-default);
         --color: var(--color-text-500);
     }
 
@@ -45,8 +51,9 @@
         // The hovered icon peaks and swells its two neighbours on each side. Touch has no hover to follow, and
         // reduced motion keeps the icons still.
         @media (hover: hover) and (prefers-reduced-motion: no-preference) {
-            &:hover {
-                --size: var(--size-peak);
+            &:has(+ .dock-item + .dock-item:hover),
+            &:hover + .dock-item + .dock-item {
+                --size: var(--size-far);
             }
 
             &:has(+ .dock-item:hover),
@@ -54,32 +61,29 @@
                 --size: var(--size-near);
             }
 
-            &:has(+ .dock-item + .dock-item:hover),
-            &:hover + .dock-item + .dock-item {
-                --size: var(--size-far);
+            &:hover {
+                --size: var(--size-peak);
             }
         }
     }
 
+    &-label.tooltip-message {
+        --border-radius: var(--border-radius-300);
+        --offset: calc(var(--size-100) / 2);
+        --padding-horizontal: var(--size-100);
+        --padding-vertical: calc(var(--size-100) / 2);
+    }
+
     // Both anchor to the item's top, which is the shelf's; clears an icon at full swell by 12px.
     &-label.tooltip-message,
     &-label.tooltip-shared {
-        --box-shadow: none;
+        --box-shadow-default: none;
         --font-weight: var(--font-weight-500);
         --spacer: calc(var(--size-peak) - var(--size-rest) - var(--inset) + 12px);
     }
 
-    &-label.tooltip-message {
-        --border-radius: var(--border-radius-300);
-        --offset: 4px;
-        --padding-horizontal: 8px;
-        --padding-vertical: 4px;
-        --transition-duration: 0.15s;
-        --transition-timing-function: ease-out;
-    }
-
     &-label.tooltip-shared {
-        --padding: 4px 8px;
+        --padding: calc(var(--size-100) / 2) var(--size-100);
         --radius: var(--border-radius-300);
     }
 

package/src/components/editor/code/index.ts

@@ -1,5 +1,4 @@
 import editor from './editor';
-import '~/css-utilities/scrollbar/scss/index.scss';
 import './scss/index.scss';
 
 

package/src/components/editor/code/minimap.ts

@@ -62,8 +62,16 @@ const minimapScroll = (y: number, grab: number, height: number, scrollHeight: nu
 };
 
 // The whole document drawn into a fixed-height canvas, with a slider for the viewport. Edits that keep the line
-// count redraw only their band; anything else redraws once per frame at most.
-const minimap = ({ focus, scroll }: { focus: VoidFunction; scroll: (top: number, relative: boolean) => void }) => {
+// count redraw only their band; anything else redraws once per frame at most. 'name' prefixes its classes.
+const minimap = ({
+    focus,
+    name = 'code-editor',
+    scroll
+}: {
+    focus: VoidFunction;
+    name?: string;
+    scroll: (top: number, relative: boolean) => void;
+}) => {
     let canvas: HTMLCanvasElement | undefined,
         colors: Record<string, string> = {},
         content = 0,
@@ -244,10 +252,10 @@ const minimap = ({ focus, scroll }: { focus: VoidFunction; scroll: (top: number,
         },
         state,
         template: (attributes?: Attributes) => html`
-            <div aria-hidden='true' class='code-editor-minimap' ${handlers} ${attributes}>
-                <canvas class='code-editor-minimap-canvas' ${{ onconnect: (element: HTMLCanvasElement) => { canvas = element; } }}></canvas>
+            <div aria-hidden='true' class='${name}-minimap' ${handlers} ${attributes}>
+                <canvas class='${name}-minimap-canvas' ${{ onconnect: (element: HTMLCanvasElement) => { canvas = element; } }}></canvas>
                 <div
-                    class='code-editor-minimap-slider'
+                    class='${name}-minimap-slider'
                     ${{ style: () => `--slider-height: ${state.height}px; --slider-top: ${state.top}px;` }}
                 ></div>
             </div>

package/src/components/editor/code/scss/_editor.scss

@@ -1,5 +1,8 @@
-@use '/shared';
 @use '/tokens';
+@use 'css-utilities/background';
+@use 'css-utilities/color';
+@use 'css-utilities/hidden';
+@use 'css-utilities/surface';
 
 .code-editor {
     background: var(--background);
@@ -50,11 +53,50 @@
 
     &-find {
         flex-direction: column;
+
+        &-button.button {
+            flex: none;
+            height: var(--bar-control-height);
+            min-width: var(--bar-control-height);
+
+            &:disabled {
+                cursor: default;
+                opacity: var(--disabled-opacity);
+            }
+
+            &:focus-visible {
+                outline: var(--focus-width) solid var(--focus-color);
+            }
+        }
+
+        &-row {
+            align-items: center;
+            display: flex;
+            flex-wrap: wrap;
+            gap: var(--bar-gap);
+
+            &--replace {
+                display: none;
+
+                @include tokens.state(active) {
+                    display: flex;
+                }
+            }
+        }
+
+        &-status {
+            color: var(--muted-color);
+            font-variant-numeric: tabular-nums;
+            min-width: 6ch;
+            text-align: center;
+            white-space: nowrap;
+        }
     }
 
     &-find,
     &-goto {
-        background: var(--bar-background);
+        @extend %surface-sunken-level;
+        background: var(--surface-background-default);
         border-bottom: var(--border-width) solid var(--border-color);
         display: none;
         flex: none;
@@ -68,21 +110,6 @@
         }
     }
 
-    &-find-button.button {
-        flex: none;
-        height: var(--bar-control-height);
-        min-width: var(--bar-control-height);
-
-        &:disabled {
-            cursor: default;
-            opacity: var(--disabled-opacity);
-        }
-
-        &:focus-visible {
-            outline: var(--focus-width) solid var(--focus-color);
-        }
-    }
-
     &-find-input.input,
     &-goto-input.input {
         flex: 1 1 var(--bar-input-width);
@@ -98,29 +125,6 @@
         }
     }
 
-    &-find-row {
-        align-items: center;
-        display: flex;
-        flex-wrap: wrap;
-        gap: var(--bar-gap);
-
-        &--replace {
-            display: none;
-
-            @include tokens.state(active) {
-                display: flex;
-            }
-        }
-    }
-
-    &-find-status {
-        color: var(--muted-color);
-        font-variant-numeric: tabular-nums;
-        min-width: 6ch;
-        text-align: center;
-        white-space: nowrap;
-    }
-
     &-fold {
         align-items: center;
         cursor: pointer;
@@ -135,12 +139,12 @@
             pointer-events: none;
             visibility: hidden;
         }
-    }
 
-    &-fold-icon.icon {
-        --size: var(--fold-icon-size);
-        rotate: var(--fold-rotate);
-        transition: rotate var(--fold-duration) ease-out;
+        &-icon.icon {
+            --size: var(--fold-icon-size);
+            rotate: var(--fold-rotate);
+            transition: rotate var(--fold-duration) var(--easing-spring);
+        }
     }
 
     &-goto {
@@ -210,6 +214,9 @@
     }
 
     &-line {
+        @extend %background-state;
+        --background-active: var(--active-line-background);
+        background: var(--background);
         box-sizing: border-box;
         left: 0;
         min-width: 100%;
@@ -218,10 +225,6 @@
         white-space: var(--white-space);
         width: var(--line-width);
 
-        @include tokens.state(active) {
-            background: var(--active-line-background);
-        }
-
         &--unused {
             display: none;
         }
@@ -232,11 +235,10 @@
     }
 
     &-match {
-        background: var(--match-background);
-
-        @include tokens.state(active) {
-            background: var(--match-active-background);
-        }
+        @extend %background-state;
+        --background-active: var(--match-active-background);
+        --background-default: var(--match-background);
+        background: var(--background);
     }
 
     &-minimap {
@@ -255,49 +257,49 @@
         touch-action: none;
         width: var(--minimap-width);
         z-index: 4;
-    }
 
-    &-minimap-canvas {
-        display: block;
-        height: 100%;
-        width: 100%;
-    }
+        &-canvas {
+            display: block;
+            height: 100%;
+            width: 100%;
+        }
 
-    &-minimap-slider {
-        background: var(--minimap-slider-background);
-        border: var(--border-width) solid var(--border-color);
-        box-sizing: border-box;
-        height: var(--slider-height);
-        left: 0;
-        pointer-events: none;
-        position: absolute;
-        top: var(--slider-top);
-        transition: none;
-        width: 100%;
+        &-slider {
+            background: var(--minimap-slider-background);
+            border: var(--border-width) solid var(--border-color);
+            box-sizing: border-box;
+            height: var(--slider-height);
+            left: 0;
+            pointer-events: none;
+            position: absolute;
+            top: var(--slider-top);
+            transition: none;
+            width: 100%;
+        }
     }
 
     &-number {
+        @extend %color-state;
+        --color-active: var(--gutter-active-color);
+        --color-default: currentColor;
         // A wrapped line's number and fold marker sit on its first row.
         align-items: flex-start;
+        color: var(--color);
         display: flex;
         left: 0;
         position: absolute;
         width: 100%;
 
-        @include tokens.state(active) {
-            color: var(--gutter-active-color);
-        }
-
         &--unused {
             display: none;
         }
-    }
 
-    &-number-text {
-        display: var(--number-display);
-        flex: 1;
-        line-height: var(--line-height);
-        text-align: right;
+        &-text {
+            display: var(--number-display);
+            flex: 1;
+            line-height: var(--line-height);
+            text-align: right;
+        }
     }
 
     &-numbers {

package/src/components/editor/code/scss/_features.scss

@@ -1,4 +1,7 @@
 @use '/tokens';
+@use 'css-utilities/background';
+@use 'css-utilities/color';
+@use 'css-utilities/surface';
 
 // Sticky scroll, color swatches, links, unicode warnings, rulers, the git gutter and its peek, and conflict blocks with
 // their lenses. Marks style spans in the rendered rows, so none of them adds width to the text the field lays out.
@@ -51,24 +54,27 @@
         &--readonly .code-editor-lens-action--accept {
             display: none;
         }
-    }
-
-    &-lens-action {
-        appearance: none;
-        background: transparent;
-        border: 0;
-        color: var(--lens-color);
-        cursor: pointer;
-        font: inherit;
-        padding: 0;
-
-        &:focus-visible {
-            outline: var(--focus-width) solid var(--focus-color);
-        }
 
-        &:hover {
+        &-action {
+            @extend %color-state;
+            --color-default: var(--lens-color);
+            --color-hover: var(--lens-color-hover);
+            --color-pressed: var(--color-hover);
+            appearance: none;
+            background: transparent;
+            border: 0;
             color: var(--color);
-            text-decoration: underline;
+            cursor: pointer;
+            font: inherit;
+            padding: 0;
+
+            &:focus-visible {
+                outline: var(--focus-width) solid var(--focus-color);
+            }
+
+            &:hover {
+                text-decoration: underline;
+            }
         }
     }
 
@@ -103,10 +109,11 @@
     }
 
     &-peek {
-        background: var(--background);
+        @extend %surface-raised-level;
+        background: var(--surface-background-default);
         border-bottom: var(--border-width) solid var(--peek-border-color);
         border-top: var(--border-width) solid var(--peek-border-color);
-        box-shadow: var(--popup-shadow);
+        box-shadow: var(--surface-shadow-default);
         box-sizing: border-box;
         display: none;
         flex-direction: column;
@@ -127,65 +134,67 @@
         &--deleted {
             --peek-border-color: var(--gutter-deleted-color);
         }
-    }
 
-    &-peek-bar {
-        align-items: center;
-        background: var(--bar-background);
-        display: flex;
-        flex: none;
-        font-size: var(--bar-font-size);
-        gap: var(--bar-gap);
-        padding: var(--bar-padding);
-    }
-
-    &-peek-button {
-        align-items: center;
-        appearance: none;
-        background: transparent;
-        border: 0;
-        border-radius: var(--border-radius-200);
-        color: inherit;
-        cursor: pointer;
-        display: flex;
-        height: var(--bar-control-height);
-        justify-content: center;
-        padding: 0;
-        width: var(--bar-control-height);
-
-        &:disabled {
-            cursor: default;
-            opacity: var(--disabled-opacity);
+        &-bar {
+            @extend %surface-sunken-level;
+            align-items: center;
+            background: var(--surface-background-default);
+            display: flex;
+            flex: none;
+            font-size: var(--bar-font-size);
+            gap: var(--bar-gap);
+            padding: var(--bar-padding);
         }
 
-        &:focus-visible {
-            outline: var(--focus-width) solid var(--focus-color);
+        &-button {
+            @extend %background-state;
+            --background-hover: var(--active-line-background);
+            --background-pressed: var(--background-hover);
+            align-items: center;
+            appearance: none;
+            background: var(--background);
+            border: 0;
+            border-radius: var(--border-radius-200);
+            color: inherit;
+            cursor: pointer;
+            display: flex;
+            height: var(--bar-control-height);
+            justify-content: center;
+            padding: 0;
+            width: var(--bar-control-height);
+
+            &:disabled {
+                --background-hover: var(--background-default);
+                --background-pressed: var(--background-default);
+                cursor: default;
+                opacity: var(--disabled-opacity);
+            }
+
+            &:focus-visible {
+                outline: var(--focus-width) solid var(--focus-color);
+            }
         }
 
-        &:hover:not(:disabled) {
-            background: var(--active-line-background);
+        &-icon.icon {
+            --size: var(--bar-icon-size);
         }
-    }
 
-    &-peek-icon.icon {
-        --size: var(--bar-icon-size);
-    }
-
-    &-peek-lines {
-        background: var(--peek-lines-background);
-        flex: 1;
-        font: inherit;
-        margin: 0;
-        min-height: 0;
-        overflow: auto;
-        padding: 0 var(--padding);
-        white-space: pre;
-    }
+        &-lines {
+            background: var(--peek-lines-background);
+            flex: 1;
+            font: inherit;
+            margin: 0;
+            min-height: 0;
+            overflow: auto;
+            padding: 0 var(--padding);
+            white-space: pre;
+        }
 
-    &-peek-title {
-        color: var(--muted-color);
-        flex: 1;
-        min-width: 0;
+        &-title {
+            color: var(--muted-color);
+            flex: 1;
+            min-width: 0;
+        }
     }
 
     &-picker-anchor {
@@ -222,39 +231,39 @@
         @include tokens.state(active) {
             display: flex;
         }
-    }
 
-    &-sticky-code {
-        display: block;
-        transition: none;
-        white-space: pre;
-    }
-
-    &-sticky-number {
-        border-right: var(--border-width) solid var(--border-color);
-        box-sizing: border-box;
-        color: var(--gutter-color);
-        flex: none;
-        overflow: hidden;
-        padding-right: var(--fold-width);
-        text-align: right;
-        width: var(--gutter-width);
-    }
+        &-code {
+            display: block;
+            transition: none;
+            white-space: pre;
+        }
 
-    &-sticky-row {
-        cursor: pointer;
-        display: flex;
-        height: var(--line-height);
+        &-number {
+            border-right: var(--border-width) solid var(--border-color);
+            box-sizing: border-box;
+            color: var(--gutter-color);
+            flex: none;
+            overflow: hidden;
+            padding-right: var(--fold-width);
+            text-align: right;
+            width: var(--gutter-width);
+        }
 
-        &:hover {
-            background: var(--active-line-background);
+        &-row {
+            @extend %background-state;
+            --background-hover: var(--active-line-background);
+            --background-pressed: var(--background-hover);
+            background: var(--background);
+            cursor: pointer;
+            display: flex;
+            height: var(--line-height);
         }
-    }
 
-    &-sticky-text {
-        flex: 1;
-        min-width: 0;
-        overflow: hidden;
+        &-text {
+            flex: 1;
+            min-width: 0;
+            overflow: hidden;
+        }
     }
 
     // Drawn in the gap before the literal, so the text keeps its place.