diff --git a/packages/themes/docs/sass.md b/packages/themes/docs/sass.md index 9fbee0389cde..b238c3a7c965 100644 --- a/packages/themes/docs/sass.md +++ b/packages/themes/docs/sass.md @@ -3326,7 +3326,7 @@ $hover-danger: if( 'hover-danger' ), map-get($carbon--theme, 'hover-danger'), - #ba1b23 + #b81921 ); ``` diff --git a/packages/themes/package.json b/packages/themes/package.json index a3aa6a968117..33de5fcc29db 100644 --- a/packages/themes/package.json +++ b/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", diff --git a/packages/themes/src/__tests__/tools-test.js b/packages/themes/src/__tests__/tools-test.js new file mode 100644 index 000000000000..8553fca036eb --- /dev/null +++ b/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); + }); + }); +}); diff --git a/packages/themes/src/g10.js b/packages/themes/src/g10.js index ca4aee63b6a6..9653187e4d05 100644 --- a/packages/themes/src/g10.js +++ b/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'; diff --git a/packages/themes/src/g100.js b/packages/themes/src/g100.js index 4a0674e84e91..7116cb235616 100644 --- a/packages/themes/src/g100.js +++ b/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'; diff --git a/packages/themes/src/g90.js b/packages/themes/src/g90.js index 780e1816dffe..90ebb819d359 100644 --- a/packages/themes/src/g90.js +++ b/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'; diff --git a/packages/themes/src/tools.js b/packages/themes/src/tools.js new file mode 100644 index 000000000000..c19d2e0d8c90 --- /dev/null +++ b/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(); +} diff --git a/packages/themes/src/white.js b/packages/themes/src/white.js index eccee01a609c..5e2f366653da 100644 --- a/packages/themes/src/white.js +++ b/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'; diff --git a/yarn.lock b/yarn.lock index e560b5eee5cc..be370b2b73cf 100644 --- a/yarn.lock +++ b/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==