@cfasim-ui/theme 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/theme.css +11 -0
  3. package/src/utilities.css +160 -160
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cfasim-ui/theme",
3
- "version": "0.1.0",
3
+ "version": "0.1.2",
4
4
  "type": "module",
5
5
  "description": "CSS theming system for cfasim-ui",
6
6
  "license": "Apache-2.0",
package/src/theme.css CHANGED
@@ -1,5 +1,16 @@
1
1
  :root {
2
2
  color-scheme: light dark;
3
+ }
4
+
5
+ :root.light {
6
+ color-scheme: light;
7
+ }
8
+
9
+ :root.dark {
10
+ color-scheme: dark;
11
+ }
12
+
13
+ :root {
3
14
  /* Primary */
4
15
  --color-primary: light-dark(#0066ff, #4d94ff);
5
16
  --color-primary-hover: light-dark(#0052cc, #66a3ff);
package/src/utilities.css CHANGED
@@ -1,503 +1,503 @@
1
1
  @layer utilities {
2
2
  /* Margin */
3
3
  .m-0 {
4
- margin: 0;
4
+ margin: 0 !important;
5
5
  }
6
6
  .m-1 {
7
- margin: var(--space-1);
7
+ margin: var(--space-1) !important;
8
8
  }
9
9
  .m-2 {
10
- margin: var(--space-2);
10
+ margin: var(--space-2) !important;
11
11
  }
12
12
  .m-3 {
13
- margin: var(--space-3);
13
+ margin: var(--space-3) !important;
14
14
  }
15
15
  .m-4 {
16
- margin: var(--space-4);
16
+ margin: var(--space-4) !important;
17
17
  }
18
18
  .m-6 {
19
- margin: var(--space-6);
19
+ margin: var(--space-6) !important;
20
20
  }
21
21
  .m-8 {
22
- margin: var(--space-8);
22
+ margin: var(--space-8) !important;
23
23
  }
24
24
  .m-12 {
25
- margin: var(--space-12);
25
+ margin: var(--space-12) !important;
26
26
  }
27
27
  .m-20 {
28
- margin: var(--space-20);
28
+ margin: var(--space-20) !important;
29
29
  }
30
30
  .m-auto {
31
- margin: auto;
31
+ margin: auto !important;
32
32
  }
33
33
 
34
34
  .mx-0 {
35
- margin-inline: 0;
35
+ margin-inline: 0 !important;
36
36
  }
37
37
  .mx-1 {
38
- margin-inline: var(--space-1);
38
+ margin-inline: var(--space-1) !important;
39
39
  }
40
40
  .mx-2 {
41
- margin-inline: var(--space-2);
41
+ margin-inline: var(--space-2) !important;
42
42
  }
43
43
  .mx-3 {
44
- margin-inline: var(--space-3);
44
+ margin-inline: var(--space-3) !important;
45
45
  }
46
46
  .mx-4 {
47
- margin-inline: var(--space-4);
47
+ margin-inline: var(--space-4) !important;
48
48
  }
49
49
  .mx-6 {
50
- margin-inline: var(--space-6);
50
+ margin-inline: var(--space-6) !important;
51
51
  }
52
52
  .mx-8 {
53
- margin-inline: var(--space-8);
53
+ margin-inline: var(--space-8) !important;
54
54
  }
55
55
  .mx-12 {
56
- margin-inline: var(--space-12);
56
+ margin-inline: var(--space-12) !important;
57
57
  }
58
58
  .mx-20 {
59
- margin-inline: var(--space-20);
59
+ margin-inline: var(--space-20) !important;
60
60
  }
61
61
  .mx-auto {
62
- margin-inline: auto;
62
+ margin-inline: auto !important;
63
63
  }
64
64
 
65
65
  .my-0 {
66
- margin-block: 0;
66
+ margin-block: 0 !important;
67
67
  }
68
68
  .my-1 {
69
- margin-block: var(--space-1);
69
+ margin-block: var(--space-1) !important;
70
70
  }
71
71
  .my-2 {
72
- margin-block: var(--space-2);
72
+ margin-block: var(--space-2) !important;
73
73
  }
74
74
  .my-3 {
75
- margin-block: var(--space-3);
75
+ margin-block: var(--space-3) !important;
76
76
  }
77
77
  .my-4 {
78
- margin-block: var(--space-4);
78
+ margin-block: var(--space-4) !important;
79
79
  }
80
80
  .my-6 {
81
- margin-block: var(--space-6);
81
+ margin-block: var(--space-6) !important;
82
82
  }
83
83
  .my-8 {
84
- margin-block: var(--space-8);
84
+ margin-block: var(--space-8) !important;
85
85
  }
86
86
  .my-12 {
87
- margin-block: var(--space-12);
87
+ margin-block: var(--space-12) !important;
88
88
  }
89
89
  .my-20 {
90
- margin-block: var(--space-20);
90
+ margin-block: var(--space-20) !important;
91
91
  }
92
92
  .my-auto {
93
- margin-block: auto;
93
+ margin-block: auto !important;
94
94
  }
95
95
 
96
96
  .mt-0 {
97
- margin-block-start: 0;
97
+ margin-block-start: 0 !important;
98
98
  }
99
99
  .mt-1 {
100
- margin-block-start: var(--space-1);
100
+ margin-block-start: var(--space-1) !important;
101
101
  }
102
102
  .mt-2 {
103
- margin-block-start: var(--space-2);
103
+ margin-block-start: var(--space-2) !important;
104
104
  }
105
105
  .mt-3 {
106
- margin-block-start: var(--space-3);
106
+ margin-block-start: var(--space-3) !important;
107
107
  }
108
108
  .mt-4 {
109
- margin-block-start: var(--space-4);
109
+ margin-block-start: var(--space-4) !important;
110
110
  }
111
111
  .mt-6 {
112
- margin-block-start: var(--space-6);
112
+ margin-block-start: var(--space-6) !important;
113
113
  }
114
114
  .mt-8 {
115
- margin-block-start: var(--space-8);
115
+ margin-block-start: var(--space-8) !important;
116
116
  }
117
117
  .mt-12 {
118
- margin-block-start: var(--space-12);
118
+ margin-block-start: var(--space-12) !important;
119
119
  }
120
120
  .mt-20 {
121
- margin-block-start: var(--space-20);
121
+ margin-block-start: var(--space-20) !important;
122
122
  }
123
123
 
124
124
  .mb-0 {
125
- margin-block-end: 0;
125
+ margin-block-end: 0 !important;
126
126
  }
127
127
  .mb-1 {
128
- margin-block-end: var(--space-1);
128
+ margin-block-end: var(--space-1) !important;
129
129
  }
130
130
  .mb-2 {
131
- margin-block-end: var(--space-2);
131
+ margin-block-end: var(--space-2) !important;
132
132
  }
133
133
  .mb-3 {
134
- margin-block-end: var(--space-3);
134
+ margin-block-end: var(--space-3) !important;
135
135
  }
136
136
  .mb-4 {
137
- margin-block-end: var(--space-4);
137
+ margin-block-end: var(--space-4) !important;
138
138
  }
139
139
  .mb-6 {
140
- margin-block-end: var(--space-6);
140
+ margin-block-end: var(--space-6) !important;
141
141
  }
142
142
  .mb-8 {
143
- margin-block-end: var(--space-8);
143
+ margin-block-end: var(--space-8) !important;
144
144
  }
145
145
  .mb-12 {
146
- margin-block-end: var(--space-12);
146
+ margin-block-end: var(--space-12) !important;
147
147
  }
148
148
  .mb-20 {
149
- margin-block-end: var(--space-20);
149
+ margin-block-end: var(--space-20) !important;
150
150
  }
151
151
 
152
152
  .ml-0 {
153
- margin-inline-start: 0;
153
+ margin-inline-start: 0 !important;
154
154
  }
155
155
  .ml-1 {
156
- margin-inline-start: var(--space-1);
156
+ margin-inline-start: var(--space-1) !important;
157
157
  }
158
158
  .ml-2 {
159
- margin-inline-start: var(--space-2);
159
+ margin-inline-start: var(--space-2) !important;
160
160
  }
161
161
  .ml-3 {
162
- margin-inline-start: var(--space-3);
162
+ margin-inline-start: var(--space-3) !important;
163
163
  }
164
164
  .ml-4 {
165
- margin-inline-start: var(--space-4);
165
+ margin-inline-start: var(--space-4) !important;
166
166
  }
167
167
  .ml-6 {
168
- margin-inline-start: var(--space-6);
168
+ margin-inline-start: var(--space-6) !important;
169
169
  }
170
170
  .ml-8 {
171
- margin-inline-start: var(--space-8);
171
+ margin-inline-start: var(--space-8) !important;
172
172
  }
173
173
  .ml-12 {
174
- margin-inline-start: var(--space-12);
174
+ margin-inline-start: var(--space-12) !important;
175
175
  }
176
176
  .ml-20 {
177
- margin-inline-start: var(--space-20);
177
+ margin-inline-start: var(--space-20) !important;
178
178
  }
179
179
  .ml-auto {
180
- margin-inline-start: auto;
180
+ margin-inline-start: auto !important;
181
181
  }
182
182
 
183
183
  .mr-0 {
184
- margin-inline-end: 0;
184
+ margin-inline-end: 0 !important;
185
185
  }
186
186
  .mr-1 {
187
- margin-inline-end: var(--space-1);
187
+ margin-inline-end: var(--space-1) !important;
188
188
  }
189
189
  .mr-2 {
190
- margin-inline-end: var(--space-2);
190
+ margin-inline-end: var(--space-2) !important;
191
191
  }
192
192
  .mr-3 {
193
- margin-inline-end: var(--space-3);
193
+ margin-inline-end: var(--space-3) !important;
194
194
  }
195
195
  .mr-4 {
196
- margin-inline-end: var(--space-4);
196
+ margin-inline-end: var(--space-4) !important;
197
197
  }
198
198
  .mr-6 {
199
- margin-inline-end: var(--space-6);
199
+ margin-inline-end: var(--space-6) !important;
200
200
  }
201
201
  .mr-8 {
202
- margin-inline-end: var(--space-8);
202
+ margin-inline-end: var(--space-8) !important;
203
203
  }
204
204
  .mr-12 {
205
- margin-inline-end: var(--space-12);
205
+ margin-inline-end: var(--space-12) !important;
206
206
  }
207
207
  .mr-20 {
208
- margin-inline-end: var(--space-20);
208
+ margin-inline-end: var(--space-20) !important;
209
209
  }
210
210
  .mr-auto {
211
- margin-inline-end: auto;
211
+ margin-inline-end: auto !important;
212
212
  }
213
213
 
214
214
  /* Padding */
215
215
  .p-0 {
216
- padding: 0;
216
+ padding: 0 !important;
217
217
  }
218
218
  .p-1 {
219
- padding: var(--space-1);
219
+ padding: var(--space-1) !important;
220
220
  }
221
221
  .p-2 {
222
- padding: var(--space-2);
222
+ padding: var(--space-2) !important;
223
223
  }
224
224
  .p-3 {
225
- padding: var(--space-3);
225
+ padding: var(--space-3) !important;
226
226
  }
227
227
  .p-4 {
228
- padding: var(--space-4);
228
+ padding: var(--space-4) !important;
229
229
  }
230
230
  .p-6 {
231
- padding: var(--space-6);
231
+ padding: var(--space-6) !important;
232
232
  }
233
233
  .p-8 {
234
- padding: var(--space-8);
234
+ padding: var(--space-8) !important;
235
235
  }
236
236
  .p-12 {
237
- padding: var(--space-12);
237
+ padding: var(--space-12) !important;
238
238
  }
239
239
  .p-20 {
240
- padding: var(--space-20);
240
+ padding: var(--space-20) !important;
241
241
  }
242
242
 
243
243
  .px-0 {
244
- padding-inline: 0;
244
+ padding-inline: 0 !important;
245
245
  }
246
246
  .px-1 {
247
- padding-inline: var(--space-1);
247
+ padding-inline: var(--space-1) !important;
248
248
  }
249
249
  .px-2 {
250
- padding-inline: var(--space-2);
250
+ padding-inline: var(--space-2) !important;
251
251
  }
252
252
  .px-3 {
253
- padding-inline: var(--space-3);
253
+ padding-inline: var(--space-3) !important;
254
254
  }
255
255
  .px-4 {
256
- padding-inline: var(--space-4);
256
+ padding-inline: var(--space-4) !important;
257
257
  }
258
258
  .px-6 {
259
- padding-inline: var(--space-6);
259
+ padding-inline: var(--space-6) !important;
260
260
  }
261
261
  .px-8 {
262
- padding-inline: var(--space-8);
262
+ padding-inline: var(--space-8) !important;
263
263
  }
264
264
  .px-12 {
265
- padding-inline: var(--space-12);
265
+ padding-inline: var(--space-12) !important;
266
266
  }
267
267
  .px-20 {
268
- padding-inline: var(--space-20);
268
+ padding-inline: var(--space-20) !important;
269
269
  }
270
270
 
271
271
  .py-0 {
272
- padding-block: 0;
272
+ padding-block: 0 !important;
273
273
  }
274
274
  .py-1 {
275
- padding-block: var(--space-1);
275
+ padding-block: var(--space-1) !important;
276
276
  }
277
277
  .py-2 {
278
- padding-block: var(--space-2);
278
+ padding-block: var(--space-2) !important;
279
279
  }
280
280
  .py-3 {
281
- padding-block: var(--space-3);
281
+ padding-block: var(--space-3) !important;
282
282
  }
283
283
  .py-4 {
284
- padding-block: var(--space-4);
284
+ padding-block: var(--space-4) !important;
285
285
  }
286
286
  .py-6 {
287
- padding-block: var(--space-6);
287
+ padding-block: var(--space-6) !important;
288
288
  }
289
289
  .py-8 {
290
- padding-block: var(--space-8);
290
+ padding-block: var(--space-8) !important;
291
291
  }
292
292
  .py-12 {
293
- padding-block: var(--space-12);
293
+ padding-block: var(--space-12) !important;
294
294
  }
295
295
  .py-20 {
296
- padding-block: var(--space-20);
296
+ padding-block: var(--space-20) !important;
297
297
  }
298
298
 
299
299
  .pt-0 {
300
- padding-block-start: 0;
300
+ padding-block-start: 0 !important;
301
301
  }
302
302
  .pt-1 {
303
- padding-block-start: var(--space-1);
303
+ padding-block-start: var(--space-1) !important;
304
304
  }
305
305
  .pt-2 {
306
- padding-block-start: var(--space-2);
306
+ padding-block-start: var(--space-2) !important;
307
307
  }
308
308
  .pt-3 {
309
- padding-block-start: var(--space-3);
309
+ padding-block-start: var(--space-3) !important;
310
310
  }
311
311
  .pt-4 {
312
- padding-block-start: var(--space-4);
312
+ padding-block-start: var(--space-4) !important;
313
313
  }
314
314
  .pt-6 {
315
- padding-block-start: var(--space-6);
315
+ padding-block-start: var(--space-6) !important;
316
316
  }
317
317
  .pt-8 {
318
- padding-block-start: var(--space-8);
318
+ padding-block-start: var(--space-8) !important;
319
319
  }
320
320
  .pt-12 {
321
- padding-block-start: var(--space-12);
321
+ padding-block-start: var(--space-12) !important;
322
322
  }
323
323
  .pt-20 {
324
- padding-block-start: var(--space-20);
324
+ padding-block-start: var(--space-20) !important;
325
325
  }
326
326
 
327
327
  .pb-0 {
328
- padding-block-end: 0;
328
+ padding-block-end: 0 !important;
329
329
  }
330
330
  .pb-1 {
331
- padding-block-end: var(--space-1);
331
+ padding-block-end: var(--space-1) !important;
332
332
  }
333
333
  .pb-2 {
334
- padding-block-end: var(--space-2);
334
+ padding-block-end: var(--space-2) !important;
335
335
  }
336
336
  .pb-3 {
337
- padding-block-end: var(--space-3);
337
+ padding-block-end: var(--space-3) !important;
338
338
  }
339
339
  .pb-4 {
340
- padding-block-end: var(--space-4);
340
+ padding-block-end: var(--space-4) !important;
341
341
  }
342
342
  .pb-6 {
343
- padding-block-end: var(--space-6);
343
+ padding-block-end: var(--space-6) !important;
344
344
  }
345
345
  .pb-8 {
346
- padding-block-end: var(--space-8);
346
+ padding-block-end: var(--space-8) !important;
347
347
  }
348
348
  .pb-12 {
349
- padding-block-end: var(--space-12);
349
+ padding-block-end: var(--space-12) !important;
350
350
  }
351
351
  .pb-20 {
352
- padding-block-end: var(--space-20);
352
+ padding-block-end: var(--space-20) !important;
353
353
  }
354
354
 
355
355
  .pl-0 {
356
- padding-inline-start: 0;
356
+ padding-inline-start: 0 !important;
357
357
  }
358
358
  .pl-1 {
359
- padding-inline-start: var(--space-1);
359
+ padding-inline-start: var(--space-1) !important;
360
360
  }
361
361
  .pl-2 {
362
- padding-inline-start: var(--space-2);
362
+ padding-inline-start: var(--space-2) !important;
363
363
  }
364
364
  .pl-3 {
365
- padding-inline-start: var(--space-3);
365
+ padding-inline-start: var(--space-3) !important;
366
366
  }
367
367
  .pl-4 {
368
- padding-inline-start: var(--space-4);
368
+ padding-inline-start: var(--space-4) !important;
369
369
  }
370
370
  .pl-6 {
371
- padding-inline-start: var(--space-6);
371
+ padding-inline-start: var(--space-6) !important;
372
372
  }
373
373
  .pl-8 {
374
- padding-inline-start: var(--space-8);
374
+ padding-inline-start: var(--space-8) !important;
375
375
  }
376
376
  .pl-12 {
377
- padding-inline-start: var(--space-12);
377
+ padding-inline-start: var(--space-12) !important;
378
378
  }
379
379
  .pl-20 {
380
- padding-inline-start: var(--space-20);
380
+ padding-inline-start: var(--space-20) !important;
381
381
  }
382
382
 
383
383
  .pr-0 {
384
- padding-inline-end: 0;
384
+ padding-inline-end: 0 !important;
385
385
  }
386
386
  .pr-1 {
387
- padding-inline-end: var(--space-1);
387
+ padding-inline-end: var(--space-1) !important;
388
388
  }
389
389
  .pr-2 {
390
- padding-inline-end: var(--space-2);
390
+ padding-inline-end: var(--space-2) !important;
391
391
  }
392
392
  .pr-3 {
393
- padding-inline-end: var(--space-3);
393
+ padding-inline-end: var(--space-3) !important;
394
394
  }
395
395
  .pr-4 {
396
- padding-inline-end: var(--space-4);
396
+ padding-inline-end: var(--space-4) !important;
397
397
  }
398
398
  .pr-6 {
399
- padding-inline-end: var(--space-6);
399
+ padding-inline-end: var(--space-6) !important;
400
400
  }
401
401
  .pr-8 {
402
- padding-inline-end: var(--space-8);
402
+ padding-inline-end: var(--space-8) !important;
403
403
  }
404
404
  .pr-12 {
405
- padding-inline-end: var(--space-12);
405
+ padding-inline-end: var(--space-12) !important;
406
406
  }
407
407
  .pr-20 {
408
- padding-inline-end: var(--space-20);
408
+ padding-inline-end: var(--space-20) !important;
409
409
  }
410
410
 
411
411
  /* Gap */
412
412
  .gap-0 {
413
- gap: 0;
413
+ gap: 0 !important;
414
414
  }
415
415
  .gap-1 {
416
- gap: var(--space-1);
416
+ gap: var(--space-1) !important;
417
417
  }
418
418
  .gap-2 {
419
- gap: var(--space-2);
419
+ gap: var(--space-2) !important;
420
420
  }
421
421
  .gap-3 {
422
- gap: var(--space-3);
422
+ gap: var(--space-3) !important;
423
423
  }
424
424
  .gap-4 {
425
- gap: var(--space-4);
425
+ gap: var(--space-4) !important;
426
426
  }
427
427
  .gap-6 {
428
- gap: var(--space-6);
428
+ gap: var(--space-6) !important;
429
429
  }
430
430
  .gap-8 {
431
- gap: var(--space-8);
431
+ gap: var(--space-8) !important;
432
432
  }
433
433
  .gap-12 {
434
- gap: var(--space-12);
434
+ gap: var(--space-12) !important;
435
435
  }
436
436
  .gap-20 {
437
- gap: var(--space-20);
437
+ gap: var(--space-20) !important;
438
438
  }
439
439
 
440
440
  .gap-x-0 {
441
- column-gap: 0;
441
+ column-gap: 0 !important;
442
442
  }
443
443
  .gap-x-1 {
444
- column-gap: var(--space-1);
444
+ column-gap: var(--space-1) !important;
445
445
  }
446
446
  .gap-x-2 {
447
- column-gap: var(--space-2);
447
+ column-gap: var(--space-2) !important;
448
448
  }
449
449
  .gap-x-3 {
450
- column-gap: var(--space-3);
450
+ column-gap: var(--space-3) !important;
451
451
  }
452
452
  .gap-x-4 {
453
- column-gap: var(--space-4);
453
+ column-gap: var(--space-4) !important;
454
454
  }
455
455
  .gap-x-6 {
456
- column-gap: var(--space-6);
456
+ column-gap: var(--space-6) !important;
457
457
  }
458
458
  .gap-x-8 {
459
- column-gap: var(--space-8);
459
+ column-gap: var(--space-8) !important;
460
460
  }
461
461
  .gap-x-12 {
462
- column-gap: var(--space-12);
462
+ column-gap: var(--space-12) !important;
463
463
  }
464
464
  .gap-x-20 {
465
- column-gap: var(--space-20);
465
+ column-gap: var(--space-20) !important;
466
466
  }
467
467
 
468
468
  .gap-y-0 {
469
- row-gap: 0;
469
+ row-gap: 0 !important;
470
470
  }
471
471
  .gap-y-1 {
472
- row-gap: var(--space-1);
472
+ row-gap: var(--space-1) !important;
473
473
  }
474
474
  .gap-y-2 {
475
- row-gap: var(--space-2);
475
+ row-gap: var(--space-2) !important;
476
476
  }
477
477
  .gap-y-3 {
478
- row-gap: var(--space-3);
478
+ row-gap: var(--space-3) !important;
479
479
  }
480
480
  .gap-y-4 {
481
- row-gap: var(--space-4);
481
+ row-gap: var(--space-4) !important;
482
482
  }
483
483
  .gap-y-6 {
484
- row-gap: var(--space-6);
484
+ row-gap: var(--space-6) !important;
485
485
  }
486
486
  .gap-y-8 {
487
- row-gap: var(--space-8);
487
+ row-gap: var(--space-8) !important;
488
488
  }
489
489
  .gap-y-12 {
490
- row-gap: var(--space-12);
490
+ row-gap: var(--space-12) !important;
491
491
  }
492
492
  .gap-y-20 {
493
- row-gap: var(--space-20);
493
+ row-gap: var(--space-20) !important;
494
494
  }
495
495
 
496
496
  /* Text color */
497
497
  .text-secondary {
498
- color: var(--color-text-secondary);
498
+ color: var(--color-text-secondary) !important;
499
499
  }
500
500
  .text-tertiary {
501
- color: var(--color-text-tertiary);
501
+ color: var(--color-text-tertiary) !important;
502
502
  }
503
503
  }