@czi-sds/mcp 0.2.2 → 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 (147) 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-cache.json +5195 -0
  46. package/data/zeroheight-exports/Accordion.md +717 -0
  47. package/data/zeroheight-exports/Banner.md +599 -0
  48. package/data/zeroheight-exports/Borders.md +117 -0
  49. package/data/zeroheight-exports/Buttons.md +2305 -0
  50. package/data/zeroheight-exports/Callout.md +778 -0
  51. package/data/zeroheight-exports/Colors.md +632 -0
  52. package/data/zeroheight-exports/Content-Card.md +161 -0
  53. package/data/zeroheight-exports/Contributing-to-SDS.md +98 -0
  54. package/data/zeroheight-exports/Control-Inputs.md +2121 -0
  55. package/data/zeroheight-exports/Corners.md +111 -0
  56. package/data/zeroheight-exports/Cover-page.md +3 -0
  57. package/data/zeroheight-exports/Dialog.md +1191 -0
  58. package/data/zeroheight-exports/Downloads.md +120 -0
  59. package/data/zeroheight-exports/Drop-Shadows.md +79 -0
  60. package/data/zeroheight-exports/Dropdown-Input.md +1180 -0
  61. package/data/zeroheight-exports/Dropdown-Menu.md +3883 -0
  62. package/data/zeroheight-exports/Element-Status-Tracker.md +267 -0
  63. package/data/zeroheight-exports/Field-Inputs.md +984 -0
  64. package/data/zeroheight-exports/Filters.md +888 -0
  65. package/data/zeroheight-exports/Getting-Started.md +1159 -0
  66. package/data/zeroheight-exports/Hero.md +262 -0
  67. package/data/zeroheight-exports/Icons.md +431 -0
  68. package/data/zeroheight-exports/Intent.md +46 -0
  69. package/data/zeroheight-exports/Introduction-to-Bases.md +35 -0
  70. package/data/zeroheight-exports/Introduction-to-Cells.md +35 -0
  71. package/data/zeroheight-exports/Introduction-to-DNA.md +35 -0
  72. package/data/zeroheight-exports/Introduction-to-Genes.md +35 -0
  73. package/data/zeroheight-exports/Introduction.md +115 -0
  74. package/data/zeroheight-exports/Link.md +386 -0
  75. package/data/zeroheight-exports/Lists.md +632 -0
  76. package/data/zeroheight-exports/Loading-Indicator.md +37 -0
  77. package/data/zeroheight-exports/Navigation.md +874 -0
  78. package/data/zeroheight-exports/Notification.md +888 -0
  79. package/data/zeroheight-exports/Panel.md +978 -0
  80. package/data/zeroheight-exports/README.md +124 -0
  81. package/data/zeroheight-exports/Responsive-Design.md +278 -0
  82. package/data/zeroheight-exports/Search-Input.md +53 -0
  83. package/data/zeroheight-exports/Search.md +592 -0
  84. package/data/zeroheight-exports/Segmented-Control.md +584 -0
  85. package/data/zeroheight-exports/Spacing.md +297 -0
  86. package/data/zeroheight-exports/Table.md +4944 -0
  87. package/data/zeroheight-exports/Tabs.md +801 -0
  88. package/data/zeroheight-exports/Tags.md +1055 -0
  89. package/data/zeroheight-exports/Text-Link.md +184 -0
  90. package/data/zeroheight-exports/Theming.md +332 -0
  91. package/data/zeroheight-exports/Tooltips.md +1580 -0
  92. package/data/zeroheight-exports/Typography.md +768 -0
  93. package/dist/stdio.js +193 -93
  94. package/package.json +4 -4
  95. package/data/component-props/Chip.json +0 -73
  96. package/data/component-props/List.json +0 -43
  97. package/data/component-props/Menu.json +0 -48
  98. package/data/component-props/Table.json +0 -26
  99. package/data/component-props-storybook/Accordion-storybook.json +0 -45
  100. package/data/component-props-storybook/Alert-storybook.json +0 -30
  101. package/data/component-props-storybook/Autocomplete-storybook.json +0 -67
  102. package/data/component-props-storybook/Banner-storybook.json +0 -78
  103. package/data/component-props-storybook/Button-storybook.json +0 -115
  104. package/data/component-props-storybook/ButtonDropdown-storybook.json +0 -73
  105. package/data/component-props-storybook/ButtonIcon-storybook.json +0 -60
  106. package/data/component-props-storybook/ButtonToggle-storybook.json +0 -68
  107. package/data/component-props-storybook/Callout-storybook.json +0 -90
  108. package/data/component-props-storybook/CellBasic-storybook.json +0 -138
  109. package/data/component-props-storybook/CellComponent-storybook.json +0 -48
  110. package/data/component-props-storybook/CellHeader-storybook.json +0 -71
  111. package/data/component-props-storybook/Chip-storybook.json +0 -26
  112. package/data/component-props-storybook/ComplexFilter-storybook.json +0 -60
  113. package/data/component-props-storybook/ContentCard-storybook.json +0 -175
  114. package/data/component-props-storybook/Dialog-storybook.json +0 -56
  115. package/data/component-props-storybook/Dropdown-storybook.json +0 -93
  116. package/data/component-props-storybook/DropdownMenu-storybook.json +0 -73
  117. package/data/component-props-storybook/HeatmapChart-storybook.json +0 -55
  118. package/data/component-props-storybook/Icon-storybook.json +0 -75
  119. package/data/component-props-storybook/InputCheckbox-storybook.json +0 -57
  120. package/data/component-props-storybook/InputDropdown-storybook.json +0 -80
  121. package/data/component-props-storybook/InputRadio-storybook.json +0 -56
  122. package/data/component-props-storybook/InputSearch-storybook.json +0 -55
  123. package/data/component-props-storybook/InputSlider-storybook.json +0 -55
  124. package/data/component-props-storybook/InputText-storybook.json +0 -59
  125. package/data/component-props-storybook/InputToggle-storybook.json +0 -42
  126. package/data/component-props-storybook/Link-storybook.json +0 -50
  127. package/data/component-props-storybook/List-storybook.json +0 -26
  128. package/data/component-props-storybook/LoadingIndicator-storybook.json +0 -34
  129. package/data/component-props-storybook/Menu-storybook.json +0 -26
  130. package/data/component-props-storybook/MenuItem-storybook.json +0 -74
  131. package/data/component-props-storybook/MenuSelect-storybook.json +0 -38
  132. package/data/component-props-storybook/NavigationFooter-storybook.json +0 -67
  133. package/data/component-props-storybook/NavigationHeader-storybook.json +0 -115
  134. package/data/component-props-storybook/NavigationJumpTo-storybook.json +0 -41
  135. package/data/component-props-storybook/Notification-storybook.json +0 -89
  136. package/data/component-props-storybook/Pagination-storybook.json +0 -50
  137. package/data/component-props-storybook/Panel-storybook.json +0 -52
  138. package/data/component-props-storybook/SegmentedControl-storybook.json +0 -30
  139. package/data/component-props-storybook/Table-storybook.json +0 -26
  140. package/data/component-props-storybook/TableHeader-storybook.json +0 -26
  141. package/data/component-props-storybook/TableRow-storybook.json +0 -62
  142. package/data/component-props-storybook/Tabs-storybook.json +0 -45
  143. package/data/component-props-storybook/Tag-storybook.json +0 -78
  144. package/data/component-props-storybook/TagFilter-storybook.json +0 -30
  145. package/data/component-props-storybook/Tooltip-storybook.json +0 -85
  146. package/data/component-props-storybook/TooltipCondensed-storybook.json +0 -38
  147. package/data/component-props-storybook/TooltipTable-storybook.json +0 -47
package/data/zeroheight-exports/Spacing.md ADDED
@@ -0,0 +1,297 @@
1
+ # Spacing
2
+
3
+ Spacing variables ensure spacing is consistent throughout the product while streamlining design and development time.
4
+
5
+ ### Types of Spacing
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. |
12
+
13
+ ### Spacing Sizes
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` |
26
+
27
+ ### Inset Spacing Variables
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;` |
39
+
40
+ ### Inline Spacing Variables
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;` |
52
+
53
+ ### Stacked Spacing Variables
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;` |
65
+
66
+ ### Examples
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. |
73
+
74
+ ---
75
+
76
+ Spacing variables ensure spacing is consistent throughout the product while streamlining design and development time.
77
+
78
+ ### Types of Spacing
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. |
85
+
86
+ ### Spacing Sizes
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` |
101
+
102
+ ### Inset Spacing Variables
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;` |
114
+
115
+ ### Inline Spacing Variables
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;` |
129
+
130
+ ### Stacked Spacing Variables
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;` |
144
+
145
+ ### Examples
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. |
152
+
153
+ ---
154
+
155
+ Spacing variables ensure spacing is consistent throughout the product while streamlining design and development time.
156
+
157
+ ### Types of Spacing
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. |
164
+
165
+ ### Spacing Sizes
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` |
178
+
179
+ ### Inset Spacing Variables
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;` |
191
+
192
+ ### Inline Spacing Variables
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;` |
204
+
205
+ ### Stacked Spacing Variables
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;` |
217
+
218
+ ### Examples
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. |
225
+
226
+ ---
227
+
228
+ Spacing variables ensure spacing is consistent throughout the product while streamlining design and development time.
229
+
230
+ ### Types of Spacing
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. |
237
+
238
+ ### Spacing Sizes
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` |
251
+
252
+ ### Inset Spacing Variables
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;` |
264
+
265
+ ### Inline Spacing Variables
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;` |
277
+
278
+ ### Stacked Spacing Variables
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;` |
290
+
291
+ ### Examples
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. |