feat(material-experimental/theming): add M3 sidenav support

Author: mmalerba

src/dev-app/theme-m3.scss

@@ -46,6 +46,7 @@ html {
   @include mat.progress-spinner-theme($light-theme);
   @include mat.radio-theme($light-theme);
   @include mat.ripple-theme($light-theme);
+  @include mat.sidenav-theme($light-theme);
   @include mat.slide-toggle-theme($light-theme);
   @include mat.slider-theme($light-theme);
   @include mat.snack-bar-theme($light-theme);
@@ -74,6 +75,7 @@ html {
   @include mat.progress-spinner-color($dark-theme);
   @include mat.radio-color($dark-theme);
   @include mat.ripple-color($dark-theme);
+  @include mat.sidenav-color($dark-theme);
   @include mat.slide-toggle-color($dark-theme);
   @include mat.slider-color($dark-theme);
   @include mat.snack-bar-color($dark-theme);
@@ -100,6 +102,7 @@ html {
     @include mat.progress-bar-density($scale-theme);
     @include mat.progress-spinner-density($scale-theme);
     @include mat.radio-density($scale-theme);
+    @include mat.sidenav-density($scale-theme);
     @include mat.slide-toggle-density($scale-theme);
     @include mat.slider-density($scale-theme);
     @include mat.snack-bar-density($scale-theme);

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

@@ -139,6 +139,23 @@
   );
 }
 
+/// Generates custom tokens for the mat-sidenav.
+/// @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-sidenav
+@function sidenav($systems, $exclude-hardcoded) {
+  @return (
+    container-shape: 16px,
+    container-divider-color: map.get($systems, md-sys-color, outline),
+    container-background-color: map.get($systems, md-sys-color, surface),
+    container-text-color: map.get($systems, md-sys-color, on-surface-variant),
+    content-background-color: _hardcode(inherit, $exclude-hardcoded),
+    content-text-color: _hardcode(inherit, $exclude-hardcoded),
+    scrim-color: mat.private-safe-color-change(
+        map.get($systems, md-ref-palette, neutral-variant20), $alpha: 0.4),
+  );
+}
+
 /// Generates custom tokens for the mat-sort.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values

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

@@ -54,6 +54,7 @@ $_density-tokens: (
   (mat, snack-bar): (),
   (mat, radio): (),
   (mat, ripple): (),
+  (mat, sidenav): (),
   (mat, slide-toggle): (),
   (mat, sort): (),
   (mat, stepper): (

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

@@ -269,6 +269,11 @@
       custom-tokens.grid-list($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mat, sidenav),
+      custom-tokens.sidenav($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       (mat, toolbar),
       custom-tokens.toolbar($systems, $exclude-hardcoded),
@@ -352,11 +357,11 @@
   $sys-color: if($type == dark,
     mdc-tokens.md-sys-color-values-dark($ref),
     mdc-tokens.md-sys-color-values-light($ref));
-  @return _generate-tokens((
+  @return _generate-tokens(map.merge($ref, (
     md-sys-color: $sys-color,
     md-sys-elevation: mdc-tokens.md-sys-elevation-values(),
     md-sys-state: mdc-tokens.md-sys-state-values(),
-  ));
+  )));
 }
 
 /// Generates a set of namespaced color tokens for all components.

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

@@ -6,6 +6,7 @@
 @use './mat/grid-list' as tokens-mat-grid-list;
 @use './mat/radio' as tokens-mat-radio;
 @use './mat/ripple' as tokens-mat-ripple;
+@use './mat/sidenav' as tokens-mat-sidenav;
 @use './mat/slide-toggle' as tokens-mat-slide-toggle;
 @use './mat/slider' as tokens-mat-slider;
 @use './mat/snack-bar' as tokens-mat-snack-bar;
@@ -82,6 +83,7 @@
       _get-tokens-for-module($theme, tokens-mat-grid-list),
       _get-tokens-for-module($theme, tokens-mat-radio),
       _get-tokens-for-module($theme, tokens-mat-ripple),
+      _get-tokens-for-module($theme, tokens-mat-sidenav),
       _get-tokens-for-module($theme, tokens-mat-slide-toggle),
       _get-tokens-for-module($theme, tokens-mat-slider),
       _get-tokens-for-module($theme, tokens-mat-snack-bar),

src/material/sidenav/_sidenav-theme.scss

@@ -1,38 +1,71 @@
+@use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/tokens/m2/mat/sidenav' as tokens-mat-sidenav;
 @use '../core/tokens/token-utils';
 @use '../core/style/sass-utils';
 
 @mixin base($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(
-        tokens-mat-sidenav.$prefix, tokens-mat-sidenav.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-sidenav.$prefix, tokens-mat-sidenav.get-unthemable-tokens());
+    }
   }
 }
 
 @mixin color($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-sidenav.$prefix,
-      tokens-mat-sidenav.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-sidenav.$prefix,
+        tokens-mat-sidenav.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-sidenav') {
-    @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-sidenav.$prefix, map.get($tokens, tokens-mat-sidenav.$prefix));
+  }
+}