@infonomic/uikit 3.7.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 (89) hide show
  1. package/dist/components/button/button-group_module.css +1 -1
  2. package/dist/components/container/container_module.css +8 -8
  3. package/dist/components/dropdown/dropdown.js +1 -1
  4. package/dist/components/dropdown/dropdown_module.css +1 -1
  5. package/dist/components/forms/calendar_module.css +13 -46
  6. package/dist/components/forms/radio-group_module.css +2 -2
  7. package/dist/components/notifications/alert_module.css +15 -15
  8. package/dist/components/notifications/toast_module.css +1 -1
  9. package/dist/components/pager/pagination_module.css +1 -1
  10. package/dist/components/table/table_module.css +2 -2
  11. package/dist/components/tabs/tabs_module.css +4 -5
  12. package/dist/icons/icon-element.d.ts.map +1 -1
  13. package/dist/icons/icon-element.js +2 -1
  14. package/dist/icons/icons.module.js +2 -0
  15. package/dist/icons/icons_module.css +7 -0
  16. package/dist/styles/styles.css +1 -1
  17. package/dist/styles/typography.css +1 -1
  18. package/dist/widgets/datepicker/datepicker.js +2 -2
  19. package/dist/widgets/datepicker/datepicker_module.css +13 -13
  20. package/dist/widgets/drawer/drawer_module.css +7 -7
  21. package/dist/widgets/modal/modal_module.css +13 -13
  22. package/dist/widgets/timeline/timeline_module.css +7 -7
  23. package/package.json +1 -1
  24. package/src/components/accordion/accordion.stories.tsx +2 -2
  25. package/src/components/avatar/avatar.stories.tsx +1 -1
  26. package/src/components/badge/badge.stories.tsx +1 -1
  27. package/src/components/button/button-group.module.css +1 -1
  28. package/src/components/button/button-group.stories.tsx +1 -1
  29. package/src/components/button/button-intents.stories.tsx +1 -1
  30. package/src/components/button/button-variants.stories.tsx +1 -1
  31. package/src/components/button/control-buttons.stories.tsx +2 -2
  32. package/src/components/button/icon-button.stories.tsx +2 -2
  33. package/src/components/card/card.stories.tsx +2 -2
  34. package/src/components/container/container.module.css +9 -8
  35. package/src/components/container/container.stories.tsx +2 -8
  36. package/src/components/dropdown/dropdown.module.css +1 -1
  37. package/src/components/dropdown/dropdown.stories.tsx +1 -1
  38. package/src/components/dropdown/dropdown.tsx +1 -1
  39. package/src/components/forms/calendar.module.css +13 -59
  40. package/src/components/forms/radio-group.module.css +2 -2
  41. package/src/components/notifications/alert.module.css +15 -15
  42. package/src/components/notifications/alert.stories.tsx +1 -1
  43. package/src/components/notifications/toast.module.css +1 -1
  44. package/src/components/pager/pagination.module.css +1 -1
  45. package/src/components/table/table.module.css +2 -2
  46. package/src/components/tabs/tabs.module.css +7 -5
  47. package/src/components/tabs/tabs.stories.tsx +1 -1
  48. package/src/icons/icon-element.tsx +3 -1
  49. package/src/icons/icons.module.css +7 -0
  50. package/src/loaders/loaders.stories.tsx +1 -1
  51. package/src/styles/base/base.css +12 -2
  52. package/src/styles/base/borders.css +30 -0
  53. package/src/styles/base/breakpoints.css +15 -0
  54. package/src/styles/base/opacity.css +12 -0
  55. package/src/styles/base/shadows.css +13 -0
  56. package/src/styles/base/size.css +24 -0
  57. package/src/styles/base/spacing.css +24 -0
  58. package/src/styles/base/transitions.css +7 -0
  59. package/src/styles/base/typography.css +47 -0
  60. package/src/styles/base/z-index.css +12 -0
  61. package/src/styles/components/components.css +1 -8
  62. package/src/styles/functional/borders.css +23 -0
  63. package/src/styles/functional/colors.css +51 -94
  64. package/src/styles/functional/functional.css +5 -1
  65. package/src/styles/functional/grid-flex.css +52 -0
  66. package/src/styles/functional/surfaces.css +115 -0
  67. package/src/styles/functional/typography.css +44 -0
  68. package/src/styles/theme/autofill.css +14 -5
  69. package/src/styles/theme/defaults.css +75 -0
  70. package/src/styles/theme/scrollers.css +4 -2
  71. package/src/styles/theme/theme.css +15 -130
  72. package/src/styles/theme/theme.stories.tsx +1 -1
  73. package/src/styles/typography/prose.css +2 -2
  74. package/src/styles/utils/utility-classes.css +202 -70
  75. package/src/widgets/datepicker/datepicker.module.css +13 -13
  76. package/src/widgets/datepicker/datepicker.tsx +2 -2
  77. package/src/widgets/drawer/drawer.module.css +7 -7
  78. package/src/widgets/modal/modal.module.css +13 -13
  79. package/src/widgets/timeline/timeline.module.css +7 -7
  80. package/src/styles/base/vars.css +0 -189
  81. package/src/styles/components/card.css +0 -20
  82. package/src/styles/components/checkbox.css +0 -55
  83. package/src/styles/components/directional-button.css +0 -92
  84. package/src/styles/components/dropdown.css +0 -19
  85. package/src/styles/components/icon-element.css +0 -10
  86. package/src/styles/components/list-checkbox.css +0 -60
  87. package/src/styles/components/popover.css +0 -15
  88. package/src/styles/components/toast.css +0 -18
  89. package/src/styles/theme/typography.css +0 -26
@@ -8,7 +8,7 @@
8
8
  display: flex;
9
9
  }
10
10
 
11
- @media screen and (min-width: 640px) {
11
+ @media screen and (min-width: 40rem) {
12
12
  .button-group-uqvOi8 {
13
13
  flex-direction: row;
14
14
  }
@@ -3,26 +3,26 @@
3
3
  @layer infonomic-components {
4
4
  .container-tSpizY {
5
5
  width: 100%;
6
- max-width: 960px;
6
+ max-width: 60rem;
7
7
  margin: 0 auto;
8
- padding: 0 16px;
8
+ padding: 0 1rem;
9
9
  }
10
10
 
11
- @media (min-width: 1050px) {
11
+ @media (min-width: 66rem) {
12
12
  .container-tSpizY {
13
- max-width: 1024px;
13
+ max-width: 64rem;
14
14
  }
15
15
  }
16
16
 
17
- @media (min-width: 1230px) {
17
+ @media (min-width: 77rem) {
18
18
  .container-tSpizY {
19
- max-width: 1190px;
19
+ max-width: 74.375rem;
20
20
  }
21
21
  }
22
22
 
23
- @media (min-width: 1500px) {
23
+ @media (min-width: 94rem) {
24
24
  .container-tSpizY {
25
- max-width: 1400px;
25
+ max-width: 87.5rem;
26
26
  }
27
27
  }
28
28
  }
@@ -64,7 +64,7 @@ function Sub({ children, ...rest }) {
64
64
  }
65
65
  const SubContent = ({ ref, className, children, ...rest })=>/*#__PURE__*/ jsx(DropdownMenu.SubContent, {
66
66
  ref: ref,
67
- className: classnames('dropdown-menu-subcontent', className),
67
+ className: classnames('dropdown-menu-subcontent', dropdown_module["dropdown-subcontent"], className),
68
68
  ...rest,
69
69
  children: children
70
70
  });
@@ -55,7 +55,7 @@
55
55
  background-color: var(--surface-panel-border);
56
56
  width: 90%;
57
57
  margin: 0 auto;
58
- margin: var(--spacing-1) 0;
58
+ margin: var(--spacing-4) 0;
59
59
  border-top-width: var(--border-width-thin);
60
60
  border-top-color: var(--surface-panel-border);
61
61
  border-top-style: var(--border-style-solid);
@@ -2,11 +2,11 @@
2
2
 
3
3
  @layer infonomic-components {
4
4
  .day-picker-y7Hl7p {
5
- padding: var(--spacing-3);
5
+ padding: var(--spacing-12);
6
6
  }
7
7
 
8
8
  .months-b87F7E {
9
- gap: var(--spacing-4);
9
+ gap: var(--spacing-16);
10
10
  flex-direction: column;
11
11
  display: flex;
12
12
  position: relative;
@@ -23,7 +23,7 @@
23
23
  .dropdowns-erBLYh {
24
24
  justify-content: center;
25
25
  align-items: center;
26
- gap: var(--spacing-2);
26
+ gap: var(--spacing-8);
27
27
  width: 100%;
28
28
  display: flex;
29
29
  }
@@ -90,7 +90,7 @@
90
90
  }
91
91
 
92
92
  .footer-QtfvNg {
93
- padding-top: var(--spacing-3);
93
+ padding-top: var(--spacing-12);
94
94
  font-size: .875rem;
95
95
  }
96
96
 
@@ -116,11 +116,11 @@
116
116
  .month-grid-o9jb0q {
117
117
  margin-left: auto;
118
118
  margin-right: auto;
119
- margin-top: var(--spacing-4);
119
+ margin-top: var(--spacing-16);
120
120
  }
121
121
 
122
122
  .week-kpm7YL {
123
- margin-top: var(--spacing-2);
123
+ margin-top: var(--spacing-8);
124
124
  align-items: flex-start;
125
125
  width: max-content;
126
126
  display: flex;
@@ -142,12 +142,12 @@
142
142
  }
143
143
 
144
144
  .today-vDw_Vq > button {
145
- border: solid 1px var(--primary-300);
145
+ border: solid 1px var(--stroke-primary);
146
146
  color: var(--foreground);
147
147
  }
148
148
 
149
149
  .day-iMPvhj > button:hover, .day-selected-zpU4nM > button {
150
- background-color: var(--primary-400);
150
+ background-color: var(--fill-primary-strong);
151
151
  color: #fff;
152
152
  }
153
153
 
@@ -165,17 +165,17 @@
165
165
  }
166
166
 
167
167
  .button-range-ut02cG {
168
- background-color: var(--gray-100);
168
+ background-color: var(--fill-primary-weak);
169
169
  color: var(--foreground);
170
170
  }
171
171
 
172
172
  .button-range-ut02cG > button {
173
- background-color: var(--primary-400);
173
+ background-color: var(--fill-primary-strong);
174
174
  color: #fff;
175
175
  }
176
176
 
177
177
  .button-range-ut02cG > button:hover {
178
- background-color: var(--primary-400);
178
+ background-color: var(--fill-primary-strong);
179
179
  color: var(--foreground);
180
180
  }
181
181
 
@@ -190,7 +190,7 @@
190
190
  }
191
191
 
192
192
  .range-middle-ZVXPRk {
193
- background-color: var(--gray-50);
193
+ background-color: var(--fill-primary-weak);
194
194
  color: var(--foreground);
195
195
  }
196
196
 
@@ -199,7 +199,7 @@
199
199
  background-color: #0000;
200
200
  }
201
201
 
202
- @media (min-width: 640px) {
202
+ @media (min-width: 40rem) {
203
203
  .months-b87F7E {
204
204
  flex-direction: row;
205
205
  }
@@ -219,38 +219,5 @@
219
219
  stroke: var(--primary-200);
220
220
  opacity: .7;
221
221
  }
222
-
223
- .dark .footer-QtfvNg {
224
- color: var(--muted);
225
- }
226
-
227
- .dark .day-iMPvhj > button {
228
- color: var(--foreground);
229
- }
230
-
231
- .dark .day-iMPvhj > button:hover, .dark .day-selected-zpU4nM > button {
232
- background-color: var(--primary-400);
233
- color: var(--foreground);
234
- }
235
-
236
- .dark .today-vDw_Vq > button {
237
- border: solid 1px var(--primary-300);
238
- color: var(--foreground);
239
- }
240
-
241
- .dark .button-range-ut02cG {
242
- background-color: var(--canvas-700);
243
- color: var(--foreground);
244
- }
245
-
246
- .dark .button-range-ut02cG > button, .dark .button-range-ut02cG > button:hover {
247
- background-color: var(--primary-400);
248
- color: var(--foreground);
249
- }
250
-
251
- .dark .range-middle-ZVXPRk, .dark .range-middle-ZVXPRk > button {
252
- background-color: var(--canvas-700);
253
- color: var(--foreground);
254
- }
255
222
  }
256
223
 
@@ -71,14 +71,14 @@
71
71
 
72
72
  .label-ZlWPop {
73
73
  color: var(--foreground);
74
- padding-left: var(--spacing-2);
74
+ padding-left: var(--spacing-8);
75
75
  font-size: 15px;
76
76
  line-height: 1;
77
77
  }
78
78
 
79
79
  .row-zmaQmt .label-ZlWPop {
80
80
  padding-left: 0;
81
- padding-right: var(--spacing-4);
81
+ padding-right: var(--spacing-16);
82
82
  }
83
83
 
84
84
  .primary-NHWfNk {
@@ -49,7 +49,7 @@
49
49
 
50
50
  .header-y_AKgG {
51
51
  width: 100%;
52
- margin-bottom: var(--spacing-2);
52
+ margin-bottom: var(--spacing-8);
53
53
  align-items: start;
54
54
  gap: var(--gap-2);
55
55
  display: flex;
@@ -73,38 +73,38 @@
73
73
  }
74
74
 
75
75
  .primary-Y1uhvt {
76
- --alert-border: var(--primary-300);
77
- --alert-background: oklch(from var(--primary-500) l c h / .1);
76
+ --alert-border: var(--stroke-primary);
77
+ --alert-background: var(--fill-primary-weak);
78
78
  }
79
79
 
80
80
  .secondary-A_6wDq {
81
- --alert-border: var(--secondary-300);
82
- --alert-background: oklch(from var(--secondary-500) l c h / .1);
81
+ --alert-border: var(--stroke-secondary);
82
+ --alert-background: var(--fill-secondary-weak);
83
83
  }
84
84
 
85
85
  .noeffect-4mzRDQ {
86
- --alert-border: var(--gray-300);
87
- --alert-background: oklch(from var(--gray-500) l c h / .1);
86
+ --alert-border: var(--stroke-noeffect);
87
+ --alert-background: var(--fill-noeffect-weak);
88
88
  }
89
89
 
90
90
  .success-FCgDMo {
91
- --alert-border: var(--green-300);
92
- --alert-background: oklch(from var(--green-500) l c h / .1);
91
+ --alert-border: var(--stroke-success);
92
+ --alert-background: var(--fill-success-weak);
93
93
  }
94
94
 
95
95
  .info-KZnWBW {
96
- --alert-border: var(--blue-300);
97
- --alert-background: oklch(from var(--blue-500) l c h / .1);
96
+ --alert-border: var(--stroke-info);
97
+ --alert-background: var(--fill-info-weak);
98
98
  }
99
99
 
100
100
  .warning-UtouDH {
101
- --alert-border: var(--yellow-300);
102
- --alert-background: oklch(from var(--yellow-500) l c h / .1);
101
+ --alert-border: var(--stroke-warning);
102
+ --alert-background: var(--fill-warning-weak);
103
103
  }
104
104
 
105
105
  .danger-QFtDqI {
106
- --alert-border: var(--red-300);
107
- --alert-background: oklch(from var(--red-500) l c h / .1);
106
+ --alert-border: var(--stroke-danger);
107
+ --alert-background: var(--fill-danger-weak);
108
108
  }
109
109
  }
110
110
 
@@ -106,7 +106,7 @@
106
106
  right: 16px;
107
107
  }
108
108
 
109
- @media (min-width: 768px) {
109
+ @media (min-width: 48rem) {
110
110
  .root-dWN7jD.top-right-OsKbVb[data-state="open"], .root-dWN7jD.bottom-right-Nzuhur[data-state="open"] {
111
111
  animation: .15s cubic-bezier(.16, 1, .3, 1) slideInFromRight-G4Hu_M;
112
112
  }
@@ -74,7 +74,7 @@
74
74
  display: none;
75
75
  }
76
76
 
77
- @media (min-width: 640px) {
77
+ @media (min-width: 40rem) {
78
78
  .mobile-toggle-iw4kkx {
79
79
  display: flex;
80
80
  }
@@ -40,13 +40,13 @@
40
40
 
41
41
  .table-heading-cell-gB6ryy {
42
42
  white-space: nowrap;
43
- padding: var(--spacing-2) var(--spacing-2);
43
+ padding: var(--spacing-8) var(--spacing-8);
44
44
  background-color: var(--canvas-50);
45
45
  font-size: .975rem;
46
46
  }
47
47
 
48
48
  .table-cell-VRgkzQ {
49
- padding: var(--spacing-2);
49
+ padding: var(--spacing-8);
50
50
  font-size: var(--font-size-sm);
51
51
  }
52
52
 
@@ -2,8 +2,8 @@
2
2
 
3
3
  @layer infonomic-components {
4
4
  .tabs-root-H5dXfK {
5
- padding: var(--spacing-2);
6
- gap: var(--spacing-1);
5
+ padding: var(--spacing-8);
6
+ gap: var(--spacing-4);
7
7
  border-radius: var(--border-radius-md);
8
8
  border: 1px solid var(--border-color);
9
9
  flex-direction: column;
@@ -14,7 +14,7 @@
14
14
  gap: var(--gap-2);
15
15
  border-radius: var(--border-radius-md);
16
16
  width: 100%;
17
- padding: var(--spacing-1);
17
+ padding: var(--spacing-4);
18
18
  border: 1px solid var(--border-color);
19
19
  align-items: center;
20
20
  display: flex;
@@ -33,11 +33,10 @@
33
33
 
34
34
  .tabs-trigger-l7pFgX:focus {
35
35
  position: relative;
36
- box-shadow: 0 0 0 2px #000;
37
36
  }
38
37
 
39
38
  .tabs-content-d2NTGs {
40
- margin-top: var(--spacing-2);
39
+ margin-top: var(--spacing-8);
41
40
  outline: none;
42
41
  padding: 6px;
43
42
  }
@@ -1 +1 @@
1
- {"version":3,"file":"icon-element.d.ts","sourceRoot":"","sources":["../../src/icons/icon-element.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACnE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,KAAG,KAAK,CAAC,GAAG,CAAC,OAkB/D,CAAA"}
1
+ {"version":3,"file":"icon-element.d.ts","sourceRoot":"","sources":["../../src/icons/icon-element.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACnE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,KAAG,KAAK,CAAC,GAAG,CAAC,OAkB/D,CAAA"}
@@ -1,4 +1,5 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
+ import icons_module from "./icons.module.js";
2
3
  import classnames from "classnames";
3
4
  const IconElement = (props)=>{
4
5
  const { className, children, width = '22px', height = '22px', menuItem = false, ...rest } = props;
@@ -11,7 +12,7 @@ const IconElement = (props)=>{
11
12
  justifyContent: 'center',
12
13
  marginRight: null != menuItem && menuItem ? '1.2rem' : '0'
13
14
  },
14
- className: classnames('component--icon-element-root', className),
15
+ className: classnames(icons_module["element-root"], className),
15
16
  ...rest,
16
17
  children: children
17
18
  });
@@ -1,5 +1,7 @@
1
1
  import "./icons_module.css";
2
2
  const icons_module = {
3
+ "element-root": "element-root-UxROLs",
4
+ elementRoot: "element-root-UxROLs",
3
5
  "stroke-none": "stroke-none-xQ3ypG",
4
6
  strokeNone: "stroke-none-xQ3ypG",
5
7
  "stroke-current": "stroke-current-BBkZuD",
@@ -1,6 +1,13 @@
1
1
  @layer infonomic-base, infonomic-utilities, infonomic-theme;
2
2
 
3
3
  @layer infonomic-components {
4
+ .element-root-UxROLs svg {
5
+ max-width: 100%;
6
+ max-height: 100%;
7
+ margin: auto;
8
+ display: block;
9
+ }
10
+
4
11
  .stroke-none-xQ3ypG {
5
12
  stroke: none;
6
13
  }