@koobiq/components 17.3.0 → 17.5.0

package/icon/_icon-button-theme.scss

@@ -3,9 +3,7 @@
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-icon-button-theme($theme) {
-    $icon-button: map.get($theme, components, icon-button);
-
+@mixin kbq-icon-button-theme() {
     .kbq-icon-button {
         &:focus {
             outline: none;
@@ -13,147 +11,111 @@
 
         // FIXME: move to unified mixin
         &.kbq-theme {
-            color: kbq-css-variable(icon-button-theme-default, map.get($icon-button, theme, default));
+            color: kbq-css-variable(icon-button-theme-default);
 
             &:active,
             &.kbq-active {
-                color: kbq-css-variable(icon-button-theme-states-active, map.get($icon-button, theme, state-active));
+                color: kbq-css-variable(icon-button-theme-states-active);
             }
 
             &:not(.kbq-disabled):hover {
-                color: kbq-css-variable(icon-button-theme-states-hover, map.get($icon-button, theme, state-hover));
+                color: kbq-css-variable(icon-button-theme-states-hover);
             }
 
             &.kbq-disabled {
-                color: kbq-css-variable(
-                    icon-button-theme-states-disabled,
-                    map.get($icon-button, theme, state-disabled)
-                );
+                color: kbq-css-variable(icon-button-theme-states-disabled);
             }
         }
 
         &.kbq-contrast {
-            color: kbq-css-variable(icon-button-contrast-default, map.get($icon-button, contrast, default));
+            color: kbq-css-variable(icon-button-contrast-default);
 
             &:active,
             &.kbq-active {
-                color: kbq-css-variable(
-                    icon-button-contrast-states-active,
-                    map.get($icon-button, contrast, state-active)
-                );
+                color: kbq-css-variable(icon-button-contrast-states-active);
             }
 
             &:not(.kbq-disabled):hover {
-                color: kbq-css-variable(
-                    icon-button-contrast-states-hover,
-                    map.get($icon-button, contrast, state-hover)
-                );
+                color: kbq-css-variable(icon-button-contrast-states-hover);
             }
 
             &.kbq-disabled {
-                color: kbq-css-variable(
-                    icon-button-contrast-states-disabled,
-                    map.get($icon-button, contrast, state-disabled)
-                );
+                color: kbq-css-variable(icon-button-contrast-states-disabled);
             }
         }
 
         &.kbq-contrast-fade {
-            color: kbq-css-variable(icon-button-fade-contrast-default, map.get($icon-button, fade-contrast, default));
+            color: kbq-css-variable(icon-button-fade-contrast-default);
 
             &:active,
             &.kbq-active {
-                color: kbq-css-variable(
-                    icon-button-fade-contrast-states-active,
-                    map.get($icon-button, fade-contrast, state-active)
-                );
+                color: kbq-css-variable(icon-button-fade-contrast-states-active);
             }
 
             &:not(.kbq-disabled):hover {
-                color: kbq-css-variable(
-                    icon-button-fade-contrast-states-hover,
-                    map.get($icon-button, fade-contrast, state-hover)
-                );
+                color: kbq-css-variable(icon-button-fade-contrast-states-hover);
             }
 
             &.kbq-disabled {
-                color: kbq-css-variable(
-                    icon-button-fade-contrast-states-disabled,
-                    map.get($icon-button, fade-contrast, state-disabled)
-                );
+                color: kbq-css-variable(icon-button-fade-contrast-states-disabled);
             }
         }
 
         &.kbq-error {
-            color: kbq-css-variable(icon-button-error-default, map.get($icon-button, error, default));
+            color: kbq-css-variable(icon-button-error-default);
 
             &:active,
             &.kbq-active {
-                color: kbq-css-variable(icon-button-error-states-active, map.get($icon-button, error, state-active));
+                color: kbq-css-variable(icon-button-error-states-active);
             }
 
             &:not(.kbq-disabled):hover {
-                color: kbq-css-variable(icon-button-error-states-hover, map.get($icon-button, error, state-hover));
+                color: kbq-css-variable(icon-button-error-states-hover);
             }
 
             &.kbq-disabled {
-                color: kbq-css-variable(
-                    icon-button-error-states-disabled,
-                    map.get($icon-button, error, state-disabled)
-                );
+                color: kbq-css-variable(icon-button-error-states-disabled);
             }
         }
 
         &.kbq-success {
-            color: kbq-css-variable(icon-button-success-default, map.get($icon-button, success, default));
+            color: kbq-css-variable(icon-button-success-default);
 
             &:active,
             &.kbq-active {
-                color: kbq-css-variable(
-                    icon-button-success-states-active,
-                    map.get($icon-button, success, state-active)
-                );
+                color: kbq-css-variable(icon-button-success-states-active);
             }
 
             &:not(.kbq-disabled):hover {
-                color: kbq-css-variable(icon-button-success-states-hover, map.get($icon-button, success, state-hover));
+                color: kbq-css-variable(icon-button-success-states-hover);
             }
 
             &.kbq-disabled {
-                color: kbq-css-variable(
-                    icon-button-success-states-disabled,
-                    map.get($icon-button, success, state-disabled)
-                );
+                color: kbq-css-variable(icon-button-success-states-disabled);
             }
         }
 
         &.kbq-warning {
-            color: kbq-css-variable(icon-button-warning-default, map.get($icon-button, warning, default));
+            color: kbq-css-variable(icon-button-warning-default);
 
             &:active,
             &.kbq-active {
-                color: kbq-css-variable(
-                    icon-button-warning-states-active,
-                    map.get($icon-button, warning, state-active)
-                );
+                color: kbq-css-variable(icon-button-warning-states-active);
             }
 
             &:not(.kbq-disabled):hover {
-                color: kbq-css-variable(icon-button-warning-states-hover, map.get($icon-button, warning, state-hover));
+                color: kbq-css-variable(icon-button-warning-states-hover);
             }
 
             &.kbq-disabled {
-                color: kbq-css-variable(
-                    icon-button-warning-states-disabled,
-                    map.get($icon-button, warning, state-disabled)
-                );
+                color: kbq-css-variable(icon-button-warning-states-disabled);
             }
         }
 
         &.cdk-keyboard-focused {
             box-shadow:
-                inset 0 0 0.1px 1px kbq-css-variable(states-focused-color, map.get($theme, states, focused-color)),
-                0 0 0.1px 1px kbq-css-variable(states-focused-color, map.get($theme, states, focused-color));
+                inset 0 0 0.1px 1px kbq-css-variable(states-focused-color),
+                0 0 0.1px 1px kbq-css-variable(states-focused-color);
         }
     }
 }

package/icon/_icon-item-theme.scss

@@ -3,59 +3,56 @@
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-icon-item-style($component, $type, $style-name) {
-    $style: map.get($component, $type, $style-name);
+@mixin kbq-icon-item-style($type, $style-name) {
     $base: icon-item-filled-#{$type}-#{$style-name};
 
-    color: kbq-css-variable(#{$base}-color, map.get($component, $type, $style-name, color));
-    background: kbq-css-variable(#{$base}-background, map.get($component, $type, $style-name, background));
+    color: kbq-css-variable(#{$base}-color);
+    background: kbq-css-variable(#{$base}-background);
 }
 
-@mixin kbq-icon-item-theme($theme) {
-    $icon-item: map.get($theme, components, icon-item);
-
+@mixin kbq-icon-item-theme() {
     .kbq-icon-item.kbq-icon-item_filled {
         &.kbq-icon-item_fade-off {
             &.kbq-theme {
-                @include kbq-icon-item-style($icon-item, fade-off, theme);
+                @include kbq-icon-item-style(fade-off, theme);
             }
 
             &.kbq-contrast {
-                @include kbq-icon-item-style($icon-item, fade-off, contrast);
+                @include kbq-icon-item-style(fade-off, contrast);
             }
 
             &.kbq-error {
-                @include kbq-icon-item-style($icon-item, fade-off, error);
+                @include kbq-icon-item-style(fade-off, error);
             }
 
             &.kbq-warning {
-                @include kbq-icon-item-style($icon-item, fade-off, warning);
+                @include kbq-icon-item-style(fade-off, warning);
             }
 
             &.kbq-success {
-                @include kbq-icon-item-style($icon-item, fade-off, success);
+                @include kbq-icon-item-style(fade-off, success);
             }
         }
 
         &.kbq-icon-item_fade-on {
             &.kbq-theme {
-                @include kbq-icon-item-style($icon-item, fade-on, theme);
+                @include kbq-icon-item-style(fade-on, theme);
             }
 
             &.kbq-contrast {
-                @include kbq-icon-item-style($icon-item, fade-on, contrast);
+                @include kbq-icon-item-style(fade-on, contrast);
             }
 
             &.kbq-error {
-                @include kbq-icon-item-style($icon-item, fade-on, error);
+                @include kbq-icon-item-style(fade-on, error);
             }
 
             &.kbq-warning {
-                @include kbq-icon-item-style($icon-item, fade-on, warning);
+                @include kbq-icon-item-style(fade-on, warning);
             }
 
             &.kbq-success {
-                @include kbq-icon-item-style($icon-item, fade-on, success);
+                @include kbq-icon-item-style(fade-on, success);
             }
         }
     }

package/icon/_icon-theme.scss

@@ -1,34 +1,29 @@
-@use 'sass:map';
-
-@use '../core/styles/theming/theming' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-icon-theme($theme) {
-    $icon: map.get($theme, components, icon);
-
+@mixin kbq-icon-theme() {
     .kbq-icon:not(.kbq-icon-button, .kbq-icon-item) {
         &.kbq-theme {
-            color: kbq-css-variable(icon-theme-color, map.get($icon, theme, color));
+            color: kbq-css-variable(icon-theme-color);
         }
 
         &.kbq-contrast {
-            color: kbq-css-variable(icon-contrast-color, map.get($icon, contrast, color));
+            color: kbq-css-variable(icon-contrast-color);
         }
 
         &.kbq-contrast-fade {
-            color: kbq-css-variable(icon-fade-contrast-color, map.get($icon, fade-contrast, color));
+            color: kbq-css-variable(icon-fade-contrast-color);
         }
 
         &.kbq-error {
-            color: kbq-css-variable(icon-error-color, map.get($icon, error, color));
+            color: kbq-css-variable(icon-error-color);
         }
 
         &.kbq-warning {
-            color: kbq-css-variable(icon-warning-color, map.get($icon, warning, color));
+            color: kbq-css-variable(icon-warning-color);
         }
 
         &.kbq-success {
-            color: kbq-css-variable(icon-success-color, map.get($icon, success, color));
+            color: kbq-css-variable(icon-success-color);
         }
     }
 }

package/icon/icon-button-tokens.scss

@@ -0,0 +1,67 @@
+.kbq-icon-button {
+    --kbq-icon-button-size-horizontal-padding: 8px;
+    --kbq-icon-button-size-left-icon-padding: 6px;
+    --kbq-icon-button-size-normal-horizontal-padding: 0;
+    --kbq-icon-button-size-normal-vertical-padding: 0;
+    --kbq-icon-button-size-small-horizontal-padding: 4px;
+    --kbq-icon-button-size-small-vertical-padding: 4px;
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    // TODO: remove after all settled, should be assigned via css-tokens.css (#DS-2846)
+    --kbq-states-focused-color: hsla(216, 100%, 50%, 100%);
+    --kbq-states-focused-color-error: hsla(7, 97%, 50%, 100%);
+    --kbq-icon-button-theme-default: hsla(216, 100%, 50%, 100%);
+    --kbq-icon-button-theme-states-hover: hsla(216, 100%, 45%, 100%);
+    --kbq-icon-button-theme-states-active: hsla(216, 100%, 40%, 100%);
+    --kbq-icon-button-theme-states-disabled: hsla(229, 15%, 15%, 32%);
+    --kbq-icon-button-contrast-default: hsla(229, 15%, 15%, 100%);
+    --kbq-icon-button-contrast-states-hover: hsla(229, 15%, 10%, 100%);
+    --kbq-icon-button-contrast-states-active: hsla(229, 15%, 10%, 100%);
+    --kbq-icon-button-contrast-states-disabled: hsla(229, 15%, 15%, 32%);
+    --kbq-icon-button-fade-contrast-default: hsla(229, 15%, 60%, 100%);
+    --kbq-icon-button-fade-contrast-states-hover: hsla(229, 15%, 50%, 100%);
+    --kbq-icon-button-fade-contrast-states-active: hsla(229, 15%, 40%, 100%);
+    --kbq-icon-button-fade-contrast-states-disabled: hsla(229, 15%, 15%, 32%);
+    --kbq-icon-button-error-default: hsla(7, 97%, 45%, 100%);
+    --kbq-icon-button-error-states-hover: hsla(7, 97%, 45%, 100%);
+    --kbq-icon-button-error-states-active: hsla(7, 97%, 40%, 100%);
+    --kbq-icon-button-error-states-disabled: hsla(229, 15%, 15%, 32%);
+    --kbq-icon-button-success-default: hsla(104, 64%, 40%, 100%);
+    --kbq-icon-button-success-states-hover: hsla(104, 64%, 40%, 100%);
+    --kbq-icon-button-success-states-active: hsla(104, 64%, 30%, 100%);
+    --kbq-icon-button-success-states-disabled: hsla(229, 15%, 15%, 32%);
+    --kbq-icon-button-warning-default: hsla(38, 100%, 42%, 100%);
+    --kbq-icon-button-warning-states-hover: hsla(38, 100%, 45%, 100%);
+    --kbq-icon-button-warning-states-active: hsla(38, 100%, 42%, 100%);
+    --kbq-icon-button-warning-states-disabled: hsla(229, 15%, 15%, 32%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-states-focused-color: hsla(216, 100%, 50%, 100%);
+    --kbq-states-focused-color-error: hsla(7, 97%, 50%, 100%);
+    --kbq-icon-button-theme-default: hsla(216, 100%, 65%, 100%);
+    --kbq-icon-button-theme-states-hover: hsla(216, 100%, 45%, 100%);
+    --kbq-icon-button-theme-states-active: hsla(216, 100%, 40%, 100%);
+    --kbq-icon-button-theme-states-disabled: hsla(229, 15%, 30%, 100%);
+    --kbq-icon-button-contrast-default: hsla(229, 15%, 80%, 100%);
+    --kbq-icon-button-contrast-states-hover: hsla(229, 15%, 90%, 100%);
+    --kbq-icon-button-contrast-states-active: hsla(229, 15%, 80%, 100%);
+    --kbq-icon-button-contrast-states-disabled: hsla(229, 15%, 30%, 100%);
+    --kbq-icon-button-fade-contrast-default: hsla(229, 15%, 45%, 100%);
+    --kbq-icon-button-fade-contrast-states-hover: hsla(229, 15%, 50%, 100%);
+    --kbq-icon-button-fade-contrast-states-active: hsla(229, 15%, 40%, 100%);
+    --kbq-icon-button-fade-contrast-states-disabled: hsla(229, 15%, 30%, 100%);
+    --kbq-icon-button-error-default: hsla(7, 97%, 60%, 100%);
+    --kbq-icon-button-error-states-hover: hsla(7, 97%, 50%, 100%);
+    --kbq-icon-button-error-states-active: hsla(7, 97%, 40%, 100%);
+    --kbq-icon-button-error-states-disabled: hsla(229, 15%, 30%, 100%);
+    --kbq-icon-button-success-default: hsla(104, 64%, 45%, 100%);
+    --kbq-icon-button-success-states-hover: hsla(104, 64%, 40%, 100%);
+    --kbq-icon-button-success-states-active: hsla(104, 64%, 30%, 100%);
+    --kbq-icon-button-success-states-disabled: hsla(229, 15%, 30%, 100%);
+    --kbq-icon-button-warning-default: hsla(38, 100%, 60%, 100%);
+    --kbq-icon-button-warning-states-hover: hsla(38, 100%, 45%, 100%);
+    --kbq-icon-button-warning-states-active: hsla(38, 100%, 42%, 100%);
+    --kbq-icon-button-warning-states-disabled: hsla(229, 15%, 30%, 100%);
+}

package/icon/icon-button.scss

@@ -3,6 +3,8 @@
 
 @use '../core/styles/common/tokens' as *;
 
+@use './icon-button-theme' as *;
+
 .kbq-icon-button {
     &:not(.kbq-disabled) {
         cursor: pointer;
@@ -16,3 +18,5 @@
             kbq-css-variable(icon-button-size-small-horizontal-padding);
     }
 }
+
+@include kbq-icon-button-theme();

package/icon/icon-item-tokens.scss

@@ -0,0 +1,52 @@
+.kbq-icon-item {
+    --kbq-icon-item-size-normal-horizontal-padding: 8px;
+    --kbq-icon-item-size-normal-vertical-padding: 8px;
+    --kbq-icon-item-size-big-horizontal-padding: 16px;
+    --kbq-icon-item-size-big-vertical-padding: 16px;
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-icon-item-filled-fade-off-theme-color: hsla(0, 0%, 100%, 100%);
+    --kbq-icon-item-filled-fade-off-theme-background: hsla(216, 100%, 50%, 100%);
+    --kbq-icon-item-filled-fade-off-contrast-color: hsla(229, 15%, 100%, 100%);
+    --kbq-icon-item-filled-fade-off-contrast-background: hsla(229, 15%, 25%, 100%);
+    --kbq-icon-item-filled-fade-off-error-color: hsla(0, 0%, 100%, 100%);
+    --kbq-icon-item-filled-fade-off-error-background: hsla(7, 97%, 60%, 100%);
+    --kbq-icon-item-filled-fade-off-warning-color: hsla(0, 0%, 100%, 100%);
+    --kbq-icon-item-filled-fade-off-warning-background: hsla(38, 100%, 50%, 100%);
+    --kbq-icon-item-filled-fade-off-success-color: hsla(0, 0%, 100%, 100%);
+    --kbq-icon-item-filled-fade-off-success-background: hsla(104, 64%, 45%, 100%);
+    --kbq-icon-item-filled-fade-on-theme-color: hsla(216, 100%, 50%, 100%);
+    --kbq-icon-item-filled-fade-on-theme-background: hsla(216, 100%, 85%, 100%);
+    --kbq-icon-item-filled-fade-on-contrast-color: hsla(229, 15%, 15%, 100%);
+    --kbq-icon-item-filled-fade-on-contrast-background: hsla(229, 15%, 92%, 100%);
+    --kbq-icon-item-filled-fade-on-error-color: hsla(7, 97%, 45%, 100%);
+    --kbq-icon-item-filled-fade-on-error-background: hsla(7, 97%, 90%, 100%);
+    --kbq-icon-item-filled-fade-on-warning-color: hsla(38, 100%, 42%, 100%);
+    --kbq-icon-item-filled-fade-on-warning-background: hsla(38, 100%, 85%, 100%);
+    --kbq-icon-item-filled-fade-on-success-color: hsla(104, 64%, 40%, 100%);
+    --kbq-icon-item-filled-fade-on-success-background: hsla(104, 64%, 80%, 100%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-icon-item-filled-fade-off-theme-color: hsla(0, 0%, 100%, 100%);
+    --kbq-icon-item-filled-fade-off-theme-background: hsla(216, 100%, 50%, 100%);
+    --kbq-icon-item-filled-fade-off-contrast-color: hsla(229, 15%, 15%, 100%);
+    --kbq-icon-item-filled-fade-off-contrast-background: hsla(229, 15%, 90%, 100%);
+    --kbq-icon-item-filled-fade-off-error-color: hsla(0, 0%, 100%, 100%);
+    --kbq-icon-item-filled-fade-off-error-background: hsla(7, 97%, 41%, 100%);
+    --kbq-icon-item-filled-fade-off-warning-color: hsla(0, 0%, 100%, 100%);
+    --kbq-icon-item-filled-fade-off-warning-background: hsla(38, 100%, 39%, 100%);
+    --kbq-icon-item-filled-fade-off-success-color: hsla(0, 0%, 100%, 100%);
+    --kbq-icon-item-filled-fade-off-success-background: hsla(104, 64%, 40%, 100%);
+    --kbq-icon-item-filled-fade-on-theme-color: hsla(216, 100%, 65%, 100%);
+    --kbq-icon-item-filled-fade-on-theme-background: hsla(216, 100%, 20%, 100%);
+    --kbq-icon-item-filled-fade-on-contrast-color: hsla(229, 15%, 80%, 100%);
+    --kbq-icon-item-filled-fade-on-contrast-background: hsla(229, 15%, 25%, 100%);
+    --kbq-icon-item-filled-fade-on-error-color: hsla(7, 97%, 60%, 100%);
+    --kbq-icon-item-filled-fade-on-error-background: hsla(7, 97%, 15%, 100%);
+    --kbq-icon-item-filled-fade-on-warning-color: hsla(38, 100%, 60%, 100%);
+    --kbq-icon-item-filled-fade-on-warning-background: hsla(38, 100%, 14%, 100%);
+    --kbq-icon-item-filled-fade-on-success-color: hsla(104, 64%, 45%, 100%);
+    --kbq-icon-item-filled-fade-on-success-background: hsla(104, 64%, 12%, 100%);
+}

package/icon/icon-item.scss

@@ -3,6 +3,8 @@
 
 @use '../core/styles/common/tokens' as *;
 
+@use './icon-item-theme' as *;
+
 .kbq-icon-item {
     box-sizing: border-box;
 
@@ -18,3 +20,5 @@
             kbq-css-variable(icon-item-size-big-horizontal-padding);
     }
 }
+
+@include kbq-icon-item-theme();

package/icon/icon-tokens.scss

@@ -0,0 +1,17 @@
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-icon-theme-color: hsla(216, 100%, 50%, 100%);
+    --kbq-icon-contrast-color: hsla(229, 15%, 15%, 100%);
+    --kbq-icon-fade-contrast-color: hsla(229, 15%, 60%, 100%);
+    --kbq-icon-error-color: hsla(7, 97%, 45%, 100%);
+    --kbq-icon-success-color: hsla(104, 64%, 40%, 100%);
+    --kbq-icon-warning-color: hsla(38, 100%, 42%, 100%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-icon-theme-color: hsla(216, 100%, 65%, 100%);
+    --kbq-icon-contrast-color: hsla(229, 15%, 80%, 100%);
+    --kbq-icon-fade-contrast-color: hsla(229, 15%, 45%, 100%);
+    --kbq-icon-error-color: hsla(7, 97%, 60%, 100%);
+    --kbq-icon-success-color: hsla(104, 64%, 45%, 100%);
+    --kbq-icon-warning-color: hsla(38, 100%, 60%, 100%);
+}

package/icon/icon.scss

@@ -1,6 +1,8 @@
 @use 'sass:meta';
 @use 'sass:map';
 
+@use './icon-theme' as *;
+
 .kbq-icon-rotate_90 {
     transform: rotate(90deg);
 }
@@ -24,3 +26,5 @@
 .kbq-icon-flip-vh {
     transform: scale(-1);
 }
+
+@include kbq-icon-theme();

package/input/_input-theme.scss

@@ -1,10 +1,6 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-input-typography($config) {
+@mixin kbq-input-typography() {
     .kbq-input,
     .kbq-input.kbq-input-password::placeholder {
         @include kbq-typography-css-variables(input, text);

package/input/input-tokens.scss

@@ -0,0 +1,12 @@
+.kbq-input {
+    --kbq-input-size-padding-horizontal: 12px;
+    --kbq-input-size-padding-vertical: 6px;
+    --kbq-input-font-text-font-size: 14px;
+    --kbq-input-font-text-line-height: 20px;
+    --kbq-input-font-text-letter-spacing: -0.006em;
+    --kbq-input-font-text-font-weight: normal;
+    --kbq-input-font-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-input-font-text-text-transform: null;
+    --kbq-input-font-text-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}

package/input/input.scss

@@ -1,11 +1,8 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../core/styles/common/input';
-
-@use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
+@use './input-theme' as *;
+
 .kbq-input {
     @include input.kbq-reset-input();
 
@@ -42,3 +39,5 @@ input.kbq-input:invalid {
 input.kbq-input::placeholder {
     opacity: 1;
 }
+
+@include kbq-input-typography();

package/link/_link-theme.scss

@@ -1,10 +1,8 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-link-geometry($tokens) {
+@use './link-tokens';
+
+@mixin kbq-link-geometry() {
     display: inline;
 
     text-decoration: none;
@@ -67,73 +65,67 @@
     }
 }
 
-@mixin kbq-link-state($component, $state-name: null) {
-    $state: $component;
+@mixin kbq-link-state($state-name: null) {
     $base-path: link;
 
     @if $state-name {
-        $state: map.get($component, $state-name);
         $base-path: link-#{$state-name};
     }
 
-    color: kbq-css-variable(#{$base-path}-text, map.get($state, text));
+    color: kbq-css-variable(#{$base-path}-text);
 
     &.kbq-text-only,
     &.kbq-text-with-icon .kbq-link__text,
     &.kbq-text-with-dot .kbq-link__text {
-        border-bottom-color: kbq-css-variable(#{$base-path}-border-bottom, map.get($state, border-bottom));
+        border-bottom-color: kbq-css-variable(#{$base-path}-border-bottom);
     }
 
     & .kbq-icon {
-        color: kbq-css-variable(#{$base-path}-text, map.get($state, text)) !important;
+        color: kbq-css-variable(#{$base-path}-text) !important;
     }
 }
 
-@mixin kbq-link-theme($theme) {
-    $link: map.get(map.get($theme, components), link);
-
-    $tokens: map.get($theme, tokens);
-
+@mixin kbq-link-theme() {
     .kbq-link {
-        @include kbq-link-geometry($tokens);
+        @include kbq-link-geometry();
 
-        @include kbq-link-state($link);
+        @include kbq-link-state();
 
         transition: color ease-out 300ms;
 
         &:hover {
             transition: color 0ms;
 
-            @include kbq-link-state($link, state-hover);
+            @include kbq-link-state(state-hover);
         }
 
         &:active,
         &.kbq-active {
-            @include kbq-link-state($link, state-active);
+            @include kbq-link-state(state-active);
         }
 
         &.kbq-link_use-visited:not(.kbq-disabled):visited {
-            @include kbq-link-state($link, state-visited);
+            @include kbq-link-state(state-visited);
 
             &:hover {
-                @include kbq-link-state($link, state-visited-hover);
+                @include kbq-link-state(state-visited-hover);
             }
 
             &:active,
             &.kbq-active {
-                @include kbq-link-state($link, state-visited-active);
+                @include kbq-link-state(state-visited-active);
             }
         }
 
         &.cdk-keyboard-focused {
-            outline: kbq-css-variable(link-state-focused-outline, map.get($link, state-focused, outline)) solid;
+            outline: kbq-css-variable(link-state-focused-outline) solid;
         }
 
         &.kbq-disabled {
             cursor: default;
             pointer-events: none;
 
-            @include kbq-link-state($link, state-disabled);
+            @include kbq-link-state(state-disabled);
         }
 
         @media print {
@@ -153,7 +145,7 @@
     }
 }
 
-@mixin kbq-link-typography($config) {
+@mixin kbq-link-typography() {
     .kbq-link {
         @include kbq-typography-css-variables(link, normal);