@koobiq/components 17.6.0 → 17.7.0

package/table/table.module.d.ts

@@ -1,10 +1,9 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./table.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/cdk/a11y";
-import * as i4 from "@angular/cdk/platform";
+import * as i2 from "@angular/cdk/a11y";
+import * as i3 from "@angular/cdk/platform";
 export declare class KbqTableModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTableModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTableModule, [typeof i1.KbqTable, typeof i1.KbqTableCellContent], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.KbqTable, typeof i1.KbqTableCellContent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTableModule, [typeof i1.KbqTable, typeof i1.KbqTableCellContent], [typeof i2.A11yModule, typeof i3.PlatformModule], [typeof i1.KbqTable, typeof i1.KbqTableCellContent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqTableModule>;
 }

package/tabs/_tabs-common.scss

@@ -1,11 +1,5 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
-
 @mixin tab-label {
     position: relative;
 

package/tabs/_tabs-theme.scss

@@ -1,84 +1,67 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-tab-item-state($component, $type, $sub-type, $style-name) {
-    $style: map.get($component, $type, $sub-type, $style-name);
-
+@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, map.get($style, background));
-    color: kbq-css-variable(#{$base}-text-color, map.get($style, text));
+    background: kbq-css-variable(#{$base}-background);
+    color: kbq-css-variable(#{$base}-text-color);
 
     & .kbq-icon {
-        color: kbq-css-variable(#{$base}-icon-color, map.get($style, icon));
+        color: kbq-css-variable(#{$base}-icon-color);
     }
 }
 
-@mixin kbq-tab-item-style($component, $type, $sub-type) {
-    @include kbq-tab-item-state($component, $type, $sub-type, default);
+@mixin kbq-tab-item-style($type, $sub-type) {
+    @include kbq-tab-item-state($type, $sub-type, default);
 
     &:hover:not(.kbq-disabled) {
-        @include kbq-tab-item-state($component, $type, $sub-type, states-hover);
+        @include kbq-tab-item-state($type, $sub-type, states-hover);
     }
 
     &.kbq-selected {
-        @include kbq-tab-item-state($component, $type, $sub-type, states-selected);
+        @include kbq-tab-item-state($type, $sub-type, states-selected);
 
         &:hover {
-            @include kbq-tab-item-state($component, $type, $sub-type, states-selected-hover);
+            @include kbq-tab-item-state($type, $sub-type, states-selected-hover);
         }
     }
 
     &.cdk-keyboard-focused {
-        border-color: kbq-css-variable(
-            tabs-tab-item-#{$type}-#{$sub-type}-states-focused-focus-outline-color,
-            map.get($component, $type, $sub-type, states-focused, border-color)
-        );
+        border-color: kbq-css-variable(tabs-tab-item-#{$type}-#{$sub-type}-states-focused-focus-outline-color);
     }
 
     &.kbq-disabled {
-        @include kbq-tab-item-state($component, $type, $sub-type, states-disabled);
+        @include kbq-tab-item-state($type, $sub-type, states-disabled);
 
         &.kbq-selected {
-            @include kbq-tab-item-state($component, $type, $sub-type, states-selected-disabled);
+            @include kbq-tab-item-state($type, $sub-type, states-selected-disabled);
         }
     }
 }
 
 //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);
-
+@mixin kbq-tabs-theme() {
     .kbq-tab-group {
         &.kbq-tab-group_filled {
             &.kbq-tab-group_on-background {
                 .kbq-tab-header {
-                    background: kbq-css-variable(
-                        tabs-tab-stack-filled-on-background-background,
-                        map.get($tab-stack, filled, on-background, background)
-                    );
+                    background: kbq-css-variable(tabs-tab-stack-filled-on-background-background);
                 }
 
                 & .kbq-tab-label {
-                    @include kbq-tab-item-style($tab-item, filled, on-background);
+                    @include kbq-tab-item-style(filled, on-background);
                 }
             }
 
             &.kbq-tab-group_on-surface {
                 .kbq-tab-header {
-                    background: kbq-css-variable(
-                        tabs-tab-stack-filled-on-surface-background,
-                        map.get($tab-stack, filled, on-surface, background)
-                    );
+                    background: kbq-css-variable(tabs-tab-stack-filled-on-surface-background);
                 }
 
                 // FIXME: need check, tab-group has different subtype
                 & .kbq-tab-label {
-                    @include kbq-tab-item-style($tab-item, filled, on-background);
+                    @include kbq-tab-item-style(filled, on-background);
                 }
             }
         }
@@ -86,27 +69,21 @@
         &.kbq-tab-group_transparent {
             &.kbq-tab-group_on-background {
                 .kbq-tab-header {
-                    background: kbq-css-variable(
-                        tabs-tab-stack-transparent-on-background-background,
-                        map.get($tab-stack, transparent, on-background, background)
-                    );
+                    background: kbq-css-variable(tabs-tab-stack-transparent-on-background-background);
                 }
 
                 & .kbq-tab-label {
-                    @include kbq-tab-item-style($tab-item, transparent, on-background);
+                    @include kbq-tab-item-style(transparent, on-background);
                 }
             }
 
             &.kbq-tab-group_on-surface {
                 .kbq-tab-header {
-                    background: kbq-css-variable(
-                        tabs-tab-stack-transparent-on-surface-background,
-                        map.get($tab-stack, transparent, on-surface, background)
-                    );
+                    background: kbq-css-variable(tabs-tab-stack-transparent-on-surface-background);
                 }
 
                 & .kbq-tab-label {
-                    @include kbq-tab-item-style($tab-item, transparent, on-background);
+                    @include kbq-tab-item-style(transparent, on-background);
                 }
             }
         }
@@ -116,27 +93,21 @@
         &.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,
-                        map.get($tab-stack, filled, on-background, background)
-                    );
+                    background: kbq-css-variable(tabs-tab-stack-filled-on-background-background);
                 }
 
                 & .kbq-tab-link {
-                    @include kbq-tab-item-style($tab-item, filled, on-background);
+                    @include kbq-tab-item-style(filled, on-background);
                 }
             }
 
             &.kbq-tab-nav-bar_on-surface {
                 .kbq-tab-header {
-                    background: kbq-css-variable(
-                        tabs-tab-stack-filled-on-surface-background,
-                        map.get($tab-stack, filled, on-surface, background)
-                    );
+                    background: kbq-css-variable(tabs-tab-stack-filled-on-surface-background);
                 }
 
                 & .kbq-tab-link {
-                    @include kbq-tab-item-style($tab-item, filled, on-background);
+                    @include kbq-tab-item-style(filled, on-background);
                 }
             }
         }
@@ -144,34 +115,28 @@
         &.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,
-                        map.get($tab-stack, transparent, on-background, background)
-                    );
+                    background: kbq-css-variable(tabs-tab-stack-transparent-on-background-background);
                 }
 
                 & .kbq-tab-link {
-                    @include kbq-tab-item-style($tab-item, transparent, on-background);
+                    @include kbq-tab-item-style(transparent, on-background);
                 }
             }
 
             &.kbq-tab-nav-bar_on-surface {
                 .kbq-tab-header {
-                    background: kbq-css-variable(
-                        tabs-tab-stack-transparent-on-surface-background,
-                        map.get($tab-stack, transparent, on-surface, background)
-                    );
+                    background: kbq-css-variable(tabs-tab-stack-transparent-on-surface-background);
                 }
 
                 & .kbq-tab-link {
-                    @include kbq-tab-item-style($tab-item, transparent, on-background);
+                    @include kbq-tab-item-style(transparent, on-background);
                 }
             }
         }
     }
 }
 
-@mixin kbq-tabs-typography($config) {
+@mixin kbq-tabs-typography() {
     .kbq-tab-label,
     .kbq-tab-link {
         @include kbq-typography-css-variables(tabs, text);

package/tabs/tab-group.scss

@@ -1,6 +1,3 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../core/styles/common/layout';
 
 @use '../core/styles/common/tokens' as *;

package/tabs/tab-header.scss

@@ -1,6 +1,3 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../core/styles/common/vendor-prefixes';
 @use 'tabs-common' as *;
 

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

@@ -3,8 +3,6 @@
 
 @use '../tabs-common';
 
-@use '../../core/styles/common/tokens' as *;
-
 .kbq-tab-link {
     vertical-align: top;
     text-decoration: none;

package/tabs/tabs-tokens.scss

@@ -0,0 +1,136 @@
+.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-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-tabs-font-text-text-transform: null;
+    --kbq-tabs-font-text-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+: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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-stack-transparent-on-background-background: transparent;
+    --kbq-tabs-tab-stack-transparent-on-surface-background: transparent;
+}

package/tabs/tabs.module.d.ts

@@ -7,15 +7,14 @@ import * as i5 from "./tab-nav-bar/tab-nav-bar";
 import * as i6 from "./tab-body.component";
 import * as i7 from "./tab-header.component";
 import * as i8 from "./tab-content.directive";
-import * as i9 from "@angular/common";
-import * as i10 from "@angular/cdk/portal";
-import * as i11 from "@angular/cdk/a11y";
-import * as i12 from "@angular/cdk/scrolling";
-import * as i13 from "@koobiq/components/core";
-import * as i14 from "@koobiq/components/icon";
-import * as i15 from "@koobiq/components/tooltip";
+import * as i9 from "@angular/cdk/portal";
+import * as i10 from "@angular/cdk/a11y";
+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";
 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.CommonModule, typeof i10.PortalModule, typeof i11.A11yModule, typeof i12.CdkScrollableModule, typeof i13.KbqCommonModule, typeof i14.KbqIconModule, typeof i15.KbqToolTipModule], [typeof i13.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.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 ɵinj: i0.ɵɵInjectorDeclaration<KbqTabsModule>;
 }

package/tags/_tag-theme.scss

@@ -1,68 +1,59 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/theming/theming' as *;
-@use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-tag-state($component, $type, $style-name) {
-    $style: map.get($component, $type, $style-name);
+@use './tag-tokens';
 
+@mixin kbq-tag-state($type, $style-name) {
     $base: tag-#{$type}-#{$style-name};
 
-    background: kbq-css-variable(#{$base}-background, map.get($style, background));
+    background: kbq-css-variable(#{$base}-background);
 
     & .kbq-icon {
-        color: kbq-css-variable(#{$base}-icon, map.get($style, icon));
+        color: kbq-css-variable(#{$base}-icon);
     }
 
     & .kbq-tag__text {
-        color: kbq-css-variable(#{$base}-text, map.get($style, text));
+        color: kbq-css-variable(#{$base}-text);
     }
 }
 
-@mixin kbq-tag-color($component, $type) {
-    @include kbq-tag-state($component, $type, default);
+@mixin kbq-tag-color($type) {
+    @include kbq-tag-state($type, default);
 
     &:hover,
     &.kbq-hovered {
-        @include kbq-tag-state($component, $type, states-hover);
+        @include kbq-tag-state($type, states-hover);
     }
 
     &.kbq-focused {
-        @include kbq-tag-state($component, $type, states-focus);
+        @include kbq-tag-state($type, states-focus);
 
         box-shadow:
-            inset 0 0 0.1px 1px
-                kbq-css-variable(tag-#{$type}-states-focus-outline, map.get($component, $type, focus, outline)),
-            0 0 0.1px 1px
-                kbq-css-variable(tag-#{$type}-states-focus-outline, map.get($component, $type, focus, outline));
+            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);
     }
 
     &.kbq-disabled {
-        @include kbq-tag-state($component, $type, states-disabled);
+        @include kbq-tag-state($type, states-disabled);
     }
 }
 
-@mixin kbq-tag-theme($theme) {
-    $tag: map.get($theme, components, tag);
-
+@mixin kbq-tag-theme() {
     .kbq-tag {
         &.kbq-theme {
-            @include kbq-tag-color($tag, theme-fade-on);
+            @include kbq-tag-color(theme-fade-on);
         }
 
         &.kbq-contrast-fade {
-            @include kbq-tag-color($tag, contrast-fade-on);
+            @include kbq-tag-color(contrast-fade-on);
         }
 
         &.kbq-error {
-            @include kbq-tag-color($tag, error-fade-on);
+            @include kbq-tag-color(error-fade-on);
         }
     }
 }
 
-@mixin kbq-tag-typography($config) {
+@mixin kbq-tag-typography() {
     .kbq-tag {
         @include kbq-typography-css-variables(tag, default);
     }

package/tags/tag-input-tokens.scss

@@ -0,0 +1,14 @@
+.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-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-tag-input-font-default-text-transform: null;
+    --kbq-tag-input-font-default-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}

package/tags/tag-list.scss

@@ -1,11 +1,5 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-tag-list {
     display: flex;
     flex-direction: row;