refactor: use color scale instead of darken function (#604)

This PR replaces all usages of `darken()` with the Sass module color scale method `color.scale()`. Fixes #597
sebnitu · May 29, 2021 · ce639fd · ce639fd
1 parent d0766d9
commit ce639fd
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 36 deletions.
diff --git a/docs/dist/styles.css b/docs/dist/styles.css
diff --git a/docs/dist/styles.css.map b/docs/dist/styles.css.map
diff --git a/docs/dist/styles.min.css b/docs/dist/styles.min.css
diff --git a/packages/button/src/_button_color.scss b/packages/button/src/_button_color.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "@vrembem/core";
 @use "./variables" as var;
 
@@ -51,15 +52,15 @@ $_v: var.$prefix-modifier-value;
   color: core.$white;
 
   &:hover {
-    background: darken(core.$primary, 6%);
+    background: color.scale(core.$primary, $lightness: -6%);
   }
 
   &:focus {
-    background: darken(core.$primary, 9%);
+    background: color.scale(core.$primary, $lightness: -9%);
   }
 
   &:active {
-    background: darken(core.$primary, 12%);
+    background: color.scale(core.$primary, $lightness: -12%);
   }
 
   &.is-loading::after {
@@ -72,15 +73,15 @@ $_v: var.$prefix-modifier-value;
   color: core.$white;
 
   &:hover {
-    background: darken(core.$secondary, 6%);
+    background: color.scale(core.$secondary, $lightness: -6%);
   }
 
   &:focus {
-    background: darken(core.$secondary, 9%);
+    background: color.scale(core.$secondary, $lightness: -9%);
   }
 
   &:active {
-    background: darken(core.$secondary, 12%);
+    background: color.scale(core.$secondary, $lightness: -12%);
   }
 
   &.is-loading::after {

diff --git a/packages/icon-action/src/_icon-action_state.scss b/packages/icon-action/src/_icon-action_state.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "@vrembem/core";
 @use "./variables" as var;
 
@@ -10,15 +11,15 @@ $_v: var.$prefix-modifier-value;
   color: core.color-switch(core.$info);
 
   &:hover {
-    background: darken(core.$info, 10%);
+    background: color.scale(core.$info, $lightness: -10%);
   }
 
   &:focus {
-    background: darken(core.$info, 20%);
+    background: color.scale(core.$info, $lightness: -20%);
   }
 
   &:active {
-    background: darken(core.$info, 20%);
+    background: color.scale(core.$info, $lightness: -30%);
   }
 }
 
@@ -27,15 +28,15 @@ $_v: var.$prefix-modifier-value;
   color: core.color-switch(core.$success);
 
   &:hover {
-    background: darken(core.$success, 10%);
+    background: color.scale(core.$success, $lightness: -10%);
   }
 
   &:focus {
-    background: darken(core.$success, 20%);
+    background: color.scale(core.$success, $lightness: -20%);
   }
 
   &:active {
-    background: darken(core.$success, 20%);
+    background: color.scale(core.$success, $lightness: -30%);
   }
 }
 
@@ -44,15 +45,15 @@ $_v: var.$prefix-modifier-value;
   color: core.color-switch(core.$caution);
 
   &:hover {
-    background: darken(core.$caution, 5%);
+    background: color.scale(core.$caution, $lightness: -10%);
   }
 
   &:focus {
-    background: darken(core.$caution, 10%);
+    background: color.scale(core.$caution, $lightness: -20%);
   }
 
   &:active {
-    background: darken(core.$caution, 10%);
+    background: color.scale(core.$caution, $lightness: -30%);
   }
 }
 
@@ -61,14 +62,14 @@ $_v: var.$prefix-modifier-value;
   color: core.color-switch(core.$danger);
 
   &:hover {
-    background: darken(core.$danger, 10%);
+    background: color.scale(core.$danger, $lightness: -10%);
   }
 
   &:focus {
-    background: darken(core.$danger, 20%);
+    background: color.scale(core.$danger, $lightness: -20%);
   }
 
   &:active {
-    background: darken(core.$danger, 20%);
+    background: color.scale(core.$danger, $lightness: -30%);
   }
 }