Skip to content

Commit 5459f5c

Browse files
wagnermacielwagnermaciel
authored
refactor(material/chips): change mat-chip to use MDC's token API (#26918)
* refactor(material/chips): change mat-chip to use MDC's token API * fixup! refactor(material/chips): change mat-chip to use MDC's token API * fixup! refactor(material/chips): change mat-chip to use MDC's token API * fixup! refactor(material/chips): change mat-chip to use MDC's token API
1 parent a3250c3 commit 5459f5c

File tree

5 files changed

+396
-117
lines changed

5 files changed

+396
-117
lines changed

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

Lines changed: 44 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -2,100 +2,84 @@
22
@use 'sass:map';
33
@use 'sass:meta';
44
@use '@material/chips/chip-theme' as mdc-chip-theme;
5-
@use '@material/chips/chip-set' as mdc-chip-set;
6-
@use '@material/theme/theme-color' as mdc-theme-color;
7-
@use '@material/theme/color-palette' as mdc-color-palette;
8-
@use '@material/typography' as mdc-typography;
9-
@use '../core/mdc-helpers/mdc-helpers';
5+
@use '../core/tokens/m2/mdc/chip' as tokens-mdc-chip;
6+
@use '../core/theming/palette';
107
@use '../core/theming/theming';
118
@use '../core/typography/typography';
9+
@use '../core/mdc-helpers/mdc-helpers';
1210

13-
@mixin _chip-variant($background, $foreground) {
14-
@include mdc-chip-theme.theme((
15-
elevated-container-color: $background,
16-
elevated-disabled-container-color: $background,
17-
label-text-color: $foreground,
18-
disabled-label-text-color: $foreground,
19-
with-icon-icon-color: $foreground,
20-
with-icon-disabled-icon-color: $foreground,
21-
with-trailing-icon-disabled-trailing-icon-color: $foreground,
22-
with-trailing-icon-trailing-icon-color: $foreground,
23-
with-icon-selected-icon-color: $foreground,
24-
));
25-
}
11+
@function _get-default-palette($config) {
12+
$is-dark: map.get($config, is-dark);
13+
$grey-50: map.get(palette.$grey-palette, 50);
14+
$grey-900: map.get(palette.$grey-palette, 900);
15+
$default-foreground: if($is-dark, $grey-50, $grey-900);
2616

27-
@mixin _colored-chip($palette) {
28-
$background: theming.get-color-from-palette($palette);
29-
$foreground: theming.get-color-from-palette($palette, default-contrast);
17+
$surface: map.get(map.get($config, background), card);
18+
$on-surface: if(
19+
mdc-helpers.variable-safe-contrast-tone($surface, $is-dark) == 'dark',
20+
#000,
21+
#fff
22+
);
23+
$default-background: if(
24+
meta.type-of($on-surface) == color and meta.type-of($surface) == color,
25+
color.mix($on-surface, $surface, 12%),
26+
$on-surface
27+
);
3028

31-
&.mat-mdc-chip-selected,
32-
&.mat-mdc-chip-highlighted {
33-
@include _chip-variant($background, $foreground);
34-
}
29+
@return (default: $default-background, default-contrast: $default-foreground);
3530
}
3631

3732
@mixin color($config-or-theme) {
3833
$config: theming.get-color-config($config-or-theme);
39-
$primary: map.get($config, primary);
40-
$accent: map.get($config, accent);
41-
$warn: map.get($config, warn);
42-
$foreground: map.get($config, foreground);
43-
$is-dark: map.get($config, is-dark);
44-
45-
@include mdc-helpers.using-mdc-theme($config) {
46-
$on-surface: mdc-theme-color.prop-value(on-surface);
47-
$surface: mdc-theme-color.prop-value(surface);
48-
49-
.mat-mdc-standard-chip {
50-
$standard-background: if(
51-
meta.type-of($on-surface) == color and meta.type-of($surface) == color,
52-
color.mix($on-surface, $surface, 12%),
53-
$on-surface
54-
);
5534

56-
@include _chip-variant(
57-
$standard-background,
58-
if($is-dark, mdc-color-palette.$grey-50, mdc-color-palette.$grey-900)
59-
);
35+
.mat-mdc-standard-chip {
36+
$default-palette: _get-default-palette($config);
37+
$default-config: map.merge($config, (primary: $default-palette));
38+
$default-color-tokens: tokens-mdc-chip.get-color-tokens($default-config);
39+
@include mdc-chip-theme.theme($default-color-tokens);
6040

41+
&.mat-mdc-chip-selected,
42+
&.mat-mdc-chip-highlighted {
6143
&.mat-primary {
62-
@include _colored-chip($primary);
44+
$primary-color-tokens: tokens-mdc-chip.get-color-tokens($config);
45+
@include mdc-chip-theme.theme($primary-color-tokens);
6346
}
6447

6548
&.mat-accent {
66-
@include _colored-chip($accent);
49+
$accent-config: map.merge($config, (primary: map.get($config, accent)));
50+
$accent-color-tokens: tokens-mdc-chip.get-color-tokens($accent-config);
51+
@include mdc-chip-theme.theme($accent-color-tokens);
6752
}
6853

6954
&.mat-warn {
70-
@include _colored-chip($warn);
55+
$warn-config: map.merge($config, (primary: map.get($config, warn)));
56+
$warn-color-tokens: tokens-mdc-chip.get-color-tokens($warn-config);
57+
@include mdc-chip-theme.theme($warn-color-tokens);
7158
}
7259
}
7360
}
7461

7562
.mat-mdc-chip-focus-overlay {
76-
background: map.get($foreground, base);
63+
background: map.get(map.get($config, foreground), base);
7764
}
7865
}
7966

8067
@mixin typography($config-or-theme) {
8168
$config: typography.private-typography-to-2018-config(
82-
theming.get-typography-config($config-or-theme));
83-
@include mdc-chip-set.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
84-
@include mdc-helpers.using-mdc-typography($config) {
85-
// Note that we don't go through MDC's typography mixin, because it assigns the styles to
86-
// an inner element which makes it difficult for clients to customize. Instead we apply the
87-
// same styles ourselves to the root.
88-
.mat-mdc-standard-chip {
89-
@include mdc-typography.typography(body2, $query: mdc-helpers.$mdc-typography-styles-query);
90-
}
69+
theming.get-typography-config($config-or-theme)
70+
);
71+
$typography-tokens: tokens-mdc-chip.get-typography-tokens($config);
72+
73+
.mat-mdc-standard-chip {
74+
@include mdc-chip-theme.theme($typography-tokens);
9175
}
9276
}
9377

9478
@mixin density($config-or-theme) {
9579
$density-scale: theming.get-density-config($config-or-theme);
96-
$density-scale: theming.clamp-density($density-scale, -2);
80+
$density-tokens: tokens-mdc-chip.get-density-tokens($density-scale);
9781
.mat-mdc-chip.mat-mdc-standard-chip {
98-
@include mdc-chip-theme.density($density-scale, $query: mdc-helpers.$mdc-base-styles-query);
82+
@include mdc-chip-theme.theme($density-tokens);
9983
}
10084
}
10185

‎src/material/chips/chip.scss

Lines changed: 26 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,24 @@
44
@use '../core/mdc-helpers/mdc-helpers';
55
@use '../core/style/layout-common';
66
@use '../core/focus-indicators/private' as focus-indicators-private;
7+
@use '../core/tokens/m2/mdc/chip' as m2-mdc-chip;
8+
@use '@material/theme/custom-properties' as mdc-custom-properties;
9+
10+
// The slots for tokens that will be configured in the theme can be emitted with no fallback.
11+
@include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
12+
$token-slots: m2-mdc-chip.get-token-slots();
13+
14+
// Add the MDC chip static styles.
15+
@include mdc-chip.static-styles();
16+
17+
.mat-mdc-standard-chip {
18+
// Add the official slots for the MDC chip.
19+
@include mdc-chip-theme.theme-styles($token-slots);
20+
21+
// Add default values for tokens that aren't outputted by the theming API.
22+
@include mdc-chip-theme.theme(m2-mdc-chip.get-unthemable-tokens());
23+
}
24+
}
725

826
// We *should* be able to include these styles through MDC's
927
// `theme-styles` mixin, but we can't at the time of writing.
@@ -13,20 +31,24 @@
1331
@include mdc-chip-theme.trailing-action-size(mdc-chip-theme.$trailing-action-size);
1432
@include mdc-chip-theme.horizontal-padding(
1533
mdc-chip-theme.$leading-padding,
16-
mdc-chip-theme.$trailing-padding);
34+
mdc-chip-theme.$trailing-padding
35+
);
1736
@include mdc-chip-theme.with-graphic-horizontal-padding(
1837
mdc-chip-theme.$graphic-leading-padding,
1938
mdc-chip-theme.$graphic-trailing-padding,
20-
mdc-chip-theme.$trailing-padding);
39+
mdc-chip-theme.$trailing-padding
40+
);
2141
@include mdc-chip-theme.with-trailing-action-horizontal-padding(
2242
mdc-chip-theme.$leading-padding,
2343
mdc-chip-theme.$trailing-action-leading-padding,
24-
mdc-chip-theme.$trailing-action-trailing-padding);
44+
mdc-chip-theme.$trailing-action-trailing-padding
45+
);
2546
@include mdc-chip-theme.with-graphic-and-trailing-action-horizontal-padding(
2647
mdc-chip-theme.$graphic-leading-padding,
2748
mdc-chip-theme.$graphic-trailing-padding,
2849
mdc-chip-theme.$trailing-action-leading-padding,
29-
mdc-chip-theme.$trailing-action-trailing-padding);
50+
mdc-chip-theme.$trailing-action-trailing-padding
51+
);
3052

3153
// MDC has some code looking for a `with-icon-selected-disabled-icon-color` token for this
3254
// color, but the token isn't defined in the theme map so the validation throws an error.
@@ -48,62 +70,16 @@
4870
mdc-chip-theme.$trailing-action-leading-padding,
4971
mdc-chip-theme.$trailing-action-trailing-padding
5072
);
51-
@include mdc-chip-theme.graphic-size(mdc-chip-theme.$avatar-size);
52-
@include mdc-chip-theme.icon-size(mdc-chip-theme.$avatar-size);
5373
}
5474
}
5575

5676
@include mdc-helpers.disable-mdc-fallback-declarations {
57-
@include mdc-chip.static-styles();
5877
@include _missing-mdc-theme-styles();
5978
}
6079

6180
.mat-mdc-standard-chip {
6281
-webkit-tap-highlight-color: transparent;
6382

64-
@include mdc-helpers.disable-mdc-fallback-declarations {
65-
@include mdc-chip-theme.theme-styles((
66-
// Static tokens
67-
with-avatar-avatar-shape: (
68-
family: 'rounded',
69-
radius: (14px, 14px, 14px, 14px)
70-
),
71-
with-icon-icon-size: 18px,
72-
with-leading-icon-disabled-leading-icon-opacity: 0.38,
73-
with-leading-icon-leading-icon-size: 20px,
74-
with-trailing-icon-disabled-trailing-icon-opacity: 0.38,
75-
with-avatar-avatar-size: 28px,
76-
with-avatar-disabled-avatar-opacity: 0.38,
77-
with-icon-disabled-icon-opacity: 0.38,
78-
with-trailing-icon-trailing-icon-size: 18px,
79-
flat-disabled-outline-opacity: 0.12,
80-
flat-disabled-unselected-outline-opacity: 0.12,
81-
flat-selected-outline-width: 0,
82-
outline-width: 1px,
83-
flat-unselected-outline-width: 1px,
84-
flat-outline-width: 1px,
85-
disabled-label-text-opacity: 0.38,
86-
disabled-outline-opacity: 0.12,
87-
elevated-disabled-container-opacity: 0.12,
88-
container-height: 32px,
89-
container-shape: (
90-
family: 'rounded',
91-
radius: (16px, 16px, 16px, 16px)
92-
),
93-
94-
// Tokens that will be overwritten in the theme
95-
elevated-container-color: transparent,
96-
elevated-disabled-container-color: transparent,
97-
label-text-color: currentColor,
98-
disabled-label-text-color: currentColor,
99-
with-icon-icon-color: currentColor,
100-
with-icon-disabled-icon-color: currentColor,
101-
with-trailing-icon-disabled-trailing-icon-color: currentColor,
102-
with-trailing-icon-trailing-icon-color: currentColor,
103-
with-icon-selected-icon-color: currentColor,
104-
));
105-
}
106-
10783
@include cdk.high-contrast(active, off) {
10884
outline: solid 1px;
10985

@@ -153,7 +129,6 @@
153129
box-sizing: content-box;
154130
}
155131

156-
157132
&._mat-animation-noopable {
158133
&,
159134
.mdc-evolution-chip__graphic,

‎src/material/core/mdc-helpers/_mdc-helpers.scss

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ $mat-typography-mdc-level-mappings: (
100100

101101
// MDC logs a warning if the `contrast-tone` function is called with a CSS variable.
102102
// This function falls back to determining the tone based on whether the theme is light or dark.
103-
@function _variable-safe-contrast-tone($value, $is-dark) {
103+
@function variable-safe-contrast-tone($value, $is-dark) {
104104
@if ($value == 'dark' or $value == 'light' or type-of($value) == 'color') {
105105
@return mdc-theme-color.contrast-tone($value);
106106
}
@@ -109,7 +109,7 @@ $mat-typography-mdc-level-mappings: (
109109
}
110110

111111
@function _variable-safe-ink-color-for-fill($text-style, $fill-color, $is-dark) {
112-
$contrast-tone: _variable-safe-contrast-tone($fill-color, $is-dark);
112+
$contrast-tone: variable-safe-contrast-tone($fill-color, $is-dark);
113113
@return map.get(map.get(mdc-theme-color.$text-colors, $contrast-tone), $text-style);
114114
}
115115

@@ -137,17 +137,17 @@ $mat-typography-mdc-level-mappings: (
137137
// Set new values based on the given Angular Material theme.
138138
mdc-theme-color.$primary: $primary;
139139
mdc-theme-color.$on-primary:
140-
if(_variable-safe-contrast-tone(mdc-theme-color.$primary, $is-dark) == 'dark', #000, #fff);
140+
if(variable-safe-contrast-tone(mdc-theme-color.$primary, $is-dark) == 'dark', #000, #fff);
141141
mdc-theme-color.$secondary: $accent;
142142
mdc-theme-color.$on-secondary:
143-
if(_variable-safe-contrast-tone(mdc-theme-color.$secondary, $is-dark) == 'dark', #000, #fff);
143+
if(variable-safe-contrast-tone(mdc-theme-color.$secondary, $is-dark) == 'dark', #000, #fff);
144144
mdc-theme-color.$background: theming.get-color-from-palette($background-palette, background);
145145
mdc-theme-color.$surface: theming.get-color-from-palette($background-palette, card);
146146
mdc-theme-color.$on-surface:
147-
if(_variable-safe-contrast-tone(mdc-theme-color.$surface, $is-dark) == 'dark', #000, #fff);
147+
if(variable-safe-contrast-tone(mdc-theme-color.$surface, $is-dark) == 'dark', #000, #fff);
148148
mdc-theme-color.$error: $warn;
149149
mdc-theme-color.$on-error:
150-
if(_variable-safe-contrast-tone(mdc-theme-color.$error, $is-dark) == 'dark', #000, #fff);
150+
if(variable-safe-contrast-tone(mdc-theme-color.$error, $is-dark) == 'dark', #000, #fff);
151151
mdc-theme-color.$property-values: (
152152
// Primary
153153
primary: mdc-theme-color.$primary,

0 commit comments

Comments
 (0)