Skip to content

Commit

Permalink
fix(menu): fixed menu color when dark theme elevation is enabled
Browse files Browse the repository at this point in the history
Ref #1075
  • Loading branch information
mlaursen committed Feb 28, 2021
1 parent 99cc271 commit 52c752d
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 7 deletions.
1 change: 0 additions & 1 deletion packages/menu/src/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,6 @@
@include rmd-utils-hide-focus-outline;
@include rmd-utils-scroll;
@include rmd-elevation($rmd-menu-elevation);
@include rmd-theme-dark-elevation($rmd-menu-elevation);
@include rmd-menu-theme(background-color);
@include rmd-menu-theme(color);
@include rmd-menu-theme(min-width);
Expand Down
44 changes: 38 additions & 6 deletions packages/menu/src/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,48 @@
@import '~@react-md/list/dist/functions';
@import '~@react-md/utils/dist/variables';

/// The elevation for menus. This should be a number from 0 to 24 (inclusive) as
/// it gets passed to the `rmd-elevation` mixin.
/// @type Number
$rmd-menu-elevation: 8 !default;

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

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

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

/// The background color to use for menus
///
/// @require rmd-theme-var
/// @type Color
$rmd-menu-background-color: rmd-theme-var(surface) !default;
$rmd-menu-background-color: if(
$rmd-theme-light,
$rmd-menu-light-background-color,
$rmd-menu-dark-background-color
) !default;

/// The text color to use for menus
///
Expand All @@ -24,11 +61,6 @@ $rmd-menu-color: rmd-theme-var(on-surface) !default;
/// @type Number
$rmd-menu-z-index: $rmd-utils-temporary-element-z-index !default;

/// The elevation for menus. This should be a number from 0 to 24 (inclusive) as
/// it gets passed to the `rmd-elevation` mixin.
/// @type Number
$rmd-menu-elevation: 8 !default;

/// The min-width to apply to menus.
/// @type Number
$rmd-menu-min-width: 7rem !default;
Expand Down
18 changes: 18 additions & 0 deletions packages/theme/src/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,15 @@
);
}

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

@if mixin-exists(rmd-states-theme-update-var) {
@include rmd-states-theme-update-var(
hover-color,
Expand Down Expand Up @@ -374,6 +383,15 @@
);
}

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

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

0 comments on commit 52c752d

Please sign in to comment.