@esportsplus/ui 0.57.0 → 0.58.0

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

@@ -1,21 +1,28 @@
+@use 'css-utilities/background';
+@use 'css-utilities/border';
+@use 'css-utilities/reset';
+@use 'css-utilities/surface';
+
+
 // Modifiers only set variables; the layout reads them, so combined states never need combined selectors.
 .code-workspace {
-    --accent: var(--color-primary-400);
+    @extend %background-state, %border-state, %surface-raised-level;
+    --accent: var(--color-accent-400);
     --accent-color: var(--color-white-300);
     --aside-track: minmax(0, 1fr);
-    --background: var(--color-white-300);
+    --background-default: var(--surface-background-default);
     --bar-height: var(--size-800);
-    --border-color: var(--color-border-300);
+    --border-color-default: var(--surface-border-default);
     --close-icon-size: var(--size-200);
     --close-size: var(--size-400);
     --color: var(--color-text-500);
     --columns: var(--main-track) var(--aside-track);
-    --confirm-background: var(--surface);
+    --confirm-background: var(--surface-background-default);
     --confirm-color: var(--color);
     --confirm-hover: var(--control-active-background);
     --content-delay: 0s;
     --content-visibility: visible;
-    --control-active-background: oklch(from var(--color-text-500) l c h / 0.08);
+    --control-active-background: var(--surface-background-active);
     --control-icon-size: var(--size-300);
     --control-size: var(--size-600);
     --dirty-size: calc(var(--size-100) * 0.75);
@@ -26,7 +33,7 @@
     --drawer-hidden: calc(100% - var(--peek-width));
     --drawer-inset: auto 0;
     --drawer-offset: var(--drawer-hidden);
-    --drawer-shadow: var(--box-shadow-500);
+    --drawer-shadow: #{surface.shadow(5)};
     --drawer-timing-function: var(--transition-timing-function);
     // At least a usable explorer, even when the workspace itself is narrow.
     --drawer-width: min(100%, max(16rem, 46%));
@@ -57,15 +64,14 @@
     --muted-color: var(--color-text-300);
     --peek-width: var(--size-400);
     --radius: var(--border-radius-300);
-    --raised: var(--color-white-400);
+    --raised: var(--surface-background-default);
     --rows: minmax(0, 1fr) auto;
     --spacing: var(--size-100);
     --spacing-tight: calc(var(--size-100) / 2);
     --status-font-size: var(--font-size-100);
     --status-row: 2;
-    --surface: var(--color-grey-300);
     --tab-height: var(--size-600);
-    --tab-hover-background: oklch(from var(--color-text-500) l c h / 0.06);
+    --tab-hover-background: var(--surface-background-hover);
     --tab-max-width: 160px;
     --tabs-height: var(--size-700);
     background: var(--background);
@@ -168,7 +174,7 @@
     &-confirm-button--primary {
         --confirm-background: var(--accent);
         --confirm-color: var(--accent-color);
-        --confirm-hover: var(--color-primary-300);
+        --confirm-hover: var(--color-accent-500);
     }
 
     &-confirm-button.button {
@@ -201,11 +207,10 @@
         margin: 0;
     }
 
+    // Background and shadow come from the card's surface.
     &-confirm.card {
-        --background-default: var(--raised);
         --border-radius: var(--border-radius-500);
         --border-width: 0px;
-        --box-shadow-default: var(--box-shadow-500);
         --max-width: 440px;
         --padding-horizontal: var(--size-500);
         --padding-vertical: var(--size-500);
@@ -285,8 +290,10 @@
         text-align: center;
     }
 
+    // A surface, lifted only while it floats as a drawer.
     &-explorer {
-        background: var(--surface);
+        @extend %surface-raised-level;
+        background: var(--surface-background-default);
         border-inline-end: var(--explorer-end);
         border-inline-start: var(--explorer-start);
         border-top: var(--explorer-top);
@@ -305,27 +312,27 @@
         user-select: none;
         width: var(--explorer-size);
         z-index: var(--explorer-layer);
-    }
 
-    &-explorer-content {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        min-height: 0;
-        min-width: 0;
-        transition: visibility 0s linear var(--content-delay);
-        visibility: var(--content-visibility);
-    }
+        &-content {
+            display: flex;
+            flex: 1;
+            flex-direction: column;
+            min-height: 0;
+            min-width: 0;
+            transition: visibility 0s linear var(--content-delay);
+            visibility: var(--content-visibility);
+        }
 
-    &-explorer-header {
-        align-items: center;
-        border-bottom: var(--divider);
-        display: flex;
-        flex: none;
-        gap: var(--spacing-tight);
-        height: var(--bar-height);
-        min-width: 0;
-        padding-inline: var(--spacing);
+        &-header {
+            align-items: center;
+            border-bottom: var(--divider);
+            display: flex;
+            flex: none;
+            gap: var(--spacing-tight);
+            height: var(--bar-height);
+            min-width: 0;
+            padding-inline: var(--spacing);
+        }
     }
 
     &-files.file-tree {
@@ -337,6 +344,12 @@
         gap: var(--spacing-tight);
     }
 
+    // Holds the menus in the top layer, so page content after the workspace never covers them; the workspace's own
+    // stacking context would otherwise cap their z-index.
+    &-layer {
+        @extend %reset-popover;
+    }
+
     &-main {
         display: flex;
         flex-direction: column;
@@ -375,7 +388,7 @@
         text-align: center;
 
         &--cover {
-            background: var(--surface);
+            background: var(--surface-background-default);
             inset: 0;
             position: absolute;
             z-index: 1;
@@ -411,7 +424,7 @@
 
     &-status {
         align-items: center;
-        background: var(--surface);
+        background: var(--surface-background-default);
         border-top: var(--divider);
         color: var(--muted-color);
         display: flex;
@@ -422,29 +435,29 @@
         justify-content: space-between;
         min-width: 0;
         padding: var(--spacing-tight) var(--size-300);
-    }
 
-    &-status-message {
-        min-width: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+        &-message {
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
 
-        &--error {
-            color: var(--error-color);
+            &--error {
+                color: var(--error-color);
+            }
         }
-    }
 
-    &-status-path {
-        flex: 1;
-        min-width: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
+        &-path {
+            flex: 1;
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
 
-    &-status-position {
-        white-space: nowrap;
+        &-position {
+            white-space: nowrap;
+        }
     }
 
     &-tab-close-icon.icon {
@@ -515,12 +528,12 @@
         overflow-y: hidden;
         padding-inline: var(--spacing);
         position: relative;
-    }
 
-    &-tabs-highlight.highlight {
-        --background-active: var(--control-active-background);
-        --background-default: var(--tab-hover-background);
-        --line-color: var(--accent);
+        &-highlight.highlight {
+            --background-active: var(--control-active-background);
+            --background-default: var(--tab-hover-background);
+            --line-color: var(--accent);
+        }
     }
 
     &-tree {
@@ -532,8 +545,8 @@
     @media (forced-colors: active) {
         --accent: Highlight;
         --accent-color: HighlightText;
-        --background: Canvas;
-        --border-color: CanvasText;
+        --background-default: Canvas;
+        --border-color-default: CanvasText;
         --color: CanvasText;
         --error-color: CanvasText;
         --muted-color: CanvasText;

package/src/components/editor/workspace/scss/keybindings.scss

@@ -0,0 +1,190 @@
+@use 'css-utilities/font/geist';
+
+
+.code-workspace-command-icon.icon {
+    --size: var(--control-icon-size);
+    flex: none;
+}
+
+// Inside the workspace, so its custom properties reach the dialog through the DOM even in the top layer.
+.code-workspace-keybindings {
+    --columns: minmax(0, 1fr) minmax(9rem, auto) 4.5rem 4.5rem;
+    --conflict-color: var(--color-red-400);
+    --row-height: var(--size-800);
+
+    &-actions {
+        display: flex;
+        justify-content: flex-end;
+    }
+
+    &-button--primary {
+        --confirm-background: var(--accent);
+        --confirm-color: var(--accent-color);
+        --confirm-hover: var(--color-accent-500);
+    }
+
+    &-button.button {
+        --background-default: var(--confirm-background, transparent);
+        --background-hover: var(--confirm-hover, var(--control-active-background));
+        --border-radius: var(--radius);
+        --color-default: var(--confirm-color, var(--color));
+        --padding-horizontal: var(--size-200);
+        --padding-vertical: var(--spacing-tight);
+        flex: none;
+
+        &:disabled {
+            cursor: default;
+            opacity: var(--disabled-opacity);
+        }
+
+        &:focus-visible {
+            outline: var(--focus-width) solid var(--focus-color);
+            outline-offset: var(--border-width-400);
+        }
+    }
+
+    &-command {
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+    }
+
+    &-conflict {
+        align-items: center;
+        color: var(--conflict-color);
+        display: flex;
+        flex-basis: 100%;
+        flex-wrap: wrap;
+        gap: var(--spacing);
+    }
+
+    &-empty {
+        color: var(--muted-color);
+        padding: var(--size-400);
+        text-align: center;
+    }
+
+    &-header {
+        align-items: center;
+        display: flex;
+        gap: var(--spacing);
+        justify-content: space-between;
+        margin-bottom: var(--size-300);
+    }
+
+    &-hidden {
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+
+    &-id {
+        @extend %font-geist-mono;
+        color: var(--muted-color);
+        font-family: var(--font-family);
+        font-size: var(--font-size-100);
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    &-key--builtin.button {
+        cursor: help;
+        opacity: 0.75;
+    }
+
+    &-key.button {
+        flex: none;
+    }
+
+    &-keys {
+        align-items: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--spacing);
+        min-width: 0;
+    }
+
+    &-label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    // Only '+' at rest, so the row's built-in keys aren't read as unbound.
+    &-recorder--add.shortcut-recorder {
+        --min-width: var(--size-600);
+
+        &:not(.--active) .shortcut-recorder-placeholder {
+            font-size: 0;
+
+            &::before {
+                content: '+';
+                font-size: var(--font-size);
+            }
+        }
+    }
+
+    &-recorder.shortcut-recorder {
+        --font-size: var(--font-size-200);
+        --height: var(--size-600);
+    }
+
+    &-row {
+        align-items: center;
+        border-bottom: var(--divider);
+        display: grid;
+        gap: var(--size-200);
+        grid-template-columns: var(--columns);
+        min-height: var(--row-height);
+        padding-block: var(--spacing-tight);
+
+        &--head {
+            background: var(--raised);
+            color: var(--muted-color);
+            font-size: var(--font-size-100);
+            font-weight: var(--font-weight-500);
+            inset-block-start: 0;
+            min-height: auto;
+            padding-block: var(--spacing);
+            position: sticky;
+            z-index: 1;
+        }
+
+        &[hidden] {
+            display: none;
+        }
+    }
+
+    &-search.input {
+        margin-bottom: var(--size-200);
+        width: 100%;
+    }
+
+    &-source {
+        color: var(--muted-color);
+    }
+
+    &-table {
+        max-height: min(60vh, 32rem);
+        overflow: auto;
+    }
+
+    &-title {
+        font-size: var(--font-size-400);
+        margin: 0;
+    }
+
+    // Background and shadow come from the card's surface.
+    &.card {
+        --border-radius: var(--border-radius-500);
+        --border-width: 0px;
+        --max-width: 760px;
+        --padding-horizontal: var(--size-500);
+        --padding-vertical: var(--size-500);
+        color: var(--color);
+        font-size: var(--font-size-300);
+    }
+}

package/src/components/editor/workspace/scss/status.scss

@@ -0,0 +1,122 @@
+.code-workspace {
+    --status-icon-size: var(--size-200);
+    --status-item-height: var(--size-500);
+    --status-item-hover: var(--control-active-background);
+
+    // Inline-edit lays its status out under the field; here it sits on the toolbar's line instead.
+    &-autosave .inline-edit-status {
+        --color: inherit;
+        --font-size: var(--status-font-size);
+        grid-area: auto;
+        margin-top: 0;
+        padding-inline-start: 0;
+    }
+
+    &-autosave.button {
+        --background-default: transparent;
+        --background-hover: var(--control-active-background);
+        --border-radius: var(--radius);
+        --color-default: var(--muted-color);
+        --color-hover: var(--color);
+        --padding-horizontal: var(--spacing);
+        --padding-vertical: 0px;
+        flex: none;
+        height: var(--control-size);
+
+        &:focus-visible {
+            outline: var(--focus-width) solid var(--focus-color);
+            outline-offset: calc(var(--focus-width) * -1);
+        }
+    }
+
+    &-choice-icon.icon {
+        --size: var(--control-icon-size);
+    }
+
+    // The menu's item styles outrank the 'hidden' attribute; each choice shows only its own entries.
+    &-choices .tooltip-menu-entry:has(> [hidden]) {
+        display: none;
+    }
+
+    &-status {
+        container: workspace-status / inline-size;
+
+        &-icon.icon {
+            --size: var(--status-icon-size);
+        }
+
+        &-item {
+            white-space: nowrap;
+
+            // Like VS Code's status bar, items drop out as the bar narrows instead of scrolling, least needed first:
+            // selections (shown only now and then, so it never counts on room the rest need), encoding, line ending,
+            // indentation, language, then problems. Line and column and auto save stay. Ems follow the bar's own font
+            // size.
+            &--encoding {
+                @container workspace-status (width < 52em) {
+                    display: none;
+                }
+            }
+
+            &--eol.button {
+                @container workspace-status (width < 48em) {
+                    display: none;
+                }
+            }
+
+            &--indent.button {
+                @container workspace-status (width < 45em) {
+                    display: none;
+                }
+            }
+
+            &--language.button {
+                @container workspace-status (width < 38em) {
+                    display: none;
+                }
+            }
+
+            &--problems.button {
+                @container workspace-status (width < 30em) {
+                    display: none;
+                }
+            }
+
+            &--selections {
+                @container workspace-status (width < 62em) {
+                    display: none;
+                }
+            }
+
+            &.button {
+                --background-default: transparent;
+                --background-hover: var(--status-item-hover);
+                --border-radius: var(--border-radius-100);
+                --color-default: inherit;
+                --color-hover: var(--color);
+                --gap-horizontal: var(--spacing-tight);
+                --padding-horizontal: var(--spacing-tight);
+                --padding-vertical: 0px;
+                flex: none;
+                font-size: inherit;
+                min-height: var(--status-item-height);
+
+                &:disabled {
+                    cursor: default;
+                }
+
+                &:focus-visible {
+                    outline: var(--focus-width) solid var(--focus-color);
+                    outline-offset: calc(var(--focus-width) * -1);
+                }
+            }
+        }
+
+        &-items {
+            align-items: center;
+            display: flex;
+            flex: none;
+            gap: var(--spacing);
+        }
+    }
+}

package/src/components/editor/workspace/scss/tabs.scss

@@ -0,0 +1,56 @@
+.code-workspace {
+    &-document.diffs,
+    &-merge-editor.diffs-merge {
+        --border-radius: 0px;
+        --border-width: 0px;
+        --height: 100%;
+        flex: 1;
+        min-height: 0;
+    }
+
+    &-merge {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        min-height: 0;
+        min-width: 0;
+
+        &-bar {
+            align-items: center;
+            border-bottom: var(--divider);
+            display: flex;
+            flex: none;
+            font-size: var(--font-size-200);
+            gap: var(--spacing);
+            justify-content: space-between;
+            padding: var(--spacing-tight) var(--size-300);
+        }
+
+        &-cancel.button {
+            --background-default: transparent;
+            --background-hover: var(--control-active-background);
+            --border-radius: var(--radius);
+            --color-default: var(--color);
+            --padding-horizontal: var(--size-200);
+            --padding-vertical: var(--spacing-tight);
+            flex: none;
+        }
+
+        &-title {
+            color: var(--muted-color);
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    &-tab--preview &-tab-name {
+        font-style: italic;
+    }
+
+    &-tab-pin.icon {
+        --size: var(--close-icon-size);
+        flex: none;
+    }
+}