Replace Oddbird with native SASS color functions

8 files changed, 88 insertions, 202 deletions

diff --git a/.stylelintrc.json b/.stylelintrc.json
index 622a3c3..09d474e 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -4,6 +4,9 @@
         "stylelint-order"
     ],
     "rules": {
+        "@stylistic/indentation": 4,
+        "@stylistic/number-leading-zero": "never",
+        "@stylistic/declaration-colon-space-after": null,
         "max-nesting-depth": 7,
         "selector-class-pattern": [
             "^[closut](-[a-z0-9]+)+(__[a-z0-9]+(-[a-z0-9]+)*)*(--[a-z0-9]+(-[a-z0-9]+)*)*(\\@[a-z0-9]+(-[a-z0-9]+)*)?$",
diff --git a/package.json b/package.json
index 38acdf7..7462243 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,6 @@
         "serve": "python -m http.server --bind 127.0.0.1 --directory public 8001"
     },
     "dependencies": {
-        "@oddbird/blend": "^0.2.4",
         "include-media": "^2.0.0",
         "iro-sass": "git+https://git.vulpes.one/git/iro-sass.git#c82ae7f3c766ff9d36c82183abf0f734e72a00a8"
     },
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;
 
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index e205354..0aa1cca 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -3,7 +3,6 @@
 @use 'sass:list';
 @use 'iro-sass/src/index' as iro;
 @use 'include-media/dist/include-media' as media;
-@use '@oddbird/blend';
 @use 'functions' as fn;
 @use 'config';
 
diff --git a/src/_functions.scss b/src/_functions.scss
index d615614..cbdb951 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -4,9 +4,6 @@
 @use 'sass:list';
 @use 'sass:meta';
 
-@use '@oddbird/blend';
-@use '@oddbird/blend/sass/convert' as blend-convert;
-
 @use 'iro-sass/src/index' as iro;
 @use 'iro-sass/src/easing' as easing;
 @use 'functions/colors' as iro-colors;
@@ -67,11 +64,12 @@
     @return list.nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($color))), 2) + .05;
 }
 
-@function palette($base-color, $contrasts, $chroma-range: 1, $reference-color: $base-color) {
-    $base-lch: iro-colors.parse-oklch($base-color);
-    $ref-lch:  iro-colors.parse-oklch($reference-color);
-    $ref-l:    list.nth($ref-lch, 1);
-    $ref-y:    iro-colors.apca_sRGB_to_Y($reference-color);
+@function palette($base-color, $contrasts, $chroma-range: 1, $ref-color: $base-color) {
+    $base-lch: color.to-space($base-color, oklch);
+    $ref-lch: color.to-space($ref-color, oklch);
+
+    $ref-l: color.channel($ref-lch, 'lightness');
+    $ref-y: iro-colors.apca_sRGB_to_Y($ref-lch);
 
     $cmax: math.max(map.values($contrasts)...);
     $cmax: math.max($cmax, math.abs(math.min(map.values($contrasts)...)));
@@ -84,52 +82,29 @@
     $palette: ();
 
     @each $key, $contrast in $contrasts {
-        //$i: math.div(list.length($palette), 2 * (list.length($contrasts) - 1));
         $y: iro-colors.apcaReverse($contrast, $ref-y);
-        $l: list.nth($base-lch, 1);
+        $l: color.channel($base-lch, 'lightness');
         $c: 1;
 
         @if $y != false {
-            $y-lch: blend-convert.Lab_to_LCH(
-                iro-colors.lin_sRGB_to_Oklab(
-                    blend-convert.lin_sRGB(
-                        blend-convert.sassToRgb(
-                            iro-colors.apca_Y_to_sRGB($y)
-                        )
-                    )
-                )
-            );
-            $l: list.nth($y-lch, 1);
+            $l: color.channel(iro-colors.apca_Y_to_sRGB($y), 'lightness', oklch);
         } @else {
             $y: $ref-y;
         }
 
         @if $chroma-range != 1 {
-            $c: if(
-                $ref-l > .5,
-                math.clamp(0, math.div($contrast, $cmax), 1),
-                -1 * math.clamp(-1, math.div($contrast, $cmax), 0)
-            );
+            $c: if($ref-l > .5, math.clamp(0, math.div($contrast, $cmax), 1), -1 * math.clamp(-1, math.div($contrast, $cmax), 0));
             $c: meta.call($chroma-easing, $c);
             $c: $chroma-range + (1 - $chroma-range) * $c;
         }
 
-        $color: oklch(($l * 100%) ($c * list.nth($base-lch, 2)) list.nth($base-lch, 3));
-        //$color: $l, $c * list.nth($base-lch, 2), list.nth($base-lch, 3);
-        //$color: blend-convert.rgbToSass(
-        //    blend-convert.gam_sRGB(
-        //        iro-colors.Oklab_to_lin_sRGB(
-        //            blend-convert.LCH_to_Lab($color)
-        //        )
-        //    )
-        //);
+        $color: oklch($l ($c * color.channel($base-lch, 'chroma')) color.channel($base-lch, 'hue'));
 
         $contrast-black: iro-colors.apcaContrast($black-y, $y);
         $contrast-white: iro-colors.apcaContrast($white-y, $y);
 
         $palette: map.set($palette, $key, $color);
         $palette: map.set($palette, #{$key}-text, if(math.abs($contrast-black) > math.abs($contrast-white), #000, #fff));
-        //$palette: map.set($palette, #{$key}-text, blend.contrast($color));
     }
 
     @return $palette;
diff --git a/src/functions/colors/_apca.scss b/src/functions/colors/_apca.scss
index d9236b2..c848db7 100644
--- a/src/functions/colors/_apca.scss
+++ b/src/functions/colors/_apca.scss
@@ -9,34 +9,36 @@
 $SA98G: (
     mainTRC:     2.4,
 
-    sRco:        0.2126729, 
-    sGco:        0.7151522, 
-    sBco:        0.0721750,
+    sRco:        .2126729, 
+    sGco:        .7151522, 
+    sBco:        .072175,
 
-    normBG:      0.56, 
-    normTXT:     0.57,
-    revTXT:      0.62,
-    revBG:       0.65,
+    normBG:      .56, 
+    normTXT:     .57,
+    revTXT:      .62,
+    revBG:       .65,
 
-    blkThrs:     0.022,
+    blkThrs:     .022,
     blkClmp:     1.414,
     scaleBoW:    1.14,
     scaleWoB:    1.14,
-    loBoWoffset: 0.027,
-    loWoBoffset: 0.027,
-    deltaYmin:   0.0005,
-    loClip:      0.0001,
-
-    mFactor:     1.94685544331710,
-    mOffsetIn:   0.03873938165714010,
-    mExpAdj:     0.2833433964208690,
-    mOffsetOut:  0.3128657958707580,
+    loBoWoffset: .027,
+    loWoBoffset: .027,
+    deltaYmin:   .0005,
+    loClip:      .0001,
+
+    mFactor:     1.9468554433171,
+    mOffsetIn:   .0387393816571401,
+    mExpAdj:     .283343396420869,
+    mOffsetOut:  .312865795870758,
 );
 
 @function apca_sRGB_to_Y($color) {
-    @return map.get($SA98G, sRco) * math.pow(math.div(color.red($color), 255), map.get($SA98G, mainTRC)) +
-        map.get($SA98G, sGco) * math.pow(math.div(color.green($color), 255), map.get($SA98G, mainTRC)) +
-        map.get($SA98G, sBco) * math.pow(math.div(color.blue($color), 255), map.get($SA98G, mainTRC));
+    $rgb: color.to-space($color, rgb);
+
+    @return map.get($SA98G, sRco) * math.pow(math.div(color.channel($rgb, 'red'), 255), map.get($SA98G, mainTRC)) +
+        map.get($SA98G, sGco) * math.pow(math.div(color.channel($rgb, 'green'), 255), map.get($SA98G, mainTRC)) +
+        map.get($SA98G, sBco) * math.pow(math.div(color.channel($rgb, 'blue'), 255), map.get($SA98G, mainTRC));
 }
 
 @function apca_Y_to_sRGB($y) {
@@ -45,7 +47,7 @@ $SA98G: (
 }
 
 @function apcaContrast($txtY, $bgY) {
-    $icp: 0.0 1.1;
+    $icp:  1.1;
 
     @if math.min($txtY, $bgY) < list.nth($icp, 1) or math.max($txtY, $bgY) > list.nth($icp, 2) {
         @return 0;
@@ -78,7 +80,7 @@ $SA98G: (
         }
     }
 
-    @return $outputContrast * 100.0;
+    @return $outputContrast * 100;
 }
 
 @function apcaReverse($contrast, $knownY, $knownType: 'bg') {
@@ -90,7 +92,7 @@ $SA98G: (
     $scale:  map.get($SA98G, if($contrast > 0, scaleBoW, scaleWoB));
     $offset: map.get($SA98G, if($contrast > 0, loBoWoffset, loWoBoffset));
 
-    $contrast: math.div($contrast * 0.01 + $offset, $scale);
+    $contrast: math.div($contrast * .01 + $offset, $scale);
 
     @if $knownY <= map.get($SA98G, blkThrs) {
         $knownY: $knownY + math.pow(map.get($SA98G, blkThrs) - $knownY, map.get($SA98G, blkClmp));
@@ -115,10 +117,8 @@ $SA98G: (
     }
 
     @if $unknownY <= map.get($SA98G, blkThrs) {
-        $unknownY: math.pow(
-            ($unknownY + map.get($SA98G, mOffsetIn)) * map.get($SA98G, mFactor),
-            math.div(map.get($SA98G, mExpAdj), map.get($SA98G, blkClmp))
-        ) * math.div(1, map.get($SA98G, mFactor)) - map.get($SA98G, mOffsetOut);
+        $unknownY: math.pow(($unknownY + map.get($SA98G, mOffsetIn)) * map.get($SA98G, mFactor),
+            math.div(map.get($SA98G, mExpAdj), map.get($SA98G, blkClmp))) * math.div(1, map.get($SA98G, mFactor)) - map.get($SA98G, mOffsetOut);
     }
 
     $unknownY: math.max(math.min($unknownY, 1), 0);
diff --git a/src/functions/colors/_index.scss b/src/functions/colors/_index.scss
index 26c3027..9dad0f9 100644
--- a/src/functions/colors/_index.scss
+++ b/src/functions/colors/_index.scss
@@ -1,2 +1 @@
 @forward 'apca';
-@forward 'oklch';
diff --git a/src/functions/colors/_oklch.scss b/src/functions/colors/_oklch.scss
deleted file mode 100644
index e3df041..0000000
--- a/src/functions/colors/_oklch.scss
+++ /dev/null
@@ -1,88 +0,0 @@
-/* stylelint-disable scss/dollar-variable-pattern */
-/* stylelint-disable scss/at-function-pattern */
-
-@use 'sass:list';
-@use 'sass:math';
-@use 'sass:meta';
-@use 'sass:string';
-@use '@oddbird/blend/sass/convert' as blend-convert;
-@use '@oddbird/blend/sass/utils/pow';
-@use 'iro-sass/src/index' as iro;
-
-@function lin_sRGB_to_Oklab($color) {
-    $r_: list.nth($color, 1);
-    $g_: list.nth($color, 2);
-    $b_: list.nth($color, 3);
-
-    $l: pow.cbrt(0.4122214708 * $r_ + 0.5363325363 * $g_ + 0.0514459929 * $b_);
-    $m: pow.cbrt(0.2119034982 * $r_ + 0.6806995451 * $g_ + 0.1073969566 * $b_);
-        $s: pow.cbrt(0.0883024619 * $r_ + 0.2817188376 * $g_ + 0.6299787005 * $b_);
-    
-    @return (
-        0.2104542553 * $l + 0.7936177850 * $m - 0.0040720468 * $s,
-        1.9779984951 * $l - 2.4285922050 * $m + 0.4505937099 * $s,
-        0.0259040371 * $l + 0.7827717662 * $m - 0.8086757660 * $s,
-    );
-}
-
-@function Oklab_to_lin_sRGB($color) {
-    $l_: list.nth($color, 1);
-    $a_: list.nth($color, 2);
-    $b_: list.nth($color, 3);
-
-    $l: $l_ + 0.3963377774 * $a_ + 0.2158037573 * $b_;
-    $m: $l_ - 0.1055613458 * $a_ - 0.0638541728 * $b_;
-    $s: $l_ - 0.0894841775 * $a_ - 1.2914855480 * $b_;
-
-    $l: $l * $l * $l;
-    $m: $m * $m * $m;
-    $s: $s * $s * $s;
-    
-    @return (
-                 4.0767416621 * $l - 3.3077115913 * $m + 0.2309699292 * $s,
-                -1.2684380046 * $l + 2.6097574011 * $m - 0.3413193965 * $s,
-                -0.0041960863 * $l - 0.7034186147 * $m + 1.7076147010 * $s,
-    );
-}
-
-@function oklch($arg) {
-    $l: math.div(list.nth($arg, 1), 100%);
-    $c: list.nth($arg, 2);
-    $h: list.nth($arg, 3);
-
-    @return blend-convert.rgbToSass(
-        blend-convert.gam_sRGB(
-            Oklab_to_lin_sRGB(
-                blend-convert.LCH_to_Lab($l $c $h)
-            )
-        )
-    );
-}
-
-@function parse-oklch($color) {
-    @if meta.type-of($color) == 'color' {
-        @return blend-convert.Lab_to_LCH(
-            lin_sRGB_to_Oklab(
-                blend-convert.lin_sRGB(
-                    blend-convert.sassToRgb($color)
-                )
-            )
-        );
-    }
-
-    @if meta.type-of($color) != 'string' {
-        @return null;
-    }
-
-    @if string.slice($color, 1, 6) == 'oklch(' {
-        $args: string.split(string.slice($color, 7, -2), ' ');
-
-        $l: math.div(iro.fn-to-number(list.nth($args, 1)), 100%);
-        $c: iro.fn-to-number(list.nth($args, 2));
-        $h: iro.fn-to-number(list.nth($args, 3));
-
-        @return $l $c $h;
-    }
-
-    @return null;
-}