diff --git a/src/dev-app/theme-m3.scss b/src/dev-app/theme-m3.scss index 060739a8f05d..7c96c85e36e0 100644 --- a/src/dev-app/theme-m3.scss +++ b/src/dev-app/theme-m3.scss @@ -96,6 +96,7 @@ html { @include mat.card-theme($light-theme); @include mat.checkbox-theme($light-theme); @include mat.chips-theme($light-theme); + @include mat.core-theme($light-theme); @include mat.datepicker-theme($light-theme); @include mat.dialog-theme($light-theme); @include mat.divider-theme($light-theme); @@ -108,14 +109,10 @@ html { @include mat.input-theme($light-theme); @include mat.list-theme($light-theme); @include mat.menu-theme($light-theme); - @include mat.optgroup-theme($light-theme); - @include mat.option-theme($light-theme); @include mat.paginator-theme($light-theme); - @include mat.pseudo-checkbox-theme($light-theme); @include mat.progress-bar-theme($light-theme); @include mat.progress-spinner-theme($light-theme); @include mat.radio-theme($light-theme); - @include mat.ripple-theme($light-theme); @include mat.select-theme($light-theme); @include mat.sidenav-theme($light-theme); @include mat.slide-toggle-theme($light-theme); @@ -146,6 +143,7 @@ html { @include mat.card-color($dark-theme); @include mat.checkbox-color($dark-theme); @include mat.chips-color($dark-theme); + @include mat.core-color($dark-theme); @include mat.datepicker-color($dark-theme); @include mat.dialog-color($dark-theme); @include mat.divider-color($dark-theme); @@ -158,14 +156,10 @@ html { @include mat.input-color($dark-theme); @include mat.list-color($dark-theme); @include mat.menu-color($dark-theme); - @include mat.optgroup-color($dark-theme); - @include mat.option-color($dark-theme); @include mat.paginator-color($dark-theme); - @include mat.pseudo-checkbox-color($dark-theme); @include mat.progress-bar-color($dark-theme); @include mat.progress-spinner-color($dark-theme); @include mat.radio-color($dark-theme); - @include mat.ripple-color($dark-theme); @include mat.select-color($dark-theme); @include mat.sidenav-color($dark-theme); @include mat.slide-toggle-color($dark-theme); @@ -195,6 +189,7 @@ html { @include mat.card-density($scale-theme); @include mat.checkbox-density($scale-theme); @include mat.chips-density($scale-theme); + @include mat.core-density($scale-theme); @include mat.datepicker-density($scale-theme); @include mat.dialog-density($scale-theme); @include mat.divider-density($scale-theme); @@ -207,10 +202,7 @@ html { @include mat.input-density($scale-theme); @include mat.list-density($scale-theme); @include mat.menu-density($scale-theme); - @include mat.optgroup-density($scale-theme); - @include mat.option-density($scale-theme); @include mat.paginator-density($scale-theme); - @include mat.pseudo-checkbox-density($scale-theme); @include mat.progress-bar-density($scale-theme); @include mat.progress-spinner-density($scale-theme); @include mat.radio-density($scale-theme); diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss index 086e0f35569a..21c0529e3582 100644 --- a/src/material-experimental/theming/_custom-tokens.scss +++ b/src/material-experimental/theming/_custom-tokens.scss @@ -31,6 +31,17 @@ ); } +/// Generates custom tokens for the app. +/// @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 app +@function app($systems, $exclude-hardcoded) { + @return ( + background-color: map.get($systems, md-sys-color, background), + text-color: map.get($systems, md-sys-color, on-background), + ); +} + /// Generates custom tokens for the mat-badge. /// @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-tokens.scss b/src/material-experimental/theming/_m3-tokens.scss index 699b80a7c520..80991713dad9 100644 --- a/src/material-experimental/theming/_m3-tokens.scss +++ b/src/material-experimental/theming/_m3-tokens.scss @@ -670,6 +670,11 @@ // Choose values for our made up tokens based on MDC system tokens or sensible hardcoded // values. + _namespace-tokens( + (mat, app), + custom-tokens.app($systems, $exclude-hardcoded), + $token-slots + ), _namespace-tokens( (mdc, tab-indicator), custom-tokens.tab-indicator($systems, $exclude-hardcoded), diff --git a/src/material/core/_core-theme.scss b/src/material/core/_core-theme.scss index 2b8f0bddeb37..8e6e23cf5862 100644 --- a/src/material/core/_core-theme.scss +++ b/src/material/core/_core-theme.scss @@ -10,37 +10,51 @@ @use './typography/typography'; @use './tokens/token-utils'; @use './tokens/m2/mat/app' as tokens-mat-app; +@use './tokens/m2/mat/ripple' as tokens-mat-ripple; +@use './tokens/m2/mat/option' as tokens-mat-option; +@use './tokens/m2/mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox; +@use './tokens/m2/mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox; @mixin base($theme) { - @include ripple-theme.base($theme); - @include option-theme.base($theme); - @include optgroup-theme.base($theme); - @include pseudo-checkbox-theme.base($theme); - // TODO(mmalerba): Move additional core base tokens here + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); + } + @else { + @include ripple-theme.base($theme); + @include option-theme.base($theme); + @include optgroup-theme.base($theme); + @include pseudo-checkbox-theme.base($theme); + } } @mixin color($theme) { - @include ripple-theme.color($theme); - @include option-theme.color($theme); - @include optgroup-theme.color($theme); - @include pseudo-checkbox-theme.color($theme); - @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-app.$prefix, - tokens-mat-app.get-color-tokens($theme)); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); } + @else { + @include ripple-theme.color($theme); + @include option-theme.color($theme); + @include optgroup-theme.color($theme); + @include pseudo-checkbox-theme.color($theme); + @include sass-utils.current-selector-or-root() { + @include token-utils.create-token-values(tokens-mat-app.$prefix, + tokens-mat-app.get-color-tokens($theme)); + } - // Provides external CSS classes for each elevation value. Each CSS class is formatted as - // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is - // elevated. - @for $zValue from 0 through 24 { - $selector: elevation.$prefix + $zValue; - // We need the `mat-mdc-elevation-specific`, because some MDC mixins - // come with elevation baked in and we don't have a way of removing it. - .#{$selector}, .mat-mdc-elevation-specific.#{$selector} { - @include private.private-theme-elevation($zValue, $theme); + // Provides external CSS classes for each elevation value. Each CSS class is formatted as + // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is + // elevated. + @for $zValue from 0 through 24 { + $selector: elevation.$prefix + $zValue; + // We need the `mat-mdc-elevation-specific`, because some MDC mixins + // come with elevation baked in and we don't have a way of removing it. + .#{$selector}, .mat-mdc-elevation-specific.#{$selector} { + @include private.private-theme-elevation($zValue, $theme); + } } } + // TODO(crisbeto): move this into the base. // Marker that is used to determine whether the user has added a theme to their page. @at-root { .mat-theme-loaded-marker { @@ -50,34 +64,67 @@ } @mixin typography($theme) { - @include option-theme.typography($theme); - @include optgroup-theme.typography($theme); - @include pseudo-checkbox-theme.typography($theme); - @include ripple-theme.typography($theme); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); + } + @else { + @include option-theme.typography($theme); + @include optgroup-theme.typography($theme); + @include pseudo-checkbox-theme.typography($theme); + @include ripple-theme.typography($theme); + } } @mixin density($theme) { - @include option-theme.density($theme); - @include optgroup-theme.density($theme); - @include pseudo-checkbox-theme.density($theme); - @include ripple-theme.density($theme); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); + } + @else { + @include option-theme.density($theme); + @include optgroup-theme.density($theme); + @include pseudo-checkbox-theme.density($theme); + @include ripple-theme.density($theme); + } } // Mixin that renders all of the core styles that depend on the theme. -@mixin theme($theme) { +@mixin theme($theme, $options...) { // Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that // there won't be multiple warnings. e.g. if `mat-core-theme` reports a warning, then // the imported themes (such as `mat-ripple-theme`) should not report again. @include theming.private-check-duplicate-theme-styles($theme, 'mat-core') { - @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), $options...); } - @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, $options...) { + $mat-app-tokens: token-utils.get-tokens-for($tokens, tokens-mat-app.$prefix, $options...); + $mat-ripple-tokens: token-utils.get-tokens-for($tokens, tokens-mat-ripple.$prefix, $options...); + $mat-option-tokens: token-utils.get-tokens-for($tokens, tokens-mat-option.$prefix, $options...); + $mat-full-pseudo-checkbox-tokens: token-utils.get-tokens-for($tokens, + tokens-mat-full-pseudo-checkbox.$prefix, $options...); + $mat-minimal-pseudo-checkbox-tokens: token-utils.get-tokens-for($tokens, + tokens-mat-minimal-pseudo-checkbox.$prefix, $options...); + + @include token-utils.create-token-values(tokens-mat-app.$prefix, $mat-app-tokens); + @include token-utils.create-token-values(tokens-mat-ripple.$prefix, $mat-ripple-tokens); + @include token-utils.create-token-values(tokens-mat-option.$prefix, $mat-option-tokens); + @include token-utils.create-token-values(tokens-mat-full-pseudo-checkbox.$prefix, + $mat-full-pseudo-checkbox-tokens); + @include token-utils.create-token-values(tokens-mat-minimal-pseudo-checkbox.$prefix, + $mat-minimal-pseudo-checkbox-tokens); +} diff --git a/src/material/core/tokens/m2/_index.scss b/src/material/core/tokens/m2/_index.scss index a8d2f393a7c6..cd725613d98e 100644 --- a/src/material/core/tokens/m2/_index.scss +++ b/src/material/core/tokens/m2/_index.scss @@ -1,6 +1,7 @@ @use 'sass:map'; @use 'sass:meta'; @use '../../style/sass-utils'; +@use './mat/app' as tokens-mat-app; @use './mat/autocomplete' as tokens-mat-autocomplete; @use './mat/badge' as tokens-mat-badge; @use './mat/text-button' as tokens-mat-text-button; @@ -107,6 +108,7 @@ /// ) @function m2-tokens-from-theme($theme) { @return sass-utils.deep-merge-all( + _get-tokens-for-module($theme, tokens-mat-app), _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),