Calculate gray palette via contrast automatically

8 files changed, 87 insertions, 73 deletions

diff --git a/package.json b/package.json
index de64393..fa4f082 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
         "pug": "^3.0.0",
         "pug-cli": "^1.0.0-alpha6",
         "sass": "^1.28.0",
-        "stylelint": "^14.3.0",
+        "stylelint": "^14.5.0",
         "stylelint-config-sass-guidelines": "^9.0.1",
         "svg-sprite": "^1.5.4"
     }
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');
 }
 
diff --git a/tpl/index.pug b/tpl/index.pug
index 4e56564..d8984ce 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -450,8 +450,8 @@ html
                         +action-menu-slot(class='l-card l-card--flush')
                             +avatar(block=true circle=true size='sm' src='avatar.png' class='l-card__block')
                             .l-card__block.l-card__block--main
-                                strong.u-db= 'Volpeon'
-                                small.u-db= '@volpeon@mk.vulpes.one'
+                                strong.u-d-block= 'Volpeon'
+                                small.u-d-block= '@volpeon@mk.vulpes.one'
                         +action-menu-separator
                         +action-menu-item(icon='user')= 'View profile'
                         +action-menu-item(icon='red' iconIsStatus=true)= 'Mark as away'
@@ -528,7 +528,7 @@ html
             +box
                 +backdrop
                     +dialog('Lorem ipsum')
-                        p.u-mt0= loremIpsum
+                        p.u-mt-0= loremIpsum
                         p= loremIpsum
                         p= loremIpsum
                         p= loremIpsum
diff --git a/tpl/objects/action-menu.pug b/tpl/objects/action-menu.pug
index e8cecb2..751e29d 100644
--- a/tpl/objects/action-menu.pug
+++ b/tpl/objects/action-menu.pug
@@ -2,7 +2,7 @@ include icon.pug
 include status-indicator.pug
 
 mixin action-menu
-    .o-action-menu.u-ps.t-raised
+    .o-action-menu.u-p-static.t-raised
         block
 
 mixin action-menu-item
diff --git a/tpl/objects/avatar.pug b/tpl/objects/avatar.pug
index 16de7c5..9e08a16 100644
--- a/tpl/objects/avatar.pug
+++ b/tpl/objects/avatar.pug
@@ -5,7 +5,7 @@ mixin avatar
         let classes = {
             'o-avatar':         true,
             'o-avatar--circle': attributes.circle,
-            'u-db':             attributes.block
+            'u-d-block':            attributes.block
         }
         if (attributes.class) {
             classes[attributes.class] = true;
diff --git a/tpl/objects/backdrop.pug b/tpl/objects/backdrop.pug
index 3e3eb7f..5d0c9e8 100644
--- a/tpl/objects/backdrop.pug
+++ b/tpl/objects/backdrop.pug
@@ -1,3 +1,3 @@
 mixin backdrop
-    .o-backdrop.u-ps(style={ width: '100%', 'min-height': '5em', 'max-height': '40em' })
+    .o-backdrop.u-p-static(style={ width: '100%', 'min-height': '5em', 'max-height': '40em' })
         block
diff --git a/yarn.lock b/yarn.lock
index 47c49bf..a946522 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -623,6 +623,11 @@ cosmiconfig@^7.0.1:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
+css-functions-list@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/css-functions-list/-/css-functions-list-3.0.0.tgz#faa770a0666aea11435efc0889935336cea564be"
+  integrity sha512-rfwhBOvXVFcKrSwmLxD8JQyuEEy/3g3Y9FMI2l6iV558Coeo1ucXypXb4rwrVpk5Osh5ViXp2DTgafw8WxglhQ==
+
 css-select-base-adapter@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7"
@@ -1265,7 +1270,7 @@ internal-slot@^1.0.3:
 
 "iro-sass@git+https://git.vulpes.one/git/iro-sass.git":
   version "1.0.2"
-  resolved "git+https://git.vulpes.one/git/iro-sass.git#4c9a427806b47b916849dbc98330fdbb469b659b"
+  resolved "git+https://git.vulpes.one/git/iro-sass.git#ac1f3da1da7759d8537b60a7f6b5ceb1a30a361e"
 
 is-arrayish@^0.2.1:
   version "0.2.1"
@@ -1980,7 +1985,7 @@ postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.3.11, postcss@^8.4.5:
+postcss@^8.3.11, postcss@^8.4.6:
   version "8.4.6"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.6.tgz#c5ff3c3c457a23864f32cb45ac9b741498a09ae1"
   integrity sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==
@@ -2688,14 +2693,15 @@ stylelint-scss@^4.0.0:
     postcss-selector-parser "^6.0.6"
     postcss-value-parser "^4.1.0"
 
-stylelint@^14.3.0:
-  version "14.3.0"
-  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-14.3.0.tgz#26b62730da7b3dc320021fc469d80048d7b77ebe"
-  integrity sha512-PZXSwtJe4f4qBPWBwAbHL0M0Qjrv8iHN+cLpUNsffaVMS3YzpDDRI73+2lsqLAYfQEzxRwpll6BDKImREbpHWA==
+stylelint@^14.5.0:
+  version "14.5.0"
+  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-14.5.0.tgz#d94252027164bc918303a6b782652931421d8871"
+  integrity sha512-4dvQjrhAz2njLoE1OvUEZpryNWcmx2w5Lq5jlibxFv6b5W6O8/vob12M2ZzhX3Ndzs5f67F+BEYmhnQXOwfVYQ==
   dependencies:
     balanced-match "^2.0.0"
     colord "^2.9.2"
     cosmiconfig "^7.0.1"
+    css-functions-list "^3.0.0"
     debug "^4.3.3"
     execall "^2.0.0"
     fast-glob "^3.2.11"
@@ -2717,7 +2723,7 @@ stylelint@^14.3.0:
     normalize-path "^3.0.0"
     normalize-selector "^0.2.0"
     picocolors "^1.0.0"
-    postcss "^8.4.5"
+    postcss "^8.4.6"
     postcss-media-query-parser "^0.2.3"
     postcss-resolve-nested-selector "^0.1.1"
     postcss-safe-parser "^6.0.0"