Skip to content

Commit 6a89ef7

Browse files
author
Andrew Seguin
committed
refactor: remove safe-color-change mixin
1 parent 82ab91e commit 6a89ef7

File tree

16 files changed

+67
-122
lines changed

16 files changed

+67
-122
lines changed

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
@use 'sass:map';
22
@use '../core/theming/theming';
33
@use '../core/theming/inspection';
4-
@use '../core/style/sass-utils';
54
@use '../core/tokens/m2-utils';
65

76
// Tokens that can't be configured through Angular Material's current theming API,
@@ -47,8 +46,7 @@
4746
button-toggle-selected-state-background-color:
4847
inspection.get-theme-color($theme, background, selected-button),
4948
button-toggle-selected-state-text-color: inspection.get-theme-color($theme, system, on-surface),
50-
button-toggle-state-layer-color: sass-utils.safe-color-change(
51-
inspection.get-theme-color($theme, background, focused-button), $alpha: 1),
49+
button-toggle-state-layer-color: inspection.get-theme-color($theme, background, base),
5250
button-toggle-text-color: inspection.get-theme-color($theme, system, on-surface),
5351
);
5452
}

‎src/material/button/_m2-button.scss‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
button-filled-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
5555
button-filled-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
5656
button-filled-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
57-
button-filled-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
57+
button-filled-label-text-color: inspection.get-theme-color($theme, foreground, base),
5858
button-filled-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
5959
button-filled-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
6060
button-filled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
@@ -65,7 +65,7 @@
6565
inspection.get-theme-color($theme, foreground, base),
6666
button-outlined-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
6767
button-outlined-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
68-
button-outlined-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
68+
button-outlined-label-text-color: inspection.get-theme-color($theme, foreground, base),
6969
button-outlined-outline-color: $outline,
7070
button-outlined-pressed-state-layer-opacity:
7171
map.get($system, pressed-state-layer-opacity),
@@ -80,7 +80,7 @@
8080
inspection.get-theme-color($theme, foreground, base),
8181
button-protected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
8282
button-protected-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
83-
button-protected-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
83+
button-protected-label-text-color: inspection.get-theme-color($theme, foreground, base),
8484
button-protected-pressed-state-layer-opacity:
8585
map.get($system, pressed-state-layer-opacity),
8686
button-protected-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
@@ -90,7 +90,7 @@
9090
button-text-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
9191
button-text-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
9292
button-text-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
93-
button-text-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
93+
button-text-label-text-color: inspection.get-theme-color($theme, foreground, base),
9494
button-text-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
9595
button-text-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
9696
button-text-state-layer-color: inspection.get-theme-color($theme, foreground, base),
@@ -102,7 +102,7 @@
102102
button-tonal-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
103103
button-tonal-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
104104
button-tonal-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
105-
button-tonal-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
105+
button-tonal-label-text-color: inspection.get-theme-color($theme, foreground, base),
106106
button-tonal-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
107107
button-tonal-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
108108
button-tonal-state-layer-color: inspection.get-theme-color($theme, foreground, base),
@@ -112,11 +112,11 @@
112112
// Generates the mapping for the properties that change based on the button palette color.
113113
@function private-get-color-palette-color-tokens($theme, $palette-name) {
114114
$color: inspection.get-theme-color($theme, $palette-name);
115-
$state-layer-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
115+
$state-layer-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
116116
$ripple-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1);
117117
$contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
118118
$container-color: inspection.get-theme-color($theme, $palette-name, default);
119-
$label-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
119+
$label-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
120120
$ripple-opacity: 0.1;
121121

122122
// outlined-outline-color:
@@ -148,11 +148,11 @@
148148
button-text-state-layer-color: inspection.get-theme-color($theme, $palette-name),
149149
button-tonal-container-color: inspection.get-theme-color($theme, $palette-name, default),
150150
button-tonal-label-text-color:
151-
inspection.get-theme-color($theme, $palette-name, default-contrast, 1),
151+
inspection.get-theme-color($theme, $palette-name, default-contrast),
152152
button-tonal-ripple-color:
153153
inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1),
154154
button-tonal-state-layer-color:
155-
inspection.get-theme-color($theme, $palette-name, default-contrast, 1),
155+
inspection.get-theme-color($theme, $palette-name, default-contrast),
156156
);
157157
}
158158

‎src/material/button/_m2-fab.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,8 @@
6363
// Generates the mapping for the properties that change based on the FAB palette color.
6464
@function private-get-color-palette-color-tokens($theme, $palette-name) {
6565
$contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
66-
$foreground-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
67-
$state-layer-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
66+
$foreground-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
67+
$state-layer-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
6868
$ripple-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1);
6969

7070
@return (

‎src/material/checkbox/_m2-checkbox.scss‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
@use '../core/tokens/m2-utils';
33
@use '../core/theming/theming';
44
@use '../core/theming/inspection';
5-
@use '../core/style/sass-utils';
65
@use '../core/m2/theming' as m2-theming;
76
@use '../core/m2/palette' as m2-palette;
87

@@ -29,15 +28,13 @@
2928
$is-dark: inspection.get-theme-type($theme) == dark;
3029
$foreground-base: inspection.get-theme-color($theme, foreground, base);
3130
$palette-default: inspection.get-theme-color($theme, $palette-name, default);
32-
$disabled-color: sass-utils.safe-color-change(
33-
inspection.get-theme-color($theme, foreground, base), $alpha: 0.38);
31+
$disabled-color: inspection.get-theme-color($theme, foreground, base, 0.38);
3432
$palette-selected: inspection.get-theme-color($theme, $palette-name);
35-
$border-color: sass-utils.safe-color-change(
36-
inspection.get-theme-color($theme, foreground, base), $alpha: 0.54);
33+
$border-color: inspection.get-theme-color($theme, foreground, base, 0.54);
3734
$active-border-color:
3835
m2-theming.get-color-from-palette(m2-palette.$gray-palette, if($is-dark, 200, 900));
3936
$selected-checkmark-color:
40-
inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
37+
inspection.get-theme-color($theme, $palette-name, default-contrast);
4138

4239
$tokens: (
4340
checkbox-disabled-label-color: inspection.get-theme-color($theme, foreground, disabled-text),

‎src/material/core/m2/_theming.scss‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -85,14 +85,16 @@
8585
// might be inferred as numbers by Sass. Casting them to string fixes the map lookup.
8686
$color: if(map.has-key($palette, $hue), map.get($palette, $hue), map.get($palette, $hue + ''));
8787

88-
@if (meta.type-of($color) != color) {
89-
// If the $color resolved to something different from a color (e.g. a CSS variable),
90-
// we can't apply the opacity anyway so we return the value as is, otherwise Sass can
91-
// throw an error or output something invalid.
88+
@if ($opacity == null) {
9289
@return $color;
9390
}
9491

95-
@return rgba($color, if($opacity == null, color.opacity($color), $opacity));
92+
@if (meta.type-of($color) != color) {
93+
$opacity: ($opacity * 100) + '%';
94+
@return #{color-mix(in srgb, #{$color} #{$opacity}, transparent)};
95+
}
96+
97+
@return rgba($color, $opacity);
9698
}
9799

98100
// Validates the specified theme by ensuring that the optional color config defines

‎src/material/core/style/_form-common.scss‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
@use '../theming/inspection';
2-
@use './sass-utils';
32

43
// Renders a gradient for showing the dashed line when the input is disabled.
54
// Unlike using a border, a gradient allows us to adjust the spacing of the dotted line
@@ -15,7 +14,6 @@
1514
// becoming out of sync since these colors aren't in a palette.
1615
@function private-control-placeholder-color($theme) {
1716
$is-dark-theme: inspection.get-theme-type($theme) == dark;
18-
@return sass-utils.safe-color-change(
19-
inspection.get-theme-color($theme, foreground, secondary-text),
20-
$alpha: if($is-dark-theme, 0.5, 0.42));
17+
@return
18+
inspection.get-theme-color($theme, foreground, base, if($is-dark-theme, 0.5, 0.42));
2119
}

‎src/material/core/style/_sass-utils.scss‎

Lines changed: 0 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@use 'sass:color';
21
@use 'sass:string';
32
@use 'sass:map';
43
@use 'sass:meta';
@@ -51,34 +50,6 @@ $use-system-typography-variables: false;
5150
@return $result;
5251
}
5352

54-
/// A version of the Sass `color.change` function that is safe ot use with CSS variables.
55-
@function safe-color-change($color, $args...) {
56-
$args: meta.keywords($args);
57-
$use-color-mix: $use-system-color-variables or
58-
(is-css-var-name($color) and string.index($color, '--mat') == 1);
59-
@if (meta.type-of($color) == 'color') {
60-
@return color.change($color, $args...);
61-
}
62-
@else if ($color != null and
63-
map.get($args, alpha) != null and $use-color-mix) {
64-
$opacity: map.get($args, alpha);
65-
@if meta.type-of($opacity) == number {
66-
$opacity: ($opacity * 100) + '%';
67-
}
68-
69-
@if (is-css-var-name($opacity)) {
70-
$opacity: calc(var($opacity) * 100%);
71-
}
72-
73-
@if (is-css-var-name($color)) {
74-
$color: var($color);
75-
}
76-
77-
@return #{color-mix(in srgb, #{$color} #{$opacity}, transparent)};
78-
}
79-
@return $color;
80-
}
81-
8253
// Returns whether the $value is a CSS variable name based on whether it's a string prefixed
8354
// by "--".
8455
@function is-css-var-name($value) {

‎src/material/datepicker/_m2-datepicker.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ $private-default-overlap-color: #a8dab5;
7070
datepicker-toggle-icon-color: $inactive-icon-color,
7171
datepicker-calendar-body-label-text-color: $secondary-text-color,
7272
datepicker-calendar-period-button-text-color:
73-
inspection.get-theme-color($theme, foreground, text, 1),
73+
inspection.get-theme-color($theme, foreground, base),
7474
datepicker-calendar-period-button-icon-color: $inactive-icon-color,
7575
datepicker-calendar-navigation-button-icon-color: $inactive-icon-color,
7676
datepicker-calendar-header-divider-color: inspection.get-theme-color($theme, system, outline),
@@ -140,7 +140,7 @@ $private-default-overlap-color: #a8dab5;
140140
@function private-get-calendar-color-palette-color-tokens($theme, $palette-name) {
141141
$palette-color: inspection.get-theme-color($theme, $palette-name);
142142
$default-contrast: inspection.get-theme-color($theme, $palette-name, default-contrast);
143-
$active-background-color: sass-utils.safe-color-change($palette-color, $alpha: 0.3);
143+
$active-background-color: inspection.get-theme-color($theme, $palette-name, 0.3);
144144
$active-disabled-color: null;
145145

146146
@if (meta.type-of($palette-color) == color) {

‎src/material/dialog/_m2-dialog.scss‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
@use '../core/style/elevation';
2-
@use '../core/style/sass-utils';
32
@use '../core/theming/inspection';
43

54
// Tokens that can't be configured through Angular Material's current theming API,
@@ -25,12 +24,10 @@
2524
// Tokens that can be configured through Angular Material's color theming API.
2625
@function get-color-tokens($theme) {
2726
$is-dark: inspection.get-theme-type($theme) == dark;
28-
$text-base: inspection.get-theme-color($theme, foreground, text, 1);
29-
3027
@return (
3128
dialog-container-color: inspection.get-theme-color($theme, system, surface),
32-
dialog-subhead-color: sass-utils.safe-color-change($text-base, $alpha: 0.87),
33-
dialog-supporting-text-color: sass-utils.safe-color-change($text-base, $alpha: 0.6),
29+
dialog-subhead-color: inspection.get-theme-color($theme, foreground, text, 0.87),
30+
dialog-supporting-text-color: inspection.get-theme-color($theme, foreground, text, 0.6),
3431
);
3532
}
3633

‎src/material/form-field/_m2-form-field.scss‎

Lines changed: 23 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,7 @@
3030
$warn-color: inspection.get-theme-color($theme, warn);
3131
$color-tokens: private-get-color-palette-color-tokens($theme, primary);
3232
$on-surface: if($is-dark, #fff, #000);
33-
$text-color-base: inspection.get-theme-color($theme, system, on-surface);
34-
$disabled-text-color-base: inspection.get-theme-color($theme, foreground, disabled-text, 1);
35-
$divider-base: inspection.get-theme-color($theme, foreground, base);
33+
$disabled: inspection.get-theme-color($theme, foreground, base, 0.38);
3634

3735
@return map.merge($color-tokens, (
3836
// MDC has a token for the enabled placeholder, but not for the disabled one.
@@ -73,51 +71,51 @@
7371
form-field-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
7472
form-field-filled-container-color: _variable-safe-mix($on-surface, $surface, 4%),
7573
form-field-filled-disabled-container-color: _variable-safe-mix($on-surface, $surface, 2%),
76-
form-field-filled-label-text-color: sass-utils.safe-color-change($text-color-base, $alpha: 0.6),
74+
form-field-filled-label-text-color: inspection.get-theme-color($theme, foreground, base, 0.6),
7775
form-field-filled-hover-label-text-color:
78-
sass-utils.safe-color-change($text-color-base, $alpha: 0.6),
76+
inspection.get-theme-color($theme, foreground, base, 0.6),
7977
form-field-filled-disabled-label-text-color:
80-
sass-utils.safe-color-change($disabled-text-color-base, $alpha: 0.38),
78+
inspection.get-theme-color($theme, foreground, base, 0.38),
8179
form-field-filled-input-text-color:
82-
sass-utils.safe-color-change($text-color-base, $alpha: 0.87),
80+
inspection.get-theme-color($theme, foreground, base, 0.87),
8381
form-field-filled-disabled-input-text-color:
84-
sass-utils.safe-color-change($disabled-text-color-base, $alpha: 0.38),
82+
inspection.get-theme-color($theme, foreground, base, 0.38),
8583
form-field-filled-input-text-placeholder-color:
86-
sass-utils.safe-color-change($text-color-base, $alpha: 0.6),
84+
inspection.get-theme-color($theme, foreground, base, 0.6),
8785
form-field-filled-error-hover-label-text-color: $warn-color,
8886
form-field-filled-error-focus-label-text-color: $warn-color,
8987
form-field-filled-error-label-text-color: $warn-color,
9088
form-field-filled-error-caret-color: $warn-color,
9189
form-field-filled-active-indicator-color:
92-
sass-utils.safe-color-change($divider-base, $alpha: 0.42),
90+
inspection.get-theme-color($theme, foreground, base, 0.42),
9391
form-field-filled-disabled-active-indicator-color:
94-
sass-utils.safe-color-change($divider-base, $alpha: 0.06),
92+
inspection.get-theme-color($theme, foreground, base, 0.06),
9593
form-field-filled-hover-active-indicator-color:
96-
sass-utils.safe-color-change($divider-base, $alpha: 0.87),
94+
inspection.get-theme-color($theme, foreground, base, 0.87),
9795
form-field-filled-error-active-indicator-color: $warn-color,
9896
form-field-filled-error-focus-active-indicator-color: $warn-color,
9997
form-field-filled-error-hover-active-indicator-color: $warn-color,
10098
form-field-outlined-label-text-color:
101-
sass-utils.safe-color-change($text-color-base, $alpha: 0.6),
99+
inspection.get-theme-color($theme, foreground, base, 0.6),
102100
form-field-outlined-hover-label-text-color:
103-
sass-utils.safe-color-change($text-color-base, $alpha: 0.6),
101+
inspection.get-theme-color($theme, foreground, base, 0.6),
104102
form-field-outlined-disabled-label-text-color:
105-
sass-utils.safe-color-change($disabled-text-color-base, $alpha: 0.38),
103+
inspection.get-theme-color($theme, foreground, base, 0.38),
106104
form-field-outlined-input-text-color:
107-
sass-utils.safe-color-change($text-color-base, $alpha: 0.87),
105+
inspection.get-theme-color($theme, foreground, base, 0.87),
108106
form-field-outlined-disabled-input-text-color:
109-
sass-utils.safe-color-change($disabled-text-color-base, $alpha: 0.38),
107+
inspection.get-theme-color($theme, foreground, base, 0.38),
110108
form-field-outlined-input-text-placeholder-color:
111-
sass-utils.safe-color-change($text-color-base, $alpha: 0.6),
109+
inspection.get-theme-color($theme, foreground, base, 0.6),
112110
form-field-outlined-error-caret-color: $warn-color,
113111
form-field-outlined-error-focus-label-text-color: $warn-color,
114112
form-field-outlined-error-label-text-color: $warn-color,
115113
form-field-outlined-error-hover-label-text-color: $warn-color,
116-
form-field-outlined-outline-color: sass-utils.safe-color-change($divider-base, $alpha: 0.38),
114+
form-field-outlined-outline-color: inspection.get-theme-color($theme, foreground, base, 0.38),
117115
form-field-outlined-disabled-outline-color:
118-
sass-utils.safe-color-change($divider-base, $alpha: 0.06),
116+
inspection.get-theme-color($theme, foreground, base, 0.06),
119117
form-field-outlined-hover-outline-color:
120-
sass-utils.safe-color-change($divider-base, $alpha: 0.87),
118+
inspection.get-theme-color($theme, foreground, base, 0.87),
121119
form-field-outlined-error-focus-outline-color: $warn-color,
122120
form-field-outlined-error-hover-outline-color: $warn-color,
123121
form-field-outlined-error-outline-color: $warn-color,
@@ -134,17 +132,16 @@
134132
// Generates the mapping for the properties that change based on the form field color.
135133
@function private-get-color-palette-color-tokens($theme, $palette-name) {
136134
$palette-color: inspection.get-theme-color($theme, $palette-name);
135+
$text-color: inspection.get-theme-color($theme, $palette-name, 0.87);
137136

138137
@return (
139-
form-field-focus-select-arrow-color: sass-utils.safe-color-change($palette-color, $alpha: 0.87),
138+
form-field-focus-select-arrow-color: $text-color,
140139
form-field-filled-caret-color: $palette-color,
141140
form-field-filled-focus-active-indicator-color: $palette-color,
142-
form-field-filled-focus-label-text-color:
143-
sass-utils.safe-color-change($palette-color, $alpha: 0.87),
141+
form-field-filled-focus-label-text-color: $text-color,
144142
form-field-outlined-caret-color: $palette-color,
145143
form-field-outlined-focus-outline-color: $palette-color,
146-
form-field-outlined-focus-label-text-color:
147-
sass-utils.safe-color-change($palette-color, $alpha: 0.87),
144+
form-field-outlined-focus-label-text-color: $text-color,
148145
);
149146
}
150147

0 commit comments

Comments
 (0)