Skip to content

Commit 8f6ff49

Browse files
pawelgrimmpawelgrimm
committed
refactor: Rework meta color CSS custom props
1 parent 0b6b6c8 commit 8f6ff49

2 files changed

Lines changed: 123 additions & 183 deletions

File tree

‎src/avatar/avatar.mdx‎

Lines changed: 42 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -85,114 +85,54 @@ component appearance. The values shown below are the default values.
8585
#### Avatar colors
8686

8787
<ColorPalette>
88-
<ColorItem
89-
title="--reactist-avatar-initials-color"
90-
colors={['var(--reactist-actionable-primary-idle-tint)']}
91-
/>
88+
<ColorItem title="--reactist-avatar-initials-color" colors={['#ffffff']} />
9289
<ColorItem title="--reactist-avatar-border-tint" colors={['#0000001a']} />
93-
<ColorItem
94-
title="--reactist-avatar-empty-fill"
95-
colors={['var(--reactist-framework-fill-crest)']}
96-
/>
90+
<ColorItem title="--reactist-avatar-empty-fill" colors={['#e6e6e6']} />
9791
</ColorPalette>
9892

9993
#### Avatar meta colors
10094

10195
<ColorPalette>
102-
<ColorItem title="--reactist-avatar-meta-fill-0" colors={['#b8255f']} />
103-
<ColorItem
104-
title="--reactist-avatar-meta-on-idle-tint-0"
105-
colors={['var(--reactist-avatar-initials-color)']}
106-
/>
107-
<ColorItem title="--reactist-avatar-meta-fill-1" colors={['#dc4c3e']} />
108-
<ColorItem
109-
title="--reactist-avatar-meta-on-idle-tint-1"
110-
colors={['var(--reactist-avatar-initials-color)']}
111-
/>
112-
<ColorItem title="--reactist-avatar-meta-fill-2" colors={['#f48318']} />
113-
<ColorItem
114-
title="--reactist-avatar-meta-on-idle-tint-2"
115-
colors={['var(--reactist-avatar-initials-color)']}
116-
/>
117-
<ColorItem title="--reactist-avatar-meta-fill-3" colors={['#fecf05']} />
118-
<ColorItem title="--reactist-avatar-meta-on-idle-tint-3" colors={['#202020']} />
119-
<ColorItem title="--reactist-avatar-meta-fill-4" colors={['#aeb83a']} />
120-
<ColorItem
121-
title="--reactist-avatar-meta-on-idle-tint-4"
122-
colors={['var(--reactist-avatar-initials-color)']}
123-
/>
124-
<ColorItem title="--reactist-avatar-meta-fill-5" colors={['#7ecc48']} />
125-
<ColorItem
126-
title="--reactist-avatar-meta-on-idle-tint-5"
127-
colors={['var(--reactist-avatar-initials-color)']}
128-
/>
129-
<ColorItem title="--reactist-avatar-meta-fill-6" colors={['#369307']} />
130-
<ColorItem
131-
title="--reactist-avatar-meta-on-idle-tint-6"
132-
colors={['var(--reactist-avatar-initials-color)']}
133-
/>
134-
<ColorItem title="--reactist-avatar-meta-fill-7" colors={['#52ccb8']} />
135-
<ColorItem
136-
title="--reactist-avatar-meta-on-idle-tint-7"
137-
colors={['var(--reactist-avatar-initials-color)']}
138-
/>
139-
<ColorItem title="--reactist-avatar-meta-fill-8" colors={['#148fad']} />
140-
<ColorItem
141-
title="--reactist-avatar-meta-on-idle-tint-8"
142-
colors={['var(--reactist-avatar-initials-color)']}
143-
/>
144-
<ColorItem title="--reactist-avatar-meta-fill-9" colors={['#3ab9e2']} />
145-
<ColorItem title="--reactist-avatar-meta-on-idle-tint-9" colors={['#202020']} />
146-
<ColorItem title="--reactist-avatar-meta-fill-10" colors={['#96c3eb']} />
147-
<ColorItem
148-
title="--reactist-avatar-meta-on-idle-tint-10"
149-
colors={['var(--reactist-avatar-initials-color)']}
150-
/>
151-
<ColorItem title="--reactist-avatar-meta-fill-11" colors={['#2a67e2']} />
152-
<ColorItem
153-
title="--reactist-avatar-meta-on-idle-tint-11"
154-
colors={['var(--reactist-avatar-initials-color)']}
155-
/>
156-
<ColorItem title="--reactist-avatar-meta-fill-12" colors={['#692ec2']} />
157-
<ColorItem
158-
title="--reactist-avatar-meta-on-idle-tint-12"
159-
colors={['var(--reactist-avatar-initials-color)']}
160-
/>
161-
<ColorItem title="--reactist-avatar-meta-fill-13" colors={['#ac30cc']} />
162-
<ColorItem
163-
title="--reactist-avatar-meta-on-idle-tint-13"
164-
colors={['var(--reactist-avatar-initials-color)']}
165-
/>
166-
<ColorItem title="--reactist-avatar-meta-fill-14" colors={['#eb96c8']} />
167-
<ColorItem
168-
title="--reactist-avatar-meta-on-idle-tint-14"
169-
colors={['var(--reactist-avatar-initials-color)']}
170-
/>
171-
<ColorItem title="--reactist-avatar-meta-fill-15" colors={['#e05095']} />
172-
<ColorItem
173-
title="--reactist-avatar-meta-on-idle-tint-15"
174-
colors={['var(--reactist-avatar-initials-color)']}
175-
/>
176-
<ColorItem title="--reactist-avatar-meta-fill-16" colors={['#c9766f']} />
177-
<ColorItem
178-
title="--reactist-avatar-meta-on-idle-tint-16"
179-
colors={['var(--reactist-avatar-initials-color)']}
180-
/>
181-
<ColorItem title="--reactist-avatar-meta-fill-17" colors={['#808080']} />
182-
<ColorItem
183-
title="--reactist-avatar-meta-on-idle-tint-17"
184-
colors={['var(--reactist-avatar-initials-color)']}
185-
/>
186-
<ColorItem title="--reactist-avatar-meta-fill-18" colors={['#999999']} />
187-
<ColorItem
188-
title="--reactist-avatar-meta-on-idle-tint-18"
189-
colors={['var(--reactist-avatar-initials-color)']}
190-
/>
191-
<ColorItem title="--reactist-avatar-meta-fill-19" colors={['#ccae96']} />
192-
<ColorItem
193-
title="--reactist-avatar-meta-on-idle-tint-19"
194-
colors={['var(--reactist-avatar-initials-color)']}
195-
/>
96+
<ColorItem title="--reactist-avatar-meta-0-fill" colors={['#b8255f']} />
97+
<ColorItem title="--reactist-avatar-meta-0-on-idle-tint" colors={['#ffffff']} />
98+
<ColorItem title="--reactist-avatar-meta-1-fill" colors={['#dc4c3e']} />
99+
<ColorItem title="--reactist-avatar-meta-1-on-idle-tint" colors={['#ffffff']} />
100+
<ColorItem title="--reactist-avatar-meta-2-fill" colors={['#f48318']} />
101+
<ColorItem title="--reactist-avatar-meta-2-on-idle-tint" colors={['#ffffff']} />
102+
<ColorItem title="--reactist-avatar-meta-3-fill" colors={['#fecf05']} />
103+
<ColorItem title="--reactist-avatar-meta-3-on-idle-tint" colors={['#202020']} />
104+
<ColorItem title="--reactist-avatar-meta-4-fill" colors={['#aeb83a']} />
105+
<ColorItem title="--reactist-avatar-meta-4-on-idle-tint" colors={['#ffffff']} />
106+
<ColorItem title="--reactist-avatar-meta-5-fill" colors={['#7ecc48']} />
107+
<ColorItem title="--reactist-avatar-meta-5-on-idle-tint" colors={['#ffffff']} />
108+
<ColorItem title="--reactist-avatar-meta-6-fill" colors={['#369307']} />
109+
<ColorItem title="--reactist-avatar-meta-6-on-idle-tint" colors={['#ffffff']} />
110+
<ColorItem title="--reactist-avatar-meta-7-fill" colors={['#52ccb8']} />
111+
<ColorItem title="--reactist-avatar-meta-7-on-idle-tint" colors={['#ffffff']} />
112+
<ColorItem title="--reactist-avatar-meta-8-fill" colors={['#148fad']} />
113+
<ColorItem title="--reactist-avatar-meta-8-on-idle-tint" colors={['#ffffff']} />
114+
<ColorItem title="--reactist-avatar-meta-9-fill" colors={['#3ab9e2']} />
115+
<ColorItem title="--reactist-avatar-meta-9-on-idle-tint" colors={['#202020']} />
116+
<ColorItem title="--reactist-avatar-meta-10-fill" colors={['#96c3eb']} />
117+
<ColorItem title="--reactist-avatar-meta-10-on-idle-tint" colors={['#ffffff']} />
118+
<ColorItem title="--reactist-avatar-meta-11-fill" colors={['#2a67e2']} />
119+
<ColorItem title="--reactist-avatar-meta-11-on-idle-tint" colors={['#ffffff']} />
120+
<ColorItem title="--reactist-avatar-meta-12-fill" colors={['#692ec2']} />
121+
<ColorItem title="--reactist-avatar-meta-12-on-idle-tint" colors={['#ffffff']} />
122+
<ColorItem title="--reactist-avatar-meta-13-fill" colors={['#ac30cc']} />
123+
<ColorItem title="--reactist-avatar-meta-13-on-idle-tint" colors={['#ffffff']} />
124+
<ColorItem title="--reactist-avatar-meta-14-fill" colors={['#eb96c8']} />
125+
<ColorItem title="--reactist-avatar-meta-14-on-idle-tint" colors={['#ffffff']} />
126+
<ColorItem title="--reactist-avatar-meta-15-fill" colors={['#e05095']} />
127+
<ColorItem title="--reactist-avatar-meta-15-on-idle-tint" colors={['#ffffff']} />
128+
<ColorItem title="--reactist-avatar-meta-16-fill" colors={['#c9766f']} />
129+
<ColorItem title="--reactist-avatar-meta-16-on-idle-tint" colors={['#ffffff']} />
130+
<ColorItem title="--reactist-avatar-meta-17-fill" colors={['#808080']} />
131+
<ColorItem title="--reactist-avatar-meta-17-on-idle-tint" colors={['#ffffff']} />
132+
<ColorItem title="--reactist-avatar-meta-18-fill" colors={['#999999']} />
133+
<ColorItem title="--reactist-avatar-meta-18-on-idle-tint" colors={['#ffffff']} />
134+
<ColorItem title="--reactist-avatar-meta-19-fill" colors={['#ccae96']} />
135+
<ColorItem title="--reactist-avatar-meta-19-on-idle-tint" colors={['#ffffff']} />
196136
</ColorPalette>
197137

198138
### Component-owned variables

‎src/avatar/avatar.module.css‎

Lines changed: 81 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -3,52 +3,52 @@
33
--reactist-avatar-border-tint: #0000001a;
44
--reactist-avatar-empty-fill: var(--reactist-framework-fill-crest);
55

6-
--reactist-avatar-meta-fill-0: #b8255f;
7-
--reactist-avatar-meta-on-idle-tint-0: var(--reactist-avatar-initials-color);
8-
--reactist-avatar-meta-fill-1: #dc4c3e;
9-
--reactist-avatar-meta-on-idle-tint-1: var(--reactist-avatar-initials-color);
10-
--reactist-avatar-meta-fill-2: #f48318;
11-
--reactist-avatar-meta-on-idle-tint-2: var(--reactist-avatar-initials-color);
12-
--reactist-avatar-meta-fill-3: #fecf05;
13-
--reactist-avatar-meta-on-idle-tint-3: #202020;
14-
--reactist-avatar-meta-fill-4: #aeb83a;
15-
--reactist-avatar-meta-on-idle-tint-4: var(--reactist-avatar-initials-color);
16-
--reactist-avatar-meta-fill-5: #7ecc48;
17-
--reactist-avatar-meta-on-idle-tint-5: var(--reactist-avatar-initials-color);
18-
--reactist-avatar-meta-fill-6: #369307;
19-
--reactist-avatar-meta-on-idle-tint-6: var(--reactist-avatar-initials-color);
20-
--reactist-avatar-meta-fill-7: #52ccb8;
21-
--reactist-avatar-meta-on-idle-tint-7: var(--reactist-avatar-initials-color);
22-
--reactist-avatar-meta-fill-8: #148fad;
23-
--reactist-avatar-meta-on-idle-tint-8: var(--reactist-avatar-initials-color);
24-
--reactist-avatar-meta-fill-9: #3ab9e2;
25-
--reactist-avatar-meta-on-idle-tint-9: #202020;
26-
--reactist-avatar-meta-fill-10: #96c3eb;
27-
--reactist-avatar-meta-on-idle-tint-10: var(--reactist-avatar-initials-color);
28-
--reactist-avatar-meta-fill-11: #2a67e2;
29-
--reactist-avatar-meta-on-idle-tint-11: var(--reactist-avatar-initials-color);
30-
--reactist-avatar-meta-fill-12: #692ec2;
31-
--reactist-avatar-meta-on-idle-tint-12: var(--reactist-avatar-initials-color);
32-
--reactist-avatar-meta-fill-13: #ac30cc;
33-
--reactist-avatar-meta-on-idle-tint-13: var(--reactist-avatar-initials-color);
34-
--reactist-avatar-meta-fill-14: #eb96c8;
35-
--reactist-avatar-meta-on-idle-tint-14: var(--reactist-avatar-initials-color);
36-
--reactist-avatar-meta-fill-15: #e05095;
37-
--reactist-avatar-meta-on-idle-tint-15: var(--reactist-avatar-initials-color);
38-
--reactist-avatar-meta-fill-16: #c9766f;
39-
--reactist-avatar-meta-on-idle-tint-16: var(--reactist-avatar-initials-color);
40-
--reactist-avatar-meta-fill-17: #808080;
41-
--reactist-avatar-meta-on-idle-tint-17: var(--reactist-avatar-initials-color);
42-
--reactist-avatar-meta-fill-18: #999999;
43-
--reactist-avatar-meta-on-idle-tint-18: var(--reactist-avatar-initials-color);
44-
--reactist-avatar-meta-fill-19: #ccae96;
45-
--reactist-avatar-meta-on-idle-tint-19: var(--reactist-avatar-initials-color);
6+
--reactist-avatar-meta-0-fill: #b8255f;
7+
--reactist-avatar-meta-0-on-idle-tint: var(--reactist-avatar-initials-color);
8+
--reactist-avatar-meta-1-fill: #dc4c3e;
9+
--reactist-avatar-meta-1-on-idle-tint: var(--reactist-avatar-initials-color);
10+
--reactist-avatar-meta-2-fill: #f48318;
11+
--reactist-avatar-meta-2-on-idle-tint: var(--reactist-avatar-initials-color);
12+
--reactist-avatar-meta-3-fill: #fecf05;
13+
--reactist-avatar-meta-3-on-idle-tint: #202020;
14+
--reactist-avatar-meta-4-fill: #aeb83a;
15+
--reactist-avatar-meta-4-on-idle-tint: var(--reactist-avatar-initials-color);
16+
--reactist-avatar-meta-5-fill: #7ecc48;
17+
--reactist-avatar-meta-5-on-idle-tint: var(--reactist-avatar-initials-color);
18+
--reactist-avatar-meta-6-fill: #369307;
19+
--reactist-avatar-meta-6-on-idle-tint: var(--reactist-avatar-initials-color);
20+
--reactist-avatar-meta-7-fill: #52ccb8;
21+
--reactist-avatar-meta-7-on-idle-tint: var(--reactist-avatar-initials-color);
22+
--reactist-avatar-meta-8-fill: #148fad;
23+
--reactist-avatar-meta-8-on-idle-tint: var(--reactist-avatar-initials-color);
24+
--reactist-avatar-meta-9-fill: #3ab9e2;
25+
--reactist-avatar-meta-9-on-idle-tint: #202020;
26+
--reactist-avatar-meta-10-fill: #96c3eb;
27+
--reactist-avatar-meta-10-on-idle-tint: var(--reactist-avatar-initials-color);
28+
--reactist-avatar-meta-11-fill: #2a67e2;
29+
--reactist-avatar-meta-11-on-idle-tint: var(--reactist-avatar-initials-color);
30+
--reactist-avatar-meta-12-fill: #692ec2;
31+
--reactist-avatar-meta-12-on-idle-tint: var(--reactist-avatar-initials-color);
32+
--reactist-avatar-meta-13-fill: #ac30cc;
33+
--reactist-avatar-meta-13-on-idle-tint: var(--reactist-avatar-initials-color);
34+
--reactist-avatar-meta-14-fill: #eb96c8;
35+
--reactist-avatar-meta-14-on-idle-tint: var(--reactist-avatar-initials-color);
36+
--reactist-avatar-meta-15-fill: #e05095;
37+
--reactist-avatar-meta-15-on-idle-tint: var(--reactist-avatar-initials-color);
38+
--reactist-avatar-meta-16-fill: #c9766f;
39+
--reactist-avatar-meta-16-on-idle-tint: var(--reactist-avatar-initials-color);
40+
--reactist-avatar-meta-17-fill: #808080;
41+
--reactist-avatar-meta-17-on-idle-tint: var(--reactist-avatar-initials-color);
42+
--reactist-avatar-meta-18-fill: #999999;
43+
--reactist-avatar-meta-18-on-idle-tint: var(--reactist-avatar-initials-color);
44+
--reactist-avatar-meta-19-fill: #ccae96;
45+
--reactist-avatar-meta-19-on-idle-tint: var(--reactist-avatar-initials-color);
4646
}
4747

4848
.avatar {
4949
--reactist-avatar-size: 36px;
5050
--reactist-avatar-rounded-radius: 5px;
51-
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-fill-0);
51+
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-0-fill);
5252

5353
background-color: var(--reactist-avatar-empty-fill);
5454
width: var(--reactist-avatar-size);
@@ -63,103 +63,103 @@
6363
}
6464

6565
.metaColor-0 {
66-
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-fill-0);
67-
--reactist-avatar-initials-color: var(--reactist-avatar-meta-on-idle-tint-0);
66+
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-0-fill);
67+
--reactist-avatar-initials-color: var(--reactist-avatar-meta-0-on-idle-tint);
6868
}
6969

7070
.metaColor-1 {
71-
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-fill-1);
72-
--reactist-avatar-initials-color: var(--reactist-avatar-meta-on-idle-tint-1);
71+
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-1-fill);
72+
--reactist-avatar-initials-color: var(--reactist-avatar-meta-1-on-idle-tint);
7373
}
7474

7575
.metaColor-2 {
76-
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-fill-2);
77-
--reactist-avatar-initials-color: var(--reactist-avatar-meta-on-idle-tint-2);
76+
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-2-fill);
77+
--reactist-avatar-initials-color: var(--reactist-avatar-meta-2-on-idle-tint);
7878
}
7979

8080
.metaColor-3 {
81-
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-fill-3);
82-
--reactist-avatar-initials-color: var(--reactist-avatar-meta-on-idle-tint-3);
81+
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-3-fill);
82+
--reactist-avatar-initials-color: var(--reactist-avatar-meta-3-on-idle-tint);
8383
}
8484

8585
.metaColor-4 {
86-
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-fill-4);
87-
--reactist-avatar-initials-color: var(--reactist-avatar-meta-on-idle-tint-4);
86+
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-4-fill);
87+
--reactist-avatar-initials-color: var(--reactist-avatar-meta-4-on-idle-tint);
8888
}
8989

9090
.metaColor-5 {
91-
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-fill-5);
92-
--reactist-avatar-initials-color: var(--reactist-avatar-meta-on-idle-tint-5);
91+
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-5-fill);
92+
--reactist-avatar-initials-color: var(--reactist-avatar-meta-5-on-idle-tint);
9393
}
9494

9595
.metaColor-6 {
96-
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-fill-6);
97-
--reactist-avatar-initials-color: var(--reactist-avatar-meta-on-idle-tint-6);
96+
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-6-fill);
97+
--reactist-avatar-initials-color: var(--reactist-avatar-meta-6-on-idle-tint);
9898
}
9999

100100
.metaColor-7 {
101-
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-fill-7);
102-
--reactist-avatar-initials-color: var(--reactist-avatar-meta-on-idle-tint-7);
101+
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-7-fill);
102+
--reactist-avatar-initials-color: var(--reactist-avatar-meta-7-on-idle-tint);
103103
}
104104

105105
.metaColor-8 {
106-
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-fill-8);
107-
--reactist-avatar-initials-color: var(--reactist-avatar-meta-on-idle-tint-8);
106+
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-8-fill);
107+
--reactist-avatar-initials-color: var(--reactist-avatar-meta-8-on-idle-tint);
108108
}
109109

110110
.metaColor-9 {
111-
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-fill-9);
112-
--reactist-avatar-initials-color: var(--reactist-avatar-meta-on-idle-tint-9);
111+
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-9-fill);
112+
--reactist-avatar-initials-color: var(--reactist-avatar-meta-9-on-idle-tint);
113113
}
114114

115115
.metaColor-10 {
116-
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-fill-10);
117-
--reactist-avatar-initials-color: var(--reactist-avatar-meta-on-idle-tint-10);
116+
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-10-fill);
117+
--reactist-avatar-initials-color: var(--reactist-avatar-meta-10-on-idle-tint);
118118
}
119119

120120
.metaColor-11 {
121-
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-fill-11);
122-
--reactist-avatar-initials-color: var(--reactist-avatar-meta-on-idle-tint-11);
121+
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-11-fill);
122+
--reactist-avatar-initials-color: var(--reactist-avatar-meta-11-on-idle-tint);
123123
}
124124

125125
.metaColor-12 {
126-
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-fill-12);
127-
--reactist-avatar-initials-color: var(--reactist-avatar-meta-on-idle-tint-12);
126+
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-12-fill);
127+
--reactist-avatar-initials-color: var(--reactist-avatar-meta-12-on-idle-tint);
128128
}
129129

130130
.metaColor-13 {
131-
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-fill-13);
132-
--reactist-avatar-initials-color: var(--reactist-avatar-meta-on-idle-tint-13);
131+
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-13-fill);
132+
--reactist-avatar-initials-color: var(--reactist-avatar-meta-13-on-idle-tint);
133133
}
134134

135135
.metaColor-14 {
136-
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-fill-14);
137-
--reactist-avatar-initials-color: var(--reactist-avatar-meta-on-idle-tint-14);
136+
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-14-fill);
137+
--reactist-avatar-initials-color: var(--reactist-avatar-meta-14-on-idle-tint);
138138
}
139139

140140
.metaColor-15 {
141-
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-fill-15);
142-
--reactist-avatar-initials-color: var(--reactist-avatar-meta-on-idle-tint-15);
141+
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-15-fill);
142+
--reactist-avatar-initials-color: var(--reactist-avatar-meta-15-on-idle-tint);
143143
}
144144

145145
.metaColor-16 {
146-
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-fill-16);
147-
--reactist-avatar-initials-color: var(--reactist-avatar-meta-on-idle-tint-16);
146+
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-16-fill);
147+
--reactist-avatar-initials-color: var(--reactist-avatar-meta-16-on-idle-tint);
148148
}
149149

150150
.metaColor-17 {
151-
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-fill-17);
152-
--reactist-avatar-initials-color: var(--reactist-avatar-meta-on-idle-tint-17);
151+
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-17-fill);
152+
--reactist-avatar-initials-color: var(--reactist-avatar-meta-17-on-idle-tint);
153153
}
154154

155155
.metaColor-18 {
156-
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-fill-18);
157-
--reactist-avatar-initials-color: var(--reactist-avatar-meta-on-idle-tint-18);
156+
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-18-fill);
157+
--reactist-avatar-initials-color: var(--reactist-avatar-meta-18-on-idle-tint);
158158
}
159159

160160
.metaColor-19 {
161-
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-fill-19);
162-
--reactist-avatar-initials-color: var(--reactist-avatar-meta-on-idle-tint-19);
161+
--reactist-avatar-meta-fill: var(--reactist-avatar-meta-19-fill);
162+
--reactist-avatar-initials-color: var(--reactist-avatar-meta-19-on-idle-tint);
163163
}
164164

165165
.empty {

0 commit comments

Comments
 (0)