Skip to content

Commit da01b24

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

File tree

5 files changed

+45
-55
lines changed

5 files changed

+45
-55
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/core/m2/_theming.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,10 +117,13 @@
117117
$system: (
118118
primary: map.get($primary, default),
119119
on-primary: map.get($primary, default-contrast),
120+
inverse-primary: map.get($primary, if($is-dark, 600, 300)),
120121
secondary: map.get($accent, default),
121122
on-secondary: map.get($accent, default-contrast),
123+
inverse-secondary: map.get($accent, if($is-dark, 600, 300)),
122124
error: map.get($warn, default),
123125
on-error: map.get($warn, default-contrast),
126+
inverse-error: map.get($warn, if($is-dark, 600, 300)),
124127
shadow: black,
125128
hover-state-layer-opacity: 0.04,
126129
focus-state-layer-opacity: 0.12,

‎src/material/core/tokens/_m3-utils.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
$system: map.set($system, on-#{$color}-container, map.get($system, on-#{$variant}-container));
99
$system: map.set($system, #{$color}, map.get($system, #{$variant}));
1010
$system: map.set($system, #{$color}-container, map.get($system, #{$variant}-container));
11+
$system: map.set($system, inverse-#{$color}, map.get($system, inverse-#{$variant}));
1112
@return $system;
1213
}
1314

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

Lines changed: 37 additions & 51 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.
@@ -17,7 +18,7 @@
1718
// The m2 slide-toggle uses transforms to hide & show the tracks while
1819
// the m3 slide-toggle uses opacity.
1920
@return (
20-
slide-toggle-disabled-handle-opacity: null,
21+
slide-toggle-disabled-handle-opacity: 0.38,
2122
slide-toggle-disabled-selected-handle-opacity: 0.38,
2223
slide-toggle-disabled-selected-icon-opacity: 0.38,
2324
slide-toggle-disabled-track-opacity: 0.12,
@@ -65,68 +66,53 @@
6566
@function get-color-tokens($theme) {
6667
$system: m2-utils.get-system($theme);
6768

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);
75-
76-
// The default for tokens that rely on the theme will use the primary palette
77-
$theme-color-tokens: private-get-color-palette-color-tokens($theme, primary);
78-
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?
8169
@return map.merge(
82-
$theme-color-tokens,
70+
private-get-color-palette-color-tokens($theme, primary),
8371
(
8472
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,
73+
slide-toggle-disabled-selected-handle-color: map.get($system, on-surface),
74+
slide-toggle-disabled-selected-track-color: map.get($system, on-surface),
75+
slide-toggle-disabled-unselected-handle-color: map.get($system, on-surface),
76+
slide-toggle-disabled-unselected-icon-color: map.get($system, surface-variant),
77+
slide-toggle-disabled-unselected-track-color: map.get($system, on-surface),
9178
slide-toggle-handle-elevation-shadow: elevation.get-box-shadow(1),
92-
slide-toggle-handle-surface-color: #fff,
79+
slide-toggle-handle-surface-color: map.get($system, surface),
9380
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,
81+
slide-toggle-unselected-hover-handle-color: map.get($system, inverse-surface),
82+
slide-toggle-unselected-focus-handle-color: map.get($system, inverse-surface),
83+
slide-toggle-unselected-focus-state-layer-color: map.get($system, on-surface),
84+
slide-toggle-unselected-focus-track-color: map.get($system, outline),
85+
slide-toggle-unselected-icon-color: map.get($system, surface-variant),
86+
slide-toggle-unselected-handle-color: map.get($system, on-surface-variant),
87+
slide-toggle-unselected-hover-state-layer-color: map.get($system, on-surface),
88+
slide-toggle-unselected-hover-track-color: map.get($system, outline),
89+
slide-toggle-unselected-pressed-handle-color: map.get($system, inverse-surface),
90+
slide-toggle-unselected-pressed-track-color: map.get($system, outline),
91+
slide-toggle-unselected-pressed-state-layer-color: map.get($system, on-surface),
92+
slide-toggle-unselected-track-color: map.get($system, outline),
10793
)
10894
);
10995
}
11096

11197
// 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));
98+
@function private-get-color-palette-color-tokens($theme, $color-variant) {
99+
$system: m2-utils.get-system($theme);
100+
$system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
117101

118102
@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,
103+
slide-toggle-selected-icon-color: map.get($system, on-primary),
104+
slide-toggle-disabled-selected-icon-color: map.get($system, on-primary),
105+
slide-toggle-selected-focus-state-layer-color: map.get($system, primary),
106+
slide-toggle-selected-handle-color: map.get($system, primary),
107+
slide-toggle-selected-hover-state-layer-color: map.get($system, primary),
108+
slide-toggle-selected-pressed-state-layer-color: map.get($system, primary),
109+
slide-toggle-selected-focus-handle-color: map.get($system, primary),
110+
slide-toggle-selected-hover-handle-color: map.get($system, primary),
111+
slide-toggle-selected-pressed-handle-color: map.get($system, primary),
112+
slide-toggle-selected-focus-track-color: map.get($system, inverse-primary),
113+
slide-toggle-selected-hover-track-color: map.get($system, inverse-primary),
114+
slide-toggle-selected-pressed-track-color: map.get($system, inverse-primary),
115+
slide-toggle-selected-track-color: map.get($system, inverse-primary),
130116
);
131117
}
132118

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