@angular/material 20.0.0-next.1 → 20.0.0-next.10

package/core/tokens/_m2-utils.scss

@@ -0,0 +1,109 @@
+@use '../m2/palette';
+@use '../m2/theming';
+@use '../m2/typography';
+@use 'sass:color';
+@use 'sass:math';
+@use 'sass:meta';
+
+$_placeholder-color-palette: theming.define-palette(palette.$red-palette);
+
+// Indicates whether we're building internally. Used for backwards compatibility.
+$private-is-internal-build: false;
+
+// Placeholder color config that can be passed to token getter functions when generating token
+// slots.
+$placeholder-color-config: (
+  primary: $_placeholder-color-palette,
+  accent: $_placeholder-color-palette,
+  warn: $_placeholder-color-palette,
+  is-dark: false,
+  foreground: palette.$light-theme-foreground-palette,
+  background: palette.$light-theme-background-palette,
+);
+
+$_placeholder-typography-level-config: typography.typography-config-level-from-mdc(body1);
+
+// Placeholder typography config that can be passed to token getter functions when generating token
+// slots.
+$placeholder-typography-config: (
+  font-family: 'Roboto, sans-serif',
+  headline-1: $_placeholder-typography-level-config,
+  headline-2: $_placeholder-typography-level-config,
+  headline-3: $_placeholder-typography-level-config,
+  headline-4: $_placeholder-typography-level-config,
+  headline-5: $_placeholder-typography-level-config,
+  headline-6: $_placeholder-typography-level-config,
+  subtitle-1: $_placeholder-typography-level-config,
+  subtitle-2: $_placeholder-typography-level-config,
+  body-1: $_placeholder-typography-level-config,
+  body-2: $_placeholder-typography-level-config,
+  caption: $_placeholder-typography-level-config,
+  button: $_placeholder-typography-level-config,
+  overline: $_placeholder-typography-level-config,
+  subheading-1: $_placeholder-typography-level-config,
+  title: $_placeholder-typography-level-config,
+);
+
+// Placeholder density config that can be passed to token getter functions when generating token
+// slots.
+$placeholder-density-config: 0;
+
+/// Inherited function from MDC that computes which contrast tone to use on top of a color.
+/// This is used only in a narrow set of use cases when generating M2 button tokens to maintain
+/// backwards compatibility.
+/// @param {Color} $value Color for which we're calculating the contrast tone.
+/// @param {Boolean} $is-dark Whether the current theme is dark.
+/// @return {Map} Either `dark` or `light`.
+@function contrast-tone($value, $is-dark) {
+  @if ($value == 'dark') {
+    @return 'light';
+  }
+
+  @if ($value == 'light') {
+    @return 'dark';
+  }
+
+  // Fallback if the app is using a non-color palette (e.g. CSS variable based).
+  @if (meta.type-of($value) != 'color') {
+    @return if($is-dark, 'light', 'dark');
+  }
+
+  $minimum-contrast: 3.1;
+  $light-contrast: _contrast($value, #fff);
+  $dark-contrast: _contrast($value, rgba(0, 0, 0, 0.87));
+
+  @if ($light-contrast < $minimum-contrast) and ($dark-contrast > $light-contrast) {
+    @return 'dark';
+  }
+
+  @return 'light';
+}
+
+@function _linear-channel-value($channel-value) {
+  $normalized-channel-value: math.div($channel-value, 255);
+
+  @if ($normalized-channel-value < 0.03928) {
+    @return math.div($normalized-channel-value, 12.92);
+  }
+
+  @return math.pow(math.div($normalized-channel-value + 0.055, 1.055), 2.4);
+}
+
+// Calculate the luminance for a color.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function _luminance($color) {
+  $red: _linear-channel-value(color.red($color));
+  $green: _linear-channel-value(color.green($color));
+  $blue: _linear-channel-value(color.blue($color));
+
+  @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
+}
+
+// Calculate the contrast ratio between two colors.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function _contrast($back, $front) {
+  $back-lum: _luminance($back) + 0.05;
+  $fore-lum: _luminance($front) + 0.05;
+
+  @return math.div(math.max($back-lum, $fore-lum), math.min($back-lum, $fore-lum));
+}

package/core/tokens/_m3-system.scss

@@ -1,12 +1,29 @@
+@use '../../button-toggle/m3-button-toggle';
+@use '../../button/m3-button';
+@use '../../button/m3-fab';
+@use '../../button/m3-icon-button';
+@use '../../checkbox/m3-checkbox';
+@use '../../chips/m3-chip';
+@use '../../expansion/m3-expansion';
+@use '../../form-field/m3-form-field';
+@use '../../list/m3-list';
+@use '../../paginator/m3-paginator';
+@use '../../radio/m3-radio';
+@use '../../select/m3-select';
+@use '../../stepper/m3-stepper';
+@use '../../table/m3-table';
+@use '../../tabs/m3-tabs';
+@use '../../toolbar/m3-toolbar';
+@use '../../tree/m3-tree';
 @use '../style/elevation';
 @use '../style/sass-utils';
 @use '../theming/config-validation';
 @use '../theming/definition';
-@use './m3/definitions';
+@use './m3';
+@use './m3-tokens';
+@use 'sass:list';
 @use 'sass:map';
 @use 'sass:meta';
-@use 'sass:list';
-@use './m3-tokens';
 
 /// Emits necessary CSS variables for Material's system level values for the values defined in the
 /// config map. The config map can have values color, typography, and/or density.
@@ -71,12 +88,12 @@
       definition.define-density((scale: $density)));
     $scale: map.get($density-config, _mat-theming-internals-do-not-access, density-scale);
     @if ($scale != 0) {
-      $all-tokens: m3-tokens.generate-density-tokens($scale);
-      @each $component-tokens in $all-tokens {
-        $namespace: list.nth($component-tokens, 1);
-        @each $tokens in list.nth($component-tokens, 2) {
-          --#{list.nth($namespace, 1)}-#{list.nth($namespace, 2)}-#{
-              list.nth($tokens, 1)}: #{list.nth($tokens, 2)};
+      // Emit component-level density tokens if the scale is lower than 0. The density tokens
+      // do not fallback to any system-level values and must be defined if the scale is different.
+      $density-tokens: get-density-tokens($scale);
+      @each $prefix, $tokens in $density-tokens {
+        @each $token-name, $token-value in $tokens {
+          --#{list.nth($prefix, 1)}-#{list.nth($prefix, 2)}-#{$token-name}: #{$token-value};
         }
       }
     }
@@ -86,15 +103,38 @@
   @include system-level-state($overrides: $overrides, $prefix: definition.$system-fallback-prefix);
 }
 
+// Gets all density-related tokens from the components.
+@function get-density-tokens($scale) {
+  @return (
+    m3-checkbox.$prefix: m3-checkbox.get-density-tokens($scale),
+    m3-chip.$prefix: m3-chip.get-density-tokens($scale),
+    m3-expansion.$prefix: m3-expansion.get-density-tokens($scale),
+    m3-fab.$prefix: m3-fab.get-density-tokens($scale),
+    m3-button.$prefix: m3-button.get-density-tokens($scale),
+    m3-form-field.$prefix: m3-form-field.get-density-tokens($scale),
+    m3-icon-button.$prefix: m3-icon-button.get-density-tokens($scale),
+    m3-list.$prefix: m3-list.get-density-tokens($scale),
+    m3-paginator.$prefix: m3-paginator.get-density-tokens($scale),
+    m3-radio.$prefix: m3-radio.get-density-tokens($scale),
+    m3-tabs.$prefix: m3-tabs.get-density-tokens($scale),
+    m3-select.$prefix: m3-select.get-density-tokens($scale),
+    m3-button-toggle.$prefix: m3-button-toggle.get-density-tokens($scale),
+    m3-stepper.$prefix: m3-stepper.get-density-tokens($scale),
+    m3-table.$prefix: m3-table.get-density-tokens($scale),
+    m3-toolbar.$prefix: m3-toolbar.get-density-tokens($scale),
+    m3-tree.$prefix: m3-tree.get-density-tokens($scale),
+  );
+}
+
 /// Emits the system-level CSS variables for each of the provided override values. E.g. to
 /// change the primary color to red, use `mat.theme-overrides((primary: red));`
 @mixin theme-overrides($overrides, $prefix: definition.$system-fallback-prefix) {
   $sys-names: map-merge-all(
-      definitions.md-sys-color-values-light(),
-      definitions.md-sys-typescale-values(),
-      definitions.md-sys-elevation-values(),
-      definitions.md-sys-shape-values(),
-      definitions.md-sys-state-values());
+      m3.md-sys-color-values-light(),
+      m3.md-sys-typescale-values(),
+      m3.md-sys-elevation-values(),
+      m3.md-sys-shape-values(),
+      m3.md-sys-state-values());
 
   & {
     @each $name, $value in $overrides {
@@ -145,12 +185,12 @@
 }
 
 @function _generate-sys-colors($ref, $type) {
-  $light-sys-colors: definitions.md-sys-color-values-light($ref);
+  $light-sys-colors: m3.md-sys-color-values-light($ref);
   @if ($type == light) {
     @return $light-sys-colors;
   }
 
-  $dark-sys-colors: definitions.md-sys-color-values-dark($ref);
+  $dark-sys-colors: m3.md-sys-color-values-dark($ref);
   @if ($type == dark) {
     @return $dark-sys-colors;
   }
@@ -185,7 +225,7 @@
   }
 
   & {
-    @each $name, $value in definitions.md-sys-typescale-values($ref) {
+    @each $name, $value in m3.md-sys-typescale-values($ref) {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }
   }
@@ -193,9 +233,9 @@
 
 @mixin system-level-elevation($theme, $overrides: (), $prefix: definition.$system-level-prefix) {
   $shadow-color: map.get(
-      $theme, _mat-theming-internals-do-not-access, color-tokens, (mdc, theme), shadow);
+      $theme, _mat-theming-internals-do-not-access, color-tokens, (mat, theme), shadow);
 
-  @each $name, $value in definitions.md-sys-elevation-values() {
+  @each $name, $value in m3.md-sys-elevation-values() {
     $level: map.get($overrides, $name) or $value;
     $value: elevation.get-box-shadow($level, $shadow-color);
     & {
@@ -206,7 +246,7 @@
 
 @mixin system-level-shape($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
   & {
-    @each $name, $value in definitions.md-sys-shape-values() {
+    @each $name, $value in m3.md-sys-shape-values() {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }
   }
@@ -214,7 +254,7 @@
 
 @mixin system-level-state($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
   & {
-    @each $name, $value in definitions.md-sys-state-values() {
+    @each $name, $value in m3.md-sys-state-values() {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }
   }
@@ -237,15 +277,15 @@
 @function create-system-fallbacks() {
   $app-vars: (
     'md-sys-color':
-        _create-system-app-vars-map(definitions.md-sys-color-values-light()),
+        _create-system-app-vars-map(m3.md-sys-color-values-light()),
     'md-sys-typescale':
-        _create-system-app-vars-map(definitions.md-sys-typescale-values()),
+        _create-system-app-vars-map(m3.md-sys-typescale-values()),
     'md-sys-elevation':
-        _create-system-app-vars-map(definitions.md-sys-elevation-values()),
+        _create-system-app-vars-map(m3.md-sys-elevation-values()),
     'md-sys-state':
-        _create-system-app-vars-map(definitions.md-sys-state-values()),
+        _create-system-app-vars-map(m3.md-sys-state-values()),
     'md-sys-shape':
-        _create-system-app-vars-map(definitions.md-sys-shape-values()),
+        _create-system-app-vars-map(m3.md-sys-shape-values()),
     // Add a subset of palette-specific colors used by components instead of system values
     'md-ref-palette':
         _create-system-app-vars-map(
@@ -258,7 +298,7 @@
 
   @return sass-utils.deep-merge-all(
       m3-tokens.generate-tokens($app-vars, true, true),
-      m3-tokens.generate-density-tokens(0)
+      get-density-tokens(0),
   );
 }
 

package/core/tokens/_m3-tokens.scss

@@ -1,11 +1,50 @@
-@use 'sass:map';
-@use '../style/sass-utils';
+@use '../../autocomplete/m3-autocomplete';
+@use '../../badge/m3-badge';
+@use '../../bottom-sheet/m3-bottom-sheet';
+@use '../../button-toggle/m3-button-toggle';
+@use '../../button/m3-button';
+@use '../../button/m3-fab';
+@use '../../button/m3-icon-button';
+@use '../../card/m3-card';
+@use '../../checkbox/m3-checkbox';
+@use '../../chips/m3-chip';
+@use '../../datepicker/m3-datepicker';
+@use '../../dialog/m3-dialog';
+@use '../../divider/m3-divider';
+@use '../../expansion/m3-expansion';
+@use '../../form-field/m3-form-field';
+@use '../../grid-list/m3-grid-list';
+@use '../../icon/m3-icon';
+@use '../../list/m3-list';
+@use '../../menu/m3-menu';
+@use '../../paginator/m3-paginator';
+@use '../../progress-bar/m3-progress-bar';
+@use '../../progress-spinner/m3-progress-spinner';
+@use '../../radio/m3-radio';
+@use '../../select/m3-select';
+@use '../../sidenav/m3-sidenav';
+@use '../../slide-toggle/m3-slide-toggle';
+@use '../../slider/m3-slider';
+@use '../../snack-bar/m3-snack-bar';
+@use '../../sort/m3-sort';
+@use '../../stepper/m3-stepper';
+@use '../../table/m3-table';
+@use '../../tabs/m3-tabs';
+@use '../../timepicker/m3-timepicker';
+@use '../../toolbar/m3-toolbar';
+@use '../../tooltip/m3-tooltip';
+@use '../../tree/m3-tree';
 @use '../m2' as m2-theming;
-@use './m3';
-@use './m3/definitions' as m3-token-definitions;
-@use '../tokens/m2' as m2-tokens;
-@use './density';
+@use '../m3-app';
+@use '../option/m3-optgroup';
+@use '../option/m3-option';
+@use '../ripple/m3-ripple';
+@use '../selection/pseudo-checkbox/m3-pseudo-checkbox';
+@use '../style/sass-utils';
 @use './format-tokens';
+@use './m2-tokens';
+@use './m3';
+@use 'sass:map';
 
 /// Generates tokens for the given palette with the given prefix.
 /// @param {Map} $palette The palette to generate tokens for
@@ -108,22 +147,12 @@ $_cached-token-slots: null;
   $result: sass-utils.deep-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),
-      (mdc, typography): map.get($systems, md-sys-typescale),
+      (mat, theme): map.get($systems, md-sys-color),
+      (mat, typography): map.get($systems, md-sys-typescale),
     ),
-    m3.get-m3-tokens($systems, $exclude-hardcoded, $token-slots),
+    get-m3-tokens($systems, $exclude-hardcoded, $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 density.is-systemized($namespace, $token) and not $include-density {
-        $tokens: map.remove($tokens, $token);
-      }
-    }
-    $result: map.set($result, $namespace, $tokens);
-  }
-
   @return $result;
 }
 
@@ -137,8 +166,8 @@ $_cached-token-slots: null;
 
 @function _get-sys-color($type, $ref, $prefix) {
   $mdc-sys-color: if($type == dark,
-    m3-token-definitions.md-sys-color-values-dark($ref),
-    m3-token-definitions.md-sys-color-values-light($ref));
+    m3.md-sys-color-values-dark($ref),
+    m3.md-sys-color-values-light($ref));
 
   @if (sass-utils.$use-system-color-variables) {
     $keys: (
@@ -298,7 +327,7 @@ $_cached-token-slots: null;
 
     @return create-map($keys, $prefix);
   }
-  @return m3-token-definitions.md-sys-typescale-values($ref);
+  @return m3.md-sys-typescale-values($ref);
 }
 
 /// Generates a set of namespaced color tokens for all components.
@@ -319,12 +348,12 @@ $_cached-token-slots: null;
     md-sys-color: $sys-color,
     // Because the elevation values are always combined with color values to create the box shadow,
     // elevation needs to be part of the color dimension.
-    md-sys-elevation: m3-token-definitions.md-sys-elevation-values(),
+    md-sys-elevation: m3.md-sys-elevation-values(),
     // Because the state values are sometimes combined with color values to create rgba colors,
     // state needs to be part of color dimension.
     // TODO(mmalerba): If at some point we remove the need for these combined values, we can move
     //  state to the base dimension.
-    md-sys-state: m3-token-definitions.md-sys-state-values(),
+    md-sys-state: m3.md-sys-state-values(),
   )));
 }
 
@@ -347,20 +376,71 @@ $system-variables-prefix) {
   ));
 }
 
-/// Generates a set of namespaced density tokens for all components.
-/// @param {String|Number} $scale The regular font-weight
-/// @return {Map} A map of namespaced density tokens
-@function generate-density-tokens($scale) {
-  @return density.get-tokens-for-scale($scale);
-}
-
 /// Generates a set of namespaced tokens not related to color, typography, or density for all
 /// components.
 /// @return {Map} A map of namespaced tokens not related to color, typography, or density
 @function generate-base-tokens() {
   // TODO(mmalerba): Exclude density tokens once implemented.
   @return generate-tokens((
-    md-sys-motion: m3-token-definitions.md-sys-motion-values(),
-    md-sys-shape: m3-token-definitions.md-sys-shape-values(),
+    md-sys-motion: m3.md-sys-motion-values(),
+    md-sys-shape: m3.md-sys-shape-values(),
   ), $include-non-systemized: true);
 }
+
+/// Gets the full set of M3 tokens for the given theme object.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @param {Map} $token-slots Possible token slots
+/// @return {Map} Full set of M3 tokens
+@function get-m3-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens-list: (
+    m3-app.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-autocomplete.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-badge.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-bottom-sheet.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-button-toggle.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-button.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-card.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-checkbox.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-chip.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-datepicker.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-dialog.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-divider.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-expansion.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-fab.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-form-field.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-grid-list.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-icon-button.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-icon.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-list.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-menu.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-optgroup.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-option.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-paginator.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-progress-bar.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-progress-spinner.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-pseudo-checkbox.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-radio.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-ripple.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-tabs.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-select.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-sidenav.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-slide-toggle.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-slider.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-snack-bar.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-sort.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-stepper.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-table.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-timepicker.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-toolbar.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-tooltip.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-tree.get-tokens($systems, $exclude-hardcoded, $token-slots),
+  );
+
+  $merged-tokens: ();
+  @each $tokens in $tokens-list {
+    $merged-tokens: map.deep-merge($merged-tokens, $tokens);
+  }
+
+  @return $merged-tokens;
+}

package/core/tokens/_m3-utils.scss

@@ -0,0 +1,85 @@
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:meta';
+
+/// Gets the MDC tokens for the given prefix, M3 token values, and supported token slots.
+/// @param {List} $prefix The token prefix for the given tokens.
+/// @param {Map|(Map, Map)} $values A map of M3 token values for the given prefix.
+///  This param may also be a tuple of maps, the first one representing the default M3 token values,
+//   and the second containing overrides for different color variants.
+//   Single map example:
+//     (token1: green, token2: 2px)
+//   Tuple example:
+//     (
+//       (token1: green, token2: 2px),
+//       (
+//         secondary: (token1: blue),
+//         error: (token1: red),
+//       )
+//     )
+/// @param {Map} $slots A map of token slots, with null value indicating the token is not supported.
+/// @param {String|null} $variant The name of the variant the token values are for.
+/// @return {Map} A map of fully qualified token names to values, for only the supported tokens.
+@function namespace($prefix, $values, $slots, $variant: null) {
+  $result: ();
+  @if $variant == null and meta.type-of($values) == 'list' and list.length($values == 2) {
+    $variants: list.nth($values, 2);
+    $values: list.nth($values, 1);
+    @each $variant, $overrides in $variants {
+
+      $result: map.merge($result, namespace($prefix, $overrides, $slots, $variant));
+    }
+  }
+  $used-token-names: map.keys(_filter-nulls(map.get($slots, $prefix)));
+  $used-m3-tokens: _pick(_filter-nulls($values), $used-token-names);
+  $prefix: if($variant == null, $prefix, list.append($prefix, $variant));
+  @return map.merge($result, ($prefix: $used-m3-tokens));
+}
+
+/// Hardcode the given value, or null if hardcoded values are excluded.
+@function hardcode($value, $exclude-hardcoded) {
+  @return if($exclude-hardcoded, null, $value);
+}
+
+/// Picks a submap containing only the given keys out the given map.
+/// @param {Map} $map The map to pick from.
+/// @param {List} $keys The map keys to pick.
+/// @return {Map} A submap containing only the given keys.
+@function _pick($map, $keys) {
+  $result: ();
+  @each $key in $keys {
+    @if map.has-key($map, $key) {
+      $result: map.set($result, $key, map.get($map, $key));
+    }
+  }
+  @return $result;
+}
+
+
+/// Filters keys with a null value out of the map.
+/// @param {Map} $map The map to filter.
+/// @return {Map} The given map with all of the null keys filtered out.
+@function _filter-nulls($map) {
+  $result: ();
+  @each $key, $val in $map {
+    @if $val != null {
+      $result: map.set($result, $key, $val);
+    }
+  }
+  @return $result;
+}
+
+/// Sets all of the standard typography tokens for the given token base name to the given typography
+/// level.
+/// @param {Map} $systems The MDC system tokens
+/// @param {String} $base-name The token base name to get the typography tokens for
+/// @param {String} $typography-level The typography level to base the token values on
+/// @return {Map} A map containing the typography tokens for the given base token name
+@function generate-typography-tokens($systems, $base-name, $typography-level) {
+  $result: ();
+  @each $prop in (font, line-height, size, tracking, weight) {
+    $result: map.set($result, #{$base-name}-#{$prop},
+      map.get($systems, md-sys-typescale, #{$typography-level}-#{$prop}));
+  }
+  @return $result;
+}