Skip to content

Commit 447d64c

Browse files
json-derulojson-derulo
committed
fix: use correct contrast color in any theme
1 parent 5f8bdd2 commit 447d64c

File tree

3 files changed

+115
-116
lines changed

3 files changed

+115
-116
lines changed

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626
$accent-contrast: public-util.mat-css-color(500, null, "accent", true);
2727
$warn-contrast: public-util.mat-css-color(500, null, "warn", true);
2828

29-
.mat-mdc-fab,
30-
.mat-mdc-mini-fab {
29+
.mat-mdc-fab:not(:disabled),
30+
.mat-mdc-mini-fab:not(:disabled) {
3131
&.mat-primary {
3232
--mdc-fab-container-color: #{$primary};
3333
--mdc-fab-icon-color: #{$primary-contrast};
@@ -68,8 +68,7 @@
6868
}
6969
}
7070
.mat-mdc-unelevated-button:not(:disabled),
71-
.mat-mdc-unelevated-button,
72-
.mat-mdc-raised-button {
71+
.mat-mdc-raised-button:not(:disabled) {
7372
&.mat-primary {
7473
--mdc-filled-button-label-text-color: #{$color-primary};
7574
--mdc-protected-button-label-text-color: #{$color-primary};

‎projects/material-css-vars/src/lib/material-css-vars.service.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export class MaterialCssVarsService {
5555
};
5656
this.isAutoContrast = this.cfg.isAutoContrast;
5757

58-
if (this.cfg.isDarkTheme) {
58+
if (typeof this.cfg.isDarkTheme === 'boolean') {
5959
this.setDarkTheme(this.cfg.isDarkTheme);
6060
}
6161
if (this.cfg.primary) {

‎projects/material-css-vars/src/test/integration.spec.ts

Lines changed: 111 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -15,134 +15,134 @@ class ButtonComponent {
1515
@Input() color: ThemePalette;
1616
}
1717

18+
function getButtonComputedStyle(fixture: ComponentFixture<ButtonComponent>): CSSStyleDeclaration {
19+
const buttonElement = fixture.debugElement.query(By.css('button')).nativeElement;
20+
return getComputedStyle(buttonElement);
21+
}
22+
1823
describe('integration', () => {
19-
describe('custom colors', () => {
20-
let button: ButtonComponent;
21-
let fixture: ComponentFixture<ButtonComponent>;
22-
23-
beforeEach(() => {
24-
TestBed.configureTestingModule({
25-
imports: [
26-
MaterialCssVarsModule.forRoot({
27-
primary: '#00ff00',
28-
accent: '#0000ff',
29-
warn: '#ff0000',
30-
}),
31-
],
24+
['isLightTheme', 'isDarkTheme', 'unthemed'].forEach(theme => {
25+
const isDarkTheme = theme === 'unthemed' ? undefined : theme === 'isDarkTheme';
26+
27+
describe(theme, () => {
28+
describe('custom colors', () => {
29+
let button: ButtonComponent;
30+
let fixture: ComponentFixture<ButtonComponent>;
31+
32+
beforeEach(() => {
33+
TestBed.configureTestingModule({
34+
imports: [
35+
MaterialCssVarsModule.forRoot({
36+
primary: '#00ff00',
37+
accent: '#0000ff',
38+
warn: '#ff0000',
39+
isDarkTheme,
40+
}),
41+
],
42+
});
43+
fixture = TestBed.createComponent(ButtonComponent);
44+
button = fixture.componentInstance;
45+
});
46+
47+
it('should render a button in the given primary color', () => {
48+
button.color = 'primary';
49+
fixture.detectChanges();
50+
51+
expect(getButtonComputedStyle(fixture).backgroundColor).toEqual('rgb(0, 255, 0)');
52+
});
53+
54+
it('should choose the right contrast color for the primary color', () => {
55+
button.color = 'primary';
56+
fixture.detectChanges();
57+
58+
expect(getButtonComputedStyle(fixture).color).toEqual('rgba(0, 0, 0, 0.87)');
59+
});
60+
61+
it('should render a button in the given accent color', () => {
62+
button.color = 'accent';
63+
fixture.detectChanges();
64+
65+
expect(getButtonComputedStyle(fixture).backgroundColor).toEqual('rgb(0, 0, 255)');
66+
});
67+
68+
it('should choose the right contrast color for the accent color', () => {
69+
button.color = 'accent';
70+
fixture.detectChanges();
71+
72+
expect(getButtonComputedStyle(fixture).color).toEqual('rgb(255, 255, 255)');
73+
});
74+
75+
it('should render a button in the given warn color', () => {
76+
button.color = 'warn';
77+
fixture.detectChanges();
78+
79+
expect(getButtonComputedStyle(fixture).backgroundColor).toEqual('rgb(255, 0, 0)');
80+
});
81+
82+
it('should choose the right contrast color for the warn color', () => {
83+
button.color = 'warn';
84+
fixture.detectChanges();
85+
86+
expect(getButtonComputedStyle(fixture).color).toEqual('rgb(255, 255, 255)');
87+
});
3288
});
33-
fixture = TestBed.createComponent(ButtonComponent);
34-
button = fixture.componentInstance;
35-
});
3689

37-
it('should render a button in the given primary color', () => {
38-
button.color = 'primary';
39-
fixture.detectChanges();
40-
const buttonElement = fixture.debugElement.query(By.css('button')).nativeElement;
90+
describe('default colors', () => {
91+
let button: ButtonComponent;
92+
let fixture: ComponentFixture<ButtonComponent>;
4193

42-
expect(getComputedStyle(buttonElement).backgroundColor).toEqual('rgb(0, 255, 0)');
43-
});
94+
beforeEach(() => {
95+
TestBed.configureTestingModule({
96+
imports: [
97+
MaterialCssVarsModule.forRoot({isDarkTheme}),
98+
],
99+
});
100+
fixture = TestBed.createComponent(ButtonComponent);
101+
button = fixture.componentInstance;
102+
});
44103

45-
it('should choose the right contrast color for the primary color', () => {
46-
button.color = 'primary';
47-
fixture.detectChanges();
48-
const buttonElement = fixture.debugElement.query(By.css('button')).nativeElement;
104+
it('should render a button in the default primary color', () => {
105+
button.color = 'primary';
106+
fixture.detectChanges();
49107

50-
expect(getComputedStyle(buttonElement).color).toEqual('rgba(0, 0, 0, 0.87)');
51-
});
108+
expect(getButtonComputedStyle(fixture).backgroundColor).toEqual('rgb(3, 169, 244)');
109+
});
52110

53-
it('should render a button in the given accent color', () => {
54-
button.color = 'accent';
55-
fixture.detectChanges();
56-
const buttonElement = fixture.debugElement.query(By.css('button')).nativeElement;
111+
it('should choose the right contrast color for the primary color', () => {
112+
button.color = 'primary';
113+
fixture.detectChanges();
57114

58-
expect(getComputedStyle(buttonElement).backgroundColor).toEqual('rgb(0, 0, 255)');
59-
});
115+
expect(getButtonComputedStyle(fixture).color).toEqual('rgb(255, 255, 255)');
116+
});
60117

61-
it('should choose the right contrast color for the accent color', () => {
62-
button.color = 'accent';
63-
fixture.detectChanges();
64-
const buttonElement = fixture.debugElement.query(By.css('button')).nativeElement;
118+
it('should render a button in the default accent color', () => {
119+
button.color = 'accent';
120+
fixture.detectChanges();
65121

66-
expect(getComputedStyle(buttonElement).color).toEqual('rgb(255, 255, 255)');
67-
});
122+
expect(getButtonComputedStyle(fixture).backgroundColor).toEqual('rgb(233, 30, 99)');
123+
});
68124

69-
it('should render a button in the given warn color', () => {
70-
button.color = 'warn';
71-
fixture.detectChanges();
72-
const buttonElement = fixture.debugElement.query(By.css('button')).nativeElement as HTMLButtonElement;
125+
it('should choose the right contrast color for the accent color', () => {
126+
button.color = 'accent';
127+
fixture.detectChanges();
73128

74-
expect(window.getComputedStyle(buttonElement).backgroundColor).toEqual('rgb(255, 0, 0)');
75-
});
129+
expect(getButtonComputedStyle(fixture).color).toEqual('rgb(255, 255, 255)');
130+
});
76131

77-
it('should choose the right contrast color for the warn color', () => {
78-
button.color = 'warn';
79-
fixture.detectChanges();
80-
const buttonElement = fixture.debugElement.query(By.css('button')).nativeElement;
132+
it('should render a button in the default warn color', () => {
133+
button.color = 'warn';
134+
fixture.detectChanges();
81135

82-
expect(getComputedStyle(buttonElement).color).toEqual('rgb(255, 255, 255)');
83-
});
84-
});
136+
expect(getButtonComputedStyle(fixture).backgroundColor).toEqual('rgb(244, 67, 54)');
137+
});
85138

86-
describe('default colors', () => {
87-
let button: ButtonComponent;
88-
let fixture: ComponentFixture<ButtonComponent>;
139+
it('should choose the right contrast color for the warn color', () => {
140+
button.color = 'warn';
141+
fixture.detectChanges();
89142

90-
beforeEach(() => {
91-
TestBed.configureTestingModule({
92-
imports: [
93-
MaterialCssVarsModule.forRoot({}),
94-
],
143+
expect(getButtonComputedStyle(fixture).color).toEqual('rgb(255, 255, 255)');
144+
});
95145
});
96-
fixture = TestBed.createComponent(ButtonComponent);
97-
button = fixture.componentInstance;
98-
});
99-
100-
it('should render a button in the default primary color', () => {
101-
button.color = 'primary';
102-
fixture.detectChanges();
103-
const buttonElement = fixture.debugElement.query(By.css('button')).nativeElement;
104-
105-
expect(getComputedStyle(buttonElement).backgroundColor).toEqual('rgb(3, 169, 244)');
106-
});
107-
108-
it('should choose the right contrast color for the primary color', () => {
109-
button.color = 'primary';
110-
fixture.detectChanges();
111-
const buttonElement = fixture.debugElement.query(By.css('button')).nativeElement;
112-
113-
expect(getComputedStyle(buttonElement).color).toEqual('rgb(255, 255, 255)');
114-
});
115-
116-
it('should render a button in the default accent color', () => {
117-
button.color = 'accent';
118-
fixture.detectChanges();
119-
const buttonElement = fixture.debugElement.query(By.css('button')).nativeElement;
120-
121-
expect(getComputedStyle(buttonElement).backgroundColor).toEqual('rgb(233, 30, 99)');
122-
});
123-
124-
it('should choose the right contrast color for the accent color', () => {
125-
button.color = 'accent';
126-
fixture.detectChanges();
127-
const buttonElement = fixture.debugElement.query(By.css('button')).nativeElement;
128-
129-
expect(getComputedStyle(buttonElement).color).toEqual('rgb(255, 255, 255)');
130-
});
131-
132-
it('should render a button in the default warn color', () => {
133-
button.color = 'warn';
134-
fixture.detectChanges();
135-
const buttonElement = fixture.debugElement.query(By.css('button')).nativeElement as HTMLButtonElement;
136-
137-
expect(window.getComputedStyle(buttonElement).backgroundColor).toEqual('rgb(244, 67, 54)');
138-
});
139-
140-
it('should choose the right contrast color for the warn color', () => {
141-
button.color = 'warn';
142-
fixture.detectChanges();
143-
const buttonElement = fixture.debugElement.query(By.css('button')).nativeElement;
144-
145-
expect(getComputedStyle(buttonElement).color).toEqual('rgb(255, 255, 255)');
146146
});
147147
});
148148

0 commit comments

Comments
 (0)