From 9f3e1eaf3f7f80c8af592d8d022ef21c7d67da87 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Tue, 10 Sep 2024 14:24:22 -0600 Subject: [PATCH] fix(material/radio): use tokens for focused border color --- src/material/core/tokens/m2/mdc/_radio.scss | 2 +- src/material/radio/radio.scss | 10 +++++++--- 2 files changed, 8 insertions(+), 4 deletions(-) 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 {