@czi-sds/mcp 0.15.0 → 0.17.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 (164) hide show
  1. package/README.md +2 -1
  2. package/data/component-docs/Accordion.md +291 -0
  3. package/data/component-docs/Autocomplete.md +525 -0
  4. package/data/component-docs/Banner.md +231 -0
  5. package/data/component-docs/Button.md +224 -0
  6. package/data/component-docs/ButtonDropdown.md +256 -0
  7. package/data/component-docs/ButtonGroup.md +320 -0
  8. package/data/component-docs/ButtonToggle.md +397 -0
  9. package/data/component-docs/Callout.md +268 -0
  10. package/data/component-docs/CellBasic.md +122 -0
  11. package/data/component-docs/CellComponent.md +63 -0
  12. package/data/component-docs/CellHeader.md +128 -0
  13. package/data/component-docs/ComplexFilter.md +294 -0
  14. package/data/component-docs/ContentCard.md +406 -0
  15. package/data/component-docs/Dialog.md +651 -0
  16. package/data/component-docs/Dropdown.md +155 -0
  17. package/data/component-docs/DropdownMenu.md +949 -0
  18. package/data/component-docs/HeatmapChart.md +782 -0
  19. package/data/component-docs/Hero.md +363 -0
  20. package/data/component-docs/Icon.md +283 -0
  21. package/data/component-docs/InputCheckbox.md +205 -0
  22. package/data/component-docs/InputDropdown.md +482 -0
  23. package/data/component-docs/InputRadio.md +173 -0
  24. package/data/component-docs/InputSearch.md +81 -0
  25. package/data/component-docs/InputSlider.md +189 -0
  26. package/data/component-docs/InputText.md +110 -0
  27. package/data/component-docs/InputToggle.md +141 -0
  28. package/data/component-docs/IntentMessage.md +293 -0
  29. package/data/component-docs/Legend.md +442 -0
  30. package/data/component-docs/Link.md +23 -0
  31. package/data/component-docs/List.md +300 -0
  32. package/data/component-docs/LoadingIndicator.md +198 -0
  33. package/data/component-docs/Menu.md +298 -0
  34. package/data/component-docs/MenuItem.md +100 -0
  35. package/data/component-docs/NavigationFooter.md +165 -0
  36. package/data/component-docs/NavigationHeader.md +500 -0
  37. package/data/component-docs/NavigationJumpTo.md +414 -0
  38. package/data/component-docs/Notification.md +288 -0
  39. package/data/component-docs/Pagination.md +67 -0
  40. package/data/component-docs/Panel.md +636 -0
  41. package/data/component-docs/Popover.md +448 -0
  42. package/data/component-docs/PreComposedTable.md +2947 -0
  43. package/data/component-docs/SegmentedControl.md +396 -0
  44. package/data/component-docs/StackedBarChart.md +475 -0
  45. package/data/component-docs/Table.md +2000 -0
  46. package/data/component-docs/TableHeader.md +53 -0
  47. package/data/component-docs/TableRow.md +74 -0
  48. package/data/component-docs/Tabs.md +455 -0
  49. package/data/component-docs/Tag.md +647 -0
  50. package/data/component-docs/TagFilter.md +131 -0
  51. package/data/component-docs/Tooltip.md +561 -0
  52. package/data/component-docs/TooltipCondensed.md +203 -0
  53. package/data/component-docs/TooltipTable.md +145 -0
  54. package/data/component-docs/index.json +262 -0
  55. package/data/component-list.json +2 -5
  56. package/data/component-props/Accordion.json +31 -11
  57. package/data/component-props/Alert.json +3 -3
  58. package/data/component-props/Autocomplete.json +150 -15
  59. package/data/component-props/Banner.json +31 -17
  60. package/data/component-props/Button.json +45 -20
  61. package/data/component-props/ButtonDropdown.json +36 -17
  62. package/data/component-props/ButtonDropdownLegacy.json +11 -11
  63. package/data/component-props/ButtonGroup.json +32 -11
  64. package/data/component-props/ButtonIcon.json +10 -10
  65. package/data/component-props/ButtonLegacy.json +19 -19
  66. package/data/component-props/ButtonToggle.json +32 -19
  67. package/data/component-props/ButtonToggleLegacy.json +11 -11
  68. package/data/component-props/Callout.json +58 -17
  69. package/data/component-props/CellBasic.json +94 -41
  70. package/data/component-props/CellComponent.json +23 -7
  71. package/data/component-props/CellHeader.json +62 -19
  72. package/data/component-props/ComplexFilter.json +52 -21
  73. package/data/component-props/ContentCard.json +70 -47
  74. package/data/component-props/Dialog.json +47 -14
  75. package/data/component-props/Dropdown.json +67 -31
  76. package/data/component-props/DropdownMenu.json +128 -23
  77. package/data/component-props/HeatmapChart.json +88 -12
  78. package/data/component-props/Hero.json +80 -39
  79. package/data/component-props/Icon.json +20 -9
  80. package/data/component-props/InputCheckbox.json +36 -14
  81. package/data/component-props/InputDropdown.json +75 -27
  82. package/data/component-props/InputRadio.json +31 -13
  83. package/data/component-props/InputSearch.json +41 -18
  84. package/data/component-props/InputSlider.json +46 -19
  85. package/data/component-props/InputText.json +26 -19
  86. package/data/component-props/InputToggle.json +26 -9
  87. package/data/component-props/IntentMessage.json +38 -9
  88. package/data/component-props/Link.json +13 -7
  89. package/data/component-props/LoadingIndicator.json +11 -3
  90. package/data/component-props/MenuItem.json +38 -19
  91. package/data/component-props/MenuSelect.json +8 -8
  92. package/data/component-props/NavigationFooter.json +49 -19
  93. package/data/component-props/NavigationHeader.json +150 -37
  94. package/data/component-props/NavigationJumpTo.json +33 -7
  95. package/data/component-props/Notification.json +39 -21
  96. package/data/component-props/Pagination.json +39 -11
  97. package/data/component-props/Panel.json +62 -9
  98. package/data/component-props/Popover.json +80 -7
  99. package/data/component-props/PreComposedTable.json +99 -27
  100. package/data/component-props/SegmentedControl.json +42 -3
  101. package/data/component-props/StackedBarChart.json +116 -42
  102. package/data/component-props/TableRow.json +38 -19
  103. package/data/component-props/Tabs.json +66 -9
  104. package/data/component-props/Tag.json +34 -17
  105. package/data/component-props/TagFilter.json +10 -3
  106. package/data/component-props/Tooltip.json +49 -18
  107. package/data/component-props/TooltipCondensed.json +18 -9
  108. package/data/component-props/TooltipTable.json +17 -7
  109. package/data/resources/{zeroheight-rules.md → documentation-rules.md} +43 -30
  110. package/data/resources/figma-rules.md +2 -2
  111. package/dist/stdio.js +483 -780
  112. package/package.json +12 -8
  113. package/data/component-props/ButtonDropdownV2.json +0 -34
  114. package/data/component-props/ButtonNew.json +0 -47
  115. package/data/component-props/ButtonToggleV2.json +0 -44
  116. package/data/component-props/ButtonV2.json +0 -43
  117. package/data/zeroheight-cache.json +0 -10259
  118. package/data/zeroheight-exports/Accordion.md +0 -774
  119. package/data/zeroheight-exports/Banner.md +0 -691
  120. package/data/zeroheight-exports/Borders.md +0 -117
  121. package/data/zeroheight-exports/Buttons.md +0 -1854
  122. package/data/zeroheight-exports/Callout.md +0 -931
  123. package/data/zeroheight-exports/Colors.md +0 -1755
  124. package/data/zeroheight-exports/Content-Card.md +0 -309
  125. package/data/zeroheight-exports/Contributing-to-SDS.md +0 -98
  126. package/data/zeroheight-exports/Control-Inputs.md +0 -2818
  127. package/data/zeroheight-exports/Corners.md +0 -104
  128. package/data/zeroheight-exports/Cover-page.md +0 -3
  129. package/data/zeroheight-exports/Dialog.md +0 -1367
  130. package/data/zeroheight-exports/Downloads.md +0 -236
  131. package/data/zeroheight-exports/Drop-Shadows.md +0 -79
  132. package/data/zeroheight-exports/Dropdown-Input.md +0 -1776
  133. package/data/zeroheight-exports/Dropdown-Menus.md +0 -913
  134. package/data/zeroheight-exports/Element-Status-Tracker.md +0 -267
  135. package/data/zeroheight-exports/Field-Inputs.md +0 -1405
  136. package/data/zeroheight-exports/Filters.md +0 -1111
  137. package/data/zeroheight-exports/Getting-Started.md +0 -1157
  138. package/data/zeroheight-exports/Hero.md +0 -414
  139. package/data/zeroheight-exports/Icons.md +0 -2067
  140. package/data/zeroheight-exports/Intent.md +0 -86
  141. package/data/zeroheight-exports/Introduction-to-Bases.md +0 -35
  142. package/data/zeroheight-exports/Introduction-to-Cells.md +0 -35
  143. package/data/zeroheight-exports/Introduction-to-DNA.md +0 -35
  144. package/data/zeroheight-exports/Introduction-to-Genes.md +0 -35
  145. package/data/zeroheight-exports/Introduction.md +0 -115
  146. package/data/zeroheight-exports/Link.md +0 -432
  147. package/data/zeroheight-exports/Lists.md +0 -986
  148. package/data/zeroheight-exports/Loading-Indicator.md +0 -41
  149. package/data/zeroheight-exports/Navigation.md +0 -1190
  150. package/data/zeroheight-exports/Notification.md +0 -1038
  151. package/data/zeroheight-exports/Panel.md +0 -1030
  152. package/data/zeroheight-exports/README.md +0 -122
  153. package/data/zeroheight-exports/Responsive-Design.md +0 -330
  154. package/data/zeroheight-exports/Search-Input.md +0 -91
  155. package/data/zeroheight-exports/Search.md +0 -822
  156. package/data/zeroheight-exports/Segmented-Control.md +0 -609
  157. package/data/zeroheight-exports/Spacing.md +0 -297
  158. package/data/zeroheight-exports/Table.md +0 -5345
  159. package/data/zeroheight-exports/Tabs.md +0 -1324
  160. package/data/zeroheight-exports/Tags.md +0 -1545
  161. package/data/zeroheight-exports/Text-Link.md +0 -268
  162. package/data/zeroheight-exports/Theming.md +0 -362
  163. package/data/zeroheight-exports/Tooltips.md +0 -2015
  164. package/data/zeroheight-exports/Typography.md +0 -800
@@ -1,297 +0,0 @@
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. |