Update

5 files changed, 159 insertions, 144 deletions

diff --git a/package.json b/package.json
index c9ea1d9..a6f7882 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "dependencies": {
         "@oddbird/blend": "^0.2.4",
         "include-media": "^2.0.0",
-        "iro-sass": "git+https://git.vulpes.one/git/iro-sass.git#828a12ffac60b2fb7e6b0931f610b7ca9f53ffc2"
+        "iro-sass": "git+https://git.vulpes.one/git/iro-sass.git#9e2321a1730506c1973226fc254fa96df4f0dac9"
     },
     "devDependencies": {
         "iro-icons": "git+https://git.vulpes.one/git/iro-icons.git#b854aa0bfdc5a1bd233606af8ffff6312017845e",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5a09986..21a852b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,8 +15,8 @@ importers:
         specifier: ^2.0.0
         version: 2.0.0
       iro-sass:
-        specifier: git+https://git.vulpes.one/git/iro-sass.git#828a12ffac60b2fb7e6b0931f610b7ca9f53ffc2
-        version: git+https://git.vulpes.one/git/iro-sass.git#828a12ffac60b2fb7e6b0931f610b7ca9f53ffc2
+        specifier: git+https://git.vulpes.one/git/iro-sass.git#9e2321a1730506c1973226fc254fa96df4f0dac9
+        version: git+https://git.vulpes.one/git/iro-sass.git#9e2321a1730506c1973226fc254fa96df4f0dac9
     devDependencies:
       iro-icons:
         specifier: git+https://git.vulpes.one/git/iro-icons.git#b854aa0bfdc5a1bd233606af8ffff6312017845e
@@ -691,8 +691,8 @@ packages:
     peerDependencies:
       svg-sprite: ^2.0.2
 
-  iro-sass@git+https://git.vulpes.one/git/iro-sass.git#828a12ffac60b2fb7e6b0931f610b7ca9f53ffc2:
-    resolution: {commit: 828a12ffac60b2fb7e6b0931f610b7ca9f53ffc2, repo: https://git.vulpes.one/git/iro-sass.git, type: git}
+  iro-sass@git+https://git.vulpes.one/git/iro-sass.git#9e2321a1730506c1973226fc254fa96df4f0dac9:
+    resolution: {commit: 9e2321a1730506c1973226fc254fa96df4f0dac9, repo: https://git.vulpes.one/git/iro-sass.git, type: git}
     version: 1.0.2
 
   is-arrayish@0.2.1:
@@ -1923,7 +1923,7 @@ snapshots:
     dependencies:
       svg-sprite: 2.0.4
 
-  iro-sass@git+https://git.vulpes.one/git/iro-sass.git#828a12ffac60b2fb7e6b0931f610b7ca9f53ffc2: {}
+  iro-sass@git+https://git.vulpes.one/git/iro-sass.git#9e2321a1730506c1973226fc254fa96df4f0dac9: {}
 
   is-arrayish@0.2.1: {}
 
diff --git a/src/_config.scss b/src/_config.scss
index 950ff3b..be118b2 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -1,9 +1,12 @@
 @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;
 @use '@oddbird/blend';
+@use 'functions/colors' as iro-colors;
 
 iro.$vars-root-size: 16px;
 
@@ -25,31 +28,33 @@ res.$named-viewports: media.$breakpoints;
 
 $palette-precision: 0.01 !default;
 
+$palette-chroma-easing: 'ease' !default;
+
 $static-colors: (
     --base: hsl(0, 0%, 97%),
 
     --contrasts: (
-        --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,
+        --100:  math.div( 1, 13) * 106 - 10,
+        --200:  math.div( 2, 13) * 106 - 10,
+        --300:  math.div( 3, 13) * 106 - 10,
+        --400:  math.div( 4, 13) * 106 - 10,
+        --500:  math.div( 5, 13) * 106 - 10,
+        --600:  math.div( 6, 13) * 106 - 10,
+        --700:  math.div( 7, 13) * 106 - 10,
+        --800:  math.div( 8, 13) * 106 - 10,
+        --900:  math.div( 9, 13) * 106 - 10,
+        --1000: math.div(10, 13) * 106 - 10,
+        --1100: math.div(11, 13) * 106 - 10,
+        --1200: math.div(12, 13) * 106 - 10,
+        --1300: math.div(13, 13) * 106 - 10,
     ),
 
     --palettes: (
-        --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 80),
+        --blue:   iro-colors.oklch(56% 0.14 265.25),
+        --purple: iro-colors.oklch(56% 0.14 305.58),
+        --red:    iro-colors.oklch(56% 0.14 18.69),
+        --green:  iro-colors.oklch(56% 0.14 150.48),
+        --yellow: iro-colors.oklch(56% 0.14 84.08),
     ),
 ) !default;
 
@@ -60,46 +65,46 @@ $theme-light: (
             --75:  -5,
             --100: 0,
         
-            --200: 13.2375,
-            --300: 26.475,
-            --400: 39.7125,
+            --200: easing.cubic-bezier(.3, .1, .7, .9, math.div(1, 8)) * 106,
+            --300: easing.cubic-bezier(.3, .1, .7, .9, math.div(2, 8)) * 106,
+            --400: easing.cubic-bezier(.3, .1, .7, .9, math.div(3, 8)) * 106,
         
-            --500: 52.95,
-            --600: 66.1875,
-            --700: 79.425,
-            --800: 92.6625,
-            --900: 105.9,
+            --500: easing.cubic-bezier(.3, .1, .7, .9, math.div(4, 8)) * 106,
+            --600: easing.cubic-bezier(.3, .1, .7, .9, math.div(5, 8)) * 106,
+            --700: easing.cubic-bezier(.3, .1, .7, .9, math.div(6, 8)) * 106,
+            --800: easing.cubic-bezier(.3, .1, .7, .9, math.div(7, 8)) * 106,
+            --900: easing.cubic-bezier(.3, .1, .7, .9, math.div(8, 8)) * 106,
         ),
 
         --colors: (
-            --100:  -1.18,
-            --200:  -1.30,
-            --300:  -1.43,
-            --400:  -1.68,
-            --500:  -2.00,
-            --600:  -2.45,
-            --700:  -3.04,
-            --800:  -3.87,
-            --900:  -5.07,
-            --1000: -6.72,
-            --1100: -8.84,
-            --1200: -11.31,
-            --1300: -13.94,
+            --100:  math.div( 0, 13) * 100 + 5,
+            --200:  math.div( 1, 13) * 100 + 5,
+            --300:  math.div( 2, 13) * 100 + 5,
+            --400:  math.div( 3, 13) * 100 + 5,
+            --500:  math.div( 4, 13) * 100 + 5,
+            --600:  math.div( 5, 13) * 100 + 5,
+            --700:  math.div( 6, 13) * 100 + 5,
+            --800:  math.div( 7, 13) * 100 + 5,
+            --900:  math.div( 8, 13) * 100 + 5,
+            --1000: math.div( 9, 13) * 100 + 5,
+            --1100: math.div(10, 13) * 100 + 5,
+            --1200: math.div(11, 13) * 100 + 5,
+            --1300: math.div(12, 13) * 100 + 5,
         ),
     ),
 
     --ranges: (
         --full:  1,
-        --muted: .2,
+        --muted: .1,
     ),
 
     --palettes: (
         --base:  hsl(0, 0%, 97%)       --grays --full,
-        --blue:   blend.lch(48% 50 279) --colors --muted,
-        --purple: blend.lch(48% 50 308) --colors --muted,
-        --red:    blend.lch(48% 50 23)  --colors --muted,
-        --green:  blend.lch(63% 50 147) --colors --muted,
-        --yellow: blend.lch(68% 50 80)  --colors --muted,
+        --blue:   iro-colors.oklch(56% 0.14 265.25) --colors --muted,
+        --purple: iro-colors.oklch(56% 0.14 305.58) --colors --muted,
+        --red:    iro-colors.oklch(56% 0.14 18.69)  --colors --muted,
+        --green:  iro-colors.oklch(56% 0.14 150.48) --colors --muted,
+        --yellow: iro-colors.oklch(56% 0.14 84.08)  --colors --muted,
     ),
 
     --semantic: (
@@ -134,50 +139,50 @@ $theme-light: (
 $theme-dark: (
     --contrasts: (
         --grays: (
-            --50:  -1.31,
-            --75:  -1.18,
-            --100: 1,
+            --50:  3,
+            --75:  1.5,
+            --100: 0,
         
-            --200: 1.15,
-            --300: 1.35,
-            --400: 1.7,
+            --200: easing.cubic-bezier(.5, .1, .7, .8, math.div(1, 8)) * -108,
+            --300: easing.cubic-bezier(.5, .1, .7, .8, math.div(2, 8)) * -108,
+            --400: easing.cubic-bezier(.5, .1, .7, .8, math.div(3, 8)) * -108,
         
-            --500: 2.4,
-            --600: 3.3,
-            --700: 6,
-            --800: 13,
-            --900: 20,
+            --500: easing.cubic-bezier(.5, .1, .7, .8, math.div(4, 8)) * -108,
+            --600: easing.cubic-bezier(.5, .1, .7, .8, math.div(5, 8)) * -108,
+            --700: easing.cubic-bezier(.5, .1, .7, .8, math.div(6, 8)) * -108,
+            --800: easing.cubic-bezier(.5, .1, .7, .8, math.div(7, 8)) * -108,
+            --900: easing.cubic-bezier(.5, .1, .7, .8, math.div(8, 8)) * -108,
         ),
 
         --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,
+            --100:  math.div( 0, 13) * -110 - 5,
+            --200:  math.div( 1, 13) * -110 - 5,
+            --300:  math.div( 2, 13) * -110 - 5,
+            --400:  math.div( 3, 13) * -110 - 5,
+            --500:  math.div( 4, 13) * -110 - 5,
+            --600:  math.div( 5, 13) * -110 - 5,
+            --700:  math.div( 6, 13) * -110 - 5,
+            --800:  math.div( 7, 13) * -110 - 5,
+            --900:  math.div( 8, 13) * -110 - 5,
+            --1000: math.div( 9, 13) * -110 - 5,
+            --1100: math.div(10, 13) * -110 - 5,
+            --1200: math.div(11, 13) * -110 - 5,
+            --1300: math.div(12, 13) * -110 - 5,
         ),
     ),
 
     --ranges: (
         --full:  1,
-        --muted: .2,
+        --muted: .4,
     ),
 
     --palettes: (
         --base:  hsl(0, 0%, 19%)       --grays --full,
-        --blue:   blend.lch(48% 50 279) --colors --muted,
-        --purple: blend.lch(48% 50 308) --colors --muted,
-        --red:    blend.lch(48% 50 23)  --colors --muted,
-        --green:  blend.lch(63% 50 147) --colors --muted,
-        --yellow: blend.lch(68% 50 80)  --colors --muted,
+        --blue:   iro-colors.oklch(56% 0.14 265.25) --colors --muted,
+        --purple: iro-colors.oklch(56% 0.14 305.58) --colors --muted,
+        --red:    iro-colors.oklch(56% 0.14 18.69)  --colors --muted,
+        --green:  iro-colors.oklch(56% 0.14 150.48) --colors --muted,
+        --yellow: iro-colors.oklch(56% 0.14 84.08)  --colors --muted,
     ),
 
     --semantic: (
diff --git a/src/_functions.scss b/src/_functions.scss
index 2d4aeef..9c29285 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -7,8 +7,9 @@
 @use '@oddbird/blend';
 @use '@oddbird/blend/sass/convert' as blend-convert;
 
-@use 'functions/colors' as iro-colors;
 @use 'iro-sass/src/index' as iro;
+@use 'iro-sass/src/easing' as easing;
+@use 'functions/colors' as iro-colors;
 @use 'config';
 
 @function color($key, $tree: iro.$props-default-tree, $default: null, $global: false) {
@@ -66,51 +67,6 @@
     @return list.nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($color))), 2) + .05;
 }
 
-@function multi-contrast($base-color, $colors, $wanted-contrasts, $reference-color: $base-color) {
-    $ref-lum: lum($reference-color);
-
-    $result:     ();
-    $colors-len: list.length($colors);
-    $colors-idx: 1;
-    $wanted-len: list.length($wanted-contrasts);
-    $wanted-idx: 1;
-
-    @while $colors-idx <= $colors-len and $wanted-idx <= $wanted-len {
-        $color:    list.nth($colors, $colors-idx);
-        $lum:      lum($color);
-        $contrast: math.div(math.max($ref-lum, $lum), math.min($lum, $ref-lum));
-
-        @if $contrast != 1 {
-            @if $lum <= $ref-lum {
-                $contrast: -1 * $contrast;
-            }
-        }
-
-        $wanted:          list.nth($wanted-contrasts, $wanted-idx);
-        $wanted-key:      list.nth($wanted, 1);
-        $wanted-contrast: list.nth($wanted, 2);
-
-        @if $contrast >= $wanted-contrast {
-            $result:     map.set($result, $wanted-key, $color);
-            $wanted-idx: $wanted-idx + 1;
-        } @else {
-            $colors-idx: $colors-idx + 1;
-        }
-    }
-
-    $last-color: list.nth($colors, $colors-len);
-
-    @if $wanted-idx <= $wanted-len {
-        @for $i from $wanted-idx through $wanted-len {
-            $wanted:     list.nth($wanted-contrasts, $i);
-            $wanted-key: list.nth($wanted, 1);
-            $result:     map.set($result, $wanted-key, $last-color);
-        }
-    }
-
-    @return $result;
-}
-
 @function palette-old($base-color, $contrasts, $chroma-range: 1, $reference-color: $base-color) {
     $chroma-range: 1 - $chroma-range;
 
@@ -159,17 +115,33 @@
             )
         )
     );
+    $ref-lch: blend-convert.Lab_to_LCH(
+        iro-colors.lin_sRGB_to_Oklab(
+            blend-convert.lin_sRGB(
+                blend-convert.sassToRgb($reference-color)
+            )
+        )
+    );
+    $ref-l: list.nth($ref-lch, 1);
     $ref-y: iro-colors.apca_sRGB_to_Y($reference-color);
 
+    $cmax: math.max(map.values($contrasts)...);
+    $cmax: math.max($cmax, math.abs(math.min(map.values($contrasts)...)));
+
+    $black-y: iro-colors.apca_sRGB_to_Y(#000);
+    $white-y: iro-colors.apca_sRGB_to_Y(#fff);
+
     $palette: ();
 
+    $chroma-easing: meta.get-function(config.$palette-chroma-easing, $module: easing);
+
     @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);
+        $c: 1;
 
         @if $y != false {
-            @debug $contrast, $ref-y, $y, iro-colors.apca_Y_to_sRGB($y);
-    
             $y-lch: blend-convert.Lab_to_LCH(
                 iro-colors.lin_sRGB_to_Oklab(
                     blend-convert.lin_sRGB(
@@ -181,20 +153,37 @@
             );
             $l: list.nth($y-lch, 1);
         } @else {
-            @debug $contrast, $ref-y, $y;
+            $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: meta.call($chroma-easing, $c);
+            $c: $chroma-range + (1 - $chroma-range) * $c;
         }
 
-        $color: oklch($l * 100% list.nth($base-lch, 2) list.nth($base-lch, 3));
-        //$color: blend-convert.LCH_to_Lab($color);
-        //$color: iro-colors.Oklab_to_lin_sRGB($color);
-        //$color: blend-convert();
+        $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)
+        //        )
+        //    )
+        //);
+
+        $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($l > 50%, #000, #fff));
+        $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));
     }
 
-    @debug '-------------------------------------------';
-
     @return $palette;
 }
 
diff --git a/src/functions/_colors.scss b/src/functions/_colors.scss
index 265c09a..d3c0035 100644
--- a/src/functions/_colors.scss
+++ b/src/functions/_colors.scss
@@ -6,6 +6,7 @@
 @use 'sass:map';
 @use 'sass:math';
 @use 'sass:meta';
+@use '@oddbird/blend/sass/convert' as blend-convert;
 @use '@oddbird/blend/sass/utils/pow';
 
 $SA98G: (
@@ -56,18 +57,32 @@ $SA98G: (
     $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_ + 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 * 4s,
-                -1.2684380046 * $l + 2.6097574011 * $m - 0.3413193965 * 4s,
-                -0.0041960863 * $l - 0.7034186147 * $m + 1.7076147010 * 4s,
+                 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)
+            )
+        )
     );
 }
 
@@ -83,6 +98,12 @@ $SA98G: (
 }
 
 @function apcaContrast($txtY, $bgY) {
+    $icp: 0.0 1.1;
+
+    @if math.min($txtY, $bgY) < list.nth($icp, 1) or math.max($txtY, $bgY) > list.nth($icp, 2) {
+        @return 0;
+    }
+
     @if $txtY <= map.get($SA98G, blkThrs) {
         $txtY: $txtY + math.pow(map.get($SA98G, blkThrs) - $txtY, map.get($SA98G, blkClmp));
     }
@@ -110,7 +131,7 @@ $SA98G: (
         }
     }
 
-    @return outputContrast * 100.0;
+    @return $outputContrast * 100.0;
 }
 
 @function apcaReverse($contrast, $knownY, $knownType: 'bg') {