Skip to content

Commit ac8309d

Browse files
committed
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.
1 parent 06559a0 commit ac8309d

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)