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

package/core/option/_optgroup-theme.scss

@@ -19,7 +19,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-optgroup.$prefix,
         tokens-mat-optgroup.get-color-tokens($theme)
       );
@@ -32,7 +32,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-optgroup.$prefix,
         tokens-mat-optgroup.get-typography-tokens($theme)
       );

package/core/option/_option-theme.scss

@@ -26,21 +26,21 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-option.$prefix,
         tokens-mat-option.get-color-tokens($theme)
       );
     }
 
     .mat-accent {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-option.$prefix,
         tokens-mat-option.get-color-tokens($theme, accent)
       );
     }
 
     .mat-warn {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-option.$prefix,
         tokens-mat-option.get-color-tokens($theme, warn)
       );
@@ -55,7 +55,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-option.$prefix,
         tokens-mat-option.get-typography-tokens($theme)
       );

package/core/ripple/_ripple-theme.scss

@@ -18,7 +18,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-ripple.$prefix,
         tokens-mat-ripple.get-color-tokens($theme)
       );
@@ -31,7 +31,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-ripple.$prefix,
         tokens-mat-ripple.get-typography-tokens($theme)
       );
@@ -44,7 +44,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-ripple.$prefix,
         tokens-mat-ripple.get-density-tokens($theme)
       );

package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -8,11 +8,11 @@
 
 @mixin _palette-styles($theme, $palette-name) {
   @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(
+    @include token-utils.create-token-values-mixed(
       tokens-mat-full-pseudo-checkbox.$prefix,
       tokens-mat-full-pseudo-checkbox.get-color-tokens($theme, $palette-name)
     );
-    @include token-utils.create-token-values(
+    @include token-utils.create-token-values-mixed(
       tokens-mat-minimal-pseudo-checkbox.$prefix,
       tokens-mat-minimal-pseudo-checkbox.get-color-tokens($theme, $palette-name)
     );
@@ -33,11 +33,11 @@
     tokens-mat-minimal-pseudo-checkbox.$prefix,
     $options...
   );
-  @include token-utils.create-token-values(
+  @include token-utils.create-token-values-mixed(
     tokens-mat-full-pseudo-checkbox.$prefix,
     $mat-full-pseudo-checkbox-tokens
   );
-  @include token-utils.create-token-values(
+  @include token-utils.create-token-values-mixed(
     tokens-mat-minimal-pseudo-checkbox.$prefix,
     $mat-minimal-pseudo-checkbox-tokens
   );

package/core/testing/index.d.ts

@@ -1,65 +1,3 @@
-import { BaseHarnessFilters } from '@angular/cdk/testing';
-import { ComponentHarness } from '@angular/cdk/testing';
-import { ComponentHarnessConstructor } from '@angular/cdk/testing';
-import { ContentContainerComponentHarness } from '@angular/cdk/testing';
-import { HarnessPredicate } from '@angular/cdk/testing';
-
-/** Harness for interacting with a `mat-optgroup` in tests. */
-export declare class MatOptgroupHarness extends ComponentHarness {
-    /** Selector used to locate option group instances. */
-    static hostSelector: string;
-    private _label;
-    /**
-     * Gets a `HarnessPredicate` that can be used to search for a option group with specific
-     * attributes.
-     * @param options Options for filtering which option instances are considered a match.
-     * @return a `HarnessPredicate` configured with the given options.
-     */
-    static with<T extends MatOptgroupHarness>(this: ComponentHarnessConstructor<T>, options?: OptgroupHarnessFilters): HarnessPredicate<T>;
-    /** Gets the option group's label text. */
-    getLabelText(): Promise<string>;
-    /** Gets whether the option group is disabled. */
-    isDisabled(): Promise<boolean>;
-    /**
-     * Gets the options that are inside the group.
-     * @param filter Optionally filters which options are included.
-     */
-    getOptions(filter?: OptionHarnessFilters): Promise<MatOptionHarness[]>;
-}
-
-/** Harness for interacting with a `mat-option` in tests. */
-export declare class MatOptionHarness extends ContentContainerComponentHarness {
-    /** Selector used to locate option instances. */
-    static hostSelector: string;
-    /** Element containing the option's text. */
-    private _text;
-    /**
-     * Gets a `HarnessPredicate` that can be used to search for an option with specific attributes.
-     * @param options Options for filtering which option instances are considered a match.
-     * @return a `HarnessPredicate` configured with the given options.
-     */
-    static with<T extends MatOptionHarness>(this: ComponentHarnessConstructor<T>, options?: OptionHarnessFilters): HarnessPredicate<T>;
-    /** Clicks the option. */
-    click(): Promise<void>;
-    /** Gets the option's label text. */
-    getText(): Promise<string>;
-    /** Gets whether the option is disabled. */
-    isDisabled(): Promise<boolean>;
-    /** Gets whether the option is selected. */
-    isSelected(): Promise<boolean>;
-    /** Gets whether the option is active. */
-    isActive(): Promise<boolean>;
-    /** Gets whether the option is in multiple selection mode. */
-    isMultiple(): Promise<boolean>;
-}
-
-export declare interface OptgroupHarnessFilters extends BaseHarnessFilters {
-    labelText?: string | RegExp;
-}
-
-export declare interface OptionHarnessFilters extends BaseHarnessFilters {
-    text?: string | RegExp;
-    isSelected?: boolean;
-}
-
-export { }
+export { M as MatOptionHarness, O as OptionHarnessFilters } from '../../option-harness.d-3d33fc9a.js';
+export { M as MatOptgroupHarness, O as OptgroupHarnessFilters } from '../../optgroup-harness.d-7f741f69.js';
+import '@angular/cdk/testing';

package/core/theming/_color-api-backwards-compatibility.scss

@@ -23,7 +23,7 @@
 // from the bundle.
 $_overrides-only: true;
 
-@mixin color-variant-styles($theme, $color-variant) {
+@mixin _color-variant-styles($theme, $color-variant) {
   $primary-options: (color-variant: $color-variant, emit-overrides-only: $_overrides-only);
 
   // Some components use the secondary color rather than primary color for `.mat-primary`.
@@ -33,10 +33,21 @@ $_overrides-only: true;
     emit-overrides-only: $_overrides-only
   );
 
-  @include option-theme.color($theme, $secondary-options...);
-  @include progress-spinner-theme.color($theme, $primary-options...);
-  @include pseudo-checkbox-theme.color($theme, $primary-options...);
-  @include stepper-theme.color($theme, $primary-options...);
+  & {
+    @include option-theme.color($theme, $secondary-options...);
+  }
+
+  & {
+    @include progress-spinner-theme.color($theme, $primary-options...);
+  }
+
+  & {
+    @include pseudo-checkbox-theme.color($theme, $primary-options...);
+  }
+
+  & {
+    @include stepper-theme.color($theme, $primary-options...);
+  }
 
   &.mat-icon {
     @include icon-theme.color($theme, $primary-options...);
@@ -105,7 +116,7 @@ $_overrides-only: true;
 
 @mixin color-variants-backwards-compatibility($theme) {
   .mat-primary {
-    @include color-variant-styles($theme, primary);
+    @include _color-variant-styles($theme, primary);
   }
   .mat-badge {
     @include badge-theme.color($theme, $color-variant: primary,
@@ -113,7 +124,7 @@ $_overrides-only: true;
   }
 
   .mat-accent {
-    @include color-variant-styles($theme, tertiary);
+    @include _color-variant-styles($theme, tertiary);
   }
   .mat-badge-accent {
     @include badge-theme.color($theme, $color-variant: tertiary,
@@ -121,7 +132,7 @@ $_overrides-only: true;
   }
 
   .mat-warn {
-    @include color-variant-styles($theme, error);
+    @include _color-variant-styles($theme, error);
   }
   .mat-badge-warn {
     @include badge-theme.color($theme, $color-variant: error,

package/core/tokens/_density.scss

@@ -38,6 +38,9 @@ $_density-tokens: (
   (mdc, filled-button): (
     container-height: (40px, 36px, 32px, 28px),
   ),
+  (mat, tonal-button): (
+    container-height: (40px, 36px, 32px, 28px),
+  ),
   (mdc, outlined-button): (
     container-height: (40px, 36px, 32px, 28px),
   ),

package/core/tokens/_token-definition.scss

@@ -173,8 +173,7 @@ $_system-fallbacks: null;
     @if(meta.type-of($color) == 'color') {
       $result: map.remove($result, $opacity-key);
       $result: map.set($result, $color-key, rgba($color, $opacity));
-    }
-    @else if($color != null) {
+    } @else if($color != null) {
       $result: map.remove($result, $opacity-key);
       $combined-color: #{color-mix(in srgb, #{$color} #{($opacity * 100) + '%'}, transparent)};
       $result: map.set($result, $color-key, $combined-color);

package/core/tokens/_token-utils.scss

@@ -118,11 +118,26 @@ $_system-fallbacks: m3-system.create-system-fallbacks();
 
 // Outputs a map of tokens under a specific prefix.
 @mixin create-token-values($prefix, $tokens) {
-  @if $tokens != null {
-    // TODO: The `&` adds to the file size of theme, but it's necessary for compatibility
-    // with https://sass-lang.com/documentation/breaking-changes/mixed-decls/. We should
-    // figure out a better way to do this or move all the concrete styles out of the theme.
-    & {
+  @include _create-token-values-internal($prefix, $tokens, false);
+}
+
+// Outputs a map of tokens under a specific prefix in scenarios where tokens may be mixed with
+// other declarations (e.g. M2 themes). Used to avoid https://sass-lang.com/documentation/breaking-changes/mixed-decls/
+@mixin create-token-values-mixed($prefix, $tokens) {
+  @include _create-token-values-internal($prefix, $tokens, true);
+}
+
+@mixin _create-token-values-internal($prefix, $tokens, $in-place) {
+  @if ($tokens != null) {
+    @if ($in-place) {
+      & {
+        @each $key, $value in $tokens {
+          @if $value != null {
+            #{_create-var-name($prefix, $key)}: #{$value};
+          }
+        }
+      }
+    } @else {
       @each $key, $value in $tokens {
         @if $value != null {
           #{_create-var-name($prefix, $key)}: #{$value};

package/core/tokens/m2/_index.scss

@@ -45,6 +45,7 @@
 @use './mat/toolbar' as tokens-mat-toolbar;
 @use './mat/tree' as tokens-mat-tree;
 @use './mat/timepicker' as tokens-mat-timepicker;
+@use './mat/tonal-button' as tokens-mat-tonal-button;
 @use './mdc/checkbox' as tokens-mdc-checkbox;
 @use './mdc/text-button' as tokens-mdc-text-button;
 @use './mdc/protected-button' as tokens-mdc-protected-button;
@@ -158,6 +159,7 @@
     _get-tokens-for-module($theme, tokens-mat-toolbar),
     _get-tokens-for-module($theme, tokens-mat-tree),
     _get-tokens-for-module($theme, tokens-mat-timepicker),
+    _get-tokens-for-module($theme, tokens-mat-tonal-button),
     _get-tokens-for-module($theme, tokens-mdc-checkbox),
     _get-tokens-for-module($theme, tokens-mdc-chip),
     _get-tokens-for-module($theme, tokens-mdc-circular-progress),

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

@@ -0,0 +1,110 @@
+@use 'sass:map';
+@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, tonal-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 (
+    // Shape of the container element.
+    container-shape: 4px,
+
+    // 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 (
+    container-color: inspection.get-theme-color($theme, background, card),
+    label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
+    disabled-container-color: inspection.get-theme-color($theme, foreground, disabled-button,
+      0.12),
+    disabled-label-text-color: inspection.get-theme-color($theme, foreground, disabled-button,
+      if($is-dark, 0.5, 0.38)),
+
+    // 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) {
+  @return (
+    container-color: inspection.get-theme-color($theme, $palette-name, default),
+    label-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1),
+    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),
+  );
+}
+
+// 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, button, font-family),
+    label-text-size: inspection.get-theme-typography($theme, button, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing),
+    label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
+    label-text-transform: none,
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+
+  @return (
+    touch-target-display: if($scale < -1, none, block),
+    container-height:
+      map.get(
+        (
+          0: 36px,
+          -1: 32px,
+          -2: 28px,
+          -3: 24px,
+        ),
+        $scale
+      )
+  );
+}
+
+// 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/m3/_index.scss

@@ -43,6 +43,7 @@
 @use './mat/toolbar' as tokens-mat-toolbar;
 @use './mat/tree' as tokens-mat-tree;
 @use './mat/timepicker' as tokens-mat-timepicker;
+@use './mat/tonal-button' as tokens-mat-tonal-button;
 @use './mdc/checkbox' as tokens-mdc-checkbox;
 @use './mdc/text-button' as tokens-mdc-text-button;
 @use './mdc/protected-button' as tokens-mdc-protected-button;
@@ -85,6 +86,7 @@ $_module-names: (
   tokens-mat-fab,
   tokens-mat-fab-small,
   tokens-mat-filled-button,
+  tokens-mat-tonal-button,
   tokens-mat-form-field,
   tokens-mat-grid-list,
   tokens-mat-icon-button,

package/core/tokens/m3/definitions/_index.scss

@@ -14,6 +14,7 @@
 @forward './md-comp-fab-tertiary-small' as md-comp-fab-tertiary-small-*;
 @forward './md-comp-fab-tertiary' as md-comp-fab-tertiary-*;
 @forward './md-comp-filled-button' as md-comp-filled-button-*;
+@forward './md-comp-filled-tonal-button' as md-comp-filled-tonal-button-*;
 @forward './md-comp-filled-card' as md-comp-filled-card-*;
 @forward './md-comp-filled-icon-button' as md-comp-filled-icon-button-*;
 @forward './md-comp-filled-text-field' as md-comp-filled-text-field-*;
@@ -63,7 +64,6 @@
 // @forward './unused/md-comp-filled-autocomplete' as md-comp-filled-autocomplete-*;
 // @forward './unused/md-comp-filled-menu-button' as md-comp-filled-menu-button-*;
 // @forward './unused/md-comp-filled-select' as md-comp-filled-select-*;
-// @forward './unused/md-comp-filled-tonal-button' as md-comp-filled-tonal-button-*;
 // @forward './unused/md-comp-filled-tonal-icon-button' as md-comp-filled-tonal-icon-button-*;
 // @forward './unused/md-comp-filter-chip' as md-comp-filter-chip-*;
 // @forward './unused/md-comp-full-screen-dialog' as md-comp-full-screen-dialog-*;

package/core/tokens/m3/definitions/_md-comp-elevated-card.scss

@@ -21,7 +21,7 @@ $_default: (
 );
 
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
-  @return (
+  $values: (
     'container-color': map.get($deps, 'md-sys-color', 'surface-container-low'),
     'container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),
     'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),
@@ -50,4 +50,6 @@ $_default: (
     'pressed-state-layer-opacity':
       map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')
   );
+
+  @return $values;
 }

package/core/tokens/m3/definitions/_md-sys-color.scss

@@ -7,12 +7,15 @@
 
 @use './md-ref-palette';
 
+// Indicates whether alternative tokens should be used
+$_alternate-tokens: false;
+
 $_default-dark: (
   'md-ref-palette': md-ref-palette.values(),
 );
 
 @function values-dark($deps: $_default-dark) {
-  @return (
+  $values: (
     'background': map.get($deps, 'md-ref-palette', 'neutral6'),
     'error': map.get($deps, 'md-ref-palette', 'error80'),
     'error-container': map.get($deps, 'md-ref-palette', 'error30'),
@@ -64,6 +67,24 @@ $_default-dark: (
     'tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary90'),
     'tertiary-fixed-dim': map.get($deps, 'md-ref-palette', 'tertiary80')
   );
+
+  @if ($_alternate-tokens) {
+    $values: map.merge($values, (
+      'background': map.get($deps, 'md-ref-palette', 'neutral10'),
+      'on-surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant80'),
+      'surface': map.get($deps, 'md-ref-palette', 'neutral10'),
+      'surface-bright': #37393b,
+      'surface-container': #1e1f20,
+      'surface-container-high': #282a2c,
+      'surface-container-highest': #333537,
+      'surface-container-low': #1b1b1b,
+      'surface-container-lowest': #0e0e0e,
+      'surface-dim': #131313,
+      'surface-tint': #d1e1ff,
+    ));
+  }
+
+  @return $values;
 }
 
 $_default-light: (
@@ -71,7 +92,7 @@ $_default-light: (
 );
 
 @function values-light($deps: $_default-light) {
-  @return (
+  $values: (
     'background': map.get($deps, 'md-ref-palette', 'neutral98'),
     'error': map.get($deps, 'md-ref-palette', 'error40'),
     'error-container': map.get($deps, 'md-ref-palette', 'error90'),
@@ -123,4 +144,25 @@ $_default-light: (
     'tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary90'),
     'tertiary-fixed-dim': map.get($deps, 'md-ref-palette', 'tertiary80')
   );
+
+  @if ($_alternate-tokens) {
+    $values: map.merge($values, (
+      'background': map.get($deps, 'md-ref-palette', 'neutral100'),
+      'on-error-container': map.get($deps, 'md-ref-palette', 'error10'),
+      'on-primary-container': map.get($deps, 'md-ref-palette', 'primary10'),
+      'on-secondary-container': map.get($deps, 'md-ref-palette', 'secondary10'),
+      'on-tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary10'),
+      'surface': map.get($deps, 'md-ref-palette', 'neutral100'),
+      'surface-bright': map.get($deps, 'md-ref-palette', 'neutral100'),
+      'surface-container': #f0f4f9,
+      'surface-container-high': #e9eef6,
+      'surface-container-highest': #dde3ea,
+      'surface-container-low': #f8fafd,
+      'surface-container-lowest': map.get($deps, 'md-ref-palette', 'primary100'),
+      'surface-dim': #d3dbe5,
+      'surface-tint': #6991d6,
+    ));
+  }
+
+  @return $values;
 }

package/core/tokens/m3/definitions/_md-sys-typescale.scss

@@ -7,12 +7,15 @@
 
 @use './md-ref-typeface';
 
+// Indicates whether alternative tokens should be used
+$_alternate-tokens: false;
+
 $_default: (
   'md-ref-typeface': md-ref-typeface.values(),
 );
 
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
-  @return (
+  $values: (
     // Warning: risk of reduced fidelity from using this composite typography token.
     // Tokens md.sys.typescale.body-large.tracking cannot be represented in the "font"
     // property shorthand. Consider using the discrete properties instead.
@@ -305,4 +308,20 @@ $_default: (
     'title-small-tracking': if($exclude-hardcoded-values, null, 0.006rem),
     'title-small-weight': map.get($deps, 'md-ref-typeface', 'weight-medium')
   );
+
+  @if ($_alternate-tokens) {
+    $values: map.merge($values, (
+      'body-large-tracking': if($exclude-hardcoded-values, null, 0),
+      'body-medium-tracking': if($exclude-hardcoded-values, null, 0),
+      'body-small-tracking': if($exclude-hardcoded-values, null, 0.006rem),
+      'display-large-tracking': if($exclude-hardcoded-values, null, 0),
+      'label-large-tracking': if($exclude-hardcoded-values, null, 0),
+      'label-medium-tracking': if($exclude-hardcoded-values, null, 0.006rem),
+      'label-small-tracking': if($exclude-hardcoded-values, null, 0.006rem),
+      'title-medium-tracking': if($exclude-hardcoded-values, null, 0),
+      'title-small-tracking': if($exclude-hardcoded-values, null, 0),
+    ));
+  }
+
+  @return $values;
 }