@ni/nimble-components 16.1.8 → 17.0.0

package/dist/all-components-bundle.js

@@ -15395,7 +15395,6 @@
     const Pass100DarkUi = "#00c12b";
     const Fail100LightUi = "#c4000c";
     const Fail100DarkUi = "#ff4646";
-    const Black75 = "#818386";
     const Black15 = "#f1f1f2";
     const Black7 = "#f5f5f5";
     const White = "#ffffff";
@@ -15533,7 +15532,6 @@
         borderHoverColor: 'border-hover-color',
         iconColor: 'icon-color',
         modalBackdropColor: 'modal-backdrop-color',
-        popupBoxShadowColor: 'popup-box-shadow-color',
         popupBorderColor: 'popup-border-color',
         controlHeight: 'control-height',
         smallPadding: 'small-padding',
@@ -15707,7 +15705,10 @@
         errorTextFontWeight: 'error-text-font-weight',
         errorTextFontLineHeight: 'error-text-font-line-height',
         errorTextFallbackFontFamily: 'error-text-fallback-font-family',
-        tableRowBorderColor: 'table-row-border-color'
+        tableRowBorderColor: 'table-row-border-color',
+        elevation1BoxShadow: 'elevation-1-box-shadow',
+        elevation2BoxShadow: 'elevation-2-box-shadow',
+        elevation3BoxShadow: 'elevation-3-box-shadow'
     };
     const prefix = 'ni-nimble';
     const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
@@ -15798,7 +15799,6 @@
     // Component Color Tokens
     const iconColor = DesignToken.create(styleNameFromTokenName(tokenNames.iconColor)).withDefault((element) => getColorForTheme(element, Black91, Black15, White));
     DesignToken.create(styleNameFromTokenName(tokenNames.modalBackdropColor)).withDefault((element) => getModalBackdropForTheme(element));
-    const popupBoxShadowColor = DesignToken.create(styleNameFromTokenName(tokenNames.popupBoxShadowColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black75, Black85, Black85), 0.3));
     const popupBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.popupBorderColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.3));
     DesignToken.create(styleNameFromTokenName(tokenNames.tooltipBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black85, ForestGreen));
     const tableRowBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.tableRowBorderColor)).withDefault((element) => getColorForTheme(element, Black15, Black88, ForestGreen));
@@ -15810,6 +15810,10 @@
     const borderWidth = DesignToken.create(styleNameFromTokenName(tokenNames.borderWidth)).withDefault('1px');
     const iconSize = DesignToken.create(styleNameFromTokenName(tokenNames.iconSize)).withDefault('16px');
     const drawerWidth = DesignToken.create(styleNameFromTokenName(tokenNames.drawerWidth)).withDefault('784px');
+    // Drop Shadow Tokens
+    DesignToken.create(styleNameFromTokenName(tokenNames.elevation1BoxShadow)).withDefault((element) => `0px 1px 4px ${hexToRgbaCssColor(getColorForTheme(element, Black, Black, Black), 0.16)}`);
+    const elevation2BoxShadow = DesignToken.create(styleNameFromTokenName(tokenNames.elevation2BoxShadow)).withDefault((element) => `0px 2px 4px ${hexToRgbaCssColor(getColorForTheme(element, Black, Black, Black), 0.16)}`);
+    const elevation3BoxShadow = DesignToken.create(styleNameFromTokenName(tokenNames.elevation3BoxShadow)).withDefault((element) => `0px 4px 8px ${hexToRgbaCssColor(getColorForTheme(element, Black, Black, Black), 0.3)}`);
     // Font Tokens
     createFontTokens(tokenNames.headlineFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Headline1Family, Headline1Weight, Headline1Size, Headline1LineHeight, 'serif');
     createFontTokens(tokenNames.headlinePlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Headline2Family, Headline2Weight, Headline2Size, Headline2LineHeight, 'serif');
@@ -18058,7 +18062,7 @@
         );
         z-index: 1;
         padding: var(--ni-private-listbox-padding);
-        box-shadow: 0px 3px 3px ${popupBoxShadowColor};
+        box-shadow: ${elevation2BoxShadow};
         border: 1px solid ${popupBorderColor};
         background-color: ${applicationBackgroundColor};
         background-clip: padding-box;
@@ -18494,7 +18498,7 @@
         flex-direction: column;
         background-color: ${applicationBackgroundColor};
         border: none;
-        box-shadow: 0px 4px 8px #0000004d;
+        box-shadow: ${elevation3BoxShadow};
         padding: 0px;
         width: 400px;
         max-height: 600px;
@@ -18802,8 +18806,7 @@
     }
 
     :host([location='left']) .dialog-contents {
-        border-right: ${borderWidth} solid ${popupBoxShadowColor};
-        box-shadow: 3px 0px 8px ${popupBoxShadowColor};
+        box-shadow: 3px 0px 8px #00000033;
     }
 
     :host([location='left']) dialog.animating .dialog-contents {
@@ -18822,8 +18825,7 @@
 
     :host([location='right']) .dialog-contents {
         right: 0px;
-        border-left: ${borderWidth} solid ${popupBoxShadowColor};
-        box-shadow: -3px 0px 8px ${popupBoxShadowColor};
+        box-shadow: -3px 0px 8px #00000033;
     }
 
     :host([location='right']) dialog.animating .dialog-contents {
@@ -20731,7 +20733,7 @@
         padding: 4px;
         min-width: 168px;
         width: max-content;
-        box-shadow: 0px 2px 3px ${popupBoxShadowColor};
+        box-shadow: ${elevation2BoxShadow};
     }
     :host([slot='submenu']) {
         margin: 0 calc(${smallPadding} * 2);
@@ -25921,7 +25923,7 @@
         box-sizing: border-box;
         flex-shrink: 0;
         max-width: 440px;
-        box-shadow: 0px 3px 4px ${popupBoxShadowColor};
+        box-shadow: ${elevation2BoxShadow};
         display: inline-flex;
         border: ${borderWidth} solid var(--ni-private-tooltip-border-color);
         background-color: var(--ni-private-tooltip-background-color);