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

Author: andrewseguin

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,

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 {