@carbon/themes 10.44.0 → 10.46.0

package/es/index.js

@@ -1,5 +1,5 @@
 import Color from 'color';
-import { blue60, gray80, white as white$1, gray10, gray20, gray50, gray100, gray70, gray40, gray60, red60, blue70, blue40, green60, yellow, red50, green40, blue50, rgba, blue80, gray30, red80, purple60, blue20, gray90, red40, blue30, green50, purple40, red30, yellow30 } from '@carbon/colors';
+import { blue60, gray80, white as white$1, gray10, gray20, gray50, gray100, gray70, gray40, gray60, red60, blue70, blue40, green60, yellow, red50, green40, blue50, rgba, blue80, gray30, red80, purple60, blue20, black, gray90, red40, blue30, green50, purple40, red30, yellow30 } from '@carbon/colors';
 import { caption01, caption02, label01, label02, helperText01, helperText02, bodyShort01, bodyLong01, bodyShort02, bodyLong02, code01, code02, heading01, productiveHeading01, heading02, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, quotation01, quotation02, display01, display02, display03, display04, legal01, legal02, bodyCompact01, bodyCompact02, body01, body02, headingCompact01, headingCompact02, heading03, heading04, heading05, heading06, heading07, fluidHeading03, fluidHeading04, fluidHeading05, fluidHeading06, fluidParagraph01, fluidQuotation01, fluidQuotation02, fluidDisplay01, fluidDisplay02, fluidDisplay03, fluidDisplay04, unstable_tokens } from '@carbon/type';
 export { body01, body02, bodyCompact01, bodyCompact02, bodyLong01, bodyLong02, bodyShort01, bodyShort02, caption01, caption02, code01, code02, display01, display02, display03, display04, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, fluidDisplay01, fluidDisplay02, fluidDisplay03, fluidDisplay04, fluidHeading03, fluidHeading04, fluidHeading05, fluidHeading06, fluidParagraph01, fluidQuotation01, fluidQuotation02, heading01, heading02, heading03, heading04, heading05, heading06, heading07, headingCompact01, headingCompact02, helperText01, helperText02, label01, label02, legal01, legal02, productiveHeading01, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, quotation01, quotation02 } from '@carbon/type';
 import { spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, spacing13, fluidSpacing01, fluidSpacing02, fluidSpacing03, fluidSpacing04, layout01, layout02, layout03, layout04, layout05, layout06, layout07, container01, container02, container03, container04, container05, sizeXSmall, sizeSmall, sizeMedium, sizeLarge, sizeXLarge, size2XLarge, iconSize01, iconSize02, unstable_tokens as unstable_tokens$1 } from '@carbon/layout';
@@ -187,6 +187,7 @@ var supportWarningInverse$5 = inverseSupport03$5;
 var supportInfoInverse$5 = inverseSupport04$5;
 var overlay$5 = overlay01$5;
 var toggleOff$5 = ui04$5;
+var shadow$5 = rgba(black, 0.3);
 var buttonPrimary$5 = interactive01$5;
 var buttonSecondary$5 = interactive02$5;
 var buttonTertiary$5 = interactive03$5;
@@ -339,6 +340,7 @@ var white = /*#__PURE__*/Object.freeze({
   supportInfoInverse: supportInfoInverse$5,
   overlay: overlay$5,
   toggleOff: toggleOff$5,
+  shadow: shadow$5,
   buttonPrimary: buttonPrimary$5,
   buttonSecondary: buttonSecondary$5,
   buttonTertiary: buttonTertiary$5,
@@ -593,6 +595,7 @@ var supportWarningInverse$4 = inverseSupport03$4;
 var supportInfoInverse$4 = inverseSupport04$4;
 var overlay$4 = overlay01$4;
 var toggleOff$4 = ui04$4;
+var shadow$4 = rgba(black, 0.3);
 var buttonPrimary$4 = interactive01$4;
 var buttonSecondary$4 = interactive02$4;
 var buttonTertiary$4 = interactive03$4;
@@ -745,6 +748,7 @@ var g10 = /*#__PURE__*/Object.freeze({
   supportInfoInverse: supportInfoInverse$4,
   overlay: overlay$4,
   toggleOff: toggleOff$4,
+  shadow: shadow$4,
   buttonPrimary: buttonPrimary$4,
   buttonSecondary: buttonSecondary$4,
   buttonTertiary: buttonTertiary$4,
@@ -927,7 +931,7 @@ var inverseSupport01$3 = red60;
 var inverseSupport02$3 = green50;
 var inverseSupport03$3 = yellow;
 var inverseSupport04$3 = blue60;
-var overlay01$3 = rgba(gray100, 0.7);
+var overlay01$3 = rgba(black, 0.65);
 var danger01$3 = red60;
 var danger02$3 = red50; // Interaction states
 
@@ -999,6 +1003,7 @@ var supportWarningInverse$3 = inverseSupport03$3;
 var supportInfoInverse$3 = inverseSupport04$3;
 var overlay$3 = overlay01$3;
 var toggleOff$3 = ui04$3;
+var shadow$3 = rgba(black, 0.8);
 var buttonPrimary$3 = interactive01$3;
 var buttonSecondary$3 = interactive02$3;
 var buttonTertiary$3 = interactive03$3;
@@ -1151,6 +1156,7 @@ var g100 = /*#__PURE__*/Object.freeze({
   supportInfoInverse: supportInfoInverse$3,
   overlay: overlay$3,
   toggleOff: toggleOff$3,
+  shadow: shadow$3,
   buttonPrimary: buttonPrimary$3,
   buttonSecondary: buttonSecondary$3,
   buttonTertiary: buttonTertiary$3,
@@ -1337,8 +1343,9 @@ var supportErrorInverse$2 = red60;
 var supportSuccessInverse$2 = green50;
 var supportWarningInverse$2 = yellow30;
 var supportInfoInverse$2 = blue60;
-var overlay$2 = rgba(gray100, 0.7);
+var overlay$2 = rgba(black, 0.65);
 var toggleOff$2 = gray50;
+var shadow$2 = rgba(black, 0.8);
 var buttonPrimary$2 = blue60;
 var buttonSecondary$2 = gray60;
 var buttonTertiary$2 = white$1;
@@ -1495,6 +1502,7 @@ var g80 = /*#__PURE__*/Object.freeze({
   supportInfoInverse: supportInfoInverse$2,
   overlay: overlay$2,
   toggleOff: toggleOff$2,
+  shadow: shadow$2,
   buttonPrimary: buttonPrimary$2,
   buttonSecondary: buttonSecondary$2,
   buttonTertiary: buttonTertiary$2,
@@ -1742,7 +1750,7 @@ var inverseSupport01$1 = red60;
 var inverseSupport02$1 = green50;
 var inverseSupport03$1 = yellow;
 var inverseSupport04$1 = blue60;
-var overlay01$1 = rgba(gray100, 0.7);
+var overlay01$1 = rgba(black, 0.65);
 var danger01$1 = red60;
 var danger02$1 = red40; // Interaction states
 
@@ -1814,6 +1822,7 @@ var supportWarningInverse$1 = inverseSupport03$1;
 var supportInfoInverse$1 = inverseSupport04$1;
 var overlay$1 = overlay01$1;
 var toggleOff$1 = ui04$1;
+var shadow$1 = rgba(black, 0.8);
 var buttonPrimary$1 = interactive01$1;
 var buttonSecondary$1 = interactive02$1;
 var buttonTertiary$1 = interactive03$1;
@@ -1966,6 +1975,7 @@ var g90 = /*#__PURE__*/Object.freeze({
   supportInfoInverse: supportInfoInverse$1,
   overlay: overlay$1,
   toggleOff: toggleOff$1,
+  shadow: shadow$1,
   buttonPrimary: buttonPrimary$1,
   buttonSecondary: buttonSecondary$1,
   buttonTertiary: buttonTertiary$1,
@@ -2220,6 +2230,7 @@ var supportWarningInverse = inverseSupport03;
 var supportInfoInverse = inverseSupport04;
 var overlay = overlay01;
 var toggleOff = ui04;
+var shadow = rgba(black, 0.3);
 var buttonPrimary = interactive01;
 var buttonSecondary = interactive02;
 var buttonTertiary = interactive03;
@@ -2372,6 +2383,7 @@ var v9 = /*#__PURE__*/Object.freeze({
   supportInfoInverse: supportInfoInverse,
   overlay: overlay,
   toggleOff: toggleOff,
+  shadow: shadow,
   buttonPrimary: buttonPrimary,
   buttonSecondary: buttonSecondary,
   buttonTertiary: buttonTertiary,
@@ -2526,7 +2538,7 @@ var colors = [// Core
 'interactive01', 'interactive02', 'interactive03', 'interactive04', 'uiBackground', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'icon01', 'icon02', 'icon03', 'link01', 'link02', 'inverseLink', 'field01', 'field02', 'inverse01', 'inverse02', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01', 'danger01', 'danger02', // Interactive states
 'focus', 'inverseFocusUi', 'hoverPrimary', 'activePrimary', 'hoverPrimaryText', 'hoverSecondary', 'activeSecondary', 'hoverTertiary', 'activeTertiary', 'hoverUI', 'hoverLightUI', 'hoverSelectedUI', 'activeUI', 'activeLightUI', 'selectedUI', 'selectedLightUI', 'inverseHoverUI', 'hoverDanger', 'activeDanger', 'hoverRow', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'highlight', 'decorative01', 'buttonSeparator', 'skeleton01', 'skeleton02', // New color tokens
 // TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
-'background', 'layer', 'layerAccent', 'layerAccentHover', 'layerAccentActive', 'field', 'backgroundInverse', 'backgroundBrand', 'interactive', 'borderSubtle', 'borderStrong', 'borderInverse', 'borderInteractive', 'textPrimary', 'textSecondary', 'textPlaceholder', 'textHelper', 'textOnColor', 'textInverse', 'linkPrimary', 'linkSecondary', 'linkVisited', 'linkInverse', 'iconPrimary', 'iconSecondary', 'iconOnColor', 'iconInverse', 'supportError', 'supportSuccess', 'supportWarning', 'supportInfo', 'supportErrorInverse', 'supportSuccessInverse', 'supportWarningInverse', 'supportInfoInverse', 'overlay', 'toggleOff', 'buttonPrimary', 'buttonSecondary', 'buttonTertiary', 'buttonDangerPrimary', 'buttonDangerSecondary', 'backgroundActive', 'layerActive', 'buttonDangerActive', 'buttonPrimaryActive', 'buttonSecondaryActive', 'buttonTertiaryActive', 'focusInset', 'focusInverse', 'backgroundHover', 'layerHover', 'fieldHover', 'backgroundInverseHover', 'linkPrimaryHover', 'buttonDangerHover', 'buttonPrimaryHover', 'buttonSecondaryHover', 'buttonTertiaryHover', 'backgroundSelected', 'backgroundSelectedHover', 'layerSelected', 'layerSelectedHover', 'layerSelectedInverse', 'borderSubtleSelected', 'layerDisabled', 'fieldDisabled', 'borderDisabled', 'textDisabled', 'buttonDisabled', 'iconDisabled', 'textOnColorDisabled', 'iconOnColorDisabled', 'layerSelectedDisabled', 'skeletonBackground', 'skeletonElement', // Deprecated
+'background', 'layer', 'layerAccent', 'layerAccentHover', 'layerAccentActive', 'field', 'backgroundInverse', 'backgroundBrand', 'interactive', 'borderSubtle', 'borderStrong', 'borderInverse', 'borderInteractive', 'textPrimary', 'textSecondary', 'textPlaceholder', 'textHelper', 'textOnColor', 'textInverse', 'linkPrimary', 'linkSecondary', 'linkVisited', 'linkInverse', 'iconPrimary', 'iconSecondary', 'iconOnColor', 'iconInverse', 'supportError', 'supportSuccess', 'supportWarning', 'supportInfo', 'supportErrorInverse', 'supportSuccessInverse', 'supportWarningInverse', 'supportInfoInverse', 'overlay', 'toggleOff', 'shadow', 'buttonPrimary', 'buttonSecondary', 'buttonTertiary', 'buttonDangerPrimary', 'buttonDangerSecondary', 'backgroundActive', 'layerActive', 'buttonDangerActive', 'buttonPrimaryActive', 'buttonSecondaryActive', 'buttonTertiaryActive', 'focusInset', 'focusInverse', 'backgroundHover', 'layerHover', 'fieldHover', 'backgroundInverseHover', 'linkPrimaryHover', 'buttonDangerHover', 'buttonPrimaryHover', 'buttonSecondaryHover', 'buttonTertiaryHover', 'backgroundSelected', 'backgroundSelectedHover', 'layerSelected', 'layerSelectedHover', 'layerSelectedInverse', 'borderSubtleSelected', 'layerDisabled', 'fieldDisabled', 'borderDisabled', 'textDisabled', 'buttonDisabled', 'iconDisabled', 'textOnColorDisabled', 'iconOnColorDisabled', 'layerSelectedDisabled', 'skeletonBackground', 'skeletonElement', // Deprecated
 'brand01', 'brand02', 'brand03', 'active01', 'hoverField', 'danger'];
 var numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
 /**
@@ -2576,7 +2588,7 @@ var unstable__meta = {
   colors: [{
     type: 'core',
     tokens: ['uiBackground', 'interactive01', 'interactive02', 'interactive03', 'interactive04', 'brand01', 'brand02', 'brand03', 'danger', 'danger01', 'danger02', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'link01', 'link02', 'icon01', 'icon02', 'icon03', 'field01', 'field02', 'inverse01', 'inverse02', 'inverseLink', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01', //new tokens
-    'background', 'layer', 'layerAccent', 'layerAccentHover', 'layerAccentActive', 'field', 'backgroundInverse', 'backgroundBrand', 'interactive', 'borderSubtle', 'borderStrong', 'borderInverse', 'borderInteractive', 'textPrimary', 'textSecondary', 'textPlaceholder', 'textHelper', 'textOnColor', 'textInverse', 'linkPrimary', 'linkSecondary', 'linkVisited', 'linkInverse', 'iconPrimary', 'iconSecondary', 'iconOnColor', 'iconInverse', 'supportError', 'supportSuccess', 'supportWarning', 'supportInfo', 'supportErrorInverse', 'supportSuccessInverse', 'supportWarningInverse', 'supportInfoInverse', 'overlay', 'toggleOff', 'buttonPrimary', 'buttonSecondary', 'buttonTertiary', 'buttonDangerPrimary', 'buttonDangerSecondary']
+    'background', 'layer', 'layerAccent', 'layerAccentHover', 'layerAccentActive', 'field', 'backgroundInverse', 'backgroundBrand', 'interactive', 'borderSubtle', 'borderStrong', 'borderInverse', 'borderInteractive', 'textPrimary', 'textSecondary', 'textPlaceholder', 'textHelper', 'textOnColor', 'textInverse', 'linkPrimary', 'linkSecondary', 'linkVisited', 'linkInverse', 'iconPrimary', 'iconSecondary', 'iconOnColor', 'iconInverse', 'supportError', 'supportSuccess', 'supportWarning', 'supportInfo', 'supportErrorInverse', 'supportSuccessInverse', 'supportWarningInverse', 'supportInfoInverse', 'overlay', 'toggleOff', 'shadow', 'buttonPrimary', 'buttonSecondary', 'buttonTertiary', 'buttonDangerPrimary', 'buttonDangerSecondary']
   }, {
     type: 'interactive',
     tokens: ['focus', 'inverseFocusUi', 'hoverPrimary', 'hoverPrimaryText', 'hoverSecondary', 'hoverTertiary', 'hoverUI', 'hoverLightUI', 'hoverSelectedUI', 'hoverDanger', 'hoverRow', 'activePrimary', 'activeSecondary', 'activeTertiary', 'activeUI', 'activeLightUI', 'activeDanger', 'selectedUI', 'selectedLightUI', 'highlight', 'skeleton01', 'skeleton02', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'inverseHoverUI', 'active01', 'hoverField', 'decorative01', 'buttonSeparator', // new tokens
@@ -2600,4 +2612,4 @@ var themes = {
   v9: v9
 };
 
-export { active01$5 as active01, activeDanger$5 as activeDanger, activeLightUI$5 as activeLightUI, activePrimary$5 as activePrimary, activeSecondary$5 as activeSecondary, activeTertiary$5 as activeTertiary, activeUI$5 as activeUI, background$5 as background, backgroundActive$5 as backgroundActive, backgroundBrand$5 as backgroundBrand, backgroundHover$5 as backgroundHover, backgroundInverse$5 as backgroundInverse, backgroundInverseHover$5 as backgroundInverseHover, backgroundSelected$5 as backgroundSelected, backgroundSelectedHover$5 as backgroundSelectedHover, borderDisabled$5 as borderDisabled, borderInteractive$5 as borderInteractive, borderInverse$5 as borderInverse, borderStrong$5 as borderStrong, borderSubtle$5 as borderSubtle, borderSubtleSelected$5 as borderSubtleSelected, brand01$5 as brand01, brand02$5 as brand02, brand03$5 as brand03, buttonDangerActive$5 as buttonDangerActive, buttonDangerHover$5 as buttonDangerHover, buttonDangerPrimary$5 as buttonDangerPrimary, buttonDangerSecondary$5 as buttonDangerSecondary, buttonDisabled$5 as buttonDisabled, buttonPrimary$5 as buttonPrimary, buttonPrimaryActive$5 as buttonPrimaryActive, buttonPrimaryHover$5 as buttonPrimaryHover, buttonSecondary$5 as buttonSecondary, buttonSecondaryActive$5 as buttonSecondaryActive, buttonSecondaryHover$5 as buttonSecondaryHover, buttonSeparator$5 as buttonSeparator, buttonTertiary$5 as buttonTertiary, buttonTertiaryActive$5 as buttonTertiaryActive, buttonTertiaryHover$5 as buttonTertiaryHover, danger$5 as danger, danger01$5 as danger01, danger02$5 as danger02, decorative01$5 as decorative01, disabled01$5 as disabled01, disabled02$5 as disabled02, disabled03$5 as disabled03, field$5 as field, field01$5 as field01, field02$5 as field02, fieldDisabled$5 as fieldDisabled, fieldHover$5 as fieldHover, focus$5 as focus, focusInset$5 as focusInset, focusInverse$5 as focusInverse, formatTokenName, g10, g100, g80, g90, highlight$5 as highlight, hoverDanger$5 as hoverDanger, hoverField$5 as hoverField, hoverLightUI$5 as hoverLightUI, hoverPrimary$5 as hoverPrimary, hoverPrimaryText$5 as hoverPrimaryText, hoverRow$5 as hoverRow, hoverSecondary$5 as hoverSecondary, hoverSelectedUI$5 as hoverSelectedUI, hoverTertiary$5 as hoverTertiary, hoverUI$5 as hoverUI, icon01$5 as icon01, icon02$5 as icon02, icon03$5 as icon03, iconDisabled$5 as iconDisabled, iconInverse$5 as iconInverse, iconOnColor$5 as iconOnColor, iconOnColorDisabled$5 as iconOnColorDisabled, iconPrimary$5 as iconPrimary, iconSecondary$5 as iconSecondary, interactive$5 as interactive, interactive01$5 as interactive01, interactive02$5 as interactive02, interactive03$5 as interactive03, interactive04$5 as interactive04, inverse01$5 as inverse01, inverse02$5 as inverse02, inverseFocusUi$5 as inverseFocusUi, inverseHoverUI$5 as inverseHoverUI, inverseLink$5 as inverseLink, inverseSupport01$5 as inverseSupport01, inverseSupport02$5 as inverseSupport02, inverseSupport03$5 as inverseSupport03, inverseSupport04$5 as inverseSupport04, layer$5 as layer, layerAccent$5 as layerAccent, layerAccentActive$5 as layerAccentActive, layerAccentHover$5 as layerAccentHover, layerActive$5 as layerActive, layerDisabled$5 as layerDisabled, layerHover$5 as layerHover, layerSelected$5 as layerSelected, layerSelectedDisabled$5 as layerSelectedDisabled, layerSelectedHover$5 as layerSelectedHover, layerSelectedInverse$5 as layerSelectedInverse, link01$5 as link01, link02$5 as link02, linkInverse$5 as linkInverse, linkPrimary$5 as linkPrimary, linkPrimaryHover$5 as linkPrimaryHover, linkSecondary$5 as linkSecondary, linkVisited$5 as linkVisited, overlay$5 as overlay, overlay01$5 as overlay01, selectedLightUI$5 as selectedLightUI, selectedUI$5 as selectedUI, skeleton01$5 as skeleton01, skeleton02$5 as skeleton02, skeletonBackground$5 as skeletonBackground, skeletonElement$5 as skeletonElement, support01$5 as support01, support02$5 as support02, support03$5 as support03, support04$5 as support04, supportError$5 as supportError, supportErrorInverse$5 as supportErrorInverse, supportInfo$5 as supportInfo, supportInfoInverse$5 as supportInfoInverse, supportSuccess$5 as supportSuccess, supportSuccessInverse$5 as supportSuccessInverse, supportWarning$5 as supportWarning, supportWarningInverse$5 as supportWarningInverse, text01$5 as text01, text02$5 as text02, text03$5 as text03, text04$5 as text04, text05$5 as text05, textDisabled$5 as textDisabled, textError$5 as textError, textHelper$5 as textHelper, textInverse$5 as textInverse, textOnColor$5 as textOnColor, textOnColorDisabled$5 as textOnColorDisabled, textPlaceholder$5 as textPlaceholder, textPrimary$5 as textPrimary, textSecondary$5 as textSecondary, themes, toggleOff$5 as toggleOff, tokens, ui01$5 as ui01, ui02$5 as ui02, ui03$5 as ui03, ui04$5 as ui04, ui05$5 as ui05, uiBackground$5 as uiBackground, unstable__meta, v9, visitedLink$5 as visitedLink, white };
+export { active01$5 as active01, activeDanger$5 as activeDanger, activeLightUI$5 as activeLightUI, activePrimary$5 as activePrimary, activeSecondary$5 as activeSecondary, activeTertiary$5 as activeTertiary, activeUI$5 as activeUI, background$5 as background, backgroundActive$5 as backgroundActive, backgroundBrand$5 as backgroundBrand, backgroundHover$5 as backgroundHover, backgroundInverse$5 as backgroundInverse, backgroundInverseHover$5 as backgroundInverseHover, backgroundSelected$5 as backgroundSelected, backgroundSelectedHover$5 as backgroundSelectedHover, borderDisabled$5 as borderDisabled, borderInteractive$5 as borderInteractive, borderInverse$5 as borderInverse, borderStrong$5 as borderStrong, borderSubtle$5 as borderSubtle, borderSubtleSelected$5 as borderSubtleSelected, brand01$5 as brand01, brand02$5 as brand02, brand03$5 as brand03, buttonDangerActive$5 as buttonDangerActive, buttonDangerHover$5 as buttonDangerHover, buttonDangerPrimary$5 as buttonDangerPrimary, buttonDangerSecondary$5 as buttonDangerSecondary, buttonDisabled$5 as buttonDisabled, buttonPrimary$5 as buttonPrimary, buttonPrimaryActive$5 as buttonPrimaryActive, buttonPrimaryHover$5 as buttonPrimaryHover, buttonSecondary$5 as buttonSecondary, buttonSecondaryActive$5 as buttonSecondaryActive, buttonSecondaryHover$5 as buttonSecondaryHover, buttonSeparator$5 as buttonSeparator, buttonTertiary$5 as buttonTertiary, buttonTertiaryActive$5 as buttonTertiaryActive, buttonTertiaryHover$5 as buttonTertiaryHover, danger$5 as danger, danger01$5 as danger01, danger02$5 as danger02, decorative01$5 as decorative01, disabled01$5 as disabled01, disabled02$5 as disabled02, disabled03$5 as disabled03, field$5 as field, field01$5 as field01, field02$5 as field02, fieldDisabled$5 as fieldDisabled, fieldHover$5 as fieldHover, focus$5 as focus, focusInset$5 as focusInset, focusInverse$5 as focusInverse, formatTokenName, g10, g100, g80, g90, highlight$5 as highlight, hoverDanger$5 as hoverDanger, hoverField$5 as hoverField, hoverLightUI$5 as hoverLightUI, hoverPrimary$5 as hoverPrimary, hoverPrimaryText$5 as hoverPrimaryText, hoverRow$5 as hoverRow, hoverSecondary$5 as hoverSecondary, hoverSelectedUI$5 as hoverSelectedUI, hoverTertiary$5 as hoverTertiary, hoverUI$5 as hoverUI, icon01$5 as icon01, icon02$5 as icon02, icon03$5 as icon03, iconDisabled$5 as iconDisabled, iconInverse$5 as iconInverse, iconOnColor$5 as iconOnColor, iconOnColorDisabled$5 as iconOnColorDisabled, iconPrimary$5 as iconPrimary, iconSecondary$5 as iconSecondary, interactive$5 as interactive, interactive01$5 as interactive01, interactive02$5 as interactive02, interactive03$5 as interactive03, interactive04$5 as interactive04, inverse01$5 as inverse01, inverse02$5 as inverse02, inverseFocusUi$5 as inverseFocusUi, inverseHoverUI$5 as inverseHoverUI, inverseLink$5 as inverseLink, inverseSupport01$5 as inverseSupport01, inverseSupport02$5 as inverseSupport02, inverseSupport03$5 as inverseSupport03, inverseSupport04$5 as inverseSupport04, layer$5 as layer, layerAccent$5 as layerAccent, layerAccentActive$5 as layerAccentActive, layerAccentHover$5 as layerAccentHover, layerActive$5 as layerActive, layerDisabled$5 as layerDisabled, layerHover$5 as layerHover, layerSelected$5 as layerSelected, layerSelectedDisabled$5 as layerSelectedDisabled, layerSelectedHover$5 as layerSelectedHover, layerSelectedInverse$5 as layerSelectedInverse, link01$5 as link01, link02$5 as link02, linkInverse$5 as linkInverse, linkPrimary$5 as linkPrimary, linkPrimaryHover$5 as linkPrimaryHover, linkSecondary$5 as linkSecondary, linkVisited$5 as linkVisited, overlay$5 as overlay, overlay01$5 as overlay01, selectedLightUI$5 as selectedLightUI, selectedUI$5 as selectedUI, shadow$5 as shadow, skeleton01$5 as skeleton01, skeleton02$5 as skeleton02, skeletonBackground$5 as skeletonBackground, skeletonElement$5 as skeletonElement, support01$5 as support01, support02$5 as support02, support03$5 as support03, support04$5 as support04, supportError$5 as supportError, supportErrorInverse$5 as supportErrorInverse, supportInfo$5 as supportInfo, supportInfoInverse$5 as supportInfoInverse, supportSuccess$5 as supportSuccess, supportSuccessInverse$5 as supportSuccessInverse, supportWarning$5 as supportWarning, supportWarningInverse$5 as supportWarningInverse, text01$5 as text01, text02$5 as text02, text03$5 as text03, text04$5 as text04, text05$5 as text05, textDisabled$5 as textDisabled, textError$5 as textError, textHelper$5 as textHelper, textInverse$5 as textInverse, textOnColor$5 as textOnColor, textOnColorDisabled$5 as textOnColorDisabled, textPlaceholder$5 as textPlaceholder, textPrimary$5 as textPrimary, textSecondary$5 as textSecondary, themes, toggleOff$5 as toggleOff, tokens, ui01$5 as ui01, ui02$5 as ui02, ui03$5 as ui03, ui04$5 as ui04, ui05$5 as ui05, uiBackground$5 as uiBackground, unstable__meta, v9, visitedLink$5 as visitedLink, white };

package/lib/index.js

@@ -193,6 +193,7 @@ var supportWarningInverse$5 = inverseSupport03$5;
 var supportInfoInverse$5 = inverseSupport04$5;
 var overlay$5 = overlay01$5;
 var toggleOff$5 = ui04$5;
+var shadow$5 = colors$1.rgba(colors$1.black, 0.3);
 var buttonPrimary$5 = interactive01$5;
 var buttonSecondary$5 = interactive02$5;
 var buttonTertiary$5 = interactive03$5;
@@ -345,6 +346,7 @@ var white = /*#__PURE__*/Object.freeze({
   supportInfoInverse: supportInfoInverse$5,
   overlay: overlay$5,
   toggleOff: toggleOff$5,
+  shadow: shadow$5,
   buttonPrimary: buttonPrimary$5,
   buttonSecondary: buttonSecondary$5,
   buttonTertiary: buttonTertiary$5,
@@ -599,6 +601,7 @@ var supportWarningInverse$4 = inverseSupport03$4;
 var supportInfoInverse$4 = inverseSupport04$4;
 var overlay$4 = overlay01$4;
 var toggleOff$4 = ui04$4;
+var shadow$4 = colors$1.rgba(colors$1.black, 0.3);
 var buttonPrimary$4 = interactive01$4;
 var buttonSecondary$4 = interactive02$4;
 var buttonTertiary$4 = interactive03$4;
@@ -751,6 +754,7 @@ var g10 = /*#__PURE__*/Object.freeze({
   supportInfoInverse: supportInfoInverse$4,
   overlay: overlay$4,
   toggleOff: toggleOff$4,
+  shadow: shadow$4,
   buttonPrimary: buttonPrimary$4,
   buttonSecondary: buttonSecondary$4,
   buttonTertiary: buttonTertiary$4,
@@ -933,7 +937,7 @@ var inverseSupport01$3 = colors$1.red60;
 var inverseSupport02$3 = colors$1.green50;
 var inverseSupport03$3 = colors$1.yellow;
 var inverseSupport04$3 = colors$1.blue60;
-var overlay01$3 = colors$1.rgba(colors$1.gray100, 0.7);
+var overlay01$3 = colors$1.rgba(colors$1.black, 0.65);
 var danger01$3 = colors$1.red60;
 var danger02$3 = colors$1.red50; // Interaction states
 
@@ -1005,6 +1009,7 @@ var supportWarningInverse$3 = inverseSupport03$3;
 var supportInfoInverse$3 = inverseSupport04$3;
 var overlay$3 = overlay01$3;
 var toggleOff$3 = ui04$3;
+var shadow$3 = colors$1.rgba(colors$1.black, 0.8);
 var buttonPrimary$3 = interactive01$3;
 var buttonSecondary$3 = interactive02$3;
 var buttonTertiary$3 = interactive03$3;
@@ -1157,6 +1162,7 @@ var g100 = /*#__PURE__*/Object.freeze({
   supportInfoInverse: supportInfoInverse$3,
   overlay: overlay$3,
   toggleOff: toggleOff$3,
+  shadow: shadow$3,
   buttonPrimary: buttonPrimary$3,
   buttonSecondary: buttonSecondary$3,
   buttonTertiary: buttonTertiary$3,
@@ -1343,8 +1349,9 @@ var supportErrorInverse$2 = colors$1.red60;
 var supportSuccessInverse$2 = colors$1.green50;
 var supportWarningInverse$2 = colors$1.yellow30;
 var supportInfoInverse$2 = colors$1.blue60;
-var overlay$2 = colors$1.rgba(colors$1.gray100, 0.7);
+var overlay$2 = colors$1.rgba(colors$1.black, 0.65);
 var toggleOff$2 = colors$1.gray50;
+var shadow$2 = colors$1.rgba(colors$1.black, 0.8);
 var buttonPrimary$2 = colors$1.blue60;
 var buttonSecondary$2 = colors$1.gray60;
 var buttonTertiary$2 = colors$1.white;
@@ -1501,6 +1508,7 @@ var g80 = /*#__PURE__*/Object.freeze({
   supportInfoInverse: supportInfoInverse$2,
   overlay: overlay$2,
   toggleOff: toggleOff$2,
+  shadow: shadow$2,
   buttonPrimary: buttonPrimary$2,
   buttonSecondary: buttonSecondary$2,
   buttonTertiary: buttonTertiary$2,
@@ -1748,7 +1756,7 @@ var inverseSupport01$1 = colors$1.red60;
 var inverseSupport02$1 = colors$1.green50;
 var inverseSupport03$1 = colors$1.yellow;
 var inverseSupport04$1 = colors$1.blue60;
-var overlay01$1 = colors$1.rgba(colors$1.gray100, 0.7);
+var overlay01$1 = colors$1.rgba(colors$1.black, 0.65);
 var danger01$1 = colors$1.red60;
 var danger02$1 = colors$1.red40; // Interaction states
 
@@ -1820,6 +1828,7 @@ var supportWarningInverse$1 = inverseSupport03$1;
 var supportInfoInverse$1 = inverseSupport04$1;
 var overlay$1 = overlay01$1;
 var toggleOff$1 = ui04$1;
+var shadow$1 = colors$1.rgba(colors$1.black, 0.8);
 var buttonPrimary$1 = interactive01$1;
 var buttonSecondary$1 = interactive02$1;
 var buttonTertiary$1 = interactive03$1;
@@ -1972,6 +1981,7 @@ var g90 = /*#__PURE__*/Object.freeze({
   supportInfoInverse: supportInfoInverse$1,
   overlay: overlay$1,
   toggleOff: toggleOff$1,
+  shadow: shadow$1,
   buttonPrimary: buttonPrimary$1,
   buttonSecondary: buttonSecondary$1,
   buttonTertiary: buttonTertiary$1,
@@ -2226,6 +2236,7 @@ var supportWarningInverse = inverseSupport03;
 var supportInfoInverse = inverseSupport04;
 var overlay = overlay01;
 var toggleOff = ui04;
+var shadow = colors$1.rgba(colors$1.black, 0.3);
 var buttonPrimary = interactive01;
 var buttonSecondary = interactive02;
 var buttonTertiary = interactive03;
@@ -2378,6 +2389,7 @@ var v9 = /*#__PURE__*/Object.freeze({
   supportInfoInverse: supportInfoInverse,
   overlay: overlay,
   toggleOff: toggleOff,
+  shadow: shadow,
   buttonPrimary: buttonPrimary,
   buttonSecondary: buttonSecondary,
   buttonTertiary: buttonTertiary,
@@ -2532,7 +2544,7 @@ var colors = [// Core
 'interactive01', 'interactive02', 'interactive03', 'interactive04', 'uiBackground', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'icon01', 'icon02', 'icon03', 'link01', 'link02', 'inverseLink', 'field01', 'field02', 'inverse01', 'inverse02', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01', 'danger01', 'danger02', // Interactive states
 'focus', 'inverseFocusUi', 'hoverPrimary', 'activePrimary', 'hoverPrimaryText', 'hoverSecondary', 'activeSecondary', 'hoverTertiary', 'activeTertiary', 'hoverUI', 'hoverLightUI', 'hoverSelectedUI', 'activeUI', 'activeLightUI', 'selectedUI', 'selectedLightUI', 'inverseHoverUI', 'hoverDanger', 'activeDanger', 'hoverRow', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'highlight', 'decorative01', 'buttonSeparator', 'skeleton01', 'skeleton02', // New color tokens
 // TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
-'background', 'layer', 'layerAccent', 'layerAccentHover', 'layerAccentActive', 'field', 'backgroundInverse', 'backgroundBrand', 'interactive', 'borderSubtle', 'borderStrong', 'borderInverse', 'borderInteractive', 'textPrimary', 'textSecondary', 'textPlaceholder', 'textHelper', 'textOnColor', 'textInverse', 'linkPrimary', 'linkSecondary', 'linkVisited', 'linkInverse', 'iconPrimary', 'iconSecondary', 'iconOnColor', 'iconInverse', 'supportError', 'supportSuccess', 'supportWarning', 'supportInfo', 'supportErrorInverse', 'supportSuccessInverse', 'supportWarningInverse', 'supportInfoInverse', 'overlay', 'toggleOff', 'buttonPrimary', 'buttonSecondary', 'buttonTertiary', 'buttonDangerPrimary', 'buttonDangerSecondary', 'backgroundActive', 'layerActive', 'buttonDangerActive', 'buttonPrimaryActive', 'buttonSecondaryActive', 'buttonTertiaryActive', 'focusInset', 'focusInverse', 'backgroundHover', 'layerHover', 'fieldHover', 'backgroundInverseHover', 'linkPrimaryHover', 'buttonDangerHover', 'buttonPrimaryHover', 'buttonSecondaryHover', 'buttonTertiaryHover', 'backgroundSelected', 'backgroundSelectedHover', 'layerSelected', 'layerSelectedHover', 'layerSelectedInverse', 'borderSubtleSelected', 'layerDisabled', 'fieldDisabled', 'borderDisabled', 'textDisabled', 'buttonDisabled', 'iconDisabled', 'textOnColorDisabled', 'iconOnColorDisabled', 'layerSelectedDisabled', 'skeletonBackground', 'skeletonElement', // Deprecated
+'background', 'layer', 'layerAccent', 'layerAccentHover', 'layerAccentActive', 'field', 'backgroundInverse', 'backgroundBrand', 'interactive', 'borderSubtle', 'borderStrong', 'borderInverse', 'borderInteractive', 'textPrimary', 'textSecondary', 'textPlaceholder', 'textHelper', 'textOnColor', 'textInverse', 'linkPrimary', 'linkSecondary', 'linkVisited', 'linkInverse', 'iconPrimary', 'iconSecondary', 'iconOnColor', 'iconInverse', 'supportError', 'supportSuccess', 'supportWarning', 'supportInfo', 'supportErrorInverse', 'supportSuccessInverse', 'supportWarningInverse', 'supportInfoInverse', 'overlay', 'toggleOff', 'shadow', 'buttonPrimary', 'buttonSecondary', 'buttonTertiary', 'buttonDangerPrimary', 'buttonDangerSecondary', 'backgroundActive', 'layerActive', 'buttonDangerActive', 'buttonPrimaryActive', 'buttonSecondaryActive', 'buttonTertiaryActive', 'focusInset', 'focusInverse', 'backgroundHover', 'layerHover', 'fieldHover', 'backgroundInverseHover', 'linkPrimaryHover', 'buttonDangerHover', 'buttonPrimaryHover', 'buttonSecondaryHover', 'buttonTertiaryHover', 'backgroundSelected', 'backgroundSelectedHover', 'layerSelected', 'layerSelectedHover', 'layerSelectedInverse', 'borderSubtleSelected', 'layerDisabled', 'fieldDisabled', 'borderDisabled', 'textDisabled', 'buttonDisabled', 'iconDisabled', 'textOnColorDisabled', 'iconOnColorDisabled', 'layerSelectedDisabled', 'skeletonBackground', 'skeletonElement', // Deprecated
 'brand01', 'brand02', 'brand03', 'active01', 'hoverField', 'danger'];
 var numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
 /**
@@ -2582,7 +2594,7 @@ var unstable__meta = {
   colors: [{
     type: 'core',
     tokens: ['uiBackground', 'interactive01', 'interactive02', 'interactive03', 'interactive04', 'brand01', 'brand02', 'brand03', 'danger', 'danger01', 'danger02', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'link01', 'link02', 'icon01', 'icon02', 'icon03', 'field01', 'field02', 'inverse01', 'inverse02', 'inverseLink', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01', //new tokens
-    'background', 'layer', 'layerAccent', 'layerAccentHover', 'layerAccentActive', 'field', 'backgroundInverse', 'backgroundBrand', 'interactive', 'borderSubtle', 'borderStrong', 'borderInverse', 'borderInteractive', 'textPrimary', 'textSecondary', 'textPlaceholder', 'textHelper', 'textOnColor', 'textInverse', 'linkPrimary', 'linkSecondary', 'linkVisited', 'linkInverse', 'iconPrimary', 'iconSecondary', 'iconOnColor', 'iconInverse', 'supportError', 'supportSuccess', 'supportWarning', 'supportInfo', 'supportErrorInverse', 'supportSuccessInverse', 'supportWarningInverse', 'supportInfoInverse', 'overlay', 'toggleOff', 'buttonPrimary', 'buttonSecondary', 'buttonTertiary', 'buttonDangerPrimary', 'buttonDangerSecondary']
+    'background', 'layer', 'layerAccent', 'layerAccentHover', 'layerAccentActive', 'field', 'backgroundInverse', 'backgroundBrand', 'interactive', 'borderSubtle', 'borderStrong', 'borderInverse', 'borderInteractive', 'textPrimary', 'textSecondary', 'textPlaceholder', 'textHelper', 'textOnColor', 'textInverse', 'linkPrimary', 'linkSecondary', 'linkVisited', 'linkInverse', 'iconPrimary', 'iconSecondary', 'iconOnColor', 'iconInverse', 'supportError', 'supportSuccess', 'supportWarning', 'supportInfo', 'supportErrorInverse', 'supportSuccessInverse', 'supportWarningInverse', 'supportInfoInverse', 'overlay', 'toggleOff', 'shadow', 'buttonPrimary', 'buttonSecondary', 'buttonTertiary', 'buttonDangerPrimary', 'buttonDangerSecondary']
   }, {
     type: 'interactive',
     tokens: ['focus', 'inverseFocusUi', 'hoverPrimary', 'hoverPrimaryText', 'hoverSecondary', 'hoverTertiary', 'hoverUI', 'hoverLightUI', 'hoverSelectedUI', 'hoverDanger', 'hoverRow', 'activePrimary', 'activeSecondary', 'activeTertiary', 'activeUI', 'activeLightUI', 'activeDanger', 'selectedUI', 'selectedLightUI', 'highlight', 'skeleton01', 'skeleton02', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'inverseHoverUI', 'active01', 'hoverField', 'decorative01', 'buttonSeparator', // new tokens
@@ -3291,6 +3303,7 @@ exports.overlay = overlay$5;
 exports.overlay01 = overlay01$5;
 exports.selectedLightUI = selectedLightUI$5;
 exports.selectedUI = selectedUI$5;
+exports.shadow = shadow$5;
 exports.skeleton01 = skeleton01$5;
 exports.skeleton02 = skeleton02$5;
 exports.skeletonBackground = skeletonBackground$5;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/themes",
   "description": "Themes for applying color in the Carbon Design System",
-  "version": "10.44.0",
+  "version": "10.46.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -29,18 +29,18 @@
     "build": "yarn clean && carbon-cli bundle src/index.js --name CarbonThemes && babel-node --presets '@babel/preset-env' tasks/build.js && carbon-cli check \"scss/*.scss\""
   },
   "dependencies": {
-    "@carbon/colors": "^10.33.0",
-    "@carbon/layout": "^10.33.0",
-    "@carbon/type": "^10.37.0",
+    "@carbon/colors": "^10.34.0",
+    "@carbon/layout": "^10.34.0",
+    "@carbon/type": "^10.38.0",
     "color": "^3.1.2"
   },
   "devDependencies": {
     "@babel/node": "^7.14.2",
     "@babel/preset-env": "^7.14.2",
-    "@carbon/cli": "^10.30.0",
+    "@carbon/cli": "^10.31.0",
     "@carbon/cli-reporter": "^10.5.0",
     "@carbon/scss-generator": "^10.13.0",
-    "@carbon/test-utils": "^10.19.0",
+    "@carbon/test-utils": "^10.20.0",
     "change-case": "^4.1.1",
     "core-js": "^3.16.0",
     "fs-extra": "^8.1.0",
@@ -49,5 +49,5 @@
     "rimraf": "^3.0.0"
   },
   "sideEffects": false,
-  "gitHead": "90b2b8c089af8fc2f9db25255d4b27d5b16ca5fe"
+  "gitHead": "f6352a1010117000ce4ca9f71315b67b1ec8e396"
 }

package/scss/compat/generated/_themes.scss

@@ -171,7 +171,7 @@ $g90: (
   inverse-support-02: #24a148,
   inverse-support-03: #f1c21b,
   inverse-support-04: #0f62fe,
-  overlay-01: rgba(22, 22, 22, 0.7),
+  overlay-01: rgba(0, 0, 0, 0.65),
   danger-01: #da1e28,
   danger-02: #ff8389,
   inverse-focus-ui: #0f62fe,
@@ -237,7 +237,7 @@ $g100: (
   inverse-support-02: #24a148,
   inverse-support-03: #f1c21b,
   inverse-support-04: #0f62fe,
-  overlay-01: rgba(22, 22, 22, 0.7),
+  overlay-01: rgba(0, 0, 0, 0.65),
   danger-01: #da1e28,
   danger-02: #fa4d56,
   inverse-focus-ui: #0f62fe,

package/scss/generated/_mixins.scss

@@ -141,6 +141,7 @@
   $support-info-inverse: map-get($theme, 'support-info-inverse') !global;
   $overlay: map-get($theme, 'overlay') !global;
   $toggle-off: map-get($theme, 'toggle-off') !global;
+  $shadow: map-get($theme, 'shadow') !global;
   $button-primary: map-get($theme, 'button-primary') !global;
   $button-secondary: map-get($theme, 'button-secondary') !global;
   $button-tertiary: map-get($theme, 'button-tertiary') !global;
@@ -784,6 +785,10 @@
       --#{$custom-property-prefix}-toggle-off,
       map-get($theme, 'toggle-off')
     ) !global;
+    $shadow: var(
+      --#{$custom-property-prefix}-shadow,
+      map-get($theme, 'shadow')
+    ) !global;
     $button-primary: var(
       --#{$custom-property-prefix}-button-primary,
       map-get($theme, 'button-primary')
@@ -2128,6 +2133,10 @@
       @include custom-property('toggle-off', map-get($theme, 'toggle-off'));
     }
 
+    @if should-emit($theme, $parent-carbon-theme, 'shadow', $emit-difference) {
+      @include custom-property('shadow', map-get($theme, 'shadow'));
+    }
+
     @if should-emit(
       $theme,
       $parent-carbon-theme,

package/scss/generated/_themes.scss

@@ -110,6 +110,7 @@ $carbon--theme--white: (
   support-info-inverse: #4589ff,
   overlay: rgba(22, 22, 22, 0.5),
   toggle-off: #8d8d8d,
+  shadow: rgba(0, 0, 0, 0.3),
   button-primary: #0f62fe,
   button-secondary: #393939,
   button-tertiary: #0f62fe,
@@ -1000,7 +1001,8 @@ $carbon--theme--g80: map-merge(
     support-error-inverse: #da1e28,
     support-success-inverse: #24a148,
     support-info-inverse: #0f62fe,
-    overlay: rgba(22, 22, 22, 0.7),
+    overlay: rgba(0, 0, 0, 0.65),
+    shadow: rgba(0, 0, 0, 0.8),
     button-secondary: #6f6f6f,
     button-tertiary: #ffffff,
     button-danger-secondary: #ff8389,
@@ -1066,7 +1068,7 @@ $carbon--theme--g80: map-merge(
     inverse-support-01: #da1e28,
     inverse-support-02: #24a148,
     inverse-support-04: #0f62fe,
-    overlay-01: rgba(22, 22, 22, 0.7),
+    overlay-01: rgba(0, 0, 0, 0.65),
     danger-02: #ff8389,
     inverse-focus-ui: #0f62fe,
     hover-primary: #0151e4,
@@ -1133,7 +1135,7 @@ $carbon--theme--g90: map-merge(
     inverse-support-01: #da1e28,
     inverse-support-02: #24a148,
     inverse-support-04: #0f62fe,
-    overlay-01: rgba(22, 22, 22, 0.7),
+    overlay-01: rgba(0, 0, 0, 0.65),
     danger-02: #ff8389,
     focus: #ffffff,
     inverse-focus-ui: #0f62fe,
@@ -1189,7 +1191,8 @@ $carbon--theme--g90: map-merge(
     support-error-inverse: #da1e28,
     support-success-inverse: #24a148,
     support-info-inverse: #0f62fe,
-    overlay: rgba(22, 22, 22, 0.7),
+    overlay: rgba(0, 0, 0, 0.65),
+    shadow: rgba(0, 0, 0, 0.8),
     button-secondary: #6f6f6f,
     button-tertiary: #ffffff,
     button-danger-secondary: #ff8389,
@@ -1266,7 +1269,7 @@ $carbon--theme--g100: map-merge(
     inverse-support-01: #da1e28,
     inverse-support-02: #24a148,
     inverse-support-04: #0f62fe,
-    overlay-01: rgba(22, 22, 22, 0.7),
+    overlay-01: rgba(0, 0, 0, 0.65),
     danger-02: #fa4d56,
     focus: #ffffff,
     inverse-focus-ui: #0f62fe,
@@ -1322,8 +1325,9 @@ $carbon--theme--g100: map-merge(
     support-error-inverse: #da1e28,
     support-success-inverse: #24a148,
     support-info-inverse: #0f62fe,
-    overlay: rgba(22, 22, 22, 0.7),
+    overlay: rgba(0, 0, 0, 0.65),
     toggle-off: #6f6f6f,
+    shadow: rgba(0, 0, 0, 0.8),
     button-secondary: #6f6f6f,
     button-tertiary: #ffffff,
     button-danger-secondary: #fa4d56,
@@ -2126,6 +2130,12 @@ $carbon--theme: (
       $toggle-off,
       map-get($carbon--theme--white, 'toggle-off')
     ),
+  shadow:
+    if(
+      global-variable-exists('shadow'),
+      $shadow,
+      map-get($carbon--theme--white, 'shadow')
+    ),
   button-primary:
     if(
       global-variable-exists('button-primary'),

package/scss/generated/_tokens.scss

@@ -1090,6 +1090,16 @@ $toggle-off: if(
   #8d8d8d
 ) !default;
 
+/// @type {undefined}
+/// @access public
+/// @group @carbon/themes
+$shadow: if(
+  global-variable-exists('carbon--theme') and
+    map-has-key($carbon--theme, 'shadow'),
+  map-get($carbon--theme, 'shadow'),
+  rgba(0, 0, 0, 0.3)
+) !default;
+
 /// @type {undefined}
 /// @access public
 /// @group @carbon/themes

package/scss/modules/generated/_themes.scss

@@ -107,6 +107,7 @@ $white: (
   highlight: #d0e2ff,
   overlay: rgba(22, 22, 22, 0.5),
   toggle-off: #8d8d8d,
+  shadow: rgba(0, 0, 0, 0.3),
 ) !default;
 $white: utilities.merge(
   $white,
@@ -211,6 +212,7 @@ $g10: (
   highlight: #d0e2ff,
   overlay: rgba(22, 22, 22, 0.5),
   toggle-off: #8d8d8d,
+  shadow: rgba(0, 0, 0, 0.3),
 ) !default;
 $g10: utilities.merge(
   $g10,
@@ -313,8 +315,9 @@ $g90: (
   skeleton-element: #525252,
   interactive: #4589ff,
   highlight: #0043ce,
-  overlay: rgba(22, 22, 22, 0.7),
+  overlay: rgba(0, 0, 0, 0.65),
   toggle-off: #8d8d8d,
+  shadow: rgba(0, 0, 0, 0.8),
 ) !default;
 $g90: utilities.merge(
   $g90,
@@ -417,8 +420,9 @@ $g100: (
   skeleton-element: #393939,
   interactive: #4589ff,
   highlight: #d0e2ff,
-  overlay: rgba(22, 22, 22, 0.5),
+  overlay: rgba(0, 0, 0, 0.65),
   toggle-off: #8d8d8d,
+  shadow: rgba(0, 0, 0, 0.8),
 ) !default;
 $g100: utilities.merge(
   $g100,

package/scss/modules/generated/_tokens.scss

@@ -289,6 +289,9 @@ $overlay: _get('overlay') !default;
 /// The CSS Custom Property for the `toggle-off` token
 $toggle-off: _get('toggle-off') !default;
 
+/// The CSS Custom Property for the `shadow` token
+$shadow: _get('shadow') !default;
+
 /// The CSS Custom Property for the `focus` token
 $focus: _get('focus') !default;
 

package/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;

package/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;

package/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;

package/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;

package/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

package/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

package/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

package/src/next/tokens/v11TokenGroup.js

@@ -350,6 +350,9 @@ export const group = TokenGroup.create({
     {
       name: 'toggle-off',
     },
+    {
+      name: 'shadow',
+    },
 
     focus,
     skeleton,

package/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 {

package/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',

package/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;

package/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;

package/umd/index.js

@@ -190,6 +190,7 @@
   var supportInfoInverse$5 = inverseSupport04$5;
   var overlay$5 = overlay01$5;
   var toggleOff$5 = ui04$5;
+  var shadow$5 = colors$1.rgba(colors$1.black, 0.3);
   var buttonPrimary$5 = interactive01$5;
   var buttonSecondary$5 = interactive02$5;
   var buttonTertiary$5 = interactive03$5;
@@ -342,6 +343,7 @@
     supportInfoInverse: supportInfoInverse$5,
     overlay: overlay$5,
     toggleOff: toggleOff$5,
+    shadow: shadow$5,
     buttonPrimary: buttonPrimary$5,
     buttonSecondary: buttonSecondary$5,
     buttonTertiary: buttonTertiary$5,
@@ -596,6 +598,7 @@
   var supportInfoInverse$4 = inverseSupport04$4;
   var overlay$4 = overlay01$4;
   var toggleOff$4 = ui04$4;
+  var shadow$4 = colors$1.rgba(colors$1.black, 0.3);
   var buttonPrimary$4 = interactive01$4;
   var buttonSecondary$4 = interactive02$4;
   var buttonTertiary$4 = interactive03$4;
@@ -748,6 +751,7 @@
     supportInfoInverse: supportInfoInverse$4,
     overlay: overlay$4,
     toggleOff: toggleOff$4,
+    shadow: shadow$4,
     buttonPrimary: buttonPrimary$4,
     buttonSecondary: buttonSecondary$4,
     buttonTertiary: buttonTertiary$4,
@@ -930,7 +934,7 @@
   var inverseSupport02$3 = colors$1.green50;
   var inverseSupport03$3 = colors$1.yellow;
   var inverseSupport04$3 = colors$1.blue60;
-  var overlay01$3 = colors$1.rgba(colors$1.gray100, 0.7);
+  var overlay01$3 = colors$1.rgba(colors$1.black, 0.65);
   var danger01$3 = colors$1.red60;
   var danger02$3 = colors$1.red50; // Interaction states
 
@@ -1002,6 +1006,7 @@
   var supportInfoInverse$3 = inverseSupport04$3;
   var overlay$3 = overlay01$3;
   var toggleOff$3 = ui04$3;
+  var shadow$3 = colors$1.rgba(colors$1.black, 0.8);
   var buttonPrimary$3 = interactive01$3;
   var buttonSecondary$3 = interactive02$3;
   var buttonTertiary$3 = interactive03$3;
@@ -1154,6 +1159,7 @@
     supportInfoInverse: supportInfoInverse$3,
     overlay: overlay$3,
     toggleOff: toggleOff$3,
+    shadow: shadow$3,
     buttonPrimary: buttonPrimary$3,
     buttonSecondary: buttonSecondary$3,
     buttonTertiary: buttonTertiary$3,
@@ -1340,8 +1346,9 @@
   var supportSuccessInverse$2 = colors$1.green50;
   var supportWarningInverse$2 = colors$1.yellow30;
   var supportInfoInverse$2 = colors$1.blue60;
-  var overlay$2 = colors$1.rgba(colors$1.gray100, 0.7);
+  var overlay$2 = colors$1.rgba(colors$1.black, 0.65);
   var toggleOff$2 = colors$1.gray50;
+  var shadow$2 = colors$1.rgba(colors$1.black, 0.8);
   var buttonPrimary$2 = colors$1.blue60;
   var buttonSecondary$2 = colors$1.gray60;
   var buttonTertiary$2 = colors$1.white;
@@ -1498,6 +1505,7 @@
     supportInfoInverse: supportInfoInverse$2,
     overlay: overlay$2,
     toggleOff: toggleOff$2,
+    shadow: shadow$2,
     buttonPrimary: buttonPrimary$2,
     buttonSecondary: buttonSecondary$2,
     buttonTertiary: buttonTertiary$2,
@@ -1745,7 +1753,7 @@
   var inverseSupport02$1 = colors$1.green50;
   var inverseSupport03$1 = colors$1.yellow;
   var inverseSupport04$1 = colors$1.blue60;
-  var overlay01$1 = colors$1.rgba(colors$1.gray100, 0.7);
+  var overlay01$1 = colors$1.rgba(colors$1.black, 0.65);
   var danger01$1 = colors$1.red60;
   var danger02$1 = colors$1.red40; // Interaction states
 
@@ -1817,6 +1825,7 @@
   var supportInfoInverse$1 = inverseSupport04$1;
   var overlay$1 = overlay01$1;
   var toggleOff$1 = ui04$1;
+  var shadow$1 = colors$1.rgba(colors$1.black, 0.8);
   var buttonPrimary$1 = interactive01$1;
   var buttonSecondary$1 = interactive02$1;
   var buttonTertiary$1 = interactive03$1;
@@ -1969,6 +1978,7 @@
     supportInfoInverse: supportInfoInverse$1,
     overlay: overlay$1,
     toggleOff: toggleOff$1,
+    shadow: shadow$1,
     buttonPrimary: buttonPrimary$1,
     buttonSecondary: buttonSecondary$1,
     buttonTertiary: buttonTertiary$1,
@@ -2223,6 +2233,7 @@
   var supportInfoInverse = inverseSupport04;
   var overlay = overlay01;
   var toggleOff = ui04;
+  var shadow = colors$1.rgba(colors$1.black, 0.3);
   var buttonPrimary = interactive01;
   var buttonSecondary = interactive02;
   var buttonTertiary = interactive03;
@@ -2375,6 +2386,7 @@
     supportInfoInverse: supportInfoInverse,
     overlay: overlay,
     toggleOff: toggleOff,
+    shadow: shadow,
     buttonPrimary: buttonPrimary,
     buttonSecondary: buttonSecondary,
     buttonTertiary: buttonTertiary,
@@ -2529,7 +2541,7 @@
   'interactive01', 'interactive02', 'interactive03', 'interactive04', 'uiBackground', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'icon01', 'icon02', 'icon03', 'link01', 'link02', 'inverseLink', 'field01', 'field02', 'inverse01', 'inverse02', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01', 'danger01', 'danger02', // Interactive states
   'focus', 'inverseFocusUi', 'hoverPrimary', 'activePrimary', 'hoverPrimaryText', 'hoverSecondary', 'activeSecondary', 'hoverTertiary', 'activeTertiary', 'hoverUI', 'hoverLightUI', 'hoverSelectedUI', 'activeUI', 'activeLightUI', 'selectedUI', 'selectedLightUI', 'inverseHoverUI', 'hoverDanger', 'activeDanger', 'hoverRow', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'highlight', 'decorative01', 'buttonSeparator', 'skeleton01', 'skeleton02', // New color tokens
   // TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
-  'background', 'layer', 'layerAccent', 'layerAccentHover', 'layerAccentActive', 'field', 'backgroundInverse', 'backgroundBrand', 'interactive', 'borderSubtle', 'borderStrong', 'borderInverse', 'borderInteractive', 'textPrimary', 'textSecondary', 'textPlaceholder', 'textHelper', 'textOnColor', 'textInverse', 'linkPrimary', 'linkSecondary', 'linkVisited', 'linkInverse', 'iconPrimary', 'iconSecondary', 'iconOnColor', 'iconInverse', 'supportError', 'supportSuccess', 'supportWarning', 'supportInfo', 'supportErrorInverse', 'supportSuccessInverse', 'supportWarningInverse', 'supportInfoInverse', 'overlay', 'toggleOff', 'buttonPrimary', 'buttonSecondary', 'buttonTertiary', 'buttonDangerPrimary', 'buttonDangerSecondary', 'backgroundActive', 'layerActive', 'buttonDangerActive', 'buttonPrimaryActive', 'buttonSecondaryActive', 'buttonTertiaryActive', 'focusInset', 'focusInverse', 'backgroundHover', 'layerHover', 'fieldHover', 'backgroundInverseHover', 'linkPrimaryHover', 'buttonDangerHover', 'buttonPrimaryHover', 'buttonSecondaryHover', 'buttonTertiaryHover', 'backgroundSelected', 'backgroundSelectedHover', 'layerSelected', 'layerSelectedHover', 'layerSelectedInverse', 'borderSubtleSelected', 'layerDisabled', 'fieldDisabled', 'borderDisabled', 'textDisabled', 'buttonDisabled', 'iconDisabled', 'textOnColorDisabled', 'iconOnColorDisabled', 'layerSelectedDisabled', 'skeletonBackground', 'skeletonElement', // Deprecated
+  'background', 'layer', 'layerAccent', 'layerAccentHover', 'layerAccentActive', 'field', 'backgroundInverse', 'backgroundBrand', 'interactive', 'borderSubtle', 'borderStrong', 'borderInverse', 'borderInteractive', 'textPrimary', 'textSecondary', 'textPlaceholder', 'textHelper', 'textOnColor', 'textInverse', 'linkPrimary', 'linkSecondary', 'linkVisited', 'linkInverse', 'iconPrimary', 'iconSecondary', 'iconOnColor', 'iconInverse', 'supportError', 'supportSuccess', 'supportWarning', 'supportInfo', 'supportErrorInverse', 'supportSuccessInverse', 'supportWarningInverse', 'supportInfoInverse', 'overlay', 'toggleOff', 'shadow', 'buttonPrimary', 'buttonSecondary', 'buttonTertiary', 'buttonDangerPrimary', 'buttonDangerSecondary', 'backgroundActive', 'layerActive', 'buttonDangerActive', 'buttonPrimaryActive', 'buttonSecondaryActive', 'buttonTertiaryActive', 'focusInset', 'focusInverse', 'backgroundHover', 'layerHover', 'fieldHover', 'backgroundInverseHover', 'linkPrimaryHover', 'buttonDangerHover', 'buttonPrimaryHover', 'buttonSecondaryHover', 'buttonTertiaryHover', 'backgroundSelected', 'backgroundSelectedHover', 'layerSelected', 'layerSelectedHover', 'layerSelectedInverse', 'borderSubtleSelected', 'layerDisabled', 'fieldDisabled', 'borderDisabled', 'textDisabled', 'buttonDisabled', 'iconDisabled', 'textOnColorDisabled', 'iconOnColorDisabled', 'layerSelectedDisabled', 'skeletonBackground', 'skeletonElement', // Deprecated
   'brand01', 'brand02', 'brand03', 'active01', 'hoverField', 'danger'];
   var numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
   /**
@@ -2579,7 +2591,7 @@
     colors: [{
       type: 'core',
       tokens: ['uiBackground', 'interactive01', 'interactive02', 'interactive03', 'interactive04', 'brand01', 'brand02', 'brand03', 'danger', 'danger01', 'danger02', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'link01', 'link02', 'icon01', 'icon02', 'icon03', 'field01', 'field02', 'inverse01', 'inverse02', 'inverseLink', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01', //new tokens
-      'background', 'layer', 'layerAccent', 'layerAccentHover', 'layerAccentActive', 'field', 'backgroundInverse', 'backgroundBrand', 'interactive', 'borderSubtle', 'borderStrong', 'borderInverse', 'borderInteractive', 'textPrimary', 'textSecondary', 'textPlaceholder', 'textHelper', 'textOnColor', 'textInverse', 'linkPrimary', 'linkSecondary', 'linkVisited', 'linkInverse', 'iconPrimary', 'iconSecondary', 'iconOnColor', 'iconInverse', 'supportError', 'supportSuccess', 'supportWarning', 'supportInfo', 'supportErrorInverse', 'supportSuccessInverse', 'supportWarningInverse', 'supportInfoInverse', 'overlay', 'toggleOff', 'buttonPrimary', 'buttonSecondary', 'buttonTertiary', 'buttonDangerPrimary', 'buttonDangerSecondary']
+      'background', 'layer', 'layerAccent', 'layerAccentHover', 'layerAccentActive', 'field', 'backgroundInverse', 'backgroundBrand', 'interactive', 'borderSubtle', 'borderStrong', 'borderInverse', 'borderInteractive', 'textPrimary', 'textSecondary', 'textPlaceholder', 'textHelper', 'textOnColor', 'textInverse', 'linkPrimary', 'linkSecondary', 'linkVisited', 'linkInverse', 'iconPrimary', 'iconSecondary', 'iconOnColor', 'iconInverse', 'supportError', 'supportSuccess', 'supportWarning', 'supportInfo', 'supportErrorInverse', 'supportSuccessInverse', 'supportWarningInverse', 'supportInfoInverse', 'overlay', 'toggleOff', 'shadow', 'buttonPrimary', 'buttonSecondary', 'buttonTertiary', 'buttonDangerPrimary', 'buttonDangerSecondary']
     }, {
       type: 'interactive',
       tokens: ['focus', 'inverseFocusUi', 'hoverPrimary', 'hoverPrimaryText', 'hoverSecondary', 'hoverTertiary', 'hoverUI', 'hoverLightUI', 'hoverSelectedUI', 'hoverDanger', 'hoverRow', 'activePrimary', 'activeSecondary', 'activeTertiary', 'activeUI', 'activeLightUI', 'activeDanger', 'selectedUI', 'selectedLightUI', 'highlight', 'skeleton01', 'skeleton02', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'inverseHoverUI', 'active01', 'hoverField', 'decorative01', 'buttonSeparator', // new tokens
@@ -3288,6 +3300,7 @@
   exports.overlay01 = overlay01$5;
   exports.selectedLightUI = selectedLightUI$5;
   exports.selectedUI = selectedUI$5;
+  exports.shadow = shadow$5;
   exports.skeleton01 = skeleton01$5;
   exports.skeleton02 = skeleton02$5;
   exports.skeletonBackground = skeletonBackground$5;