Paths

author: Volpeon <git@volpeon.ink> 2026-07-22 12:27:09 +0200
committer: Volpeon <git@volpeon.ink> 2026-07-22 12:27:09 +0200
commit: cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 (patch)
tree: d16dea8f0a5edca2b610ecabeac5e93a4d98be2f /src/_config.defaults.scss
parent: Update _index.scss (diff)
download: iro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.tar.gz
iro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.tar.bz2
iro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.zip
1 files changed, 360 insertions, 131 deletions
diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss
index 699cd8e..e9e978a 100644
--- a/src/_config.defaults.scss
+++ b/src/_config.defaults.scss
@@ -1,21 +1,20 @@
-@use 'sass:list';
+@use "sass:list";
-@use 'sass:map';
+@use "sass:map";
-@use 'sass:math';
+@use "sass:math";
-@use 'pkg:iro-sass/src/easing' as easing;
+@use "pkg:iro-sass/easing" as easing;
 $static-colors: (
        --base: hsl(0, 0%, 98%),
        --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,
                --1100: math.div(10, 12) * 110 - 10,
                --1200: math.div(11, 12) * 110 - 10,
@@ -23,175 +22,405 @@ $static-colors: (
        ),
        --palettes: (
-                --blue:   oklch(56% .14 275.25),
+                --blue: oklch(56% 0.14 275.25),
-                --purple: oklch(56% .14 305.58),
+                --purple: oklch(56% 0.14 305.58),
-                --red:    oklch(56% .14 14.69),
+                --red: oklch(56% 0.14 14.69),
-                --green:  oklch(56% .14 150.48),
+                --green: oklch(56% 0.14 150.48),
-                --yellow: oklch(56% .14 84.08),
+                --yellow: oklch(56% 0.14 84.08),
        ),
        --transparents: (
                --100: 0,
-                --200: .1,
+                --200: 0.1,
-                --300: .25,
+                --300: 0.25,
-                --400: .4,
+                --400: 0.4,
-                --500: .55,
+                --500: 0.55,
-                --600: .7,
+                --600: 0.7,
-                --700: .8,
+                --700: 0.8,
-                --800: .9,
+                --800: 0.9,
                --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,
-        --negative:        --red,
+        --negative: --red,
        --negative-static: --red-static,
-        --warning:         --yellow,
+        --warning: --yellow,
-        --warning-static:  --yellow-static,
+        --warning-static: --yellow-static,
-        --focus-raw:       --accent,
-        --focus-static:    --accent-static,
-        --border-mute:     --base --200,
+        --focus-raw: --accent,
-        --border:          --base --300,
+        --focus-static: --accent-static,
-        --border-strong:   --base --400,
-        --text-disabled:   --base --500,
-        --text-mute-more:  --base --600,
-        --text-mute:       --base --700,
-        --text:            --base --800,
-        --heading:         --base --900,
+        --border-mute: --base --200,
+        --border: --base --300,
+        --border-strong: --base --400,
+        --text-disabled: --base --500,
+        --text-mute-more: --base --600,
+        --text-mute: --base --700,
+        --text: --base --800,
+        --heading: --base --900,
        --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,
-                --text:          --focus-raw --1100,
+                --text: --focus-raw --1100,
        ),
 );
 $theme-light: (
        --levels: (
                --grays: (
-                        --50:  (-8) (.2 + .8 * easing.ease(math.div(0, 12))),
+                        --50: (
-                        --75:  (-4) (.2 + .8 * easing.ease(math.div(1, 12))),
+                                -8,
-                        --100: (0) (.2 + .8 * easing.ease(math.div(2, 12))),
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(0, 12)),
+                        ),
+                        --75: (
+                                -4,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(1, 12)),
+                        ),
+                        --100: (0)
+                        (
+                                0.2 + 0.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: (
-                        --300: (easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98) (.2 + .8 * easing.ease(math.div(4, 12))),
+                                easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(1, 7)) * 98,
-                        --400: (easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98) (.2 + .8 * easing.ease(math.div(5, 12))),
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(3, 12)),
+                        ),
+                        --300: (
+                                easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(2, 7)) * 98,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(4, 12)),
+                        ),
+                        --400: (
+                                easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(3, 7)) * 98,
+                        )
+                        (
+                                0.2 + 0.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: (
-                        --600: (easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98) (.2 + .8 * easing.ease(math.div(7, 12))),
+                                easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(4, 7)) * 98,
-                        --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))),
+                        (
-                        --900: (106) (.2 + .8 * easing.ease(math.div(10, 12))),
+                                0.2 + 0.8 * easing.ease(math.div(6, 12)),
+                        ),
+                        --600: (
+                                easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(5, 7)) * 98,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(7, 12)),
+                        ),
+                        --700: (
+                                easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(6, 7)) * 98,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(8, 12)),
+                        ),
+                        --800: (
+                                easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(7, 7)) * 98,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(9, 12)),
+                        ),
+                        --900: (106)
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(10, 12)),
+                        ),
                ),
                --colors: (
-                        --100:  (math.div(0, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(0, 12))),
+                        --100: (
-                        --200:  (math.div(1, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(1, 12))),
+                                math.div(0, 12) * 94 + 7,
-                        --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))),
+                        (
-                        --500:  (math.div(4, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(4, 12))),
+                                0.2 + 0.8 * easing.ease(math.div(0, 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))),
+                        --200: (
-                        --800:  (math.div(7, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(7, 12))),
+                                math.div(1, 12) * 94 + 7,
-                        --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))),
+                        (
-                        --1100: (math.div(10, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(10, 12))),
+                                0.2 + 0.8 * easing.ease(math.div(1, 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))),
+                        --300: (
+                                math.div(2, 12) * 94 + 7,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(2, 12)),
+                        ),
+                        --400: (
+                                math.div(3, 12) * 94 + 7,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(3, 12)),
+                        ),
+                        --500: (
+                                math.div(4, 12) * 94 + 7,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(4, 12)),
+                        ),
+                        --600: (
+                                math.div(5, 12) * 94 + 7,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(5, 12)),
+                        ),
+                        --700: (
+                                math.div(6, 12) * 94 + 7,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(6, 12)),
+                        ),
+                        --800: (
+                                math.div(7, 12) * 94 + 7,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(7, 12)),
+                        ),
+                        --900: (
+                                math.div(8, 12) * 94 + 7,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(8, 12)),
+                        ),
+                        --1000: (
+                                math.div(9, 12) * 94 + 7,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(9, 12)),
+                        ),
+                        --1100: (
+                                math.div(10, 12) * 94 + 7,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(10, 12)),
+                        ),
+                        --1200: (
+                                math.div(11, 12) * 94 + 7,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(11, 12)),
+                        ),
+                        --1300: (
+                                math.div(12, 12) * 94 + 7,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(12, 12)),
+                        ),
                ),
        ),
        --palettes: (
-                --base:   hsl(260, 70%, 98%)    --grays,
+                --base: hsl(260, 70%, 98%) --grays,
-                --blue:   oklch(56% .16 275.25) --colors,
+                --blue: oklch(56% 0.16 275.25) --colors,
-                --purple: oklch(56% .16 305.58) --colors,
+                --purple: oklch(56% 0.16 305.58) --colors,
-                --red:    oklch(56% .16 14.69)  --colors,
+                --red: oklch(56% 0.16 14.69) --colors,
-                --green:  oklch(56% .16 150.48) --colors,
+                --green: oklch(56% 0.16 150.48) --colors,
-                --yellow: oklch(56% .16 84.08)  --colors,
+                --yellow: oklch(56% 0.16 84.08) --colors,
        ),
-        --semantic: map.merge($semantic-colors-common, (
+        --semantic: map.merge(
-                --bg-l2:   --base --50,
+                        $semantic-colors-common,
-                --bg-l1:   --base --100,
+                        (
-                --bg-base: --base --200,
+                                --bg-l2: --base --50,
+                                --bg-l1: --base --100,
-                --box: (
+                                --bg-base: --base --200,
-                        --border:        --base --200,
+                                --box: (
-                        --border-strong: --base --300,
+                                        --border: --base --200,
+                                        --border-strong: --base --300,
+                                ),
+                        )
                ),
-        )),
        --constants: (
-                --shadow: rgba(#000, .1),
+                --shadow: rgba(#000, 0.1),
        ),
 );
 $theme-dark: (
        --levels: (
                --grays: (
-                        --50:  (4.4) (.3 + .7 * easing.ease(math.div(10, 12))),
+                        --50: (4.4)
-                        --75:  (2.5) (.3 + .7 * easing.ease(math.div(9, 12))),
+                        (
-                        --100: (0) (.3 + .7 * easing.ease(math.div(8, 12))),
+                                0.3 + 0.7 * easing.ease(math.div(10, 12)),
+                        ),
+                        --75: (2.5)
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(9, 12)),
+                        ),
+                        --100: (0)
+                        (
+                                0.3 + 0.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: (
-                        --300: (easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108) (.3 + .7 * easing.ease(math.div(6, 12))),
+                                easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(1, 8)) * -108,
-                        --400: (easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108) (.3 + .7 * easing.ease(math.div(5, 12))),
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(7, 12)),
+                        ),
+                        --300: (
+                                easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(2, 8)) * -108,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(6, 12)),
+                        ),
+                        --400: (
+                                easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(3, 8)) * -108,
+                        )
+                        (
+                                0.3 + 0.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: (
-                        --600: (easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108) (.3 + .7 * easing.ease(math.div(3, 12))),
+                                easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(4, 8)) * -108,
-                        --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))),
+                        (
-                        --900: (easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108) (.3 + .7 * easing.ease(math.div(0, 12))),
+                                0.3 + 0.7 * easing.ease(math.div(4, 12)),
+                        ),
+                        --600: (
+                                easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(5, 8)) * -108,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(3, 12)),
+                        ),
+                        --700: (
+                                easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(6, 8)) * -108,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(2, 12)),
+                        ),
+                        --800: (
+                                easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(7, 8)) * -108,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(1, 12)),
+                        ),
+                        --900: (
+                                easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(8, 8)) * -108,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(0, 12)),
+                        ),
                ),
                --colors: (
-                        --100:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(0, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(0, 12))),
+                        --100: (
-                        --200:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(1, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(1, 12))),
+                                easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(0, 12)) * -109 - 0.5,
-                        --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))),
+                        (
-                        --500:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(4, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(4, 12))),
+                                0.3 + 0.7 * easing.ease(math.div(0, 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))),
+                        --200: (
-                        --800:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(7, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(7, 12))),
+                                easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(1, 12)) * -109 - 0.5,
-                        --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))),
+                        (
-                        --1100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(10, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(10, 12))),
+                                0.3 + 0.7 * easing.ease(math.div(1, 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))),
+                        --300: (
+                                easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(2, 12)) * -109 - 0.5,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(2, 12)),
+                        ),
+                        --400: (
+                                easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(3, 12)) * -109 - 0.5,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(3, 12)),
+                        ),
+                        --500: (
+                                easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(4, 12)) * -109 - 0.5,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(4, 12)),
+                        ),
+                        --600: (
+                                easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(5, 12)) * -109 - 0.5,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(5, 12)),
+                        ),
+                        --700: (
+                                easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(6, 12)) * -109 - 0.5,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(6, 12)),
+                        ),
+                        --800: (
+                                easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(7, 12)) * -109 - 0.5,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(7, 12)),
+                        ),
+                        --900: (
+                                easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(8, 12)) * -109 - 0.5,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(8, 12)),
+                        ),
+                        --1000: (
+                                easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(9, 12)) * -109 - 0.5,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(9, 12)),
+                        ),
+                        --1100: (
+                                easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(10, 12)) * -109 - 0.5,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(10, 12)),
+                        ),
+                        --1200: (
+                                easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(11, 12)) * -109 - 0.5,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(11, 12)),
+                        ),
+                        --1300: (
+                                easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(12, 12)) * -109 - 0.5,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(12, 12)),
+                        ),
                ),
        ),
        --palettes: (
-                --base:   hsl(257, 7%, 20%)     --grays,
+                --base: hsl(257, 7%, 20%) --grays,
-                --blue:   oklch(56% .16 275.25) --colors,
+                --blue: oklch(56% 0.16 275.25) --colors,
-                --purple: oklch(56% .16 305.58) --colors,
+                --purple: oklch(56% 0.16 305.58) --colors,
-                --red:    oklch(56% .16 14.69)  --colors,
+                --red: oklch(56% 0.16 14.69) --colors,
-                --green:  oklch(56% .16 150.48) --colors,
+                --green: oklch(56% 0.16 150.48) --colors,
-                --yellow: oklch(56% .16 84.08)  --colors,
+                --yellow: oklch(56% 0.16 84.08) --colors,
        ),
-        --semantic: map.merge($semantic-colors-common, (
+        --semantic: map.merge(
-                --bg-base: --base --50,
+                        $semantic-colors-common,
-                --bg-l1:   --base --75,
+                        (
-                --bg-l2:   --base --100,
+                                --bg-base: --base --50,
+                                --bg-l1: --base --75,
-                --box: (
+                                --bg-l2: --base --100,
-                        --border:        --base --100,
+                                --box: (
-                        --border-strong: --base --100,
+                                        --border: --base --100,
+                                        --border-strong: --base --100,
+                                ),
+                        )
                ),
-        )),
        --constants: (
-                --shadow: rgba(#000, .35),
+                --shadow: rgba(#000, 0.35),
        ),
 );
author	Volpeon <git@volpeon.ink>	2026-07-22 12:27:09 +0200
committer	Volpeon <git@volpeon.ink>	2026-07-22 12:27:09 +0200
commit	cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 (patch)
tree	d16dea8f0a5edca2b610ecabeac5e93a4d98be2f /src/_config.defaults.scss
parent	Update _index.scss (diff)
download	iro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.tar.gz iro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.tar.bz2 iro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.zip

diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss index 699cd8e..e9e978a 100644 --- a/src/_config.defaults.scss +++ b/src/_config.defaults.scss
@@ -1,21 +1,20 @@
1	@use 'sass:list';	1	@use "sass:list";
2	@use 'sass:map';	2	@use "sass:map";
3	@use 'sass:math';	3	@use "sass:math";
4	@use 'pkg:iro-sass/src/easing' as easing;	4	@use "pkg:iro-sass/easing" as easing;
5		5
6	$static-colors: (	6	$static-colors: (
7	--base: hsl(0, 0%, 98%),	7	--base: hsl(0, 0%, 98%),
8
9	--levels: (	8	--levels: (
10	--100: math.div(0, 12) * 110 - 10,	9	--100: math.div(0, 12) * 110 - 10,
11	--200: math.div(1, 12) * 110 - 10,	10	--200: math.div(1, 12) * 110 - 10,
12	--300: math.div(2, 12) * 110 - 10,	11	--300: math.div(2, 12) * 110 - 10,
13	--400: math.div(3, 12) * 110 - 10,	12	--400: math.div(3, 12) * 110 - 10,
14	--500: math.div(4, 12) * 110 - 10,	13	--500: math.div(4, 12) * 110 - 10,
15	--600: math.div(5, 12) * 110 - 10,	14	--600: math.div(5, 12) * 110 - 10,
16	--700: math.div(6, 12) * 110 - 10,	15	--700: math.div(6, 12) * 110 - 10,
17	--800: math.div(7, 12) * 110 - 10,	16	--800: math.div(7, 12) * 110 - 10,
18	--900: math.div(8, 12) * 110 - 10,	17	--900: math.div(8, 12) * 110 - 10,
19	--1000: math.div(9, 12) * 110 - 10,	18	--1000: math.div(9, 12) * 110 - 10,
20	--1100: math.div(10, 12) * 110 - 10,	19	--1100: math.div(10, 12) * 110 - 10,
21	--1200: math.div(11, 12) * 110 - 10,	20	--1200: math.div(11, 12) * 110 - 10,
@@ -23,175 +22,405 @@ $static-colors: (
23	),	22	),
24		23
25	--palettes: (	24	--palettes: (
26	--blue: oklch(56% .14 275.25),	25	--blue: oklch(56% 0.14 275.25),
27	--purple: oklch(56% .14 305.58),	26	--purple: oklch(56% 0.14 305.58),
28	--red: oklch(56% .14 14.69),	27	--red: oklch(56% 0.14 14.69),
29	--green: oklch(56% .14 150.48),	28	--green: oklch(56% 0.14 150.48),
30	--yellow: oklch(56% .14 84.08),	29	--yellow: oklch(56% 0.14 84.08),
31	),	30	),
32		31
33	--transparents: (	32	--transparents: (
34	--100: 0,	33	--100: 0,
35	--200: .1,	34	--200: 0.1,
36	--300: .25,	35	--300: 0.25,
37	--400: .4,	36	--400: 0.4,
38	--500: .55,	37	--500: 0.55,
39	--600: .7,	38	--600: 0.7,
40	--700: .8,	39	--700: 0.8,
41	--800: .9,	40	--800: 0.9,
42	--900: 1,	41	--900: 1,
43	),	42	),
44	);	43	);
45		44
46	$semantic-colors-common: (	45	$semantic-colors-common: (
47	--accent: --blue,	46	--accent: --blue,
48	--accent-static: --blue-static,	47	--accent-static: --blue-static,
49	--positive: --green,	48	--positive: --green,
50	--positive-static: --green-static,	49	--positive-static: --green-static,
51	--negative: --red,	50	--negative: --red,
52	--negative-static: --red-static,	51	--negative-static: --red-static,
53	--warning: --yellow,	52	--warning: --yellow,
54	--warning-static: --yellow-static,	53	--warning-static: --yellow-static,
55
56	--focus-raw: --accent,
57	--focus-static: --accent-static,
58		54
59	--border-mute: --base --200,	55	--focus-raw: --accent,
60	--border: --base --300,	56	--focus-static: --accent-static,
61	--border-strong: --base --400,
62
63	--text-disabled: --base --500,
64	--text-mute-more: --base --600,
65	--text-mute: --base --700,
66	--text: --base --800,
67	--heading: --base --900,
68		57
		58	--border-mute: --base --200,
		59	--border: --base --300,
		60	--border-strong: --base --400,
		61	--text-disabled: --base --500,
		62	--text-mute-more: --base --600,
		63	--text-mute: --base --700,
		64	--text: --base --800,
		65	--heading: --base --900,
69	--focus: (	66	--focus: (
70	--outline: --focus-raw --400,	67	--outline: --focus-raw --400,
71	--border-mute: --focus-raw --900,	68	--border-mute: --focus-raw --900,
72	--border: --focus-raw --1000,	69	--border: --focus-raw --1000,
73	--border-text: --focus-raw --1000-text,	70	--border-text: --focus-raw --1000-text,
74	--border-strong: --focus-raw --1100,	71	--border-strong: --focus-raw --1100,
75	--text: --focus-raw --1100,	72	--text: --focus-raw --1100,
76	),	73	),
77	);	74	);
78		75
79	$theme-light: (	76	$theme-light: (
80	--levels: (	77	--levels: (
81	--grays: (	78	--grays: (
82	--50: (-8) (.2 + .8 * easing.ease(math.div(0, 12))),	79	--50: (
83	--75: (-4) (.2 + .8 * easing.ease(math.div(1, 12))),	80	-8,
84	--100: (0) (.2 + .8 * easing.ease(math.div(2, 12))),	81	)
		82	(
		83	0.2 + 0.8 * easing.ease(math.div(0, 12)),
		84	),
		85	--75: (
		86	-4,
		87	)
		88	(
		89	0.2 + 0.8 * easing.ease(math.div(1, 12)),
		90	),
		91	--100: (0)
		92	(
		93	0.2 + 0.8 * easing.ease(math.div(2, 12)),
		94	),
85		95
86	--200: (easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98) (.2 + .8 * easing.ease(math.div(3, 12))),	96	--200: (
87	--300: (easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98) (.2 + .8 * easing.ease(math.div(4, 12))),	97	easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(1, 7)) * 98,
88	--400: (easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98) (.2 + .8 * easing.ease(math.div(5, 12))),	98	)
		99	(
		100	0.2 + 0.8 * easing.ease(math.div(3, 12)),
		101	),
		102	--300: (
		103	easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(2, 7)) * 98,
		104	)
		105	(
		106	0.2 + 0.8 * easing.ease(math.div(4, 12)),
		107	),
		108	--400: (
		109	easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(3, 7)) * 98,
		110	)
		111	(
		112	0.2 + 0.8 * easing.ease(math.div(5, 12)),
		113	),
89		114
90	--500: (easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98) (.2 + .8 * easing.ease(math.div(6, 12))),	115	--500: (
91	--600: (easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98) (.2 + .8 * easing.ease(math.div(7, 12))),	116	easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(4, 7)) * 98,
92	--700: (easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98) (.2 + .8 * easing.ease(math.div(8, 12))),	117	)
93	--800: (easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98) (.2 + .8 * easing.ease(math.div(9, 12))),	118	(
94	--900: (106) (.2 + .8 * easing.ease(math.div(10, 12))),	119	0.2 + 0.8 * easing.ease(math.div(6, 12)),
		120	),
		121	--600: (
		122	easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(5, 7)) * 98,
		123	)
		124	(
		125	0.2 + 0.8 * easing.ease(math.div(7, 12)),
		126	),
		127	--700: (
		128	easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(6, 7)) * 98,
		129	)
		130	(
		131	0.2 + 0.8 * easing.ease(math.div(8, 12)),
		132	),
		133	--800: (
		134	easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(7, 7)) * 98,
		135	)
		136	(
		137	0.2 + 0.8 * easing.ease(math.div(9, 12)),
		138	),
		139	--900: (106)
		140	(
		141	0.2 + 0.8 * easing.ease(math.div(10, 12)),
		142	),
95	),	143	),
96		144
97	--colors: (	145	--colors: (
98	--100: (math.div(0, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(0, 12))),	146	--100: (
99	--200: (math.div(1, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(1, 12))),	147	math.div(0, 12) * 94 + 7,
100	--300: (math.div(2, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(2, 12))),	148	)
101	--400: (math.div(3, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(3, 12))),	149	(
102	--500: (math.div(4, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(4, 12))),	150	0.2 + 0.8 * easing.ease(math.div(0, 12)),
103	--600: (math.div(5, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(5, 12))),	151	),
104	--700: (math.div(6, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(6, 12))),	152	--200: (
105	--800: (math.div(7, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(7, 12))),	153	math.div(1, 12) * 94 + 7,
106	--900: (math.div(8, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(8, 12))),	154	)
107	--1000: (math.div(9, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(9, 12))),	155	(
108	--1100: (math.div(10, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(10, 12))),	156	0.2 + 0.8 * easing.ease(math.div(1, 12)),
109	--1200: (math.div(11, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(11, 12))),	157	),
110	--1300: (math.div(12, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(12, 12))),	158	--300: (
		159	math.div(2, 12) * 94 + 7,
		160	)
		161	(
		162	0.2 + 0.8 * easing.ease(math.div(2, 12)),
		163	),
		164	--400: (
		165	math.div(3, 12) * 94 + 7,
		166	)
		167	(
		168	0.2 + 0.8 * easing.ease(math.div(3, 12)),
		169	),
		170	--500: (
		171	math.div(4, 12) * 94 + 7,
		172	)
		173	(
		174	0.2 + 0.8 * easing.ease(math.div(4, 12)),
		175	),
		176	--600: (
		177	math.div(5, 12) * 94 + 7,
		178	)
		179	(
		180	0.2 + 0.8 * easing.ease(math.div(5, 12)),
		181	),
		182	--700: (
		183	math.div(6, 12) * 94 + 7,
		184	)
		185	(
		186	0.2 + 0.8 * easing.ease(math.div(6, 12)),
		187	),
		188	--800: (
		189	math.div(7, 12) * 94 + 7,
		190	)
		191	(
		192	0.2 + 0.8 * easing.ease(math.div(7, 12)),
		193	),
		194	--900: (
		195	math.div(8, 12) * 94 + 7,
		196	)
		197	(
		198	0.2 + 0.8 * easing.ease(math.div(8, 12)),
		199	),
		200	--1000: (
		201	math.div(9, 12) * 94 + 7,
		202	)
		203	(
		204	0.2 + 0.8 * easing.ease(math.div(9, 12)),
		205	),
		206	--1100: (
		207	math.div(10, 12) * 94 + 7,
		208	)
		209	(
		210	0.2 + 0.8 * easing.ease(math.div(10, 12)),
		211	),
		212	--1200: (
		213	math.div(11, 12) * 94 + 7,
		214	)
		215	(
		216	0.2 + 0.8 * easing.ease(math.div(11, 12)),
		217	),
		218	--1300: (
		219	math.div(12, 12) * 94 + 7,
		220	)
		221	(
		222	0.2 + 0.8 * easing.ease(math.div(12, 12)),
		223	),
111	),	224	),
112	),	225	),
113		226
114	--palettes: (	227	--palettes: (
115	--base: hsl(260, 70%, 98%) --grays,	228	--base: hsl(260, 70%, 98%) --grays,
116	--blue: oklch(56% .16 275.25) --colors,	229	--blue: oklch(56% 0.16 275.25) --colors,
117	--purple: oklch(56% .16 305.58) --colors,	230	--purple: oklch(56% 0.16 305.58) --colors,
118	--red: oklch(56% .16 14.69) --colors,	231	--red: oklch(56% 0.16 14.69) --colors,
119	--green: oklch(56% .16 150.48) --colors,	232	--green: oklch(56% 0.16 150.48) --colors,
120	--yellow: oklch(56% .16 84.08) --colors,	233	--yellow: oklch(56% 0.16 84.08) --colors,
121	),	234	),
122		235
123	--semantic: map.merge($semantic-colors-common, (	236	--semantic: map.merge(
124	--bg-l2: --base --50,	237	$semantic-colors-common,
125	--bg-l1: --base --100,	238	(
126	--bg-base: --base --200,	239	--bg-l2: --base --50,
127		240	--bg-l1: --base --100,
128	--box: (	241	--bg-base: --base --200,
129	--border: --base --200,	242	--box: (
130	--border-strong: --base --300,	243	--border: --base --200,
		244	--border-strong: --base --300,
		245	),
		246	)
131	),	247	),
132	)),
133
134	--constants: (	248	--constants: (
135	--shadow: rgba(#000, .1),	249	--shadow: rgba(#000, 0.1),
136	),	250	),
137	);	251	);
138		252
139	$theme-dark: (	253	$theme-dark: (
140	--levels: (	254	--levels: (
141	--grays: (	255	--grays: (
142	--50: (4.4) (.3 + .7 * easing.ease(math.div(10, 12))),	256	--50: (4.4)
143	--75: (2.5) (.3 + .7 * easing.ease(math.div(9, 12))),	257	(
144	--100: (0) (.3 + .7 * easing.ease(math.div(8, 12))),	258	0.3 + 0.7 * easing.ease(math.div(10, 12)),
		259	),
		260	--75: (2.5)
		261	(
		262	0.3 + 0.7 * easing.ease(math.div(9, 12)),
		263	),
		264	--100: (0)
		265	(
		266	0.3 + 0.7 * easing.ease(math.div(8, 12)),
		267	),
145		268
146	--200: (easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108) (.3 + .7 * easing.ease(math.div(7, 12))),	269	--200: (
147	--300: (easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108) (.3 + .7 * easing.ease(math.div(6, 12))),	270	easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(1, 8)) * -108,
148	--400: (easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108) (.3 + .7 * easing.ease(math.div(5, 12))),	271	)
		272	(
		273	0.3 + 0.7 * easing.ease(math.div(7, 12)),
		274	),
		275	--300: (
		276	easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(2, 8)) * -108,
		277	)
		278	(
		279	0.3 + 0.7 * easing.ease(math.div(6, 12)),
		280	),
		281	--400: (
		282	easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(3, 8)) * -108,
		283	)
		284	(
		285	0.3 + 0.7 * easing.ease(math.div(5, 12)),
		286	),
149		287
150	--500: (easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108) (.3 + .7 * easing.ease(math.div(4, 12))),	288	--500: (
151	--600: (easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108) (.3 + .7 * easing.ease(math.div(3, 12))),	289	easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(4, 8)) * -108,
152	--700: (easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108) (.3 + .7 * easing.ease(math.div(2, 12))),	290	)
153	--800: (easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108) (.3 + .7 * easing.ease(math.div(1, 12))),	291	(
154	--900: (easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108) (.3 + .7 * easing.ease(math.div(0, 12))),	292	0.3 + 0.7 * easing.ease(math.div(4, 12)),
		293	),
		294	--600: (
		295	easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(5, 8)) * -108,
		296	)
		297	(
		298	0.3 + 0.7 * easing.ease(math.div(3, 12)),
		299	),
		300	--700: (
		301	easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(6, 8)) * -108,
		302	)
		303	(
		304	0.3 + 0.7 * easing.ease(math.div(2, 12)),
		305	),
		306	--800: (
		307	easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(7, 8)) * -108,
		308	)
		309	(
		310	0.3 + 0.7 * easing.ease(math.div(1, 12)),
		311	),
		312	--900: (
		313	easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(8, 8)) * -108,
		314	)
		315	(
		316	0.3 + 0.7 * easing.ease(math.div(0, 12)),
		317	),
155	),	318	),
156		319
157	--colors: (	320	--colors: (
158	--100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(0, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(0, 12))),	321	--100: (
159	--200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(1, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(1, 12))),	322	easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(0, 12)) * -109 - 0.5,
160	--300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(2, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(2, 12))),	323	)
161	--400: (easing.cubic-bezier(.2, .1, .8, .8, math.div(3, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(3, 12))),	324	(
162	--500: (easing.cubic-bezier(.2, .1, .8, .8, math.div(4, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(4, 12))),	325	0.3 + 0.7 * easing.ease(math.div(0, 12)),
163	--600: (easing.cubic-bezier(.2, .1, .8, .8, math.div(5, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(5, 12))),	326	),
164	--700: (easing.cubic-bezier(.2, .1, .8, .8, math.div(6, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(6, 12))),	327	--200: (
165	--800: (easing.cubic-bezier(.2, .1, .8, .8, math.div(7, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(7, 12))),	328	easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(1, 12)) * -109 - 0.5,
166	--900: (easing.cubic-bezier(.2, .1, .8, .8, math.div(8, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(8, 12))),	329	)
167	--1000: (easing.cubic-bezier(.2, .1, .8, .8, math.div(9, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(9, 12))),	330	(
168	--1100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(10, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(10, 12))),	331	0.3 + 0.7 * easing.ease(math.div(1, 12)),
169	--1200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(11, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(11, 12))),	332	),
170	--1300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(12, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(12, 12))),	333	--300: (
		334	easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(2, 12)) * -109 - 0.5,
		335	)
		336	(
		337	0.3 + 0.7 * easing.ease(math.div(2, 12)),
		338	),
		339	--400: (
		340	easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(3, 12)) * -109 - 0.5,
		341	)
		342	(
		343	0.3 + 0.7 * easing.ease(math.div(3, 12)),
		344	),
		345	--500: (
		346	easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(4, 12)) * -109 - 0.5,
		347	)
		348	(
		349	0.3 + 0.7 * easing.ease(math.div(4, 12)),
		350	),
		351	--600: (
		352	easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(5, 12)) * -109 - 0.5,
		353	)
		354	(
		355	0.3 + 0.7 * easing.ease(math.div(5, 12)),
		356	),
		357	--700: (
		358	easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(6, 12)) * -109 - 0.5,
		359	)
		360	(
		361	0.3 + 0.7 * easing.ease(math.div(6, 12)),
		362	),
		363	--800: (
		364	easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(7, 12)) * -109 - 0.5,
		365	)
		366	(
		367	0.3 + 0.7 * easing.ease(math.div(7, 12)),
		368	),
		369	--900: (
		370	easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(8, 12)) * -109 - 0.5,
		371	)
		372	(
		373	0.3 + 0.7 * easing.ease(math.div(8, 12)),
		374	),
		375	--1000: (
		376	easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(9, 12)) * -109 - 0.5,
		377	)
		378	(
		379	0.3 + 0.7 * easing.ease(math.div(9, 12)),
		380	),
		381	--1100: (
		382	easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(10, 12)) * -109 - 0.5,
		383	)
		384	(
		385	0.3 + 0.7 * easing.ease(math.div(10, 12)),
		386	),
		387	--1200: (
		388	easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(11, 12)) * -109 - 0.5,
		389	)
		390	(
		391	0.3 + 0.7 * easing.ease(math.div(11, 12)),
		392	),
		393	--1300: (
		394	easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(12, 12)) * -109 - 0.5,
		395	)
		396	(
		397	0.3 + 0.7 * easing.ease(math.div(12, 12)),
		398	),
171	),	399	),
172	),	400	),
173		401
174	--palettes: (	402	--palettes: (
175	--base: hsl(257, 7%, 20%) --grays,	403	--base: hsl(257, 7%, 20%) --grays,
176	--blue: oklch(56% .16 275.25) --colors,	404	--blue: oklch(56% 0.16 275.25) --colors,
177	--purple: oklch(56% .16 305.58) --colors,	405	--purple: oklch(56% 0.16 305.58) --colors,
178	--red: oklch(56% .16 14.69) --colors,	406	--red: oklch(56% 0.16 14.69) --colors,
179	--green: oklch(56% .16 150.48) --colors,	407	--green: oklch(56% 0.16 150.48) --colors,
180	--yellow: oklch(56% .16 84.08) --colors,	408	--yellow: oklch(56% 0.16 84.08) --colors,
181	),	409	),
182		410
183	--semantic: map.merge($semantic-colors-common, (	411	--semantic: map.merge(
184	--bg-base: --base --50,	412	$semantic-colors-common,
185	--bg-l1: --base --75,	413	(
186	--bg-l2: --base --100,	414	--bg-base: --base --50,
187		415	--bg-l1: --base --75,
188	--box: (	416	--bg-l2: --base --100,
189	--border: --base --100,	417	--box: (
190	--border-strong: --base --100,	418	--border: --base --100,
		419	--border-strong: --base --100,
		420	),
		421	)
191	),	422	),
192	)),
193
194	--constants: (	423	--constants: (
195	--shadow: rgba(#000, .35),	424	--shadow: rgba(#000, 0.35),
196	),	425	),
197	);	426	);