Skip to content

Commit 2f958ac

Browse files
mmalerbammalerba
authored
feat(material-experimental/theming): add M3 radio support (#27867)
* fix(material/radio): Apply tokens at mixin root Applies radio tokens at the theme mixin's root selector (or html if the mixin is called with no selector). This makes it easier for users to override tokens without worrying about specificity. * feat(material-experimental/theming): add M3 radio support
1 parent 75029c2 commit 2f958ac

File tree

5 files changed

+105
-44
lines changed

5 files changed

+105
-44
lines changed

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ html {
4343
@include mat.slider-theme($light-theme);
4444
@include mat.snack-bar-theme($light-theme);
4545
@include mat.progress-spinner-theme($light-theme);
46+
@include mat.radio-theme($light-theme);
4647
}
4748

4849
// Emit dark theme styles.
@@ -58,6 +59,7 @@ html {
5859
@include mat.slider-color($dark-theme);
5960
@include mat.snack-bar-color($dark-theme);
6061
@include mat.progress-spinner-color($dark-theme);
62+
@include mat.radio-color($dark-theme);
6163
}
6264

6365
// Emit density styles for each scale.
@@ -72,5 +74,6 @@ html {
7274
@include mat.slider-density($scale-theme);
7375
@include mat.snack-bar-density($scale-theme);
7476
@include mat.progress-spinner-density($scale-theme);
77+
@include mat.radio-density($scale-theme);
7578
}
7679
}

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,3 +63,11 @@
6363
button-color: map.get($systems, md-sys-color, inverse-primary),
6464
);
6565
}
66+
67+
@function radio($systems, $exclude-hardcoded) {
68+
@return (
69+
ripple-color: map.get($systems, md-sys-color, on-surface),
70+
checked-ripple-color: map.get($systems, md-sys-color, primary),
71+
disabled-label-color: map.get($systems, md-sys-color, on-surface),
72+
);
73+
}

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,25 @@
1515
/// )
1616
// TODO(mmalerba): Add density tokens for remaining components.
1717
$_density-tokens: (
18+
// MDC tokens
1819
(mdc, checkbox): (
1920
state-layer-size: (40px, 36px, 32px, 28px),
2021
),
2122
(mdc, elevated-card): (),
2223
(mdc, outlined-card): (),
2324
(mdc, slider): (),
24-
(mat, card): (),
2525
(mdc, plain-tooltip): (),
26+
(mdc, radio): (
27+
state-layer-size: (40px, 36px, 32px, 28px),
28+
),
29+
// Custom Angular Material tokens
30+
(mat, card): (),
2631
(mat, toolbar): (
2732
standard-height: (64px, 60px, 56px, 52px),
2833
mobile-height: (56px, 52px, 48px, 44px),
2934
),
3035
(mat, slider): (),
36+
(mat, radio): (),
3137
);
3238

3339
/// Gets the value for the given density scale from the given set of density values.

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,11 @@
208208
mdc-tokens.md-comp-circular-progress-indicator-values($systems, $exclude-hardcoded),
209209
$token-slots
210210
),
211+
_namespace-tokens(
212+
(mdc, radio),
213+
mdc-tokens.md-comp-radio-button-values($systems, $exclude-hardcoded),
214+
$token-slots
215+
),
211216
// Choose values for our made up tokens based on MDC system tokens or sensible hardcoded
212217
// values.
213218
_namespace-tokens(
@@ -230,6 +235,11 @@
230235
custom-tokens.snack-bar($systems, $exclude-hardcoded),
231236
$token-slots
232237
),
238+
_namespace-tokens(
239+
(mat, radio),
240+
custom-tokens.radio($systems, $exclude-hardcoded),
241+
$token-slots
242+
),
233243
);
234244

235245
// Strip out tokens that are systemized by our made up density system.

‎src/material/radio/_radio-theme.scss

Lines changed: 77 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use 'sass:map';
12
@use '@material/radio/radio-theme' as mdc-radio-theme;
23
@use '@material/form-field' as mdc-form-field;
34
@use '../core/mdc-helpers/mdc-helpers';
@@ -10,78 +11,111 @@
1011
@use '../core/tokens/m2/mat/radio' as tokens-mat-radio;
1112

1213
@mixin base($theme) {
13-
@include sass-utils.current-selector-or-root() {
14-
@include mdc-radio-theme.theme(tokens-mdc-radio.get-unthemable-tokens());
15-
@include token-utils.create-token-values(
16-
tokens-mat-radio.$prefix, tokens-mat-radio.get-unthemable-tokens());
14+
@if inspection.get-theme-version($theme) == 1 {
15+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
16+
}
17+
@else {
18+
@include sass-utils.current-selector-or-root() {
19+
@include mdc-radio-theme.theme(tokens-mdc-radio.get-unthemable-tokens());
20+
@include token-utils.create-token-values(
21+
tokens-mat-radio.$prefix, tokens-mat-radio.get-unthemable-tokens());
22+
}
1723
}
1824
}
1925

2026
@mixin color($theme) {
21-
@include mdc-helpers.using-mdc-theme($theme) {
22-
.mat-mdc-radio-button {
23-
@include mdc-form-field.core-styles($query: mdc-helpers.$mdc-theme-styles-query);
24-
}
27+
@if inspection.get-theme-version($theme) == 1 {
28+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
2529
}
26-
27-
.mat-mdc-radio-button {
28-
&.mat-primary {
29-
@include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, primary));
30-
@include token-utils.create-token-values(tokens-mat-radio.$prefix,
31-
tokens-mat-radio.get-color-tokens($theme, primary));
30+
@else {
31+
@include mdc-helpers.using-mdc-theme($theme) {
32+
.mat-mdc-radio-button {
33+
@include mdc-form-field.core-styles($query: mdc-helpers.$mdc-theme-styles-query);
34+
}
3235
}
3336

34-
&.mat-accent {
35-
@include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme));
36-
@include token-utils.create-token-values(tokens-mat-radio.$prefix,
37-
tokens-mat-radio.get-color-tokens($theme));
38-
}
37+
.mat-mdc-radio-button {
38+
&.mat-primary {
39+
@include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, primary));
40+
@include token-utils.create-token-values(tokens-mat-radio.$prefix,
41+
tokens-mat-radio.get-color-tokens($theme, primary));
42+
}
3943

40-
&.mat-warn {
41-
@include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, warn));
42-
@include token-utils.create-token-values(tokens-mat-radio.$prefix,
43-
tokens-mat-radio.get-color-tokens($theme, warn));
44+
&.mat-accent {
45+
@include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme));
46+
@include token-utils.create-token-values(tokens-mat-radio.$prefix,
47+
tokens-mat-radio.get-color-tokens($theme));
48+
}
49+
50+
&.mat-warn {
51+
@include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, warn));
52+
@include token-utils.create-token-values(tokens-mat-radio.$prefix,
53+
tokens-mat-radio.get-color-tokens($theme, warn));
54+
}
4455
}
4556
}
4657
}
4758

4859
@mixin typography($theme) {
49-
@include sass-utils.current-selector-or-root() {
50-
@include mdc-radio-theme.theme(tokens-mdc-radio.get-typography-tokens($theme));
60+
@if inspection.get-theme-version($theme) == 1 {
61+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
5162
}
63+
@else {
64+
@include sass-utils.current-selector-or-root() {
65+
@include mdc-radio-theme.theme(tokens-mdc-radio.get-typography-tokens($theme));
66+
}
5267

53-
.mat-mdc-radio-button {
54-
@include mdc-helpers.using-mdc-typography($theme) {
55-
@include mdc-form-field.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
68+
.mat-mdc-radio-button {
69+
@include mdc-helpers.using-mdc-typography($theme) {
70+
@include mdc-form-field.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
71+
}
5672
}
5773
}
5874
}
5975

6076
@mixin density($theme) {
61-
$density-scale: inspection.get-theme-density($theme);
62-
63-
@include sass-utils.current-selector-or-root() {
64-
@include mdc-radio-theme.theme(tokens-mdc-radio.get-density-tokens($theme));
77+
@if inspection.get-theme-version($theme) == 1 {
78+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
6579
}
80+
@else {
81+
$density-scale: inspection.get-theme-density($theme);
6682

67-
@include mdc-helpers.if-touch-targets-unsupported($density-scale) {
68-
.mat-mdc-radio-touch-target {
69-
display: none;
83+
@include sass-utils.current-selector-or-root() {
84+
@include mdc-radio-theme.theme(tokens-mdc-radio.get-density-tokens($theme));
85+
}
86+
87+
@include mdc-helpers.if-touch-targets-unsupported($density-scale) {
88+
.mat-mdc-radio-touch-target {
89+
display: none;
90+
}
7091
}
7192
}
7293
}
7394

7495
@mixin theme($theme) {
7596
@include theming.private-check-duplicate-theme-styles($theme, 'mat-radio') {
76-
@include base($theme);
77-
@if inspection.theme-has($theme, color) {
78-
@include color($theme);
79-
}
80-
@if inspection.theme-has($theme, density) {
81-
@include density($theme);
97+
@if inspection.get-theme-version($theme) == 1 {
98+
@include _theme-from-tokens(inspection.get-theme-tokens($theme));
8299
}
83-
@if inspection.theme-has($theme, typography) {
84-
@include typography($theme);
100+
@else {
101+
@include base($theme);
102+
@if inspection.theme-has($theme, color) {
103+
@include color($theme);
104+
}
105+
@if inspection.theme-has($theme, density) {
106+
@include density($theme);
107+
}
108+
@if inspection.theme-has($theme, typography) {
109+
@include typography($theme);
110+
}
85111
}
86112
}
87113
}
114+
115+
@mixin _theme-from-tokens($tokens) {
116+
@if ($tokens != ()) {
117+
@include mdc-radio-theme.theme(map.get($tokens, tokens-mdc-radio.$prefix));
118+
@include token-utils.create-token-values(
119+
tokens-mat-radio.$prefix, map.get($tokens, tokens-mat-radio.$prefix));
120+
}
121+
}

0 commit comments

Comments
 (0)