Skip to content

Commit

Permalink
fix(card): fixed card 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 52c752d commit e5da5f5
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 28 deletions.
12 changes: 2 additions & 10 deletions packages/card/src/_mixins.scss
Expand Up @@ -73,25 +73,17 @@
);
}
}
@include rmd-theme(background-color, surface);
@include rmd-theme(color, text-primary-on-background);
@include rmd-card-theme(background-color);
@include rmd-card-theme(color);

border-radius: $rmd-card-border-radius;
display: inline-block;

&--shadowed {
@include rmd-elevation($rmd-card-elevation);
@include rmd-theme-dark-elevation($rmd-card-elevation);
}

&--bordered {
@include rmd-theme-dark-elevation-styles {
@include rmd-theme-update-var(
surface,
$rmd-card-dark-elevation-bordered-background-color
);
}

border: $rmd-card-border-width solid $rmd-card-border-color;
}

Expand Down
60 changes: 42 additions & 18 deletions packages/card/src/_variables.scss
Expand Up @@ -6,11 +6,52 @@
@import '~@react-md/divider/dist/variables';
@import '~@react-md/theme/dist/functions';

/// The elevation to use for cards that are not raisable.
/// @type Number
$rmd-card-elevation: 2 !default;

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

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

/// @type Color
/// @since 2.5.4
/// @deprecated Use `$rmd-card-dark-elevation-color` instead starting with `v2.7.0`
$rmd-card-dark-elevation-bordered-background-color: $rmd-card-dark-elevation-background-color;

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

/// The base background color to apply to cards.
///
/// @require rmd-theme-var
/// @type Color
$rmd-card-background-color: rmd-theme-var(surface) !default;
$rmd-card-background-color: if(
$rmd-theme-light,
$rmd-card-light-background-color,
$rmd-card-dark-background-color
) !default;

/// The base primary text color to apply to cards.
///
Expand All @@ -32,10 +73,6 @@ $rmd-card-secondary-color: if(
rmd-theme-var(text-primary-on-dark)
) !default;

/// The elevation to use for cards that are not raisable.
/// @type Number
$rmd-card-elevation: 2 !default;

/// The starting elevation for a raisable card.
/// @type Number
$rmd-card-base-elevation: 1 !default;
Expand Down Expand Up @@ -90,19 +127,6 @@ $rmd-card-border-color: rmd-divider-theme-var(background-color) !default;
/// @type Number
$rmd-card-border-width: $rmd-divider-size !default;

/// The background color to use for bordered cards when the
/// `$rmd-theme-dark-elevation` variable is set to `true`. This basically
/// overrides the `surface` color to be this value.
///
/// @see $rmd-theme-dark-elevation
/// @require $rmd-theme-dark-elevation-colors
/// @type Color
/// @since 2.5.4
$rmd-card-dark-elevation-bordered-background-color: map-get(
$rmd-theme-dark-elevation-colors,
$rmd-card-elevation
);

/// A Map of all the "themeable" parts of the card package. Every key in this
/// map will be used to create a css variable to dynamically update the values
/// of the icon as needed.
Expand Down
14 changes: 14 additions & 0 deletions packages/theme/src/_mixins.scss
Expand Up @@ -169,6 +169,13 @@
secondary-color,
$rmd-theme-secondary-text-on-light-color
);

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

@if mixin-exists(rmd-chip-theme-update-var) {
Expand Down Expand Up @@ -339,6 +346,13 @@
secondary-color,
$rmd-theme-secondary-text-on-dark-color
);

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

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

0 comments on commit e5da5f5

Please sign in to comment.