Skip to content

Commit dbd31de

Browse files
authored
fix(material/radio): Apply tokens at mixin root (#27864)
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.
1 parent 2745d1f commit dbd31de

File tree

2 files changed

+12
-4
lines changed

2 files changed

+12
-4
lines changed

src/material/list/_list-theme.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,11 @@
8383
@include mdc-list-theme.theme($mdc-list-density-tokens);
8484
}
8585

86+
.mdc-list-item__start,
87+
.mdc-list-item__end {
88+
@include mdc-radio-theme.theme(tokens-mdc-radio.get-density-tokens($theme));
89+
}
90+
8691
// TODO(mmalerba): This is added to maintain the same style MDC used prior to the token-based API,
8792
// to avoid screenshot diffs. We should remove it in favor of following MDC's current style, or
8893
// add custom tokens for it.

src/material/radio/_radio-theme.scss

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
@use '@material/radio/radio' as mdc-radio;
21
@use '@material/radio/radio-theme' as mdc-radio-theme;
32
@use '@material/form-field' as mdc-form-field;
43
@use '../core/mdc-helpers/mdc-helpers';
4+
@use '../core/style/sass-utils';
55
@use '../core/theming/theming';
66
@use '../core/theming/inspection';
77
@use '../core/tokens/token-utils';
@@ -10,7 +10,7 @@
1010
@use '../core/tokens/m2/mat/radio' as tokens-mat-radio;
1111

1212
@mixin base($theme) {
13-
.mat-mdc-radio-button {
13+
@include sass-utils.current-selector-or-root() {
1414
@include mdc-radio-theme.theme(tokens-mdc-radio.get-unthemable-tokens());
1515
@include token-utils.create-token-values(
1616
tokens-mat-radio.$prefix, tokens-mat-radio.get-unthemable-tokens());
@@ -46,8 +46,11 @@
4646
}
4747

4848
@mixin typography($theme) {
49-
.mat-mdc-radio-button {
49+
@include sass-utils.current-selector-or-root() {
5050
@include mdc-radio-theme.theme(tokens-mdc-radio.get-typography-tokens($theme));
51+
}
52+
53+
.mat-mdc-radio-button {
5154
@include mdc-helpers.using-mdc-typography($theme) {
5255
@include mdc-form-field.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
5356
}
@@ -57,7 +60,7 @@
5760
@mixin density($theme) {
5861
$density-scale: inspection.get-theme-density($theme);
5962

60-
.mat-mdc-radio-button .mdc-radio {
63+
@include sass-utils.current-selector-or-root() {
6164
@include mdc-radio-theme.theme(tokens-mdc-radio.get-density-tokens($theme));
6265
}
6366

0 commit comments

Comments
 (0)