@koobiq/components 17.8.5 → 18.1.0

package/tabs/_tabs-common.scss

@@ -32,6 +32,25 @@
 
     outline: none;
 
+    &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical) {
+        padding-left: 14px;
+        padding-right: 14px;
+    }
+
+    &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-left {
+        padding-left: kbq-difference-series-css-variables(
+            [tabs-size-tab-item-padding-horizontal,
+            tabs-size-tab-item-focus-outline-width]
+        );
+    }
+
+    &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-right {
+        padding-right: kbq-difference-series-css-variables(
+            [tabs-size-tab-item-padding-horizontal,
+            tabs-size-tab-item-focus-outline-width]
+        );
+    }
+
     &.kbq-selected {
         cursor: default;
     }
@@ -51,10 +70,20 @@
         gap: kbq-css-variable(tabs-size-tab-item-content-gap-horizontal);
     }
 
+    &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: -10px;
+        bottom: -10px;
+    }
+
     &.kbq-tab-label_vertical {
         justify-content: flex-start;
 
         & .kbq-tab-label__content {
+            display: block;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;

package/tabs/_tabs-theme.scss

@@ -19,11 +19,23 @@
         @include kbq-tab-item-state($type, $sub-type, states-hover);
     }
 
+    &.kbq-tab-label_empty {
+        color: kbq-css-variable(foreground-contrast-secondary);
+    }
+
     &.kbq-selected {
         @include kbq-tab-item-state($type, $sub-type, states-selected);
 
+        &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical) {
+            background: none;
+        }
+
         &:hover {
             @include kbq-tab-item-state($type, $sub-type, states-selected-hover);
+
+            &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical) {
+                background: none;
+            }
         }
     }
 

package/tabs/tab-group.component.d.ts

@@ -20,6 +20,10 @@ export declare class KbqVerticalTabsCssStyler {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqVerticalTabsCssStyler, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqVerticalTabsCssStyler, "kbq-tab-group[vertical], [kbq-tab-nav-bar][vertical]", never, {}, {}, never, never, false, never>;
 }
+export declare class KbqUnderlinedTabsCssStyler {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqUnderlinedTabsCssStyler, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqUnderlinedTabsCssStyler, "kbq-tab-group[underlined], [kbq-tab-nav-bar][underlined]", never, {}, {}, never, never, false, never>;
+}
 /** A simple change event emitted on focus or selection changes. */
 export declare class KbqTabChangeEvent {
     /** Index of the currently-selected tab. */
@@ -52,6 +56,7 @@ export declare class KbqTabGroup extends KbqTabGroupMixinBase implements AfterCo
     private readonly changeDetectorRef;
     readonly resizeStream: Subject<Event>;
     vertical: boolean;
+    underlined: boolean;
     tabs: QueryList<KbqTab>;
     tabBodyWrapper: ElementRef;
     tabHeader: KbqTabHeader;
@@ -91,7 +96,7 @@ export declare class KbqTabGroup extends KbqTabGroupMixinBase implements AfterCo
     private resizeSubscription;
     private readonly groupId;
     private readonly resizeDebounceInterval;
-    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, vertical: string, defaultConfig?: IKbqTabsConfig);
+    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, vertical: string, underlined: string, defaultConfig?: IKbqTabsConfig);
     /**
      * After the content is checked, this component knows what tabs have been defined
      * and what the selected index should be. This is where we can know exactly what position
@@ -132,6 +137,6 @@ export declare class KbqTabGroup extends KbqTabGroupMixinBase implements AfterCo
     /** Clamps the given index to the bounds of 0 and the tabs length. */
     private clampTabIndex;
     private getTabIndexToSelect;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabGroup, [null, null, { attribute: "vertical"; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabGroup, [null, null, { attribute: "vertical"; }, { attribute: "underlined"; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabGroup, "kbq-tab-group", ["kbqTabGroup"], { "disabled": { "alias": "disabled"; "required": false; }; "transparent": { "alias": "transparent"; "required": false; }; "onSurface": { "alias": "onSurface"; "required": false; }; "dynamicHeight": { "alias": "dynamicHeight"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "activeTab": { "alias": "activeTab"; "required": false; }; "headerPosition": { "alias": "headerPosition"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; }, { "selectedIndexChange": "selectedIndexChange"; "activeTabChange": "activeTabChange"; "focusChange": "focusChange"; "animationDone": "animationDone"; "selectedTabChange": "selectedTabChange"; }, ["tabs"], never, false, never>;
 }

package/tabs/tab-header.component.d.ts

@@ -23,13 +23,16 @@ export declare class KbqTabHeader extends KbqPaginatedTabHeader {
     readonly changeDetectorRef: ChangeDetectorRef;
     /** The index of the active tab. */
     vertical: boolean;
+    underlined: boolean;
     items: QueryList<KbqTabLabelWrapper>;
     tabListContainer: ElementRef;
     tabList: ElementRef;
     nextPaginator: ElementRef<HTMLElement>;
     previousPaginator: ElementRef<HTMLElement>;
+    get activeTabOffsetWidth(): string;
+    get activeTabOffsetLeft(): string;
     constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, viewportRuler: ViewportRuler, ngZone: NgZone, platform: Platform, dir: Directionality, animationMode?: string);
     itemSelected(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabHeader, [null, null, null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabHeader, "kbq-tab-header", never, { "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; }, { "selectFocusedIndex": "selectFocusedIndex"; "indexFocused": "indexFocused"; }, ["items"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabHeader, "kbq-tab-header", never, { "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "underlined": { "alias": "underlined"; "required": false; }; }, { "selectFocusedIndex": "selectFocusedIndex"; "indexFocused": "indexFocused"; }, ["items"], ["*"], false, never>;
 }

package/tabs/tab-header.scss

@@ -24,6 +24,34 @@
     flex-direction: column;
 }
 
+.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content {
+    padding: 8px 0;
+}
+
+.kbq-tab-header_underlined:not(.kbq-tab-header_vertical):after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    height: 1px;
+    background: rgba(13, 14, 18, 0.12);
+}
+
+.kbq-tab-list__active-tab-underline {
+    display: none;
+}
+
+.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    height: 3px;
+    border-radius: 2px 2px 0 0;
+    background: rgba(33, 34, 44, 1);
+    transition: all 0.2s ease-in-out;
+}
+
 .kbq-tab-header__pagination {
     @include vendor-prefixes.user-select(none);
 

package/tabs/tabs-tokens.scss

@@ -1,140 +1,197 @@
+/* stylelint-disable no-unknown-custom-properties */
+
 .kbq-tab-group,
 .kbq-tab-nav-bar {
-    --kbq-tabs-size-tab-item-padding-horizontal: 12px;
-    --kbq-tabs-size-tab-item-padding-vertical: 6px;
-    --kbq-tabs-size-tab-item-content-gap-horizontal: 4px;
-    --kbq-tabs-size-tab-item-border-radius: 8px;
-    --kbq-tabs-size-tab-item-focus-outline-width: 2px;
-    --kbq-tabs-size-tab-stack-horizontal-border-radius: 8px;
-    --kbq-tabs-size-tab-stack-vertical-content-gap-vertical: 8px;
-    --kbq-tabs-font-text-font-size: 14px;
-    --kbq-tabs-font-text-line-height: 20px;
-    --kbq-tabs-font-text-letter-spacing: -0.006em;
-    --kbq-tabs-font-text-font-weight: 500;
-    --kbq-tabs-font-text-text-transform: null;
-    --kbq-tabs-font-text-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-tabs-size-tab-item-padding-horizontal: var(--kbq-size-m);
+    --kbq-tabs-size-tab-item-padding-vertical: var(--kbq-size-xs);
+    --kbq-tabs-size-tab-item-content-gap-horizontal: var(--kbq-size-xxs);
+    --kbq-tabs-size-tab-item-border-radius: var(--kbq-size-s);
+    --kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);
+    --kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-s);
+    --kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);
+    --kbq-tabs-font-text-font-size: var(--kbq-typography-text-normal-medium-font-size);
+    --kbq-tabs-font-text-line-height: var(--kbq-typography-text-normal-medium-line-height);
+    --kbq-tabs-font-text-letter-spacing: var(--kbq-typography-text-normal-medium-letter-spacing);
+    --kbq-tabs-font-text-font-weight: var(--kbq-typography-text-normal-medium-font-weight);
     --kbq-tabs-font-text-font-family: var(--kbq-typography-text-normal-medium-font-family);
-}
-
-:root {
-    --kbq-typography-text-normal-medium-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
-        'Helvetica Neue', Arial, sans-serif;
+    --kbq-tabs-font-text-text-transform: var(--kbq-typography-text-normal-medium-text-transform);
+    --kbq-tabs-font-text-font-feature-settings: var(--kbq-typography-text-normal-medium-font-feature-settings);
 }
 
 :where(.kbq-light, .theme-light, .kbq-theme-light) {
     --kbq-tabs-tab-item-filled-on-background-default-background: transparent;
-    --kbq-tabs-tab-item-filled-on-background-default-text-color: hsla(229, 15%, 15%, 100%);
-    --kbq-tabs-tab-item-filled-on-background-default-icon-color: hsla(229, 15%, 15%, 100%);
-    --kbq-tabs-tab-item-filled-on-background-states-hover-background: hsla(229, 15%, 50%, 8%);
-    --kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);
-    --kbq-tabs-tab-item-filled-on-background-states-selected-background: hsla(229, 15%, 50%, 16%);
-    --kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: hsla(229, 15%, 50%, 16%);
-    --kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: hsla(229, 15%, 50%, 16%);
-    --kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: hsla(229, 15%, 15%, 32%);
-    --kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: hsla(229, 15%, 15%, 32%);
+    --kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);
+    --kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);
+    --kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);
+    --kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
+    --kbq-tabs-tab-item-filled-on-background-states-selected-background: var(
+        --kbq-states-background-transparent-active
+    );
+    --kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var(
+        --kbq-states-background-transparent-active
+    );
+    --kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var(
+        --kbq-states-background-transparent-active
+    );
+    --kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);
+    --kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);
     --kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;
-    --kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: hsla(229, 15%, 15%, 32%);
-    --kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: hsla(229, 15%, 15%, 32%);
+    --kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);
+    --kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);
     --kbq-tabs-tab-item-filled-on-surface-default-background: transparent;
-    --kbq-tabs-tab-item-filled-on-surface-default-text-color: hsla(229, 15%, 15%, 100%);
-    --kbq-tabs-tab-item-filled-on-surface-default-icon-color: hsla(229, 15%, 15%, 100%);
-    --kbq-tabs-tab-item-filled-on-surface-states-hover-background: hsla(229, 15%, 50%, 8%);
-    --kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);
-    --kbq-tabs-tab-item-filled-on-surface-states-selected-background: hsla(229, 15%, 50%, 16%);
-    --kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: hsla(229, 15%, 50%, 16%);
-    --kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: hsla(229, 15%, 50%, 16%);
-    --kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: hsla(229, 15%, 15%, 32%);
-    --kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: hsla(229, 15%, 15%, 32%);
+    --kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);
+    --kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);
+    --kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);
+    --kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
+    --kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);
+    --kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var(
+        --kbq-states-background-transparent-active
+    );
+    --kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var(
+        --kbq-states-background-transparent-active
+    );
+    --kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);
+    --kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);
     --kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;
-    --kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: hsla(229, 15%, 15%, 32%);
-    --kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: hsla(229, 15%, 15%, 32%);
+    --kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);
+    --kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);
     --kbq-tabs-tab-item-transparent-on-background-default-background: transparent;
-    --kbq-tabs-tab-item-transparent-on-background-default-text-color: hsla(229, 15%, 15%, 100%);
-    --kbq-tabs-tab-item-transparent-on-background-default-icon-color: hsla(229, 15%, 15%, 100%);
-    --kbq-tabs-tab-item-transparent-on-background-states-hover-background: hsla(229, 15%, 50%, 8%);
-    --kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);
-    --kbq-tabs-tab-item-transparent-on-background-states-selected-background: hsla(229, 15%, 50%, 16%);
-    --kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: hsla(229, 15%, 50%, 16%);
-    --kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: hsla(229, 15%, 50%, 16%);
-    --kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: hsla(229, 15%, 15%, 32%);
-    --kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: hsla(229, 15%, 15%, 32%);
+    --kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);
+    --kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);
+    --kbq-tabs-tab-item-transparent-on-background-states-hover-background: var(
+        --kbq-states-background-transparent-hover
+    );
+    --kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var(
+        --kbq-states-line-focus-theme
+    );
+    --kbq-tabs-tab-item-transparent-on-background-states-selected-background: var(
+        --kbq-states-background-transparent-active
+    );
+    --kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var(
+        --kbq-states-background-transparent-active
+    );
+    --kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var(
+        --kbq-states-background-transparent-active
+    );
+    --kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var(
+        --kbq-states-foreground-disabled
+    );
+    --kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);
     --kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;
-    --kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: hsla(229, 15%, 15%, 32%);
-    --kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: hsla(229, 15%, 15%, 32%);
+    --kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);
+    --kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);
     --kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;
-    --kbq-tabs-tab-item-transparent-on-surface-default-text-color: hsla(229, 15%, 15%, 100%);
-    --kbq-tabs-tab-item-transparent-on-surface-default-icon-color: hsla(229, 15%, 15%, 100%);
-    --kbq-tabs-tab-item-transparent-on-surface-states-hover-background: hsla(229, 15%, 50%, 8%);
-    --kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);
-    --kbq-tabs-tab-item-transparent-on-surface-states-selected-background: hsla(229, 15%, 50%, 16%);
-    --kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: hsla(229, 15%, 50%, 16%);
-    --kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: hsla(229, 15%, 50%, 16%);
-    --kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: hsla(229, 15%, 15%, 32%);
-    --kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: hsla(229, 15%, 15%, 32%);
+    --kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);
+    --kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);
+    --kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);
+    --kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
+    --kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var(
+        --kbq-states-background-transparent-active
+    );
+    --kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var(
+        --kbq-states-background-transparent-active
+    );
+    --kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var(
+        --kbq-states-background-transparent-active
+    );
+    --kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var(
+        --kbq-states-foreground-disabled
+    );
+    --kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);
     --kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;
-    --kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: hsla(229, 15%, 15%, 32%);
-    --kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: hsla(229, 15%, 15%, 32%);
-    --kbq-tabs-tab-stack-filled-on-background-background: hsla(0, 0%, 100%, 100%);
-    --kbq-tabs-tab-stack-filled-on-surface-background: hsla(229, 15%, 92%, 100%);
+    --kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);
+    --kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);
+    --kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);
+    --kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);
     --kbq-tabs-tab-stack-transparent-on-background-background: transparent;
     --kbq-tabs-tab-stack-transparent-on-surface-background: transparent;
 }
 
 :where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
     --kbq-tabs-tab-item-filled-on-background-default-background: transparent;
-    --kbq-tabs-tab-item-filled-on-background-default-text-color: hsla(229, 15%, 80%, 100%);
-    --kbq-tabs-tab-item-filled-on-background-default-icon-color: hsla(229, 15%, 80%, 100%);
-    --kbq-tabs-tab-item-filled-on-background-states-hover-background: hsla(229, 15%, 50%, 16%);
-    --kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);
-    --kbq-tabs-tab-item-filled-on-background-states-selected-background: hsla(229, 100%, 85%, 15%);
-    --kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: hsla(229, 100%, 85%, 15%);
-    --kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: hsla(229, 100%, 85%, 15%);
-    --kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: hsla(229, 15%, 40%, 100%);
-    --kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: hsla(229, 15%, 30%, 100%);
+    --kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);
+    --kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);
+    --kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);
+    --kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
+    --kbq-tabs-tab-item-filled-on-background-states-selected-background: var(
+        --kbq-states-background-transparent-active
+    );
+    --kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var(
+        --kbq-states-background-transparent-active
+    );
+    --kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var(
+        --kbq-states-background-transparent-active
+    );
+    --kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);
+    --kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);
     --kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;
-    --kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: hsla(229, 15%, 40%, 100%);
-    --kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: hsla(229, 15%, 30%, 100%);
+    --kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);
+    --kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);
     --kbq-tabs-tab-item-filled-on-surface-default-background: transparent;
-    --kbq-tabs-tab-item-filled-on-surface-default-text-color: hsla(229, 15%, 80%, 100%);
-    --kbq-tabs-tab-item-filled-on-surface-default-icon-color: hsla(229, 15%, 80%, 100%);
-    --kbq-tabs-tab-item-filled-on-surface-states-hover-background: hsla(229, 15%, 50%, 16%);
-    --kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);
-    --kbq-tabs-tab-item-filled-on-surface-states-selected-background: hsla(229, 100%, 85%, 15%);
-    --kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: hsla(229, 100%, 85%, 15%);
-    --kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: hsla(229, 100%, 85%, 15%);
-    --kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: hsla(229, 15%, 40%, 100%);
-    --kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: hsla(229, 15%, 30%, 100%);
+    --kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);
+    --kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);
+    --kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);
+    --kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
+    --kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);
+    --kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var(
+        --kbq-states-background-transparent-active
+    );
+    --kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var(
+        --kbq-states-background-transparent-active
+    );
+    --kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);
+    --kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);
     --kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;
-    --kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: hsla(229, 15%, 40%, 100%);
-    --kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: hsla(229, 15%, 30%, 100%);
+    --kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);
+    --kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);
     --kbq-tabs-tab-item-transparent-on-background-default-background: transparent;
-    --kbq-tabs-tab-item-transparent-on-background-default-text-color: hsla(229, 15%, 80%, 100%);
-    --kbq-tabs-tab-item-transparent-on-background-default-icon-color: hsla(229, 15%, 80%, 100%);
-    --kbq-tabs-tab-item-transparent-on-background-states-hover-background: hsla(229, 15%, 50%, 16%);
-    --kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);
-    --kbq-tabs-tab-item-transparent-on-background-states-selected-background: hsla(229, 100%, 85%, 15%);
-    --kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: hsla(229, 100%, 85%, 15%);
-    --kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: hsla(229, 100%, 85%, 15%);
-    --kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: hsla(229, 15%, 40%, 100%);
-    --kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: hsla(229, 15%, 30%, 100%);
+    --kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);
+    --kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);
+    --kbq-tabs-tab-item-transparent-on-background-states-hover-background: var(
+        --kbq-states-background-transparent-hover
+    );
+    --kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var(
+        --kbq-states-line-focus-theme
+    );
+    --kbq-tabs-tab-item-transparent-on-background-states-selected-background: var(
+        --kbq-states-background-transparent-active
+    );
+    --kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var(
+        --kbq-states-background-transparent-active
+    );
+    --kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var(
+        --kbq-states-background-transparent-active
+    );
+    --kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var(
+        --kbq-states-foreground-disabled
+    );
+    --kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);
     --kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;
-    --kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: hsla(229, 15%, 40%, 100%);
-    --kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: hsla(229, 15%, 30%, 100%);
+    --kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);
+    --kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);
     --kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;
-    --kbq-tabs-tab-item-transparent-on-surface-default-text-color: hsla(229, 15%, 80%, 100%);
-    --kbq-tabs-tab-item-transparent-on-surface-default-icon-color: hsla(229, 15%, 80%, 100%);
-    --kbq-tabs-tab-item-transparent-on-surface-states-hover-background: hsla(229, 15%, 50%, 16%);
-    --kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);
-    --kbq-tabs-tab-item-transparent-on-surface-states-selected-background: hsla(229, 100%, 85%, 15%);
-    --kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: hsla(229, 100%, 85%, 15%);
-    --kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: hsla(229, 100%, 85%, 15%);
-    --kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: hsla(229, 15%, 40%, 100%);
-    --kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: hsla(229, 15%, 30%, 100%);
+    --kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);
+    --kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);
+    --kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);
+    --kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
+    --kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var(
+        --kbq-states-background-transparent-active
+    );
+    --kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var(
+        --kbq-states-background-transparent-active
+    );
+    --kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var(
+        --kbq-states-background-transparent-active
+    );
+    --kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var(
+        --kbq-states-foreground-disabled
+    );
+    --kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);
     --kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;
-    --kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: hsla(229, 15%, 40%, 100%);
-    --kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: hsla(229, 15%, 30%, 100%);
-    --kbq-tabs-tab-stack-filled-on-background-background: hsla(229, 15%, 12%, 100%);
-    --kbq-tabs-tab-stack-filled-on-surface-background: hsla(229, 15%, 25%, 100%);
+    --kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);
+    --kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);
+    --kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);
+    --kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);
     --kbq-tabs-tab-stack-transparent-on-background-background: transparent;
     --kbq-tabs-tab-stack-transparent-on-surface-background: transparent;
 }

package/tabs/tabs.module.d.ts

@@ -13,8 +13,9 @@ import * as i11 from "@angular/cdk/scrolling";
 import * as i12 from "@koobiq/components/core";
 import * as i13 from "@koobiq/components/icon";
 import * as i14 from "@koobiq/components/tooltip";
+import * as i15 from "@angular/common";
 export declare class KbqTabsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTabsModule, [typeof i1.KbqTabGroup, typeof i2.KbqTabLabel, typeof i3.KbqTab, typeof i4.KbqTabLabelWrapper, typeof i5.KbqTabNav, typeof i5.KbqTabLink, typeof i6.KbqTabBody, typeof i6.KbqTabBodyPortal, typeof i7.KbqTabHeader, typeof i8.KbqTabContent, typeof i1.KbqAlignTabsCenterCssStyler, typeof i1.KbqAlignTabsEndCssStyler, typeof i1.KbqStretchTabsCssStyler, typeof i1.KbqVerticalTabsCssStyler], [typeof i9.PortalModule, typeof i10.A11yModule, typeof i11.CdkScrollableModule, typeof i12.KbqCommonModule, typeof i13.KbqIconModule, typeof i14.KbqToolTipModule], [typeof i12.KbqCommonModule, typeof i1.KbqTabGroup, typeof i2.KbqTabLabel, typeof i3.KbqTab, typeof i5.KbqTabNav, typeof i5.KbqTabLink, typeof i8.KbqTabContent, typeof i1.KbqAlignTabsCenterCssStyler, typeof i1.KbqAlignTabsEndCssStyler, typeof i1.KbqStretchTabsCssStyler, typeof i1.KbqVerticalTabsCssStyler]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTabsModule, [typeof i1.KbqTabGroup, typeof i2.KbqTabLabel, typeof i3.KbqTab, typeof i4.KbqTabLabelWrapper, typeof i5.KbqTabNav, typeof i5.KbqTabLink, typeof i6.KbqTabBody, typeof i6.KbqTabBodyPortal, typeof i7.KbqTabHeader, typeof i8.KbqTabContent, typeof i1.KbqAlignTabsCenterCssStyler, typeof i1.KbqAlignTabsEndCssStyler, typeof i1.KbqStretchTabsCssStyler, typeof i1.KbqUnderlinedTabsCssStyler, typeof i1.KbqVerticalTabsCssStyler], [typeof i9.PortalModule, typeof i10.A11yModule, typeof i11.CdkScrollableModule, typeof i12.KbqCommonModule, typeof i13.KbqIconModule, typeof i14.KbqToolTipModule, typeof i15.NgStyle], [typeof i12.KbqCommonModule, typeof i1.KbqTabGroup, typeof i2.KbqTabLabel, typeof i3.KbqTab, typeof i5.KbqTabNav, typeof i5.KbqTabLink, typeof i8.KbqTabContent, typeof i1.KbqAlignTabsCenterCssStyler, typeof i1.KbqAlignTabsEndCssStyler, typeof i1.KbqStretchTabsCssStyler, typeof i1.KbqUnderlinedTabsCssStyler, typeof i1.KbqVerticalTabsCssStyler]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqTabsModule>;
 }

package/tags/tag-input-tokens.scss

@@ -1,18 +1,15 @@
+/* stylelint-disable no-unknown-custom-properties */
+
 .kbq-form-field-type-tag-list {
-    --kbq-tag-input-size-padding-left: 4px;
-    --kbq-tag-input-size-padding-right: 12px;
-    --kbq-tag-input-size-padding-vertical: 4px;
-    --kbq-tag-input-size-content-gap: 8px;
-    --kbq-tag-input-font-default-font-size: 14px;
-    --kbq-tag-input-font-default-line-height: 20px;
-    --kbq-tag-input-font-default-letter-spacing: -0.006em;
-    --kbq-tag-input-font-default-font-weight: normal;
-    --kbq-tag-input-font-default-text-transform: null;
-    --kbq-tag-input-font-default-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-tag-input-size-padding-left: var(--kbq-size-xxs);
+    --kbq-tag-input-size-padding-right: var(--kbq-size-m);
+    --kbq-tag-input-size-padding-vertical: var(--kbq-size-xxs);
+    --kbq-tag-input-size-content-gap: var(--kbq-size-s);
+    --kbq-tag-input-font-default-font-size: var(--kbq-typography-text-normal-font-size);
+    --kbq-tag-input-font-default-line-height: var(--kbq-typography-text-normal-line-height);
+    --kbq-tag-input-font-default-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
+    --kbq-tag-input-font-default-font-weight: var(--kbq-typography-text-normal-font-weight);
     --kbq-tag-input-font-default-font-family: var(--kbq-typography-text-normal-font-family);
-}
-
-:root {
-    --kbq-typography-text-normal-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
-        Arial, sans-serif;
+    --kbq-tag-input-font-default-text-transform: var(--kbq-typography-text-normal-text-transform);
+    --kbq-tag-input-font-default-font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
 }