diff --git a/src/material/button-toggle/_m2-button-toggle.scss b/src/material/button-toggle/_m2-button-toggle.scss index 6d16c0347346..f8db3fa25380 100644 --- a/src/material/button-toggle/_m2-button-toggle.scss +++ b/src/material/button-toggle/_m2-button-toggle.scss @@ -46,7 +46,7 @@ button-toggle-selected-state-background-color: inspection.get-theme-color($theme, background, selected-button), button-toggle-selected-state-text-color: inspection.get-theme-color($theme, system, on-surface), - button-toggle-state-layer-color: inspection.get-theme-color($theme, background, base), + button-toggle-state-layer-color: inspection.get-theme-color($theme, system, on-surface), button-toggle-text-color: inspection.get-theme-color($theme, system, on-surface), ); } diff --git a/src/material/checkbox/_m2-checkbox.scss b/src/material/checkbox/_m2-checkbox.scss index 5dd4308461e0..89f8e62dc93c 100644 --- a/src/material/checkbox/_m2-checkbox.scss +++ b/src/material/checkbox/_m2-checkbox.scss @@ -3,8 +3,6 @@ @use '../core/tokens/m3-utils'; @use '../core/theming/theming'; @use '../core/theming/inspection'; -@use '../core/m2/theming' as m2-theming; -@use '../core/m2/palette' as m2-palette; // Tokens that can't be configured through Angular Material's current theming API, // but may be in a future version of the theming API. @@ -32,8 +30,6 @@ $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%); $palette-selected: inspection.get-theme-color($theme, $palette-name); $border-color: inspection.get-theme-color($theme, foreground, base, 0.54); - $active-border-color: - m2-theming.get-color-from-palette(m2-palette.$gray-palette, if($is-dark, 200, 900)); $selected-checkmark-color: inspection.get-theme-color($theme, $palette-name, default-contrast); @@ -47,14 +43,14 @@ checkbox-selected-hover-icon-color: $palette-selected, checkbox-selected-icon-color: $palette-selected, checkbox-selected-pressed-icon-color: $palette-selected, - checkbox-unselected-focus-icon-color: $active-border-color, - checkbox-unselected-hover-icon-color: $active-border-color, + checkbox-unselected-focus-icon-color: map.get($system, on-surface), + checkbox-unselected-hover-icon-color: map.get($system, on-surface), checkbox-unselected-icon-color: $border-color, checkbox-selected-focus-state-layer-color: $palette-default, checkbox-selected-hover-state-layer-color: $palette-default, checkbox-selected-pressed-state-layer-color: $palette-default, - checkbox-unselected-focus-state-layer-color: $foreground-base, - checkbox-unselected-hover-state-layer-color: $foreground-base, + checkbox-unselected-focus-state-layer-color: map.get($system, on-surface), + checkbox-unselected-hover-state-layer-color: map.get($system, on-surface), checkbox-unselected-pressed-state-layer-color: $foreground-base, ); diff --git a/src/material/datepicker/_m2-datepicker.scss b/src/material/datepicker/_m2-datepicker.scss index fcf8729b4a78..89b585fa0bed 100644 --- a/src/material/datepicker/_m2-datepicker.scss +++ b/src/material/datepicker/_m2-datepicker.scss @@ -42,7 +42,6 @@ $private-default-overlap-color: #a8dab5; @function get-color-tokens($theme) { $system: m2-utils.get-system($theme); $inactive-icon-color: inspection.get-theme-color($theme, foreground, icon); - $text-color: inspection.get-theme-color($theme, system, on-surface); $secondary-text-color: inspection.get-theme-color($theme, foreground, secondary-text); $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%); $hint-text-color: inspection.get-theme-color($theme, foreground, hint-text); @@ -84,18 +83,20 @@ $private-default-overlap-color: #a8dab5; // that this is today's date, so we use the hint color. datepicker-calendar-date-today-outline-color: $hint-text-color, datepicker-calendar-date-today-disabled-state-outline-color: $today-disabled-outline-color, - datepicker-calendar-date-text-color: $text-color, + datepicker-calendar-date-text-color: inspection.get-theme-color($theme, system, on-surface), datepicker-calendar-date-outline-color: transparent, datepicker-calendar-date-disabled-state-text-color: $disabled, datepicker-calendar-date-preview-state-outline-color: $preview-outline-color, - datepicker-range-input-separator-color: $text-color, + datepicker-range-input-separator-color: + inspection.get-theme-color($theme, system, on-surface), datepicker-range-input-disabled-state-separator-color: $disabled, datepicker-range-input-disabled-state-text-color: $disabled, datepicker-calendar-container-background-color: inspection.get-theme-color($theme, system, surface), - datepicker-calendar-container-text-color: $text-color, + datepicker-calendar-container-text-color: + inspection.get-theme-color($theme, system, on-surface), )); } diff --git a/src/material/dialog/_m2-dialog.scss b/src/material/dialog/_m2-dialog.scss index 2f7c9f0614dd..ab4b104e1335 100644 --- a/src/material/dialog/_m2-dialog.scss +++ b/src/material/dialog/_m2-dialog.scss @@ -26,7 +26,7 @@ $is-dark: inspection.get-theme-type($theme) == dark; @return ( dialog-container-color: inspection.get-theme-color($theme, system, surface), - dialog-subhead-color: inspection.get-theme-color($theme, foreground, base, 0.87), + dialog-subhead-color: inspection.get-theme-color($theme, system, on-surface), dialog-supporting-text-color: inspection.get-theme-color($theme, foreground, base, 0.6), ); } diff --git a/src/material/form-field/_m2-form-field.scss b/src/material/form-field/_m2-form-field.scss index 8c4741307abb..35bd5a13be1f 100644 --- a/src/material/form-field/_m2-form-field.scss +++ b/src/material/form-field/_m2-form-field.scss @@ -36,7 +36,7 @@ // MDC has a token for the enabled placeholder, but not for the disabled one. form-field-disabled-input-text-placeholder-color: inspection.get-theme-color($theme, foreground, base, 0.38), - form-field-state-layer-color: inspection.get-theme-color($theme, foreground, base, 0.87), + form-field-state-layer-color: inspection.get-theme-color($theme, system, on-surface), form-field-error-text-color: inspection.get-theme-color($theme, warn), // On dark themes we set the native `select` color to some shade of white, @@ -75,7 +75,7 @@ inspection.get-theme-color($theme, foreground, base, 0.6), form-field-filled-disabled-label-text-color: $disabled, form-field-filled-input-text-color: - inspection.get-theme-color($theme, foreground, base, 0.87), + inspection.get-theme-color($theme, system, on-surface), form-field-filled-disabled-input-text-color: $disabled, form-field-filled-input-text-placeholder-color: inspection.get-theme-color($theme, foreground, base, 0.6), @@ -88,7 +88,7 @@ form-field-filled-disabled-active-indicator-color: inspection.get-theme-color($theme, foreground, base, 0.06), form-field-filled-hover-active-indicator-color: - inspection.get-theme-color($theme, foreground, base, 0.87), + inspection.get-theme-color($theme, system, on-surface), form-field-filled-error-active-indicator-color: $warn-color, form-field-filled-error-focus-active-indicator-color: $warn-color, form-field-filled-error-hover-active-indicator-color: $warn-color, @@ -98,7 +98,7 @@ inspection.get-theme-color($theme, foreground, base, 0.6), form-field-outlined-disabled-label-text-color: $disabled, form-field-outlined-input-text-color: - inspection.get-theme-color($theme, foreground, base, 0.87), + inspection.get-theme-color($theme, system, on-surface), form-field-outlined-disabled-input-text-color: $disabled, form-field-outlined-input-text-placeholder-color: inspection.get-theme-color($theme, foreground, base, 0.6), @@ -110,7 +110,7 @@ form-field-outlined-disabled-outline-color: inspection.get-theme-color($theme, foreground, base, 0.06), form-field-outlined-hover-outline-color: - inspection.get-theme-color($theme, foreground, base, 0.87), + inspection.get-theme-color($theme, system, on-surface), form-field-outlined-error-focus-outline-color: $warn-color, form-field-outlined-error-hover-outline-color: $warn-color, form-field-outlined-error-outline-color: $warn-color, diff --git a/src/material/list/_m2-list.scss b/src/material/list/_m2-list.scss index c7c66ee919cc..e55e654e1d68 100644 --- a/src/material/list/_m2-list.scss +++ b/src/material/list/_m2-list.scss @@ -29,30 +29,28 @@ $system: m2-utils.get-system($theme); $is-dark: inspection.get-theme-type($theme) == dark; - $foreground-base: inspection.get-theme-color($theme, foreground, base); - $foreground-text: map.get($system, on-surface); $foreground-secondary-text: inspection.get-theme-color($theme, foreground, secondary-text); $foreground-hint-text: inspection.get-theme-color($theme, foreground, hint-text); $text-icon-on-background: inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)); @return ( - list-list-item-label-text-color: $foreground-text, + list-list-item-label-text-color: map.get($system, on-surface), list-list-item-supporting-text-color: $foreground-secondary-text, list-list-item-leading-icon-color: $text-icon-on-background, list-list-item-trailing-supporting-text-color: $foreground-hint-text, list-list-item-trailing-icon-color: $text-icon-on-background, list-list-item-selected-trailing-icon-color: $text-icon-on-background, - list-list-item-disabled-label-text-color: $foreground-base, - list-list-item-disabled-leading-icon-color: $foreground-base, - list-list-item-disabled-trailing-icon-color: $foreground-base, - list-list-item-hover-label-text-color: $foreground-text, + list-list-item-disabled-label-text-color: map.get($system, on-surface), + list-list-item-disabled-leading-icon-color: map.get($system, on-surface), + list-list-item-disabled-trailing-icon-color: map.get($system, on-surface), + list-list-item-hover-label-text-color: map.get($system, on-surface), list-list-item-hover-leading-icon-color: $text-icon-on-background, - list-list-item-hover-state-layer-color: $foreground-base, + list-list-item-hover-state-layer-color: map.get($system, on-surface), list-list-item-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity), list-list-item-hover-trailing-icon-color: $text-icon-on-background, - list-list-item-focus-label-text-color: $foreground-text, - list-list-item-focus-state-layer-color: $foreground-base, + list-list-item-focus-label-text-color: map.get($system, on-surface), + list-list-item-focus-state-layer-color: map.get($system, on-surface), list-list-item-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity), ); } diff --git a/src/material/menu/_m2-menu.scss b/src/material/menu/_m2-menu.scss index 1881afb799a0..0b45d4626ce1 100644 --- a/src/material/menu/_m2-menu.scss +++ b/src/material/menu/_m2-menu.scss @@ -26,11 +26,10 @@ $is-dark: inspection.get-theme-type($theme) == dark; $active-state-layer-color: inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.08, 0.04)); - $text-color: inspection.get-theme-color($theme, system, on-surface); @return ( - menu-item-label-text-color: $text-color, - menu-item-icon-color: $text-color, + menu-item-label-text-color: inspection.get-theme-color($theme, system, on-surface), + menu-item-icon-color: inspection.get-theme-color($theme, system, on-surface), 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), diff --git a/src/material/paginator/_m2-paginator.scss b/src/material/paginator/_m2-paginator.scss index 30395ed81efa..dc37f4cfc403 100644 --- a/src/material/paginator/_m2-paginator.scss +++ b/src/material/paginator/_m2-paginator.scss @@ -12,7 +12,7 @@ // Tokens that can be configured through Angular Material's color theming API. @function get-color-tokens($theme) { @return ( - paginator-container-text-color: inspection.get-theme-color($theme, foreground, base, 0.87), + paginator-container-text-color: inspection.get-theme-color($theme, system, on-surface), paginator-container-background-color: inspection.get-theme-color($theme, system, surface), paginator-enabled-icon-color: inspection.get-theme-color($theme, foreground, base, 0.54), paginator-disabled-icon-color: inspection.get-theme-color($theme, foreground, base, 0.12), diff --git a/src/material/radio/_m2-radio.scss b/src/material/radio/_m2-radio.scss index 0a7c293eb710..dafe8b7304eb 100644 --- a/src/material/radio/_m2-radio.scss +++ b/src/material/radio/_m2-radio.scss @@ -1,8 +1,6 @@ @use 'sass:map'; @use '../core/theming/theming'; @use '../core/theming/inspection'; -@use '../core/m2/palette' as m2-palette; -@use '../core/m2/theming' as m2-theming; @use '../core/tokens/m2-utils'; @use '../core/tokens/m3-utils'; @@ -24,24 +22,23 @@ $system: m2-utils.get-system($theme); $is-dark: inspection.get-theme-type($theme) == dark; $palette-color: inspection.get-theme-color($theme, $palette-name, default); - $icon-color: m2-theming.get-color-from-palette(m2-palette.$gray-palette, if($is-dark, 200, 900)); $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%); @return ( radio-checked-ripple-color: inspection.get-theme-color($theme, $palette-name, default), radio-disabled-label-color: $disabled, - radio-disabled-selected-icon-color: inspection.get-theme-color($theme, foreground, base), - radio-disabled-unselected-icon-color: inspection.get-theme-color($theme, foreground, base), - radio-label-text-color: inspection.get-theme-color($theme, system, on-surface), - radio-ripple-color: inspection.get-theme-color($theme, foreground, base), + radio-disabled-selected-icon-color: map.get($system, on-surface), + radio-disabled-unselected-icon-color: map.get($system, on-surface), + radio-label-text-color: map.get($system, on-surface), + radio-ripple-color: map.get($system, on-surface), radio-selected-focus-icon-color: $palette-color, radio-selected-hover-icon-color: $palette-color, radio-selected-icon-color: $palette-color, radio-selected-pressed-icon-color: $palette-color, - radio-unselected-focus-icon-color: $icon-color, - radio-unselected-hover-icon-color: $icon-color, + radio-unselected-focus-icon-color: map.get($system, on-surface), + radio-unselected-hover-icon-color: map.get($system, on-surface), radio-unselected-icon-color: inspection.get-theme-color($theme, foreground, base, 0.54), - radio-unselected-pressed-icon-color: inspection.get-theme-color($theme, foreground, base, 0.54), + radio-unselected-pressed-icon-color: map.get($system, on-surface), ); } diff --git a/src/material/select/_m2-select.scss b/src/material/select/_m2-select.scss index ec5e640550d7..a54b629cd403 100644 --- a/src/material/select/_m2-select.scss +++ b/src/material/select/_m2-select.scss @@ -20,7 +20,7 @@ @return ( select-panel-background-color: inspection.get-theme-color($theme, system, surface), - select-enabled-trigger-text-color: inspection.get-theme-color($theme, foreground, base, 0.87), + select-enabled-trigger-text-color: inspection.get-theme-color($theme, system, on-surface), select-disabled-trigger-text-color: $disabled, select-placeholder-text-color: inspection.get-theme-color($theme, foreground, base, 0.6), select-enabled-arrow-color: inspection.get-theme-color($theme, foreground, base, 0.54), diff --git a/src/material/slider/_m2-slider.scss b/src/material/slider/_m2-slider.scss index bc13d030d162..504befe82c43 100644 --- a/src/material/slider/_m2-slider.scss +++ b/src/material/slider/_m2-slider.scss @@ -33,20 +33,20 @@ @function get-color-tokens($theme) { $theme-color-tokens: private-get-color-palette-color-tokens($theme, primary); $is-dark: inspection.get-theme-type($theme) == dark; - $elevation: inspection.get-theme-color($theme, foreground, elevation); $on-surface: if($is-dark, #fff, #000); @return map.merge( $theme-color-tokens, ( - slider-disabled-active-track-color: $on-surface, - slider-disabled-handle-color: $on-surface, - slider-disabled-inactive-track-color: $on-surface, + 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: $on-surface, + slider-with-tick-marks-disabled-container-color: + inspection.get-theme-color($theme, system, on-surface), ), ); } diff --git a/src/material/tabs/_m2-tabs.scss b/src/material/tabs/_m2-tabs.scss index 1fbaadd48691..6691ca0caf82 100644 --- a/src/material/tabs/_m2-tabs.scss +++ b/src/material/tabs/_m2-tabs.scss @@ -32,7 +32,7 @@ $tokens: ( tab-disabled-ripple-color: inspection.get-theme-color($theme, foreground, disabled), - tab-pagination-icon-color: inspection.get-theme-color($theme, foreground, base), + 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, diff --git a/src/material/tree/_m2-tree.scss b/src/material/tree/_m2-tree.scss index dcf2adf53425..b597b5a4571b 100644 --- a/src/material/tree/_m2-tree.scss +++ b/src/material/tree/_m2-tree.scss @@ -10,8 +10,6 @@ // Tokens that can be configured through Angular Material's color theming API. @function get-color-tokens($theme) { - $foreground-base: inspection.get-theme-color($theme, foreground, base); - @return ( tree-container-background-color: inspection.get-theme-color($theme, system, surface), tree-node-text-color: inspection.get-theme-color($theme, system, on-surface),