Skip to content

Commit 222d09c

Browse files
mmalerbammalerba
committed
feat(material-experimental/theming): add M3 radio support
1 parent ae80455 commit 222d09c

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
@@ -42,6 +42,7 @@ html {
4242
@include mat.toolbar-theme($light-theme);
4343
@include mat.slider-theme($light-theme);
4444
@include mat.snack-bar-theme($light-theme);
45+
@include mat.radio-theme($light-theme);
4546
}
4647

4748
// Emit dark theme styles.
@@ -56,6 +57,7 @@ html {
5657
@include mat.toolbar-color($dark-theme);
5758
@include mat.slider-color($dark-theme);
5859
@include mat.snack-bar-color($dark-theme);
60+
@include mat.radio-color($dark-theme);
5961
}
6062

6163
// Emit density styles for each scale.
@@ -69,5 +71,6 @@ html {
6971
@include mat.toolbar-density($scale-theme);
7072
@include mat.slider-density($scale-theme);
7173
@include mat.snack-bar-density($scale-theme);
74+
@include mat.radio-density($scale-theme);
7275
}
7376
}

‎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
@@ -203,6 +203,11 @@
203203
mdc-tokens.md-comp-plain-tooltip-values($systems, $exclude-hardcoded),
204204
$token-slots
205205
),
206+
_namespace-tokens(
207+
(mdc, radio),
208+
mdc-tokens.md-comp-radio-button-values($systems, $exclude-hardcoded),
209+
$token-slots
210+
),
206211
// Choose values for our made up tokens based on MDC system tokens or sensible hardcoded
207212
// values.
208213
_namespace-tokens(
@@ -225,6 +230,11 @@
225230
custom-tokens.snack-bar($systems, $exclude-hardcoded),
226231
$token-slots
227232
),
233+
_namespace-tokens(
234+
(mat, radio),
235+
custom-tokens.radio($systems, $exclude-hardcoded),
236+
$token-slots
237+
),
228238
);
229239

230240
// 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));
1716
}
18-
}
19-
20-
@mixin color($theme) {
21-
@include mdc-helpers.using-mdc-theme($theme) {
17+
@else {
2218
@include sass-utils.current-selector-or-root() {
23-
@include mdc-form-field.core-styles($query: mdc-helpers.$mdc-theme-styles-query);
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());
2422
}
2523
}
24+
}
2625

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));
26+
@mixin color($theme) {
27+
@if inspection.get-theme-version($theme) == 1 {
28+
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
29+
}
30+
@else {
31+
@include mdc-helpers.using-mdc-theme($theme) {
32+
@include sass-utils.current-selector-or-root() {
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);
82+
83+
@include sass-utils.current-selector-or-root() {
84+
@include mdc-radio-theme.theme(tokens-mdc-radio.get-density-tokens($theme));
85+
}
6686

67-
@include mdc-helpers.if-touch-targets-unsupported($density-scale) {
68-
.mat-mdc-radio-touch-target {
69-
display: none;
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);
97+
@if inspection.get-theme-version($theme) == 1 {
98+
@include _theme-from-tokens(inspection.get-theme-tokens($theme));
7999
}
80-
@if inspection.theme-has($theme, density) {
81-
@include density($theme);
82-
}
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)