Calculate gray palette via contrast automatically

2 files changed, 67 insertions, 59 deletions

diff --git a/src/_utils.scss b/src/_utils.scss
index 7ae2d6e..ae72f65 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -1,11 +1,11 @@
 @use 'iro-sass/src/index' as iro;
 @use 'functions' as fn;
 
-@include iro.bem-utility('db') {
+@include iro.bem-utility('d-block') {
     display: block;
 }
 
-@include iro.bem-utility('dc') {
+@include iro.bem-utility('d-contents') {
     display: contents;
 }
 
@@ -14,15 +14,15 @@
     text-overflow: ellipsis;
 }
 
-@include iro.bem-utility('ps') {
+@include iro.bem-utility('p-static') {
     position: static;
 }
 
-@include iro.bem-utility('pr') {
+@include iro.bem-utility('p-relative') {
     position: relative;
 }
 
-@include iro.bem-utility('mt0') {
+@include iro.bem-utility('mt-0') {
     margin-top: 0;
 }
 
diff --git a/src/_vars.scss b/src/_vars.scss
index 71f0b1f..cafdb3d 100644
--- a/src/_vars.scss
+++ b/src/_vars.scss
@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use 'iro-sass/src/index' as iro;
 @use 'include-media/dist/include-media' as media;
 @use '@oddbird/blend';
@@ -17,6 +18,42 @@ media.$unit-intervals: (
     '':    0
 );
 
+$grays: ();
+
+@for $i from 0 through 100 {
+    $grays: append($grays, $i * 1%);
+}
+
+$grays-rev: iro.fn-list-reverse($grays);
+
+@function find-gray($lightness, $contrast) {
+    $base: blend.lch($lightness 0 0);
+    $dir:  if($contrast < 0, -1, 1) * if($lightness >= 50%, 1, -1);
+    $args: ();
+
+    @if $dir == 1 {
+        @each $gray in $grays-rev {
+            @if $gray < $lightness {
+                $args: append($args, blend.lch($gray 0 0));
+            }
+        }
+    } @else {
+        @each $gray in $grays {
+            @if $gray > $lightness {
+                $args: append($args, blend.lch($gray 0 0));
+            }
+        }
+    }
+
+    @if length($args) == 0 {
+        @return $base;
+    }
+
+    $args: append($args, math.abs($contrast));
+    $result: blend.contrast($base, $args...);
+    @return hsl(fn.color(--gray-h), fn.color(--gray-s), lightness($result));
+}
+
 //
 
 @include iro.props-store((
@@ -95,9 +132,28 @@ media.$unit-intervals: (
     );
 }
 
+@function gray-palette($lightness) {
+    @return (
+        --gray1:  find-gray($lightness, -1.1),
+        --gray2:  find-gray($lightness, -1.05),
+        --gray3:  find-gray($lightness, 1),
+        --gray4:  find-gray($lightness, 1.15),
+        --gray5:  find-gray($lightness, 1.37),
+        --gray6:  find-gray($lightness, 1.73),
+        --gray7:  find-gray($lightness, 2.4),
+        --gray8:  find-gray($lightness, 3.26),
+        --gray9:  find-gray($lightness, 7.14),
+        --gray10: find-gray($lightness, 11),
+        --gray11: find-gray($lightness, 17.4),
+    );
+}
+
 @include iro.fn-execute {
     @include iro.props-store((
         --colors: (
+            --gray-h: 220,
+            --gray-s: 5%,
+
             --bg-hi2: fn.color(--gray1, null), // Lightest background
             --bg-hi:  fn.color(--gray2, null), // Lighter background
             --bg:     fn.color(--gray3, null), // Background
@@ -139,35 +195,11 @@ media.$unit-intervals: (
     ), 'colors');
 
     @include iro.props-store((
-        --colors: (
-            --gray1:  hsl(210, 0%, 100%), // 1.11
-            --gray2:  hsl(210, 0%, 98%),  // 1.07
-            --gray3:  hsl(210, 0%, 95%),  // 1
-            --gray4:  hsl(210, 0%, 90%),  // 1.11
-            --gray5:  hsl(210, 0%, 87%),  // 1.2
-            --gray6:  hsl(210, 0%, 78%),  // 1.51
-            --gray7:  hsl(210, 0%, 69%),  // 1.93
-            --gray8:  hsl(210, 0%, 55%),  // 3
-            --gray9:  hsl(210, 0%, 38%),  // 5.53
-            --gray10: hsl(210, 0%, 19%),  // 11.78
-            --gray11: hsl(210, 0%, 0%),   // 18.75
-        )
+        --colors: gray-palette(94%)
     ), 'palette-light');
 
     @include iro.props-store((
-        --colors: (
-            --gray1:  hsl(210, 0%, 100%), // 1
-            --gray2:  hsl(210, 0%, 100%), // 1
-            --gray3:  hsl(210, 0%, 100%), // 1
-            --gray4:  hsl(210, 0%, 95%),  // 1.11
-            --gray5:  hsl(210, 0%, 92%),  // 1.19
-            --gray6:  hsl(210, 0%, 82%),  // 1.52
-            --gray7:  hsl(210, 0%, 73%),  // 1.94
-            --gray8:  hsl(210, 0%, 58%),  // 3.03
-            --gray9:  hsl(210, 0%, 41%),  // 5.48
-            --gray10: hsl(210, 0%, 22%),  // 11.72
-            --gray11: hsl(210, 0%, 0%),   // 21
-        )
+        --colors: gray-palette(100%)
     ), 'palette-light-raised');
 }
 
@@ -188,37 +220,13 @@ media.$unit-intervals: (
             ),
         )
     ), 'colors-dark');
-    
+
     @include iro.props-store((
-        --colors: (
-            --gray1:  hsl(210, 0%, 6%),   // 1.1
-            --gray2:  hsl(210, 0%, 8%),   // 1.05
-            --gray3:  hsl(210, 0%, 10%),  // 1
-            --gray4:  hsl(210, 0%, 14%),  // 1.12
-            --gray5:  hsl(210, 0%, 20%),  // 1.37
-            --gray6:  hsl(210, 0%, 26%),  // 1.73
-            --gray7:  hsl(210, 0%, 34%),  // 2.4
-            --gray8:  hsl(210, 0%, 42%),  // 3.26
-            --gray9:  hsl(210, 0%, 65%),  // 7.14
-            --gray10: hsl(210, 0%, 86%),  // 12.57
-            --gray11: hsl(210, 0%, 100%), // 17.4
-        )
+        --colors: gray-palette(9%)
     ), 'palette-dark');
-    
+
     @include iro.props-store((
-        --colors: (
-            --gray1:  hsl(210, 0%, 10%),  // 1.12
-            --gray2:  hsl(210, 0%, 12%),  // 1.06
-            --gray3:  hsl(210, 0%, 14%),  // 1
-            --gray4:  hsl(210, 0%, 18%),  // 1.14
-            --gray5:  hsl(210, 0%, 23%),  // 1.38
-            --gray6:  hsl(210, 0%, 29%),  // 1.75
-            --gray7:  hsl(210, 0%, 37%),  // 2.39
-            --gray8:  hsl(210, 0%, 45%),  // 3.27
-            --gray9:  hsl(210, 0%, 69%),  // 7.15
-            --gray10: hsl(210, 0%, 90%),  // 12.43
-            --gray11: hsl(210, 0%, 100%), // 15.52
-        )
+        --colors: gray-palette(16%)
     ), 'palette-dark-raised');
 }