Merge pull request #728 from shivam-daksh/fix-issue-4634

 Add $darken_ Utility Functions for Darkening Palette Colors

CHANGELOG.md

@@ -4,6 +4,17 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Upcoming version 5.x.x (`develop` branch)
 
+- [#728]
+  - **Description:** Adds `$darken_` utility functions for darkening palette colors and ensures compatibility with Node.js v10 by pinning the `color` package version to `3.2.1`.
+  - **Products impact:** Kolibri Design System
+  - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/726
+  - **Components:** Styling utilities (`$darken1(hexColorValue)`,`$darken2(hexColorValue)` and `$darken3(hexColorValue)` functions)
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** Ensure to install the exact `color` version specified in `package.json` to maintain compatibility with Node.js v10.
+
+[#728]: https://github.com/learningequality/kolibri-design-system/pull/728
+
 - [#738]
   - **Description:** Bump KDS version to 5.0.0-rc2.
   - **Products impact:** -.

docs/pages/colors.vue

@@ -92,7 +92,40 @@
         <li><code>palette</code> refers to <code>$themePalette</code></li>
       </ul>
 
+      <h3>Darken utilities</h3>
 
+      <p>You can apply darken utilities <code>$darken1</code>, <code>$darken2</code>, and <code>$darken3</code> to palette colors and tokens to achieve their darker shades. They are available on every Vue component.</p>
+
+      <DocsShowCode language="html">
+        <div :style="{ backgroundColor: $themePalette.red.v_1100 }">
+          base
+        </div>
+        <div :style="{ backgroundColor: $darken1($themePalette.red.v_1100) }">
+          $darken1
+        </div>
+        <div :style="{ backgroundColor: $darken2($themePalette.red.v_1100) }">
+          $darken2
+        </div>
+        <div :style="{ backgroundColor: $darken3($themePalette.red.v_1100) }">
+          $darken3
+        </div>
+      </DocsShowCode>
+      <DocsShow>
+        <div class="darken-block" :style="{ backgroundColor: $themePalette.red.v_1100 }">
+          <code>base</code>
+        </div>
+        <div class="darken-block" :style="{ backgroundColor: $darken1($themePalette.red.v_1100) }">
+          <code>$darken1</code>
+        </div>
+        <div class="darken-block" :style="{ backgroundColor: $darken2($themePalette.red.v_1100) }">
+          <code>$darken2</code>
+        </div>
+        <div class="darken-block" :style="{ backgroundColor: $darken3($themePalette.red.v_1100) }">
+          <code>$darken3</code>
+        </div>
+      </DocsShow>
+
+      <p>These utilities shouldn't be overused. Always check if there is a shade in the palette available that can be used instead.</p>
     </DocsPageSection>
 
 
@@ -323,4 +356,17 @@
     width: 350px;
   }
 
+  .darken-block {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 140px;
+    height: 140px;
+
+    code {
+      padding: 4px;
+      background-color: rgba(255, 255, 255, 0.8);
+    }
+  }
+
 </style>

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.19)
+    .hex();
+}
+
+export function darken2(color) {
+  return Color(color)
+    .darken(0.4)
+    .hex();
+}
+
+export function darken3(color) {
+  return Color(color)
+    .darken(0.58)
+    .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==