Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(dialog): fixed dialog color when dark theme elevation is enabled
Ref #1075
  • Loading branch information
mlaursen committed Feb 28, 2021
1 parent e5da5f5 commit e79993d
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 3 deletions.
8 changes: 5 additions & 3 deletions packages/dialog/src/_mixins.scss
Expand Up @@ -50,9 +50,11 @@
/// @access private
@mixin rmd-dialog {
@include rmd-elevation($rmd-dialog-elevation);
@include rmd-theme-dark-elevation($rmd-dialog-elevation);
@include rmd-theme-update-var(background, rmd-theme-var(surface));
@include rmd-theme(background-color, background);
@include rmd-dialog-theme(background-color);
@include rmd-theme-update-var(
background,
rmd-dialog-theme-var(background-color)
);
@include rmd-theme(color, text-primary-on-background);
@include rmd-utils-hide-focus-outline;
@if mixin-exists(rmd-app-bar-theme-update-var) {
Expand Down
41 changes: 41 additions & 0 deletions packages/dialog/src/_variables.scss
Expand Up @@ -3,6 +3,8 @@
////

@import '~@react-md/overlay/dist/variables';
@import '~@react-md/theme/dist/variables';
@import '~@react-md/theme/dist/functions';
@import '~@react-md/utils/dist/variables';

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

/// The background color for a dialog in light themes.
///
/// @type Color
/// @since 2.7.0
$rmd-dialog-light-background-color: rmd-theme-var(surface) !default;

/// The background color for a dialog in dark themes when the
/// `$rmd-theme-dark-elevation` feature flag is also enabled.
///
/// @see $rmd-theme-dark-elevation
/// @require $rmd-theme-dark-elevation-colors
/// @type Color
/// @since 2.7.0
$rmd-dialog-dark-elevation-background-color: map-get(
$rmd-theme-dark-elevation-colors,
$rmd-dialog-elevation
) !default;

/// The background color for a dialog in dark themes.
///
/// @type Color
/// @since 2.7.0
$rmd-dialog-dark-background-color: if(
$rmd-theme-dark-elevation and $rmd-dialog-dark-elevation-background-color,
$rmd-dialog-dark-elevation-background-color,
rmd-theme-var(surface)
) !default;

/// The base background color to apply to dialogs.
///
/// @type Color
/// @since 2.7.0
$rmd-dialog-background-color: if(
$rmd-theme-light,
$rmd-dialog-light-background-color,
$rmd-dialog-dark-background-color
) !default;

/// The z-index for dialogs. This value is a bit larger than overlays just in
/// case other components are using the overlay as well. The dialog's overlay
/// will also gain this z-index value.
Expand Down Expand Up @@ -77,6 +117,7 @@ $rmd-dialog-min-width: 17.5rem !default;
/// of the icon as needed.
/// @type Map
$rmd-dialog-theme-values: (
background-color: $rmd-dialog-background-color,
horizontal-margin: $rmd-dialog-horizontal-margin,
vertical-margin: $rmd-dialog-vertical-margin,
min-width: $rmd-dialog-min-width,
Expand Down
20 changes: 20 additions & 0 deletions packages/theme/src/_mixins.scss
Expand Up @@ -201,6 +201,16 @@
);
}

@if mixin-exists(rmd-dialog-theme-update-var) {
@if $rmd-dialog-light-background-color != $rmd-dialog-dark-background-color
{
@include rmd-dialog-theme-update-var(
background-color,
$rmd-dialog-light-background-color
);
}
}

@if mixin-exists(rmd-divider-theme-update-var) {
@include rmd-divider-theme-update-var(
background-color,
Expand Down Expand Up @@ -375,6 +385,16 @@
);
}

@if mixin-exists(rmd-dialog-theme-update-var) {
@if $rmd-dialog-light-background-color != $rmd-dialog-dark-background-color
{
@include rmd-dialog-theme-update-var(
background-color,
$rmd-dialog-dark-background-color
);
}
}

@if mixin-exists(rmd-divider-theme-update-var) {
@include rmd-divider-theme-update-var(
background-color,
Expand Down

0 comments on commit e79993d

Please sign in to comment.