@koobiq/components 17.0.0-rc.6 → 17.0.0-rc.8

package/tabs/_tabs-theme.scss

@@ -2,96 +2,111 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
-@mixin kbq-tab-item-state($state) {
-    background: map.get($state, background);
-    color: map.get($state, text);
+@mixin kbq-tab-item-state($component, $type, $sub-type, $style-name) {
+    $style: map.get($component, $type, $sub-type, $style-name);
+
+    $base: tabs-tab-item-#{$type}-#{$sub-type}-#{$style-name};
+
+    background: kbq-css-variable(#{$base}-background, map.get($style, background));
+    color: kbq-css-variable(#{$base}-text, map.get($style, text));
 
     & .kbq-icon {
-        color: map.get($state, icon);
+        color: kbq-css-variable(#{$base}-icon, map.get($style, icon));
     }
 }
 
-@mixin kbq-tab-item-style($tab-item) {
-    @include kbq-tab-item-state(map.get($tab-item, default));
+@mixin kbq-tab-item-style($component, $type, $sub-type) {
+    @include kbq-tab-item-state($component, $type, $sub-type, default);
 
     &:hover:not(.kbq-disabled) {
-        @include kbq-tab-item-state(map.get($tab-item, hover));
+        @include kbq-tab-item-state($component, $type, $sub-type, states-hover);
     }
 
     &.kbq-selected {
-        @include kbq-tab-item-state(map.get($tab-item, selected));
+        @include kbq-tab-item-state($component, $type, $sub-type, states-selected);
 
         &:hover {
-            @include kbq-tab-item-state(map.get($tab-item, selected-hover));
+            @include kbq-tab-item-state($component, $type, $sub-type, states-selected-hover);
         }
     }
 
     &.cdk-keyboard-focused {
-        border-color: map.get(map.get($tab-item, focused), border-color);
+        border-color: kbq-css-variable(
+            tabs-tab-item-#{$type}-#{$sub-type}-states-focused-border-color,
+            map.get($component, $type, $sub-type, states-focused, border-color)
+        );
     }
 
     &.kbq-disabled {
-        @include kbq-tab-item-state(map.get($tab-item, disabled));
+        @include kbq-tab-item-state($component, $type, $sub-type, states-disabled);
 
         &.kbq-selected {
-            @include kbq-tab-item-state(map.get($tab-item, selected-disabled));
+            @include kbq-tab-item-state($component, $type, $sub-type, states-selected-disabled);
         }
     }
 }
 
-@mixin kbq-tab-stack-style($tab-stack) {
-    .kbq-tab-header {
-        background: map.get($tab-stack, background);
-    }
-}
-
 //noinspection ALL
 @mixin kbq-tabs-theme($theme) {
     $tab-item: map.get(map.get($theme, components), tab-item);
-
     $tab-stack: map.get(map.get($theme, components), tab-stack);
 
-    $tab-stack_filled: map.get($tab-stack, filled);
-    $tab-item_filled: map.get($tab-item, filled);
-
-    $tab-stack_transparent: map.get($tab-stack, transparent);
-    $tab-item_transparent: map.get($tab-item, transparent);
-
     .kbq-tab-group {
         &.kbq-tab-group_filled {
             &.kbq-tab-group_on-background {
-                @include kbq-tab-stack-style(map.get($tab-stack_filled, on-background));
+                .kbq-tab-header {
+                    background: kbq-css-variable(
+                        tabs-tab-stack-filled-on-background-background,
+                        map.get($tab-stack, filled, on-background, background)
+                    );
+                }
 
                 & .kbq-tab-label {
-                    @include kbq-tab-item-style(map.get($tab-item_filled, on-background));
+                    @include kbq-tab-item-style($tab-item, filled, on-background);
                 }
             }
 
             &.kbq-tab-group_on-surface {
-                @include kbq-tab-stack-style(map.get($tab-stack_filled, on-surface));
+                .kbq-tab-header {
+                    background: kbq-css-variable(
+                        tabs-tab-stack-filled-on-surface-background,
+                        map.get($tab-stack, filled, on-surface, background)
+                    );
+                }
 
                 & .kbq-tab-label {
-                    @include kbq-tab-item-style(map.get($tab-item_filled, on-background));
+                    @include kbq-tab-item-style($tab-item, filled, on-background);
                 }
             }
         }
 
         &.kbq-tab-group_transparent {
             &.kbq-tab-group_on-background {
-                @include kbq-tab-stack-style(map.get($tab-stack_transparent, on-background));
+                .kbq-tab-header {
+                    background: kbq-css-variable(
+                        tabs-tab-stack-transparent-on-background-background,
+                        map.get($tab-stack, transparent, on-background, background)
+                    );
+                }
 
                 & .kbq-tab-label {
-                    @include kbq-tab-item-style(map.get($tab-item_transparent, on-background));
+                    @include kbq-tab-item-style($tab-item, transparent, on-background);
                 }
             }
 
             &.kbq-tab-group_on-surface {
-                @include kbq-tab-stack-style(map.get($tab-stack_transparent, on-surface));
+                .kbq-tab-header {
+                    background: kbq-css-variable(
+                        tabs-tab-stack-transparent-on-surface-background,
+                        map.get($tab-stack, transparent, on-surface, background)
+                    );
+                }
 
                 & .kbq-tab-label {
-                    @include kbq-tab-item-style(map.get($tab-item_transparent, on-background));
+                    @include kbq-tab-item-style($tab-item, transparent, on-background);
                 }
             }
         }
@@ -100,36 +115,56 @@
     .kbq-tab-nav-bar {
         &.kbq-tab-nav-bar_filled {
             &.kbq-tab-nav-bar_on-background {
-                @include kbq-tab-stack-style(map.get($tab-stack_filled, on-background));
+                .kbq-tab-header {
+                    background: kbq-css-variable(
+                        tabs-tab-stack-filled-on-background-background,
+                        map.get($tab-stack, filled, on-background, background)
+                    );
+                }
 
                 & .kbq-tab-link {
-                    @include kbq-tab-item-style(map.get($tab-item_filled, on-background));
+                    @include kbq-tab-item-style($tab-item, filled, on-background);
                 }
             }
 
             &.kbq-tab-nav-bar_on-surface {
-                @include kbq-tab-stack-style(map.get($tab-stack_filled, on-surface));
+                .kbq-tab-header {
+                    background: kbq-css-variable(
+                        tabs-tab-stack-filled-on-surface-background,
+                        map.get($tab-stack, filled, on-surface, background)
+                    );
+                }
 
                 & .kbq-tab-link {
-                    @include kbq-tab-item-style(map.get($tab-item_filled, on-background));
+                    @include kbq-tab-item-style($tab-item, filled, on-background);
                 }
             }
         }
 
         &.kbq-tab-nav-bar_transparent {
             &.kbq-tab-nav-bar_on-background {
-                @include kbq-tab-stack-style(map.get($tab-stack_transparent, on-background));
+                .kbq-tab-header {
+                    background: kbq-css-variable(
+                        tabs-tab-stack-transparent-on-background-background,
+                        map.get($tab-stack, transparent, on-background, background)
+                    );
+                }
 
                 & .kbq-tab-link {
-                    @include kbq-tab-item-style(map.get($tab-item_transparent, on-background));
+                    @include kbq-tab-item-style($tab-item, transparent, on-background);
                 }
             }
 
             &.kbq-tab-nav-bar_on-surface {
-                @include kbq-tab-stack-style(map.get($tab-stack_transparent, on-surface));
+                .kbq-tab-header {
+                    background: kbq-css-variable(
+                        tabs-tab-stack-transparent-on-surface-background,
+                        map.get($tab-stack, transparent, on-surface, background)
+                    );
+                }
 
                 & .kbq-tab-link {
-                    @include kbq-tab-item-style(map.get($tab-item_transparent, on-background));
+                    @include kbq-tab-item-style($tab-item, transparent, on-background);
                 }
             }
         }
@@ -137,10 +172,8 @@
 }
 
 @mixin kbq-tabs-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-tab-label,
     .kbq-tab-link {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, tabs-font-text));
+        @include kbq-typography-css-variables(tabs, text);
     }
 }

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

@@ -43,6 +43,7 @@ export declare class KbqTabGroupBase {
 }
 /** @docs-private */
 export declare const KbqTabGroupMixinBase: CanDisableCtor & typeof KbqTabGroupBase;
+export type KbqTabSelectBy = string | number | ((tabs: KbqTab[]) => KbqTab | null);
 /**
  * Tab-group component.  Supports basic tab pairs (label + content) and includes
  * keyboard navigation.
@@ -64,20 +65,23 @@ export declare class KbqTabGroup extends KbqTabGroupMixinBase implements AfterCo
     get selectedIndex(): number | null;
     set selectedIndex(value: number | null);
     private _selectedIndex;
+    get activeTab(): KbqTab | null;
+    set activeTab(value: KbqTabSelectBy | null);
     /** Position of the tab header. */
     headerPosition: KbqTabHeaderPosition;
     /** Duration for the tab animation. Must be a valid CSS value (e.g. 600ms). */
     animationDuration: string;
     /** Output to enable support for two-way binding on `[(selectedIndex)]` */
     readonly selectedIndexChange: EventEmitter<number>;
+    /** Event emitted when the tab selection has changed. */
+    readonly activeTabChange: EventEmitter<string | number | KbqTab>;
     /** Event emitted when focus has changed within a tab group. */
     readonly focusChange: EventEmitter<KbqTabChangeEvent>;
     /** Event emitted when the body animation has completed */
     readonly animationDone: EventEmitter<void>;
     /** Event emitted when the tab selection has changed. */
     readonly selectedTabChange: EventEmitter<KbqTabChangeEvent>;
-    /** The tab index that should be selected after the content has been checked. */
-    private indexToSelect;
+    private attributeToSelectBy;
     /** Snapshot of the height of the tab body wrapper before another tab is activated. */
     private tabBodyWrapperHeight;
     /** Subscription to tabs being added/removed. */
@@ -114,6 +118,7 @@ export declare class KbqTabGroup extends KbqTabGroupMixinBase implements AfterCo
     handleClick(tab: KbqTab, tabHeader: KbqTabHeader, index: number): void;
     /** Retrieves the tabindex for the tab. */
     getTabIndex(tab: KbqTab, index: number): number | null;
+    onSelectFocusedIndex($event: number): void;
     private checkOverflow;
     private createChangeEvent;
     /**
@@ -126,6 +131,7 @@ export declare class KbqTabGroup extends KbqTabGroupMixinBase implements AfterCo
     private subscribeToResize;
     /** 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 ɵ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; }; "headerPosition": { "alias": "headerPosition"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; }, { "selectedIndexChange": "selectedIndexChange"; "focusChange": "focusChange"; "animationDone": "animationDone"; "selectedTabChange": "selectedTabChange"; }, ["tabs"], never, false, never>;
+    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

@@ -3,11 +3,9 @@
 
 @use '../core/styles/common/layout';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-tab-group {
     display: flex;
     flex-direction: column;
@@ -24,10 +22,7 @@ $tokens: meta.module-variables(tokens) !default;
     flex-direction: row;
 
     .kbq-tab-list__content {
-        gap: var(
-            --kbq-tabs-size-tab-stack-vertical-content-gap-vartical,
-            map.get($tokens, tabs-size-tab-stack-vertical-content-gap-vertical)
-        ) 0;
+        gap: kbq-css-variable(tabs-size-tab-stack-vertical-content-gap-vertical) 0;
     }
 
     & .kbq-tab-header__content {

package/tabs/tab-header.scss

@@ -4,10 +4,6 @@
 @use '../core/styles/common/vendor-prefixes';
 @use 'tabs-common' as *;
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
 
 .kbq-tab-header {
     display: flex;

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

@@ -3,11 +3,9 @@
 
 @use '../tabs-common';
 
-@use '../../core/styles/tokens';
+@use '../../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-tab-link {
     vertical-align: top;
     text-decoration: none;
@@ -38,9 +36,6 @@ $tokens: meta.module-variables(tokens) !default;
     &.kbq-tab-group_vertical {
         flex-direction: column;
         flex-grow: 0;
-        gap: var(
-            --kbq-tabs-size-tab-stack-vertical-content-gap-vartical,
-            map.get($tokens, tabs-size-tab-stack-vertical-content-gap-vertical)
-        ) 0;
+        gap: kbq-css-variable(tabs-size-tab-stack-vertical-content-gap-vertical) 0;
     }
 }

package/tags/_tag-theme.scss

@@ -3,74 +3,71 @@
 
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
-@mixin kbq-tag-state($state) {
-    background: map.get($state, background);
+@mixin kbq-tag-state($component, $type, $style-name) {
+    $style: map.get($component, $type, $style-name);
+
+    $base: tag-#{$type}-#{$style-name};
+
+    background: kbq-css-variable(#{$base}-background, map.get($style, background));
 
     & .kbq-icon {
-        color: map.get($state, icon);
+        color: kbq-css-variable(#{$base}-icon, map.get($style, icon));
     }
 
     & .kbq-tag__text {
-        color: map.get($state, text);
+        color: kbq-css-variable(#{$base}-text, map.get($style, text));
     }
 }
 
-@mixin kbq-tag-color($tag) {
-    $default: map.get($tag, default);
-
-    @include kbq-tag-state($default);
+@mixin kbq-tag-color($component, $type) {
+    @include kbq-tag-state($component, $type, default);
 
     &:hover,
     &.kbq-hovered {
-        $hover: map.get($tag, hover);
-
-        @include kbq-tag-state($hover);
+        @include kbq-tag-state($component, $type, hover);
     }
 
     &.kbq-focused {
-        $focus: map.get($tag, focus);
+        @include kbq-tag-state($component, $type, focus);
 
-        @include kbq-tag-state($focus);
-
-        box-shadow: inset 0 0 0 1px map.get($focus, outline), 0 0 0 1px map.get($focus, outline);
+        box-shadow:
+            inset 0 0 0.1px 1px kbq-css-variable(tag-#{$type}-focus-outline, map.get($component, $type, focus, outline)),
+            0 0 0.1px 1px kbq-css-variable(tag-#{$type}-focus-outline, map.get($component, $type, focus, outline));
     }
 
     &.kbq-disabled {
-        $disabled: map.get($tag, disabled);
-
-        @include kbq-tag-state($disabled);
+        @include kbq-tag-state($component, $type, disabled);
     }
 }
 
 @mixin kbq-tag-theme($theme) {
-    $tag: map.get(map.get($theme, components), tag);
+    $tag: map.get($theme, components, tag);
 
     .kbq-tag {
         &.kbq-theme {
-            @include kbq-tag-color(map.get($tag, theme-fade-on));
+            @include kbq-tag-color($tag, theme-fade-on);
         }
 
         &.kbq-contrast-fade {
-            @include kbq-tag-color(map.get($tag, contrast-fade-on));
+            @include kbq-tag-color($tag, contrast-fade-on);
         }
 
         &.kbq-error {
-            @include kbq-tag-color(map.get($tag, error-fade-on));
+            @include kbq-tag-color($tag, error-fade-on);
         }
     }
 }
 
 @mixin kbq-tag-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-tag {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, tag-font-default));
+        @include kbq-typography-css-variables(tag, default);
     }
 
     .kbq-tag-input {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, tag-input-font-default));
+        @include kbq-typography-css-variables(tag-input, default);
     }
 }
 

package/tags/tag-default-options.d.ts

@@ -7,6 +7,7 @@ export interface KbqTagsDefaultOptions {
     separators?: {
         [key: number]: KbqTagSeparator;
     };
+    addOnPaste?: boolean;
 }
 /** Injection token to be used to override the default options for the chips module. */
 export declare const KBQ_TAGS_DEFAULT_OPTIONS: InjectionToken<KbqTagsDefaultOptions>;

package/tags/tag-input.d.ts

@@ -56,6 +56,12 @@ export declare class KbqTagInput implements KbqTagTextControl, OnChanges {
     get addOnBlur(): boolean;
     set addOnBlur(value: boolean);
     private _addOnBlur;
+    /**
+     * Whether the tagEnd event will be emitted when the text pasted.
+     */
+    get addOnPaste(): boolean;
+    set addOnPaste(value: boolean);
+    private _addOnPaste;
     /** Whether the input is disabled. */
     get disabled(): boolean;
     set disabled(value: boolean);
@@ -88,5 +94,5 @@ export declare class KbqTagInput implements KbqTagTextControl, OnChanges {
     /** Checks whether a keycode is one of the configured separators. */
     private isSeparatorKey;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagInput, [null, null, null, { optional: true; self: true; }, { optional: true; self: true; }, { optional: true; self: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagInput, "input[kbqTagInputFor]", ["kbqTagInput", "kbqTagInputFor"], { "separatorKeyCodes": { "alias": "kbqTagInputSeparatorKeyCodes"; "required": false; }; "distinct": { "alias": "distinct"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tagList": { "alias": "kbqTagInputFor"; "required": false; }; "addOnBlur": { "alias": "kbqTagInputAddOnBlur"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "tagEnd": "kbqTagInputTokenEnd"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagInput, "input[kbqTagInputFor]", ["kbqTagInput", "kbqTagInputFor"], { "separatorKeyCodes": { "alias": "kbqTagInputSeparatorKeyCodes"; "required": false; }; "distinct": { "alias": "distinct"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tagList": { "alias": "kbqTagInputFor"; "required": false; }; "addOnBlur": { "alias": "kbqTagInputAddOnBlur"; "required": false; }; "addOnPaste": { "alias": "kbqTagInputAddOnPaste"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "tagEnd": "kbqTagInputTokenEnd"; }, never, never, false, never>;
 }

package/tags/tag-list.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -26,8 +27,8 @@ $tokens: meta.module-variables(tokens) !default;
 
     min-height: unset;
 
-    padding-top: var(--kbq-tag-size-padding-vertical, map.get($tokens, tag-size-padding-vertical));
-    padding-bottom: var(--kbq-tag-size-padding-vertical, map.get($tokens, tag-size-padding-vertical));
+    padding-top: kbq-css-variable(tag-size-padding-vertical);
+    padding-bottom: kbq-css-variable(tag-size-padding-vertical);
     padding-left: 4px;
     padding-right: unset;
 }
@@ -41,7 +42,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     min-width: 0;
 
-    gap: var(--kbq-tag-list-size-content-gap, map.get($tokens, tag-list-size-content-gap));
+    gap: kbq-css-variable(tag-list-size-content-gap);
 
     & .kbq-tag-input {
         max-width: 100%;
@@ -66,11 +67,11 @@ $tokens: meta.module-variables(tokens) !default;
                 var(--kbq-tag-input-size-padding-vertical, #{$padding-vertical}) -
                 var(--kbq-form-field-size-border-width, $border-width)
             )
-            var(--kbq-tag-input-size-padding-right, map.get($tokens, tag-input-size-padding-right))
+            kbq-css-variable(tag-input-size-padding-right)
             calc(
                 var(--kbq-tag-input-size-padding-vertical, #{$padding-vertical}) -
                 var(--kbq-form-field-size-border-width, $border-width)
             )
-            var(--kbq-tag-input-size-padding-left, map.get($tokens, tag-input-size-padding-left));
+            kbq-css-variable(tag-input-size-padding-left);
     }
 }

package/tags/tag.scss

@@ -1,11 +1,9 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-tag {
     position: relative;
 
@@ -14,8 +12,8 @@ $tokens: meta.module-variables(tokens) !default;
     max-width: 100%;
 
     padding:
-        var(--kbq-tag-size-padding-vertical, map.get($tokens, tag-size-padding-vertical))
-        var(--kbq-tag-size-padding-horizontal, map.get($tokens, tag-size-padding-horizontal));
+        kbq-css-variable(tag-size-padding-vertical)
+        kbq-css-variable(tag-size-padding-horizontal);
 
     border-radius: 4px;
 
@@ -32,8 +30,7 @@ $tokens: meta.module-variables(tokens) !default;
 
         flex-shrink: 0;
 
-        margin-right:
-            var(--kbq-tag-size-close-button-margin-right, map.get($tokens, tag-size-close-button-margin-right));
+        margin-right: kbq-css-variable(tag-size-close-button-margin-right);
 
         &:hover {
             cursor: pointer;
@@ -49,11 +46,11 @@ $tokens: meta.module-variables(tokens) !default;
         white-space: nowrap;
         overflow: hidden;
 
-        margin: 0 var(--kbq-tag-size-content-gap-horizontal, map.get($tokens, tag-size-content-gap-horizontal));
+        margin: 0 kbq-css-variable(tag-size-content-gap-horizontal);
     }
 
     & .kbq-icon_left {
-        margin-left: var(--kbq-tag-size-icon-margin-left, map.get($tokens, tag-size-icon-margin-left));
+        margin-left: kbq-css-variable(tag-size-icon-margin-left);
     }
 }
 

package/textarea/_textarea-theme.scss

@@ -1,13 +1,11 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
 @mixin kbq-textarea-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-textarea {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, textarea-font-default));
+        @include kbq-typography-css-variables(textarea, default);
     }
 }

package/textarea/textarea.scss

@@ -1,11 +1,9 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-textarea {
     display: inline-block;
 
@@ -22,8 +20,8 @@ $tokens: meta.module-variables(tokens) !default;
     box-sizing: border-box;
 
     padding:
-        var(--kbq-textarea-size-padding-vertical, map.get($tokens, textarea-size-padding-vertical))
-        var(--kbq-textarea-size-padding-horizontal, map.get($tokens, textarea-size-padding-horizontal));
+        kbq-css-variable(textarea-size-padding-vertical)
+        kbq-css-variable(textarea-size-padding-horizontal);
 
     -webkit-appearance: none; // Chrome textarea height sizing fix
     vertical-align: bottom; // Chrome textarea height sizing fix
@@ -35,7 +33,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     &.kbq-textarea-resizable {
         resize: vertical;
-        min-height: var(--kbq-textarea-size-min-height, map.get($tokens, textarea-size-min-height));
+        min-height: kbq-css-variable(textarea-size-min-height);
     }
 }
 

package/timepicker/timepicker.scss

@@ -1,16 +1,11 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-timepicker {
-    padding-right: calc(
-        var(--kbq-timepicker-size-padding-right, #{map.get($tokens, timepicker-size-padding-right)}) -
-        var(--kbq-form-field-size-border-width, #{map.get($tokens, form-field-size-border-width)})
-    );
+    padding-right: kbq-css-variable(timepicker-size-padding-right);
 }
 
 .kbq-form-field-type-timepicker {