@seelen-ui/lib 2.5.8 → 2.5.9

package/script/src/utils/async.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Guard = exports.Mutex = void 0;
 exports.debounce = debounce;
 // deno-lint-ignore no-explicit-any
 function debounce(fn, delay) {
@@ -40,3 +41,51 @@ function debounce(fn, delay) {
     };
     return debounced;
 }
+class Mutex {
+    _rawValue;
+    constructor(_rawValue) {
+        this._rawValue = _rawValue;
+    }
+    lock = null;
+    async acquire() {
+        if (this.lock) {
+            await this.lock.__promise;
+        }
+        // deno-lint-ignore no-explicit-any
+        let __resolve;
+        // deno-lint-ignore no-explicit-any
+        let __reject;
+        const __promise = new Promise((resolve, reject) => {
+            __resolve = resolve;
+            __reject = reject;
+        });
+        this.lock = {
+            __promise,
+            __resolve,
+            __reject,
+        };
+        return new Guard(this._rawValue, () => {
+            this.lock = null;
+            __resolve();
+        });
+    }
+    async runExclusive(fn) {
+        const guard = await this.acquire();
+        try {
+            return await fn(guard.value);
+        }
+        finally {
+            guard.release();
+        }
+    }
+}
+exports.Mutex = Mutex;
+class Guard {
+    value;
+    release;
+    constructor(value, release) {
+        this.value = value;
+        this.release = release;
+    }
+}
+exports.Guard = Guard;

package/script/src/utils/mod.d.ts

@@ -4,4 +4,5 @@ export declare class Rect {
     right: number;
     bottom: number;
 }
+export declare function isSeelenUIRuntime(): boolean;
 //# sourceMappingURL=mod.d.ts.map

package/script/src/utils/mod.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mod.d.ts","sourceRoot":"","sources":["../../../src/src/utils/mod.ts"],"names":[],"mappings":"AAAA,qBAAa,IAAI;IACf,IAAI,SAAK;IACT,GAAG,SAAK;IACR,KAAK,SAAK;IACV,MAAM,SAAK;CACZ"}
+{"version":3,"file":"mod.d.ts","sourceRoot":"","sources":["../../../src/src/utils/mod.ts"],"names":[],"mappings":"AAAA,qBAAa,IAAI;IACf,IAAI,SAAK;IACT,GAAG,SAAK;IACR,KAAK,SAAK;IACV,MAAM,SAAK;CACZ;AAED,wBAAgB,iBAAiB,IAAI,OAAO,CAG3C"}

package/script/src/utils/mod.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Rect = void 0;
+exports.isSeelenUIRuntime = isSeelenUIRuntime;
 class Rect {
     left = 0;
     top = 0;
@@ -8,3 +9,7 @@ class Rect {
     bottom = 0;
 }
 exports.Rect = Rect;
+function isSeelenUIRuntime() {
+    // deno-lint-ignore no-explicit-any
+    return !!globalThis.window.__SLU_WIDGET;
+}

package/styles/colors.css

@@ -0,0 +1,521 @@
+/**
+ * Color System Documentation
+ *
+ * This file defines a contrast-based color system where numbers represent
+ * contrast intensity against the theme's background, NOT absolute lightness.
+ *
+ * CONTRAST-ADAPTIVE COLORS (--color-*):
+ * - Numbers indicate contrast level against the current theme background
+ * - 100 = lowest contrast (subtle, barely visible)
+ * - 900 = highest contrast (bold, maximum visibility)
+ * - Automatically inverts between light/dark modes to maintain contrast relationships
+ *
+ * Example:
+ *   Light mode: --color-red-100 = #ffebe7 (light red, subtle on white)
+ *   Dark mode:  --color-red-100 = #7b0000 (dark red, subtle on black)
+ *
+ * FIXED COLORS (--color-fixed-*):
+ * - Colors that remain constant regardless of theme
+ * - Use when you need a specific color value that should never change
+ * - Numbers still follow 100-900 scale but represent absolute lightness
+ *
+ * Usage Guidelines:
+ * - Use --color-* for UI elements that need consistent contrast (backgrounds, text, borders)
+ * - Use --color-fixed-* for brand colors, illustrations, or theme-independent visuals
+ */
+
+:root {
+  color-scheme: light dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-white: oklch(0% 0 0);
+    --color-black: oklch(100% 0 0);
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --color-white: oklch(100% 0 0);
+    --color-black: oklch(0% 0 0);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-gray-25: oklch(9% 00000 0);
+    --color-gray-50: oklch(12% 00000 0);
+    --color-gray-75: oklch(15% 00000 0);
+    --color-gray-100: oklch(18% 00000 0);
+    --color-gray-200: oklch(27% 00000 0);
+    --color-gray-300: oklch(36% 00000 0);
+    --color-gray-400: oklch(45% 00000 0);
+    --color-gray-500: oklch(54% 00000 0);
+    --color-gray-600: oklch(63% 00000 0);
+    --color-gray-700: oklch(72% 00000 0);
+    --color-gray-800: oklch(81% 00000 0);
+    --color-gray-900: oklch(90% 00000 0);
+
+    --color-red-25: oklch(9% 0.032 30);
+    --color-red-50: oklch(12% 0.043 30);
+    --color-red-75: oklch(15% 0.054 30);
+    --color-red-100: oklch(18% 0.064 30);
+    --color-red-200: oklch(27% 0.096 30);
+    --color-red-300: oklch(36% 0.129 30);
+    --color-red-400: oklch(45% 0.161 30);
+    --color-red-500: oklch(54% 0.193 30);
+    --color-red-600: oklch(63% 0.225 30);
+    --color-red-700: oklch(72% 0.178 30);
+    --color-red-800: oklch(81% 0.111 30);
+    --color-red-900: oklch(90% 0.054 30);
+
+    --color-orange-25: oklch(9% 0.022 50);
+    --color-orange-50: oklch(12% 0.029 50);
+    --color-orange-75: oklch(15% 0.036 50);
+    --color-orange-100: oklch(18% 0.043 50);
+    --color-orange-200: oklch(27% 0.064 50);
+    --color-orange-300: oklch(36% 0.086 50);
+    --color-orange-400: oklch(45% 0.108 50);
+    --color-orange-500: oklch(54% 0.129 50);
+    --color-orange-600: oklch(63% 0.151 50);
+    --color-orange-700: oklch(72% 0.173 50);
+    --color-orange-800: oklch(81% 0.121 50);
+    --color-orange-900: oklch(90% 0.059 50);
+
+    --color-yellow-25: oklch(9% 0.017 100);
+    --color-yellow-50: oklch(12% 0.023 100);
+    --color-yellow-75: oklch(15% 0.029 100);
+    --color-yellow-100: oklch(18% 0.034 100);
+    --color-yellow-200: oklch(27% 0.052 100);
+    --color-yellow-300: oklch(36% 0.069 100);
+    --color-yellow-400: oklch(45% 0.086 100);
+    --color-yellow-500: oklch(54% 0.103 100);
+    --color-yellow-600: oklch(63% 0.121 100);
+    --color-yellow-700: oklch(72% 0.138 100);
+    --color-yellow-800: oklch(81% 0.155 100);
+    --color-yellow-900: oklch(90% 0.173 100);
+
+    --color-green-25: oklch(9% 0.028 150);
+    --color-green-50: oklch(12% 0.037 150);
+    --color-green-75: oklch(15% 0.046 150);
+    --color-green-100: oklch(18% 0.055 150);
+    --color-green-200: oklch(27% 0.083 150);
+    --color-green-300: oklch(36% 0.11 150);
+    --color-green-400: oklch(45% 0.138 150);
+    --color-green-500: oklch(54% 0.166 150);
+    --color-green-600: oklch(63% 0.193 150);
+    --color-green-700: oklch(72% 0.221 150);
+    --color-green-800: oklch(81% 0.249 150);
+    --color-green-900: oklch(90% 0.162 150);
+
+    --color-seafoam-25: oklch(9% 0.017 180);
+    --color-seafoam-50: oklch(12% 0.023 180);
+    --color-seafoam-75: oklch(15% 0.029 180);
+    --color-seafoam-100: oklch(18% 0.035 180);
+    --color-seafoam-200: oklch(27% 0.053 180);
+    --color-seafoam-300: oklch(36% 0.07 180);
+    --color-seafoam-400: oklch(45% 0.088 180);
+    --color-seafoam-500: oklch(54% 0.106 180);
+    --color-seafoam-600: oklch(63% 0.123 180);
+    --color-seafoam-700: oklch(72% 0.141 180);
+    --color-seafoam-800: oklch(81% 0.159 180);
+    --color-seafoam-900: oklch(90% 0.141 180);
+
+    --color-cyan-25: oklch(9% 0.019 230);
+    --color-cyan-50: oklch(12% 0.025 230);
+    --color-cyan-75: oklch(15% 0.031 230);
+    --color-cyan-100: oklch(18% 0.037 230);
+    --color-cyan-200: oklch(27% 0.056 230);
+    --color-cyan-300: oklch(36% 0.075 230);
+    --color-cyan-400: oklch(45% 0.094 230);
+    --color-cyan-500: oklch(54% 0.113 230);
+    --color-cyan-600: oklch(63% 0.132 230);
+    --color-cyan-700: oklch(72% 0.151 230);
+    --color-cyan-800: oklch(81% 0.103 230);
+    --color-cyan-900: oklch(90% 0.053 230);
+
+    --color-blue-25: oklch(9% 0.037 260);
+    --color-blue-50: oklch(12% 0.049 260);
+    --color-blue-75: oklch(15% 0.061 260);
+    --color-blue-100: oklch(18% 0.074 260);
+    --color-blue-200: oklch(27% 0.111 260);
+    --color-blue-300: oklch(36% 0.147 260);
+    --color-blue-400: oklch(45% 0.184 260);
+    --color-blue-500: oklch(54% 0.219 260);
+    --color-blue-600: oklch(63% 0.171 260);
+    --color-blue-700: oklch(72% 0.126 260);
+    --color-blue-800: oklch(81% 0.083 260);
+    --color-blue-900: oklch(90% 0.042 260);
+
+    --color-indigo-25: oklch(9% 0.044 280);
+    --color-indigo-50: oklch(12% 0.059 280);
+    --color-indigo-75: oklch(15% 0.073 280);
+    --color-indigo-100: oklch(18% 0.088 280);
+    --color-indigo-200: oklch(27% 0.132 280);
+    --color-indigo-300: oklch(36% 0.176 280);
+    --color-indigo-400: oklch(45% 0.22 280);
+    --color-indigo-500: oklch(54% 0.224 280);
+    --color-indigo-600: oklch(63% 0.175 280);
+    --color-indigo-700: oklch(72% 0.129 280);
+    --color-indigo-800: oklch(81% 0.085 280);
+    --color-indigo-900: oklch(90% 0.043 280);
+
+    --color-purple-25: oklch(9% 0.04 300);
+    --color-purple-50: oklch(12% 0.053 300);
+    --color-purple-75: oklch(15% 0.066 300);
+    --color-purple-100: oklch(18% 0.08 300);
+    --color-purple-200: oklch(27% 0.12 300);
+    --color-purple-300: oklch(36% 0.16 300);
+    --color-purple-400: oklch(45% 0.2 300);
+    --color-purple-500: oklch(54% 0.24 300);
+    --color-purple-600: oklch(63% 0.204 300);
+    --color-purple-700: oklch(72% 0.15 300);
+    --color-purple-800: oklch(81% 0.098 300);
+    --color-purple-900: oklch(90% 0.05 300);
+
+    --color-fuchsia-25: oklch(9% 0.035 335);
+    --color-fuchsia-50: oklch(12% 0.047 335);
+    --color-fuchsia-75: oklch(15% 0.059 335);
+    --color-fuchsia-100: oklch(18% 0.07 335);
+    --color-fuchsia-200: oklch(27% 0.106 335);
+    --color-fuchsia-300: oklch(36% 0.141 335);
+    --color-fuchsia-400: oklch(45% 0.176 335);
+    --color-fuchsia-500: oklch(54% 0.212 335);
+    --color-fuchsia-600: oklch(63% 0.247 335);
+    --color-fuchsia-700: oklch(72% 0.274 335);
+    --color-fuchsia-800: oklch(81% 0.17 335);
+    --color-fuchsia-900: oklch(90% 0.082 335);
+
+    --color-magenta-25: oklch(9% 0.033 360);
+    --color-magenta-50: oklch(12% 0.044 360);
+    --color-magenta-75: oklch(15% 0.054 360);
+    --color-magenta-100: oklch(18% 0.065 360);
+    --color-magenta-200: oklch(27% 0.098 360);
+    --color-magenta-300: oklch(36% 0.131 360);
+    --color-magenta-400: oklch(45% 0.164 360);
+    --color-magenta-500: oklch(54% 0.197 360);
+    --color-magenta-600: oklch(63% 0.23 360);
+    --color-magenta-700: oklch(72% 0.197 360);
+    --color-magenta-800: oklch(81% 0.122 360);
+    --color-magenta-900: oklch(90% 0.059 360);
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --color-gray-25: oklch(99% 00000 0);
+    --color-gray-50: oklch(96% 00000 0);
+    --color-gray-75: oklch(93% 00000 0);
+    --color-gray-100: oklch(90% 00000 0);
+    --color-gray-200: oklch(81% 00000 0);
+    --color-gray-300: oklch(72% 00000 0);
+    --color-gray-400: oklch(63% 00000 0);
+    --color-gray-500: oklch(54% 00000 0);
+    --color-gray-600: oklch(45% 00000 0);
+    --color-gray-700: oklch(36% 00000 0);
+    --color-gray-800: oklch(27% 00000 0);
+    --color-gray-900: oklch(18% 00000 0);
+
+    --color-red-25: oklch(99% 0.004 30);
+    --color-red-50: oklch(96% 0.02 30);
+    --color-red-75: oklch(93% 0.036 30);
+    --color-red-100: oklch(90% 0.054 30);
+    --color-red-200: oklch(81% 0.111 30);
+    --color-red-300: oklch(72% 0.178 30);
+    --color-red-400: oklch(63% 0.225 30);
+    --color-red-500: oklch(54% 0.193 30);
+    --color-red-600: oklch(45% 0.161 30);
+    --color-red-700: oklch(36% 0.129 30);
+    --color-red-800: oklch(27% 0.096 30);
+    --color-red-900: oklch(18% 0.064 30);
+
+    --color-orange-25: oklch(99% 0.005 50);
+    --color-orange-50: oklch(96% 0.022 50);
+    --color-orange-75: oklch(93% 0.04 50);
+    --color-orange-100: oklch(90% 0.059 50);
+    --color-orange-200: oklch(81% 0.121 50);
+    --color-orange-300: oklch(72% 0.173 50);
+    --color-orange-400: oklch(63% 0.151 50);
+    --color-orange-500: oklch(54% 0.129 50);
+    --color-orange-600: oklch(45% 0.108 50);
+    --color-orange-700: oklch(36% 0.086 50);
+    --color-orange-800: oklch(27% 0.064 50);
+    --color-orange-900: oklch(18% 0.043 50);
+
+    --color-yellow-25: oklch(99% 0.02 100);
+    --color-yellow-50: oklch(96% 0.08 100);
+    --color-yellow-75: oklch(93% 0.138 100);
+    --color-yellow-100: oklch(90% 0.173 100);
+    --color-yellow-200: oklch(81% 0.155 100);
+    --color-yellow-300: oklch(72% 0.138 100);
+    --color-yellow-400: oklch(63% 0.121 100);
+    --color-yellow-500: oklch(54% 0.103 100);
+    --color-yellow-600: oklch(45% 0.086 100);
+    --color-yellow-700: oklch(36% 0.069 100);
+    --color-yellow-800: oklch(27% 0.052 100);
+    --color-yellow-900: oklch(18% 0.034 100);
+
+    --color-green-25: oklch(99% 0.013 150);
+    --color-green-50: oklch(96% 0.058 150);
+    --color-green-75: oklch(93% 0.107 150);
+    --color-green-100: oklch(90% 0.162 150);
+    --color-green-200: oklch(81% 0.249 150);
+    --color-green-300: oklch(72% 0.221 150);
+    --color-green-400: oklch(63% 0.193 150);
+    --color-green-500: oklch(54% 0.166 150);
+    --color-green-600: oklch(45% 0.138 150);
+    --color-green-700: oklch(36% 0.11 150);
+    --color-green-800: oklch(27% 0.083 150);
+    --color-green-900: oklch(18% 0.055 150);
+
+    --color-seafoam-25: oklch(99% 0.012 180);
+    --color-seafoam-50: oklch(96% 0.051 180);
+    --color-seafoam-75: oklch(93% 0.094 180);
+    --color-seafoam-100: oklch(90% 0.141 180);
+    --color-seafoam-200: oklch(81% 0.159 180);
+    --color-seafoam-300: oklch(72% 0.141 180);
+    --color-seafoam-400: oklch(63% 0.123 180);
+    --color-seafoam-500: oklch(54% 0.106 180);
+    --color-seafoam-600: oklch(45% 0.088 180);
+    --color-seafoam-700: oklch(36% 0.07 180);
+    --color-seafoam-800: oklch(27% 0.053 180);
+    --color-seafoam-900: oklch(18% 0.035 180);
+
+    --color-cyan-25: oklch(99% 0.005 230);
+    --color-cyan-50: oklch(96% 0.02 230);
+    --color-cyan-75: oklch(93% 0.036 230);
+    --color-cyan-100: oklch(90% 0.053 230);
+    --color-cyan-200: oklch(81% 0.103 230);
+    --color-cyan-300: oklch(72% 0.151 230);
+    --color-cyan-400: oklch(63% 0.132 230);
+    --color-cyan-500: oklch(54% 0.113 230);
+    --color-cyan-600: oklch(45% 0.094 230);
+    --color-cyan-700: oklch(36% 0.075 230);
+    --color-cyan-800: oklch(27% 0.056 230);
+    --color-cyan-900: oklch(18% 0.037 230);
+
+    --color-blue-25: oklch(99% 0.004 260);
+    --color-blue-50: oklch(96% 0.016 260);
+    --color-blue-75: oklch(93% 0.029 260);
+    --color-blue-100: oklch(90% 0.042 260);
+    --color-blue-200: oklch(81% 0.083 260);
+    --color-blue-300: oklch(72% 0.126 260);
+    --color-blue-400: oklch(63% 0.171 260);
+    --color-blue-500: oklch(54% 0.219 260);
+    --color-blue-600: oklch(45% 0.184 260);
+    --color-blue-700: oklch(36% 0.147 260);
+    --color-blue-800: oklch(27% 0.111 260);
+    --color-blue-900: oklch(18% 0.074 260);
+
+    --color-indigo-25: oklch(99% 0.004 280);
+    --color-indigo-50: oklch(96% 0.017 280);
+    --color-indigo-75: oklch(93% 0.03 280);
+    --color-indigo-100: oklch(90% 0.043 280);
+    --color-indigo-200: oklch(81% 0.085 280);
+    --color-indigo-300: oklch(72% 0.129 280);
+    --color-indigo-400: oklch(63% 0.175 280);
+    --color-indigo-500: oklch(54% 0.224 280);
+    --color-indigo-600: oklch(45% 0.22 280);
+    --color-indigo-700: oklch(36% 0.176 280);
+    --color-indigo-800: oklch(27% 0.132 280);
+    --color-indigo-900: oklch(18% 0.088 280);
+
+    --color-purple-25: oklch(99% 0.004 300);
+    --color-purple-50: oklch(96% 0.019 300);
+    --color-purple-75: oklch(93% 0.034 300);
+    --color-purple-100: oklch(90% 0.05 300);
+    --color-purple-200: oklch(81% 0.098 300);
+    --color-purple-300: oklch(72% 0.15 300);
+    --color-purple-400: oklch(63% 0.204 300);
+    --color-purple-500: oklch(54% 0.24 300);
+    --color-purple-600: oklch(45% 0.2 300);
+    --color-purple-700: oklch(36% 0.16 300);
+    --color-purple-800: oklch(27% 0.12 300);
+    --color-purple-900: oklch(18% 0.08 300);
+
+    --color-fuchsia-25: oklch(99% 0.007 335);
+    --color-fuchsia-50: oklch(96% 0.031 335);
+    --color-fuchsia-75: oklch(93% 0.056 335);
+    --color-fuchsia-100: oklch(90% 0.082 335);
+    --color-fuchsia-200: oklch(81% 0.17 335);
+    --color-fuchsia-300: oklch(72% 0.274 335);
+    --color-fuchsia-400: oklch(63% 0.247 335);
+    --color-fuchsia-500: oklch(54% 0.212 335);
+    --color-fuchsia-600: oklch(45% 0.176 335);
+    --color-fuchsia-700: oklch(36% 0.141 335);
+    --color-fuchsia-800: oklch(27% 0.106 335);
+    --color-fuchsia-900: oklch(18% 0.07 335);
+
+    --color-magenta-25: oklch(99% 0.005 360);
+    --color-magenta-50: oklch(96% 0.022 360);
+    --color-magenta-75: oklch(93% 0.04 360);
+    --color-magenta-100: oklch(90% 0.059 360);
+    --color-magenta-200: oklch(81% 0.122 360);
+    --color-magenta-300: oklch(72% 0.197 360);
+    --color-magenta-400: oklch(63% 0.23 360);
+    --color-magenta-500: oklch(54% 0.197 360);
+    --color-magenta-600: oklch(45% 0.164 360);
+    --color-magenta-700: oklch(36% 0.131 360);
+    --color-magenta-800: oklch(27% 0.098 360);
+    --color-magenta-900: oklch(18% 0.065 360);
+  }
+}
+
+:root {
+  --color-fixed-gray-25: oklch(99% 00000 0);
+  --color-fixed-gray-50: oklch(96% 00000 0);
+  --color-fixed-gray-75: oklch(93% 00000 0);
+  --color-fixed-gray-100: oklch(90% 00000 0);
+  --color-fixed-gray-200: oklch(81% 00000 0);
+  --color-fixed-gray-300: oklch(72% 00000 0);
+  --color-fixed-gray-400: oklch(63% 00000 0);
+  --color-fixed-gray-500: oklch(54% 00000 0);
+  --color-fixed-gray-600: oklch(45% 00000 0);
+  --color-fixed-gray-700: oklch(36% 00000 0);
+  --color-fixed-gray-800: oklch(27% 00000 0);
+  --color-fixed-gray-900: oklch(18% 00000 0);
+
+  --color-fixed-red-25: oklch(99% 0.004 30);
+  --color-fixed-red-50: oklch(96% 0.02 30);
+  --color-fixed-red-75: oklch(93% 0.036 30);
+  --color-fixed-red-100: oklch(90% 0.054 30);
+  --color-fixed-red-200: oklch(81% 0.111 30);
+  --color-fixed-red-300: oklch(72% 0.178 30);
+  --color-fixed-red-400: oklch(63% 0.225 30);
+  --color-fixed-red-500: oklch(54% 0.193 30);
+  --color-fixed-red-600: oklch(45% 0.161 30);
+  --color-fixed-red-700: oklch(36% 0.129 30);
+  --color-fixed-red-800: oklch(27% 0.096 30);
+  --color-fixed-red-900: oklch(18% 0.064 30);
+
+  --color-fixed-orange-25: oklch(99% 0.005 50);
+  --color-fixed-orange-50: oklch(96% 0.022 50);
+  --color-fixed-orange-75: oklch(93% 0.04 50);
+  --color-fixed-orange-100: oklch(90% 0.059 50);
+  --color-fixed-orange-200: oklch(81% 0.121 50);
+  --color-fixed-orange-300: oklch(72% 0.173 50);
+  --color-fixed-orange-400: oklch(63% 0.151 50);
+  --color-fixed-orange-500: oklch(54% 0.129 50);
+  --color-fixed-orange-600: oklch(45% 0.108 50);
+  --color-fixed-orange-700: oklch(36% 0.086 50);
+  --color-fixed-orange-800: oklch(27% 0.064 50);
+  --color-fixed-orange-900: oklch(18% 0.043 50);
+
+  --color-fixed-yellow-25: oklch(99% 0.02 100);
+  --color-fixed-yellow-50: oklch(96% 0.08 100);
+  --color-fixed-yellow-75: oklch(93% 0.138 100);
+  --color-fixed-yellow-100: oklch(90% 0.173 100);
+  --color-fixed-yellow-200: oklch(81% 0.155 100);
+  --color-fixed-yellow-300: oklch(72% 0.138 100);
+  --color-fixed-yellow-400: oklch(63% 0.121 100);
+  --color-fixed-yellow-500: oklch(54% 0.103 100);
+  --color-fixed-yellow-600: oklch(45% 0.086 100);
+  --color-fixed-yellow-700: oklch(36% 0.069 100);
+  --color-fixed-yellow-800: oklch(27% 0.052 100);
+  --color-fixed-yellow-900: oklch(18% 0.034 100);
+
+  --color-fixed-green-25: oklch(99% 0.013 150);
+  --color-fixed-green-50: oklch(96% 0.058 150);
+  --color-fixed-green-75: oklch(93% 0.107 150);
+  --color-fixed-green-100: oklch(90% 0.162 150);
+  --color-fixed-green-200: oklch(81% 0.249 150);
+  --color-fixed-green-300: oklch(72% 0.221 150);
+  --color-fixed-green-400: oklch(63% 0.193 150);
+  --color-fixed-green-500: oklch(54% 0.166 150);
+  --color-fixed-green-600: oklch(45% 0.138 150);
+  --color-fixed-green-700: oklch(36% 0.11 150);
+  --color-fixed-green-800: oklch(27% 0.083 150);
+  --color-fixed-green-900: oklch(18% 0.055 150);
+
+  --color-fixed-seafoam-25: oklch(99% 0.012 180);
+  --color-fixed-seafoam-50: oklch(96% 0.051 180);
+  --color-fixed-seafoam-75: oklch(93% 0.094 180);
+  --color-fixed-seafoam-100: oklch(90% 0.141 180);
+  --color-fixed-seafoam-200: oklch(81% 0.159 180);
+  --color-fixed-seafoam-300: oklch(72% 0.141 180);
+  --color-fixed-seafoam-400: oklch(63% 0.123 180);
+  --color-fixed-seafoam-500: oklch(54% 0.106 180);
+  --color-fixed-seafoam-600: oklch(45% 0.088 180);
+  --color-fixed-seafoam-700: oklch(36% 0.07 180);
+  --color-fixed-seafoam-800: oklch(27% 0.053 180);
+  --color-fixed-seafoam-900: oklch(18% 0.035 180);
+
+  --color-fixed-cyan-25: oklch(99% 0.005 230);
+  --color-fixed-cyan-50: oklch(96% 0.02 230);
+  --color-fixed-cyan-75: oklch(93% 0.036 230);
+  --color-fixed-cyan-100: oklch(90% 0.053 230);
+  --color-fixed-cyan-200: oklch(81% 0.103 230);
+  --color-fixed-cyan-300: oklch(72% 0.151 230);
+  --color-fixed-cyan-400: oklch(63% 0.132 230);
+  --color-fixed-cyan-500: oklch(54% 0.113 230);
+  --color-fixed-cyan-600: oklch(45% 0.094 230);
+  --color-fixed-cyan-700: oklch(36% 0.075 230);
+  --color-fixed-cyan-800: oklch(27% 0.056 230);
+  --color-fixed-cyan-900: oklch(18% 0.037 230);
+
+  --color-fixed-blue-25: oklch(99% 0.004 260);
+  --color-fixed-blue-50: oklch(96% 0.016 260);
+  --color-fixed-blue-75: oklch(93% 0.029 260);
+  --color-fixed-blue-100: oklch(90% 0.042 260);
+  --color-fixed-blue-200: oklch(81% 0.083 260);
+  --color-fixed-blue-300: oklch(72% 0.126 260);
+  --color-fixed-blue-400: oklch(63% 0.171 260);
+  --color-fixed-blue-500: oklch(54% 0.219 260);
+  --color-fixed-blue-600: oklch(45% 0.184 260);
+  --color-fixed-blue-700: oklch(36% 0.147 260);
+  --color-fixed-blue-800: oklch(27% 0.111 260);
+  --color-fixed-blue-900: oklch(18% 0.074 260);
+
+  --color-fixed-indigo-25: oklch(99% 0.004 280);
+  --color-fixed-indigo-50: oklch(96% 0.017 280);
+  --color-fixed-indigo-75: oklch(93% 0.03 280);
+  --color-fixed-indigo-100: oklch(90% 0.043 280);
+  --color-fixed-indigo-200: oklch(81% 0.085 280);
+  --color-fixed-indigo-300: oklch(72% 0.129 280);
+  --color-fixed-indigo-400: oklch(63% 0.175 280);
+  --color-fixed-indigo-500: oklch(54% 0.224 280);
+  --color-fixed-indigo-600: oklch(45% 0.22 280);
+  --color-fixed-indigo-700: oklch(36% 0.176 280);
+  --color-fixed-indigo-800: oklch(27% 0.132 280);
+  --color-fixed-indigo-900: oklch(18% 0.088 280);
+
+  --color-fixed-purple-25: oklch(99% 0.004 300);
+  --color-fixed-purple-50: oklch(96% 0.019 300);
+  --color-fixed-purple-75: oklch(93% 0.034 300);
+  --color-fixed-purple-100: oklch(90% 0.05 300);
+  --color-fixed-purple-200: oklch(81% 0.098 300);
+  --color-fixed-purple-300: oklch(72% 0.15 300);
+  --color-fixed-purple-400: oklch(63% 0.204 300);
+  --color-fixed-purple-500: oklch(54% 0.24 300);
+  --color-fixed-purple-600: oklch(45% 0.2 300);
+  --color-fixed-purple-700: oklch(36% 0.16 300);
+  --color-fixed-purple-800: oklch(27% 0.12 300);
+  --color-fixed-purple-900: oklch(18% 0.08 300);
+
+  --color-fixed-fuchsia-25: oklch(99% 0.007 335);
+  --color-fixed-fuchsia-50: oklch(96% 0.031 335);
+  --color-fixed-fuchsia-75: oklch(93% 0.056 335);
+  --color-fixed-fuchsia-100: oklch(90% 0.082 335);
+  --color-fixed-fuchsia-200: oklch(81% 0.17 335);
+  --color-fixed-fuchsia-300: oklch(72% 0.274 335);
+  --color-fixed-fuchsia-400: oklch(63% 0.247 335);
+  --color-fixed-fuchsia-500: oklch(54% 0.212 335);
+  --color-fixed-fuchsia-600: oklch(45% 0.176 335);
+  --color-fixed-fuchsia-700: oklch(36% 0.141 335);
+  --color-fixed-fuchsia-800: oklch(27% 0.106 335);
+  --color-fixed-fuchsia-900: oklch(18% 0.07 335);
+
+  --color-fixed-magenta-25: oklch(99% 0.005 360);
+  --color-fixed-magenta-50: oklch(96% 0.022 360);
+  --color-fixed-magenta-75: oklch(93% 0.04 360);
+  --color-fixed-magenta-100: oklch(90% 0.059 360);
+  --color-fixed-magenta-200: oklch(81% 0.122 360);
+  --color-fixed-magenta-300: oklch(72% 0.197 360);
+  --color-fixed-magenta-400: oklch(63% 0.23 360);
+  --color-fixed-magenta-500: oklch(54% 0.197 360);
+  --color-fixed-magenta-600: oklch(45% 0.164 360);
+  --color-fixed-magenta-700: oklch(36% 0.131 360);
+  --color-fixed-magenta-800: oklch(27% 0.098 360);
+  --color-fixed-magenta-900: oklch(18% 0.065 360);
+}