Skip to content

Commit 0df3eb6

Browse files
json-derulojson-derulo
committed
refactor: reduce targeting of internal material elements
1 parent 72a756c commit 0df3eb6

File tree

1 file changed

+104
-206
lines changed

1 file changed

+104
-206
lines changed

‎projects/material-css-vars/src/lib/_mat-lib-overwrites.scss‎

Lines changed: 104 additions & 206 deletions
Original file line numberDiff line numberDiff line change
@@ -6,227 +6,126 @@
66
// MDC Overwrites
77
// ---------------------------
88
@mixin other-overwrites {
9-
@include _mat-mdc-fab-overwrites();
109
@include _mat-mdc-button-overwrites();
11-
@include _mat-mdc-form-field-overwrites();
1210
@include _mat-mdc-slide-toggle-overwrites();
1311
@include _mat-mdc-checkbox-overwrites();
1412
@include _mat-mdc-date-picker-overwrites();
1513
@include _mat-mdc-progress-bar-overwrites();
1614
@include _mat-mdc-slider-overwrites();
1715
}
1816

19-
// ---------------------------
20-
// FAB component
21-
// ---------------------------
22-
@mixin _mat-mdc-fab-overwrites {
23-
$primary-contrast: public-util.mat-css-color(500, null, "primary", true);
24-
$accent-contrast: public-util.mat-css-color(500, null, "accent", true);
25-
$warn-contrast: public-util.mat-css-color(500, null, "warn", true);
26-
27-
.mat-mdc-fab:not(:disabled) {
28-
&.mat-primary {
29-
--mat-fab-foreground-color: #{$primary-contrast};
30-
--mat-fab-state-layer-color: #{$primary-contrast};
31-
}
32-
&.mat-accent {
33-
--mat-fab-foreground-color: #{$accent-contrast};
34-
--mat-fab-state-layer-color: #{$accent-contrast};
35-
}
36-
&.mat-warn {
37-
--mat-fab-foreground-color: #{$warn-contrast};
38-
--mat-fab-state-layer-color: #{$warn-contrast};
39-
}
40-
}
41-
42-
.mat-mdc-mini-fab:not(:disabled) {
43-
&.mat-primary {
44-
--mat-fab-small-foreground-color: #{$primary-contrast};
45-
--mat-fab-small-state-layer-color: #{$primary-contrast};
46-
}
47-
&.mat-accent {
48-
--mat-fab-small-foreground-color: #{$accent-contrast};
49-
--mat-fab-small-state-layer-color: #{$accent-contrast};
50-
}
51-
&.mat-warn {
52-
--mat-fab-small-foreground-color: #{$warn-contrast};
53-
--mat-fab-small-state-layer-color: #{$warn-contrast};
54-
}
55-
}
56-
}
57-
5817
// ---------------------------
5918
// BUTTON component
6019
// ---------------------------
6120
@mixin _mat-mdc-button-overwrites {
62-
$color-primary: public-util.mat-css-color(500, null, "primary", true);
63-
$color-accent: public-util.mat-css-color(500, null, "accent", true);
64-
$color-warn: public-util.mat-css-color(500, null, "warn", true);
65-
$color-primary-ripple: public-util.mat-css-color(500, 0.1, "primary");
66-
$color-accent-ripple: public-util.mat-css-color(500, 0.1, "accent");
67-
$color-warn-ripple: public-util.mat-css-color(500, 0.1, "warn");
68-
69-
.mat-mdc-icon-button {
70-
html &,
71-
#{variables.$dark-theme-selector} & {
21+
.mat-mdc-button-base {
22+
@include public-util.mat-css-light-dark-theme-global {
7223
&.mat-primary {
73-
--mat-icon-button-ripple-color: #{$color-primary-ripple};
24+
@include _mat-mdc-button-color-overwrites("primary");
7425
}
7526
&.mat-accent {
76-
--mat-icon-button-ripple-color: #{$color-accent-ripple};
27+
@include _mat-mdc-button-color-overwrites("accent");
7728
}
7829
&.mat-warn {
79-
--mat-icon-button-ripple-color: #{$color-warn-ripple};
30+
@include _mat-mdc-button-color-overwrites("warn");
8031
}
8132
}
8233
}
34+
}
8335

84-
.mat-mdc-button {
85-
&,
86-
#{variables.$dark-theme-selector} & {
87-
&.mat-primary {
88-
--mat-text-button-ripple-color: #{$color-primary-ripple};
89-
}
90-
91-
&.mat-accent {
92-
--mat-text-button-ripple-color: #{$color-accent-ripple};
93-
}
94-
95-
&.mat-warn {
96-
--mat-text-button-ripple-color: #{$color-warn-ripple};
97-
}
98-
}
99-
}
36+
@mixin _mat-mdc-button-color-overwrites($palette) {
37+
$contrast-color: public-util.mat-css-color(500, null, $palette, true);
38+
$ripple-color: public-util.mat-css-color(500, 0.1, $palette);
10039

101-
.mat-mdc-outlined-button {
102-
&,
103-
#{variables.$dark-theme-selector} & {
104-
&.mat-primary {
105-
--mat-outlined-button-ripple-color: #{$color-primary-ripple};
106-
}
107-
108-
&.mat-accent {
109-
--mat-outlined-button-ripple-color: #{$color-accent-ripple};
110-
}
40+
@include mat.fab-overrides(
41+
(
42+
foreground-color: $contrast-color,
43+
state-layer-color: $contrast-color,
44+
small-foreground-color: $contrast-color,
45+
small-state-layer-color: $contrast-color,
46+
)
47+
);
11148

112-
&.mat-warn {
113-
--mat-outlined-button-ripple-color: #{$color-warn-ripple};
114-
}
115-
}
116-
}
49+
@include mat.button-overrides(
50+
(
51+
outlined-ripple-color: $ripple-color,
52+
text-ripple-color: $ripple-color,
53+
filled-label-text-color: $contrast-color,
54+
protected-label-text-color: $contrast-color,
55+
)
56+
);
11757

118-
.mat-mdc-unelevated-button:not(:disabled),
119-
.mat-mdc-raised-button:not(:disabled) {
120-
&.mat-primary {
121-
--mdc-filled-button-label-text-color: #{$color-primary};
122-
--mdc-protected-button-label-text-color: #{$color-primary};
123-
}
124-
&.mat-accent {
125-
--mdc-filled-button-label-text-color: #{$color-accent};
126-
--mdc-protected-button-label-text-color: #{$color-accent};
127-
}
128-
&.mat-warn {
129-
--mdc-filled-button-label-text-color: #{$color-warn};
130-
--mdc-protected-button-label-text-color: #{$color-warn};
131-
}
132-
}
58+
@include mat.icon-button-overrides(
59+
(
60+
ripple-color: $ripple-color,
61+
)
62+
);
13363
}
13464

13565
// ---------------------------
136-
// FORM FIELD component
66+
// SLIDE TOGGLE component
13767
// ---------------------------
138-
@mixin _mat-mdc-form-field-overwrites {
139-
.mat-mdc-form-field {
140-
&.mat-primary {
141-
.mdc-text-field--focused:not(.mdc-text-field--disabled)
142-
.mdc-floating-label {
143-
color: public-util.mat-css-color-primary(500, 0.87);
68+
@mixin _mat-mdc-slide-toggle-overwrites() {
69+
.mat-mdc-slide-toggle {
70+
@include public-util.mat-css-light-dark-theme-global {
71+
&.mat-primary {
72+
@include _mat-mdc-slide-toggle-color-overwrites("primary");
14473
}
145-
}
146-
&.mat-accent {
147-
.mdc-text-field--focused:not(.mdc-text-field--disabled)
148-
.mdc-floating-label {
149-
color: public-util.mat-css-color-accent(500, 0.87);
74+
&.mat-accent {
75+
@include _mat-mdc-slide-toggle-color-overwrites("accent");
15076
}
151-
}
152-
&.mat-warn {
153-
.mdc-text-field--focused:not(.mdc-text-field--disabled)
154-
.mdc-floating-label {
155-
color: public-util.mat-css-color-warn(500, 0.87);
77+
&.mat-warn {
78+
@include _mat-mdc-slide-toggle-color-overwrites("warn");
15679
}
15780
}
15881
}
15982
}
16083

161-
// ---------------------------
162-
// SLIDE TOGGLE component
163-
// ---------------------------
164-
@mixin _mat-mdc-slide-toggle-overwrites() {
165-
$color-primary: public-util.mat-css-color(500, null, "primary", true);
166-
$color-accent: public-util.mat-css-color(500, null, "accent", true);
167-
$color-warn: public-util.mat-css-color(500, null, "warn", true);
84+
@mixin _mat-mdc-slide-toggle-color-overwrites($palette) {
85+
$contrast-color: public-util.mat-css-color(500, null, $palette, true);
16886

169-
.mat-mdc-slide-toggle {
170-
&.mat-primary,
171-
&.mat-accent,
172-
&.mat-warn {
173-
@include public-util.mat-css-light-theme-global() {
174-
--mdc-switch-unselected-icon-color: white;
175-
}
176-
@include public-util.mat-css-dark-theme-global() {
177-
--mdc-switch-unselected-icon-color: black;
178-
}
179-
}
180-
&.mat-primary {
181-
--mdc-switch-selected-icon-color: #{$color-primary};
182-
--mdc-switch-disabled-selected-icon-color: #{$color-primary};
183-
--mdc-switch-disabled-unselected-icon-color: #{$color-primary};
184-
}
185-
&.mat-accent {
186-
--mdc-switch-selected-icon-color: #{$color-accent};
187-
--mdc-switch-disabled-selected-icon-color: #{$color-accent};
188-
--mdc-switch-disabled-unselected-icon-color: #{$color-accent};
189-
}
190-
&.mat-warn {
191-
--mdc-switch-selected-icon-color: #{$color-warn};
192-
--mdc-switch-disabled-selected-icon-color: #{$color-warn};
193-
--mdc-switch-disabled-unselected-icon-color: #{$color-warn};
194-
--mdc-switch-unselected-icon-color: #{$color-warn};
195-
}
196-
}
87+
@include mat.slide-toggle-overrides(
88+
(
89+
selected-icon-color: $contrast-color,
90+
)
91+
);
19792
}
19893

19994
// ---------------------------
20095
// CHECKBOX component
20196
// ---------------------------
20297
@mixin _mat-mdc-checkbox-overwrites {
203-
$color-primary: public-util.mat-css-color(500, null, "primary", true);
204-
$color-accent: public-util.mat-css-color(500, null, "accent", true);
205-
$color-warn: public-util.mat-css-color(500, null, "warn", true);
206-
20798
.mat-mdc-checkbox {
208-
&,
209-
#{variables.$dark-theme-selector} & {
99+
@include public-util.mat-css-light-dark-theme-global {
210100
&.mat-primary {
211-
--mdc-checkbox-selected-checkmark-color: #{$color-primary};
101+
@include _mat-mdc-checkbox-color-overwrites("primary");
212102
}
213103
&.mat-accent {
214-
--mdc-checkbox-selected-checkmark-color: #{$color-accent};
104+
@include _mat-mdc-checkbox-color-overwrites("accent");
215105
}
216106
&.mat-warn {
217-
--mdc-checkbox-selected-checkmark-color: #{$color-warn};
107+
@include _mat-mdc-checkbox-color-overwrites("warn");
218108
}
219109
}
220110
}
221111
}
222112

113+
@mixin _mat-mdc-checkbox-color-overwrites($palette) {
114+
$contrast-color: public-util.mat-css-color(500, null, $palette, true);
115+
116+
@include mat.checkbox-overrides(
117+
(
118+
selected-checkmark-color: $contrast-color,
119+
)
120+
);
121+
}
122+
223123
// ---------------------------
224124
// DATE PICKER component
225125
// ---------------------------
226126
@mixin _mat-mdc-date-picker-overwrites {
227127
.mat-datepicker-content {
228-
&,
229-
#{variables.$dark-theme-selector} & {
128+
@include public-util.mat-css-light-dark-theme-global {
230129
&.mat-primary {
231130
@include _mat-date-picker-color-overwrites("primary");
232131
}
@@ -258,58 +157,57 @@
258157
// ---------------------------
259158
@mixin _mat-mdc-progress-bar-overwrites {
260159
.mat-mdc-progress-bar {
261-
&.mat-primary .mdc-linear-progress__buffer-bar {
262-
background-color: public-util.mat-css-color(500, 0.25, "primary");
263-
}
264-
&.mat-accent .mdc-linear-progress__buffer-bar {
265-
background-color: public-util.mat-css-color(500, 0.25, "accent");
266-
}
267-
&.mat-warn .mdc-linear-progress__buffer-bar {
268-
background-color: public-util.mat-css-color(500, 0.25, "warn");
160+
@include public-util.mat-css-light-dark-theme-global {
161+
&.mat-primary {
162+
@include _mat-mdc-progress-bar-color-overwrites("primary");
163+
}
164+
&.mat-accent {
165+
@include _mat-mdc-progress-bar-color-overwrites("accent");
166+
}
167+
&.mat-warn {
168+
@include _mat-mdc-progress-bar-color-overwrites("warn");
169+
}
269170
}
270171
}
271172
}
272173

174+
@mixin _mat-mdc-progress-bar-color-overwrites($palette) {
175+
$track-color: public-util.mat-css-color(500, 0.25, $palette);
176+
177+
@include mat.progress-bar-overrides(
178+
(
179+
track-color: $track-color,
180+
)
181+
);
182+
}
183+
273184
// ---------------------------
274185
// SLIDER component
275186
// ---------------------------
276187
@mixin _mat-mdc-slider-overwrites() {
277188
.mat-mdc-slider {
278-
&.mat-primary {
279-
--mat-mdc-slider-hover-ripple-color: #{public-util.mat-css-color(
280-
500,
281-
0.05,
282-
"primary"
283-
)};
284-
--mat-mdc-slider-focus-ripple-color: #{public-util.mat-css-color(
285-
500,
286-
0.2,
287-
"primary"
288-
)};
289-
}
290-
&.mat-accent {
291-
--mat-mdc-slider-hover-ripple-color: #{public-util.mat-css-color(
292-
500,
293-
0.05,
294-
"accent"
295-
)};
296-
--mat-mdc-slider-focus-ripple-color: #{public-util.mat-css-color(
297-
500,
298-
0.2,
299-
"accent"
300-
)};
301-
}
302-
&.mat-warn {
303-
--mat-mdc-slider-hover-ripple-color: #{public-util.mat-css-color(
304-
500,
305-
0.05,
306-
"warn"
307-
)};
308-
--mat-mdc-slider-focus-ripple-color: #{public-util.mat-css-color(
309-
500,
310-
0.2,
311-
"warn"
312-
)};
189+
@include public-util.mat-css-light-dark-theme-global {
190+
&.mat-primary {
191+
@include _mat-mdc-slider-color-overwrites("primary");
192+
}
193+
&.mat-accent {
194+
@include _mat-mdc-slider-color-overwrites("accent");
195+
}
196+
&.mat-warn {
197+
@include _mat-mdc-slider-color-overwrites("warn");
198+
}
313199
}
314200
}
315201
}
202+
203+
@mixin _mat-mdc-slider-color-overwrites($palette) {
204+
$hover-background-color: public-util.mat-css-color(500, 0.05, $palette);
205+
$focus-background-color: public-util.mat-css-color(500, 0.2, $palette);
206+
207+
@include mat.slider-overrides(
208+
(
209+
hover-state-layer-color: $hover-background-color,
210+
focus-state-layer-color: $focus-background-color,
211+
)
212+
);
213+
}

0 commit comments

Comments
 (0)