@angular/material 18.1.0-next.3 → 18.1.0-rc.0

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

@@ -1,5 +1,5 @@
-@use '@material/elevation/elevation-theme' as mdc-elevation;
 @use '../../token-utils';
+@use '../../../style/elevation';
 @use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -9,7 +9,7 @@ $prefix: (mat, dialog);
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
   @return (
-    container-elevation-shadow: mdc-elevation.elevation-box-shadow(24),
+    container-elevation-shadow: elevation.get-box-shadow(24),
     container-max-width: 80vw,
     container-small-max-width: 80vw,
     container-min-width: 0,

package/core/tokens/m2/mat/_fab-small.scss

@@ -1,6 +1,4 @@
-@use 'sass:map';
 @use 'sass:meta';
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
@@ -19,10 +17,6 @@ $prefix: (mat, fab-small);
 // 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;
-  $ripple-opacities: if($is-dark,
-    mdc-ripple-theme.$light-ink-opacities,
-    mdc-ripple-theme.$dark-ink-opacities
-  );
 
   @return (
     // Color of icons and text projected into a FAB.
@@ -38,13 +32,13 @@ $prefix: (mat, fab-small);
     ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
 
     // Opacity of the ripple when the button is hovered.
-    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
 
     // Opacity of the ripple when the button is focused.
-    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
 
     // Opacity of the ripple when the button is pressed.
-    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
 
     // MDC doesn't have tokens for disabled FABs so we need to implemented them ourselves.
     // Background color of the container when the FAB is disabled.

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

@@ -1,6 +1,4 @@
-@use 'sass:map';
 @use 'sass:meta';
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
@@ -19,10 +17,6 @@ $prefix: (mat, fab);
 // 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;
-  $ripple-opacities: if($is-dark,
-    mdc-ripple-theme.$light-ink-opacities,
-    mdc-ripple-theme.$dark-ink-opacities
-  );
 
   @return (
     // Color of icons and text projected into a FAB.
@@ -38,13 +32,13 @@ $prefix: (mat, fab);
     ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
 
     // Opacity of the ripple when the button is hovered.
-    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
 
     // Opacity of the ripple when the button is focused.
-    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
 
     // Opacity of the ripple when the button is pressed.
-    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
 
     // MDC doesn't have tokens for disabled FABs so we need to implemented them ourselves.
     // Background color of the container when the FAB is disabled.

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

@@ -1,6 +1,4 @@
-@use 'sass:map';
 @use 'sass:meta';
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
@@ -29,10 +27,6 @@ $prefix: (mat, filled-button);
 // 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;
-  $ripple-opacities: if($is-dark,
-    mdc-ripple-theme.$light-ink-opacities,
-    mdc-ripple-theme.$dark-ink-opacities
-  );
 
   @return (
     // Color of the element that shows the hover, focus and pressed states.
@@ -45,13 +39,13 @@ $prefix: (mat, filled-button);
     ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
 
     // Opacity of the ripple when the button is hovered.
-    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
 
     // Opacity of the ripple when the button is focused.
-    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
 
     // Opacity of the ripple when the button is pressed.
-    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
   );
 }
 

package/core/tokens/m2/mat/_form-field.scss

@@ -1,7 +1,6 @@
 @use 'sass:math';
 @use 'sass:map';
 @use '@material/textfield' as mdc-textfield;
-@use '@material/density' as mdc-density;
 @use '../../token-utils';
 @use '../../../style/sass-utils';
 @use '../../../theming/theming';
@@ -105,12 +104,16 @@ $prefix: (mat, form-field);
 
 // 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), -4);
-  $height: mdc-density.prop-value(
-    $density-config: mdc-textfield.$density-config,
-    $density-scale: inspection.get-theme-density($theme),
-    $property-name: height,
+  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -5);
+  $size-scale: (
+    0: 56px,
+    -1: 52px,
+    -2: 48px,
+    -3: 44px,
+    -4: 40px,
+    -5: 36px,
   );
+  $height: map.get($size-scale, $density-scale);
   $hide-label: $height < mdc-textfield.$minimum-height-for-filled-label;
 
   // We computed the desired height of the form-field using the density configuration. The

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

@@ -1,6 +1,4 @@
-@use 'sass:map';
 @use 'sass:meta';
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
@@ -18,10 +16,6 @@ $prefix: (mat, icon-button);
 // 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;
-  $ripple-opacities: if($is-dark,
-    mdc-ripple-theme.$light-ink-opacities,
-    mdc-ripple-theme.$dark-ink-opacities
-  );
 
   @return (
     // Color of the element that shows the hover, focus and pressed states.
@@ -34,13 +28,13 @@ $prefix: (mat, icon-button);
     ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
 
     // Opacity of the ripple when the button is hovered.
-    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
 
     // Opacity of the ripple when the button is focused.
-    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
 
     // Opacity of the ripple when the button is pressed.
-    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
   );
 }
 

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

@@ -1,6 +1,4 @@
-@use 'sass:map';
 @use 'sass:meta';
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
@@ -28,10 +26,6 @@ $prefix: (mat, outlined-button);
 // 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;
-  $ripple-opacities: if($is-dark,
-    mdc-ripple-theme.$light-ink-opacities,
-    mdc-ripple-theme.$dark-ink-opacities
-  );
 
   @return (
     // Color of the element that shows the hover, focus and pressed states.
@@ -44,13 +38,13 @@ $prefix: (mat, outlined-button);
     ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
 
     // Opacity of the ripple when the button is hovered.
-    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
 
     // Opacity of the ripple when the button is focused.
-    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
 
     // Opacity of the ripple when the button is pressed.
-    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
   );
 }
 

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

@@ -1,7 +1,6 @@
 @use 'sass:math';
 @use 'sass:map';
 @use '@material/textfield' as mdc-textfield;
-@use '@material/density' as mdc-density;
 @use '../../token-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
@@ -51,12 +50,17 @@ $prefix: (mat, paginator);
     -4: 40px,
     -5: 40px,
   );
-  $form-field-density-scale: if($density-scale > -4, -4, $density-scale);
-  $form-field-height: mdc-density.prop-value(
-    $density-config: mdc-textfield.$density-config,
-    $density-scale: $form-field-density-scale,
-    $property-name: height,
+  $form-field-size-scale: (
+    0: 56px,
+    -1: 52px,
+    -2: 48px,
+    -3: 44px,
+    -4: 40px,
+    -5: 36px,
   );
+  $form-field-density-scale: if($density-scale > -4, -4, $density-scale);
+  $form-field-height: map.get($form-field-size-scale, $form-field-density-scale);
+
   // We computed the desired height of the form-field using the density configuration. The
   // spec only describes vertical spacing/alignment in non-dense mode. This means that we
   // cannot update the spacing to explicit numbers based on the density scale. Instead, we

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

@@ -1,6 +1,4 @@
-@use 'sass:map';
 @use 'sass:meta';
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
@@ -29,10 +27,6 @@ $prefix: (mat, protected-button);
 // 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;
-  $ripple-opacities: if($is-dark,
-    mdc-ripple-theme.$light-ink-opacities,
-    mdc-ripple-theme.$dark-ink-opacities
-  );
 
   @return (
     // Color of the element that shows the hover, focus and pressed states.
@@ -45,13 +39,13 @@ $prefix: (mat, protected-button);
     ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
 
     // Opacity of the ripple when the button is hovered.
-    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
 
     // Opacity of the ripple when the button is focused.
-    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
 
     // Opacity of the ripple when the button is pressed.
-    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
   );
 }
 

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

@@ -2,8 +2,8 @@
 @use '../../token-utils';
 @use '../../../theming/inspection';
 @use '../../../theming/theming';
+@use '../../../style/elevation';
 @use '../../../style/sass-utils';
-@use '@material/elevation/elevation-theme' as mdc-elevation;
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, select);
@@ -12,7 +12,7 @@ $prefix: (mat, select);
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
   @return (
-    container-elevation-shadow: mdc-elevation.elevation-box-shadow(8),
+    container-elevation-shadow: elevation.get-box-shadow(8),
   );
 }
 

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

@@ -1,8 +1,8 @@
-@use '@material/elevation/elevation-theme' as mdc-elevation;
 @use 'sass:color';
 @use 'sass:meta';
 @use '../../token-utils';
 @use '../../../theming/inspection';
+@use '../../../style/elevation';
 @use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -15,7 +15,7 @@ $prefix: (mat, sidenav);
     // Currently zero, but it appears to be relevant for M3.
     // See: https://m3.material.io/components/navigation-drawer/overview
     container-shape: 0,
-    container-elevation-shadow: mdc-elevation.elevation-box-shadow(16),
+    container-elevation-shadow: elevation.get-box-shadow(16),
     container-width: auto,
   );
 }

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

@@ -1,6 +1,4 @@
-@use 'sass:map';
 @use 'sass:meta';
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
@@ -31,10 +29,6 @@ $prefix: (mat, text-button);
 // 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;
-  $ripple-opacities: if($is-dark,
-    mdc-ripple-theme.$light-ink-opacities,
-    mdc-ripple-theme.$dark-ink-opacities
-  );
 
   @return (
     // Color of the element that shows the hover, focus and pressed states.
@@ -47,13 +41,13 @@ $prefix: (mat, text-button);
     ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
 
     // Opacity of the ripple when the button is hovered.
-    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
 
     // Opacity of the ripple when the button is focused.
-    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
 
     // Opacity of the ripple when the button is pressed.
-    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
   );
 }
 

package/core/tokens/m2/mdc/_chip.scss

@@ -19,21 +19,9 @@ $prefix: (mdc, chip);
 @function get-unthemable-tokens() {
   @return (
     // The shape & radius of the chip.
-    container-shape:
-      (
-        family: 'rounded',
-        radius: (
-          16px 16px 16px 16px,
-        )
-      ),
+    container-shape-radius: 16px,
     // The shape & radius of the avatar.
-    with-avatar-avatar-shape:
-      (
-        family: 'rounded',
-        radius: (
-          14px 14px 14px 14px,
-        )
-      ),
+    with-avatar-avatar-shape-radius: 14px,
     // The width & height of the chip avatar.
     with-avatar-avatar-size: 28px,
     // The width & height of the chip icon.

package/core/tokens/m2/mdc/_elevated-card.scss

@@ -1,5 +1,5 @@
-@use '../../../style/elevation';
 @use '../../../theming/inspection';
+@use '../../../style/elevation';
 @use '../../../style/sass-utils';
 @use '../../token-utils';
 
@@ -35,6 +35,7 @@ $prefix: (mdc, elevated-card);
     pressed-container-elevation: null,
     pressed-state-layer-color: null,
     pressed-state-layer-opacity: null,
+    container-shadow-color: null,
     // Angular Material does not currently support surface tint.
     container-surface-tint-layer-color: null,
     // MDC does not seem to use these tokens.
@@ -50,12 +51,7 @@ $prefix: (mdc, elevated-card);
   @return (
     // The background color of the card.
     container-color: inspection.get-theme-color($theme, background, card),
-    // The elevation level of the card.
-    // (Part of the color tokens because it needs to be combined with the shadow color to generate
-    // the final box-shadow).
-    container-elevation: 1,
-    // The color of the card's shadow.
-    container-shadow-color: if($elevation != null, $elevation, elevation.$color),
+    container-elevation: elevation.get-box-shadow(1),
   );
 }
 

package/core/tokens/m2/mdc/_extended-fab.scss

@@ -1,8 +1,8 @@
+@use 'sass:map';
 @use '../../token-utils';
+@use '../../../style/elevation';
 @use '../../../theming/inspection';
 
-@use 'sass:map';
-
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mdc, extended-fab);
 
@@ -38,18 +38,22 @@ $prefix: (mdc, extended-fab);
     pressed-ripple-color: null,
     pressed-ripple-opacity: null,
     pressed-state-layer-color: null,
-    pressed-state-layer-opacity: null
+    pressed-state-layer-opacity: null,
+    container-elevation: null,
+    focus-container-elevation: null,
+    hover-container-elevation: null,
+    pressed-container-elevation: null,
+    container-shadow-color: null,
   );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    container-elevation: 6,
-    focus-container-elevation: 8,
-    hover-container-elevation: 8,
-    pressed-container-elevation: 12,
-    container-shadow-color: #000,
+    container-elevation-shadow: elevation.get-box-shadow(6),
+    focus-container-elevation-shadow: elevation.get-box-shadow(8),
+    hover-container-elevation-shadow: elevation.get-box-shadow(8),
+    pressed-container-elevation-shadow: elevation.get-box-shadow(12),
   );
 }
 

package/core/tokens/m2/mdc/_fab-small.scss

@@ -1,25 +1,22 @@
+@use 'sass:map';
 @use '../../../theming/inspection';
+@use '../../../style/elevation';
 @use '../../token-utils';
 
-@use 'sass:map';
-
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mdc, fab-small);
 
 @function get-unthemable-tokens() {
   @return (
     container-shape: 50%,
-    icon-size: 24px,
-
-    // We don't use this token, because it doesn't set the color of any text inside the FAB.
-    // We create a custom token for it instead.
-    icon-color: null,
 
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
     // =============================================================================================
     container-height: null,
     container-width: null,
+    icon-size: null,
+    icon-color: null,
 
     focus-icon-color: null,
     focus-outline-color: null,
@@ -40,7 +37,13 @@ $prefix: (mdc, fab-small);
     pressed-ripple-color: null,
     pressed-ripple-opacity: null,
     pressed-state-layer-color: null,
-    pressed-state-layer-opacity: null
+    pressed-state-layer-opacity: null,
+
+    container-elevation: null,
+    focus-container-elevation: null,
+    hover-container-elevation: null,
+    pressed-container-elevation: null,
+    container-shadow-color: null,
   );
 }
 
@@ -49,11 +52,10 @@ $prefix: (mdc, fab-small);
   @return (
     // Background color of the FAB.
     container-color: inspection.get-theme-color($theme, background, card),
-    container-elevation: 6,
-    focus-container-elevation: 8,
-    hover-container-elevation: 8,
-    pressed-container-elevation: 12,
-    container-shadow-color: #000,
+    container-elevation-shadow: elevation.get-box-shadow(6),
+    focus-container-elevation-shadow: elevation.get-box-shadow(8),
+    hover-container-elevation-shadow: elevation.get-box-shadow(8),
+    pressed-container-elevation-shadow: elevation.get-box-shadow(12),
   );
 }
 

package/core/tokens/m2/mdc/_fab.scss

@@ -1,19 +1,14 @@
+@use 'sass:map';
 @use '../../../theming/inspection';
+@use '../../../style/elevation';
 @use '../../token-utils';
 
-@use 'sass:map';
-
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mdc, fab);
 
 @function get-unthemable-tokens() {
   @return (
     container-shape: 50%,
-    icon-size: 24px,
-
-    // We don't use this token, because it doesn't set the color of any text inside the FAB.
-    // We create a custom token for it instead.
-    icon-color: null,
 
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
@@ -21,6 +16,8 @@ $prefix: (mdc, fab);
     container-height: null,
     container-surface-tint-layer-color: null,
     container-width: null,
+    icon-size: null,
+    icon-color: null,
 
     focus-icon-color: null,
     focus-outline-color: null,
@@ -41,7 +38,13 @@ $prefix: (mdc, fab);
     pressed-ripple-color: null,
     pressed-ripple-opacity: null,
     pressed-state-layer-color: null,
-    pressed-state-layer-opacity: null
+    pressed-state-layer-opacity: null,
+
+    container-elevation: null,
+    focus-container-elevation: null,
+    hover-container-elevation: null,
+    pressed-container-elevation: null,
+    container-shadow-color: null,
   );
 }
 
@@ -50,11 +53,10 @@ $prefix: (mdc, fab);
   @return (
     // Background color of the FAB.
     container-color: inspection.get-theme-color($theme, background, card),
-    container-elevation: 6,
-    focus-container-elevation: 8,
-    hover-container-elevation: 8,
-    pressed-container-elevation: 12,
-    container-shadow-color: #000,
+    container-elevation-shadow: elevation.get-box-shadow(6),
+    focus-container-elevation-shadow: elevation.get-box-shadow(8),
+    hover-container-elevation-shadow: elevation.get-box-shadow(8),
+    pressed-container-elevation-shadow: elevation.get-box-shadow(12),
   );
 }
 

package/core/tokens/m2/mdc/_outlined-card.scss

@@ -41,6 +41,7 @@ $prefix: (mdc, outlined-card);
     pressed-outline-color: null,
     pressed-state-layer-color: null,
     pressed-state-layer-opacity: null,
+    container-shadow-color: null,
     // Angular Material does not currently support surface tint.
     container-surface-tint-layer-color: null,
     // MDC does not seem to use these tokens.
@@ -58,12 +59,7 @@ $prefix: (mdc, outlined-card);
     container-color: inspection.get-theme-color($theme, background, card),
     // The border color of the card.
     outline-color: rgba(inspection.get-theme-color($theme, foreground, base), 0.12),
-    // The elevation level of the card.
-    // (Part of the color tokens because it needs to be combined with the shadow color to generate
-    // the final box-shadow).
-    container-elevation: 0,
-    // The color of the card's shadow.
-    container-shadow-color: if($elevation != null, $elevation, elevation.$color),
+    container-elevation: elevation.get-box-shadow(0),
   );
 }
 

package/core/tokens/m2/mdc/{_tab.scss → _secondary-navigation-tab.scss}

@@ -5,7 +5,7 @@
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, tab);
+$prefix: (mdc, secondary-navigation-tab);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.

package/core/tokens/m3/_index.scss

@@ -65,7 +65,7 @@
 @use './mdc/slider' as tokens-mdc-slider;
 @use './mdc/snack-bar' as tokens-mdc-snack-bar;
 @use './mdc/switch' as tokens-mdc-switch;
-@use './mdc/tab' as tokens-mdc-tab;
+@use './mdc/secondary-navigation-tab' as tokens-mdc-secondary-navigation-tab;
 @use './mdc/tab-indicator' as tokens-mdc-tab-indicator;
 
 $_module-names: (
@@ -137,7 +137,7 @@ $_module-names: (
   tokens-mdc-slider,
   tokens-mdc-snack-bar,
   tokens-mdc-switch,
-  tokens-mdc-tab,
+  tokens-mdc-secondary-navigation-tab,
   tokens-mdc-tab-indicator
 );
 

package/core/tokens/m3/mat/_app.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '@material/elevation' as mdc-elevation;
+@use '../../../style/elevation';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -19,7 +19,7 @@ $prefix: (mat, app);
 
   @if ($shadow-color) {
     @for $zValue from 0 through 24 {
-      $shadow: mdc-elevation.elevation-box-shadow($zValue, $shadow-color);
+      $shadow: elevation.get-box-shadow($zValue, $shadow-color);
       $tokens: map.set($tokens, 'elevation-shadow-level-#{$zValue}', $shadow);
     }
   }