Skip to content

Commit 558c84d

Browse files
devversiondevversion
committed
Address feedback as per team meeting
1 parent 4821105 commit 558c84d

File tree

80 files changed

+860
-416
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

80 files changed

+860
-416
lines changed

‎.stylelintrc.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@
77
"./tools/stylelint/no-nested-mixin.ts",
88
"./tools/stylelint/no-concrete-rules.ts",
99
"./tools/stylelint/no-top-level-ampersand-in-mixin.ts",
10-
"./tools/stylelint/theme-duplicate-styles-check.js"
10+
"./tools/stylelint/theme-mixin-api.js"
1111
],
1212
"rules": {
1313
"material/no-prefixes": [true, {
1414
"browsers": ["last 2 versions", "not ie <= 10", "not ie_mob <= 10"],
1515
"filePattern": "**/!(*-example.css)"
1616
}],
17-
"material/theme-duplicate-styles-check": true,
17+
"material/theme-mixin-api": true,
1818
"material/selector-no-deep": true,
1919
"material/no-nested-mixin": true,
2020
"material/no-ampersand-beyond-selector-start": [true, {

‎guides/duplicate-theming-styles.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ extract the configuration for the color system from the theme.
5959
```scss
6060
.my-custom-dark-button {
6161
// This will only generate the color styles for `mat-button`.
62-
@include mat-button-color(map_get($my-theme, color));
62+
@include mat-button-color($my-theme);
6363
}
6464
```
6565

‎guides/theming-your-components.md

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,10 @@ For example, if building a custom carousel component:
1111
// Import library functions for theme creation.
1212
@import '~@angular/material/theming';
1313

14-
@mixin candy-carousel-color($config) {
14+
@mixin candy-carousel-color($config-or-theme) {
15+
// Extract the color configuration in case a theme has been passed.
16+
// This allows consumers to either pass a theme object or a color configuration.
17+
$config: mat-get-color-config($config-or-theme);
1518
// Extract the palettes you need from the theme definition.
1619
$primary: map-get($config, primary);
1720
$accent: map-get($config, accent);
@@ -29,7 +32,10 @@ Second, create another Sass mixin that accepts an Angular Material typography co
2932
and outputs typographic styles. For example:
3033

3134
```scss
32-
@mixin candy-carousel-typography($config) {
35+
@mixin candy-carousel-typography($config-or-theme) {
36+
// Extract the typography configuration in case a theme has been passed.
37+
$config: mat-get-typography-config($config-or-theme);
38+
3339
.candy-carousel {
3440
font: {
3541
family: mat-font-family($config, body-1);

‎guides/theming.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -262,7 +262,7 @@ this in the [dedicated guide](./duplicate-theming-styles.md).
262262
.alternate-button {
263263
// Extract the color configuration from the theme and generate
264264
// the color theme styles for `mat-button`.
265-
@include mat-button-color(map_get($alternate-theme, color));
265+
@include mat-button-color($alternate-theme);
266266
}
267267
```
268268

‎src/dev-app/theme.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -69,14 +69,14 @@ $dark-theme: mat-dark-theme((
6969
.demo-unicorn-dark-theme {
7070
@include angular-material-color($dark-theme);
7171
@include angular-material-mdc-color($dark-theme);
72-
@include mat-column-resize-color(map_get($dark-theme, color));
73-
@include mat-popover-edit-color(map_get($dark-theme, color));
72+
@include mat-column-resize-color($dark-theme);
73+
@include mat-popover-edit-color($dark-theme);
7474
}
7575

7676
// Include the dark theme for focus indicators.
7777
.demo-unicorn-dark-theme.demo-strong-focus {
78-
@include mat-strong-focus-indicators-color(map_get($dark-theme, color));
79-
@include mat-mdc-strong-focus-indicators-color(map_get($dark-theme, color));
78+
@include mat-strong-focus-indicators-color($dark-theme);
79+
@include mat-mdc-strong-focus-indicators-color($dark-theme);
8080
}
8181

8282
// Create classes for all density scales which are supported by all MDC-based components.

‎src/material-experimental/column-resize/_column-resize.scss

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
@import '../../material/core/theming/palette';
44
@import '../../material/core/theming/theming';
55

6-
@mixin mat-column-resize-color($config) {
6+
@mixin mat-column-resize-color($config-or-theme) {
7+
$config: mat-get-color-config($config-or-theme);
78
$primary: map-get($config, primary);
89
$foreground: map-get($config, foreground);
910

@@ -95,11 +96,16 @@
9596
}
9697
}
9798

98-
@mixin mat-column-resize-typography($config) {}
99+
@mixin mat-column-resize-typography($config-or-theme) {
100+
$config: mat-get-typography-config($config-or-theme);
101+
}
99102

100-
@mixin mat-column-resize-density($density-scale) {}
103+
@mixin mat-column-resize-density($config-or-theme) {
104+
$density-scale: mat-get-density-config($config-or-theme);
105+
}
101106

102-
@mixin mat-column-resize-theme($theme) {
107+
@mixin mat-column-resize-theme($theme-or-color-config) {
108+
$theme: _mat-legacy-get-theme($theme-or-color-config);
103109
@include _mat-check-duplicate-theme-styles($theme, 'mat-column-resize');
104110
$color: mat-get-color-config($theme);
105111
$density: mat-get-density-config($theme);

‎src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,25 @@
11
@import '../mdc-helpers/mdc-helpers';
22

3-
@mixin mat-mdc-autocomplete-color($config) {
3+
@mixin mat-mdc-autocomplete-color($config-or-theme) {
4+
$config: mat-get-color-config($config-or-theme);
45
@include mat-using-mdc-theme($config) {
56
// TODO: implement MDC-based autocomplete.
67
}
78
}
89

9-
@mixin mat-mdc-autocomplete-typography($config) {
10+
@mixin mat-mdc-autocomplete-typography($config-or-theme) {
11+
$config: mat-get-typography-config($config-or-theme);
1012
@include mat-using-mdc-typography($config) {
1113
// TODO: implement MDC-based autocomplete.
1214
}
1315
}
1416

15-
@mixin mat-mdc-autocomplete-density($density-scale) {}
17+
@mixin mat-mdc-autocomplete-density($config-or-theme) {
18+
$density-scale: mat-get-density-config($config-or-theme);
19+
}
1620

17-
@mixin mat-mdc-autocomplete-theme($theme) {
21+
@mixin mat-mdc-autocomplete-theme($theme-or-color-config) {
22+
$theme: _mat-legacy-get-theme($theme-or-color-config);
1823
@include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-autocomplete');
1924
$color: mat-get-color-config($theme);
2025
$density: mat-get-density-config($theme);

‎src/material-experimental/mdc-button/_button-theme.scss

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,8 @@ $mat-button-state-target: '.mdc-button__ripple';
4949
}
5050

5151

52-
@mixin mat-mdc-button-color($config) {
52+
@mixin mat-mdc-button-color($config-or-theme) {
53+
$config: mat-get-color-config($config-or-theme);
5354
@include mat-using-mdc-theme($config) {
5455
// Add state interactions for hover, focus, press, active. Colors are changed based on
5556
// the mixin mdc-states-base-color
@@ -164,13 +165,15 @@ $mat-button-state-target: '.mdc-button__ripple';
164165
}
165166
}
166167

167-
@mixin mat-mdc-button-typography($config) {
168+
@mixin mat-mdc-button-typography($config-or-theme) {
169+
$config: mat-get-typography-config($config-or-theme);
168170
@include mat-using-mdc-typography($config) {
169171
@include mdc-button-without-ripple($query: $mat-typography-styles-query);
170172
}
171173
}
172174

173-
@mixin mat-mdc-button-density($density-scale) {
175+
@mixin mat-mdc-button-density($config-or-theme) {
176+
$density-scale: mat-get-density-config($config-or-theme);
174177
.mat-mdc-button,
175178
.mat-mdc-raised-button,
176179
.mat-mdc-unelevated-button,
@@ -179,7 +182,8 @@ $mat-button-state-target: '.mdc-button__ripple';
179182
}
180183
}
181184

182-
@mixin mat-mdc-button-theme($theme) {
185+
@mixin mat-mdc-button-theme($theme-or-color-config) {
186+
$theme: _mat-legacy-get-theme($theme-or-color-config);
183187
@include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-button');
184188
$color: mat-get-color-config($theme);
185189
$density: mat-get-density-config($theme);
@@ -196,7 +200,8 @@ $mat-button-state-target: '.mdc-button__ripple';
196200
}
197201
}
198202

199-
@mixin mat-mdc-fab-color($config) {
203+
@mixin mat-mdc-fab-color($config-or-theme) {
204+
$config: mat-get-color-config($config-or-theme);
200205
@include mat-using-mdc-theme($config) {
201206
.mat-mdc-fab, .mat-mdc-mini-fab {
202207
@include mdc-states(
@@ -245,15 +250,19 @@ $mat-button-state-target: '.mdc-button__ripple';
245250
}
246251
}
247252

248-
@mixin mat-mdc-fab-typography($config) {
253+
@mixin mat-mdc-fab-typography($config-or-theme) {
254+
$config: mat-get-typography-config($config-or-theme);
249255
@include mat-using-mdc-typography($config) {
250256
@include mdc-fab-without-ripple($query: $mat-typography-styles-query);
251257
}
252258
}
253259

254-
@mixin mat-mdc-fab-density($density-scale) {}
260+
@mixin mat-mdc-fab-density($config-or-theme) {
261+
$density-scale: mat-get-density-config($config-or-theme);
262+
}
255263

256-
@mixin mat-mdc-fab-theme($theme) {
264+
@mixin mat-mdc-fab-theme($theme-or-color-config) {
265+
$theme: _mat-legacy-get-theme($theme-or-color-config);
257266
@include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-fab');
258267
$color: mat-get-color-config($theme);
259268
$density: mat-get-density-config($theme);
@@ -271,7 +280,8 @@ $mat-button-state-target: '.mdc-button__ripple';
271280
}
272281

273282

274-
@mixin mat-mdc-icon-button-color($config) {
283+
@mixin mat-mdc-icon-button-color($config-or-theme) {
284+
$config: mat-get-color-config($config-or-theme);
275285
@include mat-using-mdc-theme($config) {
276286
.mat-mdc-icon-button {
277287
@include mdc-states(
@@ -314,19 +324,22 @@ $mat-button-state-target: '.mdc-button__ripple';
314324
}
315325
}
316326

317-
@mixin mat-mdc-icon-button-typography($config) {
327+
@mixin mat-mdc-icon-button-typography($config-or-theme) {
328+
$config: mat-get-typography-config($config-or-theme);
318329
@include mat-using-mdc-typography($config) {
319330
@include mdc-icon-button-without-ripple($query: $mat-typography-styles-query);
320331
}
321332
}
322333

323-
@mixin mat-mdc-icon-button-density($density-scale) {
334+
@mixin mat-mdc-icon-button-density($config-or-theme) {
335+
$density-scale: mat-get-density-config($config-or-theme);
324336
.mat-mdc-icon-button {
325337
@include mdc-icon-button-density($density-scale);
326338
}
327339
}
328340

329-
@mixin mat-mdc-icon-button-theme($theme) {
341+
@mixin mat-mdc-icon-button-theme($theme-or-color-config) {
342+
$theme: _mat-legacy-get-theme($theme-or-color-config);
330343
@include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-icon-button');
331344
$color: mat-get-color-config($theme);
332345
$density: mat-get-density-config($theme);

‎src/material-experimental/mdc-card/_card-theme.scss

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
@import '@material/typography/mixins.import';
55
@import '../mdc-helpers/mdc-helpers';
66

7-
@mixin mat-mdc-card-color($config) {
7+
@mixin mat-mdc-card-color($config-or-theme) {
8+
$config: mat-get-color-config($config-or-theme);
89
$foreground: map-get($config, foreground);
910
$is-dark-theme: map-get($config, is-dark);
1011

@@ -30,7 +31,8 @@
3031
$mdc-card-outline-color: $orig-mdc-card-outline-color !global;
3132
}
3233

33-
@mixin mat-mdc-card-typography($config) {
34+
@mixin mat-mdc-card-typography($config-or-theme) {
35+
$config: mat-get-typography-config($config-or-theme);
3436
@include mat-using-mdc-typography($config) {
3537
@include mdc-card-without-ripple($query: $mat-typography-styles-query);
3638

@@ -46,9 +48,12 @@
4648
}
4749
}
4850

49-
@mixin mat-mdc-card-density($density-scale) {}
51+
@mixin mat-mdc-card-density($config-or-theme) {
52+
$density-scale: mat-get-density-config($config-or-theme);
53+
}
5054

51-
@mixin mat-mdc-card-theme($theme) {
55+
@mixin mat-mdc-card-theme($theme-or-color-config) {
56+
$theme: _mat-legacy-get-theme($theme-or-color-config);
5257
@include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-card');
5358
$color: mat-get-color-config($theme);
5459
$density: mat-get-density-config($theme);

‎src/material-experimental/mdc-checkbox/_checkbox-theme.scss

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
@import '@material/theme/functions.import';
66
@import '../mdc-helpers/mdc-helpers';
77

8-
@mixin mat-mdc-checkbox-color($config) {
8+
@mixin mat-mdc-checkbox-color($config-or-theme) {
9+
$config: mat-get-color-config($config-or-theme);
910
$primary: mat-color(map-get($config, primary));
1011
$accent: mat-color(map-get($config, accent));
1112
$warn: mat-color(map-get($config, warn));
@@ -70,20 +71,23 @@
7071
$mdc-checkbox-disabled-color: $orig-mdc-checkbox-disabled-color !global;
7172
}
7273

73-
@mixin mat-mdc-checkbox-typography($config) {
74+
@mixin mat-mdc-checkbox-typography($config-or-theme) {
75+
$config: mat-get-typography-config($config-or-theme);
7476
@include mat-using-mdc-typography($config) {
7577
@include mdc-checkbox-without-ripple($query: $mat-typography-styles-query);
7678
@include mdc-form-field-core-styles($query: $mat-typography-styles-query);
7779
}
7880
}
7981

80-
@mixin mat-mdc-checkbox-density($density-scale) {
82+
@mixin mat-mdc-checkbox-density($config-or-theme) {
83+
$density-scale: mat-get-density-config($config-or-theme);
8184
.mat-mdc-checkbox .mdc-checkbox {
8285
@include mdc-checkbox-density($density-scale);
8386
}
8487
}
8588

86-
@mixin mat-mdc-checkbox-theme($theme) {
89+
@mixin mat-mdc-checkbox-theme($theme-or-color-config) {
90+
$theme: _mat-legacy-get-theme($theme-or-color-config);
8791
@include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-checkbox');
8892
$color: mat-get-color-config($theme);
8993
$density: mat-get-density-config($theme);

‎src/material-experimental/mdc-chips/_chips-theme.scss

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
@import '../mdc-helpers/mdc-helpers';
33
@import '@material/theme/functions.import';
44

5-
@mixin mat-mdc-chips-color($config) {
5+
@mixin mat-mdc-chips-color($config-or-theme) {
6+
$config: mat-get-color-config($config-or-theme);
67
$primary: mat-color(map-get($config, primary));
78
$accent: mat-color(map-get($config, accent));
89
$warn: mat-color(map-get($config, warn));
@@ -54,20 +55,23 @@
5455
$mdc-chips-icon-color: $orig-mdc-chips-icon-color !global;
5556
}
5657

57-
@mixin mat-mdc-chips-typography($config) {
58+
@mixin mat-mdc-chips-typography($config-or-theme) {
59+
$config: mat-get-typography-config($config-or-theme);
5860
@include mdc-chip-set-core-styles($query: $mat-typography-styles-query);
5961
@include mat-using-mdc-typography($config) {
6062
@include mdc-chip-without-ripple($query: $mat-typography-styles-query);
6163
}
6264
}
6365

64-
@mixin mat-mdc-chips-density($density-scale) {
66+
@mixin mat-mdc-chips-density($config-or-theme) {
67+
$density-scale: mat-get-density-config($config-or-theme);
6568
.mat-mdc-chip {
6669
@include mdc-chip-density($density-scale);
6770
}
6871
}
6972

70-
@mixin mat-mdc-chips-theme($theme) {
73+
@mixin mat-mdc-chips-theme($theme-or-color-config) {
74+
$theme: _mat-legacy-get-theme($theme-or-color-config);
7175
@include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-chips');
7276
$color: mat-get-color-config($theme);
7377
$density: mat-get-density-config($theme);

‎src/material-experimental/mdc-form-field/_form-field-density.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@
3535
// provide spacing that makes arbitrary controls align as specified in the Material Design
3636
// specification. In order to support density, we need to adjust the vertical spacing to be
3737
// based on the density scale.
38-
@mixin _mat-form-field-density($density-scale) {
38+
@mixin _mat-form-field-density($config-or-theme) {
39+
$density-scale: mat-get-density-config($config-or-theme);
3940
// Height of the form field that is based on the current density scale.
4041
$height: mdc-density-prop-value(
4142
$density-config: $mdc-text-field-density-config,

‎src/material-experimental/mdc-form-field/_form-field-subscript.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,8 @@
4141
}
4242
}
4343

44-
@mixin _mat-form-field-subscript-typography($config) {
44+
@mixin _mat-form-field-subscript-typography($config-or-theme) {
45+
$config: mat-get-typography-config($config-or-theme);
4546
// The unit-less line-height from the font config.
4647
$line-height: mat-line-height($config, input);
4748
// The amount to scale the font for the subscript.

0 commit comments

Comments
 (0)