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

package/core/tokens/m2/mat/_legacy-button-toggle.scss

@@ -1,59 +0,0 @@
-@use '../../token-definition';
-@use '../../../theming/inspection';
-@use '../../../style/sass-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, legacy-button-toggle);
-
-// 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 (
-    height: 36px,
-    shape: 2px,
-    focus-state-layer-opacity: 1,
-  );
-}
-
-// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
-  @return (
-    text-color: inspection.get-theme-color($theme, foreground, hint-text),
-    state-layer-color: inspection.get-theme-color($theme, background, focused-button),
-    selected-state-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
-    selected-state-background-color: inspection.get-theme-color(
-        $theme, background, selected-button),
-    disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-button),
-    disabled-state-background-color: inspection.get-theme-color(
-        $theme, background, disabled-button-toggle),
-    disabled-selected-state-background-color: inspection.get-theme-color(
-        $theme, background, selected-disabled-button)
-  );
-}
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  @return (
-    label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
-    label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
-    label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
-    label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
-    label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
-  );
-}
-
-// Tokens that can be configured through Angular Material's density theming API.
-@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-definition.$placeholder-color-config),
-      get-typography-tokens(token-definition.$placeholder-typography-config),
-      get-density-tokens(token-definition.$placeholder-density-config)
-  );
-}

package/core/tokens/m2/mat/_list.scss

@@ -1,44 +0,0 @@
-@use '../../token-definition';
-@use '../../../style/sass-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, list);
-
-// 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 (
-    // active indicator themable with M3
-    active-indicator-color: transparent,
-    active-indicator-shape: 4px,
-  );
-}
-
-// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
-  @return ();
-}
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  @return ();
-}
-
-// Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($theme) {
-  @return (
-    list-item-leading-icon-start-space: 16px,
-    list-item-leading-icon-end-space: 32px,
-  );
-}
-
-// 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-definition.$placeholder-color-config),
-      get-typography-tokens(token-definition.$placeholder-typography-config),
-      get-density-tokens(token-definition.$placeholder-density-config)
-  );
-}

package/core/tokens/m2/mat/_minimal-pseudo-checkbox.scss

@@ -1,43 +0,0 @@
-@use '../../token-definition';
-@use '../../../theming/inspection';
-@use '../../../style/sass-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, minimal-pseudo-checkbox);
-
-// 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($theme, $palette-name: accent) {
-  $is-dark: inspection.get-theme-type($theme) == dark;
-
-  @return (
-    selected-checkmark-color: inspection.get-theme-color($theme, $palette-name),
-    disabled-selected-checkmark-color: if($is-dark, #686868, #b0b0b0),
-  );
-}
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  @return ();
-}
-
-// Tokens that can be configured through Angular Material's density theming API.
-@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-definition.$placeholder-color-config),
-      get-typography-tokens(token-definition.$placeholder-typography-config),
-      get-density-tokens(token-definition.$placeholder-density-config)
-  );
-}

package/core/tokens/m2/mat/_outlined-button.scss

@@ -1,88 +0,0 @@
-@use 'sass:meta';
-@use '../../token-definition';
-@use '../../../theming/theming';
-@use '../../../theming/inspection';
-@use '../../../style/sass-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, outlined-button);
-
-// 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 (
-    // Start/end padding of the button.
-    horizontal-padding: 15px, // Normally it's 16px, but -1px for the outline.
-
-    // Space between the icon and the button's main content.
-    icon-spacing: 8px,
-
-    // Amount by which to offset the icon so that its presence
-    // doesn't increase throw off the horizontal padding.
-    icon-offset: -4px,
-  );
-}
-
-// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
-  $is-dark: inspection.get-theme-type($theme) == dark;
-
-  @return (
-    // Color of the element that shows the hover, focus and pressed states.
-    state-layer-color: inspection.get-theme-color($theme, foreground, base),
-
-    // Color of the element that shows the hover, focus and pressed states while disabled.
-    disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-
-    // Color of the ripple element.
-    ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
-
-    // Opacity of the ripple when the button is hovered.
-    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-
-    // Opacity of the ripple when the button is focused.
-    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
-
-    // Opacity of the ripple when the button is pressed.
-    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
-  );
-}
-
-// Generates the mapping for the properties that change based on the button palette color.
-@function private-get-color-palette-color-tokens($theme, $palette-name) {
-  $color: inspection.get-theme-color($theme, $palette-name);
-  $ripple-opacity: 0.1;
-
-  @return (
-    state-layer-color: $color,
-    ripple-color: if(
-      meta.type-of($color) == color,
-      rgba($color, $ripple-opacity),
-      inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
-  );
-}
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  @return ();
-}
-
-// Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($theme) {
-  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
-
-  @return (
-    touch-target-display: if($density-scale < -1, none, block),
-  );
-}
-
-// 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-definition.$placeholder-color-config),
-      get-typography-tokens(token-definition.$placeholder-typography-config),
-      get-density-tokens(token-definition.$placeholder-density-config)
-  );
-}

package/core/tokens/m2/mat/_protected-button.scss

@@ -1,102 +0,0 @@
-@use 'sass:meta';
-@use '../../token-definition';
-@use '../../../theming/theming';
-@use '../../../theming/inspection';
-@use '../../../style/sass-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, protected-button);
-
-// 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 (
-    // Start/end padding of the button.
-    horizontal-padding: 16px,
-
-    // Space between the icon and the button's main content.
-    icon-spacing: 8px,
-
-    // Amount by which to offset the icon so that its presence
-    // doesn't increase throw off the horizontal padding.
-    icon-offset: -4px,
-  );
-}
-
-// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
-  $is-dark: inspection.get-theme-type($theme) == dark;
-
-  @return (
-    // Color of the element that shows the hover, focus and pressed states.
-    state-layer-color: inspection.get-theme-color($theme, foreground, base),
-
-    // Color of the element that shows the hover, focus and pressed states while disabled.
-    disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-
-    // Color of the ripple element.
-    ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
-
-    // Opacity of the ripple when the button is hovered.
-    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-
-    // Opacity of the ripple when the button is focused.
-    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
-
-    // Opacity of the ripple when the button is pressed.
-    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
-  );
-}
-
-// Generates the mapping for the properties that change based on the button palette color.
-@function private-get-color-palette-color-tokens($theme, $palette-name) {
-  $state-layer-color: null;
-  $ripple-color: null;
-  $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
-
-  // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
-  // internally. For now we fall back to the old hardcoded behavior only for internal apps.
-  @if (token-definition.$private-is-internal-build or
-      meta.type-of($contrast-color) != 'color') {
-    $is-dark: inspection.get-theme-type($theme) == dark;
-    $container-color: inspection.get-theme-color($theme, $palette-name);
-    $contrast-tone: token-definition.contrast-tone($container-color, $is-dark);
-    $color: if($contrast-tone == 'dark', #000, #fff);
-    $state-layer-color: $color;
-    $ripple-color: rgba($color, 0.1);
-  }
-  @else {
-    $state-layer-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
-    $ripple-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1);
-  }
-
-  @return (
-    state-layer-color: $state-layer-color,
-    ripple-color: $ripple-color,
-  );
-}
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  @return ();
-}
-
-// Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($theme) {
-  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
-
-  @return (
-    touch-target-display: if($density-scale < -1, none, block),
-  );
-}
-
-// 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-definition.$placeholder-color-config),
-      get-typography-tokens(token-definition.$placeholder-typography-config),
-      get-density-tokens(token-definition.$placeholder-density-config)
-  );
-}

package/core/tokens/m2/mat/_radio.scss

@@ -1,52 +0,0 @@
-@use '../../token-definition';
-@use '../../../theming/theming';
-@use '../../../theming/inspection';
-@use '../../../style/sass-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, radio);
-
-// 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($theme, $palette-name: accent) {
-  @return (
-    ripple-color: inspection.get-theme-color($theme, foreground, base),
-    checked-ripple-color: inspection.get-theme-color($theme, $palette-name, default),
-    disabled-label-color: inspection.get-theme-color($theme, foreground, disabled-text),
-    label-text-color: inspection.get-theme-color($theme, foreground, text)
-  );
-}
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  @return (
-    label-text-font: inspection.get-theme-typography($theme, body-2, font-family),
-    label-text-line-height: inspection.get-theme-typography($theme, body-2, line-height),
-    label-text-size: inspection.get-theme-typography($theme, body-2, font-size),
-    label-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing),
-    label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight)
-  );
-}
-
-// Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($theme) {
-  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
-
-  @return (touch-target-display: if($density-scale < -1, none, block));
-}
-
-// 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-definition.$placeholder-color-config),
-    get-typography-tokens(token-definition.$placeholder-typography-config),
-    get-density-tokens(token-definition.$placeholder-density-config)
-  );
-}

package/core/tokens/m2/mat/_slider.scss

@@ -1,69 +0,0 @@
-@use 'sass:map';
-@use '../../token-definition';
-@use '../../../style/sass-utils';
-@use '../../../theming/inspection';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, slider);
-
-// 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 (
-    value-indicator-width: auto,
-    value-indicator-height: 32px,
-    value-indicator-caret-display: block,
-    value-indicator-border-radius: 4px,
-    value-indicator-padding: 0 12px,
-    value-indicator-text-transform: none,
-    value-indicator-container-transform: translateX(-50%)
-  );
-}
-
-// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
-  $theme-color-tokens: private-get-color-palette-color-tokens($theme, primary);
-  $is-dark: inspection.get-theme-type($theme) == dark;
-
-  @return map.merge(
-    $theme-color-tokens,
-    (
-      // Opacity of value indicator text container
-      value-indicator-opacity: if($is-dark, 0.9, 0.6)
-    ),
-  );
-}
-
-// Generates tokens for the slider properties that change based on the theme.
-@function private-get-color-palette-color-tokens($theme, $palette-name) {
-  $ripple-color: inspection.get-theme-color($theme, $palette-name);
-  $hover-ripple-color: if($ripple-color == null, null, #{rgba($ripple-color, 0.05)});
-  $focus-ripple-color: if($ripple-color == null, null, #{rgba($ripple-color, 0.2)});
-
-  @return (
-    ripple-color: $ripple-color,
-    hover-state-layer-color: $hover-ripple-color,
-    focus-state-layer-color: $focus-ripple-color
-  );
-}
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  @return ();
-}
-
-// Tokens that can be configured through Angular Material's density theming API.
-@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-definition.$placeholder-color-config),
-    get-typography-tokens(token-definition.$placeholder-typography-config),
-    get-density-tokens(token-definition.$placeholder-density-config)
-  );
-}

package/core/tokens/m2/mat/_switch.scss

@@ -1,76 +0,0 @@
-@use '../../token-definition';
-@use '../../../style/sass-utils';
-@use '../../../theming/inspection';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, switch);
-
-// 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 (
-    disabled-selected-handle-opacity: 0.38,
-    disabled-unselected-handle-opacity: 0.38,
-
-    unselected-handle-size: 20px,
-    selected-handle-size: 20px,
-    pressed-handle-size: 20px,
-    with-icon-handle-size: 20px,
-
-    selected-handle-horizontal-margin: 0,
-    selected-with-icon-handle-horizontal-margin: 0,
-    selected-pressed-handle-horizontal-margin: 0,
-    unselected-handle-horizontal-margin: 0,
-    unselected-with-icon-handle-horizontal-margin: 0,
-    unselected-pressed-handle-horizontal-margin: 0,
-
-    // The hidden and visible track represent whichever track is visible or
-    // hidden in the ui. This could be the .mdc-switch__track :before or
-    // :after depending on whether the switch is selected or unselected.
-    //
-    // The m2 slide-toggle uses transforms to hide & show the tracks while
-    // the m3 slide-toggle uses opacity.
-    visible-track-opacity: 1,
-    hidden-track-opacity: 1,
-    visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1),
-    hidden-track-transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1),
-    track-outline-width: 1px,
-    track-outline-color: transparent,
-    selected-track-outline-width: 1px,
-    selected-track-outline-color: transparent,
-    disabled-unselected-track-outline-width: 1px,
-    disabled-unselected-track-outline-color: transparent
-  );
-}
-
-// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
-  @return (label-text-color: inspection.get-theme-color($theme, foreground, text));
-}
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  @return (
-    label-text-font: inspection.get-theme-typography($theme, body-2, font-family),
-    label-text-line-height: inspection.get-theme-typography($theme, body-2, line-height),
-    label-text-size: inspection.get-theme-typography($theme, body-2, font-size),
-    label-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing),
-    label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight)
-  );
-}
-
-// Tokens that can be configured through Angular Material's density theming API.
-@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-definition.$placeholder-color-config),
-    get-typography-tokens(token-definition.$placeholder-typography-config),
-    get-density-tokens(token-definition.$placeholder-density-config)
-  );
-}

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

@@ -1,42 +0,0 @@
-@use '../../token-definition';
-@use '../../../theming/inspection';
-@use '../../../style/sass-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, tab-header-with-background);
-
-// 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($theme, $palette-name: primary) {
-
-  @return (
-    background-color: inspection.get-theme-color($theme, $palette-name, default),
-    foreground-color: inspection.get-theme-color($theme, $palette-name, default-contrast),
-  );
-}
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  @return ();
-}
-
-// Tokens that can be configured through Angular Material's density theming API.
-@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-definition.$placeholder-color-config),
-      get-typography-tokens(token-definition.$placeholder-typography-config),
-      get-density-tokens(token-definition.$placeholder-density-config)
-  );
-}

package/core/tokens/m2/mat/_text-button.scss

@@ -1,91 +0,0 @@
-@use 'sass:meta';
-@use '../../token-definition';
-@use '../../../theming/theming';
-@use '../../../theming/inspection';
-@use '../../../style/sass-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, text-button);
-
-// 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 (
-    // Start/end padding of the button.
-    horizontal-padding: 8px,
-
-    // Start/end padding of the button when it has an icon.
-    with-icon-horizontal-padding: 8px,
-
-    // Space between the icon and the button's main content.
-    icon-spacing: 8px,
-
-    // Amount by which to offset the icon so that its presence
-    // doesn't increase throw off the horizontal padding.
-    icon-offset: 0,
-  );
-}
-
-// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
-  $is-dark: inspection.get-theme-type($theme) == dark;
-
-  @return (
-    // Color of the element that shows the hover, focus and pressed states.
-    state-layer-color: inspection.get-theme-color($theme, foreground, base),
-
-    // Color of the element that shows the hover, focus and pressed states while disabled.
-    disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-
-    // Color of the ripple element.
-    ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
-
-    // Opacity of the ripple when the button is hovered.
-    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-
-    // Opacity of the ripple when the button is focused.
-    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
-
-    // Opacity of the ripple when the button is pressed.
-    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
-  );
-}
-
-// Generates the mapping for the properties that change based on the button palette color.
-@function private-get-color-palette-color-tokens($theme, $palette-name) {
-  $color: inspection.get-theme-color($theme, $palette-name);
-  $ripple-opacity: 0.1;
-
-  @return (
-    state-layer-color: $color,
-    ripple-color: if(
-      meta.type-of($color) == color,
-      rgba($color, $ripple-opacity),
-      inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
-  );
-}
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  @return ();
-}
-
-// Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($theme) {
-  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
-
-  @return (
-    touch-target-display: if($density-scale < -1, none, block),
-  );
-}
-
-// 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-definition.$placeholder-color-config),
-      get-typography-tokens(token-definition.$placeholder-typography-config),
-      get-density-tokens(token-definition.$placeholder-density-config)
-  );
-}