diff --git a/src/material/core/tokens/m2/mdc/_radio.scss b/src/material/core/tokens/m2/mdc/_radio.scss index 561ca0b97d44..b6b99277605c 100644 --- a/src/material/core/tokens/m2/mdc/_radio.scss +++ b/src/material/core/tokens/m2/mdc/_radio.scss @@ -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, @@ -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, diff --git a/src/material/radio/radio.scss b/src/material/radio/radio.scss index 0caf7b3f9b0d..a30c07154999 100644 --- a/src/material/radio/radio.scss +++ b/src/material/radio/radio.scss @@ -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'; @@ -60,12 +61,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-focus-indicator::before {