Skip to content

Commit 2f0ad5a

Browse files
committed
fix(tokens): add transparent aliases so aura tokens render correctly
1 parent 909277f commit 2f0ad5a

File tree

4 files changed

+26
-4
lines changed

4 files changed

+26
-4
lines changed

design-tokens/color-palettes.yml

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,3 +43,25 @@ aliases:
4343
PALETTE_GRAY_10: "{!PALETTE_WARM_GRAY_10}"
4444
PALETTE_GRAY_11: "{!PALETTE_WARM_GRAY_11}"
4545
PALETTE_GRAY_12: "{!PALETTE_WARM_GRAY_12}"
46+
47+
## TRANSPARENT GRAYS BASED ON DARKEST GRAY (PALETTE_GRAY_12)
48+
PALETTE_DARK_GRAY_TRANSPARENT_10: "rgba(43, 40, 38, 0.1)"
49+
PALETTE_DARK_GRAY_TRANSPARENT_20: "rgba(43, 40, 38, 0.2)"
50+
PALETTE_DARK_GRAY_TRANSPARENT_30: "rgba(43, 40, 38, 0.3)"
51+
PALETTE_DARK_GRAY_TRANSPARENT_40: "rgba(43, 40, 38, 0.4)"
52+
PALETTE_DARK_GRAY_TRANSPARENT_50: "rgba(43, 40, 38, 0.5)"
53+
PALETTE_DARK_GRAY_TRANSPARENT_60: "rgba(43, 40, 38, 0.6)"
54+
PALETTE_DARK_GRAY_TRANSPARENT_70: "rgba(43, 40, 38, 0.7)"
55+
PALETTE_DARK_GRAY_TRANSPARENT_80: "rgba(43, 40, 38, 0.8)"
56+
PALETTE_DARK_GRAY_TRANSPARENT_90: "rgba(43, 40, 38, 0.9)"
57+
58+
## TRANSPARENT GRAYS BASED ON LIGHTEST GRAY (PALETTE_GRAY_1)
59+
PALETTE_LIGHT_GRAY_TRANSPARENT_10: "rgba(255, 255, 255, 0.1)"
60+
PALETTE_LIGHT_GRAY_TRANSPARENT_20: "rgba(255, 255, 255, 0.2)"
61+
PALETTE_LIGHT_GRAY_TRANSPARENT_30: "rgba(255, 255, 255, 0.3)"
62+
PALETTE_LIGHT_GRAY_TRANSPARENT_40: "rgba(255, 255, 255, 0.4)"
63+
PALETTE_LIGHT_GRAY_TRANSPARENT_50: "rgba(255, 255, 255, 0.5)"
64+
PALETTE_LIGHT_GRAY_TRANSPARENT_60: "rgba(255, 255, 255, 0.6)"
65+
PALETTE_LIGHT_GRAY_TRANSPARENT_70: "rgba(255, 255, 255, 0.7)"
66+
PALETTE_LIGHT_GRAY_TRANSPARENT_80: "rgba(255, 255, 255, 0.8)"
67+
PALETTE_LIGHT_GRAY_TRANSPARENT_90: "rgba(255, 255, 255, 0.9)"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ props:
156156
value: '{!PALETTE_GRAY_8}'
157157
comment: 'Used as the default background color for temporary dialog elements, such as the progress spinner background.'
158158
COLOR_BACKGROUND_TEMP_MODAL_TINT:
159-
value: '{!PALETTE_GRAY_8}'
159+
value: '{!PALETTE_DARK_GRAY_TRANSPARENT_40}'
160160
comment: The color of the mask overlay that appears when you enter a modal state.
161161
COLOR_BACKGROUND_TEMP_MODAL_TINT_ALT:
162162
value: '{!WHITE_TRANSPARENT_75}'

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -153,10 +153,10 @@ props:
153153
value: '{!PALETTE_COOL_GRAY_4}'
154154
comment: Used as an alternate background for loading stencils on gray backgrounds.
155155
COLOR_BACKGROUND_TEMP_MODAL:
156-
value: '{!PALETTE_COOL_GRAY_8}'
156+
value: '{!REGENT_GREY_TRANSPARENT_80}'
157157
comment: 'Used as the default background color for temporary dialog elements, such as the progress spinner background.'
158158
COLOR_BACKGROUND_TEMP_MODAL_TINT:
159-
value: '{!PALETTE_COOL_GRAY_8}'
159+
value: '{!REGENT_GREY_TRANSPARENT_80}'
160160
comment: The color of the mask overlay that appears when you enter a modal state.
161161
COLOR_BACKGROUND_TEMP_MODAL_TINT_ALT:
162162
value: '{!WHITE_TRANSPARENT_75}'

ui/components/modals/base/_index.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,7 @@
222222
right: 0;
223223
bottom: 0;
224224
left: 0;
225-
background: rgba($color-background-temp-modal-tint, 0.8);
225+
background: $color-background-temp-modal-tint;
226226
z-index: $z-index-modal;
227227

228228
/**

0 commit comments

Comments
 (0)