refactor(cdk/a11y): Refactor focus indicator theme mixins to match other theme mixins (#22427)

refactor(cdk/a11y): Fix lint warnings

cdk(refactor/a11y): Fix lint warnings

Author: zelliott

src/dev-app/theme.scss

@@ -65,7 +65,7 @@ $candy-app-theme: mat.define-light-theme((
   @include mdc-slider-theme.color($dark-colors);
 
   // Include the dark theme colors for focus indicators.
-  .demo-strong-focus {
+  &.demo-strong-focus {
     @include mat.strong-focus-indicators-color($dark-colors);
     @include experimental.mdc-strong-focus-indicators-color($dark-colors);
   }

src/material-experimental/mdc-helpers/_focus-indicators-theme.scss

@@ -1,48 +1,21 @@
-@use 'sass:meta';
 @use 'sass:map';
 @use '../../material/core/theming/theming';
 
-// Mixin that applies the border color for the focus indicators.
-@mixin _border-color($color) {
-  .mat-mdc-focus-indicator::before {
-    border-color: $color;
-  }
-}
-
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
   $border-color: theming.get-color-from-palette(map.get($config, primary));
-  @include _border-color($border-color);
-}
 
-/// Mixin that sets the color of the focus indicators.
-///
-/// @param {color|map} $theme-or-color
-///   If theme, focus indicators are set to the primary color of the theme. If
-///   color, focus indicators are set to that color.
-///
-/// @example
-///   .demo-dark-theme {
-///     @include mat-mdc-strong-focus-indicators-theme($dark-theme-map);
-///   }
-///
-/// @example
-///   .demo-red-theme {
-///     @include mat-mdc-strong-focus-indicators-theme(#f00);
-///   }
-// stylelint-disable-next-line material/theme-mixin-api
-@mixin theme($theme-or-color) {
-  @if meta.type-of($theme-or-color) != 'map' {
-    @include _border-color($theme-or-color);
+  .mat-mdc-focus-indicator::before {
+    border-color: $border-color;
   }
-  @else {
-    $theme: theming.private-legacy-get-theme($theme-or-color);
-    @include theming.private-check-duplicate-theme-styles($theme,
-      'mat-mdc-strong-focus-indicators') {
-      $color: theming.get-color-config($theme);
-      @if $color != null {
-        @include color($color);
-      }
+}
+
+@mixin theme($theme-or-color-config) {
+  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-focus-indicators') {
+    $color: theming.get-color-config($theme);
+    @if $color != null {
+      @include color($color);
     }
   }
 }

src/material-experimental/mdc-helpers/_focus-indicators.import.scss

@@ -1,7 +1,7 @@
 @forward '../../material/core/focus-indicators/focus-indicators.import';
 @forward 'focus-indicators' hide strong-focus-indicators;
 @forward 'focus-indicators-theme' hide color, theme;
-@forward 'focus-indicators' as mat-mdc-* hide mat-mdc-strong-focus-indicators-border-color;
+@forward 'focus-indicators' as mat-mdc-*;
 @forward 'focus-indicators-theme' as mat-mdc-strong-focus-indicators-*;
 
 @import '../../material/core/theming/theming';

src/material/core/focus-indicators/_focus-indicators-theme.scss

@@ -1,47 +1,21 @@
-@use 'sass:meta';
 @use 'sass:map';
 @use '../theming/theming';
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
   $border-color: theming.get-color-from-palette(map.get($config, primary));
-  @include _border-color($border-color);
-}
 
-/// Mixin that sets the color of the focus indicators.
-///
-/// @param {color|map} $theme-or-color
-///   If theme, focus indicators are set to the primary color of the theme. If
-///   color, focus indicators are set to that color.
-///
-/// @example
-///   .demo-dark-theme {
-///     @include mat-strong-focus-indicators-theme($dark-theme-map);
-///   }
-///
-/// @example
-///   .demo-red-theme {
-///     @include mat-strong-focus-indicators-theme(#f00);
-///   }
-// stylelint-disable-next-line material/theme-mixin-api
-@mixin theme($theme-or-color) {
-  @if meta.type-of($theme-or-color) != 'map' {
-    @include _border-color($theme-or-color);
-  }
-  @else {
-    $theme: theming.private-legacy-get-theme($theme-or-color);
-    @include theming.private-check-duplicate-theme-styles($theme, 'mat-strong-focus-indicators') {
-      $color: theming.get-color-config($theme);
-      @if $color != null {
-        @include color($color);
-      }
-    }
+  .mat-focus-indicator::before {
+    border-color: $border-color;
   }
 }
 
-// Mixin that applies the border color for the focus indicators.
-@mixin _border-color($color) {
-  .mat-focus-indicator::before {
-    border-color: $color;
+@mixin theme($theme-or-color-config) {
+  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+  @include theming.private-check-duplicate-theme-styles($theme, 'mat-focus-indicators') {
+    $color: theming.get-color-config($theme);
+    @if $color != null {
+      @include color($color);
+    }
   }
 }

src/material/core/focus-indicators/_focus-indicators.import.scss

@@ -15,7 +15,7 @@ $mat-white-6-opacity, $mat-white-87-opacity;
 @forward 'focus-indicators' hide private-strong-focus-indicators-positioning,
 strong-focus-indicators;
 @forward 'focus-indicators-theme' hide color, theme;
-@forward 'focus-indicators' as mat-* hide mat-strong-focus-indicators-border-color;
+@forward 'focus-indicators' as mat-*;
 @forward 'focus-indicators-theme' as mat-strong-focus-indicators-*;
 
 @import '../theming/theming';