@koobiq/components 17.4.0 → 17.6.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 (255) hide show
  1. package/alert/_alert-theme.scss +16 -20
  2. package/alert/alert-tokens.scss +132 -0
  3. package/alert/alert.component.scss +5 -0
  4. package/autocomplete/_autocomplete-theme.scss +3 -5
  5. package/autocomplete/autocomplete-tokens.scss +16 -0
  6. package/autocomplete/autocomplete.scss +4 -0
  7. package/badge/_badge-theme.scss +22 -25
  8. package/badge/badge-tokens.scss +185 -0
  9. package/badge/badge.component.scss +5 -0
  10. package/button/_button-theme.scss +20 -29
  11. package/button/button-tokens.scss +278 -0
  12. package/button/button.scss +5 -0
  13. package/button-toggle/_button-toggle-theme.scss +16 -28
  14. package/button-toggle/button-toggle-tokens.scss +78 -0
  15. package/button-toggle/button-toggle.scss +7 -2
  16. package/checkbox/_checkbox-theme.scss +27 -58
  17. package/checkbox/checkbox-tokens.scss +140 -0
  18. package/checkbox/checkbox.scss +6 -4
  19. package/code-block/_code-block-theme.scss +124 -143
  20. package/code-block/code-block-tokens.scss +400 -0
  21. package/code-block/code-block.scss +4 -2
  22. package/core/highlight/_highlight-theme.scss +1 -1
  23. package/core/pop-up/pop-up-styles.d.ts +2 -2
  24. package/core/pop-up/pop-up-trigger.d.ts +8 -9
  25. package/core/pop-up/pop-up.d.ts +3 -3
  26. package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +12 -15
  27. package/core/selection/pseudo-checkbox/pseudo-checkbox-tokens.scss +140 -0
  28. package/core/selection/pseudo-checkbox/pseudo-checkbox.scss +3 -2
  29. package/core/services/theme.service.d.ts +16 -0
  30. package/core/styles/_koobiq-theme.scss +6 -100
  31. package/datepicker/_datepicker-theme.scss +17 -43
  32. package/datepicker/calendar.scss +0 -3
  33. package/datepicker/datepicker-content.scss +5 -6
  34. package/datepicker/datepicker-tokens.scss +59 -0
  35. package/divider/_divider-theme.scss +2 -4
  36. package/divider/divider-tokens.scss +14 -0
  37. package/divider/divider.scss +4 -0
  38. package/dl/_dl-theme.scss +4 -6
  39. package/dl/dl-tokens.scss +32 -0
  40. package/dl/dl.scss +5 -0
  41. package/dropdown/_dropdown-theme.scss +15 -24
  42. package/dropdown/dropdown-tokens.scss +111 -0
  43. package/dropdown/dropdown.scss +5 -0
  44. package/ellipsis-center/ellipsis-center.directive.d.ts +2 -6
  45. package/empty-state/_empty-state-theme.scss +6 -9
  46. package/empty-state/empty-state-tokens.scss +68 -0
  47. package/empty-state/empty-state.scss +5 -0
  48. package/esm2022/alert/alert.component.mjs +3 -3
  49. package/esm2022/autocomplete/autocomplete.component.mjs +3 -3
  50. package/esm2022/badge/badge.component.mjs +3 -3
  51. package/esm2022/button/button.component.mjs +3 -3
  52. package/esm2022/button-toggle/button-toggle.component.mjs +3 -3
  53. package/esm2022/checkbox/checkbox.mjs +3 -3
  54. package/esm2022/code-block/code-block.component.mjs +3 -3
  55. package/esm2022/core/common-behaviors/common-module.mjs +2 -2
  56. package/esm2022/core/pop-up/pop-up-styles.mjs +7 -9
  57. package/esm2022/core/pop-up/pop-up-trigger.mjs +13 -16
  58. package/esm2022/core/pop-up/pop-up.mjs +7 -6
  59. package/esm2022/core/selection/pseudo-checkbox/pseudo-checkbox.mjs +3 -3
  60. package/esm2022/core/services/theme.service.mjs +20 -3
  61. package/esm2022/core/version.mjs +2 -2
  62. package/esm2022/datepicker/datepicker.component.mjs +3 -3
  63. package/esm2022/divider/divider.component.mjs +3 -3
  64. package/esm2022/dl/dl.component.mjs +3 -3
  65. package/esm2022/dropdown/dropdown.component.mjs +3 -3
  66. package/esm2022/ellipsis-center/ellipsis-center.directive.mjs +12 -23
  67. package/esm2022/empty-state/empty-state.component.mjs +3 -3
  68. package/esm2022/file-upload/multiple-file-upload.component.mjs +3 -3
  69. package/esm2022/file-upload/single-file-upload.component.mjs +3 -3
  70. package/esm2022/form-field/form-field.mjs +3 -3
  71. package/esm2022/form-field/hint.mjs +3 -3
  72. package/esm2022/form-field/password-hint.mjs +10 -7
  73. package/esm2022/form-field/password-toggle.mjs +10 -21
  74. package/esm2022/icon/icon-button.component.mjs +3 -3
  75. package/esm2022/icon/icon-item.component.mjs +3 -3
  76. package/esm2022/icon/icon.component.mjs +3 -3
  77. package/esm2022/list/list-selection.component.mjs +3 -3
  78. package/esm2022/list/list.component.mjs +3 -3
  79. package/esm2022/loader-overlay/loader-overlay.component.mjs +3 -3
  80. package/esm2022/markdown/markdown.component.mjs +3 -3
  81. package/esm2022/modal/modal-ref.class.mjs +1 -1
  82. package/esm2022/modal/modal.component.mjs +3 -3
  83. package/esm2022/modal/modal.service.mjs +16 -8
  84. package/esm2022/modal/modal.type.mjs +1 -1
  85. package/esm2022/navbar/navbar-item.component.mjs +17 -31
  86. package/esm2022/navbar/navbar.component.mjs +3 -3
  87. package/esm2022/popover/popover-confirm.component.mjs +13 -22
  88. package/esm2022/popover/popover.component.mjs +24 -31
  89. package/esm2022/select/select-option.directive.mjs +7 -18
  90. package/esm2022/table/table.component.mjs +3 -3
  91. package/esm2022/timezone/timezone-option.component.mjs +3 -3
  92. package/esm2022/timezone/timezone-option.directive.mjs +7 -18
  93. package/esm2022/timezone/timezone-select.component.mjs +3 -3
  94. package/esm2022/title/title.directive.mjs +7 -18
  95. package/esm2022/toast/toast.component.mjs +3 -3
  96. package/esm2022/toggle/toggle.component.mjs +3 -3
  97. package/esm2022/tooltip/tooltip.component.mjs +28 -47
  98. package/esm2022/tree/toggle.mjs +3 -3
  99. package/esm2022/tree/tree-option.component.mjs +3 -3
  100. package/esm2022/tree/tree-selection.component.mjs +3 -3
  101. package/esm2022/tree/tree.mjs +3 -3
  102. package/esm2022/tree-select/tree-select.component.mjs +3 -3
  103. package/fesm2022/koobiq-components-alert.mjs +2 -2
  104. package/fesm2022/koobiq-components-alert.mjs.map +1 -1
  105. package/fesm2022/koobiq-components-autocomplete.mjs +2 -2
  106. package/fesm2022/koobiq-components-autocomplete.mjs.map +1 -1
  107. package/fesm2022/koobiq-components-badge.mjs +2 -2
  108. package/fesm2022/koobiq-components-badge.mjs.map +1 -1
  109. package/fesm2022/koobiq-components-button-toggle.mjs +2 -2
  110. package/fesm2022/koobiq-components-button-toggle.mjs.map +1 -1
  111. package/fesm2022/koobiq-components-button.mjs +2 -2
  112. package/fesm2022/koobiq-components-button.mjs.map +1 -1
  113. package/fesm2022/koobiq-components-checkbox.mjs +2 -2
  114. package/fesm2022/koobiq-components-checkbox.mjs.map +1 -1
  115. package/fesm2022/koobiq-components-code-block.mjs +2 -2
  116. package/fesm2022/koobiq-components-code-block.mjs.map +1 -1
  117. package/fesm2022/koobiq-components-core.mjs +49 -35
  118. package/fesm2022/koobiq-components-core.mjs.map +1 -1
  119. package/fesm2022/koobiq-components-datepicker.mjs +2 -2
  120. package/fesm2022/koobiq-components-datepicker.mjs.map +1 -1
  121. package/fesm2022/koobiq-components-divider.mjs +2 -2
  122. package/fesm2022/koobiq-components-divider.mjs.map +1 -1
  123. package/fesm2022/koobiq-components-dl.mjs +2 -2
  124. package/fesm2022/koobiq-components-dl.mjs.map +1 -1
  125. package/fesm2022/koobiq-components-dropdown.mjs +2 -2
  126. package/fesm2022/koobiq-components-dropdown.mjs.map +1 -1
  127. package/fesm2022/koobiq-components-ellipsis-center.mjs +11 -19
  128. package/fesm2022/koobiq-components-ellipsis-center.mjs.map +1 -1
  129. package/fesm2022/koobiq-components-empty-state.mjs +2 -2
  130. package/fesm2022/koobiq-components-empty-state.mjs.map +1 -1
  131. package/fesm2022/koobiq-components-file-upload.mjs +4 -4
  132. package/fesm2022/koobiq-components-file-upload.mjs.map +1 -1
  133. package/fesm2022/koobiq-components-form-field.mjs +33 -37
  134. package/fesm2022/koobiq-components-form-field.mjs.map +1 -1
  135. package/fesm2022/koobiq-components-icon.mjs +6 -6
  136. package/fesm2022/koobiq-components-icon.mjs.map +1 -1
  137. package/fesm2022/koobiq-components-list.mjs +4 -4
  138. package/fesm2022/koobiq-components-list.mjs.map +1 -1
  139. package/fesm2022/koobiq-components-loader-overlay.mjs +2 -2
  140. package/fesm2022/koobiq-components-loader-overlay.mjs.map +1 -1
  141. package/fesm2022/koobiq-components-markdown.mjs +2 -2
  142. package/fesm2022/koobiq-components-markdown.mjs.map +1 -1
  143. package/fesm2022/koobiq-components-modal.mjs +17 -9
  144. package/fesm2022/koobiq-components-modal.mjs.map +1 -1
  145. package/fesm2022/koobiq-components-navbar.mjs +17 -29
  146. package/fesm2022/koobiq-components-navbar.mjs.map +1 -1
  147. package/fesm2022/koobiq-components-popover.mjs +33 -44
  148. package/fesm2022/koobiq-components-popover.mjs.map +1 -1
  149. package/fesm2022/koobiq-components-select.mjs +14 -20
  150. package/fesm2022/koobiq-components-select.mjs.map +1 -1
  151. package/fesm2022/koobiq-components-table.mjs +2 -2
  152. package/fesm2022/koobiq-components-table.mjs.map +1 -1
  153. package/fesm2022/koobiq-components-timezone.mjs +13 -20
  154. package/fesm2022/koobiq-components-timezone.mjs.map +1 -1
  155. package/fesm2022/koobiq-components-title.mjs +6 -14
  156. package/fesm2022/koobiq-components-title.mjs.map +1 -1
  157. package/fesm2022/koobiq-components-toast.mjs +2 -2
  158. package/fesm2022/koobiq-components-toast.mjs.map +1 -1
  159. package/fesm2022/koobiq-components-toggle.mjs +2 -2
  160. package/fesm2022/koobiq-components-toggle.mjs.map +1 -1
  161. package/fesm2022/koobiq-components-tooltip.mjs +27 -44
  162. package/fesm2022/koobiq-components-tooltip.mjs.map +1 -1
  163. package/fesm2022/koobiq-components-tree-select.mjs +2 -2
  164. package/fesm2022/koobiq-components-tree-select.mjs.map +1 -1
  165. package/fesm2022/koobiq-components-tree.mjs +8 -8
  166. package/fesm2022/koobiq-components-tree.mjs.map +1 -1
  167. package/file-upload/_file-upload-theme.scss +29 -112
  168. package/file-upload/file-upload-tokens.scss +159 -0
  169. package/file-upload/file-upload.scss +4 -2
  170. package/form-field/_form-field-theme.scss +21 -47
  171. package/form-field/_hint-theme.scss +13 -17
  172. package/form-field/form-field-tokens.scss +69 -0
  173. package/form-field/form-field.scss +4 -2
  174. package/form-field/hint-tokens.scss +60 -0
  175. package/form-field/hint.scss +5 -0
  176. package/form-field/password-toggle.d.ts +3 -6
  177. package/icon/_icon-button-theme.scss +27 -65
  178. package/icon/_icon-item-theme.scss +14 -17
  179. package/icon/_icon-theme.scss +7 -12
  180. package/icon/icon-button-tokens.scss +67 -0
  181. package/icon/icon-button.scss +4 -0
  182. package/icon/icon-item-tokens.scss +52 -0
  183. package/icon/icon-item.scss +4 -0
  184. package/icon/icon-tokens.scss +17 -0
  185. package/icon/icon.scss +4 -0
  186. package/input/_input-theme.scss +1 -5
  187. package/input/input-tokens.scss +12 -0
  188. package/input/input.scss +4 -5
  189. package/link/_link-theme.scss +18 -26
  190. package/link/link-tokens.scss +67 -0
  191. package/list/_list-theme.scss +14 -25
  192. package/list/list-tokens.scss +100 -0
  193. package/list/list.scss +5 -0
  194. package/loader-overlay/_loader-overlay-theme.scss +8 -23
  195. package/loader-overlay/loader-overlay-tokens.scss +58 -0
  196. package/loader-overlay/loader-overlay.scss +4 -5
  197. package/markdown/_markdown-theme.scss +29 -43
  198. package/markdown/markdown-tokens.scss +252 -0
  199. package/markdown/markdown.scss +6 -6
  200. package/modal/_modal-confirm.scss +0 -3
  201. package/modal/_modal-theme.scss +10 -12
  202. package/modal/modal-ref.class.d.ts +2 -2
  203. package/modal/modal-tokens.scss +53 -0
  204. package/modal/modal.component.d.ts +2 -2
  205. package/modal/modal.scss +5 -0
  206. package/modal/modal.service.d.ts +12 -7
  207. package/modal/modal.type.d.ts +3 -0
  208. package/navbar/_navbar-theme.scss +15 -25
  209. package/navbar/navbar-divider.scss +0 -3
  210. package/navbar/navbar-item.component.d.ts +5 -7
  211. package/navbar/navbar-item.scss +0 -3
  212. package/navbar/navbar-tokens.scss +83 -0
  213. package/navbar/navbar.scss +5 -3
  214. package/navbar/vertical-navbar.scss +0 -3
  215. package/package.json +7 -7
  216. package/popover/_popover-theme.scss +9 -16
  217. package/popover/popover-confirm.component.d.ts +3 -6
  218. package/popover/popover-tokens.scss +60 -0
  219. package/popover/popover.component.d.ts +4 -6
  220. package/popover/popover.scss +4 -5
  221. package/prebuilt-themes/dark-theme.css +1 -1
  222. package/prebuilt-themes/light-theme.css +1 -1
  223. package/schematics/ng-add/index.js +4 -4
  224. package/select/select-option.directive.d.ts +3 -6
  225. package/table/_table-theme.scss +7 -15
  226. package/table/table-tokens.scss +37 -0
  227. package/table/table.scss +4 -1
  228. package/textarea/_textarea-theme.scss +1 -1
  229. package/textarea/textarea-tokens.scss +14 -0
  230. package/textarea/textarea.scss +1 -0
  231. package/timezone/_timezone-option-theme.scss +5 -7
  232. package/timezone/timezone-option-tokens.scss +51 -0
  233. package/timezone/timezone-option.component.scss +5 -0
  234. package/timezone/timezone-option.directive.d.ts +3 -6
  235. package/timezone/timezone-select.component.scss +5 -0
  236. package/title/title.directive.d.ts +3 -6
  237. package/toast/_toast-theme.scss +11 -15
  238. package/toast/toast-tokens.scss +75 -0
  239. package/toast/toast.component.scss +4 -1
  240. package/toggle/_toggle-theme.scss +21 -41
  241. package/toggle/toggle-tokens.scss +142 -0
  242. package/toggle/toggle.scss +4 -1
  243. package/tooltip/_tooltip-theme.scss +13 -23
  244. package/tooltip/tooltip-tokens.scss +63 -0
  245. package/tooltip/tooltip.component.d.ts +8 -11
  246. package/tooltip/tooltip.scss +5 -0
  247. package/tree/_tree-theme.scss +14 -21
  248. package/tree/toggle.scss +5 -0
  249. package/tree/tree-option.scss +0 -5
  250. package/tree/tree-selection.scss +5 -0
  251. package/tree/tree-tokens.scss +94 -0
  252. package/tree/tree.scss +5 -0
  253. package/tree-select/_tree-select-theme.scss +9 -16
  254. package/tree-select/tree-select-tokens.scss +59 -0
  255. package/tree-select/tree-select.scss +5 -0
package/alert/_alert-theme.scss CHANGED
@@ -4,73 +4,69 @@
4
4
  @use '../core/styles/typography/typography-utils' as *;
5
5
  @use '../core/styles/common/tokens' as *;
6
6
 
7
- @mixin kbq-alert-style($component, $type, $style-name) {
8
- $style: map.get($component, $type, $style-name);
9
-
10
- background: kbq-css-variable(alert-#{$type}-#{$style-name}-container-background, map.get($style, background));
7
+ @mixin kbq-alert-style($type, $style-name) {
8
+ background: kbq-css-variable(alert-#{$type}-#{$style-name}-container-background);
11
9
 
12
10
  .kbq-alert__title {
13
- color: kbq-css-variable(alert-#{$type}-#{$style-name}-container-title, map.get($style, title));
11
+ color: kbq-css-variable(alert-#{$type}-#{$style-name}-container-title);
14
12
  }
15
13
 
16
14
  .kbq-alert__text {
17
- color: kbq-css-variable(alert-#{$type}-#{$style-name}-container-text, map.get($style, text));
15
+ color: kbq-css-variable(alert-#{$type}-#{$style-name}-container-text);
18
16
  }
19
17
  }
20
18
 
21
- @mixin kbq-alert-theme($theme) {
22
- $alert: map.get(map.get($theme, components), alert);
23
-
19
+ @mixin kbq-alert-theme() {
24
20
  .kbq-alert__close:focus {
25
21
  outline: none;
26
22
  }
27
23
 
28
24
  .kbq-alert.kbq-alert_default {
29
25
  &.kbq-alert_contrast {
30
- @include kbq-alert-style($alert, default, contrast);
26
+ @include kbq-alert-style(default, contrast);
31
27
  }
32
28
 
33
29
  &.kbq-alert_error {
34
- @include kbq-alert-style($alert, default, error);
30
+ @include kbq-alert-style(default, error);
35
31
  }
36
32
 
37
33
  &.kbq-alert_warning {
38
- @include kbq-alert-style($alert, default, warning);
34
+ @include kbq-alert-style(default, warning);
39
35
  }
40
36
 
41
37
  &.kbq-alert_success {
42
- @include kbq-alert-style($alert, default, success);
38
+ @include kbq-alert-style(default, success);
43
39
  }
44
40
 
45
41
  &.kbq-alert_theme {
46
- @include kbq-alert-style($alert, default, theme);
42
+ @include kbq-alert-style(default, theme);
47
43
  }
48
44
  }
49
45
 
50
46
  .kbq-alert.kbq-alert_colored {
51
47
  &.kbq-alert_contrast {
52
- @include kbq-alert-style($alert, colored, contrast);
48
+ @include kbq-alert-style(colored, contrast);
53
49
  }
54
50
 
55
51
  &.kbq-alert_error {
56
- @include kbq-alert-style($alert, colored, error);
52
+ @include kbq-alert-style(colored, error);
57
53
  }
58
54
 
59
55
  &.kbq-alert_warning {
60
- @include kbq-alert-style($alert, colored, warning);
56
+ @include kbq-alert-style(colored, warning);
61
57
  }
62
58
 
63
59
  &.kbq-alert_success {
64
- @include kbq-alert-style($alert, colored, success);
60
+ @include kbq-alert-style(colored, success);
65
61
  }
66
62
 
67
63
  &.kbq-alert_theme {
68
- @include kbq-alert-style($alert, colored, theme);
64
+ @include kbq-alert-style(colored, theme);
69
65
  }
70
66
  }
71
67
  }
72
68
 
73
- @mixin kbq-alert-typography($config) {
69
+ @mixin kbq-alert-typography() {
74
70
  .kbq-alert {
75
71
  @include kbq-typography-css-variables(alert, text);
76
72
 
package/alert/alert-tokens.scss ADDED
@@ -0,0 +1,132 @@
1
+ .kbq-alert {
2
+ --kbq-alert-size-normal-container-border-radius: 12px;
3
+ --kbq-alert-size-normal-container-padding-top: 0;
4
+ --kbq-alert-size-normal-container-padding-right: 8px;
5
+ --kbq-alert-size-normal-container-padding-bottom: 0;
6
+ --kbq-alert-size-normal-container-padding-left: 8px;
7
+ --kbq-alert-size-normal-content-padding-top: 16px;
8
+ --kbq-alert-size-normal-content-padding-right: 8px;
9
+ --kbq-alert-size-normal-content-padding-bottom: 16px;
10
+ --kbq-alert-size-normal-content-padding-left: 12px;
11
+ --kbq-alert-size-normal-icon-margin-top: 16px;
12
+ --kbq-alert-size-normal-icon-margin-right: 0;
13
+ --kbq-alert-size-normal-icon-margin-bottom: 16px;
14
+ --kbq-alert-size-normal-icon-margin-left: 12px;
15
+ --kbq-alert-size-normal-icon-padding-top: 4px;
16
+ --kbq-alert-size-normal-title-margin-bottom: 4px;
17
+ --kbq-alert-size-normal-close-button-margin-top: 8px;
18
+ --kbq-alert-size-normal-close-button-margin-left: 2px;
19
+ --kbq-alert-size-normal-button-stack-padding-top: 8px;
20
+ --kbq-alert-size-normal-button-stack-padding-bottom: 2px;
21
+ --kbq-alert-size-normal-no-title-icon-margin-top: 16px;
22
+ --kbq-alert-size-normal-no-title-icon-padding-top: 2px;
23
+ --kbq-alert-size-compact-container-border-radius: 12px;
24
+ --kbq-alert-size-compact-container-padding-top: 0;
25
+ --kbq-alert-size-compact-container-padding-right: 8px;
26
+ --kbq-alert-size-compact-container-padding-bottom: 0;
27
+ --kbq-alert-size-compact-container-padding-left: 16px;
28
+ --kbq-alert-size-compact-content-padding-top: 12px;
29
+ --kbq-alert-size-compact-content-padding-right: 8px;
30
+ --kbq-alert-size-compact-content-padding-bottom: 12px;
31
+ --kbq-alert-size-compact-content-padding-left: 0;
32
+ --kbq-alert-size-compact-icon-margin-top: 12px;
33
+ --kbq-alert-size-compact-icon-margin-right: 8px;
34
+ --kbq-alert-size-compact-icon-padding-top: 4px;
35
+ --kbq-alert-size-compact-title-margin-bottom: 2px;
36
+ --kbq-alert-size-compact-close-button-margin-top: 8px;
37
+ --kbq-alert-size-compact-close-button-margin-left: 2px;
38
+ --kbq-alert-size-compact-button-stack-padding-top: 8px;
39
+ --kbq-alert-size-compact-button-stack-padding-bottom: 2px;
40
+ --kbq-alert-size-compact-no-title-icon-margin-top: 12px;
41
+ --kbq-alert-size-compact-no-title-icon-padding-top: 2px;
42
+ --kbq-alert-font-title-font-size: 18px;
43
+ --kbq-alert-font-title-line-height: 26px;
44
+ --kbq-alert-font-title-letter-spacing: normal;
45
+ --kbq-alert-font-title-font-weight: 600;
46
+ --kbq-alert-font-title-font-family: 'TT-Positive', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
47
+ 'Helvetica Neue', Arial, sans-serif;
48
+ --kbq-alert-font-title-text-transform: null;
49
+ --kbq-alert-font-title-font-feature-settings: 'calt', 'kern', 'liga';
50
+ --kbq-alert-font-title-compact-font-size: 16px;
51
+ --kbq-alert-font-title-compact-line-height: 24px;
52
+ --kbq-alert-font-title-compact-letter-spacing: -0.011em;
53
+ --kbq-alert-font-title-compact-font-weight: 600;
54
+ --kbq-alert-font-title-compact-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
55
+ Arial, sans-serif;
56
+ --kbq-alert-font-title-compact-text-transform: null;
57
+ --kbq-alert-font-title-compact-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
58
+ --kbq-alert-font-text-font-size: 14px;
59
+ --kbq-alert-font-text-line-height: 20px;
60
+ --kbq-alert-font-text-letter-spacing: -0.006em;
61
+ --kbq-alert-font-text-font-weight: normal;
62
+ --kbq-alert-font-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
63
+ sans-serif;
64
+ --kbq-alert-font-text-text-transform: null;
65
+ --kbq-alert-font-text-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
66
+ }
67
+
68
+ :where(.kbq-light, .theme-light, .kbq-theme-light) {
69
+ --kbq-alert-default-contrast-container-background: hsla(229, 15%, 92%, 100%);
70
+ --kbq-alert-default-contrast-container-title: hsla(229, 15%, 15%, 100%);
71
+ --kbq-alert-default-contrast-container-text: hsla(229, 15%, 15%, 100%);
72
+ --kbq-alert-default-error-container-background: hsla(229, 15%, 92%, 100%);
73
+ --kbq-alert-default-error-container-title: hsla(229, 15%, 15%, 100%);
74
+ --kbq-alert-default-error-container-text: hsla(229, 15%, 15%, 100%);
75
+ --kbq-alert-default-warning-container-background: hsla(229, 15%, 92%, 100%);
76
+ --kbq-alert-default-warning-container-title: hsla(229, 15%, 15%, 100%);
77
+ --kbq-alert-default-warning-container-text: hsla(229, 15%, 15%, 100%);
78
+ --kbq-alert-default-success-container-background: hsla(229, 15%, 92%, 100%);
79
+ --kbq-alert-default-success-container-title: hsla(229, 15%, 15%, 100%);
80
+ --kbq-alert-default-success-container-text: hsla(229, 15%, 15%, 100%);
81
+ --kbq-alert-default-theme-container-background: hsla(229, 15%, 92%, 100%);
82
+ --kbq-alert-default-theme-container-title: hsla(229, 15%, 15%, 100%);
83
+ --kbq-alert-default-theme-container-text: hsla(229, 15%, 15%, 100%);
84
+ --kbq-alert-colored-contrast-container-background: hsla(229, 15%, 92%, 100%);
85
+ --kbq-alert-colored-contrast-container-title: hsla(229, 15%, 15%, 100%);
86
+ --kbq-alert-colored-contrast-container-text: hsla(229, 15%, 15%, 100%);
87
+ --kbq-alert-colored-error-container-background: hsla(7, 97%, 90%, 100%);
88
+ --kbq-alert-colored-error-container-title: hsla(229, 15%, 15%, 100%);
89
+ --kbq-alert-colored-error-container-text: hsla(229, 15%, 15%, 100%);
90
+ --kbq-alert-colored-warning-container-background: hsla(38, 100%, 85%, 100%);
91
+ --kbq-alert-colored-warning-container-title: hsla(229, 15%, 15%, 100%);
92
+ --kbq-alert-colored-warning-container-text: hsla(229, 15%, 15%, 100%);
93
+ --kbq-alert-colored-success-container-background: hsla(104, 64%, 80%, 100%);
94
+ --kbq-alert-colored-success-container-title: hsla(229, 15%, 15%, 100%);
95
+ --kbq-alert-colored-success-container-text: hsla(229, 15%, 15%, 100%);
96
+ --kbq-alert-colored-theme-container-background: hsla(216, 100%, 85%, 100%);
97
+ --kbq-alert-colored-theme-container-title: hsla(229, 15%, 15%, 100%);
98
+ --kbq-alert-colored-theme-container-text: hsla(229, 15%, 15%, 100%);
99
+ }
100
+
101
+ :where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
102
+ --kbq-alert-default-contrast-container-background: hsla(229, 15%, 25%, 100%);
103
+ --kbq-alert-default-contrast-container-title: hsla(229, 15%, 80%, 100%);
104
+ --kbq-alert-default-contrast-container-text: hsla(229, 15%, 80%, 100%);
105
+ --kbq-alert-default-error-container-background: hsla(229, 15%, 25%, 100%);
106
+ --kbq-alert-default-error-container-title: hsla(229, 15%, 80%, 100%);
107
+ --kbq-alert-default-error-container-text: hsla(229, 15%, 80%, 100%);
108
+ --kbq-alert-default-warning-container-background: hsla(229, 15%, 25%, 100%);
109
+ --kbq-alert-default-warning-container-title: hsla(229, 15%, 80%, 100%);
110
+ --kbq-alert-default-warning-container-text: hsla(229, 15%, 80%, 100%);
111
+ --kbq-alert-default-success-container-background: hsla(229, 15%, 25%, 100%);
112
+ --kbq-alert-default-success-container-title: hsla(229, 15%, 80%, 100%);
113
+ --kbq-alert-default-success-container-text: hsla(229, 15%, 80%, 100%);
114
+ --kbq-alert-default-theme-container-background: hsla(229, 15%, 25%, 100%);
115
+ --kbq-alert-default-theme-container-title: hsla(229, 15%, 80%, 100%);
116
+ --kbq-alert-default-theme-container-text: hsla(229, 15%, 80%, 100%);
117
+ --kbq-alert-colored-contrast-container-background: hsla(229, 15%, 25%, 100%);
118
+ --kbq-alert-colored-contrast-container-title: hsla(229, 15%, 80%, 100%);
119
+ --kbq-alert-colored-contrast-container-text: hsla(229, 15%, 80%, 100%);
120
+ --kbq-alert-colored-error-container-background: hsla(7, 97%, 15%, 100%);
121
+ --kbq-alert-colored-error-container-title: hsla(229, 15%, 80%, 100%);
122
+ --kbq-alert-colored-error-container-text: hsla(229, 15%, 80%, 100%);
123
+ --kbq-alert-colored-warning-container-background: hsla(38, 100%, 14%, 100%);
124
+ --kbq-alert-colored-warning-container-title: hsla(229, 15%, 80%, 100%);
125
+ --kbq-alert-colored-warning-container-text: hsla(229, 15%, 80%, 100%);
126
+ --kbq-alert-colored-success-container-background: hsla(104, 64%, 12%, 100%);
127
+ --kbq-alert-colored-success-container-title: hsla(229, 15%, 80%, 100%);
128
+ --kbq-alert-colored-success-container-text: hsla(229, 15%, 80%, 100%);
129
+ --kbq-alert-colored-theme-container-background: hsla(216, 100%, 20%, 100%);
130
+ --kbq-alert-colored-theme-container-title: hsla(229, 15%, 80%, 100%);
131
+ --kbq-alert-colored-theme-container-text: hsla(229, 15%, 80%, 100%);
132
+ }
package/alert/alert.component.scss CHANGED
@@ -3,6 +3,8 @@
3
3
 
4
4
  @use '../core/styles/common/tokens' as *;
5
5
 
6
+ @use './alert-theme' as *;
7
+
6
8
  .kbq-alert {
7
9
  display: flex;
8
10
 
@@ -119,3 +121,6 @@
119
121
  margin-left: kbq-css-variable(alert-size-compact-close-button-margin-left);
120
122
  }
121
123
  }
124
+
125
+ @include kbq-alert-theme();
126
+ @include kbq-alert-typography();
package/autocomplete/_autocomplete-theme.scss CHANGED
@@ -4,11 +4,9 @@
4
4
  @use '../core/styles/theming/theming';
5
5
  @use '../core/styles/common/tokens' as *;
6
6
 
7
- @mixin kbq-autocomplete-theme($theme) {
8
- $select-panel: map.get(map.get($theme, components), select-panel);
9
-
7
+ @mixin kbq-autocomplete-theme {
10
8
  .kbq-autocomplete-panel {
11
- box-shadow: kbq-css-variable(select-panel-dropdown-shadow, map.get($select-panel, shadow));
12
- background: kbq-css-variable(select-panel-dropdown-background, map.get($select-panel, background));
9
+ box-shadow: kbq-css-variable(select-panel-dropdown-shadow);
10
+ background: kbq-css-variable(select-panel-dropdown-background);
13
11
  }
14
12
  }
package/autocomplete/autocomplete-tokens.scss ADDED
@@ -0,0 +1,16 @@
1
+ .kbq-autocomplete-panel {
2
+ --kbq-autocomplete-size-panel-padding: 4px 0;
3
+ --kbq-autocomplete-size-panel-max-height: 256px;
4
+ --kbq-autocomplete-size-panel-border-radius: 8px;
5
+ }
6
+
7
+ :where(.kbq-light, .theme-light, .kbq-theme-light) {
8
+ --kbq-select-panel-dropdown-background: hsla(229, 15%, 100%, 100%);
9
+ --kbq-select-panel-dropdown-shadow: 0 0 0 1px hsla(229, 15%, 6%, 3%), 0 2px 8px hsla(229, 15%, 6%, 6%),
10
+ 0 3px 8px hsla(229, 15%, 6%, 12%);
11
+ }
12
+
13
+ :where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
14
+ --kbq-select-panel-dropdown-background: hsla(229, 15%, 15%, 100%);
15
+ --kbq-select-panel-dropdown-shadow: 0 0 0 1px hsla(229, 100%, 85%, 15%);
16
+ }
package/autocomplete/autocomplete.scss CHANGED
@@ -3,6 +3,8 @@
3
3
 
4
4
  @use '../core/styles/common/tokens' as *;
5
5
 
6
+ @use './autocomplete-theme' as *;
7
+
6
8
  .kbq-autocomplete-panel {
7
9
  visibility: hidden;
8
10
 
@@ -43,3 +45,5 @@
43
45
  margin-top: -1px;
44
46
  }
45
47
  }
48
+
49
+ @include kbq-autocomplete-theme();
package/badge/_badge-theme.scss CHANGED
@@ -4,93 +4,90 @@
4
4
  @use '../core/styles/typography/typography-utils' as *;
5
5
  @use '../core/styles/common/tokens' as *;
6
6
 
7
- @mixin kbq-badge-style($component, $type, $sub-type, $style-name) {
8
- $style: map.get($component, $type, $sub-type, $style-name);
7
+ @mixin kbq-badge-style($type, $sub-type, $style-name) {
9
8
  $base-path: badge-#{$type}-#{$sub-type}-#{$style-name};
10
9
 
11
- color: kbq-css-variable(#{$base-path}-color, map.get($style, color));
12
- background: kbq-css-variable(#{$base-path}-background, map.get($style, background));
10
+ color: kbq-css-variable(#{$base-path}-color);
11
+ background: kbq-css-variable(#{$base-path}-background);
13
12
 
14
13
  & .kbq-badge-caption {
15
- color: kbq-css-variable(#{$base-path}-caption, map.get($style, caption));
14
+ color: kbq-css-variable(#{$base-path}-caption);
16
15
  }
17
16
 
18
17
  & .kbq-icon {
19
- color: kbq-css-variable(#{$base-path}-icon, map.get($style, icon)) !important;
18
+ color: kbq-css-variable(#{$base-path}-icon) !important;
20
19
  }
21
20
 
22
21
  @if $type == filled {
23
22
  border: transparent;
24
23
  } @else {
25
- border-color: kbq-css-variable(#{$base-path}-border, map.get($style, border));
24
+ border-color: kbq-css-variable(#{$base-path}-border);
26
25
  }
27
26
  }
28
27
 
29
- @mixin kbq-badge-theme($theme) {
30
- $badge: map.get(map.get($theme, components), badge);
31
-
28
+ @mixin kbq-badge-theme() {
32
29
  .kbq-badge-filled {
33
30
  &.kbq-badge_fade-contrast {
34
- @include kbq-badge-style($badge, filled, fade-on, contrast);
31
+ @include kbq-badge-style(filled, fade-on, contrast);
35
32
  }
36
33
 
37
34
  &.kbq-badge_fade-theme {
38
- @include kbq-badge-style($badge, filled, fade-on, theme);
35
+ @include kbq-badge-style(filled, fade-on, theme);
39
36
  }
40
37
 
41
38
  &.kbq-badge_fade-success {
42
- @include kbq-badge-style($badge, filled, fade-on, success);
39
+ @include kbq-badge-style(filled, fade-on, success);
43
40
  }
44
41
 
45
42
  &.kbq-badge_fade-warning {
46
- @include kbq-badge-style($badge, filled, fade-on, warning);
43
+ @include kbq-badge-style(filled, fade-on, warning);
47
44
  }
48
45
 
49
46
  &.kbq-badge_fade-error {
50
- @include kbq-badge-style($badge, filled, fade-on, error);
47
+ @include kbq-badge-style(filled, fade-on, error);
51
48
  }
52
49
 
53
50
  &.kbq-badge_theme {
54
- @include kbq-badge-style($badge, filled, fade-off, theme);
51
+ @include kbq-badge-style(filled, fade-off, theme);
55
52
  }
56
53
 
57
54
  &.kbq-badge_success {
58
- @include kbq-badge-style($badge, filled, fade-off, success);
55
+ @include kbq-badge-style(filled, fade-off, success);
59
56
  }
60
57
 
61
58
  &.kbq-badge_warning {
62
- @include kbq-badge-style($badge, filled, fade-off, warning);
59
+ @include kbq-badge-style(filled, fade-off, warning);
63
60
  }
64
61
 
65
62
  &.kbq-badge_error {
66
- @include kbq-badge-style($badge, filled, fade-off, error);
63
+ @include kbq-badge-style(filled, fade-off, error);
67
64
  }
68
65
  }
69
66
 
70
67
  .kbq-badge-outline {
71
68
  &.kbq-badge_fade-contrast {
72
- @include kbq-badge-style($badge, outline, fade-on, contrast);
69
+ @include kbq-badge-style(outline, fade-on, contrast);
73
70
  }
74
71
 
75
72
  &.kbq-badge_fade-theme {
76
- @include kbq-badge-style($badge, outline, fade-on, theme);
73
+ @include kbq-badge-style(outline, fade-on, theme);
77
74
  }
78
75
 
79
76
  &.kbq-badge_fade-success {
80
- @include kbq-badge-style($badge, outline, fade-on, success);
77
+ @include kbq-badge-style(outline, fade-on, success);
81
78
  }
82
79
 
83
80
  &.kbq-badge_fade-warning {
84
- @include kbq-badge-style($badge, outline, fade-on, warning);
81
+ @include kbq-badge-style(outline, fade-on, warning);
85
82
  }
86
83
 
87
84
  &.kbq-badge_fade-error {
88
- @include kbq-badge-style($badge, outline, fade-on, error);
85
+ @include kbq-badge-style(outline, fade-on, error);
89
86
  }
90
87
  }
91
88
  }
92
89
 
93
- @mixin kbq-badge-typography($config) {
90
+ @mixin kbq-badge-typography() {
94
91
  .kbq-badge {
95
92
  @include kbq-typography-css-variables(badge, normal-default);
96
93
 
package/badge/badge-tokens.scss ADDED
@@ -0,0 +1,185 @@
1
+ .kbq-badge {
2
+ --kbq-badge-size-normal-height: 24px;
3
+ --kbq-badge-size-normal-icon-left-width: 16px;
4
+ --kbq-badge-size-normal-icon-left-height: 16px;
5
+ --kbq-badge-size-normal-icon-left-margin-right: 4px;
6
+ --kbq-badge-size-normal-icon-right-width: 16px;
7
+ --kbq-badge-size-normal-icon-right-height: 16px;
8
+ --kbq-badge-size-normal-icon-right-margin-left: 4px;
9
+ --kbq-badge-size-normal-horizontal-padding: 8px;
10
+ --kbq-badge-size-normal-content-padding: 4px;
11
+ --kbq-badge-size-normal-border-width: 1px;
12
+ --kbq-badge-size-normal-border-radius: 4px;
13
+ --kbq-badge-size-compact-height: 16px;
14
+ --kbq-badge-size-compact-icon-left-width: 16px;
15
+ --kbq-badge-size-compact-icon-left-height: 16px;
16
+ --kbq-badge-size-compact-icon-left-margin-right: 2px;
17
+ --kbq-badge-size-compact-icon-right-width: 16px;
18
+ --kbq-badge-size-compact-icon-right-height: 16px;
19
+ --kbq-badge-size-compact-icon-right-margin-left: 2px;
20
+ --kbq-badge-size-compact-vertical-padding: 0;
21
+ --kbq-badge-size-compact-horizontal-padding: 4px;
22
+ --kbq-badge-size-compact-content-padding: 2px;
23
+ --kbq-badge-size-compact-border-width: 1px;
24
+ --kbq-badge-size-compact-border-radius: 4px;
25
+ --kbq-badge-font-normal-default-font-size: 14px;
26
+ --kbq-badge-font-normal-default-line-height: 20px;
27
+ --kbq-badge-font-normal-default-letter-spacing: -0.006em;
28
+ --kbq-badge-font-normal-default-font-weight: 500;
29
+ --kbq-badge-font-normal-default-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
30
+ Arial, sans-serif;
31
+ --kbq-badge-font-normal-default-text-transform: null;
32
+ --kbq-badge-font-normal-default-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
33
+ --kbq-badge-font-normal-caption-font-size: 14px;
34
+ --kbq-badge-font-normal-caption-line-height: 20px;
35
+ --kbq-badge-font-normal-caption-letter-spacing: -0.006em;
36
+ --kbq-badge-font-normal-caption-font-weight: normal;
37
+ --kbq-badge-font-normal-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
38
+ Arial, sans-serif;
39
+ --kbq-badge-font-normal-caption-text-transform: null;
40
+ --kbq-badge-font-normal-caption-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
41
+ --kbq-badge-font-compact-default-font-size: 12px;
42
+ --kbq-badge-font-compact-default-line-height: 16px;
43
+ --kbq-badge-font-compact-default-letter-spacing: normal;
44
+ --kbq-badge-font-compact-default-font-weight: 500;
45
+ --kbq-badge-font-compact-default-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
46
+ Arial, sans-serif;
47
+ --kbq-badge-font-compact-default-text-transform: null;
48
+ --kbq-badge-font-compact-default-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
49
+ --kbq-badge-font-compact-caption-font-size: 12px;
50
+ --kbq-badge-font-compact-caption-line-height: 16px;
51
+ --kbq-badge-font-compact-caption-letter-spacing: normal;
52
+ --kbq-badge-font-compact-caption-font-weight: normal;
53
+ --kbq-badge-font-compact-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
54
+ Arial, sans-serif;
55
+ --kbq-badge-font-compact-caption-text-transform: null;
56
+ --kbq-badge-font-compact-caption-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
57
+ }
58
+
59
+ :where(.kbq-light, .theme-light, .kbq-theme-light) {
60
+ --kbq-badge-filled-fade-off-theme-background: hsla(216, 100%, 50%, 100%);
61
+ --kbq-badge-filled-fade-off-theme-color: hsla(0, 0%, 100%, 100%);
62
+ --kbq-badge-filled-fade-off-theme-caption: hsla(0, 0%, 100%, 100%);
63
+ --kbq-badge-filled-fade-off-theme-icon: hsla(0, 0%, 100%, 100%);
64
+ --kbq-badge-filled-fade-off-success-background: hsla(104, 64%, 45%, 100%);
65
+ --kbq-badge-filled-fade-off-success-color: hsla(0, 0%, 100%, 100%);
66
+ --kbq-badge-filled-fade-off-success-caption: hsla(0, 0%, 100%, 100%);
67
+ --kbq-badge-filled-fade-off-success-icon: hsla(0, 0%, 100%, 100%);
68
+ --kbq-badge-filled-fade-off-warning-background: hsla(38, 100%, 50%, 100%);
69
+ --kbq-badge-filled-fade-off-warning-color: hsla(0, 0%, 100%, 100%);
70
+ --kbq-badge-filled-fade-off-warning-caption: hsla(0, 0%, 100%, 100%);
71
+ --kbq-badge-filled-fade-off-warning-icon: hsla(0, 0%, 100%, 100%);
72
+ --kbq-badge-filled-fade-off-error-background: hsla(7, 97%, 60%, 100%);
73
+ --kbq-badge-filled-fade-off-error-color: hsla(0, 0%, 100%, 100%);
74
+ --kbq-badge-filled-fade-off-error-caption: hsla(0, 0%, 100%, 100%);
75
+ --kbq-badge-filled-fade-off-error-icon: hsla(0, 0%, 100%, 100%);
76
+ --kbq-badge-filled-fade-on-theme-background: hsla(216, 100%, 85%, 100%);
77
+ --kbq-badge-filled-fade-on-theme-color: hsla(216, 100%, 50%, 100%);
78
+ --kbq-badge-filled-fade-on-theme-caption: hsla(216, 100%, 50%, 100%);
79
+ --kbq-badge-filled-fade-on-theme-icon: hsla(216, 100%, 50%, 100%);
80
+ --kbq-badge-filled-fade-on-contrast-background: hsla(229, 15%, 92%, 100%);
81
+ --kbq-badge-filled-fade-on-contrast-color: hsla(229, 15%, 15%, 100%);
82
+ --kbq-badge-filled-fade-on-contrast-caption: hsla(229, 15%, 15%, 100%);
83
+ --kbq-badge-filled-fade-on-contrast-icon: hsla(229, 15%, 60%, 100%);
84
+ --kbq-badge-filled-fade-on-success-background: hsla(104, 64%, 80%, 100%);
85
+ --kbq-badge-filled-fade-on-success-color: hsla(104, 64%, 30%, 100%);
86
+ --kbq-badge-filled-fade-on-success-caption: hsla(104, 64%, 30%, 100%);
87
+ --kbq-badge-filled-fade-on-success-icon: hsla(104, 64%, 40%, 100%);
88
+ --kbq-badge-filled-fade-on-warning-background: hsla(38, 100%, 85%, 100%);
89
+ --kbq-badge-filled-fade-on-warning-color: hsla(38, 100%, 33%, 100%);
90
+ --kbq-badge-filled-fade-on-warning-caption: hsla(38, 100%, 33%, 100%);
91
+ --kbq-badge-filled-fade-on-warning-icon: hsla(38, 100%, 42%, 100%);
92
+ --kbq-badge-filled-fade-on-error-background: hsla(7, 97%, 90%, 100%);
93
+ --kbq-badge-filled-fade-on-error-color: hsla(7, 97%, 40%, 100%);
94
+ --kbq-badge-filled-fade-on-error-caption: hsla(7, 97%, 40%, 100%);
95
+ --kbq-badge-filled-fade-on-error-icon: hsla(7, 97%, 45%, 100%);
96
+ --kbq-badge-outline-fade-on-theme-background: transparent;
97
+ --kbq-badge-outline-fade-on-theme-color: hsla(216, 100%, 50%, 100%);
98
+ --kbq-badge-outline-fade-on-theme-border: hsla(216, 100%, 65%, 100%);
99
+ --kbq-badge-outline-fade-on-theme-caption: hsla(216, 100%, 50%, 100%);
100
+ --kbq-badge-outline-fade-on-theme-icon: hsla(216, 100%, 50%, 100%);
101
+ --kbq-badge-outline-fade-on-contrast-background: transparent;
102
+ --kbq-badge-outline-fade-on-contrast-color: hsla(229, 15%, 15%, 100%);
103
+ --kbq-badge-outline-fade-on-contrast-border: hsla(229, 15%, 70%, 100%);
104
+ --kbq-badge-outline-fade-on-contrast-caption: hsla(229, 15%, 15%, 100%);
105
+ --kbq-badge-outline-fade-on-contrast-icon: hsla(229, 15%, 60%, 100%);
106
+ --kbq-badge-outline-fade-on-success-background: transparent;
107
+ --kbq-badge-outline-fade-on-success-color: hsla(104, 64%, 30%, 100%);
108
+ --kbq-badge-outline-fade-on-success-border: hsla(104, 64%, 45%, 100%);
109
+ --kbq-badge-outline-fade-on-success-caption: hsla(104, 64%, 30%, 100%);
110
+ --kbq-badge-outline-fade-on-success-icon: hsla(104, 64%, 40%, 100%);
111
+ --kbq-badge-outline-fade-on-warning-background: transparent;
112
+ --kbq-badge-outline-fade-on-warning-color: hsla(38, 100%, 33%, 100%);
113
+ --kbq-badge-outline-fade-on-warning-border: hsla(38, 100%, 55%, 100%);
114
+ --kbq-badge-outline-fade-on-warning-caption: hsla(38, 100%, 33%, 100%);
115
+ --kbq-badge-outline-fade-on-warning-icon: hsla(38, 100%, 42%, 100%);
116
+ --kbq-badge-outline-fade-on-error-background: transparent;
117
+ --kbq-badge-outline-fade-on-error-color: hsla(7, 97%, 40%, 100%);
118
+ --kbq-badge-outline-fade-on-error-border: hsla(7, 97%, 65%, 100%);
119
+ --kbq-badge-outline-fade-on-error-caption: hsla(7, 97%, 40%, 100%);
120
+ --kbq-badge-outline-fade-on-error-icon: hsla(7, 97%, 45%, 100%);
121
+ }
122
+
123
+ :where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
124
+ --kbq-badge-filled-fade-off-theme-background: hsla(216, 100%, 50%, 100%);
125
+ --kbq-badge-filled-fade-off-theme-color: hsla(0, 0%, 100%, 100%);
126
+ --kbq-badge-filled-fade-off-theme-caption: hsla(0, 0%, 100%, 100%);
127
+ --kbq-badge-filled-fade-off-theme-icon: hsla(0, 0%, 100%, 100%);
128
+ --kbq-badge-filled-fade-off-success-background: hsla(104, 64%, 40%, 100%);
129
+ --kbq-badge-filled-fade-off-success-color: hsla(0, 0%, 100%, 100%);
130
+ --kbq-badge-filled-fade-off-success-caption: hsla(0, 0%, 100%, 100%);
131
+ --kbq-badge-filled-fade-off-success-icon: hsla(0, 0%, 100%, 100%);
132
+ --kbq-badge-filled-fade-off-warning-background: hsla(38, 100%, 39%, 100%);
133
+ --kbq-badge-filled-fade-off-warning-color: hsla(0, 0%, 100%, 100%);
134
+ --kbq-badge-filled-fade-off-warning-caption: hsla(0, 0%, 100%, 100%);
135
+ --kbq-badge-filled-fade-off-warning-icon: hsla(0, 0%, 100%, 100%);
136
+ --kbq-badge-filled-fade-off-error-background: hsla(7, 97%, 41%, 100%);
137
+ --kbq-badge-filled-fade-off-error-color: hsla(0, 0%, 100%, 100%);
138
+ --kbq-badge-filled-fade-off-error-caption: hsla(0, 0%, 100%, 100%);
139
+ --kbq-badge-filled-fade-off-error-icon: hsla(0, 0%, 100%, 100%);
140
+ --kbq-badge-filled-fade-on-theme-background: hsla(216, 100%, 20%, 100%);
141
+ --kbq-badge-filled-fade-on-theme-color: hsla(216, 100%, 65%, 100%);
142
+ --kbq-badge-filled-fade-on-theme-caption: hsla(216, 100%, 65%, 100%);
143
+ --kbq-badge-filled-fade-on-theme-icon: hsla(216, 100%, 65%, 100%);
144
+ --kbq-badge-filled-fade-on-contrast-background: hsla(229, 15%, 25%, 100%);
145
+ --kbq-badge-filled-fade-on-contrast-color: hsla(229, 15%, 80%, 100%);
146
+ --kbq-badge-filled-fade-on-contrast-caption: hsla(229, 15%, 80%, 100%);
147
+ --kbq-badge-filled-fade-on-contrast-icon: hsla(229, 15%, 45%, 100%);
148
+ --kbq-badge-filled-fade-on-success-background: hsla(104, 64%, 12%, 100%);
149
+ --kbq-badge-filled-fade-on-success-color: hsla(104, 64%, 45%, 100%);
150
+ --kbq-badge-filled-fade-on-success-caption: hsla(104, 64%, 45%, 100%);
151
+ --kbq-badge-filled-fade-on-success-icon: hsla(104, 64%, 45%, 100%);
152
+ --kbq-badge-filled-fade-on-warning-background: hsla(38, 100%, 14%, 100%);
153
+ --kbq-badge-filled-fade-on-warning-color: hsla(38, 100%, 60%, 100%);
154
+ --kbq-badge-filled-fade-on-warning-caption: hsla(38, 100%, 60%, 100%);
155
+ --kbq-badge-filled-fade-on-warning-icon: hsla(38, 100%, 60%, 100%);
156
+ --kbq-badge-filled-fade-on-error-background: hsla(7, 97%, 15%, 100%);
157
+ --kbq-badge-filled-fade-on-error-color: hsla(7, 97%, 60%, 100%);
158
+ --kbq-badge-filled-fade-on-error-caption: hsla(7, 97%, 60%, 100%);
159
+ --kbq-badge-filled-fade-on-error-icon: hsla(7, 97%, 60%, 100%);
160
+ --kbq-badge-outline-fade-on-theme-background: transparent;
161
+ --kbq-badge-outline-fade-on-theme-color: hsla(216, 100%, 65%, 100%);
162
+ --kbq-badge-outline-fade-on-theme-border: hsla(216, 100%, 30%, 100%);
163
+ --kbq-badge-outline-fade-on-theme-caption: hsla(216, 100%, 65%, 100%);
164
+ --kbq-badge-outline-fade-on-theme-icon: hsla(216, 100%, 65%, 100%);
165
+ --kbq-badge-outline-fade-on-contrast-background: transparent;
166
+ --kbq-badge-outline-fade-on-contrast-color: hsla(229, 15%, 80%, 100%);
167
+ --kbq-badge-outline-fade-on-contrast-border: hsla(229, 15%, 30%, 100%);
168
+ --kbq-badge-outline-fade-on-contrast-caption: hsla(229, 15%, 80%, 100%);
169
+ --kbq-badge-outline-fade-on-contrast-icon: hsla(229, 15%, 45%, 100%);
170
+ --kbq-badge-outline-fade-on-success-background: transparent;
171
+ --kbq-badge-outline-fade-on-success-color: hsla(104, 64%, 45%, 100%);
172
+ --kbq-badge-outline-fade-on-success-border: hsla(104, 64%, 20%, 100%);
173
+ --kbq-badge-outline-fade-on-success-caption: hsla(104, 64%, 45%, 100%);
174
+ --kbq-badge-outline-fade-on-success-icon: hsla(104, 64%, 45%, 100%);
175
+ --kbq-badge-outline-fade-on-warning-background: transparent;
176
+ --kbq-badge-outline-fade-on-warning-color: hsla(38, 100%, 60%, 100%);
177
+ --kbq-badge-outline-fade-on-warning-border: hsla(38, 100%, 20%, 100%);
178
+ --kbq-badge-outline-fade-on-warning-caption: hsla(38, 100%, 60%, 100%);
179
+ --kbq-badge-outline-fade-on-warning-icon: hsla(38, 100%, 60%, 100%);
180
+ --kbq-badge-outline-fade-on-error-background: transparent;
181
+ --kbq-badge-outline-fade-on-error-color: hsla(7, 97%, 60%, 100%);
182
+ --kbq-badge-outline-fade-on-error-border: hsla(7, 97%, 35%, 100%);
183
+ --kbq-badge-outline-fade-on-error-caption: hsla(7, 97%, 60%, 100%);
184
+ --kbq-badge-outline-fade-on-error-icon: hsla(7, 97%, 60%, 100%);
185
+ }
package/badge/badge.component.scss CHANGED
@@ -3,6 +3,8 @@
3
3
 
4
4
  @use '../core/styles/common/tokens' as *;
5
5
 
6
+ @use './badge-theme' as *;
7
+
6
8
  .kbq-badge {
7
9
  display: inline-flex;
8
10
  flex-direction: row;
@@ -60,3 +62,6 @@
60
62
  }
61
63
  }
62
64
  }
65
+
66
+ @include kbq-badge-theme();
67
+ @include kbq-badge-typography();