@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/widgets/modal/modal.stories.tsx CHANGED
@@ -16,15 +16,8 @@ export default {
16
16
  export const Default = (): React.JSX.Element => {
17
17
  const { onDismiss, onOpen, isOpen, setIsOpen } = useModal()
18
18
 
19
- const whiteIcon = `
20
- .white-icon {
21
- fill: white;
22
- }
23
- `
24
-
25
19
  return (
26
- <>
27
- <style>{whiteIcon}</style>
20
+ <div style={{ margin: '2rem 0' }}>
28
21
  <Button
29
22
  onClick={() => {
30
23
  setIsOpen(true)
@@ -66,6 +59,6 @@ export const Default = (): React.JSX.Element => {
66
59
  </Modal.Actions>
67
60
  </Modal.Container>
68
61
  </Modal>
69
- </>
62
+ </div>
70
63
  )
71
64
  }
package/src/widgets/search/search.stories.tsx CHANGED
@@ -11,7 +11,7 @@ export default {
11
11
 
12
12
  export const Default = (): React.JSX.Element => {
13
13
  return (
14
- <div style={{ maxWidth: '600px', margin: '0 auto' }}>
14
+ <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
15
15
  <Search variant="underlined" />
16
16
  </div>
17
17
  )
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/widgets/timeline/timeline.stories.tsx CHANGED
@@ -19,7 +19,7 @@ export const Default = (): React.JSX.Element => (
19
19
  <div
20
20
  style={{
21
21
  maxWidth: '400px',
22
- marginBottom: '24px',
22
+ margin: '2rem 0 24px',
23
23
  display: 'flex',
24
24
  justifyContent: 'center',
25
25
  }}
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
- }