Skip to content

Commit 43dfe63

Browse files
xelaintxelaint
authored
feat(design): update card theme to support light and dark mode (#3634)
1 parent 28ef4c9 commit 43dfe63

7 files changed

Lines changed: 258 additions & 81 deletions

File tree

‎libs/design/card/examples/src/card-theming/card-theming.component.html‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,23 @@
1-
<daff-card [color]="colorControl.value">
1+
<daff-card [color]="cardControl.value">
22
<div daffCardTagline>Card Tagline</div>
33
<div daffCardTitle>Title</div>
44
<div daffCardContent>
55
<p>Cards are themable.</p>
66
</div>
77
</daff-card>
88

9-
<select [formControl]="colorControl">
9+
<select [formControl]="cardControl">
10+
<option *ngFor="let option of options" [value]="option.value">{{ option.label }}</option>
11+
</select>
12+
13+
<daff-stroked-card [color]="strokedCardControl.value">
14+
<div daffCardTagline>Card Tagline</div>
15+
<div daffCardTitle>Title</div>
16+
<div daffCardContent>
17+
<p>Cards are themable.</p>
18+
</div>
19+
</daff-stroked-card>
20+
21+
<select [formControl]="strokedCardControl">
1022
<option *ngFor="let option of options" [value]="option.value">{{ option.label }}</option>
1123
</select>

‎libs/design/card/examples/src/card-theming/card-theming.component.ts‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,31 @@ import {
88
ReactiveFormsModule,
99
} from '@angular/forms';
1010

11-
import { DAFF_CARD_COMPONENTS } from '@daffodil/design/card';
11+
import {
12+
DAFF_CARD_COMPONENTS,
13+
DAFF_STROKED_CARD_COMPONENTS,
14+
} from '@daffodil/design/card';
1215

1316
@Component({
1417
// eslint-disable-next-line @angular-eslint/component-selector
1518
selector: 'card-theming',
1619
templateUrl: './card-theming.component.html',
1720
styles: [`
18-
daff-card {
21+
daff-card, daff-stroked-card {
1922
max-width: 480px;
2023
}
2124
`],
2225
changeDetection: ChangeDetectionStrategy.OnPush,
2326
imports: [
2427
DAFF_CARD_COMPONENTS,
28+
DAFF_STROKED_CARD_COMPONENTS,
2529
ReactiveFormsModule,
2630
NgFor,
2731
],
2832
})
2933
export class CardThemingComponent {
30-
colorControl: UntypedFormControl = new UntypedFormControl('');
34+
cardControl: UntypedFormControl = new UntypedFormControl('');
35+
strokedCardControl: UntypedFormControl = new UntypedFormControl('');
3136

3237
options = [
3338
{ value: '', label: 'Default' },
@@ -36,7 +41,7 @@ export class CardThemingComponent {
3641
{ value: 'tertiary', label: 'Tertiary' },
3742
{ value: 'theme', label: 'Theme' },
3843
{ value: 'theme-contrast', label: 'Theme Contrast' },
39-
{ value: 'black', label: 'Black' },
40-
{ value: 'white', label: 'White' },
44+
{ value: 'dark', label: 'Dark' },
45+
{ value: 'light', label: 'Light' },
4146
];
4247
}

‎libs/design/card/examples/src/linkable-card/linkable-card.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export class LinkableCardComponent {
4242
{ value: 'tertiary', label: 'Tertiary' },
4343
{ value: 'theme', label: 'Theme' },
4444
{ value: 'theme-contrast', label: 'Theme Contrast' },
45-
{ value: 'black', label: 'Black' },
46-
{ value: 'white', label: 'White' },
45+
{ value: 'dark', label: 'Dark' },
46+
{ value: 'light', label: 'Light' },
4747
];
4848
}

‎libs/design/card/examples/src/raised-card/raised-card.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export class RaisedCardComponent {
3434
{ value: 'tertiary', label: 'Tertiary' },
3535
{ value: 'theme', label: 'Theme' },
3636
{ value: 'theme-contrast', label: 'Theme Contrast' },
37-
{ value: 'black', label: 'Black' },
38-
{ value: 'white', label: 'White' },
37+
{ value: 'dark', label: 'Dark' },
38+
{ value: 'light', label: 'Light' },
3939
];
4040
}

‎libs/design/card/examples/src/stroked-card/stroked-card.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export class StrokedCardComponent {
3434
{ value: 'tertiary', label: 'Tertiary' },
3535
{ value: 'theme', label: 'Theme' },
3636
{ value: 'theme-contrast', label: 'Theme Contrast' },
37-
{ value: 'black', label: 'Black' },
38-
{ value: 'white', label: 'White' },
37+
{ value: 'dark', label: 'Dark' },
38+
{ value: 'light', label: 'Light' },
3939
];
4040
}

‎libs/design/card/src/card-base-theme.scss‎

Lines changed: 126 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -35,24 +35,46 @@
3535
$white: core.daff-map-get($theme, 'core', 'white');
3636
$black: core.daff-map-get($theme, 'core', 'black');
3737
$neutral: core.daff-map-get($theme, 'core', 'neutral');
38+
$type: core.daff-map-get($theme, 'core', 'type');
3839

3940
.daff-card,
40-
.daff-raised-card,
41-
.daff-stroked-card {
42-
@include daff-basic-card-theme-variant(
43-
theming.daff-illuminate($base, $neutral, 1)
44-
);
45-
46-
&.daff-primary {
47-
@include daff-basic-card-theme-variant(theming.daff-color($primary));
48-
}
41+
.daff-raised-card {
42+
@include theming.light($type) {
43+
@include daff-basic-card-theme-variant(theming.daff-color($neutral, 10));
44+
45+
&.daff-primary {
46+
@include daff-basic-card-theme-variant(theming.daff-color($primary));
47+
}
4948

50-
&.daff-secondary {
51-
@include daff-basic-card-theme-variant(theming.daff-color($secondary));
49+
&.daff-secondary {
50+
@include daff-basic-card-theme-variant(theming.daff-color($secondary));
51+
}
52+
53+
&.daff-tertiary {
54+
@include daff-basic-card-theme-variant(theming.daff-color($tertiary));
55+
}
5256
}
5357

54-
&.daff-tertiary {
55-
@include daff-basic-card-theme-variant(theming.daff-color($tertiary));
58+
@include theming.dark($type) {
59+
@include daff-basic-card-theme-variant(theming.daff-color($neutral, 90));
60+
61+
&.daff-primary {
62+
@include daff-basic-card-theme-variant(
63+
theming.daff-color($primary, 60)
64+
);
65+
}
66+
67+
&.daff-secondary {
68+
@include daff-basic-card-theme-variant(
69+
theming.daff-color($secondary, 60)
70+
);
71+
}
72+
73+
&.daff-tertiary {
74+
@include daff-basic-card-theme-variant(
75+
theming.daff-color($tertiary, 60)
76+
);
77+
}
5678
}
5779

5880
&.daff-theme {
@@ -63,63 +85,112 @@
6385
@include daff-basic-card-theme-variant($base-contrast);
6486
}
6587

66-
&.daff-black {
67-
@include daff-basic-card-theme-variant($black);
88+
&.daff-dark {
89+
@include daff-basic-card-theme-variant(theming.daff-color($neutral, 90));
6890
}
6991

70-
&.daff-white {
71-
@include daff-basic-card-theme-variant($white);
92+
&.daff-light {
93+
@include daff-basic-card-theme-variant(theming.daff-color($neutral, 10));
7294
}
7395
}
7496

7597
a {
7698
&.daff-card,
77-
&.daff-raised-card,
78-
&.daff-stroked-card {
79-
@include daff-linkable-card-theme-variant(
80-
theming.daff-illuminate($base, $neutral, 2)
81-
);
82-
83-
&.daff-primary {
99+
&.daff-raised-card {
100+
@include theming.light($type) {
84101
@include daff-linkable-card-theme-variant(
85-
theming.daff-color($primary, 70)
102+
theming.daff-color($neutral, 20)
86103
);
87-
}
88104

89-
&.daff-secondary {
90-
@include daff-linkable-card-theme-variant(
91-
theming.daff-color($secondary, 70)
92-
);
105+
&.daff-primary {
106+
@include daff-linkable-card-theme-variant(
107+
theming.daff-color($primary, 70)
108+
);
109+
}
110+
111+
&.daff-secondary {
112+
@include daff-linkable-card-theme-variant(
113+
theming.daff-color($secondary, 70)
114+
);
115+
}
116+
117+
&.daff-tertiary {
118+
@include daff-linkable-card-theme-variant(
119+
theming.daff-color($tertiary, 70)
120+
);
121+
}
122+
123+
&.daff-theme {
124+
@include daff-linkable-card-theme-variant(
125+
theming.daff-color($neutral, 10)
126+
);
127+
}
128+
129+
&.daff-theme-contrast {
130+
@include daff-linkable-card-theme-variant(
131+
theming.daff-color($neutral, 100)
132+
);
133+
}
134+
135+
&.daff-dark {
136+
@include daff-linkable-card-theme-variant(
137+
theming.daff-color($neutral, 90)
138+
);
139+
}
140+
141+
&.daff-light {
142+
@include daff-linkable-card-theme-variant(
143+
theming.daff-color($neutral, 10)
144+
);
145+
}
93146
}
94147

95-
&.daff-tertiary {
148+
@include theming.dark($type) {
96149
@include daff-linkable-card-theme-variant(
97-
theming.daff-color($tertiary, 70)
150+
theming.daff-color($neutral, 80)
98151
);
99-
}
100-
101-
&.daff-theme {
102-
@include daff-linkable-card-theme-variant(
103-
theming.daff-illuminate($base, $neutral, 1)
104-
);
105-
}
106152

107-
&.daff-theme-contrast {
108-
@include daff-linkable-card-theme-variant(
109-
theming.daff-illuminate($base-contrast, $neutral, 1)
110-
);
111-
}
112-
113-
&.daff-black {
114-
@include daff-linkable-card-theme-variant(
115-
theming.daff-color($neutral, 100)
116-
);
117-
}
118-
119-
&.daff-white {
120-
@include daff-linkable-card-theme-variant(
121-
theming.daff-color($neutral, 10)
122-
);
153+
&.daff-primary {
154+
@include daff-linkable-card-theme-variant(
155+
theming.daff-color($primary, 70)
156+
);
157+
}
158+
159+
&.daff-secondary {
160+
@include daff-linkable-card-theme-variant(
161+
theming.daff-color($secondary, 70)
162+
);
163+
}
164+
165+
&.daff-tertiary {
166+
@include daff-linkable-card-theme-variant(
167+
theming.daff-color($tertiary, 70)
168+
);
169+
}
170+
171+
&.daff-theme {
172+
@include daff-linkable-card-theme-variant(
173+
theming.daff-color($neutral, 90)
174+
);
175+
}
176+
177+
&.daff-theme-contrast {
178+
@include daff-linkable-card-theme-variant(
179+
theming.daff-color($neutral, 10)
180+
);
181+
}
182+
183+
&.daff-dark {
184+
@include daff-linkable-card-theme-variant(
185+
theming.daff-color($neutral, 100)
186+
);
187+
}
188+
189+
&.daff-light {
190+
@include daff-linkable-card-theme-variant(
191+
theming.daff-color($neutral, 10)
192+
);
193+
}
123194
}
124195
}
125196
}

0 commit comments

Comments
 (0)