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>
carbon-design-system · Oct 7, 2021 · 113bcf5 · 113bcf5
1 parent c53e708
commit 113bcf5
Show file tree

Hide file tree

Showing 17 changed files with 41 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
-Original file line number
+Diff line change
@@ Expand Up / @@ -350,6 +350,9 @@ export const group = TokenGroup.create({ @@
         {
           name: 'toggle-off',
         },
+        {
+          name: 'shadow',
+        },
         focus,
         skeleton,
@@ Expand Down @@