@mich8060/unified-design-system 0.1.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 (454) hide show
  1. package/LICENSE +21 -0
  2. package/README.lib.md +103 -0
  3. package/README.md +265 -0
  4. package/dist/LICENSE +21 -0
  5. package/dist/README.md +103 -0
  6. package/dist/package.json +49 -0
  7. package/dist/styles.css +20544 -0
  8. package/dist/uds-components.es.js +67031 -0
  9. package/dist/uds-components.es.js.map +1 -0
  10. package/dist/uds-components.umd.js +67048 -0
  11. package/dist/uds-components.umd.js.map +1 -0
  12. package/package.json +158 -0
  13. package/src/styles/_typography.scss +932 -0
  14. package/src/styles/_utilities.scss +3738 -0
  15. package/src/styles/_variables.scss +620 -0
  16. package/src/styles/prism-custom.css +204 -0
  17. package/src/styles/prism-custom.scss +205 -0
  18. package/src/styles/tokens.css +1463 -0
  19. package/src/styles/tokens.scss +1116 -0
  20. package/src/ui/Accordion/Accordion.ai.md +69 -0
  21. package/src/ui/Accordion/Accordion.scss +87 -0
  22. package/src/ui/Accordion/Accordion.spec.ts +25 -0
  23. package/src/ui/Accordion/Accordion.stories.tsx +46 -0
  24. package/src/ui/Accordion/Accordion.test.tsx +54 -0
  25. package/src/ui/Accordion/Accordion.tsx +73 -0
  26. package/src/ui/Accordion/Accordion.types.ts +15 -0
  27. package/src/ui/Accordion/index.js +1 -0
  28. package/src/ui/ActionMenu/ActionMenu.ai.md +106 -0
  29. package/src/ui/ActionMenu/ActionMenu.jsx +437 -0
  30. package/src/ui/ActionMenu/ActionMenu.scss +252 -0
  31. package/src/ui/ActionMenu/ActionMenu.spec.ts +12 -0
  32. package/src/ui/ActionMenu/ActionMenu.stories.jsx +14 -0
  33. package/src/ui/ActionMenu/ActionMenu.stories.tsx +124 -0
  34. package/src/ui/ActionMenu/ActionMenu.test.tsx +1 -0
  35. package/src/ui/ActionMenu/ActionMenu.tsx +6 -0
  36. package/src/ui/ActionMenu/ActionMenu.types.ts +3 -0
  37. package/src/ui/ActionMenu/index.js +1 -0
  38. package/src/ui/Avatar/Avatar.ai.md +54 -0
  39. package/src/ui/Avatar/Avatar.jsx +49 -0
  40. package/src/ui/Avatar/Avatar.scss +87 -0
  41. package/src/ui/Avatar/Avatar.spec.ts +12 -0
  42. package/src/ui/Avatar/Avatar.stories.jsx +14 -0
  43. package/src/ui/Avatar/Avatar.stories.tsx +14 -0
  44. package/src/ui/Avatar/Avatar.test.tsx +1 -0
  45. package/src/ui/Avatar/Avatar.tsx +6 -0
  46. package/src/ui/Avatar/Avatar.types.ts +3 -0
  47. package/src/ui/Avatar/index.js +1 -0
  48. package/src/ui/Badge/Badge.ai.md +37 -0
  49. package/src/ui/Badge/Badge.jsx +64 -0
  50. package/src/ui/Badge/Badge.scss +84 -0
  51. package/src/ui/Badge/Badge.spec.ts +12 -0
  52. package/src/ui/Badge/Badge.stories.jsx +14 -0
  53. package/src/ui/Badge/Badge.stories.tsx +14 -0
  54. package/src/ui/Badge/Badge.test.tsx +1 -0
  55. package/src/ui/Badge/Badge.tsx +6 -0
  56. package/src/ui/Badge/Badge.types.ts +3 -0
  57. package/src/ui/Badge/index.js +1 -0
  58. package/src/ui/Branding/Branding.ai.md +81 -0
  59. package/src/ui/Branding/Branding.jsx +127 -0
  60. package/src/ui/Branding/Branding.scss +57 -0
  61. package/src/ui/Branding/Branding.spec.ts +12 -0
  62. package/src/ui/Branding/Branding.stories.jsx +14 -0
  63. package/src/ui/Branding/Branding.stories.tsx +14 -0
  64. package/src/ui/Branding/Branding.test.tsx +1 -0
  65. package/src/ui/Branding/Branding.tsx +6 -0
  66. package/src/ui/Branding/Branding.types.ts +3 -0
  67. package/src/ui/Branding/index.js +1 -0
  68. package/src/ui/Breadcrumb/Breadcrumb.ai.md +50 -0
  69. package/src/ui/Breadcrumb/Breadcrumb.jsx +167 -0
  70. package/src/ui/Breadcrumb/Breadcrumb.scss +46 -0
  71. package/src/ui/Breadcrumb/Breadcrumb.spec.ts +12 -0
  72. package/src/ui/Breadcrumb/Breadcrumb.stories.jsx +26 -0
  73. package/src/ui/Breadcrumb/Breadcrumb.stories.tsx +14 -0
  74. package/src/ui/Breadcrumb/Breadcrumb.test.tsx +1 -0
  75. package/src/ui/Breadcrumb/Breadcrumb.tsx +6 -0
  76. package/src/ui/Breadcrumb/Breadcrumb.types.ts +3 -0
  77. package/src/ui/Breadcrumb/index.js +2 -0
  78. package/src/ui/Button/Button.ai.md +122 -0
  79. package/src/ui/Button/Button.figma.tsx +49 -0
  80. package/src/ui/Button/Button.scss +188 -0
  81. package/src/ui/Button/Button.spec.ts +52 -0
  82. package/src/ui/Button/Button.stories.tsx +199 -0
  83. package/src/ui/Button/Button.test.tsx +85 -0
  84. package/src/ui/Button/Button.tsx +131 -0
  85. package/src/ui/Button/Button.types.ts +32 -0
  86. package/src/ui/Button/index.js +1 -0
  87. package/src/ui/Calendar/Calendar.ai.md +151 -0
  88. package/src/ui/Calendar/Calendar.jsx +504 -0
  89. package/src/ui/Calendar/Calendar.scss +451 -0
  90. package/src/ui/Calendar/Calendar.spec.ts +12 -0
  91. package/src/ui/Calendar/Calendar.stories.jsx +14 -0
  92. package/src/ui/Calendar/Calendar.stories.tsx +14 -0
  93. package/src/ui/Calendar/Calendar.test.tsx +1 -0
  94. package/src/ui/Calendar/Calendar.tsx +6 -0
  95. package/src/ui/Calendar/Calendar.types.ts +3 -0
  96. package/src/ui/Calendar/index.js +1 -0
  97. package/src/ui/Card/Card.ai.md +41 -0
  98. package/src/ui/Card/Card.jsx +25 -0
  99. package/src/ui/Card/Card.scss +47 -0
  100. package/src/ui/Card/Card.spec.ts +12 -0
  101. package/src/ui/Card/Card.stories.jsx +28 -0
  102. package/src/ui/Card/Card.stories.tsx +14 -0
  103. package/src/ui/Card/Card.test.tsx +1 -0
  104. package/src/ui/Card/Card.tsx +6 -0
  105. package/src/ui/Card/Card.types.ts +3 -0
  106. package/src/ui/Card/index.js +1 -0
  107. package/src/ui/Checkbox/Checkbox.ai.md +50 -0
  108. package/src/ui/Checkbox/Checkbox.jsx +73 -0
  109. package/src/ui/Checkbox/Checkbox.scss +115 -0
  110. package/src/ui/Checkbox/Checkbox.spec.ts +12 -0
  111. package/src/ui/Checkbox/Checkbox.stories.jsx +14 -0
  112. package/src/ui/Checkbox/Checkbox.stories.tsx +14 -0
  113. package/src/ui/Checkbox/Checkbox.test.tsx +1 -0
  114. package/src/ui/Checkbox/Checkbox.tsx +6 -0
  115. package/src/ui/Checkbox/Checkbox.types.ts +3 -0
  116. package/src/ui/Checkbox/index.js +1 -0
  117. package/src/ui/Chip/Chip.ai.md +43 -0
  118. package/src/ui/Chip/Chip.jsx +102 -0
  119. package/src/ui/Chip/Chip.scss +118 -0
  120. package/src/ui/Chip/Chip.spec.ts +12 -0
  121. package/src/ui/Chip/Chip.stories.jsx +14 -0
  122. package/src/ui/Chip/Chip.stories.tsx +14 -0
  123. package/src/ui/Chip/Chip.test.tsx +1 -0
  124. package/src/ui/Chip/Chip.tsx +6 -0
  125. package/src/ui/Chip/Chip.types.ts +3 -0
  126. package/src/ui/Chip/index.js +1 -0
  127. package/src/ui/Datepicker/Datepicker.ai.md +45 -0
  128. package/src/ui/Datepicker/Datepicker.jsx +330 -0
  129. package/src/ui/Datepicker/Datepicker.scss +206 -0
  130. package/src/ui/Datepicker/Datepicker.spec.ts +12 -0
  131. package/src/ui/Datepicker/Datepicker.stories.jsx +14 -0
  132. package/src/ui/Datepicker/Datepicker.stories.tsx +14 -0
  133. package/src/ui/Datepicker/Datepicker.test.tsx +1 -0
  134. package/src/ui/Datepicker/Datepicker.tsx +6 -0
  135. package/src/ui/Datepicker/Datepicker.types.ts +3 -0
  136. package/src/ui/Datepicker/index.js +2 -0
  137. package/src/ui/Divider/Divider.ai.md +34 -0
  138. package/src/ui/Divider/Divider.jsx +89 -0
  139. package/src/ui/Divider/Divider.scss +116 -0
  140. package/src/ui/Divider/Divider.spec.ts +12 -0
  141. package/src/ui/Divider/Divider.stories.jsx +14 -0
  142. package/src/ui/Divider/Divider.stories.tsx +14 -0
  143. package/src/ui/Divider/Divider.test.tsx +1 -0
  144. package/src/ui/Divider/Divider.tsx +6 -0
  145. package/src/ui/Divider/Divider.types.ts +3 -0
  146. package/src/ui/Divider/index.js +1 -0
  147. package/src/ui/DotStatus/DotStatus.ai.md +36 -0
  148. package/src/ui/DotStatus/DotStatus.jsx +64 -0
  149. package/src/ui/DotStatus/DotStatus.scss +87 -0
  150. package/src/ui/DotStatus/DotStatus.spec.ts +12 -0
  151. package/src/ui/DotStatus/DotStatus.stories.jsx +14 -0
  152. package/src/ui/DotStatus/DotStatus.stories.tsx +14 -0
  153. package/src/ui/DotStatus/DotStatus.test.tsx +1 -0
  154. package/src/ui/DotStatus/DotStatus.tsx +6 -0
  155. package/src/ui/DotStatus/DotStatus.types.ts +3 -0
  156. package/src/ui/DotStatus/index.js +1 -0
  157. package/src/ui/Dropdown/Dropdown.ai.md +118 -0
  158. package/src/ui/Dropdown/Dropdown.scss +129 -0
  159. package/src/ui/Dropdown/Dropdown.spec.ts +54 -0
  160. package/src/ui/Dropdown/Dropdown.stories.tsx +59 -0
  161. package/src/ui/Dropdown/Dropdown.test.tsx +37 -0
  162. package/src/ui/Dropdown/Dropdown.tsx +119 -0
  163. package/src/ui/Dropdown/Dropdown.types.ts +25 -0
  164. package/src/ui/Dropdown/index.js +1 -0
  165. package/src/ui/EventCard/EventCard.ai.md +101 -0
  166. package/src/ui/EventCard/EventCard.jsx +92 -0
  167. package/src/ui/EventCard/EventCard.scss +186 -0
  168. package/src/ui/EventCard/EventCard.spec.ts +12 -0
  169. package/src/ui/EventCard/EventCard.stories.jsx +14 -0
  170. package/src/ui/EventCard/EventCard.stories.tsx +14 -0
  171. package/src/ui/EventCard/EventCard.test.tsx +1 -0
  172. package/src/ui/EventCard/EventCard.tsx +6 -0
  173. package/src/ui/EventCard/EventCard.types.ts +3 -0
  174. package/src/ui/EventCard/index.js +1 -0
  175. package/src/ui/Field/Field.ai.md +69 -0
  176. package/src/ui/Field/Field.jsx +89 -0
  177. package/src/ui/Field/Field.scss +76 -0
  178. package/src/ui/Field/Field.spec.ts +12 -0
  179. package/src/ui/Field/Field.stories.jsx +14 -0
  180. package/src/ui/Field/Field.stories.tsx +14 -0
  181. package/src/ui/Field/Field.test.tsx +1 -0
  182. package/src/ui/Field/Field.tsx +6 -0
  183. package/src/ui/Field/Field.types.ts +3 -0
  184. package/src/ui/Field/index.js +1 -0
  185. package/src/ui/FileUpload/FileUpload.ai.md +38 -0
  186. package/src/ui/FileUpload/FileUpload.figma.tsx +28 -0
  187. package/src/ui/FileUpload/FileUpload.jsx +153 -0
  188. package/src/ui/FileUpload/FileUpload.scss +78 -0
  189. package/src/ui/FileUpload/FileUpload.spec.ts +12 -0
  190. package/src/ui/FileUpload/FileUpload.stories.jsx +14 -0
  191. package/src/ui/FileUpload/FileUpload.stories.tsx +14 -0
  192. package/src/ui/FileUpload/FileUpload.test.tsx +1 -0
  193. package/src/ui/FileUpload/FileUpload.tsx +6 -0
  194. package/src/ui/FileUpload/FileUpload.types.ts +3 -0
  195. package/src/ui/FileUpload/index.js +2 -0
  196. package/src/ui/Flex/Flex.ai.md +130 -0
  197. package/src/ui/Flex/Flex.jsx +53 -0
  198. package/src/ui/Flex/Flex.scss +119 -0
  199. package/src/ui/Flex/Flex.spec.ts +12 -0
  200. package/src/ui/Flex/Flex.stories.jsx +14 -0
  201. package/src/ui/Flex/Flex.stories.tsx +14 -0
  202. package/src/ui/Flex/Flex.test.tsx +1 -0
  203. package/src/ui/Flex/Flex.tsx +6 -0
  204. package/src/ui/Flex/Flex.types.ts +3 -0
  205. package/src/ui/Flex/index.js +1 -0
  206. package/src/ui/Icon/Icon.ai.md +46 -0
  207. package/src/ui/Icon/Icon.figma.tsx +22 -0
  208. package/src/ui/Icon/Icon.jsx +47 -0
  209. package/src/ui/Icon/Icon.scss +1 -0
  210. package/src/ui/Icon/Icon.spec.ts +12 -0
  211. package/src/ui/Icon/Icon.stories.jsx +14 -0
  212. package/src/ui/Icon/Icon.stories.tsx +14 -0
  213. package/src/ui/Icon/Icon.test.tsx +1 -0
  214. package/src/ui/Icon/Icon.tsx +6 -0
  215. package/src/ui/Icon/Icon.types.ts +3 -0
  216. package/src/ui/Icon/index.js +1 -0
  217. package/src/ui/ImageAspect/ImageAspect.ai.md +37 -0
  218. package/src/ui/ImageAspect/ImageAspect.jsx +56 -0
  219. package/src/ui/ImageAspect/ImageAspect.scss +62 -0
  220. package/src/ui/ImageAspect/ImageAspect.spec.ts +12 -0
  221. package/src/ui/ImageAspect/ImageAspect.stories.jsx +14 -0
  222. package/src/ui/ImageAspect/ImageAspect.stories.tsx +14 -0
  223. package/src/ui/ImageAspect/ImageAspect.test.tsx +1 -0
  224. package/src/ui/ImageAspect/ImageAspect.tsx +6 -0
  225. package/src/ui/ImageAspect/ImageAspect.types.ts +3 -0
  226. package/src/ui/ImageAspect/index.js +1 -0
  227. package/src/ui/Input/Input.ai.md +89 -0
  228. package/src/ui/Input/Input.figma.tsx +35 -0
  229. package/src/ui/Input/Input.scss +126 -0
  230. package/src/ui/Input/Input.spec.ts +54 -0
  231. package/src/ui/Input/Input.stories.tsx +72 -0
  232. package/src/ui/Input/Input.test.tsx +70 -0
  233. package/src/ui/Input/Input.tsx +91 -0
  234. package/src/ui/Input/Input.types.ts +22 -0
  235. package/src/ui/Input/index.js +2 -0
  236. package/src/ui/Key/Key.ai.md +31 -0
  237. package/src/ui/Key/Key.jsx +37 -0
  238. package/src/ui/Key/Key.scss +31 -0
  239. package/src/ui/Key/Key.spec.ts +12 -0
  240. package/src/ui/Key/Key.stories.jsx +14 -0
  241. package/src/ui/Key/Key.stories.tsx +14 -0
  242. package/src/ui/Key/Key.test.tsx +1 -0
  243. package/src/ui/Key/Key.tsx +6 -0
  244. package/src/ui/Key/Key.types.ts +3 -0
  245. package/src/ui/Key/index.js +1 -0
  246. package/src/ui/Menu/Menu.jsx +232 -0
  247. package/src/ui/Menu/Menu.scss +370 -0
  248. package/src/ui/Menu/Menu.spec.ts +12 -0
  249. package/src/ui/Menu/Menu.stories.jsx +41 -0
  250. package/src/ui/Menu/Menu.stories.tsx +14 -0
  251. package/src/ui/Menu/Menu.test.tsx +1 -0
  252. package/src/ui/Menu/Menu.tsx +6 -0
  253. package/src/ui/Menu/Menu.types.ts +3 -0
  254. package/src/ui/Menu/index.js +1 -0
  255. package/src/ui/MicroCalendar/MicroCalendar.ai.md +35 -0
  256. package/src/ui/MicroCalendar/MicroCalendar.jsx +393 -0
  257. package/src/ui/MicroCalendar/MicroCalendar.scss +289 -0
  258. package/src/ui/MicroCalendar/MicroCalendar.spec.ts +12 -0
  259. package/src/ui/MicroCalendar/MicroCalendar.stories.jsx +14 -0
  260. package/src/ui/MicroCalendar/MicroCalendar.stories.tsx +14 -0
  261. package/src/ui/MicroCalendar/MicroCalendar.test.tsx +1 -0
  262. package/src/ui/MicroCalendar/MicroCalendar.tsx +6 -0
  263. package/src/ui/MicroCalendar/MicroCalendar.types.ts +3 -0
  264. package/src/ui/MicroCalendar/index.js +1 -0
  265. package/src/ui/Modal/Modal.ai.md +150 -0
  266. package/src/ui/Modal/Modal.jsx +173 -0
  267. package/src/ui/Modal/Modal.scss +179 -0
  268. package/src/ui/Modal/Modal.spec.ts +12 -0
  269. package/src/ui/Modal/Modal.stories.jsx +14 -0
  270. package/src/ui/Modal/Modal.stories.tsx +14 -0
  271. package/src/ui/Modal/Modal.test.tsx +1 -0
  272. package/src/ui/Modal/Modal.tsx +6 -0
  273. package/src/ui/Modal/Modal.types.ts +3 -0
  274. package/src/ui/Modal/index.js +1 -0
  275. package/src/ui/Pagination/Pagination.ai.md +30 -0
  276. package/src/ui/Pagination/Pagination.jsx +237 -0
  277. package/src/ui/Pagination/Pagination.scss +182 -0
  278. package/src/ui/Pagination/Pagination.spec.ts +12 -0
  279. package/src/ui/Pagination/Pagination.stories.jsx +14 -0
  280. package/src/ui/Pagination/Pagination.stories.tsx +14 -0
  281. package/src/ui/Pagination/Pagination.test.tsx +1 -0
  282. package/src/ui/Pagination/Pagination.tsx +6 -0
  283. package/src/ui/Pagination/Pagination.types.ts +3 -0
  284. package/src/ui/Pagination/index.js +1 -0
  285. package/src/ui/PillToggle/PillToggle.ai.md +44 -0
  286. package/src/ui/PillToggle/PillToggle.jsx +56 -0
  287. package/src/ui/PillToggle/PillToggle.scss +84 -0
  288. package/src/ui/PillToggle/PillToggle.spec.ts +12 -0
  289. package/src/ui/PillToggle/PillToggle.stories.jsx +14 -0
  290. package/src/ui/PillToggle/PillToggle.stories.tsx +14 -0
  291. package/src/ui/PillToggle/PillToggle.test.tsx +1 -0
  292. package/src/ui/PillToggle/PillToggle.tsx +6 -0
  293. package/src/ui/PillToggle/PillToggle.types.ts +3 -0
  294. package/src/ui/PillToggle/index.js +1 -0
  295. package/src/ui/Playground/Playground.ai.md +96 -0
  296. package/src/ui/Playground/Playground.jsx +524 -0
  297. package/src/ui/Playground/Playground.scss +310 -0
  298. package/src/ui/Playground/Playground.spec.ts +12 -0
  299. package/src/ui/Playground/Playground.stories.jsx +14 -0
  300. package/src/ui/Playground/Playground.stories.tsx +14 -0
  301. package/src/ui/Playground/Playground.test.tsx +1 -0
  302. package/src/ui/Playground/Playground.tsx +6 -0
  303. package/src/ui/Playground/Playground.types.ts +3 -0
  304. package/src/ui/Playground/index.js +2 -0
  305. package/src/ui/ProgressCircle/ProgressCircle.ai.md +36 -0
  306. package/src/ui/ProgressCircle/ProgressCircle.jsx +147 -0
  307. package/src/ui/ProgressCircle/ProgressCircle.scss +143 -0
  308. package/src/ui/ProgressCircle/ProgressCircle.spec.ts +12 -0
  309. package/src/ui/ProgressCircle/ProgressCircle.stories.jsx +14 -0
  310. package/src/ui/ProgressCircle/ProgressCircle.stories.tsx +14 -0
  311. package/src/ui/ProgressCircle/ProgressCircle.test.tsx +1 -0
  312. package/src/ui/ProgressCircle/ProgressCircle.tsx +6 -0
  313. package/src/ui/ProgressCircle/ProgressCircle.types.ts +3 -0
  314. package/src/ui/ProgressCircle/index.js +1 -0
  315. package/src/ui/ProgressIndicator/ProgressIndicator.ai.md +27 -0
  316. package/src/ui/ProgressIndicator/ProgressIndicator.jsx +92 -0
  317. package/src/ui/ProgressIndicator/ProgressIndicator.scss +133 -0
  318. package/src/ui/ProgressIndicator/ProgressIndicator.spec.ts +12 -0
  319. package/src/ui/ProgressIndicator/ProgressIndicator.stories.jsx +14 -0
  320. package/src/ui/ProgressIndicator/ProgressIndicator.stories.tsx +14 -0
  321. package/src/ui/ProgressIndicator/ProgressIndicator.test.tsx +1 -0
  322. package/src/ui/ProgressIndicator/ProgressIndicator.tsx +6 -0
  323. package/src/ui/ProgressIndicator/ProgressIndicator.types.ts +3 -0
  324. package/src/ui/ProgressIndicator/index.js +1 -0
  325. package/src/ui/Radio/Radio.ai.md +53 -0
  326. package/src/ui/Radio/Radio.jsx +57 -0
  327. package/src/ui/Radio/Radio.scss +89 -0
  328. package/src/ui/Radio/Radio.spec.ts +12 -0
  329. package/src/ui/Radio/Radio.stories.jsx +14 -0
  330. package/src/ui/Radio/Radio.stories.tsx +14 -0
  331. package/src/ui/Radio/Radio.test.tsx +1 -0
  332. package/src/ui/Radio/Radio.tsx +6 -0
  333. package/src/ui/Radio/Radio.types.ts +3 -0
  334. package/src/ui/Radio/index.js +1 -0
  335. package/src/ui/Slider/Slider.ai.md +33 -0
  336. package/src/ui/Slider/Slider.jsx +283 -0
  337. package/src/ui/Slider/Slider.scss +156 -0
  338. package/src/ui/Slider/Slider.spec.ts +12 -0
  339. package/src/ui/Slider/Slider.stories.jsx +14 -0
  340. package/src/ui/Slider/Slider.stories.tsx +14 -0
  341. package/src/ui/Slider/Slider.test.tsx +1 -0
  342. package/src/ui/Slider/Slider.tsx +6 -0
  343. package/src/ui/Slider/Slider.types.ts +3 -0
  344. package/src/ui/Slider/index.js +1 -0
  345. package/src/ui/Status/Status.ai.md +36 -0
  346. package/src/ui/Status/Status.jsx +66 -0
  347. package/src/ui/Status/Status.scss +90 -0
  348. package/src/ui/Status/Status.spec.ts +12 -0
  349. package/src/ui/Status/Status.stories.jsx +14 -0
  350. package/src/ui/Status/Status.stories.tsx +14 -0
  351. package/src/ui/Status/Status.test.tsx +1 -0
  352. package/src/ui/Status/Status.tsx +6 -0
  353. package/src/ui/Status/Status.types.ts +3 -0
  354. package/src/ui/Status/index.js +1 -0
  355. package/src/ui/Steps/Steps.ai.md +56 -0
  356. package/src/ui/Steps/Steps.jsx +201 -0
  357. package/src/ui/Steps/Steps.scss +240 -0
  358. package/src/ui/Steps/Steps.spec.ts +12 -0
  359. package/src/ui/Steps/Steps.stories.jsx +14 -0
  360. package/src/ui/Steps/Steps.stories.tsx +14 -0
  361. package/src/ui/Steps/Steps.test.tsx +1 -0
  362. package/src/ui/Steps/Steps.tsx +6 -0
  363. package/src/ui/Steps/Steps.types.ts +3 -0
  364. package/src/ui/Steps/index.js +1 -0
  365. package/src/ui/Table/Table.ai.md +108 -0
  366. package/src/ui/Table/Table.jsx +143 -0
  367. package/src/ui/Table/Table.scss +90 -0
  368. package/src/ui/Table/Table.spec.ts +12 -0
  369. package/src/ui/Table/Table.stories.jsx +14 -0
  370. package/src/ui/Table/Table.stories.tsx +14 -0
  371. package/src/ui/Table/Table.test.tsx +1 -0
  372. package/src/ui/Table/Table.tsx +6 -0
  373. package/src/ui/Table/Table.types.ts +3 -0
  374. package/src/ui/Table/index.js +1 -0
  375. package/src/ui/Tabs/TabItem.jsx +80 -0
  376. package/src/ui/Tabs/Tabs.ai.md +52 -0
  377. package/src/ui/Tabs/Tabs.figma.tsx +30 -0
  378. package/src/ui/Tabs/Tabs.jsx +318 -0
  379. package/src/ui/Tabs/Tabs.scss +164 -0
  380. package/src/ui/Tabs/Tabs.spec.ts +12 -0
  381. package/src/ui/Tabs/Tabs.stories.jsx +18 -0
  382. package/src/ui/Tabs/Tabs.stories.tsx +14 -0
  383. package/src/ui/Tabs/Tabs.test.tsx +1 -0
  384. package/src/ui/Tabs/Tabs.tsx +6 -0
  385. package/src/ui/Tabs/Tabs.types.ts +3 -0
  386. package/src/ui/Tabs/index.js +3 -0
  387. package/src/ui/Tag/Tag.ai.md +59 -0
  388. package/src/ui/Tag/Tag.figma.tsx +29 -0
  389. package/src/ui/Tag/Tag.jsx +93 -0
  390. package/src/ui/Tag/Tag.scss +258 -0
  391. package/src/ui/Tag/Tag.spec.ts +12 -0
  392. package/src/ui/Tag/Tag.stories.jsx +14 -0
  393. package/src/ui/Tag/Tag.stories.tsx +14 -0
  394. package/src/ui/Tag/Tag.test.tsx +1 -0
  395. package/src/ui/Tag/Tag.tsx +6 -0
  396. package/src/ui/Tag/Tag.types.ts +3 -0
  397. package/src/ui/Tag/index.js +2 -0
  398. package/src/ui/Textarea/Textarea.ai.md +40 -0
  399. package/src/ui/Textarea/Textarea.figma.tsx +35 -0
  400. package/src/ui/Textarea/Textarea.jsx +68 -0
  401. package/src/ui/Textarea/Textarea.scss +71 -0
  402. package/src/ui/Textarea/Textarea.spec.ts +12 -0
  403. package/src/ui/Textarea/Textarea.stories.jsx +14 -0
  404. package/src/ui/Textarea/Textarea.stories.tsx +14 -0
  405. package/src/ui/Textarea/Textarea.test.tsx +1 -0
  406. package/src/ui/Textarea/Textarea.tsx +6 -0
  407. package/src/ui/Textarea/Textarea.types.ts +3 -0
  408. package/src/ui/Textarea/index.js +2 -0
  409. package/src/ui/Toast/Toast.ai.md +47 -0
  410. package/src/ui/Toast/Toast.jsx +75 -0
  411. package/src/ui/Toast/Toast.scss +132 -0
  412. package/src/ui/Toast/Toast.spec.ts +12 -0
  413. package/src/ui/Toast/Toast.stories.jsx +14 -0
  414. package/src/ui/Toast/Toast.stories.tsx +14 -0
  415. package/src/ui/Toast/Toast.test.tsx +1 -0
  416. package/src/ui/Toast/Toast.tsx +6 -0
  417. package/src/ui/Toast/Toast.types.ts +3 -0
  418. package/src/ui/Toast/index.js +2 -0
  419. package/src/ui/Toggle/Toggle.ai.md +37 -0
  420. package/src/ui/Toggle/Toggle.jsx +73 -0
  421. package/src/ui/Toggle/Toggle.scss +139 -0
  422. package/src/ui/Toggle/Toggle.spec.ts +12 -0
  423. package/src/ui/Toggle/Toggle.stories.jsx +14 -0
  424. package/src/ui/Toggle/Toggle.stories.tsx +14 -0
  425. package/src/ui/Toggle/Toggle.test.tsx +1 -0
  426. package/src/ui/Toggle/Toggle.tsx +6 -0
  427. package/src/ui/Toggle/Toggle.types.ts +3 -0
  428. package/src/ui/Toggle/index.js +1 -0
  429. package/src/ui/Tooltip/Tooltip.ai.md +33 -0
  430. package/src/ui/Tooltip/Tooltip.figma.tsx +24 -0
  431. package/src/ui/Tooltip/Tooltip.jsx +125 -0
  432. package/src/ui/Tooltip/Tooltip.scss +80 -0
  433. package/src/ui/Tooltip/Tooltip.spec.ts +12 -0
  434. package/src/ui/Tooltip/Tooltip.stories.jsx +14 -0
  435. package/src/ui/Tooltip/Tooltip.stories.tsx +14 -0
  436. package/src/ui/Tooltip/Tooltip.test.tsx +1 -0
  437. package/src/ui/Tooltip/Tooltip.tsx +6 -0
  438. package/src/ui/Tooltip/Tooltip.types.ts +3 -0
  439. package/src/ui/Tooltip/index.js +2 -0
  440. package/src/ui/UDS/UDS.jsx +52 -0
  441. package/src/ui/UDS/UDS.scss +49 -0
  442. package/src/ui/UDS/UDS.spec.ts +12 -0
  443. package/src/ui/UDS/UDS.stories.jsx +22 -0
  444. package/src/ui/UDS/UDS.stories.tsx +14 -0
  445. package/src/ui/UDS/UDS.test.tsx +1 -0
  446. package/src/ui/UDS/UDS.tsx +6 -0
  447. package/src/ui/UDS/UDS.types.ts +3 -0
  448. package/src/ui/UDS/index.js +1 -0
  449. package/src/ui/_spec/createMetaFromSpec.ts +35 -0
  450. package/src/ui/_spec/createStoryArgsFromSpec.ts +8 -0
  451. package/src/ui/_spec/generated/spec-props-reference.md +55 -0
  452. package/src/ui/_spec/specStorySync.test.ts +73 -0
  453. package/src/ui/_spec/types.ts +21 -0
  454. package/src/ui/index.js +66 -0
package/src/styles/_typography.scss ADDED
@@ -0,0 +1,932 @@
1
+ :root {
2
+ --uds-font-family:
3
+ "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
4
+ "Helvetica Neue", Arial;
5
+ --uds-font-weight: 400;
6
+ --uds-font-weight-medium: 500;
7
+ --uds-font-weight-semibold: 600;
8
+ --uds-font-weight-bold: 700;
9
+ --uds-font-size-12: 12px;
10
+ --uds-font-size-14: 14px;
11
+ --uds-font-size-16: 16px;
12
+ --uds-font-size-18: 18px;
13
+ --uds-font-size-20: 20px;
14
+ --uds-font-size-24: 24px;
15
+ --uds-font-size-28: 28px;
16
+ --uds-font-size-32: 32px;
17
+ --uds-font-size-36: 36px;
18
+ --uds-font-size-48: 48px;
19
+ --uds-font-size-60: 60px;
20
+ --uds-font-size-72: 72px;
21
+ --uds-font-size-96: 96px;
22
+ --uds-font-size-128: 128px;
23
+ --uds-line-12: 16px;
24
+ --uds-line-14: 20px;
25
+ --uds-line-16: 24px;
26
+ --uds-line-18: 27px;
27
+ --uds-line-20: 28px;
28
+ --uds-line-24: 32px;
29
+ --uds-line-28: 36px;
30
+ --uds-line-32: 40px;
31
+ --uds-line-36: 48px;
32
+ --uds-line-40: 40px;
33
+ --uds-line-48: 64px;
34
+ --uds-line-60: 80px;
35
+ --uds-line-72: 96px;
36
+ --uds-line-96: 128px;
37
+ --uds-line-128: 160px;
38
+ --uds-lhu-12: 1.333;
39
+ --uds-lhu-14: 1.429;
40
+ --uds-lhu-16: 1.5;
41
+ --uds-lhu-20: 1.4;
42
+ --uds-lhu-24: 1.333;
43
+ --uds-lhu-32: 1.25;
44
+ --uds-label-12-line: var(--uds-line-12);
45
+ --uds-label-16-line: var(--uds-line-16);
46
+ --uds-label-20-line: var(--uds-line-20);
47
+ --uds-label-24-line: var(--uds-line-24);
48
+ --uds-lhu-label-12: var(--uds-lhu-12);
49
+ --uds-lhu-label-16: var(--uds-lhu-16);
50
+ --uds-lhu-label-20: var(--uds-lhu-20);
51
+ --uds-lhu-label-24: var(--uds-lhu-24);
52
+ --uds-paragraph-12-size: var(--uds-font-size-12);
53
+ --uds-paragraph-16-size: var(--uds-font-size-16);
54
+ --uds-paragraph-20-size: var(--uds-font-size-20);
55
+ --uds-paragraph-24-size: var(--uds-font-size-24);
56
+ --uds-paragraph-12-line: 18px;
57
+ --uds-paragraph-16-line: 26px;
58
+ --uds-paragraph-20-line: 30px;
59
+ --uds-paragraph-24-line: 36px;
60
+ --uds-lhu-body-12: 1.5;
61
+ --uds-lhu-body-16: 1.625;
62
+ --uds-lhu-body-20: 1.5;
63
+ --uds-lhu-body-24: 1.5;
64
+ --uds-line-heading-20: var(--uds-line-32);
65
+ --uds-line-heading-24: var(--uds-line-32);
66
+ --uds-line-heading-32: var(--uds-line-40);
67
+ --uds-lhu-heading-20: 1.6;
68
+ --uds-lhu-heading-24: 1.333;
69
+ --uds-lhu-heading-32: 1.25;
70
+ --uds-letter-spacing-tight: -0.02em;
71
+ --uds-letter-spacing-medium: -0.01em;
72
+ --uds-letter-spacing-normal: 0em;
73
+ --uds-letter-spacing-loose: 0.01em;
74
+ }
75
+
76
+ .uds {
77
+ &-display {
78
+ &-128 {
79
+ font-size: var(--uds-font-size-128);
80
+ line-height: var(--uds-line-128);
81
+ font-family: var(--uds-font-family);
82
+ font-weight: var(--uds-font-weight);
83
+ letter-spacing: -0.03em;
84
+ text-transform: uppercase;
85
+
86
+ &-medium {
87
+ font-weight: var(--uds-font-weight-medium);
88
+ }
89
+
90
+ &-semibold {
91
+ font-weight: var(--uds-font-weight-semibold);
92
+ }
93
+
94
+ &-bold {
95
+ font-weight: var(--uds-font-weight-bold);
96
+ }
97
+ }
98
+
99
+ &-96 {
100
+ font-size: var(--uds-font-size-96);
101
+ line-height: var(--uds-line-96);
102
+ font-family: var(--uds-font-family);
103
+ font-weight: var(--uds-font-weight);
104
+ letter-spacing: -0.02em;
105
+ text-transform: uppercase;
106
+
107
+ &-medium {
108
+ font-weight: var(--uds-font-weight-medium);
109
+ }
110
+
111
+ &-semibold {
112
+ font-weight: var(--uds-font-weight-semibold);
113
+ }
114
+
115
+ &-bold {
116
+ font-weight: var(--uds-font-weight-bold);
117
+ }
118
+ }
119
+
120
+ &-72 {
121
+ font-size: var(--uds-font-size-72);
122
+ line-height: var(--uds-line-72);
123
+ font-family: var(--uds-font-family);
124
+ font-weight: var(--uds-font-weight);
125
+ letter-spacing: -0.02em;
126
+ text-transform: uppercase;
127
+
128
+ &-medium {
129
+ font-weight: var(--uds-font-weight-medium);
130
+ }
131
+
132
+ &-semibold {
133
+ font-weight: var(--uds-font-weight-semibold);
134
+ }
135
+
136
+ &-bold {
137
+ font-weight: var(--uds-font-weight-bold);
138
+ }
139
+ }
140
+
141
+ &-60 {
142
+ font-size: var(--uds-font-size-60);
143
+ line-height: var(--uds-line-60);
144
+ font-family: var(--uds-font-family);
145
+ font-weight: var(--uds-font-weight);
146
+ letter-spacing: -0.02em;
147
+ text-transform: uppercase;
148
+
149
+ &-medium {
150
+ font-weight: var(--uds-font-weight-medium);
151
+ }
152
+
153
+ &-semibold {
154
+ font-weight: var(--uds-font-weight-semibold);
155
+ }
156
+
157
+ &-bold {
158
+ font-weight: var(--uds-font-weight-bold);
159
+ }
160
+ }
161
+
162
+ &-48 {
163
+ font-size: var(--uds-font-size-48);
164
+ line-height: var(--uds-line-48);
165
+ font-family: var(--uds-font-family);
166
+ font-weight: var(--uds-font-weight);
167
+ letter-spacing: -0.02em;
168
+ text-transform: uppercase;
169
+
170
+ &-medium {
171
+ font-weight: var(--uds-font-weight-medium);
172
+ }
173
+
174
+ &-semibold {
175
+ font-weight: var(--uds-font-weight-semibold);
176
+ }
177
+
178
+ &-bold {
179
+ font-weight: var(--uds-font-weight-bold);
180
+ }
181
+ }
182
+
183
+ &-36 {
184
+ font-size: var(--uds-font-size-36);
185
+ line-height: var(--uds-line-36);
186
+ font-family: var(--uds-font-family);
187
+ font-weight: var(--uds-font-weight);
188
+ letter-spacing: -0.02em;
189
+ text-transform: uppercase;
190
+
191
+ &-medium {
192
+ font-weight: var(--uds-font-weight-medium);
193
+ }
194
+
195
+ &-semibold {
196
+ font-weight: var(--uds-font-weight-semibold);
197
+ }
198
+
199
+ &-bold {
200
+ font-weight: var(--uds-font-weight-bold);
201
+ }
202
+ }
203
+ }
204
+
205
+ &-heading {
206
+ &-32 {
207
+ font-size: var(--uds-font-size-32);
208
+ line-height: var(--uds-line-32);
209
+ font-family: var(--uds-font-family);
210
+ font-weight: var(--uds-font-weight);
211
+ letter-spacing: 0em;
212
+
213
+ &-medium {
214
+ font-weight: var(--uds-font-weight-medium);
215
+ }
216
+
217
+ &-semibold {
218
+ font-weight: var(--uds-font-weight-semibold);
219
+ }
220
+
221
+ &-bold {
222
+ font-weight: var(--uds-font-weight-bold);
223
+ }
224
+ }
225
+
226
+ &-28 {
227
+ font-size: var(--uds-font-size-28);
228
+ line-height: var(--uds-line-28);
229
+ font-family: var(--uds-font-family);
230
+ font-weight: var(--uds-font-weight);
231
+ letter-spacing: 0em;
232
+
233
+ &-medium {
234
+ font-weight: var(--uds-font-weight-medium);
235
+ }
236
+
237
+ &-semibold {
238
+ font-weight: var(--uds-font-weight-semibold);
239
+ }
240
+
241
+ &-bold {
242
+ font-weight: var(--uds-font-weight-bold);
243
+ }
244
+ }
245
+
246
+ &-24 {
247
+ font-size: var(--uds-font-size-24);
248
+ line-height: var(--uds-line-24);
249
+ font-family: var(--uds-font-family);
250
+ font-weight: var(--uds-font-weight);
251
+ letter-spacing: 0em;
252
+
253
+ &-medium {
254
+ font-weight: var(--uds-font-weight-medium);
255
+ }
256
+
257
+ &-semibold {
258
+ font-weight: var(--uds-font-weight-semibold);
259
+ }
260
+
261
+ &-bold {
262
+ font-weight: var(--uds-font-weight-bold);
263
+ }
264
+ }
265
+ }
266
+
267
+ &-body {
268
+ &-20 {
269
+ font-size: var(--uds-font-size-20);
270
+ line-height: var(--uds-line-20);
271
+ font-family: var(--uds-font-family);
272
+ font-weight: var(--uds-font-weight);
273
+ letter-spacing: 0px;
274
+
275
+ &-medium {
276
+ font-weight: var(--uds-font-weight-medium);
277
+ letter-spacing: 0em;
278
+ }
279
+
280
+ &-semibold {
281
+ font-weight: var(--uds-font-weight-semibold);
282
+ }
283
+
284
+ &-bold {
285
+ font-weight: var(--uds-font-weight-bold);
286
+ }
287
+ }
288
+
289
+ &-16 {
290
+ font-size: var(--uds-font-size-16);
291
+ line-height: var(--uds-line-16);
292
+ font-family: var(--uds-font-family);
293
+ font-weight: var(--uds-font-weight);
294
+ letter-spacing: 0px;
295
+
296
+ &-medium {
297
+ font-weight: var(--uds-font-weight-medium);
298
+ letter-spacing: 0em;
299
+ }
300
+
301
+ &-semibold {
302
+ font-weight: var(--uds-font-weight-semibold);
303
+ }
304
+
305
+ &-bold {
306
+ font-weight: var(--uds-font-weight-bold);
307
+ }
308
+ }
309
+
310
+ &-14 {
311
+ font-size: var(--uds-font-size-14);
312
+ line-height: var(--uds-line-14);
313
+ font-family: var(--uds-font-family);
314
+ font-weight: var(--uds-font-weight);
315
+ letter-spacing: 0em;
316
+
317
+ &-medium {
318
+ font-weight: var(--uds-font-weight-medium);
319
+ }
320
+
321
+ &-semibold {
322
+ font-weight: var(--uds-font-weight-semibold);
323
+ }
324
+
325
+ &-bold {
326
+ font-weight: var(--uds-font-weight-bold);
327
+ }
328
+ }
329
+
330
+ &-12 {
331
+ font-size: var(--uds-font-size-12);
332
+ line-height: var(--uds-line-12);
333
+ font-family: var(--uds-font-family);
334
+ font-weight: var(--uds-font-weight);
335
+ letter-spacing: 0px;
336
+
337
+ &-medium {
338
+ font-weight: var(--uds-font-weight-medium);
339
+ letter-spacing: 0em;
340
+ }
341
+
342
+ &-semibold {
343
+ font-weight: var(--uds-font-weight-semibold);
344
+ }
345
+
346
+ &-bold {
347
+ font-weight: var(--uds-font-weight-bold);
348
+ }
349
+ }
350
+ }
351
+
352
+ &-paragraph {
353
+ &-20 {
354
+ font-size: var(--uds-font-size-20);
355
+ line-height: var(--uds-line-20);
356
+ font-family: var(--uds-font-family);
357
+ font-weight: var(--uds-font-weight);
358
+ letter-spacing: 0px;
359
+
360
+ &-medium {
361
+ font-weight: var(--uds-font-weight-medium);
362
+ letter-spacing: 0em;
363
+ }
364
+
365
+ &-semibold {
366
+ font-weight: var(--uds-font-weight-semibold);
367
+ letter-spacing: 0em;
368
+ }
369
+
370
+ &-bold {
371
+ font-weight: var(--uds-font-weight-bold);
372
+ letter-spacing: 0em;
373
+ }
374
+ }
375
+
376
+ &-18 {
377
+ font-size: var(--uds-font-size-18);
378
+ line-height: var(--uds-line-18);
379
+ font-family: var(--uds-font-family);
380
+ font-weight: var(--uds-font-weight);
381
+ letter-spacing: 0px;
382
+
383
+ &-medium {
384
+ font-weight: var(--uds-font-weight-medium);
385
+ letter-spacing: 0em;
386
+ }
387
+
388
+ &-semi-bold {
389
+ font-weight: var(--uds-font-weight-semibold);
390
+ letter-spacing: 0em;
391
+ }
392
+
393
+ &-bold {
394
+ font-weight: var(--uds-font-weight-bold);
395
+ letter-spacing: 0em;
396
+ }
397
+ }
398
+
399
+ &-16 {
400
+ font-size: var(--uds-font-size-16);
401
+ line-height: var(--uds-line-16);
402
+ font-family: var(--uds-font-family);
403
+ font-weight: var(--uds-font-weight);
404
+ letter-spacing: 0px;
405
+
406
+ &-medium {
407
+ font-weight: var(--uds-font-weight-medium);
408
+ letter-spacing: 0em;
409
+ }
410
+
411
+ &-semibold {
412
+ font-weight: var(--uds-font-weight-semibold);
413
+ letter-spacing: 0em;
414
+ }
415
+
416
+ &-bold {
417
+ font-weight: var(--uds-font-weight-bold);
418
+ letter-spacing: 0em;
419
+ }
420
+ }
421
+
422
+ &-14 {
423
+ font-size: var(--uds-font-size-14);
424
+ line-height: var(--uds-line-14);
425
+ font-family: var(--uds-font-family);
426
+ font-weight: var(--uds-font-weight);
427
+ letter-spacing: 0em;
428
+
429
+ &-medium {
430
+ font-weight: var(--uds-font-weight-medium);
431
+ }
432
+
433
+ &-semibold {
434
+ font-weight: var(--uds-font-weight-semibold);
435
+ }
436
+
437
+ &-bold {
438
+ font-weight: var(--uds-font-weight-bold);
439
+ }
440
+ }
441
+
442
+ &-12 {
443
+ font-size: var(--uds-font-size-12);
444
+ line-height: var(--uds-line-12);
445
+ font-family: var(--uds-font-family);
446
+ font-weight: var(--uds-font-weight);
447
+ letter-spacing: 0px;
448
+
449
+ &-medium {
450
+ font-weight: var(--uds-font-weight-medium);
451
+ letter-spacing: 0em;
452
+ }
453
+
454
+ &-semibold {
455
+ font-weight: var(--uds-font-weight-semibold);
456
+ letter-spacing: 0em;
457
+ }
458
+
459
+ &-bold {
460
+ font-weight: var(--uds-font-weight-bold);
461
+ letter-spacing: 0em;
462
+ }
463
+ }
464
+ }
465
+ }
466
+
467
+ // =============================================================================
468
+ // SCSS Mixins for Typography
469
+ // These mixins allow @include usage in component SCSS files
470
+ // =============================================================================
471
+
472
+ // Display mixins
473
+ @mixin uds-display-128 {
474
+ font-size: var(--uds-font-size-128);
475
+ line-height: var(--uds-line-128);
476
+ font-family: var(--uds-font-family);
477
+ font-weight: var(--uds-font-weight);
478
+ letter-spacing: -0.03em;
479
+ text-transform: uppercase;
480
+ }
481
+
482
+ @mixin uds-display-128-medium {
483
+ @include uds-display-128;
484
+ font-weight: var(--uds-font-weight-medium);
485
+ }
486
+
487
+ @mixin uds-display-128-semibold {
488
+ @include uds-display-128;
489
+ font-weight: var(--uds-font-weight-semibold);
490
+ }
491
+
492
+ @mixin uds-display-128-bold {
493
+ @include uds-display-128;
494
+ font-weight: var(--uds-font-weight-bold);
495
+ }
496
+
497
+ @mixin uds-display-96 {
498
+ font-size: var(--uds-font-size-96);
499
+ line-height: var(--uds-line-96);
500
+ font-family: var(--uds-font-family);
501
+ font-weight: var(--uds-font-weight);
502
+ letter-spacing: -0.02em;
503
+ text-transform: uppercase;
504
+ }
505
+
506
+ @mixin uds-display-96-medium {
507
+ @include uds-display-96;
508
+ font-weight: var(--uds-font-weight-medium);
509
+ }
510
+
511
+ @mixin uds-display-96-semibold {
512
+ @include uds-display-96;
513
+ font-weight: var(--uds-font-weight-semibold);
514
+ }
515
+
516
+ @mixin uds-display-96-bold {
517
+ @include uds-display-96;
518
+ font-weight: var(--uds-font-weight-bold);
519
+ }
520
+
521
+ @mixin uds-display-72 {
522
+ font-size: var(--uds-font-size-72);
523
+ line-height: var(--uds-line-72);
524
+ font-family: var(--uds-font-family);
525
+ font-weight: var(--uds-font-weight);
526
+ letter-spacing: -0.02em;
527
+ text-transform: uppercase;
528
+ }
529
+
530
+ @mixin uds-display-72-medium {
531
+ @include uds-display-72;
532
+ font-weight: var(--uds-font-weight-medium);
533
+ }
534
+
535
+ @mixin uds-display-72-semibold {
536
+ @include uds-display-72;
537
+ font-weight: var(--uds-font-weight-semibold);
538
+ }
539
+
540
+ @mixin uds-display-72-bold {
541
+ @include uds-display-72;
542
+ font-weight: var(--uds-font-weight-bold);
543
+ }
544
+
545
+ @mixin uds-display-60 {
546
+ font-size: var(--uds-font-size-60);
547
+ line-height: var(--uds-line-60);
548
+ font-family: var(--uds-font-family);
549
+ font-weight: var(--uds-font-weight);
550
+ letter-spacing: -0.02em;
551
+ text-transform: uppercase;
552
+ }
553
+
554
+ @mixin uds-display-60-medium {
555
+ @include uds-display-60;
556
+ font-weight: var(--uds-font-weight-medium);
557
+ }
558
+
559
+ @mixin uds-display-60-semibold {
560
+ @include uds-display-60;
561
+ font-weight: var(--uds-font-weight-semibold);
562
+ }
563
+
564
+ @mixin uds-display-60-bold {
565
+ @include uds-display-60;
566
+ font-weight: var(--uds-font-weight-bold);
567
+ }
568
+
569
+ @mixin uds-display-48 {
570
+ font-size: var(--uds-font-size-48);
571
+ line-height: var(--uds-line-48);
572
+ font-family: var(--uds-font-family);
573
+ font-weight: var(--uds-font-weight);
574
+ letter-spacing: -0.02em;
575
+ text-transform: uppercase;
576
+ }
577
+
578
+ @mixin uds-display-48-medium {
579
+ @include uds-display-48;
580
+ font-weight: var(--uds-font-weight-medium);
581
+ }
582
+
583
+ @mixin uds-display-48-semibold {
584
+ @include uds-display-48;
585
+ font-weight: var(--uds-font-weight-semibold);
586
+ }
587
+
588
+ @mixin uds-display-48-bold {
589
+ @include uds-display-48;
590
+ font-weight: var(--uds-font-weight-bold);
591
+ }
592
+
593
+ @mixin uds-display-36 {
594
+ font-size: var(--uds-font-size-36);
595
+ line-height: var(--uds-line-36);
596
+ font-family: var(--uds-font-family);
597
+ font-weight: var(--uds-font-weight);
598
+ letter-spacing: -0.02em;
599
+ text-transform: uppercase;
600
+ }
601
+
602
+ @mixin uds-display-36-medium {
603
+ @include uds-display-36;
604
+ font-weight: var(--uds-font-weight-medium);
605
+ }
606
+
607
+ @mixin uds-display-36-semibold {
608
+ @include uds-display-36;
609
+ font-weight: var(--uds-font-weight-semibold);
610
+ }
611
+
612
+ @mixin uds-display-36-bold {
613
+ @include uds-display-36;
614
+ font-weight: var(--uds-font-weight-bold);
615
+ }
616
+
617
+ // Heading mixins
618
+ @mixin uds-heading-32 {
619
+ font-size: var(--uds-font-size-32);
620
+ line-height: var(--uds-line-32);
621
+ font-family: var(--uds-font-family);
622
+ font-weight: var(--uds-font-weight);
623
+ letter-spacing: 0em;
624
+ }
625
+
626
+ @mixin uds-heading-32-medium {
627
+ @include uds-heading-32;
628
+ font-weight: var(--uds-font-weight-medium);
629
+ }
630
+
631
+ @mixin uds-heading-32-semibold {
632
+ @include uds-heading-32;
633
+ font-weight: var(--uds-font-weight-semibold);
634
+ }
635
+
636
+ @mixin uds-heading-32-bold {
637
+ @include uds-heading-32;
638
+ font-weight: var(--uds-font-weight-bold);
639
+ }
640
+
641
+ @mixin uds-heading-28 {
642
+ font-size: var(--uds-font-size-28);
643
+ line-height: var(--uds-line-28);
644
+ font-family: var(--uds-font-family);
645
+ font-weight: var(--uds-font-weight);
646
+ letter-spacing: 0em;
647
+ }
648
+
649
+ @mixin uds-heading-28-medium {
650
+ @include uds-heading-28;
651
+ font-weight: var(--uds-font-weight-medium);
652
+ }
653
+
654
+ @mixin uds-heading-28-semibold {
655
+ @include uds-heading-28;
656
+ font-weight: var(--uds-font-weight-semibold);
657
+ }
658
+
659
+ @mixin uds-heading-28-bold {
660
+ @include uds-heading-28;
661
+ font-weight: var(--uds-font-weight-bold);
662
+ }
663
+
664
+ @mixin uds-heading-24 {
665
+ font-size: var(--uds-font-size-24);
666
+ line-height: var(--uds-line-24);
667
+ font-family: var(--uds-font-family);
668
+ font-weight: var(--uds-font-weight);
669
+ letter-spacing: 0em;
670
+ }
671
+
672
+ @mixin uds-heading-24-medium {
673
+ @include uds-heading-24;
674
+ font-weight: var(--uds-font-weight-medium);
675
+ }
676
+
677
+ @mixin uds-heading-24-semibold {
678
+ @include uds-heading-24;
679
+ font-weight: var(--uds-font-weight-semibold);
680
+ }
681
+
682
+ @mixin uds-heading-24-bold {
683
+ @include uds-heading-24;
684
+ font-weight: var(--uds-font-weight-bold);
685
+ }
686
+
687
+ @mixin uds-heading-20 {
688
+ font-size: var(--uds-font-size-20);
689
+ line-height: var(--uds-line-heading-20);
690
+ font-family: var(--uds-font-family);
691
+ font-weight: var(--uds-font-weight);
692
+ letter-spacing: 0em;
693
+ }
694
+
695
+ @mixin uds-heading-20-medium {
696
+ @include uds-heading-20;
697
+ font-weight: var(--uds-font-weight-medium);
698
+ }
699
+
700
+ @mixin uds-heading-20-semibold {
701
+ @include uds-heading-20;
702
+ font-weight: var(--uds-font-weight-semibold);
703
+ }
704
+
705
+ @mixin uds-heading-20-bold {
706
+ @include uds-heading-20;
707
+ font-weight: var(--uds-font-weight-bold);
708
+ }
709
+
710
+ // Body mixins
711
+ @mixin uds-body-20 {
712
+ font-size: var(--uds-font-size-20);
713
+ line-height: var(--uds-line-20);
714
+ font-family: var(--uds-font-family);
715
+ font-weight: var(--uds-font-weight);
716
+ letter-spacing: 0px;
717
+ }
718
+
719
+ @mixin uds-body-20-medium {
720
+ @include uds-body-20;
721
+ font-weight: var(--uds-font-weight-medium);
722
+ letter-spacing: 0em;
723
+ }
724
+
725
+ @mixin uds-body-20-semibold {
726
+ @include uds-body-20;
727
+ font-weight: var(--uds-font-weight-semibold);
728
+ }
729
+
730
+ @mixin uds-body-20-bold {
731
+ @include uds-body-20;
732
+ font-weight: var(--uds-font-weight-bold);
733
+ }
734
+
735
+ @mixin uds-body-16 {
736
+ font-size: var(--uds-font-size-16);
737
+ line-height: var(--uds-line-16);
738
+ font-family: var(--uds-font-family);
739
+ font-weight: var(--uds-font-weight);
740
+ letter-spacing: 0px;
741
+ }
742
+
743
+ @mixin uds-body-16-medium {
744
+ @include uds-body-16;
745
+ font-weight: var(--uds-font-weight-medium);
746
+ letter-spacing: 0em;
747
+ }
748
+
749
+ @mixin uds-body-16-semibold {
750
+ @include uds-body-16;
751
+ font-weight: var(--uds-font-weight-semibold);
752
+ }
753
+
754
+ @mixin uds-body-16-bold {
755
+ @include uds-body-16;
756
+ font-weight: var(--uds-font-weight-bold);
757
+ }
758
+
759
+ @mixin uds-body-14 {
760
+ font-size: var(--uds-font-size-14);
761
+ line-height: var(--uds-line-14);
762
+ font-family: var(--uds-font-family);
763
+ font-weight: var(--uds-font-weight);
764
+ letter-spacing: 0em;
765
+ }
766
+
767
+ @mixin uds-body-14-medium {
768
+ @include uds-body-14;
769
+ font-weight: var(--uds-font-weight-medium);
770
+ }
771
+
772
+ @mixin uds-body-14-semibold {
773
+ @include uds-body-14;
774
+ font-weight: var(--uds-font-weight-semibold);
775
+ }
776
+
777
+ @mixin uds-body-14-bold {
778
+ @include uds-body-14;
779
+ font-weight: var(--uds-font-weight-bold);
780
+ }
781
+
782
+ @mixin uds-body-12 {
783
+ font-size: var(--uds-font-size-12);
784
+ line-height: var(--uds-line-12);
785
+ font-family: var(--uds-font-family);
786
+ font-weight: var(--uds-font-weight);
787
+ letter-spacing: 0px;
788
+ }
789
+
790
+ @mixin uds-body-12-medium {
791
+ @include uds-body-12;
792
+ font-weight: var(--uds-font-weight-medium);
793
+ letter-spacing: 0em;
794
+ }
795
+
796
+ @mixin uds-body-12-semibold {
797
+ @include uds-body-12;
798
+ font-weight: var(--uds-font-weight-semibold);
799
+ }
800
+
801
+ @mixin uds-body-12-bold {
802
+ @include uds-body-12;
803
+ font-weight: var(--uds-font-weight-bold);
804
+ }
805
+
806
+ // Paragraph mixins
807
+ @mixin uds-paragraph-20 {
808
+ font-size: var(--uds-font-size-20);
809
+ line-height: var(--uds-line-20);
810
+ font-family: var(--uds-font-family);
811
+ font-weight: var(--uds-font-weight);
812
+ letter-spacing: 0px;
813
+ }
814
+
815
+ @mixin uds-paragraph-20-medium {
816
+ @include uds-paragraph-20;
817
+ font-weight: var(--uds-font-weight-medium);
818
+ letter-spacing: 0em;
819
+ }
820
+
821
+ @mixin uds-paragraph-20-semibold {
822
+ @include uds-paragraph-20;
823
+ font-weight: var(--uds-font-weight-semibold);
824
+ letter-spacing: 0em;
825
+ }
826
+
827
+ @mixin uds-paragraph-20-bold {
828
+ @include uds-paragraph-20;
829
+ font-weight: var(--uds-font-weight-bold);
830
+ letter-spacing: 0em;
831
+ }
832
+
833
+ @mixin uds-paragraph-18 {
834
+ font-size: var(--uds-font-size-18);
835
+ line-height: var(--uds-line-18);
836
+ font-family: var(--uds-font-family);
837
+ font-weight: var(--uds-font-weight);
838
+ letter-spacing: 0px;
839
+ }
840
+
841
+ @mixin uds-paragraph-18-medium {
842
+ @include uds-paragraph-18;
843
+ font-weight: var(--uds-font-weight-medium);
844
+ letter-spacing: 0em;
845
+ }
846
+
847
+ @mixin uds-paragraph-18-semibold {
848
+ @include uds-paragraph-18;
849
+ font-weight: var(--uds-font-weight-semibold);
850
+ letter-spacing: 0em;
851
+ }
852
+
853
+ @mixin uds-paragraph-18-bold {
854
+ @include uds-paragraph-18;
855
+ font-weight: var(--uds-font-weight-bold);
856
+ letter-spacing: 0em;
857
+ }
858
+
859
+ @mixin uds-paragraph-16 {
860
+ font-size: var(--uds-font-size-16);
861
+ line-height: var(--uds-line-16);
862
+ font-family: var(--uds-font-family);
863
+ font-weight: var(--uds-font-weight);
864
+ letter-spacing: 0px;
865
+ }
866
+
867
+ @mixin uds-paragraph-16-medium {
868
+ @include uds-paragraph-16;
869
+ font-weight: var(--uds-font-weight-medium);
870
+ letter-spacing: 0em;
871
+ }
872
+
873
+ @mixin uds-paragraph-16-semibold {
874
+ @include uds-paragraph-16;
875
+ font-weight: var(--uds-font-weight-semibold);
876
+ letter-spacing: 0em;
877
+ }
878
+
879
+ @mixin uds-paragraph-16-bold {
880
+ @include uds-paragraph-16;
881
+ font-weight: var(--uds-font-weight-bold);
882
+ letter-spacing: 0em;
883
+ }
884
+
885
+ @mixin uds-paragraph-14 {
886
+ font-size: var(--uds-font-size-14);
887
+ line-height: var(--uds-line-14);
888
+ font-family: var(--uds-font-family);
889
+ font-weight: var(--uds-font-weight);
890
+ letter-spacing: 0em;
891
+ }
892
+
893
+ @mixin uds-paragraph-14-medium {
894
+ @include uds-paragraph-14;
895
+ font-weight: var(--uds-font-weight-medium);
896
+ }
897
+
898
+ @mixin uds-paragraph-14-semibold {
899
+ @include uds-paragraph-14;
900
+ font-weight: var(--uds-font-weight-semibold);
901
+ }
902
+
903
+ @mixin uds-paragraph-14-bold {
904
+ @include uds-paragraph-14;
905
+ font-weight: var(--uds-font-weight-bold);
906
+ }
907
+
908
+ @mixin uds-paragraph-12 {
909
+ font-size: var(--uds-font-size-12);
910
+ line-height: var(--uds-line-12);
911
+ font-family: var(--uds-font-family);
912
+ font-weight: var(--uds-font-weight);
913
+ letter-spacing: 0px;
914
+ }
915
+
916
+ @mixin uds-paragraph-12-medium {
917
+ @include uds-paragraph-12;
918
+ font-weight: var(--uds-font-weight-medium);
919
+ letter-spacing: 0em;
920
+ }
921
+
922
+ @mixin uds-paragraph-12-semibold {
923
+ @include uds-paragraph-12;
924
+ font-weight: var(--uds-font-weight-semibold);
925
+ letter-spacing: 0em;
926
+ }
927
+
928
+ @mixin uds-paragraph-12-bold {
929
+ @include uds-paragraph-12;
930
+ font-weight: var(--uds-font-weight-bold);
931
+ letter-spacing: 0em;
932
+ }