@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.css CHANGED
@@ -1886,17 +1886,17 @@ a, a:hover {
1886
1886
  background: var(--atomix-glass-hover-1-gradient, none);
1887
1887
  }
1888
1888
  .c-atomix-glass__hover-1 {
1889
- transition: opacity 0.2s ease-out;
1889
+ transition: opacity var(--atomix-transition-duration-fast, 0.15s) ease-out;
1890
1890
  opacity: var(--atomix-glass-hover-1-opacity, 0);
1891
1891
  background: var(--atomix-glass-hover-1-gradient, none);
1892
1892
  }
1893
1893
  .c-atomix-glass__hover-2 {
1894
- transition: opacity 0.4s ease-out;
1894
+ transition: opacity var(--atomix-transition-duration-base, 0.3s) ease-out;
1895
1895
  opacity: var(--atomix-glass-hover-2-opacity, 0);
1896
1896
  background: var(--atomix-glass-hover-2-gradient, none);
1897
1897
  }
1898
1898
  .c-atomix-glass__hover-3 {
1899
- transition: opacity 0.6s ease-out;
1899
+ transition: opacity var(--atomix-transition-duration-slow, 0.5s) ease-out;
1900
1900
  opacity: var(--atomix-glass-hover-3-opacity, 0);
1901
1901
  background: var(--atomix-glass-hover-3-gradient, none);
1902
1902
  }
@@ -1924,12 +1924,14 @@ a, a:hover {
1924
1924
  box-sizing: border-box;
1925
1925
  overflow: hidden;
1926
1926
  pointer-events: none;
1927
+ /* postcss-ignore-start */
1927
1928
  -webkit-mask: linear-gradient(var(--atomix-black, #000000) 0 0) content-box, linear-gradient(var(--atomix-black, #000000) 0 0);
1928
1929
  -webkit-mask-composite: xor;
1929
1930
  -webkit-mask: linear-gradient(var(--atomix-black, #000000) 0 0) content-box, linear-gradient(var(--atomix-black, #000000) 0 0);
1930
1931
  mask: linear-gradient(var(--atomix-black, #000000) 0 0) content-box, linear-gradient(var(--atomix-black, #000000) 0 0);
1931
1932
  -webkit-mask-composite: xor;
1932
1933
  mask-composite: exclude;
1934
+ /* postcss-ignore-end */
1933
1935
  position: var(--atomix-glass-position);
1934
1936
  top: var(--atomix-glass-top);
1935
1937
  left: var(--atomix-glass-left);
@@ -2037,6 +2039,11 @@ a, a:hover {
2037
2039
  --atomix-glass-transform: none;
2038
2040
  --atomix-glass-transition: none;
2039
2041
  }
2042
+ .c-atomix-glass[role=button]:focus-visible, .c-atomix-glass[tabindex]:not([tabindex="-1"]):focus-visible {
2043
+ outline: 2px solid var(--atomix-focus-border-color);
2044
+ outline-offset: 2px;
2045
+ box-shadow: 0 0 0 2px var(--atomix-focus-border-color);
2046
+ }
2040
2047
  @media (prefers-reduced-motion: reduce) {
2041
2048
  .c-atomix-glass {
2042
2049
  --atomix-glass-transition: none;
@@ -2256,228 +2263,228 @@ a, a:hover {
2256
2263
  border-color: var(--atomix-btn-hover-border-color);
2257
2264
  }
2258
2265
  .c-btn--primary {
2259
- --atomix-btn-color: #ffffff;
2260
- --atomix-btn-bg: #ffb800;
2261
- --atomix-btn-border-color: #ffb800;
2262
- --atomix-btn-hover-color: #ffffff;
2263
- --atomix-btn-hover-bg: rgb(216.75, 156.4, 0);
2264
- --atomix-btn-hover-border-color: rgb(229.5, 165.6, 0);
2265
- --atomix-btn-active-color: #ffffff;
2266
- --atomix-btn-active-bg: rgb(204, 147.2, 0);
2267
- --atomix-btn-active-border-color: rgb(191.25, 138, 0);
2268
- --atomix-btn-disabled-color: #ffffff;
2269
- --atomix-btn-disabled-bg: #ffb800;
2270
- --atomix-btn-disabled-border-color: #ffb800;
2266
+ --atomix-btn-color: var(--atomix-white, #ffffff);
2267
+ --atomix-btn-bg: var(--atomix-primary, #ffb800);
2268
+ --atomix-btn-border-color: var(--atomix-primary, #ffb800);
2269
+ --atomix-btn-hover-color: var(--atomix-white, #ffffff);
2270
+ --atomix-btn-hover-bg: var(--atomix-primary-hover, rgb(216.75, 156.4, 0));
2271
+ --atomix-btn-hover-border-color: var(--atomix-primary-hover, rgb(229.5, 165.6, 0));
2272
+ --atomix-btn-active-color: var(--atomix-white, #ffffff);
2273
+ --atomix-btn-active-bg: var(--atomix-primary-hover, rgb(204, 147.2, 0));
2274
+ --atomix-btn-active-border-color: var(--atomix-primary-hover, rgb(191.25, 138, 0));
2275
+ --atomix-btn-disabled-color: var(--atomix-white, #ffffff);
2276
+ --atomix-btn-disabled-bg: var(--atomix-primary, #ffb800);
2277
+ --atomix-btn-disabled-border-color: var(--atomix-primary, #ffb800);
2271
2278
  }
2272
2279
  .c-btn--secondary {
2273
- --atomix-btn-color: var(--atomix-dark-text-emphasis);
2274
- --atomix-btn-bg: #f3f4f6;
2275
- --atomix-btn-border-color: #f3f4f6;
2276
- --atomix-btn-hover-color: var(--atomix-dark-text-emphasis);
2277
- --atomix-btn-hover-bg: rgb(201.0857142857, 205.5785714286, 214.5642857143);
2278
- --atomix-btn-hover-border-color: rgb(215.0571428571, 218.3857142857, 225.0428571429);
2279
- --atomix-btn-active-color: #ffffff;
2280
- --atomix-btn-active-bg: rgb(187.1142857143, 192.7714285714, 204.0857142857);
2281
- --atomix-btn-active-border-color: rgb(173.1428571429, 179.9642857143, 193.6071428571);
2282
- --atomix-btn-disabled-color: #ffffff;
2283
- --atomix-btn-disabled-bg: #f3f4f6;
2284
- --atomix-btn-disabled-border-color: #f3f4f6;
2280
+ --atomix-btn-color: var(--atomix-dark-text-emphasis, #1f2937);
2281
+ --atomix-btn-bg: var(--atomix-secondary, #f3f4f6);
2282
+ --atomix-btn-border-color: var(--atomix-secondary, #f3f4f6);
2283
+ --atomix-btn-hover-color: var(--atomix-dark-text-emphasis, #1f2937);
2284
+ --atomix-btn-hover-bg: var(--atomix-secondary-hover, rgb(201.0857142857, 205.5785714286, 214.5642857143));
2285
+ --atomix-btn-hover-border-color: var(--atomix-secondary-hover, rgb(215.0571428571, 218.3857142857, 225.0428571429));
2286
+ --atomix-btn-active-color: var(--atomix-white, #ffffff);
2287
+ --atomix-btn-active-bg: var(--atomix-secondary-hover, rgb(187.1142857143, 192.7714285714, 204.0857142857));
2288
+ --atomix-btn-active-border-color: var(--atomix-secondary-hover, rgb(173.1428571429, 179.9642857143, 193.6071428571));
2289
+ --atomix-btn-disabled-color: var(--atomix-white, #ffffff);
2290
+ --atomix-btn-disabled-bg: var(--atomix-secondary, #f3f4f6);
2291
+ --atomix-btn-disabled-border-color: var(--atomix-secondary, #f3f4f6);
2285
2292
  }
2286
2293
  .c-btn--success {
2287
- --atomix-btn-color: #ffffff;
2288
- --atomix-btn-bg: #22c55e;
2289
- --atomix-btn-border-color: #22c55e;
2290
- --atomix-btn-hover-color: #ffffff;
2291
- --atomix-btn-hover-bg: rgb(28.9, 167.45, 79.9);
2292
- --atomix-btn-hover-border-color: rgb(30.6, 177.3, 84.6);
2293
- --atomix-btn-active-color: #ffffff;
2294
- --atomix-btn-active-bg: rgb(27.2, 157.6, 75.2);
2295
- --atomix-btn-active-border-color: rgb(25.5, 147.75, 70.5);
2296
- --atomix-btn-disabled-color: #ffffff;
2297
- --atomix-btn-disabled-bg: #22c55e;
2298
- --atomix-btn-disabled-border-color: #22c55e;
2294
+ --atomix-btn-color: var(--atomix-white, #ffffff);
2295
+ --atomix-btn-bg: var(--atomix-success, #22c55e);
2296
+ --atomix-btn-border-color: var(--atomix-success, #22c55e);
2297
+ --atomix-btn-hover-color: var(--atomix-white, #ffffff);
2298
+ --atomix-btn-hover-bg: var(--atomix-success-hover, rgb(28.9, 167.45, 79.9));
2299
+ --atomix-btn-hover-border-color: var(--atomix-success-hover, rgb(30.6, 177.3, 84.6));
2300
+ --atomix-btn-active-color: var(--atomix-white, #ffffff);
2301
+ --atomix-btn-active-bg: var(--atomix-success-hover, rgb(27.2, 157.6, 75.2));
2302
+ --atomix-btn-active-border-color: var(--atomix-success-hover, rgb(25.5, 147.75, 70.5));
2303
+ --atomix-btn-disabled-color: var(--atomix-white, #ffffff);
2304
+ --atomix-btn-disabled-bg: var(--atomix-success, #22c55e);
2305
+ --atomix-btn-disabled-border-color: var(--atomix-success, #22c55e);
2299
2306
  }
2300
2307
  .c-btn--info {
2301
- --atomix-btn-color: #ffffff;
2302
- --atomix-btn-bg: #3b82f6;
2303
- --atomix-btn-border-color: #3b82f6;
2304
- --atomix-btn-hover-color: #ffffff;
2305
- --atomix-btn-hover-bg: rgb(15.2585365854, 102.1036585366, 243.9914634146);
2306
- --atomix-btn-hover-border-color: rgb(29.8390243902, 111.4024390244, 244.6609756098);
2307
- --atomix-btn-active-color: #ffffff;
2308
- --atomix-btn-active-bg: rgb(10.712195122, 95.2195121951, 233.287804878);
2309
- --atomix-btn-active-border-color: rgb(10.0426829268, 89.2682926829, 218.7073170732);
2310
- --atomix-btn-disabled-color: #ffffff;
2311
- --atomix-btn-disabled-bg: #3b82f6;
2312
- --atomix-btn-disabled-border-color: #3b82f6;
2308
+ --atomix-btn-color: var(--atomix-white, #ffffff);
2309
+ --atomix-btn-bg: var(--atomix-info, #3b82f6);
2310
+ --atomix-btn-border-color: var(--atomix-info, #3b82f6);
2311
+ --atomix-btn-hover-color: var(--atomix-white, #ffffff);
2312
+ --atomix-btn-hover-bg: var(--atomix-info-hover, rgb(15.2585365854, 102.1036585366, 243.9914634146));
2313
+ --atomix-btn-hover-border-color: var(--atomix-info-hover, rgb(29.8390243902, 111.4024390244, 244.6609756098));
2314
+ --atomix-btn-active-color: var(--atomix-white, #ffffff);
2315
+ --atomix-btn-active-bg: var(--atomix-info-hover, rgb(10.712195122, 95.2195121951, 233.287804878));
2316
+ --atomix-btn-active-border-color: var(--atomix-info-hover, rgb(10.0426829268, 89.2682926829, 218.7073170732));
2317
+ --atomix-btn-disabled-color: var(--atomix-white, #ffffff);
2318
+ --atomix-btn-disabled-bg: var(--atomix-info, #3b82f6);
2319
+ --atomix-btn-disabled-border-color: var(--atomix-info, #3b82f6);
2313
2320
  }
2314
2321
  .c-btn--warning {
2315
- --atomix-btn-color: #ffffff;
2316
- --atomix-btn-bg: #eab308;
2317
- --atomix-btn-border-color: #eab308;
2318
- --atomix-btn-hover-color: #ffffff;
2319
- --atomix-btn-hover-bg: rgb(198.9, 152.15, 6.8);
2320
- --atomix-btn-hover-border-color: rgb(210.6, 161.1, 7.2);
2321
- --atomix-btn-active-color: #ffffff;
2322
- --atomix-btn-active-bg: rgb(187.2, 143.2, 6.4);
2323
- --atomix-btn-active-border-color: rgb(175.5, 134.25, 6);
2324
- --atomix-btn-disabled-color: #ffffff;
2325
- --atomix-btn-disabled-bg: #eab308;
2326
- --atomix-btn-disabled-border-color: #eab308;
2322
+ --atomix-btn-color: var(--atomix-white, #ffffff);
2323
+ --atomix-btn-bg: var(--atomix-warning, #eab308);
2324
+ --atomix-btn-border-color: var(--atomix-warning, #eab308);
2325
+ --atomix-btn-hover-color: var(--atomix-white, #ffffff);
2326
+ --atomix-btn-hover-bg: var(--atomix-warning-hover, rgb(198.9, 152.15, 6.8));
2327
+ --atomix-btn-hover-border-color: var(--atomix-warning-hover, rgb(210.6, 161.1, 7.2));
2328
+ --atomix-btn-active-color: var(--atomix-white, #ffffff);
2329
+ --atomix-btn-active-bg: var(--atomix-warning-hover, rgb(187.2, 143.2, 6.4));
2330
+ --atomix-btn-active-border-color: var(--atomix-warning-hover, rgb(175.5, 134.25, 6));
2331
+ --atomix-btn-disabled-color: var(--atomix-white, #ffffff);
2332
+ --atomix-btn-disabled-bg: var(--atomix-warning, #eab308);
2333
+ --atomix-btn-disabled-border-color: var(--atomix-warning, #eab308);
2327
2334
  }
2328
2335
  .c-btn--error {
2329
- --atomix-btn-color: #ffffff;
2330
- --atomix-btn-bg: #ef4444;
2331
- --atomix-btn-border-color: #ef4444;
2332
- --atomix-btn-hover-color: #ffffff;
2333
- --atomix-btn-hover-bg: rgb(235.3704433498, 25.5795566502, 25.5795566502);
2334
- --atomix-btn-hover-border-color: rgb(236.5802955665, 39.7197044335, 39.7197044335);
2335
- --atomix-btn-active-color: #ffffff;
2336
- --atomix-btn-active-bg: rgb(226.242364532, 19.357635468, 19.357635468);
2337
- --atomix-btn-active-border-color: rgb(212.1022167488, 18.1477832512, 18.1477832512);
2338
- --atomix-btn-disabled-color: #ffffff;
2339
- --atomix-btn-disabled-bg: #ef4444;
2340
- --atomix-btn-disabled-border-color: #ef4444;
2336
+ --atomix-btn-color: var(--atomix-white, #ffffff);
2337
+ --atomix-btn-bg: var(--atomix-error, #ef4444);
2338
+ --atomix-btn-border-color: var(--atomix-error, #ef4444);
2339
+ --atomix-btn-hover-color: var(--atomix-white, #ffffff);
2340
+ --atomix-btn-hover-bg: var(--atomix-error-hover, rgb(235.3704433498, 25.5795566502, 25.5795566502));
2341
+ --atomix-btn-hover-border-color: var(--atomix-error-hover, rgb(236.5802955665, 39.7197044335, 39.7197044335));
2342
+ --atomix-btn-active-color: var(--atomix-white, #ffffff);
2343
+ --atomix-btn-active-bg: var(--atomix-error-hover, rgb(226.242364532, 19.357635468, 19.357635468));
2344
+ --atomix-btn-active-border-color: var(--atomix-error-hover, rgb(212.1022167488, 18.1477832512, 18.1477832512));
2345
+ --atomix-btn-disabled-color: var(--atomix-white, #ffffff);
2346
+ --atomix-btn-disabled-bg: var(--atomix-error, #ef4444);
2347
+ --atomix-btn-disabled-border-color: var(--atomix-error, #ef4444);
2341
2348
  }
2342
2349
  .c-btn--light {
2343
- --atomix-btn-color: var(--atomix-dark-text-emphasis);
2344
- --atomix-btn-bg: #f9fafb;
2345
- --atomix-btn-border-color: #f9fafb;
2346
- --atomix-btn-hover-color: var(--atomix-dark-text-emphasis);
2347
- --atomix-btn-hover-bg: rgb(204, 212.5, 221);
2348
- --atomix-btn-hover-border-color: #dbe1e7;
2349
- --atomix-btn-active-color: #ffffff;
2350
- --atomix-btn-active-bg: #bdc8d3;
2351
- --atomix-btn-active-border-color: rgb(174, 187.5, 201);
2352
- --atomix-btn-disabled-color: #ffffff;
2353
- --atomix-btn-disabled-bg: #f9fafb;
2354
- --atomix-btn-disabled-border-color: #f9fafb;
2350
+ --atomix-btn-color: var(--atomix-dark-text-emphasis, #1f2937);
2351
+ --atomix-btn-bg: var(--atomix-light, #f9fafb);
2352
+ --atomix-btn-border-color: var(--atomix-light, #f9fafb);
2353
+ --atomix-btn-hover-color: var(--atomix-dark-text-emphasis, #1f2937);
2354
+ --atomix-btn-hover-bg: var(--atomix-light-hover, rgb(204, 212.5, 221));
2355
+ --atomix-btn-hover-border-color: var(--atomix-light-hover, #dbe1e7);
2356
+ --atomix-btn-active-color: var(--atomix-white, #ffffff);
2357
+ --atomix-btn-active-bg: var(--atomix-light-hover, #bdc8d3);
2358
+ --atomix-btn-active-border-color: var(--atomix-light-hover, rgb(174, 187.5, 201));
2359
+ --atomix-btn-disabled-color: var(--atomix-white, #ffffff);
2360
+ --atomix-btn-disabled-bg: var(--atomix-light, #f9fafb);
2361
+ --atomix-btn-disabled-border-color: var(--atomix-light, #f9fafb);
2355
2362
  }
2356
2363
  .c-btn--dark {
2357
- --atomix-btn-color: #ffffff;
2358
- --atomix-btn-bg: #1f2937;
2359
- --atomix-btn-border-color: #1f2937;
2360
- --atomix-btn-hover-color: #ffffff;
2361
- --atomix-btn-hover-bg: rgb(26.35, 34.85, 46.75);
2362
- --atomix-btn-hover-border-color: rgb(27.9, 36.9, 49.5);
2363
- --atomix-btn-active-color: #ffffff;
2364
- --atomix-btn-active-bg: rgb(24.8, 32.8, 44);
2365
- --atomix-btn-active-border-color: rgb(23.25, 30.75, 41.25);
2366
- --atomix-btn-disabled-color: #ffffff;
2367
- --atomix-btn-disabled-bg: #1f2937;
2368
- --atomix-btn-disabled-border-color: #1f2937;
2364
+ --atomix-btn-color: var(--atomix-white, #ffffff);
2365
+ --atomix-btn-bg: var(--atomix-dark, #1f2937);
2366
+ --atomix-btn-border-color: var(--atomix-dark, #1f2937);
2367
+ --atomix-btn-hover-color: var(--atomix-white, #ffffff);
2368
+ --atomix-btn-hover-bg: var(--atomix-dark-hover, rgb(26.35, 34.85, 46.75));
2369
+ --atomix-btn-hover-border-color: var(--atomix-dark-hover, rgb(27.9, 36.9, 49.5));
2370
+ --atomix-btn-active-color: var(--atomix-white, #ffffff);
2371
+ --atomix-btn-active-bg: var(--atomix-dark-hover, rgb(24.8, 32.8, 44));
2372
+ --atomix-btn-active-border-color: var(--atomix-dark-hover, rgb(23.25, 30.75, 41.25));
2373
+ --atomix-btn-disabled-color: var(--atomix-white, #ffffff);
2374
+ --atomix-btn-disabled-bg: var(--atomix-dark, #1f2937);
2375
+ --atomix-btn-disabled-border-color: var(--atomix-dark, #1f2937);
2369
2376
  }
2370
2377
  .c-btn--outline-primary {
2371
- --atomix-btn-color: var(--atomix-primary);
2378
+ --atomix-btn-color: var(--atomix-primary, #ffb800);
2372
2379
  --atomix-btn-bg: transparent;
2373
- --atomix-btn-border-color: var(--atomix-primary);
2374
- --atomix-btn-hover-color: var(--atomix-light);
2375
- --atomix-btn-hover-bg: var(--atomix-primary);
2376
- --atomix-btn-hover-border-color: var(--atomix-primary);
2377
- --atomix-btn-active-color: var(--atomix-light);
2378
- --atomix-btn-active-bg: var(--atomix-primary);
2379
- --atomix-btn-active-border-color: var(--atomix-primary);
2380
- --atomix-btn-disabled-color: var(--atomix-primary);
2380
+ --atomix-btn-border-color: var(--atomix-primary, #ffb800);
2381
+ --atomix-btn-hover-color: var(--atomix-white, #ffffff);
2382
+ --atomix-btn-hover-bg: var(--atomix-primary-hover, rgb(216.75, 156.4, 0));
2383
+ --atomix-btn-hover-border-color: var(--atomix-primary-hover, rgb(229.5, 165.6, 0));
2384
+ --atomix-btn-active-color: var(--atomix-white, #ffffff);
2385
+ --atomix-btn-active-bg: var(--atomix-primary-hover, rgb(204, 147.2, 0));
2386
+ --atomix-btn-active-border-color: var(--atomix-primary-hover, rgb(191.25, 138, 0));
2387
+ --atomix-btn-disabled-color: var(--atomix-primary, #ffb800);
2381
2388
  --atomix-btn-disabled-bg: transparent;
2382
- --atomix-btn-disabled-border-color: var(--atomix-primary);
2389
+ --atomix-btn-disabled-border-color: var(--atomix-primary, #ffb800);
2383
2390
  }
2384
2391
  .c-btn--outline-secondary {
2385
- --atomix-btn-color: var(--atomix-invert);
2392
+ --atomix-btn-color: var(--atomix-secondary, #f3f4f6);
2386
2393
  --atomix-btn-bg: transparent;
2387
- --atomix-btn-border-color: var(--atomix-secondary);
2388
- --atomix-btn-hover-color: var(--atomix-invert);
2389
- --atomix-btn-hover-bg: var(--atomix-secondary);
2390
- --atomix-btn-hover-border-color: var(--atomix-secondary);
2391
- --atomix-btn-active-color: var(--atomix-invert);
2392
- --atomix-btn-active-bg: var(--atomix-secondary);
2393
- --atomix-btn-active-border-color: var(--atomix-secondary);
2394
- --atomix-btn-disabled-color: var(--atomix-secondary);
2394
+ --atomix-btn-border-color: var(--atomix-secondary, #f3f4f6);
2395
+ --atomix-btn-hover-color: var(--atomix-white, #ffffff);
2396
+ --atomix-btn-hover-bg: var(--atomix-secondary-hover, rgb(201.0857142857, 205.5785714286, 214.5642857143));
2397
+ --atomix-btn-hover-border-color: var(--atomix-secondary-hover, rgb(215.0571428571, 218.3857142857, 225.0428571429));
2398
+ --atomix-btn-active-color: var(--atomix-white, #ffffff);
2399
+ --atomix-btn-active-bg: var(--atomix-secondary-hover, rgb(187.1142857143, 192.7714285714, 204.0857142857));
2400
+ --atomix-btn-active-border-color: var(--atomix-secondary-hover, rgb(173.1428571429, 179.9642857143, 193.6071428571));
2401
+ --atomix-btn-disabled-color: var(--atomix-secondary, #f3f4f6);
2395
2402
  --atomix-btn-disabled-bg: transparent;
2396
- --atomix-btn-disabled-border-color: var(--atomix-secondary);
2403
+ --atomix-btn-disabled-border-color: var(--atomix-secondary, #f3f4f6);
2397
2404
  }
2398
2405
  .c-btn--outline-success {
2399
- --atomix-btn-color: var(--atomix-success);
2406
+ --atomix-btn-color: var(--atomix-success, #22c55e);
2400
2407
  --atomix-btn-bg: transparent;
2401
- --atomix-btn-border-color: var(--atomix-success);
2402
- --atomix-btn-hover-color: var(--atomix-light);
2403
- --atomix-btn-hover-bg: var(--atomix-success);
2404
- --atomix-btn-hover-border-color: var(--atomix-success);
2405
- --atomix-btn-active-color: var(--atomix-light);
2406
- --atomix-btn-active-bg: var(--atomix-success);
2407
- --atomix-btn-active-border-color: var(--atomix-success);
2408
- --atomix-btn-disabled-color: var(--atomix-success);
2408
+ --atomix-btn-border-color: var(--atomix-success, #22c55e);
2409
+ --atomix-btn-hover-color: var(--atomix-white, #ffffff);
2410
+ --atomix-btn-hover-bg: var(--atomix-success-hover, rgb(28.9, 167.45, 79.9));
2411
+ --atomix-btn-hover-border-color: var(--atomix-success-hover, rgb(30.6, 177.3, 84.6));
2412
+ --atomix-btn-active-color: var(--atomix-white, #ffffff);
2413
+ --atomix-btn-active-bg: var(--atomix-success-hover, rgb(27.2, 157.6, 75.2));
2414
+ --atomix-btn-active-border-color: var(--atomix-success-hover, rgb(25.5, 147.75, 70.5));
2415
+ --atomix-btn-disabled-color: var(--atomix-success, #22c55e);
2409
2416
  --atomix-btn-disabled-bg: transparent;
2410
- --atomix-btn-disabled-border-color: var(--atomix-success);
2417
+ --atomix-btn-disabled-border-color: var(--atomix-success, #22c55e);
2411
2418
  }
2412
2419
  .c-btn--outline-info {
2413
- --atomix-btn-color: var(--atomix-info);
2420
+ --atomix-btn-color: var(--atomix-info, #3b82f6);
2414
2421
  --atomix-btn-bg: transparent;
2415
- --atomix-btn-border-color: var(--atomix-info);
2416
- --atomix-btn-hover-color: var(--atomix-light);
2417
- --atomix-btn-hover-bg: var(--atomix-info);
2418
- --atomix-btn-hover-border-color: var(--atomix-info);
2419
- --atomix-btn-active-color: var(--atomix-light);
2420
- --atomix-btn-active-bg: var(--atomix-info);
2421
- --atomix-btn-active-border-color: var(--atomix-info);
2422
- --atomix-btn-disabled-color: var(--atomix-info);
2422
+ --atomix-btn-border-color: var(--atomix-info, #3b82f6);
2423
+ --atomix-btn-hover-color: var(--atomix-white, #ffffff);
2424
+ --atomix-btn-hover-bg: var(--atomix-info-hover, rgb(15.2585365854, 102.1036585366, 243.9914634146));
2425
+ --atomix-btn-hover-border-color: var(--atomix-info-hover, rgb(29.8390243902, 111.4024390244, 244.6609756098));
2426
+ --atomix-btn-active-color: var(--atomix-white, #ffffff);
2427
+ --atomix-btn-active-bg: var(--atomix-info-hover, rgb(10.712195122, 95.2195121951, 233.287804878));
2428
+ --atomix-btn-active-border-color: var(--atomix-info-hover, rgb(10.0426829268, 89.2682926829, 218.7073170732));
2429
+ --atomix-btn-disabled-color: var(--atomix-info, #3b82f6);
2423
2430
  --atomix-btn-disabled-bg: transparent;
2424
- --atomix-btn-disabled-border-color: var(--atomix-info);
2431
+ --atomix-btn-disabled-border-color: var(--atomix-info, #3b82f6);
2425
2432
  }
2426
2433
  .c-btn--outline-warning {
2427
- --atomix-btn-color: var(--atomix-warning);
2434
+ --atomix-btn-color: var(--atomix-warning, #eab308);
2428
2435
  --atomix-btn-bg: transparent;
2429
- --atomix-btn-border-color: var(--atomix-warning);
2430
- --atomix-btn-hover-color: var(--atomix-light);
2431
- --atomix-btn-hover-bg: var(--atomix-warning);
2432
- --atomix-btn-hover-border-color: var(--atomix-warning);
2433
- --atomix-btn-active-color: var(--atomix-light);
2434
- --atomix-btn-active-bg: var(--atomix-warning);
2435
- --atomix-btn-active-border-color: var(--atomix-warning);
2436
- --atomix-btn-disabled-color: var(--atomix-warning);
2436
+ --atomix-btn-border-color: var(--atomix-warning, #eab308);
2437
+ --atomix-btn-hover-color: var(--atomix-white, #ffffff);
2438
+ --atomix-btn-hover-bg: var(--atomix-warning-hover, rgb(198.9, 152.15, 6.8));
2439
+ --atomix-btn-hover-border-color: var(--atomix-warning-hover, rgb(210.6, 161.1, 7.2));
2440
+ --atomix-btn-active-color: var(--atomix-white, #ffffff);
2441
+ --atomix-btn-active-bg: var(--atomix-warning-hover, rgb(187.2, 143.2, 6.4));
2442
+ --atomix-btn-active-border-color: var(--atomix-warning-hover, rgb(175.5, 134.25, 6));
2443
+ --atomix-btn-disabled-color: var(--atomix-warning, #eab308);
2437
2444
  --atomix-btn-disabled-bg: transparent;
2438
- --atomix-btn-disabled-border-color: var(--atomix-warning);
2445
+ --atomix-btn-disabled-border-color: var(--atomix-warning, #eab308);
2439
2446
  }
2440
2447
  .c-btn--outline-error {
2441
- --atomix-btn-color: var(--atomix-error);
2448
+ --atomix-btn-color: var(--atomix-error, #ef4444);
2442
2449
  --atomix-btn-bg: transparent;
2443
- --atomix-btn-border-color: var(--atomix-error);
2444
- --atomix-btn-hover-color: var(--atomix-light);
2445
- --atomix-btn-hover-bg: var(--atomix-error);
2446
- --atomix-btn-hover-border-color: var(--atomix-error);
2447
- --atomix-btn-active-color: var(--atomix-light);
2448
- --atomix-btn-active-bg: var(--atomix-error);
2449
- --atomix-btn-active-border-color: var(--atomix-error);
2450
- --atomix-btn-disabled-color: var(--atomix-error);
2450
+ --atomix-btn-border-color: var(--atomix-error, #ef4444);
2451
+ --atomix-btn-hover-color: var(--atomix-white, #ffffff);
2452
+ --atomix-btn-hover-bg: var(--atomix-error-hover, rgb(235.3704433498, 25.5795566502, 25.5795566502));
2453
+ --atomix-btn-hover-border-color: var(--atomix-error-hover, rgb(236.5802955665, 39.7197044335, 39.7197044335));
2454
+ --atomix-btn-active-color: var(--atomix-white, #ffffff);
2455
+ --atomix-btn-active-bg: var(--atomix-error-hover, rgb(226.242364532, 19.357635468, 19.357635468));
2456
+ --atomix-btn-active-border-color: var(--atomix-error-hover, rgb(212.1022167488, 18.1477832512, 18.1477832512));
2457
+ --atomix-btn-disabled-color: var(--atomix-error, #ef4444);
2451
2458
  --atomix-btn-disabled-bg: transparent;
2452
- --atomix-btn-disabled-border-color: var(--atomix-error);
2459
+ --atomix-btn-disabled-border-color: var(--atomix-error, #ef4444);
2453
2460
  }
2454
2461
  .c-btn--outline-light {
2455
- --atomix-btn-color: var(--atomix-invert);
2462
+ --atomix-btn-color: var(--atomix-light, #f9fafb);
2456
2463
  --atomix-btn-bg: transparent;
2457
- --atomix-btn-border-color: var(--atomix-light);
2458
- --atomix-btn-hover-color: var(--atomix-invert);
2459
- --atomix-btn-hover-bg: var(--atomix-secondary);
2460
- --atomix-btn-hover-border-color: var(--atomix-light);
2461
- --atomix-btn-active-color: var(--atomix-invert);
2462
- --atomix-btn-active-bg: var(--atomix-light);
2463
- --atomix-btn-active-border-color: var(--atomix-light);
2464
- --atomix-btn-disabled-color: var(--atomix-light);
2464
+ --atomix-btn-border-color: var(--atomix-light, #f9fafb);
2465
+ --atomix-btn-hover-color: var(--atomix-white, #ffffff);
2466
+ --atomix-btn-hover-bg: var(--atomix-light-hover, rgb(204, 212.5, 221));
2467
+ --atomix-btn-hover-border-color: var(--atomix-light-hover, #dbe1e7);
2468
+ --atomix-btn-active-color: var(--atomix-white, #ffffff);
2469
+ --atomix-btn-active-bg: var(--atomix-light-hover, #bdc8d3);
2470
+ --atomix-btn-active-border-color: var(--atomix-light-hover, rgb(174, 187.5, 201));
2471
+ --atomix-btn-disabled-color: var(--atomix-light, #f9fafb);
2465
2472
  --atomix-btn-disabled-bg: transparent;
2466
- --atomix-btn-disabled-border-color: var(--atomix-light);
2473
+ --atomix-btn-disabled-border-color: var(--atomix-light, #f9fafb);
2467
2474
  }
2468
2475
  .c-btn--outline-dark {
2469
- --atomix-btn-color: var(--atomix-invert);
2476
+ --atomix-btn-color: var(--atomix-dark, #1f2937);
2470
2477
  --atomix-btn-bg: transparent;
2471
- --atomix-btn-border-color: var(--atomix-dark);
2472
- --atomix-btn-hover-color: var(--atomix-invert);
2473
- --atomix-btn-hover-bg: var(--atomix-secondary);
2474
- --atomix-btn-hover-border-color: var(--atomix-dark);
2475
- --atomix-btn-active-color: var(--atomix-invert);
2476
- --atomix-btn-active-bg: var(--atomix-dark);
2477
- --atomix-btn-active-border-color: var(--atomix-dark);
2478
- --atomix-btn-disabled-color: var(--atomix-dark);
2478
+ --atomix-btn-border-color: var(--atomix-dark, #1f2937);
2479
+ --atomix-btn-hover-color: var(--atomix-white, #ffffff);
2480
+ --atomix-btn-hover-bg: var(--atomix-dark-hover, rgb(26.35, 34.85, 46.75));
2481
+ --atomix-btn-hover-border-color: var(--atomix-dark-hover, rgb(27.9, 36.9, 49.5));
2482
+ --atomix-btn-active-color: var(--atomix-white, #ffffff);
2483
+ --atomix-btn-active-bg: var(--atomix-dark-hover, rgb(24.8, 32.8, 44));
2484
+ --atomix-btn-active-border-color: var(--atomix-dark-hover, rgb(23.25, 30.75, 41.25));
2485
+ --atomix-btn-disabled-color: var(--atomix-dark, #1f2937);
2479
2486
  --atomix-btn-disabled-bg: transparent;
2480
- --atomix-btn-disabled-border-color: var(--atomix-dark);
2487
+ --atomix-btn-disabled-border-color: var(--atomix-dark, #1f2937);
2481
2488
  }
2482
2489
  .c-btn--lg {
2483
2490
  --atomix-btn-padding-y: 1rem;
@@ -8775,6 +8782,80 @@ a, a:hover {
8775
8782
  .c-pagination__icon-skip-forward::before {
8776
8783
  content: "⏭";
8777
8784
  }
8785
+ .c-pagination__search {
8786
+ margin-top: 1rem;
8787
+ display: flex;
8788
+ flex-direction: column;
8789
+ align-items: center;
8790
+ gap: 0.5rem;
8791
+ }
8792
+ .c-pagination__search-wrapper {
8793
+ display: flex;
8794
+ align-items: center;
8795
+ gap: 0.5rem;
8796
+ }
8797
+ .c-pagination__search-label {
8798
+ display: flex;
8799
+ align-items: center;
8800
+ gap: 0.5rem;
8801
+ }
8802
+ .c-pagination__search-label-text {
8803
+ font-size: var(--atomix-pagination-font-size);
8804
+ color: var(--atomix-pagination-color);
8805
+ white-space: nowrap;
8806
+ }
8807
+ .c-pagination__search-input {
8808
+ width: 80px;
8809
+ padding: var(--atomix-pagination-padding-y) var(--atomix-pagination-padding-x);
8810
+ font-size: var(--atomix-pagination-font-size);
8811
+ text-align: center;
8812
+ border: 1px solid var(--atomix-pagination-color);
8813
+ border-radius: var(--atomix-pagination-border-radius);
8814
+ background-color: var(--atomix-pagination-bg);
8815
+ color: var(--atomix-pagination-color);
8816
+ transition: all 0.2s ease-in-out;
8817
+ }
8818
+ .c-pagination__search-input:focus {
8819
+ outline: none;
8820
+ border-color: var(--atomix-pagination-focus-border-color);
8821
+ border-width: var(--atomix-pagination-focus-border-width);
8822
+ }
8823
+ .c-pagination__search-input.is-error {
8824
+ border-color: var(--atomix-error-color, #dc3545);
8825
+ background-color: var(--atomix-error-bg-subtle, rgba(220, 53, 69, 0.1));
8826
+ }
8827
+ .c-pagination__search-button {
8828
+ display: flex;
8829
+ align-items: center;
8830
+ justify-content: center;
8831
+ width: var(--atomix-pagination-size);
8832
+ height: var(--atomix-pagination-size);
8833
+ padding: var(--atomix-pagination-padding-y) var(--atomix-pagination-padding-x);
8834
+ background-color: var(--atomix-pagination-bg);
8835
+ border: 1px solid var(--atomix-pagination-color);
8836
+ border-radius: var(--atomix-pagination-border-radius);
8837
+ color: var(--atomix-pagination-color);
8838
+ cursor: pointer;
8839
+ transition: all 0.2s ease-in-out;
8840
+ }
8841
+ .c-pagination__search-button:hover {
8842
+ --atomix-pagination-color: var(--atomix-pagination-hover-color);
8843
+ --atomix-pagination-bg: var(--atomix-pagination-hover-bg);
8844
+ }
8845
+ .c-pagination__search-button:focus-visible {
8846
+ outline: none;
8847
+ border-color: var(--atomix-pagination-focus-border-color);
8848
+ border-width: var(--atomix-pagination-focus-border-width);
8849
+ }
8850
+ .c-pagination__search-button .c-icon {
8851
+ color: inherit;
8852
+ }
8853
+ .c-pagination__search-error {
8854
+ font-size: 0.75rem;
8855
+ color: var(--atomix-error-color, #dc3545);
8856
+ text-align: center;
8857
+ margin-top: 0.25rem;
8858
+ }
8778
8859
  .c-popover {
8779
8860
  --atomix-popover-width: 18.75rem;
8780
8861
  --atomix-popover-padding-x: 1rem;