From 213de9b35deb52eef8cf33f0aedf33c32853d784 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Fri, 6 Jun 2025 06:16:22 -0600 Subject: [PATCH] fix(material/slide-toggle): use system colors --- .../slide-toggle/_m2-slide-toggle.scss | 84 +++++++++---------- .../slide-toggle/_slide-toggle-theme.scss | 4 +- 2 files changed, 40 insertions(+), 48 deletions(-) diff --git a/src/material/slide-toggle/_m2-slide-toggle.scss b/src/material/slide-toggle/_m2-slide-toggle.scss index e0c2e265cadc..2abf918e81e2 100644 --- a/src/material/slide-toggle/_m2-slide-toggle.scss +++ b/src/material/slide-toggle/_m2-slide-toggle.scss @@ -3,6 +3,7 @@ @use '../core/theming/theming'; @use 'sass:map'; @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. @@ -64,69 +65,60 @@ // Tokens that can be configured through Angular Material's color theming API. @function get-color-tokens($theme) { $system: m2-utils.get-system($theme); - - $is-dark: inspection.get-theme-type($theme) == dark; - $on-surface: if($is-dark, #f5f5f5, #424242); - $hairline: if($is-dark, #616161, #e0e0e0); - $on-surface-variant: if($is-dark, #9e9e9e, #616161); - $on-surface-state-content: if($is-dark, #fafafa, #212121); - $disabled-handle-color: if($is-dark, #000, #424242); - $icon-color: if($is-dark, #212121, #fff); + $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%); // The default for tokens that rely on the theme will use the primary palette $theme-color-tokens: private-get-color-palette-color-tokens($theme, primary); - // TODO(crisbeto): `handle-surface-color` was hardcoded to `var(--mat-surface-color, #fff)` - // which made it basically hardcoded to #fff. Should it be based on the theme? @return map.merge( $theme-color-tokens, ( slide-toggle-disabled-handle-elevation-shadow: elevation.get-box-shadow(0), - slide-toggle-disabled-selected-handle-color: $disabled-handle-color, - slide-toggle-disabled-selected-icon-color: $icon-color, - slide-toggle-disabled-selected-track-color: $on-surface, - slide-toggle-disabled-unselected-handle-color: $disabled-handle-color, - slide-toggle-disabled-unselected-icon-color: $icon-color, - slide-toggle-disabled-unselected-track-color: $on-surface, + slide-toggle-disabled-selected-handle-color: $disabled, + slide-toggle-disabled-selected-icon-color: $disabled, + slide-toggle-disabled-selected-track-color: $disabled, + slide-toggle-disabled-unselected-handle-color: $disabled, + slide-toggle-disabled-unselected-icon-color: $disabled, + slide-toggle-disabled-unselected-track-color: $disabled, slide-toggle-handle-elevation-shadow: elevation.get-box-shadow(1), - slide-toggle-handle-surface-color: #fff, + slide-toggle-handle-surface-color: white, slide-toggle-label-text-color: map.get($system, on-surface), - slide-toggle-selected-icon-color: $icon-color, - slide-toggle-unselected-hover-handle-color: $on-surface-state-content, - slide-toggle-unselected-focus-handle-color: $on-surface-state-content, - slide-toggle-unselected-focus-state-layer-color: $on-surface, - slide-toggle-unselected-focus-track-color: $hairline, - slide-toggle-unselected-icon-color: $icon-color, - slide-toggle-unselected-handle-color: $on-surface-variant, - slide-toggle-unselected-hover-state-layer-color: $on-surface, - slide-toggle-unselected-hover-track-color: $hairline, - slide-toggle-unselected-pressed-handle-color: $on-surface-state-content, - slide-toggle-unselected-pressed-track-color: $hairline, - slide-toggle-unselected-pressed-state-layer-color: $on-surface, - slide-toggle-unselected-track-color: $hairline, + slide-toggle-unselected-hover-handle-color: map.get($system, surface), + slide-toggle-unselected-focus-handle-color: map.get($system, surface), + slide-toggle-unselected-focus-state-layer-color: map.get($system, on-surface), + slide-toggle-unselected-focus-track-color: map.get($system, outline), + slide-toggle-unselected-icon-color: map.get($system, on-surface-variant), + slide-toggle-unselected-handle-color: map.get($system, surface), + slide-toggle-unselected-hover-state-layer-color: map.get($system, on-surface), + slide-toggle-unselected-hover-track-color: map.get($system, outline), + slide-toggle-unselected-pressed-handle-color: map.get($system, surface), + slide-toggle-unselected-pressed-track-color: map.get($system, outline), + slide-toggle-unselected-pressed-state-layer-color: map.get($system, on-surface), + slide-toggle-unselected-track-color: map.get($system, outline), ) ); } // Generates the mapping for the properties that change based on the slide toggle color. -@function private-get-color-palette-color-tokens($theme, $palette-name) { - $is-dark: inspection.get-theme-type($theme) == dark; - $palette-color: inspection.get-theme-color($theme, $palette-name, if($is-dark, 300, 600)); - $state-content: inspection.get-theme-color($theme, $palette-name, if($is-dark, 200, 900)); - $inverse: inspection.get-theme-color($theme, $palette-name, if($is-dark, 600, 300)); +@function private-get-color-palette-color-tokens($theme, $color-variant) { + $system: m2-utils.get-system($theme); + $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant); + $selected-track-color: m3-utils.color-with-opacity(map.get($system, primary), 38%); @return ( - slide-toggle-selected-focus-state-layer-color: $palette-color, - slide-toggle-selected-handle-color: $palette-color, - slide-toggle-selected-hover-state-layer-color: $palette-color, - slide-toggle-selected-pressed-state-layer-color: $palette-color, - slide-toggle-selected-focus-handle-color: $state-content, - slide-toggle-selected-hover-handle-color: $state-content, - slide-toggle-selected-pressed-handle-color: $state-content, - slide-toggle-selected-focus-track-color: $inverse, - slide-toggle-selected-hover-track-color: $inverse, - slide-toggle-selected-pressed-track-color: $inverse, - slide-toggle-selected-track-color: $inverse, + slide-toggle-selected-icon-color: map.get($system, on-primary), + slide-toggle-selected-focus-state-layer-color: map.get($system, primary), + slide-toggle-selected-handle-color: map.get($system, primary), + slide-toggle-selected-hover-state-layer-color: map.get($system, primary), + slide-toggle-selected-pressed-state-layer-color: map.get($system, primary), + slide-toggle-selected-focus-handle-color: map.get($system, primary), + slide-toggle-selected-hover-handle-color: map.get($system, primary), + slide-toggle-selected-pressed-handle-color: map.get($system, primary), + slide-toggle-selected-focus-track-color: $selected-track-color, + slide-toggle-selected-hover-track-color: $selected-track-color, + slide-toggle-selected-pressed-track-color: $selected-track-color, + slide-toggle-selected-track-color: $selected-track-color, ); } diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss index 183c5c01c1cb..6393ed721631 100644 --- a/src/material/slide-toggle/_slide-toggle-theme.scss +++ b/src/material/slide-toggle/_slide-toggle-theme.scss @@ -67,12 +67,12 @@ // Change the color palette related tokens to accent or warn if applicable &.mat-accent { @include token-utils.create-token-values-mixed( - m2-slide-toggle.private-get-color-palette-color-tokens($theme, accent)); + m2-slide-toggle.private-get-color-palette-color-tokens($theme, secondary)); } &.mat-warn { @include token-utils.create-token-values-mixed( - m2-slide-toggle.private-get-color-palette-color-tokens($theme, warn)); + m2-slide-toggle.private-get-color-palette-color-tokens($theme, error)); } } }