@sanity/ui 4.2.0 → 5.0.0-alpha.10

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 (339) hide show
  1. package/README.md +194 -28
  2. package/bin/sanity-ui.js +14 -0
  3. package/dist/_chunks-es/LazyRefractor.js +20 -0
  4. package/dist/_chunks-es/LazyRefractor.js.map +1 -0
  5. package/dist/cli/checks.js +148 -0
  6. package/dist/cli/config.js +23 -0
  7. package/dist/cli/detect.js +181 -0
  8. package/dist/cli/doctor.js +49 -0
  9. package/dist/cli/index.js +69 -0
  10. package/dist/cli/init.js +189 -0
  11. package/dist/cli/install.js +79 -0
  12. package/dist/cli/log.js +66 -0
  13. package/dist/cli/selfPackage.js +11 -0
  14. package/dist/cli/styles.js +185 -0
  15. package/dist/cli/test-utils.js +8 -0
  16. package/dist/cli/tsconfig.js +236 -0
  17. package/dist/cli/types.js +1 -0
  18. package/dist/cli/versions.js +45 -0
  19. package/dist/index.d.ts +1203 -1469
  20. package/dist/index.js +2123 -1989
  21. package/dist/index.js.map +1 -1
  22. package/dist/polyfills.d.ts +1 -0
  23. package/dist/polyfills.js +5 -0
  24. package/dist/polyfills.js.map +1 -0
  25. package/dist/styles.css +1 -547
  26. package/package.json +57 -58
  27. package/src/cli/checks.test.ts +38 -0
  28. package/src/cli/checks.ts +200 -0
  29. package/src/cli/config.ts +44 -0
  30. package/src/cli/detect.test.ts +191 -0
  31. package/src/cli/detect.ts +205 -0
  32. package/src/cli/doctor.test.ts +52 -0
  33. package/src/cli/doctor.ts +65 -0
  34. package/src/cli/index.ts +77 -0
  35. package/src/cli/init.ts +225 -0
  36. package/src/cli/install.test.ts +52 -0
  37. package/src/cli/install.ts +108 -0
  38. package/src/cli/log.ts +79 -0
  39. package/src/cli/selfPackage.ts +14 -0
  40. package/src/cli/styles.test.ts +130 -0
  41. package/src/cli/styles.ts +205 -0
  42. package/src/cli/test-utils.ts +10 -0
  43. package/src/cli/tsconfig.test.ts +174 -0
  44. package/src/cli/tsconfig.ts +282 -0
  45. package/src/cli/types.ts +77 -0
  46. package/src/cli/versions.test.ts +35 -0
  47. package/src/cli/versions.ts +41 -0
  48. package/src/components/badge/Badge.tsx +53 -0
  49. package/src/components/badge/badge.css +6 -0
  50. package/src/components/badge/badge.props.ts +31 -0
  51. package/src/components/box/Box.tsx +30 -0
  52. package/src/components/box/box.css +4 -0
  53. package/src/components/box/box.props.ts +29 -0
  54. package/src/components/button/Button.tsx +78 -0
  55. package/src/components/button/button.css +72 -0
  56. package/src/components/button/button.props.ts +122 -0
  57. package/src/components/card/Card.tsx +31 -0
  58. package/src/components/card/card.css +4 -0
  59. package/src/components/card/card.props.ts +58 -0
  60. package/src/components/checkbox/Checkbox.tsx +64 -0
  61. package/src/components/checkbox/checkbox.css +100 -0
  62. package/src/components/checkbox/checkbox.props.ts +33 -0
  63. package/src/components/code/Code.tsx +38 -0
  64. package/src/components/code/LazyRefractor.tsx +9 -0
  65. package/src/components/code/code.css +40 -0
  66. package/src/components/code/code.props.ts +44 -0
  67. package/src/components/container/Container.tsx +30 -0
  68. package/src/components/container/container.css +4 -0
  69. package/src/components/container/container.props.ts +28 -0
  70. package/src/components/dialog/Dialog.tsx +139 -0
  71. package/src/components/dialog/dialog.css +49 -0
  72. package/src/components/dialog/dialog.props.ts +45 -0
  73. package/src/components/divider/Divider.tsx +23 -0
  74. package/src/components/divider/divider.props.ts +9 -0
  75. package/src/components/eyebrow/Eyebrow.tsx +54 -0
  76. package/src/components/eyebrow/eyebrow.css +11 -0
  77. package/src/components/eyebrow/eyebrow.props.ts +28 -0
  78. package/src/components/flex/Flex.tsx +30 -0
  79. package/src/components/flex/flex.css +4 -0
  80. package/src/components/flex/flex.props.ts +33 -0
  81. package/src/components/grid/Grid.tsx +30 -0
  82. package/src/components/grid/grid.css +4 -0
  83. package/src/components/grid/grid.props.ts +33 -0
  84. package/src/components/h-stack/HStack.tsx +34 -0
  85. package/src/components/h-stack/hStack.props.ts +17 -0
  86. package/src/components/heading/Heading.tsx +54 -0
  87. package/src/components/heading/heading.css +9 -0
  88. package/src/components/heading/heading.props.ts +31 -0
  89. package/src/components/icon/Icon.tsx +24 -0
  90. package/src/components/icon/icon.css +17 -0
  91. package/src/components/icon/icon.props.ts +35 -0
  92. package/src/components/icon-button/IconButton.tsx +32 -0
  93. package/src/components/icon-button/iconButton.props.ts +31 -0
  94. package/src/components/index.css +28 -0
  95. package/src/components/indicator/Indicator.tsx +42 -0
  96. package/src/components/indicator/indicator.css +4 -0
  97. package/src/components/indicator/indicator.props.ts +24 -0
  98. package/src/components/indicator-stack/IndicatorStack.tsx +31 -0
  99. package/src/components/indicator-stack/indicator-stack.css +7 -0
  100. package/src/components/indicator-stack/indicatorStack.props.ts +15 -0
  101. package/src/components/inline/Inline.tsx +38 -0
  102. package/src/components/inline/inline.css +4 -0
  103. package/src/components/inline/inline.props.ts +100 -0
  104. package/src/components/label/Label.tsx +34 -0
  105. package/src/components/label/label.css +3 -0
  106. package/src/components/label/label.props.ts +25 -0
  107. package/src/components/link/Link.tsx +29 -0
  108. package/src/components/link/link.css +12 -0
  109. package/src/components/link/link.props.ts +23 -0
  110. package/src/components/list/List.tsx +167 -0
  111. package/src/components/list/list.css +25 -0
  112. package/src/components/list/list.props.ts +130 -0
  113. package/src/components/popover/Popover.tsx +85 -0
  114. package/src/components/popover/popover.css +21 -0
  115. package/src/components/popover/popover.props.ts +38 -0
  116. package/src/components/press-area/PressArea.tsx +29 -0
  117. package/src/components/press-area/press-area.css +22 -0
  118. package/src/components/press-area/pressArea.props.ts +16 -0
  119. package/src/components/radio/Radio.tsx +48 -0
  120. package/src/components/radio/radio.css +97 -0
  121. package/src/components/radio/radio.props.ts +25 -0
  122. package/src/components/skip-to-content/SkipToContent.tsx +35 -0
  123. package/src/components/skip-to-content/skip-to-content.css +9 -0
  124. package/src/components/skip-to-content/skipToContent.props.ts +25 -0
  125. package/src/components/spinner/Spinner.tsx +28 -0
  126. package/src/components/spinner/spinner.css +10 -0
  127. package/src/components/spinner/spinner.props.ts +19 -0
  128. package/src/components/switch/Switch.tsx +48 -0
  129. package/src/components/switch/switch.css +119 -0
  130. package/src/components/switch/switch.props.ts +25 -0
  131. package/src/components/text/Text.tsx +53 -0
  132. package/src/components/text/text.css +9 -0
  133. package/src/components/text/text.props.ts +28 -0
  134. package/src/components/tooltip/Tooltip.tsx +97 -0
  135. package/src/components/tooltip/tooltip.css +31 -0
  136. package/src/components/tooltip/tooltip.props.ts +36 -0
  137. package/src/components/tooltip-group/TooltipGroup.tsx +64 -0
  138. package/src/components/tooltip-group/tooltipGroup.props.ts +15 -0
  139. package/src/components/v-stack/VStack.tsx +32 -0
  140. package/src/components/v-stack/vStack.props.ts +17 -0
  141. package/src/components/visually-hidden/VisuallyHidden.tsx +29 -0
  142. package/src/components/visually-hidden/visually-hidden.css +9 -0
  143. package/src/components/visually-hidden/visuallyHidden.props.ts +23 -0
  144. package/src/css/classes/dynamic/flex-child.css +5 -0
  145. package/src/css/classes/dynamic/grid-child.css +8 -0
  146. package/src/css/classes/dynamic/grid-parent.css +6 -0
  147. package/src/css/classes/dynamic/height.css +5 -0
  148. package/src/css/classes/dynamic/index.css +7 -0
  149. package/src/css/classes/dynamic/line-clamp.css +5 -0
  150. package/src/css/classes/dynamic/readme.md +3 -0
  151. package/src/css/classes/dynamic/width.css +7 -0
  152. package/src/css/classes/dynamic/z-index.css +3 -0
  153. package/src/css/classes/generic/display.css +10 -0
  154. package/src/css/classes/generic/flex.css +24 -0
  155. package/src/css/classes/generic/grid.css +7 -0
  156. package/src/css/classes/generic/index.css +7 -0
  157. package/src/css/classes/generic/overflow.css +19 -0
  158. package/src/css/classes/generic/placement.css +202 -0
  159. package/src/css/classes/generic/position.css +7 -0
  160. package/src/css/classes/generic/readme.md +3 -0
  161. package/src/css/classes/generic/text-align.css +5 -0
  162. package/src/css/classes/index.css +4 -0
  163. package/src/css/classes/local/animation.css +4 -0
  164. package/src/css/classes/local/border.css +20 -0
  165. package/src/css/classes/local/index.css +6 -0
  166. package/src/css/classes/local/readme.md +3 -0
  167. package/src/css/classes/local/text-overflow.css +5 -0
  168. package/src/css/classes/local/text-trim.css +45 -0
  169. package/src/css/classes/local/tone.css +75 -0
  170. package/src/css/classes/local/top-anchor.css +4 -0
  171. package/src/css/classes/system/color.css +223 -0
  172. package/src/css/classes/system/container.css +8 -0
  173. package/src/css/classes/system/font-family.css +2 -0
  174. package/src/css/classes/system/font-weight.css +4 -0
  175. package/src/css/classes/system/gap.css +37 -0
  176. package/src/css/classes/system/index.css +10 -0
  177. package/src/css/classes/system/inset.css +56 -0
  178. package/src/css/classes/system/margin.css +148 -0
  179. package/src/css/classes/system/padding.css +78 -0
  180. package/src/css/classes/system/radius.css +10 -0
  181. package/src/css/classes/system/readme.md +3 -0
  182. package/src/css/classes/system/shadow.css +6 -0
  183. package/src/css/classes/system/typography.css +31 -0
  184. package/src/css/global/font-face.css +20 -0
  185. package/src/css/global/index.css +2 -0
  186. package/src/css/global/reset.css +76 -0
  187. package/src/css/tokens/index.css +3 -0
  188. package/src/css/tokens/opacity.css +6 -0
  189. package/src/css/tokens/semantic.css +25 -0
  190. package/src/css/tokens/surface.css +27 -0
  191. package/src/hooks/useIsClient.ts +10 -0
  192. package/src/index.css +18 -0
  193. package/src/index.ts +65 -0
  194. package/src/polyfills.ts +15 -0
  195. package/src/props/border.ts +51 -0
  196. package/src/props/flexChild.ts +29 -0
  197. package/src/props/flexParent.ts +47 -0
  198. package/src/props/gap.ts +31 -0
  199. package/src/props/gridChild.ts +50 -0
  200. package/src/props/gridParent.ts +45 -0
  201. package/src/props/height.ts +29 -0
  202. package/src/props/layout.ts +44 -0
  203. package/src/props/margin.ts +59 -0
  204. package/src/props/overflow.ts +30 -0
  205. package/src/props/padding.ts +59 -0
  206. package/src/props/placement.ts +16 -0
  207. package/src/props/position.ts +52 -0
  208. package/src/props/shadow.ts +15 -0
  209. package/src/props/tone.ts +15 -0
  210. package/src/props/typography.ts +62 -0
  211. package/src/props/width.ts +29 -0
  212. package/src/props/zIndex.ts +15 -0
  213. package/src/styles.css.d.ts +1 -0
  214. package/src/styles.css.node.js +2 -0
  215. package/src/styles.css.test.ts +24 -0
  216. package/src/types/Button.ts +8 -0
  217. package/src/types/Code.ts +6 -0
  218. package/src/types/Container.ts +3 -0
  219. package/src/types/Density.ts +3 -0
  220. package/src/types/Display.ts +11 -0
  221. package/src/types/Eyebrow.ts +3 -0
  222. package/src/types/Flex.ts +22 -0
  223. package/src/types/FontWeight.ts +3 -0
  224. package/src/types/Grid.ts +3 -0
  225. package/src/types/Heading.ts +6 -0
  226. package/src/types/Icon.ts +3 -0
  227. package/src/types/Interactive.ts +8 -0
  228. package/src/types/List.ts +2 -0
  229. package/src/types/Overflow.ts +3 -0
  230. package/src/types/Placement.ts +16 -0
  231. package/src/types/Position.ts +3 -0
  232. package/src/types/PropDef.ts +73 -0
  233. package/src/types/Radius.ts +3 -0
  234. package/src/types/Responsive.ts +10 -0
  235. package/src/types/Shadow.ts +3 -0
  236. package/src/types/Space.ts +15 -0
  237. package/src/types/Text.ts +3 -0
  238. package/src/types/TextAlign.ts +3 -0
  239. package/src/types/Tone.ts +3 -0
  240. package/src/utils/getProps.test.ts +156 -0
  241. package/src/utils/getProps.ts +156 -0
  242. package/src/utils/mergeTriggerProps.ts +66 -0
  243. package/src/utils/renderPortal.tsx +14 -0
  244. package/src/utils/suffixClassName.ts +5 -0
  245. package/src/version.ts +3 -0
  246. package/LICENSE +0 -21
  247. package/dist/_system-CTe2lb5l.d.ts +0 -40
  248. package/dist/_system-CTe2lb5l.d.ts.map +0 -1
  249. package/dist/arrow-BmX6qbAS.js +0 -170
  250. package/dist/arrow-BmX6qbAS.js.map +0 -1
  251. package/dist/autocomplete.d.ts +0 -140
  252. package/dist/autocomplete.d.ts.map +0 -1
  253. package/dist/autocomplete.js +0 -470
  254. package/dist/autocomplete.js.map +0 -1
  255. package/dist/breadcrumbs.d.ts +0 -18
  256. package/dist/breadcrumbs.d.ts.map +0 -1
  257. package/dist/breadcrumbs.js +0 -119
  258. package/dist/breadcrumbs.js.map +0 -1
  259. package/dist/button-BNyKSDyA.js +0 -180
  260. package/dist/button-BNyKSDyA.js.map +0 -1
  261. package/dist/button-dnqMFkWg.d.ts +0 -76
  262. package/dist/button-dnqMFkWg.d.ts.map +0 -1
  263. package/dist/card-C0a0wQTc.d.ts +0 -7
  264. package/dist/card-C0a0wQTc.d.ts.map +0 -1
  265. package/dist/code.d.ts +0 -20
  266. package/dist/code.d.ts.map +0 -1
  267. package/dist/code.js +0 -90
  268. package/dist/code.js.map +0 -1
  269. package/dist/codeFontStyle-84SMhFtI.js +0 -11
  270. package/dist/codeFontStyle-84SMhFtI.js.map +0 -1
  271. package/dist/component-DVlwaWB-.d.ts +0 -25
  272. package/dist/component-DVlwaWB-.d.ts.map +0 -1
  273. package/dist/element-BYgCE_iK.js +0 -51
  274. package/dist/element-BYgCE_iK.js.map +0 -1
  275. package/dist/factory-BzXTX8_Q.js +0 -3056
  276. package/dist/factory-BzXTX8_Q.js.map +0 -1
  277. package/dist/flex-DmbDG2ks.js +0 -76
  278. package/dist/flex-DmbDG2ks.js.map +0 -1
  279. package/dist/font-EtfxKPUz.d.ts +0 -49
  280. package/dist/font-EtfxKPUz.d.ts.map +0 -1
  281. package/dist/getElementRef-Jw7gY0eV.js +0 -102
  282. package/dist/getElementRef-Jw7gY0eV.js.map +0 -1
  283. package/dist/getScopedTheme-C-sZsyAz.js +0 -267
  284. package/dist/getScopedTheme-C-sZsyAz.js.map +0 -1
  285. package/dist/getTheme_v2-y09KqtEb.js +0 -487
  286. package/dist/getTheme_v2-y09KqtEb.js.map +0 -1
  287. package/dist/grid-6JSgMj1O.js +0 -115
  288. package/dist/grid-6JSgMj1O.js.map +0 -1
  289. package/dist/helpers-C8xxXAQC.js +0 -63
  290. package/dist/helpers-C8xxXAQC.js.map +0 -1
  291. package/dist/hotkeys-CaHsQlsO.js +0 -168
  292. package/dist/hotkeys-CaHsQlsO.js.map +0 -1
  293. package/dist/index.d.ts.map +0 -1
  294. package/dist/layer-Bl5R3uNR.js +0 -61
  295. package/dist/layer-Bl5R3uNR.js.map +0 -1
  296. package/dist/layer-ChlP9Ik6.d.ts +0 -242
  297. package/dist/layer-ChlP9Ik6.d.ts.map +0 -1
  298. package/dist/menu.d.ts +0 -146
  299. package/dist/menu.d.ts.map +0 -1
  300. package/dist/menu.js +0 -626
  301. package/dist/menu.js.map +0 -1
  302. package/dist/popover-B7-28L8y.js +0 -408
  303. package/dist/popover-B7-28L8y.js.map +0 -1
  304. package/dist/popover-CMlQeKn0.d.ts +0 -96
  305. package/dist/popover-CMlQeKn0.d.ts.map +0 -1
  306. package/dist/popover.d.ts +0 -2
  307. package/dist/popover.js +0 -3
  308. package/dist/refractor-CC48DwHi.js +0 -20
  309. package/dist/refractor-CC48DwHi.js.map +0 -1
  310. package/dist/responsiveFont-CilwaORG.js +0 -55
  311. package/dist/responsiveFont-CilwaORG.js.map +0 -1
  312. package/dist/rgba-BSYaEUW6.d.ts +0 -846
  313. package/dist/rgba-BSYaEUW6.d.ts.map +0 -1
  314. package/dist/selectable-B0GUIL74.d.ts +0 -7
  315. package/dist/selectable-B0GUIL74.d.ts.map +0 -1
  316. package/dist/stack-rsNFPq2-.js +0 -112
  317. package/dist/stack-rsNFPq2-.js.map +0 -1
  318. package/dist/styles-css.d.ts +0 -2
  319. package/dist/styles-css.js +0 -4
  320. package/dist/textInput-pSfQjkmx.js +0 -313
  321. package/dist/textInput-pSfQjkmx.js.map +0 -1
  322. package/dist/theme.d.ts +0 -280
  323. package/dist/theme.d.ts.map +0 -1
  324. package/dist/theme.js +0 -55
  325. package/dist/theme.js.map +0 -1
  326. package/dist/toast.d.ts +0 -73
  327. package/dist/toast.d.ts.map +0 -1
  328. package/dist/toast.js +0 -302
  329. package/dist/toast.js.map +0 -1
  330. package/dist/tooltip.d.ts +0 -88
  331. package/dist/tooltip.d.ts.map +0 -1
  332. package/dist/tooltip.js +0 -435
  333. package/dist/tooltip.js.map +0 -1
  334. package/dist/useClickOutsideEvent-wGLGWBZN.js +0 -36
  335. package/dist/useClickOutsideEvent-wGLGWBZN.js.map +0 -1
  336. package/dist/useElementSize-BJvbGHq8.js +0 -51
  337. package/dist/useElementSize-BJvbGHq8.js.map +0 -1
  338. package/dist/useLayer-D1usxIE0.js +0 -712
  339. package/dist/useLayer-D1usxIE0.js.map +0 -1
package/src/css/classes/local/text-trim.css ADDED
@@ -0,0 +1,45 @@
1
+ .sui-text-trim:before,
2
+ .sui-text-trim:after {
3
+ content: '';
4
+ display: block;
5
+ width: 0;
6
+ height: 0;
7
+ }
8
+
9
+ .sui-text-trim:before {
10
+ margin-bottom: var(--trim);
11
+ }
12
+
13
+ .sui-text-trim:after {
14
+ margin-top: var(--trim);
15
+ }
16
+
17
+ .sui-text-trim-none:before,
18
+ .sui-text-trim-none:after {
19
+ content: none;
20
+ }
21
+
22
+ @breakpoints {
23
+ .sui-text-body0 { --trim: -4px; }
24
+ .sui-text-body1 { --trim: -5px; }
25
+ .sui-text-body2 { --trim: -6px; }
26
+ .sui-text-body3 { --trim: -7px; }
27
+ .sui-text-body4 { --trim: -8px; }
28
+
29
+ .sui-text-heading0 { --trim: -4px; }
30
+ .sui-text-heading1 { --trim: -5px; }
31
+ .sui-text-heading2 { --trim: -6px; }
32
+ .sui-text-heading3 { --trim: -7px; }
33
+ .sui-text-heading4 { --trim: -8px; }
34
+ .sui-text-heading5 { --trim: -10px; }
35
+ .sui-text-heading6 { --trim: -13px; }
36
+ .sui-text-heading7 { --trim: -16px; }
37
+ .sui-text-heading8 { --trim: -22px; }
38
+ .sui-text-heading9 { --trim: -30px; }
39
+
40
+ .sui-text-code0 { --trim: -4px; }
41
+ .sui-text-code1 { --trim: -5px; }
42
+ .sui-text-code2 { --trim: -6px; }
43
+ .sui-text-code3 { --trim: -7px; }
44
+ .sui-text-code4 { --trim: -8px; }
45
+ }
package/src/css/classes/local/tone.css ADDED
@@ -0,0 +1,75 @@
1
+ [class*='sui-tone'] {
2
+ /* All .sui-tone classes use white and black for tone-0/-1000 */
3
+ --tone-0: light-dark(var(--white), var(--black));
4
+ --tone-1000: light-dark(var(--black), var(--white));
5
+ }
6
+
7
+ .sui-tone-neutral {
8
+ --tone-50: light-dark(var(--gray-50), var(--gray-950));
9
+ --tone-100: light-dark(var(--gray-100), var(--gray-900));
10
+ --tone-200: light-dark(var(--gray-200), var(--gray-800));
11
+ --tone-300: light-dark(var(--gray-300), var(--gray-700));
12
+ --tone-400: light-dark(var(--gray-400), var(--gray-600));
13
+ --tone-500: light-dark(var(--gray-500), var(--gray-500));
14
+ --tone-600: light-dark(var(--gray-600), var(--gray-400));
15
+ --tone-700: light-dark(var(--gray-700), var(--gray-300));
16
+ --tone-800: light-dark(var(--gray-800), var(--gray-200));
17
+ --tone-900: light-dark(var(--gray-900), var(--gray-100));
18
+ --tone-950: light-dark(var(--gray-950), var(--gray-50));
19
+ }
20
+
21
+ .sui-tone-suggest {
22
+ --tone-50: light-dark(var(--purple-50), var(--purple-950));
23
+ --tone-100: light-dark(var(--purple-100), var(--purple-900));
24
+ --tone-200: light-dark(var(--purple-200), var(--purple-800));
25
+ --tone-300: light-dark(var(--purple-300), var(--purple-700));
26
+ --tone-400: light-dark(var(--purple-400), var(--purple-600));
27
+ --tone-500: light-dark(var(--purple-500), var(--purple-500));
28
+ --tone-600: light-dark(var(--purple-600), var(--purple-400));
29
+ --tone-700: light-dark(var(--purple-700), var(--purple-300));
30
+ --tone-800: light-dark(var(--purple-800), var(--purple-200));
31
+ --tone-900: light-dark(var(--purple-900), var(--purple-100));
32
+ --tone-950: light-dark(var(--purple-950), var(--purple-50));
33
+ }
34
+
35
+ .sui-tone-positive {
36
+ --tone-50: light-dark(var(--green-50), var(--green-950));
37
+ --tone-100: light-dark(var(--green-100), var(--green-900));
38
+ --tone-200: light-dark(var(--green-200), var(--green-800));
39
+ --tone-300: light-dark(var(--green-300), var(--green-700));
40
+ --tone-400: light-dark(var(--green-400), var(--green-600));
41
+ --tone-500: light-dark(var(--green-500), var(--green-500));
42
+ --tone-600: light-dark(var(--green-600), var(--green-400));
43
+ --tone-700: light-dark(var(--green-700), var(--green-300));
44
+ --tone-800: light-dark(var(--green-800), var(--green-200));
45
+ --tone-900: light-dark(var(--green-900), var(--green-100));
46
+ --tone-950: light-dark(var(--green-950), var(--green-50));
47
+ }
48
+
49
+ .sui-tone-caution {
50
+ --tone-50: light-dark(var(--yellow-50), var(--yellow-950));
51
+ --tone-100: light-dark(var(--yellow-100), var(--yellow-900));
52
+ --tone-200: light-dark(var(--yellow-200), var(--yellow-800));
53
+ --tone-300: light-dark(var(--yellow-300), var(--yellow-700));
54
+ --tone-400: light-dark(var(--yellow-400), var(--yellow-600));
55
+ --tone-500: light-dark(var(--yellow-500), var(--yellow-500));
56
+ --tone-600: light-dark(var(--yellow-600), var(--yellow-400));
57
+ --tone-700: light-dark(var(--yellow-700), var(--yellow-300));
58
+ --tone-800: light-dark(var(--yellow-800), var(--yellow-200));
59
+ --tone-900: light-dark(var(--yellow-900), var(--yellow-100));
60
+ --tone-950: light-dark(var(--yellow-950), var(--yellow-50));
61
+ }
62
+
63
+ .sui-tone-critical {
64
+ --tone-50: light-dark(var(--red-50), var(--red-950));
65
+ --tone-100: light-dark(var(--red-100), var(--red-900));
66
+ --tone-200: light-dark(var(--red-200), var(--red-800));
67
+ --tone-300: light-dark(var(--red-300), var(--red-700));
68
+ --tone-400: light-dark(var(--red-400), var(--red-600));
69
+ --tone-500: light-dark(var(--red-500), var(--red-500));
70
+ --tone-600: light-dark(var(--red-600), var(--red-400));
71
+ --tone-700: light-dark(var(--red-700), var(--red-300));
72
+ --tone-800: light-dark(var(--red-800), var(--red-200));
73
+ --tone-900: light-dark(var(--red-900), var(--red-100));
74
+ --tone-950: light-dark(var(--red-950), var(--red-50));
75
+ }
package/src/css/classes/local/top-anchor.css ADDED
@@ -0,0 +1,4 @@
1
+ .sui-top-anchor {
2
+ inset-block-start: var(--top-anchor);
3
+ max-block-size: calc(100dvh - var(--top-anchor) * 2);
4
+ }
package/src/css/classes/system/color.css ADDED
@@ -0,0 +1,223 @@
1
+ /* black */
2
+ .sui-black { color: var(--black); }
3
+ .sui-bg-black { background-color: var(--black); }
4
+
5
+ /* white */
6
+ .sui-white { color: var(--white); }
7
+ .sui-bg-white { background-color: var(--white); }
8
+
9
+ /* blue */
10
+ .sui-blue-50 { color: var(--blue-50); }
11
+ .sui-blue-100 { color: var(--blue-100); }
12
+ .sui-blue-200 { color: var(--blue-200); }
13
+ .sui-blue-300 { color: var(--blue-300); }
14
+ .sui-blue-400 { color: var(--blue-400); }
15
+ .sui-blue-500 { color: var(--blue-500); }
16
+ .sui-blue-600 { color: var(--blue-600); }
17
+ .sui-blue-700 { color: var(--blue-700); }
18
+ .sui-blue-800 { color: var(--blue-800); }
19
+ .sui-blue-900 { color: var(--blue-900); }
20
+ .sui-blue-950 { color: var(--blue-950); }
21
+ .sui-bg-blue-50 { background-color: var(--blue-50); }
22
+ .sui-bg-blue-100 { background-color: var(--blue-100); }
23
+ .sui-bg-blue-200 { background-color: var(--blue-200); }
24
+ .sui-bg-blue-300 { background-color: var(--blue-300); }
25
+ .sui-bg-blue-400 { background-color: var(--blue-400); }
26
+ .sui-bg-blue-500 { background-color: var(--blue-500); }
27
+ .sui-bg-blue-600 { background-color: var(--blue-600); }
28
+ .sui-bg-blue-700 { background-color: var(--blue-700); }
29
+ .sui-bg-blue-800 { background-color: var(--blue-800); }
30
+ .sui-bg-blue-900 { background-color: var(--blue-900); }
31
+ .sui-bg-blue-950 { background-color: var(--blue-950); }
32
+
33
+ /* cyan */
34
+ .sui-cyan-50 { color: var(--cyan-50); }
35
+ .sui-cyan-100 { color: var(--cyan-100); }
36
+ .sui-cyan-200 { color: var(--cyan-200); }
37
+ .sui-cyan-300 { color: var(--cyan-300); }
38
+ .sui-cyan-400 { color: var(--cyan-400); }
39
+ .sui-cyan-500 { color: var(--cyan-500); }
40
+ .sui-cyan-600 { color: var(--cyan-600); }
41
+ .sui-cyan-700 { color: var(--cyan-700); }
42
+ .sui-cyan-800 { color: var(--cyan-800); }
43
+ .sui-cyan-900 { color: var(--cyan-900); }
44
+ .sui-cyan-950 { color: var(--cyan-950); }
45
+ .sui-bg-cyan-50 { background-color: var(--cyan-50); }
46
+ .sui-bg-cyan-100 { background-color: var(--cyan-100); }
47
+ .sui-bg-cyan-200 { background-color: var(--cyan-200); }
48
+ .sui-bg-cyan-300 { background-color: var(--cyan-300); }
49
+ .sui-bg-cyan-400 { background-color: var(--cyan-400); }
50
+ .sui-bg-cyan-500 { background-color: var(--cyan-500); }
51
+ .sui-bg-cyan-600 { background-color: var(--cyan-600); }
52
+ .sui-bg-cyan-700 { background-color: var(--cyan-700); }
53
+ .sui-bg-cyan-800 { background-color: var(--cyan-800); }
54
+ .sui-bg-cyan-900 { background-color: var(--cyan-900); }
55
+ .sui-bg-cyan-950 { background-color: var(--cyan-950); }
56
+
57
+ /* gray */
58
+ .sui-gray-50 { color: var(--gray-50); }
59
+ .sui-gray-100 { color: var(--gray-100); }
60
+ .sui-gray-200 { color: var(--gray-200); }
61
+ .sui-gray-300 { color: var(--gray-300); }
62
+ .sui-gray-400 { color: var(--gray-400); }
63
+ .sui-gray-500 { color: var(--gray-500); }
64
+ .sui-gray-600 { color: var(--gray-600); }
65
+ .sui-gray-700 { color: var(--gray-700); }
66
+ .sui-gray-800 { color: var(--gray-800); }
67
+ .sui-gray-900 { color: var(--gray-900); }
68
+ .sui-gray-950 { color: var(--gray-950); }
69
+ .sui-bg-gray-50 { background-color: var(--gray-50); }
70
+ .sui-bg-gray-100 { background-color: var(--gray-100); }
71
+ .sui-bg-gray-200 { background-color: var(--gray-200); }
72
+ .sui-bg-gray-300 { background-color: var(--gray-300); }
73
+ .sui-bg-gray-400 { background-color: var(--gray-400); }
74
+ .sui-bg-gray-500 { background-color: var(--gray-500); }
75
+ .sui-bg-gray-600 { background-color: var(--gray-600); }
76
+ .sui-bg-gray-700 { background-color: var(--gray-700); }
77
+ .sui-bg-gray-800 { background-color: var(--gray-800); }
78
+ .sui-bg-gray-900 { background-color: var(--gray-900); }
79
+ .sui-bg-gray-950 { background-color: var(--gray-950); }
80
+
81
+ /* green */
82
+ .sui-green-50 { color: var(--green-50); }
83
+ .sui-green-100 { color: var(--green-100); }
84
+ .sui-green-200 { color: var(--green-200); }
85
+ .sui-green-300 { color: var(--green-300); }
86
+ .sui-green-400 { color: var(--green-400); }
87
+ .sui-green-500 { color: var(--green-500); }
88
+ .sui-green-600 { color: var(--green-600); }
89
+ .sui-green-700 { color: var(--green-700); }
90
+ .sui-green-800 { color: var(--green-800); }
91
+ .sui-green-900 { color: var(--green-900); }
92
+ .sui-green-950 { color: var(--green-950); }
93
+ .sui-bg-green-50 { background-color: var(--green-50); }
94
+ .sui-bg-green-100 { background-color: var(--green-100); }
95
+ .sui-bg-green-200 { background-color: var(--green-200); }
96
+ .sui-bg-green-300 { background-color: var(--green-300); }
97
+ .sui-bg-green-400 { background-color: var(--green-400); }
98
+ .sui-bg-green-500 { background-color: var(--green-500); }
99
+ .sui-bg-green-600 { background-color: var(--green-600); }
100
+ .sui-bg-green-700 { background-color: var(--green-700); }
101
+ .sui-bg-green-800 { background-color: var(--green-800); }
102
+ .sui-bg-green-900 { background-color: var(--green-900); }
103
+ .sui-bg-green-950 { background-color: var(--green-950); }
104
+
105
+ /* magenta */
106
+ .sui-magenta-50 { color: var(--magenta-50); }
107
+ .sui-magenta-100 { color: var(--magenta-100); }
108
+ .sui-magenta-200 { color: var(--magenta-200); }
109
+ .sui-magenta-300 { color: var(--magenta-300); }
110
+ .sui-magenta-400 { color: var(--magenta-400); }
111
+ .sui-magenta-500 { color: var(--magenta-500); }
112
+ .sui-magenta-600 { color: var(--magenta-600); }
113
+ .sui-magenta-700 { color: var(--magenta-700); }
114
+ .sui-magenta-800 { color: var(--magenta-800); }
115
+ .sui-magenta-900 { color: var(--magenta-900); }
116
+ .sui-magenta-950 { color: var(--magenta-950); }
117
+ .sui-bg-magenta-50 { background-color: var(--magenta-50); }
118
+ .sui-bg-magenta-100 { background-color: var(--magenta-100); }
119
+ .sui-bg-magenta-200 { background-color: var(--magenta-200); }
120
+ .sui-bg-magenta-300 { background-color: var(--magenta-300); }
121
+ .sui-bg-magenta-400 { background-color: var(--magenta-400); }
122
+ .sui-bg-magenta-500 { background-color: var(--magenta-500); }
123
+ .sui-bg-magenta-600 { background-color: var(--magenta-600); }
124
+ .sui-bg-magenta-700 { background-color: var(--magenta-700); }
125
+ .sui-bg-magenta-800 { background-color: var(--magenta-800); }
126
+ .sui-bg-magenta-900 { background-color: var(--magenta-900); }
127
+ .sui-bg-magenta-950 { background-color: var(--magenta-950); }
128
+
129
+ /* orange */
130
+ .sui-orange-50 { color: var(--orange-50); }
131
+ .sui-orange-100 { color: var(--orange-100); }
132
+ .sui-orange-200 { color: var(--orange-200); }
133
+ .sui-orange-300 { color: var(--orange-300); }
134
+ .sui-orange-400 { color: var(--orange-400); }
135
+ .sui-orange-500 { color: var(--orange-500); }
136
+ .sui-orange-600 { color: var(--orange-600); }
137
+ .sui-orange-700 { color: var(--orange-700); }
138
+ .sui-orange-800 { color: var(--orange-800); }
139
+ .sui-orange-900 { color: var(--orange-900); }
140
+ .sui-orange-950 { color: var(--orange-950); }
141
+ .sui-bg-orange-50 { background-color: var(--orange-50); }
142
+ .sui-bg-orange-100 { background-color: var(--orange-100); }
143
+ .sui-bg-orange-200 { background-color: var(--orange-200); }
144
+ .sui-bg-orange-300 { background-color: var(--orange-300); }
145
+ .sui-bg-orange-400 { background-color: var(--orange-400); }
146
+ .sui-bg-orange-500 { background-color: var(--orange-500); }
147
+ .sui-bg-orange-600 { background-color: var(--orange-600); }
148
+ .sui-bg-orange-700 { background-color: var(--orange-700); }
149
+ .sui-bg-orange-800 { background-color: var(--orange-800); }
150
+ .sui-bg-orange-900 { background-color: var(--orange-900); }
151
+ .sui-bg-orange-950 { background-color: var(--orange-950); }
152
+
153
+ /* purple */
154
+ .sui-purple-50 { color: var(--purple-50); }
155
+ .sui-purple-100 { color: var(--purple-100); }
156
+ .sui-purple-200 { color: var(--purple-200); }
157
+ .sui-purple-300 { color: var(--purple-300); }
158
+ .sui-purple-400 { color: var(--purple-400); }
159
+ .sui-purple-500 { color: var(--purple-500); }
160
+ .sui-purple-600 { color: var(--purple-600); }
161
+ .sui-purple-700 { color: var(--purple-700); }
162
+ .sui-purple-800 { color: var(--purple-800); }
163
+ .sui-purple-900 { color: var(--purple-900); }
164
+ .sui-purple-950 { color: var(--purple-950); }
165
+ .sui-bg-purple-50 { background-color: var(--purple-50); }
166
+ .sui-bg-purple-100 { background-color: var(--purple-100); }
167
+ .sui-bg-purple-200 { background-color: var(--purple-200); }
168
+ .sui-bg-purple-300 { background-color: var(--purple-300); }
169
+ .sui-bg-purple-400 { background-color: var(--purple-400); }
170
+ .sui-bg-purple-500 { background-color: var(--purple-500); }
171
+ .sui-bg-purple-600 { background-color: var(--purple-600); }
172
+ .sui-bg-purple-700 { background-color: var(--purple-700); }
173
+ .sui-bg-purple-800 { background-color: var(--purple-800); }
174
+ .sui-bg-purple-900 { background-color: var(--purple-900); }
175
+ .sui-bg-purple-950 { background-color: var(--purple-950); }
176
+
177
+ /* red */
178
+ .sui-red-50 { color: var(--red-50); }
179
+ .sui-red-100 { color: var(--red-100); }
180
+ .sui-red-200 { color: var(--red-200); }
181
+ .sui-red-300 { color: var(--red-300); }
182
+ .sui-red-400 { color: var(--red-400); }
183
+ .sui-red-500 { color: var(--red-500); }
184
+ .sui-red-600 { color: var(--red-600); }
185
+ .sui-red-700 { color: var(--red-700); }
186
+ .sui-red-800 { color: var(--red-800); }
187
+ .sui-red-900 { color: var(--red-900); }
188
+ .sui-red-950 { color: var(--red-950); }
189
+ .sui-bg-red-50 { background-color: var(--red-50); }
190
+ .sui-bg-red-100 { background-color: var(--red-100); }
191
+ .sui-bg-red-200 { background-color: var(--red-200); }
192
+ .sui-bg-red-300 { background-color: var(--red-300); }
193
+ .sui-bg-red-400 { background-color: var(--red-400); }
194
+ .sui-bg-red-500 { background-color: var(--red-500); }
195
+ .sui-bg-red-600 { background-color: var(--red-600); }
196
+ .sui-bg-red-700 { background-color: var(--red-700); }
197
+ .sui-bg-red-800 { background-color: var(--red-800); }
198
+ .sui-bg-red-900 { background-color: var(--red-900); }
199
+ .sui-bg-red-950 { background-color: var(--red-950); }
200
+
201
+ /* yellow */
202
+ .sui-yellow-50 { color: var(--yellow-50); }
203
+ .sui-yellow-100 { color: var(--yellow-100); }
204
+ .sui-yellow-200 { color: var(--yellow-200); }
205
+ .sui-yellow-300 { color: var(--yellow-300); }
206
+ .sui-yellow-400 { color: var(--yellow-400); }
207
+ .sui-yellow-500 { color: var(--yellow-500); }
208
+ .sui-yellow-600 { color: var(--yellow-600); }
209
+ .sui-yellow-700 { color: var(--yellow-700); }
210
+ .sui-yellow-800 { color: var(--yellow-800); }
211
+ .sui-yellow-900 { color: var(--yellow-900); }
212
+ .sui-yellow-950 { color: var(--yellow-950); }
213
+ .sui-bg-yellow-50 { background-color: var(--yellow-50); }
214
+ .sui-bg-yellow-100 { background-color: var(--yellow-100); }
215
+ .sui-bg-yellow-200 { background-color: var(--yellow-200); }
216
+ .sui-bg-yellow-300 { background-color: var(--yellow-300); }
217
+ .sui-bg-yellow-400 { background-color: var(--yellow-400); }
218
+ .sui-bg-yellow-500 { background-color: var(--yellow-500); }
219
+ .sui-bg-yellow-600 { background-color: var(--yellow-600); }
220
+ .sui-bg-yellow-700 { background-color: var(--yellow-700); }
221
+ .sui-bg-yellow-800 { background-color: var(--yellow-800); }
222
+ .sui-bg-yellow-900 { background-color: var(--yellow-900); }
223
+ .sui-bg-yellow-950 { background-color: var(--yellow-950); }
package/src/css/classes/system/container.css ADDED
@@ -0,0 +1,8 @@
1
+ @breakpoints {
2
+ .sui-container0 { max-width: var(--container-0); }
3
+ .sui-container1 { max-width: var(--container-1); }
4
+ .sui-container2 { max-width: var(--container-2); }
5
+ .sui-container3 { max-width: var(--container-3); }
6
+ .sui-container4 { max-width: var(--container-4); }
7
+ .sui-container5 { max-width: var(--container-5); }
8
+ }
package/src/css/classes/system/font-family.css ADDED
@@ -0,0 +1,2 @@
1
+ .sui-font-sans { font-family: var(--sans); }
2
+ .sui-font-mono { font-family: var(--mono); }
package/src/css/classes/system/font-weight.css ADDED
@@ -0,0 +1,4 @@
1
+ .sui-weight-bold { font-weight: var(--bold); }
2
+ .sui-weight-medium { font-weight: var(--medium); }
3
+ .sui-weight-regular { font-weight: var(--regular); }
4
+ .sui-weight-semibold { font-weight: var(--semibold); }
package/src/css/classes/system/gap.css ADDED
@@ -0,0 +1,37 @@
1
+ @breakpoints {
2
+ .sui-gap0 { gap: var(--space-0); }
3
+ .sui-gap1 { gap: var(--space-1); }
4
+ .sui-gap2 { gap: var(--space-2); }
5
+ .sui-gap3 { gap: var(--space-3); }
6
+ .sui-gap4 { gap: var(--space-4); }
7
+ .sui-gap5 { gap: var(--space-5); }
8
+ .sui-gap6 { gap: var(--space-6); }
9
+ .sui-gap7 { gap: var(--space-7); }
10
+ .sui-gap8 { gap: var(--space-8); }
11
+ .sui-gap9 { gap: var(--space-9); }
12
+ .sui-gap-inherit { gap: inherit; }
13
+
14
+ .sui-row-gap0 { row-gap: var(--space-0); }
15
+ .sui-row-gap1 { row-gap: var(--space-1); }
16
+ .sui-row-gap2 { row-gap: var(--space-2); }
17
+ .sui-row-gap3 { row-gap: var(--space-3); }
18
+ .sui-row-gap4 { row-gap: var(--space-4); }
19
+ .sui-row-gap5 { row-gap: var(--space-5); }
20
+ .sui-row-gap6 { row-gap: var(--space-6); }
21
+ .sui-row-gap7 { row-gap: var(--space-7); }
22
+ .sui-row-gap8 { row-gap: var(--space-8); }
23
+ .sui-row-gap9 { row-gap: var(--space-9); }
24
+ .sui-row-gap-inherit { gap: inherit; }
25
+
26
+ .sui-column-gap0 { column-gap: var(--space-0); }
27
+ .sui-column-gap1 { column-gap: var(--space-1); }
28
+ .sui-column-gap2 { column-gap: var(--space-2); }
29
+ .sui-column-gap3 { column-gap: var(--space-3); }
30
+ .sui-column-gap4 { column-gap: var(--space-4); }
31
+ .sui-column-gap5 { column-gap: var(--space-5); }
32
+ .sui-column-gap6 { column-gap: var(--space-6); }
33
+ .sui-column-gap7 { column-gap: var(--space-7); }
34
+ .sui-column-gap8 { column-gap: var(--space-8); }
35
+ .sui-column-gap9 { column-gap: var(--space-9); }
36
+ .sui-column-gap-inherit { gap: inherit; }
37
+ }
package/src/css/classes/system/index.css ADDED
@@ -0,0 +1,10 @@
1
+ @import './color.css';
2
+ @import './container.css';
3
+ @import './gap.css';
4
+ @import './inset.css';
5
+ @import './margin.css';
6
+ @import './padding.css';
7
+ @import './radius.css';
8
+ @import './shadow.css';
9
+ @import './typography.css';
10
+ @import './font-weight.css';
package/src/css/classes/system/inset.css ADDED
@@ -0,0 +1,56 @@
1
+ @breakpoints {
2
+ .sui-inset0 { inset: var(--space-0); }
3
+ .sui-inset1 { inset: var(--space-1); }
4
+ .sui-inset2 { inset: var(--space-2); }
5
+ .sui-inset3 { inset: var(--space-3); }
6
+ .sui-inset4 { inset: var(--space-4); }
7
+ .sui-inset5 { inset: var(--space-5); }
8
+ .sui-inset6 { inset: var(--space-6); }
9
+ .sui-inset7 { inset: var(--space-7); }
10
+ .sui-inset8 { inset: var(--space-8); }
11
+ .sui-inset9 { inset: var(--space-9); }
12
+
13
+ .sui-top0 { top: var(--space-0); }
14
+ .sui-top1 { top: var(--space-1); }
15
+ .sui-top2 { top: var(--space-2); }
16
+ .sui-top3 { top: var(--space-3); }
17
+ .sui-top4 { top: var(--space-4); }
18
+ .sui-top5 { top: var(--space-5); }
19
+ .sui-top6 { top: var(--space-6); }
20
+ .sui-top7 { top: var(--space-7); }
21
+ .sui-top8 { top: var(--space-8); }
22
+ .sui-top9 { top: var(--space-9); }
23
+
24
+ .sui-right0 { right: var(--space-0); }
25
+ .sui-right1 { right: var(--space-1); }
26
+ .sui-right2 { right: var(--space-2); }
27
+ .sui-right3 { right: var(--space-3); }
28
+ .sui-right4 { right: var(--space-4); }
29
+ .sui-right5 { right: var(--space-5); }
30
+ .sui-right6 { right: var(--space-6); }
31
+ .sui-right7 { right: var(--space-7); }
32
+ .sui-right8 { right: var(--space-8); }
33
+ .sui-right9 { right: var(--space-9); }
34
+
35
+ .sui-bottom0 { bottom: var(--space-0); }
36
+ .sui-bottom1 { bottom: var(--space-1); }
37
+ .sui-bottom2 { bottom: var(--space-2); }
38
+ .sui-bottom3 { bottom: var(--space-3); }
39
+ .sui-bottom4 { bottom: var(--space-4); }
40
+ .sui-bottom5 { bottom: var(--space-5); }
41
+ .sui-bottom6 { bottom: var(--space-6); }
42
+ .sui-bottom7 { bottom: var(--space-7); }
43
+ .sui-bottom8 { bottom: var(--space-8); }
44
+ .sui-bottom9 { bottom: var(--space-9); }
45
+
46
+ .sui-left0 { left: var(--space-0); }
47
+ .sui-left1 { left: var(--space-1); }
48
+ .sui-left2 { left: var(--space-2); }
49
+ .sui-left3 { left: var(--space-3); }
50
+ .sui-left4 { left: var(--space-4); }
51
+ .sui-left5 { left: var(--space-5); }
52
+ .sui-left6 { left: var(--space-6); }
53
+ .sui-left7 { left: var(--space-7); }
54
+ .sui-left8 { left: var(--space-8); }
55
+ .sui-left9 { left: var(--space-9); }
56
+ }
package/src/css/classes/system/margin.css ADDED
@@ -0,0 +1,148 @@
1
+ @breakpoints {
2
+ .sui-m0 { margin: var(--space-0); }
3
+ .sui-m1 { margin: var(--space-1); }
4
+ .sui-m2 { margin: var(--space-2); }
5
+ .sui-m3 { margin: var(--space-3); }
6
+ .sui-m4 { margin: var(--space-4); }
7
+ .sui-m5 { margin: var(--space-5); }
8
+ .sui-m6 { margin: var(--space-6); }
9
+ .sui-m7 { margin: var(--space-7); }
10
+ .sui-m8 { margin: var(--space-8); }
11
+ .sui-m9 { margin: var(--space-9); }
12
+ .sui-m-1 { margin: calc(-1 * var(--space-1)); }
13
+ .sui-m-2 { margin: calc(-1 * var(--space-2)); }
14
+ .sui-m-3 { margin: calc(-1 * var(--space-3)); }
15
+ .sui-m-4 { margin: calc(-1 * var(--space-4)); }
16
+ .sui-m-5 { margin: calc(-1 * var(--space-5)); }
17
+ .sui-m-6 { margin: calc(-1 * var(--space-6)); }
18
+ .sui-m-7 { margin: calc(-1 * var(--space-7)); }
19
+ .sui-m-8 { margin: calc(-1 * var(--space-8)); }
20
+ .sui-m-9 { margin: calc(-1 * var(--space-9)); }
21
+ .sui-m-auto { margin: auto; }
22
+
23
+ .sui-mx0 { margin-inline: var(--space-0); }
24
+ .sui-mx1 { margin-inline: var(--space-1); }
25
+ .sui-mx2 { margin-inline: var(--space-2); }
26
+ .sui-mx3 { margin-inline: var(--space-3); }
27
+ .sui-mx4 { margin-inline: var(--space-4); }
28
+ .sui-mx5 { margin-inline: var(--space-5); }
29
+ .sui-mx6 { margin-inline: var(--space-6); }
30
+ .sui-mx7 { margin-inline: var(--space-7); }
31
+ .sui-mx8 { margin-inline: var(--space-8); }
32
+ .sui-mx9 { margin-inline: var(--space-9); }
33
+ .sui-mx-1 { margin-inline: calc(-1 * var(--space-1)); }
34
+ .sui-mx-2 { margin-inline: calc(-1 * var(--space-2)); }
35
+ .sui-mx-3 { margin-inline: calc(-1 * var(--space-3)); }
36
+ .sui-mx-4 { margin-inline: calc(-1 * var(--space-4)); }
37
+ .sui-mx-5 { margin-inline: calc(-1 * var(--space-5)); }
38
+ .sui-mx-6 { margin-inline: calc(-1 * var(--space-6)); }
39
+ .sui-mx-7 { margin-inline: calc(-1 * var(--space-7)); }
40
+ .sui-mx-8 { margin-inline: calc(-1 * var(--space-8)); }
41
+ .sui-mx-9 { margin-inline: calc(-1 * var(--space-9)); }
42
+ .sui-mx-auto { margin-inline: auto; }
43
+
44
+ .sui-my0 { margin-block: var(--space-0); }
45
+ .sui-my1 { margin-block: var(--space-1); }
46
+ .sui-my2 { margin-block: var(--space-2); }
47
+ .sui-my3 { margin-block: var(--space-3); }
48
+ .sui-my4 { margin-block: var(--space-4); }
49
+ .sui-my5 { margin-block: var(--space-5); }
50
+ .sui-my6 { margin-block: var(--space-6); }
51
+ .sui-my7 { margin-block: var(--space-7); }
52
+ .sui-my8 { margin-block: var(--space-8); }
53
+ .sui-my9 { margin-block: var(--space-9); }
54
+ .sui-my-1 { margin-block: calc(-1 * var(--space-1)); }
55
+ .sui-my-2 { margin-block: calc(-1 * var(--space-2)); }
56
+ .sui-my-3 { margin-block: calc(-1 * var(--space-3)); }
57
+ .sui-my-4 { margin-block: calc(-1 * var(--space-4)); }
58
+ .sui-my-5 { margin-block: calc(-1 * var(--space-5)); }
59
+ .sui-my-6 { margin-block: calc(-1 * var(--space-6)); }
60
+ .sui-my-7 { margin-block: calc(-1 * var(--space-7)); }
61
+ .sui-my-8 { margin-block: calc(-1 * var(--space-8)); }
62
+ .sui-my-9 { margin-block: calc(-1 * var(--space-9)); }
63
+ .sui-my-auto { margin-block: auto; }
64
+
65
+ .sui-mt0 { margin-top: var(--space-0); }
66
+ .sui-mt1 { margin-top: var(--space-1); }
67
+ .sui-mt2 { margin-top: var(--space-2); }
68
+ .sui-mt3 { margin-top: var(--space-3); }
69
+ .sui-mt4 { margin-top: var(--space-4); }
70
+ .sui-mt5 { margin-top: var(--space-5); }
71
+ .sui-mt6 { margin-top: var(--space-6); }
72
+ .sui-mt7 { margin-top: var(--space-7); }
73
+ .sui-mt8 { margin-top: var(--space-8); }
74
+ .sui-mt9 { margin-top: var(--space-9); }
75
+ .sui-mt-1 { margin-top: calc(-1 * var(--space-1)); }
76
+ .sui-mt-2 { margin-top: calc(-1 * var(--space-2)); }
77
+ .sui-mt-3 { margin-top: calc(-1 * var(--space-3)); }
78
+ .sui-mt-4 { margin-top: calc(-1 * var(--space-4)); }
79
+ .sui-mt-5 { margin-top: calc(-1 * var(--space-5)); }
80
+ .sui-mt-6 { margin-top: calc(-1 * var(--space-6)); }
81
+ .sui-mt-7 { margin-top: calc(-1 * var(--space-7)); }
82
+ .sui-mt-8 { margin-top: calc(-1 * var(--space-8)); }
83
+ .sui-mt-9 { margin-top: calc(-1 * var(--space-9)); }
84
+ .sui-mt-auto { margin-top: auto; }
85
+
86
+ .sui-mr0 { margin-right: var(--space-0); }
87
+ .sui-mr1 { margin-right: var(--space-1); }
88
+ .sui-mr2 { margin-right: var(--space-2); }
89
+ .sui-mr3 { margin-right: var(--space-3); }
90
+ .sui-mr4 { margin-right: var(--space-4); }
91
+ .sui-mr5 { margin-right: var(--space-5); }
92
+ .sui-mr6 { margin-right: var(--space-6); }
93
+ .sui-mr7 { margin-right: var(--space-7); }
94
+ .sui-mr8 { margin-right: var(--space-8); }
95
+ .sui-mr9 { margin-right: var(--space-9); }
96
+ .sui-mr-1 { margin-right: calc(-1 * var(--space-1)); }
97
+ .sui-mr-2 { margin-right: calc(-1 * var(--space-2)); }
98
+ .sui-mr-3 { margin-right: calc(-1 * var(--space-3)); }
99
+ .sui-mr-4 { margin-right: calc(-1 * var(--space-4)); }
100
+ .sui-mr-5 { margin-right: calc(-1 * var(--space-5)); }
101
+ .sui-mr-6 { margin-right: calc(-1 * var(--space-6)); }
102
+ .sui-mr-7 { margin-right: calc(-1 * var(--space-7)); }
103
+ .sui-mr-8 { margin-right: calc(-1 * var(--space-8)); }
104
+ .sui-mr-9 { margin-right: calc(-1 * var(--space-9)); }
105
+ .sui-mr-auto { margin-right: auto; }
106
+
107
+ .sui-mb0 { margin-bottom: var(--space-0); }
108
+ .sui-mb1 { margin-bottom: var(--space-1); }
109
+ .sui-mb2 { margin-bottom: var(--space-2); }
110
+ .sui-mb3 { margin-bottom: var(--space-3); }
111
+ .sui-mb4 { margin-bottom: var(--space-4); }
112
+ .sui-mb5 { margin-bottom: var(--space-5); }
113
+ .sui-mb6 { margin-bottom: var(--space-6); }
114
+ .sui-mb7 { margin-bottom: var(--space-7); }
115
+ .sui-mb8 { margin-bottom: var(--space-8); }
116
+ .sui-mb9 { margin-bottom: var(--space-9); }
117
+ .sui-mb-1 { margin-bottom: calc(-1 * var(--space-1)); }
118
+ .sui-mb-2 { margin-bottom: calc(-1 * var(--space-2)); }
119
+ .sui-mb-3 { margin-bottom: calc(-1 * var(--space-3)); }
120
+ .sui-mb-4 { margin-bottom: calc(-1 * var(--space-4)); }
121
+ .sui-mb-5 { margin-bottom: calc(-1 * var(--space-5)); }
122
+ .sui-mb-6 { margin-bottom: calc(-1 * var(--space-6)); }
123
+ .sui-mb-7 { margin-bottom: calc(-1 * var(--space-7)); }
124
+ .sui-mb-8 { margin-bottom: calc(-1 * var(--space-8)); }
125
+ .sui-mb-9 { margin-bottom: calc(-1 * var(--space-9)); }
126
+ .sui-mb-auto { margin-bottom: auto; }
127
+
128
+ .sui-ml0 { margin-left: var(--space-0); }
129
+ .sui-ml1 { margin-left: var(--space-1); }
130
+ .sui-ml2 { margin-left: var(--space-2); }
131
+ .sui-ml3 { margin-left: var(--space-3); }
132
+ .sui-ml4 { margin-left: var(--space-4); }
133
+ .sui-ml5 { margin-left: var(--space-5); }
134
+ .sui-ml6 { margin-left: var(--space-6); }
135
+ .sui-ml7 { margin-left: var(--space-7); }
136
+ .sui-ml8 { margin-left: var(--space-8); }
137
+ .sui-ml9 { margin-left: var(--space-9); }
138
+ .sui-ml-1 { margin-left: calc(-1 * var(--space-1)); }
139
+ .sui-ml-2 { margin-left: calc(-1 * var(--space-2)); }
140
+ .sui-ml-3 { margin-left: calc(-1 * var(--space-3)); }
141
+ .sui-ml-4 { margin-left: calc(-1 * var(--space-4)); }
142
+ .sui-ml-5 { margin-left: calc(-1 * var(--space-5)); }
143
+ .sui-ml-6 { margin-left: calc(-1 * var(--space-6)); }
144
+ .sui-ml-7 { margin-left: calc(-1 * var(--space-7)); }
145
+ .sui-ml-8 { margin-left: calc(-1 * var(--space-8)); }
146
+ .sui-ml-9 { margin-left: calc(-1 * var(--space-9)); }
147
+ .sui-ml-auto { margin-left: auto; }
148
+ }