New palette generation

5 files changed, 94 insertions, 117 deletions

diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss
index 60f0c34..f2dd420 100644
--- a/src/_config.defaults.scss
+++ b/src/_config.defaults.scss
@@ -3,12 +3,10 @@
 @use 'sass:math';
 @use 'iro-sass/src/easing' as easing;
 
-$palette-chroma-easing: 'ease';
-
 $static-colors: (
     --base: hsl(0, 0%, 98%),
 
-    --contrasts: (
+    --levels: (
         --100:  math.div(0, 12) * 110 - 10,
         --200:  math.div(1, 12) * 110 - 10,
         --300:  math.div(2, 12) * 110 - 10,
@@ -79,52 +77,47 @@ $semantic-colors-common: (
 );
 
 $theme-light: (
-    --contrasts: (
+    --levels: (
         --grays: (
-            --50:  -8,
-            --75:  -4,
-            --100: 0,
+            --50:  (-8) (.2 + .8 * easing.ease(math.div(0, 12))),
+            --75:  (-4) (.2 + .8 * easing.ease(math.div(1, 12))),
+            --100: (0) (.2 + .8 * easing.ease(math.div(2, 12))),
         
-            --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,
+            --200: (easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98) (.2 + .8 * easing.ease(math.div(3, 12))),
+            --300: (easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98) (.2 + .8 * easing.ease(math.div(4, 12))),
+            --400: (easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98) (.2 + .8 * easing.ease(math.div(5, 12))),
         
-            --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,
+            --500: (easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98) (.2 + .8 * easing.ease(math.div(6, 12))),
+            --600: (easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98) (.2 + .8 * easing.ease(math.div(7, 12))),
+            --700: (easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98) (.2 + .8 * easing.ease(math.div(8, 12))),
+            --800: (easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98) (.2 + .8 * easing.ease(math.div(9, 12))),
+            --900: (106) (.2 + .8 * easing.ease(math.div(10, 12))),
         ),
 
         --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,
+            --100:  (math.div(0, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(0, 12))),
+            --200:  (math.div(1, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(1, 12))),
+            --300:  (math.div(2, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(2, 12))),
+            --400:  (math.div(3, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(3, 12))),
+            --500:  (math.div(4, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(4, 12))),
+            --600:  (math.div(5, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(5, 12))),
+            --700:  (math.div(6, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(6, 12))),
+            --800:  (math.div(7, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(7, 12))),
+            --900:  (math.div(8, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(8, 12))),
+            --1000: (math.div(9, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(9, 12))),
+            --1100: (math.div(10, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(10, 12))),
+            --1200: (math.div(11, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(11, 12))),
+            --1300: (math.div(12, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(12, 12))),
         ),
     ),
-
-    --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,
+        --base:   hsl(260, 70%, 98%)    --grays,
+        --blue:   oklch(56% .16 275.25) --colors,
+        --purple: oklch(56% .16 305.58) --colors,
+        --red:    oklch(56% .16 14.69)  --colors,
+        --green:  oklch(56% .16 150.48) --colors,
+        --yellow: oklch(56% .16 84.08)  --colors,
     ),
 
     --semantic: map.merge($semantic-colors-common, (
@@ -139,52 +132,47 @@ $theme-light: (
 );
 
 $theme-dark: (
-    --contrasts: (
+    --levels: (
         --grays: (
-            --50:  4.4,
-            --75:  2.2,
-            --100: 0,
+            --50:  (4.4) (.3 + .7 * easing.ease(math.div(10, 12))),
+            --75:  (2.2) (.3 + .7 * easing.ease(math.div(9, 12))),
+            --100: (0) (.3 + .7 * easing.ease(math.div(8, 12))),
         
-            --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,
+            --200: (easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108) (.3 + .7 * easing.ease(math.div(7, 12))),
+            --300: (easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108) (.3 + .7 * easing.ease(math.div(6, 12))),
+            --400: (easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108) (.3 + .7 * easing.ease(math.div(5, 12))),
         
-            --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,
+            --500: (easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108) (.3 + .7 * easing.ease(math.div(4, 12))),
+            --600: (easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108) (.3 + .7 * easing.ease(math.div(3, 12))),
+            --700: (easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108) (.3 + .7 * easing.ease(math.div(2, 12))),
+            --800: (easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108) (.3 + .7 * easing.ease(math.div(1, 12))),
+            --900: (easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108) (.3 + .7 * easing.ease(math.div(0, 12))),
         ),
 
         --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,
+            --100:  (math.div(0, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(0, 12))),
+            --200:  (math.div(1, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(1, 12))),
+            --300:  (math.div(2, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(2, 12))),
+            --400:  (math.div(3, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(3, 12))),
+            --500:  (math.div(4, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(4, 12))),
+            --600:  (math.div(5, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(5, 12))),
+            --700:  (math.div(6, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(6, 12))),
+            --800:  (math.div(7, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(7, 12))),
+            --900:  (math.div(8, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(8, 12))),
+            --1000: (math.div(9, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(9, 12))),
+            --1100: (math.div(10, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(10, 12))),
+            --1200: (math.div(11, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(11, 12))),
+            --1300: (math.div(12, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(12, 12))),
         ),
     ),
-
-    --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,
+        --base:   hsl(257, 7%, 19%)     --grays,
+        --blue:   oklch(56% .16 275.25) --colors,
+        --purple: oklch(56% .16 305.58) --colors,
+        --red:    oklch(56% .16 14.69)  --colors,
+        --green:  oklch(56% .16 150.48) --colors,
+        --yellow: oklch(56% .16 84.08)  --colors,
     ),
 
     --semantic: map.merge($semantic-colors-common, (
diff --git a/src/_config.scss b/src/_config.scss
index e0ae933..284d6e7 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -4,8 +4,6 @@
 @use 'iro-sass/src/easing' as easing;
 @use 'config.defaults' as def;
 
-$palette-chroma-easing: def.$palette-chroma-easing !default;
-
 $static-colors-override: () !default;
 $static-colors: map.deep-merge(def.$static-colors, $static-colors-override) !default;
 
diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index a11cf42..60565c7 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -107,7 +107,7 @@ $list--compact-indent: props.def(--list--compact-indent, props.get($size--250))
 $-static-colors: ();
 
 @each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
-    $palette: fn.palette($palette, map.get(config.$static-colors, --contrasts), 1, map.get(config.$static-colors, --base), config.$palette-chroma-easing);
+    $palette: fn.palette($palette, map.get(config.$static-colors, --levels), map.get(config.$static-colors, --base));
     $-static-colors: map.merge($-static-colors, ( $palette-name: $palette ));
 }
 
@@ -138,10 +138,9 @@ $themes: ();
 
             @each $palette-name, $palette in map.get($variant, --palettes) {
                 $base-color: list.nth($palette, 1);
-                $contrasts:  list.nth($palette, 2);
-                $ranges:     list.nth($palette, 3);
+                $levels:     list.nth($palette, 2);
 
-                $palette: fn.palette($base-color, map.get($variant, --contrasts, $contrasts), map.get($variant, --ranges, $ranges), list.nth(map.get($variant, --palettes, --base), 1), config.$palette-chroma-easing);
+                $palette: fn.palette($base-color, map.get($variant, --levels, $levels), list.nth(map.get($variant, --palettes, --base), 1));
                 $compiled: props.merge($compiled, ( $palette-name: $palette ));
             }
 
diff --git a/src/_functions.scss b/src/_functions.scss
index 27b850c..62caf8c 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -7,49 +7,41 @@
 @use 'iro-sass/src/easing';
 @use 'apca';
 
-@function palette($base-color, $contrasts, $chroma-range: 1, $ref-color: $base-color, $chroma-easing: 'ease') {
+@function palette($base-color, $levels, $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: apca.sRGB_to_Y($ref-lch);
 
-    $cmax: math.max(map.values($contrasts)...);
-    $cmax: math.max($cmax, math.abs(math.min(map.values($contrasts)...)));
-
     $black-y: apca.sRGB_to_Y(#000);
     $white-y: apca.sRGB_to_Y(#fff);
 
-    $chroma-inv: false;
-    @if $chroma-range < 0 {
-        $chroma-inv: true;
-        $chroma-range: -1 * $chroma-range;
-    }
-    $chroma-easing: meta.get-function($chroma-easing, $module: easing);
-
     $palette: ();
 
-    @each $key, $contrast in $contrasts {
-        $y: apca.reverse($contrast, $ref-y);
-        $l: color.channel($base-lch, 'lightness');
+    @each $key, $level in $levels {
+        $color: list.nth($level, 1);
+        $y: 0;
         $c: 1;
 
-        @if $y != false {
-            $l: color.channel(apca.Y_to_sRGB($y), 'lightness', oklch);
-        } @else {
-            $y: $ref-y;
+        @if list.length($level) > 1 {
+            $c: list.nth($level, 2);
         }
 
-        @if $chroma-range != 1 {
-            $c: if($ref-l > 50%, math.clamp(0, math.div($contrast, $cmax), 1), -1 * math.clamp(-1, math.div($contrast, $cmax), 0));
-            @if $chroma-inv {
-                $c: 1 - $c;
+        @if meta.type-of($color) != 'color' {
+            $y: apca.reverse($color, $ref-y);
+            $l: color.channel($base-lch, 'lightness');
+
+            @if $y != false {
+                $l: color.channel(apca.Y_to_sRGB($y), 'lightness', oklch);
+            } @else {
+                $y: $ref-y;
             }
-            $c: meta.call($chroma-easing, $c);
-            $c: $chroma-range + (1 - $chroma-range) * $c;
-        }
 
-        $color: oklch($l ($c * color.channel($base-lch, 'chroma')) color.channel($base-lch, 'hue'));
+            $color: oklch($l ($c * color.channel($base-lch, 'chroma')) color.channel($base-lch, 'hue'));
+        } @else {
+            $y: apca.sRGB_to_Y($color);
+        }
 
         $contrast-black: apca.contrast($black-y, $y);
         $contrast-white: apca.contrast($white-y, $y);
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss
index 6fbe153..8a6cdb2 100644
--- a/src/objects/_palette.scss
+++ b/src/objects/_palette.scss
@@ -14,11 +14,11 @@
         @include bem.elem('item') {
             flex: 1 1 auto;
 
-            $palette:   map.get(config.$themes, config.$theme-default, light, --palettes, --base);
-            $contrasts: map.get(config.$themes, config.$theme-default, light, --contrasts, list.nth($palette, 2));
+            $palette: map.get(config.$themes, config.$theme-default, light, --palettes, --base);
+            $levels:  map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2));
 
-            @for $i from 1 through list.length($contrasts) {
-                $key: list.nth(map.keys($contrasts), $i);
+            @for $i from 1 through list.length($levels) {
+                $key: list.nth(map.keys($levels), $i);
 
                 &:nth-child(#{$i}) {
                     background-color: props.get(core.$theme, --base, $key);
@@ -27,12 +27,12 @@
         }
 
         @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, light, --palettes) {
-            $contrasts: map.get(config.$themes, config.$theme-default, light, --contrasts, list.nth($palette, 2));
+            $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2));
 
             @include bem.modifier(string.slice($palette-name, 3)) {
                 @include bem.elem('item') {
-                    @for $i from 1 through list.length($contrasts) {
-                        $key: list.nth(map.keys($contrasts), $i);
+                    @for $i from 1 through list.length($levels) {
+                        $key: list.nth(map.keys($levels), $i);
         
                         &:nth-child(#{$i}) {
                             background-color: props.get(core.$theme, $palette-name, $key);
@@ -44,12 +44,12 @@
 
         @include bem.modifier('static') {
             @each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
-                $contrasts: map.get(config.$static-colors, --contrasts);
+                $levels: map.get(config.$static-colors, --levels);
 
                 @include bem.modifier(string.slice($palette-name, 3)) {
                     @include bem.elem('item') {
-                        @for $i from 1 through list.length($contrasts) {
-                            $key: list.nth(map.keys($contrasts), $i);
+                        @for $i from 1 through list.length($levels) {
+                            $key: list.nth(map.keys($levels), $i);
             
                             &:nth-child(#{$i}) {
                                 background-color: props.get(core.$theme, #{$palette-name}-static, $key);