WIP: Refactoring

1 files changed, 121 insertions, 13 deletions

diff --git a/src/_config.scss b/src/_config.scss
index c42ad97..08374fb 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -1,6 +1,9 @@
+@use 'sass:list';
+@use 'sass:map';
 @use 'iro-sass/src/index' as iro;
 @use 'iro-sass/src/responsive' as res;
 @use 'include-media/dist/include-media' as media;
+@use '@oddbird/blend';
 
 iro.$vars-root-size: 16px;
 
@@ -20,18 +23,123 @@ media.$unit-intervals: (
 
 res.$named-viewports: media.$breakpoints;
 
-$wanted-grays: (
-    --1:  -1.3,
-    --2:  -1.15,
-    --3:  1,
+$palette-precision: 5 !default;
 
-    --4:  1.15,
-    --5:  1.35,
-    --6:  1.7,
+$theme-light: (
+    --base:  hsl(0, 0%, 97%),
+    --blue:   blend.lch(48% 50 279),
+    --purple: blend.lch(48% 50 308),
+    --red:    blend.lch(48% 50 23),
+    --green:  blend.lch(63% 50 147),
+    --yellow: blend.lch(68% 50 70),
 
-    --7:  2.4,
-    --8:  3.3,
-    --9:  6,
-    --10: 13,
-    --11: 20,
-);
+    --grays: (
+        --50:  1.1,
+        --75:  1.04,
+        --100: 1,
+    
+        --200: -1.15,
+        --300: -1.35,
+        --400: -1.7,
+    
+        --500: -2.4,
+        --600: -3.3,
+        --700: -6,
+        --800: -13,
+        --900: -20,
+    ),
+    --colors: (
+        --100:  -1.08,
+        --200:  -1.20,
+        --300:  -1.33,
+        --400:  -1.58,
+        --500:  -1.92,
+        --600:  -2.39,
+        --700:  -3.01,
+        --800:  -3.87,
+        --900:  -5.07,
+        --1000: -6.72,
+        --1100: -8.84,
+        --1200: -11.31,
+        --1300: -13.94,
+    ),
+
+    --accent:         --blue,
+
+    --bg-l2:          --50,
+    --bg-l1:          --100,
+    --bg-base:        --200,
+
+    --border-mute:    --200,
+    --border:         --300,
+    --border-strong:  --400,
+
+    --text-disabled:  --500,
+    --text-mute-more: --600,
+    --text-mute:      --700,
+    --text:           --800,
+    --heading:        --900,
+) !default;
+
+$theme-dark: (
+    --base:  hsl(0, 0%, 19%),
+    --blue:   blend.lch(48% 50 279),
+    --purple: blend.lch(48% 50 308),
+    --red:    blend.lch(48% 50 23),
+    --green:  blend.lch(63% 50 147),
+    --yellow: blend.lch(68% 50 70),
+
+    --grays: (
+        --50:  -1.31,
+        --75:  -1.18,
+        --100: 1,
+    
+        --200: 1.15,
+        --300: 1.35,
+        --400: 1.7,
+    
+        --500: 2.4,
+        --600: 3.3,
+        --700: 6,
+        --800: 13,
+        --900: 20,
+    ),
+    --colors: (
+        --100:  1.12,
+        --200:  1.30,
+        --300:  1.58,
+        --400:  1.96,
+        --500:  2.45,
+        --600:  3.09,
+        --700:  3.90,
+        --800:  4.85,
+        --900:  6.02,
+        --1000: 7.34,
+        --1100: 8.77,
+        --1200: 10.18,
+        --1300: 11.64,
+    ),
+
+    --accent:         --blue,
+
+    --bg-base:        --50,
+    --bg-l1:          --75,
+    --bg-l2:          --100,
+
+    --border-mute:    --200,
+    --border:         --300,
+    --border-strong:  --400,
+
+    --text-disabled:  --500,
+    --text-mute-more: --600,
+    --text-mute:      --700,
+    --text:           --800,
+    --heading:        --900,
+) !default;
+
+$themes: (
+    light: $theme-light,
+    dark:  $theme-dark,
+) !default;
+
+$theme-default: list.nth(map.keys($themes), 1) !default;