refactor(material-experimental/theming): Add M3 density support

M3 does not yet have systemized density. For now we'll just use the same
one from M2, based on the density scale of [0, -5].

Author: mmalerba

src/dev-app/theme-token-api.scss

@@ -1,6 +1,8 @@
+@use 'sass:map';
 @use '@angular/material' as mat;
 @use '@angular/material-experimental' as matx;
 
+// Add an indicator to make it clear that the app is styled with the experimental theming API.
 dev-app {
   &::before {
     content: 'Using experimental theming API';
@@ -16,23 +18,47 @@ dev-app {
   }
 }
 
-.demo-unicorn-dark-theme {
-  background: black;
-  color: white;
-}
-
+// Emit Angular Material core styles.
 @include mat.core();
 
-$m3-theme: matx.define-theme((
+// Base theme configuration for our M3 theme.
+$m3-base-config: (
   color: (
     primary: matx.$m3-green-palette
   ),
   typography: (
     brand-family: 'monospace'
   )
-));
+);
 
+// Our M3 light theme.
+$light-theme: matx.define-theme($m3-base-config);
+
+// Our M3 dark theme.
+$dark-theme: matx.define-theme(map.set($m3-base-config, color, theme-type, dark));
+
+// Emit default theme styles.
 html {
-  @include mat.checkbox-theme($m3-theme);
-  @include mat.card-theme($m3-theme);
+  @include mat.checkbox-theme($light-theme);
+  @include mat.card-theme($light-theme);
+}
+
+// Emit dark theme styles.
+.demo-unicorn-dark-theme {
+  // TODO(mmalerba): choose colors from the theming API.
+  background: black;
+  color: white;
+
+  @include mat.checkbox-color($dark-theme);
+  @include mat.card-color($dark-theme);
+}
+
+// Emit density styles for each scale.
+@each $scale in (maximum, 0, -1, -2, -3, minimum) {
+  $scale-theme: matx.define-theme(map.set($m3-base-config, density, scale, $scale));
+
+  .demo-density-#{$scale} {
+    @include mat.checkbox-density($scale-theme);
+    @include mat.card-density($scale-theme);
+  }
 }

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

@@ -0,0 +1,56 @@
+@use 'sass:list';
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+/// Maps namespaced tokens to per-density-scale values.
+/// This is used as a temporary solution for density, since Material Design currently does not have
+/// systemized density.
+/// Format:
+/// (
+///   (mdc, comp): (
+///     token: (<scale 0 value>, <scale -1 value>, <scale -2 value>, ...),
+///     ...
+///   ),
+///   ...
+/// )
+// TODO(mmalerba): Add density tokens for remaining components.
+$_density-tokens: (
+    (mdc, checkbox): (
+      state-layer-size: (40px, 36px, 32px, 28px),
+    ),
+    (mdc, elevated-card): (),
+    (mdc, outlined-card): (),
+    (mat, card): (),
+);
+
+/// Gets the value for the given density scale from the given set of density values.
+/// @param {List} $density-values The list of values for each density scale.
+/// @param {Number} $scale The density scale to get the value for.
+/// @return {*} The value for the given scale.
+@function _get-value-for-scale($density-values, $scale){
+  $scale: mat.private-clamp-density($scale, -1 * list.length($density-values) + 1);
+  $index: -$scale + 1;
+  @return list.nth($density-values, $index);
+}
+
+/// Gets a map of all density tokens for the given scale
+/// @param {Number} $scale The density scale
+/// @return {Map} Map of all fully qualified density tokens for the given scale.
+@function get-tokens-for-scale($scale) {
+  $result: ();
+  @each $namespace, $tokens in $_density-tokens {
+    @each $token, $density-values in $tokens {
+      $tokens: map.set($tokens, $token, _get-value-for-scale($density-values, $scale));
+    }
+    $result: map.set($result, $namespace, $tokens);
+  }
+  @return $result;
+}
+
+/// Checks whether the given token is systemized by Angular Material's made up density system.
+/// @param {List} $namespace The namespace of the token
+/// @param {String} $token The name of the token
+/// @return {Boolean} Whether the token is systemized by the density system
+@function is-systemized($namespace, $token) {
+  @return map.get($_density-tokens, $namespace, $token) != null;
+}

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

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 @use '@material/tokens/v0_161' as mdc-tokens;
+@use './m3-density';
 @use './m3-palettes';
 @use './custom-tokens';
 
@@ -166,7 +167,7 @@
   $token-slots: mat.m2-tokens-from-theme($fake-theme);
 
   // TODO(mmalerba): Fill in remaining tokens.
-  @return mat.private-merge-all(
+  $result: mat.private-merge-all(
       // Add the system color & typography tokens (so we can give users access via an API).
       (
           (mdc, theme): map.get($systems, md-sys-color),
@@ -196,6 +197,17 @@
           $token-slots
       ),
   );
+
+  // Strip out tokens that are systemized by our made up density system.
+  @each $namespace, $tokens in $result {
+    @each $token, $value in $tokens {
+      @if m3-density.is-systemized($namespace, $token) {
+        $tokens: map.remove($tokens, $token);
+      }
+    }
+    $result: map.set($result, $namespace, $tokens);
+  }
+  @return $result;
 }
 
 /// Generates a set of namespaced color tokens for all components.
@@ -239,8 +251,7 @@
 /// @param {String|Number} $scale The regular font-weight
 /// @return {Map} A map of namespaced density tokens
 @function generate-density-tokens($scale) {
-  // TODO(mmalerba): Implement density.
-  @return ();
+  @return m3-density.get-tokens-for-scale($scale);
 }
 
 /// Generates a set of namespaced tokens not related to color, typography, or density for all

src/material/_index.scss

@@ -3,6 +3,7 @@
   define-palette, get-contrast-color-from-palette, get-color-from-palette,
   get-color-config, get-typography-config, get-density-config,
   $theme-ignore-duplication-warnings;
+@forward './core/theming/theming' as private-* show private-clamp-density;
 @forward './core/theming/palette' show $red-palette, $pink-palette, $indigo-palette,
   $purple-palette, $deep-purple-palette, $blue-palette, $light-blue-palette, $cyan-palette,
   $teal-palette, $green-palette, $light-green-palette, $lime-palette, $yellow-palette,