@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/checkbox/_checkbox-theme.scss CHANGED
@@ -4,47 +4,40 @@
4
4
  @use '../core/styles/typography/typography-utils' as *;
5
5
  @use '../core/styles/common/tokens' as *;
6
6
 
7
- @mixin kbq-checkbox-color($component, $style-name) {
8
- $style: map.get($component, $style-name);
7
+ @mixin kbq-checkbox-color($style-name) {
9
8
  $base: checkbox-#{$style-name};
10
9
 
11
10
  .kbq-checkbox__frame {
12
- border-color: kbq-css-variable(#{$base}-default-border, map.get($style, default, border));
13
-
14
- background-color: kbq-css-variable(#{$base}-default-background, map.get($style, default, background));
11
+ border-color: kbq-css-variable(#{$base}-default-border);
12
+ background-color: kbq-css-variable(#{$base}-default-background);
15
13
 
16
14
  & .kbq-checkbox-checkmark,
17
15
  & .kbq-checkbox-mixedmark {
18
- color: kbq-css-variable(#{$base}-default-color, map.get($style, default, color));
16
+ color: kbq-css-variable(#{$base}-default-color);
19
17
  }
20
18
  }
21
19
 
22
20
  .kbq-checkbox-label {
23
- color: kbq-css-variable(#{$base}-default-text, map.get($style, default, text));
21
+ color: kbq-css-variable(#{$base}-default-text);
24
22
  }
25
23
 
26
24
  & .kbq-hint .kbq-hint__text {
27
- color: kbq-css-variable(#{$base}-default-caption, map.get($style, default, caption));
25
+ color: kbq-css-variable(#{$base}-default-caption);
28
26
  }
29
27
 
30
28
  &:hover,
31
29
  &.kbq-hover {
32
30
  .kbq-checkbox__frame {
33
- border-color: kbq-css-variable(#{$base}-states-hover-border, map.get($style, hover, border));
34
-
35
- background-color: kbq-css-variable(#{$base}-states-hover-background, map.get($style, hover, background));
31
+ border-color: kbq-css-variable(#{$base}-states-hover-border);
32
+ background-color: kbq-css-variable(#{$base}-states-hover-background);
36
33
  }
37
34
  }
38
35
 
39
36
  &.kbq-checked,
40
37
  &.kbq-indeterminate {
41
38
  .kbq-checkbox__frame {
42
- border-color: kbq-css-variable(#{$base}-states-checked-border, map.get($style, checked, border));
43
-
44
- background-color: kbq-css-variable(
45
- #{$base}-states-checked-background,
46
- map.get($style, checked, background)
47
- );
39
+ border-color: kbq-css-variable(#{$base}-states-checked-border);
40
+ background-color: kbq-css-variable(#{$base}-states-checked-background);
48
41
  }
49
42
  }
50
43
 
@@ -53,84 +46,60 @@
53
46
  &:hover,
54
47
  &.kbq-hover {
55
48
  .kbq-checkbox__frame {
56
- border-color: kbq-css-variable(
57
- #{$base}-states-checked-hover-border,
58
- map.get($style, checked-hover, border)
59
- );
60
-
61
- background-color: kbq-css-variable(
62
- #{$base}-states-checked-hover-background,
63
- map.get($style, checked-hover, background)
64
- );
49
+ border-color: kbq-css-variable(#{$base}-states-checked-hover-border);
50
+ background-color: kbq-css-variable(#{$base}-states-checked-hover-background);
65
51
  }
66
52
  }
67
53
 
68
54
  & .kbq-checkbox-input.cdk-keyboard-focused {
69
55
  + .kbq-checkbox__frame {
70
- border-color: kbq-css-variable(
71
- #{$base}-states-checked-focused-border,
72
- map.get($style, checked-focused, border)
73
- );
74
- background-color: kbq-css-variable(
75
- #{$base}-states-checked-focused-background,
76
- map.get($style, checked-focused, background)
77
- );
78
- outline: kbq-css-variable(
79
- #{$base}-states-checked-focused-outline,
80
- map.get($style, checked-focused, outline)
81
- );
56
+ border-color: kbq-css-variable(#{$base}-states-checked-focused-border);
57
+ background-color: kbq-css-variable(#{$base}-states-checked-focused-background);
58
+ outline: kbq-css-variable(#{$base}-states-checked-focused-outline);
82
59
  }
83
60
  }
84
61
  }
85
62
 
86
63
  & .kbq-checkbox-input.cdk-keyboard-focused {
87
64
  + .kbq-checkbox__frame {
88
- border-color: kbq-css-variable(#{$base}-states-focused-border, map.get($style, focused, border));
89
- background-color: kbq-css-variable(
90
- #{$base}-states-focused-background,
91
- map.get($style, focused, background)
92
- );
93
- outline: kbq-css-variable(#{$base}-states-focused-outline, map.get($style, focused, outline));
65
+ border-color: kbq-css-variable(#{$base}-states-focused-border);
66
+ background-color: kbq-css-variable(#{$base}-states-focused-background);
67
+ outline: kbq-css-variable(#{$base}-states-focused-outline);
94
68
  }
95
69
  }
96
70
 
97
71
  &.kbq-disabled {
98
72
  .kbq-checkbox__frame {
99
- border-color: kbq-css-variable(#{$base}-states-disabled-border, map.get($style, disabled, border));
100
- background-color: kbq-css-variable(
101
- #{$base}-states-disabled-background,
102
- map.get($style, disabled, background)
103
- );
73
+ border-color: kbq-css-variable(#{$base}-states-disabled-border);
74
+ background-color: kbq-css-variable(#{$base}-states-disabled-background);
104
75
 
105
76
  & .kbq-checkbox-checkmark,
106
77
  & .kbq-checkbox-mixedmark {
107
- color: kbq-css-variable(#{$base}-states-disabled-color, map.get($style, disabled, color));
78
+ color: kbq-css-variable(#{$base}-states-disabled-color);
108
79
  }
109
80
  }
110
81
 
111
82
  & .kbq-hint .kbq-hint__text {
112
- color: kbq-css-variable(#{$base}-states-disabled-caption, map.get($style, disabled, caption));
83
+ color: kbq-css-variable(#{$base}-states-disabled-caption);
113
84
  }
114
85
 
115
86
  .kbq-checkbox-label {
116
- color: kbq-css-variable(#{$base}-states-disabled-text, map.get($style, disabled, text));
87
+ color: kbq-css-variable(#{$base}-states-disabled-text);
117
88
  }
118
89
  }
119
90
  }
120
91
 
121
- @mixin kbq-checkbox-theme($theme) {
122
- $checkbox: map.get(map.get($theme, components), checkbox);
123
-
92
+ @mixin kbq-checkbox-theme() {
124
93
  .kbq-checkbox {
125
- @include kbq-checkbox-color($checkbox, theme);
94
+ @include kbq-checkbox-color(theme);
126
95
 
127
96
  &.kbq-error {
128
- @include kbq-checkbox-color($checkbox, error);
97
+ @include kbq-checkbox-color(error);
129
98
  }
130
99
  }
131
100
  }
132
101
 
133
- @mixin kbq-checkbox-typography($config) {
102
+ @mixin kbq-checkbox-typography() {
134
103
  .kbq-checkbox {
135
104
  @include kbq-typography-css-variables(checkbox, normal-label);
136
105
 
package/checkbox/checkbox-tokens.scss ADDED
@@ -0,0 +1,140 @@
1
+ .kbq-checkbox {
2
+ --kbq-checkbox-size-normal-width: 16px;
3
+ --kbq-checkbox-size-normal-border-width: 1px;
4
+ --kbq-checkbox-size-normal-border-radius: 4px;
5
+ --kbq-checkbox-size-normal-horizontal-content-padding: 8px;
6
+ --kbq-checkbox-size-normal-vertical-content-padding: 2px;
7
+ --kbq-checkbox-size-normal-top: 2px;
8
+ --kbq-checkbox-size-big-width: 16px;
9
+ --kbq-checkbox-size-big-border-width: 1px;
10
+ --kbq-checkbox-size-big-border-radius: 4px;
11
+ --kbq-checkbox-size-big-horizontal-content-padding: 8px;
12
+ --kbq-checkbox-size-big-vertical-content-padding: 2px;
13
+ --kbq-checkbox-size-big-top: 4px;
14
+ --kbq-checkbox-font-normal-label-font-size: 14px;
15
+ --kbq-checkbox-font-normal-label-line-height: 20px;
16
+ --kbq-checkbox-font-normal-label-letter-spacing: -0.006em;
17
+ --kbq-checkbox-font-normal-label-font-weight: normal;
18
+ --kbq-checkbox-font-normal-label-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
19
+ Arial, sans-serif;
20
+ --kbq-checkbox-font-normal-label-text-transform: null;
21
+ --kbq-checkbox-font-normal-label-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
22
+ --kbq-checkbox-font-normal-caption-font-size: 12px;
23
+ --kbq-checkbox-font-normal-caption-line-height: 16px;
24
+ --kbq-checkbox-font-normal-caption-letter-spacing: normal;
25
+ --kbq-checkbox-font-normal-caption-font-weight: normal;
26
+ --kbq-checkbox-font-normal-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
27
+ 'Helvetica Neue', Arial, sans-serif;
28
+ --kbq-checkbox-font-normal-caption-text-transform: null;
29
+ --kbq-checkbox-font-normal-caption-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
30
+ --kbq-checkbox-font-big-label-font-size: 16px;
31
+ --kbq-checkbox-font-big-label-line-height: 24px;
32
+ --kbq-checkbox-font-big-label-letter-spacing: -0.011em;
33
+ --kbq-checkbox-font-big-label-font-weight: normal;
34
+ --kbq-checkbox-font-big-label-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
35
+ Arial, sans-serif;
36
+ --kbq-checkbox-font-big-label-text-transform: null;
37
+ --kbq-checkbox-font-big-label-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
38
+ --kbq-checkbox-font-big-caption-font-size: 14px;
39
+ --kbq-checkbox-font-big-caption-line-height: 20px;
40
+ --kbq-checkbox-font-big-caption-letter-spacing: -0.006em;
41
+ --kbq-checkbox-font-big-caption-font-weight: normal;
42
+ --kbq-checkbox-font-big-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
43
+ Arial, sans-serif;
44
+ --kbq-checkbox-font-big-caption-text-transform: null;
45
+ --kbq-checkbox-font-big-caption-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
46
+ }
47
+
48
+ :where(.kbq-light, .theme-light, .kbq-theme-light) {
49
+ --kbq-checkbox-theme-default-border: hsla(229, 15%, 80%, 100%);
50
+ --kbq-checkbox-theme-default-color: hsla(0, 0%, 100%, 100%);
51
+ --kbq-checkbox-theme-default-text: hsla(229, 15%, 15%, 100%);
52
+ --kbq-checkbox-theme-default-background: hsla(0, 0%, 100%, 100%);
53
+ --kbq-checkbox-theme-default-caption: hsla(229, 15%, 50%, 100%);
54
+ --kbq-checkbox-theme-states-hover-border: hsla(229, 15%, 80%, 100%);
55
+ --kbq-checkbox-theme-states-hover-background: hsla(229, 15%, 50%, 8%);
56
+ --kbq-checkbox-theme-states-checked-border: transparent;
57
+ --kbq-checkbox-theme-states-checked-background: hsla(216, 100%, 50%, 100%);
58
+ --kbq-checkbox-theme-states-checked-hover-border: transparent;
59
+ --kbq-checkbox-theme-states-checked-hover-background: hsla(216, 100%, 45%, 100%);
60
+ --kbq-checkbox-theme-states-focused-border: hsla(216, 100%, 60%, 100%);
61
+ --kbq-checkbox-theme-states-focused-background: hsla(0, 0%, 100%, 100%);
62
+ --kbq-checkbox-theme-states-focused-outline: 1px solid hsla(216, 100%, 60%, 100%);
63
+ --kbq-checkbox-theme-states-checked-focused-border: hsla(216, 100%, 60%, 100%);
64
+ --kbq-checkbox-theme-states-checked-focused-background: hsla(216, 100%, 50%, 100%);
65
+ --kbq-checkbox-theme-states-checked-focused-outline: 1px solid hsla(216, 100%, 60%, 100%);
66
+ --kbq-checkbox-theme-states-disabled-border: hsla(229, 15%, 80%, 100%);
67
+ --kbq-checkbox-theme-states-disabled-color: hsla(229, 15%, 15%, 32%);
68
+ --kbq-checkbox-theme-states-disabled-text: hsla(229, 15%, 15%, 32%);
69
+ --kbq-checkbox-theme-states-disabled-background: hsla(229, 15%, 50%, 16%);
70
+ --kbq-checkbox-theme-states-disabled-caption: hsla(229, 15%, 15%, 32%);
71
+ --kbq-checkbox-error-default-border: hsla(7, 97%, 45%, 100%);
72
+ --kbq-checkbox-error-default-color: hsla(0, 0%, 100%, 100%);
73
+ --kbq-checkbox-error-default-text: hsla(229, 15%, 15%, 100%);
74
+ --kbq-checkbox-error-default-background: hsla(7, 97%, 99%, 100%);
75
+ --kbq-checkbox-error-default-caption: hsla(229, 15%, 50%, 100%);
76
+ --kbq-checkbox-error-states-hover-border: hsla(7, 97%, 45%, 100%);
77
+ --kbq-checkbox-error-states-hover-background: hsla(7, 97%, 92%, 100%);
78
+ --kbq-checkbox-error-states-checked-border: transparent;
79
+ --kbq-checkbox-error-states-checked-background: hsla(7, 97%, 60%, 100%);
80
+ --kbq-checkbox-error-states-checked-hover-border: transparent;
81
+ --kbq-checkbox-error-states-checked-hover-background: hsla(7, 97%, 56%, 100%);
82
+ --kbq-checkbox-error-states-focused-border: hsla(7, 97%, 45%, 100%);
83
+ --kbq-checkbox-error-states-focused-background: hsla(7, 97%, 99%, 100%);
84
+ --kbq-checkbox-error-states-focused-outline: 1px solid hsla(7, 97%, 45%, 100%);
85
+ --kbq-checkbox-error-states-checked-focused-border: hsla(7, 97%, 45%, 100%);
86
+ --kbq-checkbox-error-states-checked-focused-background: hsla(7, 97%, 60%, 100%);
87
+ --kbq-checkbox-error-states-checked-focused-outline: 1px solid hsla(7, 97%, 45%, 100%);
88
+ --kbq-checkbox-error-states-disabled-border: hsla(229, 15%, 80%, 100%);
89
+ --kbq-checkbox-error-states-disabled-color: hsla(229, 15%, 15%, 32%);
90
+ --kbq-checkbox-error-states-disabled-text: hsla(229, 15%, 15%, 32%);
91
+ --kbq-checkbox-error-states-disabled-background: hsla(229, 15%, 50%, 16%);
92
+ --kbq-checkbox-error-states-disabled-caption: hsla(229, 15%, 15%, 32%);
93
+ }
94
+
95
+ :where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
96
+ --kbq-checkbox-theme-default-border: hsla(229, 15%, 30%, 100%);
97
+ --kbq-checkbox-theme-default-color: hsla(0, 0%, 100%, 100%);
98
+ --kbq-checkbox-theme-default-text: hsla(229, 15%, 80%, 100%);
99
+ --kbq-checkbox-theme-default-background: hsla(229, 15%, 12%, 100%);
100
+ --kbq-checkbox-theme-default-caption: hsla(229, 15%, 60%, 100%);
101
+ --kbq-checkbox-theme-states-hover-border: hsla(229, 15%, 30%, 100%);
102
+ --kbq-checkbox-theme-states-hover-background: hsla(229, 15%, 50%, 16%);
103
+ --kbq-checkbox-theme-states-checked-border: transparent;
104
+ --kbq-checkbox-theme-states-checked-background: hsla(216, 100%, 50%, 100%);
105
+ --kbq-checkbox-theme-states-checked-hover-border: transparent;
106
+ --kbq-checkbox-theme-states-checked-hover-background: hsla(216, 100%, 45%, 100%);
107
+ --kbq-checkbox-theme-states-focused-border: hsla(216, 100%, 60%, 100%);
108
+ --kbq-checkbox-theme-states-focused-background: hsla(229, 15%, 12%, 100%);
109
+ --kbq-checkbox-theme-states-focused-outline: 1px solid hsla(216, 100%, 60%, 100%);
110
+ --kbq-checkbox-theme-states-checked-focused-border: hsla(216, 100%, 60%, 100%);
111
+ --kbq-checkbox-theme-states-checked-focused-background: hsla(216, 100%, 50%, 100%);
112
+ --kbq-checkbox-theme-states-checked-focused-outline: 1px solid hsla(216, 100%, 60%, 100%);
113
+ --kbq-checkbox-theme-states-disabled-border: hsla(229, 15%, 30%, 100%);
114
+ --kbq-checkbox-theme-states-disabled-color: hsla(229, 15%, 30%, 100%);
115
+ --kbq-checkbox-theme-states-disabled-text: hsla(229, 15%, 40%, 100%);
116
+ --kbq-checkbox-theme-states-disabled-background: hsla(229, 15%, 50%, 16%);
117
+ --kbq-checkbox-theme-states-disabled-caption: hsla(229, 15%, 30%, 100%);
118
+ --kbq-checkbox-error-default-border: hsla(7, 97%, 35%, 100%);
119
+ --kbq-checkbox-error-default-color: hsla(0, 0%, 100%, 100%);
120
+ --kbq-checkbox-error-default-text: hsla(229, 15%, 80%, 100%);
121
+ --kbq-checkbox-error-default-background: hsla(7, 97%, 6%, 100%);
122
+ --kbq-checkbox-error-default-caption: hsla(229, 15%, 60%, 100%);
123
+ --kbq-checkbox-error-states-hover-border: hsla(7, 97%, 35%, 100%);
124
+ --kbq-checkbox-error-states-hover-background: hsla(7, 97%, 13%, 100%);
125
+ --kbq-checkbox-error-states-checked-border: transparent;
126
+ --kbq-checkbox-error-states-checked-background: hsla(7, 97%, 41%, 100%);
127
+ --kbq-checkbox-error-states-checked-hover-border: transparent;
128
+ --kbq-checkbox-error-states-checked-hover-background: hsla(7, 97%, 42%, 100%);
129
+ --kbq-checkbox-error-states-focused-border: hsla(7, 97%, 35%, 100%);
130
+ --kbq-checkbox-error-states-focused-background: hsla(7, 97%, 6%, 100%);
131
+ --kbq-checkbox-error-states-focused-outline: 1px solid hsla(7, 97%, 45%, 100%);
132
+ --kbq-checkbox-error-states-checked-focused-border: hsla(7, 97%, 45%, 100%);
133
+ --kbq-checkbox-error-states-checked-focused-background: hsla(7, 97%, 41%, 100%);
134
+ --kbq-checkbox-error-states-checked-focused-outline: 1px solid hsla(7, 97%, 45%, 100%);
135
+ --kbq-checkbox-error-states-disabled-border: hsla(229, 15%, 30%, 100%);
136
+ --kbq-checkbox-error-states-disabled-color: hsla(229, 15%, 30%, 100%);
137
+ --kbq-checkbox-error-states-disabled-text: hsla(229, 15%, 40%, 100%);
138
+ --kbq-checkbox-error-states-disabled-background: hsla(229, 15%, 50%, 16%);
139
+ --kbq-checkbox-error-states-disabled-caption: hsla(229, 15%, 30%, 100%);
140
+ }
package/checkbox/checkbox.scss CHANGED
@@ -4,10 +4,9 @@
4
4
  @use '../core/styles/common/visually-hidden';
5
5
  @use '../core/styles/common/layout';
6
6
 
7
- @use '../core/styles/tokens';
8
7
  @use '../core/styles/common/tokens' as *;
9
8
 
10
- $tokens: meta.module-variables(tokens) !default;
9
+ @use './checkbox-theme' as *;
11
10
 
12
11
  .kbq-checkbox-checkmark,
13
12
  .kbq-checkbox-mixedmark {
@@ -43,9 +42,9 @@ $tokens: meta.module-variables(tokens) !default;
43
42
  // (e.g. pointer by default, regular when disabled), instead of the browser default.
44
43
  cursor: inherit;
45
44
 
46
- padding-top: kbq-css-variable(checkbox-size-normal-paddding-top);
45
+ padding-top: kbq-css-variable(checkbox-size-normal-padding-top);
47
46
 
48
- padding-bottom: kbq-css-variable(checkbox-size-normal-paddding-bottom);
47
+ padding-bottom: kbq-css-variable(checkbox-size-normal-padding-bottom);
49
48
 
50
49
  padding-left: kbq-sum-series-css-variables(
51
50
  [checkbox-size-normal-width,
@@ -159,3 +158,6 @@ $tokens: meta.module-variables(tokens) !default;
159
158
  left: unset;
160
159
  }
161
160
  }
161
+
162
+ @include kbq-checkbox-theme();
163
+ @include kbq-checkbox-typography();