add theme-color-level function and interval so we can generate shades of colors

diff --git a/scss/_functions.scss b/scss/_functions.scss
index 98a2587a1a1fcc6dd2278bc0af8c236be4b6a1e7..f3574d0b373d109bdc4ae88b7af96271e408bb94 100644 (file)
--- a/scss/_functions.scss
+++ b/scss/_functions.scss
@@ -67,6 +67,20 @@
 @function color($key: "blue") {
   @return map-get($colors, $key);
 }
+
 @function theme-color($key: "primary") {
   @return map-get($theme-colors, $key);
 }
+
+// Request a theme color level
+@function theme-color-level($color-name: "primary", $level: 0) {
+  $color: theme-color($color-name);
+  $color-base: if($level > 0, #000, #fff);
+
+  @if $level < 0 {
+    // Lighter values need a quick double negative for the Sass math to work
+    @return mix($color-base, $color, $level * -1 * $theme-color-interval);
+  } @else {
+    @return mix($color-base, $color, $level * $theme-color-interval);
+  }
+}

diff --git a/scss/_variables.scss b/scss/_variables.scss
index f01667ed81bf0f1e971fadd55ffe85c1614e4f60..531f2eb47edc964ad296f2a4c8ab40dbc019b07e 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -107,6 +107,8 @@ $theme-colors: (
   dark: $gray-800
 ) !default;
 
+// Set a specific jump point for requesting color jumps
+$theme-color-interval: 8% !default;
 
 // Colors
 //