Revamped variable management

1 files changed, 234 insertions, 0 deletions

diff --git a/src_old/_config.scss b/src_old/_config.scss
new file mode 100644
index 0000000..62a1401
--- /dev/null
+++ b/src_old/_config.scss
@@ -0,0 +1,234 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:math';
+@use 'iro-sass/src/index' as iro;
+@use 'iro-sass/src/responsive' as res;
+@use 'iro-sass/src/easing' as easing;
+@use 'include-media/dist/include-media' as media;
+
+iro.$vars-root-size: 16px;
+
+media.$breakpoints: (
+    lg: 1340px,
+    md: 900px,
+    sm: 620px,
+    xs: 400px,
+);
+
+media.$unit-intervals: (
+    'px':  1,
+    'em':  .01,
+    'rem': .01,
+    '':    0
+);
+
+res.$named-viewports: media.$breakpoints;
+
+$palette-precision: .01 !default;
+
+$palette-chroma-easing: 'ease' !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;
+
+$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;
+
+$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-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;
+
+$themes-override: () !default;
+$themes: map.deep-merge((
+    light: $theme-light,
+    dark:  $theme-dark,
+), $themes-override) !default;
+
+$theme-default: list.nth(map.keys($themes), 1) !default;