@esportsplus/ui 0.57.0 → 0.58.0

package/src/components/uptime/scss/index.scss

@@ -1,5 +1,5 @@
-@use '/shared';
 @use '/tokens';
+@use 'css-utilities/hidden';
 @use 'variables';
 
 .uptime {
@@ -44,7 +44,7 @@
 
         &:focus-visible {
             outline: 2px solid var(--color);
-            outline-offset: 4px;
+            outline-offset: calc(var(--size-100) / 2);
         }
     }
 
@@ -70,16 +70,16 @@
         min-width: 0;
     }
 
-    &-service-day,
-    &-service-percentage {
-        font-variant-numeric: tabular-nums;
-    }
-
     &-service-day {
         color: var(--color-muted);
         flex-shrink: 0;
     }
 
+    &-service-day,
+    &-service-percentage {
+        font-variant-numeric: tabular-nums;
+    }
+
     &-service-header {
         align-items: center;
         display: flex;
@@ -89,6 +89,14 @@
         margin-bottom: var(--size-300);
     }
 
+    // Same cut-out as 'image--status', anchored top right: the mask punches a ring out of the text, and
+    // the status dot, a sibling so the mask can't clip its tooltip, sits in the hole.
+    &-service-label {
+        display: block;
+        mask-clip: no-clip;
+        mask-image: var(--status-mask);
+    }
+
     // Each caption change mounts a fresh node, so the entry animation replays per swap.
     &-service-message {
         animation: uptime-caption var(--transition-duration) var(--timing-function);
@@ -118,14 +126,6 @@
         }
     }
 
-    // Same cut-out as 'image--status', anchored top right: the mask punches a ring out of the text, and
-    // the status dot, a sibling so the mask can't clip its tooltip, sits in the hole.
-    &-service-label {
-        display: block;
-        mask-clip: no-clip;
-        mask-image: var(--status-mask);
-    }
-
     &-service-name {
         flex-shrink: 0;
         font-weight: var(--font-weight-500);

package/src/components/uptime/scss/variables.scss

@@ -4,11 +4,11 @@
     --bar-active-scale: 1.15;
     --bar-border-radius: var(--border-radius-100);
     --bar-dim: 0.35;
-    --bar-gap: 3px;
+    --bar-gap: calc(var(--size-300) / 4);
     --bar-height: var(--size-600);
     --bar-opacity: 1;
-    --caption-blur: 4px;
-    --caption-offset: 4px;
+    --caption-blur: var(--blur-400);
+    --caption-offset: calc(var(--size-100) / 2);
     --color: var(--color-text-400);
     --color-degraded: oklch(0.8 0.15 78);
     --color-muted: var(--color-text-300);
@@ -18,8 +18,8 @@
     --dot-size: 6px;
     --font-size: var(--font-size-300);
     --service-gap: var(--size-600);
-    --timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-    --transition-duration: 0.2s;
+    --timing-function: var(--easing-spring);
+    --transition-duration: var(--duration-fast);
     --width: min(440px, 100%);
 
     &-bar {
@@ -75,10 +75,10 @@
     }
 
     &-service-tooltip.tooltip-message {
-        --background-default: var(--color-grey-400);
+        --background-default: var(--surface-background-default);
         --border-radius: var(--border-radius-400);
         --color: var(--color-text-400);
-        --padding-horizontal: 8px;
-        --padding-vertical: 4px;
+        --padding-horizontal: var(--size-100);
+        --padding-vertical: calc(var(--size-100) / 2);
     }
 }

package/src/components/usage-meter/scss/index.scss

@@ -1,4 +1,5 @@
 @use '/tokens';
+@use 'css-utilities/font/geist';
 @use 'variables';
 
 .usage-meter {
@@ -18,7 +19,8 @@
     &-breakdown,
     &-cost,
     &-count {
-        font-family: var(--font-family-mono);
+        @extend %font-geist-mono;
+        font-family: var(--font-family);
         font-variant-numeric: tabular-nums;
     }
 

package/src/components/usage-meter/scss/variables.scss

@@ -5,7 +5,7 @@
     --detail-display: inline;
     --fill: var(--fill-normal);
     --fill-critical: color-mix(in oklch, var(--color-red-400) 80%, transparent);
-    --fill-normal: var(--color-text-500);
+    --fill-normal: var(--color-primary-500);
     --fill-warning: color-mix(in oklch, var(--color-yellow-500) 80%, transparent);
     --gap: var(--size-200);
     --label-color: var(--color-text-500);
@@ -13,15 +13,15 @@
     --label-font-weight: var(--font-weight-500);
     --max-width: 380px;
     --meta-color: var(--color-text-300);
-    --meta-color-muted: color-mix(in oklch, var(--color-text-300) 70%, transparent);
+    --meta-color-muted: color-mix(in oklch, var(--color-primary-300) 70%, transparent);
     --meta-font-size: var(--font-size-100);
     --row-display: flex;
-    --track-background: color-mix(in oklch, var(--color-text-500) 6%, transparent);
+    --track-background: var(--surface-border-default);
     --track-height: 6px;
     --track-order: 0;
     --track-width: 100%;
     --transition-duration: 500ms;
-    --transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+    --transition-timing-function: var(--easing-out);
 
 
     &--critical {
@@ -35,7 +35,7 @@
         --gap: var(--size-300);
         --max-width: none;
         --row-display: contents;
-        --track-background: color-mix(in oklch, var(--color-text-500) 7%, transparent);
+        --track-background: var(--surface-border-hover);
         --track-height: 4px;
         --track-order: -1;
         --track-width: 64px;

package/src/css-utilities/absolute.scss

@@ -0,0 +1,64 @@
+%absolute-bottom {
+    inset: auto 0 0;
+    position: absolute;
+}
+
+%absolute-center {
+    bottom: 50%;
+    position: absolute;
+    right: 50%;
+    translate: 50% 50%;
+}
+
+%absolute-full {
+    inset: 0;
+    position: absolute;
+}
+
+%absolute-horizontal {
+    position: absolute;
+    right: 50%;
+    translate: 50%;
+}
+
+// Centered along one axis and pinned to an edge of the other.
+%absolute-horizontal-bottom {
+    @extend %absolute-horizontal;
+    bottom: 0;
+}
+
+%absolute-horizontal-top {
+    @extend %absolute-horizontal;
+    top: 0;
+}
+
+%absolute-left {
+    inset: 0 auto 0 0;
+    position: absolute;
+}
+
+%absolute-right {
+    inset: 0 0 0 auto;
+    position: absolute;
+}
+
+%absolute-top {
+    inset: 0 0 auto;
+    position: absolute;
+}
+
+%absolute-vertical {
+    bottom: 50%;
+    position: absolute;
+    translate: 0 50%;
+}
+
+%absolute-vertical-left {
+    @extend %absolute-vertical;
+    left: 0;
+}
+
+%absolute-vertical-right {
+    @extend %absolute-vertical;
+    right: 0;
+}

package/src/css-utilities/background.scss

@@ -0,0 +1,43 @@
+@use '../tokens/scss' as tokens;
+@use 'surface';
+
+// After '%background-state', so a color extended alongside it replaces its transparent default.
+%background {
+    @include tokens.state-utility('background', tokens.$colors);
+
+    &-default {
+        --background: var(--background-default);
+        --background-active: var(--background-default);
+        --background-hover: var(--background-default);
+        --background-pressed: var(--background-default);
+    }
+
+    // Raised off the surface it sits on, filling toward the text on hover and press.
+    &-surface {
+        @extend %surface-raised-level;
+        --background-active: var(--surface-background-active);
+        --background-default: var(--surface-background-default);
+        --background-hover: var(--surface-background-hover);
+        --background-pressed: var(--surface-background-pressed);
+    }
+}
+
+%background-state {
+    --background: var(--background-default);
+    --background-active: var(--background-default);
+    --background-default: transparent;
+    --background-hover: var(--background-default);
+    --background-pressed: var(--background-default);
+
+    @include tokens.state(active) {
+        --background: var(--background-active);
+    }
+
+    @include tokens.state(hover) {
+        --background: var(--background-hover);
+    }
+
+    @include tokens.state(pressed) {
+        --background: var(--background-pressed);
+    }
+}

package/src/css-utilities/border.scss

@@ -0,0 +1,45 @@
+@use '../tokens/scss' as tokens;
+
+// After '%border-state', so a color extended alongside it replaces its transparent default.
+%border {
+    @include tokens.state-utility('border-color', tokens.$colors);
+
+    &-default {
+        --border-color: var(--border-color-default);
+        --border-color-active: var(--border-color-default);
+        --border-color-hover: var(--border-color-default);
+        --border-color-pressed: var(--border-color-default);
+    }
+
+    &-radius-responsive {
+        --border-radius: #{"calc( progress((100vi - 100cqi) / 2, 0px, var(--gap-horizontal)) * var(--border-radius) )"};
+    }
+
+    // The surface's edge: faint at rest, a step stronger on hover, strong when pressed.
+    &-surface {
+        --border-color-active: var(--surface-border-active);
+        --border-color-default: var(--surface-border-default);
+        --border-color-hover: var(--surface-border-hover);
+        --border-color-pressed: var(--surface-border-pressed);
+    }
+}
+
+%border-state {
+    --border-color: var(--border-color-default);
+    --border-color-active: var(--border-color-default);
+    --border-color-default: transparent;
+    --border-color-hover: var(--border-color-default);
+    --border-color-pressed: var(--border-color-default);
+
+    @include tokens.state(active) {
+        --border-color: var(--border-color-active);
+    }
+
+    @include tokens.state(hover) {
+        --border-color: var(--border-color-hover);
+    }
+
+    @include tokens.state(pressed) {
+        --border-color: var(--border-color-pressed);
+    }
+}

package/src/css-utilities/box-shadow.scss

@@ -0,0 +1,29 @@
+@use '../tokens/scss' as tokens;
+
+%box-shadow-outline,
+%box-shadow-state {
+    --box-shadow: var(--box-shadow-default);
+    --box-shadow-active: var(--box-shadow-default);
+    --box-shadow-default: none;
+    --box-shadow-hover: var(--box-shadow-default);
+    --box-shadow-pressed: var(--box-shadow-default);
+
+    @include tokens.state(active) {
+        --box-shadow: var(--box-shadow-active);
+    }
+
+    @include tokens.state(hover) {
+        --box-shadow: var(--box-shadow-hover);
+    }
+
+    @include tokens.state(pressed) {
+        --box-shadow: var(--box-shadow-pressed);
+    }
+}
+
+// A ring around the box, its color stepping with the state. It shares '--box-shadow*' with %box-shadow-state, so
+// the state values here are colors and the ring replaces whatever shadow the box had.
+%box-shadow-outline {
+    box-shadow: 0 0 0 var(--box-shadow-width) var(--box-shadow);
+    --box-shadow-width: var(--border-width-700);
+}

package/src/css-utilities/color.scss

@@ -0,0 +1,41 @@
+@use '../tokens/scss' as tokens;
+
+// After '%color-state', so a color extended alongside it replaces its text default.
+%color {
+    @include tokens.state-utility('color', tokens.$colors);
+
+    &-default {
+        --color: var(--color-default);
+        --color-active: var(--color-default);
+        --color-hover: var(--color-default);
+        --color-pressed: var(--color-default);
+    }
+
+    // The surface's own background, for ink set on a text-colored fill.
+    &-surface {
+        --color-active: var(--surface-background-default);
+        --color-default: var(--surface-background-default);
+        --color-hover: var(--surface-background-default);
+        --color-pressed: var(--surface-background-default);
+    }
+}
+
+%color-state {
+    --color: var(--color-default);
+    --color-active: var(--color-default);
+    --color-default: var(--color-text-400);
+    --color-hover: var(--color-default);
+    --color-pressed: var(--color-default);
+
+    @include tokens.state(active) {
+        --color: var(--color-active);
+    }
+
+    @include tokens.state(hover) {
+        --color: var(--color-hover);
+    }
+
+    @include tokens.state(pressed) {
+        --color: var(--color-pressed);
+    }
+}

package/src/css-utilities/flex.scss

@@ -0,0 +1,64 @@
+%flex-center,
+%flex-column,
+%flex-end,
+%flex-horizontal,
+%flex-row,
+%flex-start,
+%flex-vertical {
+    --gap-horizontal: 0px;
+    --gap-vertical: 0px;
+}
+
+%flex-center,
+%flex-end,
+%flex-horizontal,
+%flex-start,
+%flex-vertical {
+    display: flex;
+    flex-flow: row wrap;
+    gap: var(--gap-vertical) var(--gap-horizontal);
+}
+
+%flex-center,
+%flex-horizontal {
+    justify-content: center;
+}
+
+%flex-center,
+%flex-vertical {
+    align-items: center;
+}
+
+%flex-column {
+    flex-flow: column;
+    gap: var(--gap-vertical) 0px;
+}
+
+%flex-column,
+%flex-fill,
+%flex-fixed,
+%flex-row {
+    display: flex;
+}
+
+%flex-end {
+    justify-content: flex-end;
+}
+
+%flex-fill {
+    flex: 1;
+    min-width: 0;
+}
+
+%flex-fixed {
+    flex: 0 0 var(--width);
+}
+
+%flex-row {
+    flex-flow: row;
+    gap: 0px var(--gap-horizontal);
+}
+
+%flex-start {
+    justify-content: flex-start;
+}

package/src/css-utilities/font/geist/{scss/index.scss → index.scss}

@@ -1,4 +1,4 @@
-@use '/shared';
+@use '../../../shared/scss/css-variables' as shared;
 
 
 @font-face {
@@ -17,6 +17,8 @@
     src: url('./Geist-Italic-Variable.woff2') format('woff2');
 }
 
+// Geist Mono, for components that set code and figures in it whatever family the page uses: extending
+// '%font-geist-mono' loads the face with the component and points the element's '--font-family' at it.
 @font-face {
     font-display: swap;
     font-family: 'Geist Mono';
@@ -34,7 +36,7 @@
 }
 
 
-.--font-geist {
+%font-geist {
     --font-family: 'Geist', sans-serif;
 
     &,
@@ -50,6 +52,12 @@
     &-mono {
         --font-family: 'Geist Mono', monospace;
     }
-}
-
 
+    // The family with width-stable weights, so it is the one placeholder to extend: Geist widens about 0.0115em a
+    // character for every 100 of weight, and the root tightens tracking by as much, so a label changing weight keeps
+    // its width. Geist Mono keeps one advance at every weight, so it needs none.
+    &-uniwidth {
+        @extend %font-geist;
+        --font-weight-tracking: 0.000115em;
+    }
+}

package/src/css-utilities/font/montserrat/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2024 The Montserrat.Git Project Authors (https://github.com/JulietaUla/Montserrat.git)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/src/css-utilities/font/montserrat/index.scss

@@ -0,0 +1,38 @@
+@use '../../../shared/scss/css-variables' as shared;
+
+
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 100 900;
+    src: url('./Montserrat-Variable.woff2') format('woff2');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: italic;
+    font-weight: 100 900;
+    src: url('./Montserrat-Italic-Variable.woff2') format('woff2');
+}
+
+
+%font-montserrat {
+    --font-family: 'Montserrat', sans-serif;
+
+    @include shared.css-variables(font-weight, (
+        300: 400,
+        400: 500,
+        500: 600,
+        600: 700
+    ));
+
+    // The family with width-stable weights, so it is the one placeholder to extend: Montserrat widens about 0.008em a
+    // character for every 100 of weight, and the root tightens tracking by as much, so a label changing weight keeps
+    // its width.
+    &-uniwidth {
+        @extend %font-montserrat;
+        --font-weight-tracking: 0.00008em;
+    }
+}

package/src/{shared/scss → css-utilities}/icon.scss

@@ -16,7 +16,7 @@
 // One of several icons sharing a spot: blurred and shrunk away until '%icon-swap-active' brings it in, over the
 // block's '--icon-swap-duration' and '--icon-swap-timing-function'. Reduced motion swaps instantly.
 %icon-swap {
-    filter: blur(4px);
+    filter: blur(var(--blur-400));
     opacity: 0;
     scale: 0.25;
     transition:

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

@@ -1,4 +1,4 @@
-.--inline {
+%inline {
     display: inline;
     font-size: inherit;
     margin: 0;

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

@@ -1,6 +1,6 @@
-@use './variables';
-
-.--skeleton {
+// A loading placeholder: a shimmer sweeping between '--from' and '--to', its content hidden until it loads.
+%skeleton {
+    --animation-duration: 4.8s;
     animation: var(--animation-duration) linear infinite skeleton;
     background-image: linear-gradient(270deg, var(--from), var(--to), var(--to), var(--from));
     background-size: 400% 100%;
@@ -10,13 +10,13 @@
     * {
         opacity: 0;
     }
+}
 
-    @keyframes skeleton {
-        0% {
-            background-position: 200% 0;
-        }
-        100% {
-            background-position: -200% 0;
-        }
+@keyframes skeleton {
+    0% {
+        background-position: 200% 0;
+    }
+    100% {
+        background-position: -200% 0;
     }
-}
+}