Skip to content

Commit ac48c75

Browse files
QuentinGabQuentinGab
committed
support color with classes
1 parent 9755b29 commit ac48c75

File tree

2 files changed

+153
-77
lines changed

2 files changed

+153
-77
lines changed

‎resources/css/components/shared.css‎

Lines changed: 139 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@
2929

3030
.el-text {
3131
&[data-size="2xs"],
32-
&[data-size="xs"],
3332
&.el-size-2xs,
33+
&[data-size="xs"],
3434
&.el-size-xs {
3535
@apply text-xs;
3636
}
@@ -69,236 +69,305 @@
6969
}
7070

7171
.el-bg {
72-
&[data-color="white"] {
72+
&[data-color="white"],
73+
&.el-color-white {
7374
@apply bg-white text-black ring-gray-200 dark:bg-zinc-800 dark:text-white dark:ring-zinc-700;
7475
}
7576

76-
&[data-color="black"] {
77+
&[data-color="black"],
78+
&.el-color-black {
7779
@apply bg-black text-white ring-black dark:bg-white dark:text-black placeholder:text-white/60;
7880
}
7981

80-
&[data-color="gray"] {
82+
&[data-color="gray"],
83+
&.el-color-gray {
8184
@apply bg-gray-100 text-gray-600 ring-gray-100;
8285
}
8386

84-
&[data-color="gray-light"] {
87+
&[data-color="gray-light"],
88+
&.el-color-gray-light {
8589
@apply bg-gray-400/20 text-gray-800 ring-gray-400/20;
8690
}
8791

88-
&[data-color="sky"] {
92+
&[data-color="sky"],
93+
&.el-color-sky {
8994
@apply bg-sky-500 text-white ring-sky-500 placeholder:text-white/60;
9095
}
9196

92-
&[data-color="sky-light"] {
97+
&[data-color="sky-light"],
98+
&.el-color-sky-light {
9399
@apply bg-sky-400/20 text-sky-800 ring-sky-400/20 placeholder:text-sky-800/40;
94100
}
95101

96-
&[data-color="emerald"] {
102+
&[data-color="emerald"],
103+
&.el-color-emerald {
97104
@apply bg-emerald-500 text-white ring-emerald-500 placeholder:text-white/60;
98105
}
99106

100-
&[data-color="emerald-light"] {
107+
&[data-color="emerald-light"],
108+
&.el-color-emerald-light {
101109
@apply bg-emerald-400/20 text-emerald-800 ring-emerald-400/20 placeholder:text-emerald-800/40;
102110
}
103111

104-
&[data-color="rose"] {
112+
&[data-color="rose"],
113+
&.el-color-rose {
105114
@apply bg-rose-500 text-white ring-rose-500 placeholder:text-white/60;
106115
}
107116

108-
&[data-color="rose-light"] {
117+
&[data-color="rose-light"],
118+
&.el-color-rose-light {
109119
@apply bg-rose-400/20 text-rose-800 ring-rose-400/20 placeholder:text-rose-800/40;
110120
}
111121

112-
&[data-color="purple"] {
122+
&[data-color="purple"],
123+
&.el-color-purple {
113124
@apply bg-purple-500 text-white ring-purple-500 placeholder:text-white/60;
114125
}
115126

116-
&[data-color="purple-light"] {
127+
&[data-color="purple-light"],
128+
&.el-color-purple-light {
117129
@apply bg-purple-400/20 text-purple-800 ring-purple-400/20 placeholder:text-purple-800/40;
118130
}
119131

120-
&[data-color="yellow"] {
132+
&[data-color="yellow"],
133+
&.el-color-yellow {
121134
@apply bg-yellow-500 text-white ring-yellow-400/20 placeholder:text-white/60;
122135
}
123136

124-
&[data-color="yellow-light"] {
137+
&[data-color="yellow-light"],
138+
&.el-color-yellow-light {
125139
@apply bg-yellow-400/20 text-yellow-800 ring-yellow-400/20 placeholder:text-yellow-800/40;
126140
}
127141

128-
&[data-color="amber"] {
142+
&[data-color="amber"],
143+
&.el-color-amber {
129144
@apply bg-amber-500 text-white ring-amber-400/20 placeholder:text-white/60;
130145
}
131146

132-
&[data-color="amber-light"] {
147+
&[data-color="amber-light"],
148+
&.el-color-amber-light {
133149
@apply bg-amber-400/20 text-amber-800 ring-amber-400/20 placeholder:text-amber-800/40;
134150
}
135151

136-
&[data-color="transparent"] {
152+
&[data-color="transparent"],
153+
&.el-color-transparent {
137154
@apply bg-transparent text-inherit border-transparent;
138155
}
139156
}
140157

141158
.el-ring {
142-
&[data-color="black"] {
159+
&[data-color="black"],
160+
&.el-color-black {
143161
@apply ring-black;
144162
}
145-
&[data-color="gray"] {
163+
&[data-color="gray"],
164+
&.el-color-gray {
146165
@apply ring-gray-200;
147166
}
148-
&[data-color="gray-light"] {
167+
&[data-color="gray-light"],
168+
&.el-color-gray-light {
149169
@apply ring-gray-100;
150170
}
151-
&[data-color="sky"] {
171+
&[data-color="sky"],
172+
&.el-color-sky {
152173
@apply ring-sky-600;
153174
}
154-
&[data-color="sky-light"] {
175+
&[data-color="sky-light"],
176+
&.el-color-sky-light {
155177
@apply ring-sky-500;
156178
}
157-
&[data-color="emerald"] {
179+
&[data-color="emerald"],
180+
&.el-color-emerald {
158181
@apply ring-emerald-600;
159182
}
160-
&[data-color="emerald-light"] {
183+
&[data-color="emerald-light"],
184+
&.el-color-emerald-light {
161185
@apply ring-emerald-500;
162186
}
163-
&[data-color="rose"] {
187+
&[data-color="rose"],
188+
&.el-color-rose {
164189
@apply ring-rose-600;
165190
}
166-
&[data-color="rose-light"] {
191+
&[data-color="rose-light"],
192+
&.el-color-rose-light {
167193
@apply ring-rose-500;
168194
}
169-
&[data-color="purple"] {
195+
&[data-color="purple"],
196+
&.el-color-purple {
170197
@apply ring-purple-600;
171198
}
172-
&[data-color="purple-light"] {
199+
&[data-color="purple-light"],
200+
&.el-color-purple-light {
173201
@apply ring-purple-500;
174202
}
175-
&[data-color="yellow"] {
203+
&[data-color="yellow"],
204+
&.el-color-yellow {
176205
@apply ring-yellow-600;
177206
}
178-
&[data-color="yellow-light"] {
207+
&[data-color="yellow-light"],
208+
&.el-color-yellow-light {
179209
@apply ring-yellow-500;
180210
}
181-
&[data-color="amber"] {
211+
&[data-color="amber"],
212+
&.el-color-amber {
182213
@apply ring-amber-600;
183214
}
184-
&[data-color="amber-light"] {
215+
&[data-color="amber-light"],
216+
&.el-color-amber-light {
185217
@apply ring-amber-500;
186218
}
187-
&[data-color="glass"] {
219+
&[data-color="glass"],
220+
&.el-color-glass {
188221
@apply ring-white;
189222
}
190-
&[data-color="transparent"] {
223+
&[data-color="transparent"],
224+
&.el-color-transparent {
191225
@apply ring-transparent;
192226
}
193227
}
194228

195229
.el-outline {
196-
&[data-color="white"] {
230+
&[data-color="white"],
231+
&.el-color-white {
197232
@apply outline-black;
198233
}
199-
&[data-color="black"] {
234+
&[data-color="black"],
235+
&.el-color-black {
200236
@apply outline-black;
201237
}
202-
&[data-color="gray"] {
238+
&[data-color="gray"],
239+
&.el-color-gray {
203240
@apply outline-gray-200;
204241
}
205-
&[data-color="gray-light"] {
242+
&[data-color="gray-light"],
243+
&.el-color-gray-light {
206244
@apply outline-gray-100;
207245
}
208-
&[data-color="sky"] {
246+
&[data-color="sky"],
247+
&.el-color-sky {
209248
@apply outline-sky-500;
210249
}
211-
&[data-color="sky-light"] {
250+
&[data-color="sky-light"],
251+
&.el-color-sky-light {
212252
@apply outline-sky-500;
213253
}
214-
&[data-color="emerald"] {
254+
&[data-color="emerald"],
255+
&.el-color-emerald {
215256
@apply outline-emerald-500;
216257
}
217-
&[data-color="emerald-light"] {
258+
&[data-color="emerald-light"],
259+
&.el-color-emerald-light {
218260
@apply outline-emerald-500;
219261
}
220-
&[data-color="rose"] {
262+
&[data-color="rose"],
263+
&.el-color-rose {
221264
@apply outline-rose-500;
222265
}
223-
&[data-color="rose-light"] {
266+
&[data-color="rose-light"],
267+
&.el-color-rose-light {
224268
@apply outline-rose-500;
225269
}
226-
&[data-color="purple"] {
270+
&[data-color="purple"],
271+
&.el-color-purple {
227272
@apply outline-purple-500;
228273
}
229-
&[data-color="purple-light"] {
274+
&[data-color="purple-light"],
275+
&.el-color-purple-light {
230276
@apply outline-purple-500;
231277
}
232-
&[data-color="yellow"] {
278+
&[data-color="yellow"],
279+
&.el-color-yellow {
233280
@apply outline-yellow-500;
234281
}
235-
&[data-color="yellow-light"] {
282+
&[data-color="yellow-light"],
283+
&.el-color-yellow-light {
236284
@apply outline-yellow-500;
237285
}
238-
&[data-color="amber"] {
286+
&[data-color="amber"],
287+
&.el-color-amber {
239288
@apply outline-amber-500;
240289
}
241-
&[data-color="amber-light"] {
290+
&[data-color="amber-light"],
291+
&.el-color-amber-light {
242292
@apply outline-amber-500;
243293
}
244-
&[data-color="glass"] {
294+
&[data-color="glass"],
295+
&.el-color-glass {
245296
@apply outline-black;
246297
}
247-
&[data-color="transparent"] {
298+
&[data-color="transparent"],
299+
&.el-color-transparent {
248300
@apply outline-transparent;
249301
}
250302
}
251303

252304
.el-border {
253-
&[data-color="black"] {
305+
&[data-color="black"],
306+
&.el-color-black {
254307
@apply border-black;
255308
}
256-
&[data-color="gray"] {
309+
&[data-color="gray"],
310+
&.el-color-gray {
257311
@apply border-gray-200;
258312
}
259-
&[data-color="gray-light"] {
313+
&[data-color="gray-light"],
314+
&.el-color-gray-light {
260315
@apply border-gray-100;
261316
}
262-
&[data-color="sky"] {
317+
&[data-color="sky"],
318+
&.el-color-sky {
263319
@apply border-sky-600;
264320
}
265-
&[data-color="sky-light"] {
321+
&[data-color="sky-light"],
322+
&.el-color-sky-light {
266323
@apply border-sky-500;
267324
}
268-
&[data-color="emerald"] {
325+
&[data-color="emerald"],
326+
&.el-color-emerald {
269327
@apply border-emerald-600;
270328
}
271-
&[data-color="emerald-light"] {
329+
&[data-color="emerald-light"],
330+
&.el-color-emerald-light {
272331
@apply border-emerald-500;
273332
}
274-
&[data-color="rose"] {
333+
&[data-color="rose"],
334+
&.el-color-rose {
275335
@apply border-rose-600;
276336
}
277-
&[data-color="rose-light"] {
337+
&[data-color="rose-light"],
338+
&.el-color-rose-light {
278339
@apply border-rose-500;
279340
}
280-
&[data-color="purple"] {
341+
&[data-color="purple"],
342+
&.el-color-purple {
281343
@apply border-purple-600;
282344
}
283-
&[data-color="purple-light"] {
345+
&[data-color="purple-light"],
346+
&.el-color-purple-light {
284347
@apply border-purple-500;
285348
}
286-
&[data-color="yellow"] {
349+
&[data-color="yellow"],
350+
&.el-color-yellow {
287351
@apply border-yellow-600;
288352
}
289-
&[data-color="yellow-light"] {
353+
&[data-color="yellow-light"],
354+
&.el-color-yellow-light {
290355
@apply border-yellow-500;
291356
}
292-
&[data-color="amber"] {
357+
&[data-color="amber"],
358+
&.el-color-amber {
293359
@apply border-amber-600;
294360
}
295-
&[data-color="amber-light"] {
361+
&[data-color="amber-light"],
362+
&.el-color-amber-light {
296363
@apply border-amber-500;
297364
}
298-
&[data-color="glass"] {
365+
&[data-color="glass"],
366+
&.el-color-glass {
299367
@apply border-white;
300368
}
301-
&[data-color="transparent"] {
369+
&[data-color="transparent"],
370+
&.el-color-transparent {
302371
@apply border-transparent;
303372
}
304373
}

0 commit comments

Comments
 (0)