@koobiq/components 18.7.1 → 18.9.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.
- package/accordion/accordion-tokens.scss +1 -13
- package/alert/alert-tokens.scss +1 -36
- package/autocomplete/autocomplete-tokens.scss +1 -8
- package/autocomplete/autocomplete.scss +21 -1
- package/badge/badge-tokens.scss +1 -71
- package/button/button-tokens.scss +1 -140
- package/button-toggle/button-toggle-tokens.scss +1 -32
- package/checkbox/checkbox-tokens.scss +1 -50
- package/code-block/actionbar.component.d.ts +2 -2
- package/code-block/code-block-content.d.ts +28 -0
- package/code-block/code-block-tokens.scss +1 -139
- package/code-block/code-block.component.d.ts +3 -3
- package/code-block/code-block.module.d.ts +3 -3
- package/code-block/code-block.types.d.ts +10 -2
- package/core/forms/forms-tokens.scss +1 -8
- package/core/option/_option-theme.scss +10 -0
- package/core/option/option-tokens.scss +4 -0
- package/core/selection/pseudo-checkbox/pseudo-checkbox-tokens.scss +1 -50
- package/core/styles/_koobiq-theme.scss +3 -2
- package/core/styles/common/_list.scss +6 -8
- package/core/styles/common/_select.scss +3 -2
- package/core/styles/theming/scrollbar-tokens.scss +1 -16
- package/datepicker/datepicker-tokens.scss +1 -21
- package/divider/divider-tokens.scss +1 -7
- package/dl/dl-tokens.scss +1 -8
- package/dropdown/_dropdown-theme.scss +10 -0
- package/dropdown/dropdown-tokens.scss +5 -8
- package/dropdown/dropdown.scss +22 -3
- package/empty-state/empty-state-tokens.scss +1 -8
- package/esm2022/accordion/accordion-trigger.component.mjs +7 -19
- package/esm2022/accordion/accordion.component.mjs +2 -2
- package/esm2022/alert/alert.component.mjs +3 -3
- package/esm2022/autocomplete/autocomplete-trigger.directive.mjs +4 -3
- package/esm2022/autocomplete/autocomplete.component.mjs +3 -3
- package/esm2022/badge/badge.component.mjs +2 -2
- package/esm2022/button/button.component.mjs +3 -3
- package/esm2022/button-toggle/button-toggle.component.mjs +5 -11
- package/esm2022/checkbox/checkbox.mjs +3 -3
- package/esm2022/code-block/actionbar.component.mjs +1 -1
- package/esm2022/code-block/code-block-content.mjs +382 -0
- package/esm2022/code-block/code-block.component.mjs +5 -5
- package/esm2022/code-block/code-block.module.mjs +7 -27
- package/esm2022/code-block/code-block.types.mjs +1 -1
- package/esm2022/core/common-behaviors/common-module.mjs +2 -2
- package/esm2022/core/option/optgroup.mjs +3 -3
- package/esm2022/core/option/option.mjs +3 -3
- package/esm2022/core/selection/pseudo-checkbox/pseudo-checkbox.mjs +2 -2
- package/esm2022/core/version.mjs +2 -2
- package/esm2022/datepicker/calendar-body.component.mjs +3 -3
- package/esm2022/datepicker/calendar-header.component.mjs +3 -3
- package/esm2022/datepicker/datepicker-toggle.component.mjs +3 -3
- package/esm2022/datepicker/datepicker.component.mjs +5 -4
- package/esm2022/datepicker/month-view.component.mjs +3 -3
- package/esm2022/divider/divider.component.mjs +2 -2
- package/esm2022/dl/dl.component.mjs +2 -2
- package/esm2022/dropdown/dropdown-item.component.mjs +3 -3
- package/esm2022/dropdown/dropdown.component.mjs +3 -3
- package/esm2022/empty-state/empty-state.component.mjs +2 -2
- package/esm2022/file-upload/multiple-file-upload.component.mjs +3 -3
- package/esm2022/file-upload/single-file-upload.component.mjs +3 -3
- package/esm2022/form-field/cleaner.mjs +3 -9
- package/esm2022/form-field/form-field.mjs +4 -4
- package/esm2022/form-field/hint.mjs +2 -2
- package/esm2022/form-field/password-hint.mjs +5 -13
- package/esm2022/icon/icon-button.component.mjs +2 -2
- package/esm2022/icon/icon-item.component.mjs +2 -2
- package/esm2022/icon/icon.component.mjs +2 -2
- package/esm2022/list/list-selection.component.mjs +7 -15
- package/esm2022/list/list.component.mjs +2 -2
- package/esm2022/loader-overlay/loader-overlay.component.mjs +3 -3
- package/esm2022/markdown/markdown.component.mjs +7 -21
- package/esm2022/modal/modal.component.mjs +5 -4
- package/esm2022/modal/modal.directive.mjs +5 -17
- package/esm2022/navbar/navbar-item.component.mjs +3 -3
- package/esm2022/navbar/navbar.component.mjs +2 -2
- package/esm2022/navbar/vertical-navbar.component.mjs +5 -13
- package/esm2022/popover/popover-confirm.component.mjs +3 -3
- package/esm2022/popover/popover.component.mjs +3 -3
- package/esm2022/progress-bar/progress-bar.component.mjs +3 -3
- package/esm2022/progress-spinner/progress-spinner.component.mjs +3 -3
- package/esm2022/radio/radio.component.mjs +3 -3
- package/esm2022/risk-level/risk-level.component.mjs +2 -2
- package/esm2022/scrollbar/scrollbar.component.mjs +3 -3
- package/esm2022/select/select.component.mjs +49 -16
- package/esm2022/sidepanel/sidepanel-container.component.mjs +3 -3
- package/esm2022/sidepanel/sidepanel-directives.mjs +7 -29
- package/esm2022/tabs/paginated-tab-header.mjs +32 -30
- package/esm2022/tabs/public-api.mjs +8 -8
- package/esm2022/tabs/tab-body.component.mjs +3 -3
- package/esm2022/tabs/tab-group.component.mjs +34 -52
- package/esm2022/tabs/tab-header.component.mjs +17 -35
- package/esm2022/tabs/tab-nav-bar.mjs +292 -0
- package/esm2022/tabs/tab.component.mjs +6 -5
- package/esm2022/tabs/tabs.module.mjs +39 -45
- package/esm2022/tags/tag-list.component.mjs +2 -2
- package/esm2022/tags/tag.component.mjs +3 -3
- package/esm2022/timezone/timezone-option.component.mjs +3 -3
- package/esm2022/timezone/timezone-select.component.mjs +3 -3
- package/esm2022/toast/toast.component.mjs +3 -3
- package/esm2022/toggle/toggle.component.mjs +3 -3
- package/esm2022/tooltip/tooltip.component.mjs +3 -3
- package/esm2022/tree/toggle.mjs +2 -2
- package/esm2022/tree/tree-option.component.mjs +3 -3
- package/esm2022/tree/tree-selection.component.mjs +2 -2
- package/esm2022/tree/tree.mjs +2 -2
- package/esm2022/tree-select/tree-select.component.mjs +45 -9
- package/fesm2022/koobiq-components-accordion.mjs +8 -20
- package/fesm2022/koobiq-components-accordion.mjs.map +1 -1
- package/fesm2022/koobiq-components-alert.mjs +2 -2
- package/fesm2022/koobiq-components-alert.mjs.map +1 -1
- package/fesm2022/koobiq-components-autocomplete.mjs +5 -4
- package/fesm2022/koobiq-components-autocomplete.mjs.map +1 -1
- package/fesm2022/koobiq-components-badge.mjs +2 -2
- package/fesm2022/koobiq-components-badge.mjs.map +1 -1
- package/fesm2022/koobiq-components-button-toggle.mjs +4 -10
- package/fesm2022/koobiq-components-button-toggle.mjs.map +1 -1
- package/fesm2022/koobiq-components-button.mjs +2 -2
- package/fesm2022/koobiq-components-button.mjs.map +1 -1
- package/fesm2022/koobiq-components-checkbox.mjs +2 -2
- package/fesm2022/koobiq-components-checkbox.mjs.map +1 -1
- package/fesm2022/koobiq-components-code-block.mjs +389 -31
- package/fesm2022/koobiq-components-code-block.mjs.map +1 -1
- package/fesm2022/koobiq-components-core.mjs +8 -8
- package/fesm2022/koobiq-components-core.mjs.map +1 -1
- package/fesm2022/koobiq-components-datepicker.mjs +12 -11
- package/fesm2022/koobiq-components-datepicker.mjs.map +1 -1
- package/fesm2022/koobiq-components-divider.mjs +2 -2
- package/fesm2022/koobiq-components-divider.mjs.map +1 -1
- package/fesm2022/koobiq-components-dl.mjs +2 -2
- package/fesm2022/koobiq-components-dl.mjs.map +1 -1
- package/fesm2022/koobiq-components-dropdown.mjs +4 -4
- package/fesm2022/koobiq-components-dropdown.mjs.map +1 -1
- package/fesm2022/koobiq-components-empty-state.mjs +2 -2
- package/fesm2022/koobiq-components-empty-state.mjs.map +1 -1
- package/fesm2022/koobiq-components-file-upload.mjs +4 -4
- package/fesm2022/koobiq-components-file-upload.mjs.map +1 -1
- package/fesm2022/koobiq-components-form-field.mjs +11 -25
- package/fesm2022/koobiq-components-form-field.mjs.map +1 -1
- package/fesm2022/koobiq-components-icon.mjs +6 -6
- package/fesm2022/koobiq-components-icon.mjs.map +1 -1
- package/fesm2022/koobiq-components-list.mjs +8 -16
- package/fesm2022/koobiq-components-list.mjs.map +1 -1
- package/fesm2022/koobiq-components-loader-overlay.mjs +2 -2
- package/fesm2022/koobiq-components-loader-overlay.mjs.map +1 -1
- package/fesm2022/koobiq-components-markdown.mjs +6 -20
- package/fesm2022/koobiq-components-markdown.mjs.map +1 -1
- package/fesm2022/koobiq-components-modal.mjs +8 -19
- package/fesm2022/koobiq-components-modal.mjs.map +1 -1
- package/fesm2022/koobiq-components-navbar.mjs +8 -16
- package/fesm2022/koobiq-components-navbar.mjs.map +1 -1
- package/fesm2022/koobiq-components-popover.mjs +4 -4
- package/fesm2022/koobiq-components-popover.mjs.map +1 -1
- package/fesm2022/koobiq-components-progress-bar.mjs +2 -2
- package/fesm2022/koobiq-components-progress-bar.mjs.map +1 -1
- package/fesm2022/koobiq-components-progress-spinner.mjs +2 -2
- package/fesm2022/koobiq-components-progress-spinner.mjs.map +1 -1
- package/fesm2022/koobiq-components-radio.mjs +2 -2
- package/fesm2022/koobiq-components-radio.mjs.map +1 -1
- package/fesm2022/koobiq-components-risk-level.mjs +2 -2
- package/fesm2022/koobiq-components-risk-level.mjs.map +1 -1
- package/fesm2022/koobiq-components-scrollbar.mjs +2 -2
- package/fesm2022/koobiq-components-scrollbar.mjs.map +1 -1
- package/fesm2022/koobiq-components-select.mjs +49 -16
- package/fesm2022/koobiq-components-select.mjs.map +1 -1
- package/fesm2022/koobiq-components-sidepanel.mjs +8 -30
- package/fesm2022/koobiq-components-sidepanel.mjs.map +1 -1
- package/fesm2022/koobiq-components-tabs.mjs +349 -208
- package/fesm2022/koobiq-components-tabs.mjs.map +1 -1
- package/fesm2022/koobiq-components-tags.mjs +4 -4
- package/fesm2022/koobiq-components-tags.mjs.map +1 -1
- package/fesm2022/koobiq-components-timezone.mjs +4 -4
- package/fesm2022/koobiq-components-timezone.mjs.map +1 -1
- package/fesm2022/koobiq-components-toast.mjs +2 -2
- package/fesm2022/koobiq-components-toast.mjs.map +1 -1
- package/fesm2022/koobiq-components-toggle.mjs +2 -2
- package/fesm2022/koobiq-components-toggle.mjs.map +1 -1
- package/fesm2022/koobiq-components-tooltip.mjs +2 -2
- package/fesm2022/koobiq-components-tooltip.mjs.map +1 -1
- package/fesm2022/koobiq-components-tree-select.mjs +45 -9
- package/fesm2022/koobiq-components-tree-select.mjs.map +1 -1
- package/fesm2022/koobiq-components-tree.mjs +8 -8
- package/fesm2022/koobiq-components-tree.mjs.map +1 -1
- package/file-upload/file-upload-tokens.scss +1 -52
- package/form-field/form-field-tokens.scss +1 -29
- package/form-field/form-field.scss +5 -6
- package/form-field/hint-tokens.scss +1 -22
- package/icon/icon-button-tokens.scss +1 -30
- package/icon/icon-item-tokens.scss +1 -26
- package/icon/icon-tokens.scss +2 -10
- package/link/_link-theme.scss +27 -5
- package/link/link-tokens.scss +1 -21
- package/list/_list-theme.scss +10 -0
- package/list/list-tokens.scss +17 -42
- package/loader-overlay/loader-overlay-tokens.scss +1 -12
- package/markdown/markdown-tokens.scss +1 -34
- package/modal/modal-tokens.scss +1 -12
- package/navbar/navbar-tokens.scss +1 -28
- package/package.json +7 -9
- package/popover/popover-tokens.scss +1 -12
- package/prebuilt-themes/dark-theme.css +1 -1
- package/prebuilt-themes/light-theme.css +1 -1
- package/prebuilt-themes/theme.css +1 -1
- package/progress-bar/progress-bar-tokens.scss +1 -10
- package/progress-spinner/progress-spinner-tokens.scss +1 -9
- package/radio/radio-tokens.scss +11 -70
- package/risk-level/risk-level-tokens.scss +1 -32
- package/schematics/ng-add/index.js +5 -8
- package/scrollbar/scrollbar-tokens.scss +1 -16
- package/select/select-tokens.scss +1 -8
- package/select/select.component.d.ts +40 -4
- package/select/select.scss +20 -0
- package/sidepanel/sidepanel-tokens.scss +1 -11
- package/tabs/_tabs-common.scss +27 -5
- package/tabs/_tabs-theme.scss +6 -16
- package/tabs/paginated-tab-header.d.ts +23 -21
- package/tabs/public-api.d.ts +7 -7
- package/tabs/tab-group.component.d.ts +21 -24
- package/tabs/tab-group.scss +27 -29
- package/tabs/tab-header.component.d.ts +13 -19
- package/tabs/tab-header.scss +5 -27
- package/tabs/tab-link.scss +14 -0
- package/tabs/tab-nav-bar.d.ts +92 -0
- package/tabs/tab-nav-bar.scss +36 -0
- package/tabs/tab.component.d.ts +1 -0
- package/tabs/tabs-tokens.scss +1 -92
- package/tabs/tabs.module.d.ts +12 -12
- package/tags/tag-tokens.scss +1 -74
- package/timezone/timezone-option-tokens.scss +5 -11
- package/toast/toast-tokens.scss +1 -22
- package/toggle/toggle-tokens.scss +1 -52
- package/tooltip/tooltip-tokens.scss +1 -21
- package/tree/tree-option.scss +11 -0
- package/tree/tree-tokens.scss +1 -37
- package/tree-select/_tree-select-theme.scss +5 -1
- package/tree-select/tree-select-tokens.scss +2 -6
- package/tree-select/tree-select.component.d.ts +45 -5
- package/esm2022/tabs/tab-nav-bar/index.mjs +0 -2
- package/esm2022/tabs/tab-nav-bar/tab-nav-bar.mjs +0 -119
- package/select/README.md +0 -0
- package/tabs/README.md +0 -0
- package/tabs/tab-nav-bar/index.d.ts +0 -1
- package/tabs/tab-nav-bar/tab-nav-bar.d.ts +0 -42
- package/tabs/tab-nav-bar/tab-nav-bar.scss +0 -35
|
@@ -18,9 +18,7 @@
|
|
|
18
18
|
--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal: var(--kbq-size-s);
|
|
19
19
|
--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical: var(--kbq-size-s);
|
|
20
20
|
--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal: var(--kbq-size-xxs);
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
:where(.kbq-light, .theme-light, .kbq-theme-light) {
|
|
21
|
+
/* THEME TOKENS */
|
|
24
22
|
--kbq-file-upload-single-default-container-border: var(--kbq-line-contrast-fade);
|
|
25
23
|
--kbq-file-upload-single-default-container-background: var(--kbq-background-bg);
|
|
26
24
|
--kbq-file-upload-single-default-upload-icon-color: var(--kbq-icon-contrast-fade);
|
|
@@ -68,52 +66,3 @@
|
|
|
68
66
|
--kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);
|
|
69
67
|
--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary);
|
|
70
68
|
}
|
|
71
|
-
|
|
72
|
-
:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
|
|
73
|
-
--kbq-file-upload-single-default-container-border: var(--kbq-line-contrast-fade);
|
|
74
|
-
--kbq-file-upload-single-default-container-background: var(--kbq-background-bg);
|
|
75
|
-
--kbq-file-upload-single-default-upload-icon-color: var(--kbq-icon-contrast-fade);
|
|
76
|
-
--kbq-file-upload-single-default-left-icon-color: var(--kbq-icon-contrast-fade);
|
|
77
|
-
--kbq-file-upload-single-default-text-block-color: var(--kbq-foreground-contrast);
|
|
78
|
-
--kbq-file-upload-single-default-icon-button-color: var(--kbq-icon-contrast);
|
|
79
|
-
--kbq-file-upload-single-states-on-drag-container-border: var(--kbq-line-theme-fade);
|
|
80
|
-
--kbq-file-upload-single-states-on-drag-container-background: var(--kbq-background-theme-fade);
|
|
81
|
-
--kbq-file-upload-single-states-on-drag-upload-icon-color: var(--kbq-icon-contrast-fade);
|
|
82
|
-
--kbq-file-upload-single-states-on-drag-left-icon-color: var(--kbq-icon-contrast-fade);
|
|
83
|
-
--kbq-file-upload-single-states-on-drag-text-block-color: var(--kbq-foreground-contrast);
|
|
84
|
-
--kbq-file-upload-single-states-error-container-border: var(--kbq-line-error);
|
|
85
|
-
--kbq-file-upload-single-states-error-container-background: var(--kbq-states-background-error-less);
|
|
86
|
-
--kbq-file-upload-single-states-error-left-icon-color: var(--kbq-icon-error);
|
|
87
|
-
--kbq-file-upload-single-states-error-text-block-color: var(--kbq-foreground-error);
|
|
88
|
-
--kbq-file-upload-single-states-disabled-container-border: var(--kbq-states-line-disabled);
|
|
89
|
-
--kbq-file-upload-single-states-disabled-container-background: var(--kbq-states-background-disabled);
|
|
90
|
-
--kbq-file-upload-single-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);
|
|
91
|
-
--kbq-file-upload-single-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);
|
|
92
|
-
--kbq-file-upload-single-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);
|
|
93
|
-
--kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
|
|
94
|
-
--kbq-file-upload-multiple-default-container-border: var(--kbq-line-contrast-fade);
|
|
95
|
-
--kbq-file-upload-multiple-default-container-background: var(--kbq-background-bg);
|
|
96
|
-
--kbq-file-upload-multiple-default-upload-icon-color: var(--kbq-icon-contrast-fade);
|
|
97
|
-
--kbq-file-upload-multiple-default-left-icon-color: var(--kbq-icon-contrast-fade);
|
|
98
|
-
--kbq-file-upload-multiple-default-text-block-color: var(--kbq-foreground-contrast);
|
|
99
|
-
--kbq-file-upload-multiple-default-icon-button-color: var(--kbq-icon-contrast);
|
|
100
|
-
--kbq-file-upload-multiple-default-grid-divider-color: var(--kbq-line-contrast-less);
|
|
101
|
-
--kbq-file-upload-multiple-states-on-drag-container-border: var(--kbq-line-theme-fade);
|
|
102
|
-
--kbq-file-upload-multiple-states-on-drag-container-background: var(--kbq-background-theme-fade);
|
|
103
|
-
--kbq-file-upload-multiple-states-on-drag-upload-icon-color: var(--kbq-icon-contrast-fade);
|
|
104
|
-
--kbq-file-upload-multiple-states-on-drag-left-icon-color: var(--kbq-icon-contrast-fade);
|
|
105
|
-
--kbq-file-upload-multiple-states-on-drag-icon-button-color: var(--kbq-icon-contrast);
|
|
106
|
-
--kbq-file-upload-multiple-states-on-drag-text-block-color: var(--kbq-foreground-contrast);
|
|
107
|
-
--kbq-file-upload-multiple-states-on-drag-grid-divider-color: var(--kbq-line-theme-fade);
|
|
108
|
-
--kbq-file-upload-multiple-states-error-grid-cell-background: var(--kbq-states-background-error-less);
|
|
109
|
-
--kbq-file-upload-multiple-states-error-left-icon-color: var(--kbq-icon-error);
|
|
110
|
-
--kbq-file-upload-multiple-states-error-text-block-color: var(--kbq-foreground-error);
|
|
111
|
-
--kbq-file-upload-multiple-states-error-icon-button-color: var(--kbq-icon-error);
|
|
112
|
-
--kbq-file-upload-multiple-states-disabled-container-border: var(--kbq-states-line-disabled);
|
|
113
|
-
--kbq-file-upload-multiple-states-disabled-container-background: var(--kbq-states-background-disabled);
|
|
114
|
-
--kbq-file-upload-multiple-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);
|
|
115
|
-
--kbq-file-upload-multiple-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);
|
|
116
|
-
--kbq-file-upload-multiple-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);
|
|
117
|
-
--kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);
|
|
118
|
-
--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary);
|
|
119
|
-
}
|
|
@@ -8,35 +8,7 @@
|
|
|
8
8
|
--kbq-form-field-size-icon-button-size: var(--kbq-size-xxl);
|
|
9
9
|
--kbq-form-field-size-icon-button-margin-right: var(--kbq-size-xxs);
|
|
10
10
|
--kbq-form-field-size-icon-button-margin-left: var(--kbq-size-xxs);
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
:where(.kbq-light, .theme-light, .kbq-theme-light) {
|
|
14
|
-
--kbq-form-field-default-border-color: var(--kbq-line-contrast-fade);
|
|
15
|
-
--kbq-form-field-default-background: var(--kbq-background-bg);
|
|
16
|
-
--kbq-form-field-default-placeholder: var(--kbq-foreground-contrast-tertiary);
|
|
17
|
-
--kbq-form-field-default-text: var(--kbq-foreground-contrast);
|
|
18
|
-
--kbq-form-field-states-focused-border-color: var(--kbq-states-line-focus-theme);
|
|
19
|
-
--kbq-form-field-states-focused-background: var(--kbq-background-bg);
|
|
20
|
-
--kbq-form-field-states-focused-placeholder: var(--kbq-foreground-contrast-tertiary);
|
|
21
|
-
--kbq-form-field-states-focused-text: var(--kbq-foreground-contrast);
|
|
22
|
-
--kbq-form-field-states-focused-focus-outline: var(--kbq-states-line-focus-theme);
|
|
23
|
-
--kbq-form-field-states-error-border-color: var(--kbq-line-error);
|
|
24
|
-
--kbq-form-field-states-error-background: var(--kbq-states-background-error-less);
|
|
25
|
-
--kbq-form-field-states-error-placeholder: var(--kbq-foreground-error-tertiary);
|
|
26
|
-
--kbq-form-field-states-error-text: var(--kbq-foreground-error);
|
|
27
|
-
--kbq-form-field-states-error-focused-focus-outline: var(--kbq-states-line-focus-error);
|
|
28
|
-
--kbq-form-field-states-autofill-border-color: var(--kbq-states-line-focus-theme);
|
|
29
|
-
--kbq-form-field-states-autofill-background: var(--kbq-background-theme-fade);
|
|
30
|
-
--kbq-form-field-states-autofill-placeholder: var(--kbq-foreground-contrast-tertiary);
|
|
31
|
-
--kbq-form-field-states-autofill-text: var(--kbq-foreground-contrast);
|
|
32
|
-
--kbq-form-field-states-disabled-border-color: var(--kbq-states-line-disabled);
|
|
33
|
-
--kbq-form-field-states-disabled-background: var(--kbq-states-background-disabled);
|
|
34
|
-
--kbq-form-field-states-disabled-placeholder: var(--kbq-states-foreground-disabled);
|
|
35
|
-
--kbq-form-field-states-disabled-text: var(--kbq-states-foreground-disabled);
|
|
36
|
-
--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
|
|
11
|
+
/* THEME TOKENS */
|
|
40
12
|
--kbq-form-field-default-border-color: var(--kbq-line-contrast-fade);
|
|
41
13
|
--kbq-form-field-default-background: var(--kbq-background-bg);
|
|
42
14
|
--kbq-form-field-default-placeholder: var(--kbq-foreground-contrast-tertiary);
|
|
@@ -40,11 +40,7 @@
|
|
|
40
40
|
|
|
41
41
|
&.kbq-form-field_has-prefix {
|
|
42
42
|
.kbq-input {
|
|
43
|
-
padding-left: kbq-sum-series-css-variables(
|
|
44
|
-
[form-field-size-icon-size,
|
|
45
|
-
form-field-size-icon-margin-left,
|
|
46
|
-
form-field-size-icon-margin-right]
|
|
47
|
-
);
|
|
43
|
+
padding-left: kbq-sum-series-css-variables([form-field-size-icon-size, size-m, size-s]);
|
|
48
44
|
}
|
|
49
45
|
}
|
|
50
46
|
|
|
@@ -80,7 +76,6 @@
|
|
|
80
76
|
position: absolute;
|
|
81
77
|
top: 0;
|
|
82
78
|
bottom: 0;
|
|
83
|
-
width: 32px;
|
|
84
79
|
|
|
85
80
|
display: flex;
|
|
86
81
|
flex-direction: row;
|
|
@@ -90,10 +85,14 @@
|
|
|
90
85
|
|
|
91
86
|
.kbq-form-field__prefix {
|
|
92
87
|
left: 0;
|
|
88
|
+
padding-left: var(--kbq-size-m);
|
|
89
|
+
padding-right: var(--kbq-size-s);
|
|
93
90
|
}
|
|
94
91
|
|
|
95
92
|
.kbq-form-field__suffix {
|
|
96
93
|
right: 0;
|
|
94
|
+
padding-right: var(--kbq-size-m);
|
|
95
|
+
padding-left: var(--kbq-size-s);
|
|
97
96
|
}
|
|
98
97
|
|
|
99
98
|
.kbq-form-field__cleaner,
|
|
@@ -3,28 +3,7 @@
|
|
|
3
3
|
--kbq-hint-size-normal-content-padding: var(--kbq-size-xxs);
|
|
4
4
|
--kbq-hint-size-compact-margin-top: 0;
|
|
5
5
|
--kbq-hint-size-compact-content-padding: var(--kbq-size-xxs);
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
:where(.kbq-light, .theme-light, .kbq-theme-light) {
|
|
9
|
-
--kbq-hint-fill-text-off-fade-contrast-text: var(--kbq-foreground-contrast);
|
|
10
|
-
--kbq-hint-fill-text-off-fade-contrast-icon: var(--kbq-icon-contrast-fade);
|
|
11
|
-
--kbq-hint-fill-text-off-success-text: var(--kbq-foreground-contrast);
|
|
12
|
-
--kbq-hint-fill-text-off-success-icon: var(--kbq-icon-success);
|
|
13
|
-
--kbq-hint-fill-text-off-warning-text: var(--kbq-foreground-contrast);
|
|
14
|
-
--kbq-hint-fill-text-off-warning-icon: var(--kbq-icon-warning);
|
|
15
|
-
--kbq-hint-fill-text-off-error-text: var(--kbq-foreground-contrast);
|
|
16
|
-
--kbq-hint-fill-text-off-error-icon: var(--kbq-icon-error);
|
|
17
|
-
--kbq-hint-fill-text-on-fade-contrast-text: var(--kbq-foreground-contrast);
|
|
18
|
-
--kbq-hint-fill-text-on-fade-contrast-icon: var(--kbq-icon-contrast-fade);
|
|
19
|
-
--kbq-hint-fill-text-on-success-text: var(--kbq-foreground-success);
|
|
20
|
-
--kbq-hint-fill-text-on-success-icon: var(--kbq-icon-success);
|
|
21
|
-
--kbq-hint-fill-text-on-warning-text: var(--kbq-foreground-warning);
|
|
22
|
-
--kbq-hint-fill-text-on-warning-icon: var(--kbq-icon-warning);
|
|
23
|
-
--kbq-hint-fill-text-on-error-text: var(--kbq-foreground-error);
|
|
24
|
-
--kbq-hint-fill-text-on-error-icon: var(--kbq-icon-error);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
|
|
6
|
+
/* THEME TOKENS */
|
|
28
7
|
--kbq-hint-fill-text-off-fade-contrast-text: var(--kbq-foreground-contrast);
|
|
29
8
|
--kbq-hint-fill-text-off-fade-contrast-icon: var(--kbq-icon-contrast-fade);
|
|
30
9
|
--kbq-hint-fill-text-off-success-text: var(--kbq-foreground-contrast);
|
|
@@ -5,36 +5,7 @@
|
|
|
5
5
|
--kbq-icon-button-size-normal-vertical-padding: 0;
|
|
6
6
|
--kbq-icon-button-size-small-horizontal-padding: var(--kbq-size-xxs);
|
|
7
7
|
--kbq-icon-button-size-small-vertical-padding: var(--kbq-size-xxs);
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
:where(.kbq-light, .theme-light, .kbq-theme-light) {
|
|
11
|
-
--kbq-icon-button-theme-default: var(--kbq-icon-theme);
|
|
12
|
-
--kbq-icon-button-theme-states-hover: var(--kbq-states-icon-theme-hover);
|
|
13
|
-
--kbq-icon-button-theme-states-active: var(--kbq-states-icon-theme-active);
|
|
14
|
-
--kbq-icon-button-theme-states-disabled: var(--kbq-states-icon-disabled);
|
|
15
|
-
--kbq-icon-button-contrast-default: var(--kbq-icon-contrast);
|
|
16
|
-
--kbq-icon-button-contrast-states-hover: var(--kbq-states-icon-contrast-hover);
|
|
17
|
-
--kbq-icon-button-contrast-states-active: var(--kbq-states-icon-contrast-active);
|
|
18
|
-
--kbq-icon-button-contrast-states-disabled: var(--kbq-states-icon-disabled);
|
|
19
|
-
--kbq-icon-button-fade-contrast-default: var(--kbq-icon-contrast-fade);
|
|
20
|
-
--kbq-icon-button-fade-contrast-states-hover: var(--kbq-states-icon-contrast-fade-hover);
|
|
21
|
-
--kbq-icon-button-fade-contrast-states-active: var(--kbq-states-icon-contrast-fade-active);
|
|
22
|
-
--kbq-icon-button-fade-contrast-states-disabled: var(--kbq-states-icon-disabled);
|
|
23
|
-
--kbq-icon-button-error-default: var(--kbq-icon-error);
|
|
24
|
-
--kbq-icon-button-error-states-hover: var(--kbq-states-icon-error-hover);
|
|
25
|
-
--kbq-icon-button-error-states-active: var(--kbq-states-icon-error-active);
|
|
26
|
-
--kbq-icon-button-error-states-disabled: var(--kbq-states-icon-disabled);
|
|
27
|
-
--kbq-icon-button-success-default: var(--kbq-icon-success);
|
|
28
|
-
--kbq-icon-button-success-states-hover: var(--kbq-states-icon-success-hover);
|
|
29
|
-
--kbq-icon-button-success-states-active: var(--kbq-states-icon-success-active);
|
|
30
|
-
--kbq-icon-button-success-states-disabled: var(--kbq-states-icon-disabled);
|
|
31
|
-
--kbq-icon-button-warning-default: var(--kbq-icon-warning);
|
|
32
|
-
--kbq-icon-button-warning-states-hover: var(--kbq-states-icon-warning-hover);
|
|
33
|
-
--kbq-icon-button-warning-states-active: var(--kbq-states-icon-warning-active);
|
|
34
|
-
--kbq-icon-button-warning-states-disabled: var(--kbq-states-icon-disabled);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
|
|
8
|
+
/* THEME TOKENS */
|
|
38
9
|
--kbq-icon-button-theme-default: var(--kbq-icon-theme);
|
|
39
10
|
--kbq-icon-button-theme-states-hover: var(--kbq-states-icon-theme-hover);
|
|
40
11
|
--kbq-icon-button-theme-states-active: var(--kbq-states-icon-theme-active);
|
|
@@ -3,32 +3,7 @@
|
|
|
3
3
|
--kbq-icon-item-size-normal-vertical-padding: var(--kbq-size-s);
|
|
4
4
|
--kbq-icon-item-size-big-horizontal-padding: var(--kbq-size-l);
|
|
5
5
|
--kbq-icon-item-size-big-vertical-padding: var(--kbq-size-l);
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
:where(.kbq-light, .theme-light, .kbq-theme-light) {
|
|
9
|
-
--kbq-icon-item-filled-fade-off-theme-color: var(--kbq-icon-white);
|
|
10
|
-
--kbq-icon-item-filled-fade-off-theme-background: var(--kbq-background-theme);
|
|
11
|
-
--kbq-icon-item-filled-fade-off-contrast-color: var(--kbq-icon-on-contrast);
|
|
12
|
-
--kbq-icon-item-filled-fade-off-contrast-background: var(--kbq-background-contrast);
|
|
13
|
-
--kbq-icon-item-filled-fade-off-error-color: var(--kbq-icon-white);
|
|
14
|
-
--kbq-icon-item-filled-fade-off-error-background: var(--kbq-background-error);
|
|
15
|
-
--kbq-icon-item-filled-fade-off-warning-color: var(--kbq-icon-white);
|
|
16
|
-
--kbq-icon-item-filled-fade-off-warning-background: var(--kbq-background-warning);
|
|
17
|
-
--kbq-icon-item-filled-fade-off-success-color: var(--kbq-icon-white);
|
|
18
|
-
--kbq-icon-item-filled-fade-off-success-background: var(--kbq-background-success);
|
|
19
|
-
--kbq-icon-item-filled-fade-on-theme-color: var(--kbq-icon-theme);
|
|
20
|
-
--kbq-icon-item-filled-fade-on-theme-background: var(--kbq-background-theme-fade);
|
|
21
|
-
--kbq-icon-item-filled-fade-on-contrast-color: var(--kbq-icon-contrast);
|
|
22
|
-
--kbq-icon-item-filled-fade-on-contrast-background: var(--kbq-background-contrast-fade);
|
|
23
|
-
--kbq-icon-item-filled-fade-on-error-color: var(--kbq-icon-error);
|
|
24
|
-
--kbq-icon-item-filled-fade-on-error-background: var(--kbq-background-error-fade);
|
|
25
|
-
--kbq-icon-item-filled-fade-on-warning-color: var(--kbq-icon-warning);
|
|
26
|
-
--kbq-icon-item-filled-fade-on-warning-background: var(--kbq-background-warning-fade);
|
|
27
|
-
--kbq-icon-item-filled-fade-on-success-color: var(--kbq-icon-success);
|
|
28
|
-
--kbq-icon-item-filled-fade-on-success-background: var(--kbq-background-success-fade);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
|
|
6
|
+
/* THEME TOKENS */
|
|
32
7
|
--kbq-icon-item-filled-fade-off-theme-color: var(--kbq-icon-white);
|
|
33
8
|
--kbq-icon-item-filled-fade-off-theme-background: var(--kbq-background-theme);
|
|
34
9
|
--kbq-icon-item-filled-fade-off-contrast-color: var(--kbq-icon-on-contrast);
|
package/icon/icon-tokens.scss
CHANGED
|
@@ -1,13 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
--kbq-icon-contrast-color: var(--kbq-icon-contrast);
|
|
4
|
-
--kbq-icon-fade-contrast-color: var(--kbq-icon-contrast-fade);
|
|
5
|
-
--kbq-icon-error-color: var(--kbq-icon-error);
|
|
6
|
-
--kbq-icon-success-color: var(--kbq-icon-success);
|
|
7
|
-
--kbq-icon-warning-color: var(--kbq-icon-warning);
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
|
|
1
|
+
.kbq-icon {
|
|
2
|
+
/* THEME TOKENS */
|
|
11
3
|
--kbq-icon-theme-color: var(--kbq-icon-theme);
|
|
12
4
|
--kbq-icon-contrast-color: var(--kbq-icon-contrast);
|
|
13
5
|
--kbq-icon-fade-contrast-color: var(--kbq-icon-contrast-fade);
|
package/link/_link-theme.scss
CHANGED
|
@@ -21,6 +21,11 @@
|
|
|
21
21
|
border-bottom-width: 1px;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
+
&.kbq-text-with-icon {
|
|
25
|
+
display: inline-flex;
|
|
26
|
+
align-items: center;
|
|
27
|
+
}
|
|
28
|
+
|
|
24
29
|
&.kbq-text-with-icon .kbq-link__text {
|
|
25
30
|
&:not(:first-child) {
|
|
26
31
|
margin-left: var(--kbq-link-size-normal-content-padding);
|
|
@@ -63,6 +68,28 @@
|
|
|
63
68
|
border-bottom-color: transparent;
|
|
64
69
|
}
|
|
65
70
|
}
|
|
71
|
+
|
|
72
|
+
&.kbq-text-with-icon.kbq-link_external {
|
|
73
|
+
.kbq-link__text:not(:last-child) {
|
|
74
|
+
margin-right: 1px;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
&.kbq-link_compact {
|
|
78
|
+
.kbq-link__text:not(:last-child) {
|
|
79
|
+
margin-right: 0;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.kbq-icon {
|
|
83
|
+
margin-bottom: 1px;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
&.kbq-link_big {
|
|
88
|
+
.kbq-link__text:not(:last-child) {
|
|
89
|
+
margin-right: 2px;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
66
93
|
}
|
|
67
94
|
|
|
68
95
|
@mixin kbq-link-state($state-name: null) {
|
|
@@ -148,11 +175,6 @@
|
|
|
148
175
|
@mixin kbq-link-typography() {
|
|
149
176
|
.kbq-link {
|
|
150
177
|
@include kbq-typography-level-to-styles-css-variables(typography, text-normal);
|
|
151
|
-
|
|
152
|
-
& .kbq-icon {
|
|
153
|
-
line-height: inherit;
|
|
154
|
-
vertical-align: baseline;
|
|
155
|
-
}
|
|
156
178
|
}
|
|
157
179
|
|
|
158
180
|
.kbq-link.kbq-link_compact {
|
package/link/link-tokens.scss
CHANGED
|
@@ -4,27 +4,7 @@
|
|
|
4
4
|
--kbq-link-size-compact-content-padding: var(--kbq-size-xxs);
|
|
5
5
|
--kbq-link-size-normal-content-padding: var(--kbq-size-xxs);
|
|
6
6
|
--kbq-link-size-big-content-padding: var(--kbq-size-xxs);
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
:where(.kbq-light, .theme-light, .kbq-theme-light) {
|
|
10
|
-
--kbq-link-text: var(--kbq-foreground-theme);
|
|
11
|
-
--kbq-link-border-bottom: var(--kbq-line-theme-less);
|
|
12
|
-
--kbq-link-state-visited-text: var(--kbq-foreground-visited);
|
|
13
|
-
--kbq-link-state-visited-border-bottom: var(--kbq-line-visited);
|
|
14
|
-
--kbq-link-state-visited-hover-text: var(--kbq-states-foreground-visited-hover);
|
|
15
|
-
--kbq-link-state-visited-hover-border-bottom: var(--kbq-line-visited);
|
|
16
|
-
--kbq-link-state-visited-active-text: var(--kbq-states-foreground-visited-active);
|
|
17
|
-
--kbq-link-state-visited-active-border-bottom: var(--kbq-line-visited);
|
|
18
|
-
--kbq-link-state-hover-text: var(--kbq-states-foreground-theme-hover);
|
|
19
|
-
--kbq-link-state-hover-border-bottom: var(--kbq-line-theme-less);
|
|
20
|
-
--kbq-link-state-active-text: var(--kbq-states-foreground-theme-active);
|
|
21
|
-
--kbq-link-state-active-border-bottom: var(--kbq-line-theme-less);
|
|
22
|
-
--kbq-link-state-focused-outline: var(--kbq-states-line-focus-theme);
|
|
23
|
-
--kbq-link-state-disabled-text: var(--kbq-states-foreground-disabled);
|
|
24
|
-
--kbq-link-state-disabled-border-bottom: var(--kbq-states-line-disabled);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
|
|
7
|
+
/* THEME TOKENS */
|
|
28
8
|
--kbq-link-text: var(--kbq-foreground-theme);
|
|
29
9
|
--kbq-link-border-bottom: var(--kbq-line-theme-less);
|
|
30
10
|
--kbq-link-state-visited-text: var(--kbq-foreground-visited);
|
package/list/_list-theme.scss
CHANGED
|
@@ -43,6 +43,16 @@
|
|
|
43
43
|
&.kbq-disabled {
|
|
44
44
|
@include kbq-list-item(states-disabled);
|
|
45
45
|
}
|
|
46
|
+
|
|
47
|
+
&:is(.kbq-selected, .kbq-focused):has(+ :is(.kbq-selected, .kbq-focused)) {
|
|
48
|
+
border-bottom-left-radius: 0;
|
|
49
|
+
border-bottom-right-radius: 0;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
&:is(.kbq-selected, .kbq-focused) + :is(.kbq-selected, .kbq-focused) {
|
|
53
|
+
border-top-left-radius: 0;
|
|
54
|
+
border-top-right-radius: 0;
|
|
55
|
+
}
|
|
46
56
|
}
|
|
47
57
|
}
|
|
48
58
|
|
package/list/list-tokens.scss
CHANGED
|
@@ -1,21 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
.kbq-list-selection {
|
|
3
|
-
--kbq-list-size-container-padding-left: var(--kbq-size-m);
|
|
4
|
-
--kbq-list-size-container-padding-right: var(--kbq-size-m);
|
|
5
|
-
--kbq-list-size-container-padding-vertical: var(--kbq-size-xs);
|
|
6
|
-
--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);
|
|
7
|
-
--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);
|
|
8
|
-
--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);
|
|
9
|
-
--kbq-list-size-text-padding-vertical: 0;
|
|
10
|
-
--kbq-list-size-header-padding-top: var(--kbq-size-s);
|
|
11
|
-
--kbq-list-size-header-padding-bottom: var(--kbq-size-xxs);
|
|
12
|
-
--kbq-list-size-header-padding-horizontal: var(--kbq-size-m);
|
|
13
|
-
--kbq-list-size-subheading-padding-top: var(--kbq-size-m);
|
|
14
|
-
--kbq-list-size-subheading-padding-bottom: var(--kbq-size-xxs);
|
|
15
|
-
--kbq-list-size-subheading-padding-horizontal: var(--kbq-size-m);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
:where(.kbq-light, .theme-light, .kbq-theme-light) {
|
|
1
|
+
@mixin list-theme-tokens {
|
|
19
2
|
--kbq-list-default-container-background: transparent;
|
|
20
3
|
--kbq-list-default-text-color: var(--kbq-foreground-contrast);
|
|
21
4
|
--kbq-list-default-icon-color: var(--kbq-icon-contrast);
|
|
@@ -41,28 +24,20 @@
|
|
|
41
24
|
--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled);
|
|
42
25
|
}
|
|
43
26
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
--kbq-list-
|
|
47
|
-
--kbq-list-
|
|
48
|
-
--kbq-list-
|
|
49
|
-
--kbq-list-
|
|
50
|
-
--kbq-list-
|
|
51
|
-
--kbq-list-
|
|
52
|
-
--kbq-list-
|
|
53
|
-
--kbq-list-
|
|
54
|
-
--kbq-list-
|
|
55
|
-
--kbq-list-
|
|
56
|
-
--kbq-list-
|
|
57
|
-
--kbq-list-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);
|
|
61
|
-
--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);
|
|
62
|
-
--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
|
|
63
|
-
--kbq-list-states-disabled-container-background: transparent;
|
|
64
|
-
--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);
|
|
65
|
-
--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);
|
|
66
|
-
--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);
|
|
67
|
-
--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled);
|
|
27
|
+
.kbq-list,
|
|
28
|
+
.kbq-list-selection {
|
|
29
|
+
--kbq-list-size-container-padding-left: var(--kbq-size-m);
|
|
30
|
+
--kbq-list-size-container-padding-right: var(--kbq-size-m);
|
|
31
|
+
--kbq-list-size-container-padding-vertical: var(--kbq-size-xs);
|
|
32
|
+
--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);
|
|
33
|
+
--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);
|
|
34
|
+
--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);
|
|
35
|
+
--kbq-list-size-header-padding-top: var(--kbq-size-s);
|
|
36
|
+
--kbq-list-size-header-padding-bottom: var(--kbq-size-xxs);
|
|
37
|
+
--kbq-list-size-header-padding-horizontal: var(--kbq-size-m);
|
|
38
|
+
--kbq-list-size-subheading-padding-top: var(--kbq-size-m);
|
|
39
|
+
--kbq-list-size-subheading-padding-bottom: var(--kbq-size-xxs);
|
|
40
|
+
--kbq-list-size-subheading-padding-horizontal: var(--kbq-size-m);
|
|
41
|
+
/* THEME TOKENS */
|
|
42
|
+
@include list-theme-tokens;
|
|
68
43
|
}
|
|
@@ -5,18 +5,7 @@
|
|
|
5
5
|
--kbq-loader-overlay-size-compact-overlay-padding-horizontal: var(--kbq-size-3xl);
|
|
6
6
|
--kbq-loader-overlay-size-compact-loader-margin-bottom: var(--kbq-size-s);
|
|
7
7
|
--kbq-loader-overlay-size-compact-content-content-gap-vertical: var(--kbq-size-3xs);
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
:where(.kbq-light, .theme-light, .kbq-theme-light) {
|
|
11
|
-
--kbq-loader-overlay-transparent-overlay-background: var(--kbq-background-overlay-inverse);
|
|
12
|
-
--kbq-loader-overlay-transparent-text-color: var(--kbq-foreground-contrast);
|
|
13
|
-
--kbq-loader-overlay-transparent-caption-color: var(--kbq-foreground-contrast-secondary);
|
|
14
|
-
--kbq-loader-overlay-filled-overlay-background: var(--kbq-background-bg);
|
|
15
|
-
--kbq-loader-overlay-filled-text-color: var(--kbq-foreground-contrast);
|
|
16
|
-
--kbq-loader-overlay-filled-caption-color: var(--kbq-foreground-contrast-secondary);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
|
|
8
|
+
/* THEME TOKENS */
|
|
20
9
|
--kbq-loader-overlay-transparent-overlay-background: var(--kbq-background-overlay-inverse);
|
|
21
10
|
--kbq-loader-overlay-transparent-text-color: var(--kbq-foreground-contrast);
|
|
22
11
|
--kbq-loader-overlay-transparent-caption-color: var(--kbq-foreground-contrast-secondary);
|
|
@@ -55,40 +55,7 @@
|
|
|
55
55
|
--kbq-markdown-table-size-padding: var(--kbq-size-s);
|
|
56
56
|
--kbq-markdown-table-size-margin-bottom: var(--kbq-size-m);
|
|
57
57
|
--kbq-markdown-size-max-width: 650px;
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
:where(.kbq-light, .theme-light, .kbq-theme-light) {
|
|
61
|
-
--kbq-markdown-h1-color: var(--kbq-foreground-contrast);
|
|
62
|
-
--kbq-markdown-h2-color: var(--kbq-foreground-contrast);
|
|
63
|
-
--kbq-markdown-h3-color: var(--kbq-foreground-contrast);
|
|
64
|
-
--kbq-markdown-h4-color: var(--kbq-foreground-contrast);
|
|
65
|
-
--kbq-markdown-h5-color: var(--kbq-foreground-contrast);
|
|
66
|
-
--kbq-markdown-h6-color: var(--kbq-foreground-contrast);
|
|
67
|
-
--kbq-markdown-p-color: var(--kbq-foreground-contrast);
|
|
68
|
-
--kbq-markdown-list-color: var(--kbq-foreground-contrast);
|
|
69
|
-
--kbq-markdown-blockquote-text: var(--kbq-foreground-contrast);
|
|
70
|
-
--kbq-markdown-blockquote-line: var(--kbq-line-contrast-less);
|
|
71
|
-
--kbq-markdown-blockquote-background: var(--kbq-background-contrast-fade);
|
|
72
|
-
--kbq-markdown-blockquote-border: transparent;
|
|
73
|
-
--kbq-markdown-code-text: var(--kbq-foreground-contrast);
|
|
74
|
-
--kbq-markdown-code-background: var(--kbq-background-contrast-fade);
|
|
75
|
-
--kbq-markdown-code-border: var(--kbq-line-contrast-less);
|
|
76
|
-
--kbq-markdown-link-text: var(--kbq-link-text);
|
|
77
|
-
--kbq-markdown-link-border-bottom: var(--kbq-link-border-bottom);
|
|
78
|
-
--kbq-markdown-link-state-visited-text: var(--kbq-link-state-visited-text);
|
|
79
|
-
--kbq-markdown-link-state-visited-border-bottom: var(--kbq-link-state-visited-border-bottom);
|
|
80
|
-
--kbq-markdown-link-state-hover-text: var(--kbq-link-state-hover-text);
|
|
81
|
-
--kbq-markdown-link-state-hover-border-bottom: var(--kbq-link-state-hover-border-bottom);
|
|
82
|
-
--kbq-markdown-link-state-active: var(--kbq-link-state-active-text);
|
|
83
|
-
--kbq-markdown-link-state-focused-outline: var(--kbq-link-state-focused-outline);
|
|
84
|
-
--kbq-markdown-image-caption-text: var(--kbq-foreground-contrast-secondary);
|
|
85
|
-
--kbq-markdown-hr-color: var(--kbq-line-contrast-less);
|
|
86
|
-
--kbq-markdown-table-header: var(--kbq-foreground-contrast-secondary);
|
|
87
|
-
--kbq-markdown-table-body: var(--kbq-foreground-contrast);
|
|
88
|
-
--kbq-markdown-table-border: var(--kbq-line-contrast-less);
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
|
|
58
|
+
/* THEME TOKENS */
|
|
92
59
|
--kbq-markdown-h1-color: var(--kbq-foreground-contrast);
|
|
93
60
|
--kbq-markdown-h2-color: var(--kbq-foreground-contrast);
|
|
94
61
|
--kbq-markdown-h3-color: var(--kbq-foreground-contrast);
|
package/modal/modal-tokens.scss
CHANGED
|
@@ -15,18 +15,7 @@
|
|
|
15
15
|
--kbq-modal-size-footer-padding-horizontal: var(--kbq-size-xxl);
|
|
16
16
|
--kbq-modal-size-footer-padding-vertical: var(--kbq-size-xl);
|
|
17
17
|
--kbq-modal-size-footer-content-gap-horizontal: var(--kbq-size-l);
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
:where(.kbq-light, .theme-light, .kbq-theme-light) {
|
|
21
|
-
--kbq-modal-overlay-background: var(--kbq-background-overlay);
|
|
22
|
-
--kbq-modal-container-background: var(--kbq-background-card);
|
|
23
|
-
--kbq-modal-container-shadow: var(--kbq-shadow-overlay);
|
|
24
|
-
--kbq-modal-close-button-color: var(--kbq-icon-contrast);
|
|
25
|
-
--kbq-modal-header-text-color: var(--kbq-foreground-contrast);
|
|
26
|
-
--kbq-modal-content-text-color: var(--kbq-foreground-contrast);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
|
|
18
|
+
/* THEME TOKENS */
|
|
30
19
|
--kbq-modal-overlay-background: var(--kbq-background-overlay);
|
|
31
20
|
--kbq-modal-container-background: var(--kbq-background-card);
|
|
32
21
|
--kbq-modal-container-shadow: var(--kbq-shadow-overlay);
|
|
@@ -1,34 +1,7 @@
|
|
|
1
1
|
.kbq-navbar,
|
|
2
2
|
.kbq-vertical-navbar {
|
|
3
3
|
--kbq-navbar-item-size-content-border-radius: var(--kbq-size-border-radius);
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
:where(.kbq-light, .theme-light, .kbq-theme-light) {
|
|
7
|
-
--kbq-navbar-background: var(--kbq-background-bg);
|
|
8
|
-
--kbq-navbar-border: var(--kbq-line-contrast-less);
|
|
9
|
-
--kbq-navbar-item-default-content-text: var(--kbq-foreground-contrast);
|
|
10
|
-
--kbq-navbar-item-default-content-background: transparent;
|
|
11
|
-
--kbq-navbar-item-default-content-icon-left: var(--kbq-icon-contrast);
|
|
12
|
-
--kbq-navbar-item-default-content-icon-right: var(--kbq-icon-contrast);
|
|
13
|
-
--kbq-navbar-item-states-hover-content-text: var(--kbq-foreground-contrast);
|
|
14
|
-
--kbq-navbar-item-states-hover-content-background: var(--kbq-states-background-transparent-hover);
|
|
15
|
-
--kbq-navbar-item-states-hover-content-icon-left: var(--kbq-states-icon-contrast-hover);
|
|
16
|
-
--kbq-navbar-item-states-hover-content-icon-right: var(--kbq-states-icon-contrast-hover);
|
|
17
|
-
--kbq-navbar-item-states-selected-content-text: var(--kbq-foreground-contrast);
|
|
18
|
-
--kbq-navbar-item-states-selected-content-background: var(--kbq-states-background-transparent-active);
|
|
19
|
-
--kbq-navbar-item-states-selected-content-icon-left: var(--kbq-states-icon-contrast-active);
|
|
20
|
-
--kbq-navbar-item-states-selected-content-icon-right: var(--kbq-states-icon-contrast-active);
|
|
21
|
-
--kbq-navbar-item-states-selected-hover-content-text: var(--kbq-foreground-contrast);
|
|
22
|
-
--kbq-navbar-item-states-selected-hover-content-background: var(--kbq-states-background-transparent-hover);
|
|
23
|
-
--kbq-navbar-item-states-selected-hover-content-icon-left: var(--kbq-states-icon-contrast-hover);
|
|
24
|
-
--kbq-navbar-item-states-selected-hover-content-icon-right: var(--kbq-states-icon-contrast-hover);
|
|
25
|
-
--kbq-navbar-item-states-disabled-content-text: var(--kbq-states-foreground-disabled);
|
|
26
|
-
--kbq-navbar-item-states-disabled-content-background: transparent;
|
|
27
|
-
--kbq-navbar-item-states-disabled-content-icon-left: var(--kbq-states-icon-disabled);
|
|
28
|
-
--kbq-navbar-item-states-disabled-content-icon-right: var(--kbq-states-icon-disabled);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
|
|
4
|
+
/* THEME TOKENS */
|
|
32
5
|
--kbq-navbar-background: var(--kbq-background-bg);
|
|
33
6
|
--kbq-navbar-border: var(--kbq-line-contrast-less);
|
|
34
7
|
--kbq-navbar-item-default-content-text: var(--kbq-foreground-contrast);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@koobiq/components",
|
|
3
|
-
"version": "18.
|
|
3
|
+
"version": "18.9.0",
|
|
4
4
|
"description": "koobiq",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -24,16 +24,14 @@
|
|
|
24
24
|
"@angular/cdk": "^18.0.0",
|
|
25
25
|
"@angular/core": "^18.0.0",
|
|
26
26
|
"@angular/forms": "^18.0.0",
|
|
27
|
-
"@koobiq/cdk": "18.
|
|
28
|
-
"@koobiq/angular-moment-adapter": "18.
|
|
29
|
-
"@koobiq/angular-luxon-adapter": "18.
|
|
30
|
-
"@koobiq/date-formatter": "^3.1.
|
|
31
|
-
"@koobiq/icons": "^9.
|
|
27
|
+
"@koobiq/cdk": "18.9.0",
|
|
28
|
+
"@koobiq/angular-moment-adapter": "18.9.0",
|
|
29
|
+
"@koobiq/angular-luxon-adapter": "18.9.0",
|
|
30
|
+
"@koobiq/date-formatter": "^3.1.4",
|
|
31
|
+
"@koobiq/icons": "^9.2.0",
|
|
32
32
|
"@koobiq/tokens-builder": "3.8.1",
|
|
33
33
|
"@koobiq/design-tokens": "3.8.1",
|
|
34
|
-
"@radix-ng/primitives": "^0.14.0"
|
|
35
|
-
"overlayscrollbars": "2.7.3",
|
|
36
|
-
"ngx-highlightjs": "^10.0.0"
|
|
34
|
+
"@radix-ng/primitives": "^0.14.0"
|
|
37
35
|
},
|
|
38
36
|
"dependencies": {
|
|
39
37
|
"tslib": "^2.6.2"
|
|
@@ -17,18 +17,7 @@
|
|
|
17
17
|
--kbq-popover-size-content-padding-with-footer-bottom: var(--kbq-size-s);
|
|
18
18
|
--kbq-popover-size-footer-padding-vertical: var(--kbq-size-l);
|
|
19
19
|
--kbq-popover-size-footer-padding-horizontal: var(--kbq-size-xxl);
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
:where(.kbq-light, .theme-light, .kbq-theme-light) {
|
|
23
|
-
--kbq-popover-container-background: var(--kbq-background-card);
|
|
24
|
-
--kbq-popover-container-shadow: var(--kbq-shadow-popup);
|
|
25
|
-
--kbq-popover-header-text-color: var(--kbq-foreground-contrast);
|
|
26
|
-
--kbq-popover-header-scroll-shadow: var(--kbq-shadow-overflow-normal-bottom);
|
|
27
|
-
--kbq-popover-content-text-color: var(--kbq-foreground-contrast);
|
|
28
|
-
--kbq-popover-footer-scroll-shadow: var(--kbq-shadow-overflow-normal-top);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
|
|
20
|
+
/* THEME TOKENS */
|
|
32
21
|
--kbq-popover-container-background: var(--kbq-background-card);
|
|
33
22
|
--kbq-popover-container-shadow: var(--kbq-shadow-popup);
|
|
34
23
|
--kbq-popover-header-text-color: var(--kbq-foreground-contrast);
|