feat(material-experimental/theming): add M3 expansion support (#28159)

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.divider-theme($light-theme);
+  @include mat.expansion-theme($light-theme);
   @include mat.fab-theme($light-theme);
   @include mat.form-field-theme($light-theme);
   @include mat.grid-list-theme($light-theme);
@@ -76,6 +77,7 @@ html {
   @include mat.card-color($dark-theme);
   @include mat.checkbox-color($dark-theme);
   @include mat.divider-color($dark-theme);
+  @include mat.expansion-color($dark-theme);
   @include mat.fab-color($dark-theme);
   @include mat.form-field-color($dark-theme);
   @include mat.grid-list-color($dark-theme);
@@ -112,6 +114,7 @@ html {
     @include mat.card-density($scale-theme);
     @include mat.checkbox-density($scale-theme);
     @include mat.divider-density($scale-theme);
+    @include mat.expansion-density($scale-theme);
     @include mat.fab-density($scale-theme);
     @include mat.form-field-density($scale-theme);
     @include mat.grid-list-density($scale-theme);

src/material-experimental/theming/_custom-tokens.scss

@@ -46,6 +46,36 @@
   );
 }
 
+/// Generates custom tokens for the mat-expansion.
+/// @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-expansion
+@function expansion($systems, $exclude-hardcoded) {
+  @return mat.private-merge-all(
+    _generate-typography-tokens($systems, header-text, title-medium),
+    _generate-typography-tokens($systems, container-text, body-large),
+    (
+      container-shape: _hardcode(12px, $exclude-hardcoded),
+      container-background-color: map.get($systems, md-sys-color, surface),
+      container-text-color: map.get($systems, md-sys-color, on-surface),
+      actions-divider-color: map.get($systems, md-sys-color, outline-variant),
+      header-hover-state-layer-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, on-surface),
+        $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity)
+      ),
+      header-focus-state-layer-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, on-surface),
+        $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity)
+      ),
+      header-disabled-state-text-color: mat.private-safe-color-change(
+          map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+      header-text-color: map.get($systems, md-sys-color, on-surface),
+      header-description-color: map.get($systems, md-sys-color, on-surface-variant),
+      header-indicator-color: map.get($systems, md-sys-color, on-surface-variant),
+    )
+  );
+}
+
 /// Generates custom tokens for the mat-fab.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values

src/material-experimental/theming/_m3-density.scss

@@ -50,6 +50,10 @@ $_density-tokens: (
   // Custom Angular Material tokens
   (mat, card): (),
   (mat, divider): (),
+  (mat, expansion): (
+    header-collapsed-state-height: (48px, 44px, 40px, 36px),
+    header-expanded-state-height: (64px, 60px, 56px, 48px),
+  ),
   (mat, fab): (),
   (mat, form-fild): (),
   (mat, grid-list): (),

src/material-experimental/theming/_m3-tokens.scss

@@ -285,6 +285,11 @@
       custom-tokens.form-field($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mat, expansion),
+      custom-tokens.expansion($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       (mat, grid-list),
       custom-tokens.grid-list($systems, $exclude-hardcoded),

src/material/core/tokens/m2/_index.scss

@@ -3,6 +3,7 @@
 @use '../../style/sass-utils';
 @use './mat/card' as tokens-mat-card;
 @use './mat/divider' as tokens-mat-divider;
+@use './mat/expansion' as tokens-mat-expansion;
 @use './mat/fab' as tokens-mat-fab;
 @use './mat/form-field' as tokens-mat-form-field;
 @use './mat/grid-list' as tokens-mat-grid-list;
@@ -90,6 +91,7 @@
   @return sass-utils.deep-merge-all(
       _get-tokens-for-module($theme, tokens-mat-card),
       _get-tokens-for-module($theme, tokens-mat-divider),
+      _get-tokens-for-module($theme, tokens-mat-expansion),
       _get-tokens-for-module($theme, tokens-mat-fab),
       _get-tokens-for-module($theme, tokens-mat-form-field),
       _get-tokens-for-module($theme, tokens-mat-grid-list),

src/material/expansion/_expansion-theme.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
@@ -6,47 +7,80 @@
 @use '../core/tokens/m2/mat/expansion' as tokens-mat-expansion;
 
 @mixin base($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(
-        tokens-mat-expansion.$prefix, tokens-mat-expansion.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-expansion.$prefix, tokens-mat-expansion.get-unthemable-tokens());
+    }
   }
 }
 
 @mixin color($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-expansion.$prefix,
-      tokens-mat-expansion.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-expansion.$prefix,
+        tokens-mat-expansion.get-color-tokens($theme));
+    }
   }
 }
 
 @mixin typography($theme) {
-  // TODO(mmalerba): Stop calling this and resolve resulting screen diffs.
-  $theme: inspection.private-get-typography-back-compat-theme($theme);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  }
+  @else {
+    // TODO(mmalerba): Stop calling this and resolve resulting screen diffs.
+    $theme: inspection.private-get-typography-back-compat-theme($theme);
 
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-expansion.$prefix,
-      tokens-mat-expansion.get-typography-tokens($theme));
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-expansion.$prefix,
+        tokens-mat-expansion.get-typography-tokens($theme));
+    }
   }
 }
 
 @mixin density($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-expansion.$prefix,
-      tokens-mat-expansion.get-density-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-expansion.$prefix,
+        tokens-mat-expansion.get-density-tokens($theme));
+    }
   }
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-expansion') {
-    @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-expansion.$prefix, map.get($tokens, tokens-mat-expansion.$prefix));
+  }
+}