Skip to content

Commit 955d341

Browse files
json-derulojson-derulo
committed
fix: use correct background colors
1 parent 6ace057 commit 955d341

File tree

4 files changed

+14
-212
lines changed

4 files changed

+14
-212
lines changed

‎projects/material-css-vars/src/lib/_main.scss

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,31 +21,25 @@
2121
$accent: mat.define-palette(variables.$palette-accent);
2222
$warn: mat.define-palette(variables.$palette-warn);
2323

24-
$theme: (
24+
$theme: mat.define-light-theme((
2525
color: (
2626
primary: $primary,
2727
accent: $accent,
2828
warn: $warn,
29-
is-dark: false,
30-
foreground: variables.$palette-foreground,
31-
background: variables.$palette-background,
3229
),
3330
typography: $typography-config,
3431
density: 0,
35-
);
32+
));
3633

37-
$dark-theme: (
34+
$dark-theme: mat.define-dark-theme((
3835
color: (
3936
primary: $primary,
4037
accent: $accent,
4138
warn: $warn,
42-
is-dark: true,
43-
foreground: variables.$palette-foreground-dark,
44-
background: variables.$palette-background-dark,
4539
),
4640
typography: $typography-config,
4741
density: 0,
48-
);
42+
));
4943

5044
// set global variable so passed-in content can use the theme
5145
$mat-css-theme: $theme !global; // stays for backwards-compatibility

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

Lines changed: 0 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,12 @@
77
@mixin other-overwrites {
88
@include _mat-mdc-fab-overwrites();
99
@include _mat-mdc-button-overwrites();
10-
@include _mat-mdc-text-field-overwrites();
1110
@include _mat-mdc-form-field-overwrites();
1211
@include _mat-mdc-slide-toggle-overwrites();
13-
@include _mat-mdc-select-overwrites();
1412
@include _mat-mdc-checkbox-overwrites();
15-
@include _mat-mdc-chips-overwrites();
1613
@include _mat-mdc-date-picker-overwrites();
1714
@include _mat-mdc-progress-bar-overwrites();
1815
@include _mat-mdc-slider-overwrites();
19-
@include _mat-mdc-snackbar-overwrites();
2016
}
2117

2218
// ---------------------------
@@ -107,29 +103,6 @@
107103
}
108104
}
109105

110-
// ---------------------------
111-
// TEXT FIELD component
112-
// ---------------------------
113-
@mixin _mat-mdc-text-field-overwrites {
114-
.mdc-text-field--disabled.mdc-text-field--filled,
115-
.mdc-text-field--filled:not(.mdc-text-field--disabled) {
116-
@include public-util.mat-css-dark-theme-global() {
117-
background: map-get(variables.$palette-background-dark, "background");
118-
}
119-
@include public-util.mat-css-light-theme-global() {
120-
background: map-get(variables.$palette-background, "background");
121-
}
122-
}
123-
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
124-
@include public-util.mat-css-dark-theme-global() {
125-
color: map-get(variables.$palette-foreground-dark, "text");
126-
}
127-
@include public-util.mat-css-light-theme-global() {
128-
color: map-get(variables.$palette-foreground, "text");
129-
}
130-
}
131-
}
132-
133106
// ---------------------------
134107
// FORM FIELD component
135108
// ---------------------------
@@ -203,58 +176,6 @@
203176
}
204177
}
205178

206-
// ---------------------------
207-
// SELECT component
208-
// ---------------------------
209-
@mixin _mat-mdc-select-overwrites {
210-
.mat-mdc-select-value {
211-
@include public-util.mat-css-dark-theme-global() {
212-
color: map-get(variables.$palette-foreground-dark, "text");
213-
}
214-
@include public-util.mat-css-light-theme-global() {
215-
color: map-get(variables.$palette-foreground, "text");
216-
}
217-
}
218-
219-
.mat-mdc-select-placeholder {
220-
@include public-util.mat-css-dark-theme-global() {
221-
color: rgba(map-get(variables.$palette-foreground-dark, "base"), 0.6);
222-
}
223-
@include public-util.mat-css-light-theme-global() {
224-
color: rgba(map-get(variables.$palette-foreground, "base"), 0.6);
225-
}
226-
}
227-
228-
.mat-mdc-select-disabled .mat-mdc-select-value {
229-
@include public-util.mat-css-dark-theme-global() {
230-
color: map-get(variables.$palette-foreground-dark, "disabled-text");
231-
}
232-
@include public-util.mat-css-light-theme-global() {
233-
color: map-get(variables.$palette-foreground, "disabled-text");
234-
}
235-
}
236-
237-
.mat-mdc-select-arrow {
238-
@include public-util.mat-css-dark-theme-global() {
239-
color: map-get(variables.$palette-foreground-dark, "secondary-text");
240-
}
241-
@include public-util.mat-css-light-theme-global() {
242-
color: map-get(variables.$palette-foreground, "secondary-text");
243-
}
244-
}
245-
246-
.mat-mdc-form-field {
247-
.mat-mdc-select.mat-mdc-select-disabled .mat-mdc-select-arrow {
248-
@include public-util.mat-css-dark-theme-global() {
249-
color: map-get(variables.$palette-foreground-dark, "disabled-text");
250-
}
251-
@include public-util.mat-css-light-theme-global() {
252-
color: map-get(variables.$palette-foreground, "disabled-text");
253-
}
254-
}
255-
}
256-
}
257-
258179
// ---------------------------
259180
// CHECKBOX component
260181
// ---------------------------
@@ -282,20 +203,6 @@
282203
}
283204
}
284205

285-
// ---------------------------
286-
// CHIPS component
287-
// ---------------------------
288-
@mixin _mat-mdc-chips-overwrites {
289-
.mat-mdc-standard-chip {
290-
@include public-util.mat-css-dark-theme-global() {
291-
--mdc-chip-elevated-container-color: #{map-get(variables.$palette-background-dark, "unselected-chip")};
292-
}
293-
@include public-util.mat-css-light-theme-global() {
294-
--mdc-chip-elevated-container-color: #{map-get(variables.$palette-background, "unselected-chip")};
295-
}
296-
}
297-
}
298-
299206
// ---------------------------
300207
// DATE PICKER component
301208
// ---------------------------
@@ -376,17 +283,3 @@
376283
}
377284
}
378285
}
379-
380-
// ---------------------------
381-
// SNACKBAR component
382-
// ---------------------------
383-
@mixin _mat-mdc-snackbar-overwrites() {
384-
.mat-mdc-snack-bar-container {
385-
@include public-util.mat-css-dark-theme-global() {
386-
--mdc-snackbar-container-color: #{map-get(variables.$palette-background-dark, "snackbar")};
387-
}
388-
@include public-util.mat-css-light-theme-global() {
389-
--mdc-snackbar-container-color: #{map-get(variables.$palette-background, "snackbar")};
390-
}
391-
}
392-
}

‎projects/material-css-vars/src/lib/_variables.scss

Lines changed: 0 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -109,10 +109,8 @@ $default-background: (
109109
--palette-background-selected-button: public-color-util.hex-to-rgb(map_get(mat.$grey-palette, 300)),
110110
--palette-background-selected-disabled-button: public-color-util.hex-to-rgb(map_get(mat.$grey-palette, 400)),
111111
--palette-background-disabled-button-toggle: public-color-util.hex-to-rgb(map_get(mat.$grey-palette, 200)),
112-
--palette-background-unselected-chip: public-color-util.hex-to-rgb(map_get(mat.$grey-palette, 300)),
113112
--palette-background-disabled-list-option: public-color-util.hex-to-rgb(map_get(mat.$grey-palette, 200)),
114113
--palette-background-tooltip: public-color-util.hex-to-rgb(map_get(mat.$grey-palette, 700)),
115-
--palette-background-snackbar: public-color-util.hex-to-rgb(map_get(mat.$grey-palette, 800)),
116114
// DARK
117115
--palette-background-status-bar-dark: public-color-util.hex-to-rgb(#000),
118116
--palette-background-app-bar-dark: public-color-util.hex-to-rgb(map_get(mat.$grey-palette, 900)),
@@ -129,10 +127,8 @@ $default-background: (
129127
--palette-background-selected-button-dark: public-color-util.hex-to-rgb(map_get(mat.$grey-palette, 900)),
130128
--palette-background-selected-disabled-button-dark: public-color-util.hex-to-rgb(map_get(mat.$grey-palette, 800)),
131129
--palette-background-disabled-button-toggle-dark: public-color-util.hex-to-rgb(#000000),
132-
--palette-background-unselected-chip-dark: public-color-util.hex-to-rgb(map_get(mat.$grey-palette, 700)),
133130
--palette-background-disabled-list-option-dark: public-color-util.hex-to-rgb(#000000),
134131
--palette-background-tooltip-dark: public-color-util.hex-to-rgb(map_get(mat.$grey-palette, 700)),
135-
--palette-background-snackbar-dark: public-color-util.hex-to-rgb(map_get(mat.$grey-palette, 300)),
136132
) !default;
137133

138134
$text: map-merge(
@@ -552,85 +548,3 @@ $contrast-palette-accent: map_get($palette-accent, "contrast") !default;
552548
$contrast-palette-accent-no-rgb: map_get($palette-accent-no-rgb, "contrast") !default;
553549
$contrast-palette-warn: map_get($palette-warn, "contrast") !default;
554550
$contrast-palette-warn-no-rgb: map_get($palette-warn-no-rgb, "contrast") !default;
555-
556-
// Background palette for light themes.
557-
$palette-background: (
558-
status-bar: rgb(var(--palette-background-status-bar)),
559-
app-bar: rgb(var(--palette-background-app-bar)),
560-
background: rgb(var(--palette-background-background)),
561-
hover: rgba(var(--palette-background-hover), var(--palette-background-hover-alpha)),
562-
card: rgb(var(--palette-background-card)),
563-
dialog: rgb(var(--palette-background-dialog)),
564-
disabled-button: rgba(var(--palette-background-disabled-button), var(--palette-background-disabled-button-alpha)),
565-
raised-button: rgb(var(--palette-background-raised-button)),
566-
focused-button: rgba(var(--palette-background-focused-button), var(--palette-background-focused-button-alpha)),
567-
selected-button: rgb(var(--palette-background-selected-button)),
568-
selected-disabled-button: rgb(var(--palette-background-selected-disabled-button)),
569-
disabled-button-toggle: rgb(var(--palette-background-disabled-button-toggle)),
570-
unselected-chip: rgb(var(--palette-background-unselected-chip)),
571-
disabled-list-option: rgb(var(--palette-background-disabled-list-option)),
572-
tooltip: rgb(var(--palette-background-tooltip)),
573-
snackbar: rgb(var(--palette-background-snackbar)),
574-
) !default;
575-
576-
// Background palette for dark themes.
577-
$palette-background-dark: (
578-
status-bar: rgb(var(--palette-background-status-bar-dark)),
579-
app-bar: rgb(var(--palette-background-app-bar-dark)),
580-
background: rgb(var(--palette-background-background-dark)),
581-
hover: rgba(var(--palette-background-hover-dark), var(--palette-background-hover-dark-alpha)),
582-
card: rgb(var(--palette-background-card-dark)),
583-
dialog: rgb(var(--palette-background-dialog-dark)),
584-
disabled-button: rgba(var(--palette-background-disabled-button-dark), var(--palette-background-disabled-button-dark-alpha)),
585-
raised-button: rgb(var(--palette-background-raised-button-dark)),
586-
focused-button: rgba(var(--palette-background-focused-button-dark), var(--palette-background-focused-button-dark-alpha)),
587-
selected-button: rgb(var(--palette-background-selected-button-dark)),
588-
selected-disabled-button: rgb(var(--palette-background-selected-disabled-button-dark)),
589-
disabled-button-toggle: rgb(var(--palette-background-disabled-button-toggle-dark)),
590-
unselected-chip: rgb(var(--palette-background-unselected-chip-dark)),
591-
disabled-list-option: rgb(var(--palette-background-disabled-list-option-dark)),
592-
tooltip: rgb(var(--palette-background-tooltip-dark)),
593-
snackbar: rgb(var(--palette-background-snackbar-dark)),
594-
) !default;
595-
596-
// Foreground palette for light themes.
597-
$palette-foreground: (
598-
base: black, //rgb(var(--palette-foreground-base)),
599-
divider: rgba(var(--palette-foreground-divider), var(--palette-foreground-divider-alpha)),
600-
dividers: rgba(var(--palette-foreground-dividers), var(--palette-foreground-dividers-alpha)),
601-
disabled: rgba(var(--palette-foreground-disabled), var(--palette-foreground-disabled-alpha)),
602-
disabled-button: rgba(var(--palette-foreground-disabled-button), var(--palette-foreground-disabled-button-alpha)),
603-
disabled-text: rgba(var(--palette-foreground-disabled-text), var(--palette-foreground-disabled-text-alpha)),
604-
elevation: black, //rgb(var(--palette-foreground-elevation)),
605-
hint-text: rgba(var(--palette-foreground-hint-text), var(--palette-foreground-hint-text-alpha)),
606-
secondary-text: rgba(var(--palette-foreground-secondary-text), var(--palette-foreground-secondary-text-alpha)),
607-
icon: rgba(var(--palette-foreground-icon), var(--palette-foreground-icon-alpha)),
608-
icons: rgba(var(--palette-foreground-icons), var(--palette-foreground-icons-alpha)),
609-
text: rgba(var(--palette-foreground-text), var(--palette-foreground-text-alpha)),
610-
slider-min: rgba(var(--palette-foreground-slider-min), var(--palette-foreground-slider-min-alpha)),
611-
slider-off: rgba(var(--palette-foreground-slider-off), var(--palette-foreground-slider-off-alpha)),
612-
slider-off-active: rgba(var(--palette-foreground-slider-off-active), var(--palette-foreground-slider-off-active-alpha)),
613-
) !default;
614-
615-
// Foreground palette for dark themes.
616-
$palette-foreground-dark: (
617-
base: white, //rgb(var(--palette-foreground-base-dark)),
618-
divider: rgba(var(--palette-foreground-divider-dark), var(--palette-foreground-divider-dark-alpha)),
619-
dividers: rgba(var(--palette-foreground-dividers-dark), var(--palette-foreground-dividers-dark-alpha)),
620-
disabled: rgba(var(--palette-foreground-disabled-dark), var(--palette-foreground-disabled-dark-alpha)),
621-
disabled-button: rgba(var(--palette-foreground-disabled-button-dark), var(--palette-foreground-disabled-button-dark-alpha)),
622-
disabled-text: rgba(var(--palette-foreground-disabled-text-dark), var(--palette-foreground-disabled-text-dark-alpha)),
623-
elevation: black, //rgb(var(--palette-foreground-elevation-dark)),
624-
hint-text: rgba(var(--palette-foreground-hint-text-dark), var(--palette-foreground-hint-text-dark-alpha)),
625-
secondary-text: rgba(var(--palette-foreground-secondary-text-dark), var(--palette-foreground-secondary-text-dark-alpha)),
626-
icon: rgba(var(--palette-foreground-icon-dark), var(--palette-foreground-icon-dark-alpha)),
627-
icons: rgba(var(--palette-foreground-icons-dark), var(--palette-foreground-icons-dark-alpha)),
628-
text: rgba(var(--palette-foreground-text-dark), var(--palette-foreground-text-dark-alpha)),
629-
slider-min: rgba(var(--palette-foreground-slider-min-dark), var(--palette-foreground-slider-min-dark-alpha)),
630-
slider-off: rgba(var(--palette-foreground-slider-off-dark), var(--palette-foreground-slider-off-dark-alpha)),
631-
slider-off-active: rgba(var(--palette-foreground-slider-off-active-dark), var(--palette-foreground-slider-off-active-dark-alpha)),
632-
) !default;
633-
634-
$contrast-palette: map_get($palette-primary, "contrast") !default;
635-
$contrast-palette-accent: map_get($palette-accent, "contrast") !default;
636-
$contrast-palette-warn: map_get($palette-warn, "contrast") !default;

‎src/app/app.component.html

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -464,7 +464,7 @@ <h2>Material Checkbox</h2>
464464
<mat-checkbox class="checkbox-margin">Check me!</mat-checkbox>
465465
<mat-checkbox class="checkbox-margin" [disabled]="true">Disabled</mat-checkbox>
466466
</section>
467-
467+
468468
<section class="checkbox-section">
469469
<span class="checkbox-list-section">
470470
<mat-checkbox class="checkbox-margin"
@@ -589,6 +589,7 @@ <h2>Material Chips</h2>
589589
selected="true">
590590
{{chipColor.name}}
591591
</mat-chip-option>
592+
<mat-chip-option disabled>Disabled</mat-chip-option>
592593
</mat-chip-listbox>
593594
</mat-card-content>
594595
</mat-card>
@@ -620,7 +621,7 @@ <h2>Material Menu</h2>
620621
</mat-card-content>
621622
</mat-card>
622623
<!-- /Material Menu-->
623-
624+
624625
<!-- Material Select -->
625626
<mat-card>
626627
<mat-card-content>
@@ -658,13 +659,13 @@ <h2>Material Date Picker</h2>
658659
<input matInput [matDatepicker]="picker3">
659660
<mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
660661
<mat-datepicker #picker3></mat-datepicker>
661-
</mat-form-field>
662+
</mat-form-field>
662663
<mat-form-field color="accent" appearance="fill">
663664
<mat-label>Custom (accent/primary)</mat-label>
664665
<input matInput [matDatepicker]="picker4">
665666
<mat-datepicker-toggle matSuffix [for]="picker4"></mat-datepicker-toggle>
666667
<mat-datepicker #picker4 color="primary"></mat-datepicker>
667-
</mat-form-field>
668+
</mat-form-field>
668669
</mat-card-content>
669670
</mat-card>
670671
<!-- /Material Date Picker -->
@@ -681,7 +682,7 @@ <h2>Material Date Range Picker</h2>
681682
</mat-date-range-input>
682683
<mat-datepicker-toggle matSuffix [for]="rangePicker1"></mat-datepicker-toggle>
683684
<mat-date-range-picker #rangePicker1></mat-date-range-picker>
684-
</mat-form-field>
685+
</mat-form-field>
685686
<mat-form-field color="accent" appearance="fill">
686687
<mat-label>Enter a date range (accent)</mat-label>
687688
<mat-date-range-input [rangePicker]="rangePicker2">
@@ -690,7 +691,7 @@ <h2>Material Date Range Picker</h2>
690691
</mat-date-range-input>
691692
<mat-datepicker-toggle matSuffix [for]="rangePicker2"></mat-datepicker-toggle>
692693
<mat-date-range-picker #rangePicker2></mat-date-range-picker>
693-
</mat-form-field>
694+
</mat-form-field>
694695
<mat-form-field color="warn" appearance="fill">
695696
<mat-label>Enter a date range (warn)</mat-label>
696697
<mat-date-range-input [rangePicker]="rangePicker3">
@@ -699,7 +700,7 @@ <h2>Material Date Range Picker</h2>
699700
</mat-date-range-input>
700701
<mat-datepicker-toggle matSuffix [for]="rangePicker3"></mat-datepicker-toggle>
701702
<mat-date-range-picker #rangePicker3></mat-date-range-picker>
702-
</mat-form-field>
703+
</mat-form-field>
703704
</mat-card-content>
704705
</mat-card>
705706
<!-- /Material Date Range Picker -->
@@ -710,12 +711,12 @@ <h2>Material Date Range Picker</h2>
710711
<mat-label>Message</mat-label>
711712
<input matInput value="Disco party!" #message>
712713
</mat-form-field>
713-
714+
714715
<mat-form-field appearance="fill">
715716
<mat-label>Action</mat-label>
716717
<input matInput value="Dance" #action>
717718
</mat-form-field>
718-
719+
719720
<button mat-stroked-button (click)="showSnackbar(message.value, action.value)">Show snack-bar</button>
720721
</mat-tab>
721722

0 commit comments

Comments
 (0)