Skip to content

Commit 2ccea11

Browse files
simeonoffsimeonoff
authored
feat(list): add selected item colors (#391)
* feat(list): add selected item colors * feat(list): add selected colors for the dark themes * refactor(list): add selected text-color for bootstrap
1 parent 9cce63d commit 2ccea11

File tree

2 files changed

+159
-14
lines changed

2 files changed

+159
-14
lines changed

‎sass/themes/schemas/components/dark/_list.scss‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
/// @type {Map}
1212
/// @prop {Map} item-background-hover [color: ('gray', 100)] - The list item hover background.
1313
/// @prop {Map} item-background-active [color: ('gray', 100)] - The active list item background color.
14+
/// @prop {Map} item-background-selected [color: ('gray', 100)] - The selected list item background color.
1415
$base-dark-list: (
1516
item-background-hover: (
1617
color: (
@@ -25,6 +26,13 @@ $base-dark-list: (
2526
100,
2627
),
2728
),
29+
30+
item-background-selected: (
31+
color: (
32+
'gray',
33+
100,
34+
),
35+
),
2836
);
2937

3038
/// Generates a dark material list schema based.
@@ -45,6 +53,7 @@ $dark-fluent-list: extend($fluent-list, $base-dark-list);
4553
/// @prop {Map} item-background [color: ('gray', 50)] - The list item background color.
4654
/// @prop {Map} item-background-hover [color: ('gray', 100)] - The list item hover background.
4755
/// @prop {Map} item-background-active [color: ('gray', 100)] - The active list item background color.
56+
/// @prop {Map} item-background-selected [color: ('gray', 100)] - The selected list item background color.
4857
/// @prop {Map} header-background [color: ('gray', 50)] - The list header background color.
4958
/// @requires $bootstrap-list
5059
$dark-bootstrap-list: extend(
@@ -78,6 +87,13 @@ $dark-bootstrap-list: extend(
7887
),
7988
),
8089

90+
item-background-selected: (
91+
color: (
92+
'gray',
93+
100,
94+
),
95+
),
96+
8197
header-background: (
8298
color: (
8399
'gray',
@@ -92,18 +108,23 @@ $dark-bootstrap-list: extend(
92108
/// @prop {Map} header-text-color [contrast-color: ('gray', 50, .6)] - The list header text color.
93109
/// @prop {Map} item-background-hover [color: ('primary', 400, .3)] - The list item hover background.
94110
/// @prop {Map} item-background-active [color: ('primary')] - The active list item background color.
111+
/// @prop {Map} item-background-selected [color: ('primary')] - The selected list item background color.
95112
/// @prop {Map} item-text-color [contrast-color: ('gray', 50, .9)] - The list item text color.
96113
/// @prop {Map} item-text-color-hover [contrast-color: ('gray', 50)] - The list item text color.
97114
/// @prop {Map} item-text-color-active [contrast-color: ('gray', 50)] - The active list item text color.
115+
/// @prop {Map} item-text-color-selected [contrast-color: ('gray', 50)] - The selected list item text color.
98116
/// @prop {Map} item-subtitle-color [contrast-color: ('gray', 50, .7)] - The list item subtitle color.
99117
/// @prop {Map} item-subtitle-color-hover [contrast-color: ('gray', 50, .8)] - The list item subtitle hover color.
100118
/// @prop {Map} item-subtitle-color-active [contrast-color: ('gray', 50, .8)] - The list item subtitle active color.
119+
/// @prop {Map} item-subtitle-color-selected [contrast-color: ('gray', 50, .8)] - The list item subtitle selected color.
101120
/// @prop {Map} item-thumbnail-color [contrast-color: ('gray', 50, .6)] - The list item thumbnail color.
102121
/// @prop {Map} item-thumbnail-color-hover [contrast-color: ('gray', 50, .8)] - The list item thumbnail hover color.
103122
/// @prop {Map} item-thumbnail-color-active [contrast-color: ('gray', 50, .8)] - The list item thumbnail active color.
123+
/// @prop {Map} item-thumbnail-color-selected [contrast-color: ('gray', 50, .8)] - The list item thumbnail selected color.
104124
/// @prop {Map} item-action-color [contrast-color: ('gray', 50, .6)] - The list item action color.
105125
/// @prop {Map} item-action-color-hover [contrast-color: ('gray', 50, .8)] - The list item action hover color.
106126
/// @prop {Map} item-action-color-active [contrast-color: ('gray', 50, .8)] - The list item action active color.
127+
/// @prop {Map} item-action-color-selected [contrast-color: ('gray', 50, .8)] - The list item action selected color.
107128
/// @requires $indigo-list
108129
$dark-indigo-list: extend(
109130
$indigo-list,
@@ -130,6 +151,12 @@ $dark-indigo-list: extend(
130151
),
131152
),
132153

154+
item-background-selected: (
155+
color: (
156+
'primary',
157+
),
158+
),
159+
133160
item-text-color: (
134161
contrast-color: (
135162
'gray',
@@ -152,6 +179,13 @@ $dark-indigo-list: extend(
152179
),
153180
),
154181

182+
item-text-color-selected: (
183+
contrast-color: (
184+
'gray',
185+
50,
186+
),
187+
),
188+
155189
item-subtitle-color: (
156190
contrast-color: (
157191
'gray',
@@ -176,6 +210,14 @@ $dark-indigo-list: extend(
176210
),
177211
),
178212

213+
item-subtitle-color-selected: (
214+
contrast-color: (
215+
'gray',
216+
50,
217+
0.8,
218+
),
219+
),
220+
179221
item-thumbnail-color: (
180222
contrast-color: (
181223
'gray',
@@ -200,6 +242,14 @@ $dark-indigo-list: extend(
200242
),
201243
),
202244

245+
item-thumbnail-color-selected: (
246+
contrast-color: (
247+
'gray',
248+
50,
249+
0.8,
250+
),
251+
),
252+
203253
item-action-color: (
204254
contrast-color: (
205255
'gray',
@@ -223,5 +273,13 @@ $dark-indigo-list: extend(
223273
0.8,
224274
),
225275
),
276+
277+
item-action-color-selected: (
278+
contrast-color: (
279+
'gray',
280+
50,
281+
0.8,
282+
),
283+
),
226284
)
227285
);

‎sass/themes/schemas/components/light/_list.scss‎

Lines changed: 101 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -15,23 +15,29 @@
1515
/// @prop {Map} item-background [color: 'surface'] - The list item background color.
1616
/// @prop {Map} item-background-hover [color: ('gray', 200)] - The list item hover background.
1717
/// @prop {Map} item-background-active [color: ('gray', 200)] - The active list item background color.
18+
/// @prop {Map} item-background-selected [color: ('gray', 200)] - The selected list item background color.
1819
/// @prop {Map} item-text-color [color: ('gray', 700)] - The list item text color.
19-
/// @prop {Map} item-text-color-hover [color: ('gray', 700)] - The list item text color.
20+
/// @prop {Map} item-text-color-hover [color: ('gray', 700)] - The list item text color on hover.
2021
/// @prop {Map} item-text-color-active [color: ('gray', 700)] - The active list item text color.
22+
/// @prop {Map} item-text-color-selected [color: ('gray', 700)] - The selected list item text color.
2123
/// @prop {Map} item-title-color [color: ('gray', 900)] - The list item title color.
2224
/// @prop {Map} item-title-color-hover [color: ('gray', 900)] - The list item title hover color.
2325
/// @prop {Map} item-title-color-active [color: ('gray', 900)] - The list item title active color.
26+
/// @prop {Map} item-title-color-selected [color: ('gray', 900)] - The list item title selected color.
2427
/// @prop {Map} item-subtitle-color [color: ('gray', 700)] - The list item subtitle color.
2528
/// @prop {Map} item-subtitle-color-hover [color: ('gray', 700)] - The list item subtitle hover color.
2629
/// @prop {Map} item-subtitle-color-active [color: ('gray', 700)] - The list item subtitle active color.
27-
/// @prop {Color} item-action-color ["'currentColor'"] - The list item action color.
28-
/// @prop {Color} item-action-color-hover ["'currentColor'"] - The list item action hover color.
29-
/// @prop {Color} item-action-color-active ["'currentColor'"] - The list item action active color.
30-
/// @prop {Color} item-thumbnail-color ["'currentColor'"] - The list item thumbnail color.
31-
/// @prop {Color} item-thumbnail-color-hover ["'currentColor'"] - The list item thumbnail hover color.
32-
/// @prop {Color} item-thumbnail-color-active ["'currentColor'"] - The list item thumbnail active color.
33-
/// @prop {List} border-radius [()] - The border radius used for list component.
34-
/// @prop {List} item-border-radius [()] - The border radius used for list item.
30+
/// @prop {Map} item-subtitle-color-selected [color: ('gray', 700)] - The list item subtitle selected color.
31+
/// @prop {String} item-action-color ["'currentColor'"] - The list item action color.
32+
/// @prop {String} item-action-color-hover ["'currentColor'"] - The list item action hover color.
33+
/// @prop {String} item-action-color-active ["'currentColor'"] - The list item action active color.
34+
/// @prop {String} item-action-color-selected ["'currentColor'"] - The list item action selected color.
35+
/// @prop {String} item-thumbnail-color ["'currentColor'"] - The list item thumbnail color.
36+
/// @prop {String} item-thumbnail-color-hover ["'currentColor'"] - The list item thumbnail hover color.
37+
/// @prop {String} item-thumbnail-color-active ["'currentColor'"] - The list item thumbnail active color.
38+
/// @prop {String} item-thumbnail-color-selected ["'currentColor'"] - The list item thumbnail selected color.
39+
/// @prop {Map} border-radius [border-radius: (rem(0), rem(0), rem(24px))] - The border radius used for list component.
40+
/// @prop {Map} item-border-radius [border-radius: (rem(0), rem(0), rem(24px))] - The border radius used for list item.
3541
/// @prop {Color} border-color [transparent] - The list border color.
3642
/// @prop {Number} border-width [0] - The list border width.
3743
/// @prop {Number} default-size [2] - The default size used for the list component.
@@ -69,6 +75,13 @@ $light-list: (
6975
),
7076
),
7177

78+
item-background-selected: (
79+
color: (
80+
'gray',
81+
200,
82+
),
83+
),
84+
7285
item-text-color: (
7386
color: (
7487
'gray',
@@ -90,6 +103,13 @@ $light-list: (
90103
),
91104
),
92105

106+
item-text-color-selected: (
107+
color: (
108+
'gray',
109+
700,
110+
),
111+
),
112+
93113
item-title-color: (
94114
color: (
95115
'gray',
@@ -111,12 +131,21 @@ $light-list: (
111131
),
112132
),
113133

134+
item-title-color-selected: (
135+
color: (
136+
'gray',
137+
900,
138+
),
139+
),
140+
114141
item-action-color: "'currentColor'",
115142

116143
item-action-color-hover: "'currentColor'",
117144

118145
item-action-color-active: "'currentColor'",
119146

147+
item-action-color-selected: "'currentColor'",
148+
120149
item-subtitle-color: (
121150
color: (
122151
'gray',
@@ -138,12 +167,21 @@ $light-list: (
138167
),
139168
),
140169

170+
item-subtitle-color-selected: (
171+
color: (
172+
'gray',
173+
700,
174+
),
175+
),
176+
141177
item-thumbnail-color: "'currentColor'",
142178

143179
item-thumbnail-color-hover: "'currentColor'",
144180

145181
item-thumbnail-color-active: "'currentColor'",
146182

183+
item-thumbnail-color-selected: "'currentColor'",
184+
147185
border-color: transparent,
148186

149187
border-width: 0,
@@ -237,9 +275,10 @@ $fluent-list: extend(
237275
/// @prop {Map} header-background [contrast-color: ('gray', 900)] - The list header background color.
238276
/// @prop {Map} item-background [contrast-color: ('gray', 900)] - The list item background color.
239277
/// @prop {Map} item-text-color [color: ('gray', 900)] - The list item text color.
240-
/// @prop {Map} item-text-color-hover [color: ('gray', 900)] - The list item text color.
278+
/// @prop {Map} item-text-color-hover [color: ('gray', 900)] - The list item text color on hover.
241279
/// @prop {Map} item-text-color-active [color: ('gray', 900)] - The active list item text color.
242-
/// @prop {List} border-radius [(rem(4px), rem(0), rem(24px))] - The border radius used for list component.
280+
/// @prop {Map} item-text-color-selected [color: ('gray', 900)] - The selected list item text color.
281+
/// @prop {Map} border-radius [border-radius: (rem(4px), rem(0), rem(24px))] - The border radius used for list component.
243282
/// @prop {Map} border-color [color: ('gray', 300)] - The list border color.
244283
/// @prop {Number} border-width [rem(1px)] - The list border width.
245284
/// @prop {Map} typography [
@@ -295,6 +334,13 @@ $bootstrap-list: extend(
295334
),
296335
),
297336

337+
item-text-color-selected: (
338+
color: (
339+
'gray',
340+
900,
341+
),
342+
),
343+
298344
border-radius: (
299345
border-radius: (
300346
rem(4px),
@@ -327,19 +373,24 @@ $bootstrap-list: extend(
327373
/// @prop {Map} header-text-color [color: ('gray', 600)] - The list header text color.
328374
/// @prop {Color} item-background [transparent] - The list item background color.
329375
/// @prop {Map} item-background-hover [color: ('primary', 300, .3)] - The list item hover background.
330-
/// @prop {Map} item-background-active [ color: ('primary', 300, .3)] - The active list item background color.
376+
/// @prop {Map} item-background-active [color: ('primary', 300, .3)] - The active list item background color.
377+
/// @prop {Map} item-background-selected [color: ('primary', 300, .3)] - The selected list item background color.
331378
/// @prop {Map} item-text-color [color: ('gray', 800)] - The list item text color.
332-
/// @prop {Map} item-text-color-hover [color: ('gray', 900)] - The list item text color.
333-
/// @prop {Map} item-text-color-active [color: ('gray', 800)] - The active list item text color.
379+
/// @prop {Map} item-text-color-hover [color: ('gray', 900)] - The list item text color on hover.
380+
/// @prop {Map} item-text-color-active [color: ('gray', 900)] - The active list item text color.
381+
/// @prop {Map} item-text-color-selected [color: ('gray', 900)] - The selected list item text color.
334382
/// @prop {Map} item-subtitle-color [color: ('gray', 600)] - The list item subtitle color.
335383
/// @prop {Map} item-subtitle-color-hover [color: ('gray', 700)] - The list item subtitle hover color.
336384
/// @prop {Map} item-subtitle-color-active [color: ('gray', 700)] - The list item subtitle active color.
385+
/// @prop {Map} item-subtitle-color-selected [color: ('gray', 700)] - The list item subtitle selected color.
337386
/// @prop {Map} item-action-color [color: ('gray', 600)] - The list item action color.
338387
/// @prop {Map} item-action-color-hover [color: ('gray', 700)] - The list item action hover color.
339388
/// @prop {Map} item-action-color-active [color: ('gray', 700)] - The list item action active color.
389+
/// @prop {Map} item-action-color-selected [color: ('gray', 700)] - The list item action selected color.
340390
/// @prop {Map} item-thumbnail-color [color: ('gray', 600)] - The list item thumbnail color.
341391
/// @prop {Map} item-thumbnail-color-hover [color: ('gray', 700)] - The list item thumbnail hover color.
342392
/// @prop {Map} item-thumbnail-color-active [color: ('gray', 700)] - The list item thumbnail active color.
393+
/// @prop {Map} item-thumbnail-color-selected [color: ('gray', 700)] - The list item thumbnail selected color.
343394
/// @prop {Number} item-border-radius [rem(4px)] - The border radius used for list item.
344395
/// @prop {Map} typography [
345396
/// header: (value: 'overline'),
@@ -380,6 +431,14 @@ $indigo-list: extend(
380431
),
381432
),
382433

434+
item-background-selected: (
435+
color: (
436+
'primary',
437+
300,
438+
0.3,
439+
),
440+
),
441+
383442
item-text-color: (
384443
color: (
385444
'gray',
@@ -401,6 +460,13 @@ $indigo-list: extend(
401460
),
402461
),
403462

463+
item-text-color-selected: (
464+
color: (
465+
'gray',
466+
900,
467+
),
468+
),
469+
404470
item-action-color: (
405471
color: (
406472
'gray',
@@ -422,6 +488,13 @@ $indigo-list: extend(
422488
),
423489
),
424490

491+
item-action-color-selected: (
492+
color: (
493+
'gray',
494+
700,
495+
),
496+
),
497+
425498
item-subtitle-color: (
426499
color: (
427500
'gray',
@@ -443,6 +516,13 @@ $indigo-list: extend(
443516
),
444517
),
445518

519+
item-subtitle-color-selected: (
520+
color: (
521+
'gray',
522+
700,
523+
),
524+
),
525+
446526
item-thumbnail-color: (
447527
color: (
448528
'gray',
@@ -464,6 +544,13 @@ $indigo-list: extend(
464544
),
465545
),
466546

547+
item-thumbnail-color-selected: (
548+
color: (
549+
'gray',
550+
700,
551+
),
552+
),
553+
467554
item-border-radius: rem(4px),
468555
typography: (
469556
header: (

0 commit comments

Comments
 (0)