@esportsplus/ui 0.57.0 → 0.58.0

package/src/components/chat-minimap/scss/variables.scss

@@ -1,30 +1,29 @@
 @use '/tokens';
 
 .chat-minimap {
-    --card-background: var(--color-white-300);
-    --card-border: var(--color-border-300);
+    --card-border: var(--surface-border-default);
     --card-description-color: var(--color-text-300);
     --card-title-color: var(--color-text-500);
     --card-width: 256px;
     --color-active: var(--color-text-500);
-    --color-far: color-mix(in oklab, var(--color-text-500) 55%, transparent);
-    --color-near: color-mix(in oklab, var(--color-text-500) 75%, transparent);
-    --color-rest: color-mix(in oklab, var(--color-text-300) 40%, transparent);
-    --focus-color: var(--color-text-500);
+    --color-far: color-mix(in oklab, var(--color-primary-500) 55%, transparent);
+    --color-near: color-mix(in oklab, var(--color-primary-500) 75%, transparent);
+    --color-rest: color-mix(in oklab, var(--color-primary-300) 40%, transparent);
+    --focus-color: var(--color-primary-500);
     // Lines sit this far in from the rail's leading edge, inside a hit area wider than the longest line.
-    --inset: 4px;
-    --item-height: 8px;
+    --inset: calc(var(--size-100) / 2);
+    --item-height: var(--size-100);
     --item-width: 32px;
     // At rest every line shares one length; the hovered one peaks and its two neighbours either side step back down.
-    --length-far: 16px;
-    --length-near: 20px;
+    --length-far: var(--size-400);
+    --length-near: var(--size-500);
     --length-peak: 24px;
     --length-rest: 12px;
-    --nav-duration: 0.15s;
-    --nav-height: 20px;
+    // Resolved here, since the nav's color state redefines --color-active on it.
+    --nav-color-hover: var(--color-active);
+    --nav-duration: var(--duration-fast);
+    --nav-height: var(--size-500);
     --stroke: 2px;
-    --transition-duration: 0.2s;
-    --transition-timing-function: ease-out;
 
 
     &-item {
@@ -37,8 +36,9 @@
 
         // Touch has no hover to follow, and reduced motion keeps the lengths still; keyboard focus swells too.
         @media (hover: hover) and (prefers-reduced-motion: no-preference) {
-            &:is(:hover, :focus-visible) {
-                --length: var(--length-peak);
+            &:has(+ .chat-minimap-item + .chat-minimap-item:is(:hover, :focus-visible)),
+            &:is(:hover, :focus-visible) + .chat-minimap-item + .chat-minimap-item {
+                --length: var(--length-far);
             }
 
             &:has(+ .chat-minimap-item:is(:hover, :focus-visible)),
@@ -46,52 +46,52 @@
                 --length: var(--length-near);
             }
 
-            &:has(+ .chat-minimap-item + .chat-minimap-item:is(:hover, :focus-visible)),
-            &:is(:hover, :focus-visible) + .chat-minimap-item + .chat-minimap-item {
-                --length: var(--length-far);
+            &:is(:hover, :focus-visible) {
+                --length: var(--length-peak);
             }
         }
 
+        &:is(:hover, :focus-visible) {
+            --line-color: var(--color-active);
+        }
+
         // Turns in view keep their full color while a neighbour is hovered, so the indicator never fades under the
         // pointer.
         &:not(.--active) {
-            &:has(+ .chat-minimap-item:is(:hover, :focus-visible)),
-            &:is(:hover, :focus-visible) + .chat-minimap-item {
-                --line-color: var(--color-near);
-            }
-
             &:has(+ .chat-minimap-item + .chat-minimap-item:is(:hover, :focus-visible)),
             &:is(:hover, :focus-visible) + .chat-minimap-item + .chat-minimap-item {
                 --line-color: var(--color-far);
             }
-        }
 
-        &:is(:hover, :focus-visible) {
-            --line-color: var(--color-active);
+            &:has(+ .chat-minimap-item:is(:hover, :focus-visible)),
+            &:is(:hover, :focus-visible) + .chat-minimap-item {
+                --line-color: var(--color-near);
+            }
         }
     }
 
+    &-label.tooltip-shared {
+        --padding: calc(var(--size-100) / 2) var(--size-200);
+        --radius: var(--border-radius-500);
+        --spacer: 4px;
+    }
+
     // A white card rather than the dark label bubble; '--padding' stays 0 so the card sets its own width.
+    // A surface through the shared tooltip, so its colors are read at its own level.
     &-preview.tooltip-shared {
-        --background: var(--card-background);
-        --box-shadow: 0 0 0 var(--border-width-400) var(--card-border), var(--box-shadow-500);
+        --background-default: var(--surface-background-default);
+        --box-shadow-default: 0 0 0 var(--border-width-400) var(--card-border), var(--surface-shadow-default);
         --color: var(--card-title-color);
         --font-size: var(--font-size-400);
         --padding: 0;
         --radius: var(--border-radius-600);
-        --spacer: 8px;
+        --spacer: var(--size-100);
         --white-space: normal;
     }
 
-    &-label.tooltip-shared {
-        --padding: 4px 10px;
-        --radius: var(--border-radius-500);
-        --spacer: 4px;
-    }
-
 
+    // The lines hold their length; the nav still fades.
     @media (prefers-reduced-motion: reduce) {
-        --nav-duration: 0s;
         --transition-duration: 0s;
     }
 }

package/src/components/checkbox/scss/index.scss

@@ -1,5 +1,6 @@
-@use '/shared';
 @use '/tokens';
+@use 'css-utilities/absolute';
+@use 'css-utilities/icon';
 @use 'variables';
 
 .checkbox {
@@ -22,6 +23,16 @@
     width: var(--width);
 
 
+    &--radio {
+        &::before {
+            @extend %absolute-full;
+            border-radius: calc(var(--border-radius) - (var(--height) / 2));
+            height: var(--height);
+            margin: auto;
+            scale: var(--scale);
+        }
+    }
+
     &--radio,
     &--switch {
         &::before {
@@ -37,65 +48,18 @@
         }
     }
 
-    &--radio {
-        &::before {
-            @extend %absolute-full;
-            border-radius: calc(var(--border-radius) - (var(--height) / 2));
-            height: var(--height);
-            margin: auto;
-            scale: var(--scale);
-        }
-    }
-
     &--switch {
         &::before {
-            @include shared.position(absolute, var(--padding-vertical) null null var(--padding-horizontal));
             border-radius: calc(var(--border-radius) - var(--padding-vertical) / 1.5);
             height: calc(var(--height) - (var(--border-width) * 2) - (var(--padding-vertical) * 2));
+            inset: var(--padding-vertical) auto auto var(--padding-horizontal);
+            position: absolute;
             scale: var(--scale);
             translate: var(--translateX);
         }
     }
 
 
-    &:has(> .checkbox-tag:focus-visible) {
-        outline: var(--focus-width) solid var(--focus-color);
-        outline-offset: var(--focus-offset);
-    }
-
-    // The group header's dash draws with the same variables and timing as the checkmark it replaces. Qualified by the
-    // root so both win over the reused icon styles regardless of stylesheet order.
-    .checkbox-check,
-    .checkbox-group-dash {
-        @extend %absolute-full;
-        height: var(--check-size);
-        margin: auto;
-        pointer-events: none;
-        width: var(--check-size);
-
-        svg {
-            @extend %icon-stroke-draw;
-            fill: none;
-            stroke: var(--indicator-color);
-            stroke-linecap: var(--check-linecap);
-            stroke-linejoin: var(--check-linejoin);
-            stroke-width: var(--check-stroke-width);
-            transition: stroke-dashoffset var(--transition-duration) var(--check-timing-function);
-        }
-    }
-
-    .checkbox-check {
-        left: 1px;
-
-        svg {
-            stroke-dashoffset: var(--check-offset);
-        }
-    }
-
-    .checkbox-group-dash svg {
-        stroke-dashoffset: var(--dash-offset);
-    }
-
     &-group {
         color: var(--color);
         display: flex;
@@ -125,10 +89,10 @@
 
             &-key {
                 border: 1px solid var(--border-color);
-                border-radius: 4px;
+                border-radius: var(--border-radius-200);
                 font-family: inherit;
                 font-size: inherit;
-                padding: 1px 4px;
+                padding: 1px calc(var(--size-100) / 2);
             }
         }
 
@@ -152,6 +116,44 @@
         z-index: 1;
     }
 
+    &:has(> .checkbox-tag:focus-visible) {
+        outline: var(--focus-width) solid var(--focus-color);
+        outline-offset: var(--focus-offset);
+    }
+
+    .checkbox-check {
+        left: 1px;
+
+        svg {
+            stroke-dashoffset: var(--check-offset);
+        }
+    }
+
+    // The group header's dash draws with the same variables and timing as the checkmark it replaces. Qualified by the
+    // root so both win over the reused icon styles regardless of stylesheet order.
+    .checkbox-check,
+    .checkbox-group-dash {
+        @extend %absolute-full;
+        height: var(--check-size);
+        margin: auto;
+        pointer-events: none;
+        width: var(--check-size);
+
+        svg {
+            @extend %icon-stroke-draw;
+            fill: none;
+            stroke: var(--indicator-color);
+            stroke-linecap: var(--check-linecap);
+            stroke-linejoin: var(--check-linejoin);
+            stroke-width: var(--check-stroke-width);
+            transition: stroke-dashoffset var(--transition-duration) var(--check-timing-function);
+        }
+    }
+
+    .checkbox-group-dash svg {
+        stroke-dashoffset: var(--dash-offset);
+    }
+
     @media (prefers-reduced-motion: reduce) {
         &,
         &::before,

package/src/components/checkbox/scss/variables.scss

@@ -15,9 +15,9 @@
     --border-style: solid;
     --border-width: 0px;
     --border-width-offset: 0px;
-    --border-width-offset-hover: 1px;
+    --border-width-offset-hover: var(--border-width-400);
     --box-shadow: var(--box-shadow-default);
-    --box-shadow-active: 0 3px 8px color-mix(in srgb, var(--background-active) 22%, transparent);
+    --box-shadow-active: 0 3px 8px oklch(from var(--surface-shadow-color) l c h / calc(alpha * 2));
     --box-shadow-default: none;
     --box-shadow-hover: var(--box-shadow-default);
     --box-shadow-pressed: var(--box-shadow-default);
@@ -29,8 +29,8 @@
     --check-timing-function: ease;
     --dash-offset: 1;
     --focus-color: var(--border-color-active);
-    --focus-offset: 2px;
-    --focus-width: 2px;
+    --focus-offset: calc(var(--size-100) / 4);
+    --focus-width: var(--border-width-500);
     --height: var(--size);
     --indicator-color: var(--indicator-color-default);
     --indicator-color-active: var(--indicator-color-default);
@@ -43,18 +43,9 @@
     --scale-hover: 0.96;
     --scale-pressed: var(--scale-default);
     --size: var(--size-500);
-    --transition-duration: 280ms;
-    --transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
     --width: var(--height);
 
 
-    &--radio,
-    &--switch {
-        &::before {
-            --box-shadow: 0 2px 4px #0003;
-        }
-    }
-
     &--radio {
         --border-radius: 100%;
         --scale-default: 0;
@@ -66,12 +57,19 @@
         }
     }
 
+    &--radio,
+    &--switch {
+        &::before {
+            --box-shadow: 0 2px 4px oklch(from var(--surface-shadow-color) l c h / calc(alpha * 2));
+        }
+    }
+
     &--switch {
         --border-width-offset-hover: 0px;
         --box-shadow-active: var(--box-shadow-default);
         --focus-color: var(--background-active);
-        --padding-horizontal: 2px;
-        --padding-vertical: 2px;
+        --padding-horizontal: calc(var(--size-100) / 4);
+        --padding-vertical: calc(var(--size-100) / 4);
         --progress: 0;
         --translateX-active: calc(var(--width-rail) - (var(--border-width) * 2) - var(--height) - (var(--padding-horizontal) * 2));
         --width: var(--width-rail);
@@ -88,7 +86,7 @@
     }
 
     &-group {
-        --border-color: var(--color-border-300);
+        --border-color: var(--surface-border-default);
         --color: var(--color-text-500);
         --color-muted: var(--color-text-300);
         --gap-horizontal: var(--size-300);
@@ -96,25 +94,8 @@
     }
 
 
-    &:not(:has(input:checked, input:indeterminate)) {
-        &:hover,
-        label:hover & {
-            --background: var(--background-hover);
-            --border-color: var(--border-color-hover);
-            --border-width-offset: var(--border-width-offset-hover);
-            --box-shadow: var(--box-shadow-hover);
-            --indicator-color: var(--indicator-color-hover);
-            --scale: var(--scale-hover);
-        }
-
-        &:active,
-        label:active & {
-            --background: var(--background-pressed);
-            --border-color: var(--border-color-pressed);
-            --box-shadow: var(--box-shadow-pressed);
-            --indicator-color: var(--indicator-color-pressed);
-            --scale: var(--scale-pressed);
-        }
+    &:has(input:checked) {
+        --check-offset: 0;
     }
 
     &:has(input:checked, input:indeterminate) {
@@ -125,12 +106,29 @@
         --scale: var(--scale-active);
     }
 
-    &:has(input:checked) {
-        --check-offset: 0;
-    }
-
     // The group header's dash, drawn while some but not all of its options are checked.
     &:has(input:indeterminate) {
         --dash-offset: 0;
     }
+
+    &:not(:has(input:checked, input:indeterminate)) {
+        &:active,
+        label:active & {
+            --background: var(--background-pressed);
+            --border-color: var(--border-color-pressed);
+            --box-shadow: var(--box-shadow-pressed);
+            --indicator-color: var(--indicator-color-pressed);
+            --scale: var(--scale-pressed);
+        }
+
+        &:hover,
+        label:hover & {
+            --background: var(--background-hover);
+            --border-color: var(--border-color-hover);
+            --border-width-offset: var(--border-width-offset-hover);
+            --box-shadow: var(--box-shadow-hover);
+            --indicator-color: var(--indicator-color-hover);
+            --scale: var(--scale-hover);
+        }
+    }
 }