@koobiq/components 17.4.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 (145) 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/core/highlight/_highlight-theme.scss +1 -1
  20. package/core/pop-up/pop-up-styles.d.ts +2 -2
  21. package/core/pop-up/pop-up-trigger.d.ts +8 -9
  22. package/core/pop-up/pop-up.d.ts +3 -3
  23. package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +12 -15
  24. package/core/selection/pseudo-checkbox/pseudo-checkbox-tokens.scss +140 -0
  25. package/core/selection/pseudo-checkbox/pseudo-checkbox.scss +3 -2
  26. package/core/styles/_koobiq-theme.scss +3 -42
  27. package/datepicker/_datepicker-theme.scss +17 -43
  28. package/datepicker/calendar.scss +0 -3
  29. package/datepicker/datepicker-content.scss +5 -6
  30. package/datepicker/datepicker-tokens.scss +59 -0
  31. package/dropdown/_dropdown-theme.scss +15 -24
  32. package/dropdown/dropdown-tokens.scss +111 -0
  33. package/dropdown/dropdown.scss +5 -0
  34. package/ellipsis-center/ellipsis-center.directive.d.ts +2 -6
  35. package/esm2022/alert/alert.component.mjs +3 -3
  36. package/esm2022/autocomplete/autocomplete.component.mjs +3 -3
  37. package/esm2022/badge/badge.component.mjs +3 -3
  38. package/esm2022/button/button.component.mjs +3 -3
  39. package/esm2022/button-toggle/button-toggle.component.mjs +3 -3
  40. package/esm2022/checkbox/checkbox.mjs +3 -3
  41. package/esm2022/core/common-behaviors/common-module.mjs +2 -2
  42. package/esm2022/core/pop-up/pop-up-styles.mjs +7 -9
  43. package/esm2022/core/pop-up/pop-up-trigger.mjs +13 -16
  44. package/esm2022/core/pop-up/pop-up.mjs +7 -6
  45. package/esm2022/core/selection/pseudo-checkbox/pseudo-checkbox.mjs +3 -3
  46. package/esm2022/core/version.mjs +2 -2
  47. package/esm2022/datepicker/datepicker.component.mjs +3 -3
  48. package/esm2022/dropdown/dropdown.component.mjs +3 -3
  49. package/esm2022/ellipsis-center/ellipsis-center.directive.mjs +12 -23
  50. package/esm2022/form-field/form-field.mjs +3 -3
  51. package/esm2022/form-field/hint.mjs +3 -3
  52. package/esm2022/form-field/password-hint.mjs +2 -2
  53. package/esm2022/form-field/password-toggle.mjs +10 -21
  54. package/esm2022/icon/icon-button.component.mjs +3 -3
  55. package/esm2022/icon/icon-item.component.mjs +3 -3
  56. package/esm2022/icon/icon.component.mjs +3 -3
  57. package/esm2022/markdown/markdown.component.mjs +2 -2
  58. package/esm2022/modal/modal-ref.class.mjs +1 -1
  59. package/esm2022/modal/modal.component.mjs +1 -1
  60. package/esm2022/modal/modal.service.mjs +16 -8
  61. package/esm2022/modal/modal.type.mjs +1 -1
  62. package/esm2022/navbar/navbar-item.component.mjs +16 -30
  63. package/esm2022/popover/popover-confirm.component.mjs +11 -20
  64. package/esm2022/popover/popover.component.mjs +22 -29
  65. package/esm2022/select/select-option.directive.mjs +7 -18
  66. package/esm2022/timezone/timezone-option.directive.mjs +7 -18
  67. package/esm2022/title/title.directive.mjs +7 -18
  68. package/esm2022/tooltip/tooltip.component.mjs +26 -45
  69. package/fesm2022/koobiq-components-alert.mjs +2 -2
  70. package/fesm2022/koobiq-components-alert.mjs.map +1 -1
  71. package/fesm2022/koobiq-components-autocomplete.mjs +2 -2
  72. package/fesm2022/koobiq-components-autocomplete.mjs.map +1 -1
  73. package/fesm2022/koobiq-components-badge.mjs +2 -2
  74. package/fesm2022/koobiq-components-badge.mjs.map +1 -1
  75. package/fesm2022/koobiq-components-button-toggle.mjs +2 -2
  76. package/fesm2022/koobiq-components-button-toggle.mjs.map +1 -1
  77. package/fesm2022/koobiq-components-button.mjs +2 -2
  78. package/fesm2022/koobiq-components-button.mjs.map +1 -1
  79. package/fesm2022/koobiq-components-checkbox.mjs +2 -2
  80. package/fesm2022/koobiq-components-checkbox.mjs.map +1 -1
  81. package/fesm2022/koobiq-components-core.mjs +29 -32
  82. package/fesm2022/koobiq-components-core.mjs.map +1 -1
  83. package/fesm2022/koobiq-components-datepicker.mjs +2 -2
  84. package/fesm2022/koobiq-components-datepicker.mjs.map +1 -1
  85. package/fesm2022/koobiq-components-dropdown.mjs +2 -2
  86. package/fesm2022/koobiq-components-dropdown.mjs.map +1 -1
  87. package/fesm2022/koobiq-components-ellipsis-center.mjs +11 -19
  88. package/fesm2022/koobiq-components-ellipsis-center.mjs.map +1 -1
  89. package/fesm2022/koobiq-components-form-field.mjs +26 -33
  90. package/fesm2022/koobiq-components-form-field.mjs.map +1 -1
  91. package/fesm2022/koobiq-components-icon.mjs +6 -6
  92. package/fesm2022/koobiq-components-icon.mjs.map +1 -1
  93. package/fesm2022/koobiq-components-markdown.mjs +2 -2
  94. package/fesm2022/koobiq-components-markdown.mjs.map +1 -1
  95. package/fesm2022/koobiq-components-modal.mjs +15 -7
  96. package/fesm2022/koobiq-components-modal.mjs.map +1 -1
  97. package/fesm2022/koobiq-components-navbar.mjs +14 -26
  98. package/fesm2022/koobiq-components-navbar.mjs.map +1 -1
  99. package/fesm2022/koobiq-components-popover.mjs +29 -40
  100. package/fesm2022/koobiq-components-popover.mjs.map +1 -1
  101. package/fesm2022/koobiq-components-select.mjs +14 -20
  102. package/fesm2022/koobiq-components-select.mjs.map +1 -1
  103. package/fesm2022/koobiq-components-timezone.mjs +10 -17
  104. package/fesm2022/koobiq-components-timezone.mjs.map +1 -1
  105. package/fesm2022/koobiq-components-title.mjs +6 -14
  106. package/fesm2022/koobiq-components-title.mjs.map +1 -1
  107. package/fesm2022/koobiq-components-tooltip.mjs +25 -42
  108. package/fesm2022/koobiq-components-tooltip.mjs.map +1 -1
  109. package/form-field/_form-field-theme.scss +21 -47
  110. package/form-field/_hint-theme.scss +13 -17
  111. package/form-field/form-field-tokens.scss +69 -0
  112. package/form-field/form-field.scss +4 -2
  113. package/form-field/hint-tokens.scss +60 -0
  114. package/form-field/hint.scss +5 -0
  115. package/form-field/password-toggle.d.ts +3 -6
  116. package/icon/_icon-button-theme.scss +27 -65
  117. package/icon/_icon-item-theme.scss +14 -17
  118. package/icon/_icon-theme.scss +7 -12
  119. package/icon/icon-button-tokens.scss +67 -0
  120. package/icon/icon-button.scss +4 -0
  121. package/icon/icon-item-tokens.scss +52 -0
  122. package/icon/icon-item.scss +4 -0
  123. package/icon/icon-tokens.scss +17 -0
  124. package/icon/icon.scss +4 -0
  125. package/input/_input-theme.scss +1 -5
  126. package/input/input-tokens.scss +12 -0
  127. package/input/input.scss +4 -5
  128. package/link/_link-theme.scss +18 -26
  129. package/link/link-tokens.scss +67 -0
  130. package/markdown/markdown.scss +6 -0
  131. package/modal/modal-ref.class.d.ts +2 -2
  132. package/modal/modal.component.d.ts +2 -2
  133. package/modal/modal.service.d.ts +12 -7
  134. package/modal/modal.type.d.ts +3 -0
  135. package/navbar/navbar-item.component.d.ts +5 -7
  136. package/package.json +7 -7
  137. package/popover/popover-confirm.component.d.ts +3 -6
  138. package/popover/popover.component.d.ts +4 -6
  139. package/prebuilt-themes/dark-theme.css +1 -1
  140. package/prebuilt-themes/light-theme.css +1 -1
  141. package/schematics/ng-add/index.js +4 -4
  142. package/select/select-option.directive.d.ts +3 -6
  143. package/timezone/timezone-option.directive.d.ts +3 -6
  144. package/title/title.directive.d.ts +3 -6
  145. package/tooltip/tooltip.component.d.ts +8 -11
package/button/_button-theme.scss CHANGED
@@ -18,46 +18,37 @@
18
18
  }
19
19
  }
20
20
 
21
- @mixin kbq-button-type($component, $type, $sub-type) {
22
- $style: map.get($component, $type, $sub-type);
21
+ @mixin kbq-button-type($type, $sub-type) {
23
22
  $base-path: button-#{$type}-#{$sub-type};
24
23
 
25
- border-color: kbq-css-variable(#{$base-path}-border, map.get($style, border));
26
- color: kbq-css-variable(#{$base-path}-foreground, map.get($style, foreground));
27
- background: kbq-css-variable(#{$base-path}-background, map.get($style, background));
24
+ border-color: kbq-css-variable(#{$base-path}-border);
25
+ color: kbq-css-variable(#{$base-path}-foreground);
26
+ background: kbq-css-variable(#{$base-path}-background);
28
27
 
29
- @include _icon(
30
- kbq-css-variable(#{$base-path}-left-icon, map.get($style, left-icon)),
31
- kbq-css-variable(#{$base-path}-right-icon, map.get($style, right-icon))
32
- );
28
+ @include _icon(kbq-css-variable(#{$base-path}-left-icon), kbq-css-variable(#{$base-path}-right-icon));
33
29
 
34
30
  &:hover:not(.kbq-disabled),
35
31
  &.kbq-hover:not(.kbq-disabled) {
36
- background: kbq-css-variable(#{$base-path}-states-hover-background, map.get($style, states-hover-background));
32
+ background: kbq-css-variable(#{$base-path}-states-hover-background);
37
33
  }
38
34
 
39
35
  &:active:not(.kbq-disabled),
40
36
  &.kbq-active:not(.kbq-disabled) {
41
- background: kbq-css-variable(#{$base-path}-states-active-background, map.get($style, states-active-background));
37
+ background: kbq-css-variable(#{$base-path}-states-active-background);
42
38
  }
43
39
 
44
40
  &.kbq-disabled {
45
- color: kbq-css-variable(#{$base-path}-states-disabled-foreground, map.get($style, states-disabled-foreground));
46
- background: kbq-css-variable(
47
- #{$base-path}-states-disabled-background,
48
- map.get($style, states-disabled-background)
49
- );
41
+ color: kbq-css-variable(#{$base-path}-states-disabled-foreground);
42
+ background: kbq-css-variable(#{$base-path}-states-disabled-background);
50
43
 
51
44
  @include _icon(
52
- kbq-css-variable(#{$base-path}-states-disabled-left-icon, map.get($style, states-disabled-left-icon)),
53
- kbq-css-variable(#{$base-path}-states-disabled-right-icon, map.get($style, states-disabled-right-icon))
45
+ kbq-css-variable(#{$base-path}-states-disabled-left-icon),
46
+ kbq-css-variable(#{$base-path}-states-disabled-right-icon)
54
47
  );
55
48
  }
56
49
  }
57
50
 
58
- @mixin kbq-button-theme($theme) {
59
- $button: map.get(map.get($theme, components), button);
60
-
51
+ @mixin kbq-button-theme() {
61
52
  .kbq-button-overlay {
62
53
  display: none;
63
54
  }
@@ -68,31 +59,31 @@
68
59
 
69
60
  &.kbq-button_filled {
70
61
  &.kbq-contrast {
71
- @include kbq-button-type($button, filled, contrast-fade-off);
62
+ @include kbq-button-type(filled, contrast-fade-off);
72
63
  }
73
64
 
74
65
  &.kbq-contrast-fade {
75
- @include kbq-button-type($button, filled, contrast-fade-on);
66
+ @include kbq-button-type(filled, contrast-fade-on);
76
67
  }
77
68
  }
78
69
 
79
70
  &.kbq-button_outline {
80
71
  &.kbq-theme-fade {
81
- @include kbq-button-type($button, outline, theme-fade-on);
72
+ @include kbq-button-type(outline, theme-fade-on);
82
73
  }
83
74
 
84
75
  &.kbq-contrast-fade {
85
- @include kbq-button-type($button, outline, contrast-fade-on);
76
+ @include kbq-button-type(outline, contrast-fade-on);
86
77
  }
87
78
  }
88
79
 
89
80
  &.kbq-button_transparent {
90
81
  &.kbq-theme {
91
- @include kbq-button-type($button, transparent, theme-fade-on);
82
+ @include kbq-button-type(transparent, theme-fade-on);
92
83
  }
93
84
 
94
85
  &.kbq-contrast {
95
- @include kbq-button-type($button, transparent, contrast-fade-on);
86
+ @include kbq-button-type(transparent, contrast-fade-on);
96
87
  }
97
88
  }
98
89
 
@@ -100,7 +91,7 @@
100
91
  &.kbq-button_outline,
101
92
  &.kbq-button_transparent {
102
93
  &.cdk-keyboard-focused {
103
- $focused-color: kbq-css-variable(states-focused-color, map.get($theme, states, focused-color));
94
+ $focused-color: kbq-css-variable(states-focused-color);
104
95
  outline: 1px solid $focused-color;
105
96
  border-color: $focused-color;
106
97
  }
@@ -108,7 +99,7 @@
108
99
  }
109
100
  }
110
101
 
111
- @mixin kbq-button-typography($config) {
102
+ @mixin kbq-button-typography() {
112
103
  .kbq-button,
113
104
  .kbq-button-icon {
114
105
  @include kbq-typography-css-variables(button, default);
package/button/button-tokens.scss ADDED
@@ -0,0 +1,278 @@
1
+ .kbq-button {
2
+ --kbq-button-size-height: 32px;
3
+ --kbq-button-size-border-width: 1px;
4
+ --kbq-button-size-border-radius: 8px;
5
+ --kbq-button-size-horizontal-padding: 12px;
6
+ --kbq-button-size-content-padding: 6px;
7
+ --kbq-button-font-default-font-size: 14px;
8
+ --kbq-button-font-default-line-height: 20px;
9
+ --kbq-button-font-default-letter-spacing: -0.006em;
10
+ --kbq-button-font-default-font-weight: 500;
11
+ --kbq-button-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
12
+ sans-serif;
13
+ --kbq-button-font-default-text-transform: null;
14
+ --kbq-button-font-default-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
15
+ }
16
+
17
+ :where(.kbq-light, .theme-light, .kbq-theme-light) {
18
+ // TODO: remove after all settled, should be assigned via css-tokens.css (#DS-2846)
19
+ --kbq-states-focused-color: hsla(216, 100%, 50%, 100%);
20
+ --kbq-states-focused-color-error: hsla(7, 97%, 50%, 100%);
21
+ --kbq-button-filled-contrast-fade-off-background: hsla(229, 15%, 25%, 100%);
22
+ --kbq-button-filled-contrast-fade-off-border: transparent;
23
+ --kbq-button-filled-contrast-fade-off-foreground: hsla(229, 15%, 100%, 100%);
24
+ --kbq-button-filled-contrast-fade-off-left-icon: hsla(229, 15%, 100%, 100%);
25
+ --kbq-button-filled-contrast-fade-off-right-icon: hsla(229, 15%, 100%, 100%);
26
+ --kbq-button-filled-contrast-fade-off-states-hover-background: hsla(229, 15%, 20%, 100%);
27
+ --kbq-button-filled-contrast-fade-off-states-active-background: hsla(229, 15%, 15%, 100%);
28
+ --kbq-button-filled-contrast-fade-off-states-active-hover-background: hsla(229, 15%, 15%, 100%);
29
+ --kbq-button-filled-contrast-fade-off-states-disabled-background: hsla(229, 15%, 50%, 16%);
30
+ --kbq-button-filled-contrast-fade-off-states-disabled-border: transparent;
31
+ --kbq-button-filled-contrast-fade-off-states-disabled-foreground: hsla(229, 15%, 15%, 32%);
32
+ --kbq-button-filled-contrast-fade-off-states-disabled-left-icon: hsla(229, 15%, 15%, 32%);
33
+ --kbq-button-filled-contrast-fade-off-states-disabled-right-icon: hsla(229, 15%, 15%, 32%);
34
+ --kbq-button-filled-contrast-fade-on-background: hsla(229, 15%, 92%, 100%);
35
+ --kbq-button-filled-contrast-fade-on-border: transparent;
36
+ --kbq-button-filled-contrast-fade-on-foreground: hsla(229, 15%, 15%, 100%);
37
+ --kbq-button-filled-contrast-fade-on-left-icon: hsla(229, 15%, 15%, 100%);
38
+ --kbq-button-filled-contrast-fade-on-right-icon: hsla(229, 15%, 15%, 100%);
39
+ --kbq-button-filled-contrast-fade-on-states-hover-background: hsla(229, 15%, 88%, 100%);
40
+ --kbq-button-filled-contrast-fade-on-states-active-background: hsla(229, 15%, 85%, 100%);
41
+ --kbq-button-filled-contrast-fade-on-states-active-hover-background: hsla(229, 15%, 85%, 100%);
42
+ --kbq-button-filled-contrast-fade-on-states-disabled-background: hsla(229, 15%, 50%, 16%);
43
+ --kbq-button-filled-contrast-fade-on-states-disabled-border: transparent;
44
+ --kbq-button-filled-contrast-fade-on-states-disabled-foreground: hsla(229, 15%, 15%, 32%);
45
+ --kbq-button-filled-contrast-fade-on-states-disabled-left-icon: hsla(229, 15%, 15%, 32%);
46
+ --kbq-button-filled-contrast-fade-on-states-disabled-right-icon: hsla(229, 15%, 15%, 32%);
47
+ --kbq-button-outline-theme-fade-on-background: transparent;
48
+ --kbq-button-outline-theme-fade-on-border: hsla(216, 100%, 65%, 100%);
49
+ --kbq-button-outline-theme-fade-on-foreground: hsla(216, 100%, 50%, 100%);
50
+ --kbq-button-outline-theme-fade-on-left-icon: hsla(216, 100%, 50%, 100%);
51
+ --kbq-button-outline-theme-fade-on-right-icon: hsla(216, 100%, 50%, 100%);
52
+ --kbq-button-outline-theme-fade-on-states-hover-background: hsla(229, 15%, 50%, 8%);
53
+ --kbq-button-outline-theme-fade-on-states-hover-border: hsla(216, 100%, 65%, 100%);
54
+ --kbq-button-outline-theme-fade-on-states-hover-foreground: hsla(216, 100%, 50%, 100%);
55
+ --kbq-button-outline-theme-fade-on-states-hover-left-icon: hsla(216, 100%, 50%, 100%);
56
+ --kbq-button-outline-theme-fade-on-states-hover-right-icon: hsla(216, 100%, 50%, 100%);
57
+ --kbq-button-outline-theme-fade-on-states-active-background: hsla(229, 15%, 50%, 16%);
58
+ --kbq-button-outline-theme-fade-on-states-active-border: hsla(216, 100%, 65%, 100%);
59
+ --kbq-button-outline-theme-fade-on-states-active-foreground: hsla(216, 100%, 50%, 100%);
60
+ --kbq-button-outline-theme-fade-on-states-active-left-icon: hsla(216, 100%, 50%, 100%);
61
+ --kbq-button-outline-theme-fade-on-states-active-right-icon: hsla(216, 100%, 50%, 100%);
62
+ --kbq-button-outline-theme-fade-on-states-active-hover-background: hsla(229, 15%, 50%, 16%);
63
+ --kbq-button-outline-theme-fade-on-states-active-hover-border: hsla(216, 100%, 65%, 100%);
64
+ --kbq-button-outline-theme-fade-on-states-active-hover-foreground: hsla(216, 100%, 50%, 100%);
65
+ --kbq-button-outline-theme-fade-on-states-active-hover-left-icon: hsla(216, 100%, 50%, 100%);
66
+ --kbq-button-outline-theme-fade-on-states-active-hover-right-icon: hsla(216, 100%, 50%, 100%);
67
+ --kbq-button-outline-theme-fade-on-states-disabled-background: transparent;
68
+ --kbq-button-outline-theme-fade-on-states-disabled-border: hsla(229, 15%, 15%, 32%);
69
+ --kbq-button-outline-theme-fade-on-states-disabled-foreground: hsla(229, 15%, 15%, 32%);
70
+ --kbq-button-outline-theme-fade-on-states-disabled-left-icon: hsla(229, 15%, 15%, 32%);
71
+ --kbq-button-outline-theme-fade-on-states-disabled-right-icon: hsla(229, 15%, 15%, 32%);
72
+ --kbq-button-outline-contrast-fade-on-background: transparent;
73
+ --kbq-button-outline-contrast-fade-on-border: hsla(229, 15%, 80%, 100%);
74
+ --kbq-button-outline-contrast-fade-on-foreground: hsla(229, 15%, 15%, 100%);
75
+ --kbq-button-outline-contrast-fade-on-left-icon: hsla(229, 15%, 15%, 100%);
76
+ --kbq-button-outline-contrast-fade-on-right-icon: hsla(229, 15%, 15%, 100%);
77
+ --kbq-button-outline-contrast-fade-on-states-hover-background: hsla(229, 15%, 50%, 8%);
78
+ --kbq-button-outline-contrast-fade-on-states-hover-border: hsla(229, 15%, 80%, 100%);
79
+ --kbq-button-outline-contrast-fade-on-states-hover-foreground: hsla(229, 15%, 15%, 100%);
80
+ --kbq-button-outline-contrast-fade-on-states-hover-left-icon: hsla(229, 15%, 15%, 100%);
81
+ --kbq-button-outline-contrast-fade-on-states-hover-right-icon: hsla(229, 15%, 15%, 100%);
82
+ --kbq-button-outline-contrast-fade-on-states-active-background: hsla(229, 15%, 50%, 16%);
83
+ --kbq-button-outline-contrast-fade-on-states-active-border: hsla(229, 15%, 80%, 100%);
84
+ --kbq-button-outline-contrast-fade-on-states-active-foreground: hsla(229, 15%, 15%, 100%);
85
+ --kbq-button-outline-contrast-fade-on-states-active-left-icon: hsla(229, 15%, 15%, 100%);
86
+ --kbq-button-outline-contrast-fade-on-states-active-right-icon: hsla(229, 15%, 15%, 100%);
87
+ --kbq-button-outline-contrast-fade-on-states-active-hover-background: hsla(229, 15%, 50%, 16%);
88
+ --kbq-button-outline-contrast-fade-on-states-active-hover-border: hsla(229, 15%, 80%, 100%);
89
+ --kbq-button-outline-contrast-fade-on-states-active-hover-foreground: hsla(229, 15%, 15%, 100%);
90
+ --kbq-button-outline-contrast-fade-on-states-active-hover-left-icon: hsla(229, 15%, 15%, 100%);
91
+ --kbq-button-outline-contrast-fade-on-states-active-hover-right-icon: hsla(229, 15%, 15%, 100%);
92
+ --kbq-button-outline-contrast-fade-on-states-disabled-background: transparent;
93
+ --kbq-button-outline-contrast-fade-on-states-disabled-border: hsla(229, 15%, 15%, 32%);
94
+ --kbq-button-outline-contrast-fade-on-states-disabled-foreground: hsla(229, 15%, 15%, 32%);
95
+ --kbq-button-outline-contrast-fade-on-states-disabled-left-icon: hsla(229, 15%, 15%, 32%);
96
+ --kbq-button-outline-contrast-fade-on-states-disabled-right-icon: hsla(229, 15%, 15%, 32%);
97
+ --kbq-button-transparent-theme-fade-on-border: transparent;
98
+ --kbq-button-transparent-theme-fade-on-foreground: hsla(216, 100%, 50%, 100%);
99
+ --kbq-button-transparent-theme-fade-on-background: transparent;
100
+ --kbq-button-transparent-theme-fade-on-left-icon: hsla(216, 100%, 50%, 100%);
101
+ --kbq-button-transparent-theme-fade-on-right-icon: hsla(216, 100%, 50%, 100%);
102
+ --kbq-button-transparent-theme-fade-on-states-hover-border: transparent;
103
+ --kbq-button-transparent-theme-fade-on-states-hover-foreground: hsla(216, 100%, 50%, 100%);
104
+ --kbq-button-transparent-theme-fade-on-states-hover-background: hsla(229, 15%, 50%, 8%);
105
+ --kbq-button-transparent-theme-fade-on-states-hover-left-icon: hsla(216, 100%, 50%, 100%);
106
+ --kbq-button-transparent-theme-fade-on-states-hover-right-icon: hsla(216, 100%, 50%, 100%);
107
+ --kbq-button-transparent-theme-fade-on-states-active-border: transparent;
108
+ --kbq-button-transparent-theme-fade-on-states-active-foreground: hsla(216, 100%, 50%, 100%);
109
+ --kbq-button-transparent-theme-fade-on-states-active-background: hsla(229, 15%, 50%, 16%);
110
+ --kbq-button-transparent-theme-fade-on-states-active-left-icon: hsla(216, 100%, 50%, 100%);
111
+ --kbq-button-transparent-theme-fade-on-states-active-right-icon: hsla(216, 100%, 50%, 100%);
112
+ --kbq-button-transparent-theme-fade-on-states-active-hover-border: transparent;
113
+ --kbq-button-transparent-theme-fade-on-states-active-hover-foreground: hsla(216, 100%, 50%, 100%);
114
+ --kbq-button-transparent-theme-fade-on-states-active-hover-background: hsla(229, 15%, 50%, 16%);
115
+ --kbq-button-transparent-theme-fade-on-states-active-hover-left-icon: hsla(216, 100%, 50%, 100%);
116
+ --kbq-button-transparent-theme-fade-on-states-active-hover-right-icon: hsla(216, 100%, 50%, 100%);
117
+ --kbq-button-transparent-theme-fade-on-states-disabled-border: transparent;
118
+ --kbq-button-transparent-theme-fade-on-states-disabled-foreground: hsla(229, 15%, 15%, 32%);
119
+ --kbq-button-transparent-theme-fade-on-states-disabled-background: transparent;
120
+ --kbq-button-transparent-theme-fade-on-states-disabled-left-icon: hsla(229, 15%, 15%, 32%);
121
+ --kbq-button-transparent-theme-fade-on-states-disabled-right-icon: hsla(229, 15%, 15%, 32%);
122
+ --kbq-button-transparent-contrast-fade-on-border: transparent;
123
+ --kbq-button-transparent-contrast-fade-on-foreground: hsla(229, 15%, 15%, 100%);
124
+ --kbq-button-transparent-contrast-fade-on-background: transparent;
125
+ --kbq-button-transparent-contrast-fade-on-left-icon: hsla(229, 15%, 15%, 100%);
126
+ --kbq-button-transparent-contrast-fade-on-right-icon: hsla(229, 15%, 15%, 100%);
127
+ --kbq-button-transparent-contrast-fade-on-states-hover-border: transparent;
128
+ --kbq-button-transparent-contrast-fade-on-states-hover-foreground: hsla(229, 15%, 15%, 100%);
129
+ --kbq-button-transparent-contrast-fade-on-states-hover-background: hsla(229, 15%, 50%, 8%);
130
+ --kbq-button-transparent-contrast-fade-on-states-hover-left-icon: hsla(229, 15%, 15%, 100%);
131
+ --kbq-button-transparent-contrast-fade-on-states-hover-right-icon: hsla(229, 15%, 15%, 100%);
132
+ --kbq-button-transparent-contrast-fade-on-states-active-border: transparent;
133
+ --kbq-button-transparent-contrast-fade-on-states-active-foreground: hsla(229, 15%, 15%, 100%);
134
+ --kbq-button-transparent-contrast-fade-on-states-active-background: hsla(229, 15%, 50%, 16%);
135
+ --kbq-button-transparent-contrast-fade-on-states-active-left-icon: hsla(229, 15%, 15%, 100%);
136
+ --kbq-button-transparent-contrast-fade-on-states-active-right-icon: hsla(229, 15%, 15%, 100%);
137
+ --kbq-button-transparent-contrast-fade-on-states-active-hover-border: transparent;
138
+ --kbq-button-transparent-contrast-fade-on-states-active-hover-foreground: hsla(229, 15%, 15%, 100%);
139
+ --kbq-button-transparent-contrast-fade-on-states-active-hover-background: hsla(229, 15%, 50%, 16%);
140
+ --kbq-button-transparent-contrast-fade-on-states-active-hover-left-icon: hsla(229, 15%, 15%, 100%);
141
+ --kbq-button-transparent-contrast-fade-on-states-active-hover-right-icon: hsla(229, 15%, 15%, 100%);
142
+ --kbq-button-transparent-contrast-fade-on-states-disabled-border: transparent;
143
+ --kbq-button-transparent-contrast-fade-on-states-disabled-foreground: hsla(229, 15%, 15%, 32%);
144
+ --kbq-button-transparent-contrast-fade-on-states-disabled-background: transparent;
145
+ --kbq-button-transparent-contrast-fade-on-states-disabled-left-icon: hsla(229, 15%, 15%, 32%);
146
+ --kbq-button-transparent-contrast-fade-on-states-disabled-right-icon: hsla(229, 15%, 15%, 32%);
147
+ }
148
+
149
+ :where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
150
+ --kbq-states-focused-color: hsla(216, 100%, 50%, 100%);
151
+ --kbq-states-focused-color-error: hsla(7, 97%, 50%, 100%);
152
+ --kbq-button-filled-contrast-fade-off-background: hsla(229, 15%, 90%, 100%);
153
+ --kbq-button-filled-contrast-fade-off-border: transparent;
154
+ --kbq-button-filled-contrast-fade-off-foreground: hsla(229, 15%, 15%, 100%);
155
+ --kbq-button-filled-contrast-fade-off-left-icon: hsla(229, 15%, 15%, 100%);
156
+ --kbq-button-filled-contrast-fade-off-right-icon: hsla(229, 15%, 15%, 100%);
157
+ --kbq-button-filled-contrast-fade-off-states-hover-background: hsla(229, 15%, 80%, 100%);
158
+ --kbq-button-filled-contrast-fade-off-states-active-background: hsla(229, 15%, 55%, 100%);
159
+ --kbq-button-filled-contrast-fade-off-states-active-hover-background: hsla(229, 15%, 55%, 100%);
160
+ --kbq-button-filled-contrast-fade-off-states-disabled-background: hsla(229, 15%, 50%, 16%);
161
+ --kbq-button-filled-contrast-fade-off-states-disabled-border: transparent;
162
+ --kbq-button-filled-contrast-fade-off-states-disabled-foreground: hsla(229, 15%, 40%, 100%);
163
+ --kbq-button-filled-contrast-fade-off-states-disabled-left-icon: hsla(229, 15%, 40%, 100%);
164
+ --kbq-button-filled-contrast-fade-off-states-disabled-right-icon: hsla(229, 15%, 40%, 100%);
165
+ --kbq-button-filled-contrast-fade-on-background: hsla(229, 15%, 25%, 100%);
166
+ --kbq-button-filled-contrast-fade-on-border: transparent;
167
+ --kbq-button-filled-contrast-fade-on-foreground: hsla(229, 15%, 80%, 100%);
168
+ --kbq-button-filled-contrast-fade-on-left-icon: hsla(229, 15%, 80%, 100%);
169
+ --kbq-button-filled-contrast-fade-on-right-icon: hsla(229, 15%, 80%, 100%);
170
+ --kbq-button-filled-contrast-fade-on-states-hover-background: hsla(229, 15%, 25%, 100%);
171
+ --kbq-button-filled-contrast-fade-on-states-active-background: hsla(229, 15%, 27%, 100%);
172
+ --kbq-button-filled-contrast-fade-on-states-active-hover-background: hsla(229, 15%, 27%, 100%);
173
+ --kbq-button-filled-contrast-fade-on-states-disabled-background: hsla(229, 15%, 50%, 16%);
174
+ --kbq-button-filled-contrast-fade-on-states-disabled-border: transparent;
175
+ --kbq-button-filled-contrast-fade-on-states-disabled-foreground: hsla(229, 15%, 40%, 100%);
176
+ --kbq-button-filled-contrast-fade-on-states-disabled-left-icon: hsla(229, 15%, 40%, 100%);
177
+ --kbq-button-filled-contrast-fade-on-states-disabled-right-icon: hsla(229, 15%, 40%, 100%);
178
+ --kbq-button-outline-theme-fade-on-background: transparent;
179
+ --kbq-button-outline-theme-fade-on-border: hsla(216, 100%, 30%, 100%);
180
+ --kbq-button-outline-theme-fade-on-foreground: hsla(216, 100%, 65%, 100%);
181
+ --kbq-button-outline-theme-fade-on-left-icon: hsla(216, 100%, 65%, 100%);
182
+ --kbq-button-outline-theme-fade-on-right-icon: hsla(216, 100%, 65%, 100%);
183
+ --kbq-button-outline-theme-fade-on-states-hover-background: hsla(229, 15%, 50%, 16%);
184
+ --kbq-button-outline-theme-fade-on-states-hover-border: hsla(216, 100%, 30%, 100%);
185
+ --kbq-button-outline-theme-fade-on-states-hover-foreground: hsla(216, 100%, 65%, 100%);
186
+ --kbq-button-outline-theme-fade-on-states-hover-left-icon: hsla(216, 100%, 65%, 100%);
187
+ --kbq-button-outline-theme-fade-on-states-hover-right-icon: hsla(216, 100%, 65%, 100%);
188
+ --kbq-button-outline-theme-fade-on-states-active-background: hsla(229, 100%, 85%, 15%);
189
+ --kbq-button-outline-theme-fade-on-states-active-border: hsla(216, 100%, 30%, 100%);
190
+ --kbq-button-outline-theme-fade-on-states-active-foreground: hsla(216, 100%, 65%, 100%);
191
+ --kbq-button-outline-theme-fade-on-states-active-left-icon: hsla(216, 100%, 65%, 100%);
192
+ --kbq-button-outline-theme-fade-on-states-active-right-icon: hsla(216, 100%, 65%, 100%);
193
+ --kbq-button-outline-theme-fade-on-states-active-hover-background: hsla(229, 100%, 85%, 15%);
194
+ --kbq-button-outline-theme-fade-on-states-active-hover-border: hsla(216, 100%, 30%, 100%);
195
+ --kbq-button-outline-theme-fade-on-states-active-hover-foreground: hsla(216, 100%, 65%, 100%);
196
+ --kbq-button-outline-theme-fade-on-states-active-hover-left-icon: hsla(216, 100%, 65%, 100%);
197
+ --kbq-button-outline-theme-fade-on-states-active-hover-right-icon: hsla(216, 100%, 65%, 100%);
198
+ --kbq-button-outline-theme-fade-on-states-disabled-background: transparent;
199
+ --kbq-button-outline-theme-fade-on-states-disabled-border: hsla(229, 15%, 50%, 32%);
200
+ --kbq-button-outline-theme-fade-on-states-disabled-foreground: hsla(229, 15%, 40%, 100%);
201
+ --kbq-button-outline-theme-fade-on-states-disabled-left-icon: hsla(229, 15%, 30%, 100%);
202
+ --kbq-button-outline-theme-fade-on-states-disabled-right-icon: hsla(229, 15%, 30%, 100%);
203
+ --kbq-button-outline-contrast-fade-on-background: transparent;
204
+ --kbq-button-outline-contrast-fade-on-border: hsla(229, 15%, 30%, 100%);
205
+ --kbq-button-outline-contrast-fade-on-foreground: hsla(229, 15%, 80%, 100%);
206
+ --kbq-button-outline-contrast-fade-on-left-icon: hsla(229, 15%, 80%, 100%);
207
+ --kbq-button-outline-contrast-fade-on-right-icon: hsla(229, 15%, 80%, 100%);
208
+ --kbq-button-outline-contrast-fade-on-states-hover-background: hsla(229, 15%, 50%, 16%);
209
+ --kbq-button-outline-contrast-fade-on-states-hover-border: hsla(229, 15%, 30%, 100%);
210
+ --kbq-button-outline-contrast-fade-on-states-hover-foreground: hsla(229, 15%, 80%, 100%);
211
+ --kbq-button-outline-contrast-fade-on-states-hover-left-icon: hsla(229, 15%, 80%, 100%);
212
+ --kbq-button-outline-contrast-fade-on-states-hover-right-icon: hsla(229, 15%, 80%, 100%);
213
+ --kbq-button-outline-contrast-fade-on-states-active-background: hsla(229, 100%, 85%, 15%);
214
+ --kbq-button-outline-contrast-fade-on-states-active-border: hsla(229, 15%, 30%, 100%);
215
+ --kbq-button-outline-contrast-fade-on-states-active-foreground: hsla(229, 15%, 80%, 100%);
216
+ --kbq-button-outline-contrast-fade-on-states-active-left-icon: hsla(229, 15%, 80%, 100%);
217
+ --kbq-button-outline-contrast-fade-on-states-active-right-icon: hsla(229, 15%, 80%, 100%);
218
+ --kbq-button-outline-contrast-fade-on-states-active-hover-background: hsla(229, 100%, 85%, 15%);
219
+ --kbq-button-outline-contrast-fade-on-states-active-hover-border: hsla(229, 15%, 30%, 100%);
220
+ --kbq-button-outline-contrast-fade-on-states-active-hover-foreground: hsla(229, 15%, 80%, 100%);
221
+ --kbq-button-outline-contrast-fade-on-states-active-hover-left-icon: hsla(229, 15%, 80%, 100%);
222
+ --kbq-button-outline-contrast-fade-on-states-active-hover-right-icon: hsla(229, 15%, 80%, 100%);
223
+ --kbq-button-outline-contrast-fade-on-states-disabled-background: transparent;
224
+ --kbq-button-outline-contrast-fade-on-states-disabled-border: hsla(229, 15%, 50%, 32%);
225
+ --kbq-button-outline-contrast-fade-on-states-disabled-foreground: hsla(229, 15%, 40%, 100%);
226
+ --kbq-button-outline-contrast-fade-on-states-disabled-left-icon: hsla(229, 15%, 30%, 100%);
227
+ --kbq-button-outline-contrast-fade-on-states-disabled-right-icon: hsla(229, 15%, 30%, 100%);
228
+ --kbq-button-transparent-theme-fade-on-border: transparent;
229
+ --kbq-button-transparent-theme-fade-on-foreground: hsla(216, 100%, 65%, 100%);
230
+ --kbq-button-transparent-theme-fade-on-background: transparent;
231
+ --kbq-button-transparent-theme-fade-on-left-icon: hsla(216, 100%, 65%, 100%);
232
+ --kbq-button-transparent-theme-fade-on-right-icon: hsla(216, 100%, 65%, 100%);
233
+ --kbq-button-transparent-theme-fade-on-states-hover-border: transparent;
234
+ --kbq-button-transparent-theme-fade-on-states-hover-foreground: hsla(216, 100%, 65%, 100%);
235
+ --kbq-button-transparent-theme-fade-on-states-hover-background: hsla(229, 15%, 50%, 16%);
236
+ --kbq-button-transparent-theme-fade-on-states-hover-left-icon: hsla(216, 100%, 65%, 100%);
237
+ --kbq-button-transparent-theme-fade-on-states-hover-right-icon: hsla(216, 100%, 65%, 100%);
238
+ --kbq-button-transparent-theme-fade-on-states-active-border: transparent;
239
+ --kbq-button-transparent-theme-fade-on-states-active-foreground: hsla(216, 100%, 65%, 100%);
240
+ --kbq-button-transparent-theme-fade-on-states-active-background: hsla(229, 100%, 85%, 15%);
241
+ --kbq-button-transparent-theme-fade-on-states-active-left-icon: hsla(216, 100%, 65%, 100%);
242
+ --kbq-button-transparent-theme-fade-on-states-active-right-icon: hsla(216, 100%, 65%, 100%);
243
+ --kbq-button-transparent-theme-fade-on-states-active-hover-border: transparent;
244
+ --kbq-button-transparent-theme-fade-on-states-active-hover-foreground: hsla(216, 100%, 65%, 100%);
245
+ --kbq-button-transparent-theme-fade-on-states-active-hover-background: hsla(229, 100%, 85%, 15%);
246
+ --kbq-button-transparent-theme-fade-on-states-active-hover-left-icon: hsla(216, 100%, 65%, 100%);
247
+ --kbq-button-transparent-theme-fade-on-states-active-hover-right-icon: hsla(216, 100%, 65%, 100%);
248
+ --kbq-button-transparent-theme-fade-on-states-disabled-border: transparent;
249
+ --kbq-button-transparent-theme-fade-on-states-disabled-foreground: hsla(229, 15%, 40%, 100%);
250
+ --kbq-button-transparent-theme-fade-on-states-disabled-background: transparent;
251
+ --kbq-button-transparent-theme-fade-on-states-disabled-left-icon: hsla(229, 15%, 30%, 100%);
252
+ --kbq-button-transparent-theme-fade-on-states-disabled-right-icon: hsla(229, 15%, 30%, 100%);
253
+ --kbq-button-transparent-contrast-fade-on-border: transparent;
254
+ --kbq-button-transparent-contrast-fade-on-foreground: hsla(229, 15%, 80%, 100%);
255
+ --kbq-button-transparent-contrast-fade-on-background: transparent;
256
+ --kbq-button-transparent-contrast-fade-on-left-icon: hsla(229, 15%, 80%, 100%);
257
+ --kbq-button-transparent-contrast-fade-on-right-icon: hsla(229, 15%, 80%, 100%);
258
+ --kbq-button-transparent-contrast-fade-on-states-hover-border: transparent;
259
+ --kbq-button-transparent-contrast-fade-on-states-hover-foreground: hsla(229, 15%, 80%, 100%);
260
+ --kbq-button-transparent-contrast-fade-on-states-hover-background: hsla(229, 15%, 50%, 16%);
261
+ --kbq-button-transparent-contrast-fade-on-states-hover-left-icon: hsla(229, 15%, 80%, 100%);
262
+ --kbq-button-transparent-contrast-fade-on-states-hover-right-icon: hsla(229, 15%, 80%, 100%);
263
+ --kbq-button-transparent-contrast-fade-on-states-active-border: transparent;
264
+ --kbq-button-transparent-contrast-fade-on-states-active-foreground: hsla(229, 15%, 80%, 100%);
265
+ --kbq-button-transparent-contrast-fade-on-states-active-background: hsla(229, 100%, 85%, 15%);
266
+ --kbq-button-transparent-contrast-fade-on-states-active-left-icon: hsla(229, 15%, 80%, 100%);
267
+ --kbq-button-transparent-contrast-fade-on-states-active-right-icon: hsla(229, 15%, 80%, 100%);
268
+ --kbq-button-transparent-contrast-fade-on-states-active-hover-border: transparent;
269
+ --kbq-button-transparent-contrast-fade-on-states-active-hover-foreground: hsla(229, 15%, 80%, 100%);
270
+ --kbq-button-transparent-contrast-fade-on-states-active-hover-background: hsla(229, 100%, 85%, 15%);
271
+ --kbq-button-transparent-contrast-fade-on-states-active-hover-left-icon: hsla(229, 15%, 80%, 100%);
272
+ --kbq-button-transparent-contrast-fade-on-states-active-hover-right-icon: hsla(229, 15%, 80%, 100%);
273
+ --kbq-button-transparent-contrast-fade-on-states-disabled-border: transparent;
274
+ --kbq-button-transparent-contrast-fade-on-states-disabled-foreground: hsla(229, 15%, 40%, 100%);
275
+ --kbq-button-transparent-contrast-fade-on-states-disabled-background: transparent;
276
+ --kbq-button-transparent-contrast-fade-on-states-disabled-left-icon: hsla(229, 15%, 30%, 100%);
277
+ --kbq-button-transparent-contrast-fade-on-states-disabled-right-icon: hsla(229, 15%, 30%, 100%);
278
+ }
package/button/button.scss CHANGED
@@ -6,6 +6,8 @@
6
6
  @use '../core/styles/tokens';
7
7
  @use '../core/styles/common/tokens' as *;
8
8
 
9
+ @use './button-theme' as *;
10
+
9
11
  $tokens: meta.module-variables(tokens) !default;
10
12
 
11
13
  .kbq-button {
@@ -46,3 +48,6 @@ $tokens: meta.module-variables(tokens) !default;
46
48
 
47
49
  border-radius: inherit;
48
50
  }
51
+
52
+ @include kbq-button-theme();
53
+ @include kbq-button-typography();
package/button-toggle/_button-toggle-theme.scss CHANGED
@@ -5,74 +5,62 @@
5
5
 
6
6
  @use '../core/styles/common/tokens' as *;
7
7
 
8
- @mixin kbq-button-toggle-state($component, $state-name) {
9
- $state: map.get($component, $state-name);
8
+ @mixin kbq-button-toggle-state($state-name) {
9
+ background: kbq-css-variable(button-toggle-item-#{$state-name}-background);
10
10
 
11
- background: kbq-css-variable(button-toggle-item-#{$state-name}-background, map.get($state, background));
12
-
13
- color: kbq-css-variable(button-toggle-item-#{$state-name}-text, map.get($state, text));
11
+ color: kbq-css-variable(button-toggle-item-#{$state-name}-text);
14
12
 
15
13
  & .kbq-icon {
16
- color: kbq-css-variable(button-toggle-item-#{$state-name}-icon, map.get($state, icon));
14
+ color: kbq-css-variable(button-toggle-item-#{$state-name}-icon);
17
15
  }
18
16
  }
19
17
 
20
- @mixin kbq-button-toggle-theme($theme) {
21
- $button-toggle: map.get(map.get($theme, components), button-toggle);
22
-
18
+ @mixin kbq-button-toggle-theme() {
23
19
  .kbq-button-toggle-group {
24
- background: kbq-css-variable(
25
- button-toggle-container-background,
26
- map.get($button-toggle, container, background)
27
- );
20
+ background: kbq-css-variable(button-toggle-container-background);
28
21
 
29
22
  .kbq-button-toggle {
30
- $button: map.get($button-toggle, item);
31
-
32
23
  & > .kbq-button,
33
24
  & > .kbq-icon-button {
34
- @include kbq-button-toggle-state($button, default);
25
+ @include kbq-button-toggle-state(default);
35
26
 
36
27
  &:hover:not(.kbq-disabled) {
37
- @include kbq-button-toggle-state($button, states-hover);
28
+ @include kbq-button-toggle-state(states-hover);
38
29
  }
39
30
 
40
31
  &:active:not(.kbq-disabled) {
41
- @include kbq-button-toggle-state($button, states-active);
32
+ @include kbq-button-toggle-state(states-active);
42
33
  }
43
34
 
44
35
  &.kbq-selected:not(.kbq-disabled) {
45
- @include kbq-button-toggle-state($button, states-selected);
36
+ @include kbq-button-toggle-state(states-selected);
46
37
 
47
38
  &:hover {
48
- @include kbq-button-toggle-state($button, states-selected-hover);
39
+ @include kbq-button-toggle-state(states-selected-hover);
49
40
  }
50
41
 
51
42
  &:active {
52
- @include kbq-button-toggle-state($button, states-selected-active);
43
+ @include kbq-button-toggle-state(states-selected-active);
53
44
  }
54
45
  }
55
46
 
56
47
  &.kbq-disabled {
57
- @include kbq-button-toggle-state($button, states-disabled);
48
+ @include kbq-button-toggle-state(states-disabled);
58
49
  }
59
50
 
60
51
  &.kbq-disabled.kbq-selected {
61
- @include kbq-button-toggle-state($button, states-selected-disabled);
52
+ @include kbq-button-toggle-state(states-selected-disabled);
62
53
  }
63
54
 
64
55
  &.cdk-keyboard-focused {
65
- border-color: kbq-css-variable(
66
- button-toggle-item-states-focused-outline,
67
- map.get($button, focused)
68
- );
56
+ border-color: kbq-css-variable(button-toggle-item-states-focused-outline);
69
57
  }
70
58
  }
71
59
  }
72
60
  }
73
61
  }
74
62
 
75
- @mixin kbq-button-toggle-typography($config) {
63
+ @mixin kbq-button-toggle-typography() {
76
64
  .kbq-button-toggle .kbq-button-toggle-wrapper {
77
65
  @include kbq-typography-css-variables(button-toggle, item);
78
66
  }
package/button-toggle/button-toggle-tokens.scss ADDED
@@ -0,0 +1,78 @@
1
+ .kbq-button-toggle-group {
2
+ --kbq-button-toggle-size-container-border-radius: 8px;
3
+ --kbq-button-toggle-size-container-padding-horizontal: 4px;
4
+ --kbq-button-toggle-size-container-padding-vertical: 4px;
5
+ --kbq-button-toggle-size-container-content-gap-horizontal: 4px;
6
+ --kbq-button-toggle-size-item-height: 24px;
7
+ --kbq-button-toggle-size-item-border-radius: 4px;
8
+ --kbq-button-toggle-size-item-padding-horizontal: 8px;
9
+ --kbq-button-toggle-size-item-padding-vertical: 2px;
10
+ --kbq-button-toggle-size-item-content-gap-horizontal: 4px;
11
+ --kbq-button-toggle-size-item-focus-outline-width: 2px;
12
+ --kbq-button-toggle-font-item-font-size: 14px;
13
+ --kbq-button-toggle-font-item-line-height: 20px;
14
+ --kbq-button-toggle-font-item-letter-spacing: -0.006em;
15
+ --kbq-button-toggle-font-item-font-weight: 500;
16
+ --kbq-button-toggle-font-item-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
17
+ Arial, sans-serif;
18
+ --kbq-button-toggle-font-item-text-transform: null;
19
+ --kbq-button-toggle-font-item-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
20
+ }
21
+
22
+ :where(.kbq-light, .theme-light, .kbq-theme-light) {
23
+ --kbq-button-toggle-container-background: hsla(229, 15%, 92%, 100%);
24
+ --kbq-button-toggle-item-default-background: hsla(229, 15%, 92%, 100%);
25
+ --kbq-button-toggle-item-default-text: hsla(229, 15%, 15%, 100%);
26
+ --kbq-button-toggle-item-default-icon: hsla(229, 15%, 60%, 100%);
27
+ --kbq-button-toggle-item-states-hover-background: hsla(229, 15%, 88%, 100%);
28
+ --kbq-button-toggle-item-states-hover-text: hsla(229, 15%, 15%, 100%);
29
+ --kbq-button-toggle-item-states-hover-icon: hsla(229, 15%, 60%, 100%);
30
+ --kbq-button-toggle-item-states-active-background: hsla(229, 15%, 85%, 100%);
31
+ --kbq-button-toggle-item-states-active-text: hsla(229, 15%, 15%, 100%);
32
+ --kbq-button-toggle-item-states-active-icon: hsla(229, 15%, 60%, 100%);
33
+ --kbq-button-toggle-item-states-selected-background: hsla(229, 15%, 100%, 100%);
34
+ --kbq-button-toggle-item-states-selected-text: hsla(229, 15%, 15%, 100%);
35
+ --kbq-button-toggle-item-states-selected-icon: hsla(229, 15%, 60%, 100%);
36
+ --kbq-button-toggle-item-states-selected-hover-background: hsla(229, 15%, 50%, 8%);
37
+ --kbq-button-toggle-item-states-selected-hover-text: hsla(229, 15%, 15%, 100%);
38
+ --kbq-button-toggle-item-states-selected-hover-icon: hsla(229, 15%, 60%, 100%);
39
+ --kbq-button-toggle-item-states-selected-active-background: hsla(229, 15%, 50%, 16%);
40
+ --kbq-button-toggle-item-states-selected-active-text: hsla(229, 15%, 15%, 100%);
41
+ --kbq-button-toggle-item-states-selected-active-icon: hsla(229, 15%, 60%, 100%);
42
+ --kbq-button-toggle-item-states-selected-disabled-background: hsla(229, 15%, 50%, 16%);
43
+ --kbq-button-toggle-item-states-selected-disabled-text: hsla(229, 15%, 15%, 32%);
44
+ --kbq-button-toggle-item-states-selected-disabled-icon: hsla(229, 15%, 15%, 32%);
45
+ --kbq-button-toggle-item-states-disabled-background: none;
46
+ --kbq-button-toggle-item-states-disabled-text: hsla(229, 15%, 15%, 32%);
47
+ --kbq-button-toggle-item-states-disabled-icon: hsla(229, 15%, 15%, 32%);
48
+ --kbq-button-toggle-item-states-focused-outline: hsla(216, 100%, 60%, 100%);
49
+ }
50
+
51
+ :where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
52
+ --kbq-button-toggle-container-background: hsla(229, 15%, 25%, 100%);
53
+ --kbq-button-toggle-item-default-background: hsla(229, 15%, 25%, 100%);
54
+ --kbq-button-toggle-item-default-text: hsla(229, 15%, 80%, 100%);
55
+ --kbq-button-toggle-item-default-icon: hsla(229, 15%, 45%, 100%);
56
+ --kbq-button-toggle-item-states-hover-background: hsla(229, 15%, 25%, 100%);
57
+ --kbq-button-toggle-item-states-hover-text: hsla(229, 15%, 80%, 100%);
58
+ --kbq-button-toggle-item-states-hover-icon: hsla(229, 15%, 45%, 100%);
59
+ --kbq-button-toggle-item-states-active-background: hsla(229, 15%, 27%, 100%);
60
+ --kbq-button-toggle-item-states-active-text: hsla(229, 15%, 80%, 100%);
61
+ --kbq-button-toggle-item-states-active-icon: hsla(229, 15%, 45%, 100%);
62
+ --kbq-button-toggle-item-states-selected-background: hsla(229, 15%, 15%, 100%);
63
+ --kbq-button-toggle-item-states-selected-text: hsla(229, 15%, 80%, 100%);
64
+ --kbq-button-toggle-item-states-selected-icon: hsla(229, 15%, 45%, 100%);
65
+ --kbq-button-toggle-item-states-selected-hover-background: hsla(229, 15%, 50%, 16%);
66
+ --kbq-button-toggle-item-states-selected-hover-text: hsla(229, 15%, 80%, 100%);
67
+ --kbq-button-toggle-item-states-selected-hover-icon: hsla(229, 15%, 45%, 100%);
68
+ --kbq-button-toggle-item-states-selected-active-background: hsla(229, 100%, 85%, 15%);
69
+ --kbq-button-toggle-item-states-selected-active-text: hsla(229, 15%, 80%, 100%);
70
+ --kbq-button-toggle-item-states-selected-active-icon: hsla(229, 15%, 45%, 100%);
71
+ --kbq-button-toggle-item-states-selected-disabled-background: hsla(229, 15%, 50%, 16%);
72
+ --kbq-button-toggle-item-states-selected-disabled-text: hsla(229, 15%, 40%, 100%);
73
+ --kbq-button-toggle-item-states-selected-disabled-icon: hsla(229, 15%, 30%, 100%);
74
+ --kbq-button-toggle-item-states-disabled-background: none;
75
+ --kbq-button-toggle-item-states-disabled-text: hsla(229, 15%, 40%, 100%);
76
+ --kbq-button-toggle-item-states-disabled-icon: hsla(229, 15%, 30%, 100%);
77
+ --kbq-button-toggle-item-states-focused-outline: hsla(216, 100%, 60%, 100%);
78
+ }
package/button-toggle/button-toggle.scss CHANGED
@@ -3,10 +3,9 @@
3
3
 
4
4
  @use '../core/styles/common';
5
5
 
6
- @use '../core/styles/tokens';
7
6
  @use '../core/styles/common/tokens' as *;
8
7
 
9
- $tokens: meta.module-variables(tokens) !default;
8
+ @use './button-toggle-theme' as *;
10
9
 
11
10
  .kbq-button-toggle-group {
12
11
  box-sizing: border-box;
@@ -28,11 +27,14 @@ $tokens: meta.module-variables(tokens) !default;
28
27
  align-items: center;
29
28
 
30
29
  height: kbq-css-variable(button-toggle-size-item-height);
30
+ min-height: kbq-css-variable(button-toggle-size-item-height);
31
31
 
32
32
  border-radius: kbq-css-variable(button-toggle-size-item-border-radius);
33
33
 
34
34
  > .kbq-button,
35
35
  > .kbq-button-icon {
36
+ height: inherit;
37
+ min-height: inherit;
36
38
  border-radius: kbq-css-variable(button-toggle-size-item-border-radius);
37
39
 
38
40
  padding: kbq-difference-series-css-variables(
@@ -89,3 +91,6 @@ $tokens: meta.module-variables(tokens) !default;
89
91
  }
90
92
  }
91
93
  }
94
+
95
+ @include kbq-button-toggle-theme();
96
+ @include kbq-button-toggle-typography();