Skip to content

Commit

Permalink
fix(material/radio): use tokens for focused border color (#29716)
Browse files Browse the repository at this point in the history
(cherry picked from commit e975bb9)
  • Loading branch information
andrewseguin committed Oct 15, 2024
1 parent e3fdd44 commit afc6b9d
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 4 deletions.
2 changes: 1 addition & 1 deletion src/material/core/tokens/m2/mdc/_radio.scss
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@ $prefix: (mdc, radio);
selected-hover-state-layer-opacity: null,
selected-pressed-state-layer-color: null,
selected-pressed-state-layer-opacity: null,
unselected-focus-icon-color: null,
unselected-focus-state-layer-color: null,
unselected-focus-state-layer-opacity: null,
unselected-hover-state-layer-color: null,
Expand All @@ -52,6 +51,7 @@ $prefix: (mdc, radio);
disabled-selected-icon-color: inspection.get-theme-color($theme, foreground, icon, 1),
disabled-unselected-icon-color: inspection.get-theme-color($theme, foreground, icon, 1),
unselected-hover-icon-color: $icon-color,
unselected-focus-icon-color: $icon-color,
unselected-icon-color: inspection.get-theme-color($theme, foreground, icon, 0.54),
unselected-pressed-icon-color: inspection.get-theme-color($theme, foreground, icon, 0.54),
selected-focus-icon-color: $palette-color,
Expand Down
10 changes: 7 additions & 3 deletions src/material/radio/radio.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@use '../core/tokens/m2/mat/radio' as tokens-mat-radio;
@use '../core/tokens/m2/mdc/radio' as tokens-mdc-radio;
@use '../core/tokens/token-utils';
@use '../core/style/layout-common';
@use './radio-common';
Expand Down Expand Up @@ -59,12 +60,15 @@

// We don't inherit the border focus style from MDC since we don't use their ripple.
// Instead we need to replicate it here.
.mdc-radio .mdc-radio__native-control:focus:enabled:not(:checked) {
& ~ .mdc-radio__background .mdc-radio__outer-circle {
border-color: var(--mdc-radio-unselected-focus-icon-color, black);
@include token-utils.use-tokens(tokens-mdc-radio.$prefix, tokens-mdc-radio.get-token-slots()) {
.mdc-radio .mdc-radio__native-control:focus:enabled:not(:checked) {
& ~ .mdc-radio__background .mdc-radio__outer-circle {
@include token-utils.create-token-slot(border-color, unselected-focus-icon-color);
}
}
}


// For radios render the focus indicator when we know
// the hidden input is focused (slightly different for each control).
&.cdk-focused .mat-mdc-focus-indicator::before {
Expand Down

0 comments on commit afc6b9d

Please sign in to comment.