Skip to content

Commit afc6b9d

Browse files
committed
fix(material/radio): use tokens for focused border color (#29716)
(cherry picked from commit e975bb9)
1 parent e3fdd44 commit afc6b9d

File tree

2 files changed

+8
-4
lines changed

2 files changed

+8
-4
lines changed

src/material/core/tokens/m2/mdc/_radio.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ $prefix: (mdc, radio);
3232
selected-hover-state-layer-opacity: null,
3333
selected-pressed-state-layer-color: null,
3434
selected-pressed-state-layer-opacity: null,
35-
unselected-focus-icon-color: null,
3635
unselected-focus-state-layer-color: null,
3736
unselected-focus-state-layer-opacity: null,
3837
unselected-hover-state-layer-color: null,
@@ -52,6 +51,7 @@ $prefix: (mdc, radio);
5251
disabled-selected-icon-color: inspection.get-theme-color($theme, foreground, icon, 1),
5352
disabled-unselected-icon-color: inspection.get-theme-color($theme, foreground, icon, 1),
5453
unselected-hover-icon-color: $icon-color,
54+
unselected-focus-icon-color: $icon-color,
5555
unselected-icon-color: inspection.get-theme-color($theme, foreground, icon, 0.54),
5656
unselected-pressed-icon-color: inspection.get-theme-color($theme, foreground, icon, 0.54),
5757
selected-focus-icon-color: $palette-color,

src/material/radio/radio.scss

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use '../core/tokens/m2/mat/radio' as tokens-mat-radio;
2+
@use '../core/tokens/m2/mdc/radio' as tokens-mdc-radio;
23
@use '../core/tokens/token-utils';
34
@use '../core/style/layout-common';
45
@use './radio-common';
@@ -59,12 +60,15 @@
5960

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

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

0 commit comments

Comments
 (0)