doom-design-system 0.1.8 → 0.1.10

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.
@@ -70,930 +70,950 @@ p {
70
70
  }
71
71
 
72
72
  /* Typography Utilities */
73
- .text-xs {
73
+ body .text-xs {
74
74
  font-size: var(--text-xs);
75
75
  }
76
-
77
- .text-sm {
76
+ body .text-sm {
78
77
  font-size: var(--text-sm);
79
78
  }
80
-
81
- .text-base {
79
+ body .text-base {
82
80
  font-size: var(--text-base);
83
81
  }
84
-
85
- .text-lg {
82
+ body .text-lg {
86
83
  font-size: var(--text-lg);
87
84
  }
88
-
89
- .text-xl {
85
+ body .text-xl {
90
86
  font-size: var(--text-xl);
91
87
  }
92
-
93
- .text-2xl {
88
+ body .text-2xl {
94
89
  font-size: var(--text-2xl);
95
90
  }
96
-
97
- .text-3xl {
91
+ body .text-3xl {
98
92
  font-size: var(--text-3xl);
99
93
  }
100
-
101
- .text-4xl {
94
+ body .text-4xl {
102
95
  font-size: var(--text-4xl);
103
96
  }
104
-
105
- .text-5xl {
97
+ body .text-5xl {
106
98
  font-size: var(--text-5xl);
107
99
  }
108
-
109
- .text-6xl {
100
+ body .text-6xl {
110
101
  font-size: var(--text-6xl);
111
102
  }
112
-
113
- .font-thin {
103
+ body .font-thin {
114
104
  font-weight: var(--font-thin);
115
105
  }
116
-
117
- .font-extralight {
106
+ body .font-extralight {
118
107
  font-weight: var(--font-extralight);
119
108
  }
120
-
121
- .font-light {
109
+ body .font-light {
122
110
  font-weight: var(--font-light);
123
111
  }
124
-
125
- .font-regular {
112
+ body .font-regular {
126
113
  font-weight: var(--font-regular);
127
114
  }
128
-
129
- .font-medium {
115
+ body .font-medium {
130
116
  font-weight: var(--font-medium);
131
117
  }
132
-
133
- .font-semibold {
118
+ body .font-semibold {
134
119
  font-weight: var(--font-semibold);
135
120
  }
136
-
137
- .font-bold {
121
+ body .font-bold {
138
122
  font-weight: var(--font-bold);
139
123
  }
140
-
141
- .font-extrabold {
124
+ body .font-extrabold {
142
125
  font-weight: var(--font-extrabold);
143
126
  }
144
-
145
- .font-black {
127
+ body .font-black {
146
128
  font-weight: var(--font-black);
147
129
  }
148
-
149
- .text-primary {
130
+ body .text-primary {
150
131
  color: var(--primary);
151
132
  }
152
-
153
- .bg-primary {
133
+ body .bg-primary {
154
134
  background-color: var(--primary);
155
135
  }
156
-
157
- .text-secondary {
136
+ body .text-secondary {
158
137
  color: var(--secondary);
159
138
  }
160
-
161
- .bg-secondary {
139
+ body .bg-secondary {
162
140
  background-color: var(--secondary);
163
141
  }
164
-
165
- .text-muted {
142
+ body .text-muted {
166
143
  color: var(--muted);
167
144
  }
168
-
169
- .bg-muted {
145
+ body .bg-muted {
170
146
  background-color: var(--muted);
171
147
  }
172
-
173
- .text-success {
148
+ body .text-success {
174
149
  color: var(--success);
175
150
  }
176
-
177
- .bg-success {
151
+ body .bg-success {
178
152
  background-color: var(--success);
179
153
  }
180
-
181
- .text-warning {
154
+ body .text-warning {
182
155
  color: var(--warning);
183
156
  }
184
-
185
- .bg-warning {
157
+ body .bg-warning {
186
158
  background-color: var(--warning);
187
159
  }
188
-
189
- .text-error {
160
+ body .text-error {
190
161
  color: var(--error);
191
162
  }
192
-
193
- .bg-error {
163
+ body .bg-error {
194
164
  background-color: var(--error);
195
165
  }
196
-
197
- .text-background {
166
+ body .text-background {
198
167
  color: var(--background);
199
168
  }
200
-
201
- .bg-background {
169
+ body .bg-background {
202
170
  background-color: var(--background);
203
171
  }
204
-
205
- .text-foreground {
172
+ body .text-foreground {
206
173
  color: var(--foreground);
207
174
  }
208
-
209
- .bg-foreground {
175
+ body .bg-foreground {
210
176
  background-color: var(--foreground);
211
177
  }
212
-
213
- .text-muted {
178
+ body .text-muted {
214
179
  color: var(--muted-foreground);
215
180
  }
216
-
217
- /* Layout Utilities */
218
- .flex {
181
+ body {
182
+ /* Layout Utilities */
183
+ }
184
+ body .flex {
219
185
  display: flex;
220
186
  }
221
-
222
- .grid {
187
+ body .grid {
223
188
  display: grid;
224
189
  }
225
-
226
- .hidden {
190
+ body .hidden {
227
191
  display: none;
228
192
  }
229
-
230
- .block {
193
+ body .block {
231
194
  display: block;
232
195
  }
233
-
234
- .w-full {
196
+ body .w-full {
235
197
  width: 100%;
236
198
  }
237
-
238
- .h-full {
199
+ body .h-full {
239
200
  height: 100%;
240
201
  }
241
-
242
- .relative {
202
+ body .relative {
243
203
  position: relative;
244
204
  }
245
-
246
- .absolute {
205
+ body .absolute {
247
206
  position: absolute;
248
207
  }
249
-
250
- .fixed {
208
+ body .fixed {
251
209
  position: fixed;
252
210
  }
253
-
254
- /* Spacing Scale (0-10) */
255
- .m-0 {
211
+ body {
212
+ /* Spacing Scale (0-10) */
213
+ }
214
+ body .m-0 {
256
215
  margin: 0;
257
216
  }
258
-
259
- .mt-0 {
217
+ body .mt-0 {
260
218
  margin-top: 0;
261
219
  }
262
-
263
- .mb-0 {
220
+ body .mb-0 {
264
221
  margin-bottom: 0;
265
222
  }
266
-
267
- .ml-0 {
223
+ body .ml-0 {
268
224
  margin-left: 0;
269
225
  }
270
-
271
- .mr-0 {
226
+ body .mr-0 {
272
227
  margin-right: 0;
273
228
  }
274
-
275
- .mx-0 {
229
+ body .mx-0 {
276
230
  margin-left: 0;
277
231
  margin-right: 0;
278
232
  }
279
-
280
- .my-0 {
233
+ body .my-0 {
281
234
  margin-top: 0;
282
235
  margin-bottom: 0;
283
236
  }
284
-
285
- .p-0 {
237
+ body .p-0 {
286
238
  padding: 0;
287
239
  }
288
-
289
- .pt-0 {
240
+ body .pt-0 {
290
241
  padding-top: 0;
291
242
  }
292
-
293
- .pb-0 {
243
+ body .pb-0 {
294
244
  padding-bottom: 0;
295
245
  }
296
-
297
- .pl-0 {
246
+ body .pl-0 {
298
247
  padding-left: 0;
299
248
  }
300
-
301
- .pr-0 {
249
+ body .pr-0 {
302
250
  padding-right: 0;
303
251
  }
304
-
305
- .px-0 {
252
+ body .px-0 {
306
253
  padding-left: 0;
307
254
  padding-right: 0;
308
255
  }
309
-
310
- .py-0 {
256
+ body .py-0 {
311
257
  padding-top: 0;
312
258
  padding-bottom: 0;
313
259
  }
314
-
315
- .m-1 {
260
+ body {
261
+ /* Positioning */
262
+ }
263
+ body .top-0 {
264
+ top: 0;
265
+ }
266
+ body .bottom-0 {
267
+ bottom: 0;
268
+ }
269
+ body .left-0 {
270
+ left: 0;
271
+ }
272
+ body .right-0 {
273
+ right: 0;
274
+ }
275
+ body .inset-0 {
276
+ top: 0;
277
+ right: 0;
278
+ bottom: 0;
279
+ left: 0;
280
+ }
281
+ body .m-1 {
316
282
  margin: 0.25rem;
317
283
  }
318
-
319
- .mt-1 {
284
+ body .mt-1 {
320
285
  margin-top: 0.25rem;
321
286
  }
322
-
323
- .mb-1 {
287
+ body .mb-1 {
324
288
  margin-bottom: 0.25rem;
325
289
  }
326
-
327
- .ml-1 {
290
+ body .ml-1 {
328
291
  margin-left: 0.25rem;
329
292
  }
330
-
331
- .mr-1 {
293
+ body .mr-1 {
332
294
  margin-right: 0.25rem;
333
295
  }
334
-
335
- .mx-1 {
296
+ body .mx-1 {
336
297
  margin-left: 0.25rem;
337
298
  margin-right: 0.25rem;
338
299
  }
339
-
340
- .my-1 {
300
+ body .my-1 {
341
301
  margin-top: 0.25rem;
342
302
  margin-bottom: 0.25rem;
343
303
  }
344
-
345
- .p-1 {
304
+ body .p-1 {
346
305
  padding: 0.25rem;
347
306
  }
348
-
349
- .pt-1 {
307
+ body .pt-1 {
350
308
  padding-top: 0.25rem;
351
309
  }
352
-
353
- .pb-1 {
310
+ body .pb-1 {
354
311
  padding-bottom: 0.25rem;
355
312
  }
356
-
357
- .pl-1 {
313
+ body .pl-1 {
358
314
  padding-left: 0.25rem;
359
315
  }
360
-
361
- .pr-1 {
316
+ body .pr-1 {
362
317
  padding-right: 0.25rem;
363
318
  }
364
-
365
- .px-1 {
319
+ body .px-1 {
366
320
  padding-left: 0.25rem;
367
321
  padding-right: 0.25rem;
368
322
  }
369
-
370
- .py-1 {
323
+ body .py-1 {
371
324
  padding-top: 0.25rem;
372
325
  padding-bottom: 0.25rem;
373
326
  }
374
-
375
- .m-2 {
327
+ body {
328
+ /* Positioning */
329
+ }
330
+ body .top-1 {
331
+ top: 0.25rem;
332
+ }
333
+ body .bottom-1 {
334
+ bottom: 0.25rem;
335
+ }
336
+ body .left-1 {
337
+ left: 0.25rem;
338
+ }
339
+ body .right-1 {
340
+ right: 0.25rem;
341
+ }
342
+ body .inset-1 {
343
+ top: 0.25rem;
344
+ right: 0.25rem;
345
+ bottom: 0.25rem;
346
+ left: 0.25rem;
347
+ }
348
+ body .m-2 {
376
349
  margin: 0.5rem;
377
350
  }
378
-
379
- .mt-2 {
351
+ body .mt-2 {
380
352
  margin-top: 0.5rem;
381
353
  }
382
-
383
- .mb-2 {
354
+ body .mb-2 {
384
355
  margin-bottom: 0.5rem;
385
356
  }
386
-
387
- .ml-2 {
357
+ body .ml-2 {
388
358
  margin-left: 0.5rem;
389
359
  }
390
-
391
- .mr-2 {
360
+ body .mr-2 {
392
361
  margin-right: 0.5rem;
393
362
  }
394
-
395
- .mx-2 {
363
+ body .mx-2 {
396
364
  margin-left: 0.5rem;
397
365
  margin-right: 0.5rem;
398
366
  }
399
-
400
- .my-2 {
367
+ body .my-2 {
401
368
  margin-top: 0.5rem;
402
369
  margin-bottom: 0.5rem;
403
370
  }
404
-
405
- .p-2 {
371
+ body .p-2 {
406
372
  padding: 0.5rem;
407
373
  }
408
-
409
- .pt-2 {
374
+ body .pt-2 {
410
375
  padding-top: 0.5rem;
411
376
  }
412
-
413
- .pb-2 {
377
+ body .pb-2 {
414
378
  padding-bottom: 0.5rem;
415
379
  }
416
-
417
- .pl-2 {
380
+ body .pl-2 {
418
381
  padding-left: 0.5rem;
419
382
  }
420
-
421
- .pr-2 {
383
+ body .pr-2 {
422
384
  padding-right: 0.5rem;
423
385
  }
424
-
425
- .px-2 {
386
+ body .px-2 {
426
387
  padding-left: 0.5rem;
427
388
  padding-right: 0.5rem;
428
389
  }
429
-
430
- .py-2 {
390
+ body .py-2 {
431
391
  padding-top: 0.5rem;
432
392
  padding-bottom: 0.5rem;
433
393
  }
434
-
435
- .m-3 {
394
+ body {
395
+ /* Positioning */
396
+ }
397
+ body .top-2 {
398
+ top: 0.5rem;
399
+ }
400
+ body .bottom-2 {
401
+ bottom: 0.5rem;
402
+ }
403
+ body .left-2 {
404
+ left: 0.5rem;
405
+ }
406
+ body .right-2 {
407
+ right: 0.5rem;
408
+ }
409
+ body .inset-2 {
410
+ top: 0.5rem;
411
+ right: 0.5rem;
412
+ bottom: 0.5rem;
413
+ left: 0.5rem;
414
+ }
415
+ body .m-3 {
436
416
  margin: 0.75rem;
437
417
  }
438
-
439
- .mt-3 {
418
+ body .mt-3 {
440
419
  margin-top: 0.75rem;
441
420
  }
442
-
443
- .mb-3 {
421
+ body .mb-3 {
444
422
  margin-bottom: 0.75rem;
445
423
  }
446
-
447
- .ml-3 {
424
+ body .ml-3 {
448
425
  margin-left: 0.75rem;
449
426
  }
450
-
451
- .mr-3 {
427
+ body .mr-3 {
452
428
  margin-right: 0.75rem;
453
429
  }
454
-
455
- .mx-3 {
430
+ body .mx-3 {
456
431
  margin-left: 0.75rem;
457
432
  margin-right: 0.75rem;
458
433
  }
459
-
460
- .my-3 {
434
+ body .my-3 {
461
435
  margin-top: 0.75rem;
462
436
  margin-bottom: 0.75rem;
463
437
  }
464
-
465
- .p-3 {
438
+ body .p-3 {
466
439
  padding: 0.75rem;
467
440
  }
468
-
469
- .pt-3 {
441
+ body .pt-3 {
470
442
  padding-top: 0.75rem;
471
443
  }
472
-
473
- .pb-3 {
444
+ body .pb-3 {
474
445
  padding-bottom: 0.75rem;
475
446
  }
476
-
477
- .pl-3 {
447
+ body .pl-3 {
478
448
  padding-left: 0.75rem;
479
449
  }
480
-
481
- .pr-3 {
450
+ body .pr-3 {
482
451
  padding-right: 0.75rem;
483
452
  }
484
-
485
- .px-3 {
453
+ body .px-3 {
486
454
  padding-left: 0.75rem;
487
455
  padding-right: 0.75rem;
488
456
  }
489
-
490
- .py-3 {
457
+ body .py-3 {
491
458
  padding-top: 0.75rem;
492
459
  padding-bottom: 0.75rem;
493
460
  }
494
-
495
- .m-4 {
461
+ body {
462
+ /* Positioning */
463
+ }
464
+ body .top-3 {
465
+ top: 0.75rem;
466
+ }
467
+ body .bottom-3 {
468
+ bottom: 0.75rem;
469
+ }
470
+ body .left-3 {
471
+ left: 0.75rem;
472
+ }
473
+ body .right-3 {
474
+ right: 0.75rem;
475
+ }
476
+ body .inset-3 {
477
+ top: 0.75rem;
478
+ right: 0.75rem;
479
+ bottom: 0.75rem;
480
+ left: 0.75rem;
481
+ }
482
+ body .m-4 {
496
483
  margin: 1rem;
497
484
  }
498
-
499
- .mt-4 {
485
+ body .mt-4 {
500
486
  margin-top: 1rem;
501
487
  }
502
-
503
- .mb-4 {
488
+ body .mb-4 {
504
489
  margin-bottom: 1rem;
505
490
  }
506
-
507
- .ml-4 {
491
+ body .ml-4 {
508
492
  margin-left: 1rem;
509
493
  }
510
-
511
- .mr-4 {
494
+ body .mr-4 {
512
495
  margin-right: 1rem;
513
496
  }
514
-
515
- .mx-4 {
497
+ body .mx-4 {
516
498
  margin-left: 1rem;
517
499
  margin-right: 1rem;
518
500
  }
519
-
520
- .my-4 {
501
+ body .my-4 {
521
502
  margin-top: 1rem;
522
503
  margin-bottom: 1rem;
523
504
  }
524
-
525
- .p-4 {
505
+ body .p-4 {
526
506
  padding: 1rem;
527
507
  }
528
-
529
- .pt-4 {
508
+ body .pt-4 {
530
509
  padding-top: 1rem;
531
510
  }
532
-
533
- .pb-4 {
511
+ body .pb-4 {
534
512
  padding-bottom: 1rem;
535
513
  }
536
-
537
- .pl-4 {
514
+ body .pl-4 {
538
515
  padding-left: 1rem;
539
516
  }
540
-
541
- .pr-4 {
517
+ body .pr-4 {
542
518
  padding-right: 1rem;
543
519
  }
544
-
545
- .px-4 {
520
+ body .px-4 {
546
521
  padding-left: 1rem;
547
522
  padding-right: 1rem;
548
523
  }
549
-
550
- .py-4 {
524
+ body .py-4 {
551
525
  padding-top: 1rem;
552
526
  padding-bottom: 1rem;
553
527
  }
554
-
555
- .m-5 {
528
+ body {
529
+ /* Positioning */
530
+ }
531
+ body .top-4 {
532
+ top: 1rem;
533
+ }
534
+ body .bottom-4 {
535
+ bottom: 1rem;
536
+ }
537
+ body .left-4 {
538
+ left: 1rem;
539
+ }
540
+ body .right-4 {
541
+ right: 1rem;
542
+ }
543
+ body .inset-4 {
544
+ top: 1rem;
545
+ right: 1rem;
546
+ bottom: 1rem;
547
+ left: 1rem;
548
+ }
549
+ body .m-5 {
556
550
  margin: 1.25rem;
557
551
  }
558
-
559
- .mt-5 {
552
+ body .mt-5 {
560
553
  margin-top: 1.25rem;
561
554
  }
562
-
563
- .mb-5 {
555
+ body .mb-5 {
564
556
  margin-bottom: 1.25rem;
565
557
  }
566
-
567
- .ml-5 {
558
+ body .ml-5 {
568
559
  margin-left: 1.25rem;
569
560
  }
570
-
571
- .mr-5 {
561
+ body .mr-5 {
572
562
  margin-right: 1.25rem;
573
563
  }
574
-
575
- .mx-5 {
564
+ body .mx-5 {
576
565
  margin-left: 1.25rem;
577
566
  margin-right: 1.25rem;
578
567
  }
579
-
580
- .my-5 {
568
+ body .my-5 {
581
569
  margin-top: 1.25rem;
582
570
  margin-bottom: 1.25rem;
583
571
  }
584
-
585
- .p-5 {
572
+ body .p-5 {
586
573
  padding: 1.25rem;
587
574
  }
588
-
589
- .pt-5 {
575
+ body .pt-5 {
590
576
  padding-top: 1.25rem;
591
577
  }
592
-
593
- .pb-5 {
578
+ body .pb-5 {
594
579
  padding-bottom: 1.25rem;
595
580
  }
596
-
597
- .pl-5 {
581
+ body .pl-5 {
598
582
  padding-left: 1.25rem;
599
583
  }
600
-
601
- .pr-5 {
584
+ body .pr-5 {
602
585
  padding-right: 1.25rem;
603
586
  }
604
-
605
- .px-5 {
587
+ body .px-5 {
606
588
  padding-left: 1.25rem;
607
589
  padding-right: 1.25rem;
608
590
  }
609
-
610
- .py-5 {
591
+ body .py-5 {
611
592
  padding-top: 1.25rem;
612
593
  padding-bottom: 1.25rem;
613
594
  }
614
-
615
- .m-6 {
595
+ body {
596
+ /* Positioning */
597
+ }
598
+ body .top-5 {
599
+ top: 1.25rem;
600
+ }
601
+ body .bottom-5 {
602
+ bottom: 1.25rem;
603
+ }
604
+ body .left-5 {
605
+ left: 1.25rem;
606
+ }
607
+ body .right-5 {
608
+ right: 1.25rem;
609
+ }
610
+ body .inset-5 {
611
+ top: 1.25rem;
612
+ right: 1.25rem;
613
+ bottom: 1.25rem;
614
+ left: 1.25rem;
615
+ }
616
+ body .m-6 {
616
617
  margin: 1.5rem;
617
618
  }
618
-
619
- .mt-6 {
619
+ body .mt-6 {
620
620
  margin-top: 1.5rem;
621
621
  }
622
-
623
- .mb-6 {
622
+ body .mb-6 {
624
623
  margin-bottom: 1.5rem;
625
624
  }
626
-
627
- .ml-6 {
625
+ body .ml-6 {
628
626
  margin-left: 1.5rem;
629
627
  }
630
-
631
- .mr-6 {
628
+ body .mr-6 {
632
629
  margin-right: 1.5rem;
633
630
  }
634
-
635
- .mx-6 {
631
+ body .mx-6 {
636
632
  margin-left: 1.5rem;
637
633
  margin-right: 1.5rem;
638
634
  }
639
-
640
- .my-6 {
635
+ body .my-6 {
641
636
  margin-top: 1.5rem;
642
637
  margin-bottom: 1.5rem;
643
638
  }
644
-
645
- .p-6 {
639
+ body .p-6 {
646
640
  padding: 1.5rem;
647
641
  }
648
-
649
- .pt-6 {
642
+ body .pt-6 {
650
643
  padding-top: 1.5rem;
651
644
  }
652
-
653
- .pb-6 {
645
+ body .pb-6 {
654
646
  padding-bottom: 1.5rem;
655
647
  }
656
-
657
- .pl-6 {
648
+ body .pl-6 {
658
649
  padding-left: 1.5rem;
659
650
  }
660
-
661
- .pr-6 {
651
+ body .pr-6 {
662
652
  padding-right: 1.5rem;
663
653
  }
664
-
665
- .px-6 {
654
+ body .px-6 {
666
655
  padding-left: 1.5rem;
667
656
  padding-right: 1.5rem;
668
657
  }
669
-
670
- .py-6 {
658
+ body .py-6 {
671
659
  padding-top: 1.5rem;
672
660
  padding-bottom: 1.5rem;
673
661
  }
674
-
675
- .m-7 {
662
+ body {
663
+ /* Positioning */
664
+ }
665
+ body .top-6 {
666
+ top: 1.5rem;
667
+ }
668
+ body .bottom-6 {
669
+ bottom: 1.5rem;
670
+ }
671
+ body .left-6 {
672
+ left: 1.5rem;
673
+ }
674
+ body .right-6 {
675
+ right: 1.5rem;
676
+ }
677
+ body .inset-6 {
678
+ top: 1.5rem;
679
+ right: 1.5rem;
680
+ bottom: 1.5rem;
681
+ left: 1.5rem;
682
+ }
683
+ body .m-7 {
676
684
  margin: 1.75rem;
677
685
  }
678
-
679
- .mt-7 {
686
+ body .mt-7 {
680
687
  margin-top: 1.75rem;
681
688
  }
682
-
683
- .mb-7 {
689
+ body .mb-7 {
684
690
  margin-bottom: 1.75rem;
685
691
  }
686
-
687
- .ml-7 {
692
+ body .ml-7 {
688
693
  margin-left: 1.75rem;
689
694
  }
690
-
691
- .mr-7 {
695
+ body .mr-7 {
692
696
  margin-right: 1.75rem;
693
697
  }
694
-
695
- .mx-7 {
698
+ body .mx-7 {
696
699
  margin-left: 1.75rem;
697
700
  margin-right: 1.75rem;
698
701
  }
699
-
700
- .my-7 {
702
+ body .my-7 {
701
703
  margin-top: 1.75rem;
702
704
  margin-bottom: 1.75rem;
703
705
  }
704
-
705
- .p-7 {
706
+ body .p-7 {
706
707
  padding: 1.75rem;
707
708
  }
708
-
709
- .pt-7 {
709
+ body .pt-7 {
710
710
  padding-top: 1.75rem;
711
711
  }
712
-
713
- .pb-7 {
712
+ body .pb-7 {
714
713
  padding-bottom: 1.75rem;
715
714
  }
716
-
717
- .pl-7 {
715
+ body .pl-7 {
718
716
  padding-left: 1.75rem;
719
717
  }
720
-
721
- .pr-7 {
718
+ body .pr-7 {
722
719
  padding-right: 1.75rem;
723
720
  }
724
-
725
- .px-7 {
721
+ body .px-7 {
726
722
  padding-left: 1.75rem;
727
723
  padding-right: 1.75rem;
728
724
  }
729
-
730
- .py-7 {
725
+ body .py-7 {
731
726
  padding-top: 1.75rem;
732
727
  padding-bottom: 1.75rem;
733
728
  }
734
-
735
- .m-8 {
729
+ body {
730
+ /* Positioning */
731
+ }
732
+ body .top-7 {
733
+ top: 1.75rem;
734
+ }
735
+ body .bottom-7 {
736
+ bottom: 1.75rem;
737
+ }
738
+ body .left-7 {
739
+ left: 1.75rem;
740
+ }
741
+ body .right-7 {
742
+ right: 1.75rem;
743
+ }
744
+ body .inset-7 {
745
+ top: 1.75rem;
746
+ right: 1.75rem;
747
+ bottom: 1.75rem;
748
+ left: 1.75rem;
749
+ }
750
+ body .m-8 {
736
751
  margin: 2rem;
737
752
  }
738
-
739
- .mt-8 {
753
+ body .mt-8 {
740
754
  margin-top: 2rem;
741
755
  }
742
-
743
- .mb-8 {
756
+ body .mb-8 {
744
757
  margin-bottom: 2rem;
745
758
  }
746
-
747
- .ml-8 {
759
+ body .ml-8 {
748
760
  margin-left: 2rem;
749
761
  }
750
-
751
- .mr-8 {
762
+ body .mr-8 {
752
763
  margin-right: 2rem;
753
764
  }
754
-
755
- .mx-8 {
765
+ body .mx-8 {
756
766
  margin-left: 2rem;
757
767
  margin-right: 2rem;
758
768
  }
759
-
760
- .my-8 {
769
+ body .my-8 {
761
770
  margin-top: 2rem;
762
771
  margin-bottom: 2rem;
763
772
  }
764
-
765
- .p-8 {
773
+ body .p-8 {
766
774
  padding: 2rem;
767
775
  }
768
-
769
- .pt-8 {
776
+ body .pt-8 {
770
777
  padding-top: 2rem;
771
778
  }
772
-
773
- .pb-8 {
779
+ body .pb-8 {
774
780
  padding-bottom: 2rem;
775
781
  }
776
-
777
- .pl-8 {
782
+ body .pl-8 {
778
783
  padding-left: 2rem;
779
784
  }
780
-
781
- .pr-8 {
785
+ body .pr-8 {
782
786
  padding-right: 2rem;
783
787
  }
784
-
785
- .px-8 {
788
+ body .px-8 {
786
789
  padding-left: 2rem;
787
790
  padding-right: 2rem;
788
791
  }
789
-
790
- .py-8 {
792
+ body .py-8 {
791
793
  padding-top: 2rem;
792
794
  padding-bottom: 2rem;
793
795
  }
794
-
795
- .m-9 {
796
+ body {
797
+ /* Positioning */
798
+ }
799
+ body .top-8 {
800
+ top: 2rem;
801
+ }
802
+ body .bottom-8 {
803
+ bottom: 2rem;
804
+ }
805
+ body .left-8 {
806
+ left: 2rem;
807
+ }
808
+ body .right-8 {
809
+ right: 2rem;
810
+ }
811
+ body .inset-8 {
812
+ top: 2rem;
813
+ right: 2rem;
814
+ bottom: 2rem;
815
+ left: 2rem;
816
+ }
817
+ body .m-9 {
796
818
  margin: 2.25rem;
797
819
  }
798
-
799
- .mt-9 {
820
+ body .mt-9 {
800
821
  margin-top: 2.25rem;
801
822
  }
802
-
803
- .mb-9 {
823
+ body .mb-9 {
804
824
  margin-bottom: 2.25rem;
805
825
  }
806
-
807
- .ml-9 {
826
+ body .ml-9 {
808
827
  margin-left: 2.25rem;
809
828
  }
810
-
811
- .mr-9 {
829
+ body .mr-9 {
812
830
  margin-right: 2.25rem;
813
831
  }
814
-
815
- .mx-9 {
832
+ body .mx-9 {
816
833
  margin-left: 2.25rem;
817
834
  margin-right: 2.25rem;
818
835
  }
819
-
820
- .my-9 {
836
+ body .my-9 {
821
837
  margin-top: 2.25rem;
822
838
  margin-bottom: 2.25rem;
823
839
  }
824
-
825
- .p-9 {
840
+ body .p-9 {
826
841
  padding: 2.25rem;
827
842
  }
828
-
829
- .pt-9 {
843
+ body .pt-9 {
830
844
  padding-top: 2.25rem;
831
845
  }
832
-
833
- .pb-9 {
846
+ body .pb-9 {
834
847
  padding-bottom: 2.25rem;
835
848
  }
836
-
837
- .pl-9 {
849
+ body .pl-9 {
838
850
  padding-left: 2.25rem;
839
851
  }
840
-
841
- .pr-9 {
852
+ body .pr-9 {
842
853
  padding-right: 2.25rem;
843
854
  }
844
-
845
- .px-9 {
855
+ body .px-9 {
846
856
  padding-left: 2.25rem;
847
857
  padding-right: 2.25rem;
848
858
  }
849
-
850
- .py-9 {
859
+ body .py-9 {
851
860
  padding-top: 2.25rem;
852
861
  padding-bottom: 2.25rem;
853
862
  }
854
-
855
- .m-10 {
863
+ body {
864
+ /* Positioning */
865
+ }
866
+ body .top-9 {
867
+ top: 2.25rem;
868
+ }
869
+ body .bottom-9 {
870
+ bottom: 2.25rem;
871
+ }
872
+ body .left-9 {
873
+ left: 2.25rem;
874
+ }
875
+ body .right-9 {
876
+ right: 2.25rem;
877
+ }
878
+ body .inset-9 {
879
+ top: 2.25rem;
880
+ right: 2.25rem;
881
+ bottom: 2.25rem;
882
+ left: 2.25rem;
883
+ }
884
+ body .m-10 {
856
885
  margin: 2.5rem;
857
886
  }
858
-
859
- .mt-10 {
887
+ body .mt-10 {
860
888
  margin-top: 2.5rem;
861
889
  }
862
-
863
- .mb-10 {
890
+ body .mb-10 {
864
891
  margin-bottom: 2.5rem;
865
892
  }
866
-
867
- .ml-10 {
893
+ body .ml-10 {
868
894
  margin-left: 2.5rem;
869
895
  }
870
-
871
- .mr-10 {
896
+ body .mr-10 {
872
897
  margin-right: 2.5rem;
873
898
  }
874
-
875
- .mx-10 {
899
+ body .mx-10 {
876
900
  margin-left: 2.5rem;
877
901
  margin-right: 2.5rem;
878
902
  }
879
-
880
- .my-10 {
903
+ body .my-10 {
881
904
  margin-top: 2.5rem;
882
905
  margin-bottom: 2.5rem;
883
906
  }
884
-
885
- .p-10 {
907
+ body .p-10 {
886
908
  padding: 2.5rem;
887
909
  }
888
-
889
- .pt-10 {
910
+ body .pt-10 {
890
911
  padding-top: 2.5rem;
891
912
  }
892
-
893
- .pb-10 {
913
+ body .pb-10 {
894
914
  padding-bottom: 2.5rem;
895
915
  }
896
-
897
- .pl-10 {
916
+ body .pl-10 {
898
917
  padding-left: 2.5rem;
899
918
  }
900
-
901
- .pr-10 {
919
+ body .pr-10 {
902
920
  padding-right: 2.5rem;
903
921
  }
904
-
905
- .px-10 {
922
+ body .px-10 {
906
923
  padding-left: 2.5rem;
907
924
  padding-right: 2.5rem;
908
925
  }
909
-
910
- .py-10 {
926
+ body .py-10 {
911
927
  padding-top: 2.5rem;
912
928
  padding-bottom: 2.5rem;
913
929
  }
914
-
915
- /* Opacity */
916
- .opacity-0 {
930
+ body {
931
+ /* Positioning */
932
+ }
933
+ body .top-10 {
934
+ top: 2.5rem;
935
+ }
936
+ body .bottom-10 {
937
+ bottom: 2.5rem;
938
+ }
939
+ body .left-10 {
940
+ left: 2.5rem;
941
+ }
942
+ body .right-10 {
943
+ right: 2.5rem;
944
+ }
945
+ body .inset-10 {
946
+ top: 2.5rem;
947
+ right: 2.5rem;
948
+ bottom: 2.5rem;
949
+ left: 2.5rem;
950
+ }
951
+ body {
952
+ /* Opacity */
953
+ }
954
+ body .opacity-0 {
917
955
  opacity: 0;
918
956
  }
919
-
920
- .opacity-10 {
957
+ body .opacity-10 {
921
958
  opacity: 0.1;
922
959
  }
923
-
924
- .opacity-20 {
960
+ body .opacity-20 {
925
961
  opacity: 0.2;
926
962
  }
927
-
928
- .opacity-30 {
963
+ body .opacity-30 {
929
964
  opacity: 0.3;
930
965
  }
931
-
932
- .opacity-40 {
966
+ body .opacity-40 {
933
967
  opacity: 0.4;
934
968
  }
935
-
936
- .opacity-50 {
969
+ body .opacity-50 {
937
970
  opacity: 0.5;
938
971
  }
939
-
940
- .opacity-60 {
972
+ body .opacity-60 {
941
973
  opacity: 0.6;
942
974
  }
943
-
944
- .opacity-70 {
975
+ body .opacity-70 {
945
976
  opacity: 0.7;
946
977
  }
947
-
948
- .opacity-80 {
978
+ body .opacity-80 {
949
979
  opacity: 0.8;
950
980
  }
951
-
952
- .opacity-90 {
981
+ body .opacity-90 {
953
982
  opacity: 0.9;
954
983
  }
955
-
956
- .opacity-100 {
984
+ body .opacity-100 {
957
985
  opacity: 1;
958
986
  }
959
-
960
- /* Extras */
961
- .italic {
987
+ body {
988
+ /* Extras */
989
+ }
990
+ body .italic {
962
991
  font-style: italic;
963
992
  }
964
-
965
- .uppercase {
993
+ body .uppercase {
966
994
  text-transform: uppercase;
967
995
  }
968
-
969
- .text-center {
996
+ body .text-center {
970
997
  text-align: center;
971
998
  }
972
-
973
- .cursor-pointer {
999
+ body .cursor-pointer {
974
1000
  cursor: pointer;
975
1001
  }
976
-
977
- .cursor-not-allowed {
1002
+ body .cursor-not-allowed {
978
1003
  cursor: not-allowed;
979
1004
  }
980
-
981
- .items-center {
1005
+ body .items-center {
982
1006
  align-items: center;
983
1007
  }
984
-
985
- .justify-center {
1008
+ body .justify-center {
986
1009
  justify-content: center;
987
1010
  }
988
-
989
- .justify-between {
1011
+ body .justify-between {
990
1012
  justify-content: space-between;
991
1013
  }
992
-
993
- .transition-all {
1014
+ body .transition-all {
994
1015
  transition: all 0.2s ease;
995
1016
  }
996
-
997
- .shadow-hard {
1017
+ body .shadow-hard {
998
1018
  box-shadow: var(--shadow-hard);
999
1019
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "doom-design-system",
3
- "version": "0.1.8",
3
+ "version": "0.1.10",
4
4
  "description": "Neubrutalist and comic book inspired design system",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",