Skip to content
Permalink
Browse files

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

  • Loading branch information...
brandonferrua committed Oct 12, 2017
1 parent 909277f commit 2f0ad5ac2e102d19be13e8d1d87656edc97e3e88
@@ -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)"
@@ -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}'
@@ -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}'
@@ -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;

/**

0 comments on commit 2f0ad5a

Please sign in to comment.
You can’t perform that action at this time.