@shohojdhara/atomix 0.3.1 → 0.3.3

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 (449) hide show
  1. package/CHANGELOG.md +0 -1
  2. package/README.md +41 -24
  3. package/dist/atomix.css +540 -666
  4. package/dist/atomix.min.css +3 -3
  5. package/dist/index.d.ts +7559 -5717
  6. package/dist/index.esm.js +5013 -2301
  7. package/dist/index.esm.js.map +1 -1
  8. package/dist/index.js +5084 -2356
  9. package/dist/index.js.map +1 -1
  10. package/dist/index.min.js +1 -1
  11. package/dist/index.min.js.map +1 -1
  12. package/dist/themes/applemix.css +1683 -722
  13. package/dist/themes/applemix.css.map +1 -0
  14. package/dist/themes/applemix.min.css +13 -10
  15. package/dist/themes/boomdevs.css +1358 -544
  16. package/dist/themes/boomdevs.css.map +1 -0
  17. package/dist/themes/boomdevs.min.css +13 -10
  18. package/dist/themes/esrar.css +1743 -718
  19. package/dist/themes/esrar.css.map +1 -0
  20. package/dist/themes/esrar.min.css +41 -7
  21. package/dist/themes/flashtrade.css +1735 -752
  22. package/dist/themes/flashtrade.css.map +1 -0
  23. package/dist/themes/flashtrade.min.css +19 -13
  24. package/dist/themes/mashroom.css +1765 -787
  25. package/dist/themes/mashroom.css.map +1 -0
  26. package/dist/themes/mashroom.min.css +87 -38
  27. package/dist/themes/shaj-default.css +1685 -713
  28. package/dist/themes/shaj-default.css.map +1 -0
  29. package/dist/themes/shaj-default.min.css +11 -7
  30. package/package.json +95 -26
  31. package/scripts/atomix-cli.js +1428 -0
  32. package/scripts/build-themes.js +208 -0
  33. package/scripts/cli/interactive-init.js +528 -0
  34. package/scripts/cli/migration-tools.js +603 -0
  35. package/scripts/cli/token-manager.js +519 -0
  36. package/scripts/sync-theme-config.js +309 -0
  37. package/src/components/List/ListGroup.tsx +1 -2
  38. package/src/components/Popover/Popover.tsx +2 -2
  39. package/src/components/Tooltip/Tooltip.stories.tsx +49 -12
  40. package/src/components/Tooltip/Tooltip.tsx +32 -58
  41. package/src/lib/composables/useAtomixGlass.ts +46 -46
  42. package/src/lib/composables/useTooltip.ts +285 -0
  43. package/src/lib/constants/cssVariables.ts +390 -0
  44. package/src/lib/hooks/__tests__/useComponentCustomization.test.ts +151 -0
  45. package/src/lib/hooks/index.ts +19 -0
  46. package/src/lib/hooks/useComponentCustomization.ts +175 -0
  47. package/src/lib/index.ts +10 -1
  48. package/src/lib/patterns/__tests__/slots.test.ts +108 -0
  49. package/src/lib/patterns/index.ts +35 -0
  50. package/src/lib/patterns/slots.tsx +421 -0
  51. package/src/lib/theme/__tests__/ThemeBuilder.test.ts +223 -0
  52. package/src/lib/theme/builders/ThemeBuilder.ts +372 -0
  53. package/src/lib/theme/config/index.ts +21 -0
  54. package/src/lib/theme/config/loader.ts +276 -0
  55. package/src/lib/theme/config/types.ts +98 -0
  56. package/src/lib/theme/config/validator.ts +326 -0
  57. package/src/lib/theme/constants.ts +183 -0
  58. package/src/lib/theme/core/ThemeCache.ts +283 -0
  59. package/src/lib/theme/core/ThemeEngine.test.ts +146 -0
  60. package/src/lib/theme/core/ThemeEngine.ts +657 -0
  61. package/src/lib/theme/core/ThemeRegistry.ts +284 -0
  62. package/src/lib/theme/core/ThemeValidator.ts +530 -0
  63. package/src/lib/theme/core/index.ts +24 -0
  64. package/src/lib/theme/createTheme.ts +83 -204
  65. package/src/lib/theme/cssVariableMapper.ts +261 -0
  66. package/src/lib/theme/devtools/CLI.ts +279 -0
  67. package/src/lib/theme/devtools/Inspector.tsx +594 -0
  68. package/src/lib/theme/devtools/Preview.tsx +392 -0
  69. package/src/lib/theme/devtools/index.ts +21 -0
  70. package/src/lib/theme/errors.test.ts +207 -0
  71. package/src/lib/theme/errors.ts +233 -0
  72. package/src/lib/theme/generateCSSVariables.ts +93 -9
  73. package/src/lib/theme/generators/CSSGenerator.ts +311 -0
  74. package/src/lib/theme/generators/ConfigGenerator.ts +287 -0
  75. package/src/lib/theme/generators/TypeGenerator.ts +228 -0
  76. package/src/lib/theme/generators/index.ts +21 -0
  77. package/src/lib/theme/i18n/index.ts +9 -0
  78. package/src/lib/theme/i18n/rtl.ts +325 -0
  79. package/src/lib/theme/index.ts +36 -109
  80. package/src/lib/theme/monitoring/ThemeAnalytics.ts +409 -0
  81. package/src/lib/theme/monitoring/index.ts +17 -0
  82. package/src/lib/theme/overrides/ComponentOverrides.ts +243 -0
  83. package/src/lib/theme/overrides/index.ts +15 -0
  84. package/src/lib/theme/runtime/ThemeApplicator.ts +252 -0
  85. package/src/lib/theme/runtime/ThemeErrorBoundary.tsx +233 -0
  86. package/src/lib/theme/runtime/ThemeManager.test.ts +176 -0
  87. package/src/lib/theme/runtime/ThemeManager.ts +442 -0
  88. package/src/lib/theme/runtime/ThemeProvider.tsx +318 -0
  89. package/src/lib/theme/runtime/index.ts +17 -0
  90. package/src/lib/theme/runtime/useTheme.ts +52 -0
  91. package/src/lib/theme/themeUtils.ts +27 -5
  92. package/src/lib/theme/types.ts +62 -1
  93. package/src/lib/theme/utils.ts +23 -22
  94. package/src/lib/theme/whitelabel/WhiteLabelManager.ts +364 -0
  95. package/src/lib/theme/whitelabel/index.ts +13 -0
  96. package/src/lib/theme-tools.ts +185 -0
  97. package/src/lib/types/components.ts +194 -0
  98. package/src/lib/types/partProps.ts +426 -0
  99. package/src/lib/utils/__tests__/componentUtils.test.ts +144 -0
  100. package/src/lib/utils/componentUtils.ts +163 -0
  101. package/src/lib/utils/index.ts +17 -57
  102. package/src/styles/01-settings/_settings.badge.scss +1 -1
  103. package/src/styles/01-settings/_settings.callout.scss +1 -1
  104. package/src/styles/01-settings/_settings.card.scss +1 -1
  105. package/src/styles/01-settings/_settings.colors.scss +10 -10
  106. package/src/styles/01-settings/_settings.input.scss +1 -1
  107. package/src/styles/01-settings/_settings.navbar.scss +1 -1
  108. package/src/styles/01-settings/_settings.tooltip.scss +1 -1
  109. package/src/styles/01-settings/_settings.upload.scss +1 -1
  110. package/src/styles/06-components/_components.chart.scss +2 -2
  111. package/src/styles/06-components/_components.tooltip.scss +31 -81
  112. package/src/styles/99-utilities/_utilities.border.scss +27 -58
  113. package/src/styles/99-utilities/_utilities.gradient.scss +12 -0
  114. package/src/styles/99-utilities/_utilities.position.scss +8 -15
  115. package/src/styles/99-utilities/_utilities.scss +2 -0
  116. package/src/styles/99-utilities/_utilities.spacing.scss +76 -121
  117. package/src/styles/99-utilities/_utilities.text.scss +30 -49
  118. package/src/themes/README.md +443 -0
  119. package/src/themes/THEME_CHECKLIST.md +74 -0
  120. package/src/themes/applemix/01-settings/_index.scss +24 -0
  121. package/src/themes/applemix/01-settings/_settings.animations.scss +0 -0
  122. package/src/themes/applemix/01-settings/_settings.background.scss +6 -0
  123. package/src/themes/applemix/01-settings/_settings.colors.scss +75 -0
  124. package/src/themes/applemix/01-settings/_settings.config.scss +15 -0
  125. package/src/themes/applemix/01-settings/_settings.typography.scss +30 -0
  126. package/src/themes/applemix/02-tools/_index.scss +4 -0
  127. package/src/themes/applemix/03-generic/_index.scss +7 -0
  128. package/src/themes/applemix/04-elements/_index.scss +7 -0
  129. package/src/themes/applemix/05-objects/_index.scss +7 -0
  130. package/src/themes/applemix/06-components/_index.scss +15 -0
  131. package/src/themes/applemix/99-utilities/_index.scss +7 -0
  132. package/src/themes/applemix/README.md +378 -0
  133. package/src/themes/applemix/index.scss +33 -0
  134. package/src/themes/boomdevs/01-settings/_index.scss +38 -0
  135. package/src/themes/boomdevs/01-settings/_settings.accordion.scss +12 -0
  136. package/src/themes/boomdevs/01-settings/_settings.animations.scss +11 -0
  137. package/src/themes/boomdevs/01-settings/_settings.avatar.scss +9 -0
  138. package/src/themes/boomdevs/01-settings/_settings.badge.scss +11 -0
  139. package/src/themes/boomdevs/01-settings/_settings.border-radius.scss +16 -0
  140. package/src/themes/boomdevs/01-settings/_settings.border.scss +10 -0
  141. package/src/themes/boomdevs/01-settings/_settings.box-shadow.scss +14 -0
  142. package/src/themes/boomdevs/01-settings/_settings.breadcrumb.scss +13 -0
  143. package/src/themes/boomdevs/01-settings/_settings.breakpoints.scss +15 -0
  144. package/src/themes/boomdevs/01-settings/_settings.button.scss +9 -0
  145. package/src/themes/boomdevs/01-settings/_settings.callout.scss +9 -0
  146. package/src/themes/boomdevs/01-settings/_settings.card.scss +11 -0
  147. package/src/themes/boomdevs/01-settings/_settings.checkbox.scss +9 -0
  148. package/src/themes/boomdevs/01-settings/_settings.colors.scss +145 -0
  149. package/src/themes/boomdevs/01-settings/_settings.dropdown.scss +11 -0
  150. package/src/themes/boomdevs/01-settings/_settings.grid.scss +16 -0
  151. package/src/themes/boomdevs/01-settings/_settings.input.scss +14 -0
  152. package/src/themes/boomdevs/01-settings/_settings.link.scss +11 -0
  153. package/src/themes/boomdevs/01-settings/_settings.list.scss +10 -0
  154. package/src/themes/boomdevs/01-settings/_settings.modal.scss +16 -0
  155. package/src/themes/boomdevs/01-settings/_settings.navbar.scss +16 -0
  156. package/src/themes/boomdevs/01-settings/_settings.pagination.scss +13 -0
  157. package/src/themes/boomdevs/01-settings/_settings.progress.scss +11 -0
  158. package/src/themes/boomdevs/01-settings/_settings.rating.scss +10 -0
  159. package/src/themes/boomdevs/01-settings/_settings.spacing.scss +33 -0
  160. package/src/themes/boomdevs/01-settings/_settings.spinner.scss +11 -0
  161. package/src/themes/boomdevs/01-settings/_settings.steps.scss +12 -0
  162. package/src/themes/boomdevs/01-settings/_settings.tabs.scss +12 -0
  163. package/src/themes/boomdevs/01-settings/_settings.todo.scss +15 -0
  164. package/src/themes/boomdevs/01-settings/_settings.toggle.scss +14 -0
  165. package/src/themes/boomdevs/01-settings/_settings.tooltip.scss +13 -0
  166. package/src/themes/boomdevs/01-settings/_settings.typography.scss +58 -0
  167. package/src/themes/boomdevs/01-settings/_settings.video-player.scss +12 -0
  168. package/src/themes/boomdevs/02-tools/_index.scss +7 -0
  169. package/src/themes/boomdevs/03-generic/_index.scss +7 -0
  170. package/src/themes/boomdevs/04-elements/_index.scss +7 -0
  171. package/src/themes/boomdevs/05-objects/_index.scss +7 -0
  172. package/src/themes/boomdevs/06-components/_components.button.scss +11 -0
  173. package/src/themes/boomdevs/06-components/_index.scss +11 -0
  174. package/src/themes/boomdevs/99-utilities/_index.scss +7 -0
  175. package/src/themes/boomdevs/index.scss +26 -0
  176. package/src/themes/esrar/01-settings/_index.scss +15 -0
  177. package/src/themes/esrar/01-settings/_settings.colors.scss +91 -0
  178. package/src/themes/esrar/02-tools/_index.scss +8 -0
  179. package/src/themes/esrar/02-tools/_tools.animations.scss +342 -0
  180. package/src/themes/esrar/06-components/_components.accordion.scss +49 -0
  181. package/src/themes/esrar/06-components/_components.avatar-group.scss +14 -0
  182. package/src/themes/esrar/06-components/_components.avatar.scss +61 -0
  183. package/src/themes/esrar/06-components/_components.badge.scss +117 -0
  184. package/src/themes/esrar/06-components/_components.breadcrumb.scss +65 -0
  185. package/src/themes/esrar/06-components/_components.btn-group.scss +19 -0
  186. package/src/themes/esrar/06-components/_components.button.scss +224 -0
  187. package/src/themes/esrar/06-components/_components.callout.scss +51 -0
  188. package/src/themes/esrar/06-components/_components.card.scss +134 -0
  189. package/src/themes/esrar/06-components/_components.chart.scss +24 -0
  190. package/src/themes/esrar/06-components/_components.checkbox-group.scss +26 -0
  191. package/src/themes/esrar/06-components/_components.checkbox.scss +71 -0
  192. package/src/themes/esrar/06-components/_components.color-mode-toggle.scss +29 -0
  193. package/src/themes/esrar/06-components/_components.countdown.scss +67 -0
  194. package/src/themes/esrar/06-components/_components.data-table.scss +22 -0
  195. package/src/themes/esrar/06-components/_components.datepicker.scss +20 -0
  196. package/src/themes/esrar/06-components/_components.dropdown.scss +272 -0
  197. package/src/themes/esrar/06-components/_components.edge-panel.scss +10 -0
  198. package/src/themes/esrar/06-components/_components.form-group.scss +15 -0
  199. package/src/themes/esrar/06-components/_components.form.scss +66 -0
  200. package/src/themes/esrar/06-components/_components.hero.scss +251 -0
  201. package/src/themes/esrar/06-components/_components.icon.scss +33 -0
  202. package/src/themes/esrar/06-components/_components.image-gallery.scss +29 -0
  203. package/src/themes/esrar/06-components/_components.input.scss +91 -0
  204. package/src/themes/esrar/06-components/_components.list-group.scss +26 -0
  205. package/src/themes/esrar/06-components/_components.modal.scss +148 -0
  206. package/src/themes/esrar/06-components/_components.notification.scss +80 -0
  207. package/src/themes/esrar/06-components/_components.pagination.scss +84 -0
  208. package/src/themes/esrar/06-components/_components.popover.scss +10 -0
  209. package/src/themes/esrar/06-components/_components.progress.scss +64 -0
  210. package/src/themes/esrar/06-components/_components.rating.scss +26 -0
  211. package/src/themes/esrar/06-components/_components.skeleton.scss +15 -0
  212. package/src/themes/esrar/06-components/_components.slider.scss +90 -0
  213. package/src/themes/esrar/06-components/_components.spinner.scss +71 -0
  214. package/src/themes/esrar/06-components/_components.steps.scss +76 -0
  215. package/src/themes/esrar/06-components/_components.tab.scss +58 -0
  216. package/src/themes/esrar/06-components/_components.tag.scss +21 -0
  217. package/src/themes/esrar/06-components/_components.timeline.scss +19 -0
  218. package/src/themes/esrar/06-components/_components.toast.scss +91 -0
  219. package/src/themes/esrar/06-components/_components.toggle.scss +74 -0
  220. package/src/themes/esrar/06-components/_components.tooltip.scss +45 -0
  221. package/src/themes/esrar/06-components/_components.upload.scss +102 -0
  222. package/src/themes/esrar/06-components/_index.scss +42 -0
  223. package/src/themes/esrar/index.scss +30 -0
  224. package/src/themes/flashtrade/01-settings/_index.scss +19 -0
  225. package/src/themes/flashtrade/01-settings/_settings.animations.scss +11 -0
  226. package/src/themes/flashtrade/01-settings/_settings.background.scss +9 -0
  227. package/src/themes/flashtrade/01-settings/_settings.colors.scss +79 -0
  228. package/src/themes/flashtrade/01-settings/_settings.config.scss +16 -0
  229. package/src/themes/flashtrade/01-settings/_settings.typography.scss +35 -0
  230. package/src/themes/flashtrade/02-tools/_index.scss +8 -0
  231. package/src/themes/flashtrade/03-generic/_index.scss +8 -0
  232. package/src/themes/flashtrade/04-elements/_index.scss +12 -0
  233. package/src/themes/flashtrade/05-objects/_index.scss +8 -0
  234. package/src/themes/flashtrade/06-components/_components.badge.scss +156 -0
  235. package/src/themes/flashtrade/06-components/_components.button.scss +135 -0
  236. package/src/themes/flashtrade/06-components/_components.card.scss +214 -0
  237. package/src/themes/flashtrade/06-components/_components.navbar.scss +227 -0
  238. package/src/themes/flashtrade/06-components/_index.scss +13 -0
  239. package/src/themes/flashtrade/99-utilities/_index.scss +9 -0
  240. package/src/themes/flashtrade/99-utilities/_utilities.trading.scss +187 -0
  241. package/src/themes/flashtrade/README.md +386 -0
  242. package/src/themes/flashtrade/demo.html +272 -0
  243. package/src/themes/flashtrade/index.scss +36 -0
  244. package/src/themes/mashroom/01-settings/_index.scss +69 -0
  245. package/src/themes/mashroom/01-settings/_settings.accordion.scss +32 -0
  246. package/src/themes/mashroom/01-settings/_settings.animations.scss +26 -0
  247. package/src/themes/mashroom/01-settings/_settings.avatar-group.scss +22 -0
  248. package/src/themes/mashroom/01-settings/_settings.avatar.scss +57 -0
  249. package/src/themes/mashroom/01-settings/_settings.badge.scss +19 -0
  250. package/src/themes/mashroom/01-settings/_settings.border-radius.scss +24 -0
  251. package/src/themes/mashroom/01-settings/_settings.border.scss +14 -0
  252. package/src/themes/mashroom/01-settings/_settings.box-shadow.scss +40 -0
  253. package/src/themes/mashroom/01-settings/_settings.breadcrumb.scss +0 -0
  254. package/src/themes/mashroom/01-settings/_settings.breakpoints.scss +17 -0
  255. package/src/themes/mashroom/01-settings/_settings.btn-group.scss +5 -0
  256. package/src/themes/mashroom/01-settings/_settings.button.scss +50 -0
  257. package/src/themes/mashroom/01-settings/_settings.callout.scss +81 -0
  258. package/src/themes/mashroom/01-settings/_settings.card.scss +52 -0
  259. package/src/themes/mashroom/01-settings/_settings.checkbox-group.scss +5 -0
  260. package/src/themes/mashroom/01-settings/_settings.checkbox.scss +23 -0
  261. package/src/themes/mashroom/01-settings/_settings.color-mode.scss +7 -0
  262. package/src/themes/mashroom/01-settings/_settings.colors.scss +180 -0
  263. package/src/themes/mashroom/01-settings/_settings.config.scss +4 -0
  264. package/src/themes/mashroom/01-settings/_settings.countdown.scss +20 -0
  265. package/src/themes/mashroom/01-settings/_settings.data-table.scss +56 -0
  266. package/src/themes/mashroom/01-settings/_settings.datepicker.scss +45 -0
  267. package/src/themes/mashroom/01-settings/_settings.design-tokens.scss +3 -0
  268. package/src/themes/mashroom/01-settings/_settings.dropdown.scss +45 -0
  269. package/src/themes/mashroom/01-settings/_settings.edge-panel.scss +24 -0
  270. package/src/themes/mashroom/01-settings/_settings.fonts.scss +8 -0
  271. package/src/themes/mashroom/01-settings/_settings.form-group.scss +14 -0
  272. package/src/themes/mashroom/01-settings/_settings.form.scss +6 -0
  273. package/src/themes/mashroom/01-settings/_settings.grid.scss +23 -0
  274. package/src/themes/mashroom/01-settings/_settings.hero.scss +41 -0
  275. package/src/themes/mashroom/01-settings/_settings.input.scss +51 -0
  276. package/src/themes/mashroom/01-settings/_settings.link.scss +13 -0
  277. package/src/themes/mashroom/01-settings/_settings.list-group.scss +16 -0
  278. package/src/themes/mashroom/01-settings/_settings.list.scss +13 -0
  279. package/src/themes/mashroom/01-settings/_settings.masonry-grid.scss +23 -0
  280. package/src/themes/mashroom/01-settings/_settings.menu.scss +50 -0
  281. package/src/themes/mashroom/01-settings/_settings.messages.scss +98 -0
  282. package/src/themes/mashroom/01-settings/_settings.modal.scss +41 -0
  283. package/src/themes/mashroom/01-settings/_settings.nav.scss +20 -0
  284. package/src/themes/mashroom/01-settings/_settings.navbar.scss +54 -0
  285. package/src/themes/mashroom/01-settings/_settings.pagination.scss +30 -0
  286. package/src/themes/mashroom/01-settings/_settings.photoviewer.scss +45 -0
  287. package/src/themes/mashroom/01-settings/_settings.popover.scss +20 -0
  288. package/src/themes/mashroom/01-settings/_settings.position.scss +9 -0
  289. package/src/themes/mashroom/01-settings/_settings.progress.scss +17 -0
  290. package/src/themes/mashroom/01-settings/_settings.rating.scss +11 -0
  291. package/src/themes/mashroom/01-settings/_settings.river.scss +50 -0
  292. package/src/themes/mashroom/01-settings/_settings.sectionintro.scss +31 -0
  293. package/src/themes/mashroom/01-settings/_settings.select.scss +47 -0
  294. package/src/themes/mashroom/01-settings/_settings.side-menu.scss +79 -0
  295. package/src/themes/mashroom/01-settings/_settings.skeleton.scss +24 -0
  296. package/src/themes/mashroom/01-settings/_settings.spacing.scss +66 -0
  297. package/src/themes/mashroom/01-settings/_settings.spinner.scss +34 -0
  298. package/src/themes/mashroom/01-settings/_settings.steps.scss +33 -0
  299. package/src/themes/mashroom/01-settings/_settings.tabs.scss +33 -0
  300. package/src/themes/mashroom/01-settings/_settings.testimonials.scss +24 -0
  301. package/src/themes/mashroom/01-settings/_settings.todo.scss +52 -0
  302. package/src/themes/mashroom/01-settings/_settings.toggle.scss +49 -0
  303. package/src/themes/mashroom/01-settings/_settings.tooltip.scss +20 -0
  304. package/src/themes/mashroom/01-settings/_settings.typography.scss +95 -0
  305. package/src/themes/mashroom/01-settings/_settings.upload.scss +96 -0
  306. package/src/themes/mashroom/01-settings/_settings.z-layers.scss +19 -0
  307. package/src/themes/mashroom/02-tools/_index.scss +8 -0
  308. package/src/themes/mashroom/02-tools/_tools.psychedelic-gradients.scss +78 -0
  309. package/src/themes/mashroom/02-tools/_tools.trippy-effects.scss +114 -0
  310. package/src/themes/mashroom/03-generic/_index.scss +6 -0
  311. package/src/themes/mashroom/04-elements/_index.scss +6 -0
  312. package/src/themes/mashroom/05-objects/_index.scss +6 -0
  313. package/src/themes/mashroom/06-components/_components.accordion.scss +187 -0
  314. package/src/themes/mashroom/06-components/_components.avatar-group.scss +276 -0
  315. package/src/themes/mashroom/06-components/_components.avatar.scss +114 -0
  316. package/src/themes/mashroom/06-components/_components.badge.scss +152 -0
  317. package/src/themes/mashroom/06-components/_components.breadcrumb.scss +162 -0
  318. package/src/themes/mashroom/06-components/_components.btn-group.scss +404 -0
  319. package/src/themes/mashroom/06-components/_components.button.scss +160 -0
  320. package/src/themes/mashroom/06-components/_components.callout.scss +140 -0
  321. package/src/themes/mashroom/06-components/_components.card.scss +225 -0
  322. package/src/themes/mashroom/06-components/_components.checkbox.scss +186 -0
  323. package/src/themes/mashroom/06-components/_components.color-mode-toggle.scss +308 -0
  324. package/src/themes/mashroom/06-components/_components.countdown.scss +402 -0
  325. package/src/themes/mashroom/06-components/_components.data-table.scss +354 -0
  326. package/src/themes/mashroom/06-components/_components.datepicker.scss +349 -0
  327. package/src/themes/mashroom/06-components/_components.dropdown.scss +334 -0
  328. package/src/themes/mashroom/06-components/_components.edge-panel.scss +413 -0
  329. package/src/themes/mashroom/06-components/_components.form-group.scss +433 -0
  330. package/src/themes/mashroom/06-components/_components.form.scss +358 -0
  331. package/src/themes/mashroom/06-components/_components.hero.scss +151 -0
  332. package/src/themes/mashroom/06-components/_components.input.scss +147 -0
  333. package/src/themes/mashroom/06-components/_components.list-group.scss +456 -0
  334. package/src/themes/mashroom/06-components/_components.list.scss +145 -0
  335. package/src/themes/mashroom/06-components/_components.menu.scss +497 -0
  336. package/src/themes/mashroom/06-components/_components.messages.scss +277 -0
  337. package/src/themes/mashroom/06-components/_components.modal.scss +264 -0
  338. package/src/themes/mashroom/06-components/_components.nav.scss +181 -0
  339. package/src/themes/mashroom/06-components/_components.navbar.scss +538 -0
  340. package/src/themes/mashroom/06-components/_components.pagination.scss +400 -0
  341. package/src/themes/mashroom/06-components/_components.photoviewer.scss +498 -0
  342. package/src/themes/mashroom/06-components/_components.popover.scss +383 -0
  343. package/src/themes/mashroom/06-components/_components.product-review.scss +408 -0
  344. package/src/themes/mashroom/06-components/_components.progress.scss +249 -0
  345. package/src/themes/mashroom/06-components/_components.rating.scss +300 -0
  346. package/src/themes/mashroom/06-components/_components.river.scss +570 -0
  347. package/src/themes/mashroom/06-components/_components.sectionintro.scss +546 -0
  348. package/src/themes/mashroom/06-components/_components.select.scss +455 -0
  349. package/src/themes/mashroom/06-components/_components.side-menu.scss +635 -0
  350. package/src/themes/mashroom/06-components/_components.skeleton.scss +447 -0
  351. package/src/themes/mashroom/06-components/_components.slider.scss +414 -0
  352. package/src/themes/mashroom/06-components/_components.spinner.scss +198 -0
  353. package/src/themes/mashroom/06-components/_components.steps.scss +350 -0
  354. package/src/themes/mashroom/06-components/_components.tabs.scss +269 -0
  355. package/src/themes/mashroom/06-components/_components.testimonials.scss +561 -0
  356. package/src/themes/mashroom/06-components/_components.toggle.scss +231 -0
  357. package/src/themes/mashroom/06-components/_components.tooltip.scss +167 -0
  358. package/src/themes/mashroom/06-components/_components.upload.scss +537 -0
  359. package/src/themes/mashroom/06-components/_components.video-player.scss +560 -0
  360. package/src/themes/mashroom/06-components/_index.scss +55 -0
  361. package/src/themes/mashroom/99-utilities/_index.scss +6 -0
  362. package/src/themes/mashroom/index.scss +26 -0
  363. package/src/themes/shaj-default/01-settings/_index.scss +69 -0
  364. package/src/themes/shaj-default/01-settings/_settings.accordion.scss +38 -0
  365. package/src/themes/shaj-default/01-settings/_settings.animations.scss +32 -0
  366. package/src/themes/shaj-default/01-settings/_settings.avatar-group.scss +28 -0
  367. package/src/themes/shaj-default/01-settings/_settings.avatar.scss +63 -0
  368. package/src/themes/shaj-default/01-settings/_settings.badge.scss +25 -0
  369. package/src/themes/shaj-default/01-settings/_settings.border-radius.scss +24 -0
  370. package/src/themes/shaj-default/01-settings/_settings.border.scss +20 -0
  371. package/src/themes/shaj-default/01-settings/_settings.box-shadow.scss +46 -0
  372. package/src/themes/shaj-default/01-settings/_settings.breadcrumb.scss +0 -0
  373. package/src/themes/shaj-default/01-settings/_settings.breakpoints.scss +23 -0
  374. package/src/themes/shaj-default/01-settings/_settings.btn-group.scss +11 -0
  375. package/src/themes/shaj-default/01-settings/_settings.button.scss +56 -0
  376. package/src/themes/shaj-default/01-settings/_settings.callout.scss +87 -0
  377. package/src/themes/shaj-default/01-settings/_settings.card.scss +52 -0
  378. package/src/themes/shaj-default/01-settings/_settings.checkbox-group.scss +11 -0
  379. package/src/themes/shaj-default/01-settings/_settings.checkbox.scss +29 -0
  380. package/src/themes/shaj-default/01-settings/_settings.color-mode.scss +13 -0
  381. package/src/themes/shaj-default/01-settings/_settings.colors.scss +91 -0
  382. package/src/themes/shaj-default/01-settings/_settings.config.scss +4 -0
  383. package/src/themes/shaj-default/01-settings/_settings.countdown.scss +26 -0
  384. package/src/themes/shaj-default/01-settings/_settings.data-table.scss +62 -0
  385. package/src/themes/shaj-default/01-settings/_settings.datepicker.scss +51 -0
  386. package/src/themes/shaj-default/01-settings/_settings.design-tokens.scss +9 -0
  387. package/src/themes/shaj-default/01-settings/_settings.dropdown.scss +51 -0
  388. package/src/themes/shaj-default/01-settings/_settings.edge-panel.scss +30 -0
  389. package/src/themes/shaj-default/01-settings/_settings.fonts.scss +13 -0
  390. package/src/themes/shaj-default/01-settings/_settings.form-group.scss +20 -0
  391. package/src/themes/shaj-default/01-settings/_settings.form.scss +12 -0
  392. package/src/themes/shaj-default/01-settings/_settings.grid.scss +29 -0
  393. package/src/themes/shaj-default/01-settings/_settings.hero.scss +47 -0
  394. package/src/themes/shaj-default/01-settings/_settings.input.scss +57 -0
  395. package/src/themes/shaj-default/01-settings/_settings.link.scss +19 -0
  396. package/src/themes/shaj-default/01-settings/_settings.list-group.scss +22 -0
  397. package/src/themes/shaj-default/01-settings/_settings.list.scss +19 -0
  398. package/src/themes/shaj-default/01-settings/_settings.masonry-grid.scss +29 -0
  399. package/src/themes/shaj-default/01-settings/_settings.menu.scss +56 -0
  400. package/src/themes/shaj-default/01-settings/_settings.messages.scss +104 -0
  401. package/src/themes/shaj-default/01-settings/_settings.modal.scss +47 -0
  402. package/src/themes/shaj-default/01-settings/_settings.nav.scss +26 -0
  403. package/src/themes/shaj-default/01-settings/_settings.navbar.scss +60 -0
  404. package/src/themes/shaj-default/01-settings/_settings.pagination.scss +36 -0
  405. package/src/themes/shaj-default/01-settings/_settings.photoviewer.scss +51 -0
  406. package/src/themes/shaj-default/01-settings/_settings.popover.scss +26 -0
  407. package/src/themes/shaj-default/01-settings/_settings.position.scss +15 -0
  408. package/src/themes/shaj-default/01-settings/_settings.progress.scss +23 -0
  409. package/src/themes/shaj-default/01-settings/_settings.rating.scss +17 -0
  410. package/src/themes/shaj-default/01-settings/_settings.river.scss +56 -0
  411. package/src/themes/shaj-default/01-settings/_settings.sectionintro.scss +37 -0
  412. package/src/themes/shaj-default/01-settings/_settings.select.scss +53 -0
  413. package/src/themes/shaj-default/01-settings/_settings.side-menu.scss +85 -0
  414. package/src/themes/shaj-default/01-settings/_settings.skeleton.scss +30 -0
  415. package/src/themes/shaj-default/01-settings/_settings.spacing.scss +72 -0
  416. package/src/themes/shaj-default/01-settings/_settings.spinner.scss +24 -0
  417. package/src/themes/shaj-default/01-settings/_settings.steps.scss +39 -0
  418. package/src/themes/shaj-default/01-settings/_settings.tabs.scss +39 -0
  419. package/src/themes/shaj-default/01-settings/_settings.testimonials.scss +30 -0
  420. package/src/themes/shaj-default/01-settings/_settings.todo.scss +58 -0
  421. package/src/themes/shaj-default/01-settings/_settings.toggle.scss +55 -0
  422. package/src/themes/shaj-default/01-settings/_settings.tooltip.scss +26 -0
  423. package/src/themes/shaj-default/01-settings/_settings.typography.scss +101 -0
  424. package/src/themes/shaj-default/01-settings/_settings.upload.scss +102 -0
  425. package/src/themes/shaj-default/01-settings/_settings.z-layers.scss +25 -0
  426. package/src/themes/shaj-default/02-tools/_index.scss +0 -0
  427. package/src/themes/shaj-default/03-generic/_generic.root.scss +0 -0
  428. package/src/themes/shaj-default/03-generic/_index.scss +2 -0
  429. package/src/themes/shaj-default/04-elements/_index.scss +0 -0
  430. package/src/themes/shaj-default/05-objects/_index.scss +0 -0
  431. package/src/themes/shaj-default/06-components/_components.button.scss +55 -0
  432. package/src/themes/shaj-default/06-components/_components.card.scss +57 -0
  433. package/src/themes/shaj-default/06-components/_components.input.scss +58 -0
  434. package/src/themes/shaj-default/06-components/_components.navbar.scss +99 -0
  435. package/src/themes/shaj-default/06-components/_components.tooltip.scss +0 -0
  436. package/src/themes/shaj-default/06-components/_index.scss +13 -0
  437. package/src/themes/shaj-default/99-utilities/_index.scss +0 -0
  438. package/src/themes/shaj-default/index.scss +25 -0
  439. package/src/themes/themes.config.js +219 -0
  440. package/theme.config.ts +360 -0
  441. package/src/lib/theme/ThemeManager.integration.test.ts +0 -124
  442. package/src/lib/theme/ThemeManager.stories.tsx +0 -472
  443. package/src/lib/theme/ThemeManager.test.ts +0 -190
  444. package/src/lib/theme/ThemeManager.ts +0 -645
  445. package/src/lib/theme/ThemeProvider.tsx +0 -377
  446. package/src/lib/theme/createTheme.test.ts +0 -475
  447. package/src/lib/theme/useTheme.test.tsx +0 -67
  448. package/src/lib/theme/useTheme.ts +0 -64
  449. package/src/lib/theme/utils.test.ts +0 -140
@@ -0,0 +1,98 @@
1
+ @forward '../../../styles/01-settings/settings.messages' with (
2
+ $messages-padding-x: 24px,
3
+ // 24px - more generous padding
4
+ $messages-padding-y: 24px,
5
+ // 24px
6
+ $messages-border-radius: 12px,
7
+ // 12px - softer corners
8
+ $messages-border-width: 0px,
9
+ $messages-border-color: null,
10
+ $messages-bg: var(--atomix-secondary-bg-subtle),
11
+ $messages-content-margin-top: 24px,
12
+
13
+ // 24px
14
+ $messages-avatar-margin: 12px,
15
+
16
+ // 12px
17
+ $messages-items-padding-x: 0px,
18
+ $messages-items-padding-y: 0px,
19
+ $messages-items-width: 520px,
20
+ // 520px - wider for modern screens
21
+ $messages-items-border-width: 0px,
22
+ $messages-items-border-color: transparent,
23
+ $messages-items-border-radius: null,
24
+ $messages-items-gap: 8px,
25
+
26
+ // 8px - better spacing
27
+ $messages-text-padding-x: 16px,
28
+ // 16px
29
+ $messages-text-padding-y: 12px,
30
+ // 12px
31
+ $messages-text-font-size: 16px,
32
+ // 16px - better readability
33
+ $messages-text-primary-color: var(--atomix-body-color),
34
+ $messages-text-secondary-color: var(--atomix-body-color),
35
+ $messages-text-primary-bg: var(--atomix-brand-bg-subtle),
36
+ $messages-text-secondary-bg: var(--atomix-tertiary-bg-subtle),
37
+ $messages-text-border-radius: 16px,
38
+
39
+ // 16px - modern bubble shape
40
+ $messages-file-padding-x: 16px,
41
+ // 16px
42
+ $messages-file-padding-y: 12px,
43
+ // 12px
44
+ $messages-file-text-font-size: 16px,
45
+ // 16px
46
+ $messages-file-text-primary-color: var(--atomix-body-color),
47
+ $messages-file-text-secondary-color: var(--atomix-body-color),
48
+ $messages-file-icon-size: 44px,
49
+ // 44px - larger icons
50
+ $messages-file-icon-bg: var(--atomix-primary-2),
51
+ $messages-file-icon-bg-dark: var(--atomix-primary-7),
52
+ $messages-file-icon-margin-right: 12px,
53
+ // 12px
54
+ $messages-file-info-font-size: 12px,
55
+ // 12px
56
+ $messages-file-info-color: var(--atomix-tertiary-text-emphasis),
57
+ $messages-file-primary-bg: var(--atomix-brand-bg-subtle),
58
+ $messages-file-secondary-bg: var(--atomix-tertiary-bg-subtle),
59
+ $messages-file-border-radius: 16px,
60
+
61
+ // 16px
62
+ $messages-image-width: 320px,
63
+ // 320px - better mobile experience
64
+ $messages-image-height: 240px,
65
+ // 240px
66
+ $messages-image-border-radius: 12px,
67
+
68
+ // 12px
69
+ $messages-form-margin-top: 24px,
70
+ // 24px
71
+ $messages-form-row-gap: 12px,
72
+ // 12px
73
+ $messages-form-submit-icon-size: 20px,
74
+
75
+ // 20px
76
+ $messages-input-padding-x: 16px,
77
+ // 16px
78
+ $messages-input-padding-y: 12px,
79
+ // 12px
80
+ $messages-input-font-size: 16px,
81
+ // 16px
82
+ $messages-input-color: var(--atomix-body-color),
83
+ $messages-input-placeholder-color: var(--atomix-tertiary-text-emphasis),
84
+ $messages-input-border-width: 1px,
85
+ $messages-input-border-color: var(--atomix-secondary-border-subtle),
86
+ $messages-input-border-radius: 8px,
87
+
88
+ // 8px
89
+ $messages-input-options-icons-size: 20px,
90
+ // 20px
91
+ $messages-input-options-row-gap: 8px,
92
+
93
+ // 8px
94
+ $messages-body-height: calc(100vh - 500px) // adjusted height
95
+ );
96
+
97
+ // Override variables that don't have !default in the original
98
+ $messages-width: 100%;
@@ -0,0 +1,41 @@
1
+ @forward '../../../styles/01-settings/settings.modal' with (
2
+ $modal-inner-padding: 24px,
3
+
4
+ // 24px - more spacious
5
+ $modal-content-color: null,
6
+ $modal-content-bg: var(--atomix-body-bg),
7
+ $modal-content-border-radius: 12px,
8
+ // 12px - softer corners
9
+ $modal-content-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
10
+ // deeper shadow
11
+ $modal-header-padding-bottom: 16px,
12
+ // 16px
13
+ $modal-title-font-size: 20px,
14
+ // 20px - larger titles
15
+ $modal-sub-margin-top: 6px,
16
+ // 6px
17
+ $modal-sub-color: var(--atomix-tertiary-text-emphasis),
18
+ $modal-footer-items-gap: 12px,
19
+
20
+ // 12px
21
+ $modal-backdrop-bg: var(--atomix-invert-bg-subtle),
22
+ $modal-backdrop-opacity: 0.6,
23
+ // slightly more opaque
24
+ $modal-backdrop-blur: 12px,
25
+
26
+ // 12px - more blur
27
+ $modal-close-icon-color: #000000,
28
+ $modal-close-icon-size: 24px,
29
+
30
+ // 24px - smaller close button
31
+ $modal-sm: 480px,
32
+ // 480px
33
+ $modal-md: 720px,
34
+ // 720px
35
+ $modal-lg: 960px,
36
+ // 960px
37
+ $modal-xl: 1200px // 1200px
38
+ );
39
+
40
+ // Override variables that don't have !default in the original
41
+ $modal-sub-font-size: 14px; // 14px
@@ -0,0 +1,20 @@
1
+ @use '../../../styles/01-settings/settings.nav' with (
2
+ $nav-item-gap-x: 12px,
3
+
4
+ // 12px - more spacing between items
5
+ $nav-link-padding-x: 16px,
6
+ // 16px - more generous padding
7
+ $nav-link-padding-y: 10px,
8
+ // 10px
9
+ $nav-link-font-size: 16px,
10
+ // 16px
11
+ $nav-link-font-weight: 500,
12
+ $nav-link-color: var(--atomix-body-color),
13
+ $nav-link-hover-color: var(--atomix-body-color),
14
+ $nav-link-bg: var(--atomix-body-bg),
15
+ $nav-link-hover-bg: var(--atomix-secondary-bg-subtle),
16
+ $nav-link-inner-gap: 8px,
17
+
18
+ // 8px
19
+ $nav-icon-size: 18px // 18px - slightly smaller icons
20
+ );
@@ -0,0 +1,54 @@
1
+ @use '../../../styles/01-settings/settings.navbar' with (
2
+ // Navbar container and layout
3
+ $navbar-padding-x: 32px,
4
+ // 32px - more breathing room
5
+ $navbar-padding-y: 12px,
6
+ // 12px
7
+ $navbar-container-max-width: 1440px,
8
+ // 1440px
9
+ $navbar-height: 72px,
10
+
11
+ // 72px - taller for modern feel
12
+ // Navbar appearance
13
+ $navbar-bg: var(--atomix-body-bg),
14
+ $navbar-border-width: 1px,
15
+ $navbar-border-color: var(--atomix-primary-border-subtle),
16
+ $navbar-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05),
17
+ // Even softer, larger shadow for depth
18
+ // Brand/logo
19
+ $navbar-brand-margin-end: 32px,
20
+ // 32px
21
+ $navbar-brand-font-size: 20px,
22
+ // 20px - slightly larger
23
+ $navbar-brand-font-weight: 600,
24
+ $navbar-brand-color: var(--atomix-body-color),
25
+ // Mobile toggler
26
+ $navbar-toggler-size: 36px,
27
+ // 36px
28
+ $navbar-toggler-color: var(--atomix-body-color),
29
+ $navbar-toggler-bg: transparent,
30
+ $navbar-toggler-border: 0,
31
+ $navbar-toggler-border-radius: 6px,
32
+ // 6px
33
+ $navbar-toggler-focus-shadow: 0 0 0 3px rgba(14, 165, 233, 0.3),
34
+ // larger focus
35
+ // Collapse/mobile menu
36
+ $navbar-collapse-padding-top: 12px,
37
+ // 12px
38
+ $navbar-collapse-transition: all 300ms ease-in-out,
39
+
40
+ // smoother transition
41
+ // Backdrop (for mobile overlay)
42
+ $navbar-backdrop-bg: rgba(0, 0, 0, 0.5),
43
+ $navbar-backdrop-z-index: 1029,
44
+
45
+ // Z-index values
46
+ $navbar-z-index: 1030,
47
+ $navbar-fixed-z-index: 1030,
48
+
49
+ // Dark mode variants
50
+ $navbar-bg-dark: var(--atomix-gray-9),
51
+ $navbar-border-color-dark: var(--atomix-gray-7),
52
+ $navbar-brand-color-dark: var(--atomix-gray-1),
53
+ $navbar-toggler-color-dark: var(--atomix-gray-1)
54
+ );
@@ -0,0 +1,30 @@
1
+ @use '../../../styles/01-settings/settings.pagination' with (
2
+ $pagination-size: 36px,
3
+ // 36px - larger touch targets
4
+ $pagination-size-sm: 28px,
5
+ // 28px
6
+ $pagination-size-lg: 44px,
7
+
8
+ // 44px
9
+ $pagination-padding-x: 12px,
10
+ // 12px
11
+ $pagination-padding-y: 8px,
12
+
13
+ // 8px
14
+ $pagination-font-size: 14px,
15
+
16
+ // 14px
17
+ $pagination-color: var(--atomix-secondary-text-emphasis),
18
+ $pagination-bg: var(--atomix-body-bg),
19
+ $pagination-border-radius: 6px,
20
+
21
+ // 6px - softer corners instead of pill
22
+ $pagination-focus-border-width: 2px,
23
+ $pagination-focus-border-color: var(--atomix-brand-border-subtle),
24
+ $pagination-hover-color: var(--atomix-body-color),
25
+ $pagination-hover-bg: var(--atomix-secondary-bg-subtle),
26
+ $pagination-active-color: var(--atomix-body-color),
27
+ $pagination-active-bg: var(--atomix-brand-bg-subtle),
28
+ $pagination-disabled-color: var(--atomix-tertiary-text-emphasis),
29
+ $pagination-disabled-bg: var(--atomix-body-bg)
30
+ );
@@ -0,0 +1,45 @@
1
+ @use '../../../styles/01-settings/settings.photoviewer' with (
2
+ // Modal/backdrop variables
3
+ $photoviewer-modal-background-color: rgba(17, 24, 39, 0.9),
4
+ // darker backdrop
5
+ $photoviewer-modal-backdrop-blur: 16px,
6
+ // more blur
7
+ $photoviewer-modal-close-button-color: var(--atomix-body-color),
8
+ // Panel variables
9
+ $photoviewer-info-panel-width: 360px,
10
+ // wider panel
11
+ $photoviewer-info-panel-background: var(--atomix-body-bg),
12
+ $photoviewer-info-panel-border-color: var(--atomix-primary-border-subtle),
13
+ // Thumbnail variables
14
+ $photoviewer-thumbnail-active-border-color: var(--atomix-primary),
15
+ $photoviewer-thumbnail-size: 72px,
16
+ // larger thumbnails
17
+ $photoviewer-thumbnail-size-large: 96px,
18
+ // larger thumbnails
19
+ $photoviewer-thumbnail-gap: 1rem,
20
+ // more spacing
21
+ $photoviewer-thumbnail-border-radius: 8px,
22
+
23
+ // softer corners
24
+ // Animation variables
25
+ $photoviewer-transition-duration: 0.25s,
26
+ // faster transitions
27
+ $photoviewer-transition-timing: cubic-bezier(0.4, 0, 0.2, 1),
28
+ $photoviewer-fast-transition: 0.1s,
29
+
30
+ // Control variables
31
+ $photoviewer-control-size: 3rem,
32
+ // larger controls
33
+ $photoviewer-control-size-small: 2.5rem,
34
+ $photoviewer-control-background: var(--atomix-body-bg),
35
+ $photoviewer-control-background-hover: var(--atomix-secondary-bg-subtle),
36
+ $photoviewer-control-color: var(--atomix-body-color),
37
+ $photoviewer-control-color-hover: var(--atomix-primary),
38
+ // Navigation variables
39
+ $photoviewer-nav-button-size: 3.5rem,
40
+ // larger nav buttons
41
+ $photoviewer-nav-button-background: var(--atomix-body-bg),
42
+ $photoviewer-nav-button-color: var(--atomix-body-color),
43
+ $photoviewer-nav-button-hover-background: var(--atomix-secondary-bg-subtle),
44
+ $photoviewer-nav-button-hover-color: var(--atomix-primary)
45
+ );
@@ -0,0 +1,20 @@
1
+ @use '../../../styles/01-settings/settings.popover' with (
2
+ $popover-max-width: 320px,
3
+ // 320px - wider for better content
4
+ $popover-padding-x: 20px,
5
+ // 20px
6
+ $popover-padding-y: 16px,
7
+ // 16px
8
+ $popover-inner-gap-x: 12px,
9
+ // 12px
10
+ $popover-inner-gap-y: 16px,
11
+ // 16px
12
+ $popover-bg: var(--atomix-body-bg),
13
+ $popover-border-radius: 8px,
14
+ // 8px - softer corners
15
+ $popover-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15),
16
+ // enhanced shadow
17
+ $popover-arrow-size: 10px,
18
+ // 10px - smaller arrow
19
+ $popover-arrow-offset: 6px // 6px
20
+ );
@@ -0,0 +1,9 @@
1
+ @use '../../../styles/01-settings/settings.position' with (
2
+ $position-values: (
3
+ 0: 0,
4
+ 25: 25%,
5
+ 50: 50%,
6
+ 75: 75%,
7
+ 100: 100%,
8
+ )
9
+ );
@@ -0,0 +1,17 @@
1
+ @use '../../../styles/01-settings/settings.progress' with (
2
+ $progress-width: 100%,
3
+ $progress-height: 8px,
4
+ // 8px - slightly thicker
5
+ $progress-font-size: 12px,
6
+ // 12px
7
+ $progress-bg: var(--atomix-secondary-bg-subtle),
8
+ $progress-border-radius: 800px,
9
+ // pill shape
10
+ $progress-bar-height: 8px,
11
+ // 8px
12
+ $progress-bar-color: var(--atomix-primary-text-emphasis),
13
+ $progress-bar-bg: var(--atomix-primary),
14
+ $progress-bar-transition: 0.3s,
15
+ // smoother transition
16
+ $progress-bar-easing: ease-in-out
17
+ );
@@ -0,0 +1,11 @@
1
+ @use '../../../styles/01-settings/settings.rating' with (
2
+ $rating-star-size: 24px,
3
+ // 24px - more reasonable default size
4
+ $rating-star-size-sm: 16px,
5
+ // 16px
6
+ $rating-star-size-lg: 32px,
7
+ // 32px
8
+ $rating-star-bg: var(--atomix-primary),
9
+ $rating-star-half-bg: var(--atomix-primary),
10
+ $rating-stars-gap: 4px // 4px - better spacing between stars
11
+ );
@@ -0,0 +1,50 @@
1
+ @forward '../../../styles/01-settings/settings.river' with (
2
+ // River container
3
+ $river-width: 100%,
4
+ $river-padding-x: 0px,
5
+ $river-padding-y: 64px,
6
+ // 64px - more vertical space for elegance
7
+ $river-bg: var(--atomix-body-bg),
8
+ $river-overlay: #000000,
9
+ // black
10
+ $river-overlay-opacity: 0.6,
11
+
12
+ // slightly more opaque for depth
13
+ // Typography
14
+ $river-title-font-size: 40px,
15
+ // 40px - bolder titles
16
+ $river-text-font-size: 18px,
17
+ // 18px - improved readability
18
+ $river-title-font-weight: 700,
19
+ // bolder weight
20
+ $river-text-font-weight: 400,
21
+
22
+ $river-title-color: var(--atomix-body-color),
23
+ $river-text-color: var(--atomix-secondary-text-emphasis),
24
+ // Spacing
25
+ $river-text-margin-top: 12px,
26
+ // 12px
27
+ $river-actions-margin-top: 24px,
28
+ // 24px
29
+ $river-actions-spacing-x: 16px,
30
+
31
+ // 16px
32
+ // Image
33
+ $river-image-border-radius: 8px,
34
+ // 8px - soft rounded images
35
+ $river-image-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1),
36
+ // subtle shadow for depth
37
+ // Inner spacing
38
+ $river-spacing-inner: 64px,
39
+
40
+ // 64px - more generous spacing
41
+ // Content widths
42
+ $river-content-max-width: 720px,
43
+ // 720px - wider content area
44
+ $river-breakout-title-width: 720px,
45
+ // 720px
46
+ $river-breakout-text-width: 600px // 600px
47
+ );
48
+
49
+ // Override variables that don't have !default in the original
50
+ $river-border-radius: 0px;
@@ -0,0 +1,31 @@
1
+ @use '../../../styles/01-settings/settings.sectionintro' with (
2
+ // Padding
3
+ $sectionintro-padding-x: 0px,
4
+ $sectionintro-padding-y: 48px,
5
+
6
+ // 48px - more vertical space
7
+ // Typography
8
+ $sectionintro-title-font-size: 36px,
9
+ // 36px - larger for impact
10
+ $sectionintro-text-font-size: 18px,
11
+
12
+ // 18px
13
+ $sectionintro-title-color: var(--atomix-body-color),
14
+ $sectionintro-text-color: var(--atomix-body-color),
15
+ $sectionintro-title-font-weight: 700,
16
+ // bolder
17
+ $sectionintro-text-font-weight: 400,
18
+
19
+ // Spacing
20
+ $sectionintro-label-margin-bottom: 12px,
21
+ // 12px
22
+ $sectionintro-text-margin-top: 12px,
23
+ // 12px
24
+ $sectionintro-actions-margin-top: 24px,
25
+ // 24px
26
+ $sectionintro-actions-inner-gap: 12px,
27
+
28
+ // 12px
29
+ // Width
30
+ $sectionintro-width: 800px // 800px - wider for modern layouts
31
+ );
@@ -0,0 +1,47 @@
1
+ @use '../../../styles/01-settings/settings.select' with (
2
+ $select-width: 320px,
3
+ // 320px - wider for better content
4
+ $select-padding-x: 16px,
5
+ // 16px
6
+ $select-padding-y: 12px,
7
+ // 12px
8
+ $select-color: var(--atomix-body-color),
9
+ $select-font-size: 16px,
10
+ // 16px
11
+ $select-font-size-lg: 18px,
12
+ // 18px
13
+ $select-icon-toggle-size: 20px,
14
+ // 20px
15
+ $select-icon-toggle-color: var(--atomix-secondary-text-emphasis),
16
+ $select-placeholder-color: var(--atomix-tertiary-text-emphasis),
17
+ $select-bg: var(--atomix-body-bg),
18
+ $select-expanded-bg: var(--atomix-secondary-bg-subtle),
19
+ $select-border-color: var(--atomix-primary-border-subtle),
20
+ $select-border-color-hover: var(--atomix-secondary-border-subtle),
21
+ $select-border-radius: 8px,
22
+ // 8px
23
+ $select-inner-spacer: 8px,
24
+ // 8px
25
+ $select-dropdown-icon-size: 20px,
26
+ // 20px
27
+ $select-panel-padding-x: 8px,
28
+ // 8px
29
+ $select-panel-padding-y: 8px,
30
+ // 8px
31
+ $select-panel-spacer-y: 8px,
32
+ // 8px
33
+ $select-panel-bg: var(--atomix-body-bg),
34
+ $select-panel-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1),
35
+ // enhanced shadow
36
+ $select-panel-border-radius: 8px,
37
+ // 8px
38
+ $select-item-padding-x: 12px,
39
+ // 12px
40
+ $select-item-padding-y: 10px,
41
+ // 10px
42
+ $select-item-color: var(--atomix-body-color),
43
+ $select-item-bg: var(--atomix-body-bg),
44
+ $select-item-border-radius: 6px,
45
+ // 6px
46
+ $select-item-bg-hover: var(--atomix-secondary-bg-subtle)
47
+ );
@@ -0,0 +1,79 @@
1
+ @use '../../../styles/01-settings/settings.side-menu' with (
2
+ // Side menu container
3
+ $side-menu-padding-x: 24px,
4
+ // 24px - more generous padding
5
+ $side-menu-padding-y: 32px,
6
+ // 32px
7
+ $side-menu-bg: var(--atomix-body-bg),
8
+ $side-menu-border-radius: 8px,
9
+ // 8px - softer corners
10
+ $side-menu-border-width: 1px,
11
+ $side-menu-border-color: var(--atomix-border-color),
12
+ $side-menu-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08),
13
+ // enhanced shadow
14
+ // Side menu title
15
+ $side-menu-title-font-size: 18px,
16
+ // 18px - larger title
17
+ $side-menu-title-font-weight: 600,
18
+ $side-menu-title-color: var(--atomix-body-color),
19
+ $side-menu-title-spacer-y: 12px,
20
+
21
+ // 12px
22
+ // Side menu toggler
23
+ $side-menu-toggler-padding-x: 12px,
24
+ // 12px
25
+ $side-menu-toggler-padding-y: 8px,
26
+ // 8px
27
+ $side-menu-toggler-bg: transparent,
28
+ $side-menu-toggler-hover-bg: var(--atomix-secondary-bg-subtle),
29
+ $side-menu-toggler-border-radius: 6px,
30
+ // 6px
31
+ $side-menu-toggler-transition: all 0.2s ease-in-out,
32
+
33
+ // Side menu items
34
+ $side-menu-item-padding-x: 16px,
35
+ // 16px - more padding
36
+ $side-menu-item-padding-y: 12px,
37
+ // 12px
38
+ $side-menu-item-font-size: 16px,
39
+ // 16px - better readability
40
+ $side-menu-item-font-weight: 400,
41
+ $side-menu-item-color: var(--atomix-secondary-text-emphasis),
42
+ $side-menu-item-hover-color: var(--atomix-body-color),
43
+ $side-menu-item-active-color: var(--atomix-brand-text-emphasis),
44
+ $side-menu-item-disabled-color: var(--atomix-disabled-text-emphasis),
45
+ $side-menu-item-bg: transparent,
46
+ $side-menu-item-hover-bg: var(--atomix-secondary-bg-subtle),
47
+ $side-menu-item-active-bg: var(--atomix-brand-bg-subtle),
48
+ $side-menu-item-disabled-bg: transparent,
49
+ $side-menu-item-border-radius: 6px,
50
+ // 6px
51
+ $side-menu-item-transition: all 0.2s ease-in-out,
52
+ $side-menu-item-gap: 12px,
53
+
54
+ // 12px
55
+ // Side menu list
56
+ $side-menu-list-margin-bottom: 16px,
57
+ // 16px
58
+ $side-menu-list-gap: 4px,
59
+
60
+ // 4px
61
+ // Side menu wrapper (for mobile animation)
62
+ $side-menu-wrapper-transition: height 0.3s ease-in-out,
63
+ $side-menu-inner-padding-top: 24px,
64
+
65
+ // 24px
66
+ // Mobile responsive
67
+ $side-menu-mobile-padding-x: 20px,
68
+ // 20px
69
+ $side-menu-mobile-padding-y: 16px,
70
+
71
+ // 16px
72
+ // Dark mode variants
73
+ $side-menu-bg-dark: var(--atomix-gray-9),
74
+ $side-menu-border-color-dark: var(--atomix-gray-7),
75
+ $side-menu-title-color-dark: var(--atomix-gray-1),
76
+ $side-menu-item-color-dark: var(--atomix-gray-3),
77
+ $side-menu-item-hover-color-dark: var(--atomix-gray-1),
78
+ $side-menu-item-active-color-dark: var(--atomix-brand-text-emphasis)
79
+ );
@@ -0,0 +1,24 @@
1
+ @use '../../../styles/01-settings/settings.skeleton' with (
2
+ $skeleton-sizes: (
3
+ sm: 14px,
4
+ // 14px
5
+ md: 16px,
6
+ // 16px
7
+ lg: 24px,
8
+ // 24px
9
+ xl: 32px,
10
+ // 32px
11
+ xxl: 36px,
12
+ // 36px
13
+ 3xl: 40px,
14
+ // 40px
15
+ 4xl: 44px,
16
+ // 44px
17
+ ),
18
+
19
+ $skeleton-color: rgba(0, 0, 0, 0.08),
20
+ // slightly more visible
21
+ $skeleton-color-gradient-end: rgba(0, 0, 0, 0.12),
22
+ $skeleton-gradient-from-color: rgba(0, 0, 0, 0.08),
23
+ $skeleton-gradient-to-color: rgba(0, 0, 0, 0.12)
24
+ );
@@ -0,0 +1,66 @@
1
+ // Spacing scale (matches Atomix)
2
+ $spacer: 16px !default;
3
+
4
+ $spacing-sizes: (
5
+ 0: 0px,
6
+ 1: 4px,
7
+ // 4px
8
+ 2: 8px,
9
+ // 8px
10
+ 3: 12px,
11
+ // 12px
12
+ 4: 16px,
13
+ // 16px
14
+ 5: 20px,
15
+ // 20px
16
+ 6: 24px,
17
+ // 24px
18
+ 7: 28px,
19
+ // 28px
20
+ 8: 32px,
21
+ // 32px
22
+ 9: 36px,
23
+ // 36px
24
+ 10: 40px,
25
+ // 40px
26
+ 11: 44px,
27
+ // 44px
28
+ 12: 48px,
29
+ // 48px
30
+ 14: 56px,
31
+ // 56px
32
+ 16: 64px,
33
+ // 64px
34
+ 20: 80px,
35
+ // 80px
36
+ 24: 96px,
37
+ // 96px
38
+ 28: 112px,
39
+ // 112px
40
+ 32: 128px,
41
+ // 128px
42
+ 36: 144px,
43
+ // 144px
44
+ 40: 160px,
45
+ // 160px
46
+ 44: 176px,
47
+ // 176px
48
+ 48: 192px,
49
+ // 192px
50
+ 52: 208px,
51
+ // 208px
52
+ 56: 224px,
53
+ // 224px
54
+ 60: 240px,
55
+ // 240px
56
+ 64: 256px,
57
+ // 256px
58
+ 72: 288px,
59
+ // 288px
60
+ 80: 320px,
61
+ // 320px
62
+ 90: 360px, // 360px
63
+ ) !default;
64
+
65
+ $spacing-important: true !default;
66
+ $enable-negative-margins: false !default;