Skip to content

Commit 213de9b

Browse files
author
Andrew Seguin
committed
fix(material/slide-toggle): use system colors
1 parent be48108 commit 213de9b

File tree

2 files changed

+40
-48
lines changed

2 files changed

+40
-48
lines changed

‎src/material/slide-toggle/_m2-slide-toggle.scss

Lines changed: 38 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@use '../core/theming/theming';
44
@use 'sass:map';
55
@use '../core/tokens/m2-utils';
6+
@use '../core/tokens/m3-utils';
67

78
// Tokens that can't be configured through Angular Material's current theming API,
89
// but may be in a future version of the theming API.
@@ -64,69 +65,60 @@
6465
// Tokens that can be configured through Angular Material's color theming API.
6566
@function get-color-tokens($theme) {
6667
$system: m2-utils.get-system($theme);
67-
68-
$is-dark: inspection.get-theme-type($theme) == dark;
69-
$on-surface: if($is-dark, #f5f5f5, #424242);
70-
$hairline: if($is-dark, #616161, #e0e0e0);
71-
$on-surface-variant: if($is-dark, #9e9e9e, #616161);
72-
$on-surface-state-content: if($is-dark, #fafafa, #212121);
73-
$disabled-handle-color: if($is-dark, #000, #424242);
74-
$icon-color: if($is-dark, #212121, #fff);
68+
$disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
69+
$disabled-container : m3-utils.color-with-opacity(map.get($system, on-surface), 12%);
7570

7671
// The default for tokens that rely on the theme will use the primary palette
7772
$theme-color-tokens: private-get-color-palette-color-tokens($theme, primary);
7873

79-
// TODO(crisbeto): `handle-surface-color` was hardcoded to `var(--mat-surface-color, #fff)`
80-
// which made it basically hardcoded to #fff. Should it be based on the theme?
8174
@return map.merge(
8275
$theme-color-tokens,
8376
(
8477
slide-toggle-disabled-handle-elevation-shadow: elevation.get-box-shadow(0),
85-
slide-toggle-disabled-selected-handle-color: $disabled-handle-color,
86-
slide-toggle-disabled-selected-icon-color: $icon-color,
87-
slide-toggle-disabled-selected-track-color: $on-surface,
88-
slide-toggle-disabled-unselected-handle-color: $disabled-handle-color,
89-
slide-toggle-disabled-unselected-icon-color: $icon-color,
90-
slide-toggle-disabled-unselected-track-color: $on-surface,
78+
slide-toggle-disabled-selected-handle-color: $disabled,
79+
slide-toggle-disabled-selected-icon-color: $disabled,
80+
slide-toggle-disabled-selected-track-color: $disabled,
81+
slide-toggle-disabled-unselected-handle-color: $disabled,
82+
slide-toggle-disabled-unselected-icon-color: $disabled,
83+
slide-toggle-disabled-unselected-track-color: $disabled,
9184
slide-toggle-handle-elevation-shadow: elevation.get-box-shadow(1),
92-
slide-toggle-handle-surface-color: #fff,
85+
slide-toggle-handle-surface-color: white,
9386
slide-toggle-label-text-color: map.get($system, on-surface),
94-
slide-toggle-selected-icon-color: $icon-color,
95-
slide-toggle-unselected-hover-handle-color: $on-surface-state-content,
96-
slide-toggle-unselected-focus-handle-color: $on-surface-state-content,
97-
slide-toggle-unselected-focus-state-layer-color: $on-surface,
98-
slide-toggle-unselected-focus-track-color: $hairline,
99-
slide-toggle-unselected-icon-color: $icon-color,
100-
slide-toggle-unselected-handle-color: $on-surface-variant,
101-
slide-toggle-unselected-hover-state-layer-color: $on-surface,
102-
slide-toggle-unselected-hover-track-color: $hairline,
103-
slide-toggle-unselected-pressed-handle-color: $on-surface-state-content,
104-
slide-toggle-unselected-pressed-track-color: $hairline,
105-
slide-toggle-unselected-pressed-state-layer-color: $on-surface,
106-
slide-toggle-unselected-track-color: $hairline,
87+
slide-toggle-unselected-hover-handle-color: map.get($system, surface),
88+
slide-toggle-unselected-focus-handle-color: map.get($system, surface),
89+
slide-toggle-unselected-focus-state-layer-color: map.get($system, on-surface),
90+
slide-toggle-unselected-focus-track-color: map.get($system, outline),
91+
slide-toggle-unselected-icon-color: map.get($system, on-surface-variant),
92+
slide-toggle-unselected-handle-color: map.get($system, surface),
93+
slide-toggle-unselected-hover-state-layer-color: map.get($system, on-surface),
94+
slide-toggle-unselected-hover-track-color: map.get($system, outline),
95+
slide-toggle-unselected-pressed-handle-color: map.get($system, surface),
96+
slide-toggle-unselected-pressed-track-color: map.get($system, outline),
97+
slide-toggle-unselected-pressed-state-layer-color: map.get($system, on-surface),
98+
slide-toggle-unselected-track-color: map.get($system, outline),
10799
)
108100
);
109101
}
110102

111103
// Generates the mapping for the properties that change based on the slide toggle color.
112-
@function private-get-color-palette-color-tokens($theme, $palette-name) {
113-
$is-dark: inspection.get-theme-type($theme) == dark;
114-
$palette-color: inspection.get-theme-color($theme, $palette-name, if($is-dark, 300, 600));
115-
$state-content: inspection.get-theme-color($theme, $palette-name, if($is-dark, 200, 900));
116-
$inverse: inspection.get-theme-color($theme, $palette-name, if($is-dark, 600, 300));
104+
@function private-get-color-palette-color-tokens($theme, $color-variant) {
105+
$system: m2-utils.get-system($theme);
106+
$system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
107+
$selected-track-color: m3-utils.color-with-opacity(map.get($system, primary), 38%);
117108

118109
@return (
119-
slide-toggle-selected-focus-state-layer-color: $palette-color,
120-
slide-toggle-selected-handle-color: $palette-color,
121-
slide-toggle-selected-hover-state-layer-color: $palette-color,
122-
slide-toggle-selected-pressed-state-layer-color: $palette-color,
123-
slide-toggle-selected-focus-handle-color: $state-content,
124-
slide-toggle-selected-hover-handle-color: $state-content,
125-
slide-toggle-selected-pressed-handle-color: $state-content,
126-
slide-toggle-selected-focus-track-color: $inverse,
127-
slide-toggle-selected-hover-track-color: $inverse,
128-
slide-toggle-selected-pressed-track-color: $inverse,
129-
slide-toggle-selected-track-color: $inverse,
110+
slide-toggle-selected-icon-color: map.get($system, on-primary),
111+
slide-toggle-selected-focus-state-layer-color: map.get($system, primary),
112+
slide-toggle-selected-handle-color: map.get($system, primary),
113+
slide-toggle-selected-hover-state-layer-color: map.get($system, primary),
114+
slide-toggle-selected-pressed-state-layer-color: map.get($system, primary),
115+
slide-toggle-selected-focus-handle-color: map.get($system, primary),
116+
slide-toggle-selected-hover-handle-color: map.get($system, primary),
117+
slide-toggle-selected-pressed-handle-color: map.get($system, primary),
118+
slide-toggle-selected-focus-track-color: $selected-track-color,
119+
slide-toggle-selected-hover-track-color: $selected-track-color,
120+
slide-toggle-selected-pressed-track-color: $selected-track-color,
121+
slide-toggle-selected-track-color: $selected-track-color,
130122
);
131123
}
132124

‎src/material/slide-toggle/_slide-toggle-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,12 +67,12 @@
6767
// Change the color palette related tokens to accent or warn if applicable
6868
&.mat-accent {
6969
@include token-utils.create-token-values-mixed(
70-
m2-slide-toggle.private-get-color-palette-color-tokens($theme, accent));
70+
m2-slide-toggle.private-get-color-palette-color-tokens($theme, secondary));
7171
}
7272

7373
&.mat-warn {
7474
@include token-utils.create-token-values-mixed(
75-
m2-slide-toggle.private-get-color-palette-color-tokens($theme, warn));
75+
m2-slide-toggle.private-get-color-palette-color-tokens($theme, error));
7676
}
7777
}
7878
}

0 commit comments

Comments
 (0)