@ni/nimble-components 11.12.1 → 11.13.0

package/dist/all-components-bundle.js

@@ -14419,6 +14419,22 @@
     	return {red, green, blue, alpha};
     }
 
+    /**
+     * Convert a hexadecimal color string to an RGBA CSS color string
+     * Example: 'ff0102' or '#ff0102' to 'rgba(255, 1, 2, 1)'
+     * @param hexValue Hex color (with or without a starting '#')
+     * @param alpha CSS alpha value between 0 (transparent) and 1 (opaque)
+     * @returns An rgba()-formatted CSS color string
+     */
+    function hexToRgbaCssColor(hexValue, alpha) {
+        const { red, green, blue } = hexRgb(hexValue);
+        return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+    }
+
+    const modalBackdropColorThemeLight = hexToRgbaCssColor(Black, 0.3);
+    const modalBackdropColorThemeDark = hexToRgbaCssColor(Black, 0.6);
+    const modalBackdropColorThemeColor = hexToRgbaCssColor(Black, 0.6);
+
     const Theme = {
         light: 'light',
         dark: 'dark',
@@ -14448,6 +14464,7 @@
         informationColor: 'information-color',
         borderHoverColor: 'border-hover-color',
         iconColor: 'icon-color',
+        modalBackdropColor: 'modal-backdrop-color',
         popupBoxShadowColor: 'popup-box-shadow-color',
         popupBorderColor: 'popup-border-color',
         controlHeight: 'control-height',
@@ -14681,18 +14698,6 @@
         .withPrefix('nimble')
         .register(nimbleDesignSystemProvider());
 
-    /**
-     * Convert a hexadecimal color string to an RGBA CSS color string
-     * Example: 'ff0102' or '#ff0102' to 'rgba(255, 1, 2, 1)'
-     * @param hexValue Hex color (with or without a starting '#')
-     * @param alpha CSS alpha value between 0 (transparent) and 1 (opaque)
-     * @returns An rgba()-formatted CSS color string
-     */
-    function hexToRgbaCssColor(hexValue, alpha) {
-        const { red, green, blue } = hexRgb(hexValue);
-        return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
-    }
-
     // Color Tokens
     const actionRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.actionRgbPartialColor)).withDefault((element) => hexToRgbPartial(getColorForTheme(element, Black91, Black15, White)));
     const applicationBackgroundColor = DesignToken.create(styleNameFromTokenName(tokenNames.applicationBackgroundColor)).withDefault((element) => getColorForTheme(element, White, Black85, ForestGreen));
@@ -14713,6 +14718,7 @@
     const borderHoverColor = DesignToken.create(styleNameFromTokenName(tokenNames.borderHoverColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, White));
     // Component Color Tokens
     const iconColor = DesignToken.create(styleNameFromTokenName(tokenNames.iconColor)).withDefault((element) => getColorForTheme(element, Black91, Black15, White));
+    const modalBackdropColor = 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));
@@ -14824,6 +14830,18 @@
     function getFillDownColorForTheme(element) {
         return getColorForTheme(element, Black91, Black15, White);
     }
+    function getModalBackdropForTheme(element) {
+        switch (theme.getValueFor(element)) {
+            case Theme.light:
+                return modalBackdropColorThemeLight;
+            case Theme.dark:
+                return modalBackdropColorThemeDark;
+            case Theme.color:
+                return modalBackdropColorThemeColor;
+            default:
+                return modalBackdropColorThemeLight;
+        }
+    }
 
     /**
      * Subscription for {@link ThemeStyleSheetBehavior}
@@ -16998,7 +17016,24 @@
         box-shadow: 0px 2px 3px ${popupBoxShadowColor};
         max-width: 50%;
     }
-`;
+`.withBehaviors(
+    /*
+     * We cannot use the modalBackdropColor token directly because the backdrop
+     * element is not a descendant of the nimble-theme-provider element.
+     */
+    themeBehavior(Theme.light, css `
+            dialog::backdrop {
+                background: ${modalBackdropColorThemeLight};
+            }
+        `), themeBehavior(Theme.dark, css `
+            dialog::backdrop {
+                background: ${modalBackdropColorThemeDark};
+            }
+        `), themeBehavior(Theme.color, css `
+            dialog::backdrop {
+                background: ${modalBackdropColorThemeColor};
+            }
+        `));
 
     const template$5 = html `
     <template>
@@ -18228,7 +18263,7 @@
     .overlay {
         position: fixed;
         inset: 0px;
-        background: ${popupBorderColor};
+        background: ${modalBackdropColor};
         touch-action: none;
     }