@angular/material 20.1.0-next.0 → 20.1.0-next.1

package/slider/_m2-slider.scss

@@ -1,6 +1,8 @@
 @use 'sass:map';
 @use '../core/theming/inspection';
 @use '../core/style/elevation';
+@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.
@@ -31,44 +33,43 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   $theme-color-tokens: private-get-color-palette-color-tokens($theme, primary);
-  $is-dark: inspection.get-theme-type($theme) == dark;
-  $on-surface: if($is-dark, #fff, #000);
 
   @return map.merge(
     $theme-color-tokens,
     (
-      slider-disabled-active-track-color: inspection.get-theme-color($theme, system, on-surface),
-      slider-disabled-handle-color: inspection.get-theme-color($theme, system, on-surface),
-      slider-disabled-inactive-track-color: inspection.get-theme-color($theme, system, on-surface),
-      slider-label-container-color: $on-surface,
-      slider-label-label-text-color: if($is-dark, #000, #fff),
-      slider-value-indicator-opacity: if($is-dark, 0.9, 0.6),
-      slider-with-overlap-handle-outline-color: #fff,
-      slider-with-tick-marks-disabled-container-color:
-          inspection.get-theme-color($theme, system, on-surface),
+      slider-disabled-active-track-color: map.get($system, on-surface),
+      slider-disabled-handle-color: map.get($system, on-surface),
+      slider-disabled-inactive-track-color: map.get($system, on-surface),
+      slider-label-container-color: map.get($system, inverse-surface),
+      slider-label-label-text-color: map.get($system, inverse-on-surface),
+      slider-value-indicator-opacity: 1,
+      slider-with-overlap-handle-outline-color: map.get($system, on-surface),
+      slider-with-tick-marks-disabled-container-color: map.get($system, on-surface),
     ),
   );
 }
 
 // Generates tokens for the slider properties that change based on the theme.
-@function private-get-color-palette-color-tokens($theme, $palette-name) {
-  $color: inspection.get-theme-color($theme, $palette-name);
-  $hover-ripple-color: if($color == null, null, #{rgba($color, 0.05)});
-  $focus-ripple-color: if($color == null, null, #{rgba($color, 0.2)});
-  $on-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
+@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);
+  $color: map.get($system, primary);
 
   @return (
-    slider-active-track-color: $color,
-    slider-focus-handle-color: $color,
-    slider-focus-state-layer-color: $focus-ripple-color,
-    slider-handle-color: $color,
-    slider-hover-handle-color: $color,
-    slider-hover-state-layer-color: $hover-ripple-color,
-    slider-inactive-track-color: $color,
-    slider-ripple-color: $color,
-    slider-with-tick-marks-active-container-color: $on-color,
-    slider-with-tick-marks-inactive-container-color: $color,
+    slider-active-track-color: map.get($system, primary),
+    slider-focus-handle-color: map.get($system, primary),
+    slider-handle-color: map.get($system, primary),
+    slider-hover-handle-color: map.get($system, primary),
+    slider-focus-state-layer-color: m3-utils.color-with-opacity(
+        map.get($system, primary), map.get($system, focus-state-layer-opacity)),
+    slider-hover-state-layer-color: m3-utils.color-with-opacity(
+        map.get($system, primary), map.get($system, hover-state-layer-opacity)),
+    slider-inactive-track-color: map.get($system, primary),
+    slider-ripple-color: map.get($system, primary),
+    slider-with-tick-marks-active-container-color: map.get($system, on-primary),
+    slider-with-tick-marks-inactive-container-color: map.get($system, primary),
   );
 }
 

package/slider/_slider-theme.scss

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

package/snack-bar/_m2-snack-bar.scss

@@ -14,7 +14,6 @@
 @function get-color-tokens($theme) {
   $is-dark: inspection.get-theme-type($theme) == dark;
   $system: m2-utils.get-system($theme);
-  $surface: inspection.get-theme-color($theme, system, surface);
 
   @return (
     snack-bar-container-color: map.get($system, inverse-surface),

package/sort/_m2-sort.scss

@@ -1,4 +1,5 @@
-@use '../core/theming/inspection';
+@use '../core/tokens/m2-utils';
+@use 'sass:map';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -8,8 +9,10 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   @return (
-    sort-arrow-color: inspection.get-theme-color($theme, system, on-surface),
+    sort-arrow-color: map.get($system, on-surface),
   );
 }
 

package/table/_m2-table.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/tokens/m2-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.
@@ -12,12 +13,13 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  @return (
-    table-background-color: inspection.get-theme-color($theme, system, surface),
+  $system: m2-utils.get-system($theme);
 
-    table-header-headline-color: inspection.get-theme-color($theme, system, on-surface),
-    table-row-item-label-text-color: inspection.get-theme-color($theme, system, on-surface),
-    table-row-item-outline-color: inspection.get-theme-color($theme, system, outline),
+  @return (
+    table-background-color: map.get($system, surface),
+    table-header-headline-color: map.get($system, on-surface),
+    table-row-item-label-text-color: map.get($system, on-surface),
+    table-row-item-outline-color: map.get($system, outline),
   );
 }
 

package/tabs/_m2-tabs.scss

@@ -29,22 +29,16 @@
 @function get-color-tokens($theme, $color-variant, $exclude: ()) {
   $system: m2-utils.get-system($theme);
   $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
-  $is-dark: inspection.get-theme-type($theme) == dark;
-  $inactive-label-text-color: inspection.get-theme-color($theme, foreground, base, 0.6);
 
   $tokens: (
-    tab-disabled-ripple-color: inspection.get-theme-color($theme, foreground, disabled),
-    tab-pagination-icon-color: inspection.get-theme-color($theme, system, on-surface),
-
-    // Note: MDC has equivalents of these tokens, but they lead to much higher selector specificity.
-    tab-inactive-label-text-color: $inactive-label-text-color,
+    tab-disabled-ripple-color: map.get($system, on-surface-variant),
+    tab-pagination-icon-color: map.get($system, on-surface),
+    tab-inactive-label-text-color: map.get($system, on-surface-variant),
     tab-active-label-text-color: map.get($system, primary),
-
-    // Tokens needed to implement the gmat styles. Externally they don't change.
     tab-active-ripple-color: map.get($system, primary),
     tab-inactive-ripple-color: map.get($system, primary),
-    tab-inactive-focus-label-text-color: $inactive-label-text-color,
-    tab-inactive-hover-label-text-color: $inactive-label-text-color,
+    tab-inactive-focus-label-text-color: map.get($system, on-surface-variant),
+    tab-inactive-hover-label-text-color: map.get($system, on-surface-variant),
     tab-active-focus-label-text-color: map.get($system, primary),
     tab-active-hover-label-text-color: map.get($system, primary),
     tab-active-focus-indicator-color: map.get($system, primary),

package/timepicker/_m2-timepicker.scss

@@ -1,5 +1,6 @@
-@use '../core/theming/inspection';
 @use '../core/style/elevation';
+@use '../core/tokens/m2-utils';
+@use 'sass:map';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -12,8 +13,10 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   @return (
-    timepicker-container-background-color: inspection.get-theme-color($theme, system, surface)
+    timepicker-container-background-color: map.get($system, surface)
   );
 }
 

package/toolbar/_m2-toolbar.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/tokens/m2-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.
@@ -10,9 +11,10 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return private-get-color-palette-color-tokens(
-    $background-color: inspection.get-theme-color($theme, system, surface),
-    $text-color: inspection.get-theme-color($theme, system, on-surface),
+    $background-color: map.get($system, surface),
+    $text-color: map.get($system, on-surface),
   );
 }
 

package/tree/_m2-tree.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/tokens/m2-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.
@@ -10,9 +11,11 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   @return (
-    tree-container-background-color: inspection.get-theme-color($theme, system, surface),
-    tree-node-text-color: inspection.get-theme-color($theme, system, on-surface),
+    tree-container-background-color: map.get($system, surface),
+    tree-node-text-color: map.get($system, on-surface),
   );
 }