fix(modal): update property to accept pure rgba to ensure proper rendering of backdrop (#2907)

fix(button): disable point events on children elements of button

Author: brandonferrua

design-tokens/color-palettes.yml

@@ -43,3 +43,25 @@ aliases:
   PALETTE_GRAY_10: "{!PALETTE_WARM_GRAY_10}"
   PALETTE_GRAY_11: "{!PALETTE_WARM_GRAY_11}"
   PALETTE_GRAY_12: "{!PALETTE_WARM_GRAY_12}"
+
+  ## TRANSPARENT GRAYS BASED ON DARKEST GRAY (PALETTE_GRAY_12)
+  PALETTE_DARK_GRAY_TRANSPARENT_10: "rgba(43, 40, 38, 0.1)"
+  PALETTE_DARK_GRAY_TRANSPARENT_20: "rgba(43, 40, 38, 0.2)"
+  PALETTE_DARK_GRAY_TRANSPARENT_30: "rgba(43, 40, 38, 0.3)"
+  PALETTE_DARK_GRAY_TRANSPARENT_40: "rgba(43, 40, 38, 0.4)"
+  PALETTE_DARK_GRAY_TRANSPARENT_50: "rgba(43, 40, 38, 0.5)"
+  PALETTE_DARK_GRAY_TRANSPARENT_60: "rgba(43, 40, 38, 0.6)"
+  PALETTE_DARK_GRAY_TRANSPARENT_70: "rgba(43, 40, 38, 0.7)"
+  PALETTE_DARK_GRAY_TRANSPARENT_80: "rgba(43, 40, 38, 0.8)"
+  PALETTE_DARK_GRAY_TRANSPARENT_90: "rgba(43, 40, 38, 0.9)"
+
+  ## TRANSPARENT GRAYS BASED ON LIGHTEST GRAY (PALETTE_GRAY_1)
+  PALETTE_LIGHT_GRAY_TRANSPARENT_10: "rgba(255, 255, 255, 0.1)"
+  PALETTE_LIGHT_GRAY_TRANSPARENT_20: "rgba(255, 255, 255, 0.2)"
+  PALETTE_LIGHT_GRAY_TRANSPARENT_30: "rgba(255, 255, 255, 0.3)"
+  PALETTE_LIGHT_GRAY_TRANSPARENT_40: "rgba(255, 255, 255, 0.4)"
+  PALETTE_LIGHT_GRAY_TRANSPARENT_50: "rgba(255, 255, 255, 0.5)"
+  PALETTE_LIGHT_GRAY_TRANSPARENT_60: "rgba(255, 255, 255, 0.6)"
+  PALETTE_LIGHT_GRAY_TRANSPARENT_70: "rgba(255, 255, 255, 0.7)"
+  PALETTE_LIGHT_GRAY_TRANSPARENT_80: "rgba(255, 255, 255, 0.8)"
+  PALETTE_LIGHT_GRAY_TRANSPARENT_90: "rgba(255, 255, 255, 0.9)"

design-tokens/force-base-skin/background-color.yml

@@ -150,7 +150,7 @@ props:
     value: '{!PALETTE_GRAY_8}'
     comment: 'Used as the default background color for temporary dialog elements, such as the progress spinner background.'
   COLOR_BACKGROUND_TEMP_MODAL_TINT:
-    value: '{!PALETTE_GRAY_8}'
+    value: '{!PALETTE_DARK_GRAY_TRANSPARENT_60}'
     comment: The color of the mask overlay that appears when you enter a modal state.
   COLOR_BACKGROUND_TEMP_MODAL_TINT_ALT:
     value: '{!WHITE_TRANSPARENT_75}'

ui/components/buttons/base/_index.scss

@@ -75,6 +75,10 @@
 
   &[disabled] {
     color: $color-text-button-default-disabled;
+
+    * {
+      pointer-events: none;
+    }
   }
 
   &:hover,

ui/components/modals/base/_index.scss

@@ -222,7 +222,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  background: rgba($color-background-temp-modal-tint, 0.8);
+  background: $color-background-temp-modal-tint;
   z-index: $z-index-modal;
 
   /**