@koobiq/components 16.0.0-beta.8 → 16.0.0-beta.9

package/badge/_badge-theme.scss

@@ -4,24 +4,29 @@
 @use '../core/styles/typography/typography-utils' as *;
 
 
-@mixin kbq-badge-filled-color($badge) {
+@mixin kbq-badge-style($badge) {
     color: map.get($badge, color);
     background: map.get($badge, background);
-    border: transparent;
 
     & .kbq-badge-caption {
         color: map.get($badge, caption);
     }
+
+    & .kbq-icon {
+        color: map.get($badge, icon) !important;
+    }
+}
+
+@mixin kbq-badge-filled-color($badge) {
+    @include kbq-badge-style($badge);
+
+    border: transparent;
 }
 
 @mixin kbq-badge-outline-color($badge) {
-    color: map.get($badge, color);
-    border-color: map.get($badge, border);
-    background: map.get($badge, background);
+    @include kbq-badge-style($badge);
 
-    & .kbq-badge-caption {
-        color: map.get($badge, caption);
-    }
+    border-color: map.get($badge, border);
 }
 
 @mixin kbq-badge-theme($theme) {

package/badge/badge.component.d.ts

@@ -1,4 +1,5 @@
-import { KbqIconItem } from '@koobiq/components/icon';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, QueryList, Renderer2 } from '@angular/core';
+import { KbqIcon, KbqIconItem } from '@koobiq/components/icon';
 import * as i0 from "@angular/core";
 export declare enum KbqBadgeColors {
     FadeContrast = "fade-contrast",
@@ -14,6 +15,23 @@ export declare class KbqBadgeCaption {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqBadgeCaption, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqBadgeCaption, "[kbq-badge-caption]", never, {}, {}, never, never, false, never>;
 }
+export declare const getNodesWithoutComments: (nodes: NodeList) => Node[];
+export declare const leftIconClassName = "kbq-icon_left";
+export declare const rightIconClassName = "kbq-icon_right";
+export declare const badgeLeftIconClassName = "kbq-badge-icon_left";
+export declare const badgeRightIconClassName = "kbq-badge-icon_right";
+export declare class KbqBadgeCssStyler implements AfterContentInit {
+    private renderer;
+    private cdr;
+    icons: QueryList<KbqIcon>;
+    nativeElement: HTMLElement;
+    isIconButton: boolean;
+    constructor(elementRef: ElementRef, renderer: Renderer2, cdr: ChangeDetectorRef);
+    ngAfterContentInit(): void;
+    updateClassModifierForIcons(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqBadgeCssStyler, [null, null, { skipSelf: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqBadgeCssStyler, "kbq-badge", never, {}, {}, ["icons"], never, false, never>;
+}
 export declare class KbqBadge {
     iconItem: KbqIconItem;
     compact: boolean;

package/badge/badge.component.scss

@@ -34,6 +34,20 @@ $tokens: meta.module-variables(tokens) !default;
             var(--kbq-badge-size-normal-content-padding, map.get($tokens, badge-size-normal-content-padding));
     }
 
+    & .kbq-icon_left {
+        margin-right: var(
+            --kbq-badge-size-normal-icon-left-margin-right,
+            map.get($tokens, badge-size-normal-icon-left-margin-right)
+        );
+    }
+
+    & .kbq-icon_right {
+        margin-left: var(
+            --kbq-badge-size-normal-icon-right-margin-left,
+            map.get($tokens, badge-size-normal-icon-right-margin-left)
+        );
+    }
+
     &.kbq-badge_compact {
         padding:
             var(--kbq-badge-size-compact-vertical-padding, map.get($tokens, badge-size-compact-vertical-padding))
@@ -51,5 +65,19 @@ $tokens: meta.module-variables(tokens) !default;
             padding-left:
                 var(--kbq-badge-size-compact-content-padding, map.get($tokens, badge-size-compact-content-padding));
         }
+
+        & .kbq-icon_left {
+            margin-right: var(
+                --kbq-badge-size-compact-icon-left-margin-right,
+                map.get($tokens, badge-size-compact-icon-left-margin-right)
+            );
+        }
+
+        & .kbq-icon_right {
+            margin-left: var(
+                --kbq-badge-size-compact-icon-right-margin-left,
+                map.get($tokens, badge-size-compact-icon-right-margin-left)
+            );
+        }
     }
 }

package/badge/badge.module.d.ts

@@ -5,6 +5,6 @@ import * as i3 from "@angular/cdk/a11y";
 import * as i4 from "@angular/cdk/platform";
 export declare class KbqBadgeModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqBadgeModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqBadgeModule, [typeof i1.KbqBadge, typeof i1.KbqBadgeCaption], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.KbqBadge, typeof i1.KbqBadgeCaption]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqBadgeModule, [typeof i1.KbqBadge, typeof i1.KbqBadgeCaption, typeof i1.KbqBadgeCssStyler], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.KbqBadge, typeof i1.KbqBadgeCaption, typeof i1.KbqBadgeCssStyler]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqBadgeModule>;
 }

package/core/styles/_koobiq-theme.scss

@@ -21,6 +21,8 @@
 @use '../../form-field/form-field-theme' as *;
 @use '../../form-field/hint-theme' as *;
 @use '../../icon/icon-theme' as *;
+@use '../../icon/icon-item-theme' as *;
+@use '../../icon/icon-button-theme' as *;
 @use '../../input/input-theme' as *;
 @use '../../link/link-theme' as *;
 @use '../../list/list-theme' as *;

package/core/styles/theming/_components-theming.scss

@@ -31,44 +31,52 @@
                 success: (
                     color: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-success-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-success-background'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-success-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-success-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-success-icon')
                 ),
                 warning: (
                     color: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-warning-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-warning-background'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-warning-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-warning-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-warning-icon')
                 ),
                 error: (
                     color: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-error-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-error-background'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-error-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-error-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-filled-fade-off-error-icon')
                 )
             ),
             fade-on: (
                 theme: (
                     color: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-theme-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-theme-background'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-theme-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-theme-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-theme-icon')
                 ),
                 contrast: (
                     color: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-contrast-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-contrast-background'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-contrast-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-contrast-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-contrast-icon')
                 ),
                 success: (
                     color: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-success-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-success-background'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-success-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-success-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-success-icon')
                 ),
                 warning: (
                     color: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-warning-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-warning-background'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-warning-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-warning-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-warning-icon')
                 ),
                 error: (
                     color: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-error-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-error-background'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-error-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-error-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-filled-fade-on-error-icon')
                 )
             )
         ),
@@ -78,31 +86,36 @@
                     color: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-theme-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-theme-background'),
                     border: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-theme-border'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-theme-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-theme-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-theme-icon')
                 ),
                 contrast: (
                     color: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-contrast-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-contrast-background'),
                     border: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-contrast-border'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-contrast-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-contrast-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-contrast-icon')
                 ),
                 success: (
                     color: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-success-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-success-background'),
                     border: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-success-border'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-success-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-success-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-success-icon')
                 ),
                 warning: (
                     color: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-warning-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-warning-background'),
                     border: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-warning-border'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-warning-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-warning-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-warning-icon')
                 ),
                 error: (
                     color: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-error-color'),
                     background: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-error-background'),
                     border: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-error-border'),
-                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-error-caption')
+                    caption: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-error-caption'),
+                    icon: map-get($tokens, 'badge-#{$scheme}-outline-fade-on-error-icon')
                 )
             )
         )
@@ -819,23 +832,48 @@
             state-hover: map-get($tokens, 'icon-button-#{$scheme}-success-states-hover'),
             state-active: map-get($tokens, 'icon-button-#{$scheme}-success-states-active'),
             state-disabled: map-get($tokens, 'icon-button-#{$scheme}-success-states-disabled')
+        ),
+        warning: (
+            default: map-get($tokens, 'icon-button-#{$scheme}-warning-default'),
+            state-hover: map-get($tokens, 'icon-button-#{$scheme}-warning-states-hover'),
+            state-active: map-get($tokens, 'icon-button-#{$scheme}-warning-states-active'),
+            state-disabled: map-get($tokens, 'icon-button-#{$scheme}-warning-states-disabled')
         )
     );
 
-    $link: (
-        text: map-get($tokens, 'link-#{$scheme}-text'),
-        border-bottom: map-get($tokens, 'link-#{$scheme}-border-bottom'),
-
-        state-visited-text: map-get($tokens, 'link-#{$scheme}-state-visited-text'),
-        state-visited-border-bottom: map-get($tokens, 'link-#{$scheme}-state-visited-border-bottom'),
-
-        state-hover-text: map-get($tokens, 'link-#{$scheme}-state-hover-text'),
-        state-hover-border-bottom: map-get($tokens, 'link-#{$scheme}-state-hover-border-bottom'),
-
-        state-active-text: map-get($tokens, 'link-#{$scheme}-state-active'),
-        state-active-border-bottom: map-get($tokens, 'link-#{$scheme}-state-active-border-bottom'),
 
-        state-focused-outline: map-get($tokens, 'link-#{$scheme}-state-focused-outline')
+    $link: (
+        default: (
+            text: map-get($tokens, 'link-#{$scheme}-text'),
+            border-bottom: map-get($tokens, 'link-#{$scheme}-border-bottom')
+        ),
+        visited: (
+            text: map-get($tokens, 'link-#{$scheme}-state-visited-text'),
+            border-bottom: map-get($tokens, 'link-#{$scheme}-state-visited-border-bottom')
+        ),
+        visited-hover: (
+            text: map-get($tokens, 'link-#{$scheme}-state-visited-hover-text'),
+            border-bottom: map-get($tokens, 'link-#{$scheme}-state-visited-hover-border-bottom')
+        ),
+        visited-active: (
+            text: map-get($tokens, 'link-#{$scheme}-state-visited-active-text'),
+            border-bottom: map-get($tokens, 'link-#{$scheme}-state-visited-active-border-bottom')
+        ),
+        hover: (
+            text: map-get($tokens, 'link-#{$scheme}-state-hover-text'),
+            border-bottom: map-get($tokens, 'link-#{$scheme}-state-hover-border-bottom')
+        ),
+        active: (
+            text: map-get($tokens, 'link-#{$scheme}-state-active-text'),
+            border-bottom: map-get($tokens, 'link-#{$scheme}-state-active-border-bottom')
+        ),
+        focused: (
+            outline: map-get($tokens, 'link-#{$scheme}-state-focused-outline')
+        ),
+        disabled: (
+            text: map-get($tokens, 'link-#{$scheme}-state-disabled-text'),
+            border-bottom: map-get($tokens, 'link-#{$scheme}-state-disabled-border-bottom')
+        )
     );
 
     $list-item: (
@@ -1226,6 +1264,11 @@
         )
     );
 
+    $select-panel: (
+        background: map-get($tokens, 'select-panel-#{$scheme}-dropdown-background'),
+        shadow: map-get($tokens, 'select-panel-#{$scheme}-dropdown-shadow')
+    );
+
     $sidepanel: (
         box-shadow: map-get($tokens, 'sidepanel-#{$scheme}-container-box-shadow'),
         background: map-get($tokens, 'sidepanel-#{$scheme}-container-background'),
@@ -1753,6 +1796,7 @@
         progress-spinner: $progress-spinner,
         radio: $radio,
         risk-level: $risk-level,
+        select-panel: $select-panel,
         sidepanel: $sidepanel,
         tab-item: $tab-item,
         tab-stack: $tab-stack,

package/core/styles/theming/_theming.scss

@@ -46,52 +46,205 @@
     }
 }
 
-@function _theme_states($tokens, $scheme) {
-    @return (
-        focused-color: map.get($tokens, '#{$scheme}-states-focused-color'),
-        selected-color: map.get($tokens, '#{$scheme}-states-selected-color'),
-        pressed-shadow: map.get($tokens, '#{$scheme}-states-pressed-shadow'),
-        disabled-opacity: map.get($tokens, '#{$scheme}-states-disabled-opacity')
-    );
-}
-
 @function _theme_foreground($tokens, $scheme) {
     @return (
+        white: map.get($tokens, '#{$scheme}-foreground-white'),
+        white-secondary: map.get($tokens, '#{$scheme}-foreground-white-secondary'),
+        theme: map.get($tokens, '#{$scheme}-foreground-theme'),
+        theme-secondary: map.get($tokens, '#{$scheme}-foreground-theme-secondary'),
+        on-contrast: map.get($tokens, '#{$scheme}-foreground-on-contrast'),
+        contrast: map.get($tokens, '#{$scheme}-foreground-contrast'),
+        contrast-secondary: map.get($tokens, '#{$scheme}-foreground-contrast-secondary'),
+        contrast-tertiary: map.get($tokens, '#{$scheme}-foreground-contrast-tertiary'),
+        success: map.get($tokens, '#{$scheme}-foreground-success'),
+        // будет удалено, после удаления из компонентов ↓
+        success-less: map.get($tokens, '#{$scheme}-foreground-success-less'),
+        success-secondary: map.get($tokens, '#{$scheme}-foreground-success-secondary'),
+        warning: map.get($tokens, '#{$scheme}-foreground-warning'),
+        warning-secondary: map.get($tokens, '#{$scheme}-foreground-warning-secondary'),
+        error: map.get($tokens, '#{$scheme}-foreground-error'),
+        error-secondary: map.get($tokens, '#{$scheme}-foreground-error-secondary'),
+        error-tertiary: map.get($tokens, '#{$scheme}-foreground-error-tertiary'),
+        visited: map.get($tokens, '#{$scheme}-foreground-visited'),
+        // будет удалено, после удаления из компонентов ↓
+        error-less: map.get($tokens, '#{$scheme}-foreground-error-less'),
+        // будет удалено, после удаления из компонентов ↓
         text: map.get($tokens, '#{$scheme}-foreground-text'),
         text-less-contrast: map.get($tokens, '#{$scheme}-foreground-text-less-contrast'),
         text-disabled: map.get($tokens, '#{$scheme}-foreground-text-disabled'),
         text-error: map.get($tokens, '#{$scheme}-foreground-text-error'),
         text-success: map.get($tokens, '#{$scheme}-foreground-text-success'),
-
         divider: map.get($tokens, '#{$scheme}-foreground-divider'),
         border: map.get($tokens, '#{$scheme}-foreground-border'),
-        icon: map.get($tokens, '#{$scheme}-foreground-icon'),
-
-        contrast: map.get($tokens, '#{$scheme}-foreground-contrast'),
+        icon: map.get($tokens, '#{$scheme}-foreground-icon')
     );
 }
 
 @function _theme_background($tokens, $scheme) {
     @return (
-        background: map.get($tokens, '#{$scheme}-background-background'),
         bg: map.get($tokens, '#{$scheme}-background-bg'),
+        bg-secondary: map.get($tokens, '#{$scheme}-background-bg-secondary'),
+        card: map.get($tokens, '#{$scheme}-background-card'),
+        contrast: map.get($tokens, '#{$scheme}-background-contrast'),
+        contrast-fade: map.get($tokens, '#{$scheme}-background-contrast-fade'),
+        night: map.get($tokens, '#{$scheme}-background-night'),
+        error: map.get($tokens, '#{$scheme}-background-error'),
+        error-fade: map.get($tokens, '#{$scheme}-background-error-fade'),
+        error-less: map.get($tokens, '#{$scheme}-background-error-less'),
+        success: map.get($tokens, '#{$scheme}-background-success'),
+        success-fade: map.get($tokens, '#{$scheme}-background-success-fade'),
+        // surfacce — удалить после удаления из компонентов
+        surface: map.get($tokens, '#{$scheme}-background-surface'),
+        theme: map.get($tokens, '#{$scheme}-background-theme'),
+        theme-fade: map.get($tokens, '#{$scheme}-background-theme-fade'),
+        warning: map.get($tokens, '#{$scheme}-background-warning'),
+        warning-fade: map.get($tokens, '#{$scheme}-background-warning-fade'),
+        transparent: map.get($tokens, '#{$scheme}-background-transparent'),
+
+        // будет удалено, после удаления из компонентов ↓
+        background: map.get($tokens, '#{$scheme}-background-background'),
         background-disabled: map.get($tokens, '#{$scheme}-background-background-disabled'),
         background-less-contrast: map.get($tokens, '#{$scheme}-background-background-less-contrast'),
         background-under: map.get($tokens, '#{$scheme}-background-background-under'),
-
+        overlay: map.get($tokens, '#{$scheme}-background-overlay'),
+        overlay-inverse: map.get($tokens, '#{$scheme}-background-overlay-inverse'),
         overlay-hover: map.get($tokens, '#{$scheme}-background-overlay-hover'),
         overlay-active: map.get($tokens, '#{$scheme}-background-overlay-active'),
         overlay-disabled: map.get($tokens, '#{$scheme}-background-overlay-disabled')
     );
 }
 
+@function _theme_icon($tokens, $scheme) {
+    @return (
+        on-contrast: map.get($tokens, '#{$scheme}-icon-on-contrast'),
+        white: map.get($tokens, '#{$scheme}-icon-white'),
+        theme: map.get($tokens, '#{$scheme}-icon-theme'),
+        contrast: map.get($tokens, '#{$scheme}-icon-contrast'),
+        contrast-fade: map.get($tokens, '#{$scheme}-icon-contrast-fade'),
+        success: map.get($tokens, '#{$scheme}-icon-success'),
+        warning: map.get($tokens, '#{$scheme}-icon-warning'),
+        error: map.get($tokens, '#{$scheme}-icon-error'),
+        visited: map.get($tokens, '#{$scheme}-icon-visited')
+    );
+}
+
+@function _theme_line($tokens, $scheme) {
+    @return (
+        theme: map.get($tokens, '#{$scheme}-line-theme'),
+        theme-fade: map.get($tokens, '#{$scheme}-line-theme-fade'),
+        contrast: map.get($tokens, '#{$scheme}-line-contrast'),
+        contrast-fade: map.get($tokens, '#{$scheme}-line-contrast-fade'),
+        success: map.get($tokens, '#{$scheme}-line-success'),
+        success-fade: map.get($tokens, '#{$scheme}-line-success-fade'),
+        warning: map.get($tokens, '#{$scheme}-line-warning'),
+        warning-fade: map.get($tokens, '#{$scheme}-line-warning-fade'),
+        error: map.get($tokens, '#{$scheme}-line-error'),
+        error-fade: map.get($tokens, '#{$scheme}-line-error-fade'),
+        visited: map.get($tokens, '#{$scheme}-line-visited'),
+    );
+}
+
+@function _theme_states-background($tokens, $scheme) {
+    @return (
+        disabled: map.get($tokens, '#{$scheme}-states-background-disabled'),
+        transparent-hover: map.get($tokens, '#{$scheme}-states-background-transparent-hover'),
+        transparent-active: map.get($tokens, '#{$scheme}-states-background-transparent-active'),
+        contrast-hover: map.get($tokens, '#{$scheme}-states-background-contrast-hover'),
+        contrast-active: map.get($tokens, '#{$scheme}-states-background-contrast-active'),
+        contrast-fade-hover: map.get($tokens, '#{$scheme}-states-background-contrast-fade-hover'),
+        contrast-fade-active: map.get($tokens, '#{$scheme}-states-background-contrast-fade-active'),
+        theme-hover: map.get($tokens, '#{$scheme}-states-background-theme-hover'),
+        theme-active: map.get($tokens, '#{$scheme}-states-background-theme-active'),
+        theme-fade-hover: map.get($tokens, '#{$scheme}-states-background-theme-fade-hover'),
+        theme-fade-active: map.get($tokens, '#{$scheme}-states-background-theme-fade-active'),
+        error-hover: map.get($tokens, '#{$scheme}-states-background-error-hover'),
+        error-active: map.get($tokens, '#{$scheme}-states-background-error-active'),
+        error-fade-hover: map.get($tokens, '#{$scheme}-states-background-error-fade-hover'),
+        error-fade-active: map.get($tokens, '#{$scheme}-states-background-error-fade-active'),
+        // будет удалено, после удаления из компонентов ↓
+        error-less: map.get($tokens, '#{$scheme}-states-background-error-less'),
+        ghost-hover: map.get($tokens, '#{$scheme}-states-background-ghost-hover'),
+        ghost-active: map.get($tokens, '#{$scheme}-states-background-ghost-active')
+    );
+}
+
+@function _theme_states-foreground($tokens, $scheme) {
+    @return (
+        disabled: map.get($tokens, '#{$scheme}-states-foreground-disabled'),
+        theme-hover: map.get($tokens, '#{$scheme}-states-foreground-theme-hover'),
+        theme-active: map.get($tokens, '#{$scheme}-states-foreground-theme-active'),
+        visited-hover: map.get($tokens, '#{$scheme}-states-foreground-visited-hover'),
+        visited-active: map.get($tokens, '#{$scheme}-states-foreground-visited-active')
+    );
+}
+
+@function _theme_states-icon($tokens, $scheme) {
+    @return (
+        theme-hover: map.get($tokens, '#{$scheme}-states-icon-theme-hover'),
+        theme-active: map.get($tokens, '#{$scheme}-states-icon-theme-active'),
+        contrast-hover: map.get($tokens, '#{$scheme}-states-icon-contrast-hover'),
+        contrast-active: map.get($tokens, '#{$scheme}-states-icon-contrast-active'),
+        contrast-fade-hover: map.get($tokens, '#{$scheme}-states-icon-contrast-fade-hover'),
+        contrast-fade-active: map.get($tokens, '#{$scheme}-states-icon-contrast-fade-active'),
+        error-hover: map.get($tokens, '#{$scheme}-states-icon-error-hover'),
+        error-active: map.get($tokens, '#{$scheme}-states-icon-error-active'),
+        success-hover: map.get($tokens, '#{$scheme}-states-icon-success-hover'),
+        success-active: map.get($tokens, '#{$scheme}-states-icon-success-active'),
+        disabled: map.get($tokens, '#{$scheme}-states-icon-disabled'),
+        warning-hover: map.get($tokens, '#{$scheme}-states-icon-warning-hover'),
+        warning-active: map.get($tokens, '#{$scheme}-states-icon-warning-active'),
+        visited-hover: map.get($tokens, '#{$scheme}-states-icon-visited-hover'),
+        visited-active: map.get($tokens, '#{$scheme}-states-icon-visited-active')
+    );
+}
+
+@function _theme_states-line($tokens, $scheme) {
+    @return (
+        focus: map.get($tokens, '#{$scheme}-states-line-focus'),
+        focus-theme: map.get($tokens, '#{$scheme}-states-line-focus-theme'),
+        focus-error: map.get($tokens, '#{$scheme}-states-line-focus-error'),
+        disabled: map.get($tokens, '#{$scheme}-states-line-disabled')
+    );
+}
+
+@function _theme_states-others($tokens, $scheme) {
+    @return (
+        brand: map.get($tokens, '#{$scheme}-states-others-brand')
+    );
+}
+
+@function _theme_states($tokens, $scheme) {
+    @return (
+        background: _theme_states-background($tokens, $scheme),
+        foreground: _theme_states-foreground($tokens, $scheme),
+        icon: _theme_states-icon($tokens, $scheme),
+        line: _theme_states-line($tokens, $scheme),
+        others: _theme_states-others($tokens, $scheme),
+
+        // будет удалено, после удаления из компонентов ↓
+        focused-color: map.get($tokens, '#{$scheme}-states-focused-color'),
+        focused-color-error: map.get($tokens, '#{$scheme}-states-focused-color-error'),
+        selected-color: map.get($tokens, '#{$scheme}-states-selected-color'),
+        pressed-shadow: map.get($tokens, '#{$scheme}-states-pressed-shadow'),
+        disabled-opacity: map.get($tokens, '#{$scheme}-states-disabled-opacity')
+    );
+}
+
 @function kbq-palette($base-palette, $default) {
     @return map.merge($base-palette, (default: $default));
 }
 
 @function _theme_palette($tokens, $scheme, $name) {
     @return kbq-palette(
-        map.get($tokens, '#{$scheme}-#{$name}-palette'), map.get($tokens, '#{$scheme}-#{$name}-default')
+        map.get($tokens, '#{$scheme}-#{$name}-palette'),
+        map.get($tokens, '#{$scheme}-#{$name}-default')
+    )
+}
+
+@function _theme_palette_neutral($tokens, $scheme) {
+    @return (
+        white: map.get($tokens, '#{$scheme}-neutral-white'),
+        black: map.get($tokens, '#{$scheme}-neutral-black'),
     )
 }
 
@@ -103,16 +256,25 @@
 
         background: _theme_background($tokens, $scheme),
         foreground: _theme_foreground($tokens, $scheme),
+        icon: _theme_icon($tokens, $scheme),
+        line: _theme_line($tokens, $scheme),
+        states: _theme_states($tokens, $scheme),
 
         theme: _theme_palette($tokens, $scheme, theme),
-        secondary: _theme_palette($tokens, $scheme, secondary),
-        error: _theme_palette($tokens, $scheme, error),
-
-        warning: _theme_palette($tokens, $scheme, warning),
         success: _theme_palette($tokens, $scheme, success),
+        warning: _theme_palette($tokens, $scheme, warning),
+        error: _theme_palette($tokens, $scheme, error),
+        contrast: _theme_palette($tokens, $scheme, contrast),
+        neutral: _theme_palette_neutral($tokens, $scheme),
+        white: _theme_palette($tokens, $scheme, white),
+        black: _theme_palette($tokens, $scheme, black),
+        brand: _theme_palette($tokens, $scheme, brand),
+        purple: _theme_palette($tokens, $scheme, purple),
+
+        // будет удалено, после удаления из компонентов ↓
+        secondary: _theme_palette($tokens, $scheme, secondary),
         info: _theme_palette($tokens, $scheme, info),
-
-        states: _theme_states($tokens, $scheme),
+        // будет удалено, после удаления из компонентов ↑
 
         components: kbq-components-theme($tokens, $scheme),
         tokens: $tokens
@@ -127,16 +289,25 @@
 
         background: _theme_background($tokens, $scheme),
         foreground: _theme_foreground($tokens, $scheme),
+        icon: _theme_icon($tokens, $scheme),
+        line: _theme_line($tokens, $scheme),
+        states: _theme_states($tokens, $scheme),
 
         theme: _theme_palette($tokens, $scheme, theme),
-        secondary: _theme_palette($tokens, $scheme, secondary),
-        error: _theme_palette($tokens, $scheme, error),
-
-        warning: _theme_palette($tokens, $scheme, warning),
         success: _theme_palette($tokens, $scheme, success),
+        warning: _theme_palette($tokens, $scheme, warning),
+        error: _theme_palette($tokens, $scheme, error),
+        contrast: _theme_palette($tokens, $scheme, contrast),
+        neutral: _theme_palette_neutral($tokens, $scheme),
+        white: _theme_palette($tokens, $scheme, white),
+        black: _theme_palette($tokens, $scheme, black),
+        brand: _theme_palette($tokens, $scheme, brand),
+        purple: _theme_palette($tokens, $scheme, purple),
+
+        // будет удалено, после удаления из компонентов ↓
+        secondary: _theme_palette($tokens, $scheme, secondary),
         info: _theme_palette($tokens, $scheme, info),
-
-        states: _theme_states($tokens, $scheme),
+        // будет удалено, после удаления из компонентов ↑
 
         components: kbq-components-theme($tokens, $scheme),
         tokens: $tokens