@koobiq/components 18.0.0 → 18.2.0

package/table/table.scss

@@ -15,10 +15,10 @@
             & > th,
             & > td {
                 padding: {
-                    top: kbq-css-variable(table-size-row-padding-vertical);
-                    right: kbq-css-variable(table-size-row-padding-horizontal);
-                    bottom: kbq-css-variable(table-size-row-padding-vertical);
-                    left: kbq-css-variable(table-size-row-padding-horizontal);
+                    top: var(--kbq-table-size-row-padding-vertical);
+                    right: var(--kbq-table-size-row-padding-horizontal);
+                    bottom: var(--kbq-table-size-row-padding-vertical);
+                    left: var(--kbq-table-size-row-padding-horizontal);
                 }
 
                 vertical-align: baseline;
@@ -29,14 +29,14 @@
 
     & > thead {
         & > tr > th {
-            border-bottom-width: kbq-css-variable(table-size-border-width);
+            border-bottom-width: var(--kbq-table-size-border-width);
             border-bottom-style: solid;
         }
     }
 
     .kbq-table-cell_has-button {
-        padding-top: kbq-css-variable(size-xxs);
-        padding-bottom: kbq-css-variable(size-xxs);
+        padding-top: var(--kbq-size-xxs);
+        padding-bottom: var(--kbq-size-xxs);
     }
 }
 
@@ -44,7 +44,7 @@
     & > tbody > tr {
         & th,
         & td {
-            border-bottom-width: kbq-css-variable(table-size-border-width);
+            border-bottom-width: var(--kbq-table-size-border-width);
             border-bottom-style: solid;
         }
     }
@@ -53,13 +53,13 @@
 .kbq-table:not(.kbq-table_bordered) {
     & > tbody > tr {
         & > td:first-child {
-            border-top-left-radius: kbq-css-variable(size-m);
-            border-bottom-left-radius: kbq-css-variable(size-m);
+            border-top-left-radius: var(--kbq-size-m);
+            border-bottom-left-radius: var(--kbq-size-m);
         }
 
         & > td:last-child {
-            border-top-right-radius: kbq-css-variable(size-m);
-            border-bottom-right-radius: kbq-css-variable(size-m);
+            border-top-right-radius: var(--kbq-size-m);
+            border-bottom-right-radius: var(--kbq-size-m);
         }
 
         &:first-child {

package/tabs/_tabs-common.scss

@@ -24,14 +24,33 @@
         );
 
     border: {
-        width: kbq-css-variable(tabs-size-tab-item-focus-outline-width);
+        width: var(--kbq-tabs-size-tab-item-focus-outline-width);
         style: solid;
         color: transparent;
-        radius: kbq-css-variable(tabs-size-tab-item-border-radius);
+        radius: var(--kbq-tabs-size-tab-item-border-radius);
     }
 
     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;
     }
@@ -48,13 +67,23 @@
         display: flex;
         align-items: center;
 
-        gap: kbq-css-variable(tabs-size-tab-item-content-gap-horizontal);
+        gap: var(--kbq-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

@@ -4,11 +4,11 @@
 @mixin kbq-tab-item-state($type, $sub-type, $style-name) {
     $base: tabs-tab-item-#{$type}-#{$sub-type}-#{$style-name};
 
-    background: kbq-css-variable(#{$base}-background);
-    color: kbq-css-variable(#{$base}-text-color);
+    background: var(--kbq-#{$base}-background);
+    color: var(--kbq-#{$base}-text-color);
 
     & .kbq-icon {
-        color: kbq-css-variable(#{$base}-icon-color);
+        color: var(--kbq-#{$base}-icon-color);
     }
 }
 
@@ -19,16 +19,28 @@
         @include kbq-tab-item-state($type, $sub-type, states-hover);
     }
 
+    &.kbq-tab-label_empty {
+        color: var(--kbq-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;
+            }
         }
     }
 
     &.cdk-keyboard-focused {
-        border-color: kbq-css-variable(tabs-tab-item-#{$type}-#{$sub-type}-states-focused-focus-outline-color);
+        border-color: var(--kbq-tabs-tab-item-#{$type}-#{$sub-type}-states-focused-focus-outline-color);
     }
 
     &.kbq-disabled {
@@ -46,7 +58,7 @@
         &.kbq-tab-group_filled {
             &.kbq-tab-group_on-background {
                 .kbq-tab-header {
-                    background: kbq-css-variable(tabs-tab-stack-filled-on-background-background);
+                    background: var(--kbq-tabs-tab-stack-filled-on-background-background);
                 }
 
                 & .kbq-tab-label {
@@ -56,7 +68,7 @@
 
             &.kbq-tab-group_on-surface {
                 .kbq-tab-header {
-                    background: kbq-css-variable(tabs-tab-stack-filled-on-surface-background);
+                    background: var(--kbq-tabs-tab-stack-filled-on-surface-background);
                 }
 
                 // FIXME: need check, tab-group has different subtype
@@ -69,7 +81,7 @@
         &.kbq-tab-group_transparent {
             &.kbq-tab-group_on-background {
                 .kbq-tab-header {
-                    background: kbq-css-variable(tabs-tab-stack-transparent-on-background-background);
+                    background: var(--kbq-tabs-tab-stack-transparent-on-background-background);
                 }
 
                 & .kbq-tab-label {
@@ -79,7 +91,7 @@
 
             &.kbq-tab-group_on-surface {
                 .kbq-tab-header {
-                    background: kbq-css-variable(tabs-tab-stack-transparent-on-surface-background);
+                    background: var(--kbq-tabs-tab-stack-transparent-on-surface-background);
                 }
 
                 & .kbq-tab-label {
@@ -93,7 +105,7 @@
         &.kbq-tab-nav-bar_filled {
             &.kbq-tab-nav-bar_on-background {
                 .kbq-tab-header {
-                    background: kbq-css-variable(tabs-tab-stack-filled-on-background-background);
+                    background: var(--kbq-tabs-tab-stack-filled-on-background-background);
                 }
 
                 & .kbq-tab-link {
@@ -103,7 +115,7 @@
 
             &.kbq-tab-nav-bar_on-surface {
                 .kbq-tab-header {
-                    background: kbq-css-variable(tabs-tab-stack-filled-on-surface-background);
+                    background: var(--kbq-tabs-tab-stack-filled-on-surface-background);
                 }
 
                 & .kbq-tab-link {
@@ -115,7 +127,7 @@
         &.kbq-tab-nav-bar_transparent {
             &.kbq-tab-nav-bar_on-background {
                 .kbq-tab-header {
-                    background: kbq-css-variable(tabs-tab-stack-transparent-on-background-background);
+                    background: var(--kbq-tabs-tab-stack-transparent-on-background-background);
                 }
 
                 & .kbq-tab-link {
@@ -125,7 +137,7 @@
 
             &.kbq-tab-nav-bar_on-surface {
                 .kbq-tab-header {
-                    background: kbq-css-variable(tabs-tab-stack-transparent-on-surface-background);
+                    background: var(--kbq-tabs-tab-stack-transparent-on-surface-background);
                 }
 
                 & .kbq-tab-link {

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-group.scss

@@ -18,7 +18,7 @@
     flex-direction: row;
 
     .kbq-tab-list__content {
-        gap: kbq-css-variable(tabs-size-tab-stack-vertical-content-gap-vertical) 0;
+        gap: var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical) 0;
     }
 
     & .kbq-tab-header__content {

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

@@ -1,5 +1,6 @@
 @use '../core/styles/common/vendor-prefixes';
 @use 'tabs-common' as *;
+@use '../core/styles/common/tokens' as *;
 
 .kbq-tab-header {
     display: flex;
@@ -24,6 +25,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: var(--kbq-line-contrast-less);
+}
+
+.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: var(--kbq-line-contrast);
+    transition: all 0.2s ease-in-out;
+}
+
 .kbq-tab-header__pagination {
     @include vendor-prefixes.user-select(none);
 

package/tabs/tab-nav-bar/tab-nav-bar.scss

@@ -33,6 +33,6 @@
     &.kbq-tab-group_vertical {
         flex-direction: column;
         flex-grow: 0;
-        gap: kbq-css-variable(tabs-size-tab-stack-vertical-content-gap-vertical) 0;
+        gap: var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical) 0;
     }
 }

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-theme.scss

@@ -5,14 +5,14 @@
 @mixin kbq-tag-state($type, $style-name) {
     $base: tag-#{$type}-#{$style-name};
 
-    background: kbq-css-variable(#{$base}-background);
+    background: var(--kbq-#{$base}-background);
 
     & .kbq-icon {
-        color: kbq-css-variable(#{$base}-icon);
+        color: var(--kbq-#{$base}-icon);
     }
 
     & .kbq-tag__text {
-        color: kbq-css-variable(#{$base}-text);
+        color: var(--kbq-#{$base}-text);
     }
 }
 
@@ -28,8 +28,8 @@
         @include kbq-tag-state($type, states-focus);
 
         box-shadow:
-            inset 0 0 0.1px 1px kbq-css-variable(tag-#{$type}-states-focus-outline),
-            0 0 0.1px 1px kbq-css-variable(tag-#{$type}-states-focus-outline);
+            inset 0 0 0.1px 1px var(--kbq-tag-#{$type}-states-focus-outline),
+            0 0 0.1px 1px var(--kbq-tag-#{$type}-states-focus-outline);
     }
 
     &.kbq-disabled {

package/tags/tag-list.scss

@@ -20,8 +20,8 @@
 
     min-height: unset;
 
-    padding-top: kbq-css-variable(tag-size-padding-vertical);
-    padding-bottom: kbq-css-variable(tag-size-padding-vertical);
+    padding-top: var(--kbq-tag-size-padding-vertical);
+    padding-bottom: var(--kbq-tag-size-padding-vertical);
     padding-left: 4px;
     padding-right: unset;
 }
@@ -35,7 +35,7 @@
 
     min-width: 0;
 
-    gap: kbq-css-variable(tag-list-size-content-gap);
+    gap: var(--kbq-tag-list-size-content-gap);
 
     & .kbq-tag-input {
         max-width: 100%;
@@ -53,8 +53,8 @@
 .kbq-form-field-type-tag-list {
     & .kbq-form-field__container {
         padding: kbq-difference-series-css-variables([tag-input-size-padding-vertical, form-field-size-border-width])
-            kbq-css-variable(tag-input-size-padding-right)
+            var(--kbq-tag-input-size-padding-right)
             kbq-difference-series-css-variables([tag-input-size-padding-vertical, form-field-size-border-width])
-            kbq-css-variable(tag-input-size-padding-left);
+            var(--kbq-tag-input-size-padding-left);
     }
 }

package/tags/tag.scss

@@ -7,7 +7,7 @@
 
     max-width: 100%;
 
-    padding: kbq-css-variable(tag-size-padding-vertical) kbq-css-variable(tag-size-padding-horizontal);
+    padding: var(--kbq-tag-size-padding-vertical) var(--kbq-tag-size-padding-horizontal);
 
     border-radius: 4px;
 
@@ -24,7 +24,7 @@
 
         flex-shrink: 0;
 
-        margin-right: kbq-css-variable(tag-size-close-button-margin-right);
+        margin-right: var(--kbq-tag-size-close-button-margin-right);
 
         &:hover {
             cursor: pointer;
@@ -40,11 +40,11 @@
         white-space: nowrap;
         overflow: hidden;
 
-        margin: 0 kbq-css-variable(tag-size-content-gap-horizontal);
+        margin: 0 var(--kbq-tag-size-content-gap-horizontal);
     }
 
     & .kbq-icon_left {
-        margin-left: kbq-css-variable(tag-size-icon-margin-left);
+        margin-left: var(--kbq-tag-size-icon-margin-left);
     }
 }
 

package/textarea/textarea.scss

@@ -19,7 +19,7 @@
 
     box-sizing: border-box;
 
-    padding: kbq-css-variable(textarea-size-padding-vertical) kbq-css-variable(textarea-size-padding-horizontal);
+    padding: var(--kbq-textarea-size-padding-vertical) var(--kbq-textarea-size-padding-horizontal);
 
     -webkit-appearance: none; // Chrome textarea height sizing fix
     vertical-align: bottom; // Chrome textarea height sizing fix
@@ -31,7 +31,7 @@
 
     &.kbq-textarea-resizable {
         resize: vertical;
-        min-height: kbq-css-variable(textarea-size-min-height);
+        min-height: var(--kbq-textarea-size-min-height);
     }
 }
 

package/timepicker/timepicker.scss

@@ -5,7 +5,7 @@
 
 .kbq-timepicker {
     // FIXME: default token doesn't exist
-    padding-right: kbq-css-variable(timepicker-size-padding-right);
+    padding-right: var(--kbq-timepicker-size-padding-right);
 }
 
 .kbq-form-field-type-timepicker {

package/timezone/_timezone-option-theme.scss

@@ -7,15 +7,15 @@
 @mixin kbq-timezone-option-theme() {
     .kbq-timezone-option__offset,
     .kbq-timezone-option__city {
-        color: kbq-css-variable(timezone-option-text);
+        color: var(--kbq-timezone-option-text);
     }
 
     .kbq-timezone-option__cities {
-        color: kbq-css-variable(timezone-option-caption);
+        color: var(--kbq-timezone-option-caption);
     }
 
     .kbq-timezone-select__panel.kbq-select__panel .kbq-optgroup-label {
-        color: kbq-css-variable(timezone-option-optgroup-label);
+        color: var(--kbq-timezone-option-optgroup-label);
     }
 }
 

package/timezone/timezone-option-tokens.scss

@@ -1,6 +1,26 @@
 /* stylelint-disable no-unknown-custom-properties */
 
 .kbq-timezone-select__panel {
+    --kbq-option-size-horizontal-padding: var(--kbq-size-m);
+    --kbq-option-size-height: var(--kbq-size-3xl);
+    --kbq-option-size-border-width: 2px;
+    --kbq-select-size-single-padding-left: var(--kbq-size-m);
+    --kbq-select-size-single-padding-right: var(--kbq-size-xxs);
+    --kbq-select-size-single-padding-vertical: var(--kbq-size-xs);
+    --kbq-select-size-single-content-gap: var(--kbq-size-xxs);
+    --kbq-select-size-multiple-padding-left: var(--kbq-size-xxs);
+    --kbq-select-size-multiple-padding-right: var(--kbq-size-xxs);
+    --kbq-select-size-multiple-padding-vertical: var(--kbq-size-xxs);
+    --kbq-select-size-multiple-content-gap: var(--kbq-size-xxs);
+    --kbq-select-panel-size-border-radius: var(--kbq-size-s);
+    --kbq-select-panel-size-max-height: 256px;
+    --kbq-select-panel-font-default-font-size: var(--kbq-typography-text-normal-font-size);
+    --kbq-select-panel-font-default-line-height: var(--kbq-typography-text-normal-line-height);
+    --kbq-select-panel-font-default-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
+    --kbq-select-panel-font-default-font-weight: var(--kbq-typography-text-normal-font-weight);
+    --kbq-select-panel-font-default-font-family: var(--kbq-typography-text-normal-font-family);
+    --kbq-select-panel-font-default-text-transform: var(--kbq-typography-text-normal-text-transform);
+    --kbq-select-panel-font-default-font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
     --kbq-timezone-option-size-padding: 6px 10px;
     --kbq-timezone-option-size-column-gap: 16px;
     --kbq-timezone-option-size-height: auto;
@@ -41,12 +61,16 @@
 }
 
 :where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-select-panel-dropdown-background: var(--kbq-background-card);
+    --kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup);
     --kbq-timezone-option-text: var(--kbq-foreground-contrast);
     --kbq-timezone-option-caption: var(--kbq-foreground-contrast-secondary);
     --kbq-timezone-option-optgroup-label: var(--kbq-foreground-contrast-secondary);
 }
 
 :where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-select-panel-dropdown-background: var(--kbq-background-card);
+    --kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup);
     --kbq-timezone-option-text: var(--kbq-foreground-contrast);
     --kbq-timezone-option-caption: var(--kbq-foreground-contrast-secondary);
     --kbq-timezone-option-optgroup-label: var(--kbq-foreground-contrast-secondary);

package/timezone/timezone-option.component.scss

@@ -10,8 +10,8 @@
     flex-direction: row;
     align-items: flex-start;
 
-    padding: kbq-css-variable(timezone-option-size-padding);
-    column-gap: kbq-css-variable(timezone-option-size-column-gap);
+    padding: var(--kbq-timezone-option-size-padding);
+    column-gap: var(--kbq-timezone-option-size-column-gap);
 }
 
 .kbq-timezone-option__label {
@@ -29,12 +29,12 @@
 .kbq-timezone-option__cities {
     display: -webkit-box;
     -webkit-box-orient: vertical;
-    max-height: kbq-css-variable(timezone-option-size-max-height);
+    max-height: var(--kbq-timezone-option-size-max-height);
     overflow: hidden;
 }
 
 .kbq-select__panel .kbq-timezone-option {
-    height: kbq-css-variable(timezone-option-size-height);
+    height: var(--kbq-timezone-option-size-height);
 }
 
 @include kbq-timezone-option-theme();

package/timezone/timezone-select.component.scss

@@ -8,7 +8,7 @@
 .kbq-timezone-select__panel.kbq-select__panel {
     .kbq-optgroup-label {
         display: block;
-        padding: kbq-css-variable(timezone-option-size-optgroup-label-padding);
+        padding: var(--kbq-timezone-option-size-optgroup-label-padding);
     }
 }
 

package/toast/_toast-theme.scss

@@ -5,16 +5,16 @@
 @use '../core/styles/common/tokens' as *;
 
 @mixin kbq-toast($style-name) {
-    box-shadow: kbq-css-variable(toast-#{$style-name}-container-shadow);
+    box-shadow: var(--kbq-toast-#{$style-name}-container-shadow);
 
-    background: kbq-css-variable(toast-#{$style-name}-container-background);
+    background: var(--kbq-toast-#{$style-name}-container-background);
 
     .kbq-toast__title {
-        color: kbq-css-variable(toast-#{$style-name}-container-title);
+        color: var(--kbq-toast-#{$style-name}-container-title);
     }
 
     .kbq-toast__text {
-        color: kbq-css-variable(toast-#{$style-name}-container-text);
+        color: var(--kbq-toast-#{$style-name}-container-text);
     }
 }
 

package/toast/toast-container.component.scss

@@ -8,8 +8,8 @@
     flex-direction: column;
     align-items: flex-end;
 
-    margin-top: kbq-css-variable(toast-stack-size-margin-top);
-    margin-right: kbq-css-variable(toast-stack-size-margin-right);
+    margin-top: var(--kbq-toast-stack-size-margin-top);
+    margin-right: var(--kbq-toast-stack-size-margin-right);
 
-    gap: kbq-css-variable(toast-stack-size-gap);
+    gap: var(--kbq-toast-stack-size-gap);
 }