Skip to content

Commit 02db80d

Browse files
mmalerbammalerba
authored
feat(material-experimental/theming): add M3 chips support (#28183)
1 parent 6970266 commit 02db80d

File tree

6 files changed

+120
-32
lines changed

6 files changed

+120
-32
lines changed

‎src/dev-app/theme-m3.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ html {
4444
@include mat.button-toggle-theme($light-theme);
4545
@include mat.card-theme($light-theme);
4646
@include mat.checkbox-theme($light-theme);
47+
@include mat.chips-theme($light-theme);
4748
@include mat.datepicker-theme($light-theme);
4849
@include mat.dialog-theme($light-theme);
4950
@include mat.divider-theme($light-theme);
@@ -89,6 +90,7 @@ html {
8990
@include mat.button-toggle-color($dark-theme);
9091
@include mat.card-color($dark-theme);
9192
@include mat.checkbox-color($dark-theme);
93+
@include mat.chips-color($dark-theme);
9294
@include mat.datepicker-color($dark-theme);
9395
@include mat.dialog-color($dark-theme);
9496
@include mat.divider-color($dark-theme);
@@ -133,6 +135,7 @@ html {
133135
@include mat.button-toggle-density($scale-theme);
134136
@include mat.card-density($scale-theme);
135137
@include mat.checkbox-density($scale-theme);
138+
@include mat.chips-density($scale-theme);
136139
@include mat.datepicker-density($scale-theme);
137140
@include mat.dialog-density($scale-theme);
138141
@include mat.divider-density($scale-theme);

‎src/material-experimental/theming/_custom-tokens.scss‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,49 @@
113113
);
114114
}
115115

116+
/// Generates custom tokens for the mdc-chip. (MDC has a chip component, but they
117+
/// seem to have made up the tokens rather than using ones generated from the token database,
118+
/// therefore we need a custom token function for it).
119+
/// @param {Map} $systems The MDC system tokens
120+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
121+
/// @return {Map} A set of custom tokens for the mdc-chip
122+
@function chip($systems, $exclude-hardcoded) {
123+
@return mat.private-merge-all(
124+
_generate-typography-tokens($systems, label-text, label-large),
125+
(
126+
container-shape: _hardcode((
127+
family: rounded,
128+
radius: 8px,
129+
), $exclude-hardcoded),
130+
with-avatar-avatar-size: _hardcode(24px, $exclude-hardcoded),
131+
elevated-container-color: map.get($systems, md-sys-color, surface-container-low),
132+
elevated-disabled-container-color: mat.private-safe-color-change(
133+
map.get($systems, md-sys-color, on-surface),
134+
$alpha: 0.12,
135+
),
136+
label-text-color: map.get($systems, md-sys-color, on-surface-variant),
137+
disabled-label-text-color: mat.private-safe-color-change(
138+
map.get($systems, md-sys-color, on-surface),
139+
$alpha: 0.38,
140+
),
141+
with-icon-icon-size: _hardcode(18px, $exclude-hardcoded),
142+
with-icon-icon-color: map.get($systems, md-sys-color, on-surface-variant),
143+
with-icon-disabled-icon-color: mat.private-safe-color-change(
144+
map.get($systems, md-sys-color, on-surface),
145+
$alpha: 0.38,
146+
),
147+
with-icon-selected-icon-color: map.get($systems, md-sys-color, on-secondary-container),
148+
with-trailing-icon-trailing-icon-color: map.get($systems, md-sys-color, on-surface-variant),
149+
with-trailing-icon-disabled-trailing-icon-color: mat.private-safe-color-change(
150+
map.get($systems, md-sys-color, on-surface),
151+
$alpha: 0.38,
152+
),
153+
focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
154+
focus-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
155+
),
156+
);
157+
}
158+
116159
/// Generates custom tokens for the mat-datepicker.
117160
/// @param {Map} $systems The MDC system tokens
118161
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values

‎src/material-experimental/theming/_m3-density.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@ $_density-tokens: (
1919
(mdc, checkbox): (
2020
state-layer-size: (40px, 36px, 32px, 28px),
2121
),
22+
(mdc, chip): (
23+
container-height: (32px, 28px, 24px),
24+
),
2225
(mdc, circular-progress): (),
2326
(mdc, dialog): (),
2427
(mdc, elevated-card): (),

‎src/material-experimental/theming/_m3-tokens.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,11 @@
177177
_fix-checkbox-tokens(mdc-tokens.md-comp-checkbox-values($systems, $exclude-hardcoded)),
178178
$token-slots
179179
),
180+
_namespace-tokens(
181+
(mdc, chip),
182+
custom-tokens.chip($systems, $exclude-hardcoded),
183+
$token-slots
184+
),
180185
_namespace-tokens(
181186
(mdc, circular-progress),
182187
mdc-tokens.md-comp-circular-progress-indicator-values($systems, $exclude-hardcoded),

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

Lines changed: 64 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use 'sass:map';
12
@use 'sass:color';
23
@use '@material/chips/chip-theme' as mdc-chip-theme;
34
@use '../core/tokens/m2/mdc/chip' as tokens-mdc-chip;
@@ -6,63 +7,94 @@
67
@use '../core/typography/typography';
78

89
@mixin base($theme) {
9-
.mat-mdc-standard-chip {
10-
@include mdc-chip-theme.theme(tokens-mdc-chip.get-unthemable-tokens());
10+
@if inspection.get-theme-version($theme) == 1 {
11+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
12+
}
13+
@else {
14+
.mat-mdc-standard-chip {
15+
@include mdc-chip-theme.theme(tokens-mdc-chip.get-unthemable-tokens());
16+
}
1117
}
1218
}
1319

1420
@mixin color($theme) {
15-
.mat-mdc-standard-chip {
16-
$default-color-tokens: tokens-mdc-chip.get-color-tokens($theme);
17-
@include mdc-chip-theme.theme($default-color-tokens);
21+
@if inspection.get-theme-version($theme) == 1 {
22+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
23+
}
24+
@else {
25+
.mat-mdc-standard-chip {
26+
$default-color-tokens: tokens-mdc-chip.get-color-tokens($theme);
27+
@include mdc-chip-theme.theme($default-color-tokens);
1828

19-
&.mat-mdc-chip-selected,
20-
&.mat-mdc-chip-highlighted {
21-
&.mat-primary {
22-
$primary-color-tokens: tokens-mdc-chip.get-color-tokens($theme, primary);
23-
@include mdc-chip-theme.theme($primary-color-tokens);
24-
}
29+
&.mat-mdc-chip-selected,
30+
&.mat-mdc-chip-highlighted {
31+
&.mat-primary {
32+
$primary-color-tokens: tokens-mdc-chip.get-color-tokens($theme, primary);
33+
@include mdc-chip-theme.theme($primary-color-tokens);
34+
}
2535

26-
&.mat-accent {
27-
$accent-color-tokens: tokens-mdc-chip.get-color-tokens($theme, accent);
28-
@include mdc-chip-theme.theme($accent-color-tokens);
29-
}
36+
&.mat-accent {
37+
$accent-color-tokens: tokens-mdc-chip.get-color-tokens($theme, accent);
38+
@include mdc-chip-theme.theme($accent-color-tokens);
39+
}
3040

31-
&.mat-warn {
32-
$warn-color-tokens: tokens-mdc-chip.get-color-tokens($theme, warn);
33-
@include mdc-chip-theme.theme($warn-color-tokens);
41+
&.mat-warn {
42+
$warn-color-tokens: tokens-mdc-chip.get-color-tokens($theme, warn);
43+
@include mdc-chip-theme.theme($warn-color-tokens);
44+
}
3445
}
3546
}
3647
}
3748
}
3849

3950
@mixin typography($theme) {
40-
$typography-tokens: tokens-mdc-chip.get-typography-tokens($theme);
51+
@if inspection.get-theme-version($theme) == 1 {
52+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
53+
}
54+
@else {
55+
$typography-tokens: tokens-mdc-chip.get-typography-tokens($theme);
4156

42-
.mat-mdc-standard-chip {
43-
@include mdc-chip-theme.theme($typography-tokens);
57+
.mat-mdc-standard-chip {
58+
@include mdc-chip-theme.theme($typography-tokens);
59+
}
4460
}
4561
}
4662

4763
@mixin density($theme) {
48-
$density-tokens: tokens-mdc-chip.get-density-tokens($theme);
64+
@if inspection.get-theme-version($theme) == 1 {
65+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
66+
}
67+
@else {
68+
$density-tokens: tokens-mdc-chip.get-density-tokens($theme);
4969

50-
.mat-mdc-chip.mat-mdc-standard-chip {
51-
@include mdc-chip-theme.theme($density-tokens);
70+
.mat-mdc-chip.mat-mdc-standard-chip {
71+
@include mdc-chip-theme.theme($density-tokens);
72+
}
5273
}
5374
}
5475

5576
@mixin theme($theme) {
5677
@include theming.private-check-duplicate-theme-styles($theme, 'mat-chips') {
57-
@include base($theme);
58-
@if inspection.theme-has($theme, color) {
59-
@include color($theme);
60-
}
61-
@if inspection.theme-has($theme, density) {
62-
@include density($theme);
78+
@if inspection.get-theme-version($theme) == 1 {
79+
@include _theme-from-tokens(inspection.get-theme-tokens($theme));
6380
}
64-
@if inspection.theme-has($theme, typography) {
65-
@include typography($theme);
81+
@else {
82+
@include base($theme);
83+
@if inspection.theme-has($theme, color) {
84+
@include color($theme);
85+
}
86+
@if inspection.theme-has($theme, density) {
87+
@include density($theme);
88+
}
89+
@if inspection.theme-has($theme, typography) {
90+
@include typography($theme);
91+
}
6692
}
6793
}
6894
}
95+
96+
@mixin _theme-from-tokens($tokens) {
97+
@if ($tokens != ()) {
98+
@include mdc-chip-theme.theme(map.get($tokens, tokens-mdc-chip.$prefix));
99+
}
100+
}

‎src/material/core/tokens/m2/_index.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
@use './mat/toolbar' as tokens-mat-toolbar;
3434
@use './mat/tree' as tokens-mat-tree;
3535
@use './mdc/checkbox' as tokens-mdc-checkbox;
36+
@use './mdc/chip' as tokens-mdc-chip;
3637
@use './mdc/circular-progress' as tokens-mdc-circular-progress;
3738
@use './mdc/dialog' as tokens-mdc-dialog;
3839
@use './mdc/elevated-card' as tokens-mdc-elevated-card;
@@ -127,6 +128,7 @@
127128
_get-tokens-for-module($theme, tokens-mat-toolbar),
128129
_get-tokens-for-module($theme, tokens-mat-tree),
129130
_get-tokens-for-module($theme, tokens-mdc-checkbox),
131+
_get-tokens-for-module($theme, tokens-mdc-chip),
130132
_get-tokens-for-module($theme, tokens-mdc-circular-progress),
131133
_get-tokens-for-module($theme, tokens-mdc-dialog),
132134
_get-tokens-for-module($theme, tokens-mdc-elevated-card),

0 commit comments

Comments
 (0)