From f5758103ec6476fbf36d500287fa698c4e61170a Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Thu, 22 May 2025 14:36:45 -0600 Subject: [PATCH] refactor: switch m2 from palette divider to system outline --- .../column-resize/_column-resize-theme.scss | 5 ++--- src/material/button-toggle/_m2-button-toggle.scss | 2 +- src/material/button/_m2-button.scss | 2 +- src/material/core/m2/_theming.scss | 2 ++ src/material/datepicker/_m2-datepicker.scss | 5 ++--- src/material/divider/_m2-divider.scss | 2 +- src/material/expansion/_m2-expansion.scss | 2 +- src/material/form-field/_m2-form-field.scss | 2 +- src/material/menu/_m2-menu.scss | 2 +- src/material/select/_m2-select.scss | 2 +- src/material/sidenav/_m2-sidenav.scss | 2 +- src/material/stepper/_m2-stepper.scss | 2 +- src/material/table/_m2-table.scss | 2 +- 13 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/material-experimental/column-resize/_column-resize-theme.scss b/src/material-experimental/column-resize/_column-resize-theme.scss index faeb574345d4..8d84ca04c912 100644 --- a/src/material-experimental/column-resize/_column-resize-theme.scss +++ b/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,7 +64,7 @@ .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 { @@ -73,7 +72,7 @@ } .cdk-resizable-resize-disabled > .mat-resizable-handle { - background: $non-resizable-hover-divider; + background: mat.get-theme-color($theme, system, outline); } } diff --git a/src/material/button-toggle/_m2-button-toggle.scss b/src/material/button-toggle/_m2-button-toggle.scss index 6afa0d7c5f73..526118d149f5 100644 --- a/src/material/button-toggle/_m2-button-toggle.scss +++ b/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 diff --git a/src/material/button/_m2-button.scss b/src/material/button/_m2-button.scss index e836f759899f..280d1aa75ac7 100644 --- a/src/material/button/_m2-button.scss +++ b/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 ( diff --git a/src/material/core/m2/_theming.scss b/src/material/core/m2/_theming.scss index 46cc223b97f2..3b3e99e670d3 100644 --- a/src/material/core/m2/_theming.scss +++ b/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), ), ); } diff --git a/src/material/datepicker/_m2-datepicker.scss b/src/material/datepicker/_m2-datepicker.scss index 2508054d7ad8..bbbf7878052c 100644 --- a/src/material/datepicker/_m2-datepicker.scss +++ b/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 diff --git a/src/material/divider/_m2-divider.scss b/src/material/divider/_m2-divider.scss index cddad07f9f38..1dd41578ccf3 100644 --- a/src/material/divider/_m2-divider.scss +++ b/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) ); } diff --git a/src/material/expansion/_m2-expansion.scss b/src/material/expansion/_m2-expansion.scss index cc2364456532..497910822f82 100644 --- a/src/material/expansion/_m2-expansion.scss +++ b/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( diff --git a/src/material/form-field/_m2-form-field.scss b/src/material/form-field/_m2-form-field.scss index 3a01c6556cb7..0e4b24ae292e 100644 --- a/src/material/form-field/_m2-form-field.scss +++ b/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. diff --git a/src/material/menu/_m2-menu.scss b/src/material/menu/_m2-menu.scss index 76b2ad57f718..1881afb799a0 100644 --- a/src/material/menu/_m2-menu.scss +++ b/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), ); } diff --git a/src/material/select/_m2-select.scss b/src/material/select/_m2-select.scss index 0b8a2b7fda2b..e25e44b77aa0 100644 --- a/src/material/select/_m2-select.scss +++ b/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), diff --git a/src/material/sidenav/_m2-sidenav.scss b/src/material/sidenav/_m2-sidenav.scss index 1fe7cd3c093c..4282e1109b72 100644 --- a/src/material/sidenav/_m2-sidenav.scss +++ b/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), diff --git a/src/material/stepper/_m2-stepper.scss b/src/material/stepper/_m2-stepper.scss index fdd6535bc8e4..c21c482d7733 100644 --- a/src/material/stepper/_m2-stepper.scss +++ b/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), diff --git a/src/material/table/_m2-table.scss b/src/material/table/_m2-table.scss index 8a4613b90bdb..8831e2b82bb8 100644 --- a/src/material/table/_m2-table.scss +++ b/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), ); }