@ardium-ui/ui 5.0.0-alpha.7 → 5.0.0-alpha.71

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 (293) hide show
  1. package/fesm2022/ardium-ui-ui.mjs +4707 -2272
  2. package/fesm2022/ardium-ui-ui.mjs.map +1 -1
  3. package/lib/_internal/boolean-component.d.ts +13 -1
  4. package/lib/_internal/disablable-component.d.ts +2 -1
  5. package/lib/_internal/focusable-component.d.ts +2 -1
  6. package/lib/_internal/form-field-component.d.ts +3 -2
  7. package/lib/_internal/item-storages/dropdown-item-storage.d.ts +19 -19
  8. package/lib/_internal/item-storages/simple-item-storage.d.ts +15 -12
  9. package/lib/_internal/item-storages/simplest-item-storage.d.ts +1 -1
  10. package/lib/_internal/ngmodel-component.d.ts +5 -8
  11. package/lib/_internal/selectable-list-component.d.ts +6 -6
  12. package/lib/_internal/utils/date.utils.d.ts +16 -0
  13. package/lib/badge/badge.directive.d.ts +3 -2
  14. package/lib/breakpoints/breakpoint.service.d.ts +12 -0
  15. package/lib/breakpoints/breakpoint.utils.d.ts +7 -0
  16. package/lib/breakpoints/breakpoints.d.ts +13 -0
  17. package/lib/breakpoints/index.d.ts +2 -0
  18. package/lib/buttons/_button-base.d.ts +12 -8
  19. package/lib/buttons/_button-base.defaults.d.ts +3 -2
  20. package/lib/buttons/button/button.component.d.ts +5 -5
  21. package/lib/buttons/button/button.defaults.d.ts +0 -2
  22. package/lib/buttons/button/button.directive.d.ts +17 -0
  23. package/lib/buttons/button/button.module.d.ts +3 -2
  24. package/lib/buttons/button/index.d.ts +1 -0
  25. package/lib/buttons/fab/fab.component.d.ts +3 -1
  26. package/lib/buttons/icon-button/icon-button.component.d.ts +6 -4
  27. package/lib/buttons/icon-button/icon-button.defaults.d.ts +2 -1
  28. package/lib/calendar/abstract-calendar.d.ts +128 -0
  29. package/lib/calendar/calendar.component.d.ts +8 -96
  30. package/lib/calendar/calendar.defaults.d.ts +16 -1
  31. package/lib/calendar/calendar.internal-directives.d.ts +24 -8
  32. package/lib/calendar/calendar.internal-types.d.ts +1 -0
  33. package/lib/calendar/calendar.module.d.ts +4 -9
  34. package/lib/calendar/calendar.types.d.ts +21 -5
  35. package/lib/calendar/index.d.ts +3 -0
  36. package/lib/calendar/range-calendar.component.d.ts +16 -0
  37. package/lib/calendar/range-calendar.directives.d.ts +51 -0
  38. package/lib/calendar/range-calendar.module.d.ts +10 -0
  39. package/lib/calendar/views/calendar-views.module.d.ts +13 -0
  40. package/lib/calendar/views/days-view/days-view.component.d.ts +20 -2
  41. package/lib/calendar/views/days-view/days-view.helpers.d.ts +2 -2
  42. package/lib/calendar/views/months-view/months-view.component.d.ts +15 -3
  43. package/lib/calendar/views/years-view/years-view.component.d.ts +16 -3
  44. package/lib/checkbox/checkbox.component.d.ts +5 -2
  45. package/lib/checkbox/checkbox.types.d.ts +2 -0
  46. package/lib/checkbox-list/checkbox-list.component.d.ts +9 -7
  47. package/lib/checkbox-list/checkbox-list.directives.d.ts +7 -0
  48. package/lib/checkbox-list/checkbox-list.module.d.ts +1 -1
  49. package/lib/chip/chip.component.d.ts +2 -1
  50. package/lib/chip/deletable-chip/deletable-chip.component.d.ts +2 -1
  51. package/lib/chip/selectable-chip/selectable-chip.component.d.ts +5 -2
  52. package/lib/dialog/dialog.component.d.ts +13 -8
  53. package/lib/dialog/dialog.types.d.ts +1 -0
  54. package/lib/divider/divider.component.d.ts +2 -3
  55. package/lib/divider/divider.defaults.d.ts +5 -0
  56. package/lib/divider/divider.directive.d.ts +18 -0
  57. package/lib/divider/divider.module.d.ts +3 -2
  58. package/lib/divider/divider.types.d.ts +5 -0
  59. package/lib/divider/index.d.ts +2 -0
  60. package/lib/dropdown-panel/dropdown-panel.component.d.ts +2 -1
  61. package/lib/dropdown-panel/dropdown-panel.types.d.ts +1 -1
  62. package/lib/file-inputs/file-input/file-input.component.d.ts +2 -1
  63. package/lib/file-inputs/file-input-base.d.ts +4 -5
  64. package/lib/form-field/auto-error/auto-error.component.d.ts +19 -0
  65. package/lib/form-field/auto-error/auto-error.provider.d.ts +7 -0
  66. package/lib/form-field/error/error.directive.d.ts +3 -2
  67. package/lib/form-field/form-field-base.d.ts +5 -2
  68. package/lib/form-field/form-field-child.token.d.ts +5 -5
  69. package/lib/form-field/form-field-native-inputs.d.ts +6 -11
  70. package/lib/form-field/form-field.component.d.ts +1 -1
  71. package/lib/form-field/form-field.defaults.d.ts +1 -0
  72. package/lib/form-field/form-field.module.d.ts +5 -4
  73. package/lib/form-field/hint/hint.directive.d.ts +3 -2
  74. package/lib/form-field/hint-error/hint-error.directive.d.ts +3 -2
  75. package/lib/form-field/horizontal-form-field.component.d.ts +1 -1
  76. package/lib/form-field/index.d.ts +4 -0
  77. package/lib/form-field/label/label.component.d.ts +3 -2
  78. package/lib/form-field-frame/form-field-frame.component.d.ts +5 -3
  79. package/lib/grid/grid.component.d.ts +51 -0
  80. package/lib/grid/grid.defaults.d.ts +16 -0
  81. package/lib/grid/grid.module.d.ts +7 -0
  82. package/lib/grid/grid.types.d.ts +38 -0
  83. package/lib/grid/grid.utils.d.ts +11 -0
  84. package/lib/grid/index.d.ts +4 -0
  85. package/lib/icon/icon.component.d.ts +2 -1
  86. package/lib/inputs/_simple-input-base.d.ts +6 -3
  87. package/lib/inputs/autocomplete-input/autocomplete-input.component.d.ts +5 -4
  88. package/lib/inputs/date-input/abstract-date-input.d.ts +112 -0
  89. package/lib/inputs/date-input/date-input.component.d.ts +19 -81
  90. package/lib/inputs/date-input/date-input.defaults.d.ts +21 -3
  91. package/lib/inputs/date-input/{date-input.directive.d.ts → date-input.directives.d.ts} +2 -2
  92. package/lib/inputs/date-input/date-input.module.d.ts +5 -4
  93. package/lib/inputs/date-input/date-input.serializers.d.ts +4 -2
  94. package/lib/inputs/date-input/date-input.types.d.ts +5 -4
  95. package/lib/inputs/date-input/date-range-input.component.d.ts +30 -0
  96. package/lib/inputs/date-input/date-range-input.directives.d.ts +82 -0
  97. package/lib/inputs/date-input/date-range-input.module.d.ts +17 -0
  98. package/lib/inputs/date-input/index.d.ts +7 -1
  99. package/lib/inputs/date-input/multipage-date-range-input.component.d.ts +45 -0
  100. package/lib/inputs/date-input/multipage-date-range-input.directives.d.ts +82 -0
  101. package/lib/inputs/date-input/multipage-date-range-input.module.d.ts +17 -0
  102. package/lib/inputs/digit-input/digit-input.component.d.ts +4 -3
  103. package/lib/inputs/hex-input/hex-input.component.d.ts +4 -3
  104. package/lib/inputs/input-utils.d.ts +13 -2
  105. package/lib/inputs/number-input/number-input.component.d.ts +20 -12
  106. package/lib/inputs/number-input/number-input.defaults.d.ts +6 -0
  107. package/lib/inputs/number-input/number-input.directives.d.ts +12 -0
  108. package/lib/inputs/number-input/number-input.module.d.ts +1 -1
  109. package/lib/inputs/number-input/number-input.types.d.ts +6 -0
  110. package/lib/inputs/password-input/password-input.component.d.ts +5 -3
  111. package/lib/kbd/kbd.component.d.ts +2 -1
  112. package/lib/kbd-shortcut/kbd-shortcut.component.d.ts +2 -1
  113. package/lib/modal/modal.component.d.ts +9 -6
  114. package/lib/modal/modal.defaults.d.ts +2 -0
  115. package/lib/option/option.component.d.ts +2 -1
  116. package/lib/progress-bar/progress-bar.component.d.ts +4 -3
  117. package/lib/progress-circle/progress-circle.component.d.ts +5 -4
  118. package/lib/search-functions.d.ts +1 -1
  119. package/lib/segment/segment.component.d.ts +6 -5
  120. package/lib/select/select.component.d.ts +40 -30
  121. package/lib/select/select.defaults.d.ts +10 -2
  122. package/lib/select/select.directive.d.ts +6 -0
  123. package/lib/select/select.module.d.ts +1 -1
  124. package/lib/select/select.types.d.ts +6 -2
  125. package/lib/select/select.utils.d.ts +2 -0
  126. package/lib/slide-toggle/slide-toggle.component.d.ts +2 -0
  127. package/lib/slider/abstract-slider.d.ts +35 -29
  128. package/lib/slider/index.d.ts +1 -0
  129. package/lib/slider/range-slider/range-slider.component.d.ts +13 -10
  130. package/lib/slider/range-slider/range-slider.types.d.ts +6 -0
  131. package/lib/slider/slider.component.d.ts +5 -4
  132. package/lib/slider/slider.types.d.ts +3 -3
  133. package/lib/star/rating-display/rating-display.component.d.ts +2 -1
  134. package/lib/star/rating-input/rating-input.component.d.ts +5 -3
  135. package/lib/star/rating-input/rating-input.defaults.d.ts +2 -2
  136. package/lib/star/star-button/star-button.component.d.ts +4 -1
  137. package/lib/star/star-button/star-button.types.d.ts +1 -0
  138. package/lib/tabber/index.d.ts +2 -1
  139. package/lib/tabber/tab/tab.component.d.ts +16 -8
  140. package/lib/tabber/tabber.component.d.ts +25 -9
  141. package/lib/tabber/tabber.defaults.d.ts +2 -0
  142. package/lib/tabber/tabber.directives.d.ts +9 -0
  143. package/lib/tabber/tabber.module.d.ts +3 -2
  144. package/lib/tabber/tabber.types.d.ts +5 -0
  145. package/lib/table/table.component.d.ts +16 -15
  146. package/lib/table-pagination/table-pagination.component.d.ts +4 -3
  147. package/lib/text-list/text-list.component.d.ts +2 -1
  148. package/lib/types/alignment.types.d.ts +7 -1
  149. package/lib/types/item-storage.types.d.ts +17 -18
  150. package/package.json +3 -2
  151. package/prebuilt-themes/default/badge.css +37 -15
  152. package/prebuilt-themes/default/badge.css.map +1 -1
  153. package/prebuilt-themes/default/buttons/button.css +74 -58
  154. package/prebuilt-themes/default/buttons/button.css.map +1 -1
  155. package/prebuilt-themes/default/buttons/fab.css +64 -51
  156. package/prebuilt-themes/default/buttons/fab.css.map +1 -1
  157. package/prebuilt-themes/default/buttons/icon-button.css +50 -44
  158. package/prebuilt-themes/default/buttons/icon-button.css.map +1 -1
  159. package/prebuilt-themes/default/calendar.css +131 -55
  160. package/prebuilt-themes/default/calendar.css.map +1 -1
  161. package/prebuilt-themes/default/card.css +56 -24
  162. package/prebuilt-themes/default/card.css.map +1 -1
  163. package/prebuilt-themes/default/checkbox-list.css +48 -22
  164. package/prebuilt-themes/default/checkbox-list.css.map +1 -1
  165. package/prebuilt-themes/default/checkbox.css +31 -58
  166. package/prebuilt-themes/default/checkbox.css.map +1 -1
  167. package/prebuilt-themes/default/chips.css +75 -43
  168. package/prebuilt-themes/default/chips.css.map +1 -1
  169. package/prebuilt-themes/default/color-display.css +15 -8
  170. package/prebuilt-themes/default/color-display.css.map +1 -1
  171. package/prebuilt-themes/default/core.css +21 -1
  172. package/prebuilt-themes/default/core.css.map +1 -1
  173. package/prebuilt-themes/default/dialog.css +7 -2
  174. package/prebuilt-themes/default/dialog.css.map +1 -1
  175. package/prebuilt-themes/default/divider.css +82 -6
  176. package/prebuilt-themes/default/divider.css.map +1 -1
  177. package/prebuilt-themes/default/dropdown-panel.css +16 -8
  178. package/prebuilt-themes/default/dropdown-panel.css.map +1 -1
  179. package/prebuilt-themes/default/file-drop-area.css +81 -35
  180. package/prebuilt-themes/default/file-drop-area.css.map +1 -1
  181. package/prebuilt-themes/default/form-field-frame.css +18 -14
  182. package/prebuilt-themes/default/form-field-frame.css.map +1 -1
  183. package/prebuilt-themes/default/form-field.css +62 -29
  184. package/prebuilt-themes/default/form-field.css.map +1 -1
  185. package/prebuilt-themes/default/inputs/autocomplete-input.css +79 -28
  186. package/prebuilt-themes/default/inputs/autocomplete-input.css.map +1 -1
  187. package/prebuilt-themes/default/inputs/color-input.css +5 -44
  188. package/prebuilt-themes/default/inputs/color-input.css.map +1 -1
  189. package/prebuilt-themes/default/inputs/date-input.css +97 -25
  190. package/prebuilt-themes/default/inputs/date-input.css.map +1 -1
  191. package/prebuilt-themes/default/inputs/digit-input.css +31 -19
  192. package/prebuilt-themes/default/inputs/digit-input.css.map +1 -1
  193. package/prebuilt-themes/default/inputs/file-input.css +117 -62
  194. package/prebuilt-themes/default/inputs/file-input.css.map +1 -1
  195. package/prebuilt-themes/default/inputs/hex-input.css +55 -23
  196. package/prebuilt-themes/default/inputs/hex-input.css.map +1 -1
  197. package/prebuilt-themes/default/inputs/input.css +47 -18
  198. package/prebuilt-themes/default/inputs/input.css.map +1 -1
  199. package/prebuilt-themes/default/inputs/number-input.css +83 -33
  200. package/prebuilt-themes/default/inputs/number-input.css.map +1 -1
  201. package/prebuilt-themes/default/inputs/password-input.css +74 -25
  202. package/prebuilt-themes/default/inputs/password-input.css.map +1 -1
  203. package/prebuilt-themes/default/kbd-shortcut.css +8 -4
  204. package/prebuilt-themes/default/kbd-shortcut.css.map +1 -1
  205. package/prebuilt-themes/default/kbd.css +19 -9
  206. package/prebuilt-themes/default/kbd.css.map +1 -1
  207. package/prebuilt-themes/default/modal.css +46 -22
  208. package/prebuilt-themes/default/modal.css.map +1 -1
  209. package/prebuilt-themes/default/progress-circle.css +13 -7
  210. package/prebuilt-themes/default/progress-circle.css.map +1 -1
  211. package/prebuilt-themes/default/radio.css +46 -28
  212. package/prebuilt-themes/default/radio.css.map +1 -1
  213. package/prebuilt-themes/default/segment.css +71 -61
  214. package/prebuilt-themes/default/segment.css.map +1 -1
  215. package/prebuilt-themes/default/select.css +78 -44
  216. package/prebuilt-themes/default/select.css.map +1 -1
  217. package/prebuilt-themes/default/slide-toggle.css +88 -37
  218. package/prebuilt-themes/default/slide-toggle.css.map +1 -1
  219. package/prebuilt-themes/default/slider.css +93 -52
  220. package/prebuilt-themes/default/slider.css.map +1 -1
  221. package/prebuilt-themes/default/snackbar.css +29 -16
  222. package/prebuilt-themes/default/snackbar.css.map +1 -1
  223. package/prebuilt-themes/default/spinner.css +9 -3
  224. package/prebuilt-themes/default/spinner.css.map +1 -1
  225. package/prebuilt-themes/default/stars.css +42 -20
  226. package/prebuilt-themes/default/stars.css.map +1 -1
  227. package/prebuilt-themes/default/tabber.css +53 -17
  228. package/prebuilt-themes/default/tabber.css.map +1 -1
  229. package/prebuilt-themes/default/table-pagination.css +21 -9
  230. package/prebuilt-themes/default/table-pagination.css.map +1 -1
  231. package/prebuilt-themes/default/table.css +93 -69
  232. package/prebuilt-themes/default/table.css.map +1 -1
  233. package/public-api.d.ts +2 -1
  234. package/themes/_variables.scss +2 -1
  235. package/themes/default/_mixins.scss +5 -5
  236. package/themes/default/badge.scss +48 -15
  237. package/themes/default/buttons/_button-mixins.scss +43 -33
  238. package/themes/default/buttons/button.scss +54 -29
  239. package/themes/default/buttons/fab.scss +47 -26
  240. package/themes/default/buttons/icon-button.scss +40 -17
  241. package/themes/default/calendar.scss +148 -58
  242. package/themes/default/card.scss +68 -24
  243. package/themes/default/checkbox-list.scss +47 -21
  244. package/themes/default/checkbox.scss +30 -59
  245. package/themes/default/chips.scss +71 -40
  246. package/themes/default/color-display.scss +18 -8
  247. package/themes/default/core.scss +24 -1
  248. package/themes/default/dialog.scss +9 -2
  249. package/themes/default/divider.scss +106 -6
  250. package/themes/default/dropdown-panel.scss +21 -8
  251. package/themes/default/file-drop-area.scss +92 -35
  252. package/themes/default/form-field-frame.scss +23 -15
  253. package/themes/default/form-field.scss +64 -28
  254. package/themes/default/inputs/_shared.scss +52 -12
  255. package/themes/default/inputs/autocomplete-input.scss +83 -14
  256. package/themes/default/inputs/color-input.scss +2 -2
  257. package/themes/default/inputs/date-input.scss +74 -6
  258. package/themes/default/inputs/digit-input.scss +42 -20
  259. package/themes/default/inputs/file-input.scss +100 -23
  260. package/themes/default/inputs/hex-input.scss +59 -9
  261. package/themes/default/inputs/input.scss +51 -4
  262. package/themes/default/inputs/number-input.scss +94 -24
  263. package/themes/default/inputs/password-input.scss +84 -15
  264. package/themes/default/kbd-shortcut.scss +10 -4
  265. package/themes/default/kbd.scss +26 -9
  266. package/themes/default/modal.scss +56 -22
  267. package/themes/default/progress-circle.scss +16 -10
  268. package/themes/default/radio.scss +47 -26
  269. package/themes/default/segment.scss +77 -67
  270. package/themes/default/select.scss +98 -42
  271. package/themes/default/slide-toggle.scss +134 -59
  272. package/themes/default/slider.scss +102 -65
  273. package/themes/default/snackbar.scss +32 -14
  274. package/themes/default/spinner.scss +11 -3
  275. package/themes/default/stars.scss +45 -16
  276. package/themes/default/tabber.scss +54 -14
  277. package/themes/default/table-pagination.scss +24 -9
  278. package/themes/default/table.scss +104 -70
  279. package/lib/statebox/index.d.ts +0 -4
  280. package/lib/statebox/statebox.component.d.ts +0 -26
  281. package/lib/statebox/statebox.defaults.d.ts +0 -10
  282. package/lib/statebox/statebox.module.d.ts +0 -8
  283. package/lib/statebox/statebox.types.d.ts +0 -26
  284. package/lib/tabber/tab/tab.defaults.d.ts +0 -6
  285. package/prebuilt-themes/default/calendar-OLD.css +0 -294
  286. package/prebuilt-themes/default/calendar-OLD.css.map +0 -1
  287. package/prebuilt-themes/default/inputs/search-bar.css +0 -118
  288. package/prebuilt-themes/default/inputs/search-bar.css.map +0 -1
  289. package/prebuilt-themes/default/statebox.css +0 -235
  290. package/prebuilt-themes/default/statebox.css.map +0 -1
  291. package/themes/default/calendar-OLD.scss +0 -183
  292. package/themes/default/inputs/search-bar.scss +0 -19
  293. package/themes/default/statebox.scss +0 -109
package/themes/default/inputs/autocomplete-input.scss CHANGED
@@ -3,44 +3,113 @@
3
3
  @use '../clear-button' as CB;
4
4
  @use '../../variables' as ARD;
5
5
 
6
+ // the variables are commented out intentionally
7
+ // read more in docs/dev/css-variables.md
8
+ :root {
9
+ // --ard-autocomplete-input-height: ;
10
+ // --ard-autocomplete-input-height-compact: ;
11
+ --ard-autocomplete-input-gap: 0.625rem;
12
+ // --ard-autocomplete-input-font-size: ;
13
+ // --ard-autocomplete-input-font-size-compact: ;
14
+ --ard-autocomplete-input-line-height: 1.25;
15
+ --ard-autocomplete-input-line-height-compact: 1;
16
+ --ard-autocomplete-input-font-weight: 400;
17
+ // --ard-autocomplete-input-padding-top: ;
18
+ // --ard-autocomplete-input-padding-right: ;
19
+ // --ard-autocomplete-input-padding-bottom: ;
20
+ // --ard-autocomplete-input-padding-left: ;
21
+ // --ard-autocomplete-input-padding-top-compact: ;
22
+ // --ard-autocomplete-input-padding-right-compact: ;
23
+ // --ard-autocomplete-input-padding-bottom-compact: ;
24
+ // --ard-autocomplete-input-padding-left-compact: ;
25
+ // --ard-autocomplete-input-color: ;
26
+ // --ard-autocomplete-input-placeholder-color: ;
27
+ --ard-autocomplete-input-placeholder-opacity: 60%;
28
+
29
+ --ard-autocomplete-input-min-width: 10rem;
30
+ --ard-autocomplete-input-max-width: 100%;
31
+ --ard-autocomplete-input-autocomplete-opacity: 37.5%;
32
+ --ard-autocomplete-input-dropdown-padding: 0;
33
+ --ard-autocomplete-input-dropdown-max-height: 15rem;
34
+ --ard-autocomplete-input-dropdown-gap: 0;
35
+ --ard-autocomplete-input-option-padding: 0.375rem 0.625rem;
36
+ --ard-autocomplete-input-option-padding-compact: 0.25rem 0.5rem;
37
+ --ard-autocomplete-input-font-size: 1rem;
38
+ --ard-autocomplete-input-font-size-compact: 0.875rem;
39
+ // --ard-autocomplete-input-highlighted-background: ;
40
+ --ard-autocomplete-input-highlighted-font-weight: 400;
41
+ // --ard-autocomplete-input-selected-background: ;
42
+ --ard-autocomplete-input-selected-font-weight: 500;
43
+ --ard-autocomplete-input-disabled-opacity: 50%;
44
+ }
45
+
6
46
  .ard-autocomplete-input {
7
- @include inputMixin.genericInput();
8
- padding: 0 0.375rem;
9
- min-width: 10rem;
10
- max-width: 100%;
47
+ @include inputMixin.genericInput(
48
+ var(--ard-autocomplete-input-height, var(--ard-form-field-height, 2.3125rem)),
49
+ var(--ard-autocomplete-input-height-compact, var(--ard-form-field-height-compact, 1.6875rem)),
50
+ var(--ard-autocomplete-input-gap, 0.625rem),
51
+ var(--ard-autocomplete-input-font-size, var(--ard-form-field-font-size, 1rem)),
52
+ var(--ard-autocomplete-input-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem)),
53
+ var(--ard-autocomplete-input-line-height, 1.25),
54
+ var(--ard-autocomplete-input-line-height-compact, 1),
55
+ var(--ard-autocomplete-input-font-weight, 400),
56
+ var(--ard-autocomplete-input-padding-top, var(--ard-form-field-padding-top, 0)),
57
+ var(--ard-autocomplete-input-padding-right, var(--ard-form-field-padding-right, 0.375rem)),
58
+ var(--ard-autocomplete-input-padding-bottom, var(--ard-form-field-padding-bottom, 0)),
59
+ var(--ard-autocomplete-input-padding-left, var(--ard-form-field-padding-left, 0.375rem)),
60
+ var(--ard-autocomplete-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0)),
61
+ var(--ard-autocomplete-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem)),
62
+ var(--ard-autocomplete-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0)),
63
+ var(--ard-autocomplete-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem)),
64
+ var(--ard-autocomplete-input-color, #{ARD.$text}),
65
+ var(--ard-autocomplete-input-placeholder-color, #{ARD.$text}),
66
+ var(--ard-autocomplete-input-placeholder-opacity, 60%)
67
+ );
68
+ min-width: var(--ard-autocomplete-input-min-width, 10rem);
69
+ max-width: var(--ard-autocomplete-input-max-width, 100%);
11
70
 
12
71
  @include CB.clearButton();
13
72
 
14
73
  .ard-autocomplete {
15
- opacity: 37.5%;
74
+ display: flex;
75
+ align-items: center;
76
+ opacity: var(--ard-autocomplete-input-autocomplete-opacity, 37.5%);
16
77
  }
17
78
  }
18
79
  //! suggestions
19
80
  .ard-input-suggestions-panel {
81
+ padding: var(--ard-autocomplete-input-dropdown-padding, 0);
82
+ display: flex;
83
+ flex-direction: column;
84
+ gap: var(--ard-autocomplete-input-dropdown-gap, 0);
85
+ max-height: var(--ard-autocomplete-input-dropdown-max-height, 15rem);
86
+ overflow-y: auto;
87
+
20
88
  .ard-option {
21
- padding: 0.375rem 0.625rem;
22
- font-size: 1rem;
23
- color: ARD.$text2;
89
+ padding: var(--ard-autocomplete-input-option-padding, 0.375rem 0.625rem);
90
+ font-size: var(--ard-autocomplete-input-font-size, 1rem);
91
+ color: var(--ard-autocomplete-input-color, #{ARD.$text2});
24
92
  cursor: pointer;
25
93
 
26
94
  &.ard-option-highlighted {
27
- background: ARD.$darken-overlay-light;
95
+ background: var(--ard-autocomplete-input-highlighted-background, #{ARD.$darken-overlay-light});
96
+ font-weight: var(--ard-autocomplete-input-highlighted-font-weight, 400);
28
97
  }
29
98
 
30
99
  &.ard-option-selected {
31
- font-weight: 500;
32
- background: ARD.$darken-overlay-medium;
100
+ background: var(--ard-autocomplete-input-selected-background, #{ARD.$darken-overlay-medium});
101
+ font-weight: var(--ard-autocomplete-input-selected-font-weight, 500);
33
102
  }
34
103
 
35
104
  &.ard-option-disabled {
36
105
  pointer-events: none;
37
- opacity: 50%;
106
+ opacity: var(--ard-autocomplete-input-disabled-opacity, 50%);
38
107
  }
39
108
  }
40
109
  .ard-compact {
41
110
  .ard-option {
42
- padding: 0.25rem 0.5rem;
43
- font-size: 0.9rem;
111
+ padding: var(--ard-autocomplete-input-option-padding-compact, 0.25rem 0.5rem);
112
+ font-size: var(--ard-autocomplete-input-font-size-compact, 0.875rem);
44
113
  }
45
114
  }
46
115
  }
package/themes/default/inputs/color-input.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  @use '../clear-button' as CB;
4
4
 
5
5
  .ard-color-input {
6
- @include inputMixin.genericInput();
6
+ // @include inputMixin.genericInput();
7
7
  padding: 0 0.375rem;
8
8
  min-width: 10rem;
9
9
  max-width: 100%;
@@ -15,7 +15,7 @@
15
15
  pointer-events: none;
16
16
 
17
17
  input {
18
- font-family: monospace;
18
+ font-family: var(--ard-font-family-mono);
19
19
  user-select: none;
20
20
  }
21
21
  }
package/themes/default/inputs/date-input.scss CHANGED
@@ -1,20 +1,71 @@
1
1
  @use './shared' as S;
2
2
  @use '../../variables' as ARD;
3
3
 
4
- ard-date-input .ard-date-input {
5
- @include S.genericInput();
6
- padding-left: 0.375rem;
4
+ // the variables are commented out intentionally
5
+ // read more in docs/dev/css-variables.md
6
+ :root {
7
+ // --ard-date-input-height: ;
8
+ // --ard-date-input-height-compact: ;
9
+ --ard-date-input-gap: 0.625rem;
10
+ // --ard-date-input-font-size: ;
11
+ // --ard-date-input-font-size-compact: ;
12
+ --ard-date-input-line-height: 1.25;
13
+ --ard-date-input-line-height-compact: 1;
14
+ --ard-date-input-font-weight: 400;
15
+ // --ard-date-input-padding-top: ;
16
+ // --ard-date-input-padding-right: ;
17
+ // --ard-date-input-padding-bottom: ;
18
+ // --ard-date-input-padding-left: ;
19
+ // --ard-date-input-padding-top-compact: ;
20
+ // --ard-date-input-padding-right-compact: ;
21
+ // --ard-date-input-padding-bottom-compact: ;
22
+ // --ard-date-input-padding-left-compact: ;
23
+ // --ard-date-input-color: ;
24
+ // --ard-date-input-placeholder-color: ;
25
+ --ard-date-input-placeholder-opacity: 60%;
26
+
27
+ --ard-date-input-input-padding: 0 2.625rem 0 0.375rem;
28
+ --ard-date-input-multipage-gap: 0;
29
+ }
30
+
31
+ ard-date-input .ard-date-input,
32
+ ard-date-range-input .ard-date-range-input,
33
+ ard-multipage-date-range-input .ard-multipage-date-range-input {
34
+ @include S.genericInput(
35
+ var(--ard-date-input-height, var(--ard-form-field-height, 2.3125rem)),
36
+ var(--ard-date-input-height-compact, var(--ard-form-field-height-compact, 1.6875rem)),
37
+ var(--ard-date-input-gap, 0.625rem),
38
+ var(--ard-date-input-font-size, var(--ard-form-field-font-size, 1rem)),
39
+ var(--ard-date-input-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem)),
40
+ var(--ard-date-input-line-height, 1.25),
41
+ var(--ard-date-input-line-height-compact, 1),
42
+ var(--ard-date-input-font-weight, 400),
43
+ var(--ard-date-input-padding-top, var(--ard-form-field-padding-top, 0)),
44
+ var(--ard-date-input-padding-right, var(--ard-form-field-padding-right, 0.375rem)),
45
+ var(--ard-date-input-padding-bottom, var(--ard-form-field-padding-bottom, 0)),
46
+ var(--ard-date-input-padding-left, var(--ard-form-field-padding-left, 0.375rem)),
47
+ var(--ard-date-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0)),
48
+ var(--ard-date-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem)),
49
+ var(--ard-date-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0)),
50
+ var(--ard-date-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem)),
51
+ var(--ard-date-input-color, #{ARD.$text}),
52
+ var(--ard-date-input-placeholder-color, #{ARD.$text}),
53
+ var(--ard-date-input-placeholder-opacity, 60%)
54
+ );
55
+ display: grid;
56
+ grid-template-columns: 1fr max-content;
7
57
 
8
58
  .ard-date-input__value-container {
9
- flex-grow: 1;
10
- position: unset;
59
+ position: relative;
11
60
  }
12
61
  .ard-date-input__placeholder {
13
62
  position: absolute;
63
+ padding: 0;
14
64
  }
15
65
  .ard-date-input__input-container {
16
66
  position: absolute;
17
67
  inset: 0;
68
+ padding: 0;
18
69
 
19
70
  &.ard-date-input__input-container-hidden {
20
71
  position: absolute;
@@ -26,7 +77,24 @@ ard-date-input .ard-date-input {
26
77
  box-sizing: border-box;
27
78
  width: 100%;
28
79
  height: 100%;
29
- padding: 0 2.625rem 0 0.375rem;
80
+ padding: var(--ard-date-input-input-padding, 0 2.625rem 0 0.375rem);
30
81
  }
31
82
  }
83
+ .ard-date-input__value {
84
+ display: flex;
85
+ align-items: center;
86
+ padding: 0;
87
+ }
88
+ }
89
+
90
+ ard-days-view {
91
+ .ard-calendar__header-button {
92
+ font-size: var(--ard-button-font-size, 0.875rem);
93
+ font-weight: var(--ard-button-font-weight, 500);
94
+ }
95
+ }
96
+ .ard-date-input__multipage-wrapper {
97
+ display: flex;
98
+ flex-direction: row;
99
+ gap: var(--ard-date-input-multipage-gap, 0);
32
100
  }
package/themes/default/inputs/digit-input.scss CHANGED
@@ -2,10 +2,31 @@
2
2
  @use '../../variables' as ARD;
3
3
  @use '../mixins' as defaultMixins;
4
4
 
5
+ // the variables are commented out intentionally
6
+ // read more in docs/dev/css-variables.md
7
+ :root {
8
+ // --ard-digit-input-font-family: ;
9
+ --ard-digit-input-font-weight: 500;
10
+ // --ard-digit-input-color: ;
11
+ --ard-digit-input-gap: 0.375em;
12
+ --ard-digit-input-size: 2.0625em;
13
+ // --ard-digit-input-caret-color: ;
14
+ // --ard-digit-input-placeholder-color: ;
15
+ --ard-digit-input-placeholder-opacity: 60%;
16
+ --ard-digit-input-transition-duration: 150ms;
17
+ // --ard-digit-input-rectangle-height: ;
18
+ --ard-digit-input-rectangle-font-size: 1.25em;
19
+ --ard-digit-input-success-background-color: transparent;
20
+ // --ard-digit-input-success-border-color: ;
21
+ // --ard-digit-input-error-background-color: ;
22
+ // --ard-digit-input-error-border-color: ;
23
+ --ard-digit-input-disabled-opacity: 50%;
24
+ }
25
+
5
26
  ard-digit-input {
6
- font-family: 'Roboto', sans-serif;
7
- font-weight: 500;
8
- color: ARD.$text;
27
+ font-family: var(--ard-digit-input-font-family, var(--ard-font-family));
28
+ font-weight: var(--ard-digit-input-font-weight, 500);
29
+ color: var(--ard-digit-input-color, #{ARD.$text});
9
30
  }
10
31
 
11
32
  .ard-digit-input,
@@ -18,34 +39,34 @@ ard-digit-input {
18
39
  .ard-digit-input {
19
40
  @include defaultMixins.formAppearances();
20
41
  display: flex;
21
- gap: 0.375em;
42
+ gap: var(--ard-digit-input-gap, 0.375em);
22
43
 
23
44
  .ard-digit-input__item {
24
45
  height: max-content;
25
46
  display: flex;
26
- height: 2.0625em;
47
+ height: var(--ard-digit-input-size, 2.0625em);
27
48
  box-sizing: border-box;
28
49
 
29
50
  &.ard-digit-input__item-with-input {
30
- width: 2.0625em;
51
+ width: var(--ard-digit-input-size, 2.0625em);
31
52
  }
32
53
  .ard-digit-input__input {
33
54
  width: 100%;
34
55
  height: 100%;
35
56
  box-sizing: border-box;
36
57
  text-align: center;
37
- color: ARD.$text;
38
- caret-color: ARD.$text3;
58
+ color: inherit;
59
+ caret-color: var(--ard-digit-input-caret-color, #{ARD.$text3});
39
60
  background: var(--ard-appearance-background);
40
61
  border: var(--ard-appearance-border);
41
62
  border-radius: var(--ard-variant-border-radius);
42
63
  transition:
43
- border-color 0.15s ARD.$timing-fn,
44
- background-color 0.15s ARD.$timing-fn;
64
+ border-color var(--ard-digit-input-transition-duration, 0.15s) ARD.$timing-fn,
65
+ background-color var(--ard-digit-input-transition-duration, 0.15s) ARD.$timing-fn;
45
66
 
46
67
  &::placeholder {
47
- color: ARD.$text3;
48
- opacity: 60%;
68
+ color: var(--ard-digit-input-placeholder-color, #{ARD.$text3});
69
+ opacity: var(--ard-digit-input-placeholder-opacity, 60%);
49
70
  }
50
71
 
51
72
  &:not(.ard-digit-input__input-empty) {
@@ -61,33 +82,34 @@ ard-digit-input {
61
82
  }
62
83
  &.ard-shape-square {
63
84
  .ard-digit-input__item {
64
- height: 2.0625em;
85
+ height: var(--ard-digit-input-size, 2.0625em);
65
86
  }
66
87
  }
67
88
  &.ard-shape-rectangle {
68
89
  .ard-digit-input__item {
69
- height: 2.0625em * 1.3;
90
+ height: var(--ard-digit-input-rectangle-height, calc(var(--ard-digit-input-size, 2.0625em) * 1.3));
70
91
 
71
92
  .ard-digit-input__input {
72
- font-size: 1.2em;
93
+ font-size: var(--ard-digit-input-rectangle-font-size, 1.25em);
73
94
  }
74
95
  }
75
96
  }
76
97
 
77
98
  &.ard-is-success {
78
99
  .ard-digit-input__item .ard-digit-input__input {
79
- border-color: ARD.$success500;
100
+ background-color: var(--ard-digit-input-success-background-color, transparent);
101
+ border-color: var(--ard-digit-input-success-border-color, #{ARD.$success500});
80
102
  }
81
103
  }
82
104
  &.ard-has-error {
83
105
  .ard-digit-input__item .ard-digit-input__input {
84
- background-color: ARD.$danger50;
85
- border-color: ARD.$danger500;
106
+ background-color: var(--ard-digit-input-error-background-color, #{ARD.$danger50});
107
+ border-color: var(--ard-digit-input-error-border-color, #{ARD.$danger500});
86
108
  }
87
109
  }
88
110
 
89
111
  &.ard-variant-rounded {
90
- --ard-variant-border-radius: 0.25em;
112
+ --ard-variant-border-radius: var(--ard-digit-input-border-radius, var(--ard-rounded-corner-radius, 0.375rem));
91
113
  }
92
114
  &.ard-variant-pill {
93
115
  --ard-variant-border-radius: 9999px;
@@ -98,7 +120,7 @@ ard-digit-input {
98
120
  }
99
121
  .ard-disabled {
100
122
  > .ard-digit-input {
101
- opacity: 50%;
123
+ opacity: var(--ard-digit-input-disabled-opacity, 50%);
102
124
  pointer-events: none;
103
125
  }
104
126
  }
package/themes/default/inputs/file-input.scss CHANGED
@@ -4,18 +4,85 @@
4
4
  @use '../coloring' as CM;
5
5
  @use '../../variables' as ARD;
6
6
 
7
+ // the variables are commented out intentionally
8
+ // read more in docs/dev/css-variables.md
9
+ :root {
10
+ // --ard-file-input-height: ;
11
+ // --ard-file-input-height-compact: ;
12
+ --ard-file-input-gap: 0.625rem;
13
+ // --ard-file-input-font-size: ;
14
+ // --ard-file-input-font-size-compact: ;
15
+ --ard-file-input-line-height: 1.25;
16
+ --ard-file-input-line-height-compact: 1;
17
+ --ard-file-input-font-weight: 400;
18
+ // --ard-file-input-padding-top: ;
19
+ // --ard-file-input-padding-right: ;
20
+ // --ard-file-input-padding-bottom: ;
21
+ // --ard-file-input-padding-left: ;
22
+ // --ard-file-input-padding-top-compact: ;
23
+ // --ard-file-input-padding-right-compact: ;
24
+ // --ard-file-input-padding-bottom-compact: ;
25
+ // --ard-file-input-padding-left-compact: ;
26
+ // --ard-file-input-color: ;
27
+ // --ard-file-input-placeholder-color: ;
28
+ --ard-file-input-placeholder-opacity: 60%;
29
+
30
+ --ard-file-input-min-width: 10rem;
31
+ --ard-file-input-max-width: 100%;
32
+ --ard-file-input-gap: 0.375rem;
33
+ --ard-file-input-dragover-outline-width: 2px;
34
+ --ard-file-input-dragover-outline-style: solid;
35
+ --ard-file-input-browse-button-height: calc(100% - 0.25rem);
36
+ --ard-file-input-browse-button-width: unset;
37
+ --ard-file-input-browse-button-margin: 0.125rem;
38
+ --ard-file-input-browse-button-aspect-ratio: 1;
39
+ --ard-file-input-browse-button-border: none;
40
+ --ard-file-input-browse-button-border-radius: 9999px;
41
+ --ard-file-input-browse-button-background: none;
42
+ --ard-file-input-browse-button-padding: 0;
43
+ // --ard-file-input-browse-button-color: ;
44
+ // --ard-file-input-browse-button-color-error: ;
45
+ --ard-file-input-browse-button-overlay-offset: 0rem;
46
+ // --ard-file-input-browse-button-overlay-color: ;
47
+ --ard-file-input-browse-button-overlay-hover-opacity: 4%;
48
+ --ard-file-input-browse-button-overlay-focus-opacity: 0;
49
+ --ard-file-input-browse-button-overlay-active-opacity: 12%;
50
+ --ard-file-input-browse-button-overlay-focus-visible-opacity: 16%;
51
+ --ard-file-input-file-name-font-weight: 500;
52
+ --ard-file-input-file-ext-font-weight: 500;
53
+ }
54
+
7
55
  .ard-file-input-form-field-frame {
8
56
  .ard-form-field-overlay {
9
57
  display: none;
10
58
  }
11
59
  }
12
60
  .ard-file-input {
61
+ @include inputMixin.genericInput(
62
+ var(--ard-file-input-height, var(--ard-form-field-height, 2.3125rem)),
63
+ var(--ard-file-input-height-compact, var(--ard-form-field-height-compact, 1.6875rem)),
64
+ var(--ard-file-input-gap, 0.625rem),
65
+ var(--ard-file-input-font-size, var(--ard-form-field-font-size, 1rem)),
66
+ var(--ard-file-input-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem)),
67
+ var(--ard-file-input-line-height, 1.25),
68
+ var(--ard-file-input-line-height-compact, 1),
69
+ var(--ard-file-input-font-weight, 400),
70
+ var(--ard-file-input-padding-top, var(--ard-form-field-padding-top, 0)),
71
+ var(--ard-file-input-padding-right, var(--ard-form-field-padding-right, 0.375rem)),
72
+ var(--ard-file-input-padding-bottom, var(--ard-form-field-padding-bottom, 0)),
73
+ var(--ard-file-input-padding-left, var(--ard-form-field-padding-left, 0.375rem)),
74
+ var(--ard-file-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0)),
75
+ var(--ard-file-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem)),
76
+ var(--ard-file-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0)),
77
+ var(--ard-file-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem)),
78
+ var(--ard-file-input-color, #{ARD.$text}),
79
+ var(--ard-file-input-placeholder-color, #{ARD.$text}),
80
+ var(--ard-file-input-placeholder-opacity, 60%)
81
+ );
13
82
  @include CM.typeColors();
14
- @include inputMixin.genericInput();
15
- padding: 0 0.375rem;
16
- min-width: 10rem;
17
- max-width: 100%;
18
- gap: 0.375rem;
83
+ min-width: var(--ard-file-input-min-width, 10rem);
84
+ max-width: var(--ard-file-input-max-width, 100%);
85
+ gap: var(--ard-file-input-gap, 0.375rem);
19
86
  cursor: default;
20
87
  border-radius: var(--ard-variant-border-radius);
21
88
 
@@ -25,23 +92,27 @@
25
92
  }
26
93
 
27
94
  &.ard-state-dragover {
28
- outline: 2px solid var(--ard-cmpcl--content-light);
95
+ outline: var(--ard-file-input-dragover-outline-width, 2px) var(--ard-file-input-dragover-outline-style, solid)
96
+ var(--ard-cmpcl--content-light);
29
97
  }
30
98
 
31
99
  .ard-file-input__value {
32
- font-size: 92%;
33
100
  overflow: hidden;
34
101
  text-overflow: ellipsis;
35
- max-height: 1.25rem;
102
+ display: flex;
103
+ align-items: center;
36
104
  }
37
105
  .ard-browse-button {
38
106
  cursor: pointer;
39
- height: calc(100% - 0.25rem);
40
- margin: 0.125rem;
41
- aspect-ratio: 1;
42
- border: none;
43
- background: none;
44
- padding: 0;
107
+ height: var(--ard-file-input-browse-button-height, calc(100% - 0.25rem));
108
+ width: var(--ard-file-input-browse-button-width, unset);
109
+ margin: var(--ard-file-input-browse-button-margin, 0.125rem);
110
+ aspect-ratio: var(--ard-file-input-browse-button-aspect-ratio, 1);
111
+ border: var(--ard-file-input-browse-button-border, none);
112
+ border-radius: var(--ard-file-input-browse-button-border-radius, 9999px);
113
+ background: var(--ard-file-input-browse-button-background, none);
114
+ padding: var(--ard-file-input-browse-button-padding, 0);
115
+ color: var(--ard-file-input-browse-button-color, #{ARD.$text});
45
116
  position: relative;
46
117
  display: flex;
47
118
  justify-content: center;
@@ -49,28 +120,28 @@
49
120
  outline: none;
50
121
 
51
122
  .ard-focus-overlay {
52
- @include defaultMixins.focus-overlay(0.25rem);
53
- background: ARD.$overlay;
54
- border-radius: 9999px;
123
+ @include defaultMixins.focus-overlay(var(--ard-file-input-browse-button-overlay-offset, 0.25rem));
124
+ background: var(--ard-file-input-browse-button-overlay-color, #{ARD.$overlay});
125
+ border-radius: var(--ard-file-input-browse-button-border-radius, 9999px);
55
126
  }
56
127
  &:hover {
57
128
  .ard-focus-overlay {
58
- opacity: 4%;
129
+ opacity: var(--ard-file-input-browse-button-overlay-hover-opacity, 4%);
59
130
  }
60
131
  }
61
132
  &:focus {
62
133
  .ard-focus-overlay {
63
- opacity: 8%;
134
+ opacity: var(--ard-file-input-browse-button-overlay-focus-opacity, 8%);
64
135
  }
65
136
  }
66
137
  &:active {
67
138
  .ard-focus-overlay {
68
- opacity: 12%;
139
+ opacity: var(--ard-file-input-browse-button-overlay-active-opacity, 12%);
69
140
  }
70
141
  }
71
142
  &:focus-visible {
72
143
  .ard-focus-overlay {
73
- opacity: 16%;
144
+ opacity: var(--ard-file-input-browse-button-overlay-focus-visible-opacity, 16%);
74
145
  }
75
146
  }
76
147
  }
@@ -92,7 +163,13 @@
92
163
  .ard-file-input__full-file-name {
93
164
  display: grid;
94
165
  grid-template-columns: 1fr max-content;
95
- font-weight: 500;
166
+
167
+ .ard-file-input__file-name {
168
+ font-weight: var(--ard-file-input-file-name-font-weight, 500);
169
+ }
170
+ .ard-file-input__file-ext {
171
+ font-weight: var(--ard-file-input-file-ext-font-weight, 500);
172
+ }
96
173
  }
97
174
  }
98
175
  ard-file-input .ard-form-field-content-container {
@@ -102,7 +179,7 @@ ard-file-input .ard-form-field-frame {
102
179
  &.ard-has-error .ard-file-input {
103
180
  .ard-file-input__value,
104
181
  .ard-browse-button {
105
- color: ARD.$danger700;
182
+ color: var(--ard-file-input-browse-button-color-error, #{ARD.$danger700});
106
183
  }
107
184
  }
108
185
  }
package/themes/default/inputs/hex-input.scss CHANGED
@@ -3,25 +3,75 @@
3
3
  @use '../clear-button' as CB;
4
4
  @use '../../variables' as ARD;
5
5
 
6
+ // the variables are commented out intentionally
7
+ // read more in docs/dev/css-variables.md
8
+ :root {
9
+ // --ard-hex-input-height: ;
10
+ // --ard-hex-input-height-compact: ;
11
+ --ard-hex-input-gap: 0.625rem;
12
+ // --ard-hex-input-font-size: ;
13
+ // --ard-hex-input-font-size-compact: ;
14
+ --ard-hex-input-line-height: 1.25;
15
+ --ard-hex-input-line-height-compact: 1;
16
+ --ard-hex-input-font-weight: 400;
17
+ // --ard-hex-input-padding-top: ;
18
+ // --ard-hex-input-padding-right: ;
19
+ // --ard-hex-input-padding-bottom: ;
20
+ // --ard-hex-input-padding-left: ;
21
+ // --ard-hex-input-padding-top-compact: ;
22
+ // --ard-hex-input-padding-right-compact: ;
23
+ // --ard-hex-input-padding-bottom-compact: ;
24
+ // --ard-hex-input-padding-left-compact: ;
25
+ // --ard-hex-input-color: ;
26
+ // --ard-hex-input-placeholder-color: ;
27
+ --ard-hex-input-placeholder-opacity: 60%;
28
+
29
+ --ard-hex-input-min-width: 10rem;
30
+ --ard-hex-input-max-width: 100%;
31
+ // --ard-hex-input-hash-color: ;
32
+ --ard-hex-input-hash-opacity: 70%;
33
+ }
34
+
6
35
  .ard-hex-input {
7
- @include inputMixin.genericInput();
8
- padding: 0 0.375rem;
9
- min-width: 10rem;
10
- max-width: 100%;
36
+ @include inputMixin.genericInput(
37
+ var(--ard-hex-input-height, var(--ard-form-field-height, 2.3125rem)),
38
+ var(--ard-hex-input-height-compact, var(--ard-form-field-height-compact, 1.6875rem)),
39
+ var(--ard-hex-input-gap, 0.625rem),
40
+ var(--ard-hex-input-font-size, var(--ard-form-field-font-size, 1rem)),
41
+ var(--ard-hex-input-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem)),
42
+ var(--ard-hex-input-line-height, 1.25),
43
+ var(--ard-hex-input-line-height-compact, 1),
44
+ var(--ard-hex-input-font-weight, 400),
45
+ var(--ard-hex-input-padding-top, var(--ard-form-field-padding-top, 0)),
46
+ var(--ard-hex-input-padding-right, var(--ard-form-field-padding-right, 0.375rem)),
47
+ var(--ard-hex-input-padding-bottom, var(--ard-form-field-padding-bottom, 0)),
48
+ var(--ard-hex-input-padding-left, var(--ard-form-field-padding-left, 0.375rem)),
49
+ var(--ard-hex-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0)),
50
+ var(--ard-hex-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem)),
51
+ var(--ard-hex-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0)),
52
+ var(--ard-hex-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem)),
53
+ var(--ard-hex-input-color, #{ARD.$text}),
54
+ var(--ard-hex-input-placeholder-color, #{ARD.$text}),
55
+ var(--ard-hex-input-placeholder-opacity, 60%)
56
+ );
57
+ min-width: var(--ard-hex-input-min-width, 10rem);
58
+ max-width: var(--ard-hex-input-max-width, 100%);
11
59
 
12
60
  @include CB.clearButton();
13
61
 
14
62
  .ard-input-container {
15
63
  input {
16
- font-family: monospace;
64
+ font-family: var(--ard-font-family-mono);
17
65
  }
18
66
  }
19
67
 
20
68
  .ard-hash-container {
21
- margin-right: -0.5rem;
22
- color: ARD.$text3;
23
- opacity: 70%;
69
+ color: var(--ard-hex-input-hash-color, #{ARD.$text});
70
+ opacity: var(--ard-hex-input-hash-opacity, 70%);
24
71
  user-select: none;
25
- font-family: monospace;
72
+ font-family: var(--ard-font-family-mono);
73
+ display: flex;
74
+ align-items: center;
75
+ height: 100%;
26
76
  }
27
77
  }