refactor: switch m2 from palette divider to system outline (#31200)

Co-authored-by: Andrew Seguin <andrewseguin@google.com>

Author: andrewseguin

src/material-experimental/column-resize/_column-resize-theme.scss

@@ -1,7 +1,6 @@
 @use '@angular/material' as mat;
 
 @mixin color($theme) {
-  $non-resizable-hover-divider: mat.get-theme-color($theme, foreground, divider);
   $resizable-hover-divider: mat.get-theme-color($theme, primary, 600);
   $resizable-active-divider: mat.get-theme-color($theme, primary, 600);
 
@@ -65,15 +64,15 @@
 
     .mat-header-cell:not(.mat-resizable)::after,
     .mat-mdc-header-cell:not(.mat-resizable)::after {
-      background: $non-resizable-hover-divider;
+      background: mat.get-theme-color($theme, system, outline);
     }
 
     .mat-resizable-handle {
       background: $resizable-hover-divider;
     }
 
     .cdk-resizable-resize-disabled > .mat-resizable-handle {
-      background: $non-resizable-hover-divider;
+      background: mat.get-theme-color($theme, system, outline);
     }
   }
 

src/material/button-toggle/_m2-button-toggle.scss

@@ -19,7 +19,7 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  $theme-divider-color: inspection.get-theme-color($theme, foreground, divider);
+  $theme-divider-color: inspection.get-theme-color($theme, system, outline);
 
   // By default the theme usually has an rgba color for the dividers, which can
   // stack up with the background of a button toggle. This can cause the border

src/material/button/_m2-button.scss

@@ -48,7 +48,7 @@
   // 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)
+    inspection.get-theme-color($theme, system, outline)
   );
 
   @return (

src/material/core/m2/_theming.scss

@@ -124,6 +124,7 @@
     system: (
       surface: white,
       on-surface: rgba(black, 0.87),
+      outline: rgba(black, 0.12),
     ),
   );
 }
@@ -141,6 +142,7 @@
     system: (
       surface: map.get(palette.$grey-palette, 800),
       on-surface: white,
+      outline: rgba(white, 0.12),
     ),
   );
 }

src/material/datepicker/_m2-datepicker.scss

@@ -41,9 +41,8 @@ $private-default-overlap-color: #a8dab5;
   $text-color: inspection.get-theme-color($theme, system, on-surface);
   $secondary-text-color: inspection.get-theme-color($theme, foreground, secondary-text);
   $disabled-text-color: inspection.get-theme-color($theme, foreground, disabled-text);
-  $divider-color: inspection.get-theme-color($theme, foreground, divider);
   $hint-text-color: inspection.get-theme-color($theme, foreground, hint-text);
-  $preview-outline-color: $divider-color;
+  $preview-outline-color: inspection.get-theme-color($theme, system, outline);
   $today-disabled-outline-color: null;
   $is-dark: inspection.get-theme-type($theme) == dark;
 
@@ -74,7 +73,7 @@ $private-default-overlap-color: #a8dab5;
         inspection.get-theme-color($theme, foreground, text, 1),
     datepicker-calendar-period-button-icon-color: $inactive-icon-color,
     datepicker-calendar-navigation-button-icon-color: $inactive-icon-color,
-    datepicker-calendar-header-divider-color: $divider-color,
+    datepicker-calendar-header-divider-color: inspection.get-theme-color($theme, system, outline),
     datepicker-calendar-header-text-color: $secondary-text-color,
 
     // Note: though it's not text, the border is a hint about the fact

src/material/divider/_m2-divider.scss

@@ -11,7 +11,7 @@
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    divider-color: inspection.get-theme-color($theme, foreground, divider)
+    divider-color: inspection.get-theme-color($theme, system, outline)
   );
 }
 

src/material/expansion/_m2-expansion.scss

@@ -17,7 +17,7 @@
   @return (
     expansion-container-background-color: inspection.get-theme-color($theme, system, surface),
     expansion-container-text-color: inspection.get-theme-color($theme, system, on-surface),
-    expansion-actions-divider-color: inspection.get-theme-color($theme, foreground, divider),
+    expansion-actions-divider-color: inspection.get-theme-color($theme, system, outline),
     expansion-header-hover-state-layer-color: inspection.get-theme-color($theme, background, hover),
     expansion-header-focus-state-layer-color: inspection.get-theme-color($theme, background, hover),
     expansion-header-disabled-state-text-color: inspection.get-theme-color(

src/material/form-field/_m2-form-field.scss

@@ -37,7 +37,7 @@
   $disabled-text-color-base: if(m2-utils.$private-is-internal-build, $on-surface,
     inspection.get-theme-color($theme, foreground, disabled-text, 1));
   $divider-base: if(m2-utils.$private-is-internal-build, $on-surface,
-    inspection.get-theme-color($theme, foreground, divider, 1));
+    inspection.get-theme-color($theme, foreground, base));
 
   @return map.merge($color-tokens, (
     // MDC has a token for the enabled placeholder, but not for the disabled one.

src/material/menu/_m2-menu.scss

@@ -34,7 +34,7 @@
     menu-item-hover-state-layer-color: $active-state-layer-color,
     menu-item-focus-state-layer-color: $active-state-layer-color,
     menu-container-color: inspection.get-theme-color($theme, system, surface),
-    menu-divider-color: inspection.get-theme-color($theme, foreground, divider),
+    menu-divider-color: inspection.get-theme-color($theme, system, outline),
   );
 }
 

src/material/select/_m2-select.scss

@@ -25,7 +25,7 @@
   $disabled-text-color-base: if(m2-utils.$private-is-internal-build, $on-surface,
     inspection.get-theme-color($theme, foreground, disabled-text, 1));
   $icon-color-base: if(m2-utils.$private-is-internal-build, $on-surface,
-    inspection.get-theme-color($theme, foreground, divider, 1));
+    inspection.get-theme-color($theme, foreground, base));
 
   @return (
     select-panel-background-color: inspection.get-theme-color($theme, system, surface),

src/material/sidenav/_m2-sidenav.scss

@@ -25,7 +25,7 @@
   $fallback-scrim-color: if($is-dark, rgba(#fff, $scrim-opacity), rgba(#000, $scrim-opacity));
 
   @return (
-    sidenav-container-divider-color: inspection.get-theme-color($theme, foreground, divider),
+    sidenav-container-divider-color: inspection.get-theme-color($theme, system, outline),
     sidenav-container-background-color: inspection.get-theme-color($theme, system, surface),
     sidenav-container-text-color: inspection.get-theme-color($theme, system, on-surface),
     sidenav-content-background-color: inspection.get-theme-color($theme, background, background),

src/material/stepper/_m2-stepper.scss

@@ -15,7 +15,7 @@
 @function get-color-tokens($theme) {
   @return map.merge(private-get-color-palette-color-tokens($theme, primary), (
     stepper-container-color: inspection.get-theme-color($theme, system, surface),
-    stepper-line-color: inspection.get-theme-color($theme, foreground, divider),
+    stepper-line-color: inspection.get-theme-color($theme, system, outline),
     stepper-header-hover-state-layer-color: inspection.get-theme-color($theme, background, hover),
     stepper-header-focus-state-layer-color: inspection.get-theme-color($theme, background, hover),
     stepper-header-label-text-color: inspection.get-theme-color($theme, foreground, secondary-text),

src/material/table/_m2-table.scss

@@ -17,7 +17,7 @@
 
     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, foreground, divider),
+    table-row-item-outline-color: inspection.get-theme-color($theme, system, outline),
   );
 }