@shohojdhara/atomix 0.1.16 → 0.1.18

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 (525) hide show
  1. package/CONTRIBUTING.md +151 -0
  2. package/NEXTJS_INTEGRATION.md +358 -0
  3. package/README.md +168 -119
  4. package/babel.config.js +58 -0
  5. package/css.d.ts +10 -0
  6. package/dist/css/atomix.css +1 -2
  7. package/dist/js/194.js +1 -2
  8. package/dist/js/244.js +1 -0
  9. package/dist/js/atomix.react.cjs.js +1 -0
  10. package/dist/js/atomix.react.esm.js +1 -2
  11. package/dist/js/atomix.react.umd.js +1 -2
  12. package/dist/js/chunks/cjs/202.9d3b1ef1eaa0d5c8a309.js +1 -0
  13. package/dist/js/chunks/cjs/308.6ea9685ea38ead4120d0.js +1 -0
  14. package/dist/js/chunks/cjs/54.73db6922594e421ba6b1.js +1 -0
  15. package/dist/js/chunks/cjs/619.51feecaadcab819780d4.js +1 -0
  16. package/dist/js/chunks/cjs/690.90f6d11164081cbcbc4d.js +1 -0
  17. package/dist/js/chunks/cjs/894.24877561df336a8dfd14.js +1 -0
  18. package/dist/js/chunks/cjs/897.6c2a71fae95338890de7.js +1 -0
  19. package/dist/js/chunks/esm/{202.ff48d27672233280e021.js → 202.82aa7b3244e53c9edb72.js} +1 -2
  20. package/dist/js/chunks/esm/{308.f873332126eba90e5c62.js → 308.27e1e4005705ae320432.js} +1 -2
  21. package/dist/js/chunks/esm/{54.4db919e5e4e5cc6d7c72.js → 54.ece1fd6964f98d4d994f.js} +1 -2
  22. package/dist/js/chunks/esm/{619.afc5a718eff77fa423b5.js → 619.ebeb0298432a066ac05c.js} +1 -2
  23. package/dist/js/chunks/esm/{690.a9e968c7497d61e56cdc.js → 690.c5f412cc979b55740359.js} +1 -2
  24. package/dist/js/chunks/esm/{894.f1091a4a8758c26d29e4.js → 894.3604ddc9367d75191198.js} +1 -2
  25. package/dist/js/chunks/esm/{897.561a50f7d043d42169da.js → 897.a4aab2fad9401693eb12.js} +1 -2
  26. package/dist/js/chunks/umd/{202.dac7605cc555b6bda542.js → 202.5017dd0403d696bf1644.js} +1 -2
  27. package/dist/js/chunks/umd/{308.6709979849dcbdb90c9b.js → 308.4bc14b9d7b16b6ee0ab8.js} +1 -2
  28. package/dist/js/chunks/umd/{54.403470e1f7d0ef4424a7.js → 54.7fdfb4a031989470a70d.js} +1 -2
  29. package/dist/js/chunks/umd/{619.fa05ea98c10270eb64c5.js → 619.84a0c35ecee695250085.js} +1 -2
  30. package/dist/js/chunks/umd/{690.aa7054d1c53e5402c2d6.js → 690.d7041094a34a4a434be2.js} +1 -2
  31. package/dist/js/chunks/umd/{894.3e1eaf0a2aadf4434390.js → 894.c127ee4e9513c22ee97d.js} +1 -2
  32. package/dist/js/chunks/umd/{897.554ea37be4453698c167.js → 897.26932ac837a39fc91907.js} +1 -2
  33. package/dist/types/components/Badge/index.d.ts +3 -3
  34. package/dist/types/components/{Navbar → Navigation/Menu}/MegaMenu.d.ts +1 -1
  35. package/dist/types/components/{Navbar → Navigation/Menu}/Menu.d.ts +1 -1
  36. package/dist/types/components/Navigation/Nav/Nav.d.ts +20 -0
  37. package/dist/types/components/{Navbar → Navigation/Nav}/NavDropdown.d.ts +1 -1
  38. package/dist/types/components/Navigation/Nav/NavItem.d.ts +33 -0
  39. package/dist/types/components/Navigation/Navbar/Navbar.d.ts +19 -0
  40. package/dist/types/components/Navigation/SideMenu/SideMenu.d.ts +20 -0
  41. package/dist/types/components/Navigation/SideMenu/SideMenuItem.d.ts +30 -0
  42. package/dist/types/components/Navigation/SideMenu/SideMenuList.d.ts +17 -0
  43. package/dist/types/components/Navigation/index.d.ts +10 -0
  44. package/dist/types/components/PhotoViewer/PhotoViewer.d.ts +2 -2
  45. package/dist/types/components/PhotoViewer/PhotoViewerHeader.d.ts +2 -2
  46. package/dist/types/components/Tab/index.d.ts +2 -2
  47. package/dist/types/components/Toggle/index.d.ts +2 -2
  48. package/dist/types/components/Tooltip/index.d.ts +3 -3
  49. package/dist/types/components/index.d.ts +1 -1
  50. package/dist/types/lib/composables/index.d.ts +1 -0
  51. package/dist/types/lib/composables/useDatePicker.d.ts +1 -1
  52. package/dist/types/lib/composables/useDropdown.d.ts +1 -1
  53. package/dist/types/lib/composables/useModal.d.ts +1 -1
  54. package/dist/types/lib/composables/usePhotoViewer.d.ts +1 -1
  55. package/dist/types/lib/composables/useRating.d.ts +1 -1
  56. package/dist/types/lib/composables/useSideMenu.d.ts +28 -0
  57. package/dist/types/lib/constants/components.d.ts +72 -0
  58. package/dist/types/lib/types/components.d.ts +103 -0
  59. package/examples/nextjs-example.tsx +271 -0
  60. package/implementation-guide.md +505 -0
  61. package/next.config.js +69 -0
  62. package/package.json +80 -42
  63. package/postcss.config.js +28 -0
  64. package/src/Introduction.mdx +3 -5
  65. package/src/assets/fonts/HelveticaNeue/stylesheet.css +140 -127
  66. package/src/components/Accordion/Accordion.stories.tsx +58 -45
  67. package/src/components/Accordion/Accordion.tsx +14 -4
  68. package/src/components/Accordion/scripts/accordionInteractions.ts +9 -9
  69. package/src/components/Accordion/scripts/bundle.ts +1 -1
  70. package/src/components/Accordion/scripts/index.ts +3 -3
  71. package/src/components/AtomixLogo.tsx +13 -19
  72. package/src/components/Avatar/Avatar.stories.tsx +24 -21
  73. package/src/components/Avatar/Avatar.tsx +5 -8
  74. package/src/components/Avatar/AvatarGroup.tsx +11 -11
  75. package/src/components/Avatar/index.ts +1 -1
  76. package/src/components/Avatar/scripts/index.ts +66 -71
  77. package/src/components/Badge/Badge.stories.tsx +51 -21
  78. package/src/components/Badge/Badge.tsx +14 -12
  79. package/src/components/Badge/index.ts +3 -3
  80. package/src/components/Breadcrumb/Breadcrumb.stories.tsx +40 -40
  81. package/src/components/Breadcrumb/Breadcrumb.tsx +19 -26
  82. package/src/components/Breadcrumb/index.ts +1 -1
  83. package/src/components/Breadcrumb/scripts/breadcrumb.ts +36 -34
  84. package/src/components/Breadcrumb/scripts/index.ts +1 -1
  85. package/src/components/Breadcrumb/scripts/types.ts +9 -9
  86. package/src/components/Button/Button.stories.tsx +36 -12
  87. package/src/components/Button/Button.tsx +52 -39
  88. package/src/components/Button/index.ts +1 -1
  89. package/src/components/Button/scripts/buttonInteractions.ts +9 -9
  90. package/src/components/Button/scripts/index.ts +1 -1
  91. package/src/components/Callout/Callout.stories.tsx +207 -114
  92. package/src/components/Callout/Callout.tsx +12 -12
  93. package/src/components/Callout/index.ts +1 -1
  94. package/src/components/Callout/scripts/CalloutInteractions.ts +58 -48
  95. package/src/components/Callout/scripts/bundle.ts +2 -2
  96. package/src/components/Callout/scripts/index.ts +19 -15
  97. package/src/components/Card/Card.stories.tsx +2 -2
  98. package/src/components/Card/Card.tsx +49 -72
  99. package/src/components/Card/ElevationCard.tsx +4 -8
  100. package/src/components/Card/index.ts +1 -1
  101. package/src/components/Card/scripts/bundle.ts +7 -7
  102. package/src/components/Card/scripts/cardInteractions.ts +24 -24
  103. package/src/components/Card/scripts/index.ts +25 -26
  104. package/src/components/ColorModeToggle/ColorModeToggle.stories.tsx +6 -3
  105. package/src/components/ColorModeToggle/ColorModeToggle.tsx +12 -15
  106. package/src/components/ColorModeToggle/index.ts +1 -1
  107. package/src/components/Countdown/Countdown.stories.tsx +6 -2
  108. package/src/components/Countdown/Countdown.tsx +56 -48
  109. package/src/components/Countdown/index.ts +1 -1
  110. package/src/components/Countdown/scripts/index.ts +33 -28
  111. package/src/components/DataTable/DataTable.stories.tsx +23 -18
  112. package/src/components/DataTable/DataTable.tsx +39 -39
  113. package/src/components/DataTable/index.ts +1 -1
  114. package/src/components/DataTable/scripts/bundle.ts +8 -3
  115. package/src/components/DataTable/scripts/index.ts +182 -164
  116. package/src/components/DatePicker/DatePicker.stories.tsx +136 -148
  117. package/src/components/DatePicker/DatePicker.tsx +461 -420
  118. package/src/components/DatePicker/scripts/bundle.ts +12 -7
  119. package/src/components/DatePicker/scripts/componentInteractions.ts +76 -46
  120. package/src/components/DatePicker/scripts/index.ts +176 -156
  121. package/src/components/DatePicker/types.ts +32 -32
  122. package/src/components/DatePicker/utils.ts +41 -30
  123. package/src/components/Dropdown/Dropdown.stories.tsx +85 -55
  124. package/src/components/Dropdown/Dropdown.tsx +97 -88
  125. package/src/components/Dropdown/index.ts +5 -10
  126. package/src/components/Dropdown/scripts/bundle.ts +10 -10
  127. package/src/components/Dropdown/scripts/componentInteractions.ts +10 -2
  128. package/src/components/Dropdown/scripts/index.ts +122 -117
  129. package/src/components/EdgePanel/EdgePanel.stories.tsx +142 -58
  130. package/src/components/EdgePanel/EdgePanel.tsx +7 -13
  131. package/src/components/EdgePanel/index.ts +1 -1
  132. package/src/components/EdgePanel/scripts/bundle.ts +5 -5
  133. package/src/components/EdgePanel/scripts/edgePanelInteractions.ts +26 -26
  134. package/src/components/EdgePanel/scripts/index.ts +53 -53
  135. package/src/components/Form/Checkbox.stories.tsx +2 -2
  136. package/src/components/Form/Checkbox.tsx +13 -7
  137. package/src/components/Form/Form.stories.tsx +144 -218
  138. package/src/components/Form/Form.tsx +6 -6
  139. package/src/components/Form/FormGroup.stories.tsx +21 -38
  140. package/src/components/Form/FormGroup.tsx +18 -20
  141. package/src/components/Form/Input.stories.tsx +1 -1
  142. package/src/components/Form/Input.tsx +18 -8
  143. package/src/components/Form/Radio.stories.tsx +12 -25
  144. package/src/components/Form/Radio.tsx +11 -6
  145. package/src/components/Form/Select.stories.tsx +6 -6
  146. package/src/components/Form/Select.tsx +31 -33
  147. package/src/components/Form/Textarea.stories.tsx +7 -2
  148. package/src/components/Form/Textarea.tsx +17 -8
  149. package/src/components/Form/index.ts +1 -1
  150. package/src/components/Hero/Hero.stories.tsx +44 -42
  151. package/src/components/Hero/Hero.tsx +28 -38
  152. package/src/components/Hero/index.ts +1 -1
  153. package/src/components/Hero/scripts/bundle.ts +6 -6
  154. package/src/components/Hero/scripts/heroInteractions.ts +24 -29
  155. package/src/components/Hero/scripts/index.ts +16 -17
  156. package/src/components/Icon/Icon.tsx +16 -18
  157. package/src/components/Icon/index.ts +1 -1
  158. package/src/components/List/List.stories.tsx +1 -3
  159. package/src/components/List/List.tsx +6 -10
  160. package/src/components/List/ListGroup.tsx +1 -1
  161. package/src/components/List/index.ts +1 -1
  162. package/src/components/Messages/Messages.stories.tsx +30 -29
  163. package/src/components/Messages/Messages.tsx +60 -55
  164. package/src/components/Messages/index.ts +1 -1
  165. package/src/components/Messages/scripts/bundle.ts +1 -6
  166. package/src/components/Messages/scripts/componentInteractions.ts +32 -37
  167. package/src/components/Messages/scripts/index.ts +61 -55
  168. package/src/components/Modal/Modal.stories.tsx +77 -53
  169. package/src/components/Modal/Modal.tsx +63 -62
  170. package/src/components/Modal/index.ts +1 -1
  171. package/src/components/Modal/scripts/bundle.ts +3 -3
  172. package/src/components/Modal/scripts/index.ts +96 -84
  173. package/src/components/Modal/scripts/modalInteractions.ts +16 -14
  174. package/src/components/{Navbar → Navigation/Menu}/MegaMenu.tsx +50 -59
  175. package/src/components/Navigation/Menu/Menu.stories.tsx +340 -0
  176. package/src/components/Navigation/Menu/Menu.tsx +110 -0
  177. package/src/components/Navigation/Nav/Nav.stories.tsx +458 -0
  178. package/src/components/Navigation/Nav/Nav.tsx +50 -0
  179. package/src/components/Navigation/Nav/NavDropdown.tsx +105 -0
  180. package/src/components/Navigation/Nav/NavItem.tsx +159 -0
  181. package/src/components/{Navbar → Navigation/Navbar}/Navbar.stories.tsx +198 -104
  182. package/src/components/Navigation/Navbar/Navbar.tsx +150 -0
  183. package/src/components/Navigation/README.md +314 -0
  184. package/src/components/Navigation/SideMenu/SideMenu.README.md +494 -0
  185. package/src/components/Navigation/SideMenu/SideMenu.stories.tsx +618 -0
  186. package/src/components/Navigation/SideMenu/SideMenu.tsx +101 -0
  187. package/src/components/Navigation/SideMenu/SideMenuItem.tsx +95 -0
  188. package/src/components/Navigation/SideMenu/SideMenuList.tsx +41 -0
  189. package/src/components/Navigation/index.ts +23 -0
  190. package/src/components/Navigation/scripts/NavbarInteractions.ts +171 -0
  191. package/src/components/Navigation/scripts/SideMenu.ts +319 -0
  192. package/src/components/Navigation/scripts/SideMenuBundle.ts +69 -0
  193. package/src/components/Navigation/scripts/SideMenuInteractions.ts +250 -0
  194. package/src/components/Navigation/scripts/bundle.ts +58 -0
  195. package/src/components/Navigation/scripts/index.ts +248 -0
  196. package/src/components/Pagination/Pagination.stories.tsx +34 -33
  197. package/src/components/Pagination/Pagination.tsx +25 -35
  198. package/src/components/Pagination/index.ts +1 -1
  199. package/src/components/Pagination/scripts/index.ts +42 -37
  200. package/src/components/PhotoViewer/PhotoViewer.stories.tsx +48 -48
  201. package/src/components/PhotoViewer/PhotoViewer.tsx +29 -46
  202. package/src/components/PhotoViewer/PhotoViewerHeader.tsx +20 -26
  203. package/src/components/PhotoViewer/PhotoViewerImage.tsx +19 -17
  204. package/src/components/PhotoViewer/PhotoViewerInfo.tsx +13 -5
  205. package/src/components/PhotoViewer/PhotoViewerNavigation.tsx +5 -5
  206. package/src/components/PhotoViewer/PhotoViewerThumbnails.tsx +31 -30
  207. package/src/components/PhotoViewer/examples/ImageGallery.tsx +27 -37
  208. package/src/components/PhotoViewer/examples/SimpleGallery.tsx +19 -13
  209. package/src/components/PhotoViewer/examples/index.ts +1 -1
  210. package/src/components/PhotoViewer/index.ts +1 -1
  211. package/src/components/PhotoViewer/scripts/PhotoViewerInteractions.ts +43 -33
  212. package/src/components/PhotoViewer/scripts/bundle.ts +14 -14
  213. package/src/components/PhotoViewer/scripts/index.ts +173 -129
  214. package/src/components/Popover/Popover.stories.tsx +11 -12
  215. package/src/components/Popover/Popover.tsx +36 -36
  216. package/src/components/Popover/index.ts +1 -1
  217. package/src/components/Popover/scripts/bundle.ts +1 -1
  218. package/src/components/Popover/scripts/componentInteractions.ts +34 -46
  219. package/src/components/Popover/scripts/index.ts +64 -53
  220. package/src/components/ProductReview/ProductReview.stories.tsx +10 -8
  221. package/src/components/ProductReview/ProductReview.tsx +28 -32
  222. package/src/components/ProductReview/scripts/componentInteractions.ts +20 -20
  223. package/src/components/Progress/Progress.tsx +36 -34
  224. package/src/components/Progress/scripts/bundle.ts +7 -2
  225. package/src/components/Progress/scripts/componentInteractions.ts +29 -23
  226. package/src/components/Progress/scripts/index.ts +45 -39
  227. package/src/components/Rating/Rating.stories.tsx +3 -16
  228. package/src/components/Rating/Rating.tsx +250 -231
  229. package/src/components/Rating/scripts/bundle.ts +11 -6
  230. package/src/components/Rating/scripts/index.ts +85 -80
  231. package/src/components/Rating/scripts/ratingInteractions.ts +27 -24
  232. package/src/components/River/River.stories.tsx +70 -24
  233. package/src/components/River/River.tsx +28 -38
  234. package/src/components/River/index.ts +1 -1
  235. package/src/components/River/scripts/index.ts +11 -12
  236. package/src/components/SectionIntro/SectionIntro.stories.tsx +12 -9
  237. package/src/components/SectionIntro/SectionIntro.tsx +25 -31
  238. package/src/components/SectionIntro/scripts/componentInteractions.ts +1 -1
  239. package/src/components/SectionIntro/scripts/index.ts +30 -16
  240. package/src/components/Spinner/Spinner.stories.tsx +5 -7
  241. package/src/components/Spinner/Spinner.tsx +11 -6
  242. package/src/components/Spinner/index.ts +2 -2
  243. package/src/components/Steps/Steps.stories.tsx +44 -48
  244. package/src/components/Steps/Steps.tsx +20 -20
  245. package/src/components/Steps/index.ts +1 -1
  246. package/src/components/Steps/scripts/index.ts +9 -9
  247. package/src/components/Tab/Tab.stories.tsx +14 -6
  248. package/src/components/Tab/Tab.tsx +16 -18
  249. package/src/components/Tab/index.ts +2 -2
  250. package/src/components/Tab/scripts/index.ts +13 -13
  251. package/src/components/Testimonial/Testimonial.stories.tsx +54 -51
  252. package/src/components/Testimonial/Testimonial.tsx +18 -19
  253. package/src/components/Testimonial/index.ts +1 -1
  254. package/src/components/Testimonial/scripts/index.ts +19 -8
  255. package/src/components/Todo/Todo.stories.tsx +7 -24
  256. package/src/components/Todo/Todo.tsx +35 -46
  257. package/src/components/Todo/index.ts +1 -1
  258. package/src/components/Todo/scripts/bundle.ts +1 -1
  259. package/src/components/Todo/scripts/index.ts +99 -81
  260. package/src/components/Todo/scripts/todoInteractions.ts +12 -12
  261. package/src/components/Todo/scripts/types.ts +3 -3
  262. package/src/components/Toggle/Toggle.stories.tsx +2 -2
  263. package/src/components/Toggle/Toggle.tsx +18 -18
  264. package/src/components/Toggle/index.ts +2 -2
  265. package/src/components/Toggle/scripts/bundle.ts +7 -2
  266. package/src/components/Toggle/scripts/index.ts +14 -10
  267. package/src/components/Toggle/scripts/toggleInteractions.ts +11 -14
  268. package/src/components/Tooltip/Tooltip.stories.tsx +13 -6
  269. package/src/components/Tooltip/Tooltip.tsx +25 -15
  270. package/src/components/Tooltip/index.ts +3 -3
  271. package/src/components/Tooltip/scripts/bundle.ts +0 -1
  272. package/src/components/Tooltip/scripts/index.ts +44 -41
  273. package/src/components/Tooltip/scripts/tooltipInteractions.ts +22 -22
  274. package/src/components/Upload/Upload.stories.tsx +28 -34
  275. package/src/components/Upload/Upload.tsx +86 -71
  276. package/src/components/Upload/index.ts +1 -1
  277. package/src/components/Upload/scripts/index.ts +58 -43
  278. package/src/components/index.ts +5 -6
  279. package/src/design-tokens/BoxShadow/BoxShadow.stories.tsx +13 -10
  280. package/src/design-tokens/Colors/colors.scss +10 -7
  281. package/src/design-tokens/Colors/colors.stories.tsx +46 -59
  282. package/src/design-tokens/Spacing/Spacing.scss +7 -5
  283. package/src/design-tokens/Spacing/Spacing.stories.tsx +19 -18
  284. package/src/design-tokens/Typography/Typography.scss +88 -25
  285. package/src/design-tokens/Typography/Typography.stories.tsx +22 -25
  286. package/src/docs/implementation-guide.mdx +2 -2
  287. package/src/htmlComponentsEntry.ts +23 -23
  288. package/src/index.ts +1 -1
  289. package/src/layouts/Grid/Container.tsx +6 -10
  290. package/src/layouts/Grid/Grid.stories.tsx +72 -34
  291. package/src/layouts/Grid/Grid.tsx +6 -13
  292. package/src/layouts/Grid/GridCol.tsx +29 -26
  293. package/src/layouts/Grid/Row.tsx +6 -13
  294. package/src/layouts/MasonryGrid/MasonryGrid.stories.tsx +79 -72
  295. package/src/layouts/MasonryGrid/MasonryGrid.tsx +23 -25
  296. package/src/layouts/MasonryGrid/MasonryGridItem.tsx +4 -12
  297. package/src/layouts/index.ts +3 -4
  298. package/src/lib/composables/index.ts +3 -3
  299. package/src/lib/composables/useAccordion.ts +15 -6
  300. package/src/lib/composables/useBadge.ts +3 -3
  301. package/src/lib/composables/useBreadcrumb.ts +6 -12
  302. package/src/lib/composables/useButton.ts +3 -3
  303. package/src/lib/composables/useCallout.ts +3 -3
  304. package/src/lib/composables/useCard.ts +50 -28
  305. package/src/lib/composables/useCheckbox.ts +7 -7
  306. package/src/lib/composables/useDataTable.ts +61 -57
  307. package/src/lib/composables/useDatePicker.ts +255 -231
  308. package/src/lib/composables/useDropdown.ts +90 -75
  309. package/src/lib/composables/useEdgePanel.ts +50 -47
  310. package/src/lib/composables/useForm.ts +4 -7
  311. package/src/lib/composables/useFormGroup.ts +11 -12
  312. package/src/lib/composables/useHero.ts +36 -38
  313. package/src/lib/composables/useInput.ts +9 -10
  314. package/src/lib/composables/useMessages.ts +12 -14
  315. package/src/lib/composables/useModal.ts +37 -34
  316. package/src/lib/composables/useNavbar.ts +33 -22
  317. package/src/lib/composables/usePagination.ts +3 -10
  318. package/src/lib/composables/usePhotoViewer.ts +625 -578
  319. package/src/lib/composables/usePopover.ts +68 -62
  320. package/src/lib/composables/useProgress.ts +9 -12
  321. package/src/lib/composables/useRadio.ts +4 -4
  322. package/src/lib/composables/useRating.ts +82 -70
  323. package/src/lib/composables/useRiver.ts +28 -31
  324. package/src/lib/composables/useSelect.ts +7 -8
  325. package/src/lib/composables/useSideMenu.ts +197 -0
  326. package/src/lib/composables/useSpinner.ts +3 -3
  327. package/src/lib/composables/useTextarea.ts +8 -9
  328. package/src/lib/composables/useTodo.ts +14 -18
  329. package/src/lib/constants/components.ts +191 -118
  330. package/src/lib/constants/index.ts +1 -1
  331. package/src/lib/types/components.ts +454 -324
  332. package/src/lib/utils/dom.ts +2 -6
  333. package/src/lib/utils/icons.ts +20 -12
  334. package/src/lib/utils/index.ts +2 -2
  335. package/src/lib/utils/useForkRef.ts +1 -2
  336. package/src/styles/01-settings/_index.scss +59 -59
  337. package/src/styles/01-settings/_settings.accordion.scss +21 -21
  338. package/src/styles/01-settings/_settings.animations.scss +2 -2
  339. package/src/styles/01-settings/_settings.avatar-group.scss +14 -14
  340. package/src/styles/01-settings/_settings.avatar.scss +31 -31
  341. package/src/styles/01-settings/_settings.badge.scss +11 -11
  342. package/src/styles/01-settings/_settings.border-radius.scss +10 -9
  343. package/src/styles/01-settings/_settings.border.scss +7 -7
  344. package/src/styles/01-settings/_settings.box-shadow.scss +24 -12
  345. package/src/styles/01-settings/_settings.breadcrumb.scss +18 -18
  346. package/src/styles/01-settings/_settings.btn-group.scss +1 -1
  347. package/src/styles/01-settings/_settings.button.scss +63 -49
  348. package/src/styles/01-settings/_settings.callout.scss +27 -7
  349. package/src/styles/01-settings/_settings.card.scss +27 -30
  350. package/src/styles/01-settings/_settings.checkbox-group.scss +2 -3
  351. package/src/styles/01-settings/_settings.checkbox.scss +17 -18
  352. package/src/styles/01-settings/_settings.color-mode.scss +1 -1
  353. package/src/styles/01-settings/_settings.colors.scss +197 -214
  354. package/src/styles/01-settings/_settings.config.scss +1 -3
  355. package/src/styles/01-settings/_settings.countdown.scss +14 -14
  356. package/src/styles/01-settings/_settings.data-table.scss +6 -6
  357. package/src/styles/01-settings/_settings.datepicker.scss +40 -42
  358. package/src/styles/01-settings/_settings.dropdown.scss +30 -30
  359. package/src/styles/01-settings/_settings.edge-panel.scss +16 -16
  360. package/src/styles/01-settings/_settings.fonts.scss +14 -12
  361. package/src/styles/01-settings/_settings.form-group.scss +10 -10
  362. package/src/styles/01-settings/_settings.form.scss +3 -3
  363. package/src/styles/01-settings/_settings.grid.scss +1 -1
  364. package/src/styles/01-settings/_settings.hero.scss +23 -23
  365. package/src/styles/01-settings/_settings.input.scss +32 -32
  366. package/src/styles/01-settings/_settings.link.scss +6 -6
  367. package/src/styles/01-settings/_settings.list-group.scss +12 -12
  368. package/src/styles/01-settings/_settings.list.scss +2 -2
  369. package/src/styles/01-settings/_settings.maps.scss +183 -188
  370. package/src/styles/01-settings/_settings.masonry-grid.scss +2 -2
  371. package/src/styles/01-settings/_settings.menu.scss +35 -38
  372. package/src/styles/01-settings/_settings.messages.scss +71 -77
  373. package/src/styles/01-settings/_settings.modal.scss +24 -24
  374. package/src/styles/01-settings/_settings.nav.scss +15 -15
  375. package/src/styles/01-settings/_settings.navbar.scss +39 -12
  376. package/src/styles/01-settings/_settings.pagination.scss +21 -21
  377. package/src/styles/01-settings/_settings.photoviewer.scss +1 -1
  378. package/src/styles/01-settings/_settings.popover.scss +3 -3
  379. package/src/styles/01-settings/_settings.position.scss +2 -2
  380. package/src/styles/01-settings/_settings.progress.scss +15 -18
  381. package/src/styles/01-settings/_settings.rating.scss +7 -7
  382. package/src/styles/01-settings/_settings.river.scss +25 -25
  383. package/src/styles/01-settings/_settings.sectionintro.scss +15 -16
  384. package/src/styles/01-settings/_settings.select.scss +31 -31
  385. package/src/styles/01-settings/_settings.side-menu.scss +64 -16
  386. package/src/styles/01-settings/_settings.skeleton.scss +12 -12
  387. package/src/styles/01-settings/_settings.spacing.scss +62 -33
  388. package/src/styles/01-settings/_settings.spinner.scss +10 -10
  389. package/src/styles/01-settings/_settings.steps.scss +22 -22
  390. package/src/styles/01-settings/_settings.tabs.scss +25 -25
  391. package/src/styles/01-settings/_settings.testimonials.scss +17 -19
  392. package/src/styles/01-settings/_settings.todo.scss +1 -1
  393. package/src/styles/01-settings/_settings.toggle.scss +26 -26
  394. package/src/styles/01-settings/_settings.tooltip.scss +15 -15
  395. package/src/styles/01-settings/_settings.typography.scss +65 -48
  396. package/src/styles/01-settings/_settings.upload.scss +70 -77
  397. package/src/styles/01-settings/_settings.z-layers.scss +1 -1
  398. package/src/styles/02-tools/_index.scss +19 -19
  399. package/src/styles/02-tools/_tools.animations.scss +4 -4
  400. package/src/styles/02-tools/_tools.border-radius.scss +4 -5
  401. package/src/styles/02-tools/_tools.breakpoints.scss +33 -34
  402. package/src/styles/02-tools/_tools.button.scss +49 -25
  403. package/src/styles/02-tools/_tools.color-mode.scss +11 -11
  404. package/src/styles/02-tools/_tools.event.scss +1 -1
  405. package/src/styles/02-tools/_tools.hidden-visually.scss +1 -1
  406. package/src/styles/02-tools/_tools.hidden.scss +1 -1
  407. package/src/styles/02-tools/_tools.map-loop.scss +9 -9
  408. package/src/styles/02-tools/_tools.media-queries.scss +5 -3
  409. package/src/styles/02-tools/_tools.object-fit.scss +3 -3
  410. package/src/styles/02-tools/_tools.placeholder.scss +0 -1
  411. package/src/styles/02-tools/_tools.rem.scss +1 -1
  412. package/src/styles/02-tools/_tools.spacing.scss +8 -34
  413. package/src/styles/02-tools/_tools.to-rgb.scss +3 -3
  414. package/src/styles/02-tools/_tools.transition.scss +1 -1
  415. package/src/styles/02-tools/_tools.utility-api.scss +29 -14
  416. package/src/styles/03-generic/_generic.fonts.scss +0 -1
  417. package/src/styles/03-generic/_generic.reset.scss +13 -8
  418. package/src/styles/03-generic/_generic.root.scss +5 -5
  419. package/src/styles/03-generic/_index.scss +4 -4
  420. package/src/styles/04-elements/_elements.all.scss +2 -2
  421. package/src/styles/04-elements/_elements.body.scss +1 -2
  422. package/src/styles/04-elements/_elements.heading.scss +37 -21
  423. package/src/styles/04-elements/_elements.links.scss +0 -1
  424. package/src/styles/04-elements/_index.scss +5 -5
  425. package/src/styles/05-objects/_index.scss +3 -3
  426. package/src/styles/05-objects/_objects.container.scss +5 -4
  427. package/src/styles/05-objects/_objects.grid.scss +12 -12
  428. package/src/styles/05-objects/_objects.masonry-grid.scss +80 -74
  429. package/src/styles/06-components/_components.accordion.scss +12 -6
  430. package/src/styles/06-components/_components.avatar-group.scss +9 -8
  431. package/src/styles/06-components/_components.avatar.scss +78 -77
  432. package/src/styles/06-components/_components.badge.scss +48 -48
  433. package/src/styles/06-components/_components.breadcrumb.scss +57 -58
  434. package/src/styles/06-components/_components.btn-group.scss +22 -22
  435. package/src/styles/06-components/_components.button.scss +118 -110
  436. package/src/styles/06-components/_components.callout.scss +21 -15
  437. package/src/styles/06-components/_components.card.scss +6 -10
  438. package/src/styles/06-components/_components.checkbox-group.scss +9 -10
  439. package/src/styles/06-components/_components.checkbox.scss +10 -17
  440. package/src/styles/06-components/_components.color-mode-toggle.scss +6 -6
  441. package/src/styles/06-components/_components.countdown.scss +53 -54
  442. package/src/styles/06-components/_components.data-table.scss +40 -36
  443. package/src/styles/06-components/_components.datepicker.scss +95 -73
  444. package/src/styles/06-components/_components.dropdown.scss +15 -9
  445. package/src/styles/06-components/_components.edge-panel.scss +87 -46
  446. package/src/styles/06-components/_components.form-group.scss +5 -4
  447. package/src/styles/06-components/_components.hero.scss +128 -132
  448. package/src/styles/06-components/_components.icon.scss +16 -16
  449. package/src/styles/06-components/_components.image-gallery.scss +9 -7
  450. package/src/styles/06-components/_components.input.scss +18 -16
  451. package/src/styles/06-components/_components.list-group.scss +52 -51
  452. package/src/styles/06-components/_components.list.scss +15 -15
  453. package/src/styles/06-components/_components.menu.scss +225 -220
  454. package/src/styles/06-components/_components.messages.scss +45 -32
  455. package/src/styles/06-components/_components.modal.scss +0 -1
  456. package/src/styles/06-components/_components.nav.scss +56 -11
  457. package/src/styles/06-components/_components.navbar.scss +278 -202
  458. package/src/styles/06-components/_components.pagination.scss +7 -6
  459. package/src/styles/06-components/_components.photoviewer.scss +121 -116
  460. package/src/styles/06-components/_components.popover.scss +10 -10
  461. package/src/styles/06-components/_components.product-review.scss +3 -3
  462. package/src/styles/06-components/_components.progress.scss +32 -35
  463. package/src/styles/06-components/_components.rating.scss +9 -8
  464. package/src/styles/06-components/_components.river.scss +4 -2
  465. package/src/styles/06-components/_components.sectionintro.scss +19 -26
  466. package/src/styles/06-components/_components.select.scss +7 -8
  467. package/src/styles/06-components/_components.side-menu.scss +154 -28
  468. package/src/styles/06-components/_components.skeleton.scss +0 -1
  469. package/src/styles/06-components/_components.spinner.scss +2 -4
  470. package/src/styles/06-components/_components.steps.scss +76 -77
  471. package/src/styles/06-components/_components.tabs.scss +17 -12
  472. package/src/styles/06-components/_components.testimonials.scss +49 -52
  473. package/src/styles/06-components/_components.todo.scss +26 -26
  474. package/src/styles/06-components/_components.tooltip.scss +114 -115
  475. package/src/styles/06-components/_components.upload.scss +8 -18
  476. package/src/styles/06-components/_index.scss +48 -48
  477. package/src/styles/99-utilities/_index.scss +18 -18
  478. package/src/styles/99-utilities/_utilities.background.scss +13 -13
  479. package/src/styles/99-utilities/_utilities.border.scss +30 -30
  480. package/src/styles/99-utilities/_utilities.clearfix.scss +1 -1
  481. package/src/styles/99-utilities/_utilities.display.scss +5 -4
  482. package/src/styles/99-utilities/_utilities.flex.scss +19 -19
  483. package/src/styles/99-utilities/_utilities.link.scss +52 -35
  484. package/src/styles/99-utilities/_utilities.object-fit.scss +3 -3
  485. package/src/styles/99-utilities/_utilities.opacity.scss +6 -6
  486. package/src/styles/99-utilities/_utilities.overflow.scss +4 -4
  487. package/src/styles/99-utilities/_utilities.position.scss +8 -8
  488. package/src/styles/99-utilities/_utilities.shadow.scss +13 -13
  489. package/src/styles/99-utilities/_utilities.sizes.scss +17 -17
  490. package/src/styles/99-utilities/_utilities.spacing.scss +72 -37
  491. package/src/styles/99-utilities/_utilities.text.scss +15 -15
  492. package/src/styles/99-utilities/_utilities.visibility.scss +8 -8
  493. package/src/styles/99-utilities/_utilities.visually-hidden.scss +1 -1
  494. package/src/styles/99-utilities/_utilities.z-index.scss +2 -2
  495. package/tsconfig.json +74 -0
  496. package/webpack.config.js +463 -0
  497. package/NPM_PUBLISHING.md +0 -221
  498. package/dist/css/atomix.css.map +0 -1
  499. package/dist/js/194.js.map +0 -1
  500. package/dist/js/atomix.react.esm.js.map +0 -1
  501. package/dist/js/atomix.react.umd.js.map +0 -1
  502. package/dist/js/chunks/esm/202.ff48d27672233280e021.js.map +0 -1
  503. package/dist/js/chunks/esm/308.f873332126eba90e5c62.js.map +0 -1
  504. package/dist/js/chunks/esm/54.4db919e5e4e5cc6d7c72.js.map +0 -1
  505. package/dist/js/chunks/esm/619.afc5a718eff77fa423b5.js.map +0 -1
  506. package/dist/js/chunks/esm/690.a9e968c7497d61e56cdc.js.map +0 -1
  507. package/dist/js/chunks/esm/894.f1091a4a8758c26d29e4.js.map +0 -1
  508. package/dist/js/chunks/esm/897.561a50f7d043d42169da.js.map +0 -1
  509. package/dist/js/chunks/umd/202.dac7605cc555b6bda542.js.map +0 -1
  510. package/dist/js/chunks/umd/308.6709979849dcbdb90c9b.js.map +0 -1
  511. package/dist/js/chunks/umd/54.403470e1f7d0ef4424a7.js.map +0 -1
  512. package/dist/js/chunks/umd/619.fa05ea98c10270eb64c5.js.map +0 -1
  513. package/dist/js/chunks/umd/690.aa7054d1c53e5402c2d6.js.map +0 -1
  514. package/dist/js/chunks/umd/894.3e1eaf0a2aadf4434390.js.map +0 -1
  515. package/dist/js/chunks/umd/897.554ea37be4453698c167.js.map +0 -1
  516. package/dist/types/components/Navbar/Nav.d.ts +0 -5
  517. package/dist/types/components/Navbar/NavItem.d.ts +0 -5
  518. package/dist/types/components/Navbar/Navbar.d.ts +0 -5
  519. package/dist/types/components/Navbar/index.d.ts +0 -6
  520. package/src/components/Navbar/Menu.tsx +0 -122
  521. package/src/components/Navbar/Nav.tsx +0 -35
  522. package/src/components/Navbar/NavDropdown.tsx +0 -108
  523. package/src/components/Navbar/NavItem.tsx +0 -128
  524. package/src/components/Navbar/Navbar.tsx +0 -124
  525. package/src/components/Navbar/index.ts +0 -6
package/src/styles/01-settings/_settings.side-menu.scss CHANGED
@@ -1,16 +1,64 @@
1
- @use "settings.config" as config;
2
- @use "settings.border-radius" as border-radius;
3
- @use "settings.typography" as typography;
4
-
5
- $side-menu-padding-x: 20px !default;
6
- $side-menu-padding-y: 24px !default;
7
- $side-menu-bg: var(--#{config.$prefix}body-bg) !default;
8
- $side-menu-border-radius: border-radius.$border-radius-xl !default;
9
- $side-menu-title-font-size: typography.$font-size-base !default;
10
- $side-menu-title-font-weight: typography.$font-weight-medium !default;
11
- $side-menu-title-color: var(--#{config.$prefix}body-color) !default;
12
- $side-menu-title-spacer-y: 8px !default;
13
- $side-menu-item-padding-x: 12px !default;
14
- $side-menu-item-padding-y: 8px !default;
15
- $side-menu-item-font-size: typography.$font-size-sm !default;
16
- $side-menu-item-color: var(--#{config.$prefix}secondary-text-emphasis) !default;
1
+ @use 'settings.config' as config;
2
+ @use 'settings.border-radius' as border-radius;
3
+ @use 'settings.typography' as typography;
4
+ @use 'settings.colors' as *;
5
+
6
+ // Side menu container
7
+ $side-menu-padding-x: 20px !default;
8
+ $side-menu-padding-y: 24px !default;
9
+ $side-menu-bg: var(--#{config.$prefix}body-bg) !default;
10
+ $side-menu-border-radius: border-radius.$border-radius-xl !default;
11
+ $side-menu-border-width: 1px !default;
12
+ $side-menu-border-color: var(--#{config.$prefix}border-color) !default;
13
+ $side-menu-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !default;
14
+
15
+ // Side menu title
16
+ $side-menu-title-font-size: typography.$font-size-base !default;
17
+ $side-menu-title-font-weight: typography.$font-weight-medium !default;
18
+ $side-menu-title-color: var(--#{config.$prefix}body-color) !default;
19
+ $side-menu-title-spacer-y: 8px !default;
20
+
21
+ // Side menu toggler
22
+ $side-menu-toggler-padding-x: 12px !default;
23
+ $side-menu-toggler-padding-y: 8px !default;
24
+ $side-menu-toggler-bg: transparent !default;
25
+ $side-menu-toggler-hover-bg: var(--#{config.$prefix}secondary-bg-subtle) !default;
26
+ $side-menu-toggler-border-radius: border-radius.$border-radius-md !default;
27
+ $side-menu-toggler-transition: all 0.2s ease-in-out !default;
28
+
29
+ // Side menu items
30
+ $side-menu-item-padding-x: 12px !default;
31
+ $side-menu-item-padding-y: 8px !default;
32
+ $side-menu-item-font-size: typography.$font-size-sm !default;
33
+ $side-menu-item-font-weight: typography.$font-weight-normal !default;
34
+ $side-menu-item-color: var(--#{config.$prefix}secondary-text-emphasis) !default;
35
+ $side-menu-item-hover-color: var(--#{config.$prefix}body-color) !default;
36
+ $side-menu-item-active-color: var(--#{config.$prefix}brand-text-emphasis) !default;
37
+ $side-menu-item-disabled-color: var(--#{config.$prefix}disabled-text-emphasis) !default;
38
+ $side-menu-item-bg: transparent !default;
39
+ $side-menu-item-hover-bg: var(--#{config.$prefix}secondary-bg-subtle) !default;
40
+ $side-menu-item-active-bg: var(--#{config.$prefix}brand-bg-subtle) !default;
41
+ $side-menu-item-disabled-bg: transparent !default;
42
+ $side-menu-item-border-radius: border-radius.$border-radius-md !default;
43
+ $side-menu-item-transition: all 0.2s ease-in-out !default;
44
+ $side-menu-item-gap: 8px !default;
45
+
46
+ // Side menu list
47
+ $side-menu-list-margin-bottom: 12px !default;
48
+ $side-menu-list-gap: 2px !default;
49
+
50
+ // Side menu wrapper (for mobile animation)
51
+ $side-menu-wrapper-transition: height 0.3s ease-in-out !default;
52
+ $side-menu-inner-padding-top: 20px !default;
53
+
54
+ // Mobile responsive
55
+ $side-menu-mobile-padding-x: 16px !default;
56
+ $side-menu-mobile-padding-y: 12px !default;
57
+
58
+ // Dark mode variants
59
+ $side-menu-bg-dark: var(--#{config.$prefix}gray-9) !default;
60
+ $side-menu-border-color-dark: var(--#{config.$prefix}gray-7) !default;
61
+ $side-menu-title-color-dark: var(--#{config.$prefix}gray-1) !default;
62
+ $side-menu-item-color-dark: var(--#{config.$prefix}gray-3) !default;
63
+ $side-menu-item-hover-color-dark: var(--#{config.$prefix}gray-1) !default;
64
+ $side-menu-item-active-color-dark: var(--#{config.$prefix}brand-text-emphasis) !default;
package/src/styles/01-settings/_settings.skeleton.scss CHANGED
@@ -1,14 +1,14 @@
1
1
  $skeleton-sizes: (
2
- sm: 14px,
3
- md: 16px,
4
- lg: 24px,
5
- xl: 32px,
6
- xxl: 36px,
7
- 3xl: 40px,
8
- 4xl: 44px,
9
- )!default;
2
+ sm: 14px,
3
+ md: 16px,
4
+ lg: 24px,
5
+ xl: 32px,
6
+ xxl: 36px,
7
+ 3xl: 40px,
8
+ 4xl: 44px,
9
+ ) !default;
10
10
 
11
- $skeleton-color: rgba(0, 0, 0, 0.06)!default;
12
- $skeleton-color-gradient-end: rgba(0, 0, 0, 0.15)!default;
13
- $skeleton-gradient-from-color: rgba(0, 0, 0, 0.06)!default;
14
- $skeleton-gradient-to-color: rgba(0, 0, 0, 0.15)!default;
11
+ $skeleton-color: rgba(0, 0, 0, 0.06) !default;
12
+ $skeleton-color-gradient-end: rgba(0, 0, 0, 0.15) !default;
13
+ $skeleton-gradient-from-color: rgba(0, 0, 0, 0.06) !default;
14
+ $skeleton-gradient-to-color: rgba(0, 0, 0, 0.15) !default;
package/src/styles/01-settings/_settings.spacing.scss CHANGED
@@ -1,39 +1,68 @@
1
1
  $spacer: 1rem !default;
2
2
 
3
3
  $spacing-sizes: (
4
- 0: 0rem, //00px
5
- 1: 0.25rem, //04px
6
- 2: 0.5rem, //08px
7
- 3: .75rem, //12px
8
- 4: 1rem, //16px
9
- 5: 1.25rem, //20px
10
- 6: 1.5rem, //24px
11
- 7: 1.75rem, //28px
12
- 8: 2rem, //32px
13
- 9: 2.25rem, //36px
14
- 10: 2.5rem, //40px
15
- 11: 2.75rem, //44px
16
- 12: 3rem, //48px
17
- 14: 3.5rem, //56px
18
- 16: 4rem, //64px
19
- 20: 5rem, //80px
20
- 24: 6rem, //96px
21
- 28: 7rem, //112px
22
- 32: 8rem, //128px
23
- 36: 9rem, //144px
24
- 40: 10rem, //160px
25
- 44: 11rem, //176px
26
- 48: 12rem, //192px
27
- 52: 13rem, //208px
28
- 56: 14rem, //224px
29
- 60: 15rem, //240px
30
- 64: 16rem, //256px
31
- 72: 18rem, //288px
32
- 80: 20rem, //320px
33
- 90: 22.5rem, //360px
4
+ 0: 0rem,
5
+ //00px
6
+ 1: 0.25rem,
7
+ //04px
8
+ 2: 0.5rem,
9
+ //08px
10
+ 3: 0.75rem,
11
+ //12px
12
+ 4: 1rem,
13
+ //16px
14
+ 5: 1.25rem,
15
+ //20px
16
+ 6: 1.5rem,
17
+ //24px
18
+ 7: 1.75rem,
19
+ //28px
20
+ 8: 2rem,
21
+ //32px
22
+ 9: 2.25rem,
23
+ //36px
24
+ 10: 2.5rem,
25
+ //40px
26
+ 11: 2.75rem,
27
+ //44px
28
+ 12: 3rem,
29
+ //48px
30
+ 14: 3.5rem,
31
+ //56px
32
+ 16: 4rem,
33
+ //64px
34
+ 20: 5rem,
35
+ //80px
36
+ 24: 6rem,
37
+ //96px
38
+ 28: 7rem,
39
+ //112px
40
+ 32: 8rem,
41
+ //128px
42
+ 36: 9rem,
43
+ //144px
44
+ 40: 10rem,
45
+ //160px
46
+ 44: 11rem,
47
+ //176px
48
+ 48: 12rem,
49
+ //192px
50
+ 52: 13rem,
51
+ //208px
52
+ 56: 14rem,
53
+ //224px
54
+ 60: 15rem,
55
+ //240px
56
+ 64: 16rem,
57
+ //256px
58
+ 72: 18rem,
59
+ //288px
60
+ 80: 20rem,
61
+ //320px
62
+ 90: 22.5rem, //360px
34
63
  ) !default;
35
64
 
36
- $spacing-important: true !default;
37
- $enable-negative-margins: false;
65
+ $spacing-important: true !default;
66
+ $enable-negative-margins: false;
38
67
 
39
- $negative-spacers: if($enable-negative-margins, negativify-map($spacing-sizes), null) !default;
68
+ $negative-spacers: if($enable-negative-margins, negativify-map($spacing-sizes), null) !default;
package/src/styles/01-settings/_settings.spinner.scss CHANGED
@@ -1,13 +1,13 @@
1
- @use "settings.config" as config;
1
+ @use 'settings.config' as config;
2
2
 
3
3
  $spinner-sizes: (
4
- sm: 16px,
5
- md: 24px,
6
- lg: 32px
7
- ) !default;
4
+ sm: 16px,
5
+ md: 24px,
6
+ lg: 32px,
7
+ ) !default;
8
8
 
9
- $spinner-background-color: var(--#{config.$prefix}secondary-bg-subtle) !default;
10
- $spinner-color: var(--#{config.$prefix}body-color) !default;
11
- $spinner-border-width: 3px !default;
12
- $spinner-border-width-sm: 2px !default;
13
- $spinner-animation-speed: .75s !default;
9
+ $spinner-background-color: var(--#{config.$prefix}secondary-bg-subtle) !default;
10
+ $spinner-color: var(--#{config.$prefix}body-color) !default;
11
+ $spinner-border-width: 3px !default;
12
+ $spinner-border-width-sm: 2px !default;
13
+ $spinner-animation-speed: 0.75s !default;
package/src/styles/01-settings/_settings.steps.scss CHANGED
@@ -1,26 +1,26 @@
1
- @use "settings.config" as config;
2
- @use "settings.typography" as typography;
3
- @use "settings.border-radius" as border-radius;
1
+ @use 'settings.config' as config;
2
+ @use 'settings.typography' as typography;
3
+ @use 'settings.border-radius' as border-radius;
4
4
 
5
- $steps-padding-x: 0px !default;
6
- $steps-padding-y: 0px !default;
5
+ $steps-padding-x: 0px !default;
6
+ $steps-padding-y: 0px !default;
7
7
 
8
- $steps-item-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
9
- $steps-item-bg: var(--#{config.$prefix}secondary-bg-subtle) !default;
10
- $steps-item-active-color: var(--#{config.$prefix}brand-text-emphasis) !default;
11
- $steps-item-active-bg: var(--#{config.$prefix}primary) !default;
12
- $steps-item-number-bg: $steps-item-bg !default;
13
- $steps-item-number-color: $steps-item-color !default;
14
- $steps-item-number-active-color: var(--#{config.$prefix}gray-1) !default;
15
- $steps-item-number-size: 28px !default;
16
- $steps-item-number-font-size: typography.$font-size-sm !default;
17
- $steps-item-number-border-radius: border-radius.$border-radius-pill;
18
- $steps-item-font-size: typography.$font-size-sm !default;
19
- $steps-item-content-gap: 8px !default;
8
+ $steps-item-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
9
+ $steps-item-bg: var(--#{config.$prefix}secondary-bg-subtle) !default;
10
+ $steps-item-active-color: var(--#{config.$prefix}brand-text-emphasis) !default;
11
+ $steps-item-active-bg: var(--#{config.$prefix}primary) !default;
12
+ $steps-item-number-bg: $steps-item-bg !default;
13
+ $steps-item-number-color: $steps-item-color !default;
14
+ $steps-item-number-active-color: var(--#{config.$prefix}gray-1) !default;
15
+ $steps-item-number-size: 28px !default;
16
+ $steps-item-number-font-size: typography.$font-size-sm !default;
17
+ $steps-item-number-border-radius: border-radius.$border-radius-pill;
18
+ $steps-item-font-size: typography.$font-size-sm !default;
19
+ $steps-item-content-gap: 8px !default;
20
20
 
21
- $steps-line-height: 1px !default;
22
- $steps-line-width: 40px !default;
23
- $steps-gap: 12px !default;
21
+ $steps-line-height: 1px !default;
22
+ $steps-line-width: 40px !default;
23
+ $steps-gap: 12px !default;
24
24
 
25
- $steps-line-height-vertical: 40px !default;
26
- $steps-line-width-vertical: 1px !default;
25
+ $steps-line-height-vertical: 40px !default;
26
+ $steps-line-width-vertical: 1px !default;
package/src/styles/01-settings/_settings.tabs.scss CHANGED
@@ -1,28 +1,28 @@
1
1
  @use 'sass:math';
2
- @use "settings.config" as config;
3
- @use "settings.typography" as typography;
4
- @use "settings.grid" as grid;
2
+ @use 'settings.config' as config;
3
+ @use 'settings.typography' as typography;
4
+ @use 'settings.grid' as grid;
5
5
 
6
- $tabs-width: 100% !default;
7
- $tabs-nav-btn-padding-x: 8px !default;
8
- $tabs-nav-btn-padding-y: 12px !default;
9
- $tabs-nav-btn-font-size: typography.$font-size-base !default;
10
- $tabs-nav-btn-font-weight: typography.$font-weight-medium !default;
11
- $tabs-nav-btn-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
12
- $tabs-nav-btn-active-color: var(--#{config.$prefix}body-color) !default;
13
- $tabs-nav-btn-disabled-color: var(--#{config.$prefix}disabled-text-emphasis) !default;
14
- $tabs-nav-btn-bg: var(--#{config.$prefix}body-bg);
15
- $tabs-nav-btn-bg-hover: var(--#{config.$prefix}secondary-bg-subtle);
16
- $tabs-nav-btn-bg-active: var(--#{config.$prefix}body-bg);
17
- $tabs-nav-btn-bg-disabled: var(--#{config.$prefix}body-bg);
18
- $tabs-nav-btn-border-radius: 0px !default;
19
- $tabs-nav-btn-border-width: 2px !default;
20
- $tabs-nav-btn-border-color: transparent !default;
21
- $tabs-nav-btn-border-active-color: var(--#{config.$prefix}brand-border-subtle) !default;
22
- $tabs-nav-btn-border-disabled-color: var(--#{config.$prefix}primary-border-subtle) !default;
23
- $tabs-nav-btns-gap: 0px !default;
24
- $tabs-nav-btn-inner-gap: 8px !default;
25
- $tab-nav-btn-icon-size: 20px !default;
6
+ $tabs-width: 100% !default;
7
+ $tabs-nav-btn-padding-x: 8px !default;
8
+ $tabs-nav-btn-padding-y: 12px !default;
9
+ $tabs-nav-btn-font-size: typography.$font-size-base !default;
10
+ $tabs-nav-btn-font-weight: typography.$font-weight-medium !default;
11
+ $tabs-nav-btn-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
12
+ $tabs-nav-btn-active-color: var(--#{config.$prefix}body-color) !default;
13
+ $tabs-nav-btn-disabled-color: var(--#{config.$prefix}disabled-text-emphasis) !default;
14
+ $tabs-nav-btn-bg: var(--#{config.$prefix}body-bg);
15
+ $tabs-nav-btn-bg-hover: var(--#{config.$prefix}secondary-bg-subtle);
16
+ $tabs-nav-btn-bg-active: var(--#{config.$prefix}body-bg);
17
+ $tabs-nav-btn-bg-disabled: var(--#{config.$prefix}body-bg);
18
+ $tabs-nav-btn-border-radius: 0px !default;
19
+ $tabs-nav-btn-border-width: 2px !default;
20
+ $tabs-nav-btn-border-color: transparent !default;
21
+ $tabs-nav-btn-border-active-color: var(--#{config.$prefix}brand-border-subtle) !default;
22
+ $tabs-nav-btn-border-disabled-color: var(--#{config.$prefix}primary-border-subtle) !default;
23
+ $tabs-nav-btns-gap: 0px !default;
24
+ $tabs-nav-btn-inner-gap: 8px !default;
25
+ $tab-nav-btn-icon-size: 20px !default;
26
26
 
27
- $tabs-panel-padding-x: math.div(grid.$grid-gutter-width, 2) !default;
28
- $tabs-panel-padding-y: $tabs-panel-padding-x !default;
27
+ $tabs-panel-padding-x: math.div(grid.$grid-gutter-width, 2) !default;
28
+ $tabs-panel-padding-y: $tabs-panel-padding-x !default;
package/src/styles/01-settings/_settings.testimonials.scss CHANGED
@@ -1,20 +1,18 @@
1
+ @use 'settings.typography' as typography;
2
+ @use 'settings.config' as config;
1
3
 
2
- @use "settings.typography" as typography;
3
- @use "settings.config" as config;
4
-
5
- $testimonial-width: 100% !default;
6
- $testimonial-padding-x: 0px !default;
7
- $testimonial-padding-y: 0px !default;
8
- $testimonial-inner-spacer: 20px !default;
9
- $testimonial-bg: null !default;
10
- $testimonial-quote-font-size: typography.$h3-font-size !default;
11
- $testimonial-quote-font-size-sm: typography.$font-size-md !default;
12
- $testimonial-quote-font-size-lg: typography.$h2-font-size !default;
13
- $testimonial-quote-font-weight: typography.$font-weight-medium !default;
14
- $testimonial-quote-color: var(--#{config.$prefix}body-color) !default;
15
- $testimonial-author-font-size: typography.$font-size-base !default;
16
- $testimonial-author-color: var(--#{config.$prefix}body-color) !default;
17
- $testimonial-author-role-font-size: typography.$font-size-xs !default;
18
- $testimonial-author-role-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
19
- $testimonial-author-inner-spacer: 12px !default;
20
-
4
+ $testimonial-width: 100% !default;
5
+ $testimonial-padding-x: 0px !default;
6
+ $testimonial-padding-y: 0px !default;
7
+ $testimonial-inner-spacer: 20px !default;
8
+ $testimonial-bg: null !default;
9
+ $testimonial-quote-font-size: typography.$h3-font-size !default;
10
+ $testimonial-quote-font-size-sm: typography.$font-size-md !default;
11
+ $testimonial-quote-font-size-lg: typography.$h2-font-size !default;
12
+ $testimonial-quote-font-weight: typography.$font-weight-medium !default;
13
+ $testimonial-quote-color: var(--#{config.$prefix}body-color) !default;
14
+ $testimonial-author-font-size: typography.$font-size-base !default;
15
+ $testimonial-author-color: var(--#{config.$prefix}body-color) !default;
16
+ $testimonial-author-role-font-size: typography.$font-size-xs !default;
17
+ $testimonial-author-role-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
18
+ $testimonial-author-inner-spacer: 12px !default;
package/src/styles/01-settings/_settings.todo.scss CHANGED
@@ -47,4 +47,4 @@ $todo-title-margin-bottom-lg: 1.25rem !default;
47
47
  $todo-item-padding-lg: 1rem !default;
48
48
 
49
49
  // Disabled state
50
- $todo-disabled-opacity: 0.6 !default;
50
+ $todo-disabled-opacity: 0.6 !default;
package/src/styles/01-settings/_settings.toggle.scss CHANGED
@@ -1,34 +1,34 @@
1
- @use "settings.config" as config;
2
- @use "settings.border-radius" as borderRadius;
3
- @use "settings.typography" as typography;
1
+ @use 'settings.config' as config;
2
+ @use 'settings.border-radius' as borderRadius;
3
+ @use 'settings.typography' as typography;
4
4
 
5
- $toggle-gap: 12px !default;
5
+ $toggle-gap: 12px !default;
6
6
 
7
- $toggle-switch-on-bg: var(--#{config.$prefix}primary) !default;
8
- $toggle-switch-off-bg: var(--#{config.$prefix}tertiary-bg-subtle) !default;
9
- $toggle-switch-disabled-bg: var(--#{config.$prefix}secondary-bg-subtle) !default;
10
- $toggle-switch-border-radius: borderRadius.$border-radius-lg !default;
11
- $toggle-switch-box-shadow: null !default;
7
+ $toggle-switch-on-bg: var(--#{config.$prefix}primary) !default;
8
+ $toggle-switch-off-bg: var(--#{config.$prefix}tertiary-bg-subtle) !default;
9
+ $toggle-switch-disabled-bg: var(--#{config.$prefix}secondary-bg-subtle) !default;
10
+ $toggle-switch-border-radius: borderRadius.$border-radius-lg !default;
11
+ $toggle-switch-box-shadow: null !default;
12
12
 
13
- $toggle-switch-width-sm: 48px !default;
14
- $toggle-switch-height-sm: 24px !default;
15
- $toggle-switch-width-md: 36px !default;
16
- $toggle-switch-height-md: 20px !default;
13
+ $toggle-switch-width-sm: 48px !default;
14
+ $toggle-switch-height-sm: 24px !default;
15
+ $toggle-switch-width-md: 36px !default;
16
+ $toggle-switch-height-md: 20px !default;
17
17
 
18
- $toggle-switch-width: $toggle-switch-width-md !default;
19
- $toggle-switch-height: $toggle-switch-height-md !default;
18
+ $toggle-switch-width: $toggle-switch-width-md !default;
19
+ $toggle-switch-height: $toggle-switch-height-md !default;
20
20
 
21
- $toggle-switch-handle-bg: var(--#{config.$prefix}primary-bg-subtle) !default;
22
- $toggle-switch-handle-border-radius: borderRadius.$border-radius-pill !default;
23
- $toggle-switch-handle-margin: 3px !default;
21
+ $toggle-switch-handle-bg: var(--#{config.$prefix}primary-bg-subtle) !default;
22
+ $toggle-switch-handle-border-radius: borderRadius.$border-radius-pill !default;
23
+ $toggle-switch-handle-margin: 3px !default;
24
24
 
25
- $toggle-switch-handle-width-sm: 20px !default;
26
- $toggle-switch-handle-width-md: 14px !default;
27
- $toggle-switch-handle-height-sm: 20px !default;
28
- $toggle-switch-handle-height-md: 14px !default;
25
+ $toggle-switch-handle-width-sm: 20px !default;
26
+ $toggle-switch-handle-width-md: 14px !default;
27
+ $toggle-switch-handle-height-sm: 20px !default;
28
+ $toggle-switch-handle-height-md: 14px !default;
29
29
 
30
- $toggle-switch-handle-width: $toggle-switch-handle-width-md !default;
31
- $toggle-switch-handle-height: $toggle-switch-handle-height-md !default;
30
+ $toggle-switch-handle-width: $toggle-switch-handle-width-md !default;
31
+ $toggle-switch-handle-height: $toggle-switch-handle-height-md !default;
32
32
 
33
- $toggle-label-font-size: typography.$font-size-base !default;
34
- $toggle-label-color: var(--#{config.$prefix}primary-text-emphasis)
33
+ $toggle-label-font-size: typography.$font-size-base !default;
34
+ $toggle-label-color: var(--#{config.$prefix}primary-text-emphasis);
package/src/styles/01-settings/_settings.tooltip.scss CHANGED
@@ -1,19 +1,19 @@
1
- @use "settings.config" as config;
2
- @use "settings.typography" as typography;
3
- @use "settings.border-radius" as borderRadius;
1
+ @use 'settings.config' as config;
2
+ @use 'settings.typography' as typography;
3
+ @use 'settings.border-radius' as borderRadius;
4
4
 
5
- $tooltip-max-width: 240px !default;
6
- $tooltip-padding-x: 12px !default;
7
- $tooltip-padding-y: 8px !default;
8
- $tooltip-bg: var(--#{config.$prefix}invert-bg-subtle) !default;
5
+ $tooltip-max-width: 240px !default;
6
+ $tooltip-padding-x: 12px !default;
7
+ $tooltip-padding-y: 8px !default;
8
+ $tooltip-bg: var(--#{config.$prefix}invert-bg-subtle) !default;
9
9
 
10
- $tooltip-font-size: typography.$font-size-xs !default;
11
- $tooltip-font-weight: typography.$font-weight-normal !default;
12
- $tooltip-color: var(--#{config.$prefix}invert-text-emphasis) !default;
10
+ $tooltip-font-size: typography.$font-size-xs !default;
11
+ $tooltip-font-weight: typography.$font-weight-normal !default;
12
+ $tooltip-color: var(--#{config.$prefix}invert-text-emphasis) !default;
13
13
 
14
- $tooltip-border-radius: borderRadius.$border-radius !default;
15
- $tooltip-border-width: null !default;
16
- $tooltip-border-color: null !default;
17
- $tooltip-box-shadow: null !default;
14
+ $tooltip-border-radius: borderRadius.$border-radius !default;
15
+ $tooltip-border-width: null !default;
16
+ $tooltip-border-color: null !default;
17
+ $tooltip-box-shadow: null !default;
18
18
 
19
- $tooltip-arrow-size: 12px !default;
19
+ $tooltip-arrow-size: 12px !default;
package/src/styles/01-settings/_settings.typography.scss CHANGED
@@ -3,41 +3,59 @@
3
3
  // Font, line-height, and color for body text, headings, and more.
4
4
 
5
5
  // Font stacks with appropriate fallbacks
6
- $Roboto: "Roboto", sans-serif;
6
+ $Roboto: 'Roboto', sans-serif;
7
7
 
8
- $helvetica-neue: 'Helvetica Neue', 'Helvetica', 'Arial', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !default;
9
- $system-font-stack: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif !default;
8
+ $helvetica-neue:
9
+ 'Helvetica Neue',
10
+ 'Helvetica',
11
+ 'Arial',
12
+ system-ui,
13
+ -apple-system,
14
+ BlinkMacSystemFont,
15
+ sans-serif !default;
16
+ $system-font-stack:
17
+ system-ui,
18
+ -apple-system,
19
+ BlinkMacSystemFont,
20
+ 'Segoe UI',
21
+ Roboto,
22
+ Oxygen-Sans,
23
+ Ubuntu,
24
+ Cantarell,
25
+ 'Helvetica Neue',
26
+ Arial,
27
+ sans-serif !default;
10
28
 
29
+ $font-family-base: $Roboto !default;
30
+ $font-family-sans-serif: $Roboto !default;
31
+ $font-family-monospace:
32
+ SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
33
+ $headings-font-family: $Roboto !default;
11
34
 
12
- $font-family-base: $Roboto !default;
13
- $font-family-sans-serif: $Roboto !default;
14
- $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
15
- $headings-font-family: $Roboto !default;
16
-
17
- $font-weight-light: 300 !default;
18
- $font-weight-normal: 400 !default;
19
- $font-weight-medium: 500 !default;
20
- $font-weight-semibold: 600 !default;
21
- $font-weight-bold: 700 !default;
22
- $font-weight-heavy: 800 !default;
23
- $font-weight-black: 900 !default;
24
- $font-weight-base: $font-weight-normal !default;
35
+ $font-weight-light: 300 !default;
36
+ $font-weight-normal: 400 !default;
37
+ $font-weight-medium: 500 !default;
38
+ $font-weight-semibold: 600 !default;
39
+ $font-weight-bold: 700 !default;
40
+ $font-weight-heavy: 800 !default;
41
+ $font-weight-black: 900 !default;
42
+ $font-weight-base: $font-weight-normal !default;
25
43
 
26
44
  // $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
27
45
  // $font-size-base affects the font size of the body text
28
46
  $font-size-root: null !default;
29
- $font-size-base: 1rem; //16px
30
- $font-size-xs: $font-size-base * .75 !default; //12px
31
- $font-size-sm: $font-size-base * .875 !default; //14px
32
- $font-size-md: $font-size-base * 1.125!default; //18px
33
- $font-size-lg: $font-size-base * 1.25 !default; //20px
47
+ $font-size-base: 1rem; //16px
48
+ $font-size-xs: $font-size-base * 0.75 !default; //12px
49
+ $font-size-sm: $font-size-base * 0.875 !default; //14px
50
+ $font-size-md: $font-size-base * 1.125 !default; //18px
51
+ $font-size-lg: $font-size-base * 1.25 !default; //20px
34
52
 
35
- $h1-font-size: $font-size-base * 2.5 !default; //40px
36
- $h2-font-size: $font-size-base * 2 !default; //32px
37
- $h3-font-size: $font-size-base * 1.5 !default; //24px
38
- $h4-font-size: $font-size-base * 1.25 !default; //20px
39
- $h5-font-size: $font-size-base * 1.125 !default; //18px
40
- $h6-font-size: $font-size-base !default; //16px
53
+ $h1-font-size: $font-size-base * 2.5 !default; //40px
54
+ $h2-font-size: $font-size-base * 2 !default; //32px
55
+ $h3-font-size: $font-size-base * 1.5 !default; //24px
56
+ $h4-font-size: $font-size-base * 1.25 !default; //20px
57
+ $h5-font-size: $font-size-base * 1.125 !default; //18px
58
+ $h6-font-size: $font-size-base !default; //16px
41
59
 
42
60
  // Font sizes map for utilities
43
61
  $font-sizes: (
@@ -47,30 +65,29 @@ $font-sizes: (
47
65
  4: $h4-font-size,
48
66
  5: $h5-font-size,
49
67
  6: $h6-font-size,
50
- "xs": $font-size-xs,
51
- "sm": $font-size-sm,
52
- "md": $font-size-md,
53
- "lg": $font-size-lg,
54
- "base": $font-size-base
68
+ 'xs': $font-size-xs,
69
+ 'sm': $font-size-sm,
70
+ 'md': $font-size-md,
71
+ 'lg': $font-size-lg,
72
+ 'base': $font-size-base,
55
73
  ) !default;
56
74
 
57
- $display-1: $font-size-base * 4 !default; //64px
58
-
59
- $line-height-base: 1.2 !default;
60
- $line-height-sm: 1.43 !default;
61
- $line-height-lg: 1.56 !default;
75
+ $display-1: $font-size-base * 4 !default; //64px
62
76
 
63
- $headings-margin-bottom: 0 !default;
64
- $headings-font-weight: $font-weight-bold !default;
65
- $headings-line-height: 1.3 !default;
77
+ $line-height-base: 1.2 !default;
78
+ $line-height-sm: 1.43 !default;
79
+ $line-height-lg: 1.56 !default;
66
80
 
81
+ $headings-margin-bottom: 0 !default;
82
+ $headings-font-weight: $font-weight-bold !default;
83
+ $headings-line-height: 1.3 !default;
67
84
 
68
- $h1-letter-spaceing: -1px !default;
69
- $h2-letter-spaceing: -1px !default;
70
- $h3-letter-spaceing: -1px !default;
71
- $h4-letter-spaceing: -0.5px !default;
72
- $h5-letter-spaceing: -0.5px !default;
73
- $h6-letter-spaceing: -0.5px !default;
85
+ $h1-letter-spaceing: -1px !default;
86
+ $h2-letter-spaceing: -1px !default;
87
+ $h3-letter-spaceing: -1px !default;
88
+ $h4-letter-spaceing: -0.5px !default;
89
+ $h5-letter-spaceing: -0.5px !default;
90
+ $h6-letter-spaceing: -0.5px !default;
74
91
 
75
- $paragraph-margin-bottom: 0 !default;
76
- $body-text-align: null !default;
92
+ $paragraph-margin-bottom: 0 !default;
93
+ $body-text-align: null !default;