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

2 files changed, 16 insertions, 0 deletions

diff --git a/scss/_functions.scss b/scss/_functions.scss
index 98a2587a1..f3574d0b3 100644
--- 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 f01667ed8..531f2eb47 100644
--- 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
 //