From 113bcf54ceee7879e81a65e628099cf90361734e Mon Sep 17 00:00:00 2001 From: Jan Hassel Date: Thu, 7 Oct 2021 22:58:23 +0200 Subject: [PATCH] fix: add shadow token, update overlay token (#9812) * fix: add shadow token, update overlay token * chore: run prettier * fix(tokens): update overlay token in g80 theme Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- packages/components/src/globals/scss/_helper-mixins.scss | 2 +- .../src/__tests__/__snapshots__/PublicAPI-test.js.snap | 1 + packages/styles/scss/__tests__/theme-test.js | 1 + packages/styles/scss/utilities/_box-shadow.scss | 4 +++- packages/themes/src/g10.js | 2 ++ packages/themes/src/g100.js | 4 +++- packages/themes/src/g80.js | 4 +++- packages/themes/src/g90.js | 4 +++- packages/themes/src/next/g10.js | 1 + packages/themes/src/next/g100.js | 7 ++++++- packages/themes/src/next/g90.js | 7 ++++++- .../next/tokens/__tests__/__snapshots__/v11-test.js.snap | 1 + packages/themes/src/next/tokens/v11TokenGroup.js | 3 +++ packages/themes/src/next/white.js | 1 + packages/themes/src/tokens.js | 2 ++ packages/themes/src/v9.js | 3 ++- packages/themes/src/white.js | 2 ++ 17 files changed, 41 insertions(+), 8 deletions(-) diff --git a/packages/components/src/globals/scss/_helper-mixins.scss b/packages/components/src/globals/scss/_helper-mixins.scss index 8bbb63d3a663..9d928cb6e322 100644 --- a/packages/components/src/globals/scss/_helper-mixins.scss +++ b/packages/components/src/globals/scss/_helper-mixins.scss @@ -55,7 +55,7 @@ /// @example @include box-shadow; /// @group global-helpers @mixin box-shadow { - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 6px $shadow; } /// Adds outline styles depending on specific type diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap index 8d62e1a6b1db..875bace53a77 100644 --- a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -318,6 +318,7 @@ Array [ "scale", "selectedLightUI", "selectedUI", + "shadow", "size2XLarge", "sizeLarge", "sizeMedium", diff --git a/packages/styles/scss/__tests__/theme-test.js b/packages/styles/scss/__tests__/theme-test.js index 244b21093666..c31873150bcd 100644 --- a/packages/styles/scss/__tests__/theme-test.js +++ b/packages/styles/scss/__tests__/theme-test.js @@ -126,6 +126,7 @@ Array [ "highlight", "overlay", "toggle-off", + "shadow", "focus", "focus-inset", "focus-inverse", diff --git a/packages/styles/scss/utilities/_box-shadow.scss b/packages/styles/scss/utilities/_box-shadow.scss index cd309cb4016f..273f6bc12c3a 100644 --- a/packages/styles/scss/utilities/_box-shadow.scss +++ b/packages/styles/scss/utilities/_box-shadow.scss @@ -5,10 +5,12 @@ // LICENSE file in the root directory of this source tree. // +@use '../theme'; + /// Adds box shadow /// @access public /// @example @include box-shadow; /// @group utilities @mixin box-shadow { - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 6px theme.$shadow; } diff --git a/packages/themes/src/g10.js b/packages/themes/src/g10.js index 93631086aa35..4ab4b3ec91f9 100644 --- a/packages/themes/src/g10.js +++ b/packages/themes/src/g10.js @@ -37,6 +37,7 @@ import { // Constants white, + black, // Tools rgba, @@ -182,6 +183,7 @@ export const supportInfoInverse = inverseSupport04; export const overlay = overlay01; export const toggleOff = ui04; +export const shadow = rgba(black, 0.3); export const buttonPrimary = interactive01; export const buttonSecondary = interactive02; diff --git a/packages/themes/src/g100.js b/packages/themes/src/g100.js index 75aeba2352a1..e26fa82520a2 100644 --- a/packages/themes/src/g100.js +++ b/packages/themes/src/g100.js @@ -36,6 +36,7 @@ import { // Constants white, + black, // Tools rgba, @@ -86,7 +87,7 @@ export const inverseSupport02 = green50; export const inverseSupport03 = yellow; export const inverseSupport04 = blue60; -export const overlay01 = rgba(gray100, 0.7); +export const overlay01 = rgba(black, 0.65); export const danger01 = red60; export const danger02 = red50; @@ -181,6 +182,7 @@ export const supportInfoInverse = inverseSupport04; export const overlay = overlay01; export const toggleOff = ui04; +export const shadow = rgba(black, 0.8); export const buttonPrimary = interactive01; export const buttonSecondary = interactive02; diff --git a/packages/themes/src/g80.js b/packages/themes/src/g80.js index a3fd1c306bcb..48a407ebf097 100644 --- a/packages/themes/src/g80.js +++ b/packages/themes/src/g80.js @@ -37,6 +37,7 @@ import { // Constants white, + black, // Tools rgba, @@ -86,8 +87,9 @@ export const supportSuccessInverse = green50; export const supportWarningInverse = yellow30; export const supportInfoInverse = blue60; -export const overlay = rgba(gray100, 0.7); +export const overlay = rgba(black, 0.65); export const toggleOff = gray50; +export const shadow = rgba(black, 0.8); export const buttonPrimary = blue60; export const buttonSecondary = gray60; diff --git a/packages/themes/src/g90.js b/packages/themes/src/g90.js index 8a402752d663..1c82f1ee96bd 100644 --- a/packages/themes/src/g90.js +++ b/packages/themes/src/g90.js @@ -38,6 +38,7 @@ import { // Constants white, + black, // Tools rgba, @@ -88,7 +89,7 @@ export const inverseSupport02 = green50; export const inverseSupport03 = yellow; export const inverseSupport04 = blue60; -export const overlay01 = rgba(gray100, 0.7); +export const overlay01 = rgba(black, 0.65); export const danger01 = red60; export const danger02 = red40; @@ -183,6 +184,7 @@ export const supportInfoInverse = inverseSupport04; export const overlay = overlay01; export const toggleOff = ui04; +export const shadow = rgba(black, 0.8); export const buttonPrimary = interactive01; export const buttonSecondary = interactive02; diff --git a/packages/themes/src/next/g10.js b/packages/themes/src/next/g10.js index 036f585d0f92..9f56a2c37369 100644 --- a/packages/themes/src/next/g10.js +++ b/packages/themes/src/next/g10.js @@ -192,6 +192,7 @@ export const interactive = blue60; export const highlight = blue20; export const overlay = 'rgba(22, 22, 22, 0.5)'; export const toggleOff = gray50; +export const shadow = 'rgba(0, 0, 0, 0.3)'; export { // Type diff --git a/packages/themes/src/next/g100.js b/packages/themes/src/next/g100.js index 9f94922376f0..e4025736c52f 100644 --- a/packages/themes/src/next/g100.js +++ b/packages/themes/src/next/g100.js @@ -41,6 +41,10 @@ import { // Constants white, + black, + + // Tools + rgba, } from '@carbon/colors'; import { adjustLightness } from '../tools'; @@ -193,8 +197,9 @@ export const skeletonElement = gray80; // Misc export const interactive = blue50; export const highlight = blue20; -export const overlay = 'rgba(22, 22, 22, 0.5)'; +export const overlay = rgba(black, 0.65); export const toggleOff = gray50; +export const shadow = rgba(black, 0.8); export { // Type diff --git a/packages/themes/src/next/g90.js b/packages/themes/src/next/g90.js index 6ca00c2bee2f..8606bdb7930a 100644 --- a/packages/themes/src/next/g90.js +++ b/packages/themes/src/next/g90.js @@ -40,6 +40,10 @@ import { // Constants white, + black, + + // Tools + rgba, } from '@carbon/colors'; import { adjustLightness } from '../tools'; @@ -192,8 +196,9 @@ export const skeletonElement = gray70; // Misc export const interactive = blue50; export const highlight = blue70; -export const overlay = 'rgba(22, 22, 22, 0.7)'; +export const overlay = rgba(black, 0.65); export const toggleOff = gray50; +export const shadow = rgba(black, 0.8); export { // Type diff --git a/packages/themes/src/next/tokens/__tests__/__snapshots__/v11-test.js.snap b/packages/themes/src/next/tokens/__tests__/__snapshots__/v11-test.js.snap index 181d9068e21e..ff737aea4135 100644 --- a/packages/themes/src/next/tokens/__tests__/__snapshots__/v11-test.js.snap +++ b/packages/themes/src/next/tokens/__tests__/__snapshots__/v11-test.js.snap @@ -233,6 +233,7 @@ Array [ "highlight", "overlay", "toggle-off", + "shadow", "focus", "focus-inset", "focus-inverse", diff --git a/packages/themes/src/next/tokens/v11TokenGroup.js b/packages/themes/src/next/tokens/v11TokenGroup.js index 937a633dac75..d70bab34dff2 100644 --- a/packages/themes/src/next/tokens/v11TokenGroup.js +++ b/packages/themes/src/next/tokens/v11TokenGroup.js @@ -350,6 +350,9 @@ export const group = TokenGroup.create({ { name: 'toggle-off', }, + { + name: 'shadow', + }, focus, skeleton, diff --git a/packages/themes/src/next/white.js b/packages/themes/src/next/white.js index 6bbddd37bb67..d930c5f9cda1 100644 --- a/packages/themes/src/next/white.js +++ b/packages/themes/src/next/white.js @@ -191,6 +191,7 @@ export const interactive = blue60; export const highlight = blue20; export const overlay = 'rgba(22, 22, 22, 0.5)'; export const toggleOff = gray50; +export const shadow = 'rgba(0, 0, 0, 0.3)'; // Type export { diff --git a/packages/themes/src/tokens.js b/packages/themes/src/tokens.js index 2140cdaf82d0..9a65ea2f0852 100644 --- a/packages/themes/src/tokens.js +++ b/packages/themes/src/tokens.js @@ -150,6 +150,7 @@ const colors = [ 'overlay', 'toggleOff', + 'shadow', 'buttonPrimary', 'buttonSecondary', @@ -346,6 +347,7 @@ export const unstable__meta = { 'overlay', 'toggleOff', + 'shadow', 'buttonPrimary', 'buttonSecondary', diff --git a/packages/themes/src/v9.js b/packages/themes/src/v9.js index 3b18d198b9f0..09009202ec20 100644 --- a/packages/themes/src/v9.js +++ b/packages/themes/src/v9.js @@ -6,7 +6,7 @@ */ import { adjustLightness } from './tools'; -import { white, red60, gray40 } from '@carbon/colors'; +import { white, red60, gray40, black, rgba } from '@carbon/colors'; export const interactive01 = '#3d70b2'; export const interactive02 = '#4d5358'; @@ -147,6 +147,7 @@ export const supportInfoInverse = inverseSupport04; export const overlay = overlay01; export const toggleOff = ui04; +export const shadow = rgba(black, 0.3); export const buttonPrimary = interactive01; export const buttonSecondary = interactive02; diff --git a/packages/themes/src/white.js b/packages/themes/src/white.js index c928676bf532..19fe02f00ae5 100644 --- a/packages/themes/src/white.js +++ b/packages/themes/src/white.js @@ -37,6 +37,7 @@ import { // Constants white, + black, // Tools rgba, @@ -182,6 +183,7 @@ export const supportInfoInverse = inverseSupport04; export const overlay = overlay01; export const toggleOff = ui04; +export const shadow = rgba(black, 0.3); export const buttonPrimary = interactive01; export const buttonSecondary = interactive02;