@koobiq/components 18.8.0 → 18.9.1

package/file-upload/_file-upload-theme.scss

@@ -25,7 +25,7 @@
                     border-color: var(--kbq-file-upload-single-states-error-container-border) !important;
                 }
 
-                *,
+                :not(.kbq-link),
                 .kbq-icon {
                     color: var(--kbq-file-upload-single-states-error-text-block-color);
                 }
@@ -91,7 +91,7 @@
 
             &:not(.kbq-disabled) {
                 .kbq-file-upload__row.error {
-                    *,
+                    :not(.kbq-link),
                     .kbq-icon {
                         color: var(--kbq-file-upload-multiple-states-error-text-block-color);
                     }

package/file-upload/file-upload-tokens.scss

@@ -18,9 +18,7 @@
     --kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal: var(--kbq-size-s);
     --kbq-file-upload-size-multiple-big-grid-cell-padding-vertical: var(--kbq-size-s);
     --kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal: var(--kbq-size-xxs);
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    /* THEME TOKENS */
     --kbq-file-upload-single-default-container-border: var(--kbq-line-contrast-fade);
     --kbq-file-upload-single-default-container-background: var(--kbq-background-bg);
     --kbq-file-upload-single-default-upload-icon-color: var(--kbq-icon-contrast-fade);
@@ -68,52 +66,3 @@
     --kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);
     --kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary);
 }
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
-    --kbq-file-upload-single-default-container-border: var(--kbq-line-contrast-fade);
-    --kbq-file-upload-single-default-container-background: var(--kbq-background-bg);
-    --kbq-file-upload-single-default-upload-icon-color: var(--kbq-icon-contrast-fade);
-    --kbq-file-upload-single-default-left-icon-color: var(--kbq-icon-contrast-fade);
-    --kbq-file-upload-single-default-text-block-color: var(--kbq-foreground-contrast);
-    --kbq-file-upload-single-default-icon-button-color: var(--kbq-icon-contrast);
-    --kbq-file-upload-single-states-on-drag-container-border: var(--kbq-line-theme-fade);
-    --kbq-file-upload-single-states-on-drag-container-background: var(--kbq-background-theme-fade);
-    --kbq-file-upload-single-states-on-drag-upload-icon-color: var(--kbq-icon-contrast-fade);
-    --kbq-file-upload-single-states-on-drag-left-icon-color: var(--kbq-icon-contrast-fade);
-    --kbq-file-upload-single-states-on-drag-text-block-color: var(--kbq-foreground-contrast);
-    --kbq-file-upload-single-states-error-container-border: var(--kbq-line-error);
-    --kbq-file-upload-single-states-error-container-background: var(--kbq-states-background-error-less);
-    --kbq-file-upload-single-states-error-left-icon-color: var(--kbq-icon-error);
-    --kbq-file-upload-single-states-error-text-block-color: var(--kbq-foreground-error);
-    --kbq-file-upload-single-states-disabled-container-border: var(--kbq-states-line-disabled);
-    --kbq-file-upload-single-states-disabled-container-background: var(--kbq-states-background-disabled);
-    --kbq-file-upload-single-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);
-    --kbq-file-upload-single-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);
-    --kbq-file-upload-single-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);
-    --kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
-    --kbq-file-upload-multiple-default-container-border: var(--kbq-line-contrast-fade);
-    --kbq-file-upload-multiple-default-container-background: var(--kbq-background-bg);
-    --kbq-file-upload-multiple-default-upload-icon-color: var(--kbq-icon-contrast-fade);
-    --kbq-file-upload-multiple-default-left-icon-color: var(--kbq-icon-contrast-fade);
-    --kbq-file-upload-multiple-default-text-block-color: var(--kbq-foreground-contrast);
-    --kbq-file-upload-multiple-default-icon-button-color: var(--kbq-icon-contrast);
-    --kbq-file-upload-multiple-default-grid-divider-color: var(--kbq-line-contrast-less);
-    --kbq-file-upload-multiple-states-on-drag-container-border: var(--kbq-line-theme-fade);
-    --kbq-file-upload-multiple-states-on-drag-container-background: var(--kbq-background-theme-fade);
-    --kbq-file-upload-multiple-states-on-drag-upload-icon-color: var(--kbq-icon-contrast-fade);
-    --kbq-file-upload-multiple-states-on-drag-left-icon-color: var(--kbq-icon-contrast-fade);
-    --kbq-file-upload-multiple-states-on-drag-icon-button-color: var(--kbq-icon-contrast);
-    --kbq-file-upload-multiple-states-on-drag-text-block-color: var(--kbq-foreground-contrast);
-    --kbq-file-upload-multiple-states-on-drag-grid-divider-color: var(--kbq-line-theme-fade);
-    --kbq-file-upload-multiple-states-error-grid-cell-background: var(--kbq-states-background-error-less);
-    --kbq-file-upload-multiple-states-error-left-icon-color: var(--kbq-icon-error);
-    --kbq-file-upload-multiple-states-error-text-block-color: var(--kbq-foreground-error);
-    --kbq-file-upload-multiple-states-error-icon-button-color: var(--kbq-icon-error);
-    --kbq-file-upload-multiple-states-disabled-container-border: var(--kbq-states-line-disabled);
-    --kbq-file-upload-multiple-states-disabled-container-background: var(--kbq-states-background-disabled);
-    --kbq-file-upload-multiple-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);
-    --kbq-file-upload-multiple-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);
-    --kbq-file-upload-multiple-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);
-    --kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);
-    --kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary);
-}

package/form-field/_form-field-theme.scss

@@ -67,6 +67,13 @@
         }
     }
 
+    .kbq-form-field__prefix,
+    .kbq-form-field__suffix {
+        .kbq-icon {
+            color: var(--kbq-icon-contrast-fade);
+        }
+    }
+
     .kbq-form-field__hint {
         & > .kbq-hint:not(.kbq-password-hint, .kbq-contrast-fade, .kbq-success, .kbq-warning, .kbq-error) {
             color: var(--kbq-form-field-hint-text);

package/form-field/form-field-tokens.scss

@@ -8,35 +8,9 @@
     --kbq-form-field-size-icon-button-size: var(--kbq-size-xxl);
     --kbq-form-field-size-icon-button-margin-right: var(--kbq-size-xxs);
     --kbq-form-field-size-icon-button-margin-left: var(--kbq-size-xxs);
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-form-field-default-border-color: var(--kbq-line-contrast-fade);
-    --kbq-form-field-default-background: var(--kbq-background-bg);
-    --kbq-form-field-default-placeholder: var(--kbq-foreground-contrast-tertiary);
-    --kbq-form-field-default-text: var(--kbq-foreground-contrast);
-    --kbq-form-field-states-focused-border-color: var(--kbq-states-line-focus-theme);
-    --kbq-form-field-states-focused-background: var(--kbq-background-bg);
-    --kbq-form-field-states-focused-placeholder: var(--kbq-foreground-contrast-tertiary);
-    --kbq-form-field-states-focused-text: var(--kbq-foreground-contrast);
-    --kbq-form-field-states-focused-focus-outline: var(--kbq-states-line-focus-theme);
-    --kbq-form-field-states-error-border-color: var(--kbq-line-error);
-    --kbq-form-field-states-error-background: var(--kbq-states-background-error-less);
-    --kbq-form-field-states-error-placeholder: var(--kbq-foreground-error-tertiary);
-    --kbq-form-field-states-error-text: var(--kbq-foreground-error);
-    --kbq-form-field-states-error-focused-focus-outline: var(--kbq-states-line-focus-error);
-    --kbq-form-field-states-autofill-border-color: var(--kbq-states-line-focus-theme);
-    --kbq-form-field-states-autofill-background: var(--kbq-background-theme-fade);
-    --kbq-form-field-states-autofill-placeholder: var(--kbq-foreground-contrast-tertiary);
-    --kbq-form-field-states-autofill-text: var(--kbq-foreground-contrast);
-    --kbq-form-field-states-disabled-border-color: var(--kbq-states-line-disabled);
-    --kbq-form-field-states-disabled-background: var(--kbq-states-background-disabled);
-    --kbq-form-field-states-disabled-placeholder: var(--kbq-states-foreground-disabled);
-    --kbq-form-field-states-disabled-text: var(--kbq-states-foreground-disabled);
-    --kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary);
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-form-field-hint-size-margin-top: var(--kbq-size-xxs);
+    --kbq-form-field-hint-size-gap: var(--kbq-size-s);
+    /* THEME TOKENS */
     --kbq-form-field-default-border-color: var(--kbq-line-contrast-fade);
     --kbq-form-field-default-background: var(--kbq-background-bg);
     --kbq-form-field-default-placeholder: var(--kbq-foreground-contrast-tertiary);

package/form-field/form-field.scss

@@ -40,11 +40,7 @@
 
     &.kbq-form-field_has-prefix {
         .kbq-input {
-            padding-left: kbq-sum-series-css-variables(
-                [form-field-size-icon-size,
-                form-field-size-icon-margin-left,
-                form-field-size-icon-margin-right]
-            );
+            padding-left: kbq-sum-series-css-variables([form-field-size-icon-size, size-m, size-s]);
         }
     }
 
@@ -80,7 +76,6 @@
     position: absolute;
     top: 0;
     bottom: 0;
-    width: 32px;
 
     display: flex;
     flex-direction: row;
@@ -90,10 +85,14 @@
 
 .kbq-form-field__prefix {
     left: 0;
+    padding-left: var(--kbq-size-m);
+    padding-right: var(--kbq-size-s);
 }
 
 .kbq-form-field__suffix {
     right: 0;
+    padding-right: var(--kbq-size-m);
+    padding-left: var(--kbq-size-s);
 }
 
 .kbq-form-field__cleaner,

package/form-field/hint-tokens.scss

@@ -3,28 +3,7 @@
     --kbq-hint-size-normal-content-padding: var(--kbq-size-xxs);
     --kbq-hint-size-compact-margin-top: 0;
     --kbq-hint-size-compact-content-padding: var(--kbq-size-xxs);
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-hint-fill-text-off-fade-contrast-text: var(--kbq-foreground-contrast);
-    --kbq-hint-fill-text-off-fade-contrast-icon: var(--kbq-icon-contrast-fade);
-    --kbq-hint-fill-text-off-success-text: var(--kbq-foreground-contrast);
-    --kbq-hint-fill-text-off-success-icon: var(--kbq-icon-success);
-    --kbq-hint-fill-text-off-warning-text: var(--kbq-foreground-contrast);
-    --kbq-hint-fill-text-off-warning-icon: var(--kbq-icon-warning);
-    --kbq-hint-fill-text-off-error-text: var(--kbq-foreground-contrast);
-    --kbq-hint-fill-text-off-error-icon: var(--kbq-icon-error);
-    --kbq-hint-fill-text-on-fade-contrast-text: var(--kbq-foreground-contrast);
-    --kbq-hint-fill-text-on-fade-contrast-icon: var(--kbq-icon-contrast-fade);
-    --kbq-hint-fill-text-on-success-text: var(--kbq-foreground-success);
-    --kbq-hint-fill-text-on-success-icon: var(--kbq-icon-success);
-    --kbq-hint-fill-text-on-warning-text: var(--kbq-foreground-warning);
-    --kbq-hint-fill-text-on-warning-icon: var(--kbq-icon-warning);
-    --kbq-hint-fill-text-on-error-text: var(--kbq-foreground-error);
-    --kbq-hint-fill-text-on-error-icon: var(--kbq-icon-error);
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    /* THEME TOKENS */
     --kbq-hint-fill-text-off-fade-contrast-text: var(--kbq-foreground-contrast);
     --kbq-hint-fill-text-off-fade-contrast-icon: var(--kbq-icon-contrast-fade);
     --kbq-hint-fill-text-off-success-text: var(--kbq-foreground-contrast);

package/icon/_icon-item-theme.scss

@@ -10,6 +10,9 @@
 
 @mixin kbq-icon-item-theme() {
     .kbq-icon-item.kbq-icon-item_filled {
+        // set default color
+        @include kbq-icon-item-style(fade-on, contrast);
+
         &.kbq-icon-item_fade-off {
             &.kbq-theme {
                 @include kbq-icon-item-style(fade-off, theme);

package/icon/_icon-theme.scss

@@ -1,7 +1,9 @@
 @use '../core/styles/common/tokens' as *;
 
 @mixin kbq-icon-theme() {
-    .kbq-icon:not(.kbq-icon-button, .kbq-icon-item) {
+    .kbq-icon {
+        color: var(--kbq-icon-contrast-color);
+
         &.kbq-theme {
             color: var(--kbq-icon-theme-color);
         }

package/icon/icon-button-tokens.scss

@@ -5,36 +5,7 @@
     --kbq-icon-button-size-normal-vertical-padding: 0;
     --kbq-icon-button-size-small-horizontal-padding: var(--kbq-size-xxs);
     --kbq-icon-button-size-small-vertical-padding: var(--kbq-size-xxs);
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-icon-button-theme-default: var(--kbq-icon-theme);
-    --kbq-icon-button-theme-states-hover: var(--kbq-states-icon-theme-hover);
-    --kbq-icon-button-theme-states-active: var(--kbq-states-icon-theme-active);
-    --kbq-icon-button-theme-states-disabled: var(--kbq-states-icon-disabled);
-    --kbq-icon-button-contrast-default: var(--kbq-icon-contrast);
-    --kbq-icon-button-contrast-states-hover: var(--kbq-states-icon-contrast-hover);
-    --kbq-icon-button-contrast-states-active: var(--kbq-states-icon-contrast-active);
-    --kbq-icon-button-contrast-states-disabled: var(--kbq-states-icon-disabled);
-    --kbq-icon-button-fade-contrast-default: var(--kbq-icon-contrast-fade);
-    --kbq-icon-button-fade-contrast-states-hover: var(--kbq-states-icon-contrast-fade-hover);
-    --kbq-icon-button-fade-contrast-states-active: var(--kbq-states-icon-contrast-fade-active);
-    --kbq-icon-button-fade-contrast-states-disabled: var(--kbq-states-icon-disabled);
-    --kbq-icon-button-error-default: var(--kbq-icon-error);
-    --kbq-icon-button-error-states-hover: var(--kbq-states-icon-error-hover);
-    --kbq-icon-button-error-states-active: var(--kbq-states-icon-error-active);
-    --kbq-icon-button-error-states-disabled: var(--kbq-states-icon-disabled);
-    --kbq-icon-button-success-default: var(--kbq-icon-success);
-    --kbq-icon-button-success-states-hover: var(--kbq-states-icon-success-hover);
-    --kbq-icon-button-success-states-active: var(--kbq-states-icon-success-active);
-    --kbq-icon-button-success-states-disabled: var(--kbq-states-icon-disabled);
-    --kbq-icon-button-warning-default: var(--kbq-icon-warning);
-    --kbq-icon-button-warning-states-hover: var(--kbq-states-icon-warning-hover);
-    --kbq-icon-button-warning-states-active: var(--kbq-states-icon-warning-active);
-    --kbq-icon-button-warning-states-disabled: var(--kbq-states-icon-disabled);
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    /* THEME TOKENS */
     --kbq-icon-button-theme-default: var(--kbq-icon-theme);
     --kbq-icon-button-theme-states-hover: var(--kbq-states-icon-theme-hover);
     --kbq-icon-button-theme-states-active: var(--kbq-states-icon-theme-active);

package/icon/icon-item-tokens.scss

@@ -3,32 +3,7 @@
     --kbq-icon-item-size-normal-vertical-padding: var(--kbq-size-s);
     --kbq-icon-item-size-big-horizontal-padding: var(--kbq-size-l);
     --kbq-icon-item-size-big-vertical-padding: var(--kbq-size-l);
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-icon-item-filled-fade-off-theme-color: var(--kbq-icon-white);
-    --kbq-icon-item-filled-fade-off-theme-background: var(--kbq-background-theme);
-    --kbq-icon-item-filled-fade-off-contrast-color: var(--kbq-icon-on-contrast);
-    --kbq-icon-item-filled-fade-off-contrast-background: var(--kbq-background-contrast);
-    --kbq-icon-item-filled-fade-off-error-color: var(--kbq-icon-white);
-    --kbq-icon-item-filled-fade-off-error-background: var(--kbq-background-error);
-    --kbq-icon-item-filled-fade-off-warning-color: var(--kbq-icon-white);
-    --kbq-icon-item-filled-fade-off-warning-background: var(--kbq-background-warning);
-    --kbq-icon-item-filled-fade-off-success-color: var(--kbq-icon-white);
-    --kbq-icon-item-filled-fade-off-success-background: var(--kbq-background-success);
-    --kbq-icon-item-filled-fade-on-theme-color: var(--kbq-icon-theme);
-    --kbq-icon-item-filled-fade-on-theme-background: var(--kbq-background-theme-fade);
-    --kbq-icon-item-filled-fade-on-contrast-color: var(--kbq-icon-contrast);
-    --kbq-icon-item-filled-fade-on-contrast-background: var(--kbq-background-contrast-fade);
-    --kbq-icon-item-filled-fade-on-error-color: var(--kbq-icon-error);
-    --kbq-icon-item-filled-fade-on-error-background: var(--kbq-background-error-fade);
-    --kbq-icon-item-filled-fade-on-warning-color: var(--kbq-icon-warning);
-    --kbq-icon-item-filled-fade-on-warning-background: var(--kbq-background-warning-fade);
-    --kbq-icon-item-filled-fade-on-success-color: var(--kbq-icon-success);
-    --kbq-icon-item-filled-fade-on-success-background: var(--kbq-background-success-fade);
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    /* THEME TOKENS */
     --kbq-icon-item-filled-fade-off-theme-color: var(--kbq-icon-white);
     --kbq-icon-item-filled-fade-off-theme-background: var(--kbq-background-theme);
     --kbq-icon-item-filled-fade-off-contrast-color: var(--kbq-icon-on-contrast);

package/icon/icon-tokens.scss

@@ -1,13 +1,5 @@
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-icon-theme-color: var(--kbq-icon-theme);
-    --kbq-icon-contrast-color: var(--kbq-icon-contrast);
-    --kbq-icon-fade-contrast-color: var(--kbq-icon-contrast-fade);
-    --kbq-icon-error-color: var(--kbq-icon-error);
-    --kbq-icon-success-color: var(--kbq-icon-success);
-    --kbq-icon-warning-color: var(--kbq-icon-warning);
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+.kbq-icon {
+    /* THEME TOKENS */
     --kbq-icon-theme-color: var(--kbq-icon-theme);
     --kbq-icon-contrast-color: var(--kbq-icon-contrast);
     --kbq-icon-fade-contrast-color: var(--kbq-icon-contrast-fade);

package/link/_link-theme.scss

@@ -21,6 +21,11 @@
         border-bottom-width: 1px;
     }
 
+    &.kbq-text-with-icon {
+        display: inline-flex;
+        align-items: center;
+    }
+
     &.kbq-text-with-icon .kbq-link__text {
         &:not(:first-child) {
             margin-left: var(--kbq-link-size-normal-content-padding);
@@ -63,6 +68,28 @@
             border-bottom-color: transparent;
         }
     }
+
+    &.kbq-text-with-icon.kbq-link_external {
+        .kbq-link__text:not(:last-child) {
+            margin-right: 1px;
+        }
+
+        &.kbq-link_compact {
+            .kbq-link__text:not(:last-child) {
+                margin-right: 0;
+            }
+
+            .kbq-icon {
+                margin-bottom: 1px;
+            }
+        }
+
+        &.kbq-link_big {
+            .kbq-link__text:not(:last-child) {
+                margin-right: 2px;
+            }
+        }
+    }
 }
 
 @mixin kbq-link-state($state-name: null) {
@@ -148,11 +175,6 @@
 @mixin kbq-link-typography() {
     .kbq-link {
         @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
-
-        & .kbq-icon {
-            line-height: inherit;
-            vertical-align: baseline;
-        }
     }
 
     .kbq-link.kbq-link_compact {

package/link/link-tokens.scss

@@ -4,27 +4,7 @@
     --kbq-link-size-compact-content-padding: var(--kbq-size-xxs);
     --kbq-link-size-normal-content-padding: var(--kbq-size-xxs);
     --kbq-link-size-big-content-padding: var(--kbq-size-xxs);
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-link-text: var(--kbq-foreground-theme);
-    --kbq-link-border-bottom: var(--kbq-line-theme-less);
-    --kbq-link-state-visited-text: var(--kbq-foreground-visited);
-    --kbq-link-state-visited-border-bottom: var(--kbq-line-visited);
-    --kbq-link-state-visited-hover-text: var(--kbq-states-foreground-visited-hover);
-    --kbq-link-state-visited-hover-border-bottom: var(--kbq-line-visited);
-    --kbq-link-state-visited-active-text: var(--kbq-states-foreground-visited-active);
-    --kbq-link-state-visited-active-border-bottom: var(--kbq-line-visited);
-    --kbq-link-state-hover-text: var(--kbq-states-foreground-theme-hover);
-    --kbq-link-state-hover-border-bottom: var(--kbq-line-theme-less);
-    --kbq-link-state-active-text: var(--kbq-states-foreground-theme-active);
-    --kbq-link-state-active-border-bottom: var(--kbq-line-theme-less);
-    --kbq-link-state-focused-outline: var(--kbq-states-line-focus-theme);
-    --kbq-link-state-disabled-text: var(--kbq-states-foreground-disabled);
-    --kbq-link-state-disabled-border-bottom: var(--kbq-states-line-disabled);
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    /* THEME TOKENS */
     --kbq-link-text: var(--kbq-foreground-theme);
     --kbq-link-border-bottom: var(--kbq-line-theme-less);
     --kbq-link-state-visited-text: var(--kbq-foreground-visited);

package/list/_list-theme.scss

@@ -43,6 +43,16 @@
         &.kbq-disabled {
             @include kbq-list-item(states-disabled);
         }
+
+        &:is(.kbq-selected, .kbq-focused):has(+ :is(.kbq-selected, .kbq-focused)) {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        &:is(.kbq-selected, .kbq-focused) + :is(.kbq-selected, .kbq-focused) {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+        }
     }
 }
 

package/list/list-tokens.scss

@@ -1,21 +1,4 @@
-.kbq-list,
-.kbq-list-selection {
-    --kbq-list-size-container-padding-left: var(--kbq-size-m);
-    --kbq-list-size-container-padding-right: var(--kbq-size-m);
-    --kbq-list-size-container-padding-vertical: var(--kbq-size-xs);
-    --kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);
-    --kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);
-    --kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);
-    --kbq-list-size-text-padding-vertical: 0;
-    --kbq-list-size-header-padding-top: var(--kbq-size-s);
-    --kbq-list-size-header-padding-bottom: var(--kbq-size-xxs);
-    --kbq-list-size-header-padding-horizontal: var(--kbq-size-m);
-    --kbq-list-size-subheading-padding-top: var(--kbq-size-m);
-    --kbq-list-size-subheading-padding-bottom: var(--kbq-size-xxs);
-    --kbq-list-size-subheading-padding-horizontal: var(--kbq-size-m);
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
+@mixin list-theme-tokens {
     --kbq-list-default-container-background: transparent;
     --kbq-list-default-text-color: var(--kbq-foreground-contrast);
     --kbq-list-default-icon-color: var(--kbq-icon-contrast);
@@ -41,28 +24,20 @@
     --kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled);
 }
 
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
-    --kbq-list-default-container-background: transparent;
-    --kbq-list-default-text-color: var(--kbq-foreground-contrast);
-    --kbq-list-default-icon-color: var(--kbq-icon-contrast);
-    --kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);
-    --kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);
-    --kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);
-    --kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);
-    --kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);
-    --kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);
-    --kbq-list-states-selected-container-background: var(--kbq-background-theme-less);
-    --kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);
-    --kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);
-    --kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);
-    --kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);
-    --kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);
-    --kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);
-    --kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);
-    --kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
-    --kbq-list-states-disabled-container-background: transparent;
-    --kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);
-    --kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);
-    --kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);
-    --kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled);
+.kbq-list,
+.kbq-list-selection {
+    --kbq-list-size-container-padding-left: var(--kbq-size-m);
+    --kbq-list-size-container-padding-right: var(--kbq-size-m);
+    --kbq-list-size-container-padding-vertical: var(--kbq-size-xs);
+    --kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);
+    --kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);
+    --kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);
+    --kbq-list-size-header-padding-top: var(--kbq-size-s);
+    --kbq-list-size-header-padding-bottom: var(--kbq-size-xxs);
+    --kbq-list-size-header-padding-horizontal: var(--kbq-size-m);
+    --kbq-list-size-subheading-padding-top: var(--kbq-size-m);
+    --kbq-list-size-subheading-padding-bottom: var(--kbq-size-xxs);
+    --kbq-list-size-subheading-padding-horizontal: var(--kbq-size-m);
+    /* THEME TOKENS */
+    @include list-theme-tokens;
 }

package/loader-overlay/loader-overlay-tokens.scss

@@ -5,18 +5,7 @@
     --kbq-loader-overlay-size-compact-overlay-padding-horizontal: var(--kbq-size-3xl);
     --kbq-loader-overlay-size-compact-loader-margin-bottom: var(--kbq-size-s);
     --kbq-loader-overlay-size-compact-content-content-gap-vertical: var(--kbq-size-3xs);
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-loader-overlay-transparent-overlay-background: var(--kbq-background-overlay-inverse);
-    --kbq-loader-overlay-transparent-text-color: var(--kbq-foreground-contrast);
-    --kbq-loader-overlay-transparent-caption-color: var(--kbq-foreground-contrast-secondary);
-    --kbq-loader-overlay-filled-overlay-background: var(--kbq-background-bg);
-    --kbq-loader-overlay-filled-text-color: var(--kbq-foreground-contrast);
-    --kbq-loader-overlay-filled-caption-color: var(--kbq-foreground-contrast-secondary);
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    /* THEME TOKENS */
     --kbq-loader-overlay-transparent-overlay-background: var(--kbq-background-overlay-inverse);
     --kbq-loader-overlay-transparent-text-color: var(--kbq-foreground-contrast);
     --kbq-loader-overlay-transparent-caption-color: var(--kbq-foreground-contrast-secondary);

package/markdown/markdown-tokens.scss

@@ -55,40 +55,7 @@
     --kbq-markdown-table-size-padding: var(--kbq-size-s);
     --kbq-markdown-table-size-margin-bottom: var(--kbq-size-m);
     --kbq-markdown-size-max-width: 650px;
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-markdown-h1-color: var(--kbq-foreground-contrast);
-    --kbq-markdown-h2-color: var(--kbq-foreground-contrast);
-    --kbq-markdown-h3-color: var(--kbq-foreground-contrast);
-    --kbq-markdown-h4-color: var(--kbq-foreground-contrast);
-    --kbq-markdown-h5-color: var(--kbq-foreground-contrast);
-    --kbq-markdown-h6-color: var(--kbq-foreground-contrast);
-    --kbq-markdown-p-color: var(--kbq-foreground-contrast);
-    --kbq-markdown-list-color: var(--kbq-foreground-contrast);
-    --kbq-markdown-blockquote-text: var(--kbq-foreground-contrast);
-    --kbq-markdown-blockquote-line: var(--kbq-line-contrast-less);
-    --kbq-markdown-blockquote-background: var(--kbq-background-contrast-fade);
-    --kbq-markdown-blockquote-border: transparent;
-    --kbq-markdown-code-text: var(--kbq-foreground-contrast);
-    --kbq-markdown-code-background: var(--kbq-background-contrast-fade);
-    --kbq-markdown-code-border: var(--kbq-line-contrast-less);
-    --kbq-markdown-link-text: var(--kbq-link-text);
-    --kbq-markdown-link-border-bottom: var(--kbq-link-border-bottom);
-    --kbq-markdown-link-state-visited-text: var(--kbq-link-state-visited-text);
-    --kbq-markdown-link-state-visited-border-bottom: var(--kbq-link-state-visited-border-bottom);
-    --kbq-markdown-link-state-hover-text: var(--kbq-link-state-hover-text);
-    --kbq-markdown-link-state-hover-border-bottom: var(--kbq-link-state-hover-border-bottom);
-    --kbq-markdown-link-state-active: var(--kbq-link-state-active-text);
-    --kbq-markdown-link-state-focused-outline: var(--kbq-link-state-focused-outline);
-    --kbq-markdown-image-caption-text: var(--kbq-foreground-contrast-secondary);
-    --kbq-markdown-hr-color: var(--kbq-line-contrast-less);
-    --kbq-markdown-table-header: var(--kbq-foreground-contrast-secondary);
-    --kbq-markdown-table-body: var(--kbq-foreground-contrast);
-    --kbq-markdown-table-border: var(--kbq-line-contrast-less);
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    /* THEME TOKENS */
     --kbq-markdown-h1-color: var(--kbq-foreground-contrast);
     --kbq-markdown-h2-color: var(--kbq-foreground-contrast);
     --kbq-markdown-h3-color: var(--kbq-foreground-contrast);

package/modal/modal-tokens.scss

@@ -15,18 +15,7 @@
     --kbq-modal-size-footer-padding-horizontal: var(--kbq-size-xxl);
     --kbq-modal-size-footer-padding-vertical: var(--kbq-size-xl);
     --kbq-modal-size-footer-content-gap-horizontal: var(--kbq-size-l);
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-modal-overlay-background: var(--kbq-background-overlay);
-    --kbq-modal-container-background: var(--kbq-background-card);
-    --kbq-modal-container-shadow: var(--kbq-shadow-overlay);
-    --kbq-modal-close-button-color: var(--kbq-icon-contrast);
-    --kbq-modal-header-text-color: var(--kbq-foreground-contrast);
-    --kbq-modal-content-text-color: var(--kbq-foreground-contrast);
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    /* THEME TOKENS */
     --kbq-modal-overlay-background: var(--kbq-background-overlay);
     --kbq-modal-container-background: var(--kbq-background-card);
     --kbq-modal-container-shadow: var(--kbq-shadow-overlay);

package/modal/modal.component.d.ts

@@ -17,7 +17,7 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     private modalControl;
     private changeDetector;
     private focusMonitor;
-    private document;
+    protected readonly document: Document;
     componentColors: typeof KbqComponentColors;
     kbqModalType: ModalType;
     kbqComponent: Type<T>;
@@ -79,7 +79,7 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     private contentComponentRef;
     private animationState;
     private container;
-    constructor(overlay: Overlay, renderer: Renderer2, cfr: ComponentFactoryResolver, elementRef: ElementRef, viewContainer: ViewContainerRef, modalControl: KbqModalControlService, changeDetector: ChangeDetectorRef, focusMonitor: FocusMonitor, document: any);
+    constructor(overlay: Overlay, renderer: Renderer2, cfr: ComponentFactoryResolver, elementRef: ElementRef, viewContainer: ViewContainerRef, modalControl: KbqModalControlService, changeDetector: ChangeDetectorRef, focusMonitor: FocusMonitor);
     kbqGetContainer: HTMLElement | OverlayRef | (() => HTMLElement | OverlayRef);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;

package/navbar/navbar-item.component.d.ts

@@ -22,13 +22,13 @@ export declare class KbqNavbarBento {
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarBento, "kbq-navbar-item[bento], [kbq-navbar-item][bento]", never, {}, {}, never, never, false, never>;
 }
 export declare class KbqNavbarTitle implements AfterViewInit {
-    private elementRef;
+    protected readonly isBrowser: boolean;
+    protected readonly nativeElement: any;
     readonly hovered: Subject<boolean>;
     outerElementWidth: number;
     isTextOverflown: boolean;
     get text(): string;
     get isOverflown(): boolean;
-    constructor(elementRef: ElementRef);
     getOuterElementWidth(): number;
     checkTextOverflown(): void;
     ngAfterViewInit(): void;
@@ -85,7 +85,8 @@ export declare class KbqNavbarFocusableItem implements IFocusableOption, AfterCo
     static ngAcceptInputType_disabled: unknown;
 }
 export declare class KbqNavbarRectangleElement {
-    elementRef: ElementRef;
+    protected readonly isBrowser: boolean;
+    protected readonly nativeElement: any;
     readonly state: Subject<void>;
     get horizontal(): boolean;
     set horizontal(value: boolean);
@@ -97,7 +98,6 @@ export declare class KbqNavbarRectangleElement {
     set collapsed(value: boolean);
     private _collapsed;
     button: KbqButtonCssStyler;
-    constructor(elementRef: ElementRef);
     getOuterElementWidth(): number;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarRectangleElement, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarRectangleElement, "kbq-navbar-item, [kbq-navbar-item], kbq-navbar-divider, kbq-navbar-brand, [kbq-navbar-brand]", never, {}, {}, ["button"], never, false, never>;
@@ -140,18 +140,18 @@ export declare class KbqNavbarItem extends KbqTooltipTrigger implements AfterCon
 export declare class KbqNavbarToggle extends KbqTooltipTrigger implements OnDestroy {
     navbar: KbqVerticalNavbar;
     private changeDetectorRef;
-    private document;
+    protected readonly document: Document;
     customIcon: KbqIcon;
     get content(): string | TemplateRef<any>;
     set content(content: string | TemplateRef<any>);
     get disabled(): boolean;
     protected modifier: TooltipModifier;
-    constructor(navbar: KbqVerticalNavbar, changeDetectorRef: ChangeDetectorRef, document: any);
+    constructor(navbar: KbqVerticalNavbar, changeDetectorRef: ChangeDetectorRef);
     onKeydown($event: KeyboardEvent): void;
     ngOnDestroy(): void;
     toggle: () => void;
     private getWindow;
     private windowToggleHandler;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarToggle, [null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarToggle, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarToggle, "kbq-navbar-toggle", never, { "content": { "alias": "kbqCollapsedTooltip"; "required": false; }; }, {}, ["customIcon"], ["[kbq-icon]", "kbq-navbar-title"], false, never>;
 }