Add $darken_ Utility Functions for Darkening Palette Colors

lib/KThemePlugin.js

@@ -1,5 +1,6 @@
 import { isNuxtServerSideRendering } from '../lib/utils';
 import computedClass from './styles/computedClass';
+import { darken1, darken2, darken3 } from './styles/darkenColors.js';
 
 import KBreadcrumbs from './KBreadcrumbs';
 import KButton from './buttons-and-links/KButton';
@@ -115,6 +116,10 @@ export default function KThemePlugin(Vue) {
   Vue.prototype.$themePalette = themePalette();
   Vue.prototype.$computedClass = computedClass;
 
+  Vue.prototype.$darken1 = darken1;
+  Vue.prototype.$darken2 = darken2;
+  Vue.prototype.$darken3 = darken3;
+
   // globally-accessible components
   Vue.component('KButton', KButton);
   Vue.component('KButtonGroup', KButtonGroup);

lib/styles/darkenColors.js

@@ -0,0 +1,19 @@
+import Color from 'color';
+
+export function darken1(color) {
+  return Color(color)
+    .darken(0.15)
+    .hex();
+}
+
+export function darken2(color) {
+  return Color(color)
+    .darken(0.3)
+    .hex();
+}
+
+export function darken3(color) {
+  return Color(color)
+    .darken(0.45)
+    .hex();
+}

package.json

@@ -30,6 +30,7 @@
     "@vue/composition-api": "1.7.2",
     "aphrodite": "https://github.com/learningequality/aphrodite/",
     "autosize": "3.0.21",
+    "color": "3.2.1",
     "css-element-queries": "1.2.0",
     "date-fns": "1.30.1",
     "frame-throttle": "3.0.0",

yarn.lock

@@ -4021,7 +4021,7 @@ color-string@^1.6.0:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
 
-color@^3.0.0:
+color@3.2.1, color@^3.0.0:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164"
   integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==