diff --git a/src/dev-app/theme.scss b/src/dev-app/theme.scss index a1ee46890e68..55444d37b6f3 100644 --- a/src/dev-app/theme.scss +++ b/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); } diff --git a/src/material-experimental/mdc-helpers/_focus-indicators-theme.scss b/src/material-experimental/mdc-helpers/_focus-indicators-theme.scss index 814b7314338c..83778e49105c 100644 --- a/src/material-experimental/mdc-helpers/_focus-indicators-theme.scss +++ b/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); } } } diff --git a/src/material-experimental/mdc-helpers/_focus-indicators.import.scss b/src/material-experimental/mdc-helpers/_focus-indicators.import.scss index d6294985d966..53129f199dd5 100644 --- a/src/material-experimental/mdc-helpers/_focus-indicators.import.scss +++ b/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'; diff --git a/src/material/core/focus-indicators/_focus-indicators-theme.scss b/src/material/core/focus-indicators/_focus-indicators-theme.scss index 66b6493fcce1..f55e3fe51a00 100644 --- a/src/material/core/focus-indicators/_focus-indicators-theme.scss +++ b/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); + } } } diff --git a/src/material/core/focus-indicators/_focus-indicators.import.scss b/src/material/core/focus-indicators/_focus-indicators.import.scss index 925efba952c9..6482e0959bf2 100644 --- a/src/material/core/focus-indicators/_focus-indicators.import.scss +++ b/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';