fix(material/core): Focus indicator theme and color mixins should accept a basic color as well. (#23016)

fix(core/material): Disable styelint for focus indicator theme mixins.

Author: zelliott

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

@@ -1,21 +1,37 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '../../material/core/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));
-
+@mixin _border-color($color) {
   .mat-mdc-focus-indicator::before {
-    border-color: $border-color;
+    border-color: $color;
+  }
+}
+
+// stylelint-disable-next-line material/theme-mixin-api
+@mixin color($config-or-theme-or-color) {
+  @if meta.type-of($config-or-theme-or-color) == 'color' {
+    @include _border-color($config-or-theme-or-color);
+  }
+  @else {
+    $config: theming.get-color-config($config-or-theme-or-color);
+    $border-color: theming.get-color-from-palette(map.get($config, primary));
+    @include _border-color($border-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);
+// stylelint-disable-next-line material/theme-mixin-api
+@mixin theme($theme-or-color-config-or-color) {
+  @if meta.type-of($theme-or-color-config-or-color) == 'color' {
+    @include _border-color($theme-or-color-config-or-color);
+  }
+  @else {
+    $theme: theming.private-legacy-get-theme($theme-or-color-config-or-color);
+    @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

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

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

@@ -1,21 +1,37 @@
 @use 'sass:map';
+@use 'sass:meta';
 @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));
-
+@mixin _border-color($color) {
   .mat-focus-indicator::before {
-    border-color: $border-color;
+    border-color: $color;
+  }
+}
+
+// stylelint-disable-next-line material/theme-mixin-api
+@mixin color($config-or-theme-or-color) {
+  @if meta.type-of($config-or-theme-or-color) == 'color' {
+    @include _border-color($config-or-theme-or-color);
+  }
+  @else {
+    $config: theming.get-color-config($config-or-theme-or-color);
+    $border-color: theming.get-color-from-palette(map.get($config, primary));
+    @include _border-color($border-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);
+// stylelint-disable-next-line material/theme-mixin-api
+@mixin theme($theme-or-color-config-or-color) {
+  @if meta.type-of($theme-or-color-config-or-color) == 'color' {
+    @include _border-color($theme-or-color-config-or-color);
+  }
+  @else {
+    $theme: theming.private-legacy-get-theme($theme-or-color-config-or-color);
+    @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

@@ -16,7 +16,8 @@ $mat-white-6-opacity, $mat-white-87-opacity;
 strong-focus-indicators;
 @forward 'focus-indicators-theme' hide color, theme;
 @forward 'focus-indicators' as mat-*;
-@forward 'focus-indicators-theme' as mat-strong-focus-indicators-*;
+@forward 'focus-indicators-theme' as mat-strong-focus-indicators-* hide
+mat-strong-focus-indicators-border-color;
 
 @import '../theming/theming';
 @import '../style/layout-common';