Generate all M2 tokens from a theme object

Author: mmalerba

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

@@ -1,3 +1,5 @@
+@use '@angular/material' as mat;
+
 dev-app {
   &::before {
     content: 'Using experimental theming API';
@@ -12,3 +14,5 @@ dev-app {
     color: white;
   }
 }
+
+@debug 'Generated M2 tokens:' mat.m2-tokens-from-theme();

src/material/_index.scss

@@ -13,6 +13,7 @@
   define-legacy-typography-config, legacy-typography-hierarchy, typography-hierarchy;
 @forward './core/typography/typography-utils' show typography-level,
   font-size, line-height, font-weight, letter-spacing, font-family, font-shorthand;
+@forward './core/tokens/m2' show m2-tokens-from-theme;
 
 // Private/Internal
 @forward './core/density/private/all-density' show all-component-densities;

src/material/core/style/_sass-utils.scss

@@ -1,7 +1,19 @@
+@use 'sass:map';
+
 // Include content under the current selector (&) or the document root if there is no current
 // selector.
 @mixin current-selector-or-root($root: html) {
   @at-root #{& or $root} {
     @content;
   }
 }
+
+// A version of the standard `map.deep-merge` function that takes a variable number of arguments.
+// Each argument is deep-merged into the final result from left to right.
+@function deep-merge-all($maps...) {
+  $result: ();
+  @each $map in $maps {
+    $result: map.deep-merge($result, $map);
+  }
+  @return $result;
+}

src/material/core/tokens/_token-utils.scss

@@ -51,8 +51,7 @@ $_component-prefix: null;
 @mixin _configure-token-prefix($first, $rest...) {
   $_component-prefix: '' !global;
   @each $item in $rest {
-    $_component-prefix:
-        if($_component-prefix == '', $item, '#{$_component-prefix}-#{$item}') !global;
+    $_component-prefix: if($_component-prefix == '', $item, '#{$_component-prefix}-#{$item}') !global;
   }
   @include mdc-custom-properties.configure($varname-prefix: $first) {
     @content;
@@ -87,15 +86,6 @@ $_component-prefix: null;
   }
 }
 
-// Merges together a list of maps into a single map.
-@function merge-all($maps...) {
-  $result: ();
-  @each $map in $maps {
-    $result: map.merge($result, $map);
-  }
-  @return $result;
-}
-
 // MDC doesn't currently handle elevation tokens properly. As a temporary workaround we can combine
 // the elevation and shadow-color tokens into a full box-shadow and use it as the value for the
 // elevation token.

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

@@ -0,0 +1,84 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use '../../theming/palette';
+@use '../../theming/theming' as theming;
+@use '../../typography/all-typography';
+@use '../../style/sass-utils';
+
+@use './mat/card' as tokens-mat-card;
+@use './mat/radio' as tokens-mat-radio;
+@use './mat/snack-bar' as tokens-mat-snack-bar;
+@use './mat/tab-header' as tokens-mat-tab-header;
+@use './mat/tab-header-with-background' as tokens-mat-tab-header-with-background;
+@use './mdc/checkbox' as tokens-mdc-checkbox;
+@use './mdc/circular-progress' as tokens-mdc-circular-progress;
+@use './mdc/dialog' as tokens-mdc-dialog;
+@use './mdc/elevated-card' as tokens-mdc-elevated-card;
+@use './mdc/icon-button' as tokens-mdc-icon-button;
+@use './mdc/linear-progress' as tokens-mdc-linear-progress;
+@use './mdc/list' as tokens-mdc-list;
+@use './mdc/outlined-card' as tokens-mdc-outlined-card;
+@use './mdc/radio' as tokens-mdc-radio;
+@use './mdc/snack-bar' as tokens-mdc-snack-bar;
+@use './mdc/tab' as tokens-mdc-tab;
+@use './mdc/tab-indicator' as tokens-mdc-tab-indicator;
+
+// Gets the tokens for the given theme, m2 tokens module, and theming system.
+// Valid theming systems are: unthemable, color, typography, density.
+@function _get-tokens-for-module-and-system($theme, $module, $system) {
+  @if $system == unthemable {
+    @return meta.call(
+        meta.get-function(get-#{$system}-tokens, $module: $module));
+  }
+  @return meta.call(
+      meta.get-function(get-#{$system}-tokens, $module: $module), map.get($theme, $system));
+}
+
+// Gets the fully qualified tokens map for the given theme and m2 tokens module.
+@function _get-tokens-for-module($theme, $module) {
+  $tokens: sass-utils.deep-merge-all(
+      _get-tokens-for-module-and-system($theme, $module, unthemable),
+      _get-tokens-for-module-and-system($theme, $module, color),
+      _get-tokens-for-module-and-system($theme, $module, typography),
+      _get-tokens-for-module-and-system($theme, $module, density));
+  @return map.set((), map.get(meta.module-variables($module), prefix), $tokens);
+}
+
+// Gets the full set of m2 tokens for the given theme object. If parts of the theme are missing
+// (color, density, etc), defaults are used. Returned format:
+// (
+//   (fully, qualified, namespace): (
+//     token: value
+//   )
+// )
+@function m2-tokens-from-theme($theme: ()) {
+  $theme: map.merge((
+    color: theming.define-light-theme(
+        theming.define-palette(palette.$indigo-palette),
+        theming.define-palette(palette.$pink-palette),
+    ),
+    typography: all-typography.define-typography-config(),
+    density: 0
+  ), $theme);
+
+  @return sass-utils.deep-merge-all(
+      _get-tokens-for-module($theme, tokens-mat-card),
+      _get-tokens-for-module($theme, tokens-mat-radio),
+      _get-tokens-for-module($theme, tokens-mat-snack-bar),
+      _get-tokens-for-module($theme, tokens-mat-tab-header),
+      _get-tokens-for-module($theme, tokens-mat-tab-header-with-background),
+      _get-tokens-for-module($theme, tokens-mdc-checkbox),
+      _get-tokens-for-module($theme, tokens-mdc-circular-progress),
+      _get-tokens-for-module($theme, tokens-mdc-dialog),
+      _get-tokens-for-module($theme, tokens-mdc-elevated-card),
+      _get-tokens-for-module($theme, tokens-mdc-icon-button),
+      _get-tokens-for-module($theme, tokens-mdc-linear-progress),
+      _get-tokens-for-module($theme, tokens-mdc-list),
+      _get-tokens-for-module($theme, tokens-mdc-outlined-card),
+      _get-tokens-for-module($theme, tokens-mdc-radio),
+      _get-tokens-for-module($theme, tokens-mdc-snack-bar),
+      _get-tokens-for-module($theme, tokens-mdc-tab),
+      _get-tokens-for-module($theme, tokens-mdc-tab-indicator),
+  );
+}

src/material/core/tokens/m2/mat/_card.scss

@@ -2,6 +2,7 @@
 @use '../../token-utils';
 @use '../../../theming/theming';
 @use '../../../typography/typography-utils';
+@use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, card);
@@ -18,35 +19,35 @@ $prefix: (mat, card);
 
   @return (
     // Text color of the card's subtitle.
-      subtitle-text-color: theming.get-color-from-palette($foreground, secondary-text),
+    subtitle-text-color: theming.get-color-from-palette($foreground, secondary-text),
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($config) {
   @return (
     // Font family of the card's title.
-      title-text-font: typography-utils.font-family($config, headline-6)
+    title-text-font: typography-utils.font-family($config, headline-6)
           or typography-utils.font-family($config),
     // Line height of the card's title.
-      title-text-line-height: typography-utils.line-height($config, headline-6),
+    title-text-line-height: typography-utils.line-height($config, headline-6),
     // Font size of the card's title.
-      title-text-size: typography-utils.font-size($config, headline-6),
+    title-text-size: typography-utils.font-size($config, headline-6),
     // Letter spacing of the card's title.
-      title-text-tracking: typography-utils.letter-spacing($config, headline-6),
+    title-text-tracking: typography-utils.letter-spacing($config, headline-6),
     // Font weight of the card's title.
-      title-text-weight: typography-utils.font-weight($config, headline-6),
+    title-text-weight: typography-utils.font-weight($config, headline-6),
     // Font family of the card's subtitle.
-      subtitle-text-font: typography-utils.font-family($config, subtitle-2)
+    subtitle-text-font: typography-utils.font-family($config, subtitle-2)
           or typography-utils.font-family($config),
     // Line height of the card's subtitle.
-      subtitle-text-line-height: typography-utils.line-height($config, subtitle-2),
+    subtitle-text-line-height: typography-utils.line-height($config, subtitle-2),
     // Font size of the card's subtitle.
-      subtitle-text-size: typography-utils.font-size($config, subtitle-2),
+    subtitle-text-size: typography-utils.font-size($config, subtitle-2),
     // Letter spacing of the card's subtitle.
-      subtitle-text-tracking: typography-utils.letter-spacing($config, subtitle-2),
+    subtitle-text-tracking: typography-utils.letter-spacing($config, subtitle-2),
     // Font weight of the card's subtitle.
-      subtitle-text-weight: typography-utils.font-weight($config, subtitle-2),
+    subtitle-text-weight: typography-utils.font-weight($config, subtitle-2),
   );
 }
 
@@ -58,10 +59,10 @@ $prefix: (mat, card);
 // Combines the tokens generated by the above functions into a single map with placeholder values.
 // This is used to create token slots.
 @function get-token-slots() {
-  @return token-utils.merge-all(
-          get-unthemable-tokens(),
-          get-color-tokens(token-utils.$placeholder-color-config),
-          get-typography-tokens(token-utils.$placeholder-typography-config),
-          get-density-tokens(token-utils.$placeholder-density-config)
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
   );
 }

src/material/core/tokens/m2/mat/_radio.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../../token-utils';
 @use '../../../theming/theming';
+@use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, radio);
@@ -37,10 +38,10 @@ $prefix: (mat, radio);
 // Combines the tokens generated by the above functions into a single map with placeholder values.
 // This is used to create token slots.
 @function get-token-slots() {
-  @return token-utils.merge-all(
-          get-unthemable-tokens(),
-          get-color-tokens(token-utils.$placeholder-color-config),
-          get-typography-tokens(token-utils.$placeholder-typography-config),
-          get-density-tokens(token-utils.$placeholder-density-config)
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
   );
 }

src/material/core/tokens/m2/mat/_snack-bar.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../../token-utils';
 @use '../../../theming/theming';
+@use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, snack-bar);
@@ -34,10 +35,10 @@ $prefix: (mat, snack-bar);
 // Combines the tokens generated by the above functions into a single map with placeholder values.
 // This is used to create token slots.
 @function get-token-slots() {
-  @return token-utils.merge-all(
-          get-unthemable-tokens(),
-          get-color-tokens(token-utils.$placeholder-color-config),
-          get-typography-tokens(token-utils.$placeholder-typography-config),
-          get-density-tokens(token-utils.$placeholder-density-config)
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
   );
 }

src/material/core/tokens/m2/mat/_tab-header-with-background.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../../token-utils';
 @use '../../../theming/theming';
+@use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, tab-header-with-background);
@@ -34,10 +35,10 @@ $prefix: (mat, tab-header-with-background);
 // Combines the tokens generated by the above functions into a single map with placeholder values.
 // This is used to create token slots.
 @function get-token-slots() {
-  @return token-utils.merge-all(
-          get-unthemable-tokens(),
-          get-color-tokens(token-utils.$placeholder-color-config),
-          get-typography-tokens(token-utils.$placeholder-typography-config),
-          get-density-tokens(token-utils.$placeholder-density-config)
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
   );
 }

src/material/core/tokens/m2/mat/_tab-header.scss

@@ -2,6 +2,7 @@
 @use '../../token-utils';
 @use '../../../theming/theming';
 @use '../../../typography/typography-utils';
+@use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, tab-header);
@@ -62,7 +63,7 @@ $prefix: (mat, tab-header);
 // Combines the tokens generated by the above functions into a single map with placeholder values.
 // This is used to create token slots.
 @function get-token-slots() {
-  @return token-utils.merge-all(
+  @return sass-utils.deep-merge-all(
           get-unthemable-tokens(),
           get-color-tokens(token-utils.$placeholder-color-config),
           get-typography-tokens(token-utils.$placeholder-typography-config),