@ng-matero/extensions 16.3.0 → 17.0.0

package/core/theming/_inspection.scss

@@ -0,0 +1,303 @@
+@use 'sass:list';
+@use 'sass:map';
+@use '../style/validation';
+@use './m2-inspection';
+
+$_internals: _mat-theming-internals-do-not-access;
+
+$_m3-typescales: (
+  display-large,
+  display-medium,
+  display-small,
+  headline-large,
+  headline-medium,
+  headline-small,
+  title-large,
+  title-medium,
+  title-small,
+  label-large,
+  label-medium,
+  label-small,
+  body-large,
+  body-medium,
+  body-small,
+);
+
+$_typography-properties: (font, font-family, line-height, font-size, letter-spacing, font-weight);
+
+/// Validates that the given value is a versioned theme object.
+/// @param {Any} $theme The theme object to validate.
+/// @return {Boolean|Null} true if the theme has errors, else null.
+@function _validate-theme-object($theme) {
+  $err: validation.validate-type($theme, 'map') or
+        map.get($theme, $_internals, theme-version) == null;
+  @return if($err, true, null);
+}
+
+/// Gets the version number of a theme object. A theme that is not a valid versioned theme object is
+/// considered to be version 0.
+/// @param {Map} $theme The theme to check the version of
+/// @return {Number} The version number of the theme (0 if unknown).
+@function get-theme-version($theme) {
+  $err: _validate-theme-object($theme);
+  @return if($err, 0, map.get($theme, $_internals, theme-version) or 0);
+}
+
+/// Gets the type of theme represented by a theme object (light or dark).
+/// @param {Map} $theme The theme
+/// @return {String} The type of theme (either `light` or `dark`).
+@function get-theme-type($theme) {
+  $version: get-theme-version($theme);
+  @if $version == 0 {
+    @return m2-inspection.get-theme-type($theme);
+  }
+  @else if $version == 1 {
+    @if not theme-has($theme, color) {
+      @error 'Color information is not available on this theme.';
+    }
+    @return map.get($theme, $_internals, theme-type) or light;
+  }
+  @else {
+    @error #{'Unrecognized theme version:'} $version;
+  }
+}
+
+/// Gets a color from a theme object. This function can take 2 or 3 arguments. If 2 arguments are
+/// passed, the second argument is treated as the name of a color role. If 3 arguments are passed,
+/// the second argument is treated as the name of a color palette (primary, secondary, etc.) and the
+/// third is treated as the palette hue (10, 50, etc.)
+/// @param {Map} $theme The theme
+/// @param {String} $color-role-or-palette-name The name of the color role to get, or the name of a
+///   color palette.
+/// @param {Number} $hue The palette hue to get (passing this argument means the second argument is
+///   interpreted as a palette name).
+/// @return {Color} The requested theme color.
+@function get-theme-color($theme, $args...) {
+  $version: get-theme-version($theme);
+  $args-count: list.length($args);
+  @if $args-count != 1 and $args-count != 2 {
+    @error #{'Expected 2 or 3 arguments. Got:'} $args-count + 1;
+  }
+
+  @if $version == 0 {
+    @return m2-inspection.get-theme-color($theme, $args...);
+  }
+  @else if $version == 1 {
+    @if $args-count == 1 {
+      @return _get-theme-role-color($theme, $args...);
+    }
+    @else if $args-count == 2 {
+      @return _get-theme-palette-color($theme, $args...);
+    }
+  }
+  @else {
+    @error #{'Unrecognized theme version:'} $version;
+  }
+}
+
+/// Gets a role color from a theme object.
+/// @param {Map} $theme The theme
+/// @param {String} $color-role-name The name of the color role to get.
+/// @return {Color} The requested role color.
+@function _get-theme-role-color($theme, $color-role-name) {
+  $err: _validate-theme-object($theme);
+  @if $err {
+    // TODO(mmalerba): implement for old style theme objects.
+    @error #{'get-theme-color does not support legacy theme objects.'};
+  }
+  @if not theme-has($theme, color) {
+    @error 'Color information is not available on this theme.';
+  }
+  $color-roles: map.get($theme, $_internals, color-tokens, (mdc, theme));
+  $result: map.get($color-roles, $color-role-name);
+  @if not $result {
+    @error #{'Valid color roles are: #{map.keys($color-roles)}. Got:'} $color-role-name;
+  }
+  @return $result;
+}
+
+/// Gets a palette color from a theme object.
+/// @param {Map} $theme The theme
+/// @param {String} $palette-name The name of the palette to get the color from.
+/// @param {Number} $hue The hue to read from the palette.
+/// @return {Color} The requested palette color.
+@function _get-theme-palette-color($theme, $palette-name, $hue) {
+  $err: _validate-theme-object($theme);
+  @if $err {
+    // TODO(mmalerba): implement for old style theme objects.
+    @error #{'get-theme-color does not support legacy theme objects.'};
+  }
+  @if not theme-has($theme, color) {
+    @error 'Color information is not available on this theme.';
+  }
+  $palettes: map.get($theme, $_internals, palettes);
+  $palette: map.get($palettes, $palette-name);
+  @if not $palette {
+    $supported-palettes: map.keys($palettes);
+    @error #{'Valid palettes are: #{$supported-palettes}. Got:'} $palette-name;
+  }
+  $result: map.get($palette, $hue);
+  @if not $result {
+    $supported-hues: map.keys($palette);
+    @error #{'Valid hues for'} $palette-name #{'are: #{$supported-hues}. Got:'} $hue;
+  }
+  @return $result;
+}
+
+/// Gets a typography value from a theme object.
+/// @param {Map} $theme The theme
+/// @param {String} $typescale The typescale name.
+/// @param {String} $property The CSS font property to get
+///   (font, font-family, font-size, font-weight, line-height, or letter-spacing).
+/// @return {*} The value of the requested font property.
+@function get-theme-typography($theme, $typescale, $property: font) {
+  $version: get-theme-version($theme);
+  @if $version == 0 {
+    @return m2-inspection.get-theme-typography($theme, $typescale, $property);
+  }
+  @else if $version == 1 {
+    @if not theme-has($theme, typography) {
+      @error 'Typography information is not available on this theme.';
+    }
+    @if not list.index($_m3-typescales, $typescale) {
+      @error #{'Valid typescales are: #{$_m3-typescales}. Got:'} $typescale;
+    }
+    @if not list.index($_typography-properties, $property) {
+      @error #{'Valid typography properties are: #{$_typography-properties}. Got:'} $property;
+    }
+    $property-key: map.get((
+      font: '',
+      font-family: '-font',
+      line-height: '-line-height',
+      font-size: '-size',
+      letter-spacing: '-tracking',
+      font-weight: '-weight'
+    ), $property);
+    $token-name: '#{$typescale}#{$property-key}';
+    @return map.get($theme, $_internals, typography-tokens, (mdc, typography), $token-name);
+  }
+  @else {
+    @error #{'Unrecognized theme version:'} $version;
+  }
+}
+
+/// Gets the density scale from a theme object.
+/// @param {Map} $theme The theme
+/// @return {Number} The density scale.
+@function get-theme-density($theme) {
+  $version: get-theme-version($theme);
+  @if $version == 0 {
+    @return m2-inspection.get-theme-density($theme);
+  }
+  @else if $version == 1 {
+    @if not theme-has($theme, density) {
+      @error 'Density information is not available on this theme.';
+    }
+    @return map.get($theme, $_internals, density-scale);
+  }
+  @else {
+    @error #{'Unrecognized theme version:'} $version;
+  }
+}
+
+/// Checks whether the theme has information about given theming system.
+/// @param {Map} $theme The theme
+/// @param {String} $system The system to check
+/// @param {Boolean} Whether the theme has information about the system.
+@function theme-has($theme, $system) {
+  $version: get-theme-version($theme);
+  @if $version == 0 {
+    @return m2-inspection.theme-has($theme, $system);
+  }
+  @else if $version == 1 {
+    @if $system == base {
+      @return map.get($theme, $_internals, base-tokens) != null;
+    }
+    @if $system == color {
+      @return map.get($theme, $_internals, color-tokens) != null and
+        map.get($theme, $_internals, theme-type) != null and
+        map.get($theme, $_internals, palettes) != null;
+    }
+    @if $system == typography {
+      @return map.get($theme, $_internals, typography-tokens) != null;
+    }
+    @if $system == density {
+      @return map.get($theme, $_internals, density-scale) != null;
+    }
+    @error 'Valid systems are: base, color, typography, density. Got:' $system;
+  }
+  @else {
+    @error #{'Unrecognized theme version:'} $version;
+  }
+}
+
+/// Removes the information about the given theming system(s) from the given theme.
+/// @param {Map} $theme The theme to remove information from
+/// @param {String...} $systems The systems to remove
+/// @return {Map} A version of the theme without the removed theming systems.
+@function theme-remove($theme, $systems...) {
+  $err: validation.validate-allowed-values($systems, color, typography, density, base);
+  @if $err {
+    @error #{'Expected $systems to contain valid system names (color, typography, density, or'}
+    #{'base). Got invalid system names:'} $err;
+  }
+  $version: get-theme-version($theme);
+  @if $version == 0 {
+    @return m2-inspection.theme-remove($theme, $systems...);
+  }
+  @else if $version == 1 {
+    @each $system in $systems {
+      @if $system == base {
+        $theme: map.deep-remove($theme, $_internals, base-tokens);
+      }
+      @else if $system == color {
+        $theme: map.deep-remove($theme, $_internals, color-tokens);
+        $theme: map.deep-remove($theme, $_internals, theme-type);
+        $theme: map.deep-remove($theme, $_internals, palettes);
+      }
+      @else if $system == typography {
+        $theme: map.deep-remove($theme, $_internals, typography-tokens);
+      }
+      @else if $system == density {
+        $theme: map.deep-remove($theme, $_internals, density-scale);
+      }
+    }
+    @return $theme;
+  }
+}
+
+/// Gets the set of tokens from the given theme, limited to those affected by the requested theming
+/// systems.
+/// @param {Map} $theme The theme to get tokens from.
+/// @param {String...} $systems The theming systems to get tokens for. Valid values are: color,
+///   typography, density, base. If no systems are passed, all tokens will be returned.
+/// @return {Map} The requested tokens for the theme.
+@function get-theme-tokens($theme, $systems...) {
+  $systems: if(list.length($systems) == 0, (color, typography, density, base), $systems);
+  $err: _validate-theme-object($theme);
+  @if $err {
+    @error #{'Expected $theme to be an Angular Material theme object. Got:'} $theme;
+  }
+  $err: validation.validate-allowed-values($systems, color, typography, density, base);
+  @if $err {
+    @error #{'Expected $systems to contain valid system names (color, typography, density, or'}
+    #{'base). Got invalid system names:'} $err;
+  }
+  $result: ();
+  @each $system in $systems {
+    $result: map.deep-merge($result, map.get($theme, $_internals, '#{$system}-tokens'));
+  }
+  @return $result;
+}
+
+/// Gets a version of the theme with a modified typography config that preserves old behavior in
+/// some components that previously used `private-typography-to-2014-config`.
+/// Do not introduce new usages of this, it should be cleaned up and removed.
+/// @deprecated
+@function private-get-typography-back-compat-theme($theme) {
+  @return if(
+      get-theme-version($theme) == 0,
+      m2-inspection.private-get-typography-back-compat-theme($theme),
+      $theme
+  );
+}

package/core/theming/_m2-inspection.scss

@@ -0,0 +1,266 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use '@angular/material' as mat;
+
+/// Key used to access the Angular Material theme internals.
+$_internals: _mat-theming-internals-do-not-access;
+
+/// Keys that indicate a config object is a color config.
+$_color-keys: (
+  primary,
+  accent,
+  warn,
+  foreground,
+  background,
+  is-dark,
+  color, /* included for themes that incorrectly nest the color config: (color: (color: (....))) */
+);
+
+/// Keys that indicate a config object is a typography config.
+$_typography-keys: (
+  headline-1,
+  headline-2,
+  headline-3,
+  headline-4,
+  headline-5,
+  headline-6,
+  subtitle-1,
+  font-family,
+  subtitle-2,
+  body-1,
+  body-2,
+  button,
+  caption,
+  overline,
+);
+
+/// The CSS typography properties supported by the inspection API.
+$_typography-properties: (font, font-family, line-height, font-size, letter-spacing, font-weight);
+
+/// Gets the m2-config from the theme.
+@function _get-m2-config($theme) {
+  // It is possible for a user to pass a "density theme" that is just a number.
+  @if meta.type-of($theme) != 'map' {
+    @return $theme;
+  }
+  $internal: map.get($theme, $_internals, m2-config);
+  $theme: map.remove($theme, $_internals);
+  @return if(_is-error-theme($theme), $internal, $theme);
+}
+
+/// Checks whether the given theme contains error values.
+/// @param {*} $theme The theme to check.
+/// @return {Boolean} true if the theme contains error values, else false.
+@function _is-error-theme($theme) {
+  @if meta.type-of($theme) != 'map' {
+    @return false;
+  }
+  @if map.get($theme, ERROR) {
+    @return true;
+  }
+  @return _is-error-theme(list.nth(map.values($theme), 1));
+}
+
+/// Checks whether the given theme object has any of the given keys.
+/// @param {Map} $theme The theme to check
+/// @param {List} $keys The keys to check for
+/// @return {Boolean} Whether the theme has any of the given keys.
+@function _has-any-key($theme, $keys) {
+  @each $key in $keys {
+    @if map.has-key($theme, $key) {
+      @return true;
+    }
+  }
+  @return false;
+}
+
+/// Checks whether the given theme is a density scale value.
+/// @param {*} $theme The theme to check.
+/// @return {Boolean} true if the theme is a density scale value, else false.
+@function _is-density-value($theme) {
+  @return $theme == minimum or $theme == maximum or meta.type-of($theme) == 'number';
+}
+
+/// Gets the type of theme represented by a theme object (light or dark).
+/// @param {Map} $theme The theme
+/// @return {String} The type of theme (either `light` or `dark`).
+@function get-theme-type($theme) {
+  $theme: _get-m2-config($theme);
+  @if not theme-has($theme, color) {
+    @error 'Color information is not available on this theme.';
+  }
+  $colors: mat.get-color-config($theme);
+  // Some apps seem to have mistakenly created nested color themes that somehow work with our old
+  // theme normalization logic. This check allows those apps to keep working.
+  @if theme-has($colors, color) {
+    $colors: mat.get-color-config($colors);
+  }
+  @return if(map.get($colors, is-dark), dark, light);
+}
+
+/// Gets a color from a theme object. This function can take 2 or 3 arguments. If 2 arguments are
+/// passed, the second argument is treated as the name of a color role. If 3 arguments are passed,
+/// the second argument is treated as the name of a color palette (primary, secondary, etc.) and the
+/// third is treated as the palette hue (10, 50, etc.)
+/// @param {Map} $theme The theme
+/// @param {String} $palette-name The name of a color palette.
+/// @param {Number} $hue The palette hue to get (passing this argument means the second argument is
+///   interpreted as a palette name).
+/// @return {Color} The requested theme color.
+@function get-theme-color($theme, $palette-name, $args...) {
+  $theme: _get-m2-config($theme);
+  @if not theme-has($theme, color) {
+    @error 'Color information is not available on this theme.';
+  }
+  $colors: mat.get-color-config($theme);
+  // Some apps seem to have mistakenly created nested color themes that somehow work with our old
+  // theme normalization logic. This check allows those apps to keep working.
+  @if theme-has($colors, color) {
+    $colors: mat.get-color-config($colors);
+  }
+  $palette: map.get($colors, $palette-name);
+  @if not $palette {
+    @error 'Unrecognized palette name:' $palette-name;
+  }
+  @return mat.get-color-from-palette($palette, $args...);
+}
+
+/// Gets a typography value from a theme object.
+/// @param {Map} $theme The theme
+/// @param {String} $typescale The typescale name.
+/// @param {String} $property The CSS font property to get
+///   (font, font-family, font-size, font-weight, line-height, or letter-spacing).
+/// @return {*} The value of the requested font property.
+@function get-theme-typography($theme, $typescale, $property) {
+  $theme: _get-m2-config($theme);
+  @if not theme-has($theme, typography) {
+    @error 'Typography information is not available on this theme.';
+  }
+  $typography: mat.private-typography-to-2018-config(
+      mat.get-typography-config($theme));
+  @if $property == font {
+    $font-weight: mat.font-weight($typography, $typescale);
+    $font-size: mat.font-size($typography, $typescale);
+    $line-height: mat.line-height($typography, $typescale);
+    $font-family: mat.font-family($typography, $typescale);
+    @return ($font-weight list.slash($font-size, $line-height) $font-family);
+  }
+  @else if $property == font-family {
+    $result: mat.font-family($typography, $typescale);
+    @return $result or mat.font-family($typography);
+  }
+  @else if $property == font-size {
+    @return mat.font-size($typography, $typescale);
+  }
+  @else if $property == font-weight {
+    @return mat.font-weight($typography, $typescale);
+  }
+  @else if $property == line-height {
+    @return mat.line-height($typography, $typescale);
+  }
+  @else if $property == letter-spacing {
+    @return mat.letter-spacing($typography, $typescale);
+  }
+  @else {
+    @error #{'Valid typography properties are: #{$_typography-properties}. Got:'} $property;
+  }
+}
+
+/// Gets the density scale from a theme object.
+/// @param {Map} $theme The theme
+/// @return {Number} The density scale.
+@function get-theme-density($theme) {
+  $theme: _get-m2-config($theme);
+  @if not theme-has($theme, density) {
+    @error 'Density information is not available on this theme.';
+  }
+  $scale: mat.get-density-config($theme);
+  @return mat.clamp-density($scale, -5);
+}
+
+/// Checks whether the theme has information about given theming system.
+/// @param {Map} $theme The theme
+/// @param {String} $system The system to check
+/// @param {Boolean} Whether the theme has information about the system.
+@function theme-has($theme, $system) {
+  $theme: _get-m2-config($theme);
+  @if $system == base {
+    @return true;
+  }
+  @if $system == color {
+    $color: mat.get-color-config($theme);
+    @return $color != null and _has-any-key($color, $_color-keys);
+  }
+  @if $system == typography {
+    $typography: mat.get-typography-config($theme);
+    @return $typography != null and _has-any-key($typography, $_typography-keys);
+  }
+  @if $system == density {
+    // Backwards compatibility for the case where an explicit, but invalid density is given
+    // (this was previously treated as density 0).
+    @if meta.type-of($theme) == 'map' and map.get($theme, density) {
+      @return true;
+    }
+    $density: mat.get-density-config($theme);
+    @return $density != null and _is-density-value($density);
+  }
+  @error 'Valid systems are: base, color, typography, density. Got:' $system;
+}
+
+/// Removes the information about the given theming system(s) from the given theme.
+/// @param {Map} $theme The theme to remove information from
+/// @param {String...} $systems The systems to remove
+/// @return {Map} A version of the theme without the removed theming systems.
+@function theme-remove($theme, $systems...) {
+  $internal: map.get($theme, $_internals, m2-config);
+  @each $system in $systems {
+    @if $system == color {
+      $theme: map.set($theme, color, null);
+    }
+    @else if $system == typography {
+      $theme: map.set($theme, typography, null);
+    }
+    @else if $system == density {
+      $theme: map.set($theme, density, null);
+    }
+  }
+  @if $internal {
+    $internal: theme-remove($internal, $systems...);
+    $theme: map.set($theme, $_internals, m2-config, $internal);
+  }
+  @return $theme;
+}
+
+/// Gets a version of the theme with a modified typography config that preserves old behavior in
+/// some components that previously used `private-typography-to-2014-config`.
+/// Do not introduce new usages of this, it should be cleaned up and removed.
+/// @deprecated
+@function private-get-typography-back-compat-theme($theme) {
+  // It is possible for a user to pass a "density theme" that is just a number.
+  @if meta.type-of($theme) != 'map' {
+    @return $theme;
+  }
+  $internal: map.get($theme, $_internals, m2-config);
+  $theme: map.remove($theme, $_internals);
+  @if theme-has($theme, typography) {
+    $typography-config: mat.get-typography-config($theme);
+    // gmat configs have both 2018 and 2014 keys.
+    @if (not mat.private-typography-is-2014-config($typography-config)) or
+        (not mat.private-typography-is-2018-config($typography-config)) {
+      @return $theme;
+    }
+    $new-typography-config: mat.private-typography-to-2018-config(
+        $typography-config, true);
+    // subtitle-2 is mapped differently by `private-typography-to-2014-config`.
+    $new-typography-config: map.set(
+        $new-typography-config, subtitle-2, map.get($new-typography-config, body-1));
+    $theme: if($theme == $typography-config, $new-typography-config,
+      map.set($theme, typography, $new-typography-config));
+  }
+  @if $internal {
+    $internal: private-get-typography-back-compat-theme($internal);
+    $theme: map.set($theme, $_internals, m2-config, $internal);
+  }
+  @return $theme;
+}

package/core/tokens/_token-utils.scss

@@ -3,11 +3,10 @@
 @use '@material/theme/custom-properties' as mdc-custom-properties;
 @use '@material/theme/theme' as mdc-theme;
 @use '@material/theme/keys' as mdc-keys;
-@use '../theming/palette';
-@use '../theming/theming';
+@use '@angular/material' as mat;
 @use '../typography/typography';
 
-$_placeholder-color-palette: theming.define-palette(palette.$red-palette);
+$_placeholder-color-palette: mat.define-palette(mat.$red-palette);
 
 // Placeholder color config that can be passed to token getter functions when generating token
 // slots.
@@ -16,8 +15,8 @@ $placeholder-color-config: (
   accent: $_placeholder-color-palette,
   warn: $_placeholder-color-palette,
   is-dark: false,
-  foreground: palette.$light-theme-foreground-palette,
-  background: palette.$light-theme-background-palette,
+  foreground: mat.$light-theme-foreground-palette,
+  background: mat.$light-theme-background-palette,
 );
 
 $_placeholder-typography-level-config: typography.typography-config-level-from-mdc(body1);

package/core/tokens/m2/mdc/_plain-tooltip.scss

@@ -1,7 +1,4 @@
-@use 'sass:map';
-@use '../../../theming/theming';
-@use '../../../typography/typography-utils';
-@use '../../../mdc-helpers/mdc-helpers';
+@use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 @use '../../token-utils';
 
@@ -15,7 +12,8 @@ $prefix: (mdc, plain-tooltip);
 // `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
 // our CSS.
 @function get-unthemable-tokens() {
-  @return ( // Border radius for the tooltip container.
+  @return (
+    // Border radius for the tooltip container.
     container-shape: 4px,
     // Line height of the tooltip text.
     supporting-text-line-height: 16px,
@@ -25,48 +23,42 @@ $prefix: (mdc, plain-tooltip);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $background: map.get($config, background);
+@function get-color-tokens($theme) {
 
-  @return ( // Color of the tooltip container.
-    container-color: theming.get-color-from-palette($background, tooltip),
+  @return (
+    // Color of the tooltip container.
+    container-color: inspection.get-theme-color($theme, background, tooltip),
     // Color of the tooltip text.
     supporting-text-color: #fff,
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
-
-  // TODO(amysorto): The earlier implementation of the tooltip used MDC's APIs to create the
-  // typography tokens. As a result, we unintentionally allowed `null` typography configs to be
-  // passed in. Since there a lot of apps that now depend on this pattern, we need this temporary
-  // fallback.
-  @if ($config ==null) {
-    $config: mdc-helpers.private-fallback-typography-from-mdc();
-  }
-
-  @return ( // Font for the tooltip text.
-    supporting-text-font: typography-utils.font-family($config, caption) or typography-utils.font-family($config),
+@function get-typography-tokens($theme) {
+  @return (
+    // Font for the tooltip text.
+    supporting-text-font: inspection.get-theme-typography($theme, caption, font-family),
     // Font size for the tooltip text.
-    supporting-text-size: typography-utils.font-size($config, caption),
+    supporting-text-size: inspection.get-theme-typography($theme, caption, font-size),
     // Font weight of the tooltip text.
-    supporting-text-weight: typography-utils.font-weight($config, caption),
+    supporting-text-weight: inspection.get-theme-typography($theme, caption, font-weight),
     // Tracking (space between letters) of the tooltip text.
-    supporting-text-tracking: typography-utils.letter-spacing($config, caption),
+    supporting-text-tracking: inspection.get-theme-typography($theme, caption, letter-spacing),
   );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
+@function get-density-tokens($theme) {
   @return ();
 }
 
 // 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 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));
+  @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)
+  );
 }