Switch to tab indentationHEAD master

author: Volpeon <git@volpeon.ink> 2025-08-06 16:40:56 +0200
committer: Volpeon <git@volpeon.ink> 2025-08-06 16:40:56 +0200
commit: 41b0d0497988274057fc2512c822a6bc9d2d3ebd (patch)
tree: 015a95ede42b799ac1fd049baa8b0a853b6d3bb3 /src/_config.defaults.scss
parent: Fix button font size (diff)
download: iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.gz
iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.bz2
iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.zip
1 files changed, 160 insertions, 160 deletions
diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss
index 799ee47..861b600 100644
--- a/src/_config.defaults.scss
+++ b/src/_config.defaults.scss
@@ -4,194 +4,194 @@
 @use 'iro-sass/src/easing' as easing;
 $static-colors: (
-    --base: hsl(0, 0%, 98%),
+        --base: hsl(0, 0%, 98%),
-    --levels: (
+        --levels: (
-        --100:  math.div(0, 12) * 110 - 10,
+                --100:  math.div(0, 12) * 110 - 10,
-        --200:  math.div(1, 12) * 110 - 10,
+                --200:  math.div(1, 12) * 110 - 10,
-        --300:  math.div(2, 12) * 110 - 10,
+                --300:  math.div(2, 12) * 110 - 10,
-        --400:  math.div(3, 12) * 110 - 10,
+                --400:  math.div(3, 12) * 110 - 10,
-        --500:  math.div(4, 12) * 110 - 10,
+                --500:  math.div(4, 12) * 110 - 10,
-        --600:  math.div(5, 12) * 110 - 10,
+                --600:  math.div(5, 12) * 110 - 10,
-        --700:  math.div(6, 12) * 110 - 10,
+                --700:  math.div(6, 12) * 110 - 10,
-        --800:  math.div(7, 12) * 110 - 10,
+                --800:  math.div(7, 12) * 110 - 10,
-        --900:  math.div(8, 12) * 110 - 10,
+                --900:  math.div(8, 12) * 110 - 10,
-        --1000: math.div(9, 12) * 110 - 10,
+                --1000: math.div(9, 12) * 110 - 10,
-        --1100: math.div(10, 12) * 110 - 10,
+                --1100: math.div(10, 12) * 110 - 10,
-        --1200: math.div(11, 12) * 110 - 10,
+                --1200: math.div(11, 12) * 110 - 10,
-        --1300: math.div(12, 12) * 110 - 10,
+                --1300: math.div(12, 12) * 110 - 10,
-    ),
+        ),
-    --palettes: (
+        --palettes: (
-        --blue:   oklch(56% .14 275.25),
+                --blue:   oklch(56% .14 275.25),
-        --purple: oklch(56% .14 305.58),
+                --purple: oklch(56% .14 305.58),
-        --red:    oklch(56% .14 14.69),
+                --red:    oklch(56% .14 14.69),
-        --green:  oklch(56% .14 150.48),
+                --green:  oklch(56% .14 150.48),
-        --yellow: oklch(56% .14 84.08),
+                --yellow: oklch(56% .14 84.08),
-    ),
+        ),
-    --transparents: (
+        --transparents: (
-        --100: 0,
+                --100: 0,
-        --200: .1,
+                --200: .1,
-        --300: .25,
+                --300: .25,
-        --400: .4,
+                --400: .4,
-        --500: .55,
+                --500: .55,
-        --600: .7,
+                --600: .7,
-        --700: .8,
+                --700: .8,
-        --800: .9,
+                --800: .9,
-        --900: 1,
+                --900: 1,
-    ),
+        ),
 );
 $semantic-colors-common: (
-    --accent:          --blue,
+        --accent:          --blue,
-    --accent-static:   --blue-static,
+        --accent-static:   --blue-static,
-    --positive:        --green,
+        --positive:        --green,
-    --positive-static: --green-static,
+        --positive-static: --green-static,
-    --negative:        --red,
+        --negative:        --red,
-    --negative-static: --red-static,
+        --negative-static: --red-static,
-    --warning:         --yellow,
+        --warning:         --yellow,
-    --warning-static:  --yellow-static,
+        --warning-static:  --yellow-static,
-    --focus-raw:       --accent,
+        --focus-raw:       --accent,
-    --focus-static:    --accent-static,
+        --focus-static:    --accent-static,
-    --border-mute:     --base --200,
+        --border-mute:     --base --200,
-    --border:          --base --300,
+        --border:          --base --300,
-    --border-strong:   --base --400,
+        --border-strong:   --base --400,
-    --text-disabled:   --base --500,
+        --text-disabled:   --base --500,
-    --text-mute-more:  --base --600,
+        --text-mute-more:  --base --600,
-    --text-mute:       --base --700,
+        --text-mute:       --base --700,
-    --text:            --base --800,
+        --text:            --base --800,
-    --heading:         --base --900,
+        --heading:         --base --900,
-    --focus: (
+        --focus: (
-        --outline:       --focus-raw --400,
+                --outline:       --focus-raw --400,
-        --border-mute:   --focus-raw --900,
+                --border-mute:   --focus-raw --900,
-        --border:        --focus-raw --1000,
+                --border:        --focus-raw --1000,
-        --border-text:   --focus-raw --1000-text,
+                --border-text:   --focus-raw --1000-text,
-        --border-strong: --focus-raw --1100,
+                --border-strong: --focus-raw --1100,
-        --text:          --focus-raw --1100,
+                --text:          --focus-raw --1100,
-    ),
+        ),
 );
 $theme-light: (
-    --levels: (
+        --levels: (
-        --grays: (
+                --grays: (
-            --50:  (-8) (.2 + .8 * easing.ease(math.div(0, 12))),
+                        --50:  (-8) (.2 + .8 * easing.ease(math.div(0, 12))),
-            --75:  (-4) (.2 + .8 * easing.ease(math.div(1, 12))),
+                        --75:  (-4) (.2 + .8 * easing.ease(math.div(1, 12))),
-            --100: (0) (.2 + .8 * easing.ease(math.div(2, 12))),
+                        --100: (0) (.2 + .8 * easing.ease(math.div(2, 12))),
        
-            --200: (easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98) (.2 + .8 * easing.ease(math.div(3, 12))),
+                        --200: (easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98) (.2 + .8 * easing.ease(math.div(3, 12))),
-            --300: (easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98) (.2 + .8 * easing.ease(math.div(4, 12))),
+                        --300: (easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98) (.2 + .8 * easing.ease(math.div(4, 12))),
-            --400: (easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98) (.2 + .8 * easing.ease(math.div(5, 12))),
+                        --400: (easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98) (.2 + .8 * easing.ease(math.div(5, 12))),
        
-            --500: (easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98) (.2 + .8 * easing.ease(math.div(6, 12))),
+                        --500: (easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98) (.2 + .8 * easing.ease(math.div(6, 12))),
-            --600: (easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98) (.2 + .8 * easing.ease(math.div(7, 12))),
+                        --600: (easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98) (.2 + .8 * easing.ease(math.div(7, 12))),
-            --700: (easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98) (.2 + .8 * easing.ease(math.div(8, 12))),
+                        --700: (easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98) (.2 + .8 * easing.ease(math.div(8, 12))),
-            --800: (easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98) (.2 + .8 * easing.ease(math.div(9, 12))),
+                        --800: (easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98) (.2 + .8 * easing.ease(math.div(9, 12))),
-            --900: (106) (.2 + .8 * easing.ease(math.div(10, 12))),
+                        --900: (106) (.2 + .8 * easing.ease(math.div(10, 12))),
-        ),
+                ),
-        --colors: (
+                --colors: (
-            --100:  (math.div(0, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(0, 12))),
+                        --100:  (math.div(0, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(0, 12))),
-            --200:  (math.div(1, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(1, 12))),
+                        --200:  (math.div(1, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(1, 12))),
-            --300:  (math.div(2, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(2, 12))),
+                        --300:  (math.div(2, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(2, 12))),
-            --400:  (math.div(3, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(3, 12))),
+                        --400:  (math.div(3, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(3, 12))),
-            --500:  (math.div(4, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(4, 12))),
+                        --500:  (math.div(4, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(4, 12))),
-            --600:  (math.div(5, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(5, 12))),
+                        --600:  (math.div(5, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(5, 12))),
-            --700:  (math.div(6, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(6, 12))),
+                        --700:  (math.div(6, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(6, 12))),
-            --800:  (math.div(7, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(7, 12))),
+                        --800:  (math.div(7, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(7, 12))),
-            --900:  (math.div(8, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(8, 12))),
+                        --900:  (math.div(8, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(8, 12))),
-            --1000: (math.div(9, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(9, 12))),
+                        --1000: (math.div(9, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(9, 12))),
-            --1100: (math.div(10, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(10, 12))),
+                        --1100: (math.div(10, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(10, 12))),
-            --1200: (math.div(11, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(11, 12))),
+                        --1200: (math.div(11, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(11, 12))),
-            --1300: (math.div(12, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(12, 12))),
+                        --1300: (math.div(12, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(12, 12))),
-        ),
+                ),
-    ),
+        ),
    
-    --palettes: (
+        --palettes: (
-        --base:   hsl(260, 70%, 98%)    --grays,
+                --base:   hsl(260, 70%, 98%)    --grays,
-        --blue:   oklch(56% .16 275.25) --colors,
+                --blue:   oklch(56% .16 275.25) --colors,
-        --purple: oklch(56% .16 305.58) --colors,
+                --purple: oklch(56% .16 305.58) --colors,
-        --red:    oklch(56% .16 14.69)  --colors,
+                --red:    oklch(56% .16 14.69)  --colors,
-        --green:  oklch(56% .16 150.48) --colors,
+                --green:  oklch(56% .16 150.48) --colors,
-        --yellow: oklch(56% .16 84.08)  --colors,
+                --yellow: oklch(56% .16 84.08)  --colors,
-    ),
+        ),
-    --semantic: map.merge($semantic-colors-common, (
+        --semantic: map.merge($semantic-colors-common, (
-        --bg-l2:   --base --50,
+                --bg-l2:   --base --50,
-        --bg-l1:   --base --100,
+                --bg-l1:   --base --100,
-        --bg-base: --base --200,
+                --bg-base: --base --200,
-        --box: (
+                --box: (
-            --border:        --base --200,
+                        --border:        --base --200,
-            --border-strong: --base --300,
+                        --border-strong: --base --300,
-        ),
+                ),
-    )),
+        )),
-    --constants: (
+        --constants: (
-        --shadow: rgba(#000, .1),
+                --shadow: rgba(#000, .1),
-    ),
+        ),
 );
 $theme-dark: (
-    --levels: (
+        --levels: (
-        --grays: (
+                --grays: (
-            --50:  (4.4) (.3 + .7 * easing.ease(math.div(10, 12))),
+                        --50:  (4.4) (.3 + .7 * easing.ease(math.div(10, 12))),
-            --75:  (2.5) (.3 + .7 * easing.ease(math.div(9, 12))),
+                        --75:  (2.5) (.3 + .7 * easing.ease(math.div(9, 12))),
-            --100: (0) (.3 + .7 * easing.ease(math.div(8, 12))),
+                        --100: (0) (.3 + .7 * easing.ease(math.div(8, 12))),
        
-            --200: (easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108) (.3 + .7 * easing.ease(math.div(7, 12))),
+                        --200: (easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108) (.3 + .7 * easing.ease(math.div(7, 12))),
-            --300: (easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108) (.3 + .7 * easing.ease(math.div(6, 12))),
+                        --300: (easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108) (.3 + .7 * easing.ease(math.div(6, 12))),
-            --400: (easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108) (.3 + .7 * easing.ease(math.div(5, 12))),
+                        --400: (easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108) (.3 + .7 * easing.ease(math.div(5, 12))),
        
-            --500: (easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108) (.3 + .7 * easing.ease(math.div(4, 12))),
+                        --500: (easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108) (.3 + .7 * easing.ease(math.div(4, 12))),
-            --600: (easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108) (.3 + .7 * easing.ease(math.div(3, 12))),
+                        --600: (easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108) (.3 + .7 * easing.ease(math.div(3, 12))),
-            --700: (easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108) (.3 + .7 * easing.ease(math.div(2, 12))),
+                        --700: (easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108) (.3 + .7 * easing.ease(math.div(2, 12))),
-            --800: (easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108) (.3 + .7 * easing.ease(math.div(1, 12))),
+                        --800: (easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108) (.3 + .7 * easing.ease(math.div(1, 12))),
-            --900: (easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108) (.3 + .7 * easing.ease(math.div(0, 12))),
+                        --900: (easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108) (.3 + .7 * easing.ease(math.div(0, 12))),
-        ),
+                ),
-        --colors: (
+                --colors: (
-            --100:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(0, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(0, 12))),
+                        --100:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(0, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(0, 12))),
-            --200:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(1, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(1, 12))),
+                        --200:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(1, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(1, 12))),
-            --300:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(2, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(2, 12))),
+                        --300:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(2, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(2, 12))),
-            --400:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(3, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(3, 12))),
+                        --400:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(3, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(3, 12))),
-            --500:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(4, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(4, 12))),
+                        --500:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(4, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(4, 12))),
-            --600:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(5, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(5, 12))),
+                        --600:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(5, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(5, 12))),
-            --700:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(6, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(6, 12))),
+                        --700:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(6, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(6, 12))),
-            --800:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(7, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(7, 12))),
+                        --800:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(7, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(7, 12))),
-            --900:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(8, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(8, 12))),
+                        --900:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(8, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(8, 12))),
-            --1000: (easing.cubic-bezier(.2, .1, .8, .8, math.div(9, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(9, 12))),
+                        --1000: (easing.cubic-bezier(.2, .1, .8, .8, math.div(9, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(9, 12))),
-            --1100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(10, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(10, 12))),
+                        --1100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(10, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(10, 12))),
-            --1200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(11, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(11, 12))),
+                        --1200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(11, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(11, 12))),
-            --1300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(12, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(12, 12))),
+                        --1300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(12, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(12, 12))),
-        ),
+                ),
-    ),
+        ),
    
-    --palettes: (
+        --palettes: (
-        --base:   hsl(257, 7%, 20%)     --grays,
+                --base:   hsl(257, 7%, 20%)     --grays,
-        --blue:   oklch(56% .16 275.25) --colors,
+                --blue:   oklch(56% .16 275.25) --colors,
-        --purple: oklch(56% .16 305.58) --colors,
+                --purple: oklch(56% .16 305.58) --colors,
-        --red:    oklch(56% .16 14.69)  --colors,
+                --red:    oklch(56% .16 14.69)  --colors,
-        --green:  oklch(56% .16 150.48) --colors,
+                --green:  oklch(56% .16 150.48) --colors,
-        --yellow: oklch(56% .16 84.08)  --colors,
+                --yellow: oklch(56% .16 84.08)  --colors,
-    ),
+        ),
-    --semantic: map.merge($semantic-colors-common, (
+        --semantic: map.merge($semantic-colors-common, (
-        --bg-base: --base --50,
+                --bg-base: --base --50,
-        --bg-l1:   --base --75,
+                --bg-l1:   --base --75,
-        --bg-l2:   --base --100,
+                --bg-l2:   --base --100,
-        --box: (
+                --box: (
-            --border:        --base --100,
+                        --border:        --base --100,
-            --border-strong: --base --100,
+                        --border-strong: --base --100,
-        ),
+                ),
-    )),
+        )),
-    --constants: (
+        --constants: (
-        --shadow: rgba(#000, .35),
+                --shadow: rgba(#000, .35),
-    ),
+        ),
 );
author	Volpeon <git@volpeon.ink>	2025-08-06 16:40:56 +0200
committer	Volpeon <git@volpeon.ink>	2025-08-06 16:40:56 +0200
commit	41b0d0497988274057fc2512c822a6bc9d2d3ebd (patch)
tree	015a95ede42b799ac1fd049baa8b0a853b6d3bb3 /src/_config.defaults.scss
parent	Fix button font size (diff)
download	iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.gz iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.bz2 iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.zip

diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss index 799ee47..861b600 100644 --- a/src/_config.defaults.scss +++ b/src/_config.defaults.scss
@@ -4,194 +4,194 @@
4	@use 'iro-sass/src/easing' as easing;	4	@use 'iro-sass/src/easing' as easing;
5		5
6	$static-colors: (	6	$static-colors: (
7	--base: hsl(0, 0%, 98%),	7	--base: hsl(0, 0%, 98%),
8		8
9	--levels: (	9	--levels: (
10	--100: math.div(0, 12) * 110 - 10,	10	--100: math.div(0, 12) * 110 - 10,
11	--200: math.div(1, 12) * 110 - 10,	11	--200: math.div(1, 12) * 110 - 10,
12	--300: math.div(2, 12) * 110 - 10,	12	--300: math.div(2, 12) * 110 - 10,
13	--400: math.div(3, 12) * 110 - 10,	13	--400: math.div(3, 12) * 110 - 10,
14	--500: math.div(4, 12) * 110 - 10,	14	--500: math.div(4, 12) * 110 - 10,
15	--600: math.div(5, 12) * 110 - 10,	15	--600: math.div(5, 12) * 110 - 10,
16	--700: math.div(6, 12) * 110 - 10,	16	--700: math.div(6, 12) * 110 - 10,
17	--800: math.div(7, 12) * 110 - 10,	17	--800: math.div(7, 12) * 110 - 10,
18	--900: math.div(8, 12) * 110 - 10,	18	--900: math.div(8, 12) * 110 - 10,
19	--1000: math.div(9, 12) * 110 - 10,	19	--1000: math.div(9, 12) * 110 - 10,
20	--1100: math.div(10, 12) * 110 - 10,	20	--1100: math.div(10, 12) * 110 - 10,
21	--1200: math.div(11, 12) * 110 - 10,	21	--1200: math.div(11, 12) * 110 - 10,
22	--1300: math.div(12, 12) * 110 - 10,	22	--1300: math.div(12, 12) * 110 - 10,
23	),	23	),
24		24
25	--palettes: (	25	--palettes: (
26	--blue: oklch(56% .14 275.25),	26	--blue: oklch(56% .14 275.25),
27	--purple: oklch(56% .14 305.58),	27	--purple: oklch(56% .14 305.58),
28	--red: oklch(56% .14 14.69),	28	--red: oklch(56% .14 14.69),
29	--green: oklch(56% .14 150.48),	29	--green: oklch(56% .14 150.48),
30	--yellow: oklch(56% .14 84.08),	30	--yellow: oklch(56% .14 84.08),
31	),	31	),
32		32
33	--transparents: (	33	--transparents: (
34	--100: 0,	34	--100: 0,
35	--200: .1,	35	--200: .1,
36	--300: .25,	36	--300: .25,
37	--400: .4,	37	--400: .4,
38	--500: .55,	38	--500: .55,
39	--600: .7,	39	--600: .7,
40	--700: .8,	40	--700: .8,
41	--800: .9,	41	--800: .9,
42	--900: 1,	42	--900: 1,
43	),	43	),
44	);	44	);
45		45
46	$semantic-colors-common: (	46	$semantic-colors-common: (
47	--accent: --blue,	47	--accent: --blue,
48	--accent-static: --blue-static,	48	--accent-static: --blue-static,
49	--positive: --green,	49	--positive: --green,
50	--positive-static: --green-static,	50	--positive-static: --green-static,
51	--negative: --red,	51	--negative: --red,
52	--negative-static: --red-static,	52	--negative-static: --red-static,
53	--warning: --yellow,	53	--warning: --yellow,
54	--warning-static: --yellow-static,	54	--warning-static: --yellow-static,
55		55
56	--focus-raw: --accent,	56	--focus-raw: --accent,
57	--focus-static: --accent-static,	57	--focus-static: --accent-static,
58		58
59	--border-mute: --base --200,	59	--border-mute: --base --200,
60	--border: --base --300,	60	--border: --base --300,
61	--border-strong: --base --400,	61	--border-strong: --base --400,
62		62
63	--text-disabled: --base --500,	63	--text-disabled: --base --500,
64	--text-mute-more: --base --600,	64	--text-mute-more: --base --600,
65	--text-mute: --base --700,	65	--text-mute: --base --700,
66	--text: --base --800,	66	--text: --base --800,
67	--heading: --base --900,	67	--heading: --base --900,
68		68
69	--focus: (	69	--focus: (
70	--outline: --focus-raw --400,	70	--outline: --focus-raw --400,
71	--border-mute: --focus-raw --900,	71	--border-mute: --focus-raw --900,
72	--border: --focus-raw --1000,	72	--border: --focus-raw --1000,
73	--border-text: --focus-raw --1000-text,	73	--border-text: --focus-raw --1000-text,
74	--border-strong: --focus-raw --1100,	74	--border-strong: --focus-raw --1100,
75	--text: --focus-raw --1100,	75	--text: --focus-raw --1100,
76	),	76	),
77	);	77	);
78		78
79	$theme-light: (	79	$theme-light: (
80	--levels: (	80	--levels: (
81	--grays: (	81	--grays: (
82	--50: (-8) (.2 + .8 * easing.ease(math.div(0, 12))),	82	--50: (-8) (.2 + .8 * easing.ease(math.div(0, 12))),
83	--75: (-4) (.2 + .8 * easing.ease(math.div(1, 12))),	83	--75: (-4) (.2 + .8 * easing.ease(math.div(1, 12))),
84	--100: (0) (.2 + .8 * easing.ease(math.div(2, 12))),	84	--100: (0) (.2 + .8 * easing.ease(math.div(2, 12))),
85		85
86	--200: (easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98) (.2 + .8 * easing.ease(math.div(3, 12))),	86	--200: (easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98) (.2 + .8 * easing.ease(math.div(3, 12))),
87	--300: (easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98) (.2 + .8 * easing.ease(math.div(4, 12))),	87	--300: (easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98) (.2 + .8 * easing.ease(math.div(4, 12))),
88	--400: (easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98) (.2 + .8 * easing.ease(math.div(5, 12))),	88	--400: (easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98) (.2 + .8 * easing.ease(math.div(5, 12))),
89		89
90	--500: (easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98) (.2 + .8 * easing.ease(math.div(6, 12))),	90	--500: (easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98) (.2 + .8 * easing.ease(math.div(6, 12))),
91	--600: (easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98) (.2 + .8 * easing.ease(math.div(7, 12))),	91	--600: (easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98) (.2 + .8 * easing.ease(math.div(7, 12))),
92	--700: (easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98) (.2 + .8 * easing.ease(math.div(8, 12))),	92	--700: (easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98) (.2 + .8 * easing.ease(math.div(8, 12))),
93	--800: (easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98) (.2 + .8 * easing.ease(math.div(9, 12))),	93	--800: (easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98) (.2 + .8 * easing.ease(math.div(9, 12))),
94	--900: (106) (.2 + .8 * easing.ease(math.div(10, 12))),	94	--900: (106) (.2 + .8 * easing.ease(math.div(10, 12))),
95	),	95	),
96		96
97	--colors: (	97	--colors: (
98	--100: (math.div(0, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(0, 12))),	98	--100: (math.div(0, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(0, 12))),
99	--200: (math.div(1, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(1, 12))),	99	--200: (math.div(1, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(1, 12))),
100	--300: (math.div(2, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(2, 12))),	100	--300: (math.div(2, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(2, 12))),
101	--400: (math.div(3, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(3, 12))),	101	--400: (math.div(3, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(3, 12))),
102	--500: (math.div(4, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(4, 12))),	102	--500: (math.div(4, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(4, 12))),
103	--600: (math.div(5, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(5, 12))),	103	--600: (math.div(5, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(5, 12))),
104	--700: (math.div(6, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(6, 12))),	104	--700: (math.div(6, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(6, 12))),
105	--800: (math.div(7, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(7, 12))),	105	--800: (math.div(7, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(7, 12))),
106	--900: (math.div(8, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(8, 12))),	106	--900: (math.div(8, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(8, 12))),
107	--1000: (math.div(9, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(9, 12))),	107	--1000: (math.div(9, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(9, 12))),
108	--1100: (math.div(10, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(10, 12))),	108	--1100: (math.div(10, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(10, 12))),
109	--1200: (math.div(11, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(11, 12))),	109	--1200: (math.div(11, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(11, 12))),
110	--1300: (math.div(12, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(12, 12))),	110	--1300: (math.div(12, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(12, 12))),
111	),	111	),
112	),	112	),
113		113
114	--palettes: (	114	--palettes: (
115	--base: hsl(260, 70%, 98%) --grays,	115	--base: hsl(260, 70%, 98%) --grays,
116	--blue: oklch(56% .16 275.25) --colors,	116	--blue: oklch(56% .16 275.25) --colors,
117	--purple: oklch(56% .16 305.58) --colors,	117	--purple: oklch(56% .16 305.58) --colors,
118	--red: oklch(56% .16 14.69) --colors,	118	--red: oklch(56% .16 14.69) --colors,
119	--green: oklch(56% .16 150.48) --colors,	119	--green: oklch(56% .16 150.48) --colors,
120	--yellow: oklch(56% .16 84.08) --colors,	120	--yellow: oklch(56% .16 84.08) --colors,
121	),	121	),
122		122
123	--semantic: map.merge($semantic-colors-common, (	123	--semantic: map.merge($semantic-colors-common, (
124	--bg-l2: --base --50,	124	--bg-l2: --base --50,
125	--bg-l1: --base --100,	125	--bg-l1: --base --100,
126	--bg-base: --base --200,	126	--bg-base: --base --200,
127		127
128	--box: (	128	--box: (
129	--border: --base --200,	129	--border: --base --200,
130	--border-strong: --base --300,	130	--border-strong: --base --300,
131	),	131	),
132	)),	132	)),
133		133
134	--constants: (	134	--constants: (
135	--shadow: rgba(#000, .1),	135	--shadow: rgba(#000, .1),
136	),	136	),
137	);	137	);
138		138
139	$theme-dark: (	139	$theme-dark: (
140	--levels: (	140	--levels: (
141	--grays: (	141	--grays: (
142	--50: (4.4) (.3 + .7 * easing.ease(math.div(10, 12))),	142	--50: (4.4) (.3 + .7 * easing.ease(math.div(10, 12))),
143	--75: (2.5) (.3 + .7 * easing.ease(math.div(9, 12))),	143	--75: (2.5) (.3 + .7 * easing.ease(math.div(9, 12))),
144	--100: (0) (.3 + .7 * easing.ease(math.div(8, 12))),	144	--100: (0) (.3 + .7 * easing.ease(math.div(8, 12))),
145		145
146	--200: (easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108) (.3 + .7 * easing.ease(math.div(7, 12))),	146	--200: (easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108) (.3 + .7 * easing.ease(math.div(7, 12))),
147	--300: (easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108) (.3 + .7 * easing.ease(math.div(6, 12))),	147	--300: (easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108) (.3 + .7 * easing.ease(math.div(6, 12))),
148	--400: (easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108) (.3 + .7 * easing.ease(math.div(5, 12))),	148	--400: (easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108) (.3 + .7 * easing.ease(math.div(5, 12))),
149		149
150	--500: (easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108) (.3 + .7 * easing.ease(math.div(4, 12))),	150	--500: (easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108) (.3 + .7 * easing.ease(math.div(4, 12))),
151	--600: (easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108) (.3 + .7 * easing.ease(math.div(3, 12))),	151	--600: (easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108) (.3 + .7 * easing.ease(math.div(3, 12))),
152	--700: (easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108) (.3 + .7 * easing.ease(math.div(2, 12))),	152	--700: (easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108) (.3 + .7 * easing.ease(math.div(2, 12))),
153	--800: (easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108) (.3 + .7 * easing.ease(math.div(1, 12))),	153	--800: (easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108) (.3 + .7 * easing.ease(math.div(1, 12))),
154	--900: (easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108) (.3 + .7 * easing.ease(math.div(0, 12))),	154	--900: (easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108) (.3 + .7 * easing.ease(math.div(0, 12))),
155	),	155	),
156		156
157	--colors: (	157	--colors: (
158	--100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(0, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(0, 12))),	158	--100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(0, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(0, 12))),
159	--200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(1, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(1, 12))),	159	--200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(1, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(1, 12))),
160	--300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(2, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(2, 12))),	160	--300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(2, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(2, 12))),
161	--400: (easing.cubic-bezier(.2, .1, .8, .8, math.div(3, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(3, 12))),	161	--400: (easing.cubic-bezier(.2, .1, .8, .8, math.div(3, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(3, 12))),
162	--500: (easing.cubic-bezier(.2, .1, .8, .8, math.div(4, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(4, 12))),	162	--500: (easing.cubic-bezier(.2, .1, .8, .8, math.div(4, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(4, 12))),
163	--600: (easing.cubic-bezier(.2, .1, .8, .8, math.div(5, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(5, 12))),	163	--600: (easing.cubic-bezier(.2, .1, .8, .8, math.div(5, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(5, 12))),
164	--700: (easing.cubic-bezier(.2, .1, .8, .8, math.div(6, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(6, 12))),	164	--700: (easing.cubic-bezier(.2, .1, .8, .8, math.div(6, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(6, 12))),
165	--800: (easing.cubic-bezier(.2, .1, .8, .8, math.div(7, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(7, 12))),	165	--800: (easing.cubic-bezier(.2, .1, .8, .8, math.div(7, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(7, 12))),
166	--900: (easing.cubic-bezier(.2, .1, .8, .8, math.div(8, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(8, 12))),	166	--900: (easing.cubic-bezier(.2, .1, .8, .8, math.div(8, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(8, 12))),
167	--1000: (easing.cubic-bezier(.2, .1, .8, .8, math.div(9, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(9, 12))),	167	--1000: (easing.cubic-bezier(.2, .1, .8, .8, math.div(9, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(9, 12))),
168	--1100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(10, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(10, 12))),	168	--1100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(10, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(10, 12))),
169	--1200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(11, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(11, 12))),	169	--1200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(11, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(11, 12))),
170	--1300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(12, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(12, 12))),	170	--1300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(12, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(12, 12))),
171	),	171	),
172	),	172	),
173		173
174	--palettes: (	174	--palettes: (
175	--base: hsl(257, 7%, 20%) --grays,	175	--base: hsl(257, 7%, 20%) --grays,
176	--blue: oklch(56% .16 275.25) --colors,	176	--blue: oklch(56% .16 275.25) --colors,
177	--purple: oklch(56% .16 305.58) --colors,	177	--purple: oklch(56% .16 305.58) --colors,
178	--red: oklch(56% .16 14.69) --colors,	178	--red: oklch(56% .16 14.69) --colors,
179	--green: oklch(56% .16 150.48) --colors,	179	--green: oklch(56% .16 150.48) --colors,
180	--yellow: oklch(56% .16 84.08) --colors,	180	--yellow: oklch(56% .16 84.08) --colors,
181	),	181	),
182		182
183	--semantic: map.merge($semantic-colors-common, (	183	--semantic: map.merge($semantic-colors-common, (
184	--bg-base: --base --50,	184	--bg-base: --base --50,
185	--bg-l1: --base --75,	185	--bg-l1: --base --75,
186	--bg-l2: --base --100,	186	--bg-l2: --base --100,
187		187
188	--box: (	188	--box: (
189	--border: --base --100,	189	--border: --base --100,
190	--border-strong: --base --100,	190	--border-strong: --base --100,
191	),	191	),
192	)),	192	)),
193		193
194	--constants: (	194	--constants: (
195	--shadow: rgba(#000, .35),	195	--shadow: rgba(#000, .35),
196	),	196	),
197	);	197	);