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 @@ color@3.0.x:
  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==