Skip to content

Commit

Permalink
fix(form): fixed listbox 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 e79993d commit b68ac04
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 7 deletions.
1 change: 1 addition & 0 deletions packages/form/src/_variables.scss
Expand Up @@ -76,6 +76,7 @@ $rmd-form-theme-values: (
label-top-offset: 0px,
label-active-padding: 0px,
label-active-background-color: transparent,
listbox-background-color: $rmd-listbox-background-color,
text-padding-left: 0px,
text-padding-right: 0px,
text-padding-top: 0px,
Expand Down
3 changes: 1 addition & 2 deletions packages/form/src/select/_mixins.scss
Expand Up @@ -120,8 +120,7 @@

&--temporary {
@include rmd-elevation($rmd-listbox-elevation);
@include rmd-theme-dark-elevation($rmd-listbox-elevation);
@include rmd-theme(background-color, surface);
@include rmd-form-theme(background-color, listbox-background-color);
@include rmd-theme(color, on-surface);

z-index: $rmd-listbox-z-index;
Expand Down
49 changes: 44 additions & 5 deletions packages/form/src/select/_variables.scss
Expand Up @@ -3,6 +3,7 @@
////

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

/// The additional amount of apdding to apply to the top of the select field
Expand All @@ -17,17 +18,55 @@ $rmd-select-native-multiple-padding: 0.75rem !default;
/// @type Number
$rmd-select-native-addon-top: 1rem !default;

/// The elevation level for a temporary listbox. This should be a number between
/// 0-24 as it generates a material design box shadow value.
/// @type Number
$rmd-listbox-elevation: 8 !default;

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

/// The background color for a temporary listbox 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-listbox-dark-elevation-background-color: map-get(
$rmd-theme-dark-elevation-colors,
$rmd-listbox-elevation
) !default;

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

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

/// The z-index to use for a temporary listbox.
///
/// @require $rmd-utils-temporary-element-z-index
/// @type Number
$rmd-listbox-z-index: $rmd-utils-temporary-element-z-index !default;

/// The elevation level for a temporary listbox. This should be a number between
/// 0-24 as it generates a material design box shadow value.
/// @type Number
$rmd-listbox-elevation: 8 !default;

/// The styles to apply when an option is focused with `aria-activedescendant`
/// behavior. This should be a map of styles that should be applied.
///
Expand Down
18 changes: 18 additions & 0 deletions packages/theme/src/_mixins.scss
Expand Up @@ -231,6 +231,15 @@
text-filled-color,
$rmd-text-field-filled-light-background-color
);

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

@if mixin-exists(rmd-menu-theme-update-var) {
Expand Down Expand Up @@ -415,6 +424,15 @@
text-filled-color,
$rmd-text-field-filled-dark-background-color
);

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

@if mixin-exists(rmd-menu-theme-update-var) {
Expand Down

0 comments on commit b68ac04

Please sign in to comment.