From 728a0a94fb9cfcfef9039ac6f0e1af1bf80029c8 Mon Sep 17 00:00:00 2001
From: Brandon Ferrua <bferrua@gmail.com>
Date: Tue, 7 Nov 2017 16:13:05 -0800
Subject: [PATCH] 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
---
 design-tokens/color-palettes.yml              | 22 +++++++++++++++++++
 .../force-base-skin/background-color.yml      |  2 +-
 ui/components/buttons/base/_index.scss        |  4 ++++
 ui/components/modals/base/_index.scss         |  2 +-
 4 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/design-tokens/color-palettes.yml b/design-tokens/color-palettes.yml
index ea4307db8f..4f893be2e9 100644
--- a/design-tokens/color-palettes.yml
+++ b/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)"
diff --git a/design-tokens/force-base-skin/background-color.yml b/design-tokens/force-base-skin/background-color.yml
index 1042ebc600..76e75834c1 100644
--- a/design-tokens/force-base-skin/background-color.yml
+++ b/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}'
diff --git a/ui/components/buttons/base/_index.scss b/ui/components/buttons/base/_index.scss
index 4311a3cd98..4c1e2030e5 100644
--- a/ui/components/buttons/base/_index.scss
+++ b/ui/components/buttons/base/_index.scss
@@ -75,6 +75,10 @@
 
   &[disabled] {
     color: $color-text-button-default-disabled;
+
+    * {
+      pointer-events: none;
+    }
   }
 
   &:hover,
diff --git a/ui/components/modals/base/_index.scss b/ui/components/modals/base/_index.scss
index cac9cf8074..5405b67fd1 100644
--- a/ui/components/modals/base/_index.scss
+++ b/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;
 
   /**