@esportsplus/ui 0.57.0 → 0.58.0

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

@@ -1,5 +1,8 @@
-@use '/shared';
 @use '/tokens';
+@use 'css-utilities/background';
+@use 'css-utilities/reset';
+@use 'css-utilities/surface';
+@use 'css-utilities/text';
 
 // Language services. The completion list and hover card are popovers in the top layer, clear of the editor's
 // clipping, placed against anchors that scroll with the text; squiggles are marks on the rendered rows.
@@ -11,7 +14,10 @@
     }
 
     &-completion {
+        @extend %background-state;
+        --background-active: var(--selection-background);
         align-items: center;
+        background: var(--background);
         cursor: pointer;
         display: flex;
         gap: var(--completion-gap);
@@ -19,29 +25,25 @@
         padding: 0 var(--completion-padding);
         white-space: nowrap;
 
-        @include tokens.state(active) {
-            background: var(--selection-background);
-        }
-
         @media (forced-colors: active) {
             @include tokens.state(active) {
                 background: Highlight;
                 color: HighlightText;
             }
         }
-    }
 
-    &-completion-detail {
-        @extend %text-truncate;
-        color: var(--completion-detail-color);
-        margin-left: auto;
-        min-width: 0;
-    }
+        &-detail {
+            @extend %text-truncate;
+            color: var(--completion-detail-color);
+            margin-left: auto;
+            min-width: 0;
+        }
 
-    &-completion-label {
-        @extend %text-truncate;
-        flex: none;
-        max-width: 100%;
+        &-label {
+            @extend %text-truncate;
+            flex: none;
+            max-width: 100%;
+        }
     }
 
     &-completions {
@@ -56,11 +58,11 @@
 
     &-completions,
     &-hover {
-        @extend %reset-popover;
-        background: var(--background);
+        @extend %reset-popover, %surface-raised-level;
+        background: var(--surface-background-default);
         border: var(--border-width) solid var(--border-color);
         border-radius: var(--popup-border-radius);
-        box-shadow: var(--popup-shadow);
+        box-shadow: var(--surface-shadow-default);
         box-sizing: border-box;
         color: var(--color);
         font-family: var(--font-family);
@@ -103,8 +105,11 @@
     }
 
     &-problem {
+        @extend %background-state;
+        --background-hover: var(--active-line-background);
+        --background-pressed: var(--background-hover);
         appearance: none;
-        background: transparent;
+        background: var(--background);
         border: 0;
         border-left: var(--caret-width) solid var(--diagnostic-error-color);
         color: inherit;
@@ -129,14 +134,11 @@
         &:focus-visible {
             outline: var(--focus-width) solid var(--focus-color);
         }
-
-        &:hover {
-            background: var(--active-line-background);
-        }
     }
 
     &-problems {
-        background: var(--bar-background);
+        @extend %surface-sunken-level;
+        background: var(--surface-background-default);
         border-top: var(--border-width) solid var(--border-color);
         display: none;
         flex: none;

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

@@ -1,4 +1,3 @@
-@use '/shared';
 @use '/tokens';
 @use 'variables';
 @use 'editor';

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

@@ -1,16 +1,20 @@
 @use '/tokens';
+@use 'css-utilities/background';
+@use 'css-utilities/border';
+@use 'css-utilities/font/geist';
+@use 'css-utilities/surface';
 
 .code-editor {
-    --active-line-background: oklch(from var(--color-text-500) l c h / 0.04);
-    --background: var(--color-white-300);
-    --bar-background: var(--color-white-400);
+    @extend %background-state, %border-state, %font-geist-mono, %surface-raised-level;
+    --active-line-background: var(--surface-background-hover);
+    --background-default: var(--surface-background-default);
     --bar-control-height: var(--size-700);
     --bar-font-size: var(--font-size-200);
     --bar-gap: var(--size-100);
     --bar-icon-size: var(--size-300);
     --bar-input-width: 160px;
     --bar-padding: var(--size-100);
-    --border-color: var(--color-border-300);
+    --border-color-default: var(--surface-border-default);
     --border-radius: var(--border-radius-300);
     --border-width: var(--border-width-400);
     --bracket-background: oklch(from var(--color-yellow-400) l c h / 0.45);
@@ -27,27 +31,26 @@
     --completion-padding: var(--size-200);
     --completion-rows: 8;
     --completion-width: 240px;
-    --conflict-base-background: oklch(from var(--color-text-300) l c h / 0.12);
+    --conflict-base-background: oklch(from var(--color-primary-300) l c h / 0.12);
     --conflict-current-background: oklch(from var(--color-green-400) l c h / 0.16);
-    --conflict-divider-background: oklch(from var(--color-text-300) l c h / 0.2);
+    --conflict-divider-background: oklch(from var(--color-primary-300) l c h / 0.2);
     --conflict-incoming-background: oklch(from var(--color-blue-400) l c h / 0.16);
     --diagnostic-error-color: var(--invalid-color);
     --diagnostic-hint-color: var(--muted-color);
     --diagnostic-info-color: var(--focus-color);
-    --diagnostic-offset: 2px;
+    --diagnostic-offset: calc(var(--size-100) / 4);
     --diagnostic-warning-color: var(--color-yellow-500);
     --disabled-opacity: 0.5;
     --drop-width: var(--border-width-500);
     --focus-color: var(--color-blue-400);
     --focus-offset: var(--border-width-400);
     --focus-width: var(--border-width-500);
-    --fold-duration: 0.15s;
+    --fold-duration: var(--duration-fast);
     --fold-icon-size: var(--size-100);
     --fold-rotate: 0deg;
     --fold-width: var(--size-400);
-    --font-family: var(--font-family-mono);
     --font-size: var(--font-size-300);
-    --function-color: var(--color-purple-300);
+    --function-color: light-dark(var(--color-purple-300), oklch(from var(--color-purple-300) 0.8 0.13 h));
     --gutter-active-color: var(--color);
     --gutter-added-color: var(--color-green-400);
     --gutter-color: var(--color-text-300);
@@ -61,13 +64,15 @@
     --input-color: transparent;
     --input-cursor: text;
     --invalid-color: var(--color-red-400);
-    --keyword-color: var(--color-purple-400);
+    --keyword-color: light-dark(var(--color-purple-400), oklch(from var(--color-purple-400) 0.75 0.15 h));
     --lens-color: var(--muted-color);
+    // Resolved here, since a lens action's color state redefines --color on it.
+    --lens-color-hover: var(--color);
     --lens-font-size: 0.85em;
     --lens-gap: var(--size-300);
     --line-height: var(--size-600);
     --line-width: max-content;
-    --link-color: var(--color-blue-400);
+    --link-color: light-dark(var(--color-blue-400), oklch(from var(--color-blue-400) 0.74 0.14 h));
     // CSS color literals.
     --literal-color: var(--number-color);
     --match-active-background: oklch(from var(--color-yellow-500) l c h / 0.6);
@@ -76,10 +81,10 @@
     --minimap-display: none;
     --minimap-offset: 0px;
     --minimap-opacity: 0.7;
-    --minimap-slider-background: oklch(from var(--color-text-500) l c h / 0.1);
+    --minimap-slider-background: oklch(from var(--color-primary-500) l c h / 0.1);
     --minimap-width: 80px;
     --muted-color: var(--color-text-300);
-    --number-color: var(--color-blue-400);
+    --number-color: light-dark(var(--color-blue-400), oklch(from var(--color-blue-400) 0.78 0.12 h));
     --number-display: block;
     --number-padding: var(--size-100);
     --number-width: calc(var(--digits) * 1ch + var(--number-padding));
@@ -91,28 +96,27 @@
     --peek-border-color: var(--gutter-modified-color);
     --peek-lines-background: oklch(from var(--color-red-400) l c h / 0.08);
     --peek-max-height: 160px;
-    --placeholder-background: oklch(from var(--color-text-300) l c h / 0.15);
+    --placeholder-background: oklch(from var(--color-primary-300) l c h / 0.15);
     --placeholder-color: var(--color-text-300);
     --popup-border-radius: var(--border-radius-300);
-    --popup-shadow: var(--box-shadow-400);
-    --problems-max-height: 120px;
-    --property-color: var(--color-blue-500);
-    --regexp-color: var(--color-red-500);
-    --ruler-color: var(--color-border-300);
+    --problems-max-height: var(--spacer-400);
+    --property-color: light-dark(var(--color-blue-500), oklch(from var(--color-blue-500) 0.8 0.1 h));
+    --regexp-color: light-dark(var(--color-red-500), oklch(from var(--color-red-500) 0.75 0.14 h));
+    --ruler-color: var(--surface-border-default);
     --ruler-width: var(--border-width-400);
     --selection-background: oklch(from var(--color-blue-400) l c h / 0.22);
-    --selector-color: var(--color-purple-500);
-    --sticky-shadow: 0 2px 4px -2px oklch(from var(--color-text-500) l c h / 0.25);
-    --string-color: oklch(from var(--color-green-500) 45% c h);
+    --selector-color: light-dark(var(--color-purple-500), oklch(from var(--color-purple-500) 0.78 0.13 h));
+    --sticky-shadow: 0 2px 4px -2px oklch(from var(--surface-shadow-color) l c h / calc(alpha * 2.8));
+    --string-color: light-dark(oklch(from var(--color-green-500) 45% c h), oklch(from var(--color-green-500) 0.8 0.15 h));
     --swatch-gap: 1px;
     --swatch-size: 0.75em;
-    --tag-color: var(--color-red-400);
-    --type-color: var(--color-blue-300);
+    --tag-color: light-dark(var(--color-red-400), oklch(from var(--color-red-400) 0.72 0.16 h));
+    --type-color: light-dark(var(--color-blue-300), oklch(from var(--color-blue-300) 0.76 0.13 h));
     --unicode-color: var(--color-yellow-500);
     --unicode-style: solid;
     --variable-color: var(--color);
     --white-space: pre;
-    --whitespace-color: oklch(from var(--color-text-300) l c h / 0.6);
+    --whitespace-color: oklch(from var(--color-primary-300) l c h / 0.6);
 
     &--composing {
         --input-color: var(--color);

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

@@ -1,5 +1,6 @@
 import { flush, reactive } from '@esportsplus/reactivity';
 import { html, type Attributes } from '@esportsplus/template';
+import scrollbar from '~/modifiers/scrollbar';
 import { clamp } from '~/shared/clamp';
 import { mac } from '~/shared/platform';
 import { observeSize } from '~/shared/resize';
@@ -51,7 +52,11 @@ type Callbacks = {
 type CodeController = Omit<Controller, 'state'> & {
     // A reactive snapshot for toolbars and status bars; read-only.
     readonly state: State;
+    // Set once the editor connects; the 'controller' callback runs after that.
+    readonly textarea: HTMLTextAreaElement;
     conflicts(): Conflict[];
+    // The lines the folded blocks start on, as 'fold' takes them.
+    folds(): number[];
     // Each moves the caret to the next or previous one, wrapping around; false when there are none.
     nextChange(): boolean;
     nextConflict(): boolean;
@@ -69,14 +74,12 @@ type CodeController = Omit<Controller, 'state'> & {
 // The controller both editors share; the code editor's is 'CodeController'.
 type Controller = {
     readonly document: EditorDocument;
-    // The editor's root element; set once the editor connects, like 'scroller' and 'textarea'.
+    // The editor's root element; set once the editor connects, like 'scroller'.
     readonly host: HTMLElement;
     // The element that scrolls the text.
     readonly scroller: HTMLElement;
     // A reactive snapshot for toolbars and status bars; read-only.
     readonly state: Snapshot;
-    // Set once the editor connects; the 'controller' callback runs after that.
-    readonly textarea: HTMLTextAreaElement;
     addNextOccurrence(all?: boolean): boolean;
     closeFind(): void;
     dispose(): void;
@@ -157,6 +160,8 @@ type Options = {
     lineNumbers?: boolean;
     // URLs open on Mod+click, in a new tab or through the handler, which also gets file URLs and relative paths.
     links?: boolean | ((url: string) => void);
+    // A CSS length, or pixels; left out, the '--min-height' variable applies.
+    minHeight?: number | string;
     minimap?: boolean;
     name?: string;
     // Ctrl/Cmd+Space requests completion; text changes stay observable through onChange.
@@ -285,6 +290,7 @@ const view = (model: EditorDocument, callbacks: Callbacks, receive?: (controller
             highlight: true,
             label: 'Code editor',
             lineNumbers: true,
+            minHeight: '',
             minimap: false,
             name: '',
             placeholder: '',
@@ -1452,6 +1458,7 @@ const view = (model: EditorDocument, callbacks: Callbacks, receive?: (controller
             model.select({ start: 0 });
             rebuild();
         },
+        folds: () => folded.map((fold) => fold.line),
         goToLine: (line, column = 1) => {
             if (disposed || ime.busy()) {
                 return;
@@ -1630,6 +1637,7 @@ const view = (model: EditorDocument, callbacks: Callbacks, receive?: (controller
             ui.highlight = options.highlight !== false;
             ui.label = options.label ?? 'Code editor';
             ui.lineNumbers = options.lineNumbers !== false;
+            ui.minHeight = typeof options.minHeight === 'number' ? `${options.minHeight}px` : options.minHeight ?? '';
             ui.minimap = !!options.minimap;
             ui.name = options.name ?? '';
             ui.placeholder = options.placeholder ?? '';
@@ -2050,7 +2058,7 @@ const view = (model: EditorDocument, callbacks: Callbacks, receive?: (controller
                     receive?.(controller);
                 },
                 ondisconnect: () => controller.dispose(),
-                style: () => `--content-width: ${ui.width}px; --digits: ${ui.digits}; --tab-size: ${ui.tabSize}; --track-height: ${ui.trackHeight}px; --track-width: ${ui.trackWidth}px;`
+                style: () => `--content-width: ${ui.width}px; --digits: ${ui.digits}; --tab-size: ${ui.tabSize}; --track-height: ${ui.trackHeight}px; --track-width: ${ui.trackWidth}px;${ui.minHeight && ` --min-height: ${ui.minHeight};`}`
             }}
         >
             ${search.template()}
@@ -2105,9 +2113,10 @@ const view = (model: EditorDocument, callbacks: Callbacks, receive?: (controller
                     autocapitalize='off'
                     autocomplete='off'
                     autocorrect='off'
-                    class='code-editor-input --scrollbar'
+                    class='code-editor-input'
                     dir='ltr'
                     spellcheck='false'
+                    ${scrollbar()}
                     ${field}
                     ${lsp.aria}
                     ${{

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

@@ -1,6 +1,5 @@
 import merge from './merge';
 import view from './view';
-import '~/css-utilities/scrollbar/scss/index.scss';
 import './scss/index.scss';
 
 

package/src/components/editor/diffs/merge.ts

@@ -1,6 +1,7 @@
 import { reactive, untrack } from '@esportsplus/reactivity';
 import { component, html, type Attributes } from '@esportsplus/template';
 import icon from '~/components/icon';
+import scrollbar from '~/modifiers/scrollbar';
 import codeEditor, { type Controller } from '../code';
 import { EditorDocument } from '../code/document';
 import { languageFor, type Language } from '../code/syntax';
@@ -262,7 +263,7 @@ export default component(
             return html`
                 <div class='diffs-merge-pane diffs-merge-pane--${side}'>
                     <div class='diffs-merge-title'>${side === 'current' ? 'Current' : 'Incoming'}</div>
-                    <div class='diffs-merge-scroller --scrollbar' tabindex='0'>
+                    <div class='diffs-merge-scroller' tabindex='0' ${scrollbar()}>
                         ${panes[side].slot.fragment}
                     </div>
                 </div>

package/src/components/editor/diffs/scss/_diffs.scss

@@ -1,4 +1,8 @@
-@use '/tokens';
+@use 'css-utilities/background';
+@use 'css-utilities/box-shadow';
+@use 'css-utilities/color';
+@use 'css-utilities/surface';
+
 
 .diffs {
     background: var(--background);
@@ -15,7 +19,11 @@
 
 
     &-action {
-        background: var(--action-background);
+        @extend %background-state;
+        --background-default: var(--action-background);
+        --background-hover: var(--action-hover-background);
+        --background-pressed: var(--background-hover);
+        background: var(--background);
         border: var(--border-width) solid var(--border-color);
         border-radius: var(--border-radius);
         color: var(--color);
@@ -28,10 +36,6 @@
         &:focus-visible {
             outline: var(--focus-width) solid var(--focus-color);
         }
-
-        &:hover {
-            background: var(--action-hover-background);
-        }
     }
 
     // Shown for the change under the pointer or holding focus, so a long diff isn't covered in buttons.
@@ -46,11 +50,19 @@
     }
 
     &-button {
+        @extend %background-state, %color-state;
+        --background-active: var(--hover-background);
+        --background-hover: var(--hover-background);
+        --background-pressed: var(--hover-background);
+        --color-active: var(--hover-color);
+        --color-default: var(--muted-color);
+        --color-hover: var(--hover-color);
+        --color-pressed: var(--hover-color);
         align-items: center;
-        background: transparent;
+        background: var(--background);
         border: 0;
         border-radius: var(--border-radius);
-        color: var(--muted-color);
+        color: var(--color);
         cursor: pointer;
         display: inline-flex;
         flex: none;
@@ -62,15 +74,31 @@
         padding: 0;
 
         &--primary {
-            background: var(--accent);
-            color: var(--accent-color);
+            --background-default: var(--accent);
+            --background-hover: var(--accent);
+            --background-pressed: var(--accent);
+            --color-default: var(--accent-color);
+            --color-hover: var(--accent-color);
+            --color-pressed: var(--accent-color);
+        }
+
+        &--primary:not(:disabled):hover {
+            filter: brightness(1.1);
         }
 
         &--text {
             padding: 0 var(--size-200);
         }
 
+        &-icon.icon {
+            --size: var(--button-icon-size);
+        }
+
         &:disabled {
+            --background-hover: var(--background-default);
+            --background-pressed: var(--background-default);
+            --color-hover: var(--color-default);
+            --color-pressed: var(--color-default);
             cursor: default;
             opacity: var(--disabled-opacity);
         }
@@ -79,26 +107,6 @@
             outline: var(--focus-width) solid var(--focus-color);
             outline-offset: calc(var(--focus-width) * -1);
         }
-
-        &:not(:disabled):hover {
-            background: var(--hover-background);
-            color: var(--color);
-        }
-
-        @include tokens.state(active) {
-            background: var(--hover-background);
-            color: var(--color);
-        }
-    }
-
-    &-button--primary:not(:disabled):hover {
-        background: var(--accent);
-        color: var(--accent-color);
-        filter: brightness(1.1);
-    }
-
-    &-button-icon.icon {
-        --size: var(--button-icon-size);
     }
 
     &-cell {
@@ -140,7 +148,7 @@
     }
 
     &-filename {
-        font-weight: 600;
+        font-weight: var(--font-weight-600);
         min-width: 0;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -148,10 +156,17 @@
     }
 
     &-gap {
+        @extend %background-state, %color-state;
+        --background-default: var(--gap-background);
+        --background-hover: var(--gap-hover-background);
+        --background-pressed: var(--background-hover);
+        --color-default: var(--gap-color);
+        --color-hover: var(--hover-color);
+        --color-pressed: var(--color-hover);
         align-items: center;
-        background: var(--gap-background);
+        background: var(--background);
         border: 0;
-        color: var(--gap-color);
+        color: var(--color);
         cursor: pointer;
         display: flex;
         font: inherit;
@@ -161,24 +176,20 @@
         padding: 0 var(--code-padding);
         width: 100%;
 
+        &-icon.icon {
+            --size: var(--button-icon-size);
+        }
+
         &:focus-visible {
             outline: var(--focus-width) solid var(--focus-color);
             outline-offset: calc(var(--focus-width) * -1);
         }
-
-        &:hover {
-            background: var(--gap-hover-background);
-            color: var(--color);
-        }
-    }
-
-    &-gap-icon.icon {
-        --size: var(--button-icon-size);
     }
 
     &-header {
+        @extend %surface-sunken-level;
         align-items: center;
-        background: var(--bar-background);
+        background: var(--surface-background-default);
         border-bottom: var(--border-width) solid var(--border-color);
         display: flex;
         flex: none;
@@ -189,7 +200,7 @@
 
     &-modes {
         display: flex;
-        gap: 2px;
+        gap: calc(var(--size-100) / 4);
     }
 
     &-number {
@@ -206,6 +217,9 @@
     }
 
     &-row {
+        @extend %box-shadow-state;
+        --box-shadow-active: inset 2px 0 0 var(--active-outline);
+        box-shadow: var(--box-shadow);
         line-height: var(--line-height);
         min-height: var(--line-height);
         position: relative;
@@ -214,10 +228,18 @@
             background: var(--delete-background);
         }
 
+        &--delete .diffs-sign {
+            color: var(--delete-color);
+        }
+
         &--insert {
             background: var(--insert-background);
         }
 
+        &--insert .diffs-sign {
+            color: var(--insert-color);
+        }
+
         &--split {
             display: grid;
             grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
@@ -234,18 +256,6 @@
                 opacity: 1;
             }
         }
-
-        @include tokens.state(active) {
-            box-shadow: inset 2px 0 0 var(--active-outline);
-        }
-    }
-
-    &-row--delete &-sign {
-        color: var(--delete-color);
-    }
-
-    &-row--insert &-sign {
-        color: var(--insert-color);
     }
 
     &-scroller {
@@ -339,7 +349,7 @@
     }
 
     &-word {
-        border-radius: 2px;
+        border-radius: var(--border-radius-100);
 
         &--delete {
             background: var(--delete-word-background);

package/src/components/editor/diffs/scss/_merge.scss

@@ -1,4 +1,6 @@
-@use '/tokens';
+@use 'css-utilities/box-shadow';
+@use 'css-utilities/surface';
+
 
 .diffs-merge {
     background: var(--background);
@@ -24,8 +26,9 @@
     }
 
     &-header {
+        @extend %surface-sunken-level;
         align-items: center;
-        background: var(--bar-background);
+        background: var(--surface-background-default);
         border-bottom: var(--border-width) solid var(--border-color);
         display: flex;
         flex-wrap: wrap;
@@ -40,21 +43,24 @@
         display: flex;
         gap: var(--size-100);
         min-height: var(--line-height);
-        padding: 2px var(--code-padding);
+        padding: calc(var(--size-100) / 4) var(--code-padding);
 
         &--resolved {
             background: transparent;
             border-top-color: var(--border-color);
         }
-    }
 
-    &-lens-note {
-        color: var(--muted-color);
-        font-family: var(--font-family);
-        font-size: var(--label-font-size);
+        &-note {
+            color: var(--muted-color);
+            font-family: var(--font-family);
+            font-size: var(--label-font-size);
+        }
     }
 
     &-line {
+        @extend %box-shadow-state;
+        --box-shadow-active: inset 2px 0 0 var(--active-outline);
+        box-shadow: var(--box-shadow);
         display: grid;
         grid-template-columns: var(--number-width) minmax(0, 1fr);
         line-height: var(--line-height);
@@ -67,10 +73,6 @@
         &--conflict {
             background: var(--conflict-background);
         }
-
-        @include tokens.state(active) {
-            box-shadow: inset 2px 0 0 var(--active-outline);
-        }
     }
 
     &-pane {
@@ -111,11 +113,12 @@
     }
 
     &-title {
-        background: var(--bar-background);
+        @extend %surface-sunken-level;
+        background: var(--surface-background-default);
         border-bottom: var(--border-width) solid var(--border-color);
         color: var(--muted-color);
         flex: none;
-        font-weight: 600;
+        font-weight: var(--font-weight-600);
         padding: var(--bar-padding);
     }
 }

package/src/components/editor/diffs/scss/index.scss

@@ -1,4 +1,3 @@
-@use '/shared';
 @use '/tokens';
 @use 'variables';
 @use 'diffs';