@esportsplus/ui 0.57.0 → 0.58.0

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

@@ -1,5 +1,10 @@
-@use '/shared';
 @use '/tokens';
+@use 'css-utilities/absolute';
+@use 'css-utilities/background';
+@use 'css-utilities/drag';
+@use 'css-utilities/reset';
+@use 'css-utilities/surface';
+@use 'css-utilities/text';
 @use 'variables';
 
 // The folder's bottom edge mid-motion, 0 to --motion-rows rows down, read from the element's own progress.
@@ -76,7 +81,7 @@ $edge: calc(var(--file-tree-progress) * var(--motion-rows) * var(--row-height));
     }
 
     &-chevron {
-        transition: rotate var(--chevron-duration) ease-out;
+        transition: rotate var(--chevron-duration) var(--easing-spring);
 
         // Mirrored to point left, so opening turns it the other way to still point down.
         &:dir(rtl) {
@@ -94,10 +99,10 @@ $edge: calc(var(--file-tree-progress) * var(--motion-rows) * var(--row-height));
 
     // The drag moves it to the pointer by its 'translate'.
     &-drag {
-        @extend %reset-popover;
-        background: var(--drag-background);
+        @extend %reset-popover, %surface-raised-level;
+        background: var(--surface-background-default);
         border-radius: var(--drag-radius);
-        box-shadow: var(--drag-box-shadow);
+        box-shadow: 0 0 0 var(--border-width-400) var(--surface-border-default), var(--surface-shadow-default);
         color: var(--color);
         font-size: var(--font-size);
         gap: var(--item-gap);
@@ -107,11 +112,6 @@ $edge: calc(var(--file-tree-progress) * var(--motion-rows) * var(--row-height));
         top: 0;
         white-space: nowrap;
 
-        &:popover-open {
-            align-items: center;
-            display: flex;
-        }
-
         &--copy {
             --drag-copy-display: block;
         }
@@ -128,6 +128,24 @@ $edge: calc(var(--file-tree-progress) * var(--motion-rows) * var(--row-height));
             font-variant-numeric: tabular-nums;
             font-weight: var(--badge-font-weight);
         }
+
+        &:popover-open {
+            align-items: center;
+            display: flex;
+        }
+    }
+
+    // Laid over the viewport, which stays the tree's one tab stop.
+    &-empty {
+        @extend %absolute-full;
+        align-items: center;
+        color: var(--empty-color);
+        display: flex;
+        flex-direction: column;
+        gap: var(--size-200);
+        justify-content: center;
+        padding: var(--size-400);
+        text-align: center;
     }
 
     // Over the rows rather than above them, so the list and the sticky folders keep their places as it comes and goes.
@@ -141,19 +159,24 @@ $edge: calc(var(--file-tree-progress) * var(--motion-rows) * var(--row-height));
         z-index: 2;
 
         &-bar {
+            @extend %surface-raised-level;
             align-items: center;
-            background: var(--find-background);
+            background: var(--surface-background-default);
             border: 1px solid var(--find-border-color);
             border-radius: var(--find-radius);
-            box-shadow: var(--find-shadow);
+            box-shadow: var(--surface-shadow-default);
             display: flex;
             gap: var(--find-gap);
             padding: var(--find-padding);
         }
 
         &-button {
+            @extend %background-state;
+            --background-active: inherit;
+            --background-hover: inherit;
+            --background-pressed: var(--background-hover);
             align-items: center;
-            background: none;
+            background: var(--background);
             border: 0;
             border-radius: var(--input-radius);
             color: inherit;
@@ -167,20 +190,18 @@ $edge: calc(var(--file-tree-progress) * var(--motion-rows) * var(--row-height));
             width: var(--find-button-size);
 
             &:disabled {
+                --background-hover: var(--background-default);
                 cursor: default;
                 opacity: 0.4;
             }
 
             &:focus-visible {
-                outline-width: 1px;
-            }
-
-            &:not(:disabled):hover {
-                background: var(--background-hover);
+                outline-width: var(--border-width-400);
             }
 
             &[aria-pressed='true'] {
-                background: var(--background-active);
+                --background-default: var(--background-active);
+                --background-hover: var(--background-active);
                 box-shadow: inset 0 0 0 1px var(--input-border-color);
             }
         }
@@ -199,7 +220,7 @@ $edge: calc(var(--file-tree-progress) * var(--motion-rows) * var(--row-height));
         }
 
         &-input {
-            background: var(--input-background);
+            background: var(--surface-background-default);
             border: 1px solid transparent;
             border-radius: var(--input-radius);
             color: inherit;
@@ -221,8 +242,9 @@ $edge: calc(var(--file-tree-progress) * var(--motion-rows) * var(--row-height));
         }
 
         &-note {
+            @extend %surface-raised-level;
             align-self: flex-end;
-            background: var(--find-background);
+            background: var(--surface-background-default);
             border: 1px solid var(--find-border-color);
             border-block-start: 0;
             border-end-end-radius: var(--find-radius);
@@ -235,7 +257,8 @@ $edge: calc(var(--file-tree-progress) * var(--motion-rows) * var(--row-height));
     }
 
     &-input {
-        background: var(--input-background);
+        @extend %surface-raised-level;
+        background: var(--surface-background-default);
         border: 1px solid var(--input-border-color);
         border-radius: var(--input-radius);
         color: inherit;
@@ -278,19 +301,6 @@ $edge: calc(var(--file-tree-progress) * var(--motion-rows) * var(--row-height));
         z-index: 1;
     }
 
-    // Laid over the viewport, which stays the tree's one tab stop.
-    &-empty {
-        @extend %absolute-full;
-        align-items: center;
-        color: var(--empty-color);
-        display: flex;
-        flex-direction: column;
-        gap: var(--size-200);
-        justify-content: center;
-        padding: var(--size-400);
-        text-align: center;
-    }
-
     // Laid over the viewport's visible box; the layer starts at the folder's bottom edge.
     &-motion {
         display: none;
@@ -338,40 +348,11 @@ $edge: calc(var(--file-tree-progress) * var(--motion-rows) * var(--row-height));
         position: relative;
         user-select: none;
 
-        &:dir(rtl) {
-            --guide-direction: -1;
-        }
-
-        // One guide per ancestor under each ancestor's chevron, outside the row's box so the highlight covers the row
-        // alone; rows carry no vertical margins, so each row's share joins into an unbroken line. The parent's guide
-        // is a 1px box and the others are its shadows ('--guides'), whole indents further out: boxes snap to whole
-        // pixels the same way on every row, where a gradient's line falls between pixels and each row rounds it its
-        // own way.
-        &::before {
-            background: currentColor;
-            box-shadow: var(--guides);
-            color: var(--indicator-color);
-            content: '';
-            display: var(--indicator-display, none);
-            inset-block: 0;
-            inset-inline-start: calc(var(--padding) + var(--twistie-size) / 2 - 0.5px - var(--indent));
-            opacity: var(--indicator-opacity, 1);
-            position: absolute;
-            transition: opacity var(--indicator-duration) ease-out;
-            // Top-level rows have no parent to draw.
-            width: calc(min(var(--depth), 1) * 1px);
-        }
-
         // The contents alone, so the guide and a selection behind the row keep their strength.
         &--cut > * {
             opacity: var(--cut-opacity);
         }
 
-        &.--disabled {
-            cursor: var(--drag-cursor, not-allowed);
-            opacity: 0.5;
-        }
-
         &--deleted {
             --name-decoration: line-through;
         }
@@ -381,25 +362,6 @@ $edge: calc(var(--file-tree-progress) * var(--motion-rows) * var(--row-height));
             opacity: var(--dragged-opacity);
         }
 
-        // A root's header, set apart from the folders under it as VS Code sets its workspace folders.
-        &--root {
-            font-size: var(--root-font-size);
-            font-weight: var(--root-font-weight);
-            text-transform: uppercase;
-        }
-
-        // The drop target and its open contents read as one box, from the folder's indent down to its last row.
-        &--drop::after {
-            background: var(--drop-background);
-            border: 0 solid var(--drop-border-color);
-            border-inline-width: var(--border-width-400);
-            content: '';
-            inset-block: 0;
-            inset-inline: calc((var(--drop-depth) - var(--depth)) * var(--indent)) 0;
-            pointer-events: none;
-            position: absolute;
-        }
-
         &--drop-end::after,
         &--drop-only::after {
             border-block-end-width: var(--border-width-400);
@@ -414,6 +376,18 @@ $edge: calc(var(--file-tree-progress) * var(--motion-rows) * var(--row-height));
             border-start-start-radius: var(--row-radius);
         }
 
+        // The drop target and its open contents read as one box, from the folder's indent down to its last row.
+        &--drop::after {
+            background: var(--drop-background);
+            border: 0 solid var(--drop-border-color);
+            border-inline-width: var(--border-width-400);
+            content: '';
+            inset-block: 0;
+            inset-inline: calc((var(--drop-depth) - var(--depth)) * var(--indent)) 0;
+            pointer-events: none;
+            position: absolute;
+        }
+
         // Every match tinted, the one the find bar is on outlined as well; a selected match shows its selection.
         &--match {
             background: var(--found-background);
@@ -423,14 +397,31 @@ $edge: calc(var(--file-tree-progress) * var(--motion-rows) * var(--row-height));
             box-shadow: inset 0 0 0 1px var(--found-border-color);
         }
 
-        // Selected rows besides the primary, which the highlight covers.
-        &--selected {
-            background: var(--background-selected);
+        // A copy in the sticky stack, which covers the highlight, so it shows its own hover and selection.
+        &--pinned {
+            --background-selected: var(--background-active);
+
+            // The deepest folder, pushed up by the rows after its own, slides under the one above it.
+            &:last-child {
+                clip-path: inset(var(--sticky-push, 0px) calc(var(--depth) * var(--indent) * -1) 0);
+                margin-block-start: calc(var(--sticky-push, 0px) * -1);
+            }
+
+            &:not(.--disabled, .file-tree-row--selected):hover {
+                background: var(--background-hover);
+            }
         }
 
         // A folder's rows fade in a beat behind the opening.
         &--reveal {
-            animation: file-tree-reveal var(--reveal-duration) ease-out var(--reveal-delay) backwards;
+            animation: file-tree-reveal var(--reveal-duration) var(--easing-spring) var(--reveal-delay) backwards;
+        }
+
+        // A root's header, set apart from the folders under it as VS Code sets its workspace folders.
+        &--root {
+            font-size: var(--root-font-size);
+            font-weight: var(--root-font-weight);
+            text-transform: uppercase;
         }
 
         // A square band across the tree's full width, back past the row's depth inset, so a scope's rows join into
@@ -449,23 +440,42 @@ $edge: calc(var(--file-tree-progress) * var(--motion-rows) * var(--row-height));
             }
         }
 
-        // A copy in the sticky stack, which covers the highlight, so it shows its own hover and selection.
-        &--pinned {
-            --background-selected: var(--background-active);
+        // Selected rows besides the primary, which the highlight covers.
+        &--selected {
+            background: var(--background-selected);
+        }
 
-            &:not(.--disabled, .file-tree-row--selected):hover {
-                background: var(--background-hover);
-            }
+        &.--disabled {
+            cursor: var(--drag-cursor, not-allowed);
+            opacity: 0.5;
+        }
 
-            // The deepest folder, pushed up by the rows after its own, slides under the one above it.
-            &:last-child {
-                clip-path: inset(var(--sticky-push, 0px) calc(var(--depth) * var(--indent) * -1) 0);
-                margin-block-start: calc(var(--sticky-push, 0px) * -1);
-            }
+        // One guide per ancestor under each ancestor's chevron, outside the row's box so the highlight covers the row
+        // alone; rows carry no vertical margins, so each row's share joins into an unbroken line. The parent's guide
+        // is a 1px box and the others are its shadows ('--guides'), whole indents further out: boxes snap to whole
+        // pixels the same way on every row, where a gradient's line falls between pixels and each row rounds it its
+        // own way.
+        &::before {
+            background: currentColor;
+            box-shadow: var(--guides);
+            color: var(--indicator-color);
+            content: '';
+            display: var(--indicator-display, none);
+            inset-block: 0;
+            inset-inline-start: calc(var(--padding) + var(--twistie-size) / 2 - 0.5px - var(--indent));
+            opacity: var(--indicator-opacity, 1);
+            position: absolute;
+            transition: opacity var(--indicator-duration) var(--easing-spring);
+            // Top-level rows have no parent to draw.
+            width: calc(min(var(--depth), 1) * 1px);
+        }
+
+        &:dir(rtl) {
+            --guide-direction: -1;
         }
 
         .file-tree-viewport:focus-visible &--focused {
-            outline-width: 1px;
+            outline-width: var(--border-width-400);
         }
     }
 
@@ -479,14 +489,14 @@ $edge: calc(var(--file-tree-progress) * var(--motion-rows) * var(--row-height));
             text-decoration: underline;
         }
 
-        &--match-current {
-            box-shadow: inset 0 0 0 1px var(--found-border-color);
-        }
-
         &--drop {
             background: var(--drop-background);
             box-shadow: inset 0 0 0 var(--border-width-400) var(--drop-border-color);
         }
+
+        &--match-current {
+            box-shadow: inset 0 0 0 1px var(--found-border-color);
+        }
     }
 
     &-separator {
@@ -506,7 +516,8 @@ $edge: calc(var(--file-tree-progress) * var(--motion-rows) * var(--row-height));
         z-index: 1;
 
         &-rows {
-            background: var(--sticky-background);
+            @extend %surface-raised-level;
+            background: var(--surface-background-default);
             box-shadow: var(--sticky-shadow);
 
             &:not(:has(> .file-tree-row)) {
@@ -520,11 +531,11 @@ $edge: calc(var(--file-tree-progress) * var(--motion-rows) * var(--row-height));
         height: 32px;
         inset-inline-end: var(--size-100);
         outline: 0 solid var(--focus-color);
-        outline-offset: 2px;
+        outline-offset: calc(var(--size-100) / 4);
         position: absolute;
 
         &:focus-visible {
-            outline-width: 2px;
+            outline-width: var(--border-width-500);
         }
     }
 
@@ -586,7 +597,7 @@ $edge: calc(var(--file-tree-progress) * var(--motion-rows) * var(--row-height));
             }
 
             &-layer--close {
-                animation: file-tree-collapse var(--collapse-duration) var(--motion-easing) forwards, file-tree-conceal var(--conceal-duration) ease-out forwards;
+                animation: file-tree-collapse var(--collapse-duration) var(--motion-easing) forwards, file-tree-conceal var(--conceal-duration) var(--easing-spring) forwards;
                 height: $edge;
                 overflow: hidden;
             }
@@ -606,7 +617,7 @@ $edge: calc(var(--file-tree-progress) * var(--motion-rows) * var(--row-height));
 
             // Marked only while opening.
             &--reveal {
-                animation: file-tree-expand var(--expand-duration) var(--motion-easing) forwards, file-tree-reveal var(--reveal-duration) ease-out var(--reveal-delay) backwards;
+                animation: file-tree-expand var(--expand-duration) var(--motion-easing) forwards, file-tree-reveal var(--reveal-duration) var(--easing-spring) var(--reveal-delay) backwards;
                 // Open at the sides, so the guides drawn outside the row still show.
                 clip-path: inset(
                     0
@@ -703,7 +714,7 @@ $edge: calc(var(--file-tree-progress) * var(--motion-rows) * var(--row-height));
 
 @keyframes file-tree-conceal {
     to {
-        filter: blur(2px);
+        filter: blur(var(--blur-300));
         opacity: 0;
     }
 }
@@ -726,7 +737,7 @@ $edge: calc(var(--file-tree-progress) * var(--motion-rows) * var(--row-height));
 
 @keyframes file-tree-reveal {
     from {
-        filter: blur(2px);
+        filter: blur(var(--blur-300));
         opacity: 0;
     }
 }

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

@@ -82,7 +82,7 @@ $icons: (
 .file-tree {
     // Git and problem colors, after VS Code's; the token scales are tuned for dark surfaces, so lightness is
     // pinned to stay legible on light ones.
-    --added-color: oklch(from var(--color-green-500) 0.58 c h);
+    --added-color: light-dark(oklch(from var(--color-green-500) 0.58 c h), oklch(from var(--color-green-500) 0.76 0.17 h));
     --additions-color: var(--added-color);
     // Read by the row highlight and the toggle button: the selected row takes the full tint, hover a dimmer one.
     --background-active: color-mix(in srgb, currentColor 10%, transparent);
@@ -91,43 +91,39 @@ $icons: (
     --background-selected: var(--background-active);
     --badge-font-size: var(--font-size-200);
     --badge-font-weight: var(--font-weight-500);
-    --badge-gap: 6px;
-    --chevron-duration: 150ms;
+    --badge-gap: calc(var(--size-300) / 2);
+    --chevron-duration: var(--duration-fast);
     // Open and close timings, after the tree view's.
-    --collapse-duration: 0.2s;
+    --collapse-duration: var(--duration-moderate-exit);
     --color: var(--color-text-500);
-    --conceal-duration: 0.12s;
-    --conflict-color: oklch(from var(--color-red-300) 0.6 c h);
+    --conceal-duration: var(--duration-fast-exit);
+    --conflict-color: light-dark(oklch(from var(--color-red-300) 0.6 c h), oklch(from var(--color-red-300) 0.72 0.16 h));
     --cut-opacity: 0.5;
-    --deleted-color: var(--color-red-500);
+    --deleted-color: light-dark(var(--color-red-500), oklch(from var(--color-red-500) 0.7 0.17 h));
     --deletions-color: var(--deleted-color);
     // The label that follows the pointer while dragging, offset so it never covers the row being aimed at.
-    --drag-background: var(--color-grey-400);
-    --drag-box-shadow: 0 0 0 var(--border-width-400) var(--color-border-300), var(--box-shadow-300);
     --drag-offset: var(--size-300);
-    --drag-padding: 2px var(--size-100);
+    --drag-padding: calc(var(--size-100) / 4) var(--size-100);
     --drag-radius: var(--border-radius-300);
     // Rows being moved, not copied, dim while they travel.
     --dragged-opacity: 0.5;
     --drop-background: color-mix(in srgb, var(--drop-color) 10%, transparent);
     --drop-border-color: color-mix(in srgb, var(--drop-color) 60%, transparent);
-    --drop-color: var(--color-primary-400);
+    --drop-color: var(--color-accent-400);
     --empty-color: var(--color-text-300);
-    --error-color: var(--color-red-400);
-    --expand-duration: 0.25s;
+    --error-color: light-dark(var(--color-red-400), oklch(from var(--color-red-400) 0.7 0.18 h));
+    --expand-duration: var(--duration-moderate);
     // The find bar over the tree's top corner; the offset keeps it clear of the scrollbar.
-    --find-background: var(--color-white-300);
-    --find-border-color: var(--color-border-300);
+    --find-border-color: var(--surface-border-default);
     --find-button-size: var(--size-500);
-    --find-gap: 2px;
+    --find-gap: calc(var(--size-100) / 4);
     --find-input-width: calc(var(--size-900) * 2);
     --find-note-color: var(--color-text-300);
     --find-note-font-size: var(--font-size-200);
     --find-offset: var(--size-300);
-    --find-padding: 3px;
+    --find-padding: calc(var(--size-300) / 4);
     --find-radius: var(--border-radius-300);
-    --find-shadow: var(--box-shadow-300);
-    --focus-color: oklch(from var(--color-text-500) l c h / 0.38);
+    --focus-color: var(--surface-border-pressed);
     --font-size: var(--font-size-300);
     // Rows the find bar matches; the current one is outlined.
     --found-background: color-mix(in srgb, var(--found-color) 14%, transparent);
@@ -142,33 +138,32 @@ $icons: (
     // Past '--padding' plus half '--twistie-size', so a nested row, and the highlight on it, starts clear of its
     // parent's guide.
     --indent: var(--size-500);
-    --indicator-color: var(--color-grey-500);
-    --indicator-duration: 0.15s;
-    --indicator-hover: var(--color-border-500);
-    --input-background: var(--color-white-300);
+    --indicator-color: var(--surface-border-default);
+    --indicator-duration: var(--duration-fast);
+    --indicator-hover: var(--surface-border-pressed);
     --input-border-color: var(--color-blue-400);
-    --input-padding: 3px;
+    --input-padding: calc(var(--size-300) / 4);
     --input-radius: var(--border-radius-200);
-    --item-gap: 4px;
+    --item-gap: calc(var(--size-100) / 2);
     // The symlink and read-only glyphs beside the name.
-    --marker-color: var(--color-text-300);
+    --marker-color: var(--color-primary-300);
     --marker-size: var(--size-300);
     // Characters a fuzzy query matched: heavier, on a faint wash, in whatever color the name's git tone gives it.
-    --match-background: color-mix(in srgb, var(--color-primary-400) 18%, transparent);
+    --match-background: color-mix(in srgb, var(--color-accent-400) 18%, transparent);
     --match-color: inherit;
     --match-font-weight: var(--font-weight-600);
     --match-radius: var(--border-radius-100);
     // Opaque, since it covers the rows below the input.
-    --message-background: color-mix(in srgb, var(--error-color) 10%, var(--input-background));
+    --message-background: color-mix(in srgb, var(--error-color) 10%, var(--surface-background-default));
     --message-font-size: var(--font-size-200);
-    --message-padding: 2px 6px;
-    --modified-color: oklch(from var(--color-yellow-500) 0.62 c h);
-    --motion-easing: cubic-bezier(0.23, 1, 0.32, 1);
+    --message-padding: calc(var(--size-100) / 4) calc(var(--size-300) / 2);
+    --modified-color: light-dark(oklch(from var(--color-yellow-500) 0.62 c h), oklch(from var(--color-yellow-500) 0.76 c h));
+    --motion-easing: var(--easing-spring);
     --notice-color: var(--color-text-300);
-    --open-color: var(--color-text-300);
+    --open-color: var(--color-primary-300);
     --padding: var(--size-100);
     --reveal-delay: 0.05s;
-    --reveal-duration: 0.2s;
+    --reveal-duration: var(--duration-fast);
     --root-font-size: var(--font-size-200);
     --root-font-weight: var(--font-weight-600);
     --row-height: 22px;
@@ -176,36 +171,40 @@ $icons: (
     // How much of a scope's color tints its rows; faint, so git colors and the highlight still read over it.
     --scope-tint: 12%;
     // The slash between a compact row's folders.
-    --separator-color: var(--color-text-300);
+    --separator-color: var(--color-primary-300);
     --separator-gap: 1px;
-    --staged-padding: 3px;
+    --staged-padding: calc(var(--size-300) / 4);
     --staged-radius: var(--border-radius-100);
     --staged-tint: 18%;
     // Rows scroll under the pinned folders, so these hide them with the surface the tree sits on.
-    --sticky-background: var(--color-white-300);
-    --sticky-shadow: 0 6px 16px -10px oklch(from var(--color-black-300) l c h / 0.4);
-    --submodule-color: oklch(from var(--color-blue-400) 0.6 c h);
+    --sticky-shadow: 0 6px 16px -10px oklch(from var(--surface-shadow-color) l c h / calc(alpha * 4.4));
+    --submodule-color: light-dark(oklch(from var(--color-blue-400) 0.6 c h), oklch(from var(--color-blue-400) 0.74 0.14 h));
     --toggle-color: var(--color);
     --twistie-size: var(--size-400);
     --unsaved-color: var(--color);
-    --warning-color: oklch(from var(--color-yellow-500) 0.62 c calc(h - 25));
+    --warning-color: light-dark(oklch(from var(--color-yellow-500) 0.62 c calc(h - 25)), oklch(from var(--color-yellow-500) 0.76 c calc(h - 25)));
+
+    // A tree's own icons take its '--icon-size', which may be set on the tree.
+    & &-icon.icon {
+        --icon-size: inherit;
+    }
 
     &-chevron.icon {
         --size: var(--twistie-size);
     }
 
+    &-find-icon.icon {
+        --size: var(--size-300);
+    }
+
     // The highlight declares its own defaults, so the tree's values are pulled through explicitly.
     &-highlight.highlight {
         --background-active: inherit;
         --background-hover: inherit;
-        --glide-duration: 0.3s;
+        --glide-duration: var(--duration-moderate);
         --glide-duration-active: 0s;
     }
 
-    &-find-icon.icon {
-        --size: var(--size-300);
-    }
-
     // Overridden per family, per icon by '--icon-color-<icon>', or all at once by '--icon-color'. Icons drawn outside a
     // tree, as in tabs or a palette's rows, fall back to the same families and size themselves rather than read some
     // other component's '--icon-size'.
@@ -223,21 +222,11 @@ $icons: (
         }
     }
 
-    // A tree's own icons take its '--icon-size', which may be set on the tree.
-    & &-icon.icon {
-        --icon-size: inherit;
-    }
-
     &-marker.icon {
         --color: var(--marker-color);
         --size: var(--marker-size);
     }
 
-    &-spinner.loading {
-        --color: currentColor;
-        --size: var(--icon-size);
-    }
-
     &-row {
         @each $tone in added, conflict, deleted, error, ignored, modified, warning {
             &--#{$tone} {
@@ -246,6 +235,11 @@ $icons: (
         }
     }
 
+    &-spinner.loading {
+        --color: currentColor;
+        --size: var(--icon-size);
+    }
+
     &-toggle.button {
         --background-hover: inherit;
         --color-default: var(--toggle-color);