@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.messages.scss CHANGED
@@ -1,77 +1,71 @@
1
- @use "./settings.border-radius" as *;
2
- @use "./settings.config" as *;
3
- @use "./settings.typography" as *;
4
- @use "./settings.colors" as *;
5
-
6
- $messages-width: 100%;
7
-
8
- $messages-padding-x: 32px !default;
9
- $messages-padding-y: $messages-padding-x !default;
10
- $messages-border-radius: $border-radius-xl !default;
11
- $messages-border-width: 0px !default;
12
- $messages-border-color: null !default;
13
- $messages-bg: var(--#{$prefix}secondary-bg-subtle) !default;
14
-
15
- $messages-content-margin-top: 32px !default;
16
-
17
- $messages-avatar-margin: 12px !default;
18
-
19
- $messages-items-padding-x: 0px !default;
20
- $messages-items-padding-y: 0px !default;
21
- $messages-items-width: 479px !default;
22
- $messages-items-border-width: 0px !default;
23
- $messages-items-border-color: transparent !default;
24
- $messages-items-border-radius: null!default;
25
- $messages-items-gap: 4px !default;
26
-
27
-
28
- $messages-text-padding-x: 12px !default;
29
- $messages-text-padding-y: 12px !default;
30
- $messages-text-font-size: $font-size-sm !default;
31
- $messages-text-primary-color: var(--#{$prefix}body-color) !default;
32
- $messages-text-secondary-color: var(--#{$prefix}body-color) !default;
33
- $messages-text-primary-bg: var(--#{$prefix}brand-bg-subtle) !default;
34
- $messages-text-secondary-bg: var(--#{$prefix}tertiary-bg-subtle) !default;
35
- $messages-text-border-radius: $border-radius-xxl !default;
36
-
37
- $messages-file-padding-x: $messages-text-padding-x !default;
38
- $messages-file-padding-y: $messages-text-padding-y !default;
39
- $messages-file-text-font-size: $messages-text-font-size !default;
40
- $messages-file-text-primary-color: $messages-text-primary-color !default;
41
- $messages-file-text-secondary-color: $messages-text-secondary-color !default;
42
- $messages-file-icon-size: 40px !default;
43
- $messages-file-icon-bg: $primary-2 !default;
44
- $messages-file-icon-bg-dark: $primary-7 !default;
45
- $messages-file-icon-margin-right: 8px !default;
46
- $messages-file-info-font-size: $font-size-xs !default;
47
- $messages-file-info-color: var(--#{$prefix}tertiary-text-emphasis) !default;
48
- $messages-file-primary-bg: $messages-text-primary-bg !default;
49
- $messages-file-secondary-bg: $messages-text-secondary-bg !default;
50
- $messages-file-border-radius: $border-radius-xxl !default;
51
-
52
- $messages-image-width: 400px !default;
53
- $messages-image-height: 260px !default;
54
- $messages-image-border-radius: $border-radius-xxl !default;
55
-
56
- $messages-form-margin-top: 32px !default;
57
- $messages-form-row-gap: 8px !default;
58
- $messages-form-submit-icon-size: 24px !default;
59
-
60
- $messages-input-padding-x: 12px !default;
61
- $messages-input-padding-y: 12px !default;
62
- $messages-input-font-size: $font-size-base !default;
63
- $messages-input-color: var(--#{$prefix}body-color) !default;
64
- $messages-input-placeholder-color: var(--#{$prefix}tertiary-text-emphasis) !default;
65
- $messages-input-border-width: 1px !default;
66
- $messages-input-border-color: var(--#{$prefix}secondary-border-subtle) !default;
67
- $messages-input-border-radius: $border-radius-xl !default;
68
-
69
- $messages-input-options-icons-size: 24px !default;
70
- $messages-input-options-row-gap: 8px !default;
71
-
72
-
73
- $messages-body-height: calc(100vh - 600px) !default;
74
-
75
-
76
-
77
-
1
+ @use './settings.border-radius' as *;
2
+ @use './settings.config' as *;
3
+ @use './settings.typography' as *;
4
+ @use './settings.colors' as *;
5
+
6
+ $messages-width: 100%;
7
+
8
+ $messages-padding-x: 32px !default;
9
+ $messages-padding-y: $messages-padding-x !default;
10
+ $messages-border-radius: $border-radius-xl !default;
11
+ $messages-border-width: 0px !default;
12
+ $messages-border-color: null !default;
13
+ $messages-bg: var(--#{$prefix}secondary-bg-subtle) !default;
14
+
15
+ $messages-content-margin-top: 32px !default;
16
+
17
+ $messages-avatar-margin: 12px !default;
18
+
19
+ $messages-items-padding-x: 0px !default;
20
+ $messages-items-padding-y: 0px !default;
21
+ $messages-items-width: 479px !default;
22
+ $messages-items-border-width: 0px !default;
23
+ $messages-items-border-color: transparent !default;
24
+ $messages-items-border-radius: null !default;
25
+ $messages-items-gap: 4px !default;
26
+
27
+ $messages-text-padding-x: 12px !default;
28
+ $messages-text-padding-y: 12px !default;
29
+ $messages-text-font-size: $font-size-sm !default;
30
+ $messages-text-primary-color: var(--#{$prefix}body-color) !default;
31
+ $messages-text-secondary-color: var(--#{$prefix}body-color) !default;
32
+ $messages-text-primary-bg: var(--#{$prefix}brand-bg-subtle) !default;
33
+ $messages-text-secondary-bg: var(--#{$prefix}tertiary-bg-subtle) !default;
34
+ $messages-text-border-radius: $border-radius-xxl !default;
35
+
36
+ $messages-file-padding-x: $messages-text-padding-x !default;
37
+ $messages-file-padding-y: $messages-text-padding-y !default;
38
+ $messages-file-text-font-size: $messages-text-font-size !default;
39
+ $messages-file-text-primary-color: $messages-text-primary-color !default;
40
+ $messages-file-text-secondary-color: $messages-text-secondary-color !default;
41
+ $messages-file-icon-size: 40px !default;
42
+ $messages-file-icon-bg: $primary-2 !default;
43
+ $messages-file-icon-bg-dark: $primary-7 !default;
44
+ $messages-file-icon-margin-right: 8px !default;
45
+ $messages-file-info-font-size: $font-size-xs !default;
46
+ $messages-file-info-color: var(--#{$prefix}tertiary-text-emphasis) !default;
47
+ $messages-file-primary-bg: $messages-text-primary-bg !default;
48
+ $messages-file-secondary-bg: $messages-text-secondary-bg !default;
49
+ $messages-file-border-radius: $border-radius-xxl !default;
50
+
51
+ $messages-image-width: 400px !default;
52
+ $messages-image-height: 260px !default;
53
+ $messages-image-border-radius: $border-radius-xxl !default;
54
+
55
+ $messages-form-margin-top: 32px !default;
56
+ $messages-form-row-gap: 8px !default;
57
+ $messages-form-submit-icon-size: 24px !default;
58
+
59
+ $messages-input-padding-x: 12px !default;
60
+ $messages-input-padding-y: 12px !default;
61
+ $messages-input-font-size: $font-size-base !default;
62
+ $messages-input-color: var(--#{$prefix}body-color) !default;
63
+ $messages-input-placeholder-color: var(--#{$prefix}tertiary-text-emphasis) !default;
64
+ $messages-input-border-width: 1px !default;
65
+ $messages-input-border-color: var(--#{$prefix}secondary-border-subtle) !default;
66
+ $messages-input-border-radius: $border-radius-xl !default;
67
+
68
+ $messages-input-options-icons-size: 24px !default;
69
+ $messages-input-options-row-gap: 8px !default;
70
+
71
+ $messages-body-height: calc(100vh - 600px) !default;
package/src/styles/01-settings/_settings.modal.scss CHANGED
@@ -1,31 +1,31 @@
1
- @use "./settings.config" as *;
2
- @use "./settings.typography" as *;
3
- @use "./settings.border-radius" as *;
4
- @use "./settings.colors" as *;
1
+ @use './settings.config' as *;
2
+ @use './settings.typography' as *;
3
+ @use './settings.border-radius' as *;
4
+ @use './settings.colors' as *;
5
5
 
6
- $modal-inner-padding: 16px !default;
6
+ $modal-inner-padding: 16px !default;
7
7
 
8
- $modal-content-color: null !default;
9
- $modal-content-bg: var(--#{$prefix}body-bg) !default;
10
- $modal-content-border-radius: $border-radius-xl !default;
11
- $modal-content-box-shadow: var(--#{$prefix}box-shadow) !default;
8
+ $modal-content-color: null !default;
9
+ $modal-content-bg: var(--#{$prefix}body-bg) !default;
10
+ $modal-content-border-radius: $border-radius-xl !default;
11
+ $modal-content-box-shadow: var(--#{$prefix}box-shadow) !default;
12
12
 
13
- $modal-header-padding-bottom: 12px !default;
14
- $modal-title-font-size: $font-size-lg !default;
15
- $modal-sub-margin-top: 4px !default;
16
- $modal-sub-font-size: $font-size-sm;
17
- $modal-sub-color: var(--#{$prefix}tertiary-text-emphasis) !default;
13
+ $modal-header-padding-bottom: 12px !default;
14
+ $modal-title-font-size: $font-size-lg !default;
15
+ $modal-sub-margin-top: 4px !default;
16
+ $modal-sub-font-size: $font-size-sm;
17
+ $modal-sub-color: var(--#{$prefix}tertiary-text-emphasis) !default;
18
18
 
19
- $modal-footer-items-gap: 8px !default;
19
+ $modal-footer-items-gap: 8px !default;
20
20
 
21
- $modal-backdrop-bg: var(--#{$prefix}invert-bg-subtle) !default;
22
- $modal-backdrop-opacity: .5 !default;
23
- $modal-backdrop-blur: 10px !default;
21
+ $modal-backdrop-bg: var(--#{$prefix}invert-bg-subtle) !default;
22
+ $modal-backdrop-opacity: 0.5 !default;
23
+ $modal-backdrop-blur: 10px !default;
24
24
 
25
- $modal-close-icon-color: $black !default;
26
- $modal-close-icon-size: 30px !default;
25
+ $modal-close-icon-color: $black !default;
26
+ $modal-close-icon-size: 30px !default;
27
27
 
28
- $modal-sm: 400px !default;
29
- $modal-md: 800px !default;
30
- $modal-lg: 1000px !default;
31
- $modal-xl: 1140px !default
28
+ $modal-sm: 400px !default;
29
+ $modal-md: 800px !default;
30
+ $modal-lg: 1000px !default;
31
+ $modal-xl: 1140px !default;
package/src/styles/01-settings/_settings.nav.scss CHANGED
@@ -1,18 +1,18 @@
1
- @use "./settings.config" as *;
2
- @use "./settings.typography" as *;
3
- @use "./settings.border-radius" as *;
4
- @use "./settings.colors" as *;
1
+ @use './settings.config' as *;
2
+ @use './settings.typography' as *;
3
+ @use './settings.border-radius' as *;
4
+ @use './settings.colors' as *;
5
5
 
6
- $nav-item-gap-x: 8px !default;
6
+ $nav-item-gap-x: 8px !default;
7
7
 
8
- $nav-link-padding-x: 12px !default;
9
- $nav-link-padding-y: 8px !default;
10
- $nav-link-font-size: $font-size-base !default;
11
- $nav-link-font-weight: $font-weight-medium !default;
12
- $nav-link-color: var(--#{$prefix}body-color) !default;
13
- $nav-link-hover-color: $nav-link-color !default;
14
- $nav-link-bg: var(--#{$prefix}body-bg) !default;
15
- $nav-link-hover-bg: var(--#{$prefix}secondary-bg-subtle) !default;
16
- $nav-link-inner-gap: 8px !default;
8
+ $nav-link-padding-x: 12px !default;
9
+ $nav-link-padding-y: 8px !default;
10
+ $nav-link-font-size: $font-size-base !default;
11
+ $nav-link-font-weight: $font-weight-medium !default;
12
+ $nav-link-color: var(--#{$prefix}body-color) !default;
13
+ $nav-link-hover-color: $nav-link-color !default;
14
+ $nav-link-bg: var(--#{$prefix}body-bg) !default;
15
+ $nav-link-hover-bg: var(--#{$prefix}secondary-bg-subtle) !default;
16
+ $nav-link-inner-gap: 8px !default;
17
17
 
18
- $nav-icon-size: 20px !default;
18
+ $nav-icon-size: 20px !default;
package/src/styles/01-settings/_settings.navbar.scss CHANGED
@@ -1,19 +1,46 @@
1
- @use "./settings.config" as *;
2
- @use "./settings.typography" as *;
3
- @use "./settings.colors" as *;
1
+ @use './settings.config' as *;
2
+ @use './settings.typography' as *;
3
+ @use './settings.colors' as *;
4
4
 
5
- $navbar-padding-x: 64px !default;
6
- $navbar-padding-y: 8px !default;
7
- $navbar-bg: var(--#{$prefix}body-bg) !default;
8
- $navbar-border-width: 1px !default;
9
- $navbar-border-color: var(--#{$prefix}primary-border-subtle) !default;
5
+ // Navbar container and layout
6
+ $navbar-padding-x: 64px !default;
7
+ $navbar-padding-y: 8px !default;
8
+ $navbar-container-max-width: 1600px !default;
10
9
 
10
+ // Navbar appearance
11
+ $navbar-bg: var(--#{$prefix}body-bg) !default;
12
+ $navbar-border-width: 1px !default;
13
+ $navbar-border-color: var(--#{$prefix}primary-border-subtle) !default;
14
+ $navbar-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !default;
11
15
 
12
- $navbar-brand-margin-end: 30px !default;
16
+ // Brand/logo
17
+ $navbar-brand-margin-end: 30px !default;
18
+ $navbar-brand-font-size: $font-size-lg !default;
19
+ $navbar-brand-font-weight: $font-weight-bold !default;
20
+ $navbar-brand-color: var(--#{$prefix}body-color) !default;
13
21
 
22
+ // Mobile toggler
23
+ $navbar-toggler-size: 30px !default;
24
+ $navbar-toggler-color: var(--#{$prefix}body-color) !default;
25
+ $navbar-toggler-bg: transparent !default;
26
+ $navbar-toggler-border: 0 !default;
27
+ $navbar-toggler-border-radius: 4px !default;
28
+ $navbar-toggler-focus-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !default;
14
29
 
30
+ // Collapse/mobile menu
31
+ $navbar-collapse-padding-top: 0.5rem !default;
32
+ $navbar-collapse-transition: all 0.3s ease-in-out !default;
15
33
 
16
- $navbar-toggler-size: 30px !default;
17
- $navbar-toggler-color: $black !default;
34
+ // Backdrop (for mobile overlay)
35
+ $navbar-backdrop-bg: rgba(0, 0, 0, 0.5) !default;
36
+ $navbar-backdrop-z-index: 1029 !default;
18
37
 
19
- $navbar-container-max-width: 1600px !default;
38
+ // Z-index values
39
+ $navbar-z-index: 1030 !default;
40
+ $navbar-fixed-z-index: 1030 !default;
41
+
42
+ // Dark mode variants
43
+ $navbar-bg-dark: var(--#{$prefix}gray-9) !default;
44
+ $navbar-border-color-dark: var(--#{$prefix}gray-7) !default;
45
+ $navbar-brand-color-dark: var(--#{$prefix}gray-1) !default;
46
+ $navbar-toggler-color-dark: var(--#{$prefix}gray-1) !default;
package/src/styles/01-settings/_settings.pagination.scss CHANGED
@@ -1,29 +1,29 @@
1
- @use "./settings.config" as *;
2
- @use "./settings.typography" as *;
3
- @use "./settings.colors" as *;
4
- @use "./settings.border-radius" as *;
1
+ @use './settings.config' as *;
2
+ @use './settings.typography' as *;
3
+ @use './settings.colors' as *;
4
+ @use './settings.border-radius' as *;
5
5
 
6
- $pagination-size: 32px !default;
7
- $pagination-size-sm: 24px !default;
8
- $pagination-size-lg: 40px !default;
6
+ $pagination-size: 32px !default;
7
+ $pagination-size-sm: 24px !default;
8
+ $pagination-size-lg: 40px !default;
9
9
 
10
- $pagination-padding-x: 8px !default;
11
- $pagination-padding-y: 8px !default;
10
+ $pagination-padding-x: 8px !default;
11
+ $pagination-padding-y: 8px !default;
12
12
 
13
- $pagination-font-size: $font-size-sm !default;
13
+ $pagination-font-size: $font-size-sm !default;
14
14
 
15
- $pagination-color: var(--#{$prefix}secondary-text-emphasis) !default;
16
- $pagination-bg: var(--#{$prefix}body-bg) !default;
17
- $pagination-border-radius: $border-radius-pill !default;
15
+ $pagination-color: var(--#{$prefix}secondary-text-emphasis) !default;
16
+ $pagination-bg: var(--#{$prefix}body-bg) !default;
17
+ $pagination-border-radius: $border-radius-pill !default;
18
18
 
19
- $pagination-focus-border-width: 2px !default;
20
- $pagination-focus-border-color: var(--#{$prefix}brand-border-subtle) !default;
19
+ $pagination-focus-border-width: 2px !default;
20
+ $pagination-focus-border-color: var(--#{$prefix}brand-border-subtle) !default;
21
21
 
22
- $pagination-hover-color: var(--#{$prefix}body-color) !default;
23
- $pagination-hover-bg: var(--#{$prefix}secondary-bg-subtle) !default;
22
+ $pagination-hover-color: var(--#{$prefix}body-color) !default;
23
+ $pagination-hover-bg: var(--#{$prefix}secondary-bg-subtle) !default;
24
24
 
25
- $pagination-active-color: var(--#{$prefix}body-color) !default;
26
- $pagination-active-bg: var(--#{$prefix}brand-bg-subtle) !default;
25
+ $pagination-active-color: var(--#{$prefix}body-color) !default;
26
+ $pagination-active-bg: var(--#{$prefix}brand-bg-subtle) !default;
27
27
 
28
- $pagination-disabled-color: var(--#{$prefix}tertiary-text-emphasis) !default;
29
- $pagination-disabled-bg: var(--#{$prefix}body-bg) !default;
28
+ $pagination-disabled-color: var(--#{$prefix}tertiary-text-emphasis) !default;
29
+ $pagination-disabled-bg: var(--#{$prefix}body-bg) !default;
package/src/styles/01-settings/_settings.photoviewer.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  // src/styles/01-settings/_settings.photoviewer.scss
2
2
 
3
- @use "settings.config" as config;
3
+ @use 'settings.config' as config;
4
4
 
5
5
  // Spacing variables
6
6
  $component-spacing: 1.25rem !default;
package/src/styles/01-settings/_settings.popover.scss CHANGED
@@ -1,10 +1,10 @@
1
- @use "settings.config" as config;
2
- @use "settings.border-radius" as border-radius;
1
+ @use 'settings.config' as config;
2
+ @use 'settings.border-radius' as border-radius;
3
3
 
4
4
  $popover-max-width: 300px !default;
5
5
  $popover-padding-x: 16px !default;
6
6
  $popover-padding-y: $popover-padding-x !default;
7
- $popover-inner-gap-x: 12px !default;
7
+ $popover-inner-gap-x: 12px !default;
8
8
  $popover-inner-gap-y: 16px !default;
9
9
  $popover-bg: var(--#{config.$prefix}body-bg) !default;
10
10
  $popover-border-radius: border-radius.$border-radius-xl !default;
package/src/styles/01-settings/_settings.position.scss CHANGED
@@ -3,5 +3,5 @@ $position-values: (
3
3
  25: 25%,
4
4
  50: 50%,
5
5
  75: 75%,
6
- 100: 100%
7
- ) !default;
6
+ 100: 100%,
7
+ ) !default;
package/src/styles/01-settings/_settings.progress.scss CHANGED
@@ -1,18 +1,15 @@
1
-
2
- @use "settings.config" as config;
3
- @use "settings.typography" as typography;
4
- @use "settings.border-radius" as border-radius;
5
- @use "settings.animations" as animations;
6
-
7
- $progress-width: 100% !default;
8
- $progress-height: 6px !default;
9
- $progress-font-size: typography.$font-size-xs !default;
10
- $progress-bg: var(--#{config.$prefix}secondary-bg-subtle) !default;
11
- $progress-border-radius: border-radius.$border-radius-pill !default;
12
- $progress-bar-height: $progress-height !default;
13
- $progress-bar-color: var(--#{config.$prefix}primary-text-emphasis) !default;
14
- $progress-bar-bg: var(--#{config.$prefix}primary) !default;
15
- $progress-bar-transition: animations.$transition-duration !default;
16
- $progress-bar-easing: animations.$easing !default;
17
-
18
-
1
+ @use 'settings.config' as config;
2
+ @use 'settings.typography' as typography;
3
+ @use 'settings.border-radius' as border-radius;
4
+ @use 'settings.animations' as animations;
5
+
6
+ $progress-width: 100% !default;
7
+ $progress-height: 6px !default;
8
+ $progress-font-size: typography.$font-size-xs !default;
9
+ $progress-bg: var(--#{config.$prefix}secondary-bg-subtle) !default;
10
+ $progress-border-radius: border-radius.$border-radius-pill !default;
11
+ $progress-bar-height: $progress-height !default;
12
+ $progress-bar-color: var(--#{config.$prefix}primary-text-emphasis) !default;
13
+ $progress-bar-bg: var(--#{config.$prefix}primary) !default;
14
+ $progress-bar-transition: animations.$transition-duration !default;
15
+ $progress-bar-easing: animations.$easing !default;
package/src/styles/01-settings/_settings.rating.scss CHANGED
@@ -1,8 +1,8 @@
1
- @use "settings.config" as config;
1
+ @use 'settings.config' as config;
2
2
 
3
- $rating-star-size: 32px !default;
4
- $rating-star-size-sm: 16px !default;
5
- $rating-star-size-lg: 48px !default;
6
- $rating-star-bg: var(--#{config.$prefix}primary) !default;
7
- $rating-star-half-bg: $rating-star-bg !default;
8
- $rating-stars-gap: 2px !default;
3
+ $rating-star-size: 32px !default;
4
+ $rating-star-size-sm: 16px !default;
5
+ $rating-star-size-lg: 48px !default;
6
+ $rating-star-bg: var(--#{config.$prefix}primary) !default;
7
+ $rating-star-half-bg: $rating-star-bg !default;
8
+ $rating-stars-gap: 2px !default;
package/src/styles/01-settings/_settings.river.scss CHANGED
@@ -1,34 +1,34 @@
1
- @use "settings.config" as config;
2
- @use "settings.typography" as typography;
3
- @use "settings.colors" as colors;
1
+ @use 'settings.config' as config;
2
+ @use 'settings.typography' as typography;
3
+ @use 'settings.colors' as colors;
4
4
 
5
- $river-width: 100% !default;
6
- $river-padding-x: 0px !default;
7
- $river-padding-y: 40px !default;
8
- $river-border-radius: 0px;
9
- $river-bg: var(--#{config.$prefix}body-bg) !default;
10
- $river-overlay: colors.$dark !default;
11
- $river-overlay-opacity: 0.6 !default;
5
+ $river-width: 100% !default;
6
+ $river-padding-x: 0px !default;
7
+ $river-padding-y: 40px !default;
8
+ $river-border-radius: 0px;
9
+ $river-bg: var(--#{config.$prefix}body-bg) !default;
10
+ $river-overlay: colors.$dark !default;
11
+ $river-overlay-opacity: 0.6 !default;
12
12
 
13
- $river-title-font-size: typography.$h1-font-size !default;
14
- $river-text-font-size: typography.$font-size-base !default;
13
+ $river-title-font-size: typography.$h1-font-size !default;
14
+ $river-text-font-size: typography.$font-size-base !default;
15
15
 
16
- $river-title-font-weight: typography.$font-weight-medium !default;
17
- $river-text-font-weight: typography.$font-weight-normal !default;
16
+ $river-title-font-weight: typography.$font-weight-medium !default;
17
+ $river-text-font-weight: typography.$font-weight-normal !default;
18
18
 
19
- $river-title-color: var(--#{config.$prefix}body-color) !default;
20
- $river-text-color: var(--#{config.$prefix}secondary-text-emphasis) !default;
19
+ $river-title-color: var(--#{config.$prefix}body-color) !default;
20
+ $river-text-color: var(--#{config.$prefix}secondary-text-emphasis) !default;
21
21
 
22
- $river-text-margin-top: 12px !default;
23
- $river-actions-margin-top: 12px !default;
24
- $river-actions-spacing-x: 12px !default;
22
+ $river-text-margin-top: 12px !default;
23
+ $river-actions-margin-top: 12px !default;
24
+ $river-actions-spacing-x: 12px !default;
25
25
 
26
- $river-image-border-radius: 0px !default;
27
- $river-image-box-shadow: null !default;
26
+ $river-image-border-radius: 0px !default;
27
+ $river-image-box-shadow: null !default;
28
28
 
29
- $river-spacing-inner: 64px !default;
29
+ $river-spacing-inner: 64px !default;
30
30
 
31
- $river-content-max-width: 536px !default;
31
+ $river-content-max-width: 536px !default;
32
32
 
33
- $river-breakout-title-width: $river-content-max-width !default;
34
- $river-breakout-text-width: 427px !default;
33
+ $river-breakout-title-width: $river-content-max-width !default;
34
+ $river-breakout-text-width: 427px !default;
package/src/styles/01-settings/_settings.sectionintro.scss CHANGED
@@ -1,22 +1,21 @@
1
- @use "settings.typography" as typography;
2
- @use "settings.config" as config;
1
+ @use 'settings.typography' as typography;
2
+ @use 'settings.config' as config;
3
3
 
4
- $sectionintro-padding-x: 0px !default;
5
- $sectionintro-padding-y: 40px !default;
4
+ $sectionintro-padding-x: 0px !default;
5
+ $sectionintro-padding-y: 40px !default;
6
6
 
7
- $sectionintro-title-font-size: typography.$h1-font-size !default;
8
- $sectionintro-text-font-size: typography.$font-size-base !default;
7
+ $sectionintro-title-font-size: typography.$h1-font-size !default;
8
+ $sectionintro-text-font-size: typography.$font-size-base !default;
9
9
 
10
- $sectionintro-title-color: var(--#{config.$prefix}body-color) !default;
11
- $sectionintro-text-color: var(--#{config.$prefix}body-color) !default;
10
+ $sectionintro-title-color: var(--#{config.$prefix}body-color) !default;
11
+ $sectionintro-text-color: var(--#{config.$prefix}body-color) !default;
12
12
 
13
- $sectionintro-title-font-weight: typography.$font-weight-bold !default;
14
- $sectionintro-text-font-weight: typography.$font-weight-normal !default;
13
+ $sectionintro-title-font-weight: typography.$font-weight-bold !default;
14
+ $sectionintro-text-font-weight: typography.$font-weight-normal !default;
15
15
 
16
- $sectionintro-label-margin-bottom: 12px !default;
17
- $sectionintro-text-margin-top: 12px !default;
18
- $sectionintro-actions-margin-top: 23px !default;
19
- $sectionintro-actions-inner-gap: 12px !default;
20
-
21
- $sectionintro-width: 648px !default;
16
+ $sectionintro-label-margin-bottom: 12px !default;
17
+ $sectionintro-text-margin-top: 12px !default;
18
+ $sectionintro-actions-margin-top: 23px !default;
19
+ $sectionintro-actions-inner-gap: 12px !default;
22
20
 
21
+ $sectionintro-width: 648px !default;
package/src/styles/01-settings/_settings.select.scss CHANGED
@@ -1,32 +1,32 @@
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
- $select-width: 300px !default;
6
- $select-padding-x: 12px !default;
7
- $select-padding-y: $select-padding-x !default;
8
- $select-color: var(--#{config.$prefix}body-color) !default;
9
- $select-font-size: typography.$font-size-sm !default;
10
- $select-font-size-lg: typography.$font-size-base !default;
11
- $select-icon-toggle-size: 20px !default;
12
- $select-icon-toggle-color: var(--#{config.$prefix}secondary-text-emphasis) !default;
13
- $select-placeholder-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
14
- $select-bg: var(--#{config.$prefix}body-bg) !default;
15
- $select-expanded-bg: var(--#{config.$prefix}secondary-bg-subtle) !default;
16
- $select-border-color: var(--#{config.$prefix}primary-border-subtle) !default;
17
- $select-border-color-hover: var(--#{config.$prefix}secondary-border-subtle) !default;
18
- $select-border-radius: border-radius.$border-radius-xl !default;
19
- $select-inner-spacer: 8px !default;
20
- $select-dropdown-icon-size: 24px !default;
21
- $select-panel-padding-x: 8px !default;
22
- $select-panel-padding-y: $select-panel-padding-x !default;
23
- $select-panel-spacer-y: $select-panel-padding-y !default;
24
- $select-panel-bg: var(--#{config.$prefix}body-bg) !default;
25
- $select-panel-box-shadow: var(--#{config.$prefix}box-shadow) !default;
26
- $select-panel-border-radius: $select-border-radius !default;
27
- $select-item-padding-x: $select-panel-padding-x !default;
28
- $select-item-padding-y: $select-panel-padding-y !default;
29
- $select-item-color: var(--#{config.$prefix}body-color) !default;
30
- $select-item-bg: var(--#{config.$prefix}body-bg) !default;
31
- $select-item-border-radius: border-radius.$border-radius !default;
32
- $select-item-bg-hover: var(--#{config.$prefix}secondary-bg-subtle) !default;
5
+ $select-width: 300px !default;
6
+ $select-padding-x: 12px !default;
7
+ $select-padding-y: $select-padding-x !default;
8
+ $select-color: var(--#{config.$prefix}body-color) !default;
9
+ $select-font-size: typography.$font-size-sm !default;
10
+ $select-font-size-lg: typography.$font-size-base !default;
11
+ $select-icon-toggle-size: 20px !default;
12
+ $select-icon-toggle-color: var(--#{config.$prefix}secondary-text-emphasis) !default;
13
+ $select-placeholder-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
14
+ $select-bg: var(--#{config.$prefix}body-bg) !default;
15
+ $select-expanded-bg: var(--#{config.$prefix}secondary-bg-subtle) !default;
16
+ $select-border-color: var(--#{config.$prefix}primary-border-subtle) !default;
17
+ $select-border-color-hover: var(--#{config.$prefix}secondary-border-subtle) !default;
18
+ $select-border-radius: border-radius.$border-radius-xl !default;
19
+ $select-inner-spacer: 8px !default;
20
+ $select-dropdown-icon-size: 24px !default;
21
+ $select-panel-padding-x: 8px !default;
22
+ $select-panel-padding-y: $select-panel-padding-x !default;
23
+ $select-panel-spacer-y: $select-panel-padding-y !default;
24
+ $select-panel-bg: var(--#{config.$prefix}body-bg) !default;
25
+ $select-panel-box-shadow: var(--#{config.$prefix}box-shadow) !default;
26
+ $select-panel-border-radius: $select-border-radius !default;
27
+ $select-item-padding-x: $select-panel-padding-x !default;
28
+ $select-item-padding-y: $select-panel-padding-y !default;
29
+ $select-item-color: var(--#{config.$prefix}body-color) !default;
30
+ $select-item-bg: var(--#{config.$prefix}body-bg) !default;
31
+ $select-item-border-radius: border-radius.$border-radius !default;
32
+ $select-item-bg-hover: var(--#{config.$prefix}secondary-bg-subtle) !default;