@koobiq/components 17.3.0 → 17.5.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 (158) hide show
  1. package/alert/_alert-theme.scss +16 -20
  2. package/alert/alert-tokens.scss +132 -0
  3. package/alert/alert.component.scss +11 -6
  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 +212 -212
  20. package/core/highlight/_highlight-theme.scss +1 -1
  21. package/core/pop-up/pop-up-styles.d.ts +2 -2
  22. package/core/pop-up/pop-up-trigger.d.ts +8 -9
  23. package/core/pop-up/pop-up.d.ts +3 -3
  24. package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +12 -15
  25. package/core/selection/pseudo-checkbox/pseudo-checkbox-tokens.scss +140 -0
  26. package/core/selection/pseudo-checkbox/pseudo-checkbox.scss +3 -2
  27. package/core/styles/_koobiq-theme.scss +3 -42
  28. package/core/styles/theming/_theming.scss +1 -0
  29. package/datepicker/_datepicker-theme.scss +17 -43
  30. package/datepicker/calendar-header.component.d.ts +1 -0
  31. package/datepicker/calendar.scss +0 -3
  32. package/datepicker/datepicker-content.scss +5 -6
  33. package/datepicker/datepicker-tokens.scss +59 -0
  34. package/dropdown/_dropdown-theme.scss +15 -24
  35. package/dropdown/dropdown-tokens.scss +111 -0
  36. package/dropdown/dropdown.scss +5 -0
  37. package/ellipsis-center/ellipsis-center.directive.d.ts +2 -6
  38. package/esm2022/alert/alert.component.mjs +3 -3
  39. package/esm2022/autocomplete/autocomplete.component.mjs +3 -3
  40. package/esm2022/badge/badge.component.mjs +3 -3
  41. package/esm2022/button/button.component.mjs +3 -3
  42. package/esm2022/button-toggle/button-toggle.component.mjs +3 -3
  43. package/esm2022/checkbox/checkbox.mjs +3 -3
  44. package/esm2022/core/common-behaviors/common-module.mjs +2 -2
  45. package/esm2022/core/pop-up/pop-up-styles.mjs +7 -9
  46. package/esm2022/core/pop-up/pop-up-trigger.mjs +13 -16
  47. package/esm2022/core/pop-up/pop-up.mjs +7 -6
  48. package/esm2022/core/selection/pseudo-checkbox/pseudo-checkbox.mjs +3 -3
  49. package/esm2022/core/version.mjs +2 -2
  50. package/esm2022/datepicker/calendar-header.component.mjs +7 -3
  51. package/esm2022/datepicker/datepicker.component.mjs +3 -3
  52. package/esm2022/dropdown/dropdown.component.mjs +3 -3
  53. package/esm2022/ellipsis-center/ellipsis-center.directive.mjs +12 -23
  54. package/esm2022/form-field/form-field.mjs +3 -3
  55. package/esm2022/form-field/hint.mjs +3 -3
  56. package/esm2022/form-field/password-hint.mjs +2 -2
  57. package/esm2022/form-field/password-toggle.mjs +10 -21
  58. package/esm2022/form-field/stepper.mjs +2 -2
  59. package/esm2022/icon/icon-button.component.mjs +3 -3
  60. package/esm2022/icon/icon-item.component.mjs +3 -3
  61. package/esm2022/icon/icon.component.mjs +3 -3
  62. package/esm2022/markdown/markdown.component.mjs +2 -2
  63. package/esm2022/modal/modal-ref.class.mjs +1 -1
  64. package/esm2022/modal/modal.component.mjs +1 -1
  65. package/esm2022/modal/modal.service.mjs +19 -13
  66. package/esm2022/modal/modal.type.mjs +1 -1
  67. package/esm2022/navbar/navbar-item.component.mjs +16 -30
  68. package/esm2022/popover/popover-confirm.component.mjs +13 -22
  69. package/esm2022/popover/popover.component.mjs +71 -34
  70. package/esm2022/popover/popover.module.mjs +6 -4
  71. package/esm2022/select/select-option.directive.mjs +7 -18
  72. package/esm2022/timezone/timezone-option.directive.mjs +7 -18
  73. package/esm2022/title/title.directive.mjs +7 -18
  74. package/esm2022/tooltip/tooltip.component.mjs +26 -45
  75. package/fesm2022/koobiq-components-alert.mjs +2 -2
  76. package/fesm2022/koobiq-components-alert.mjs.map +1 -1
  77. package/fesm2022/koobiq-components-autocomplete.mjs +2 -2
  78. package/fesm2022/koobiq-components-autocomplete.mjs.map +1 -1
  79. package/fesm2022/koobiq-components-badge.mjs +2 -2
  80. package/fesm2022/koobiq-components-badge.mjs.map +1 -1
  81. package/fesm2022/koobiq-components-button-toggle.mjs +2 -2
  82. package/fesm2022/koobiq-components-button-toggle.mjs.map +1 -1
  83. package/fesm2022/koobiq-components-button.mjs +2 -2
  84. package/fesm2022/koobiq-components-button.mjs.map +1 -1
  85. package/fesm2022/koobiq-components-checkbox.mjs +2 -2
  86. package/fesm2022/koobiq-components-checkbox.mjs.map +1 -1
  87. package/fesm2022/koobiq-components-core.mjs +29 -32
  88. package/fesm2022/koobiq-components-core.mjs.map +1 -1
  89. package/fesm2022/koobiq-components-datepicker.mjs +8 -4
  90. package/fesm2022/koobiq-components-datepicker.mjs.map +1 -1
  91. package/fesm2022/koobiq-components-dropdown.mjs +2 -2
  92. package/fesm2022/koobiq-components-dropdown.mjs.map +1 -1
  93. package/fesm2022/koobiq-components-ellipsis-center.mjs +11 -19
  94. package/fesm2022/koobiq-components-ellipsis-center.mjs.map +1 -1
  95. package/fesm2022/koobiq-components-form-field.mjs +27 -34
  96. package/fesm2022/koobiq-components-form-field.mjs.map +1 -1
  97. package/fesm2022/koobiq-components-icon.mjs +6 -6
  98. package/fesm2022/koobiq-components-icon.mjs.map +1 -1
  99. package/fesm2022/koobiq-components-markdown.mjs +2 -2
  100. package/fesm2022/koobiq-components-markdown.mjs.map +1 -1
  101. package/fesm2022/koobiq-components-modal.mjs +18 -12
  102. package/fesm2022/koobiq-components-modal.mjs.map +1 -1
  103. package/fesm2022/koobiq-components-navbar.mjs +14 -26
  104. package/fesm2022/koobiq-components-navbar.mjs.map +1 -1
  105. package/fesm2022/koobiq-components-popover.mjs +86 -53
  106. package/fesm2022/koobiq-components-popover.mjs.map +1 -1
  107. package/fesm2022/koobiq-components-select.mjs +14 -20
  108. package/fesm2022/koobiq-components-select.mjs.map +1 -1
  109. package/fesm2022/koobiq-components-timezone.mjs +10 -17
  110. package/fesm2022/koobiq-components-timezone.mjs.map +1 -1
  111. package/fesm2022/koobiq-components-title.mjs +6 -14
  112. package/fesm2022/koobiq-components-title.mjs.map +1 -1
  113. package/fesm2022/koobiq-components-tooltip.mjs +25 -42
  114. package/fesm2022/koobiq-components-tooltip.mjs.map +1 -1
  115. package/form-field/_form-field-theme.scss +21 -47
  116. package/form-field/_hint-theme.scss +13 -17
  117. package/form-field/form-field-tokens.scss +69 -0
  118. package/form-field/form-field.scss +4 -2
  119. package/form-field/hint-tokens.scss +60 -0
  120. package/form-field/hint.scss +5 -0
  121. package/form-field/password-toggle.d.ts +3 -6
  122. package/form-field/stepper.scss +4 -0
  123. package/icon/_icon-button-theme.scss +27 -65
  124. package/icon/_icon-item-theme.scss +14 -17
  125. package/icon/_icon-theme.scss +7 -12
  126. package/icon/icon-button-tokens.scss +67 -0
  127. package/icon/icon-button.scss +4 -0
  128. package/icon/icon-item-tokens.scss +52 -0
  129. package/icon/icon-item.scss +4 -0
  130. package/icon/icon-tokens.scss +17 -0
  131. package/icon/icon.scss +4 -0
  132. package/input/_input-theme.scss +1 -5
  133. package/input/input-tokens.scss +12 -0
  134. package/input/input.scss +4 -5
  135. package/link/_link-theme.scss +18 -26
  136. package/link/link-tokens.scss +67 -0
  137. package/markdown/markdown.scss +11 -6
  138. package/modal/modal-ref.class.d.ts +3 -3
  139. package/modal/modal.component.d.ts +2 -2
  140. package/modal/modal.service.d.ts +16 -11
  141. package/modal/modal.type.d.ts +9 -6
  142. package/navbar/_navbar-theme.scss +2 -2
  143. package/navbar/navbar-item.component.d.ts +5 -7
  144. package/package.json +13 -9
  145. package/popover/_popover-theme.scss +5 -0
  146. package/popover/popover-confirm.component.d.ts +3 -6
  147. package/popover/popover.component.d.ts +20 -9
  148. package/popover/popover.module.d.ts +3 -1
  149. package/popover/popover.scss +32 -0
  150. package/prebuilt-themes/dark-theme.css +1 -1
  151. package/prebuilt-themes/light-theme.css +1 -1
  152. package/schematics/ng-add/index.js +4 -4
  153. package/select/select-option.directive.d.ts +3 -6
  154. package/splitter/splitter.scss +3 -3
  155. package/table/_table-theme.scss +2 -2
  156. package/timezone/timezone-option.directive.d.ts +3 -6
  157. package/title/title.directive.d.ts +3 -6
  158. package/tooltip/tooltip.component.d.ts +8 -11
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
 
@@ -58,10 +60,10 @@
58
60
  & .kbq-alert__button-stack {
59
61
  padding-top: kbq-css-variable(alert-size-normal-button-stack-padding-top);
60
62
  padding-bottom: kbq-css-variable(alert-size-normal-button-stack-padding-bottom);
63
+ }
61
64
 
62
- &_has-button {
63
- padding-top: 12px;
64
- }
65
+ & .kbq-alert__button-stack_has-button {
66
+ padding-top: 12px;
65
67
  }
66
68
 
67
69
  & .kbq-alert__close-button {
@@ -108,10 +110,10 @@
108
110
  & .kbq-alert__button-stack {
109
111
  padding-top: kbq-css-variable(alert-size-compact-button-stack-padding-top);
110
112
  padding-bottom: kbq-css-variable(alert-size-compact-button-stack-padding-bottom);
113
+ }
111
114
 
112
- &_has-button {
113
- padding-top: 12px;
114
- }
115
+ & .kbq-alert__button-stack_has-button {
116
+ padding-top: 12px;
115
117
  }
116
118
 
117
119
  & .kbq-alert__close-button {
@@ -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%, 80%, 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();