Replace Oddbird with native SASS color functions

1 files changed, 48 insertions, 49 deletions

diff --git a/src/_config.scss b/src/_config.scss
index 5449a04..3ec6607 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -5,7 +5,6 @@
 @use 'iro-sass/src/responsive' as res;
 @use 'iro-sass/src/easing' as easing;
 @use 'include-media/dist/include-media' as media;
-@use '@oddbird/blend';
 
 iro.$vars-root-size: 16px;
 
@@ -25,7 +24,7 @@ media.$unit-intervals: (
 
 res.$named-viewports: media.$breakpoints;
 
-$palette-precision: 0.01 !default;
+$palette-precision: .01 !default;
 
 $palette-chroma-easing: 'ease' !default;
 
@@ -33,27 +32,27 @@ $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,
+        --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% 0.14 265.25),
-        --purple: oklch(56% 0.14 305.58),
-        --red:    oklch(56% 0.14 18.69),
-        --green:  oklch(56% 0.14 150.48),
-        --yellow: oklch(56% 0.14 84.08),
+        --blue:   oklch(56% .14 265.25),
+        --purple: oklch(56% .14 305.58),
+        --red:    oklch(56% .14 18.69),
+        --green:  oklch(56% .14 150.48),
+        --yellow: oklch(56% .14 84.08),
     ),
 
     --transparents: (
@@ -121,16 +120,16 @@ $theme-light: (
         ),
 
         --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,
+            --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,
@@ -144,11 +143,11 @@ $theme-light: (
 
     --palettes: (
         --base:  hsl(0, 0%, 98%)       --grays --full,
-        --blue:   oklch(56% 0.16 265.25) --colors --muted,
-        --purple: oklch(56% 0.16 305.58) --colors --muted,
-        --red:    oklch(56% 0.16 18.69)  --colors --muted,
-        --green:  oklch(56% 0.16 150.48) --colors --muted,
-        --yellow: oklch(56% 0.16 84.08)  --colors --muted,
+        --blue:   oklch(56% .16 265.25) --colors --muted,
+        --purple: oklch(56% .16 305.58) --colors --muted,
+        --red:    oklch(56% .16 18.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, (
@@ -158,7 +157,7 @@ $theme-light: (
     )),
 
     --constants: (
-        --shadow: rgba(#000, 0.15),
+        --shadow: rgba(#000, .15),
     ),
 ) !default;
 
@@ -181,16 +180,16 @@ $theme-dark: (
         ),
 
         --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,
+            --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,
@@ -204,11 +203,11 @@ $theme-dark: (
 
     --palettes: (
         --base:  hsl(0, 0%, 20%)       --grays --full,
-        --blue:   oklch(56% 0.16 265.25) --colors --muted,
-        --purple: oklch(56% 0.16 305.58) --colors --muted,
-        --red:    oklch(56% 0.16 18.69)  --colors --muted,
-        --green:  oklch(56% 0.16 150.48) --colors --muted,
-        --yellow: oklch(56% 0.16 84.08)  --colors --muted,
+        --blue:   oklch(56% .16 265.25) --colors --muted,
+        --purple: oklch(56% .16 305.58) --colors --muted,
+        --red:    oklch(56% .16 18.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, (
@@ -218,7 +217,7 @@ $theme-dark: (
     )),
 
     --constants: (
-        --shadow: rgba(#000, 0.5),
+        --shadow: rgba(#000, .5),
     ),
 ) !default;