@infonomic/uikit 3.8.0 → 3.9.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 (53) 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/widgets/datepicker/datepicker.js +2 -2
  9. package/dist/widgets/datepicker/datepicker_module.css +13 -13
  10. package/dist/widgets/drawer/drawer_module.css +6 -6
  11. package/dist/widgets/modal/modal_module.css +12 -12
  12. package/dist/widgets/timeline/timeline_module.css +7 -7
  13. package/package.json +1 -1
  14. package/src/components/accordion/accordion.stories.tsx +2 -2
  15. package/src/components/avatar/avatar.stories.tsx +1 -1
  16. package/src/components/badge/badge.stories.tsx +1 -1
  17. package/src/components/button/button-group.stories.tsx +1 -1
  18. package/src/components/button/button-intents.stories.tsx +1 -1
  19. package/src/components/button/button-variants.stories.tsx +1 -1
  20. package/src/components/button/control-buttons.stories.tsx +2 -2
  21. package/src/components/button/icon-button.stories.tsx +2 -2
  22. package/src/components/card/card.stories.tsx +2 -2
  23. package/src/components/container/container.stories.tsx +2 -8
  24. package/src/components/dropdown/dropdown.module.css +1 -1
  25. package/src/components/forms/calendar.module.css +12 -58
  26. package/src/components/forms/radio-group.module.css +2 -2
  27. package/src/components/notifications/alert.module.css +15 -15
  28. package/src/components/notifications/alert.stories.tsx +1 -1
  29. package/src/components/table/table.module.css +2 -2
  30. package/src/components/tabs/tabs.module.css +7 -5
  31. package/src/components/tabs/tabs.stories.tsx +1 -1
  32. package/src/loaders/loaders.stories.tsx +1 -1
  33. package/src/styles/base/base.css +1 -0
  34. package/src/styles/base/size.css +24 -0
  35. package/src/styles/base/spacing.css +20 -17
  36. package/src/styles/functional/borders.css +23 -0
  37. package/src/styles/functional/colors.css +51 -94
  38. package/src/styles/functional/functional.css +3 -0
  39. package/src/styles/functional/grid-flex.css +11 -11
  40. package/src/styles/functional/surfaces.css +115 -0
  41. package/src/styles/functional/typography.css +44 -0
  42. package/src/styles/theme/autofill.css +14 -5
  43. package/src/styles/theme/defaults.css +75 -0
  44. package/src/styles/theme/scrollers.css +4 -2
  45. package/src/styles/theme/theme.css +15 -130
  46. package/src/styles/theme/theme.stories.tsx +1 -1
  47. package/src/styles/utils/utility-classes.css +190 -58
  48. package/src/widgets/datepicker/datepicker.module.css +13 -13
  49. package/src/widgets/datepicker/datepicker.tsx +2 -2
  50. package/src/widgets/drawer/drawer.module.css +6 -6
  51. package/src/widgets/modal/modal.module.css +12 -12
  52. package/src/widgets/timeline/timeline.module.css +7 -7
  53. package/src/styles/theme/typography.css +0 -26
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.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
  }
package/src/widgets/timeline/timeline.module.css CHANGED
@@ -2,13 +2,13 @@
2
2
 
3
3
  @layer infonomic-components {
4
4
  .timeline {
5
- margin-left: var(--spacing-2);
5
+ margin-left: var(--spacing-8);
6
6
  }
7
7
 
8
8
  .timeline-root {
9
9
  position: relative;
10
10
  list-style: none;
11
- margin-left: var(--spacing-2);
11
+ margin-left: var(--spacing-8);
12
12
  padding-left: var(--spacing-8);
13
13
  border-left-width: var(--border-width-thin);
14
14
  border-left-color: var(--border-color);
@@ -16,7 +16,7 @@
16
16
  }
17
17
 
18
18
  .timeline-item {
19
- margin: 0 0 var(--spacing-6) 0;
19
+ margin: 0 0 var(--spacing-16) var(--spacing-20);
20
20
  }
21
21
 
22
22
  /* 'absolute block flex items-center justify-center w-[36px] h-[36px] rounded-full -mt-[3px] sm:mt-0 -left-[18px] border-[6px] bg-secondary-600 dark:bg-secondary-900 border-gray-50 dark:border-canvas-600', */
@@ -53,8 +53,8 @@
53
53
  /* 'block mt-2 mb-2 text-[0.9em] font-medium leading-none text-gray-900 dark:text-gray-100' */
54
54
  .timeline-date {
55
55
  display: block;
56
- margin-top: var(--spacing-2);
57
- margin-bottom: var(--spacing-2);
56
+ margin-top: var(--spacing-8);
57
+ margin-bottom: var(--spacing-8);
58
58
  font-size: 0.9em;
59
59
  font-weight: var(--font-weight-medium);
60
60
  line-height: 0;
@@ -64,13 +64,13 @@
64
64
  /* '[&_p]:m-0 [&_p]:mb-4 [&_p]:sm:m-0 [&_p]:sm:mb-4 text-lg font-normal text-gray-900 dark:text-gray-300' */
65
65
  .timeline-content {
66
66
  margin: 0;
67
- margin-bottom: var(--spacing-4);
67
+ margin-bottom: var(--spacing-16);
68
68
  font-size: 1.125rem;
69
69
  font-weight: var(--font-weight-normal);
70
70
 
71
71
  & p {
72
72
  margin: 0;
73
- margin-bottom: var(--spacing-4);
73
+ margin-bottom: var(--spacing-16);
74
74
  }
75
75
  }
76
76
 
package/src/styles/theme/typography.css DELETED
@@ -1,26 +0,0 @@
1
- /* Simple headings spec if the optional typography layer is not imported */
2
- @layer infonomic-theme {
3
- h1 {
4
- font-size: 1.75rem;
5
- font-weight: 600;
6
- line-height: 1.125;
7
- }
8
-
9
- h2 {
10
- font-size: 1.5rem;
11
- font-weight: 600;
12
- line-height: 1.125;
13
- }
14
-
15
- h3 {
16
- font-size: 1.25rem;
17
- font-weight: 600;
18
- line-height: 1.1;
19
- }
20
-
21
- h4 {
22
- font-size: 1rem;
23
- font-weight: 600;
24
- line-height: 1.1;
25
- }
26
- }