fix(material/radio): use tokens for focused border color (#29716)

angular · Oct 15, 2024 · e975bb9 · e975bb9
1 parent 3b4ade5
commit e975bb9
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git 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
@@ -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 {