diff --git a/src/dev-app/theme-m3.scss b/src/dev-app/theme-m3.scss index 65602a67f536..6541edc561f9 100644 --- a/src/dev-app/theme-m3.scss +++ b/src/dev-app/theme-m3.scss @@ -38,6 +38,9 @@ $dark-theme: matx.define-theme(map.set($m3-base-config, color, theme-type, dark) // Emit default theme styles. html { + @include mat.autocomplete-theme($light-theme); + @include mat.badge-theme($light-theme); + @include mat.bottom-sheet-theme($light-theme); @include mat.card-theme($light-theme); @include mat.checkbox-theme($light-theme); @include mat.datepicker-theme($light-theme); @@ -79,6 +82,9 @@ html { background: black; color: white; + @include mat.autocomplete-color($dark-theme); + @include mat.badge-color($dark-theme); + @include mat.bottom-sheet-color($dark-theme); @include mat.card-color($dark-theme); @include mat.checkbox-color($dark-theme); @include mat.datepicker-color($dark-theme); @@ -119,6 +125,9 @@ html { $scale-theme: matx.define-theme(map.set($m3-base-config, density, scale, $scale)); .demo-density-#{$scale} { + @include mat.autocomplete-density($scale-theme); + @include mat.badge-density($scale-theme); + @include mat.bottom-sheet-density($scale-theme); @include mat.card-density($scale-theme); @include mat.checkbox-density($scale-theme); @include mat.datepicker-density($scale-theme); diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss index 0ceaa43caf8b..6bf6b6b0f4b5 100644 --- a/src/material-experimental/theming/_custom-tokens.scss +++ b/src/material-experimental/theming/_custom-tokens.scss @@ -21,6 +21,52 @@ @return $result; } +/// Generates custom tokens for the mat-autocomplete. +/// @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-autocomplete +@function autocomplete($systems, $exclude-hardcoded) { + @return ( + background-color: map.get($systems, md-sys-color, surface-container), + ); +} + +/// Generates custom tokens for the mat-badge. +/// @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-badge +@function badge($systems, $exclude-hardcoded) { + @return ( + background-color: map.get($systems, md-sys-color, error), + text-color: map.get($systems, md-sys-color, on-error), + disabled-state-background-color: mat.private-safe-color-change( + map.get($systems, md-sys-color, error), + $alpha: 0.38, + ), + disabled-state-text-color: map.get($systems, md-sys-color, on-error), + text-font: map.get($systems, md-sys-typescale, label-small-font), + text-size: map.get($systems, md-sys-typescale, label-small-size), + text-weight: map.get($systems, md-sys-typescale, label-small-weight), + small-size-text-size: _hardcode(0, $exclude-hardcoded), + large-size-text-size: map.get($systems, md-sys-typescale, label-small-size), + ); +} + +/// Generates custom tokens for the mat-bottom-sheet. +/// @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-bottom-sheet +@function bottom-sheet($systems, $exclude-hardcoded) { + @return mat.private-merge-all( + _generate-typography-tokens($systems, container-text, body-large), + ( + container-shape: _hardcode(28px, $exclude-hardcoded), + container-text-color: map.get($systems, md-sys-color, on-surface), + container-background-color: map.get($systems, md-sys-color, surface-container-low), + ), + ); +} + /// Generates custom tokens for the mat-card. /// @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 ab21b27f313b..796aa6f7a9f3 100644 --- a/src/material-experimental/theming/_m3-density.scss +++ b/src/material-experimental/theming/_m3-density.scss @@ -49,6 +49,9 @@ $_density-tokens: ( (mdc, tab-indicator): (), // Custom Angular Material tokens + (mat, autocomplete): (), + (mat, badge): (), + (mat, bottom-sheet): (), (mat, card): (), (mat, datepicker): (), (mat, divider): (), diff --git a/src/material-experimental/theming/_m3-tokens.scss b/src/material-experimental/theming/_m3-tokens.scss index bb52db78caf5..39dd2ee01dae 100644 --- a/src/material-experimental/theming/_m3-tokens.scss +++ b/src/material-experimental/theming/_m3-tokens.scss @@ -270,6 +270,21 @@ custom-tokens.tab-indicator($systems, $exclude-hardcoded), $token-slots ), + _namespace-tokens( + (mat, autocomplete), + custom-tokens.autocomplete($systems, $exclude-hardcoded), + $token-slots + ), + _namespace-tokens( + (mat, badge), + custom-tokens.badge($systems, $exclude-hardcoded), + $token-slots + ), + _namespace-tokens( + (mat, bottom-sheet), + custom-tokens.bottom-sheet($systems, $exclude-hardcoded), + $token-slots + ), _namespace-tokens( (mat, card), custom-tokens.card($systems, $exclude-hardcoded), diff --git a/src/material/autocomplete/_autocomplete-theme.scss b/src/material/autocomplete/_autocomplete-theme.scss index c006a56c9cff..44926b6c2478 100644 --- a/src/material/autocomplete/_autocomplete-theme.scss +++ b/src/material/autocomplete/_autocomplete-theme.scss @@ -1,3 +1,4 @@ +@use 'sass:map'; @use '../core/theming/theming'; @use '../core/theming/inspection'; @use '../core/typography/typography'; @@ -5,30 +6,62 @@ @use '../core/tokens/token-utils'; @use '../core/tokens/m2/mat/autocomplete' as tokens-mat-autocomplete; -@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-autocomplete.$prefix, - tokens-mat-autocomplete.get-color-tokens($theme)); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); + } + @else { + @include sass-utils.current-selector-or-root() { + @include token-utils.create-token-values(tokens-mat-autocomplete.$prefix, + tokens-mat-autocomplete.get-color-tokens($theme)); + } } } -@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-autocomplete') { - @include base($theme); - @if inspection.theme-has($theme, color) { - @include color($theme); - } - @if inspection.theme-has($theme, density) { - @include density($theme); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($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-autocomplete.$prefix, map.get($tokens, tokens-mat-autocomplete.$prefix)); + } +} diff --git a/src/material/badge/_badge-theme.scss b/src/material/badge/_badge-theme.scss index cc915424d614..7935e92577de 100644 --- a/src/material/badge/_badge-theme.scss +++ b/src/material/badge/_badge-theme.scss @@ -1,7 +1,7 @@ @use 'sass:color'; +@use 'sass:map'; @use 'sass:math'; @use '@angular/cdk'; - @use '../core/theming/theming'; @use '../core/theming/inspection'; @use '../core/typography/typography'; @@ -164,57 +164,89 @@ $_emit-fallback-vars: true; } } -@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-badge.$prefix, - tokens-mat-badge.get-color-tokens($theme)); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); } + @else { + @include sass-utils.current-selector-or-root() { + @include token-utils.create-token-values(tokens-mat-badge.$prefix, + tokens-mat-badge.get-color-tokens($theme)); + } - .mat-badge-accent { - @include token-utils.create-token-values(tokens-mat-badge.$prefix, - tokens-mat-badge.private-get-color-palette-color-tokens($theme, accent)); - } + .mat-badge-accent { + @include token-utils.create-token-values(tokens-mat-badge.$prefix, + tokens-mat-badge.private-get-color-palette-color-tokens($theme, accent)); + } - .mat-badge-warn { - @include token-utils.create-token-values(tokens-mat-badge.$prefix, - tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn)); + .mat-badge-warn { + @include token-utils.create-token-values(tokens-mat-badge.$prefix, + tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn)); + } } } @mixin typography($theme) { - @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-badge.$prefix, - tokens-mat-badge.get-typography-tokens($theme)); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); + } + @else { + @include sass-utils.current-selector-or-root() { + @include token-utils.create-token-values(tokens-mat-badge.$prefix, + tokens-mat-badge.get-typography-tokens($theme)); + } } } -@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-badge') { - // Try to reduce the number of times that the structural styles are emitted. - @if not $_badge-structure-emitted { - @include _badge-structure; - - // Only flip the flag if the mixin is included at the top level. Otherwise the first - // inclusion might be inside of a theme class which will exclude the structural styles - // from all other themes. - @if not & { - $_badge-structure-emitted: true !global; - } + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme)); } + @else { + // Try to reduce the number of times that the structural styles are emitted. + @if not $_badge-structure-emitted { + @include _badge-structure; + + // Only flip the flag if the mixin is included at the top level. Otherwise the first + // inclusion might be inside of a theme class which will exclude the structural styles + // from all other themes. + @if not & { + $_badge-structure-emitted: true !global; + } + } - @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); + @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-badge.$prefix, map.get($tokens, tokens-mat-badge.$prefix)); + } +} diff --git a/src/material/bottom-sheet/_bottom-sheet-theme.scss b/src/material/bottom-sheet/_bottom-sheet-theme.scss index f6f8f751aa41..48fe8ebc169a 100644 --- a/src/material/bottom-sheet/_bottom-sheet-theme.scss +++ b/src/material/bottom-sheet/_bottom-sheet-theme.scss @@ -1,3 +1,4 @@ +@use 'sass:map'; @use '../core/typography/typography'; @use '../core/theming/theming'; @use '../core/theming/inspection'; @@ -6,39 +7,71 @@ @use '../core/tokens/m2/mat/bottom-sheet' as tokens-mat-bottom-sheet; @mixin base($theme) { - @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( - tokens-mat-bottom-sheet.$prefix, tokens-mat-bottom-sheet.get-unthemable-tokens()); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); + } + @else { + @include sass-utils.current-selector-or-root() { + @include token-utils.create-token-values( + tokens-mat-bottom-sheet.$prefix, tokens-mat-bottom-sheet.get-unthemable-tokens()); + } } } @mixin color($theme) { - @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-bottom-sheet.$prefix, - tokens-mat-bottom-sheet.get-color-tokens($theme)); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); + } + @else { + @include sass-utils.current-selector-or-root() { + @include token-utils.create-token-values(tokens-mat-bottom-sheet.$prefix, + tokens-mat-bottom-sheet.get-color-tokens($theme)); + } } } @mixin typography($theme) { - @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-bottom-sheet.$prefix, - tokens-mat-bottom-sheet.get-typography-tokens($theme)); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); + } + @else { + @include sass-utils.current-selector-or-root() { + @include token-utils.create-token-values(tokens-mat-bottom-sheet.$prefix, + tokens-mat-bottom-sheet.get-typography-tokens($theme)); + } } } -@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-bottom-sheet') { - @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-bottom-sheet.$prefix, map.get($tokens, tokens-mat-bottom-sheet.$prefix)); + } +} diff --git a/src/material/core/tokens/m2/_index.scss b/src/material/core/tokens/m2/_index.scss index 827e9cdce6c9..347d27718526 100644 --- a/src/material/core/tokens/m2/_index.scss +++ b/src/material/core/tokens/m2/_index.scss @@ -1,6 +1,9 @@ @use 'sass:map'; @use 'sass:meta'; @use '../../style/sass-utils'; +@use './mat/autocomplete' as tokens-mat-autocomplete; +@use './mat/badge' as tokens-mat-badge; +@use './mat/bottom-sheet' as tokens-mat-bottom-sheet; @use './mat/card' as tokens-mat-card; @use './mat/datepicker' as tokens-mat-datepicker; @use './mat/divider' as tokens-mat-divider; @@ -91,6 +94,9 @@ /// ) @function m2-tokens-from-theme($theme) { @return sass-utils.deep-merge-all( + _get-tokens-for-module($theme, tokens-mat-autocomplete), + _get-tokens-for-module($theme, tokens-mat-badge), + _get-tokens-for-module($theme, tokens-mat-bottom-sheet), _get-tokens-for-module($theme, tokens-mat-card), _get-tokens-for-module($theme, tokens-mat-datepicker), _get-tokens-for-module($theme, tokens-mat-divider),