diff --git a/src/dev-app/theme-m3.scss b/src/dev-app/theme-m3.scss index be4c5c3b9b4c..5894110c28d7 100644 --- a/src/dev-app/theme-m3.scss +++ b/src/dev-app/theme-m3.scss @@ -39,6 +39,7 @@ html { @include mat.card-theme($light-theme); @include mat.checkbox-theme($light-theme); @include mat.form-field-theme($light-theme); + @include mat.icon-theme($light-theme); @include mat.input-theme($light-theme); @include mat.list-theme($light-theme); @include mat.progress-bar-theme($light-theme); @@ -66,6 +67,7 @@ html { @include mat.card-color($dark-theme); @include mat.checkbox-color($dark-theme); @include mat.form-field-color($dark-theme); + @include mat.icon-color($dark-theme); @include mat.input-color($dark-theme); @include mat.list-color($dark-theme); @include mat.progress-bar-color($dark-theme); @@ -92,6 +94,7 @@ html { @include mat.card-density($scale-theme); @include mat.checkbox-density($scale-theme); @include mat.form-field-density($scale-theme); + @include mat.icon-density($scale-theme); @include mat.input-density($scale-theme); @include mat.list-density($scale-theme); @include mat.progress-bar-density($scale-theme); diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss index 15566ea32c5c..21c2df88d2ca 100644 --- a/src/material-experimental/theming/_custom-tokens.scss +++ b/src/material-experimental/theming/_custom-tokens.scss @@ -62,6 +62,16 @@ ); } +/// Generates custom tokens for the mat-icon. +/// @param {Map} $systems The MDC system tokens +/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values +/// @return {Map} A set of custom tokens for the mat-icon +@function icon($systems, $exclude-hardcoded) { + @return ( + color: _hardcode(inherit, $exclude-hardcoded), + ); +} + /// Generates custom tokens for the mat-toolbar. /// @param {Map} $systems The MDC system tokens /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values diff --git a/src/material-experimental/theming/_m3-density.scss b/src/material-experimental/theming/_m3-density.scss index 7646858494be..44656f2c5cfc 100644 --- a/src/material-experimental/theming/_m3-density.scss +++ b/src/material-experimental/theming/_m3-density.scss @@ -45,6 +45,7 @@ $_density-tokens: ( // Custom Angular Material tokens (mat, card): (), (mat, form-fild): (), + (mat, icon): (), (mat, toolbar): ( standard-height: (64px, 60px, 56px, 52px), mobile-height: (56px, 52px, 48px, 44px), diff --git a/src/material-experimental/theming/_m3-tokens.scss b/src/material-experimental/theming/_m3-tokens.scss index 2d51ed1dd2fc..f9f15667e34a 100644 --- a/src/material-experimental/theming/_m3-tokens.scss +++ b/src/material-experimental/theming/_m3-tokens.scss @@ -259,6 +259,11 @@ custom-tokens.form-field($systems, $exclude-hardcoded), $token-slots ), + _namespace-tokens( + (mat, icon), + custom-tokens.icon($systems, $exclude-hardcoded), + $token-slots + ), _namespace-tokens( (mat, toolbar), custom-tokens.toolbar($systems, $exclude-hardcoded), diff --git a/src/material/core/tokens/m2/_index.scss b/src/material/core/tokens/m2/_index.scss index 0b8a09421c5a..25344c6d71a4 100644 --- a/src/material/core/tokens/m2/_index.scss +++ b/src/material/core/tokens/m2/_index.scss @@ -3,6 +3,7 @@ @use '../../style/sass-utils'; @use './mat/card' as tokens-mat-card; @use './mat/form-field' as tokens-mat-form-field; +@use './mat/icon' as tokens-mat-icon; @use './mat/radio' as tokens-mat-radio; @use './mat/ripple' as tokens-mat-ripple; @use './mat/slide-toggle' as tokens-mat-slide-toggle; @@ -78,6 +79,7 @@ @return sass-utils.deep-merge-all( _get-tokens-for-module($theme, tokens-mat-card), _get-tokens-for-module($theme, tokens-mat-form-field), + _get-tokens-for-module($theme, tokens-mat-icon), _get-tokens-for-module($theme, tokens-mat-radio), _get-tokens-for-module($theme, tokens-mat-ripple), _get-tokens-for-module($theme, tokens-mat-slide-toggle), diff --git a/src/material/icon/_icon-theme.scss b/src/material/icon/_icon-theme.scss index a7b9a3750a2b..f239c29ef346 100644 --- a/src/material/icon/_icon-theme.scss +++ b/src/material/icon/_icon-theme.scss @@ -1,3 +1,4 @@ +@use 'sass:map'; @use '../core/theming/theming'; @use '../core/theming/inspection'; @use '../core/tokens/m2/mat/icon' as tokens-mat-icon; @@ -10,45 +11,76 @@ @include token-utils.create-token-values(tokens-mat-icon.$prefix, $tokens); } -@mixin base($theme) {} +@mixin base($theme) { + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); + } + @else {} +} @mixin color($theme) { - @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-icon.$prefix, - tokens-mat-icon.get-color-tokens($theme)); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); } - - .mat-icon { - &.mat-primary { - @include _palette-colors($theme, primary); + @else { + @include sass-utils.current-selector-or-root() { + @include token-utils.create-token-values(tokens-mat-icon.$prefix, + tokens-mat-icon.get-color-tokens($theme)); } - &.mat-accent { - @include _palette-colors($theme, accent); - } + .mat-icon { + &.mat-primary { + @include _palette-colors($theme, primary); + } + + &.mat-accent { + @include _palette-colors($theme, accent); + } - &.mat-warn { - @include _palette-colors($theme, warn); + &.mat-warn { + @include _palette-colors($theme, warn); + } } } } -@mixin typography($theme) {} +@mixin typography($theme) { + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); + } + @else {} +} -@mixin density($theme) {} +@mixin density($theme) { + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); + } + @else {} +} @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-icon') { - @include base($theme); - @if inspection.theme-has($theme, color) { - @include color($theme); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme)); } - @if inspection.theme-has($theme, density) { - @include density($theme); - } - @if inspection.theme-has($theme, typography) { - @include typography($theme); + @else { + @include base($theme); + @if inspection.theme-has($theme, color) { + @include color($theme); + } + @if inspection.theme-has($theme, density) { + @include density($theme); + } + @if inspection.theme-has($theme, typography) { + @include typography($theme); + } } } } +@mixin _theme-from-tokens($tokens) { + @if ($tokens != ()) { + @include token-utils.create-token-values( + tokens-mat-icon.$prefix, map.get($tokens, tokens-mat-icon.$prefix)); + } +}