@czi-sds/mcp 0.3.0 → 0.4.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 (145) hide show
  1. package/data/component-props/Accordion.json +14 -15
  2. package/data/component-props/Alert.json +2 -44
  3. package/data/component-props/Autocomplete.json +14 -32
  4. package/data/component-props/Banner.json +11 -12
  5. package/data/component-props/Button.json +17 -82
  6. package/data/component-props/ButtonDropdown.json +26 -0
  7. package/data/component-props/ButtonIcon.json +4 -60
  8. package/data/component-props/ButtonToggle.json +2 -66
  9. package/data/component-props/Callout.json +11 -65
  10. package/data/component-props/CellBasic.json +28 -56
  11. package/data/component-props/CellComponent.json +4 -32
  12. package/data/component-props/CellHeader.json +13 -49
  13. package/data/component-props/ComplexFilter.json +24 -4
  14. package/data/component-props/ContentCard.json +66 -2
  15. package/data/component-props/Dialog.json +26 -0
  16. package/data/component-props/Dropdown.json +29 -67
  17. package/data/component-props/DropdownMenu.json +16 -56
  18. package/data/component-props/HeatmapChart.json +6 -87
  19. package/data/component-props/Icon.json +3 -8
  20. package/data/component-props/InputCheckbox.json +5 -53
  21. package/data/component-props/InputDropdown.json +11 -33
  22. package/data/component-props/InputRadio.json +5 -53
  23. package/data/component-props/InputSearch.json +6 -70
  24. package/data/component-props/InputSlider.json +21 -35
  25. package/data/component-props/InputText.json +7 -63
  26. package/data/component-props/InputToggle.json +5 -54
  27. package/data/component-props/Link.json +18 -0
  28. package/data/component-props/LoadingIndicator.json +1 -2
  29. package/data/component-props/MenuItem.json +11 -41
  30. package/data/component-props/MenuSelect.json +4 -67
  31. package/data/component-props/NavigationFooter.json +0 -8
  32. package/data/component-props/NavigationHeader.json +14 -65
  33. package/data/component-props/NavigationJumpTo.json +0 -40
  34. package/data/component-props/Notification.json +14 -58
  35. package/data/component-props/Pagination.json +8 -33
  36. package/data/component-props/Panel.json +4 -54
  37. package/data/component-props/SegmentedControl.json +0 -55
  38. package/data/component-props/TableRow.json +10 -38
  39. package/data/component-props/Tabs.json +18 -0
  40. package/data/component-props/Tag.json +10 -56
  41. package/data/component-props/TagFilter.json +0 -47
  42. package/data/component-props/Tooltip.json +12 -61
  43. package/data/component-props/TooltipCondensed.json +18 -0
  44. package/data/component-props/TooltipTable.json +0 -4
  45. package/data/zeroheight-exports/Accordion.md +167 -125
  46. package/data/zeroheight-exports/Banner.md +71 -48
  47. package/data/zeroheight-exports/Borders.md +72 -73
  48. package/data/zeroheight-exports/Buttons.md +375 -330
  49. package/data/zeroheight-exports/Callout.md +138 -116
  50. package/data/zeroheight-exports/Colors.md +254 -255
  51. package/data/zeroheight-exports/Content-Card.md +36 -37
  52. package/data/zeroheight-exports/Contributing-to-SDS.md +34 -35
  53. package/data/zeroheight-exports/Control-Inputs.md +289 -234
  54. package/data/zeroheight-exports/Corners.md +63 -64
  55. package/data/zeroheight-exports/Cover-page.md +0 -1
  56. package/data/zeroheight-exports/Dialog.md +237 -179
  57. package/data/zeroheight-exports/Downloads.md +10 -11
  58. package/data/zeroheight-exports/Drop-Shadows.md +40 -41
  59. package/data/zeroheight-exports/Dropdown-Input.md +158 -127
  60. package/data/zeroheight-exports/Dropdown-Menu.md +814 -718
  61. package/data/zeroheight-exports/Element-Status-Tracker.md +191 -192
  62. package/data/zeroheight-exports/Field-Inputs.md +149 -130
  63. package/data/zeroheight-exports/Filters.md +114 -94
  64. package/data/zeroheight-exports/Getting-Started.md +112 -249
  65. package/data/zeroheight-exports/Hero.md +43 -37
  66. package/data/zeroheight-exports/Icons.md +205 -206
  67. package/data/zeroheight-exports/Intent.md +6 -7
  68. package/data/zeroheight-exports/Introduction-to-Bases.md +8 -9
  69. package/data/zeroheight-exports/Introduction-to-Cells.md +11 -12
  70. package/data/zeroheight-exports/Introduction-to-DNA.md +8 -9
  71. package/data/zeroheight-exports/Introduction-to-Genes.md +8 -9
  72. package/data/zeroheight-exports/Introduction.md +52 -53
  73. package/data/zeroheight-exports/Link.md +50 -37
  74. package/data/zeroheight-exports/Lists.md +78 -63
  75. package/data/zeroheight-exports/Loading-Indicator.md +7 -8
  76. package/data/zeroheight-exports/Navigation.md +163 -142
  77. package/data/zeroheight-exports/Notification.md +132 -102
  78. package/data/zeroheight-exports/Panel.md +231 -115
  79. package/data/zeroheight-exports/Responsive-Design.md +35 -32
  80. package/data/zeroheight-exports/Search-Input.md +9 -10
  81. package/data/zeroheight-exports/Search.md +87 -104
  82. package/data/zeroheight-exports/Segmented-Control.md +68 -45
  83. package/data/zeroheight-exports/Spacing.md +210 -211
  84. package/data/zeroheight-exports/Table.md +414 -302
  85. package/data/zeroheight-exports/Tabs.md +126 -98
  86. package/data/zeroheight-exports/Tags.md +148 -118
  87. package/data/zeroheight-exports/Text-Link.md +32 -33
  88. package/data/zeroheight-exports/Theming.md +48 -29
  89. package/data/zeroheight-exports/Tooltips.md +253 -237
  90. package/data/zeroheight-exports/Typography.md +463 -464
  91. package/dist/stdio.js +44 -132
  92. package/package.json +3 -4
  93. package/data/component-props/Chip.json +0 -73
  94. package/data/component-props/List.json +0 -43
  95. package/data/component-props/Menu.json +0 -48
  96. package/data/component-props/Table.json +0 -26
  97. package/data/component-props-storybook/Accordion-storybook.json +0 -45
  98. package/data/component-props-storybook/Alert-storybook.json +0 -30
  99. package/data/component-props-storybook/Autocomplete-storybook.json +0 -67
  100. package/data/component-props-storybook/Banner-storybook.json +0 -78
  101. package/data/component-props-storybook/Button-storybook.json +0 -115
  102. package/data/component-props-storybook/ButtonDropdown-storybook.json +0 -73
  103. package/data/component-props-storybook/ButtonIcon-storybook.json +0 -60
  104. package/data/component-props-storybook/ButtonToggle-storybook.json +0 -68
  105. package/data/component-props-storybook/Callout-storybook.json +0 -90
  106. package/data/component-props-storybook/CellBasic-storybook.json +0 -138
  107. package/data/component-props-storybook/CellComponent-storybook.json +0 -48
  108. package/data/component-props-storybook/CellHeader-storybook.json +0 -71
  109. package/data/component-props-storybook/Chip-storybook.json +0 -26
  110. package/data/component-props-storybook/ComplexFilter-storybook.json +0 -60
  111. package/data/component-props-storybook/ContentCard-storybook.json +0 -175
  112. package/data/component-props-storybook/Dialog-storybook.json +0 -56
  113. package/data/component-props-storybook/Dropdown-storybook.json +0 -93
  114. package/data/component-props-storybook/DropdownMenu-storybook.json +0 -73
  115. package/data/component-props-storybook/HeatmapChart-storybook.json +0 -55
  116. package/data/component-props-storybook/Icon-storybook.json +0 -75
  117. package/data/component-props-storybook/InputCheckbox-storybook.json +0 -57
  118. package/data/component-props-storybook/InputDropdown-storybook.json +0 -80
  119. package/data/component-props-storybook/InputRadio-storybook.json +0 -56
  120. package/data/component-props-storybook/InputSearch-storybook.json +0 -55
  121. package/data/component-props-storybook/InputSlider-storybook.json +0 -55
  122. package/data/component-props-storybook/InputText-storybook.json +0 -59
  123. package/data/component-props-storybook/InputToggle-storybook.json +0 -42
  124. package/data/component-props-storybook/Link-storybook.json +0 -50
  125. package/data/component-props-storybook/List-storybook.json +0 -26
  126. package/data/component-props-storybook/LoadingIndicator-storybook.json +0 -34
  127. package/data/component-props-storybook/Menu-storybook.json +0 -26
  128. package/data/component-props-storybook/MenuItem-storybook.json +0 -74
  129. package/data/component-props-storybook/MenuSelect-storybook.json +0 -38
  130. package/data/component-props-storybook/NavigationFooter-storybook.json +0 -67
  131. package/data/component-props-storybook/NavigationHeader-storybook.json +0 -115
  132. package/data/component-props-storybook/NavigationJumpTo-storybook.json +0 -41
  133. package/data/component-props-storybook/Notification-storybook.json +0 -89
  134. package/data/component-props-storybook/Pagination-storybook.json +0 -50
  135. package/data/component-props-storybook/Panel-storybook.json +0 -52
  136. package/data/component-props-storybook/SegmentedControl-storybook.json +0 -30
  137. package/data/component-props-storybook/Table-storybook.json +0 -26
  138. package/data/component-props-storybook/TableHeader-storybook.json +0 -26
  139. package/data/component-props-storybook/TableRow-storybook.json +0 -62
  140. package/data/component-props-storybook/Tabs-storybook.json +0 -45
  141. package/data/component-props-storybook/Tag-storybook.json +0 -78
  142. package/data/component-props-storybook/TagFilter-storybook.json +0 -30
  143. package/data/component-props-storybook/Tooltip-storybook.json +0 -85
  144. package/data/component-props-storybook/TooltipCondensed-storybook.json +0 -38
  145. package/data/component-props-storybook/TooltipTable-storybook.json +0 -47
package/data/zeroheight-exports/Spacing.md CHANGED
@@ -4,72 +4,72 @@ Spacing variables ensure spacing is consistent throughout the product while stre
4
4
 
5
5
  ### Types of Spacing
6
6
 
7
- | **Visual** | | **Spacing Type** | | **Usage** |
8
- | --- | --- | --- | --- | --- |
9
- | | | Inset Spacing | | Spacing specifically for container padding on items like modals, callout, dropdown menus, etc. |
10
- | | | Inline Spacing | | Margins for spacing on the left or right of elements; standardizing for margins to the right of elements is recommended. |
11
- | | | Stacked Spacing | | Margins for spacing above or below elements; standardizing for margins below elements is recommended. |
7
+ | **Visual** | | **Spacing Type** | | **Usage** |
8
+ | ---------- | --- | ---------------- | --- | ------------------------------------------------------------------------------------------------------------------------ |
9
+ | | | Inset Spacing | | Spacing specifically for container padding on items like modals, callout, dropdown menus, etc. |
10
+ | | | Inline Spacing | | Margins for spacing on the left or right of elements; standardizing for margins to the right of elements is recommended. |
11
+ | | | Stacked Spacing | | Margins for spacing above or below elements; standardizing for margins below elements is recommended. |
12
12
 
13
13
  ### Spacing Sizes
14
14
 
15
- | **Name** | | **Visual** | | **Figma Variable** | | **CSS / SCSS Variables** | | **Value** |
16
- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
17
- | spaceDefault | | | | [none] | | `--sds-space-default` `$sds-space-default` | | `12px` |
18
- | spaceXxxs | | | | `spaceXxxs` | | `--sds-space-xxxs` `$sds-space-xxxs` | | `2px` |
19
- | spaceXxs | | | | `spaceXxs` | | `--sds-space-xxs` `$sds-space-xxs` | | `4px` |
20
- | spaceXs | | | | `spaceXs` | | `--sds-space-xs` `$sds-space-xs` | | `6px` |
21
- | spaceS | | | | `spaceS` | | `--sds-space-s` `$sds-space-s` | | `8px` |
22
- | spaceM | | | | `spaceM` | | `--sds-space-m` `$sds-space-m` | | `12px` |
23
- | spaceL | | | | `spaceL` | | `--sds-space-l` `$sds-space-l` | | `16px` |
24
- | spaceXl | | | | `spaceXl` | | `--sds-space-xl` `$sds-space-xl` | | `24px` |
25
- | spaceXxl | | | | `spaceXxl` | | `--sds-space-xxl` `$sds-space-xxl` | | `40px` |
15
+ | **Name** | | **Visual** | | **Figma Variable** | | **CSS / SCSS Variables** | | **Value** |
16
+ | ------------ | --- | ---------- | --- | ------------------ | --- | ------------------------------------------ | --- | --------- |
17
+ | spaceDefault | | | | [none] | | `--sds-space-default` `$sds-space-default` | | `12px` |
18
+ | spaceXxxs | | | | `spaceXxxs` | | `--sds-space-xxxs` `$sds-space-xxxs` | | `2px` |
19
+ | spaceXxs | | | | `spaceXxs` | | `--sds-space-xxs` `$sds-space-xxs` | | `4px` |
20
+ | spaceXs | | | | `spaceXs` | | `--sds-space-xs` `$sds-space-xs` | | `6px` |
21
+ | spaceS | | | | `spaceS` | | `--sds-space-s` `$sds-space-s` | | `8px` |
22
+ | spaceM | | | | `spaceM` | | `--sds-space-m` `$sds-space-m` | | `12px` |
23
+ | spaceL | | | | `spaceL` | | `--sds-space-l` `$sds-space-l` | | `16px` |
24
+ | spaceXl | | | | `spaceXl` | | `--sds-space-xl` `$sds-space-xl` | | `24px` |
25
+ | spaceXxl | | | | `spaceXxl` | | `--sds-space-xxl` `$sds-space-xxl` | | `40px` |
26
26
 
27
27
  ### Inset Spacing Variables
28
28
 
29
- | **Visual** | | **Value** |
30
- | --- | --- | --- |
31
- | | | `padding: spaceXxl;` |
32
- | | | `padding: spaceXl;` |
33
- | | | `padding: spaceL;` |
34
- | | | `padding: spaceM;` |
35
- | | | `padding: spaceS;` |
36
- | | | `padding: spaceXs;` |
37
- | | | `padding: spaceXxs;` |
38
- | | | `padding: spaceXxxs;` |
29
+ | **Visual** | | **Value** |
30
+ | ---------- | --- | --------------------- |
31
+ | | | `padding: spaceXxl;` |
32
+ | | | `padding: spaceXl;` |
33
+ | | | `padding: spaceL;` |
34
+ | | | `padding: spaceM;` |
35
+ | | | `padding: spaceS;` |
36
+ | | | `padding: spaceXs;` |
37
+ | | | `padding: spaceXxs;` |
38
+ | | | `padding: spaceXxxs;` |
39
39
 
40
40
  ### Inline Spacing Variables
41
41
 
42
- | **Visual** | | **Value** |
43
- | --- | --- | --- |
44
- | | | `margin-right: spaceXxl;` |
45
- | | | `margin-right: spaceXl;` |
46
- | | | `margin-right: spaceL;` |
47
- | | | `margin-right: spaceM;` |
48
- | | | `margin-right: spaceS;` |
49
- | | | `margin-right: spaceXs;` |
50
- | | | `margin-right: spaceXxs;` |
51
- | | | `margin-right: spaceXxxs;` |
42
+ | **Visual** | | **Value** |
43
+ | ---------- | --- | -------------------------- |
44
+ | | | `margin-right: spaceXxl;` |
45
+ | | | `margin-right: spaceXl;` |
46
+ | | | `margin-right: spaceL;` |
47
+ | | | `margin-right: spaceM;` |
48
+ | | | `margin-right: spaceS;` |
49
+ | | | `margin-right: spaceXs;` |
50
+ | | | `margin-right: spaceXxs;` |
51
+ | | | `margin-right: spaceXxxs;` |
52
52
 
53
53
  ### Stacked Spacing Variables
54
54
 
55
- | **Visual** | | **Value** |
56
- | --- | --- | --- |
57
- | | | `margin-bottom: spaceXxl;` |
58
- | | | `margin-bottom: spaceXl;` |
59
- | | | `margin-bottom: spaceL;` |
60
- | | | `margin-bottom: spaceM;` |
61
- | | | `margin-bottom: spaceS;` |
62
- | | | `margin-bottom: spaceXs;` |
63
- | | | `margin-bottom: spaceXxs;` |
64
- | | | `margin-bottom: spaceXxxs;` |
55
+ | **Visual** | | **Value** |
56
+ | ---------- | --- | --------------------------- |
57
+ | | | `margin-bottom: spaceXxl;` |
58
+ | | | `margin-bottom: spaceXl;` |
59
+ | | | `margin-bottom: spaceL;` |
60
+ | | | `margin-bottom: spaceM;` |
61
+ | | | `margin-bottom: spaceS;` |
62
+ | | | `margin-bottom: spaceXs;` |
63
+ | | | `margin-bottom: spaceXxs;` |
64
+ | | | `margin-bottom: spaceXxxs;` |
65
65
 
66
66
  ### Examples
67
67
 
68
- | **Example** | | **Spacing Type** | | **Usage** |
69
- | --- | --- | --- | --- | --- |
70
- | | | Inset Spacing | | Spacing specifically for container padding on items like Dialogs, Callouts, Dropdown Menus, etc. |
71
- | | | Inline Spacing | | Margins for spacing on the left or right of elements; standardizing for margins to the right of elements is recommended. |
72
- | | | Stacked Spacing | | Margins for spacing above or below elements; standardizing for margins below elements is recommended. |
68
+ | **Example** | | **Spacing Type** | | **Usage** |
69
+ | ----------- | --- | ---------------- | --- | ------------------------------------------------------------------------------------------------------------------------ |
70
+ | | | Inset Spacing | | Spacing specifically for container padding on items like Dialogs, Callouts, Dropdown Menus, etc. |
71
+ | | | Inline Spacing | | Margins for spacing on the left or right of elements; standardizing for margins to the right of elements is recommended. |
72
+ | | | Stacked Spacing | | Margins for spacing above or below elements; standardizing for margins below elements is recommended. |
73
73
 
74
74
  ---
75
75
 
@@ -77,78 +77,78 @@ Spacing variables ensure spacing is consistent throughout the product while stre
77
77
 
78
78
  ### Types of Spacing
79
79
 
80
- | **Visual** | | **Spacing Type** | | **Usage** |
81
- | --- | --- | --- | --- | --- |
82
- | | | Inset Spacing | | Spacing specifically for container padding on items like Dialogs, Dropdown Menus, etc. |
83
- | | | Inline Spacing | | Margins for spacing on the left or right of elements; standardizing for margins to the right of elements is recommended. |
84
- | | | Stacked Spacing | | Margins for spacing above or below elements; standardizing for margins below elements is recommended. |
80
+ | **Visual** | | **Spacing Type** | | **Usage** |
81
+ | ---------- | --- | ---------------- | --- | ------------------------------------------------------------------------------------------------------------------------ |
82
+ | | | Inset Spacing | | Spacing specifically for container padding on items like Dialogs, Dropdown Menus, etc. |
83
+ | | | Inline Spacing | | Margins for spacing on the left or right of elements; standardizing for margins to the right of elements is recommended. |
84
+ | | | Stacked Spacing | | Margins for spacing above or below elements; standardizing for margins below elements is recommended. |
85
85
 
86
86
  ### Spacing Sizes
87
87
 
88
- | **Visual** | | **Variable** | | **Value** |
89
- | --- | --- | --- | --- | --- |
90
- | | | `spaceDefault` | | `10px` |
91
- | | | `spaceXxxs` | | `2px` |
92
- | | | `spaceXxs` | | `4px` |
93
- | | | `spaceXs` | | `6px` |
94
- | | | `spaceS` | | `8px` |
95
- | | | `spaceM` | | `10px` |
96
- | | | `spaceL` | | `14px` |
97
- | | | `spaceXl` | | `22px` |
98
- | | | `spaceXxl` | | `38px` |
99
- | | | `spaceXxxl` | | `50px` |
100
- | | | `spaceXxxxl` | | `75px` |
88
+ | **Visual** | | **Variable** | | **Value** |
89
+ | ---------- | --- | -------------- | --- | --------- |
90
+ | | | `spaceDefault` | | `10px` |
91
+ | | | `spaceXxxs` | | `2px` |
92
+ | | | `spaceXxs` | | `4px` |
93
+ | | | `spaceXs` | | `6px` |
94
+ | | | `spaceS` | | `8px` |
95
+ | | | `spaceM` | | `10px` |
96
+ | | | `spaceL` | | `14px` |
97
+ | | | `spaceXl` | | `22px` |
98
+ | | | `spaceXxl` | | `38px` |
99
+ | | | `spaceXxxl` | | `50px` |
100
+ | | | `spaceXxxxl` | | `75px` |
101
101
 
102
102
  ### Inset Spacing Variables
103
103
 
104
- | **Visual** | | **Value** |
105
- | --- | --- | --- |
106
- | | | `padding: spaceXxl;` |
107
- | | | `padding: spaceXl;` |
108
- | | | `padding: spaceL;` |
109
- | | | `padding: spaceM;` |
110
- | | | `padding: spaceS;` |
111
- | | | `padding: spaceXs;` |
112
- | | | `padding: spaceXxs;` |
113
- | | | `padding: spaceXxxs;` |
104
+ | **Visual** | | **Value** |
105
+ | ---------- | --- | --------------------- |
106
+ | | | `padding: spaceXxl;` |
107
+ | | | `padding: spaceXl;` |
108
+ | | | `padding: spaceL;` |
109
+ | | | `padding: spaceM;` |
110
+ | | | `padding: spaceS;` |
111
+ | | | `padding: spaceXs;` |
112
+ | | | `padding: spaceXxs;` |
113
+ | | | `padding: spaceXxxs;` |
114
114
 
115
115
  ### Inline Spacing Variables
116
116
 
117
- | **Visual** | | **Value** |
118
- | --- | --- | --- |
119
- | | | `margin-right: spaceXxxxl;` |
120
- | | | `margin-right: spaceXxxl;` |
121
- | | | `margin-right: spaceXxl;` |
122
- | | | `margin-right: spaceXl;` |
123
- | | | `margin-right: spaceL;` |
124
- | | | `margin-right: spaceM;` |
125
- | | | `margin-right: spaceS;` |
126
- | | | `margin-right: spaceXs;` |
127
- | | | `margin-right: spaceXxs;` |
128
- | | | `margin-right: spaceXxxs;` |
117
+ | **Visual** | | **Value** |
118
+ | ---------- | --- | --------------------------- |
119
+ | | | `margin-right: spaceXxxxl;` |
120
+ | | | `margin-right: spaceXxxl;` |
121
+ | | | `margin-right: spaceXxl;` |
122
+ | | | `margin-right: spaceXl;` |
123
+ | | | `margin-right: spaceL;` |
124
+ | | | `margin-right: spaceM;` |
125
+ | | | `margin-right: spaceS;` |
126
+ | | | `margin-right: spaceXs;` |
127
+ | | | `margin-right: spaceXxs;` |
128
+ | | | `margin-right: spaceXxxs;` |
129
129
 
130
130
  ### Stacked Spacing Variables
131
131
 
132
- | **Visual** | | **Value** |
133
- | --- | --- | --- |
134
- | | | `margin-bottom: spaceXxxxl;` |
135
- | | | `margin-bottom: spaceXxxl;` |
136
- | | | `margin-bottom: spaceXxl;` |
137
- | | | `margin-bottom: spaceXl;` |
138
- | | | `margin-bottom: spaceL;` |
139
- | | | `margin-bottom: spaceM;` |
140
- | | | `margin-bottom: spaceS;` |
141
- | | | `margin-bottom: spaceXs;` |
142
- | | | `margin-bottom: spaceXxs;` |
143
- | | | `margin-bottom: spaceXxxs;` |
132
+ | **Visual** | | **Value** |
133
+ | ---------- | --- | ---------------------------- |
134
+ | | | `margin-bottom: spaceXxxxl;` |
135
+ | | | `margin-bottom: spaceXxxl;` |
136
+ | | | `margin-bottom: spaceXxl;` |
137
+ | | | `margin-bottom: spaceXl;` |
138
+ | | | `margin-bottom: spaceL;` |
139
+ | | | `margin-bottom: spaceM;` |
140
+ | | | `margin-bottom: spaceS;` |
141
+ | | | `margin-bottom: spaceXs;` |
142
+ | | | `margin-bottom: spaceXxs;` |
143
+ | | | `margin-bottom: spaceXxxs;` |
144
144
 
145
145
  ### Examples
146
146
 
147
- | **Example** | | **Spacing Type** | | **Usage** |
148
- | --- | --- | --- | --- | --- |
149
- | | | Inset Spacing | | Spacing specifically for container padding on items like Dialogs, Dropdown Menus, etc. |
150
- | | | Inline Spacing | | Margins for spacing on the left or right of elements; standardizing for margins to the right of elements is recommended. |
151
- | | | Stacked Spacing | | Margins for spacing above or below elements; standardizing for margins below elements is recommended. |
147
+ | **Example** | | **Spacing Type** | | **Usage** |
148
+ | ----------- | --- | ---------------- | --- | ------------------------------------------------------------------------------------------------------------------------ |
149
+ | | | Inset Spacing | | Spacing specifically for container padding on items like Dialogs, Dropdown Menus, etc. |
150
+ | | | Inline Spacing | | Margins for spacing on the left or right of elements; standardizing for margins to the right of elements is recommended. |
151
+ | | | Stacked Spacing | | Margins for spacing above or below elements; standardizing for margins below elements is recommended. |
152
152
 
153
153
  ---
154
154
 
@@ -156,72 +156,72 @@ Spacing variables ensure spacing is consistent throughout the product while stre
156
156
 
157
157
  ### Types of Spacing
158
158
 
159
- | **Visual** | | **Spacing Type** | | **Usage** |
160
- | --- | --- | --- | --- | --- |
161
- | | | Inset Spacing | | Spacing specifically for container padding on items like modals, callout, dropdown menus, etc. |
162
- | | | Inline Spacing | | Margins for spacing on the left or right of elements; standardizing for margins to the right of elements is recommended. |
163
- | | | Stacked Spacing | | Margins for spacing above or below elements; standardizing for margins below elements is recommended. |
159
+ | **Visual** | | **Spacing Type** | | **Usage** |
160
+ | ---------- | --- | ---------------- | --- | ------------------------------------------------------------------------------------------------------------------------ |
161
+ | | | Inset Spacing | | Spacing specifically for container padding on items like modals, callout, dropdown menus, etc. |
162
+ | | | Inline Spacing | | Margins for spacing on the left or right of elements; standardizing for margins to the right of elements is recommended. |
163
+ | | | Stacked Spacing | | Margins for spacing above or below elements; standardizing for margins below elements is recommended. |
164
164
 
165
165
  ### Spacing Sizes
166
166
 
167
- | **Visual** | | **Variable** | | **Value** |
168
- | --- | --- | --- | --- | --- |
169
- | | | `spaceDefault` | | `10px` |
170
- | | | `spaceXxxs` | | `2px` |
171
- | | | `spaceXxs` | | `4px` |
172
- | | | `spaceXs` | | `6px` |
173
- | | | `spaceS` | | `8px` |
174
- | | | `spaceM` | | `10px` |
175
- | | | `spaceL` | | `14px` |
176
- | | | `spaceXl` | | `22px` |
177
- | | | `spaceXxl` | | `38px` |
167
+ | **Visual** | | **Variable** | | **Value** |
168
+ | ---------- | --- | -------------- | --- | --------- |
169
+ | | | `spaceDefault` | | `10px` |
170
+ | | | `spaceXxxs` | | `2px` |
171
+ | | | `spaceXxs` | | `4px` |
172
+ | | | `spaceXs` | | `6px` |
173
+ | | | `spaceS` | | `8px` |
174
+ | | | `spaceM` | | `10px` |
175
+ | | | `spaceL` | | `14px` |
176
+ | | | `spaceXl` | | `22px` |
177
+ | | | `spaceXxl` | | `38px` |
178
178
 
179
179
  ### Inset Spacing Variables
180
180
 
181
- | **Visual** | | **Value** |
182
- | --- | --- | --- |
183
- | | | `padding: spaceXxl;` |
184
- | | | `padding: spaceXl;` |
185
- | | | `padding: spaceL;` |
186
- | | | `padding: spaceM;` |
187
- | | | `padding: spaceS;` |
188
- | | | `padding: spaceXs;` |
189
- | | | `padding: spaceXxs;` |
190
- | | | `padding: spaceXxxs;` |
181
+ | **Visual** | | **Value** |
182
+ | ---------- | --- | --------------------- |
183
+ | | | `padding: spaceXxl;` |
184
+ | | | `padding: spaceXl;` |
185
+ | | | `padding: spaceL;` |
186
+ | | | `padding: spaceM;` |
187
+ | | | `padding: spaceS;` |
188
+ | | | `padding: spaceXs;` |
189
+ | | | `padding: spaceXxs;` |
190
+ | | | `padding: spaceXxxs;` |
191
191
 
192
192
  ### Inline Spacing Variables
193
193
 
194
- | **Visual** | | **Value** |
195
- | --- | --- | --- |
196
- | | | `margin-right: spaceXxl;` |
197
- | | | `margin-right: spaceXl;` |
198
- | | | `margin-right: spaceL;` |
199
- | | | `margin-right: spaceM;` |
200
- | | | `margin-right: spaceS;` |
201
- | | | `margin-right: spaceXs;` |
202
- | | | `margin-right: spaceXxs;` |
203
- | | | `margin-right: spaceXxxs;` |
194
+ | **Visual** | | **Value** |
195
+ | ---------- | --- | -------------------------- |
196
+ | | | `margin-right: spaceXxl;` |
197
+ | | | `margin-right: spaceXl;` |
198
+ | | | `margin-right: spaceL;` |
199
+ | | | `margin-right: spaceM;` |
200
+ | | | `margin-right: spaceS;` |
201
+ | | | `margin-right: spaceXs;` |
202
+ | | | `margin-right: spaceXxs;` |
203
+ | | | `margin-right: spaceXxxs;` |
204
204
 
205
205
  ### Stacked Spacing Variables
206
206
 
207
- | **Visual** | | **Value** |
208
- | --- | --- | --- |
209
- | | | `margin-bottom: spaceXxl;` |
210
- | | | `margin-bottom: spaceXl;` |
211
- | | | `margin-bottom: spaceL;` |
212
- | | | `margin-bottom: spaceM;` |
213
- | | | `margin-bottom: spaceS;` |
214
- | | | `margin-bottom: spaceXs;` |
215
- | | | `margin-bottom: spaceXxs;` |
216
- | | | `margin-bottom: spaceXxxs;` |
207
+ | **Visual** | | **Value** |
208
+ | ---------- | --- | --------------------------- |
209
+ | | | `margin-bottom: spaceXxl;` |
210
+ | | | `margin-bottom: spaceXl;` |
211
+ | | | `margin-bottom: spaceL;` |
212
+ | | | `margin-bottom: spaceM;` |
213
+ | | | `margin-bottom: spaceS;` |
214
+ | | | `margin-bottom: spaceXs;` |
215
+ | | | `margin-bottom: spaceXxs;` |
216
+ | | | `margin-bottom: spaceXxxs;` |
217
217
 
218
218
  ### Examples
219
219
 
220
- | **Example** | | **Spacing Type** | | **Usage** |
221
- | --- | --- | --- | --- | --- |
222
- | | | Inset Spacing | | Spacing specifically for container padding on items like modals, callout, dropdown menus, etc. |
223
- | | | Inline Spacing | | Margins for spacing on the left or right of elements; standardizing for margins to the right of elements is recommended. |
224
- | | | Stacked Spacing | | Margins for spacing above or below elements; standardizing for margins below elements is recommended. |
220
+ | **Example** | | **Spacing Type** | | **Usage** |
221
+ | ----------- | --- | ---------------- | --- | ------------------------------------------------------------------------------------------------------------------------ |
222
+ | | | Inset Spacing | | Spacing specifically for container padding on items like modals, callout, dropdown menus, etc. |
223
+ | | | Inline Spacing | | Margins for spacing on the left or right of elements; standardizing for margins to the right of elements is recommended. |
224
+ | | | Stacked Spacing | | Margins for spacing above or below elements; standardizing for margins below elements is recommended. |
225
225
 
226
226
  ---
227
227
 
@@ -229,70 +229,69 @@ Spacing variables ensure spacing is consistent throughout the product while stre
229
229
 
230
230
  ### Types of Spacing
231
231
 
232
- | **Visual** | | **Spacing Type** | | **Usage** |
233
- | --- | --- | --- | --- | --- |
234
- | | | Inset Spacing | | Spacing specifically for container padding on items like modals, callout, dropdown menus, etc. |
235
- | | | Inline Spacing | | Margins for spacing on the left or right of elements; standardizing for margins to the right of elements is recommended. |
236
- | | | Stacked Spacing | | Margins for spacing above or below elements; standardizing for margins below elements is recommended. |
232
+ | **Visual** | | **Spacing Type** | | **Usage** |
233
+ | ---------- | --- | ---------------- | --- | ------------------------------------------------------------------------------------------------------------------------ |
234
+ | | | Inset Spacing | | Spacing specifically for container padding on items like modals, callout, dropdown menus, etc. |
235
+ | | | Inline Spacing | | Margins for spacing on the left or right of elements; standardizing for margins to the right of elements is recommended. |
236
+ | | | Stacked Spacing | | Margins for spacing above or below elements; standardizing for margins below elements is recommended. |
237
237
 
238
238
  ### Spacing Sizes
239
239
 
240
- | **Visual** | | **Variable** | | **Value** |
241
- | --- | --- | --- | --- | --- |
242
- | | | `spaceDefault` | | `10px` |
243
- | | | `spaceXxxs` | | `2px` |
244
- | | | `spaceXxs` | | `4px` |
245
- | | | `spaceXs` | | `6px` |
246
- | | | `spaceS` | | `8px` |
247
- | | | `spaceM` | | `10px` |
248
- | | | `spaceL` | | `14px` |
249
- | | | `spaceXl` | | `22px` |
250
- | | | `spaceXxl` | | `38px` |
240
+ | **Visual** | | **Variable** | | **Value** |
241
+ | ---------- | --- | -------------- | --- | --------- |
242
+ | | | `spaceDefault` | | `10px` |
243
+ | | | `spaceXxxs` | | `2px` |
244
+ | | | `spaceXxs` | | `4px` |
245
+ | | | `spaceXs` | | `6px` |
246
+ | | | `spaceS` | | `8px` |
247
+ | | | `spaceM` | | `10px` |
248
+ | | | `spaceL` | | `14px` |
249
+ | | | `spaceXl` | | `22px` |
250
+ | | | `spaceXxl` | | `38px` |
251
251
 
252
252
  ### Inset Spacing Variables
253
253
 
254
- | **Visual** | | **Value** |
255
- | --- | --- | --- |
256
- | | | `padding: spaceXxl;` |
257
- | | | `padding: spaceXl;` |
258
- | | | `padding: spaceL;` |
259
- | | | `padding: spaceM;` |
260
- | | | `padding: spaceS;` |
261
- | | | `padding: spaceXs;` |
262
- | | | `padding: spaceXxs;` |
263
- | | | `padding: spaceXxxs;` |
254
+ | **Visual** | | **Value** |
255
+ | ---------- | --- | --------------------- |
256
+ | | | `padding: spaceXxl;` |
257
+ | | | `padding: spaceXl;` |
258
+ | | | `padding: spaceL;` |
259
+ | | | `padding: spaceM;` |
260
+ | | | `padding: spaceS;` |
261
+ | | | `padding: spaceXs;` |
262
+ | | | `padding: spaceXxs;` |
263
+ | | | `padding: spaceXxxs;` |
264
264
 
265
265
  ### Inline Spacing Variables
266
266
 
267
- | **Visual** | | **Value** |
268
- | --- | --- | --- |
269
- | | | `margin-right: spaceXxl;` |
270
- | | | `margin-right: spaceXl;` |
271
- | | | `margin-right: spaceL;` |
272
- | | | `margin-right: spaceM;` |
273
- | | | `margin-right: spaceS;` |
274
- | | | `margin-right: spaceXs;` |
275
- | | | `margin-right: spaceXxs;` |
276
- | | | `margin-right: spaceXxxs;` |
267
+ | **Visual** | | **Value** |
268
+ | ---------- | --- | -------------------------- |
269
+ | | | `margin-right: spaceXxl;` |
270
+ | | | `margin-right: spaceXl;` |
271
+ | | | `margin-right: spaceL;` |
272
+ | | | `margin-right: spaceM;` |
273
+ | | | `margin-right: spaceS;` |
274
+ | | | `margin-right: spaceXs;` |
275
+ | | | `margin-right: spaceXxs;` |
276
+ | | | `margin-right: spaceXxxs;` |
277
277
 
278
278
  ### Stacked Spacing Variables
279
279
 
280
- | **Visual** | | **Value** |
281
- | --- | --- | --- |
282
- | | | `margin-bottom: spaceXxl;` |
283
- | | | `margin-bottom: spaceXl;` |
284
- | | | `margin-bottom: spaceL;` |
285
- | | | `margin-bottom: spaceM;` |
286
- | | | `margin-bottom: spaceS;` |
287
- | | | `margin-bottom: spaceXs;` |
288
- | | | `margin-bottom: spaceXxs;` |
289
- | | | `margin-bottom: spaceXxxs;` |
280
+ | **Visual** | | **Value** |
281
+ | ---------- | --- | --------------------------- |
282
+ | | | `margin-bottom: spaceXxl;` |
283
+ | | | `margin-bottom: spaceXl;` |
284
+ | | | `margin-bottom: spaceL;` |
285
+ | | | `margin-bottom: spaceM;` |
286
+ | | | `margin-bottom: spaceS;` |
287
+ | | | `margin-bottom: spaceXs;` |
288
+ | | | `margin-bottom: spaceXxs;` |
289
+ | | | `margin-bottom: spaceXxxs;` |
290
290
 
291
291
  ### Examples
292
292
 
293
- | **Example** | | **Spacing Type** | | **Usage** |
294
- | --- | --- | --- | --- | --- |
295
- | | | Inset Spacing | | Spacing specifically for container padding on items like modals, callout, dropdown menus, etc. |
296
- | | | Inline Spacing | | Margins for spacing on the left or right of elements; standardizing for margins to the right of elements is recommended. |
297
- | | | Stacked Spacing | | Margins for spacing above or below elements; standardizing for margins below elements is recommended. |
298
-
293
+ | **Example** | | **Spacing Type** | | **Usage** |
294
+ | ----------- | --- | ---------------- | --- | ------------------------------------------------------------------------------------------------------------------------ |
295
+ | | | Inset Spacing | | Spacing specifically for container padding on items like modals, callout, dropdown menus, etc. |
296
+ | | | Inline Spacing | | Margins for spacing on the left or right of elements; standardizing for margins to the right of elements is recommended. |
297
+ | | | Stacked Spacing | | Margins for spacing above or below elements; standardizing for margins below elements is recommended. |