@shohojdhara/atomix 0.3.5 → 0.3.6

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 (173) hide show
  1. package/README.md +101 -199
  2. package/atomix.config.ts +241 -0
  3. package/dist/atomix.css +260 -179
  4. package/dist/atomix.css.map +1 -1
  5. package/dist/atomix.min.css +250 -179
  6. package/dist/atomix.min.css.map +1 -1
  7. package/dist/charts.js +61 -66
  8. package/dist/charts.js.map +1 -1
  9. package/dist/core.js +47 -31
  10. package/dist/core.js.map +1 -1
  11. package/dist/forms.js +47 -31
  12. package/dist/forms.js.map +1 -1
  13. package/dist/heavy.js +47 -31
  14. package/dist/heavy.js.map +1 -1
  15. package/dist/index.d.ts +1841 -1633
  16. package/dist/index.esm.js +4975 -4113
  17. package/dist/index.esm.js.map +1 -1
  18. package/dist/index.js +5151 -4290
  19. package/dist/index.js.map +1 -1
  20. package/dist/index.min.js +1 -1
  21. package/dist/index.min.js.map +1 -1
  22. package/dist/theme.d.ts +1572 -1442
  23. package/dist/theme.js +4816 -4080
  24. package/dist/theme.js.map +1 -1
  25. package/package.json +6 -20
  26. package/src/components/Accordion/Accordion.stories.tsx +50 -17
  27. package/src/components/AtomixGlass/AtomixGlass.tsx +65 -31
  28. package/src/components/AtomixGlass/AtomixGlassContainer.tsx +11 -4
  29. package/src/components/AtomixGlass/stories/AtomixGlass.stories.tsx +1 -32
  30. package/src/components/AtomixGlass/stories/Examples.stories.tsx +2 -2
  31. package/src/components/AtomixGlass/stories/shared-components.tsx +0 -31
  32. package/src/components/Avatar/Avatar.stories.tsx +7 -0
  33. package/src/components/Badge/Badge.stories.tsx +91 -13
  34. package/src/components/Block/Block.stories.tsx +7 -23
  35. package/src/components/Breadcrumb/Breadcrumb.stories.tsx +7 -0
  36. package/src/components/Button/Button.stories.tsx +141 -22
  37. package/src/components/Button/ButtonGroup.stories.tsx +315 -0
  38. package/src/components/Button/ButtonGroup.tsx +67 -0
  39. package/src/components/Button/index.ts +2 -0
  40. package/src/components/Callout/Callout.stories.tsx +8 -6
  41. package/src/components/Card/Card.stories.tsx +82 -28
  42. package/src/components/Chart/AnimatedChart.tsx +0 -1
  43. package/src/components/Chart/AreaChart.tsx +0 -1
  44. package/src/components/Chart/BarChart.tsx +0 -1
  45. package/src/components/Chart/BubbleChart.tsx +0 -1
  46. package/src/components/Chart/CandlestickChart.tsx +0 -1
  47. package/src/components/Chart/Chart.stories.tsx +5 -7
  48. package/src/components/Chart/Chart.tsx +0 -16
  49. package/src/components/Chart/ChartRenderer.tsx +1 -1
  50. package/src/components/Chart/DonutChart.tsx +0 -1
  51. package/src/components/Chart/FunnelChart.tsx +0 -1
  52. package/src/components/Chart/GaugeChart.tsx +0 -1
  53. package/src/components/Chart/HeatmapChart.tsx +0 -1
  54. package/src/components/Chart/LineChart.tsx +0 -1
  55. package/src/components/Chart/MultiAxisChart.tsx +0 -1
  56. package/src/components/Chart/PieChart.tsx +0 -1
  57. package/src/components/Chart/RadarChart.tsx +0 -1
  58. package/src/components/Chart/ScatterChart.tsx +0 -1
  59. package/src/components/Chart/WaterfallChart.tsx +0 -1
  60. package/src/components/ColorModeToggle/ColorModeToggle.stories.tsx +7 -0
  61. package/src/components/DataTable/DataTable.stories.tsx +23 -16
  62. package/src/components/DatePicker/DatePicker.stories.tsx +27 -19
  63. package/src/components/Dropdown/Dropdown.stories.tsx +11 -19
  64. package/src/components/EdgePanel/EdgePanel.stories.tsx +1 -0
  65. package/src/components/Footer/Footer.stories.tsx +8 -6
  66. package/src/components/Footer/FooterLink.tsx +9 -2
  67. package/src/components/Form/Checkbox.stories.tsx +7 -0
  68. package/src/components/Form/Form.stories.tsx +7 -0
  69. package/src/components/Form/FormGroup.stories.tsx +9 -1
  70. package/src/components/Form/Input.stories.tsx +69 -16
  71. package/src/components/Form/Radio.stories.tsx +9 -1
  72. package/src/components/Form/Select.stories.tsx +9 -1
  73. package/src/components/Form/Textarea.stories.tsx +10 -2
  74. package/src/components/Hero/Hero.stories.tsx +7 -0
  75. package/src/components/List/List.stories.tsx +7 -0
  76. package/src/components/Messages/Messages.stories.tsx +8 -7
  77. package/src/components/Modal/Modal.stories.tsx +17 -6
  78. package/src/components/Navigation/Menu/Menu.stories.tsx +7 -0
  79. package/src/components/Navigation/Nav/Nav.stories.tsx +7 -0
  80. package/src/components/Navigation/Navbar/Navbar.stories.tsx +1 -0
  81. package/src/components/Navigation/SideMenu/SideMenu.stories.tsx +1 -1
  82. package/src/components/Pagination/Pagination.stories.tsx +188 -111
  83. package/src/components/Pagination/Pagination.tsx +83 -3
  84. package/src/components/PhotoViewer/PhotoViewer.stories.tsx +10 -5
  85. package/src/components/Popover/Popover.stories.tsx +191 -115
  86. package/src/components/ProductReview/ProductReview.stories.tsx +80 -58
  87. package/src/components/Progress/Progress.stories.tsx +79 -49
  88. package/src/components/Rating/Rating.stories.tsx +109 -84
  89. package/src/components/River/River.stories.tsx +194 -114
  90. package/src/components/SectionIntro/SectionIntro.stories.tsx +19 -9
  91. package/src/components/Slider/Slider.stories.tsx +7 -0
  92. package/src/components/Spinner/Spinner.stories.tsx +15 -11
  93. package/src/components/Steps/Steps.stories.tsx +132 -98
  94. package/src/components/Tabs/Tabs.stories.tsx +163 -112
  95. package/src/components/Testimonial/Testimonial.stories.tsx +114 -68
  96. package/src/components/Todo/Todo.stories.tsx +38 -12
  97. package/src/components/Toggle/Toggle.stories.tsx +61 -28
  98. package/src/components/Tooltip/Tooltip.stories.tsx +318 -200
  99. package/src/components/Upload/Upload.stories.tsx +122 -84
  100. package/src/components/VideoPlayer/VideoPlayer.stories.tsx +7 -24
  101. package/src/components/index.ts +1 -0
  102. package/src/lib/composables/useAtomixGlass.ts +2 -3
  103. package/src/lib/composables/useNavbar.ts +0 -10
  104. package/src/lib/config/loader.ts +2 -1
  105. package/src/lib/constants/components.ts +10 -0
  106. package/src/lib/hooks/useComponentCustomization.ts +1 -1
  107. package/src/lib/theme/README.md +174 -0
  108. package/src/lib/theme/adapters/index.ts +31 -0
  109. package/src/lib/theme/adapters/themeAdapter.ts +287 -0
  110. package/src/lib/theme/config/__tests__/configLoader.test.ts +207 -0
  111. package/src/lib/theme/config/configLoader.ts +254 -0
  112. package/src/lib/theme/config/loader.ts +37 -48
  113. package/src/lib/theme/config/types.ts +2 -2
  114. package/src/lib/theme/config/validator.ts +15 -91
  115. package/src/lib/theme/{constants.ts → constants/constants.ts} +0 -18
  116. package/src/lib/theme/constants/index.ts +8 -0
  117. package/src/lib/theme/core/ThemeRegistry.ts +19 -6
  118. package/src/lib/theme/core/__tests__/createTheme.test.ts +132 -0
  119. package/src/lib/theme/core/composeTheme.ts +155 -0
  120. package/src/lib/theme/core/createTheme.ts +94 -0
  121. package/src/lib/theme/{createTheme.ts → core/createThemeObject.ts} +10 -6
  122. package/src/lib/theme/core/index.ts +5 -19
  123. package/src/lib/theme/devtools/Comparator.tsx +346 -22
  124. package/src/lib/theme/devtools/IMPROVEMENTS.md +139 -38
  125. package/src/lib/theme/devtools/Inspector.tsx +335 -51
  126. package/src/lib/theme/devtools/LiveEditor.tsx +478 -107
  127. package/src/lib/theme/devtools/Preview.tsx +471 -221
  128. package/src/lib/theme/{core → devtools}/ThemeValidator.ts +1 -1
  129. package/src/lib/theme/devtools/index.ts +14 -4
  130. package/src/lib/theme/devtools/useHistory.ts +130 -0
  131. package/src/lib/theme/errors/index.ts +12 -0
  132. package/src/lib/theme/generators/cssFile.ts +79 -0
  133. package/src/lib/theme/generators/generateCSS.ts +89 -0
  134. package/src/lib/theme/{generateCSSVariables.ts → generators/generateCSSVariables.ts} +3 -13
  135. package/src/lib/theme/generators/index.ts +19 -0
  136. package/src/lib/theme/i18n/rtl.ts +5 -6
  137. package/src/lib/theme/index.ts +120 -15
  138. package/src/lib/theme/runtime/ThemeApplicator.ts +52 -111
  139. package/src/lib/theme/{ThemeContext.tsx → runtime/ThemeContext.tsx} +1 -1
  140. package/src/lib/theme/runtime/ThemeErrorBoundary.tsx +1 -1
  141. package/src/lib/theme/runtime/ThemeProvider.tsx +456 -179
  142. package/src/lib/theme/runtime/index.ts +1 -2
  143. package/src/lib/theme/runtime/useTheme.ts +1 -2
  144. package/src/lib/theme/test/testTheme.ts +385 -0
  145. package/src/lib/theme/tokens/index.ts +12 -0
  146. package/src/lib/theme/tokens/tokens.ts +721 -0
  147. package/src/lib/theme/types.ts +6 -42
  148. package/src/lib/theme/{utils.ts → utils/domUtils.ts} +2 -2
  149. package/src/lib/theme/utils/index.ts +11 -0
  150. package/src/lib/theme/utils/injectCSS.ts +90 -0
  151. package/src/lib/theme/utils/themeHelpers.ts +78 -0
  152. package/src/lib/theme/{themeUtils.ts → utils/themeUtils.ts} +1 -1
  153. package/src/lib/theme-tools.ts +7 -8
  154. package/src/lib/types/components.ts +40 -130
  155. package/src/lib/utils/componentUtils.ts +1 -1
  156. package/src/styles/01-settings/_settings.design-tokens.scss +4 -1
  157. package/src/styles/02-tools/_tools.button.scss +66 -79
  158. package/src/styles/06-components/_components.atomix-glass.scss +13 -3
  159. package/src/styles/06-components/_components.pagination.scss +88 -0
  160. package/scripts/sync-theme-config.js +0 -309
  161. package/src/lib/theme/composeTheme.ts +0 -370
  162. package/src/lib/theme/core/ThemeCache.ts +0 -283
  163. package/src/lib/theme/core/ThemeEngine.test.ts +0 -146
  164. package/src/lib/theme/core/ThemeEngine.ts +0 -665
  165. package/src/lib/theme/createThemeFromConfig.ts +0 -132
  166. package/src/lib/theme/devtools/CLI.ts +0 -364
  167. package/src/lib/theme/runtime/ThemeManager.test.ts +0 -192
  168. package/src/lib/theme/runtime/ThemeManager.ts +0 -446
  169. package/src/styles/03-generic/_generated-root.css +0 -26
  170. package/src/themes/README.md +0 -442
  171. package/src/themes/themes.config.js +0 -68
  172. /package/src/lib/theme/{cssVariableMapper.ts → adapters/cssVariableMapper.ts} +0 -0
  173. /package/src/lib/theme/{errors.ts → errors/errors.ts} +0 -0
package/dist/atomix.min.css CHANGED
@@ -1808,17 +1808,17 @@ a,a:hover{
1808
1808
  opacity:var(--atomix-glass-hover-1-opacity, 0);
1809
1809
  }
1810
1810
  .c-atomix-glass__hover-1{
1811
- transition:opacity .2s ease-out;
1811
+ transition:opacity var(--atomix-transition-duration-fast, .15s) ease-out;
1812
1812
  }
1813
1813
  .c-atomix-glass__hover-2{
1814
1814
  background:var(--atomix-glass-hover-2-gradient, none);
1815
1815
  opacity:var(--atomix-glass-hover-2-opacity, 0);
1816
- transition:opacity .4s ease-out;
1816
+ transition:opacity var(--atomix-transition-duration-base, .3s) ease-out;
1817
1817
  }
1818
1818
  .c-atomix-glass__hover-3{
1819
1819
  background:var(--atomix-glass-hover-3-gradient, none);
1820
1820
  opacity:var(--atomix-glass-hover-3-opacity, 0);
1821
- transition:opacity .6s ease-out;
1821
+ transition:opacity var(--atomix-transition-duration-slow, .5s) ease-out;
1822
1822
  }
1823
1823
  .c-atomix-glass__base{
1824
1824
  background:var(--atomix-glass-base-gradient, none);
@@ -1945,6 +1945,11 @@ a,a:hover{
1945
1945
  --atomix-glass-transform:none;
1946
1946
  --atomix-glass-transition:none;
1947
1947
  }
1948
+ .c-atomix-glass[role=button]:focus-visible,.c-atomix-glass[tabindex]:not([tabindex="-1"]):focus-visible{
1949
+ box-shadow:0 0 0 2px var(--atomix-focus-border-color);
1950
+ outline:2px solid var(--atomix-focus-border-color);
1951
+ outline-offset:2px;
1952
+ }
1948
1953
  @media (prefers-reduced-motion:reduce){
1949
1954
  .c-atomix-glass{
1950
1955
  --atomix-glass-transition:none;
@@ -2164,228 +2169,228 @@ a,a:hover{
2164
2169
  color:var(--atomix-btn-hover-color);
2165
2170
  }
2166
2171
  .c-btn--primary{
2167
- --atomix-btn-color:#fff;
2168
- --atomix-btn-bg:#ffb800;
2169
- --atomix-btn-border-color:#ffb800;
2170
- --atomix-btn-hover-color:#fff;
2171
- --atomix-btn-hover-bg:#d99c00;
2172
- --atomix-btn-hover-border-color:#e6a600;
2173
- --atomix-btn-active-color:#fff;
2174
- --atomix-btn-active-bg:#cc9300;
2175
- --atomix-btn-active-border-color:#bf8a00;
2176
- --atomix-btn-disabled-color:#fff;
2177
- --atomix-btn-disabled-bg:#ffb800;
2178
- --atomix-btn-disabled-border-color:#ffb800;
2172
+ --atomix-btn-color:var(--atomix-white, #fff);
2173
+ --atomix-btn-bg:var(--atomix-primary, #ffb800);
2174
+ --atomix-btn-border-color:var(--atomix-primary, #ffb800);
2175
+ --atomix-btn-hover-color:var(--atomix-white, #fff);
2176
+ --atomix-btn-hover-bg:var(--atomix-primary-hover, #d99c00);
2177
+ --atomix-btn-hover-border-color:var(--atomix-primary-hover, #e6a600);
2178
+ --atomix-btn-active-color:var(--atomix-white, #fff);
2179
+ --atomix-btn-active-bg:var(--atomix-primary-hover, #cc9300);
2180
+ --atomix-btn-active-border-color:var(--atomix-primary-hover, #bf8a00);
2181
+ --atomix-btn-disabled-color:var(--atomix-white, #fff);
2182
+ --atomix-btn-disabled-bg:var(--atomix-primary, #ffb800);
2183
+ --atomix-btn-disabled-border-color:var(--atomix-primary, #ffb800);
2179
2184
  }
2180
2185
  .c-btn--secondary{
2181
- --atomix-btn-color:var(--atomix-dark-text-emphasis);
2182
- --atomix-btn-bg:#f3f4f6;
2183
- --atomix-btn-border-color:#f3f4f6;
2184
- --atomix-btn-hover-color:var(--atomix-dark-text-emphasis);
2185
- --atomix-btn-hover-bg:#c9ced7;
2186
- --atomix-btn-hover-border-color:#d7dae1;
2187
- --atomix-btn-active-color:#fff;
2188
- --atomix-btn-active-bg:#bbc1cc;
2189
- --atomix-btn-active-border-color:#adb4c2;
2190
- --atomix-btn-disabled-color:#fff;
2191
- --atomix-btn-disabled-bg:#f3f4f6;
2192
- --atomix-btn-disabled-border-color:#f3f4f6;
2186
+ --atomix-btn-color:var(--atomix-dark-text-emphasis, #1f2937);
2187
+ --atomix-btn-bg:var(--atomix-secondary, #f3f4f6);
2188
+ --atomix-btn-border-color:var(--atomix-secondary, #f3f4f6);
2189
+ --atomix-btn-hover-color:var(--atomix-dark-text-emphasis, #1f2937);
2190
+ --atomix-btn-hover-bg:var(--atomix-secondary-hover, #c9ced7);
2191
+ --atomix-btn-hover-border-color:var(--atomix-secondary-hover, #d7dae1);
2192
+ --atomix-btn-active-color:var(--atomix-white, #fff);
2193
+ --atomix-btn-active-bg:var(--atomix-secondary-hover, #bbc1cc);
2194
+ --atomix-btn-active-border-color:var(--atomix-secondary-hover, #adb4c2);
2195
+ --atomix-btn-disabled-color:var(--atomix-white, #fff);
2196
+ --atomix-btn-disabled-bg:var(--atomix-secondary, #f3f4f6);
2197
+ --atomix-btn-disabled-border-color:var(--atomix-secondary, #f3f4f6);
2193
2198
  }
2194
2199
  .c-btn--success{
2195
- --atomix-btn-color:#fff;
2196
- --atomix-btn-bg:#22c55e;
2197
- --atomix-btn-border-color:#22c55e;
2198
- --atomix-btn-hover-color:#fff;
2199
- --atomix-btn-hover-bg:#1da750;
2200
- --atomix-btn-hover-border-color:#1fb155;
2201
- --atomix-btn-active-color:#fff;
2202
- --atomix-btn-active-bg:#1b9e4b;
2203
- --atomix-btn-active-border-color:#1a9447;
2204
- --atomix-btn-disabled-color:#fff;
2205
- --atomix-btn-disabled-bg:#22c55e;
2206
- --atomix-btn-disabled-border-color:#22c55e;
2200
+ --atomix-btn-color:var(--atomix-white, #fff);
2201
+ --atomix-btn-bg:var(--atomix-success, #22c55e);
2202
+ --atomix-btn-border-color:var(--atomix-success, #22c55e);
2203
+ --atomix-btn-hover-color:var(--atomix-white, #fff);
2204
+ --atomix-btn-hover-bg:var(--atomix-success-hover, #1da750);
2205
+ --atomix-btn-hover-border-color:var(--atomix-success-hover, #1fb155);
2206
+ --atomix-btn-active-color:var(--atomix-white, #fff);
2207
+ --atomix-btn-active-bg:var(--atomix-success-hover, #1b9e4b);
2208
+ --atomix-btn-active-border-color:var(--atomix-success-hover, #1a9447);
2209
+ --atomix-btn-disabled-color:var(--atomix-white, #fff);
2210
+ --atomix-btn-disabled-bg:var(--atomix-success, #22c55e);
2211
+ --atomix-btn-disabled-border-color:var(--atomix-success, #22c55e);
2207
2212
  }
2208
2213
  .c-btn--info{
2209
- --atomix-btn-color:#fff;
2210
- --atomix-btn-bg:#3b82f6;
2211
- --atomix-btn-border-color:#3b82f6;
2212
- --atomix-btn-hover-color:#fff;
2213
- --atomix-btn-hover-bg:#0f66f4;
2214
- --atomix-btn-hover-border-color:#1e6ff5;
2215
- --atomix-btn-active-color:#fff;
2216
- --atomix-btn-active-bg:#0b5fe9;
2217
- --atomix-btn-active-border-color:#0a59db;
2218
- --atomix-btn-disabled-color:#fff;
2219
- --atomix-btn-disabled-bg:#3b82f6;
2220
- --atomix-btn-disabled-border-color:#3b82f6;
2214
+ --atomix-btn-color:var(--atomix-white, #fff);
2215
+ --atomix-btn-bg:var(--atomix-info, #3b82f6);
2216
+ --atomix-btn-border-color:var(--atomix-info, #3b82f6);
2217
+ --atomix-btn-hover-color:var(--atomix-white, #fff);
2218
+ --atomix-btn-hover-bg:var(--atomix-info-hover, #0f66f4);
2219
+ --atomix-btn-hover-border-color:var(--atomix-info-hover, #1e6ff5);
2220
+ --atomix-btn-active-color:var(--atomix-white, #fff);
2221
+ --atomix-btn-active-bg:var(--atomix-info-hover, #0b5fe9);
2222
+ --atomix-btn-active-border-color:var(--atomix-info-hover, #0a59db);
2223
+ --atomix-btn-disabled-color:var(--atomix-white, #fff);
2224
+ --atomix-btn-disabled-bg:var(--atomix-info, #3b82f6);
2225
+ --atomix-btn-disabled-border-color:var(--atomix-info, #3b82f6);
2221
2226
  }
2222
2227
  .c-btn--warning{
2223
- --atomix-btn-color:#fff;
2224
- --atomix-btn-bg:#eab308;
2225
- --atomix-btn-border-color:#eab308;
2226
- --atomix-btn-hover-color:#fff;
2227
- --atomix-btn-hover-bg:#c79807;
2228
- --atomix-btn-hover-border-color:#d3a107;
2229
- --atomix-btn-active-color:#fff;
2230
- --atomix-btn-active-bg:#bb8f06;
2231
- --atomix-btn-active-border-color:#b08606;
2232
- --atomix-btn-disabled-color:#fff;
2233
- --atomix-btn-disabled-bg:#eab308;
2234
- --atomix-btn-disabled-border-color:#eab308;
2228
+ --atomix-btn-color:var(--atomix-white, #fff);
2229
+ --atomix-btn-bg:var(--atomix-warning, #eab308);
2230
+ --atomix-btn-border-color:var(--atomix-warning, #eab308);
2231
+ --atomix-btn-hover-color:var(--atomix-white, #fff);
2232
+ --atomix-btn-hover-bg:var(--atomix-warning-hover, #c79807);
2233
+ --atomix-btn-hover-border-color:var(--atomix-warning-hover, #d3a107);
2234
+ --atomix-btn-active-color:var(--atomix-white, #fff);
2235
+ --atomix-btn-active-bg:var(--atomix-warning-hover, #bb8f06);
2236
+ --atomix-btn-active-border-color:var(--atomix-warning-hover, #b08606);
2237
+ --atomix-btn-disabled-color:var(--atomix-white, #fff);
2238
+ --atomix-btn-disabled-bg:var(--atomix-warning, #eab308);
2239
+ --atomix-btn-disabled-border-color:var(--atomix-warning, #eab308);
2235
2240
  }
2236
2241
  .c-btn--error{
2237
- --atomix-btn-color:#fff;
2238
- --atomix-btn-bg:#ef4444;
2239
- --atomix-btn-border-color:#ef4444;
2240
- --atomix-btn-hover-color:#fff;
2241
- --atomix-btn-hover-bg:#eb1a1a;
2242
- --atomix-btn-hover-border-color:#ed2828;
2243
- --atomix-btn-active-color:#fff;
2244
- --atomix-btn-active-bg:#e21313;
2245
- --atomix-btn-active-border-color:#d41212;
2246
- --atomix-btn-disabled-color:#fff;
2247
- --atomix-btn-disabled-bg:#ef4444;
2248
- --atomix-btn-disabled-border-color:#ef4444;
2242
+ --atomix-btn-color:var(--atomix-white, #fff);
2243
+ --atomix-btn-bg:var(--atomix-error, #ef4444);
2244
+ --atomix-btn-border-color:var(--atomix-error, #ef4444);
2245
+ --atomix-btn-hover-color:var(--atomix-white, #fff);
2246
+ --atomix-btn-hover-bg:var(--atomix-error-hover, #eb1a1a);
2247
+ --atomix-btn-hover-border-color:var(--atomix-error-hover, #ed2828);
2248
+ --atomix-btn-active-color:var(--atomix-white, #fff);
2249
+ --atomix-btn-active-bg:var(--atomix-error-hover, #e21313);
2250
+ --atomix-btn-active-border-color:var(--atomix-error-hover, #d41212);
2251
+ --atomix-btn-disabled-color:var(--atomix-white, #fff);
2252
+ --atomix-btn-disabled-bg:var(--atomix-error, #ef4444);
2253
+ --atomix-btn-disabled-border-color:var(--atomix-error, #ef4444);
2249
2254
  }
2250
2255
  .c-btn--light{
2251
- --atomix-btn-color:var(--atomix-dark-text-emphasis);
2252
- --atomix-btn-bg:#f9fafb;
2253
- --atomix-btn-border-color:#f9fafb;
2254
- --atomix-btn-hover-color:var(--atomix-dark-text-emphasis);
2255
- --atomix-btn-hover-bg:#ccd5dd;
2256
- --atomix-btn-hover-border-color:#dbe1e7;
2257
- --atomix-btn-active-color:#fff;
2258
- --atomix-btn-active-bg:#bdc8d3;
2259
- --atomix-btn-active-border-color:#aebcc9;
2260
- --atomix-btn-disabled-color:#fff;
2261
- --atomix-btn-disabled-bg:#f9fafb;
2262
- --atomix-btn-disabled-border-color:#f9fafb;
2256
+ --atomix-btn-color:var(--atomix-dark-text-emphasis, #1f2937);
2257
+ --atomix-btn-bg:var(--atomix-light, #f9fafb);
2258
+ --atomix-btn-border-color:var(--atomix-light, #f9fafb);
2259
+ --atomix-btn-hover-color:var(--atomix-dark-text-emphasis, #1f2937);
2260
+ --atomix-btn-hover-bg:var(--atomix-light-hover, #ccd5dd);
2261
+ --atomix-btn-hover-border-color:var(--atomix-light-hover, #dbe1e7);
2262
+ --atomix-btn-active-color:var(--atomix-white, #fff);
2263
+ --atomix-btn-active-bg:var(--atomix-light-hover, #bdc8d3);
2264
+ --atomix-btn-active-border-color:var(--atomix-light-hover, #aebcc9);
2265
+ --atomix-btn-disabled-color:var(--atomix-white, #fff);
2266
+ --atomix-btn-disabled-bg:var(--atomix-light, #f9fafb);
2267
+ --atomix-btn-disabled-border-color:var(--atomix-light, #f9fafb);
2263
2268
  }
2264
2269
  .c-btn--dark{
2265
- --atomix-btn-color:#fff;
2266
- --atomix-btn-bg:#1f2937;
2267
- --atomix-btn-border-color:#1f2937;
2268
- --atomix-btn-hover-color:#fff;
2269
- --atomix-btn-hover-bg:#1a232f;
2270
- --atomix-btn-hover-border-color:#1c2532;
2271
- --atomix-btn-active-color:#fff;
2272
- --atomix-btn-active-bg:#19212c;
2273
- --atomix-btn-active-border-color:#171f29;
2274
- --atomix-btn-disabled-color:#fff;
2275
- --atomix-btn-disabled-bg:#1f2937;
2276
- --atomix-btn-disabled-border-color:#1f2937;
2270
+ --atomix-btn-color:var(--atomix-white, #fff);
2271
+ --atomix-btn-bg:var(--atomix-dark, #1f2937);
2272
+ --atomix-btn-border-color:var(--atomix-dark, #1f2937);
2273
+ --atomix-btn-hover-color:var(--atomix-white, #fff);
2274
+ --atomix-btn-hover-bg:var(--atomix-dark-hover, #1a232f);
2275
+ --atomix-btn-hover-border-color:var(--atomix-dark-hover, #1c2532);
2276
+ --atomix-btn-active-color:var(--atomix-white, #fff);
2277
+ --atomix-btn-active-bg:var(--atomix-dark-hover, #19212c);
2278
+ --atomix-btn-active-border-color:var(--atomix-dark-hover, #171f29);
2279
+ --atomix-btn-disabled-color:var(--atomix-white, #fff);
2280
+ --atomix-btn-disabled-bg:var(--atomix-dark, #1f2937);
2281
+ --atomix-btn-disabled-border-color:var(--atomix-dark, #1f2937);
2277
2282
  }
2278
2283
  .c-btn--outline-primary{
2279
- --atomix-btn-color:var(--atomix-primary);
2284
+ --atomix-btn-color:var(--atomix-primary, #ffb800);
2280
2285
  --atomix-btn-bg:transparent;
2281
- --atomix-btn-border-color:var(--atomix-primary);
2282
- --atomix-btn-hover-color:var(--atomix-light);
2283
- --atomix-btn-hover-bg:var(--atomix-primary);
2284
- --atomix-btn-hover-border-color:var(--atomix-primary);
2285
- --atomix-btn-active-color:var(--atomix-light);
2286
- --atomix-btn-active-bg:var(--atomix-primary);
2287
- --atomix-btn-active-border-color:var(--atomix-primary);
2288
- --atomix-btn-disabled-color:var(--atomix-primary);
2286
+ --atomix-btn-border-color:var(--atomix-primary, #ffb800);
2287
+ --atomix-btn-hover-color:var(--atomix-white, #fff);
2288
+ --atomix-btn-hover-bg:var(--atomix-primary-hover, #d99c00);
2289
+ --atomix-btn-hover-border-color:var(--atomix-primary-hover, #e6a600);
2290
+ --atomix-btn-active-color:var(--atomix-white, #fff);
2291
+ --atomix-btn-active-bg:var(--atomix-primary-hover, #cc9300);
2292
+ --atomix-btn-active-border-color:var(--atomix-primary-hover, #bf8a00);
2293
+ --atomix-btn-disabled-color:var(--atomix-primary, #ffb800);
2289
2294
  --atomix-btn-disabled-bg:transparent;
2290
- --atomix-btn-disabled-border-color:var(--atomix-primary);
2295
+ --atomix-btn-disabled-border-color:var(--atomix-primary, #ffb800);
2291
2296
  }
2292
2297
  .c-btn--outline-secondary{
2293
- --atomix-btn-color:var(--atomix-invert);
2298
+ --atomix-btn-color:var(--atomix-secondary, #f3f4f6);
2294
2299
  --atomix-btn-bg:transparent;
2295
- --atomix-btn-border-color:var(--atomix-secondary);
2296
- --atomix-btn-hover-color:var(--atomix-invert);
2297
- --atomix-btn-hover-bg:var(--atomix-secondary);
2298
- --atomix-btn-hover-border-color:var(--atomix-secondary);
2299
- --atomix-btn-active-color:var(--atomix-invert);
2300
- --atomix-btn-active-bg:var(--atomix-secondary);
2301
- --atomix-btn-active-border-color:var(--atomix-secondary);
2302
- --atomix-btn-disabled-color:var(--atomix-secondary);
2300
+ --atomix-btn-border-color:var(--atomix-secondary, #f3f4f6);
2301
+ --atomix-btn-hover-color:var(--atomix-white, #fff);
2302
+ --atomix-btn-hover-bg:var(--atomix-secondary-hover, #c9ced7);
2303
+ --atomix-btn-hover-border-color:var(--atomix-secondary-hover, #d7dae1);
2304
+ --atomix-btn-active-color:var(--atomix-white, #fff);
2305
+ --atomix-btn-active-bg:var(--atomix-secondary-hover, #bbc1cc);
2306
+ --atomix-btn-active-border-color:var(--atomix-secondary-hover, #adb4c2);
2307
+ --atomix-btn-disabled-color:var(--atomix-secondary, #f3f4f6);
2303
2308
  --atomix-btn-disabled-bg:transparent;
2304
- --atomix-btn-disabled-border-color:var(--atomix-secondary);
2309
+ --atomix-btn-disabled-border-color:var(--atomix-secondary, #f3f4f6);
2305
2310
  }
2306
2311
  .c-btn--outline-success{
2307
- --atomix-btn-color:var(--atomix-success);
2312
+ --atomix-btn-color:var(--atomix-success, #22c55e);
2308
2313
  --atomix-btn-bg:transparent;
2309
- --atomix-btn-border-color:var(--atomix-success);
2310
- --atomix-btn-hover-color:var(--atomix-light);
2311
- --atomix-btn-hover-bg:var(--atomix-success);
2312
- --atomix-btn-hover-border-color:var(--atomix-success);
2313
- --atomix-btn-active-color:var(--atomix-light);
2314
- --atomix-btn-active-bg:var(--atomix-success);
2315
- --atomix-btn-active-border-color:var(--atomix-success);
2316
- --atomix-btn-disabled-color:var(--atomix-success);
2314
+ --atomix-btn-border-color:var(--atomix-success, #22c55e);
2315
+ --atomix-btn-hover-color:var(--atomix-white, #fff);
2316
+ --atomix-btn-hover-bg:var(--atomix-success-hover, #1da750);
2317
+ --atomix-btn-hover-border-color:var(--atomix-success-hover, #1fb155);
2318
+ --atomix-btn-active-color:var(--atomix-white, #fff);
2319
+ --atomix-btn-active-bg:var(--atomix-success-hover, #1b9e4b);
2320
+ --atomix-btn-active-border-color:var(--atomix-success-hover, #1a9447);
2321
+ --atomix-btn-disabled-color:var(--atomix-success, #22c55e);
2317
2322
  --atomix-btn-disabled-bg:transparent;
2318
- --atomix-btn-disabled-border-color:var(--atomix-success);
2323
+ --atomix-btn-disabled-border-color:var(--atomix-success, #22c55e);
2319
2324
  }
2320
2325
  .c-btn--outline-info{
2321
- --atomix-btn-color:var(--atomix-info);
2326
+ --atomix-btn-color:var(--atomix-info, #3b82f6);
2322
2327
  --atomix-btn-bg:transparent;
2323
- --atomix-btn-border-color:var(--atomix-info);
2324
- --atomix-btn-hover-color:var(--atomix-light);
2325
- --atomix-btn-hover-bg:var(--atomix-info);
2326
- --atomix-btn-hover-border-color:var(--atomix-info);
2327
- --atomix-btn-active-color:var(--atomix-light);
2328
- --atomix-btn-active-bg:var(--atomix-info);
2329
- --atomix-btn-active-border-color:var(--atomix-info);
2330
- --atomix-btn-disabled-color:var(--atomix-info);
2328
+ --atomix-btn-border-color:var(--atomix-info, #3b82f6);
2329
+ --atomix-btn-hover-color:var(--atomix-white, #fff);
2330
+ --atomix-btn-hover-bg:var(--atomix-info-hover, #0f66f4);
2331
+ --atomix-btn-hover-border-color:var(--atomix-info-hover, #1e6ff5);
2332
+ --atomix-btn-active-color:var(--atomix-white, #fff);
2333
+ --atomix-btn-active-bg:var(--atomix-info-hover, #0b5fe9);
2334
+ --atomix-btn-active-border-color:var(--atomix-info-hover, #0a59db);
2335
+ --atomix-btn-disabled-color:var(--atomix-info, #3b82f6);
2331
2336
  --atomix-btn-disabled-bg:transparent;
2332
- --atomix-btn-disabled-border-color:var(--atomix-info);
2337
+ --atomix-btn-disabled-border-color:var(--atomix-info, #3b82f6);
2333
2338
  }
2334
2339
  .c-btn--outline-warning{
2335
- --atomix-btn-color:var(--atomix-warning);
2340
+ --atomix-btn-color:var(--atomix-warning, #eab308);
2336
2341
  --atomix-btn-bg:transparent;
2337
- --atomix-btn-border-color:var(--atomix-warning);
2338
- --atomix-btn-hover-color:var(--atomix-light);
2339
- --atomix-btn-hover-bg:var(--atomix-warning);
2340
- --atomix-btn-hover-border-color:var(--atomix-warning);
2341
- --atomix-btn-active-color:var(--atomix-light);
2342
- --atomix-btn-active-bg:var(--atomix-warning);
2343
- --atomix-btn-active-border-color:var(--atomix-warning);
2344
- --atomix-btn-disabled-color:var(--atomix-warning);
2342
+ --atomix-btn-border-color:var(--atomix-warning, #eab308);
2343
+ --atomix-btn-hover-color:var(--atomix-white, #fff);
2344
+ --atomix-btn-hover-bg:var(--atomix-warning-hover, #c79807);
2345
+ --atomix-btn-hover-border-color:var(--atomix-warning-hover, #d3a107);
2346
+ --atomix-btn-active-color:var(--atomix-white, #fff);
2347
+ --atomix-btn-active-bg:var(--atomix-warning-hover, #bb8f06);
2348
+ --atomix-btn-active-border-color:var(--atomix-warning-hover, #b08606);
2349
+ --atomix-btn-disabled-color:var(--atomix-warning, #eab308);
2345
2350
  --atomix-btn-disabled-bg:transparent;
2346
- --atomix-btn-disabled-border-color:var(--atomix-warning);
2351
+ --atomix-btn-disabled-border-color:var(--atomix-warning, #eab308);
2347
2352
  }
2348
2353
  .c-btn--outline-error{
2349
- --atomix-btn-color:var(--atomix-error);
2354
+ --atomix-btn-color:var(--atomix-error, #ef4444);
2350
2355
  --atomix-btn-bg:transparent;
2351
- --atomix-btn-border-color:var(--atomix-error);
2352
- --atomix-btn-hover-color:var(--atomix-light);
2353
- --atomix-btn-hover-bg:var(--atomix-error);
2354
- --atomix-btn-hover-border-color:var(--atomix-error);
2355
- --atomix-btn-active-color:var(--atomix-light);
2356
- --atomix-btn-active-bg:var(--atomix-error);
2357
- --atomix-btn-active-border-color:var(--atomix-error);
2358
- --atomix-btn-disabled-color:var(--atomix-error);
2356
+ --atomix-btn-border-color:var(--atomix-error, #ef4444);
2357
+ --atomix-btn-hover-color:var(--atomix-white, #fff);
2358
+ --atomix-btn-hover-bg:var(--atomix-error-hover, #eb1a1a);
2359
+ --atomix-btn-hover-border-color:var(--atomix-error-hover, #ed2828);
2360
+ --atomix-btn-active-color:var(--atomix-white, #fff);
2361
+ --atomix-btn-active-bg:var(--atomix-error-hover, #e21313);
2362
+ --atomix-btn-active-border-color:var(--atomix-error-hover, #d41212);
2363
+ --atomix-btn-disabled-color:var(--atomix-error, #ef4444);
2359
2364
  --atomix-btn-disabled-bg:transparent;
2360
- --atomix-btn-disabled-border-color:var(--atomix-error);
2365
+ --atomix-btn-disabled-border-color:var(--atomix-error, #ef4444);
2361
2366
  }
2362
2367
  .c-btn--outline-light{
2363
- --atomix-btn-color:var(--atomix-invert);
2368
+ --atomix-btn-color:var(--atomix-light, #f9fafb);
2364
2369
  --atomix-btn-bg:transparent;
2365
- --atomix-btn-border-color:var(--atomix-light);
2366
- --atomix-btn-hover-color:var(--atomix-invert);
2367
- --atomix-btn-hover-bg:var(--atomix-secondary);
2368
- --atomix-btn-hover-border-color:var(--atomix-light);
2369
- --atomix-btn-active-color:var(--atomix-invert);
2370
- --atomix-btn-active-bg:var(--atomix-light);
2371
- --atomix-btn-active-border-color:var(--atomix-light);
2372
- --atomix-btn-disabled-color:var(--atomix-light);
2370
+ --atomix-btn-border-color:var(--atomix-light, #f9fafb);
2371
+ --atomix-btn-hover-color:var(--atomix-white, #fff);
2372
+ --atomix-btn-hover-bg:var(--atomix-light-hover, #ccd5dd);
2373
+ --atomix-btn-hover-border-color:var(--atomix-light-hover, #dbe1e7);
2374
+ --atomix-btn-active-color:var(--atomix-white, #fff);
2375
+ --atomix-btn-active-bg:var(--atomix-light-hover, #bdc8d3);
2376
+ --atomix-btn-active-border-color:var(--atomix-light-hover, #aebcc9);
2377
+ --atomix-btn-disabled-color:var(--atomix-light, #f9fafb);
2373
2378
  --atomix-btn-disabled-bg:transparent;
2374
- --atomix-btn-disabled-border-color:var(--atomix-light);
2379
+ --atomix-btn-disabled-border-color:var(--atomix-light, #f9fafb);
2375
2380
  }
2376
2381
  .c-btn--outline-dark{
2377
- --atomix-btn-color:var(--atomix-invert);
2382
+ --atomix-btn-color:var(--atomix-dark, #1f2937);
2378
2383
  --atomix-btn-bg:transparent;
2379
- --atomix-btn-border-color:var(--atomix-dark);
2380
- --atomix-btn-hover-color:var(--atomix-invert);
2381
- --atomix-btn-hover-bg:var(--atomix-secondary);
2382
- --atomix-btn-hover-border-color:var(--atomix-dark);
2383
- --atomix-btn-active-color:var(--atomix-invert);
2384
- --atomix-btn-active-bg:var(--atomix-dark);
2385
- --atomix-btn-active-border-color:var(--atomix-dark);
2386
- --atomix-btn-disabled-color:var(--atomix-dark);
2384
+ --atomix-btn-border-color:var(--atomix-dark, #1f2937);
2385
+ --atomix-btn-hover-color:var(--atomix-white, #fff);
2386
+ --atomix-btn-hover-bg:var(--atomix-dark-hover, #1a232f);
2387
+ --atomix-btn-hover-border-color:var(--atomix-dark-hover, #1c2532);
2388
+ --atomix-btn-active-color:var(--atomix-white, #fff);
2389
+ --atomix-btn-active-bg:var(--atomix-dark-hover, #19212c);
2390
+ --atomix-btn-active-border-color:var(--atomix-dark-hover, #171f29);
2391
+ --atomix-btn-disabled-color:var(--atomix-dark, #1f2937);
2387
2392
  --atomix-btn-disabled-bg:transparent;
2388
- --atomix-btn-disabled-border-color:var(--atomix-dark);
2393
+ --atomix-btn-disabled-border-color:var(--atomix-dark, #1f2937);
2389
2394
  }
2390
2395
  .c-btn--lg{
2391
2396
  --atomix-btn-padding-y:1rem;
@@ -8546,6 +8551,72 @@ a,a:hover{
8546
8551
  .c-pagination__icon-skip-forward:before{
8547
8552
  content:"⏭";
8548
8553
  }
8554
+ .c-pagination__search{
8555
+ flex-direction:column;
8556
+ margin-top:1rem;
8557
+ }
8558
+ .c-pagination__search,.c-pagination__search-label,.c-pagination__search-wrapper{
8559
+ align-items:center;
8560
+ display:flex;
8561
+ gap:.5rem;
8562
+ }
8563
+ .c-pagination__search-label-text{
8564
+ white-space:nowrap;
8565
+ }
8566
+ .c-pagination__search-input,.c-pagination__search-label-text{
8567
+ color:var(--atomix-pagination-color);
8568
+ font-size:var(--atomix-pagination-font-size);
8569
+ }
8570
+ .c-pagination__search-input{
8571
+ background-color:var(--atomix-pagination-bg);
8572
+ border:1px solid var(--atomix-pagination-color);
8573
+ border-radius:var(--atomix-pagination-border-radius);
8574
+ padding:var(--atomix-pagination-padding-y) var(--atomix-pagination-padding-x);
8575
+ text-align:center;
8576
+ transition:all .2s ease-in-out;
8577
+ width:80px;
8578
+ }
8579
+ .c-pagination__search-input:focus{
8580
+ border-color:var(--atomix-pagination-focus-border-color);
8581
+ border-width:var(--atomix-pagination-focus-border-width);
8582
+ outline:none;
8583
+ }
8584
+ .c-pagination__search-input.is-error{
8585
+ background-color:var(--atomix-error-bg-subtle, rgba(220,53,69,.1));
8586
+ border-color:var(--atomix-error-color, #dc3545);
8587
+ }
8588
+ .c-pagination__search-button{
8589
+ align-items:center;
8590
+ background-color:var(--atomix-pagination-bg);
8591
+ border:1px solid var(--atomix-pagination-color);
8592
+ border-radius:var(--atomix-pagination-border-radius);
8593
+ color:var(--atomix-pagination-color);
8594
+ cursor:pointer;
8595
+ display:flex;
8596
+ height:var(--atomix-pagination-size);
8597
+ justify-content:center;
8598
+ padding:var(--atomix-pagination-padding-y) var(--atomix-pagination-padding-x);
8599
+ transition:all .2s ease-in-out;
8600
+ width:var(--atomix-pagination-size);
8601
+ }
8602
+ .c-pagination__search-button:hover{
8603
+ --atomix-pagination-color:var(--atomix-pagination-hover-color);
8604
+ --atomix-pagination-bg:var(--atomix-pagination-hover-bg);
8605
+ }
8606
+ .c-pagination__search-button:focus-visible{
8607
+ border-color:var(--atomix-pagination-focus-border-color);
8608
+ border-width:var(--atomix-pagination-focus-border-width);
8609
+ outline:none;
8610
+ }
8611
+ .c-pagination__search-button .c-icon{
8612
+ color:inherit;
8613
+ }
8614
+ .c-pagination__search-error{
8615
+ color:var(--atomix-error-color, #dc3545);
8616
+ font-size:.75rem;
8617
+ margin-top:.25rem;
8618
+ text-align:center;
8619
+ }
8549
8620
  .c-popover{
8550
8621
  --atomix-popover-width:18.75rem;
8551
8622
  --atomix-popover-padding-x:1rem;