Skip to content

Commit 6ba26be

Browse files
andrewseguinandrewseguin
committed
fix(material/slide-toggle): use system colors
1 parent 9ce023d commit 6ba26be

File tree

3 files changed

+45
-51
lines changed

3 files changed

+45
-51
lines changed

‎WORKSPACE‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -158,8 +158,8 @@ http_archive(
158158
load("@aspect_rules_ts//ts:repositories.bzl", "rules_ts_dependencies")
159159

160160
rules_ts_dependencies(
161-
# Obtained by: curl --silent https://registry.npmjs.org/typescript/5.8.2 | jq -r '.dist.integrity'
162-
ts_integrity = "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==",
161+
# Obtained by: curl --silent https://registry.npmjs.org/typescript/5.8.3 | jq -r '.dist.integrity'
162+
ts_integrity = "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
163163
ts_version_from = "//:package.json",
164164
)
165165

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

Lines changed: 41 additions & 47 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,62 @@
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%);
7569

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

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?
8173
@return map.merge(
8274
$theme-color-tokens,
8375
(
84-
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,
76+
slide-toggle-disabled-handle-elevation-shadow: elevation.get-box-shadow(1),
77+
slide-toggle-disabled-selected-handle-color: $disabled,
78+
slide-toggle-disabled-selected-icon-color: $disabled,
79+
slide-toggle-disabled-selected-track-color: map.get($system, on-surface-variant),
80+
slide-toggle-disabled-unselected-handle-color: map.get($system, surface),
81+
slide-toggle-disabled-unselected-icon-color: map.get($system, on-surface),
82+
slide-toggle-disabled-unselected-track-color: map.get($system, on-surface-variant),
9183
slide-toggle-handle-elevation-shadow: elevation.get-box-shadow(1),
92-
slide-toggle-handle-surface-color: #fff,
84+
slide-toggle-handle-surface-color: white,
9385
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,
86+
slide-toggle-unselected-hover-handle-color: map.get($system, surface),
87+
slide-toggle-unselected-focus-handle-color: map.get($system, surface),
88+
slide-toggle-unselected-focus-state-layer-color: map.get($system, on-surface),
89+
slide-toggle-unselected-focus-track-color: map.get($system, on-surface-variant),
90+
slide-toggle-unselected-icon-color: map.get($system, on-surface-variant),
91+
slide-toggle-unselected-handle-color: map.get($system, surface),
92+
slide-toggle-unselected-hover-state-layer-color: map.get($system, on-surface),
93+
slide-toggle-unselected-hover-track-color: map.get($system, on-surface-variant),
94+
slide-toggle-unselected-pressed-handle-color: map.get($system, surface),
95+
slide-toggle-unselected-pressed-track-color: map.get($system, on-surface-variant),
96+
slide-toggle-unselected-pressed-state-layer-color: map.get($system, on-surface),
97+
slide-toggle-unselected-track-color: map.get($system, on-surface-variant),
10798
)
10899
);
109100
}
110101

111102
// 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));
103+
@function private-get-color-palette-color-tokens($theme, $color-variant) {
104+
$system: m2-utils.get-system($theme);
105+
$system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
106+
$selected-track-color: m3-utils.color-with-opacity(map.get($system, primary), 38%);
117107

118108
@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,
109+
slide-toggle-disabled-selected-track-color: map.get($system, primary),
110+
slide-toggle-disabled-selected-icon-color: map.get($system, on-primary),
111+
slide-toggle-disabled-selected-handle-color: map.get($system, primary),
112+
slide-toggle-selected-icon-color: map.get($system, on-primary),
113+
slide-toggle-selected-focus-state-layer-color: map.get($system, primary),
114+
slide-toggle-selected-handle-color: map.get($system, primary),
115+
slide-toggle-selected-hover-state-layer-color: map.get($system, primary),
116+
slide-toggle-selected-pressed-state-layer-color: map.get($system, primary),
117+
slide-toggle-selected-focus-handle-color: map.get($system, primary),
118+
slide-toggle-selected-hover-handle-color: map.get($system, primary),
119+
slide-toggle-selected-pressed-handle-color: map.get($system, primary),
120+
slide-toggle-selected-focus-track-color: $selected-track-color,
121+
slide-toggle-selected-hover-track-color: $selected-track-color,
122+
slide-toggle-selected-pressed-track-color: $selected-track-color,
123+
slide-toggle-selected-track-color: $selected-track-color,
130124
);
131125
}
132126

‎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)