Skip to content

Commit 3d118c6

Browse files
mmalerbammalerba
committed
feat(material-experimental/theming): add M3 autocomplete, badge, and bottom-sheet support (#28177)
(cherry picked from commit 85c658f)
1 parent c2a8129 commit 3d118c6

File tree

8 files changed

+244
-67
lines changed

8 files changed

+244
-67
lines changed

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,9 @@ $dark-theme: matx.define-theme(map.set($m3-base-config, color, theme-type, dark)
3838

3939
// Emit default theme styles.
4040
html {
41+
@include mat.autocomplete-theme($light-theme);
42+
@include mat.badge-theme($light-theme);
43+
@include mat.bottom-sheet-theme($light-theme);
4144
@include mat.card-theme($light-theme);
4245
@include mat.checkbox-theme($light-theme);
4346
@include mat.datepicker-theme($light-theme);
@@ -76,6 +79,9 @@ html {
7679
background: black;
7780
color: white;
7881

82+
@include mat.autocomplete-color($dark-theme);
83+
@include mat.badge-color($dark-theme);
84+
@include mat.bottom-sheet-color($dark-theme);
7985
@include mat.card-color($dark-theme);
8086
@include mat.checkbox-color($dark-theme);
8187
@include mat.datepicker-color($dark-theme);
@@ -113,6 +119,9 @@ html {
113119
$scale-theme: matx.define-theme(map.set($m3-base-config, density, scale, $scale));
114120

115121
.demo-density-#{$scale} {
122+
@include mat.autocomplete-density($scale-theme);
123+
@include mat.badge-density($scale-theme);
124+
@include mat.bottom-sheet-density($scale-theme);
116125
@include mat.card-density($scale-theme);
117126
@include mat.checkbox-density($scale-theme);
118127
@include mat.datepicker-density($scale-theme);

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,52 @@
2121
@return $result;
2222
}
2323

24+
/// Generates custom tokens for the mat-autocomplete.
25+
/// @param {Map} $systems The MDC system tokens
26+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
27+
/// @return {Map} A set of custom tokens for the mat-autocomplete
28+
@function autocomplete($systems, $exclude-hardcoded) {
29+
@return (
30+
background-color: map.get($systems, md-sys-color, surface-container),
31+
);
32+
}
33+
34+
/// Generates custom tokens for the mat-badge.
35+
/// @param {Map} $systems The MDC system tokens
36+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
37+
/// @return {Map} A set of custom tokens for the mat-badge
38+
@function badge($systems, $exclude-hardcoded) {
39+
@return (
40+
background-color: map.get($systems, md-sys-color, error),
41+
text-color: map.get($systems, md-sys-color, on-error),
42+
disabled-state-background-color: mat.private-safe-color-change(
43+
map.get($systems, md-sys-color, error),
44+
$alpha: 0.38,
45+
),
46+
disabled-state-text-color: map.get($systems, md-sys-color, on-error),
47+
text-font: map.get($systems, md-sys-typescale, label-small-font),
48+
text-size: map.get($systems, md-sys-typescale, label-small-size),
49+
text-weight: map.get($systems, md-sys-typescale, label-small-weight),
50+
small-size-text-size: _hardcode(0, $exclude-hardcoded),
51+
large-size-text-size: map.get($systems, md-sys-typescale, label-small-size),
52+
);
53+
}
54+
55+
/// Generates custom tokens for the mat-bottom-sheet.
56+
/// @param {Map} $systems The MDC system tokens
57+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
58+
/// @return {Map} A set of custom tokens for the mat-bottom-sheet
59+
@function bottom-sheet($systems, $exclude-hardcoded) {
60+
@return mat.private-merge-all(
61+
_generate-typography-tokens($systems, container-text, body-large),
62+
(
63+
container-shape: _hardcode(28px, $exclude-hardcoded),
64+
container-text-color: map.get($systems, md-sys-color, on-surface),
65+
container-background-color: map.get($systems, md-sys-color, surface-container-low),
66+
),
67+
);
68+
}
69+
2470
/// Generates custom tokens for the mat-card.
2571
/// @param {Map} $systems The MDC system tokens
2672
/// @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
@@ -44,6 +44,9 @@ $_density-tokens: (
4444
(mdc, tab-indicator): (),
4545

4646
// Custom Angular Material tokens
47+
(mat, autocomplete): (),
48+
(mat, badge): (),
49+
(mat, bottom-sheet): (),
4750
(mat, card): (),
4851
(mat, datepicker): (),
4952
(mat, divider): (),

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -255,6 +255,21 @@
255255
custom-tokens.tab-indicator($systems, $exclude-hardcoded),
256256
$token-slots
257257
),
258+
_namespace-tokens(
259+
(mat, autocomplete),
260+
custom-tokens.autocomplete($systems, $exclude-hardcoded),
261+
$token-slots
262+
),
263+
_namespace-tokens(
264+
(mat, badge),
265+
custom-tokens.badge($systems, $exclude-hardcoded),
266+
$token-slots
267+
),
268+
_namespace-tokens(
269+
(mat, bottom-sheet),
270+
custom-tokens.bottom-sheet($systems, $exclude-hardcoded),
271+
$token-slots
272+
),
258273
_namespace-tokens(
259274
(mat, card),
260275
custom-tokens.card($systems, $exclude-hardcoded),

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

Lines changed: 47 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,67 @@
1+
@use 'sass:map';
12
@use '../core/theming/theming';
23
@use '../core/theming/inspection';
34
@use '../core/typography/typography';
45
@use '../core/style/sass-utils';
56
@use '../core/tokens/token-utils';
67
@use '../core/tokens/m2/mat/autocomplete' as tokens-mat-autocomplete;
78

8-
@mixin base($theme) {}
9+
@mixin base($theme) {
10+
@if inspection.get-theme-version($theme) == 1 {
11+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
12+
}
13+
@else {}
14+
}
915

1016
@mixin color($theme) {
11-
@include sass-utils.current-selector-or-root() {
12-
@include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
13-
tokens-mat-autocomplete.get-color-tokens($theme));
17+
@if inspection.get-theme-version($theme) == 1 {
18+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
19+
}
20+
@else {
21+
@include sass-utils.current-selector-or-root() {
22+
@include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
23+
tokens-mat-autocomplete.get-color-tokens($theme));
24+
}
1425
}
1526
}
1627

17-
@mixin typography($theme) {}
28+
@mixin typography($theme) {
29+
@if inspection.get-theme-version($theme) == 1 {
30+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
31+
}
32+
@else {}
33+
}
1834

19-
@mixin density($theme) {}
35+
@mixin density($theme) {
36+
@if inspection.get-theme-version($theme) == 1 {
37+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
38+
}
39+
@else {}
40+
}
2041

2142
@mixin theme($theme) {
2243
@include theming.private-check-duplicate-theme-styles($theme, 'mat-autocomplete') {
23-
@include base($theme);
24-
@if inspection.theme-has($theme, color) {
25-
@include color($theme);
26-
}
27-
@if inspection.theme-has($theme, density) {
28-
@include density($theme);
44+
@if inspection.get-theme-version($theme) == 1 {
45+
@include _theme-from-tokens(inspection.get-theme-tokens($theme));
2946
}
30-
@if inspection.theme-has($theme, typography) {
31-
@include typography($theme);
47+
@else {
48+
@include base($theme);
49+
@if inspection.theme-has($theme, color) {
50+
@include color($theme);
51+
}
52+
@if inspection.theme-has($theme, density) {
53+
@include density($theme);
54+
}
55+
@if inspection.theme-has($theme, typography) {
56+
@include typography($theme);
57+
}
3258
}
3359
}
3460
}
61+
62+
@mixin _theme-from-tokens($tokens) {
63+
@if ($tokens != ()) {
64+
@include token-utils.create-token-values(
65+
tokens-mat-autocomplete.$prefix, map.get($tokens, tokens-mat-autocomplete.$prefix));
66+
}
67+
}

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

Lines changed: 67 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@use 'sass:color';
2+
@use 'sass:map';
23
@use 'sass:math';
34
@use '@angular/cdk';
4-
55
@use '../core/theming/theming';
66
@use '../core/theming/inspection';
77
@use '../core/typography/typography';
@@ -164,57 +164,89 @@ $_emit-fallback-vars: true;
164164
}
165165
}
166166

167-
@mixin base($theme) {}
167+
@mixin base($theme) {
168+
@if inspection.get-theme-version($theme) == 1 {
169+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
170+
}
171+
@else {}
172+
}
168173

169174
@mixin color($theme) {
170-
@include sass-utils.current-selector-or-root() {
171-
@include token-utils.create-token-values(tokens-mat-badge.$prefix,
172-
tokens-mat-badge.get-color-tokens($theme));
175+
@if inspection.get-theme-version($theme) == 1 {
176+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
173177
}
178+
@else {
179+
@include sass-utils.current-selector-or-root() {
180+
@include token-utils.create-token-values(tokens-mat-badge.$prefix,
181+
tokens-mat-badge.get-color-tokens($theme));
182+
}
174183

175-
.mat-badge-accent {
176-
@include token-utils.create-token-values(tokens-mat-badge.$prefix,
177-
tokens-mat-badge.private-get-color-palette-color-tokens($theme, accent));
178-
}
184+
.mat-badge-accent {
185+
@include token-utils.create-token-values(tokens-mat-badge.$prefix,
186+
tokens-mat-badge.private-get-color-palette-color-tokens($theme, accent));
187+
}
179188

180-
.mat-badge-warn {
181-
@include token-utils.create-token-values(tokens-mat-badge.$prefix,
182-
tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn));
189+
.mat-badge-warn {
190+
@include token-utils.create-token-values(tokens-mat-badge.$prefix,
191+
tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn));
192+
}
183193
}
184194
}
185195

186196
@mixin typography($theme) {
187-
@include sass-utils.current-selector-or-root() {
188-
@include token-utils.create-token-values(tokens-mat-badge.$prefix,
189-
tokens-mat-badge.get-typography-tokens($theme));
197+
@if inspection.get-theme-version($theme) == 1 {
198+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
199+
}
200+
@else {
201+
@include sass-utils.current-selector-or-root() {
202+
@include token-utils.create-token-values(tokens-mat-badge.$prefix,
203+
tokens-mat-badge.get-typography-tokens($theme));
204+
}
190205
}
191206
}
192207

193-
@mixin density($theme) {}
208+
@mixin density($theme) {
209+
@if inspection.get-theme-version($theme) == 1 {
210+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
211+
}
212+
@else {}
213+
}
194214

195215
@mixin theme($theme) {
196216
@include theming.private-check-duplicate-theme-styles($theme, 'mat-badge') {
197-
// Try to reduce the number of times that the structural styles are emitted.
198-
@if not $_badge-structure-emitted {
199-
@include _badge-structure;
200-
201-
// Only flip the flag if the mixin is included at the top level. Otherwise the first
202-
// inclusion might be inside of a theme class which will exclude the structural styles
203-
// from all other themes.
204-
@if not & {
205-
$_badge-structure-emitted: true !global;
206-
}
217+
@if inspection.get-theme-version($theme) == 1 {
218+
@include _theme-from-tokens(inspection.get-theme-tokens($theme));
207219
}
220+
@else {
221+
// Try to reduce the number of times that the structural styles are emitted.
222+
@if not $_badge-structure-emitted {
223+
@include _badge-structure;
224+
225+
// Only flip the flag if the mixin is included at the top level. Otherwise the first
226+
// inclusion might be inside of a theme class which will exclude the structural styles
227+
// from all other themes.
228+
@if not & {
229+
$_badge-structure-emitted: true !global;
230+
}
231+
}
208232

209-
@include base($theme);
210-
@if inspection.theme-has($theme, color) {
211-
@include color($theme);
212-
}
213-
@if inspection.theme-has($theme, density) {
214-
@include density($theme);
215-
}
216-
@if inspection.theme-has($theme, typography) {
217-
@include typography($theme);
233+
@include base($theme);
234+
@if inspection.theme-has($theme, color) {
235+
@include color($theme);
236+
}
237+
@if inspection.theme-has($theme, density) {
238+
@include density($theme);
239+
}
240+
@if inspection.theme-has($theme, typography) {
241+
@include typography($theme);
242+
}
218243
}
219244
}
220245
}
246+
247+
@mixin _theme-from-tokens($tokens) {
248+
@if ($tokens != ()) {
249+
@include token-utils.create-token-values(
250+
tokens-mat-badge.$prefix, map.get($tokens, tokens-mat-badge.$prefix));
251+
}
252+
}

0 commit comments

Comments
 (0)