@esportsplus/ui 0.51.7 → 0.54.0

package/src/lib/scss/css-variables.scss

@@ -1,16 +1,40 @@
 @use 'sass:meta';
 
 
-@mixin css-variables($prefix, $tokens) {
+// css-variables($prefix, $tokens): custom-property declarations.
+// css-variables($class, $prefix, $tokens): custom-property declarations inside classes.
+@mixin css-variables($class: null, $prefix: null, $tokens: null) {
+    @if $tokens == null {
+        $tokens: $prefix;
+        $prefix: $class;
+        $class: null;
+    }
+    @else if $prefix == null {
+        $prefix: $class;
+        $class: null;
+    }
+
+    @if $prefix == null or (meta.type-of($tokens) != 'map' and $tokens != ()) {
+        @error 'css-variables expects ($prefix, $tokens) or ($class, $prefix, $tokens), with a token map.';
+    }
+
+    @include -tokens($class, $prefix, '', $tokens);
+}
+
+@mixin -tokens($class, $prefix, $suffix, $tokens) {
     @each $key, $value in $tokens {
+        $name: '#{$suffix}-#{$key}';
+
         @if meta.type-of($value) == 'map' {
-            @each $subkey, $subvalue in $value {
-                --#{$prefix}-#{$key}-#{$subkey}: #{$subvalue};
+            @include -tokens($class, $prefix, $name, $value);
+        }
+        @else if $class != null {
+            .#{$class}#{$name} {
+                --#{$prefix}#{$name}: #{$value};
             }
         }
         @else {
-            --#{$prefix}-#{$key}: #{$value};
+            --#{$prefix}#{$name}: #{$value};
         }
     }
 }
-

package/src/themes/dark/index.ts

@@ -1,5 +1,3 @@
-export { default as alert } from './alert';
-export { default as back } from './back';
 export { default as input } from './input';
 export { default as select } from './select';
 export { default as textarea } from './textarea';

package/src/themes/dark/select.ts

@@ -3,19 +3,21 @@ import select from '~/components/select';
 
 export default select.bind({
     attributes: {
-        class: '--background-black --border --border-black --color-white',
+        class: '--background-black --border-black --color-white',
         option: {
-            class: '--background-black --color-white --padding-horizontal-500 --width-full',
-            style: '--color-default: var(--color-grey-500);white-space: nowrap;'
+            class: '--background-black --color-white',
+            style: '--color-default: var(--color-grey-500); --padding-horizontal: var(--size-500); white-space: nowrap; width: 100%;'
         },
-        style: '--border-color-default: var(--color-black-300);',
+        style: '--border-color-default: var(--color-black-300); --border-width: var(--border-width-400); border: var(--border-width) solid var(--border-color);',
 
         'tooltip-content': {
-            class: '--border --border-radius-500',
             direction: 'sw',
             style: `
                 --background: var(--color-black-400);
                 --border-color: var(--color-black-300);
+                --border-radius: var(--border-radius-500);
+                --border-width: var(--border-width-400);
+                border: var(--border-width) solid var(--border-color);
             `
         }
     }

package/src/tokens/index.scss

@@ -3,9 +3,7 @@
 @forward 'scss/box-shadow';
 @forward 'scss/color';
 @forward 'scss/font-size';
-@forward 'scss/font-weight';
-@forward 'scss/line-height';
 @forward 'scss/size';
 @forward 'scss/spacer';
 @forward 'scss/state';
-@forward 'scss/transition-duration';
+@forward 'scss/transition';

package/src/tokens/scss/border-radius.scss

@@ -5,10 +5,5 @@ $border-radius: (
     400: 8px,
     500: 10px,
     600: 12px,
-    700: 16px,
-    800: 20px,
-
-    0px: 0px,
-    circle: 100%,
-    curved: 240px,
+    700: 16px
 );

package/src/tokens/scss/color.scss

@@ -13,9 +13,9 @@ $color: (
         500: oklch(48.45% 0.2617 266.3)
     ),
     'border': (
-        300: oklch(82.15% 0.0368 276.9),
-        400: oklch(78.98% 0.0358 276.6),
-        500: oklch(73.98% 0.0362 278.3)
+        300: oklch(92.9% 0.013 255.508),
+        400: oklch(86.9% 0.022 252.894),
+        500: oklch(70.4% 0.04 256.788)
     ),
     'green': (
         300: oklch(87.03% 0.2708 144.9),
@@ -23,9 +23,9 @@ $color: (
         500: oklch(78.97% 0.2560 144.0)
     ),
     'grey': (
-        300: oklch(98.01% 0.0096 252.8),
-        400: oklch(95.33% 0.0162 245.1),
-        500: oklch(89.33% 0.0157 248.0)
+        300: oklch(0.9842 0.0034 247.86),
+        400: oklch(0.9683 0.0069 247.9),
+        500: oklch(0.9288 0.0126 255.51)
     ),
     'purple': (
         300: oklch(53.29% 0.2877 292.5),
@@ -38,19 +38,19 @@ $color: (
         500: oklch(59.10% 0.2413 27.6)
     ),
     'text': (
-        300: oklch(26.89% 0.0510 273.0),
-        400: oklch(24.11% 0.0541 272.6),
-        500: oklch(21.88% 0.0516 271.8)
+        300: oklch(55.1% 0.027 264.364),
+        400: oklch(37.3% 0.034 259.733),
+        500: oklch(21% 0.034 264.665)
     ),
     'white': (
         300: oklch(100% 0 0),
-        400: oklch(100% 0 0),
-        500: oklch(100% 0 0)
+        400: oklch(99.2% 0 0),
+        500: oklch(98.5% 0 0)
     ),
     'yellow': (
-        300: oklch(96.85% 0.1779 110.7),
-        400: oklch(96.32% 0.2125 111.5),
-        500: oklch(90.35% 0.2004 112.3)
+        300: oklch(90.5% 0.182 98.1),
+        400: oklch(85.2% 0.199 91.9),
+        500: oklch(79.5% 0.184 86.0)
     )
 );
 

package/src/tokens/scss/font-size.scss

@@ -1,14 +1,15 @@
-// https://www.fluid-type-scale.com/calculate?minFontSize=12&minWidth=200&minRatio=1.04&maxFontSize=14&maxWidth=800&maxRatio=1.28&steps=100%2C200%2C300%2C400%2C500%2C600%2C700%2C800%2C900&baseStep=400&prefix=font-size&useContainerWidth=false&includeFallbacks=false&useRems=true&remValue=16&decimals=2&previewFont=Montserrat&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=800
+// Golden-ratio type scale: 400 = 1rem body, each key one φ half-step (×1.272).
+@use 'scale';
+
 $font-size: (
-    100: clamp(0.67rem, -0.67vi + 0.75rem, 0.42rem),
-    200: clamp(0.69rem, -0.42vi + 0.75rem, 0.53rem),
-    300: clamp(0.72rem, -0.1vi + 0.73rem, 0.68rem),
-    400: clamp(0.75rem, 0.33vi + 0.71rem, 0.88rem),
-    500: clamp(0.78rem, 0.91vi + 0.67rem, 1.12rem),
-    600: clamp(0.81rem, 1.66vi + 0.6rem, 1.43rem),
-    700: clamp(0.84rem, 2.64vi + 0.51rem, 1.84rem),
-    800: clamp(0.88rem, 3.92vi + 0.39rem, 2.35rem),
-    900: clamp(0.91rem, 5.58vi + 0.21rem, 3.01rem),
+    100: scale.rem(scale.step(-1.5)),
+    200: scale.rem(scale.step(-1)),
+    300: scale.rem(scale.step(-0.5)),
+    400: scale.rem(scale.step(0)),
+    500: scale.rem(scale.step(0.5)),
+    600: scale.rem(scale.step(1)),
+    700: scale.rem(scale.step(1.5)),
+    800: scale.rem(scale.step(2)),
+    900: scale.rem(scale.step(2.5)),
 );
 
-

package/src/tokens/scss/scale.scss

@@ -0,0 +1,22 @@
+// LiftKit golden-ratio scale engine (github.com/Chainlift/liftkit)
+// One factor drives the type, size, and spacer scales.
+@use 'sass:math';
+
+$factor: 1.618;
+
+$eighth: math.pow($factor, 0.125);
+$half: math.pow($factor, 0.5);
+$quarter: math.pow($factor, 0.25);
+$whole: $factor;
+
+@function step($n) {
+    @return math.pow($factor, $n);
+}
+
+@function px($n, $base: 16) {
+    @return math.div(math.round($n * $base * 100), 100) * 1px;
+}
+
+@function rem($n) {
+    @return math.div(math.round($n * 1000), 1000) * 1rem;
+}

package/src/tokens/scss/size.scss

@@ -1,13 +1,23 @@
+// Golden-ratio size ladder: 400 = 16px (1em), each key one φ half-step (×1.272).
+@use 'scale';
+@use 'sass:math';
+@use 'sass:map';
+
 $size: (
-    100: 4px,
-    200: 8px,
-    300: 12px,
-    400: 16px,
-    500: 20px,
-    600: 24px,
-    700: 32px,
-    800: 40px,
-    900: 48px,
+    100: scale.px(scale.step(-1.5)),
+    200: scale.px(scale.step(-1)),
+    300: scale.px(scale.step(-0.5)),
+    400: scale.px(scale.step(0)),
+    500: scale.px(scale.step(0.5)),
+    600: scale.px(scale.step(1)),
+    700: scale.px(scale.step(1.5)),
+    800: scale.px(scale.step(2)),
+    900: scale.px(scale.step(2.5)),
 
     0px: 0px,
 );
+
+// Snap the derived sizes to whole CSS pixels without changing the ratio engine.
+@each $key, $value in $size {
+    $size: map.set($size, $key, math.round($value));
+}

package/src/tokens/scss/spacer.scss

@@ -1,12 +1,12 @@
-@use '../../lib';
-@use 'size';
+// Golden-ratio spacer ladder: 400 = 120px, each key one φ half-step (×1.272).
+@use 'scale';
 
 $spacer: (
-    100: 40px,
-    200: 60px,
-    300: 80px,
-    400: 120px,
-    500: 160px,
-    600: 180px,
-    700: 220px,
+    100: scale.px(scale.step(-1.5), 120),
+    200: scale.px(scale.step(-1), 120),
+    300: scale.px(scale.step(-0.5), 120),
+    400: scale.px(scale.step(0), 120),
+    500: scale.px(scale.step(0.5), 120),
+    600: scale.px(scale.step(1), 120),
+    700: scale.px(scale.step(1.5), 120),
 );

package/src/tokens/scss/transition.scss

@@ -0,0 +1,4 @@
+$transition: (
+    duration: 0.16s,
+    timing-function: cubic-bezier(0.4, 0, 0.2, 1)
+);

package/storage/svg/arrow-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m10 4-4 4 4 4M6 8h8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/storage/svg/arrow-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m6 4 4 4-4 4M2 8h8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/storage/svg/bolt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13 2L3 14h7l-1 8 10-12h-7z"/></svg>

package/storage/svg/book.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 5.5C6 4.4 8.5 4.5 11 6v14c-2.5-1.5-5-1.6-8-.5z" fill="currentColor" opacity=".4"/><path d="M13 6c2.5-1.5 5-1.6 8-.5v14c-3-1.1-5.5-1-8 .5z" fill="currentColor"/></svg>

package/storage/svg/cube.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m12 2 10 5-10 5L2 7z" fill="currentColor" opacity=".3"/><path d="m2 9 9 4.5V23l-9-4.5z" fill="currentColor" opacity=".6"/><path d="m13 13.5 9-4.5v9.5L13 23z" fill="currentColor"/></svg>

package/storage/svg/github.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z'></path></svg>

package/storage/svg/info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none"><circle cx='12' cy='12' r='9' stroke='currentColor' stroke-width='1.5'/><path d='M12 11v6M12 7v1' stroke='currentColor' stroke-width='1.5'/></g></svg>

package/storage/svg/palette.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20h1a3 3 0 0 0 2.3-4.9.8.8 0 0 1 .6-1.3H18a4 4 0 0 0 4-4C22 6.4 17.5 2 12 2Z" fill="currentColor" opacity=".35"/><g fill="currentColor"><circle cx="7" cy="9" r="1.6"/><circle cx="12" cy="6" r="1.6"/><circle cx="17" cy="9" r="1.6"/><circle cx="6" cy="14" r="1.6"/></g></svg>

package/storage/svg/search.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none"><circle cx='11' cy='11' r='7' stroke='currentColor' stroke-width='2'></circle>
+                    <path d='m20 20-3.5-3.5' stroke='currentColor' stroke-linecap='round' stroke-width='2'></path></g></svg>

package/storage/svg/star.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7L12 18l-6.2 3.2 1.6-7L2 9.5l7.1-.6z"/></svg>

package/storage/svg/type.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2 4h14v4h-5v13H7V8H2z" fill="currentColor"/><path d="M14 10h9v3h-3v8h-3v-8h-3z" fill="currentColor" opacity=".4"/></svg>

package/tsconfig.json

@@ -4,5 +4,9 @@
         "plugins": [
             { "transform": "@esportsplus/template/compiler/tsc" }
         ]
-    }
-}
+    },
+    "include": [
+        "src/**/*",
+        "vite-env.d.ts"
+    ]
+}

package/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/vite.config.ts

@@ -1,89 +1,95 @@
 import { glob } from 'glob';
 import { defineConfig } from 'vite';
 import autoprefixer from 'autoprefixer';
-import { join } from 'path';
 import shelljs from 'shelljs';
 
 
-export default defineConfig({
-    build: {
-        cssMinify: 'lightningcss',
-        outDir: 'build',
-        rollupOptions: {
-            input: [
-                ...glob.sync('./src/normalize/scss/index.scss'),
-                ...glob.sync('./src/{components,css-utilities,fonts,themes/dark,themes/light}/*/scss/index.scss'),
-                ...glob.sync('./src/css-utilities/index.scss')
-            ],
-            output: {
-                assetFileNames: ({ originalFileNames: [filename] }) => {
-                    if (filename) {
-                        return filename.split('src/').pop()!;
-                    }
+export default defineConfig(() => {
+    return {
+        base: './',
+        build: {
+            cssMinify: 'lightningcss',
+            outDir: 'build',
+            rollupOptions: {
+                input: [
+                    ...glob.sync('./src/normalize/scss/index.scss'),
+                    ...glob.sync('./src/{components,css-utilities,themes/dark,themes/light}/*/scss/index.scss'),
+                    ...glob.sync('./src/css-utilities/font/*/scss/index.scss'),
+                    ...glob.sync('./src/css-utilities/index.scss')
+                ],
+                output: {
+                    assetFileNames: ({ originalFileNames: [filename] }) => {
+                        if (filename) {
+                            return filename.split('src/').pop()!;
+                        }
 
-                    return '[name].[ext]';
+                        return '[name].[ext]';
+                    },
                 },
-            },
-            plugins: [
-                {
-                    name: '@esportsplus/ui-layers',
-                    generateBundle(_, bundle) {
-                        for (let filename in bundle) {
-                            let file = bundle[filename];
+                plugins: [
+                    {
+                        name: '@esportsplus/ui-layers',
+                        generateBundle(_, bundle) {
+                            for (let filename in bundle) {
+                                let file = bundle[filename];
 
-                            if (
-                                !filename.endsWith('.scss') ||
-                                filename.startsWith('fonts') ||
-                                file.type !== 'asset' ||
-                                typeof file.source !== 'string'
-                            ) {
-                                continue;
-                            }
+                                if (
+                                    !filename.endsWith('.scss') ||
+                                    file.type !== 'asset' ||
+                                    typeof file.source !== 'string'
+                                ) {
+                                    continue;
+                                }
 
-                            let layer: string,
-                                segments = file.source.split('\n'),
-                                // Vite appends a value on bundle
-                                vite = segments.pop();
+                                let layer: string,
+                                    segments = file.source.split('\n'),
+                                    // Vite appends a value on bundle
+                                    vite = segments.pop();
 
-                            if (filename.startsWith('css-utilities')) {
-                                layer = 'css-utilities';
-                            }
-                            else if (filename.startsWith('components')) {
-                                layer = 'components';
-                            }
-                            else if (filename.startsWith('themes')) {
-                                layer = 'themes';
-                            }
-                            else if (filename.startsWith('normalize')) {
-                                layer = 'normalize';
-                            }
-                            else {
-                                continue;
-                            }
+                                if (filename.startsWith('css-utilities')) {
+                                    layer = 'css-utilities';
+                                }
+                                else if (filename.startsWith('components')) {
+                                    layer = 'components';
+                                }
+                                else if (filename.startsWith('themes')) {
+                                    layer = 'themes';
+                                }
+                                else if (filename.startsWith('normalize')) {
+                                    layer = 'normalize';
+                                }
+                                else {
+                                    continue;
+                                }
 
-                            file.source = `@layer ${layer} {${segments.join('\n')}}\n${vite}`;
+                                file.source = `@layer ${layer} {${segments.join('\n')}}\n${vite}`;
+                            }
                         }
-                    }
-                },
-                {
-                    name: '@esportsplus/ui-svg-copy',
-                    writeBundle() {
-                        let directories = glob.sync('./src/components/*/svg/');
+                    },
+                    {
+                        name: '@esportsplus/ui-assets-copy',
+                        writeBundle() {
+                            let directories = glob.sync('./src/components/*/svg/');
+
+                            for (let license of glob.sync('./src/css-utilities/font/*/OFL.txt')) {
+                                shelljs.cp(license, license.replace('src', 'build'));
+                            }
 
-                        for (let dir of directories) {
-                            shelljs.cp('-rf', dir, dir.replace('src', 'build'));
+                            for (let dir of directories) {
+                                shelljs.cp('-rf', dir, dir.replace('src', 'build'));
+                            }
                         }
                     }
-                }
-            ]
-        }
-    },
-    css: {
-        postcss: {
-            plugins: [
-                autoprefixer()
-            ]
+                ]
+            }
+        },
+        css: {
+            postcss: {
+                plugins: [
+                    autoprefixer()
+                ]
+            },
+            transformer: 'lightningcss'
         },
-        transformer: 'lightningcss'
-    },
-});
+    };
+});

package/build/components/alert/index.d.ts

@@ -1,19 +0,0 @@
-import '@esportsplus/vite/global.d.ts';
-import { Response } from '@esportsplus/action';
-import { Attributes, Renderable } from '@esportsplus/template';
-import './scss/index.scss';
-export default _default;
-declare function _default(attributes: Attributes & {
-    'alert-close'?: Attributes;
-    'alert-messages'?: Attributes;
-    'alert-message'?: Attributes;
-}): {
-    content: DocumentFragment | Text;
-    deactivate: () => void;
-    error: {
-        (messages: Renderable<any>, seconds?: number): void;
-        response: (response: Response<any>) => void;
-    };
-    info: (messages: Renderable<any>, seconds?: number) => void;
-    success: (messages: Renderable<any>, seconds?: number) => void;
-};