@esportsplus/ui 0.49.7 → 0.50.1

package/build/components/tooltip/onclick.js

@@ -1,19 +1,19 @@
-import * as template_674b8ccc1a634e6cb7742603036f95971 from '@esportsplus/template';
-import * as reactivity_674b8ccc1a634e6cb7742603036f95970 from '@esportsplus/reactivity';
+import * as template_ff106a5110604dc68caba4a5312560fc1 from '@esportsplus/template';
+import * as reactivity_ff106a5110604dc68caba4a5312560fc0 from '@esportsplus/reactivity';
 import { omit } from '@esportsplus/utilities';
 import { root } from '@esportsplus/ui';
 import template from '../../components/template/index.js';
-const template_674b8ccc1a634e6cb7742603036f95974t = template_674b8ccc1a634e6cb7742603036f95971.template(`<div class='tooltip'><!--$--></div>`);
-class ReactiveObject_674b8ccc1a634e6cb7742603036f95974r extends reactivity_674b8ccc1a634e6cb7742603036f95970.ReactiveObject {
-    #active = this[reactivity_674b8ccc1a634e6cb7742603036f95970.SIGNAL](false);
+const template_ff106a5110604dc68caba4a5312560fc4t = template_ff106a5110604dc68caba4a5312560fc1.template(`<div class='tooltip'><!--$--></div>`);
+class ReactiveObject_ff106a5110604dc68caba4a5312560fc4r extends reactivity_ff106a5110604dc68caba4a5312560fc0.ReactiveObject {
+    #active = this[reactivity_ff106a5110604dc68caba4a5312560fc0.SIGNAL](false);
     constructor() {
         super(null);
     }
     get active() {
-        return reactivity_674b8ccc1a634e6cb7742603036f95970.read(this.#active);
+        return reactivity_ff106a5110604dc68caba4a5312560fc0.read(this.#active);
     }
     set active(_v0) {
-        reactivity_674b8ccc1a634e6cb7742603036f95970.write(this.#active, _v0);
+        reactivity_ff106a5110604dc68caba4a5312560fc0.write(this.#active, _v0);
     }
 }
 const OMIT = ['state', 'toggle'];
@@ -37,12 +37,12 @@ function frame() {
     running = false;
 }
 export default template.factory((attributes, content) => {
-    let state = attributes.state || new ReactiveObject_674b8ccc1a634e6cb7742603036f95974r(), toggle = attributes.toggle || false;
+    let state = attributes.state || new ReactiveObject_ff106a5110604dc68caba4a5312560fc4r(), toggle = attributes.toggle || false;
     return (() => {
-        let root_674b8ccc1a634e6cb7742603036f95974s = template_674b8ccc1a634e6cb7742603036f95974t(), element_674b8ccc1a634e6cb7742603036f95974u = root_674b8ccc1a634e6cb7742603036f95974s.firstChild, element_674b8ccc1a634e6cb7742603036f95974v = element_674b8ccc1a634e6cb7742603036f95974u.firstChild, attributes_674b8ccc1a634e6cb7742603036f95974w = { "class": "tooltip" };
-        template_674b8ccc1a634e6cb7742603036f95971.setProperties(element_674b8ccc1a634e6cb7742603036f95974u, omit(attributes, OMIT), attributes_674b8ccc1a634e6cb7742603036f95974w);
-        template_674b8ccc1a634e6cb7742603036f95971.setList(element_674b8ccc1a634e6cb7742603036f95974u, 'class', () => state.active && '--active', attributes_674b8ccc1a634e6cb7742603036f95974w);
-        template_674b8ccc1a634e6cb7742603036f95971.delegate(element_674b8ccc1a634e6cb7742603036f95974u, 'click', function (e) {
+        let root_ff106a5110604dc68caba4a5312560fc4s = template_ff106a5110604dc68caba4a5312560fc4t(), element_ff106a5110604dc68caba4a5312560fc4u = root_ff106a5110604dc68caba4a5312560fc4s.firstChild, element_ff106a5110604dc68caba4a5312560fc4v = element_ff106a5110604dc68caba4a5312560fc4u.firstChild, attributes_ff106a5110604dc68caba4a5312560fc4w = { "class": "tooltip" };
+        template_ff106a5110604dc68caba4a5312560fc1.setProperties(element_ff106a5110604dc68caba4a5312560fc4u, omit(attributes, OMIT), attributes_ff106a5110604dc68caba4a5312560fc4w);
+        template_ff106a5110604dc68caba4a5312560fc1.setList(element_ff106a5110604dc68caba4a5312560fc4u, 'class', () => state.active && '--active', attributes_ff106a5110604dc68caba4a5312560fc4w);
+        template_ff106a5110604dc68caba4a5312560fc1.delegate(element_ff106a5110604dc68caba4a5312560fc4u, 'click', function (e) {
             let active = true, node = e.target;
             if (this === node || (toggle && this.contains(node))) {
                 active = !state.active;
@@ -70,7 +70,7 @@ export default template.factory((attributes, content) => {
                 scheduled = true;
             }
         });
-        template_674b8ccc1a634e6cb7742603036f95971.slot(element_674b8ccc1a634e6cb7742603036f95974v, content);
-        return root_674b8ccc1a634e6cb7742603036f95974s;
+        template_ff106a5110604dc68caba4a5312560fc1.slot(element_ff106a5110604dc68caba4a5312560fc4v, content);
+        return root_ff106a5110604dc68caba4a5312560fc4s;
     })();
 });

package/build/components/tooltip/onhover.d.ts

@@ -1,20 +1,20 @@
-import * as template_674b8ccc1a634e6cb7742603036f95971 from '@esportsplus/template';
+import * as template_ff106a5110604dc68caba4a5312560fc1 from '@esportsplus/template';
 declare const _default: {
     (): ReturnType<(this: {
-        attributes?: template_674b8ccc1a634e6cb7742603036f95971.Attributes | undefined;
-        content?: template_674b8ccc1a634e6cb7742603036f95971.Renderable<any>;
-    }, attributes: Readonly<template_674b8ccc1a634e6cb7742603036f95971.Attributes>, content: template_674b8ccc1a634e6cb7742603036f95971.Renderable<any>) => template_674b8ccc1a634e6cb7742603036f95971.Renderable<any>>;
-    <T extends template_674b8ccc1a634e6cb7742603036f95971.Attributes>(attributes: T): ReturnType<(this: {
-        attributes?: template_674b8ccc1a634e6cb7742603036f95971.Attributes | undefined;
-        content?: template_674b8ccc1a634e6cb7742603036f95971.Renderable<any>;
-    }, attributes: Readonly<template_674b8ccc1a634e6cb7742603036f95971.Attributes>, content: template_674b8ccc1a634e6cb7742603036f95971.Renderable<any>) => template_674b8ccc1a634e6cb7742603036f95971.Renderable<any>>;
-    <T extends template_674b8ccc1a634e6cb7742603036f95971.Renderable<any>>(content: T): ReturnType<(this: {
-        attributes?: template_674b8ccc1a634e6cb7742603036f95971.Attributes | undefined;
-        content?: template_674b8ccc1a634e6cb7742603036f95971.Renderable<any>;
-    }, attributes: Readonly<template_674b8ccc1a634e6cb7742603036f95971.Attributes>, content: template_674b8ccc1a634e6cb7742603036f95971.Renderable<any>) => template_674b8ccc1a634e6cb7742603036f95971.Renderable<any>>;
-    (attributes: template_674b8ccc1a634e6cb7742603036f95971.Attributes, content: template_674b8ccc1a634e6cb7742603036f95971.Renderable<any>): ReturnType<(this: {
-        attributes?: template_674b8ccc1a634e6cb7742603036f95971.Attributes | undefined;
-        content?: template_674b8ccc1a634e6cb7742603036f95971.Renderable<any>;
-    }, attributes: Readonly<template_674b8ccc1a634e6cb7742603036f95971.Attributes>, content: template_674b8ccc1a634e6cb7742603036f95971.Renderable<any>) => template_674b8ccc1a634e6cb7742603036f95971.Renderable<any>>;
+        attributes?: template_ff106a5110604dc68caba4a5312560fc1.Attributes | undefined;
+        content?: template_ff106a5110604dc68caba4a5312560fc1.Renderable<any>;
+    }, attributes: Readonly<template_ff106a5110604dc68caba4a5312560fc1.Attributes>, content: template_ff106a5110604dc68caba4a5312560fc1.Renderable<any>) => template_ff106a5110604dc68caba4a5312560fc1.Renderable<any>>;
+    <T extends template_ff106a5110604dc68caba4a5312560fc1.Attributes>(attributes: T): ReturnType<(this: {
+        attributes?: template_ff106a5110604dc68caba4a5312560fc1.Attributes | undefined;
+        content?: template_ff106a5110604dc68caba4a5312560fc1.Renderable<any>;
+    }, attributes: Readonly<template_ff106a5110604dc68caba4a5312560fc1.Attributes>, content: template_ff106a5110604dc68caba4a5312560fc1.Renderable<any>) => template_ff106a5110604dc68caba4a5312560fc1.Renderable<any>>;
+    <T extends template_ff106a5110604dc68caba4a5312560fc1.Renderable<any>>(content: T): ReturnType<(this: {
+        attributes?: template_ff106a5110604dc68caba4a5312560fc1.Attributes | undefined;
+        content?: template_ff106a5110604dc68caba4a5312560fc1.Renderable<any>;
+    }, attributes: Readonly<template_ff106a5110604dc68caba4a5312560fc1.Attributes>, content: template_ff106a5110604dc68caba4a5312560fc1.Renderable<any>) => template_ff106a5110604dc68caba4a5312560fc1.Renderable<any>>;
+    (attributes: template_ff106a5110604dc68caba4a5312560fc1.Attributes, content: template_ff106a5110604dc68caba4a5312560fc1.Renderable<any>): ReturnType<(this: {
+        attributes?: template_ff106a5110604dc68caba4a5312560fc1.Attributes | undefined;
+        content?: template_ff106a5110604dc68caba4a5312560fc1.Renderable<any>;
+    }, attributes: Readonly<template_ff106a5110604dc68caba4a5312560fc1.Attributes>, content: template_ff106a5110604dc68caba4a5312560fc1.Renderable<any>) => template_ff106a5110604dc68caba4a5312560fc1.Renderable<any>>;
 };
 export default _default;

package/build/components/tooltip/onhover.js

@@ -1,34 +1,34 @@
-import * as template_674b8ccc1a634e6cb7742603036f95971 from '@esportsplus/template';
-import * as reactivity_674b8ccc1a634e6cb7742603036f95970 from '@esportsplus/reactivity';
+import * as template_ff106a5110604dc68caba4a5312560fc1 from '@esportsplus/template';
+import * as reactivity_ff106a5110604dc68caba4a5312560fc0 from '@esportsplus/reactivity';
 import { omit } from '@esportsplus/utilities';
 import template from '../../components/template/index.js';
-const template_674b8ccc1a634e6cb7742603036f95974z = template_674b8ccc1a634e6cb7742603036f95971.template(`<div class='tooltip'><!--$--></div>`);
-class ReactiveObject_674b8ccc1a634e6cb7742603036f95974x extends reactivity_674b8ccc1a634e6cb7742603036f95970.ReactiveObject {
-    #active = this[reactivity_674b8ccc1a634e6cb7742603036f95970.SIGNAL](false);
+const template_ff106a5110604dc68caba4a5312560fc4z = template_ff106a5110604dc68caba4a5312560fc1.template(`<div class='tooltip'><!--$--></div>`);
+class ReactiveObject_ff106a5110604dc68caba4a5312560fc4x extends reactivity_ff106a5110604dc68caba4a5312560fc0.ReactiveObject {
+    #active = this[reactivity_ff106a5110604dc68caba4a5312560fc0.SIGNAL](false);
     constructor() {
         super(null);
     }
     get active() {
-        return reactivity_674b8ccc1a634e6cb7742603036f95970.read(this.#active);
+        return reactivity_ff106a5110604dc68caba4a5312560fc0.read(this.#active);
     }
     set active(_v0) {
-        reactivity_674b8ccc1a634e6cb7742603036f95970.write(this.#active, _v0);
+        reactivity_ff106a5110604dc68caba4a5312560fc0.write(this.#active, _v0);
     }
 }
 const OMIT = ['state'];
 export default template.factory((attributes, content) => {
-    let state = attributes.state || new ReactiveObject_674b8ccc1a634e6cb7742603036f95974x();
+    let state = attributes.state || new ReactiveObject_ff106a5110604dc68caba4a5312560fc4x();
     return (() => {
-        let root_674b8ccc1a634e6cb7742603036f95974y = template_674b8ccc1a634e6cb7742603036f95974z(), element_674b8ccc1a634e6cb7742603036f959750 = root_674b8ccc1a634e6cb7742603036f95974y.firstChild, element_674b8ccc1a634e6cb7742603036f959751 = element_674b8ccc1a634e6cb7742603036f959750.firstChild, attributes_674b8ccc1a634e6cb7742603036f959752 = { "class": "tooltip" };
-        template_674b8ccc1a634e6cb7742603036f95971.setProperties(element_674b8ccc1a634e6cb7742603036f959750, omit(attributes, OMIT), attributes_674b8ccc1a634e6cb7742603036f959752);
-        template_674b8ccc1a634e6cb7742603036f95971.setList(element_674b8ccc1a634e6cb7742603036f959750, 'class', () => state.active && '--active', attributes_674b8ccc1a634e6cb7742603036f959752);
-        template_674b8ccc1a634e6cb7742603036f95971.delegate(element_674b8ccc1a634e6cb7742603036f959750, 'mouseover', () => {
+        let root_ff106a5110604dc68caba4a5312560fc4y = template_ff106a5110604dc68caba4a5312560fc4z(), element_ff106a5110604dc68caba4a5312560fc50 = root_ff106a5110604dc68caba4a5312560fc4y.firstChild, element_ff106a5110604dc68caba4a5312560fc51 = element_ff106a5110604dc68caba4a5312560fc50.firstChild, attributes_ff106a5110604dc68caba4a5312560fc52 = { "class": "tooltip" };
+        template_ff106a5110604dc68caba4a5312560fc1.setProperties(element_ff106a5110604dc68caba4a5312560fc50, omit(attributes, OMIT), attributes_ff106a5110604dc68caba4a5312560fc52);
+        template_ff106a5110604dc68caba4a5312560fc1.setList(element_ff106a5110604dc68caba4a5312560fc50, 'class', () => state.active && '--active', attributes_ff106a5110604dc68caba4a5312560fc52);
+        template_ff106a5110604dc68caba4a5312560fc1.delegate(element_ff106a5110604dc68caba4a5312560fc50, 'mouseover', () => {
             state.active = true;
         });
-        template_674b8ccc1a634e6cb7742603036f95971.delegate(element_674b8ccc1a634e6cb7742603036f959750, 'mouseout', () => {
+        template_ff106a5110604dc68caba4a5312560fc1.delegate(element_ff106a5110604dc68caba4a5312560fc50, 'mouseout', () => {
             state.active = false;
         });
-        template_674b8ccc1a634e6cb7742603036f95971.slot(element_674b8ccc1a634e6cb7742603036f959751, content);
-        return root_674b8ccc1a634e6cb7742603036f95974y;
+        template_ff106a5110604dc68caba4a5312560fc1.slot(element_ff106a5110604dc68caba4a5312560fc51, content);
+        return root_ff106a5110604dc68caba4a5312560fc4y;
     })();
 });

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

@@ -1,21 +1,21 @@
-import * as template_674b8ccc1a634e6cb7742603036f95971 from '@esportsplus/template';
+import * as template_ff106a5110604dc68caba4a5312560fc1 from '@esportsplus/template';
 import './scss/index.scss';
 declare const _default: {
     (): ReturnType<(this: {
-        attributes?: template_674b8ccc1a634e6cb7742603036f95971.Attributes | undefined;
+        attributes?: template_ff106a5110604dc68caba4a5312560fc1.Attributes | undefined;
         content?: string[] | undefined;
-    }, attributes: Readonly<template_674b8ccc1a634e6cb7742603036f95971.Attributes>, content: string[]) => template_674b8ccc1a634e6cb7742603036f95971.Renderable<any>>;
-    <T extends template_674b8ccc1a634e6cb7742603036f95971.Attributes>(attributes: T): ReturnType<(this: {
-        attributes?: template_674b8ccc1a634e6cb7742603036f95971.Attributes | undefined;
+    }, attributes: Readonly<template_ff106a5110604dc68caba4a5312560fc1.Attributes>, content: string[]) => template_ff106a5110604dc68caba4a5312560fc1.Renderable<any>>;
+    <T extends template_ff106a5110604dc68caba4a5312560fc1.Attributes>(attributes: T): ReturnType<(this: {
+        attributes?: template_ff106a5110604dc68caba4a5312560fc1.Attributes | undefined;
         content?: string[] | undefined;
-    }, attributes: Readonly<template_674b8ccc1a634e6cb7742603036f95971.Attributes>, content: string[]) => template_674b8ccc1a634e6cb7742603036f95971.Renderable<any>>;
+    }, attributes: Readonly<template_ff106a5110604dc68caba4a5312560fc1.Attributes>, content: string[]) => template_ff106a5110604dc68caba4a5312560fc1.Renderable<any>>;
     <T extends string[]>(content: T): ReturnType<(this: {
-        attributes?: template_674b8ccc1a634e6cb7742603036f95971.Attributes | undefined;
+        attributes?: template_ff106a5110604dc68caba4a5312560fc1.Attributes | undefined;
         content?: string[] | undefined;
-    }, attributes: Readonly<template_674b8ccc1a634e6cb7742603036f95971.Attributes>, content: string[]) => template_674b8ccc1a634e6cb7742603036f95971.Renderable<any>>;
-    (attributes: template_674b8ccc1a634e6cb7742603036f95971.Attributes, content: string[]): ReturnType<(this: {
-        attributes?: template_674b8ccc1a634e6cb7742603036f95971.Attributes | undefined;
+    }, attributes: Readonly<template_ff106a5110604dc68caba4a5312560fc1.Attributes>, content: string[]) => template_ff106a5110604dc68caba4a5312560fc1.Renderable<any>>;
+    (attributes: template_ff106a5110604dc68caba4a5312560fc1.Attributes, content: string[]): ReturnType<(this: {
+        attributes?: template_ff106a5110604dc68caba4a5312560fc1.Attributes | undefined;
         content?: string[] | undefined;
-    }, attributes: Readonly<template_674b8ccc1a634e6cb7742603036f95971.Attributes>, content: string[]) => template_674b8ccc1a634e6cb7742603036f95971.Renderable<any>>;
+    }, attributes: Readonly<template_ff106a5110604dc68caba4a5312560fc1.Attributes>, content: string[]) => template_ff106a5110604dc68caba4a5312560fc1.Renderable<any>>;
 };
 export default _default;

package/build/components/typewriter/index.js

@@ -1,27 +1,27 @@
-import * as template_674b8ccc1a634e6cb7742603036f95971 from '@esportsplus/template';
-import * as reactivity_674b8ccc1a634e6cb7742603036f95970 from '@esportsplus/reactivity';
+import * as template_ff106a5110604dc68caba4a5312560fc1 from '@esportsplus/template';
+import * as reactivity_ff106a5110604dc68caba4a5312560fc0 from '@esportsplus/reactivity';
 import template from '../../components/template/index.js';
 import './scss/index.scss';
-const template_674b8ccc1a634e6cb7742603036f959755 = template_674b8ccc1a634e6cb7742603036f95971.template(`<div class='typewriter'><!--$--></div>`);
-const template_674b8ccc1a634e6cb7742603036f959758 = template_674b8ccc1a634e6cb7742603036f95971.template(``);
-class ReactiveObject_674b8ccc1a634e6cb7742603036f959753 extends reactivity_674b8ccc1a634e6cb7742603036f95970.ReactiveObject {
-    #text = this[reactivity_674b8ccc1a634e6cb7742603036f95970.SIGNAL]('');
+const template_ff106a5110604dc68caba4a5312560fc55 = template_ff106a5110604dc68caba4a5312560fc1.template(`<div class='typewriter'><!--$--></div>`);
+const template_ff106a5110604dc68caba4a5312560fc58 = template_ff106a5110604dc68caba4a5312560fc1.template(``);
+class ReactiveObject_ff106a5110604dc68caba4a5312560fc53 extends reactivity_ff106a5110604dc68caba4a5312560fc0.ReactiveObject {
+    #text = this[reactivity_ff106a5110604dc68caba4a5312560fc0.SIGNAL]('');
     constructor() {
         super(null);
     }
     get text() {
-        return reactivity_674b8ccc1a634e6cb7742603036f95970.read(this.#text);
+        return reactivity_ff106a5110604dc68caba4a5312560fc0.read(this.#text);
     }
     set text(_v0) {
-        reactivity_674b8ccc1a634e6cb7742603036f95970.write(this.#text, _v0);
+        reactivity_ff106a5110604dc68caba4a5312560fc0.write(this.#text, _v0);
     }
 }
-const EMPTY_NODE = template_674b8ccc1a634e6cb7742603036f959758();
+const EMPTY_NODE = template_ff106a5110604dc68caba4a5312560fc58();
 export default template.factory(function (_, content) {
-    let state = new ReactiveObject_674b8ccc1a634e6cb7742603036f959753();
+    let state = new ReactiveObject_ff106a5110604dc68caba4a5312560fc53();
     return (() => {
-        let root_674b8ccc1a634e6cb7742603036f959754 = template_674b8ccc1a634e6cb7742603036f959755(), element_674b8ccc1a634e6cb7742603036f959756 = root_674b8ccc1a634e6cb7742603036f959754.firstChild, element_674b8ccc1a634e6cb7742603036f959757 = element_674b8ccc1a634e6cb7742603036f959756.firstChild;
-        template_674b8ccc1a634e6cb7742603036f95971.onconnect(element_674b8ccc1a634e6cb7742603036f959756, () => {
+        let root_ff106a5110604dc68caba4a5312560fc54 = template_ff106a5110604dc68caba4a5312560fc55(), element_ff106a5110604dc68caba4a5312560fc56 = root_ff106a5110604dc68caba4a5312560fc54.firstChild, element_ff106a5110604dc68caba4a5312560fc57 = element_ff106a5110604dc68caba4a5312560fc56.firstChild;
+        template_ff106a5110604dc68caba4a5312560fc1.onconnect(element_ff106a5110604dc68caba4a5312560fc56, () => {
             let character = 0, i = 0, isWriting = true, write = content[i];
             function play() {
                 setTimeout(() => {
@@ -50,7 +50,7 @@ export default template.factory(function (_, content) {
             }
             play();
         });
-        new template_674b8ccc1a634e6cb7742603036f95971.EffectSlot(element_674b8ccc1a634e6cb7742603036f959757, () => state.text || EMPTY_NODE);
-        return root_674b8ccc1a634e6cb7742603036f959754;
+        new template_ff106a5110604dc68caba4a5312560fc1.EffectSlot(element_ff106a5110604dc68caba4a5312560fc57, () => state.text || EMPTY_NODE);
+        return root_ff106a5110604dc68caba4a5312560fc54;
     })();
 });

package/package.json

@@ -59,7 +59,7 @@
   },
   "sideEffects": false,
   "type": "module",
-  "version": "0.49.7",
+  "version": "0.50.1",
   "scripts": {
     "build": "run-s build:vite build:ts",
     "build:ts": "tsc",

package/src/tokens/scss/box-shadow.scss

@@ -1,25 +1,23 @@
-@use './color';
-
 $box-shadow: (
-    100: 0 1px 2px 0 color.color('black' 300, 0.2),
+    100: 0 1px 2px 0 oklch(from var(--black-300) l c h / 0.2),
     200: #{
-        0 1px 3px 0 color.color('black' 300, 0.2),
-        0 1px 2px -1px color.color('black' 300, 0.2)
+        0 1px 3px 0 oklch(from var(--black-300) l c h / 0.2),
+        0 1px 2px -1px oklch(from var(--black-300) l c h / 0.2)
     },
     300: #{
-        0 4px 6px -1px color.color('black' 300, 0.2),
-        0 2px 4px -2px color.color('black' 300, 0.2)
+        0 4px 6px -1px oklch(from var(--black-300) l c h / 0.2),
+        0 2px 4px -2px oklch(from var(--black-300) l c h / 0.2)
     },
     400: #{
-        0 10px 15px -3px color.color('black' 300, 0.2),
-        0 10px 15px -3px color.color('black' 300, 0.2),
-        0 4px 6px -4px color.color('black' 300, 0.2)
+        0 10px 15px -3px oklch(from var(--black-300) l c h / 0.2),
+        0 10px 15px -3px oklch(from var(--black-300) l c h / 0.2),
+        0 4px 6px -4px oklch(from var(--black-300) l c h / 0.2)
     },
     500: #{
-        0 20px 25px -5px color.color('black' 300, 0.2),
-        0 8px 10px -6px color.color('black' 300, 0.2)
+        0 20px 25px -5px oklch(from var(--black-300) l c h / 0.2),
+        0 8px 10px -6px oklch(from var(--black-300) l c h / 0.2)
     },
-    600: 0 25px 50px -12px color.color('black' 500, 0.2),
+    600: 0 25px 50px -12px oklch(from var(--black-500) l c h / 0.2),
 
     glow: #{
         0px 0px 128px 32px var(--box-shadow-color, #fff),

package/src/tokens/scss/color.scss

@@ -3,66 +3,55 @@
 
 $color: (
     'black': (
-        300: #101221,
-        400: #020412,
-        500: #01030c
+        300: oklch(18.84% 0.0306 277.2),
+        400: oklch(11.47% 0.0361 268.9),
+        500: oklch(10.04% 0.0287 263.4)
     ),
     'blue': (
-        300: #3755ff,
-        400: #2545ff,
-        500: #1e3def
+        300: oklch(54.49% 0.2514 268.2),
+        400: oklch(51.45% 0.2712 266.6),
+        500: oklch(48.45% 0.2617 266.3)
     ),
     'border': (
-        300: #bec3dd,
-        400: #b4b9d2,
-        500: #a5a9c2
+        300: oklch(82.15% 0.0368 276.9),
+        400: oklch(78.98% 0.0358 276.6),
+        500: oklch(73.98% 0.0362 278.3)
     ),
     'green': (
-        300: #18ff4b,
-        400: #01f336,
-        500: #00e131
+        300: oklch(87.03% 0.2708 144.9),
+        400: oklch(83.70% 0.2711 144.0),
+        500: oklch(78.97% 0.2560 144.0)
     ),
     'grey': (
-        300: #f4f9ff,
-        400: #e7f1fa,
-        500: #d4dde6
+        300: oklch(98.01% 0.0096 252.8),
+        400: oklch(95.33% 0.0162 245.1),
+        500: oklch(89.33% 0.0157 248.0)
     ),
     'purple': (
-        300: #7d15ff,
-        400: #7300ff,
-        500: #6a00eb
+        300: oklch(53.29% 0.2877 292.5),
+        400: oklch(51.66% 0.2929 289.7),
+        500: oklch(48.63% 0.2754 289.9)
     ),
     'red': (
-        300: #ff2a3d,
-        400: #ff0017,
-        500: #eb0015
+        300: oklch(64.46% 0.2412 23.8),
+        400: oklch(62.87% 0.2567 27.7),
+        500: oklch(59.10% 0.2413 27.6)
     ),
     'text': (
-        300: #1e243f,
-        400: #171d39,
-        500: #121832
+        300: oklch(26.89% 0.0510 273.0),
+        400: oklch(24.11% 0.0541 272.6),
+        500: oklch(21.88% 0.0516 271.8)
     ),
     'white': (
-        300: #fff,
-        400: #fff,
-        500: #fff
+        300: oklch(100% 0 0),
+        400: oklch(100% 0 0),
+        500: oklch(100% 0 0)
     ),
     'yellow': (
-        300: #fbff5e,
-        400: #f9ff00,
-        500: #e3eb00
+        300: oklch(96.85% 0.1779 110.7),
+        400: oklch(96.32% 0.2125 111.5),
+        500: oklch(90.35% 0.2004 112.3)
     )
 );
 
-$colors: lib.list-join(primary secondary, lib.map-keys($color));
-
-
-@function color($keys, $opacity) {
-    $c: $color;
-
-    @each $key in $keys {
-        $c: lib.map-get($c, $key);
-    }
-
-    @return lib.color-change($c, $alpha: $opacity);
-}
+$colors: lib.list-join(primary secondary, lib.map-keys($color));

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

@@ -1,14 +1,14 @@
-// https://www.fluid-type-scale.com/calculate?minFontSize=14&minWidth=200&minRatio=1.16&maxFontSize=14.24&maxWidth=800&maxRatio=1.32&steps=100%2C200%2C300%2C400%2C500%2C600%2C700%2C800%2C900&baseStep=400&prefix=-&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=400
+// https://www.fluid-type-scale.com/calculate?minFontSize=12&minWidth=200&minRatio=1.08&maxFontSize=14&maxWidth=800&maxRatio=1.24&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
 $font-size: (
-    100: clamp(0.56rem, -0.46vi + 0.62rem, 0.39rem),
-    200: clamp(0.65rem, -0.37vi + 0.7rem, 0.51rem),
-    300: clamp(0.75rem, -0.21vi + 0.78rem, 0.67rem),
-    400: clamp(0.88rem, 0.04vi + 0.87rem, 0.89rem),
-    500: clamp(1.01rem, 0.43vi + 0.96rem, 1.17rem),
-    600: clamp(1.18rem, 1vi + 1.05rem, 1.55rem),
-    700: clamp(1.37rem, 1.82vi + 1.14rem, 2.05rem),
-    800: clamp(1.58rem, 2.98vi + 1.21rem, 2.7rem),
-    900: clamp(1.84rem, 4.61vi + 1.26rem, 3.57rem)
+    100: clamp(0.6rem, -0.36vi + 0.64rem, 0.46rem),
+    200: clamp(0.64rem, -0.2vi + 0.67rem, 0.57rem),
+    300: clamp(0.69rem, 0.03vi + 0.69rem, 0.71rem),
+    400: clamp(0.75rem, 0.33vi + 0.71rem, 0.88rem),
+    500: clamp(0.81rem, 0.73vi + 0.72rem, 1.08rem),
+    600: clamp(0.87rem, 1.25vi + 0.72rem, 1.35rem),
+    700: clamp(0.94rem, 1.93vi + 0.7rem, 1.67rem),
+    800: clamp(1.02rem, 2.8vi + 0.67rem, 2.07rem),
+    900: clamp(1.1rem, 3.9vi + 0.61rem, 2.57rem),
 );