Skip to content

Commit 89d9cd0

Browse files
andrewseguinandrewseguin
authored
fix(material/slide-toggle): use system colors (#31303)
* fix(material/slide-toggle): use system colors # Conflicts: # src/material/core/m2/_theming.scss * refactor: lint * refactor: add inverse
1 parent ea76df6 commit 89d9cd0

File tree

4 files changed

+52
-72
lines changed

4 files changed

+52
-72
lines changed

‎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/core/tokens/m2/_md-sys-color.scss

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,13 @@
1010
@return (
1111
primary: map.get($palettes, primary, default),
1212
on-primary: map.get($palettes, primary, default-contrast),
13+
inverse-primary: map.get($palettes, primary, 600),
1314
secondary: map.get($palettes, accent, default),
1415
on-secondary: map.get($palettes, accent, default-contrast),
16+
inverse-secondary: map.get($palettes, accent, 600),
1517
error: map.get($palettes, warn, default),
1618
on-error: map.get($palettes, warn, default-contrast),
19+
inverse-error: map.get($palettes, warn, 600),
1720
shadow: black,
1821
surface: map.get(palette.$grey-palette, 800),
1922
on-surface: white,
@@ -27,7 +30,6 @@
2730

2831
// TBD
2932
error-container: null,
30-
inverse-primary: null,
3133
on-background: null,
3234
on-error-container: null,
3335
on-primary-container: null,
@@ -66,10 +68,13 @@
6668
@return (
6769
primary: map.get($palettes, primary, default),
6870
on-primary: map.get($palettes, primary, default-contrast),
71+
inverse-primary: map.get($palettes, primary, 300),
6972
secondary: map.get($palettes, accent, default),
7073
on-secondary: map.get($palettes, accent, default-contrast),
74+
inverse-secondary: map.get($palettes, accent, 300),
7175
error: map.get($palettes, warn, default),
7276
on-error: map.get($palettes, warn, default-contrast),
77+
inverse-error: map.get($palettes, warn, 300),
7378
shadow: black,
7479
surface: white,
7580
on-surface: rgba(black, 0.87),
@@ -83,7 +88,6 @@
8388

8489
// TBD
8590
error-container: null,
86-
inverse-primary: null,
8791
on-background: null,
8892
on-error-container: null,
8993
on-primary-container: null,

‎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: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
@use '../core/typography/typography';
77
@use './m2-slide-toggle';
88
@use './m3-slide-toggle';
9+
@use '../core/tokens/m2-utils';
10+
@use '../core/tokens/m3-utils';
911

1012
/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
1113
/// for the mat-slide-toggle.
@@ -39,40 +41,27 @@
3941
// Add values for MDC slide toggles tokens
4042
@include sass-utils.current-selector-or-root() {
4143
@include token-utils.create-token-values-mixed(m2-slide-toggle.get-color-tokens($theme));
44+
$system: m2-utils.get-system($theme);
4245

4346
& {
44-
// TODO(andrewjs): Remove this once all tokens are migrated to
45-
// mat internally.
46-
--mdc-slide-toggle-disabled-label-text-color: #{inspection.get-theme-color(
47-
$theme,
48-
foreground,
49-
disabled-text
50-
)};
5147
// TODO(wagnermaciel): Use our token system to define this css variable.
52-
--mat-slide-toggle-disabled-label-text-color: #{inspection.get-theme-color(
53-
$theme,
54-
foreground,
55-
disabled-text
56-
)};
48+
--mat-slide-toggle-disabled-label-text-color: #{
49+
m3-utils.color-with-opacity(map.get($system, on-surface), 38%)};
5750
}
5851

5952
.mat-mdc-slide-toggle {
6053
// TODO(wagnermaciel): Use our token system to define this css variable.
61-
--mat-slide-toggle-label-text-color: #{inspection.get-theme-color(
62-
$theme,
63-
foreground,
64-
text
65-
)};
54+
--mat-slide-toggle-label-text-color: #{map.get($system, on-surface)};
6655

6756
// Change the color palette related tokens to accent or warn if applicable
6857
&.mat-accent {
6958
@include token-utils.create-token-values-mixed(
70-
m2-slide-toggle.private-get-color-palette-color-tokens($theme, accent));
59+
m2-slide-toggle.private-get-color-palette-color-tokens($theme, secondary));
7160
}
7261

7362
&.mat-warn {
7463
@include token-utils.create-token-values-mixed(
75-
m2-slide-toggle.private-get-color-palette-color-tokens($theme, warn));
64+
m2-slide-toggle.private-get-color-palette-color-tokens($theme, error));
7665
}
7766
}
7867
}

0 commit comments

Comments
 (0)