diff --git a/src/material/checkbox/_m2-checkbox.scss b/src/material/checkbox/_m2-checkbox.scss index 89f8e62dc93c..849746ec728c 100644 --- a/src/material/checkbox/_m2-checkbox.scss +++ b/src/material/checkbox/_m2-checkbox.scss @@ -29,7 +29,6 @@ $palette-default: inspection.get-theme-color($theme, $palette-name, default); $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); $selected-checkmark-color: inspection.get-theme-color($theme, $palette-name, default-contrast); @@ -45,7 +44,7 @@ checkbox-selected-pressed-icon-color: $palette-selected, 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-unselected-icon-color: map.get($system, on-surface-variant), checkbox-selected-focus-state-layer-color: $palette-default, checkbox-selected-hover-state-layer-color: $palette-default, checkbox-selected-pressed-state-layer-color: $palette-default, diff --git a/src/material/core/theming/tests/theming-mixin-api.spec.ts b/src/material/core/theming/tests/theming-mixin-api.spec.ts index 2ddcef420450..197587ccdbf8 100644 --- a/src/material/core/theming/tests/theming-mixin-api.spec.ts +++ b/src/material/core/theming/tests/theming-mixin-api.spec.ts @@ -79,26 +79,6 @@ describe('theming api', () => { expectNoWarning(/The same color styles are generated multiple times/); }); - it('should be possible to modify color configuration directly', () => { - const result = transpile(` - $theme: mat.m2-define-light-theme(( - color: ( - primary: mat.m2-define-palette(mat.$m2-red-palette), - accent: mat.m2-define-palette(mat.$m2-blue-palette), - ) - )); - - // Updates the "icon" foreground color to hotpink. - $color: map-get($theme, color); - $theme: map-merge($color, - (foreground: map-merge(map-get($color, foreground), (icon: hotpink)))); - - @include mat.all-component-themes($theme); - `); - - expect(result).toContain(': hotpink'); - }); - it('should warn if default density styles are duplicated', () => { spyOn(process.stderr, 'write'); diff --git a/src/material/datepicker/_m2-datepicker.scss b/src/material/datepicker/_m2-datepicker.scss index f6135d526f29..37d934a2a184 100644 --- a/src/material/datepicker/_m2-datepicker.scss +++ b/src/material/datepicker/_m2-datepicker.scss @@ -70,12 +70,12 @@ $private-default-overlap-color: #a8dab5; } @return sass-utils.merge-all($calendar-tokens, $toggle-tokens, $range-tokens, ( - datepicker-toggle-icon-color: $inactive-icon-color, + datepicker-toggle-icon-color: map.get($system, on-surface-variant), datepicker-calendar-body-label-text-color: map.get($system, on-surface-variant), datepicker-calendar-period-button-text-color: inspection.get-theme-color($theme, foreground, base), - datepicker-calendar-period-button-icon-color: $inactive-icon-color, - datepicker-calendar-navigation-button-icon-color: $inactive-icon-color, + datepicker-calendar-period-button-icon-color: map.get($system, on-surface-variant), + datepicker-calendar-navigation-button-icon-color: map.get($system, on-surface-variant), datepicker-calendar-header-divider-color: map.get($system, outline), datepicker-calendar-header-text-color: map.get($system, on-surface-variant), diff --git a/src/material/dialog/_m2-dialog.scss b/src/material/dialog/_m2-dialog.scss index ab4b104e1335..73e4a07752a9 100644 --- a/src/material/dialog/_m2-dialog.scss +++ b/src/material/dialog/_m2-dialog.scss @@ -27,7 +27,7 @@ @return ( dialog-container-color: inspection.get-theme-color($theme, system, surface), dialog-subhead-color: inspection.get-theme-color($theme, system, on-surface), - dialog-supporting-text-color: inspection.get-theme-color($theme, foreground, base, 0.6), + dialog-supporting-text-color: inspection.get-theme-color($theme, system, on-surface-variant), ); } diff --git a/src/material/list/_m2-list.scss b/src/material/list/_m2-list.scss index d6c28664b4a5..dd9c860118ba 100644 --- a/src/material/list/_m2-list.scss +++ b/src/material/list/_m2-list.scss @@ -36,8 +36,7 @@ list-list-item-label-text-color: map.get($system, on-surface), list-list-item-supporting-text-color: map.get($system, on-surface-variant), list-list-item-leading-icon-color: $text-icon-on-background, - list-list-item-trailing-supporting-text-color: - inspection.get-theme-color($theme, foreground, hint-text), + list-list-item-trailing-supporting-text-color: map.get($system, on-surface-variant), 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: map.get($system, on-surface), diff --git a/src/material/paginator/_m2-paginator.scss b/src/material/paginator/_m2-paginator.scss index dc37f4cfc403..92ef577b52f1 100644 --- a/src/material/paginator/_m2-paginator.scss +++ b/src/material/paginator/_m2-paginator.scss @@ -2,6 +2,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. @@ -11,10 +12,12 @@ // Tokens that can be configured through Angular Material's color theming API. @function get-color-tokens($theme) { + $system: m2-utils.get-system($theme); + @return ( - 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-container-text-color: map.get($system, on-surface), + paginator-container-background-color: map.get($system, surface), + paginator-enabled-icon-color: map.get($system, on-surface-variant), 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 dafe8b7304eb..ac59a6ae5652 100644 --- a/src/material/radio/_m2-radio.scss +++ b/src/material/radio/_m2-radio.scss @@ -37,7 +37,7 @@ radio-selected-pressed-icon-color: $palette-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-icon-color: map.get($system, on-surface-variant), 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 a54b629cd403..9bf5de548e55 100644 --- a/src/material/select/_m2-select.scss +++ b/src/material/select/_m2-select.scss @@ -19,11 +19,11 @@ $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, system, on-surface), + select-panel-background-color: map.get($system, surface), + select-enabled-trigger-text-color: map.get($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), + select-placeholder-text-color: map.get($system, on-surface-variant), + select-enabled-arrow-color: map.get($system, on-surface-variant), 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),