Skip to content

Commit 99cc271

Browse files
committed
fix(alert): fixed alert color when dark theme elevation is enabled
Ref #1075
1 parent 24e5df1 commit 99cc271

File tree

3 files changed

+49
-7
lines changed

3 files changed

+49
-7
lines changed

packages/alert/src/_mixins.scss

-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,6 @@
7272
/// internally.
7373
@mixin rmd-toast {
7474
@include rmd-elevation($rmd-toast-elevation);
75-
@include rmd-theme-dark-elevation($rmd-toast-elevation);
7675
@include rmd-typography(subtitle-2);
7776
@include rmd-alert-theme(background-color);
7877
@include rmd-alert-theme(color);

packages/alert/src/_variables.scss

+22-6
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,11 @@ $rmd-snackbar-margin: 1rem !default;
1818
/// @type Number
1919
$rmd-snackbar-z-index: $rmd-utils-temporary-element-z-index + 10 !default;
2020

21+
/// The elevation to add to a toast. This will be used to create the correct
22+
/// box-shadow.
23+
/// @type Number
24+
$rmd-toast-elevation: 6 !default;
25+
2126
/// The border radius to apply to a toast.
2227
/// @type Number
2328
$rmd-toast-border-radius: 0.25rem !default;
@@ -32,9 +37,25 @@ $rmd-toast-light-background-color: #323232 !default;
3237
/// @type Color
3338
$rmd-toast-light-color: $rmd-white-base !default;
3439

40+
/// The background color for a toast in dark themes when the
41+
/// `$rmd-theme-dark-elevation` feature flag is also enabled.
42+
///
43+
/// @see $rmd-theme-dark-elevation
44+
/// @require $rmd-theme-dark-elevation-colors
45+
/// @type Color
46+
/// @since 2.7.0
47+
$rmd-toast-dark-elevation-background-color: map-get(
48+
$rmd-theme-dark-elevation-colors,
49+
$rmd-toast-elevation
50+
) !default;
51+
3552
/// The background color for a toast in dark themes.
3653
/// @type Color
37-
$rmd-toast-dark-background-color: $rmd-toast-light-background-color !default;
54+
$rmd-toast-dark-background-color: if(
55+
$rmd-theme-dark-elevation and $rmd-toast-dark-elevation-background-color,
56+
$rmd-toast-dark-elevation-background-color,
57+
$rmd-toast-light-background-color
58+
) !default;
3859

3960
/// The text color for a toast in dark themes
4061
///
@@ -95,11 +116,6 @@ $rmd-toast-action-margin: 0.5rem !default;
95116
/// @type Number
96117
$rmd-toast-stacked-action-margin-top: 0.25rem !default;
97118

98-
/// The elevation to add to a toast. This will be used to create the correct
99-
/// box-shadow.
100-
/// @type Number
101-
$rmd-toast-elevation: 6 !default;
102-
103119
/// The transition duration for the enter animation for a toast. If this value
104120
/// gets updated, you'll also need to update the `timoout` prop on the `Toast`
105121
/// as well.

packages/theme/src/_mixins.scss

+27
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,18 @@
137137
$rmd-theme-icon-on-light-color
138138
);
139139

140+
@if mixin-exists(rmd-alert-theme-update-var) {
141+
@if $rmd-toast-light-background-color != $rmd-toast-dark-background-color {
142+
@include rmd-alert-theme-update-var(
143+
background-color,
144+
$rmd-toast-light-background-color
145+
);
146+
}
147+
@if $rmd-toast-light-color != $rmd-toast-dark-color {
148+
@include rmd-alert-theme-update-var(color, $rmd-toast-light-color);
149+
}
150+
}
151+
140152
@if mixin-exists(rmd-app-bar-theme-update-var) {
141153
@include rmd-app-bar-theme-update-var(
142154
default-background-color,
@@ -283,6 +295,21 @@
283295
$rmd-theme-icon-on-dark-color
284296
);
285297

298+
@if mixin-exists(rmd-alert-theme-update-var) {
299+
@if $rmd-toast-light-color != $rmd-toast-dark-color {
300+
@include rmd-alert-theme-update-var(
301+
background-color,
302+
$rmd-toast-dark-color
303+
);
304+
}
305+
@if $rmd-toast-light-background-color != $rmd-toast-dark-background-color {
306+
@include rmd-alert-theme-update-var(
307+
background-color,
308+
$rmd-toast-dark-background-color
309+
);
310+
}
311+
}
312+
286313
@if mixin-exists(rmd-app-bar-theme-update-var) {
287314
@include rmd-app-bar-theme-update-var(
288315
default-background-color,

0 commit comments

Comments
 (0)