@koobiq/components 18.1.0 → 18.2.0

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 (310) hide show
  1. package/accordion/README.md +0 -0
  2. package/accordion/_accordion-theme.scss +62 -0
  3. package/accordion/accordion-content.d.ts +6 -0
  4. package/accordion/accordion-header.d.ts +6 -0
  5. package/accordion/accordion-item.d.ts +6 -0
  6. package/accordion/accordion-tokens.scss +45 -0
  7. package/accordion/accordion-trigger.component.d.ts +11 -0
  8. package/accordion/accordion-trigger.component.scss +79 -0
  9. package/accordion/accordion.component.d.ts +20 -0
  10. package/accordion/accordion.component.scss +66 -0
  11. package/accordion/accordion.module.d.ts +12 -0
  12. package/accordion/index.d.ts +1 -0
  13. package/accordion/public-api.d.ts +6 -0
  14. package/alert/_alert-theme.scss +3 -3
  15. package/alert/alert-tokens.scss +3 -3
  16. package/alert/alert.component.scss +40 -39
  17. package/autocomplete/_autocomplete-theme.scss +2 -2
  18. package/autocomplete/autocomplete.scss +6 -6
  19. package/badge/_badge-theme.scss +5 -5
  20. package/badge/badge.component.scss +16 -16
  21. package/button/_button-base.scss +6 -6
  22. package/button/_button-theme.scss +11 -11
  23. package/button/button.dropdown-trigger.directive.d.ts +14 -0
  24. package/button/button.module.d.ts +2 -1
  25. package/button/button.scss +8 -8
  26. package/button/public-api.d.ts +1 -0
  27. package/button-toggle/_button-toggle-theme.scss +5 -5
  28. package/button-toggle/button-toggle.scss +11 -11
  29. package/checkbox/_checkbox-theme.scss +22 -22
  30. package/checkbox/checkbox-tokens.scss +2 -2
  31. package/checkbox/checkbox.scss +16 -16
  32. package/code-block/_code-block-theme.scss +15 -15
  33. package/code-block/actionbar.component.scss +4 -4
  34. package/code-block/code-block.scss +18 -19
  35. package/core/forms/_forms-theme.scss +2 -2
  36. package/core/forms/_forms.scss +12 -12
  37. package/core/option/_optgroup-theme.scss +2 -2
  38. package/core/option/_option-action-theme.scss +6 -6
  39. package/core/option/_option-theme.scss +5 -5
  40. package/core/option/action.scss +2 -2
  41. package/core/option/optgroup.scss +1 -1
  42. package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +8 -8
  43. package/core/selection/pseudo-checkbox/pseudo-checkbox-tokens.scss +2 -2
  44. package/core/selection/pseudo-checkbox/pseudo-checkbox.scss +8 -8
  45. package/core/styles/common/_groups.scss +4 -4
  46. package/core/styles/common/_list.scss +19 -19
  47. package/core/styles/common/_popup.scss +3 -3
  48. package/core/styles/common/_select.scss +13 -13
  49. package/core/styles/common/_tokens.scss +8 -19
  50. package/core/styles/theming/_scrollbar-theme.scss +11 -11
  51. package/core/styles/visual/_layout.scss +13 -13
  52. package/datepicker/_datepicker-theme.scss +15 -15
  53. package/datepicker/calendar-body.scss +2 -2
  54. package/datepicker/calendar-header.scss +3 -3
  55. package/datepicker/calendar.scss +6 -6
  56. package/datepicker/datepicker-content.scss +4 -4
  57. package/datepicker/datepicker-toggle.scss +2 -2
  58. package/divider/_divider-theme.scss +1 -1
  59. package/divider/divider.scss +6 -6
  60. package/dl/_dl-theme.scss +2 -2
  61. package/dl/dl.scss +4 -4
  62. package/dropdown/_dropdown-theme.scss +7 -7
  63. package/dropdown/dropdown-item.scss +2 -2
  64. package/dropdown/dropdown.scss +5 -5
  65. package/empty-state/_empty-state-theme.scss +4 -4
  66. package/empty-state/empty-state.scss +18 -20
  67. package/esm2022/accordion/accordion-content.mjs +19 -0
  68. package/esm2022/accordion/accordion-header.mjs +19 -0
  69. package/esm2022/accordion/accordion-item.mjs +25 -0
  70. package/esm2022/accordion/accordion-trigger.component.mjs +60 -0
  71. package/esm2022/accordion/accordion.component.mjs +40 -0
  72. package/esm2022/accordion/accordion.module.mjs +44 -0
  73. package/esm2022/accordion/index.mjs +2 -0
  74. package/esm2022/accordion/koobiq-components-accordion.mjs +5 -0
  75. package/esm2022/accordion/public-api.mjs +7 -0
  76. package/esm2022/alert/alert.component.mjs +2 -2
  77. package/esm2022/autocomplete/autocomplete.component.mjs +2 -2
  78. package/esm2022/badge/badge.component.mjs +2 -2
  79. package/esm2022/button/button.component.mjs +2 -2
  80. package/esm2022/button/button.dropdown-trigger.directive.mjs +28 -0
  81. package/esm2022/button/button.module.mjs +10 -5
  82. package/esm2022/button/public-api.mjs +2 -1
  83. package/esm2022/button-toggle/button-toggle.component.mjs +2 -2
  84. package/esm2022/checkbox/checkbox.mjs +2 -2
  85. package/esm2022/code-block/actionbar.component.mjs +2 -2
  86. package/esm2022/code-block/code-block.component.mjs +2 -2
  87. package/esm2022/core/option/action.mjs +2 -2
  88. package/esm2022/core/option/optgroup.mjs +2 -2
  89. package/esm2022/core/option/option.mjs +2 -2
  90. package/esm2022/core/selection/pseudo-checkbox/pseudo-checkbox.mjs +2 -2
  91. package/esm2022/core/version.mjs +2 -2
  92. package/esm2022/datepicker/calendar-body.component.mjs +2 -2
  93. package/esm2022/datepicker/calendar-header.component.mjs +2 -2
  94. package/esm2022/datepicker/calendar.component.mjs +2 -2
  95. package/esm2022/datepicker/datepicker-toggle.component.mjs +2 -2
  96. package/esm2022/datepicker/datepicker.component.mjs +3 -3
  97. package/esm2022/divider/divider.component.mjs +2 -2
  98. package/esm2022/dl/dl.component.mjs +2 -2
  99. package/esm2022/dropdown/dropdown-item.component.mjs +2 -2
  100. package/esm2022/dropdown/dropdown.component.mjs +3 -3
  101. package/esm2022/empty-state/empty-state.component.mjs +2 -2
  102. package/esm2022/file-upload/multiple-file-upload.component.mjs +2 -2
  103. package/esm2022/file-upload/single-file-upload.component.mjs +2 -2
  104. package/esm2022/form-field/cleaner.mjs +2 -2
  105. package/esm2022/form-field/form-field.mjs +2 -2
  106. package/esm2022/form-field/hint.mjs +2 -2
  107. package/esm2022/form-field/password-hint.mjs +2 -2
  108. package/esm2022/form-field/password-toggle.mjs +2 -2
  109. package/esm2022/form-field/stepper.mjs +2 -2
  110. package/esm2022/icon/icon-button.component.mjs +2 -2
  111. package/esm2022/icon/icon-item.component.mjs +2 -2
  112. package/esm2022/icon/icon.component.mjs +2 -2
  113. package/esm2022/list/list-selection.component.mjs +2 -2
  114. package/esm2022/list/list.component.mjs +2 -2
  115. package/esm2022/loader-overlay/loader-overlay.component.mjs +2 -2
  116. package/esm2022/markdown/markdown.component.mjs +2 -2
  117. package/esm2022/modal/modal.component.mjs +5 -7
  118. package/esm2022/navbar/navbar-item.component.mjs +2 -2
  119. package/esm2022/navbar/navbar.component.mjs +2 -2
  120. package/esm2022/navbar/vertical-navbar.component.mjs +2 -2
  121. package/esm2022/popover/popover-confirm.component.mjs +3 -3
  122. package/esm2022/popover/popover.component.mjs +3 -3
  123. package/esm2022/progress-bar/progress-bar.component.mjs +2 -2
  124. package/esm2022/progress-spinner/progress-spinner.component.mjs +2 -2
  125. package/esm2022/radio/radio.component.mjs +2 -2
  126. package/esm2022/risk-level/risk-level.component.mjs +2 -2
  127. package/esm2022/scrollbar/scrollbar.component.mjs +3 -3
  128. package/esm2022/select/select.component.mjs +3 -3
  129. package/esm2022/sidepanel/sidepanel-container.component.mjs +3 -3
  130. package/esm2022/splitter/splitter.component.mjs +3 -3
  131. package/esm2022/table/table.component.mjs +2 -2
  132. package/esm2022/tabs/tab-group.component.mjs +2 -2
  133. package/esm2022/tabs/tab-header.component.mjs +2 -2
  134. package/esm2022/tabs/tab-nav-bar/tab-nav-bar.mjs +2 -2
  135. package/esm2022/tags/tag-list.component.mjs +2 -2
  136. package/esm2022/tags/tag.component.mjs +2 -2
  137. package/esm2022/timezone/timezone-option.component.mjs +2 -2
  138. package/esm2022/timezone/timezone-select.component.mjs +2 -2
  139. package/esm2022/toast/toast-container.component.mjs +2 -2
  140. package/esm2022/toast/toast.component.mjs +3 -3
  141. package/esm2022/toggle/toggle.component.mjs +3 -3
  142. package/esm2022/tooltip/tooltip.component.mjs +3 -3
  143. package/esm2022/tree/toggle.mjs +2 -2
  144. package/esm2022/tree/tree-option.component.mjs +2 -2
  145. package/esm2022/tree/tree-selection.component.mjs +2 -2
  146. package/esm2022/tree/tree.mjs +2 -2
  147. package/esm2022/tree-select/tree-select.component.mjs +3 -3
  148. package/fesm2022/koobiq-components-accordion.mjs +189 -0
  149. package/fesm2022/koobiq-components-accordion.mjs.map +1 -0
  150. package/fesm2022/koobiq-components-alert.mjs +2 -2
  151. package/fesm2022/koobiq-components-alert.mjs.map +1 -1
  152. package/fesm2022/koobiq-components-autocomplete.mjs +2 -2
  153. package/fesm2022/koobiq-components-autocomplete.mjs.map +1 -1
  154. package/fesm2022/koobiq-components-badge.mjs +2 -2
  155. package/fesm2022/koobiq-components-badge.mjs.map +1 -1
  156. package/fesm2022/koobiq-components-button-toggle.mjs +2 -2
  157. package/fesm2022/koobiq-components-button-toggle.mjs.map +1 -1
  158. package/fesm2022/koobiq-components-button.mjs +38 -8
  159. package/fesm2022/koobiq-components-button.mjs.map +1 -1
  160. package/fesm2022/koobiq-components-checkbox.mjs +2 -2
  161. package/fesm2022/koobiq-components-checkbox.mjs.map +1 -1
  162. package/fesm2022/koobiq-components-code-block.mjs +4 -4
  163. package/fesm2022/koobiq-components-code-block.mjs.map +1 -1
  164. package/fesm2022/koobiq-components-core.mjs +9 -9
  165. package/fesm2022/koobiq-components-core.mjs.map +1 -1
  166. package/fesm2022/koobiq-components-datepicker.mjs +10 -10
  167. package/fesm2022/koobiq-components-datepicker.mjs.map +1 -1
  168. package/fesm2022/koobiq-components-divider.mjs +2 -2
  169. package/fesm2022/koobiq-components-divider.mjs.map +1 -1
  170. package/fesm2022/koobiq-components-dl.mjs +2 -2
  171. package/fesm2022/koobiq-components-dl.mjs.map +1 -1
  172. package/fesm2022/koobiq-components-dropdown.mjs +4 -4
  173. package/fesm2022/koobiq-components-dropdown.mjs.map +1 -1
  174. package/fesm2022/koobiq-components-empty-state.mjs +2 -2
  175. package/fesm2022/koobiq-components-empty-state.mjs.map +1 -1
  176. package/fesm2022/koobiq-components-file-upload.mjs +4 -4
  177. package/fesm2022/koobiq-components-file-upload.mjs.map +1 -1
  178. package/fesm2022/koobiq-components-form-field.mjs +12 -12
  179. package/fesm2022/koobiq-components-form-field.mjs.map +1 -1
  180. package/fesm2022/koobiq-components-icon.mjs +6 -6
  181. package/fesm2022/koobiq-components-icon.mjs.map +1 -1
  182. package/fesm2022/koobiq-components-list.mjs +4 -4
  183. package/fesm2022/koobiq-components-list.mjs.map +1 -1
  184. package/fesm2022/koobiq-components-loader-overlay.mjs +2 -2
  185. package/fesm2022/koobiq-components-loader-overlay.mjs.map +1 -1
  186. package/fesm2022/koobiq-components-markdown.mjs +2 -2
  187. package/fesm2022/koobiq-components-markdown.mjs.map +1 -1
  188. package/fesm2022/koobiq-components-modal.mjs +4 -6
  189. package/fesm2022/koobiq-components-modal.mjs.map +1 -1
  190. package/fesm2022/koobiq-components-navbar.mjs +6 -6
  191. package/fesm2022/koobiq-components-navbar.mjs.map +1 -1
  192. package/fesm2022/koobiq-components-popover.mjs +4 -4
  193. package/fesm2022/koobiq-components-popover.mjs.map +1 -1
  194. package/fesm2022/koobiq-components-progress-bar.mjs +2 -2
  195. package/fesm2022/koobiq-components-progress-bar.mjs.map +1 -1
  196. package/fesm2022/koobiq-components-progress-spinner.mjs +2 -2
  197. package/fesm2022/koobiq-components-progress-spinner.mjs.map +1 -1
  198. package/fesm2022/koobiq-components-radio.mjs +2 -2
  199. package/fesm2022/koobiq-components-radio.mjs.map +1 -1
  200. package/fesm2022/koobiq-components-risk-level.mjs +2 -2
  201. package/fesm2022/koobiq-components-risk-level.mjs.map +1 -1
  202. package/fesm2022/koobiq-components-scrollbar.mjs +2 -2
  203. package/fesm2022/koobiq-components-scrollbar.mjs.map +1 -1
  204. package/fesm2022/koobiq-components-select.mjs +2 -2
  205. package/fesm2022/koobiq-components-select.mjs.map +1 -1
  206. package/fesm2022/koobiq-components-sidepanel.mjs +2 -2
  207. package/fesm2022/koobiq-components-sidepanel.mjs.map +1 -1
  208. package/fesm2022/koobiq-components-splitter.mjs +2 -2
  209. package/fesm2022/koobiq-components-splitter.mjs.map +1 -1
  210. package/fesm2022/koobiq-components-table.mjs +2 -2
  211. package/fesm2022/koobiq-components-table.mjs.map +1 -1
  212. package/fesm2022/koobiq-components-tabs.mjs +6 -6
  213. package/fesm2022/koobiq-components-tabs.mjs.map +1 -1
  214. package/fesm2022/koobiq-components-tags.mjs +4 -4
  215. package/fesm2022/koobiq-components-tags.mjs.map +1 -1
  216. package/fesm2022/koobiq-components-timezone.mjs +4 -4
  217. package/fesm2022/koobiq-components-timezone.mjs.map +1 -1
  218. package/fesm2022/koobiq-components-toast.mjs +4 -4
  219. package/fesm2022/koobiq-components-toast.mjs.map +1 -1
  220. package/fesm2022/koobiq-components-toggle.mjs +2 -2
  221. package/fesm2022/koobiq-components-toggle.mjs.map +1 -1
  222. package/fesm2022/koobiq-components-tooltip.mjs +2 -2
  223. package/fesm2022/koobiq-components-tooltip.mjs.map +1 -1
  224. package/fesm2022/koobiq-components-tree-select.mjs +2 -2
  225. package/fesm2022/koobiq-components-tree-select.mjs.map +1 -1
  226. package/fesm2022/koobiq-components-tree.mjs +8 -8
  227. package/fesm2022/koobiq-components-tree.mjs.map +1 -1
  228. package/file-upload/_file-upload-theme.scss +27 -29
  229. package/file-upload/multiple-file-upload.component.scss +26 -26
  230. package/file-upload/single-file-upload.component.scss +8 -8
  231. package/form-field/_form-field-theme.scss +14 -14
  232. package/form-field/_hint-theme.scss +2 -2
  233. package/form-field/cleaner.scss +2 -2
  234. package/form-field/form-field.scss +10 -10
  235. package/form-field/hint.scss +4 -4
  236. package/form-field/password-toggle.scss +2 -2
  237. package/form-field/stepper.scss +3 -3
  238. package/icon/_icon-button-theme.scss +26 -26
  239. package/icon/_icon-item-theme.scss +2 -2
  240. package/icon/_icon-theme.scss +6 -6
  241. package/icon/icon-button.scss +2 -4
  242. package/icon/icon-item.scss +2 -4
  243. package/input/input.scss +2 -2
  244. package/link/_link-theme.scss +11 -11
  245. package/list/_list-theme.scss +6 -6
  246. package/list/list.scss +1 -1
  247. package/loader-overlay/_loader-overlay-theme.scss +6 -6
  248. package/loader-overlay/loader-overlay.scss +8 -8
  249. package/markdown/_markdown-theme.scss +27 -27
  250. package/markdown/markdown-tokens.scss +17 -17
  251. package/markdown/markdown.scss +29 -29
  252. package/modal/_modal-confirm.scss +1 -1
  253. package/modal/_modal-theme.scss +9 -12
  254. package/modal/modal.scss +12 -13
  255. package/navbar/_navbar-item_horizontal.scss +20 -20
  256. package/navbar/_navbar-item_vertical.scss +28 -28
  257. package/navbar/_navbar-theme.scss +8 -8
  258. package/navbar/navbar-brand.scss +23 -23
  259. package/navbar/navbar-divider.scss +3 -3
  260. package/navbar/navbar-item.scss +6 -6
  261. package/navbar/navbar.scss +1 -1
  262. package/navbar/vertical-navbar.scss +2 -2
  263. package/package.json +13 -6
  264. package/popover/_popover-theme.scss +7 -7
  265. package/popover/popover.scss +17 -18
  266. package/prebuilt-themes/dark-theme.css +1 -1
  267. package/prebuilt-themes/light-theme.css +1 -1
  268. package/prebuilt-themes/theme.css +1 -1
  269. package/progress-bar/_progress-bar-theme.scss +4 -4
  270. package/progress-bar/progress-bar.scss +5 -5
  271. package/progress-spinner/_progress-spinner-theme.scss +3 -3
  272. package/progress-spinner/progress-spinner.scss +7 -7
  273. package/radio/_radio-theme.scss +9 -9
  274. package/radio/radio.scss +14 -14
  275. package/risk-level/_risk-level-theme.scss +5 -5
  276. package/risk-level/risk-level.component.scss +3 -3
  277. package/schematics/ng-add/index.js +21 -4
  278. package/scrollbar/_scrollbar-component-theme.scss +12 -12
  279. package/scrollbar/scrollbar.component.scss +6 -6
  280. package/select/_select-theme.scss +9 -9
  281. package/select/select.scss +2 -2
  282. package/sidepanel/_sidepanel-theme.scss +4 -4
  283. package/sidepanel/sidepanel.scss +14 -16
  284. package/splitter/_splitter-theme.scss +1 -1
  285. package/table/_table-theme.scss +5 -5
  286. package/table/table.scss +12 -12
  287. package/tabs/_tabs-common.scss +3 -3
  288. package/tabs/_tabs-theme.scss +13 -13
  289. package/tabs/tab-group.scss +1 -1
  290. package/tabs/tab-header.scss +3 -2
  291. package/tabs/tab-nav-bar/tab-nav-bar.scss +1 -1
  292. package/tags/_tag-theme.scss +5 -5
  293. package/tags/tag-list.scss +5 -5
  294. package/tags/tag.scss +4 -4
  295. package/textarea/textarea.scss +2 -2
  296. package/timepicker/timepicker.scss +1 -1
  297. package/timezone/_timezone-option-theme.scss +3 -3
  298. package/timezone/timezone-option.component.scss +4 -4
  299. package/timezone/timezone-select.component.scss +1 -1
  300. package/toast/_toast-theme.scss +4 -4
  301. package/toast/toast-container.component.scss +3 -3
  302. package/toast/toast.component.scss +21 -21
  303. package/toggle/_toggle-theme.scss +8 -8
  304. package/toggle/toggle.scss +8 -8
  305. package/tooltip/_tooltip-theme.scss +5 -5
  306. package/tooltip/tooltip.scss +7 -7
  307. package/tree/_tree-theme.scss +6 -6
  308. package/tree/toggle.scss +2 -2
  309. package/tree/tree-option.scss +4 -4
  310. package/tree-select/_tree-select-theme.scss +7 -7
package/file-upload/_file-upload-theme.scss CHANGED
@@ -8,41 +8,41 @@
8
8
  .kbq-file-upload {
9
9
  .kbq-focused,
10
10
  .kbq-link.kbq-focused {
11
- border: 2px solid kbq-css-variable(file-upload-single-states-focused-focus-outline);
11
+ border: 2px solid var(--kbq-file-upload-single-states-focused-focus-outline);
12
12
  }
13
13
  }
14
14
 
15
15
  .kbq-single-file-upload {
16
16
  .kbq-file-upload {
17
17
  // FIXME: move to mixin kbq-file-upload-state
18
- background-color: kbq-css-variable(file-upload-single-default-container-background);
19
- border-color: kbq-css-variable(file-upload-single-default-container-border) !important;
18
+ background-color: var(--kbq-file-upload-single-default-container-background);
19
+ border-color: var(--kbq-file-upload-single-default-container-border) !important;
20
20
 
21
21
  &.dragover {
22
- background-color: kbq-css-variable(file-upload-single-states-on-drag-container-background);
23
- border-color: kbq-css-variable(file-upload-single-states-on-drag-container-border) !important;
22
+ background-color: var(--kbq-file-upload-single-states-on-drag-container-background);
23
+ border-color: var(--kbq-file-upload-single-states-on-drag-container-border) !important;
24
24
  }
25
25
 
26
26
  &.kbq-error:not(.kbq-disabled) {
27
27
  &:not(.dragover) {
28
- background-color: kbq-css-variable(file-upload-single-states-error-container-background);
29
- border-color: kbq-css-variable(file-upload-single-states-error-container-border) !important;
28
+ background-color: var(--kbq-file-upload-single-states-error-container-background);
29
+ border-color: var(--kbq-file-upload-single-states-error-container-border) !important;
30
30
  }
31
31
 
32
32
  *,
33
33
  .kbq-icon {
34
- color: kbq-css-variable(file-upload-single-states-error-text-block-color);
34
+ color: var(--kbq-file-upload-single-states-error-text-block-color);
35
35
  }
36
36
  }
37
37
 
38
38
  &.kbq-disabled {
39
- background-color: kbq-css-variable(file-upload-single-states-disabled-container-background);
40
- border-color: kbq-css-variable(file-upload-single-states-disabled-container-border) !important;
39
+ background-color: var(--kbq-file-upload-single-states-disabled-container-background);
40
+ border-color: var(--kbq-file-upload-single-states-disabled-container-border) !important;
41
41
 
42
42
  &,
43
43
  .kbq-icon,
44
44
  .kbq-link {
45
- color: kbq-css-variable(file-upload-single-states-disabled-container-border);
45
+ color: var(--kbq-file-upload-single-states-disabled-container-border);
46
46
  }
47
47
  }
48
48
  }
@@ -50,47 +50,45 @@
50
50
 
51
51
  .kbq-multiple-file-upload {
52
52
  .kbq-file-upload {
53
- background-color: kbq-css-variable(file-upload-multiple-default-container-background);
54
- border-color: kbq-css-variable(file-upload-multiple-default-container-border) !important;
53
+ background-color: var(--kbq-file-upload-multiple-default-container-background);
54
+ border-color: var(--kbq-file-upload-multiple-default-container-border) !important;
55
55
 
56
56
  .btn-upload {
57
- border-top-color: kbq-css-variable(file-upload-multiple-default-container-border);
57
+ border-top-color: var(--kbq-file-upload-multiple-default-container-border);
58
58
  }
59
59
 
60
60
  .kbq-file-multiple-uploaded__header {
61
- border-bottom-color: kbq-css-variable(file-upload-multiple-default-grid-divider-color);
61
+ border-bottom-color: var(--kbq-file-upload-multiple-default-grid-divider-color);
62
62
  }
63
63
 
64
64
  &.dragover {
65
- background-color: kbq-css-variable(file-upload-multiple-states-on-drag-container-background);
66
- border-color: kbq-css-variable(file-upload-multiple-states-on-drag-container-border) !important;
65
+ background-color: var(--kbq-file-upload-multiple-states-on-drag-container-background);
66
+ border-color: var(--kbq-file-upload-multiple-states-on-drag-container-border) !important;
67
67
 
68
68
  .kbq-file-multiple-uploaded__header {
69
- border-bottom-color: kbq-css-variable(
70
- file-upload-multiple-states-on-drag-container-background
71
- ) !important;
69
+ border-bottom-color: var(--kbq-file-upload-multiple-states-on-drag-container-background) !important;
72
70
  }
73
71
 
74
72
  &.selected {
75
73
  .dropzone {
76
- border-top-color: kbq-css-variable(file-upload-multiple-states-on-drag-container-border);
74
+ border-top-color: var(--kbq-file-upload-multiple-states-on-drag-container-border);
77
75
  }
78
76
  }
79
77
  }
80
78
 
81
79
  &.kbq-disabled {
82
- background-color: kbq-css-variable(file-upload-multiple-states-disabled-container-background);
83
- border-color: kbq-css-variable(file-upload-multiple-states-disabled-container-border) !important;
80
+ background-color: var(--kbq-file-upload-multiple-states-disabled-container-background);
81
+ border-color: var(--kbq-file-upload-multiple-states-disabled-container-border) !important;
84
82
 
85
83
  &,
86
84
  .kbq-icon,
87
85
  .kbq-link {
88
- color: kbq-css-variable(file-upload-multiple-states-disabled-container-border);
86
+ color: var(--kbq-file-upload-multiple-states-disabled-container-border);
89
87
  }
90
88
 
91
89
  &.selected {
92
90
  .dropzone {
93
- border-top-color: kbq-css-variable(file-upload-multiple-states-disabled-container-border);
91
+ border-top-color: var(--kbq-file-upload-multiple-states-disabled-container-border);
94
92
  }
95
93
  }
96
94
  }
@@ -99,18 +97,18 @@
99
97
  .kbq-file-upload__row.error {
100
98
  *,
101
99
  .kbq-icon {
102
- color: kbq-css-variable(file-upload-multiple-states-error-text-block-color);
100
+ color: var(--kbq-file-upload-multiple-states-error-text-block-color);
103
101
  }
104
102
  }
105
103
  }
106
104
 
107
105
  .multiple__uploaded-item {
108
106
  & .kbq-file-upload__file .kbq-icon {
109
- color: kbq-css-variable(file-upload-multiple-default-left-icon-color);
107
+ color: var(--kbq-file-upload-multiple-default-left-icon-color);
110
108
  }
111
109
 
112
110
  & .kbq-file-upload__action .kbq-icon {
113
- color: kbq-css-variable(file-upload-multiple-default-icon-button-color);
111
+ color: var(--kbq-file-upload-multiple-default-icon-button-color);
114
112
  }
115
113
  }
116
114
  }
@@ -119,7 +117,7 @@
119
117
  .kbq-single-file-upload,
120
118
  .kbq-multiple-file-upload {
121
119
  .kbq-file-upload__hint:not(.kbq-error) {
122
- color: kbq-css-variable(form-field-hint-text);
120
+ color: var(--kbq-form-field-hint-text);
123
121
  }
124
122
  }
125
123
  }
package/file-upload/multiple-file-upload.component.scss CHANGED
@@ -2,22 +2,22 @@
2
2
 
3
3
  // todo нужно рефакторить со стилями тут сложно
4
4
  .kbq-multiple-file-upload .kbq-file-upload {
5
- border-radius: kbq-css-variable(file-upload-size-multiple-big-container-border-radius);
6
- border-width: kbq-css-variable(file-upload-size-multiple-big-container-border-width);
5
+ border-radius: var(--kbq-file-upload-size-multiple-big-container-border-radius);
6
+ border-width: var(--kbq-file-upload-size-multiple-big-container-border-width);
7
7
  border-style: dashed;
8
8
 
9
9
  &.default:not(.selected) {
10
10
  justify-content: center;
11
11
 
12
- padding: kbq-css-variable(file-upload-size-multiple-big-container-padding-vertical)
13
- kbq-css-variable(file-upload-size-multiple-big-container-padding-vertical);
12
+ padding: var(--kbq-file-upload-size-multiple-big-container-padding-vertical)
13
+ var(--kbq-file-upload-size-multiple-big-container-padding-vertical);
14
14
 
15
- min-height: kbq-css-variable(file-upload-size-multiple-big-container-min-height);
15
+ min-height: var(--kbq-file-upload-size-multiple-big-container-min-height);
16
16
 
17
- min-width: kbq-css-variable(file-upload-size-multiple-big-container-min-width);
17
+ min-width: var(--kbq-file-upload-size-multiple-big-container-min-width);
18
18
 
19
19
  & .dropzone {
20
- gap: kbq-css-variable(file-upload-size-multiple-big-container-content-gap-horizontal);
20
+ gap: var(--kbq-file-upload-size-multiple-big-container-content-gap-horizontal);
21
21
  }
22
22
 
23
23
  & .dropzone__text {
@@ -27,26 +27,26 @@
27
27
 
28
28
  & .multiple__caption {
29
29
  display: block;
30
- padding-top: kbq-css-variable(file-upload-size-multiple-big-text-block-content-gap-vertical);
30
+ padding-top: var(--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical);
31
31
  // гап не применяется тк не флекс. в целом гап не нужен, тк по логике дизайна ссылка от текста отделяется пробелом
32
- gap: kbq-css-variable(file-upload-size-multiple-big-text-block-content-gap-horizontal);
32
+ gap: var(--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal);
33
33
  }
34
34
  }
35
35
  }
36
36
 
37
37
  &.compact:not(.selected) {
38
- padding: kbq-css-variable(file-upload-size-single-container-padding-vertical)
39
- kbq-css-variable(file-upload-size-single-container-padding-horizontal);
38
+ padding: var(--kbq-file-upload-size-single-container-padding-vertical)
39
+ var(--kbq-file-upload-size-single-container-padding-horizontal);
40
40
 
41
41
  & .dropzone {
42
- gap: kbq-css-variable(file-upload-size-single-container-content-gap-horizontal);
42
+ gap: var(--kbq-file-upload-size-single-container-content-gap-horizontal);
43
43
 
44
44
  & .dropzone__text.multiple__caption {
45
- padding-top: kbq-css-variable(file-upload-size-single-text-block-padding-vertical);
45
+ padding-top: var(--kbq-file-upload-size-single-text-block-padding-vertical);
46
46
 
47
- padding-bottom: kbq-css-variable(file-upload-size-single-text-block-padding-vertical);
47
+ padding-bottom: var(--kbq-file-upload-size-single-text-block-padding-vertical);
48
48
 
49
- gap: kbq-css-variable(file-upload-size-single-text-block-content-gap-horizontal);
49
+ gap: var(--kbq-file-upload-size-single-text-block-content-gap-horizontal);
50
50
  }
51
51
  }
52
52
  }
@@ -83,12 +83,12 @@
83
83
  width: 65%;
84
84
  max-width: 65%;
85
85
 
86
- gap: kbq-css-variable(file-upload-size-multiple-big-grid-cell-content-gap-horizontal);
86
+ gap: var(--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal);
87
87
  }
88
88
 
89
89
  .kbq-file-upload__size {
90
- width: kbq-css-variable(size-7xl);
91
- min-width: kbq-css-variable(size-7xl);
90
+ width: var(--kbq-size-7xl);
91
+ min-width: var(--kbq-size-7xl);
92
92
  text-align: left;
93
93
  flex-grow: 1;
94
94
  }
@@ -132,21 +132,21 @@
132
132
  [ file-upload-size-single-container-padding-horizontal,
133
133
  file-upload-size-single-container-border-width]
134
134
  );
135
- border-top-left-radius: kbq-css-variable(file-upload-size-single-container-border-radius);
135
+ border-top-left-radius: var(--kbq-file-upload-size-single-container-border-radius);
136
136
 
137
- border-top-right-radius: kbq-css-variable(file-upload-size-single-container-border-radius);
138
- border-top-width: kbq-css-variable(file-upload-size-single-container-border-width);
137
+ border-top-right-radius: var(--kbq-file-upload-size-single-container-border-radius);
138
+ border-top-width: var(--kbq-file-upload-size-single-container-border-width);
139
139
  border-top-style: dashed;
140
140
 
141
141
  & .dropzone {
142
- gap: kbq-css-variable(file-upload-size-single-container-content-gap-horizontal);
142
+ gap: var(--kbq-file-upload-size-single-container-content-gap-horizontal);
143
143
 
144
144
  & .dropzone__text.multiple__caption {
145
- padding-top: kbq-css-variable(file-upload-size-single-text-block-padding-vertical);
145
+ padding-top: var(--kbq-file-upload-size-single-text-block-padding-vertical);
146
146
 
147
- padding-bottom: kbq-css-variable(file-upload-size-single-text-block-padding-vertical);
147
+ padding-bottom: var(--kbq-file-upload-size-single-text-block-padding-vertical);
148
148
 
149
- gap: kbq-css-variable(file-upload-size-single-text-block-content-gap-horizontal);
149
+ gap: var(--kbq-file-upload-size-single-text-block-content-gap-horizontal);
150
150
  }
151
151
  }
152
152
  }
@@ -158,5 +158,5 @@
158
158
  }
159
159
 
160
160
  .kbq-file-upload__hint {
161
- margin-top: kbq-css-variable(form-field-hint-size-margin-top);
161
+ margin-top: var(--kbq-form-field-hint-size-margin-top);
162
162
  }
package/file-upload/single-file-upload.component.scss CHANGED
@@ -18,20 +18,20 @@ $tokens: meta.module-variables(tokens) !default;
18
18
  file-upload-size-single-container-border-width]
19
19
  );
20
20
 
21
- border-radius: kbq-css-variable(file-upload-size-single-container-border-radius);
22
- border-width: kbq-css-variable(file-upload-size-single-container-border-width);
21
+ border-radius: var(--kbq-file-upload-size-single-container-border-radius);
22
+ border-width: var(--kbq-file-upload-size-single-container-border-width);
23
23
  border-style: dashed;
24
24
 
25
25
  & .dropzone__text {
26
- padding-top: kbq-css-variable(file-upload-size-single-text-block-padding-vertical);
26
+ padding-top: var(--kbq-file-upload-size-single-text-block-padding-vertical);
27
27
 
28
- padding-bottom: kbq-css-variable(file-upload-size-single-text-block-padding-vertical);
28
+ padding-bottom: var(--kbq-file-upload-size-single-text-block-padding-vertical);
29
29
 
30
- gap: kbq-css-variable(file-upload-size-single-text-block-content-gap-horizontal);
30
+ gap: var(--kbq-file-upload-size-single-text-block-content-gap-horizontal);
31
31
  }
32
32
 
33
33
  & .dropzone {
34
- gap: kbq-css-variable(file-upload-size-single-container-content-gap-horizontal);
34
+ gap: var(--kbq-file-upload-size-single-container-content-gap-horizontal);
35
35
  }
36
36
 
37
37
  .file-item {
@@ -42,7 +42,7 @@ $tokens: meta.module-variables(tokens) !default;
42
42
  align-items: center;
43
43
  width: 100%;
44
44
 
45
- gap: kbq-css-variable(file-upload-size-single-container-content-gap-horizontal);
45
+ gap: var(--kbq-file-upload-size-single-container-content-gap-horizontal);
46
46
 
47
47
  .file-item__text {
48
48
  width: 120px;
@@ -53,5 +53,5 @@ $tokens: meta.module-variables(tokens) !default;
53
53
  }
54
54
 
55
55
  .kbq-file-upload__hint {
56
- margin-top: kbq-css-variable(form-field-hint-size-margin-top);
56
+ margin-top: var(--kbq-form-field-hint-size-margin-top);
57
57
  }
package/form-field/_form-field-theme.scss CHANGED
@@ -7,25 +7,25 @@
7
7
 
8
8
  @mixin kbq-form-field-state($state-name) {
9
9
  .kbq-form-field__container {
10
- border-color: kbq-css-variable(form-field-#{$state-name}-border-color);
11
- background-color: kbq-css-variable(form-field-#{$state-name}-background);
10
+ border-color: var(--kbq-form-field-#{$state-name}-border-color);
11
+ background-color: var(--kbq-form-field-#{$state-name}-background);
12
12
  }
13
13
 
14
14
  .kbq-input,
15
15
  .kbq-tag-input,
16
16
  .kbq-textarea {
17
- color: kbq-css-variable(form-field-#{$state-name}-text);
17
+ color: var(--kbq-form-field-#{$state-name}-text);
18
18
 
19
19
  &::placeholder {
20
- color: kbq-css-variable(form-field-#{$state-name}-placeholder);
20
+ color: var(--kbq-form-field-#{$state-name}-placeholder);
21
21
  }
22
22
 
23
23
  &::-ms-input-placeholder {
24
- color: kbq-css-variable(form-field-#{$state-name}-placeholder);
24
+ color: var(--kbq-form-field-#{$state-name}-placeholder);
25
25
  }
26
26
 
27
27
  &::-webkit-input-placeholder {
28
- color: kbq-css-variable(form-field-#{$state-name}-placeholder);
28
+ color: var(--kbq-form-field-#{$state-name}-placeholder);
29
29
  }
30
30
  }
31
31
  }
@@ -39,9 +39,9 @@
39
39
  &:-webkit-autofill,
40
40
  &:-webkit-autofill:hover,
41
41
  &:-webkit-autofill:focus {
42
- -webkit-box-shadow: inset 0 0 0 40rem kbq-css-variable(form-field-states-autofill-background);
43
- -webkit-text-fill-color: kbq-css-variable(form-field-states-autofill-text);
44
- caret-color: kbq-css-variable(form-field-states-autofill-text);
42
+ -webkit-box-shadow: inset 0 0 0 40rem var(--kbq-form-field-states-autofill-background);
43
+ -webkit-text-fill-color: var(--kbq-form-field-states-autofill-text);
44
+ caret-color: var(--kbq-form-field-states-autofill-text);
45
45
  }
46
46
  }
47
47
 
@@ -49,7 +49,7 @@
49
49
  @include kbq-form-field-state(states-focused);
50
50
 
51
51
  & .kbq-form-field__container {
52
- box-shadow: 0 0 0.1px 1px kbq-css-variable(form-field-states-focused-focus-outline);
52
+ box-shadow: 0 0 0.1px 1px var(--kbq-form-field-states-focused-focus-outline);
53
53
  }
54
54
  }
55
55
 
@@ -58,7 +58,7 @@
58
58
  @include kbq-form-field-state(states-error);
59
59
 
60
60
  &.cdk-focused .kbq-form-field__container {
61
- box-shadow: 0 0 0.1px 1px kbq-css-variable(form-field-states-error-focused-focus-outline);
61
+ box-shadow: 0 0 0.1px 1px var(--kbq-form-field-states-error-focused-focus-outline);
62
62
  }
63
63
  }
64
64
 
@@ -66,15 +66,15 @@
66
66
  @include kbq-form-field-state(states-disabled);
67
67
 
68
68
  .kbq-icon {
69
- color: kbq-css-variable(form-field-states-disabled-text);
70
- -webkit-text-fill-color: kbq-css-variable(form-field-states-disabled-text);
69
+ color: var(--kbq-form-field-states-disabled-text);
70
+ -webkit-text-fill-color: var(--kbq-form-field-states-disabled-text);
71
71
  }
72
72
  }
73
73
  }
74
74
 
75
75
  .kbq-form-field__hint {
76
76
  & > .kbq-hint:not(.kbq-password-hint, .kbq-contrast-fade, .kbq-success, .kbq-warning, .kbq-error) {
77
- color: kbq-css-variable(form-field-hint-text);
77
+ color: var(--kbq-form-field-hint-text);
78
78
  }
79
79
  }
80
80
  }
package/form-field/_hint-theme.scss CHANGED
@@ -6,10 +6,10 @@
6
6
  @use '../core/styles/common/tokens' as *;
7
7
 
8
8
  @mixin kbq-hint-color($type, $style-name) {
9
- color: kbq-css-variable(hint-#{$type}-#{$style-name}-text);
9
+ color: var(--kbq-hint-#{$type}-#{$style-name}-text);
10
10
 
11
11
  & .kbq-icon {
12
- color: kbq-css-variable(hint-#{$type}-#{$style-name}-icon) !important;
12
+ color: var(--kbq-hint-#{$type}-#{$style-name}-icon) !important;
13
13
  }
14
14
  }
15
15
 
package/form-field/cleaner.scss CHANGED
@@ -8,8 +8,8 @@
8
8
  align-items: center;
9
9
  justify-content: center;
10
10
 
11
- width: kbq-css-variable(form-field-size-icon-button-size);
12
- margin-right: kbq-css-variable(form-field-size-icon-button-margin-right);
11
+ width: var(--kbq-form-field-size-icon-button-size);
12
+ margin-right: var(--kbq-form-field-size-icon-button-margin-right);
13
13
  height: 100%;
14
14
 
15
15
  cursor: pointer;
package/form-field/form-field.scss CHANGED
@@ -19,13 +19,13 @@
19
19
  }
20
20
 
21
21
  .kbq-form-field:not(.kbq-form-field-type-textarea) {
22
- height: kbq-css-variable(form-field-size-height);
22
+ height: var(--kbq-form-field-size-height);
23
23
  }
24
24
 
25
25
  &,
26
26
  .kbq-input,
27
27
  .kbq-textarea {
28
- border-radius: kbq-css-variable(form-field-size-border-radius);
28
+ border-radius: var(--kbq-form-field-size-border-radius);
29
29
  }
30
30
 
31
31
  &:hover {
@@ -65,17 +65,17 @@
65
65
  }
66
66
 
67
67
  & + .kbq-password-hint {
68
- margin-top: kbq-css-variable(size-m);
68
+ margin-top: var(--kbq-size-m);
69
69
  }
70
70
  }
71
71
 
72
72
  .kbq-form-field__container {
73
73
  position: relative;
74
74
 
75
- border-width: kbq-css-variable(form-field-size-border-width);
75
+ border-width: var(--kbq-form-field-size-border-width);
76
76
  border-style: solid;
77
77
  border-color: transparent;
78
- border-radius: kbq-css-variable(form-field-size-border-radius);
78
+ border-radius: var(--kbq-form-field-size-border-radius);
79
79
  }
80
80
 
81
81
  .kbq-form-field__prefix,
@@ -115,12 +115,12 @@
115
115
  justify-content: center;
116
116
  align-items: center;
117
117
 
118
- width: kbq-css-variable(form-field-size-icon-button-size);
118
+ width: var(--kbq-form-field-size-icon-button-size);
119
119
 
120
120
  .kbq-stepper-step-up,
121
121
  .kbq-stepper-step-down {
122
122
  cursor: pointer;
123
- width: kbq-css-variable(form-field-size-icon-button-size);
123
+ width: var(--kbq-form-field-size-icon-button-size);
124
124
  text-align: center;
125
125
  }
126
126
 
@@ -132,15 +132,15 @@
132
132
  .kbq-form-field__hint {
133
133
  display: flex;
134
134
  flex-direction: column;
135
- margin-top: kbq-css-variable(form-field-hint-size-margin-top);
135
+ margin-top: var(--kbq-form-field-hint-size-margin-top);
136
136
 
137
137
  & .kbq-password-hint:first-child {
138
- margin-top: kbq-css-variable(size-s);
138
+ margin-top: var(--kbq-size-s);
139
139
  }
140
140
  }
141
141
 
142
142
  .kbq-password-hint {
143
- margin-top: kbq-css-variable(form-field-hint-size-gap);
143
+ margin-top: var(--kbq-form-field-hint-size-gap);
144
144
  }
145
145
 
146
146
  @include kbq-form-field-theme();
package/form-field/hint.scss CHANGED
@@ -9,14 +9,14 @@
9
9
  display: flex;
10
10
 
11
11
  & .kbq-icon {
12
- margin-top: kbq-css-variable(hint-size-normal-margin-top);
13
- margin-right: kbq-css-variable(hint-size-normal-content-padding);
12
+ margin-top: var(--kbq-hint-size-normal-margin-top);
13
+ margin-right: var(--kbq-hint-size-normal-content-padding);
14
14
  }
15
15
 
16
16
  &.kbq-hint_compact {
17
17
  & .kbq-icon {
18
- margin-top: kbq-css-variable(hint-size-compact-margin-top);
19
- margin-right: kbq-css-variable(hint-size-compact-content-padding);
18
+ margin-top: var(--kbq-hint-size-compact-margin-top);
19
+ margin-right: var(--kbq-hint-size-compact-content-padding);
20
20
  }
21
21
  }
22
22
  }
package/form-field/password-toggle.scss CHANGED
@@ -8,8 +8,8 @@
8
8
  align-items: center;
9
9
  justify-content: center;
10
10
 
11
- width: kbq-css-variable(form-field-size-icon-button-size);
12
- margin-right: kbq-css-variable(form-field-size-icon-button-margin-right);
11
+ width: var(--kbq-form-field-size-icon-button-size);
12
+ margin-right: var(--kbq-form-field-size-icon-button-margin-right);
13
13
  height: 100%;
14
14
 
15
15
  &::-moz-focus-inner {
package/form-field/stepper.scss CHANGED
@@ -9,14 +9,14 @@
9
9
  justify-content: center;
10
10
  align-items: center;
11
11
 
12
- width: kbq-css-variable(form-field-size-icon-button-size);
13
- margin-right: kbq-css-variable(form-field-size-icon-button-margin-right);
12
+ width: var(--kbq-form-field-size-icon-button-size);
13
+ margin-right: var(--kbq-form-field-size-icon-button-margin-right);
14
14
  height: 100%;
15
15
 
16
16
  .kbq-stepper-step-up,
17
17
  .kbq-stepper-step-down {
18
18
  cursor: pointer;
19
- width: kbq-css-variable(form-field-size-icon-button-size);
19
+ width: var(--kbq-form-field-size-icon-button-size);
20
20
  text-align: center;
21
21
  }
22
22