@esportsplus/ui 0.57.0 → 0.58.0

package/src/components/card/scss/index.scss

@@ -1,12 +1,17 @@
-@use '/shared';
+@use 'css-utilities/background';
+@use 'css-utilities/border';
+@use 'css-utilities/box-shadow';
+@use 'css-utilities/layer';
 @use 'expand';
 @use 'variables';
 @use '../../frame/scss/index';
 
 .card {
-    @extend %background-state, %border-state;
+    @extend %background-state, %border-state, %box-shadow-state;
     background: var(--background);
+    border: var(--border-width) solid var(--border-color);
     border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
     padding-block: max(0px, calc(var(--padding-vertical) - var(--border-width)));
     padding-inline: max(0px, calc(var(--padding-horizontal) - var(--border-width)));
     position: relative;
@@ -20,12 +25,6 @@
     width: var(--width);
 
 
-    // Pseudo Element Box Shadow
-    &::after {
-        @extend %layer-box-shadow;
-    }
-
-
     // A shell that morphs between stacked layers, one shown at a time. The consumer sizes it to the active
     // layer through '--morph-width' and '--morph-height'; the layers are 'frame--swap's, so marking one
     // '--active', with the active index in '--i' on the viewport and each layer's own in '--n', slides the
@@ -56,21 +55,41 @@
         }
     }
 
+
+    // A soft halo in place of the card's elevation. Keyboard focus shows it as hover does. Restated because the
+    // placeholder's own declaration is emitted ahead of '.card' and loses to it.
+    &--ring {
+        @extend %box-shadow-outline;
+        box-shadow: 0 0 0 var(--box-shadow-width) var(--box-shadow);
+
+        &:focus-visible {
+            --box-shadow: var(--box-shadow-hover);
+        }
+    }
+
+
     // Pinned to its natural size, so text never reflows while the shell morphs around it.
-    &-morph-layer {
-        left: 0;
-        padding-block: var(--padding-vertical);
-        padding-inline: var(--padding-horizontal);
-        position: absolute;
-        top: 0;
-        width: max-content;
+    &-morph {
+        &-layer {
+            left: 0;
+            padding-block: var(--padding-vertical);
+            padding-inline: var(--padding-horizontal);
+            position: absolute;
+            top: 0;
+            width: max-content;
+        }
+
+        &-viewport {
+            border-radius: inherit;
+            height: 100%;
+            overflow: clip;
+            position: relative;
+            width: 100%;
+        }
     }
 
-    &-morph-viewport {
-        border-radius: inherit;
-        height: 100%;
-        overflow: clip;
-        position: relative;
-        width: 100%;
+    // Pseudo Element Box Shadow
+    &::after {
+        @extend %layer-box-shadow;
     }
 }

package/src/components/card/scss/variables.scss

@@ -1,47 +1,51 @@
+@use 'css-utilities/surface';
+
+
 // Shared with the view transition pseudos, which hang off the root and can't read the card's own variables.
 $expand-border-radius: 18px;
-$expand-box-shadow:
-    0 0 0 var(--border-width-400) oklch(from var(--color-black-500) l c h / 0.06),
-    0 1px 2px oklch(from var(--color-black-500) l c h / 0.06),
-    0 6px 16px -6px oklch(from var(--color-black-500) l c h / 0.12);
+// The pseudos sit above the themed element too, so they see no theme colors: theirs is a constant black shadow.
+$expand-transition-box-shadow:
+    0 0 0 var(--border-width-400) oklch(from var(--color-black-300) l c h / 0.06),
+    0 2px 3px -2px oklch(from var(--color-black-300) l c h / 0.07),
+    0 4px 12px -4px oklch(from var(--color-black-300) l c h / 0.06);
 
+
+// A surface: a level above whatever it sits in, painted and lifted to match.
 .card {
+    @extend %surface-raised-level;
+    --background-default: var(--surface-background-default);
     --border-color-default: var(--background);
-    // The card draws no border of its own; a consumer adding one sets this, so the box keeps its size.
+    // No border until a consumer sets a width; the padding insets by it, so the box keeps its size.
     --border-width: 0px;
-    --box-shadow: var(--box-shadow-default);
-    --box-shadow-default: none;
-    --padding-horizontal: 0px;
-    --padding-vertical: 0px;
+    --box-shadow-default: var(--surface-shadow-default);
     --width: auto;
 
 
+    &--expand {
+        --padding-horizontal: 18px;
+        --padding-vertical: var(--size-400);
+        --width: 100%;
+    }
+
     &--expand,
     &-expand-dialog {
-        --background-default: var(--surface-background);
+        --background-default: var(--expand-background);
         --border-radius: #{$expand-border-radius};
         --border-width: 0px;
-        --box-shadow-default: #{$expand-box-shadow};
-    }
-
-    &--expand {
-        --padding-horizontal: 18px;
-        --padding-vertical: 16px;
-        --pressed-scale: 0.96;
-        --width: 100%;
+        --box-shadow-default: var(--surface-shadow-default);
     }
 
     &--morph {
-        --morph-blur: 4px;
-        --morph-duration: 0.3s;
+        --morph-blur: var(--blur-400);
+        --morph-duration: var(--duration-moderate);
         // The outgoing layer clears out faster than the incoming one arrives, so the two never read as
         // overlapping text.
-        --morph-enter-duration: 0.25s;
+        --morph-enter-duration: var(--duration-moderate);
         --morph-exit-duration: 0.18s;
         --morph-fade-duration: var(--transition-duration);
         --morph-fade-timing-function: var(--transition-timing-function);
         --morph-shift: 48px;
-        --morph-swap-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+        --morph-swap-timing-function: var(--easing-out);
         // Critically damped spring: an overshooting shell would uncover empty space.
         --morph-timing-function: linear(0, 0.0432 4.2%, 0.1402 8.3%, 0.2575 12.5%, 0.3764 16.7%, 0.4867 20.8%, 0.584 25%, 0.667 29.2%, 0.7361 33.3%, 0.7925 37.5%, 0.838 41.7%, 0.8743 45.8%, 0.9029 50%, 0.9254 54.2%, 0.9428 58.3%, 0.9564 62.5%, 0.9668 66.7%, 0.9748 70.8%, 0.9809 75%, 0.9856 79.2%, 0.9892 83.3%, 0.9918 87.5%, 0.9939 91.7%, 0.9954 95.8%, 1);
 
@@ -53,21 +57,28 @@ $expand-box-shadow:
         }
     }
 
+    // Doubled class so the ring's colors outrank consumers' elevation shadows (e.g. 'pagination-card--tactile').
+    &--ring {
+        --box-shadow-active: var(--surface-border-active);
+        --box-shadow-default: transparent;
+        --box-shadow-hover: var(--surface-border-hover);
+        --box-shadow-pressed: var(--surface-shadow-pressed);
+    }
+
     &-expand {
-        --dialog-backdrop: oklch(from var(--color-text-500) l c h / 0.15);
+        --dialog-backdrop: oklch(from var(--surface-shadow-color) 0 0 0 / calc(alpha + 0.06));
         --dialog-width: 440px;
-        --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
-        --focus-ring-color: oklch(from var(--color-text-500) l c h / 0.38);
+        --ease-out: var(--easing-out);
+        --expand-background: var(--surface-background-default);
+        --focus-ring-color: var(--surface-border-pressed);
         --list-gap: 12px;
         --max-width: 400px;
         --muted-color: var(--color-text-300);
-        --slot-background: oklch(from var(--color-text-500) l c h / 0.03);
-        --slot-border-color: var(--color-border-300);
-        --surface-background: var(--color-grey-400);
+        --slot-border-color: var(--surface-border-default);
         --text-color: var(--color-text-500);
 
         &-close {
-            --background-hover: var(--color-white-300);
+            --background-hover: var(--surface-background-hover);
             --border-radius: 999px;
             --border-width: 0px;
             --color-default: var(--muted-color);
@@ -82,8 +93,6 @@ $expand-box-shadow:
             --margin-horizontal: 1rem;
             --max-width: var(--dialog-width);
             --padding: 24px;
-            --transition-duration: 0.2s;
-            --transition-timing-function: var(--ease-out);
             --width: min(var(--max-width), calc(100% - (var(--margin-horizontal) * 2)));
         }
     }

package/src/components/cc/scss/index.scss

@@ -1,19 +1,24 @@
-@use '/shared';
 @use '/tokens';
+@use 'css-utilities/absolute';
+@use 'css-utilities/font/geist';
+@use 'css-utilities/hidden';
+@use 'css-utilities/icon';
+@use 'css-utilities/surface';
+@use 'css-utilities/text';
 @use 'variables';
 
 .cc {
     color: var(--color);
     display: flex;
     flex-direction: column;
-    gap: 20px;
+    gap: var(--size-500);
     width: var(--width);
 
 
     &-actions {
         display: flex;
         flex-direction: column;
-        gap: 10px;
+        gap: var(--size-200);
     }
 
     // A sprite <svg> has no viewBox of its own, so the cell must be definite for the marks' 100% to resolve.
@@ -50,8 +55,7 @@
     }
 
     &-caption {
-        font-size: 12px;
-        letter-spacing: 0.025em;
+        font-size: var(--font-size-300);
         opacity: 0.6;
         text-transform: uppercase;
     }
@@ -104,33 +108,33 @@
         }
 
         &--roll-1 {
-            animation: cc-digit-1 var(--digit-duration) ease-out;
+            animation: cc-digit-1 var(--digit-duration) var(--easing-out);
         }
 
         &--roll-2 {
-            animation: cc-digit-2 var(--digit-duration) ease-out;
+            animation: cc-digit-2 var(--digit-duration) var(--easing-out);
         }
     }
 
     &-disclaimer {
-        font-size: 12px;
+        font-size: var(--font-size-300);
         margin: auto 0 0;
         opacity: 0.6;
-        padding: 0 24px 20px;
+        padding: 0 24px var(--size-500);
     }
 
     // Shares the label's row, so showing it never shifts the fields below.
     &-error {
         @extend %text-truncate;
         color: var(--error-color);
-        font-size: 13px;
+        font-size: var(--font-size-300);
         transition:
-            filter 200ms cubic-bezier(0.23, 1, 0.32, 1),
-            opacity 200ms cubic-bezier(0.23, 1, 0.32, 1),
-            translate 200ms cubic-bezier(0.23, 1, 0.32, 1);
+            filter var(--duration-fast) var(--easing-spring),
+            opacity var(--duration-fast) var(--easing-spring),
+            translate var(--duration-fast) var(--easing-spring);
 
         @starting-style {
-            filter: blur(4px);
+            filter: blur(var(--blur-400));
             opacity: 0;
             translate: 0 2px;
         }
@@ -140,26 +144,27 @@
         display: flex;
         flex-direction: column;
         flex-shrink: 0;
-        gap: 4px;
+        gap: calc(var(--size-100) / 2);
 
         &-value {
-            font-family: var(--font-family-mono);
-            font-size: 15px;
+            @extend %font-geist-mono;
+            font-family: var(--font-family);
+            font-size: var(--font-size-400);
             font-weight: var(--font-weight-500);
         }
     }
 
     &-face {
-        @extend %absolute-full;
+        @extend %absolute-full, %surface-raised-level;
         backface-visibility: hidden;
         background: var(--card-background);
         border-radius: var(--card-border-radius);
-        box-shadow: var(--card-shadow);
+        box-shadow: var(--surface-shadow-default);
         color: var(--card-color);
         display: flex;
         flex-direction: column;
         overflow: hidden;
-        transition: opacity 200ms ease-out;
+        transition: opacity var(--duration-moderate) var(--easing-out);
 
         &--back {
             transform: rotateY(180deg);
@@ -189,7 +194,8 @@
         &--cvc,
         &--expiry,
         &--number {
-            font-family: var(--font-family-mono);
+            @extend %font-geist-mono;
+            font-family: var(--font-family);
         }
 
         &--number.input {
@@ -203,35 +209,35 @@
             min-height: 0;
             outline: none;
             padding-block: 0;
-            transition: border-color 150ms ease-out;
+            transition: border-color var(--duration-fast) var(--easing-spring);
+
+            &::placeholder {
+                color: oklch(from var(--muted-color) l c h / 0.7);
+            }
 
             &:focus-visible {
                 outline: var(--border-width-500) solid var(--outline-color);
                 outline-offset: -1px;
             }
-
-            &::placeholder {
-                color: oklch(from var(--muted-color) l c h / 0.7);
-            }
         }
     }
 
     &-fields {
         display: flex;
         flex-direction: column;
-        gap: 16px;
+        gap: var(--size-400);
     }
 
     &-holder {
         display: flex;
         flex: 1;
         flex-direction: column;
-        gap: 4px;
+        gap: calc(var(--size-100) / 2);
         min-width: 0;
 
         &-value {
             @extend %text-truncate;
-            font-size: 15px;
+            font-size: var(--font-size-400);
             font-weight: var(--font-weight-500);
             text-transform: uppercase;
         }
@@ -251,8 +257,8 @@
         align-items: center;
         color: var(--muted-color);
         display: flex;
-        font-size: 13px;
-        gap: 6px;
+        font-size: var(--font-size-300);
+        gap: calc(var(--size-300) / 2);
         justify-content: center;
         margin: 0;
 
@@ -264,10 +270,10 @@
     }
 
     &-number {
+        @extend %font-geist-mono;
         align-self: flex-start;
-        font-family: var(--font-family-mono);
+        font-family: var(--font-family);
         font-size: var(--card-number-font-size);
-        letter-spacing: 0.025em;
         white-space: nowrap;
     }
 
@@ -291,7 +297,7 @@
         transition:
             height var(--ring-duration) var(--spring),
             left var(--ring-duration) var(--spring),
-            opacity 120ms ease-out,
+            opacity var(--duration-fast) var(--easing-out),
             top var(--ring-duration) var(--spring),
             width var(--ring-duration) var(--spring);
 
@@ -300,7 +306,7 @@
             transition:
                 height var(--ring-duration) var(--spring),
                 left var(--ring-duration) var(--spring),
-                opacity 200ms ease-out,
+                opacity var(--duration-moderate) var(--easing-out),
                 top var(--ring-duration) var(--spring),
                 width var(--ring-duration) var(--spring);
         }
@@ -315,13 +321,13 @@
     &-shell {
         display: flex;
         flex-direction: column;
-        gap: 8px;
+        gap: var(--size-100);
         min-width: 0;
 
         &-header {
             align-items: baseline;
             display: flex;
-            gap: 8px;
+            gap: var(--size-100);
             justify-content: space-between;
         }
     }
@@ -330,17 +336,18 @@
         align-items: center;
         display: flex;
         gap: 12px;
-        padding: 20px 24px 0;
+        padding: var(--size-500) 24px 0;
 
         &-value {
+            @extend %font-geist-mono;
             align-items: center;
             background: var(--card-color);
             border-radius: var(--border-radius-300);
             color: var(--card-background);
             display: flex;
             flex: 1;
-            font-family: var(--font-family-mono);
-            font-size: 15px;
+            font-family: var(--font-family);
+            font-size: var(--font-size-400);
             font-style: italic;
             height: 40px;
             justify-content: flex-end;
@@ -359,22 +366,17 @@
         border: 0;
         height: var(--field-height);
         outline: none;
-        transition: scale 150ms ease-out;
-
-        &:active {
-            scale: 0.96;
-        }
 
         &:focus-visible {
             outline: var(--border-width-500) solid var(--outline-color);
-            outline-offset: 2px;
+            outline-offset: calc(var(--size-100) / 4);
         }
     }
 }
 
 @keyframes cc-digit-1 {
     from {
-        filter: blur(2px);
+        filter: blur(var(--blur-300));
         opacity: 0;
         translate: 0 -4px;
     }
@@ -382,7 +384,7 @@
 
 @keyframes cc-digit-2 {
     from {
-        filter: blur(2px);
+        filter: blur(var(--blur-300));
         opacity: 0;
         translate: 0 -4px;
     }
@@ -390,6 +392,24 @@
 
 // No half turn: the faces cross-fade in place and every blur, slide and scale drops to a plain fade.
 @media (prefers-reduced-motion: reduce) {
+    .cc {
+        &-error {
+            @starting-style {
+                filter: none;
+                translate: 0 0;
+            }
+        }
+
+        &-face--back {
+            opacity: var(--face-back-opacity, 0);
+            transform: none;
+        }
+
+        &-face--front {
+            opacity: var(--face-front-opacity, 1);
+        }
+    }
+
     .cc-card--flipped {
         --face-back-opacity: 1;
         --face-front-opacity: 0;
@@ -400,26 +420,6 @@
     .cc-digit--roll-2 {
         animation-name: cc-fade;
     }
-
-    .cc-error {
-        @starting-style {
-            filter: none;
-            translate: 0 0;
-        }
-    }
-
-    .cc-face--back {
-        opacity: var(--face-back-opacity, 0);
-        transform: none;
-    }
-
-    .cc-face--front {
-        opacity: var(--face-front-opacity, 1);
-    }
-
-    .cc-submit.button:active {
-        scale: 1;
-    }
 }
 
 @keyframes cc-fade {

package/src/components/cc/scss/variables.scss

@@ -1,16 +1,15 @@
 .cc {
-    --card-background: var(--color-text-500);
+    // A physical card keeps its dark face in both modes.
+    --card-background: var(--color-black-300);
     --card-border-radius: var(--border-radius-700);
     --card-color: var(--color-white-300);
     --card-number-font-size: clamp(16px, 5.2vw, 21px);
-    --card-shadow: var(--box-shadow-300);
     --color: var(--color-text-500);
-    --digit-duration: 150ms;
+    --digit-duration: var(--duration-fast);
     --error-color: var(--color-red-400);
-    --field-background: var(--color-white-300);
-    --field-border-color: var(--color-border-300);
+    --field-border-color: var(--surface-border-default);
     --field-border-radius: var(--border-radius-600);
-    --field-font-size: 15px;
+    --field-font-size: var(--font-size-400);
     --field-height: 44px;
     // A half turn across the card's full width reads as a rush under ~400ms, and nobody waits on it.
     --flip-duration: 764ms;
@@ -20,12 +19,12 @@
     --label-font-size: var(--font-size-300);
     --label-font-weight: var(--font-weight-500);
     --muted-color: var(--color-text-300);
-    --outline-color: var(--color-text-500);
-    --ring-duration: 300ms;
+    --outline-color: var(--color-primary-500);
+    --ring-duration: var(--duration-moderate);
     --spring: linear(0, 0.035, 0.118, 0.216, 0.319, 0.424, 0.515, 0.6, 0.669, 0.728, 0.781, 0.822, 0.856, 0.885, 0.908, 0.927, 0.942, 0.954, 0.964, 0.971, 0.977, 0.982, 0.986, 0.989, 0.991, 0.993, 0.995, 0.996, 0.997, 0.997, 1);
-    --submit-background: var(--color-text-500);
-    --submit-color: var(--color-white-300);
-    --swap-duration: 300ms;
+    --submit-background: var(--color-primary-500);
+    --submit-color: var(--color-surface);
+    --swap-duration: var(--duration-moderate);
     --width: min(400px, 100%);
 
     // The ring jumps between fields, still fading in and out.
@@ -57,12 +56,12 @@
         --border-radius: var(--field-border-radius);
         --color-default: var(--submit-color);
         --face-duration: var(--swap-duration);
-        --face-gap: 8px;
+        --face-gap: var(--size-100);
         --face-timing-function: var(--spring);
         --font-size: var(--field-font-size);
         --font-weight: var(--font-weight-500);
-        --icon-size: 16px;
-        --padding-horizontal: 20px;
+        --icon-size: var(--size-400);
+        --padding-horizontal: var(--size-500);
         --padding-vertical: 0px;
     }
 }

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

@@ -1,4 +1,5 @@
-@use '/shared';
+@use 'css-utilities/color';
+@use 'css-utilities/hidden';
 @use 'variables';
 
 // One line per turn, stacked with no gaps, so the pointer never falls between two lines and the card glides
@@ -23,17 +24,17 @@
     &-card {
         display: flex;
         flex-direction: column;
-        gap: 2px;
+        gap: calc(var(--size-100) / 4);
         padding: 12px;
         width: var(--card-width);
     }
 
     &-description {
         -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
         color: var(--card-description-color);
         display: -webkit-box;
         font-size: var(--font-size-300);
-        -webkit-line-clamp: 2;
         line-clamp: 2;
         overflow: hidden;
     }
@@ -82,10 +83,14 @@
 
     // Out of the way until wanted: shown on its own hover or focus, and always on touch, which can't hover to find it.
     &-nav {
+        @extend %color-state;
+        --color-default: var(--color-text-300);
+        --color-hover: var(--nav-color-hover);
+        --color-pressed: var(--color-hover);
         align-items: center;
         background: none;
         border: 0;
-        color: var(--color-text-300);
+        color: var(--color);
         cursor: pointer;
         display: flex;
         height: var(--nav-height);
@@ -93,8 +98,8 @@
         outline: none;
         padding: 0 var(--inset);
         transition:
-            color var(--nav-duration) ease-out,
-            opacity var(--nav-duration) ease-out;
+            color var(--nav-duration) var(--easing-spring),
+            opacity var(--nav-duration) var(--easing-spring);
         width: var(--item-width);
 
         &:disabled {
@@ -102,10 +107,8 @@
             pointer-events: none;
         }
 
-        &:focus-visible,
-        &:hover {
-            color: var(--color-active);
-            opacity: 1;
+        &:focus-visible {
+            --color: var(--color-hover);
         }
 
         &:focus-visible {
@@ -114,6 +117,11 @@
             outline-offset: -1px;
         }
 
+        &:focus-visible,
+        &:hover {
+            opacity: 1;
+        }
+
         @media (pointer: coarse) {
             opacity: 1;
 
@@ -121,17 +129,17 @@
                 opacity: 0.4;
             }
         }
-    }
 
-    &-nav-icon {
-        flex-shrink: 0;
-        height: 12px;
-        width: 12px;
+        &-icon {
+            flex-shrink: 0;
+            height: 12px;
+            width: 12px;
+        }
     }
 
     &-title {
         color: var(--card-title-color);
-        font-size: 0.875rem;
+        font-size: var(--font-size-300);
         font-weight: var(--font-weight-500);
         overflow: hidden;
         text-overflow: ellipsis;