Skip to content

Commit 0abe05e

Browse files
mlaursenmlaursen
committed
fix(sheet): fixed sheet color when dark theme elevation is enabled
Ref #1075
1 parent b68ac04 commit 0abe05e

File tree

3 files changed

+166
-3
lines changed

3 files changed

+166
-3
lines changed

‎packages/sheet/src/_mixins.scss

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -100,8 +100,11 @@
100100

101101
/// Creates the styles for a sheet component
102102
@mixin rmd-sheet {
103+
@if $rmd-theme-dark-elevation {
104+
@include rmd-sheet-theme(background-color);
105+
}
106+
103107
@include rmd-elevation($rmd-sheet-elevation);
104-
@include rmd-theme-dark-elevation($rmd-sheet-elevation);
105108
@include rmd-utils-scroll;
106109
@include rmd-sheet-positions;
107110
@include rmd-sheet-theme(max-height);
@@ -112,8 +115,13 @@
112115
z-index: $rmd-sheet-z-index;
113116

114117
&--raised {
118+
@if $rmd-theme-dark-elevation {
119+
@include rmd-sheet-theme-update-var(
120+
background-color,
121+
rmd-sheet-theme-var(raised-background-color)
122+
);
123+
}
115124
@include rmd-elevation($rmd-sheet-raised-elevation);
116-
@include rmd-theme-dark-elevation($rmd-sheet-elevation);
117125

118126
z-index: $rmd-sheet-raised-z-index;
119127
}
@@ -199,7 +207,17 @@
199207
/// Creates all the styles for the sheet package as well as the root css
200208
/// variable theme.
201209
@mixin react-md-sheet {
202-
@include rmd-theme-create-root-theme($rmd-sheet-theme-values, sheet);
210+
$exclude: if(
211+
$rmd-theme-dark-elevation,
212+
(),
213+
(background-color, raised-background-color)
214+
);
215+
216+
@include rmd-theme-create-root-theme(
217+
$rmd-sheet-theme-values,
218+
sheet,
219+
$exclude
220+
);
203221

204222
.rmd-sheet {
205223
@include rmd-sheet;

‎packages/sheet/src/_variables.scss

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
/// @group sheet
33
////
44

5+
@import '~@react-md/dialog/dist/variables';
56
@import '~@react-md/overlay/dist/variables';
67
@import '~@react-md/transition/dist/variables';
78
@import '~@react-md/theme/dist/functions';
@@ -40,6 +41,114 @@ $rmd-sheet-elevation: 2 !default;
4041
/// @type Number
4142
$rmd-sheet-raised-elevation: 16 !default;
4243

44+
/// The background color for a sheet rendered "inline" with other content in the
45+
/// light theme.
46+
///
47+
/// Note: If `$rmd-theme-dark-elevation` is set to `false`, this variable is
48+
/// ignored and the color is determined by the normal dialog background color
49+
/// instead.
50+
///
51+
/// @type Color
52+
/// @since 2.7.0
53+
$rmd-sheet-light-background-color: rmd-dialog-theme-var(
54+
background-color
55+
) !default;
56+
57+
/// The background color for a sheet rendered "inline" with other content in the
58+
/// dark theme and the `$rmd-theme-dark-elevation` feature flag is also enabled.
59+
///
60+
/// @see $rmd-theme-dark-elevation
61+
/// @require $rmd-theme-dark-elevation-colors
62+
/// @type Color
63+
/// @since 2.7.0
64+
$rmd-sheet-dark-elevation-background-color: map-get(
65+
$rmd-theme-dark-elevation-colors,
66+
$rmd-sheet-elevation
67+
) !default;
68+
69+
/// The background color for a sheet rendered "inline" with other content in the
70+
/// dark theme.
71+
///
72+
/// Note: If `$rmd-theme-dark-elevation` is set to `false`, this variable is
73+
/// ignored and the color is determined by the normal dialog background color
74+
/// instead.
75+
///
76+
/// @type Color
77+
/// @since 2.7.0
78+
$rmd-sheet-dark-background-color: if(
79+
$rmd-theme-dark-elevation,
80+
$rmd-sheet-dark-elevation-background-color,
81+
rmd-dialog-theme-var(background-color)
82+
) !default;
83+
84+
/// The background color for a sheet rendered "inline" with other content.
85+
///
86+
/// Note: If `$rmd-theme-dark-elevation` is set to `false`, this variable is
87+
/// ignored and the color is determined by the normal dialog background color
88+
/// instead.
89+
///
90+
/// @type Color
91+
/// @since 2.7.0
92+
$rmd-sheet-background-color: if(
93+
$rmd-theme-light,
94+
$rmd-sheet-light-background-color,
95+
$rmd-theme-dark-background-color
96+
) !default;
97+
98+
/// The background color for a sheet raised above other content in the light
99+
/// theme.
100+
///
101+
/// Note: If `$rmd-theme-dark-elevation` is set to `false`, this variable is
102+
/// ignored and the color is determined by the normal dialog background color
103+
/// instead.
104+
///
105+
/// @type Color
106+
/// @since 2.7.0
107+
$rmd-sheet-raised-light-background-color: rmd-dialog-theme-var(
108+
background-color
109+
) !default;
110+
111+
/// The background color for a sheet raised above other content in the dark
112+
/// theme and the `$rmd-theme-dark-elevation` feature flag is also enabled.
113+
///
114+
/// @see $rmd-theme-dark-elevation
115+
/// @require $rmd-theme-dark-elevation-colors
116+
/// @type Color
117+
/// @since 2.7.0
118+
$rmd-sheet-raised-dark-elevation-background-color: map-get(
119+
$rmd-theme-dark-elevation-colors,
120+
$rmd-sheet-raised-elevation
121+
) !default;
122+
123+
/// The background color for a sheet raised above other content in the dark
124+
/// theme.
125+
///
126+
/// Note: If `$rmd-theme-dark-elevation` is set to `false`, this variable is
127+
/// ignored and the color is determined by the normal dialog background color
128+
/// instead.
129+
///
130+
/// @type Color
131+
/// @since 2.7.0
132+
$rmd-sheet-raised-dark-background-color: if(
133+
$rmd-theme-dark-elevation,
134+
$rmd-sheet-raised-dark-elevation-background-color,
135+
rmd-dialog-theme-var(background-color)
136+
) !default;
137+
138+
/// The background color for a sheet raised above other content.
139+
///
140+
/// Note: If `$rmd-theme-dark-elevation` is set to `false`, this variable is
141+
/// ignored and the color is determined by the normal dialog background color
142+
/// instead.
143+
///
144+
/// @type Color
145+
/// @since 2.7.0
146+
$rmd-sheet-raised-background-color: if(
147+
$rmd-theme-light,
148+
$rmd-sheet-raised-light-background-color,
149+
$rmd-theme-raised-dark-background-color
150+
) !default;
151+
43152
/// The duration for the enter transition.
44153
///
45154
/// @require $rmd-transition-enter-duration
@@ -108,6 +217,8 @@ $rmd-sheet-enabled-positions: $rmd-sheet-positions !default;
108217
/// of the icon as needed.
109218
/// @type Map
110219
$rmd-sheet-theme-values: (
220+
background-color: $rmd-sheet-background-color,
221+
raised-background-color: $rmd-sheet-raised-background-color,
111222
touch-width: $rmd-sheet-touch-width,
112223
static-width: $rmd-sheet-static-width,
113224
touchable-max-height: $rmd-sheet-touchable-max-height,

‎packages/theme/src/_mixins.scss

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -211,6 +211,23 @@
211211
}
212212
}
213213

214+
@if mixin-exists(rmd-sheet-theme-update-var) {
215+
@if $rmd-sheet-light-background-color != $rmd-sheet-dark-background-color {
216+
@include rmd-sheet-theme-update-var(
217+
background-color,
218+
$rmd-sheet-light-background-color
219+
);
220+
}
221+
@if $rmd-sheet-raised-light-background-color !=
222+
$rmd-sheet-raised-dark-background-color
223+
{
224+
@include rmd-sheet-theme-update-var(
225+
raised-background-color,
226+
$rmd-sheet-raised-light-background-color
227+
);
228+
}
229+
}
230+
214231
@if mixin-exists(rmd-divider-theme-update-var) {
215232
@include rmd-divider-theme-update-var(
216233
background-color,
@@ -404,6 +421,23 @@
404421
}
405422
}
406423

424+
@if mixin-exists(rmd-sheet-theme-update-var) {
425+
@if $rmd-sheet-light-background-color != $rmd-sheet-dark-background-color {
426+
@include rmd-sheet-theme-update-var(
427+
background-color,
428+
$rmd-sheet-dark-background-color
429+
);
430+
}
431+
@if $rmd-sheet-raised-light-background-color !=
432+
$rmd-sheet-raised-dark-background-color
433+
{
434+
@include rmd-sheet-theme-update-var(
435+
raised-background-color,
436+
$rmd-sheet-raised-dark-background-color
437+
);
438+
}
439+
}
440+
407441
@if mixin-exists(rmd-divider-theme-update-var) {
408442
@include rmd-divider-theme-update-var(
409443
background-color,

0 commit comments

Comments
 (0)