material_components_web-sass 0.17.0 → 0.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +9 -0
  3. data/lib/material_components_web/sass/version.rb +1 -1
  4. data/vendor/assets/javascripts/material-components-web.js +1207 -1035
  5. data/vendor/assets/stylesheets/@material/button/mdc-button.scss +91 -110
  6. data/vendor/assets/stylesheets/@material/dialog/mdc-dialog.scss +2 -2
  7. data/vendor/assets/stylesheets/@material/drawer/permanent/mdc-permanent-drawer.scss +1 -1
  8. data/vendor/assets/stylesheets/@material/drawer/persistent/mdc-persistent-drawer.scss +1 -1
  9. data/vendor/assets/stylesheets/@material/drawer/slidable/_mixins.scss +15 -15
  10. data/vendor/assets/stylesheets/@material/drawer/slidable/_variables.scss +15 -15
  11. data/vendor/assets/stylesheets/@material/fab/mdc-fab.scss +2 -2
  12. data/vendor/assets/stylesheets/@material/grid-list/mdc-grid-list.scss +3 -0
  13. data/vendor/assets/stylesheets/@material/icon-toggle/mdc-icon-toggle.scss +3 -3
  14. data/vendor/assets/stylesheets/@material/layout-grid/_variables.scss +1 -1
  15. data/vendor/assets/stylesheets/@material/layout-grid/mdc-layout-grid.scss +3 -3
  16. data/vendor/assets/stylesheets/@material/linear-progress/mdc-linear-progress.scss +1 -1
  17. data/vendor/assets/stylesheets/@material/ripple/mdc-ripple.scss +2 -2
  18. data/vendor/assets/stylesheets/@material/snackbar/mdc-snackbar.scss +1 -1
  19. data/vendor/assets/stylesheets/@material/tabs/tab-bar/mdc-tab-bar.scss +3 -3
  20. data/vendor/assets/stylesheets/@material/textfield/mdc-textfield.scss +1 -1
  21. data/vendor/assets/stylesheets/@material/theme/_color_palette.scss +290 -0
  22. data/vendor/assets/stylesheets/@material/theme/_constants.scss +10 -12
  23. data/vendor/assets/stylesheets/@material/theme/_functions.scss +6 -12
  24. data/vendor/assets/stylesheets/@material/theme/_mixins.scss +36 -40
  25. data/vendor/assets/stylesheets/@material/theme/_variables.scss +79 -17
  26. data/vendor/assets/stylesheets/@material/theme/mdc-theme.scss +4 -4
  27. data/vendor/assets/stylesheets/@material/toolbar/mdc-toolbar.scss +2 -2
  28. metadata +3 -2
@@ -132,7 +132,7 @@
132
132
  /* stylelint-enable plugin/selector-bem-pattern */
133
133
 
134
134
  &__action-button {
135
- @include mdc-theme-prop(color, accent);
135
+ @include mdc-theme-prop(color, secondary);
136
136
 
137
137
  @include mdc-theme-dark(".mdc-snackbar") {
138
138
  @include mdc-theme-prop(color, primary);
@@ -97,15 +97,15 @@
97
97
  .mdc-tab-bar--indicator-accent,
98
98
  .mdc-toolbar .mdc-tab-bar--indicator-accent {
99
99
  .mdc-tab-bar__indicator {
100
- @include mdc-theme-prop(background-color, accent);
100
+ @include mdc-theme-prop(background-color, secondary);
101
101
 
102
102
  @include mdc-theme-dark(".mdc-tab-bar") {
103
- @include mdc-theme-prop(background-color, accent);
103
+ @include mdc-theme-prop(background-color, secondary);
104
104
  };
105
105
  }
106
106
 
107
107
  &.mdc-tab-bar:not(.mdc-tab-bar-upgraded) .mdc-tab::after {
108
- @include mdc-theme-prop(background-color, accent);
108
+ @include mdc-theme-prop(background-color, secondary);
109
109
  }
110
110
  }
111
111
  // postcss-bem-linter: end
@@ -433,7 +433,7 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
433
433
  // stylelint-disable plugin/selector-bem-pattern
434
434
  .mdc-textfield__input,
435
435
  .mdc-textfield__label,
436
- & + .mdc-textfield-helptext {
436
+ + .mdc-textfield-helptext {
437
437
  @include mdc-theme-prop(color, text-disabled-on-light);
438
438
  }
439
439
  // stylelint-enable plugin/selector-bem-pattern
@@ -0,0 +1,290 @@
1
+ //
2
+ // Copyright 2017 Google Inc. All Rights Reserved.
3
+ //
4
+ // Licensed under the Apache License, Version 2.0 (the "License");
5
+ // you may not use this file except in compliance with the License.
6
+ // You may obtain a copy of the License at
7
+ //
8
+ // http://www.apache.org/licenses/LICENSE-2.0
9
+ //
10
+ // Unless required by applicable law or agreed to in writing, software
11
+ // distributed under the License is distributed on an "AS IS" BASIS,
12
+ // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
+ // See the License for the specific language governing permissions and
14
+ // limitations under the License.
15
+ //
16
+
17
+ // stylelint-disable scss/dollar-variable-pattern, color-hex-length
18
+
19
+ $material-color-red-50: #ffebee;
20
+ $material-color-red-100: #ffcdd2;
21
+ $material-color-red-200: #ef9a9a;
22
+ $material-color-red-300: #e57373;
23
+ $material-color-red-400: #ef5350;
24
+ $material-color-red-500: #f44336;
25
+ $material-color-red-600: #e53935;
26
+ $material-color-red-700: #d32f2f;
27
+ $material-color-red-800: #c62828;
28
+ $material-color-red-900: #b71c1c;
29
+ $material-color-red-a100: #ff8a80;
30
+ $material-color-red-a200: #ff5252;
31
+ $material-color-red-a400: #ff1744;
32
+ $material-color-red-a700: #d50000;
33
+
34
+ $material-color-pink-50: #fce4ec;
35
+ $material-color-pink-100: #f8bbd0;
36
+ $material-color-pink-200: #f48fb1;
37
+ $material-color-pink-300: #f06292;
38
+ $material-color-pink-400: #ec407a;
39
+ $material-color-pink-500: #e91e63;
40
+ $material-color-pink-600: #d81b60;
41
+ $material-color-pink-700: #c2185b;
42
+ $material-color-pink-800: #ad1457;
43
+ $material-color-pink-900: #880e4f;
44
+ $material-color-pink-a100: #ff80ab;
45
+ $material-color-pink-a200: #ff4081;
46
+ $material-color-pink-a400: #f50057;
47
+ $material-color-pink-a700: #c51162;
48
+
49
+ $material-color-purple-50: #f3e5f5;
50
+ $material-color-purple-100: #e1bee7;
51
+ $material-color-purple-200: #ce93d8;
52
+ $material-color-purple-300: #ba68c8;
53
+ $material-color-purple-400: #ab47bc;
54
+ $material-color-purple-500: #9c27b0;
55
+ $material-color-purple-600: #8e24aa;
56
+ $material-color-purple-700: #7b1fa2;
57
+ $material-color-purple-800: #6a1b9a;
58
+ $material-color-purple-900: #4a148c;
59
+ $material-color-purple-a100: #ea80fc;
60
+ $material-color-purple-a200: #e040fb;
61
+ $material-color-purple-a400: #d500f9;
62
+ $material-color-purple-a700: #aa00ff;
63
+
64
+ $material-color-deep-purple-50: #ede7f6;
65
+ $material-color-deep-purple-100: #d1c4e9;
66
+ $material-color-deep-purple-200: #b39ddb;
67
+ $material-color-deep-purple-300: #9575cd;
68
+ $material-color-deep-purple-400: #7e57c2;
69
+ $material-color-deep-purple-500: #673ab7;
70
+ $material-color-deep-purple-600: #5e35b1;
71
+ $material-color-deep-purple-700: #512da8;
72
+ $material-color-deep-purple-800: #4527a0;
73
+ $material-color-deep-purple-900: #311b92;
74
+ $material-color-deep-purple-a100: #b388ff;
75
+ $material-color-deep-purple-a200: #7c4dff;
76
+ $material-color-deep-purple-a400: #651fff;
77
+ $material-color-deep-purple-a700: #6200ea;
78
+
79
+ $material-color-indigo-50: #e8eaf6;
80
+ $material-color-indigo-100: #c5cae9;
81
+ $material-color-indigo-200: #9fa8da;
82
+ $material-color-indigo-300: #7986cb;
83
+ $material-color-indigo-400: #5c6bc0;
84
+ $material-color-indigo-500: #3f51b5;
85
+ $material-color-indigo-600: #3949ab;
86
+ $material-color-indigo-700: #303f9f;
87
+ $material-color-indigo-800: #283593;
88
+ $material-color-indigo-900: #1a237e;
89
+ $material-color-indigo-a100: #8c9eff;
90
+ $material-color-indigo-a200: #536dfe;
91
+ $material-color-indigo-a400: #3d5afe;
92
+ $material-color-indigo-a700: #304ffe;
93
+
94
+ $material-color-blue-50: #e3f2fd;
95
+ $material-color-blue-100: #bbdefb;
96
+ $material-color-blue-200: #90caf9;
97
+ $material-color-blue-300: #64b5f6;
98
+ $material-color-blue-400: #42a5f5;
99
+ $material-color-blue-500: #2196f3;
100
+ $material-color-blue-600: #1e88e5;
101
+ $material-color-blue-700: #1976d2;
102
+ $material-color-blue-800: #1565c0;
103
+ $material-color-blue-900: #0d47a1;
104
+ $material-color-blue-a100: #82b1ff;
105
+ $material-color-blue-a200: #448aff;
106
+ $material-color-blue-a400: #2979ff;
107
+ $material-color-blue-a700: #2962ff;
108
+
109
+ $material-color-light-blue-50: #e1f5fe;
110
+ $material-color-light-blue-100: #b3e5fc;
111
+ $material-color-light-blue-200: #81d4fa;
112
+ $material-color-light-blue-300: #4fc3f7;
113
+ $material-color-light-blue-400: #29b6f6;
114
+ $material-color-light-blue-500: #03a9f4;
115
+ $material-color-light-blue-600: #039be5;
116
+ $material-color-light-blue-700: #0288d1;
117
+ $material-color-light-blue-800: #0277bd;
118
+ $material-color-light-blue-900: #01579b;
119
+ $material-color-light-blue-a100: #80d8ff;
120
+ $material-color-light-blue-a200: #40c4ff;
121
+ $material-color-light-blue-a400: #00b0ff;
122
+ $material-color-light-blue-a700: #0091ea;
123
+
124
+ $material-color-cyan-50: #e0f7fa;
125
+ $material-color-cyan-100: #b2ebf2;
126
+ $material-color-cyan-200: #80deea;
127
+ $material-color-cyan-300: #4dd0e1;
128
+ $material-color-cyan-400: #26c6da;
129
+ $material-color-cyan-500: #00bcd4;
130
+ $material-color-cyan-600: #00acc1;
131
+ $material-color-cyan-700: #0097a7;
132
+ $material-color-cyan-800: #00838f;
133
+ $material-color-cyan-900: #006064;
134
+ $material-color-cyan-a100: #84ffff;
135
+ $material-color-cyan-a200: #18ffff;
136
+ $material-color-cyan-a400: #00e5ff;
137
+ $material-color-cyan-a700: #00b8d4;
138
+
139
+ $material-color-teal-50: #e0f2f1;
140
+ $material-color-teal-100: #b2dfdb;
141
+ $material-color-teal-200: #80cbc4;
142
+ $material-color-teal-300: #4db6ac;
143
+ $material-color-teal-400: #26a69a;
144
+ $material-color-teal-500: #009688;
145
+ $material-color-teal-600: #00897b;
146
+ $material-color-teal-700: #00796b;
147
+ $material-color-teal-800: #00695c;
148
+ $material-color-teal-900: #004d40;
149
+ $material-color-teal-a100: #a7ffeb;
150
+ $material-color-teal-a200: #64ffda;
151
+ $material-color-teal-a400: #1de9b6;
152
+ $material-color-teal-a700: #00bfa5;
153
+
154
+ $material-color-green-50: #e8f5e9;
155
+ $material-color-green-100: #c8e6c9;
156
+ $material-color-green-200: #a5d6a7;
157
+ $material-color-green-300: #81c784;
158
+ $material-color-green-400: #66bb6a;
159
+ $material-color-green-500: #4caf50;
160
+ $material-color-green-600: #43a047;
161
+ $material-color-green-700: #388e3c;
162
+ $material-color-green-800: #2e7d32;
163
+ $material-color-green-900: #1b5e20;
164
+ $material-color-green-a100: #b9f6ca;
165
+ $material-color-green-a200: #69f0ae;
166
+ $material-color-green-a400: #00e676;
167
+ $material-color-green-a700: #00c853;
168
+
169
+ $material-color-light-green-50: #f1f8e9;
170
+ $material-color-light-green-100: #dcedc8;
171
+ $material-color-light-green-200: #c5e1a5;
172
+ $material-color-light-green-300: #aed581;
173
+ $material-color-light-green-400: #9ccc65;
174
+ $material-color-light-green-500: #8bc34a;
175
+ $material-color-light-green-600: #7cb342;
176
+ $material-color-light-green-700: #689f38;
177
+ $material-color-light-green-800: #558b2f;
178
+ $material-color-light-green-900: #33691e;
179
+ $material-color-light-green-a100: #ccff90;
180
+ $material-color-light-green-a200: #b2ff59;
181
+ $material-color-light-green-a400: #76ff03;
182
+ $material-color-light-green-a700: #64dd17;
183
+
184
+ $material-color-lime-50: #f9fbe7;
185
+ $material-color-lime-100: #f0f4c3;
186
+ $material-color-lime-200: #e6ee9c;
187
+ $material-color-lime-300: #dce775;
188
+ $material-color-lime-400: #d4e157;
189
+ $material-color-lime-500: #cddc39;
190
+ $material-color-lime-600: #c0ca33;
191
+ $material-color-lime-700: #afb42b;
192
+ $material-color-lime-800: #9e9d24;
193
+ $material-color-lime-900: #827717;
194
+ $material-color-lime-a100: #f4ff81;
195
+ $material-color-lime-a200: #eeff41;
196
+ $material-color-lime-a400: #c6ff00;
197
+ $material-color-lime-a700: #aeea00;
198
+
199
+ $material-color-yellow-50: #fffde7;
200
+ $material-color-yellow-100: #fff9c4;
201
+ $material-color-yellow-200: #fff59d;
202
+ $material-color-yellow-300: #fff176;
203
+ $material-color-yellow-400: #ffee58;
204
+ $material-color-yellow-500: #ffeb3b;
205
+ $material-color-yellow-600: #fdd835;
206
+ $material-color-yellow-700: #fbc02d;
207
+ $material-color-yellow-800: #f9a825;
208
+ $material-color-yellow-900: #f57f17;
209
+ $material-color-yellow-a100: #ffff8d;
210
+ $material-color-yellow-a200: #ffff00;
211
+ $material-color-yellow-a400: #ffea00;
212
+ $material-color-yellow-a700: #ffd600;
213
+
214
+ $material-color-amber-50: #fff8e1;
215
+ $material-color-amber-100: #ffecb3;
216
+ $material-color-amber-200: #ffe082;
217
+ $material-color-amber-300: #ffd54f;
218
+ $material-color-amber-400: #ffca28;
219
+ $material-color-amber-500: #ffc107;
220
+ $material-color-amber-600: #ffb300;
221
+ $material-color-amber-700: #ffa000;
222
+ $material-color-amber-800: #ff8f00;
223
+ $material-color-amber-900: #ff6f00;
224
+ $material-color-amber-a100: #ffe57f;
225
+ $material-color-amber-a200: #ffd740;
226
+ $material-color-amber-a400: #ffc400;
227
+ $material-color-amber-a700: #ffab00;
228
+
229
+ $material-color-orange-50: #fff3e0;
230
+ $material-color-orange-100: #ffe0b2;
231
+ $material-color-orange-200: #ffcc80;
232
+ $material-color-orange-300: #ffb74d;
233
+ $material-color-orange-400: #ffa726;
234
+ $material-color-orange-500: #ff9800;
235
+ $material-color-orange-600: #fb8c00;
236
+ $material-color-orange-700: #f57c00;
237
+ $material-color-orange-800: #ef6c00;
238
+ $material-color-orange-900: #e65100;
239
+ $material-color-orange-a100: #ffd180;
240
+ $material-color-orange-a200: #ffab40;
241
+ $material-color-orange-a400: #ff9100;
242
+ $material-color-orange-a700: #ff6d00;
243
+
244
+ $material-color-deep-orange-50: #fbe9e7;
245
+ $material-color-deep-orange-100: #ffccbc;
246
+ $material-color-deep-orange-200: #ffab91;
247
+ $material-color-deep-orange-300: #ff8a65;
248
+ $material-color-deep-orange-400: #ff7043;
249
+ $material-color-deep-orange-500: #ff5722;
250
+ $material-color-deep-orange-600: #f4511e;
251
+ $material-color-deep-orange-700: #e64a19;
252
+ $material-color-deep-orange-800: #d84315;
253
+ $material-color-deep-orange-900: #bf360c;
254
+ $material-color-deep-orange-a100: #ff9e80;
255
+ $material-color-deep-orange-a200: #ff6e40;
256
+ $material-color-deep-orange-a400: #ff3d00;
257
+ $material-color-deep-orange-a700: #dd2c00;
258
+
259
+ $material-color-brown-50: #efebe9;
260
+ $material-color-brown-100: #d7ccc8;
261
+ $material-color-brown-200: #bcaaa4;
262
+ $material-color-brown-300: #a1887f;
263
+ $material-color-brown-400: #8d6e63;
264
+ $material-color-brown-500: #795548;
265
+ $material-color-brown-600: #6d4c41;
266
+ $material-color-brown-700: #5d4037;
267
+ $material-color-brown-800: #4e342e;
268
+ $material-color-brown-900: #3e2723;
269
+
270
+ $material-color-grey-50: #fafafa;
271
+ $material-color-grey-100: #f5f5f5;
272
+ $material-color-grey-200: #eeeeee;
273
+ $material-color-grey-300: #e0e0e0;
274
+ $material-color-grey-400: #bdbdbd;
275
+ $material-color-grey-500: #9e9e9e;
276
+ $material-color-grey-600: #757575;
277
+ $material-color-grey-700: #616161;
278
+ $material-color-grey-800: #424242;
279
+ $material-color-grey-900: #212121;
280
+
281
+ $material-color-blue-grey-50: #eceff1;
282
+ $material-color-blue-grey-100: #cfd8dc;
283
+ $material-color-blue-grey-200: #b0bec5;
284
+ $material-color-blue-grey-300: #90a4ae;
285
+ $material-color-blue-grey-400: #78909c;
286
+ $material-color-blue-grey-500: #607d8b;
287
+ $material-color-blue-grey-600: #546e7a;
288
+ $material-color-blue-grey-700: #455a64;
289
+ $material-color-blue-grey-800: #37474f;
290
+ $material-color-blue-grey-900: #263238;
@@ -14,18 +14,16 @@
14
14
  // limitations under the License.
15
15
  //
16
16
 
17
- /*
18
- Precomputed linear color channel values, for use in contrast calculations.
19
- See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
20
-
21
- Algorithm, for c in 0 to 255:
22
- f(c) {
23
- c = c / 255;
24
- return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
25
- }
26
-
27
- This lookup table is needed since there is no `pow` in SASS.
28
- */
17
+ // Precomputed linear color channel values, for use in contrast calculations.
18
+ // See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
19
+ //
20
+ // Algorithm, for c in 0 to 255:
21
+ // f(c) {
22
+ // c = c / 255;
23
+ // return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
24
+ // }
25
+ //
26
+ // This lookup table is needed since there is no `pow` in SASS.
29
27
  $mdc-theme-linear-channel-values:
30
28
  0
31
29
  .0003035269835488375
@@ -16,10 +16,8 @@
16
16
 
17
17
  @import "./constants";
18
18
 
19
- /**
20
- * Calculate the luminance for a color.
21
- * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
22
- */
19
+ // Calculate the luminance for a color.
20
+ // See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
23
21
  @function mdc-theme-luminance($color) {
24
22
  $red: nth($mdc-theme-linear-channel-values, red($color) + 1);
25
23
  $green: nth($mdc-theme-linear-channel-values, green($color) + 1);
@@ -28,10 +26,8 @@
28
26
  @return .2126 * $red + .7152 * $green + .0722 * $blue;
29
27
  }
30
28
 
31
- /**
32
- * Calculate the contrast ratio between two colors.
33
- * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
34
- */
29
+ // Calculate the contrast ratio between two colors.
30
+ // See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
35
31
  @function mdc-theme-contrast($back, $front) {
36
32
  $backLum: mdc-theme-luminance($back) + .05;
37
33
  $foreLum: mdc-theme-luminance($front) + .05;
@@ -39,10 +35,8 @@
39
35
  @return max($backLum, $foreLum) / min($backLum, $foreLum);
40
36
  }
41
37
 
42
- /**
43
- * Determine whether to use dark or light text on top of given color.
44
- * Returns "dark" for dark text and "light" for light text.
45
- */
38
+ // Determine whether to use dark or light text on top of given color.
39
+ // Returns "dark" for dark text and "light" for light text.
46
40
  @function mdc-theme-light-or-dark($color) {
47
41
  $minimumContrast: 3.1;
48
42
 
@@ -16,14 +16,12 @@
16
16
 
17
17
  @import "./variables";
18
18
 
19
- /**
20
- * Applies the correct theme color style to the specified property.
21
- * $property is typically color or background-color, but can be any CSS property that accepts color values.
22
- * $style should be one of the map keys in $mdc-theme-property-values (_variables.scss).
23
- */
19
+ // Applies the correct theme color style to the specified property.
20
+ // $property is typically color or background-color, but can be any CSS property that accepts color values.
21
+ // $style should be one of the map keys in $mdc-theme-property-values (_variables.scss).
24
22
  @mixin mdc-theme-prop($property, $style, $important: false) {
25
23
  @if not map-has-key($mdc-theme-property-values, $style) {
26
- @error "Invalid style specified! Choose one of #{map-keys($mdc-theme-property-values)}";
24
+ @error "Invalid style: '#{$style}'. Choose one of: #{map-keys($mdc-theme-property-values)}";
27
25
  }
28
26
 
29
27
  @if $important {
@@ -39,40 +37,38 @@
39
37
  }
40
38
  }
41
39
 
42
- /**
43
- * Creates a rule to be used in MDC-Web components for dark theming, and applies the provided contents.
44
- * Should provide the $root-selector option if applied to anything other than the root selector.
45
- * When used with a modifier class, provide a second argument of `true` for the $compound parameter
46
- * to specify that this should be attached as a compound class.
47
- *
48
- * Usage example:
49
- *
50
- * ```scss
51
- * .mdc-foo {
52
- * color: black;
53
- *
54
- * @include mdc-theme-dark {
55
- * color: white;
56
- * }
57
- *
58
- * &__bar {
59
- * background: black;
60
- *
61
- * @include mdc-theme-dark(".mdc-foo") {
62
- * background: white;
63
- * }
64
- * }
65
- * }
66
- *
67
- * .mdc-foo--disabled {
68
- * opacity: .38;
69
- *
70
- * @include mdc-theme-dark(".mdc-foo", true) {
71
- * opacity: .5;
72
- * }
73
- * }
74
- * ```
75
- */
40
+ // Creates a rule to be used in MDC-Web components for dark theming, and applies the provided contents.
41
+ // Should provide the $root-selector option if applied to anything other than the root selector.
42
+ // When used with a modifier class, provide a second argument of `true` for the $compound parameter
43
+ // to specify that this should be attached as a compound class.
44
+ //
45
+ // Usage example:
46
+ //
47
+ // ```scss
48
+ // .mdc-foo {
49
+ // color: black;
50
+ //
51
+ // @include mdc-theme-dark {
52
+ // color: white;
53
+ // }
54
+ //
55
+ // &__bar {
56
+ // background: black;
57
+ //
58
+ // @include mdc-theme-dark(".mdc-foo") {
59
+ // background: white;
60
+ // }
61
+ // }
62
+ // }
63
+ //
64
+ // .mdc-foo--disabled {
65
+ // opacity: .38;
66
+ //
67
+ // @include mdc-theme-dark(".mdc-foo", true) {
68
+ // opacity: .5;
69
+ // }
70
+ // }
71
+ // ```
76
72
  @mixin mdc-theme-dark($root-selector: null, $compound: false) {
77
73
  @if ($root-selector) {
78
74
  @at-root {