feat(themes): enable dynamic values for interactive color tokens
MODIFY
packages/themes/docs/sass.md
packages/themes/docs/sass.md
@@ -3326,7 +3326,7 @@ $hover-danger: if(
'hover-danger'
),
map-get($carbon--theme, 'hover-danger'),
- #ba1b23
+ #b81921
);
```

MODIFY
packages/themes/package.json
packages/themes/package.json
"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",

ADD
packages/themes/src/__tests__/tools-test.js
+/**
+ * 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);
+ });
+ });
+});

MODIFY
packages/themes/src/g10.js
packages/themes/src/g10.js
* 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';

MODIFY
packages/themes/src/g100.js
packages/themes/src/g100.js
* 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';

MODIFY
packages/themes/src/g90.js
packages/themes/src/g90.js
* 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';

ADD
packages/themes/src/tools.js
+/**
+ * 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();
+}

MODIFY
packages/themes/src/white.js
packages/themes/src/white.js
* 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';

MODIFY
yarn.lock
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==

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