Skip to content

Commit e79993d

Browse files
committed
fix(dialog): fixed dialog color when dark theme elevation is enabled
Ref #1075
1 parent e5da5f5 commit e79993d

File tree

3 files changed

+66
-3
lines changed

3 files changed

+66
-3
lines changed

packages/dialog/src/_mixins.scss

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,11 @@
5050
/// @access private
5151
@mixin rmd-dialog {
5252
@include rmd-elevation($rmd-dialog-elevation);
53-
@include rmd-theme-dark-elevation($rmd-dialog-elevation);
54-
@include rmd-theme-update-var(background, rmd-theme-var(surface));
55-
@include rmd-theme(background-color, background);
53+
@include rmd-dialog-theme(background-color);
54+
@include rmd-theme-update-var(
55+
background,
56+
rmd-dialog-theme-var(background-color)
57+
);
5658
@include rmd-theme(color, text-primary-on-background);
5759
@include rmd-utils-hide-focus-outline;
5860
@if mixin-exists(rmd-app-bar-theme-update-var) {

packages/dialog/src/_variables.scss

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
////
44

55
@import '~@react-md/overlay/dist/variables';
6+
@import '~@react-md/theme/dist/variables';
7+
@import '~@react-md/theme/dist/functions';
68
@import '~@react-md/utils/dist/variables';
79

810
/// The elevation (box-shadow) to use for the dialog when it is not full page.
@@ -12,6 +14,44 @@
1214
/// @type Number
1315
$rmd-dialog-elevation: 16 !default;
1416

17+
/// The background color for a dialog in light themes.
18+
///
19+
/// @type Color
20+
/// @since 2.7.0
21+
$rmd-dialog-light-background-color: rmd-theme-var(surface) !default;
22+
23+
/// The background color for a dialog in dark themes when the
24+
/// `$rmd-theme-dark-elevation` feature flag is also enabled.
25+
///
26+
/// @see $rmd-theme-dark-elevation
27+
/// @require $rmd-theme-dark-elevation-colors
28+
/// @type Color
29+
/// @since 2.7.0
30+
$rmd-dialog-dark-elevation-background-color: map-get(
31+
$rmd-theme-dark-elevation-colors,
32+
$rmd-dialog-elevation
33+
) !default;
34+
35+
/// The background color for a dialog in dark themes.
36+
///
37+
/// @type Color
38+
/// @since 2.7.0
39+
$rmd-dialog-dark-background-color: if(
40+
$rmd-theme-dark-elevation and $rmd-dialog-dark-elevation-background-color,
41+
$rmd-dialog-dark-elevation-background-color,
42+
rmd-theme-var(surface)
43+
) !default;
44+
45+
/// The base background color to apply to dialogs.
46+
///
47+
/// @type Color
48+
/// @since 2.7.0
49+
$rmd-dialog-background-color: if(
50+
$rmd-theme-light,
51+
$rmd-dialog-light-background-color,
52+
$rmd-dialog-dark-background-color
53+
) !default;
54+
1555
/// The z-index for dialogs. This value is a bit larger than overlays just in
1656
/// case other components are using the overlay as well. The dialog's overlay
1757
/// will also gain this z-index value.
@@ -77,6 +117,7 @@ $rmd-dialog-min-width: 17.5rem !default;
77117
/// of the icon as needed.
78118
/// @type Map
79119
$rmd-dialog-theme-values: (
120+
background-color: $rmd-dialog-background-color,
80121
horizontal-margin: $rmd-dialog-horizontal-margin,
81122
vertical-margin: $rmd-dialog-vertical-margin,
82123
min-width: $rmd-dialog-min-width,

packages/theme/src/_mixins.scss

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -201,6 +201,16 @@
201201
);
202202
}
203203

204+
@if mixin-exists(rmd-dialog-theme-update-var) {
205+
@if $rmd-dialog-light-background-color != $rmd-dialog-dark-background-color
206+
{
207+
@include rmd-dialog-theme-update-var(
208+
background-color,
209+
$rmd-dialog-light-background-color
210+
);
211+
}
212+
}
213+
204214
@if mixin-exists(rmd-divider-theme-update-var) {
205215
@include rmd-divider-theme-update-var(
206216
background-color,
@@ -375,6 +385,16 @@
375385
);
376386
}
377387

388+
@if mixin-exists(rmd-dialog-theme-update-var) {
389+
@if $rmd-dialog-light-background-color != $rmd-dialog-dark-background-color
390+
{
391+
@include rmd-dialog-theme-update-var(
392+
background-color,
393+
$rmd-dialog-dark-background-color
394+
);
395+
}
396+
}
397+
378398
@if mixin-exists(rmd-divider-theme-update-var) {
379399
@include rmd-divider-theme-update-var(
380400
background-color,

0 commit comments

Comments
 (0)