fix(material-experimental/theming): set up core theme and app tokens (#…

…28431)

* Sets up the `core` theme for tokens.
* Adds the app-level tokens.

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);

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

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),

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);
+}

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),