Make it easier to extend config

3 files changed, 207 insertions, 191 deletions

diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss
new file mode 100644
index 0000000..60f0c34
--- /dev/null
+++ b/src/_config.defaults.scss
@@ -0,0 +1,199 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:math';
+@use 'iro-sass/src/easing' as easing;
+
+$palette-chroma-easing: 'ease';
+
+$static-colors: (
+    --base: hsl(0, 0%, 98%),
+
+    --contrasts: (
+        --100:  math.div(0, 12) * 110 - 10,
+        --200:  math.div(1, 12) * 110 - 10,
+        --300:  math.div(2, 12) * 110 - 10,
+        --400:  math.div(3, 12) * 110 - 10,
+        --500:  math.div(4, 12) * 110 - 10,
+        --600:  math.div(5, 12) * 110 - 10,
+        --700:  math.div(6, 12) * 110 - 10,
+        --800:  math.div(7, 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,
+        --1300: math.div(12, 12) * 110 - 10,
+    ),
+
+    --palettes: (
+        --blue:   oklch(56% .14 275.25),
+        --purple: oklch(56% .14 305.58),
+        --red:    oklch(56% .14 14.69),
+        --green:  oklch(56% .14 150.48),
+        --yellow: oklch(56% .14 84.08),
+    ),
+
+    --transparents: (
+        --100: 0,
+        --200: .1,
+        --300: .25,
+        --400: .4,
+        --500: .55,
+        --600: .7,
+        --700: .8,
+        --800: .9,
+        --900: 1,
+    ),
+);
+
+$semantic-colors-common: (
+    --accent:          --blue,
+    --accent-static:   --blue-static,
+    --positive:        --green,
+    --positive-static: --green-static,
+    --negative:        --red,
+    --negative-static: --red-static,
+    --warning:         --yellow,
+    --warning-static:  --yellow-static,
+
+    --focus-raw:       --accent,
+    --focus-static:    --accent-static,
+
+    --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,
+        --border-mute:   --focus-raw --900,
+        --border:        --focus-raw --1000,
+        --border-text:   --focus-raw --1000-text,
+        --border-strong: --focus-raw --1100,
+        --text:          --focus-raw --1100,
+    ),
+);
+
+$theme-light: (
+    --contrasts: (
+        --grays: (
+            --50:  -8,
+            --75:  -4,
+            --100: 0,
+        
+            --200: easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98,
+            --300: easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98,
+            --400: easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98,
+        
+            --500: easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98,
+            --600: easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98,
+            --700: easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98,
+            --800: easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98,
+            --900: 106,
+        ),
+
+        --colors: (
+            --100:  math.div(0, 12) * 96 + 5,
+            --200:  math.div(1, 12) * 96 + 5,
+            --300:  math.div(2, 12) * 96 + 5,
+            --400:  math.div(3, 12) * 96 + 5,
+            --500:  math.div(4, 12) * 96 + 5,
+            --600:  math.div(5, 12) * 96 + 5,
+            --700:  math.div(6, 12) * 96 + 5,
+            --800:  math.div(7, 12) * 96 + 5,
+            --900:  math.div(8, 12) * 96 + 5,
+            --1000: math.div(9, 12) * 96 + 5,
+            --1100: math.div(10, 12) * 96 + 5,
+            --1200: math.div(11, 12) * 96 + 5,
+            --1300: math.div(12, 12) * 96 + 5,
+        ),
+    ),
+
+    --ranges: (
+        --full:  .3,
+        --muted: .1,
+    ),
+    
+    --palettes: (
+        --base:  hsl(260, 90%, 98%)       --grays --full,
+        --blue:   oklch(56% .16 275.25) --colors --muted,
+        --purple: oklch(56% .16 305.58) --colors --muted,
+        --red:    oklch(56% .16 14.69)  --colors --muted,
+        --green:  oklch(56% .16 150.48) --colors --muted,
+        --yellow: oklch(56% .16 84.08)  --colors --muted,
+    ),
+
+    --semantic: map.merge($semantic-colors-common, (
+        --bg-l2:   --base --50,
+        --bg-l1:   --base --100,
+        --bg-base: --base --200,
+    )),
+
+    --constants: (
+        --shadow: rgba(#000, .15),
+    ),
+);
+
+$theme-dark: (
+    --contrasts: (
+        --grays: (
+            --50:  4.4,
+            --75:  2.2,
+            --100: 0,
+        
+            --200: easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108,
+            --300: easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108,
+            --400: easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108,
+        
+            --500: easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108,
+            --600: easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108,
+            --700: easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108,
+            --800: easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108,
+            --900: easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108,
+        ),
+
+        --colors: (
+            --100:  math.div(0, 12) * -100 - 5,
+            --200:  math.div(1, 12) * -100 - 5,
+            --300:  math.div(2, 12) * -100 - 5,
+            --400:  math.div(3, 12) * -100 - 5,
+            --500:  math.div(4, 12) * -100 - 5,
+            --600:  math.div(5, 12) * -100 - 5,
+            --700:  math.div(6, 12) * -100 - 5,
+            --800:  math.div(7, 12) * -100 - 5,
+            --900:  math.div(8, 12) * -100 - 5,
+            --1000: math.div(9, 12) * -100 - 5,
+            --1100: math.div(10, 12) * -100 - 5,
+            --1200: math.div(11, 12) * -100 - 5,
+            --1300: math.div(12, 12) * -100 - 5,
+        ),
+    ),
+
+    --ranges: (
+        --full:  1,
+        --muted: .3,
+    ),
+    
+    --palettes: (
+        --base:  hsl(257, 7%, 19%)       --grays --full,
+        --blue:   oklch(56% .16 275.25) --colors --muted,
+        --purple: oklch(56% .16 305.58) --colors --muted,
+        --red:    oklch(56% .16 14.69)  --colors --muted,
+        --green:  oklch(56% .16 150.48) --colors --muted,
+        --yellow: oklch(56% .16 84.08)  --colors --muted,
+    ),
+
+    --semantic: map.merge($semantic-colors-common, (
+        --bg-base: --base --50,
+        --bg-l1:   --base --75,
+        --bg-l2:   --base --100,
+    )),
+
+    --constants: (
+        --shadow: rgba(#000, .5),
+    ),
+);
diff --git a/src/_config.scss b/src/_config.scss
index d2f62da..e0ae933 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -2,212 +2,28 @@
 @use 'sass:map';
 @use 'sass:math';
 @use 'iro-sass/src/easing' as easing;
+@use 'config.defaults' as def;
 
-$palette-chroma-easing: 'ease' !default;
+$palette-chroma-easing: def.$palette-chroma-easing !default;
 
 $static-colors-override: () !default;
-$static-colors: map.deep-merge((
-    --base: hsl(0, 0%, 98%),
-
-    --contrasts: (
-        --100:  math.div(0, 12) * 110 - 10,
-        --200:  math.div(1, 12) * 110 - 10,
-        --300:  math.div(2, 12) * 110 - 10,
-        --400:  math.div(3, 12) * 110 - 10,
-        --500:  math.div(4, 12) * 110 - 10,
-        --600:  math.div(5, 12) * 110 - 10,
-        --700:  math.div(6, 12) * 110 - 10,
-        --800:  math.div(7, 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,
-        --1300: math.div(12, 12) * 110 - 10,
-    ),
-
-    --palettes: (
-        --blue:   oklch(56% .14 275.25),
-        --purple: oklch(56% .14 305.58),
-        --red:    oklch(56% .14 14.69),
-        --green:  oklch(56% .14 150.48),
-        --yellow: oklch(56% .14 84.08),
-    ),
-
-    --transparents: (
-        --100: 0,
-        --200: .1,
-        --300: .25,
-        --400: .4,
-        --500: .55,
-        --600: .7,
-        --700: .8,
-        --800: .9,
-        --900: 1,
-    ),
-), $static-colors-override) !default;
+$static-colors: map.deep-merge(def.$static-colors, $static-colors-override) !default;
 
 $semantic-colors-common-override: () !default;
-$semantic-colors-common: map.deep-merge((
-    --accent:          --blue,
-    --accent-static:   --blue-static,
-    --positive:        --green,
-    --positive-static: --green-static,
-    --negative:        --red,
-    --negative-static: --red-static,
-    --warning:         --yellow,
-    --warning-static:  --yellow-static,
-
-    --focus-raw:       --accent,
-    --focus-static:    --accent-static,
-
-    --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,
-        --border-mute:   --focus-raw --900,
-        --border:        --focus-raw --1000,
-        --border-text:   --focus-raw --1000-text,
-        --border-strong: --focus-raw --1100,
-        --text:          --focus-raw --1100,
-    ),
-), $semantic-colors-common-override) !default;
+$semantic-colors-common: map.deep-merge(def.$semantic-colors-common, $semantic-colors-common-override) !default;
 
 $theme-light-override: () !default;
-$theme-light: map.deep-merge((
-    --contrasts: (
-        --grays: (
-            --50:  -8,
-            --75:  -4,
-            --100: 0,
-        
-            --200: easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98,
-            --300: easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98,
-            --400: easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98,
-        
-            --500: easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98,
-            --600: easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98,
-            --700: easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98,
-            --800: easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98,
-            --900: 106,
-        ),
-
-        --colors: (
-            --100:  math.div(0, 12) * 96 + 5,
-            --200:  math.div(1, 12) * 96 + 5,
-            --300:  math.div(2, 12) * 96 + 5,
-            --400:  math.div(3, 12) * 96 + 5,
-            --500:  math.div(4, 12) * 96 + 5,
-            --600:  math.div(5, 12) * 96 + 5,
-            --700:  math.div(6, 12) * 96 + 5,
-            --800:  math.div(7, 12) * 96 + 5,
-            --900:  math.div(8, 12) * 96 + 5,
-            --1000: math.div(9, 12) * 96 + 5,
-            --1100: math.div(10, 12) * 96 + 5,
-            --1200: math.div(11, 12) * 96 + 5,
-            --1300: math.div(12, 12) * 96 + 5,
-        ),
-    ),
-
-    --ranges: (
-        --full:  .3,
-        --muted: .1,
-    ),
-    
-    --palettes: (
-        --base:  hsl(260, 90%, 98%)       --grays --full,
-        --blue:   oklch(56% .16 275.25) --colors --muted,
-        --purple: oklch(56% .16 305.58) --colors --muted,
-        --red:    oklch(56% .16 14.69)  --colors --muted,
-        --green:  oklch(56% .16 150.48) --colors --muted,
-        --yellow: oklch(56% .16 84.08)  --colors --muted,
-    ),
-
-    --semantic: map.merge($semantic-colors-common, (
-        --bg-l2:   --base --50,
-        --bg-l1:   --base --100,
-        --bg-base: --base --200,
-    )),
-
-    --constants: (
-        --shadow: rgba(#000, .15),
-    ),
-), $theme-light-override) !default;
+$theme-light: map.deep-merge(def.$theme-light, $theme-light-override) !default;
 
 $theme-dark-override: () !default;
-$theme-dark: map.deep-merge((
-    --contrasts: (
-        --grays: (
-            --50:  4.4,
-            --75:  2.2,
-            --100: 0,
-        
-            --200: easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108,
-            --300: easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108,
-            --400: easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108,
-        
-            --500: easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108,
-            --600: easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108,
-            --700: easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108,
-            --800: easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108,
-            --900: easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108,
-        ),
-
-        --colors: (
-            --100:  math.div(0, 12) * -100 - 5,
-            --200:  math.div(1, 12) * -100 - 5,
-            --300:  math.div(2, 12) * -100 - 5,
-            --400:  math.div(3, 12) * -100 - 5,
-            --500:  math.div(4, 12) * -100 - 5,
-            --600:  math.div(5, 12) * -100 - 5,
-            --700:  math.div(6, 12) * -100 - 5,
-            --800:  math.div(7, 12) * -100 - 5,
-            --900:  math.div(8, 12) * -100 - 5,
-            --1000: math.div(9, 12) * -100 - 5,
-            --1100: math.div(10, 12) * -100 - 5,
-            --1200: math.div(11, 12) * -100 - 5,
-            --1300: math.div(12, 12) * -100 - 5,
-        ),
-    ),
-
-    --ranges: (
-        --full:  1,
-        --muted: .3,
-    ),
-    
-    --palettes: (
-        --base:  hsl(257, 7%, 19%)       --grays --full,
-        --blue:   oklch(56% .16 275.25) --colors --muted,
-        --purple: oklch(56% .16 305.58) --colors --muted,
-        --red:    oklch(56% .16 14.69)  --colors --muted,
-        --green:  oklch(56% .16 150.48) --colors --muted,
-        --yellow: oklch(56% .16 84.08)  --colors --muted,
-    ),
-
-    --semantic: map.merge($semantic-colors-common, (
-        --bg-base: --base --50,
-        --bg-l1:   --base --75,
-        --bg-l2:   --base --100,
-    )),
-
-    --constants: (
-        --shadow: rgba(#000, .5),
-    ),
-), $theme-dark-override) !default;
+$theme-dark: map.deep-merge(def.$theme-dark, $theme-dark-override) !default;
 
 $themes-override: () !default;
 $themes: map.deep-merge((
     --main: (
         light: $theme-light,
         dark:  $theme-dark,
-    )
+    ),
 ), $themes-override) !default;
 
 $theme-default: list.nth(map.keys($themes), 1) !default;
diff --git a/src/_iro-design.scss b/src/_iro-design.scss
index 988f23a..a80f640 100644
--- a/src/_iro-design.scss
+++ b/src/_iro-design.scss
@@ -19,6 +19,7 @@ $breakpoints: (
     ) !default,
 );
 
+@forward 'config.defaults' as config-defaults--*;
 @forward 'config' as config--*;
 @forward 'props' as props--*;
 @forward 'core' as core--*;