feat(themes): enable dynamic values for interactive color tokens (#5269)

packages/themes/docs/sass.md

@@ -3326,7 +3326,7 @@ $hover-danger: if(
       'hover-danger'
     ),
   map-get($carbon--theme, 'hover-danger'),
-  #ba1b23
+  #b81921
 );
 ```
 

packages/themes/package.json

@@ -26,7 +26,8 @@
   "dependencies": {
     "@carbon/colors": "^10.7.0",
     "@carbon/layout": "^10.7.0",
-    "@carbon/type": "^10.8.0"
+    "@carbon/type": "^10.8.0",
+    "color": "^3.1.2"
   },
   "devDependencies": {
     "@carbon/cli-reporter": "10.3.0",

packages/themes/src/__tests__/tools-test.js

@@ -0,0 +1,43 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+import Color from 'color';
+import { adjustLightness } from '../tools';
+import { blue60 } from '@carbon/colors';
+
+describe('tools', () => {
+  describe('adjustLightness', () => {
+    const SHIFT_AMOUNT = 5;
+
+    const baseColor = Color(blue60);
+    const baseLightness = baseColor
+      .hsl()
+      .round()
+      .object().l;
+
+    it('should increase lightness by a specified amount', () => {
+      const newColor = Color(adjustLightness(blue60, SHIFT_AMOUNT));
+      const newLightness = newColor
+        .hsl()
+        .round()
+        .object().l;
+      expect(newLightness).toEqual(baseLightness + SHIFT_AMOUNT);
+    });
+
+    it('should decrease lightness by a specified amount when given a negative shift', () => {
+      const newColor = Color(adjustLightness(blue60, SHIFT_AMOUNT * -1));
+      const newLightness = newColor
+        .hsl()
+        .round()
+        .object().l;
+
+      expect(newLightness).toEqual(baseLightness - SHIFT_AMOUNT);
+    });
+  });
+});

packages/themes/src/g10.js

@@ -4,6 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import { adjustLightness } from './tools';
 
 import {
   // Blue
@@ -111,7 +112,7 @@ export const inverseHoverUI = '#4c4c4c';
 
 export const hoverSelectedUI = '#cacaca';
 
-export const hoverDanger = '#ba1b23';
+export const hoverDanger = adjustLightness(danger, -8);
 export const activeDanger = red80;
 
 export const hoverRow = '#e5e5e5';

packages/themes/src/g100.js

@@ -4,6 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import { adjustLightness } from './tools';
 
 import {
   // Blue
@@ -110,7 +111,7 @@ export const inverseHoverUI = '#e5e5e5';
 
 export const hoverSelectedUI = '#4c4c4c';
 
-export const hoverDanger = '#ba1b23';
+export const hoverDanger = adjustLightness(danger, -8);
 export const activeDanger = red80;
 
 export const hoverRow = '#353535';

packages/themes/src/g90.js

@@ -4,6 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import { adjustLightness } from './tools';
 
 import {
   // Blue
@@ -111,7 +112,7 @@ export const inverseHoverUI = '#e5e5e5';
 
 export const hoverSelectedUI = '#656565';
 
-export const hoverDanger = '#ba1b23';
+export const hoverDanger = adjustLightness(danger, -8);
 export const activeDanger = red80;
 
 export const hoverRow = '#4c4c4c';

packages/themes/src/tools.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import Color from 'color';
+
+/**
+ * Adjust a given token's lightness by a specified percentage
+ * Example: token = hsl(10, 10, 10);
+ * adjustLightness(token, 5) === hsl(10, 10, 15);
+ * adjustLightness(token, -5) === hsl(10, 10, 5);
+ * @param {string} token
+ * @param {integer} shift The number of percentage points (positive or negative) by which to shift the lightness of a token.
+ * @returns {string}
+ */
+export function adjustLightness(token, shift) {
+  const original = Color(token)
+    .hsl()
+    .object();
+
+  return Color({ ...original, l: (original.l += shift) })
+    .round()
+    .hex()
+    .toLowerCase();
+}

packages/themes/src/white.js

@@ -4,6 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import { adjustLightness } from './tools';
 
 import {
   // Blue
@@ -111,7 +112,7 @@ export const inverseHoverUI = '#4c4c4c';
 
 export const hoverSelectedUI = '#cacaca';
 
-export const hoverDanger = '#ba1b23';
+export const hoverDanger = adjustLightness(danger, -8);
 export const activeDanger = red80;
 
 export const hoverRow = '#e5e5e5';

yarn.lock

@@ -6708,7 +6708,7 @@ [email protected]:
     color-convert "^1.9.1"
     color-string "^1.5.2"
 
-color@^3.0.0:
+color@^3.0.0, color@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/color/-/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10"
   integrity sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==