Skip to content

Commit 4719da2

Browse files
wagnermacielwagnermaciel
authored
feat(multiple): token overrides api (#28910)
* feat(multiple): token overrides api * Roll out the overrides api to provide users with a well-lit path for overriding our css variables. * fixup! feat(multiple): token overrides api * fixup! feat(multiple): token overrides api
1 parent f8bd658 commit 4719da2

Some content is hidden

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

41 files changed

+439
-41
lines changed

‎src/material/_index.scss

+48-41
Original file line numberDiff line numberDiff line change
@@ -46,92 +46,99 @@
4646

4747
// Component themes
4848
@forward './core/core-theme' as core-* show core-color, core-theme, core-typography, core-density,
49-
core-base;
50-
@forward './core/ripple/ripple-theme' as ripple-* show ripple-color, ripple-theme, ripple-base;
49+
core-base, core-overrides;
50+
@forward './core/ripple/ripple-theme' as ripple-* show ripple-color, ripple-theme, ripple-base,
51+
ripple-overrides;
5152
@forward './core/option/option-theme' as option-* show option-color, option-typography,
52-
option-theme, option-density, option-base;
53+
option-theme, option-density, option-base, option-overrides;
5354
@forward './core/option/optgroup-theme' as optgroup-* show optgroup-color, optgroup-typography,
54-
optgroup-theme, optgroup-density, optgroup-base;
55+
optgroup-theme, optgroup-density, optgroup-base, optgroup-overrides;
5556
@forward './core/selection/pseudo-checkbox/pseudo-checkbox-theme' as pseudo-checkbox-* show
5657
pseudo-checkbox-color, pseudo-checkbox-typography, pseudo-checkbox-theme, pseudo-checkbox-density,
57-
pseudo-checkbox-base;
58+
pseudo-checkbox-base, pseudo-checkbox-overrides;
5859
@forward './core/selection/pseudo-checkbox/pseudo-checkbox-common' as pseudo-checkbox-* show
5960
pseudo-checkbox-legacy-size;
6061
@forward './core/focus-indicators/focus-indicators-theme' as strong-focus-indicators-* show
6162
strong-focus-indicators-color, strong-focus-indicators-theme;
6263
@forward './autocomplete/autocomplete-theme' as autocomplete-* show autocomplete-theme,
63-
autocomplete-color, autocomplete-typography, autocomplete-density, autocomplete-base;
64+
autocomplete-color, autocomplete-typography, autocomplete-density, autocomplete-base,
65+
autocomplete-overrides;
6466
@forward './badge/badge-theme' as badge-* show badge-theme, badge-color, badge-typography,
65-
badge-density, badge-base;
67+
badge-density, badge-base, badge-overrides;
6668
@forward './bottom-sheet/bottom-sheet-theme' as bottom-sheet-* show bottom-sheet-theme,
67-
bottom-sheet-color, bottom-sheet-typography, bottom-sheet-density, bottom-sheet-base;
69+
bottom-sheet-color, bottom-sheet-typography, bottom-sheet-density, bottom-sheet-base,
70+
bottom-sheet-overrides;
6871
@forward './button/button-theme' as button-* show button-theme, button-color, button-typography,
69-
button-density, button-base;
72+
button-density, button-base, button-overrides;
7073
@forward './button/fab-theme' as fab-* show fab-color, fab-typography,
71-
fab-density, fab-theme, fab-base;
74+
fab-density, fab-theme, fab-base, fab-overrides;
7275
@forward './button/icon-button-theme' as icon-button-* show icon-button-color,
73-
icon-button-typography, icon-button-density, icon-button-theme, icon-button-base;
76+
icon-button-typography, icon-button-density, icon-button-theme, icon-button-base,
77+
icon-button-overrides;
7478
@forward './button-toggle/button-toggle-theme' as button-toggle-* show button-toggle-theme,
75-
button-toggle-color, button-toggle-typography, button-toggle-density, button-toggle-base;
79+
button-toggle-color, button-toggle-typography, button-toggle-density, button-toggle-base,
80+
button-toggle-overrides;
7681
@forward './card/card-theme' as card-* show card-theme, card-color, card-typography, card-density,
77-
card-base;
82+
card-base, card-overrides;
7883
@forward './checkbox/checkbox-theme' as checkbox-* show checkbox-theme, checkbox-color,
79-
checkbox-typography, checkbox-density, checkbox-base;
84+
checkbox-typography, checkbox-density, checkbox-base, checkbox-overrides;
8085
@forward './chips/chips-theme' as chips-* show chips-theme, chips-color, chips-typography,
81-
chips-density, chips-base;
86+
chips-density, chips-base, chips-overrides;
8287
@forward './datepicker/datepicker-theme' as datepicker-* show datepicker-theme, datepicker-color,
83-
datepicker-typography, datepicker-date-range-colors, datepicker-density, datepicker-base;
88+
datepicker-typography, datepicker-date-range-colors, datepicker-density, datepicker-base,
89+
datepicker-overrides;
8490
@forward './dialog/dialog-theme' as dialog-* show dialog-theme, dialog-color, dialog-typography,
85-
dialog-density, dialog-base;
91+
dialog-density, dialog-base, dialog-overrides;
8692
@forward './dialog/dialog-legacy-padding' as dialog-* show dialog-legacy-padding;
8793
@forward './divider/divider-theme' as divider-* show divider-theme, divider-color,
88-
divider-typography, divider-density, divider-base;
94+
divider-typography, divider-density, divider-base, divider-overrides;
8995
@forward './expansion/expansion-theme' as expansion-* show expansion-theme, expansion-color,
90-
expansion-typography, expansion-density, expansion-base;
96+
expansion-typography, expansion-density, expansion-base, expansion-overrides;
9197
@forward './form-field/form-field-theme' as form-field-* show form-field-theme,
92-
form-field-color, form-field-typography, form-field-density, form-field-base;
98+
form-field-color, form-field-typography, form-field-density, form-field-base,
99+
form-field-overrides;
93100
@forward './grid-list/grid-list-theme' as grid-list-* show grid-list-theme, grid-list-color,
94-
grid-list-typography, grid-list-density, grid-list-base;
101+
grid-list-typography, grid-list-density, grid-list-base, grid-list-overrides;
95102
@forward './icon/icon-theme' as icon-* show icon-theme, icon-color, icon-typography, icon-density,
96-
icon-base;
103+
icon-base, icon-overrides;
97104
@forward './input/input-theme' as input-* show input-theme, input-color, input-typography,
98-
input-density, input-base;
105+
input-density, input-base, input-overrides;
99106
@forward './list/list-theme' as list-* show list-theme, list-color, list-typography,
100-
list-density, list-base;
107+
list-density, list-base, list-overrides;
101108
@forward './menu/menu-theme' as menu-* show menu-theme, menu-color, menu-typography, menu-density,
102-
menu-base;
109+
menu-base, menu-overrides;
103110
@forward './paginator/paginator-theme' as paginator-* show paginator-theme, paginator-color,
104-
paginator-typography, paginator-density, paginator-base;
111+
paginator-typography, paginator-density, paginator-base, paginator-overrides;
105112
@forward './progress-bar/progress-bar-theme' as progress-bar-* show
106113
progress-bar-theme, progress-bar-color, progress-bar-typography,
107-
progress-bar-density, progress-bar-base;
114+
progress-bar-density, progress-bar-base, progress-bar-overrides;
108115
@forward './progress-spinner/progress-spinner-theme' as progress-spinner-* show
109116
progress-spinner-theme, progress-spinner-color, progress-spinner-typography,
110-
progress-spinner-density, progress-spinner-base;
117+
progress-spinner-density, progress-spinner-base, progress-spinner-overrides;
111118
@forward './radio/radio-theme' as radio-* show radio-theme, radio-color, radio-typography,
112-
radio-density, radio-base;
119+
radio-density, radio-base, radio-overrides;
113120
@forward './select/select-theme' as select-* show select-theme, select-color, select-typography,
114-
select-density, select-base;
121+
select-density, select-base, select-overrides;
115122
@forward './sidenav/sidenav-theme' as sidenav-* show sidenav-theme, sidenav-color,
116-
sidenav-typography, sidenav-density, sidenav-base;
123+
sidenav-typography, sidenav-density, sidenav-base, sidenav-overrides;
117124
@forward './slide-toggle/slide-toggle-theme' as slide-toggle-* show
118125
slide-toggle-theme, slide-toggle-color, slide-toggle-typography, slide-toggle-density,
119-
slide-toggle-base;
126+
slide-toggle-base, slide-toggle-overrides;
120127
@forward './slider/slider-theme' as slider-* show slider-theme, slider-color, slider-typography,
121-
slider-density, slider-base;
128+
slider-density, slider-base, slider-overrides;
122129
@forward './snack-bar/snack-bar-theme' as snack-bar-* show snack-bar-theme, snack-bar-color,
123-
snack-bar-typography, snack-bar-density, snack-bar-base;
130+
snack-bar-typography, snack-bar-density, snack-bar-base, bar-overrides;
124131
@forward './sort/sort-theme' as sort-* show sort-theme, sort-color, sort-typography, sort-density,
125-
sort-base;
132+
sort-base, sort-overrides;
126133
@forward './stepper/stepper-theme' as stepper-* show stepper-theme, stepper-color,
127-
stepper-typography, stepper-density, stepper-base;
134+
stepper-typography, stepper-density, stepper-base, stepper-overrides;
128135
@forward './table/table-theme' as table-* show table-theme, table-color, table-typography,
129-
table-density, table-base;
136+
table-density, table-base, table-overrides;
130137
@forward './tabs/tabs-theme' as tabs-* show tabs-theme, tabs-color, tabs-typography, tabs-density,
131-
tabs-base;
138+
tabs-base, tabs-overrides;
132139
@forward './toolbar/toolbar-theme' as toolbar-* show toolbar-theme, toolbar-color,
133-
toolbar-typography, toolbar-density, toolbar-base;
140+
toolbar-typography, toolbar-density, toolbar-base, toolbar-overrides;
134141
@forward './tooltip/tooltip-theme' as tooltip-* show tooltip-theme, tooltip-color,
135-
tooltip-typography, tooltip-density, tooltip-base;
142+
tooltip-typography, tooltip-density, tooltip-base, tooltip-overrides;
136143
@forward './tree/tree-theme' as tree-* show tree-theme, tree-color, tree-typography, tree-density,
137-
tree-base;
144+
tree-base, tree-overrides;

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

+7
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,13 @@
5555
}
5656
}
5757

58+
@mixin overrides($tokens: ()) {
59+
@include token-utils.batch-create-token-values(
60+
$tokens,
61+
(prefix: tokens-mat-autocomplete.$prefix, tokens: tokens-mat-autocomplete.get-token-slots()),
62+
);
63+
}
64+
5865
@mixin theme($theme) {
5966
@include theming.private-check-duplicate-theme-styles($theme, 'mat-autocomplete') {
6067
@if inspection.get-theme-version($theme) == 1 {

‎src/material/badge/_badge-theme.scss

+9
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,15 @@
7272
@else {}
7373
}
7474

75+
/// Outputs the CSS variable values for the given tokens.
76+
/// @param {Map} $tokens The token values to emit.
77+
@mixin overrides($tokens: ()) {
78+
@include token-utils.batch-create-token-values(
79+
$tokens,
80+
(prefix: tokens-mat-badge.$prefix, tokens: tokens-mat-badge.get-token-slots()),
81+
);
82+
}
83+
7584
/// Outputs all (base, color, typography, and density) theme styles for the mat-badge.
7685
/// @param {Map} $theme The theme to generate styles for.
7786
/// @param {ArgList} Additional optional arguments (only supported for M3 themes):

‎src/material/bottom-sheet/_bottom-sheet-theme.scss

+7
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,13 @@
5050
@else {}
5151
}
5252

53+
@mixin overrides($tokens: ()) {
54+
@include token-utils.batch-create-token-values(
55+
$tokens,
56+
(prefix: tokens-mat-bottom-sheet.$prefix, tokens: tokens-mat-bottom-sheet.get-token-slots()),
57+
);
58+
}
59+
5360
@mixin theme($theme) {
5461
@include theming.private-check-duplicate-theme-styles($theme, 'mat-bottom-sheet') {
5562
@if inspection.get-theme-version($theme) == 1 {

‎src/material/button-toggle/_button-toggle-theme.scss

+12
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,18 @@
7979
}
8080
}
8181

82+
/// Outputs the CSS variable values for the given tokens.
83+
/// @param {Map} $tokens The token values to emit.
84+
@mixin overrides($tokens: ()) {
85+
$legacy-tokens: tokens-mat-legacy-button-toggle.get-token-slots();
86+
$standard-tokens: tokens-mat-standard-button-toggle.get-token-slots();
87+
@include token-utils.batch-create-token-values(
88+
$tokens,
89+
(prefix: tokens-mat-legacy-button-toggle.$prefix, tokens: $legacy-tokens),
90+
(prefix: tokens-mat-standard-button-toggle.$prefix, tokens: $standard-tokens),
91+
);
92+
}
93+
8294
/// Outputs all (base, color, typography, and density) theme styles for the mat-button-toggle.
8395
/// @param {Map} $theme The theme to generate styles for.
8496
/// @param {ArgList} Additional optional arguments (only supported for M3 themes):

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

+25
Original file line numberDiff line numberDiff line change
@@ -273,6 +273,31 @@
273273
}
274274
}
275275

276+
/// Outputs the CSS variable values for the given tokens.
277+
/// @param {Map} $tokens The token values to emit.
278+
@mixin overrides($tokens: ()) {
279+
$mdc-filled-button-tokens: tokens-mdc-filled-button.get-token-slots();
280+
$mat-filled-button-tokens: tokens-mat-filled-button.get-token-slots();
281+
$mdc-outlined-button-tokens: tokens-mdc-outlined-button.get-token-slots();
282+
$mat-outlined-button-tokens: tokens-mat-outlined-button.get-token-slots();
283+
$mdc-protected-button-tokens: tokens-mdc-protected-button.get-token-slots();
284+
$mat-protected-button-tokens: tokens-mat-protected-button.get-token-slots();
285+
$mdc-text-button-tokens: tokens-mdc-text-button.get-token-slots();
286+
$mat-text-button-tokens: tokens-mat-text-button.get-token-slots();
287+
288+
@include token-utils.batch-create-token-values(
289+
$tokens,
290+
(prefix: tokens-mdc-filled-button.$prefix, tokens: $mdc-filled-button-tokens),
291+
(prefix: tokens-mat-filled-button.$prefix, tokens: $mat-filled-button-tokens),
292+
(prefix: tokens-mdc-outlined-button.$prefix, tokens: $mdc-outlined-button-tokens),
293+
(prefix: tokens-mat-outlined-button.$prefix, tokens: $mat-outlined-button-tokens),
294+
(prefix: tokens-mdc-protected-button.$prefix, tokens: $mdc-protected-button-tokens),
295+
(prefix: tokens-mat-protected-button.$prefix, tokens: $mat-protected-button-tokens),
296+
(prefix: tokens-mdc-text-button.$prefix, tokens: $mdc-text-button-tokens),
297+
(prefix: tokens-mat-text-button.$prefix, tokens: $mat-text-button-tokens),
298+
);
299+
}
300+
276301
/// Outputs all (base, color, typography, and density) theme styles for the mat-button.
277302
/// @param {Map} $theme The theme to generate styles for.
278303
/// @param {ArgList} Additional optional arguments (only supported for M3 themes):

‎src/material/button/_fab-theme.scss

+13
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,19 @@
141141
}
142142
}
143143

144+
/// Outputs the CSS variable values for the given tokens.
145+
/// @param {Map} $tokens The token values to emit.
146+
@mixin overrides($tokens: ()) {
147+
@include token-utils.batch-create-token-values(
148+
$tokens,
149+
(prefix: tokens-mdc-fab.$prefix, tokens: tokens-mdc-fab.get-token-slots()),
150+
(prefix: tokens-mdc-fab-small.$prefix, tokens: tokens-mdc-fab-small.get-token-slots()),
151+
(prefix: tokens-mdc-extended-fab.$prefix, tokens: tokens-mdc-extended-fab.get-token-slots()),
152+
(prefix: tokens-mat-fab.$prefix, tokens: tokens-mat-fab.get-token-slots()),
153+
(prefix: tokens-mat-fab-small.$prefix, tokens: tokens-mat-fab-small.get-token-slots()),
154+
);
155+
}
156+
144157
/// Outputs all (base, color, typography, and density) theme styles for the mat-checkbox.
145158
/// @param {Map} $theme The theme to generate styles for.
146159
/// @param {ArgList} Additional optional arguments (only supported for M3 themes):

‎src/material/button/_icon-button-theme.scss

+8
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,14 @@
121121
}
122122
}
123123

124+
@mixin overrides($tokens: ()) {
125+
@include token-utils.batch-create-token-values(
126+
$tokens,
127+
(prefix: tokens-mdc-icon-button.$prefix, tokens: tokens-mdc-icon-button.get-token-slots()),
128+
(prefix: tokens-mat-icon-button.$prefix, tokens: tokens-mat-icon-button.get-token-slots()),
129+
);
130+
}
131+
124132
@mixin theme($theme) {
125133
@include theming.private-check-duplicate-theme-styles($theme, 'mat-icon-button') {
126134
@if inspection.get-theme-version($theme) == 1 {

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

+9
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,15 @@
8888
}
8989
}
9090

91+
@mixin overrides($tokens: ()) {
92+
@include token-utils.batch-create-token-values(
93+
$tokens,
94+
(prefix: tokens-mat-card.$prefix, tokens: tokens-mat-card.get-token-slots()),
95+
(prefix: tokens-mdc-elevated-card.$prefix, tokens: tokens-mdc-elevated-card.get-token-slots()),
96+
(prefix: tokens-mdc-outlined-card.$prefix, tokens: tokens-mdc-outlined-card.get-token-slots()),
97+
);
98+
}
99+
91100
@mixin theme($theme) {
92101
@include theming.private-check-duplicate-theme-styles($theme, 'mat-card') {
93102
@if inspection.get-theme-version($theme) == 1 {

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

+10
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,16 @@
101101
}
102102
}
103103

104+
/// Outputs the CSS variable values for the given tokens.
105+
/// @param {Map} $tokens The token values to emit.
106+
@mixin overrides($tokens: ()) {
107+
@include token-utils.batch-create-token-values(
108+
$tokens,
109+
(prefix: tokens-mdc-chip.$prefix, tokens: tokens-mdc-chip.get-token-slots()),
110+
(prefix: tokens-mat-chip.$prefix, tokens: tokens-mat-chip.get-token-slots()),
111+
);
112+
}
113+
104114
/// Outputs all (base, color, typography, and density) theme styles for the mat-chips.
105115
/// @param {Map} $theme The theme to generate styles for.
106116
/// @param {ArgList} Additional optional arguments (only supported for M3 themes):

‎src/material/core/_core-theme.scss

+17
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,23 @@
8888
}
8989
}
9090

91+
@mixin overrides($tokens: ()) {
92+
$app-tokens: tokens-mat-app.get-token-slots();
93+
$ripple-tokens: tokens-mat-ripple.get-token-slots();
94+
$option-tokens: tokens-mat-option.get-token-slots();
95+
$full-pseudo-checkbox-tokens: tokens-mat-full-pseudo-checkbox.get-token-slots();
96+
$minimal-pseudo-checkbox-tokens: tokens-mat-minimal-pseudo-checkbox.get-token-slots();
97+
98+
@include token-utils.batch-create-token-values(
99+
$tokens,
100+
(prefix: tokens-mat-app.$prefix, tokens: $app-tokens),
101+
(prefix: tokens-mat-ripple.$prefix, tokens: $ripple-tokens),
102+
(prefix: tokens-mat-option.$prefix, tokens: $option-tokens),
103+
(prefix: tokens-mat-full-pseudo-checkbox.$prefix, tokens: $full-pseudo-checkbox-tokens),
104+
(prefix: tokens-mat-minimal-pseudo-checkbox.$prefix, tokens: $minimal-pseudo-checkbox-tokens),
105+
);
106+
}
107+
91108
// Mixin that renders all of the core styles that depend on the theme.
92109
@mixin theme($theme, $options...) {
93110
// Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that

‎src/material/core/option/_optgroup-theme.scss

+7
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,13 @@
4545
@else {}
4646
}
4747

48+
@mixin overrides($tokens: ()) {
49+
@include token-utils.batch-create-token-values(
50+
$tokens,
51+
(prefix: tokens-mat-optgroup.$prefix, tokens: tokens-mat-optgroup.get-token-slots()),
52+
);
53+
}
54+
4855
@mixin theme($theme) {
4956
@include theming.private-check-duplicate-theme-styles($theme, 'mat-optgroup') {
5057
@if inspection.get-theme-version($theme) == 1 {

‎src/material/core/option/_option-theme.scss

+9
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,15 @@
6666
@else {}
6767
}
6868

69+
/// Outputs the CSS variable values for the given tokens.
70+
/// @param {Map} $tokens The token values to emit.
71+
@mixin overrides($tokens: ()) {
72+
@include token-utils.batch-create-token-values(
73+
$tokens,
74+
(prefix: tokens-mat-option.$prefix, tokens: tokens-mat-option.get-token-slots()),
75+
);
76+
}
77+
6978
/// Outputs all (base, color, typography, and density) theme styles for the mat-option.
7079
/// @param {Map} $theme The theme to generate styles for.
7180
/// @param {ArgList} Additional optional arguments (only supported for M3 themes):

‎src/material/core/ripple/_ripple-theme.scss

+7
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,13 @@
4949
}
5050
}
5151

52+
@mixin overrides($tokens: ()) {
53+
@include token-utils.batch-create-token-values(
54+
$tokens,
55+
(prefix: tokens-mat-ripple.$prefix, tokens: tokens-mat-ripple.get-token-slots()),
56+
);
57+
}
58+
5259
@mixin theme($theme) {
5360
@include theming.private-check-duplicate-theme-styles($theme, 'mat-ripple') {
5461
@if inspection.get-theme-version($theme) == 1 {

‎src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

+13
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,19 @@
3333
/// @param {Map} $theme The theme to generate base styles for.
3434
@mixin base($theme) {}
3535

36+
/// Outputs the CSS variable values for the given tokens.
37+
/// @param {Map} $tokens The token values to emit.
38+
@mixin overrides($tokens: ()) {
39+
$full-pseudo-checkbox-tokens: tokens-mat-full-pseudo-checkbox.get-token-slots();
40+
$minimal-pseudo-checkbox-tokens: tokens-mat-minimal-pseudo-checkbox.get-token-slots();
41+
42+
@include token-utils.batch-create-token-values(
43+
$tokens,
44+
(prefix: tokens-mat-full-pseudo-checkbox.$prefix, tokens: $full-pseudo-checkbox-tokens),
45+
(prefix: tokens-mat-minimal-pseudo-checkbox.$prefix, tokens: $minimal-pseudo-checkbox-tokens),
46+
);
47+
}
48+
3649
/// Outputs color theme styles for the mat-pseudo-checkbox.
3750
/// @param {Map} $theme The theme to generate color styles for.
3851
/// @param {ArgList} Additional optional arguments (only supported for M3 themes):

0 commit comments

Comments
 (0)