@infonomic/uikit 3.8.0 → 3.10.0

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 (73) hide show
  1. package/dist/components/dropdown/dropdown_module.css +1 -1
  2. package/dist/components/forms/calendar_module.css +12 -45
  3. package/dist/components/forms/radio-group_module.css +2 -2
  4. package/dist/components/notifications/alert_module.css +15 -15
  5. package/dist/components/table/table_module.css +2 -2
  6. package/dist/components/tabs/tabs_module.css +4 -5
  7. package/dist/styles/styles.css +1 -1
  8. package/dist/styles/typography.css +1 -1
  9. package/dist/widgets/datepicker/datepicker.js +2 -2
  10. package/dist/widgets/datepicker/datepicker_module.css +13 -13
  11. package/dist/widgets/drawer/drawer_module.css +6 -6
  12. package/dist/widgets/modal/modal_module.css +12 -12
  13. package/dist/widgets/timeline/timeline_module.css +7 -7
  14. package/package.json +1 -1
  15. package/src/components/accordion/accordion.stories.tsx +2 -2
  16. package/src/components/avatar/avatar.stories.tsx +1 -1
  17. package/src/components/badge/badge.stories.tsx +1 -1
  18. package/src/components/button/button-group.stories.tsx +1 -1
  19. package/src/components/button/button-intents.stories.tsx +1 -1
  20. package/src/components/button/button-variants.stories.tsx +1 -1
  21. package/src/components/button/control-buttons.stories.tsx +2 -2
  22. package/src/components/button/icon-button.stories.tsx +2 -2
  23. package/src/components/card/card.stories.tsx +2 -2
  24. package/src/components/container/container.stories.tsx +4 -10
  25. package/src/components/dropdown/dropdown.module.css +1 -1
  26. package/src/components/dropdown/dropdown.stories.tsx +1 -1
  27. package/src/components/forms/calendar.module.css +12 -58
  28. package/src/components/forms/calendar.stories.tsx +3 -3
  29. package/src/components/forms/checkbox.stories.tsx +1 -1
  30. package/src/components/forms/input.stories.tsx +1 -1
  31. package/src/components/forms/radio-group.module.css +2 -2
  32. package/src/components/forms/text-area.stories.tsx +2 -2
  33. package/src/components/notifications/alert.module.css +15 -15
  34. package/src/components/notifications/alert.stories.tsx +1 -1
  35. package/src/components/notifications/toast.stories.tsx +1 -1
  36. package/src/components/pager/pagination.stories.tsx +3 -3
  37. package/src/components/scroll-area/scroll-area.stories.tsx +1 -1
  38. package/src/components/table/table.module.css +2 -2
  39. package/src/components/table/table.stories.tsx +1 -1
  40. package/src/components/tabs/tabs.module.css +7 -5
  41. package/src/components/tabs/tabs.stories.tsx +1 -1
  42. package/src/loaders/loaders.stories.tsx +1 -1
  43. package/src/styles/base/base.css +1 -0
  44. package/src/styles/base/size.css +24 -0
  45. package/src/styles/base/spacing.css +20 -17
  46. package/src/styles/functional/borders.css +23 -0
  47. package/src/styles/functional/colors.css +51 -94
  48. package/src/styles/functional/functional.css +3 -0
  49. package/src/styles/functional/grid-flex.css +11 -11
  50. package/src/styles/functional/surfaces.css +115 -0
  51. package/src/styles/functional/typography.css +44 -0
  52. package/src/styles/local-fonts.css +72 -0
  53. package/src/styles/theme/autofill.css +14 -5
  54. package/src/styles/theme/defaults.css +75 -0
  55. package/src/styles/theme/scrollers.css +4 -2
  56. package/src/styles/theme/theme.css +15 -130
  57. package/src/styles/theme/theme.stories.tsx +7 -6
  58. package/src/styles/typography/code.stories.tsx +3 -3
  59. package/src/styles/typography/default.stories.tsx +1 -1
  60. package/src/styles/typography/lists.stories.tsx +1 -1
  61. package/src/styles/typography/prose.css +9 -9
  62. package/src/styles/typography/quote.stories.tsx +1 -1
  63. package/src/styles/utils/utility-classes.css +190 -58
  64. package/src/widgets/datepicker/datepicker.module.css +13 -13
  65. package/src/widgets/datepicker/datepicker.stories.tsx +1 -1
  66. package/src/widgets/datepicker/datepicker.tsx +2 -2
  67. package/src/widgets/drawer/drawer.module.css +6 -6
  68. package/src/widgets/modal/modal.module.css +12 -12
  69. package/src/widgets/modal/modal.stories.tsx +2 -9
  70. package/src/widgets/search/search.stories.tsx +1 -1
  71. package/src/widgets/timeline/timeline.module.css +7 -7
  72. package/src/widgets/timeline/timeline.stories.tsx +1 -1
  73. package/src/styles/theme/typography.css +0 -26
package/src/styles/utils/utility-classes.css CHANGED
@@ -1,4 +1,7 @@
1
- /* A simple utility class collection. NOT designed as a
1
+ /**
2
+ * UTILITY CLASSES
3
+ *
4
+ * A simple utility class collection. NOT designed as a
2
5
  * replacement for Tailwind - but useful for small or simple
3
6
  * projects as well as uikit development.
4
7
  */
@@ -16,6 +19,120 @@
16
19
  border-width: 0;
17
20
  }
18
21
 
22
+ /* ========================================
23
+ THEME UTILITIES
24
+ ======================================== */
25
+
26
+ .background {
27
+ background-color: var(--background);
28
+ }
29
+
30
+ .foreground {
31
+ color: var(--foreground);
32
+ }
33
+
34
+ .text {
35
+ color: var(--text);
36
+ }
37
+
38
+ .headings {
39
+ color: var(--headings);
40
+ }
41
+
42
+ .muted {
43
+ font-size: 0.925rem;
44
+ color: var(--muted);
45
+ }
46
+
47
+ /* External link */
48
+ .external-link::after {
49
+ content: "";
50
+ display: inline-block;
51
+ background-image: url("/external-link-light.svg");
52
+ background-repeat: no-repeat;
53
+ background-position: 20% 50%;
54
+ background-size: 65% auto;
55
+ width: 1.1rem;
56
+ height: 1.1rem;
57
+ margin-right: -5px;
58
+ }
59
+
60
+ .dark .external-link::after,
61
+ [data-theme="dark"] .external-link::after {
62
+ background-image: url("/external-link-dark.svg");
63
+ }
64
+
65
+ .primary-strong {
66
+ background-color: var(--fill-primary-strong);
67
+ color: var(--text-on-primary);
68
+ }
69
+
70
+ .primary-weak {
71
+ background-color: var(--fill-primary-weak);
72
+ color: var(--text-on-primary);
73
+ }
74
+
75
+ .secondary-strong {
76
+ background-color: var(--fill-secondary-strong);
77
+ color: var(--text-on-secondary);
78
+ }
79
+
80
+ .secondary-weak {
81
+ background-color: var(--fill-secondary-weak);
82
+ color: var(--text-on-secondary);
83
+ }
84
+
85
+ .accent-strong {
86
+ background-color: var(--fill-accent-strong);
87
+ color: var(--text-on-accent);
88
+ }
89
+
90
+ .accent-weak {
91
+ background-color: var(--fill-accent-weak);
92
+ color: var(--text-on-accent);
93
+ }
94
+
95
+ .info-strong {
96
+ background-color: var(--fill-info-strong);
97
+ color: var(--text-on-info);
98
+ }
99
+
100
+ .info-weak {
101
+ background-color: var(--fill-info-weak);
102
+ color: var(--text-on-info);
103
+ }
104
+
105
+ .success-strong {
106
+ background-color: var(--fill-success-strong);
107
+ color: var(--text-on-success);
108
+ }
109
+
110
+ .success-weak {
111
+ background-color: var(--fill-success-weak);
112
+ color: var(--text-on-success);
113
+ }
114
+
115
+ .warning-strong {
116
+ background-color: var(--fill-warning-strong);
117
+ color: var(--text-on-warning);
118
+ }
119
+
120
+ .warning-weak {
121
+ background-color: var(--fill-warning-weak);
122
+ color: var(--text-on-warning);
123
+ }
124
+
125
+ .danger-strong {
126
+ background-color: var(--fill-danger-strong);
127
+ color: var(--text-on-danger);
128
+ }
129
+
130
+ .danger-weak {
131
+ background-color: var(--fill-danger-weak);
132
+ color: var(--text-on-danger);
133
+ }
134
+
135
+
19
136
  /* ========================================
20
137
  TYPOGRAPHY UTILITIES
21
138
  ======================================== */
@@ -355,23 +472,23 @@
355
472
  }
356
473
 
357
474
  .m-1 {
358
- margin: var(--spacing-1);
475
+ margin: var(--spacing-4);
359
476
  }
360
477
 
361
478
  .m-2 {
362
- margin: var(--spacing-2);
479
+ margin: var(--spacing-8);
363
480
  }
364
481
 
365
482
  .m-3 {
366
- margin: var(--spacing-3);
483
+ margin: var(--spacing-12);
367
484
  }
368
485
 
369
486
  .m-4 {
370
- margin: var(--spacing-4);
487
+ margin: var(--spacing-16);
371
488
  }
372
489
 
373
490
  .m-5 {
374
- margin: var(--spacing-5);
491
+ margin: var(--spacing-20);
375
492
  }
376
493
 
377
494
  .m-6 {
@@ -383,15 +500,15 @@
383
500
  }
384
501
 
385
502
  .m-10 {
386
- margin: var(--spacing-10);
503
+ margin: var(--spacing-40);
387
504
  }
388
505
 
389
506
  .m-12 {
390
- margin: var(--spacing-12);
507
+ margin: var(--spacing-48);
391
508
  }
392
509
 
393
510
  .m-16 {
394
- margin: var(--spacing-16);
511
+ margin: var(--spacing-64);
395
512
  }
396
513
 
397
514
  .p-0 {
@@ -399,23 +516,23 @@
399
516
  }
400
517
 
401
518
  .p-1 {
402
- padding: var(--spacing-1);
519
+ padding: var(--spacing-4);
403
520
  }
404
521
 
405
522
  .p-2 {
406
- padding: var(--spacing-2);
523
+ padding: var(--spacing-8);
407
524
  }
408
525
 
409
526
  .p-3 {
410
- padding: var(--spacing-3);
527
+ padding: var(--spacing-12);
411
528
  }
412
529
 
413
530
  .p-4 {
414
- padding: var(--spacing-4);
531
+ padding: var(--spacing-16);
415
532
  }
416
533
 
417
534
  .p-5 {
418
- padding: var(--spacing-5);
535
+ padding: var(--spacing-20);
419
536
  }
420
537
 
421
538
  .p-6 {
@@ -427,27 +544,27 @@
427
544
  }
428
545
 
429
546
  .p-10 {
430
- padding: var(--spacing-10);
547
+ padding: var(--spacing-40);
431
548
  }
432
549
 
433
550
  .p-12 {
434
- padding: var(--spacing-12);
551
+ padding: var(--spacing-48);
435
552
  }
436
553
 
437
554
  .p-16 {
438
- padding: var(--spacing-16);
555
+ padding: var(--spacing-64);
439
556
  }
440
557
 
441
558
  .p-20 {
442
- padding: var(--spacing-20);
559
+ padding: var(--spacing-80);
443
560
  }
444
561
 
445
562
  .p-24 {
446
- padding: var(--spacing-24);
563
+ padding: var(--spacing-96);
447
564
  }
448
565
 
449
566
  .p-32 {
450
- padding: var(--spacing-32);
567
+ padding: var(--spacing-128);
451
568
  }
452
569
 
453
570
  @media (min-width: 40rem) {
@@ -456,23 +573,23 @@
456
573
  }
457
574
 
458
575
  .sm\:m-1 {
459
- margin: var(--spacing-1);
576
+ margin: var(--spacing-4);
460
577
  }
461
578
 
462
579
  .sm\:m-2 {
463
- margin: var(--spacing-2);
580
+ margin: var(--spacing-8);
464
581
  }
465
582
 
466
583
  .sm\:m-3 {
467
- margin: var(--spacing-3);
584
+ margin: var(--spacing-12);
468
585
  }
469
586
 
470
587
  .sm\:m-4 {
471
- margin: var(--spacing-4);
588
+ margin: var(--spacing-16);
472
589
  }
473
590
 
474
591
  .sm\:m-5 {
475
- margin: var(--spacing-5);
592
+ margin: var(--spacing-20);
476
593
  }
477
594
 
478
595
  .sm\:m-6 {
@@ -484,15 +601,15 @@
484
601
  }
485
602
 
486
603
  .sm\:m-10 {
487
- margin: var(--spacing-10);
604
+ margin: var(--spacing-40);
488
605
  }
489
606
 
490
607
  .sm\:m-12 {
491
- margin: var(--spacing-12);
608
+ margin: var(--spacing-48);
492
609
  }
493
610
 
494
611
  .sm\:m-16 {
495
- margin: var(--spacing-16);
612
+ margin: var(--spacing-64);
496
613
  }
497
614
 
498
615
  .sm\:p-0 {
@@ -500,23 +617,23 @@
500
617
  }
501
618
 
502
619
  .sm\:p-1 {
503
- padding: var(--spacing-1);
620
+ padding: var(--spacing-4);
504
621
  }
505
622
 
506
623
  .sm\:p-2 {
507
- padding: var(--spacing-2);
624
+ padding: var(--spacing-8);
508
625
  }
509
626
 
510
627
  .sm\:p-3 {
511
- padding: var(--spacing-3);
628
+ padding: var(--spacing-12);
512
629
  }
513
630
 
514
631
  .sm\:p-4 {
515
- padding: var(--spacing-4);
632
+ padding: var(--spacing-16);
516
633
  }
517
634
 
518
635
  .sm\:p-5 {
519
- padding: var(--spacing-5);
636
+ padding: var(--spacing-20);
520
637
  }
521
638
 
522
639
  .sm\:p-6 {
@@ -528,27 +645,27 @@
528
645
  }
529
646
 
530
647
  .sm\:p-10 {
531
- padding: var(--spacing-10);
648
+ padding: var(--spacing-40);
532
649
  }
533
650
 
534
651
  .sm\:p-12 {
535
- padding: var(--spacing-12);
652
+ padding: var(--spacing-48);
536
653
  }
537
654
 
538
655
  .sm\:p-16 {
539
- padding: var(--spacing-16);
656
+ padding: var(--spacing-64);
540
657
  }
541
658
 
542
659
  .sm\:p-20 {
543
- padding: var(--spacing-20);
660
+ padding: var(--spacing-80);
544
661
  }
545
662
 
546
663
  .sm\:p-24 {
547
- padding: var(--spacing-24);
664
+ padding: var(--spacing-96);
548
665
  }
549
666
 
550
667
  .sm\:p-32 {
551
- padding: var(--spacing-32);
668
+ padding: var(--spacing-128);
552
669
  }
553
670
  }
554
671
 
@@ -558,23 +675,23 @@
558
675
  }
559
676
 
560
677
  .md\:m-1 {
561
- margin: var(--spacing-1);
678
+ margin: var(--spacing-4);
562
679
  }
563
680
 
564
681
  .md\:m-2 {
565
- margin: var(--spacing-2);
682
+ margin: var(--spacing-8);
566
683
  }
567
684
 
568
685
  .md\:m-3 {
569
- margin: var(--spacing-3);
686
+ margin: var(--spacing-12);
570
687
  }
571
688
 
572
689
  .md\:m-4 {
573
- margin: var(--spacing-4);
690
+ margin: var(--spacing-16);
574
691
  }
575
692
 
576
693
  .md\:m-5 {
577
- margin: var(--spacing-5);
694
+ margin: var(--spacing-20);
578
695
  }
579
696
 
580
697
  .md\:m-6 {
@@ -586,15 +703,15 @@
586
703
  }
587
704
 
588
705
  .md\:m-10 {
589
- margin: var(--spacing-10);
706
+ margin: var(--spacing-40);
590
707
  }
591
708
 
592
709
  .md\:m-12 {
593
- margin: var(--spacing-12);
710
+ margin: var(--spacing-48);
594
711
  }
595
712
 
596
713
  .md\:m-16 {
597
- margin: var(--spacing-16);
714
+ margin: var(--spacing-64);
598
715
  }
599
716
 
600
717
  .md\:p-0 {
@@ -602,23 +719,23 @@
602
719
  }
603
720
 
604
721
  .md\:p-1 {
605
- padding: var(--spacing-1);
722
+ padding: var(--spacing-4);
606
723
  }
607
724
 
608
725
  .md\:p-2 {
609
- padding: var(--spacing-2);
726
+ padding: var(--spacing-8);
610
727
  }
611
728
 
612
729
  .md\:p-3 {
613
- padding: var(--spacing-3);
730
+ padding: var(--spacing-12);
614
731
  }
615
732
 
616
733
  .md\:p-4 {
617
- padding: var(--spacing-4);
734
+ padding: var(--spacing-16);
618
735
  }
619
736
 
620
737
  .md\:p-5 {
621
- padding: var(--spacing-5);
738
+ padding: var(--spacing-20);
622
739
  }
623
740
 
624
741
  .md\:p-6 {
@@ -630,27 +747,27 @@
630
747
  }
631
748
 
632
749
  .md\:p-10 {
633
- padding: var(--spacing-10);
750
+ padding: var(--spacing-40);
634
751
  }
635
752
 
636
753
  .md\:p-12 {
637
- padding: var(--spacing-12);
754
+ padding: var(--spacing-48);
638
755
  }
639
756
 
640
757
  .md\:p-16 {
641
- padding: var(--spacing-16);
758
+ padding: var(--spacing-64);
642
759
  }
643
760
 
644
761
  .md\:p-20 {
645
- padding: var(--spacing-20);
762
+ padding: var(--spacing-80);
646
763
  }
647
764
 
648
765
  .md\:p-24 {
649
- padding: var(--spacing-24);
766
+ padding: var(--spacing-96);
650
767
  }
651
768
 
652
769
  .md\:p-32 {
653
- padding: var(--spacing-32);
770
+ padding: var(--spacing-128);
654
771
  }
655
772
  }
656
773
 
@@ -1000,14 +1117,19 @@
1000
1117
  .border {
1001
1118
  border-width: var(--border-width-normal);
1002
1119
  border-style: var(--border-style-solid);
1120
+ border-color: var(--border-color)
1003
1121
  }
1004
1122
 
1005
1123
  .border-thin {
1006
1124
  border-width: var(--border-width-thin);
1125
+ border-style: var(--border-style-solid);
1126
+ border-color: var(--border-color)
1007
1127
  }
1008
1128
 
1009
1129
  .border-thick {
1010
1130
  border-width: var(--border-width-thick);
1131
+ border-style: var(--border-style-solid);
1132
+ border-color: var(--border-color)
1011
1133
  }
1012
1134
 
1013
1135
  .rounded-none {
@@ -1046,14 +1168,19 @@
1046
1168
  .sm\:border {
1047
1169
  border-width: var(--border-width-normal);
1048
1170
  border-style: var(--border-style-solid);
1171
+ border-color: var(--border-color);
1049
1172
  }
1050
1173
 
1051
1174
  .sm\:border-thin {
1052
1175
  border-width: var(--border-width-thin);
1176
+ border-style: var(--border-style-solid);
1177
+ border-color: var(--border-color);
1053
1178
  }
1054
1179
 
1055
1180
  .sm\:border-thick {
1056
1181
  border-width: var(--border-width-thick);
1182
+ border-style: var(--border-style-solid);
1183
+ border-color: var(--border-color);
1057
1184
  }
1058
1185
 
1059
1186
  .sm\:rounded-none {
@@ -1093,14 +1220,19 @@
1093
1220
  .md\:border {
1094
1221
  border-width: var(--border-width-normal);
1095
1222
  border-style: var(--border-style-solid);
1223
+ border-color: var(--border-color);
1096
1224
  }
1097
1225
 
1098
1226
  .md\:border-thin {
1099
1227
  border-width: var(--border-width-thin);
1228
+ border-style: var(--border-style-solid);
1229
+ border-color: var(--border-color);
1100
1230
  }
1101
1231
 
1102
1232
  .md\:border-thick {
1103
1233
  border-width: var(--border-width-thick);
1234
+ border-style: var(--border-style-solid);
1235
+ border-color: var(--border-color);
1104
1236
  }
1105
1237
 
1106
1238
  .md\:rounded-none {
package/src/widgets/datepicker/datepicker.module.css CHANGED
@@ -13,10 +13,10 @@
13
13
  .content {
14
14
  width: 100%;
15
15
  border-radius: 4px;
16
- padding-top: var(--spacing-4);
17
- padding-bottom: var(--spacing-2);
18
- padding-left: var(--spacing-2);
19
- padding-right: var(--spacing-1);
16
+ padding-top: var(--spacing-16);
17
+ padding-bottom: var(--spacing-8);
18
+ padding-left: var(--spacing-8);
19
+ padding-right: var(--spacing-4);
20
20
  background-color: var(--background);
21
21
  border: 1px solid var(--border-color);
22
22
  box-shadow: var(--shadow-md);
@@ -52,7 +52,7 @@
52
52
  .content-components {
53
53
  display: flex;
54
54
  width: 100%;
55
- gap: var(--spacing-2);
55
+ gap: var(--spacing-8);
56
56
  }
57
57
 
58
58
 
@@ -67,8 +67,8 @@
67
67
  .content-status {
68
68
  display: flex;
69
69
  align-items: center;
70
- padding-left: var(--spacing-4);
71
- padding-right: var(--spacing-2);
70
+ padding-left: var(--spacing-16);
71
+ padding-right: var(--spacing-8);
72
72
  font-size: var(--font-size-sm);
73
73
  color: var(--foreground);
74
74
  width: 100%;
@@ -78,10 +78,10 @@
78
78
  display: flex;
79
79
  flex-direction: row;
80
80
  justify-content: space-between;
81
- margin-top: var(--spacing-3);
82
- padding-left: var(--spacing-4);
81
+ margin-top: var(--spacing-12);
82
+ padding-left: var(--spacing-16);
83
83
  padding-right: var(--spacing-6);
84
- gap: var(--spacing-2);
84
+ gap: var(--spacing-8);
85
85
  width: 100%;
86
86
  }
87
87
 
@@ -124,13 +124,13 @@
124
124
 
125
125
  .time-picker-scroll-area {
126
126
  height: 280px;
127
- padding-right: var(--spacing-4)
127
+ padding-right: var(--spacing-16)
128
128
  }
129
129
 
130
130
  .time-picker {
131
131
  display: flex;
132
- padding-left: var(--spacing-1);
133
- padding-right: var(--spacing-1);
132
+ padding-left: var(--spacing-4);
133
+ padding-right: var(--spacing-4);
134
134
  flex-direction: column;
135
135
  gap: 0.5rem;
136
136
  }
package/src/widgets/datepicker/datepicker.stories.tsx CHANGED
@@ -12,7 +12,7 @@ export const Default = (): React.JSX.Element => {
12
12
  }
13
13
 
14
14
  return (
15
- <div style={{ maxWidth: '270px', margin: '0 auto' }}>
15
+ <div style={{ maxWidth: '270px', margin: '2rem auto' }}>
16
16
  <DatePicker
17
17
  onDateChange={handleDateChange}
18
18
  id="published_on"
package/src/widgets/datepicker/datepicker.tsx CHANGED
@@ -132,7 +132,7 @@ export function DatePicker({
132
132
 
133
133
  return (
134
134
  <div className={cx(styles.container, containerClassName)}>
135
- <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-2)' }}>
135
+ <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-8)' }}>
136
136
  <Input
137
137
  id={id}
138
138
  label={label}
@@ -278,7 +278,7 @@ export function DatePicker({
278
278
  Today
279
279
  </Button>
280
280
  </div>
281
- <div style={{ display: 'flex', gap: 'var(--spacing-3)' }}>
281
+ <div style={{ display: 'flex', gap: 'var(--spacing-12)' }}>
282
282
  <Button
283
283
  size="sm"
284
284
  intent="noeffect"
package/src/widgets/drawer/drawer.module.css CHANGED
@@ -71,9 +71,9 @@
71
71
  display: flex;
72
72
  align-items: center;
73
73
  justify-content: flex-end;
74
- padding-top: var(--spacing-3);
75
- padding-left: var(--spacing-6);
76
- padding-right: var(--spacing-6);
74
+ padding-top: var(--spacing-12);
75
+ padding-left: var(--spacing-12);
76
+ padding-right: var(--spacing-12);
77
77
  padding-bottom: 0;
78
78
  max-width: 100%;
79
79
  }
@@ -84,8 +84,8 @@
84
84
  justify-content: space-between;
85
85
  gap: var(--gap-3);
86
86
  padding-top: 0;
87
- padding-left: var(--spacing-6);
88
- padding-right: var(--spacing-6);
87
+ padding-left: var(--spacing-12);
88
+ padding-right: var(--spacing-12);
89
89
  max-width: 100%;
90
90
  }
91
91
 
@@ -95,7 +95,7 @@
95
95
  }
96
96
 
97
97
  .drawer-content {
98
- padding: var(--spacing-6);
98
+ padding: var(--spacing-12);
99
99
  }
100
100
 
101
101
  @keyframes slideIn {
package/src/widgets/modal/modal.module.css CHANGED
@@ -28,8 +28,8 @@
28
28
  bottom: 0;
29
29
  background-color: var(--surface-panel);
30
30
  border: 1px solid var(--border-color);
31
- margin-left: var(--spacing-2);
32
- margin-right: var(--spacing-2);
31
+ margin-left: var(--spacing-8);
32
+ margin-right: var(--spacing-8);
33
33
  }
34
34
 
35
35
  @media screen and (min-width: 40rem) {
@@ -46,9 +46,9 @@
46
46
  align-items: center;
47
47
  justify-content: space-between;
48
48
  gap: var(--gap-3);
49
- padding-left: var(--spacing-6);
50
- padding-right: var(--spacing-6);
51
- padding-top: var(--spacing-5);
49
+ padding-left: var(--spacing-16);
50
+ padding-right: var(--spacing-16);
51
+ padding-top: var(--spacing-20);
52
52
  max-width: 100%;
53
53
  }
54
54
 
@@ -62,9 +62,9 @@
62
62
  flex: 1;
63
63
  flex-direction: column;
64
64
  gap: var(--gap-3);
65
- padding-left: var(--spacing-6);
66
- padding-right: var(--spacing-6);
67
- padding-bottom: var(--spacing-3);
65
+ padding-left: var(--spacing-16);
66
+ padding-right: var(--spacing-16);
67
+ padding-bottom: var(--spacing-12);
68
68
  max-width: 100%;
69
69
  }
70
70
 
@@ -73,9 +73,9 @@
73
73
  align-items: center;
74
74
  justify-content: flex-end;
75
75
  gap: var(--gap-3);
76
- padding-top: var(--spacing-2);
77
- padding-bottom: var(--spacing-5);
78
- padding-left: var(--spacing-6);
79
- padding-right: var(--spacing-6);
76
+ padding-top: var(--spacing-8);
77
+ padding-bottom: var(--spacing-20);
78
+ padding-left: var(--spacing-16);
79
+ padding-right: var(--spacing-16);
80
80
  }
81
81
  }