@ng-matero/extensions 16.1.2 → 16.2.0

package/README.md

@@ -3,7 +3,7 @@
 [![CodeFactor](https://www.codefactor.io/repository/github/ng-matero/extensions/badge)](https://www.codefactor.io/repository/github/ng-matero/extensions)
 [![npm](https://img.shields.io/npm/v/@ng-matero/extensions.svg)](https://www.npmjs.com/package/@ng-matero/extensions)
 [![GitHub Release Date](https://img.shields.io/github/release-date/ng-matero/extensions)](https://github.com/ng-matero/extensions/releases)
-[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/ng-matero/extensions/blob/dev/LICENSE)
+[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/ng-matero/extensions/blob/main/LICENSE)
 [![Gitter](https://img.shields.io/gitter/room/ng-matero/extensions.svg)](https://gitter.im/matero-io/extensions)
 
 The Ng-Matero Extensions is an extended component library for Angular Material.
@@ -41,7 +41,7 @@ export class YourAppModule {
 
 ## Theming
 
-After import modules, you must define a theme. [More details about theming](https://material.angular.io/guide/theming).
+After import modules, you must define a theme. [More about theming](https://material.angular.io/guide/theming).
 
 ```scss
 @use '@ng-matero/extensions' as mtx;

package/_index.scss

@@ -1,5 +1,3 @@
-@forward 'photoviewer';
-
 @forward './alert/alert-theme' as alert-* show alert-theme;
 @forward './button/button-theme' as button-* show button-theme;
 @forward './colorpicker/colorpicker-theme' as colorpicker-* show colorpicker-theme;
@@ -10,7 +8,6 @@
 @forward './popover/popover-theme' as popover-* show popover-theme;
 @forward './progress/progress-theme' as progress-* show progress-theme;
 @forward './select/select-theme' as select-* show select-theme;
-@forward './slider/slider-theme' as slider-* show slider-theme;
 @forward './split/split-theme' as split-* show split-theme;
 @forward './tooltip/tooltip-theme' as tooltip-* show tooltip-theme;
 

package/_theming.scss

@@ -1,5 +1,3 @@
-@forward 'photoviewer';
-
 @forward './alert/alert-theme.import';
 @forward './button/button-theme.import';
 @forward './colorpicker/colorpicker-theme.import';
@@ -10,7 +8,6 @@
 @forward './popover/popover-theme.import';
 @forward './progress/progress-theme.import';
 @forward './select/select-theme.import';
-@forward './slider/slider-theme.import';
 @forward './split/split-theme.import';
 @forward './tooltip/tooltip-theme.import';
 

package/alert/_alert-theme.scss

@@ -1,33 +1,14 @@
-@use 'sass:map';
+@use '../core/style/sass-utils';
 @use '../core/theming/theming';
-@use '../core/theming/palette';
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mtx/alert' as tokens-mtx-alert;
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  $background: map.get($config, background);
 
-  .mtx-alert {
-    background-color: theming.get-color-from-palette($background, card);
-  }
-
-  .mtx-alert-info.mtx-alert {
-    background-color: theming.get-color-from-palette(palette.$blue-palette, 500);
-    color: white;
-  }
-
-  .mtx-alert-success.mtx-alert {
-    background-color: theming.get-color-from-palette(palette.$green-palette, 500);
-    color: white;
-  }
-
-  .mtx-alert-warning.mtx-alert {
-    background-color: theming.get-color-from-palette(palette.$orange-palette, 500);
-    color: white;
-  }
-
-  .mtx-alert-danger.mtx-alert {
-    background-color: theming.get-color-from-palette(palette.$red-palette, 500);
-    color: white;
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mtx-alert.$prefix,
+      tokens-mtx-alert.get-color-tokens($config));
   }
 }
 
@@ -37,18 +18,21 @@
 
 @mixin theme($theme-or-color-config) {
   $theme: theming.private-legacy-get-theme($theme-or-color-config);
+
   @include theming.private-check-duplicate-theme-styles($theme, 'mtx-alert') {
     $color: theming.get-color-config($theme);
     $density: theming.get-density-config($theme);
     $typography: theming.get-typography-config($theme);
 
-    @if $color != null {
+    @if $color !=null {
       @include color($color);
     }
-    @if $density != null {
+
+    @if $density !=null {
       @include density($density);
     }
-    @if $typography != null {
+
+    @if $typography !=null {
       @include typography($typography);
     }
   }

package/alert/alert.scss

@@ -1,3 +1,6 @@
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mtx/alert' as tokens-mtx-alert;
+
 .mtx-alert {
   position: relative;
   display: block;
@@ -5,6 +8,31 @@
   margin-bottom: 1rem;
   border: 1px solid transparent;
   border-radius: .25rem;
+
+  @include token-utils.use-tokens(tokens-mtx-alert.$prefix, tokens-mtx-alert.get-token-slots()) {
+    @include token-utils.create-token-slot(background-color, background-color);
+    @include token-utils.create-token-slot(color, text-color);
+
+    &.mtx-alert-info {
+      @include token-utils.create-token-slot(background-color, info-background-color);
+      @include token-utils.create-token-slot(color, info-text-color);
+    }
+
+    &.mtx-alert-success {
+      @include token-utils.create-token-slot(background-color, success-background-color);
+      @include token-utils.create-token-slot(color, success-text-color);
+    }
+
+    &.mtx-alert-warning {
+      @include token-utils.create-token-slot(background-color, warning-background-color);
+      @include token-utils.create-token-slot(color, warning-text-color);
+    }
+
+    &.mtx-alert-danger {
+      @include token-utils.create-token-slot(background-color, danger-background-color);
+      @include token-utils.create-token-slot(color, danger-text-color);
+    }
+  }
 }
 
 .mtx-alert-close {

package/colorpicker/_colorpicker-theme.scss

@@ -1,20 +1,29 @@
+@use 'sass:color';
 @use 'sass:map';
 @use '../core/theming/theming';
-@use '../core/theming/palette';
+@use '../core/typography/typography';
+@use '../core/style/sass-utils';
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mtx/colorpicker' as tokens-mtx-colorpicker;
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
   $background: map.get($config, background);
 
-  .mtx-colorpicker-toggle-active {
-    color: theming.get-color-from-palette(map.get($config, primary), text);
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mtx-colorpicker.$prefix,
+      tokens-mtx-colorpicker.get-color-tokens($config));
+  }
 
+  .mtx-colorpicker-toggle-active {
     &.mat-accent {
-      color: theming.get-color-from-palette(map.get($config, accent), text);
+      $accent-tokens: tokens-mtx-colorpicker.private-get-toggle-color-palette-color-tokens($config, accent);
+      @include token-utils.create-token-values(tokens-mtx-colorpicker.$prefix, $accent-tokens);
     }
 
     &.mat-warn {
-      color: theming.get-color-from-palette(map.get($config, warn), text);
+      $warn-tokens: tokens-mtx-colorpicker.private-get-toggle-color-palette-color-tokens($config, warn);
+      @include token-utils.create-token-values(tokens-mtx-colorpicker.$prefix, $warn-tokens);
     }
   }
 }
@@ -25,18 +34,21 @@
 
 @mixin theme($theme-or-color-config) {
   $theme: theming.private-legacy-get-theme($theme-or-color-config);
+
   @include theming.private-check-duplicate-theme-styles($theme, 'mtx-colorpicker') {
     $color: theming.get-color-config($theme);
     $density: theming.get-density-config($theme);
     $typography: theming.get-typography-config($theme);
 
-    @if $color != null {
+    @if $color !=null {
       @include color($color);
     }
-    @if $density != null {
+
+    @if $density !=null {
       @include density($density);
     }
-    @if $typography != null {
+
+    @if $typography !=null {
       @include typography($typography);
     }
   }

package/colorpicker/colorpicker-toggle.scss

@@ -1,23 +1,29 @@
-.mat-form-field-appearance-legacy {
-  .mat-form-field-prefix,
-  .mat-form-field-suffix {
-    .mtx-colorpicker-toggle-default-icon {
-      width: 1em;
-    }
+@use '@angular/cdk';
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mtx/colorpicker' as tokens-mtx-colorpicker;
+
+$_tokens: tokens-mtx-colorpicker.$prefix, tokens-mtx-colorpicker.get-token-slots();
+
+// We support the case where the form field is disabled, but the datepicker is not.
+// MDC sets `pointer-events: none` on disabled form fields which prevents clicks on the toggle.
+.mtx-colorpicker-toggle {
+  pointer-events: auto;
+
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(color, toggle-icon-color);
   }
 }
 
-.mat-form-field:not(.mat-form-field-appearance-legacy) {
-  .mat-form-field-prefix,
-  .mat-form-field-suffix {
-    .mtx-colorpicker-toggle-default-icon {
-      display: block;
-      width: 1.5em;
-      height: 1.5em;
-    }
+.mtx-colorpicker-toggle-active {
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(color, toggle-active-state-icon-color);
+  }
+}
 
-    .mat-icon-button .mtx-colorpicker-toggle-default-icon {
-      margin: auto;
-    }
+@include cdk.high-contrast(active, off) {
+  .mtx-colorpicker-toggle-default-icon {
+    // On Chromium-based browsers the icon doesn't appear to inherit the text color in high
+    // contrast mode so we have to set it explicitly. This is a no-op on IE and Firefox.
+    color: CanvasText;
   }
 }

package/core/style/_sass-utils.scss

@@ -0,0 +1,49 @@
+@use 'sass:map';
+@use 'sass:meta';
+
+/// Include content under the current selector (&) or the document root if there is no current
+/// selector.
+/// @param {String} $root [html] The default root selector to use when there is no current selector.
+/// @output The given content under the current selector, or root selector if there is no current
+///     selector.
+/// @content Content to output under the current selector, or root selector if there is no current
+///     selector.
+@mixin current-selector-or-root($root: html) {
+  @at-root #{& or $root} {
+    @content;
+  }
+}
+
+/// A version of the standard `map.merge` function that takes a variable number of arguments.
+/// Each argument is merged into the final result from left to right.
+/// @param {List} $maps The maps to combine with map.merge
+/// @return {Map} The combined result of successively calling map.merge with each parameter.
+@function merge-all($maps...) {
+  $result: ();
+  @each $map in $maps {
+    $result: map.merge($result, $map);
+  }
+  @return $result;
+}
+
+/// 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.
+/// @param {List} $maps The maps to combine with map.deep-merge
+/// @return {Map} The combined result of successively calling map.deep-merge with each parameter.
+@function deep-merge-all($maps...) {
+  $result: ();
+  @each $map in $maps {
+    $result: map.deep-merge($result, $map);
+  }
+  @return $result;
+}
+
+/// Coerces the given value to a list, by converting any non-list value into a single-item list.
+/// This should be used when dealing with user-passed lists of args to avoid confusing errors,
+/// since Sass treats `($x)` as equivalent to `$x`.
+/// @param {Any} $value The value to coerce to a list.
+/// @return {List} The original $value if it was a list, otherwise a single-item list containing
+///     $value.
+@function coerce-to-list($value) {
+  @return if(meta.type-of($value) != 'list', ($value,), $value);
+}

package/core/theming/_all-theme.scss

@@ -9,7 +9,6 @@
 @use '../../popover/popover-theme';
 @use '../../progress/progress-theme';
 @use '../../select/select-theme';
-@use '../../slider/slider-theme';
 @use '../../split/split-theme';
 @use '../../tooltip/tooltip-theme';
 @use './theming';
@@ -28,7 +27,6 @@
     @include popover-theme.theme($theme-or-color-config);
     @include progress-theme.theme($theme-or-color-config);
     @include select-theme.theme($theme-or-color-config);
-    @include slider-theme.theme($theme-or-color-config);
     @include split-theme.theme($theme-or-color-config);
     @include tooltip-theme.theme($theme-or-color-config);
   }

package/core/tokens/_token-utils.scss

@@ -0,0 +1,127 @@
+@use 'sass:map';
+@use '@material/elevation/elevation-theme' as mdc-elevation-theme;
+@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 '../typography/typography';
+
+$_placeholder-color-palette: theming.define-palette(palette.$red-palette);
+
+// 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;
+
+$_tokens: null;
+$_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;
+  }
+  @include mdc-custom-properties.configure($varname-prefix: $first) {
+    @content;
+  }
+  $_component-prefix: null !global;
+}
+
+// Sets the token prefix and map to use when creating token slots.
+@mixin use-tokens($prefix, $tokens) {
+  $_tokens: $tokens !global;
+  @include _configure-token-prefix($prefix...) {
+    @content;
+  }
+  $_tokens: null !global;
+}
+
+// Emits a slot for the given token, provided that it has a non-null value in the token map passed
+// to `use-tokens`.
+@mixin create-token-slot($property, $token, $emit-fallback: false) {
+  @if $_component-prefix == null or $_tokens == null {
+    @error '`create-token-slot` must be used within `use-tokens`';
+  }
+  @if not map.has-key($_tokens, $token) {
+    @error 'Token #{$token} does not exist. Configured tokens are: #{map.keys($_tokens)}';
+  }
+  @if map.get($_tokens, $token) != null {
+    $fallback: null;
+
+    @if ($emit-fallback == true) {
+      $fallback: map.get($_tokens, $token);
+    }
+    @else if ($emit-fallback) {
+      $fallback: $emit-fallback;
+    }
+
+    $value: mdc-custom-properties.create('#{$_component-prefix}-#{$token}', $fallback: $fallback);
+    @include mdc-theme.property($property, $value);
+  }
+}
+
+// Returns the name of a token including the current prefix. Intended to be used in calculations
+// involving tokens. `create-token-slot` should be used when outputting tokens.
+@function get-token-variable($token) {
+  @if $_component-prefix == null or $_tokens == null {
+    @error '`get-token-variable` must be used within `use-tokens`';
+  }
+  @if not map.has-key($_tokens, $token) {
+    @error 'Token #{$token} does not exist. Configured tokens are: #{map.keys($_tokens)}';
+  }
+
+  @return mdc-custom-properties.create-varname('#{$_component-prefix}-#{$token}');
+}
+
+@mixin create-token-values($prefix, $tokens) {
+  @include _configure-token-prefix($prefix...) {
+    @include mdc-keys.declare-custom-properties($tokens, $_component-prefix);
+  }
+}
+
+// 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.
+@function resolve-elevation($tokens, $elevation-token, $shadow-color-token) {
+  $elevation: map.get($tokens, $elevation-token);
+  $shadow-color: map.get($tokens, $shadow-color-token);
+  @return map.merge($tokens, (
+    $elevation-token: mdc-elevation-theme.elevation-box-shadow($elevation, $shadow-color),
+    $shadow-color-token: null,
+  ));
+}

package/core/tokens/m2/_index.scss

@@ -0,0 +1,49 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '../../style/sass-utils';
+
+/// Gets the tokens for the given theme, m2 tokens module, and theming system.
+/// @param {Map} $theme The Angular Material theme object to generate token values from.
+/// @param {String} $module The Sass module containing the token getter functions.
+/// @param {String} $system The theming system to get tokens for. Valid values are: unthemable,
+///     color, typography, density.
+/// @return {Map} The token map by calling the token getter for the given system in the given module
+///    with the given Angular Material theme. Token names are not fully-qualified.
+@function _get-tokens-for-module-and-system($theme, $module, $system) {
+  @if $system == unthemable {
+    @return meta.call(
+        meta.get-function(get-#{$system}-tokens, $module: $module));
+  }
+  @if not map.get($theme, $system) {
+    @return ();
+  }
+  @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.
+/// @param {Map} $theme The Angular Material theme object to generate token values from.
+/// @param {String} $module The Sass module containing the token getter functions.
+/// @return {Map} The token map by calling the token getters in the given module with the given
+///     Angular Material theme. Token names are fully-qualified.
+@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.
+/// @param {Map} $theme The Angular Material theme object to generate token values from.
+/// @return {Map} The token map for the given Angular Material theme. Returned format:
+///     (
+///       (fully, qualified, namespace): (
+///         token: value
+///       )
+///     )
+@function m2-tokens-from-theme($theme) {
+  @return sass-utils.deep-merge-all(
+  );
+}

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

@@ -0,0 +1,72 @@
+@use 'sass:map';
+@use '../../../theming/theming';
+@use '../../../typography/typography-utils';
+@use '../../../mdc-helpers/mdc-helpers';
+@use '../../../style/sass-utils';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, plain-tooltip);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+//
+// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
+// `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.
+    container-shape: 4px,
+    // Line height of the tooltip text.
+    supporting-text-line-height: 16px,
+    // MDC does not seem to use these token.
+    supporting-text-type: null,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $background: map.get($config, background);
+
+  @return ( // Color of the tooltip container.
+    container-color: theming.get-color-from-palette($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),
+    // Font size for the tooltip text.
+    supporting-text-size: typography-utils.font-size($config, caption),
+    // Font weight of the tooltip text.
+    supporting-text-weight: typography-utils.font-weight($config, caption),
+    // Tracking (space between letters) of the tooltip text.
+    supporting-text-tracking: typography-utils.letter-spacing($config, caption),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @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));
+}

package/core/tokens/m2/mtx/_alert.scss

@@ -0,0 +1,55 @@
+@use 'sass:map';
+@use '../../token-utils';
+@use '../../../theming/theming';
+@use '../../../style/sass-utils';
+@use '../../../theming/palette';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mtx, alert);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
+  $is-dark-theme: map.get($config, is-dark);
+
+  @return (
+    background-color: theming.get-color-from-palette($background, dialog),
+    text-color: theming.get-color-from-palette($foreground, text),
+    info-background-color: theming.get-color-from-palette(palette.$blue-palette, if($is-dark-theme, 900, 500)),
+    info-text-color: white,
+    success-background-color: theming.get-color-from-palette(palette.$green-palette, if($is-dark-theme, 900, 500)),
+    success-text-color: white,
+    warning-background-color: theming.get-color-from-palette(palette.$orange-palette, if($is-dark-theme, 900, 500)),
+    warning-text-color: white,
+    danger-background-color: theming.get-color-from-palette(palette.$red-palette, if($is-dark-theme, 900, 500)),
+    danger-text-color: white,
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @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)
+  );
+}