Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(sheet): fixed sheet color when dark theme elevation is enabled 
Ref #1075
  • Loading branch information
@mlaursen
mlaursen committed Feb 28, 2021
1 parent b68ac04 commit 0abe05e
Show file tree
Hide file tree
Showing 3 changed files with 166 additions and 3 deletions.
24 changes: 21 additions & 3 deletions packages/sheet/src/_mixins.scss
View file
Expand Up @@ -100,8 +100,11 @@

/// Creates the styles for a sheet component
@mixin rmd-sheet {
@if $rmd-theme-dark-elevation {
@include rmd-sheet-theme(background-color);
}

@include rmd-elevation($rmd-sheet-elevation);
@include rmd-theme-dark-elevation($rmd-sheet-elevation);
@include rmd-utils-scroll;
@include rmd-sheet-positions;
@include rmd-sheet-theme(max-height);
Expand All @@ -112,8 +115,13 @@
z-index: $rmd-sheet-z-index;

&--raised {
@if $rmd-theme-dark-elevation {
@include rmd-sheet-theme-update-var(
background-color,
rmd-sheet-theme-var(raised-background-color)
);
}
@include rmd-elevation($rmd-sheet-raised-elevation);
@include rmd-theme-dark-elevation($rmd-sheet-elevation);

z-index: $rmd-sheet-raised-z-index;
}
Expand Down Expand Up @@ -199,7 +207,17 @@
/// Creates all the styles for the sheet package as well as the root css
/// variable theme.
@mixin react-md-sheet {
@include rmd-theme-create-root-theme($rmd-sheet-theme-values, sheet);
$exclude: if(
$rmd-theme-dark-elevation,
(),
(background-color, raised-background-color)
);

@include rmd-theme-create-root-theme(
$rmd-sheet-theme-values,
sheet,
$exclude
);

.rmd-sheet {
@include rmd-sheet;
Expand Down
111 changes: 111 additions & 0 deletions packages/sheet/src/_variables.scss
View file
Expand Up @@ -2,6 +2,7 @@
/// @group sheet
////

@import '~@react-md/dialog/dist/variables';
@import '~@react-md/overlay/dist/variables';
@import '~@react-md/transition/dist/variables';
@import '~@react-md/theme/dist/functions';
Expand Down Expand Up @@ -40,6 +41,114 @@ $rmd-sheet-elevation: 2 !default;
/// @type Number
$rmd-sheet-raised-elevation: 16 !default;

/// The background color for a sheet rendered "inline" with other content in the
/// light theme.
///
/// Note: If `$rmd-theme-dark-elevation` is set to `false`, this variable is
/// ignored and the color is determined by the normal dialog background color
/// instead.
///
/// @type Color
/// @since 2.7.0
$rmd-sheet-light-background-color: rmd-dialog-theme-var(
background-color
) !default;

/// The background color for a sheet rendered "inline" with other content in the
/// dark theme and 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-sheet-dark-elevation-background-color: map-get(
$rmd-theme-dark-elevation-colors,
$rmd-sheet-elevation
) !default;

/// The background color for a sheet rendered "inline" with other content in the
/// dark theme.
///
/// Note: If `$rmd-theme-dark-elevation` is set to `false`, this variable is
/// ignored and the color is determined by the normal dialog background color
/// instead.
///
/// @type Color
/// @since 2.7.0
$rmd-sheet-dark-background-color: if(
$rmd-theme-dark-elevation,
$rmd-sheet-dark-elevation-background-color,
rmd-dialog-theme-var(background-color)
) !default;

/// The background color for a sheet rendered "inline" with other content.
///
/// Note: If `$rmd-theme-dark-elevation` is set to `false`, this variable is
/// ignored and the color is determined by the normal dialog background color
/// instead.
///
/// @type Color
/// @since 2.7.0
$rmd-sheet-background-color: if(
$rmd-theme-light,
$rmd-sheet-light-background-color,
$rmd-theme-dark-background-color
) !default;

/// The background color for a sheet raised above other content in the light
/// theme.
///
/// Note: If `$rmd-theme-dark-elevation` is set to `false`, this variable is
/// ignored and the color is determined by the normal dialog background color
/// instead.
///
/// @type Color
/// @since 2.7.0
$rmd-sheet-raised-light-background-color: rmd-dialog-theme-var(
background-color
) !default;

/// The background color for a sheet raised above other content in the dark
/// theme and 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-sheet-raised-dark-elevation-background-color: map-get(
$rmd-theme-dark-elevation-colors,
$rmd-sheet-raised-elevation
) !default;

/// The background color for a sheet raised above other content in the dark
/// theme.
///
/// Note: If `$rmd-theme-dark-elevation` is set to `false`, this variable is
/// ignored and the color is determined by the normal dialog background color
/// instead.
///
/// @type Color
/// @since 2.7.0
$rmd-sheet-raised-dark-background-color: if(
$rmd-theme-dark-elevation,
$rmd-sheet-raised-dark-elevation-background-color,
rmd-dialog-theme-var(background-color)
) !default;

/// The background color for a sheet raised above other content.
///
/// Note: If `$rmd-theme-dark-elevation` is set to `false`, this variable is
/// ignored and the color is determined by the normal dialog background color
/// instead.
///
/// @type Color
/// @since 2.7.0
$rmd-sheet-raised-background-color: if(
$rmd-theme-light,
$rmd-sheet-raised-light-background-color,
$rmd-theme-raised-dark-background-color
) !default;

/// The duration for the enter transition.
///
/// @require $rmd-transition-enter-duration
Expand Down Expand Up @@ -108,6 +217,8 @@ $rmd-sheet-enabled-positions: $rmd-sheet-positions !default;
/// of the icon as needed.
/// @type Map
$rmd-sheet-theme-values: (
background-color: $rmd-sheet-background-color,
raised-background-color: $rmd-sheet-raised-background-color,
touch-width: $rmd-sheet-touch-width,
static-width: $rmd-sheet-static-width,
touchable-max-height: $rmd-sheet-touchable-max-height,
Expand Down
34 changes: 34 additions & 0 deletions packages/theme/src/_mixins.scss
View file
Expand Up @@ -211,6 +211,23 @@
}
}

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

@if mixin-exists(rmd-divider-theme-update-var) {
@include rmd-divider-theme-update-var(
background-color,
Expand Down Expand Up @@ -404,6 +421,23 @@
}
}

@if mixin-exists(rmd-sheet-theme-update-var) {
@if $rmd-sheet-light-background-color != $rmd-sheet-dark-background-color {
@include rmd-sheet-theme-update-var(
background-color,
$rmd-sheet-dark-background-color
);
}
@if $rmd-sheet-raised-light-background-color !=
$rmd-sheet-raised-dark-background-color
{
@include rmd-sheet-theme-update-var(
raised-background-color,
$rmd-sheet-raised-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 0abe05e

Please sign in to comment.