fix(tokens): add transparent aliases so aura tokens render correctly

salesforce-ux · Oct 12, 2017 · 2f0ad5a · 2f0ad5a
1 parent 909277f
commit 2f0ad5a
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 4 deletions.
diff --git 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
@@ -156,7 +156,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_40}'
     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/design-tokens/force-base/background-color.yml b/design-tokens/force-base/background-color.yml
@@ -153,10 +153,10 @@ props:
     value: '{!PALETTE_COOL_GRAY_4}'
     comment: Used as an alternate background for loading stencils on gray backgrounds.
   COLOR_BACKGROUND_TEMP_MODAL:
-    value: '{!PALETTE_COOL_GRAY_8}'
+    value: '{!REGENT_GREY_TRANSPARENT_80}'
     comment: 'Used as the default background color for temporary dialog elements, such as the progress spinner background.'
   COLOR_BACKGROUND_TEMP_MODAL_TINT:
-    value: '{!PALETTE_COOL_GRAY_8}'
+    value: '{!REGENT_GREY_TRANSPARENT_80}'
     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/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;
 
   /**