@angular/material 20.0.2 → 20.1.0-next.0

package/_index.scss

@@ -17,7 +17,6 @@
 @forward './core/theming/theming' as private-* show private-clamp-density;
 @forward './core/typography/typography' show typography-hierarchy;
 @forward './core/typography/typography-utils' show font-shorthand;
-@forward 'core/tokens/m2-tokens' show m2-tokens-from-theme;
 @forward './core/tokens/m3-system' show system-level-colors,
     system-level-typography, system-level-elevation, system-level-shape,
     system-level-motion, system-level-state, theme, theme-overrides;

package/autocomplete/_m2-autocomplete.scss

@@ -1,7 +1,5 @@
-@use '../core/tokens/m2-utils';
 @use '../core/theming/inspection';
 @use '../core/style/elevation';
-@use '../core/style/sass-utils';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -15,7 +13,7 @@
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    autocomplete-background-color: inspection.get-theme-color($theme, background, card)
+    autocomplete-background-color: inspection.get-theme-color($theme, system, surface)
   );
 }
 
@@ -28,14 +26,3 @@
 @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(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/badge/_badge-theme.scss

@@ -38,13 +38,13 @@
 
     .mat-badge-accent {
       @include token-utils.create-token-values-mixed(
-        m2-badge.private-get-color-palette-color-tokens($theme, accent)
+        m2-badge.private-get-color-palette-color-tokens($theme, secondary)
       );
     }
 
     .mat-badge-warn {
       @include token-utils.create-token-values-mixed(
-        m2-badge.private-get-color-palette-color-tokens($theme, warn)
+        m2-badge.private-get-color-palette-color-tokens($theme, error)
       );
     }
   }

package/badge/_m2-badge.scss

@@ -1,10 +1,8 @@
-@use 'sass:meta';
 @use 'sass:map';
 @use 'sass:math';
-@use 'sass:color';
-@use '../core/tokens/m2-utils';
 @use '../core/theming/inspection';
-@use '../core/style/sass-utils';
+@use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 
 $_default-size: 22px;
 $_small-size: $_default-size - 6px;
@@ -43,32 +41,24 @@ $_large-size: $_default-size + 6px;
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+  $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
+  $disabled-container : m3-utils.color-with-opacity(map.get($system, on-surface), 12%);
   $primary-color-tokens: private-get-color-palette-color-tokens($theme, primary);
-  $app-background: inspection.get-theme-color($theme, background, background);
-  $disabled-background: inspection.get-theme-color($theme, foreground, disabled-button);
-
-  // The disabled color usually has some kind of opacity, but because the badge is overlayed
-  // on top of something else, it won't look good if it's opaque. If it is a color *type*,
-  // we convert it into a solid color by taking the opacity from the rgba value and using
-  // the value to determine the percentage of the background to put into foreground when
-  // mixing the colors together.
-  @if (meta.type-of($disabled-background) == color and meta.type-of($app-background) == color) {
-    $badge-opacity: color.opacity($disabled-background);
-    $disabled-background: color.mix($app-background,
-      rgba($disabled-background, 1), (1 - $badge-opacity) * 100%);
-  }
-
   @return map.merge($primary-color-tokens, (
-    badge-disabled-state-background-color: $disabled-background,
-    badge-disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-text),
+    badge-disabled-state-background-color: $disabled-container,
+    badge-disabled-state-text-color: $disabled,
   ));
 }
 
 // Generates the tokens used to theme the badge based on a palette.
-@function private-get-color-palette-color-tokens($theme, $palette-name: primary) {
+@function private-get-color-palette-color-tokens($theme, $color-variant) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
+
   @return (
-    badge-background-color: inspection.get-theme-color($theme, $palette-name),
-    badge-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast),
+    badge-background-color: map.get($system, primary),
+    badge-text-color: map.get($system, on-primary),
   );
 }
 
@@ -94,14 +84,3 @@ $_large-size: $_default-size + 6px;
 @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(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/bottom-sheet/_m2-bottom-sheet.scss

@@ -1,6 +1,4 @@
-@use '../core/tokens/m2-utils';
 @use '../core/theming/inspection';
-@use '../core/style/sass-utils';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -14,8 +12,8 @@
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    bottom-sheet-container-text-color: inspection.get-theme-color($theme, foreground, text),
-    bottom-sheet-container-background-color: inspection.get-theme-color($theme, background, dialog),
+    bottom-sheet-container-text-color: inspection.get-theme-color($theme, system, on-surface),
+    bottom-sheet-container-background-color: inspection.get-theme-color($theme, system, surface),
   );
 }
 
@@ -37,14 +35,3 @@
 @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(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/button/_button-theme.scss

@@ -54,11 +54,11 @@
       }
 
       &.mat-accent {
-        @include _m2-button-variant($theme, accent);
+        @include _m2-button-variant($theme, secondary);
       }
 
       &.mat-warn {
-        @include _m2-button-variant($theme, warn);
+        @include _m2-button-variant($theme, error);
       }
     }
   }

package/button/_fab-theme.scss

@@ -48,11 +48,11 @@
         }
 
         &.mat-accent {
-          @include _fab-variant($theme, accent);
+          @include _fab-variant($theme, secondary);
         }
 
         &.mat-warn {
-          @include _fab-variant($theme, warn);
+          @include _fab-variant($theme, error);
         }
       }
     }

package/button/_icon-button-theme.scss

@@ -46,11 +46,11 @@
         }
 
         &.mat-accent {
-          @include _m2-icon-button-variant($theme, accent);
+          @include _m2-icon-button-variant($theme, secondary);
         }
 
         &.mat-warn {
-          @include _m2-icon-button-variant($theme, warn);
+          @include _m2-icon-button-variant($theme, error);
         }
       }
     }

package/button/_m2-button.scss

@@ -1,9 +1,8 @@
-@use 'sass:meta';
 @use 'sass:map';
 @use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
-@use '../core/style/sass-utils';
 @use '../core/style/elevation';
 
 // Tokens that can't be configured through Angular Material's current theming API,
@@ -43,134 +42,97 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   $is-dark: inspection.get-theme-type($theme) == dark;
-
-  // 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.
-  $outline: if(m2-utils.$private-is-internal-build,
-    rgba(if($is-dark, #fff, #000), 0.12),
-    inspection.get-theme-color($theme, foreground, divider)
-  );
+  $outline: inspection.get-theme-color($theme, system, outline);
+  $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
+  $disabled-container : m3-utils.color-with-opacity(map.get($system, on-surface), 12%);
 
   @return (
-    button-filled-container-color: inspection.get-theme-color($theme, background, card),
-    button-filled-disabled-container-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
-    button-filled-disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+    button-filled-container-color: map.get($system, surface),
+    button-filled-disabled-container-color: $disabled-container,
+    button-filled-disabled-label-text-color: $disabled,
     button-filled-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    button-filled-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    button-filled-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-    button-filled-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
-    button-filled-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    button-filled-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+    button-filled-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+    button-filled-label-text-color: inspection.get-theme-color($theme, foreground, base),
+    button-filled-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
     button-filled-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
     button-filled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    button-outlined-disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+    button-outlined-disabled-label-text-color: $disabled,
     button-outlined-disabled-outline-color: $outline,
     button-outlined-disabled-state-layer-color:
         inspection.get-theme-color($theme, foreground, base),
-    button-outlined-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    button-outlined-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-    button-outlined-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
+    button-outlined-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+    button-outlined-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+    button-outlined-label-text-color: inspection.get-theme-color($theme, foreground, base),
     button-outlined-outline-color: $outline,
-    button-outlined-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    button-outlined-pressed-state-layer-opacity:
+        map.get($system, pressed-state-layer-opacity),
     button-outlined-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
     button-outlined-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    button-protected-container-color: inspection.get-theme-color($theme, background, card),
-    button-protected-disabled-container-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
-    button-protected-disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+    button-protected-container-color: map.get($system, surface),
+    button-protected-disabled-container-color: $disabled-container,
+    button-protected-disabled-label-text-color: $disabled,
     button-protected-disabled-state-layer-color:
         inspection.get-theme-color($theme, foreground, base),
-    button-protected-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    button-protected-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-    button-protected-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
-    button-protected-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    button-protected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+    button-protected-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+    button-protected-label-text-color: inspection.get-theme-color($theme, foreground, base),
+    button-protected-pressed-state-layer-opacity:
+        map.get($system, pressed-state-layer-opacity),
     button-protected-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
     button-protected-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    button-text-disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+    button-text-disabled-label-text-color: $disabled,
     button-text-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    button-text-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    button-text-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-    button-text-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
-    button-text-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    button-text-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+    button-text-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+    button-text-label-text-color: inspection.get-theme-color($theme, foreground, base),
+    button-text-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
     button-text-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
     button-text-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    button-tonal-container-color: inspection.get-theme-color($theme, background, card),
-    button-tonal-disabled-container-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
-    button-tonal-disabled-label-text-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+    button-tonal-container-color: map.get($system, surface),
+    button-tonal-disabled-container-color: $disabled-container,
+    button-tonal-disabled-label-text-color: $disabled,
     button-tonal-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    button-tonal-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    button-tonal-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-    button-tonal-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
-    button-tonal-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    button-tonal-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+    button-tonal-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+    button-tonal-label-text-color: inspection.get-theme-color($theme, foreground, base),
+    button-tonal-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
     button-tonal-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
     button-tonal-state-layer-color: inspection.get-theme-color($theme, foreground, base),
   );
 }
 
 // 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);
-  $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);
-  $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
-  $container-color: inspection.get-theme-color($theme, $palette-name, default);
-  $label-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
-  $ripple-opacity: 0.1;
-
-  // 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 (m2-utils.$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: m2-utils.contrast-tone($container-color, $is-dark);
-    $color: if($contrast-tone == 'dark', #000, #fff);
-    $state-layer-color: $color;
-    $ripple-color: rgba($color, 0.1);
-    $label-text-color: if($contrast-tone == 'dark', #000, #fff);
-  }
+@function private-get-color-palette-color-tokens($theme, $color-variant) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
 
   // outlined-outline-color:
   // TODO: we shouldn't have to set this since it's the same as the non-palette version, however
   // there are a bunch of tests internally that depend on it. We should remove this and clean
   // up the screenshots separately.
   @return (
-    button-filled-container-color: $container-color,
-    button-filled-label-text-color: $label-text-color,
-    button-filled-ripple-color: $ripple-color,
-    button-filled-state-layer-color: $state-layer-color,
-    button-outlined-label-text-color: inspection.get-theme-color($theme, $palette-name, default),
+    button-filled-container-color: map.get($system, primary),
+    button-filled-label-text-color: map.get($system, on-primary),
+    button-filled-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
+    button-filled-state-layer-color: map.get($system, on-primary),
+    button-outlined-label-text-color: map.get($system, primary),
     button-outlined-outline-color: map.get(get-color-tokens($theme), button-outlined-outline-color),
-    button-outlined-ripple-color:
-        if(
-          meta.type-of(inspection.get-theme-color($theme, $palette-name)) == color,
-          rgba(inspection.get-theme-color($theme, $palette-name), $ripple-opacity),
-          inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
-    button-outlined-state-layer-color: inspection.get-theme-color($theme, $palette-name),
-    button-protected-container-color: $container-color,
-    button-protected-label-text-color: $label-text-color,
-    button-protected-ripple-color: $ripple-color,
-    button-protected-state-layer-color: $state-layer-color,
-    button-text-label-text-color: inspection.get-theme-color($theme, $palette-name),
-    button-text-ripple-color:
-        if(meta.type-of(inspection.get-theme-color($theme, $palette-name)) == color,
-          rgba(inspection.get-theme-color($theme, $palette-name), $ripple-opacity),
-          inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
-    button-text-state-layer-color: inspection.get-theme-color($theme, $palette-name),
-    button-tonal-container-color: inspection.get-theme-color($theme, $palette-name, default),
-    button-tonal-label-text-color:
-        inspection.get-theme-color($theme, $palette-name, default-contrast, 1),
-    button-tonal-ripple-color:
-        inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1),
-    button-tonal-state-layer-color:
-        inspection.get-theme-color($theme, $palette-name, default-contrast, 1),
+    button-outlined-ripple-color: m3-utils.color-with-opacity(map.get($system, primary), 10%),
+    button-outlined-state-layer-color: map.get($system, primary),
+    button-protected-container-color: map.get($system, primary),
+    button-protected-label-text-color: map.get($system, on-primary),
+    button-protected-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
+    button-protected-state-layer-color: map.get($system, on-primary),
+    button-text-label-text-color: map.get($system, primary),
+    button-text-ripple-color: m3-utils.color-with-opacity(map.get($system, primary), 10%),
+    button-text-state-layer-color: map.get($system, primary),
+    button-tonal-container-color: map.get($system, primary),
+    button-tonal-label-text-color: map.get($system, on-primary),
+    button-tonal-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
+    button-tonal-state-layer-color: map.get($system, on-primary),
   );
 }
 
@@ -238,14 +200,3 @@
     button-tonal-touch-target-display: $touch-target-display,
   );
 }
-
-// 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(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/button/_m2-fab.scss

@@ -1,8 +1,8 @@
-@use 'sass:meta';
+@use 'sass:map';
 @use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
-@use '../core/style/sass-utils';
 @use '../core/style/elevation';
 
 // Tokens that can't be configured through Angular Material's current theming API,
@@ -30,30 +30,29 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   $is-dark: inspection.get-theme-type($theme) == dark;
+  $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
+  $disabled-container : m3-utils.color-with-opacity(map.get($system, on-surface), 12%);
 
   @return (
-    fab-container-color: inspection.get-theme-color($theme, background, card),
-    fab-disabled-state-container-color:
-        inspection.get-theme-color($theme, background, disabled-button, 0.12),
-    fab-disabled-state-foreground-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+    fab-container-color: map.get($system, surface),
+    fab-disabled-state-container-color: $disabled-container,
+    fab-disabled-state-foreground-color: $disabled,
     fab-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    fab-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    fab-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     fab-foreground-color: inspection.get-theme-color($theme, foreground, base),
-    fab-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-    fab-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    fab-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+    fab-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
     fab-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
-    fab-small-container-color: inspection.get-theme-color($theme, background, card),
-    fab-small-disabled-state-container-color:
-        inspection.get-theme-color($theme, background, disabled-button, 0.12),
-    fab-small-disabled-state-foreground-color:
-        inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
+    fab-small-container-color: map.get($system, surface),
+    fab-small-disabled-state-container-color: $disabled-container,
+    fab-small-disabled-state-foreground-color: $disabled,
     fab-small-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    fab-small-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    fab-small-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     fab-small-foreground-color: inspection.get-theme-color($theme, foreground, base),
-    fab-small-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-    fab-small-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    fab-small-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+    fab-small-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
     fab-small-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
     fab-small-state-layer-color: inspection.get-theme-color($theme, foreground, base),
     fab-state-layer-color: inspection.get-theme-color($theme, foreground, base),
@@ -61,39 +60,19 @@
 }
 
 // Generates the mapping for the properties that change based on the FAB palette color.
-@function private-get-color-palette-color-tokens($theme, $palette-name) {
-  // 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.
-  $foreground-color: null;
-  $state-layer-color: null;
-  $ripple-color: null;
-  $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
-
-  @if (m2-utils.$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: m2-utils.contrast-tone($container-color, $is-dark);
-    $color: if($contrast-tone == 'dark', #000, #fff);
-    $foreground-color: $color;
-    $state-layer-color: $color;
-    $ripple-color: rgba($color, 0.1);
-  }
-  @else {
-    $foreground-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);
-  }
+@function private-get-color-palette-color-tokens($theme, $color-variant) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
 
   @return (
-    fab-container-color: inspection.get-theme-color($theme, $palette-name, default),
-    fab-foreground-color: $foreground-color,
-    fab-ripple-color: $ripple-color,
-    fab-small-container-color: inspection.get-theme-color($theme, $palette-name, default),
-    fab-small-foreground-color: $foreground-color,
-    fab-small-ripple-color: $ripple-color,
-    fab-small-state-layer-color: $state-layer-color,
-    fab-state-layer-color: $state-layer-color,
+    fab-container-color: map.get($system, primary),
+    fab-foreground-color: map.get($system, on-primary),
+    fab-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
+    fab-small-container-color: map.get($system, primary),
+    fab-small-foreground-color: map.get($system, on-primary),
+    fab-small-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
+    fab-small-state-layer-color: map.get($system, on-primary),
+    fab-state-layer-color: map.get($system, on-primary),
   );
 }
 
@@ -117,14 +96,3 @@
     fab-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(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/button/_m2-icon-button.scss

@@ -1,9 +1,8 @@
-@use 'sass:meta';
 @use 'sass:map';
-@use '../core/tokens/m2-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
-@use '../core/style/sass-utils';
+@use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -16,32 +15,30 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   $is-dark: inspection.get-theme-type($theme) == dark;
 
   @return (
     icon-button-disabled-icon-color: if($is-dark, rgba(#fff, 0.5), rgba(#000, 0.38)),
     icon-button-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    icon-button-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    icon-button-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
+    icon-button-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+    icon-button-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     icon-button-icon-color: inherit,
-    icon-button-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    icon-button-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
     icon-button-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
     icon-button-state-layer-color: inspection.get-theme-color($theme, foreground, base),
   );
 }
 
 // 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;
+@function private-get-color-palette-color-tokens($theme, $color-variant) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
 
   @return (
-    icon-button-icon-color: inspection.get-theme-color($theme, $palette-name),
-    icon-button-state-layer-color: $color,
-    icon-button-ripple-color: if(
-      meta.type-of($color) == color,
-      rgba($color, $ripple-opacity),
-      inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
+    icon-button-icon-color: map.get($system, primary),
+    icon-button-state-layer-color: map.get($system, primary),
+    icon-button-ripple-color: m3-utils.color-with-opacity(map.get($system, primary), 10%),
   );
 }
 
@@ -72,14 +69,3 @@
 
   @return $tokens;
 }
-
-// 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(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/button-toggle/_button-toggle-theme.scss

@@ -15,7 +15,8 @@
     @include token-utils.create-token-values(map.get(m3-button-toggle.get-tokens($theme), base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-button-toggle.get-unthemable-tokens());
+      @include token-utils.create-token-values-mixed(
+          m2-button-toggle.get-unthemable-tokens($theme));
     }
   }
 }