@esportsplus/ui 0.57.0 → 0.58.0

package/src/css-utilities/surface.scss

@@ -0,0 +1,266 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+@use '../tokens/scss' as tokens;
+
+
+// The shadow at each weight, 0 to 7, as two layers of y offset, blur, spread in px and opacity: Tailwind v4's
+// 'shadow-2xs' through 'shadow-2xl', a missing second layer written as zeros. Every opacity runs at the mode's shadow
+// 'opacity' in the theme's surface tokens over Tailwind's 10%.
+$shadow-steps: (
+    ((0 0 0 0), (0 0 0 0)),
+    ((1 0 0 0.05), (0 0 0 0)),
+    ((1 2 0 0.05), (0 0 0 0)),
+    ((1 3 0 0.1), (1 2 -1 0.1)),
+    ((4 6 -1 0.1), (2 4 -2 0.1)),
+    ((10 15 -3 0.1), (4 6 -4 0.1)),
+    ((20 25 -5 0.1), (8 10 -6 0.1)),
+    ((25 50 -12 0.25), (0 0 0 0))
+);
+
+// The heaviest shadow weight, the ladder's last step.
+$shadow-weight-max: list.length($shadow-steps) - 1;
+
+
+// A ladder step as a lightness fraction.
+@function ladder-step($mode, $key) {
+    @return math.div(map.get(tokens.$themes, $mode, surface, $key), 100);
+}
+
+// The lightness a level moves from the page in a mode: raised levels by one step, sunken ones by another.
+@function level-offset($level, $mode) {
+    @return 'max(#{$level}, 0) * #{ladder-step($mode, raised)} + min(#{$level}, 0) * #{ladder-step($mode, sunken)}';
+}
+
+// Light chroma at a new lightness, holding the origin's ratio of chroma to its distance from white: fading to none at
+// white and deepening toward the darker fills, as dark scales chroma with the distance from black.
+@function light-chroma($light) {
+    @return 'calc(c * (1 - #{$light}) / max(1 - l, 0.01))';
+}
+
+// The background at a level, stepped from the theme's surface by the ladder: light raised levels climb to white, where
+// the shadow alone carries elevation, and dark ones stop 6 levels above it. Chroma keeps the page's tint on its hue,
+// scaled with the distance from white in light and from black in dark.
+@function surface-background($level) {
+    $dark: 'clamp(0, l + #{level-offset($level, dark)}, l + #{6 * ladder-step(dark, raised)})';
+    $light: 'clamp(0, l + #{level-offset($level, light)}, 1)';
+
+    @return light-dark(
+        #{'oklch(from var(--color-surface) #{$light} #{light-chroma($light)} h)'},
+        #{'oklch(from var(--color-surface) #{$dark} calc(c * #{$dark} / max(l, 0.01)) h)'}
+    );
+}
+
+// The default background moved for a state, so it follows any background a component sets in its place: active and
+// hover lighter, pressed darker, in both modes.
+@function surface-shift($state) {
+    $sign: '+';
+
+    @if $state == 'pressed' {
+        $sign: '-';
+    }
+
+    @return light-dark(
+        #{'oklch(from var(--surface-background-default) calc(l #{$sign} #{ladder-step(light, $state)}) c h)'},
+        #{'oklch(from var(--surface-background-default) calc(l #{$sign} #{ladder-step(dark, $state)}) c h)'}
+    );
+}
+
+// A state's background moved by the mode's border step, darker in light and lighter in dark, so each border follows the
+// background it edges in that state and stands out from it in both modes.
+@function surface-border($state) {
+    @return light-dark(
+        #{'oklch(from var(--surface-background-#{$state}) max(0, l - #{ladder-step(light, border)}) c h)'},
+        #{'oklch(from var(--surface-background-#{$state}) min(1, l + #{ladder-step(dark, border)}) c h)'}
+    );
+}
+
+// A mode's shadow token.
+@function shadow-token($mode, $key) {
+    @return map.get(tokens.$themes, $mode, surface, shadow, $key);
+}
+
+// The color of a shadow falling on a background in a mode: that background deepened in its own hue by the mode's depth,
+// at its 10% step's opacity.
+@function shadow-color-in($background, $mode) {
+    $depth: shadow-token($mode, depth);
+    $opacity: math.div(shadow-token($mode, opacity), 100);
+
+    @return 'oklch(from #{$background} calc(l * #{$depth}) calc(c * #{$depth}) h / #{$opacity})';
+}
+
+// The color of a shadow falling on a background, in each mode.
+@function shadow-color($background) {
+    @return light-dark(#{shadow-color-in($background, light)}, #{shadow-color-in($background, dark)});
+}
+
+// One of a layer's y, blur, spread or opacity at a weight. A number reads its step; anything else, such as a custom
+// property, sums each step's change, in full once the weight passes the step and in part between steps, so a weight
+// set where the shadow is used picks its step without a query and a fraction lands between two.
+@function shadow-value($layer, $index, $weight) {
+    $steps: $shadow-steps;
+
+    @if meta.type-of($weight) == 'number' {
+        @return list.nth(list.nth(list.nth($steps, $weight + 1), $layer), $index);
+    }
+
+    $terms: '0';
+
+    @for $i from 2 through list.length($steps) {
+        $delta: list.nth(list.nth(list.nth($steps, $i), $layer), $index) -
+            list.nth(list.nth(list.nth($steps, $i - 1), $layer), $index);
+
+        @if $delta != 0 {
+            $terms: '#{$terms} + #{$delta} * clamp(0, #{$weight} - #{$i - 2}, 1)';
+        }
+    }
+
+    @return '(#{$terms})';
+}
+
+// Both layers of the shadow at a weight, in a shadow color: by default the color of a shadow falling on the surface it
+// is used in.
+@function shadow($weight, $color: 'var(--surface-shadow-color)') {
+    $layers: ();
+
+    @each $layer in (1, 2) {
+        $lengths: ();
+
+        $fixed: meta.type-of($weight) == 'number';
+
+        @for $i from 1 through 3 {
+            $length: shadow-value($layer, $i, $weight);
+
+            @if $fixed {
+                $length: $length * 1px;
+            }
+            @else {
+                $length: 'calc(#{$length} * 1px)';
+            }
+
+            $lengths: list.append($lengths, $length);
+        }
+
+        // The step's opacity over a 10% step, the opacity the shadow color carries.
+        $share: shadow-value($layer, 4, $weight);
+
+        @if $fixed {
+            $share: $share * 10;
+        }
+        @else {
+            $share: '#{$share} * 10';
+        }
+
+        $opacity: 'calc(alpha * #{$share})';
+        $layers: list.append($layers, '0 #{$lengths} oklch(from #{$color} l c h / #{$opacity})');
+    }
+
+    @return list.join($layers, (), comma);
+}
+
+
+// A layer's colors, read from its level: 0 the page, each surface a level above the one it sits in, in the states
+// components already name, following any background a component sets in its place. Active, hover and pressed step the
+// background as 'surface-shift()' sets. Each state's border is that state's background moved by the border step,
+// darker in light and lighter in dark. Another level is never a color to paint: an element reaches it by extending
+// '%surface-raised' or '%surface-sunken', so whatever sits in it reads its states from the level it shows.
+@mixin surface-colors {
+    --surface-background-active: #{surface-shift('active')};
+    --surface-background-default: #{surface-background('var(--surface-level)')};
+    --surface-background-hover: #{surface-shift('hover')};
+    --surface-background-pressed: #{surface-shift('pressed')};
+    --surface-border-active: #{surface-border('active')};
+    --surface-border-default: #{surface-border('default')};
+    --surface-border-hover: #{surface-border('hover')};
+    --surface-border-pressed: #{surface-border('pressed')};
+    --surface-shadow-active: var(--surface-shadow-hover);
+    --surface-shadow-color: #{shadow-color('var(--surface-background-default)')};
+}
+
+// A layer's shadow weight, which picks its step on the ladder. Each surface sets it from its level; set it on a surface
+// to choose another step without moving the level.
+@mixin surface-shadow($weight) {
+    --surface-shadow-weight: #{$weight};
+}
+
+// A layer's shadows at its weight, cast on what it sits in, a level below: lifted one step on hover and while active,
+// settled one when pressed.
+@mixin surface-shadows {
+    --surface-shadow-cast: #{shadow-color(surface-background('calc(var(--surface-level) - 1)'))};
+    --surface-shadow-default: #{shadow('var(--surface-shadow-weight)', 'var(--surface-shadow-cast)')};
+    --surface-shadow-hover: #{
+        shadow('min(var(--surface-shadow-weight) + 1, #{$shadow-weight-max})', 'var(--surface-shadow-cast)')
+    };
+    --surface-shadow-pressed: #{shadow('max(var(--surface-shadow-weight) - 1, 0)', 'var(--surface-shadow-cast)')};
+}
+
+
+// Only a surface already at the top matches no raised query, so it keeps the top level's weight.
+%surface-raised-level {
+    @include surface-shadow(6);
+}
+
+// A layer a level above or below whatever it sits in, counted and colored without being painted: for components that
+// route their background and shadow through their own variables, pointing them at '--surface-background-*' and
+// '--surface-shadow-*'. A sunken layer is recessed, so it casts no shadow.
+%surface-raised-level,
+%surface-sunken-level {
+    @include surface-colors;
+    @include surface-shadows;
+}
+
+%surface-sunken-level {
+    @include surface-shadow(0);
+}
+
+// Its level is its parent's one up or down. Every element is a style container, so a style query reads the parent's
+// level where the surface sets its own, which a 'var()' on the same property could not, and sets the shadow weight to
+// match. Raised levels stop at 6, where the dark steps top out, and sunken ones at -3, so a surface can still
+// sink inside one that already sits below the page; past either, a surface matches no query and keeps its parent's
+// level.
+@for $level from -3 through 5 {
+    @container style(--surface-level: #{$level}) {
+        %surface-raised-level {
+            --surface-level: #{$level + 1};
+            @include surface-shadow(math.max($level + 1, 0));
+        }
+    }
+}
+
+@for $level from -2 through 6 {
+    @container style(--surface-level: #{$level}) {
+        %surface-sunken-level {
+            --surface-level: #{$level - 1};
+        }
+    }
+}
+
+%surface-raised {
+    @extend %surface-raised-level;
+}
+
+// The same, painted: the surface's background and shadow on the element itself.
+%surface-raised,
+%surface-root,
+%surface-sunken {
+    background: var(--surface-background-default);
+    box-shadow: var(--surface-shadow-default);
+}
+
+%surface-root {
+    @extend %surface-root-level;
+}
+
+// A fresh stack above everything, for dialogs: level 1 wherever it opens, so whatever opens inside counts up from it,
+// with the heaviest shadow since nothing sits above it. Not counted from its parent, so it skips the queries.
+%surface-root-level {
+    @include surface-colors;
+    @include surface-shadow($shadow-weight-max);
+    @include surface-shadows;
+    --surface-level: 1;
+}
+
+%surface-sunken {
+    @extend %surface-sunken-level;
+}

package/src/css-utilities/text.scss

@@ -0,0 +1,191 @@
+%text {
+    --border-width: 0px;
+    --color: var(--color-default, inherit);
+    --color-active: var(--color-default);
+    --color-default: var(--color-text-400);
+    --color-hover: var(--color-default);
+    --color-pressed: var(--color-default);
+    --width: auto;
+
+    color: var(--color);
+    display: flex;
+    font-size: var(--font-size);
+    font-weight: var(--font-weight);
+    gap: var(--gap-vertical) var(--gap-horizontal);
+    line-height: var(--line-height);
+    position: relative;
+    transition: color var(--transition-duration) var(--transition-timing-function);
+    width: var(--width);
+}
+
+// Ellipsis needs a block container, not '%text''s flex. Extends only meet within one stylesheet, so this applies
+// where both are extended in the same file.
+%text%text-truncate {
+    display: block;
+}
+
+%text-crop {
+    @supports (text-box: trim-both cap alphabetic) {
+        & {
+            text-box: trim-both cap alphabetic;
+        }
+
+        &-bottom {
+            text-box: trim-end cap alphabetic;
+        }
+
+        &-top {
+            text-box: trim-start cap alphabetic;
+        }
+    }
+
+    @supports not (text-box: trim-both cap alphabetic) {
+        &::after,
+        &-bottom::after {
+            margin-bottom: calc((1em - 1lh) * 0.618);
+        }
+
+        &::after,
+        &::before,
+        &-bottom::after,
+        &-top::before {
+            content: '';
+            display: block;
+            height: 0;
+            width: 100%;
+        }
+
+        &::before,
+        &-top::before {
+            margin-top: calc((1em - 1lh) * 0.618);
+        }
+    }
+
+    &-first-child {
+        &:first-child {
+            @extend %text-crop-top;
+        }
+    }
+
+    &-last-child {
+        &:last-child {
+            @extend %text-crop-bottom;
+        }
+    }
+}
+
+// The gradient repeats its first stop at the end, so sliding it one full background-size loops seamlessly.
+%text-gradient {
+    --background-size: calc(var(--speed) * 300%);
+    --color-from: #ffaa40;
+    --color-to: #9c40ff;
+    --duration: 8s;
+    // Multiplies how far the gradient travels per loop; 2 sweeps twice the distance in the same time.
+    --speed: 1;
+    animation: text-gradient var(--duration) linear infinite;
+    background-clip: text;
+    background-image: linear-gradient(to right, var(--color-from), var(--color-to), var(--color-from));
+    background-size: var(--background-size) 100%;
+    color: transparent;
+
+    @media (prefers-reduced-motion: reduce) {
+        animation: none;
+    }
+}
+
+// A copy of the text from 'data-text', nudged down-right and filled with fine diagonal hatching that drifts, like a
+// printed drop shadow.
+%text-line-shadow {
+    --duration: 15s;
+    --line-size: 0.06em;
+    --offset: 0.04em;
+    --shadow-color: var(--color-primary-500);
+    display: inline-flex;
+    position: relative;
+    z-index: 0;
+
+    &::after {
+        animation: text-line-shadow var(--duration) linear infinite;
+        background-clip: text;
+        background-image: linear-gradient(
+            45deg,
+            transparent 45%,
+            var(--shadow-color) 45%,
+            var(--shadow-color) 55%,
+            transparent 0
+        );
+        background-size: var(--line-size) var(--line-size);
+        color: transparent;
+        content: attr(data-text);
+        left: var(--offset);
+        pointer-events: none;
+        position: absolute;
+        top: var(--offset);
+        z-index: -1;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &::after {
+            animation: none;
+        }
+    }
+}
+
+// The text keeps a translucent fill, so the clipped band behind it reads as a glint passing through the letters.
+// Prefixed, so the host component's own '--color' is left alone.
+%text-shiny {
+    --shine-color: oklch(from var(--color-primary-500) l c h / 0.8);
+    --shine-duration: 8s;
+    --shine-text-color: oklch(from var(--color-primary-300) l c h / 0.7);
+    --shine-width: 100px;
+    animation: text-shiny var(--shine-duration) infinite;
+    background-clip: text;
+    background-image: linear-gradient(to right, transparent, var(--shine-color) 50%, transparent);
+    background-position: 0 0;
+    background-repeat: no-repeat;
+    background-size: var(--shine-width) 100%;
+    color: var(--shine-text-color);
+
+    @media (prefers-reduced-motion: reduce) {
+        animation: none;
+        background-image: none;
+    }
+}
+
+%text-truncate {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+
+@keyframes text-gradient {
+    to {
+        background-position: var(--background-size) 0;
+    }
+}
+
+@keyframes text-line-shadow {
+    0% {
+        background-position: 0 0;
+    }
+
+    100% {
+        background-position: 100% -100%;
+    }
+}
+
+// Sweeps across and back, then rests for the final stretch of each cycle.
+@keyframes text-shiny {
+    0%,
+    90%,
+    100% {
+        background-position: calc(-100% - var(--shine-width)) 0;
+    }
+
+    30%,
+    60% {
+        background-position: calc(100% + var(--shine-width)) 0;
+    }
+}

package/src/modifiers/glass/index.ts

@@ -0,0 +1,44 @@
+import { html } from '@esportsplus/template';
+import './scss/index.scss';
+
+
+type GlassMode = 'uniform' | 'progressive';
+
+
+// Uniform glass uses one full-strength layer; progressive glass uses seven masked layers.
+const overlay = (mode: GlassMode = 'uniform', classes = '') => mode === 'progressive'
+    ? html`
+        <div aria-hidden='true' class='--glass-blur --glass-blur-progressive ${classes}'>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+        </div>
+    `
+    : html`
+        <div aria-hidden='true' class='--glass-blur ${classes}'>
+            <span></span>
+        </div>
+    `;
+
+
+export default (mode: GlassMode = 'uniform') => ({
+    class: mode === 'progressive' ? ['--glass', '--glass-progressive'] : ['--glass'],
+    onconnect: (element: HTMLElement) => {
+        let container = element.querySelector(':scope > .--glass-blur');
+
+        if (!container) {
+            element.appendChild( overlay(mode) );
+        }
+        else if (container.classList.contains('--glass-blur-progressive') !== (mode === 'progressive')) {
+            container.replaceWith( overlay(mode) );
+        }
+    }
+});
+
+
+export { overlay };
+export type { GlassMode };

package/src/{css-utilities → modifiers}/glass/scss/index.scss

@@ -10,7 +10,7 @@
 }
 
 .--glass {
-    backdrop-filter: blur(var(--blur));
+    backdrop-filter: blur(var(--glass-blur));
 
     &-blur {
         border-radius: inherit;
@@ -22,7 +22,7 @@
         z-index: -1;
 
         // Seven overlapping masks and blur steps from https://www.spaceui.one/components/frost-blurred.
-        // --blur is the uniform radius or the strongest progressive radius.
+        // --glass-blur is the uniform radius or the strongest progressive radius.
         &.--glass-blur-progressive {
             $steps: 0.084, 0.125, 0.214, 0.386, 0.664, 0.986, 1.15;
             $count: list.length($steps);
@@ -42,9 +42,9 @@
                 }
 
                 > span:nth-child(#{$layer}) {
-                    -webkit-backdrop-filter: blur(calc(var(--blur, 24px) * #{math.div(list.nth($steps, $layer), 1.15)}));
+                    -webkit-backdrop-filter: blur(calc(var(--glass-blur, 24px) * #{math.div(list.nth($steps, $layer), 1.15)}));
                     -webkit-mask-image: $mask;
-                    backdrop-filter: blur(calc(var(--blur, 24px) * #{math.div(list.nth($steps, $layer), 1.15)}));
+                    backdrop-filter: blur(calc(var(--glass-blur, 24px) * #{math.div(list.nth($steps, $layer), 1.15)}));
                     mask-image: $mask;
                     z-index: $layer;
                 }
@@ -52,8 +52,8 @@
         }
 
         > span {
-            -webkit-backdrop-filter: blur(var(--blur, 24px));
-            backdrop-filter: blur(var(--blur, 24px));
+            -webkit-backdrop-filter: blur(var(--glass-blur, 24px));
+            backdrop-filter: blur(var(--glass-blur, 24px));
             border-radius: inherit;
             inset: 0;
             opacity: var(--glass-opacity, 1);

package/src/{css-utilities → modifiers}/glass/scss/variables.scss

@@ -1,5 +1,5 @@
 .--glass {
-    --blur: 24px;
+    --glass-blur: 24px;
     --glass-opacity: 1;
 
     &-progressive {

package/src/{css-utilities → modifiers}/index.ts

@@ -1,3 +1,2 @@
 export { default as glass } from './glass';
 export { default as scrollbar } from './scrollbar';
-export { default as theme } from './theme';