From 73cbb3de0fdc9936a1c12380c3bc3a1056d29c7e Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Wed, 28 May 2025 06:22:21 -0600 Subject: [PATCH] refactor: align on disabled colors --- src/material/button/_m2-button.scss | 28 +++++++++------------ src/material/button/_m2-fab.scss | 15 ++++++----- src/material/checkbox/_m2-checkbox.scss | 9 ++++--- src/material/datepicker/_m2-datepicker.scss | 17 ++++++++----- src/material/expansion/_m2-expansion.scss | 9 +++++-- src/material/form-field/_m2-form-field.scss | 18 ++++++------- src/material/radio/_m2-radio.scss | 6 ++++- src/material/select/_m2-select.scss | 9 +++++-- 8 files changed, 61 insertions(+), 50 deletions(-) diff --git a/src/material/button/_m2-button.scss b/src/material/button/_m2-button.scss index d912ebddaafa..7df489d6390b 100644 --- a/src/material/button/_m2-button.scss +++ b/src/material/button/_m2-button.scss @@ -1,6 +1,7 @@ @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/elevation'; @@ -45,12 +46,13 @@ $system: m2-utils.get-system($theme); $is-dark: inspection.get-theme-type($theme) == dark; $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: map.get($system, surface), - button-filled-disabled-container-color: - inspection.get-theme-color($theme, foreground, base, 0.12), - button-filled-disabled-label-text-color: - inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)), + 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: map.get($system, focus-state-layer-opacity), button-filled-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity), @@ -58,8 +60,7 @@ 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, base, 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), @@ -72,10 +73,8 @@ 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: map.get($system, surface), - button-protected-disabled-container-color: - inspection.get-theme-color($theme, foreground, base, 0.12), - button-protected-disabled-label-text-color: - inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)), + 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: map.get($system, focus-state-layer-opacity), @@ -85,8 +84,7 @@ 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, base, 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: map.get($system, focus-state-layer-opacity), button-text-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity), @@ -95,10 +93,8 @@ 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: map.get($system, surface), - button-tonal-disabled-container-color: - inspection.get-theme-color($theme, foreground, base, 0.12), - button-tonal-disabled-label-text-color: - inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)), + 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: map.get($system, focus-state-layer-opacity), button-tonal-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity), diff --git a/src/material/button/_m2-fab.scss b/src/material/button/_m2-fab.scss index 3baf016d924c..3608e2753a6e 100644 --- a/src/material/button/_m2-fab.scss +++ b/src/material/button/_m2-fab.scss @@ -1,5 +1,6 @@ @use 'sass:map'; @use '../core/tokens/m2-utils'; +@use '../core/tokens/m3-utils'; @use '../core/theming/theming'; @use '../core/theming/inspection'; @use '../core/style/elevation'; @@ -31,13 +32,13 @@ @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: map.get($system, surface), - fab-disabled-state-container-color: - inspection.get-theme-color($theme, foreground, base, 0.12), - fab-disabled-state-foreground-color: - inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)), + 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: map.get($system, focus-state-layer-opacity), fab-foreground-color: inspection.get-theme-color($theme, foreground, base), @@ -45,10 +46,8 @@ 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: map.get($system, surface), - fab-small-disabled-state-container-color: - inspection.get-theme-color($theme, foreground, base, 0.12), - fab-small-disabled-state-foreground-color: - inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)), + 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: map.get($system, focus-state-layer-opacity), fab-small-foreground-color: inspection.get-theme-color($theme, foreground, base), diff --git a/src/material/checkbox/_m2-checkbox.scss b/src/material/checkbox/_m2-checkbox.scss index 1fd37654b874..5dd4308461e0 100644 --- a/src/material/checkbox/_m2-checkbox.scss +++ b/src/material/checkbox/_m2-checkbox.scss @@ -1,5 +1,6 @@ @use 'sass:map'; @use '../core/tokens/m2-utils'; +@use '../core/tokens/m3-utils'; @use '../core/theming/theming'; @use '../core/theming/inspection'; @use '../core/m2/theming' as m2-theming; @@ -28,7 +29,7 @@ $is-dark: inspection.get-theme-type($theme) == dark; $foreground-base: inspection.get-theme-color($theme, foreground, base); $palette-default: inspection.get-theme-color($theme, $palette-name, default); - $disabled-color: inspection.get-theme-color($theme, foreground, base, 0.38); + $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: @@ -37,10 +38,10 @@ inspection.get-theme-color($theme, $palette-name, default-contrast); $tokens: ( - checkbox-disabled-label-color: inspection.get-theme-color($theme, foreground, disabled-text), + checkbox-disabled-label-color: $disabled, checkbox-label-text-color: map.get($system, on-surface), - checkbox-disabled-selected-icon-color: $disabled-color, - checkbox-disabled-unselected-icon-color: $disabled-color, + checkbox-disabled-selected-icon-color: $disabled, + checkbox-disabled-unselected-icon-color: $disabled, checkbox-selected-checkmark-color: $selected-checkmark-color, checkbox-selected-focus-icon-color: $palette-selected, checkbox-selected-hover-icon-color: $palette-selected, diff --git a/src/material/datepicker/_m2-datepicker.scss b/src/material/datepicker/_m2-datepicker.scss index 120d71592305..fcf8729b4a78 100644 --- a/src/material/datepicker/_m2-datepicker.scss +++ b/src/material/datepicker/_m2-datepicker.scss @@ -1,9 +1,12 @@ @use 'sass:color'; @use 'sass:meta'; @use 'sass:math'; +@use 'sass:map'; @use '../core/theming/inspection'; @use '../core/style/elevation'; @use '../core/style/sass-utils'; +@use '../core/tokens/m2-utils'; +@use '../core/tokens/m3-utils'; $_selected-fade-amount: 0.6; $_today-fade-amount: 0.2; @@ -37,10 +40,11 @@ $private-default-overlap-color: #a8dab5; // Tokens that can be configured through Angular Material's color theming API. @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-text-color: inspection.get-theme-color($theme, foreground, disabled-text); + $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%); $hint-text-color: inspection.get-theme-color($theme, foreground, hint-text); $preview-outline-color: inspection.get-theme-color($theme, system, outline); $today-disabled-outline-color: null; @@ -63,7 +67,7 @@ $private-default-overlap-color: #a8dab5; $today-disabled-outline-color: color.adjust($hint-text-color, $alpha: -$_today-fade-amount); } @else { - $today-disabled-outline-color: $disabled-text-color; + $today-disabled-outline-color: $disabled; } @return sass-utils.merge-all($calendar-tokens, $toggle-tokens, $range-tokens, ( @@ -82,12 +86,12 @@ $private-default-overlap-color: #a8dab5; datepicker-calendar-date-today-disabled-state-outline-color: $today-disabled-outline-color, datepicker-calendar-date-text-color: $text-color, datepicker-calendar-date-outline-color: transparent, - datepicker-calendar-date-disabled-state-text-color: $disabled-text-color, + 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-disabled-state-separator-color: $disabled-text-color, - datepicker-range-input-disabled-state-text-color: $disabled-text-color, + 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), @@ -138,6 +142,7 @@ $private-default-overlap-color: #a8dab5; } @function private-get-calendar-color-palette-color-tokens($theme, $palette-name) { + $system: m2-utils.get-system($theme); $palette-color: inspection.get-theme-color($theme, $palette-name); $default-contrast: inspection.get-theme-color($theme, $palette-name, default-contrast); $active-background-color: inspection.get-theme-color($theme, $palette-name, 0.3); @@ -147,7 +152,7 @@ $private-default-overlap-color: #a8dab5; $active-disabled-color: color.adjust($palette-color, $alpha: -$_selected-fade-amount); } @else { - $active-disabled-color: inspection.get-theme-color($theme, foreground, disabled-button); + $active-disabled-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%); } @return ( diff --git a/src/material/expansion/_m2-expansion.scss b/src/material/expansion/_m2-expansion.scss index 497910822f82..59b7a0758e9a 100644 --- a/src/material/expansion/_m2-expansion.scss +++ b/src/material/expansion/_m2-expansion.scss @@ -1,6 +1,8 @@ @use 'sass:map'; @use '../core/theming/theming'; @use '../core/theming/inspection'; +@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. @@ -14,14 +16,17 @@ // 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%); + @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, 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( - $theme, foreground, disabled-button), + expansion-header-disabled-state-text-color: + m3-utils.color-with-opacity(map.get($system, on-surface), 38%), expansion-header-text-color: inspection.get-theme-color($theme, system, on-surface), expansion-header-description-color: inspection.get-theme-color($theme, foreground, secondary-text), diff --git a/src/material/form-field/_m2-form-field.scss b/src/material/form-field/_m2-form-field.scss index 8c0b5c9f6492..8c4741307abb 100644 --- a/src/material/form-field/_m2-form-field.scss +++ b/src/material/form-field/_m2-form-field.scss @@ -1,5 +1,6 @@ @use '../core/m2/palette' as m2-palette; @use '../core/tokens/m2-utils'; +@use '../core/tokens/m3-utils'; @use '../core/theming/inspection'; @use '../core/theming/theming'; @use 'sass:color'; @@ -29,7 +30,7 @@ $warn-color: inspection.get-theme-color($theme, warn); $color-tokens: private-get-color-palette-color-tokens($theme, primary); $on-surface: if($is-dark, #fff, #000); - $disabled: inspection.get-theme-color($theme, foreground, base, 0.38); + $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%); @return map.merge($color-tokens, ( // MDC has a token for the enabled placeholder, but not for the disabled one. @@ -64,8 +65,7 @@ form-field-error-trailing-icon-color: unset, form-field-enabled-select-arrow-color: inspection.get-theme-color($theme, foreground, base, 0.54), - form-field-disabled-select-arrow-color: - inspection.get-theme-color($theme, foreground, base, 0.38), + form-field-disabled-select-arrow-color: $disabled, form-field-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity), form-field-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity), form-field-filled-container-color: _variable-safe-mix($on-surface, $surface, 4%), @@ -73,12 +73,10 @@ form-field-filled-label-text-color: inspection.get-theme-color($theme, foreground, base, 0.6), form-field-filled-hover-label-text-color: inspection.get-theme-color($theme, foreground, base, 0.6), - form-field-filled-disabled-label-text-color: - inspection.get-theme-color($theme, foreground, base, 0.38), + form-field-filled-disabled-label-text-color: $disabled, form-field-filled-input-text-color: inspection.get-theme-color($theme, foreground, base, 0.87), - form-field-filled-disabled-input-text-color: - inspection.get-theme-color($theme, foreground, base, 0.38), + form-field-filled-disabled-input-text-color: $disabled, form-field-filled-input-text-placeholder-color: inspection.get-theme-color($theme, foreground, base, 0.6), form-field-filled-error-hover-label-text-color: $warn-color, @@ -98,12 +96,10 @@ inspection.get-theme-color($theme, foreground, base, 0.6), form-field-outlined-hover-label-text-color: inspection.get-theme-color($theme, foreground, base, 0.6), - form-field-outlined-disabled-label-text-color: - inspection.get-theme-color($theme, foreground, base, 0.38), + form-field-outlined-disabled-label-text-color: $disabled, form-field-outlined-input-text-color: inspection.get-theme-color($theme, foreground, base, 0.87), - form-field-outlined-disabled-input-text-color: - inspection.get-theme-color($theme, foreground, base, 0.38), + form-field-outlined-disabled-input-text-color: $disabled, form-field-outlined-input-text-placeholder-color: inspection.get-theme-color($theme, foreground, base, 0.6), form-field-outlined-error-caret-color: $warn-color, diff --git a/src/material/radio/_m2-radio.scss b/src/material/radio/_m2-radio.scss index d0007df154ee..0a7c293eb710 100644 --- a/src/material/radio/_m2-radio.scss +++ b/src/material/radio/_m2-radio.scss @@ -3,6 +3,8 @@ @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'; // Tokens that can't be configured through Angular Material's current theming API, // but may be in a future version of the theming API. @@ -19,13 +21,15 @@ // Tokens that can be configured through Angular Material's color theming API. @function get-color-tokens($theme, $palette-name: accent) { + $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: inspection.get-theme-color($theme, foreground, disabled-text), + 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), diff --git a/src/material/select/_m2-select.scss b/src/material/select/_m2-select.scss index 0c4dc5b46464..ec5e640550d7 100644 --- a/src/material/select/_m2-select.scss +++ b/src/material/select/_m2-select.scss @@ -2,6 +2,8 @@ @use '../core/theming/inspection'; @use '../core/theming/theming'; @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. @@ -13,13 +15,16 @@ // Tokens that can be configured through Angular Material's color theming API. @function get-color-tokens($theme, $palette-name: primary) { + $system: m2-utils.get-system($theme); + $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%); + @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-disabled-trigger-text-color: inspection.get-theme-color($theme, foreground, base, 0.38), + 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), - select-disabled-arrow-color: inspection.get-theme-color($theme, foreground, base, 0.38), + select-disabled-arrow-color: $disabled, select-focused-arrow-color: inspection.get-theme-color($theme, $palette-name, default, 0.87), select-invalid-arrow-color: inspection.get-theme-color($theme, warn, default, 0.87), );