Skip to content

Commit

Permalink
fix(material/radio): Apply tokens at mixin root
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
mmalerba committed Sep 29, 2023
1 parent 06559a0 commit ac8309d
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 4 deletions.
5 changes: 5 additions & 0 deletions src/material/list/_list-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,11 @@
@include mdc-list-theme.theme($mdc-list-density-tokens);
}

.mdc-list-item__start,
.mdc-list-item__end {
@include mdc-radio-theme.theme(tokens-mdc-radio.get-density-tokens($theme));
}

// TODO(mmalerba): This is added to maintain the same style MDC used prior to the token-based API,
// to avoid screenshot diffs. We should remove it in favor of following MDC's current style, or
// add custom tokens for it.
Expand Down
11 changes: 7 additions & 4 deletions src/material/radio/_radio-theme.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@use '@material/radio/radio' as mdc-radio;
@use '@material/radio/radio-theme' as mdc-radio-theme;
@use '@material/form-field' as mdc-form-field;
@use '../core/mdc-helpers/mdc-helpers';
@use '../core/style/sass-utils';
@use '../core/theming/theming';
@use '../core/theming/inspection';
@use '../core/tokens/token-utils';
Expand All @@ -10,7 +10,7 @@
@use '../core/tokens/m2/mat/radio' as tokens-mat-radio;

@mixin base($theme) {
.mat-mdc-radio-button {
@include sass-utils.current-selector-or-root() {
@include mdc-radio-theme.theme(tokens-mdc-radio.get-unthemable-tokens());
@include token-utils.create-token-values(
tokens-mat-radio.$prefix, tokens-mat-radio.get-unthemable-tokens());
Expand Down Expand Up @@ -46,8 +46,11 @@
}

@mixin typography($theme) {
.mat-mdc-radio-button {
@include sass-utils.current-selector-or-root() {
@include mdc-radio-theme.theme(tokens-mdc-radio.get-typography-tokens($theme));
}

.mat-mdc-radio-button {
@include mdc-helpers.using-mdc-typography($theme) {
@include mdc-form-field.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
}
Expand All @@ -57,7 +60,7 @@
@mixin density($theme) {
$density-scale: inspection.get-theme-density($theme);

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

Expand Down

0 comments on commit ac8309d

Please sign in to comment.