@koobiq/components 17.0.0-beta.2 → 17.0.0-rc.10

package/file-upload/multiple-file-upload.component.scss

@@ -2,102 +2,57 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
-
-@use '../core/styles/common';
+@use '../core/styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
-//todo нужно рефакторить со стилями тут сложно
-/* stylelint-disable no-descending-specificity */
-
+// todo нужно рефакторить со стилями тут сложно
 .kbq-multiple-file-upload .kbq-file-upload {
-    border-radius: var(
-        --kbq-file-upload-size-multiple-big-container-border-radius,
-        map.get($tokens, file-upload-size-multiple-big-container-border-radius)
-    );
-    border-width: var(
-        --kbq-file-upload-size-multiple-big-container-border-width,
-        map.get($tokens, file-upload-size-multiple-big-container-border-width)
-    );
+    border-radius: kbq-css-variable(file-upload-size-multiple-big-container-border-radius);
+    border-width: kbq-css-variable(file-upload-size-multiple-big-container-border-width);
     border-style: dashed;
 
     &.default:not(.selected) {
         justify-content: center;
 
-        padding:
-            var(
-                --kbq-file-upload-size-multiple-big-container-padding-vertical,
-                map.get($tokens, file-upload-size-multiple-big-container-padding-vertical)
-            )
-            var(
-                --kbq-file-upload-size-multiple-big-container-padding-vertical,
-                map.get($tokens, file-upload-size-multiple-big-container-padding-vertical)
-            );
-
-        min-height: var(
-            --kbq-file-upload-size-multiple-big-container-min-height,
-            map.get($tokens, file-upload-size-multiple-big-container-min-height)
-        );
-
-        min-width: var(
-            --kbq-file-upload-size-multiple-big-container-min-width,
-            map.get($tokens, file-upload-size-multiple-big-container-min-width)
-        );
+        padding: kbq-css-variable(file-upload-size-multiple-big-container-padding-vertical)
+            kbq-css-variable(file-upload-size-multiple-big-container-padding-vertical);
+
+        min-height: kbq-css-variable(file-upload-size-multiple-big-container-min-height);
+
+        min-width: kbq-css-variable(file-upload-size-multiple-big-container-min-width);
 
         & .dropzone {
-            gap: var(
-                --kbq-file-upload-size-multiple-big-container-content-gap-horizontal,
-                map.get($tokens, file-upload-size-multiple-big-container-content-gap-horizontal)
-            );
+            gap: kbq-css-variable(file-upload-size-multiple-big-container-content-gap-horizontal);
         }
 
         & .dropzone__text {
-            & .multiple__caption {
-                padding-top: var(
-                    --kbq-file-upload-size-multiple-big-text-block-content-gap-vertical,
-                    map.get($tokens, file-upload-size-multiple-big-text-block-content-gap-vertical)
-                );
+            & .multiple__header {
+                display: block;
+            }
 
-                gap: var(
-                    --kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal,
-                    map.get($tokens, file-upload-size-multiple-big-text-block-content-gap-horizontal)
-                );
+            & .multiple__caption {
+                display: block;
+                padding-top: kbq-css-variable(file-upload-size-multiple-big-text-block-content-gap-vertical);
+                // гап не применяется тк не флекс. в целом гап не нужен, тк по логике дизайна ссылка от текста отделяется пробелом
+                gap: kbq-css-variable(file-upload-size-multiple-big-text-block-content-gap-horizontal);
             }
         }
     }
 
     &.compact:not(.selected) {
-        padding:
-            var(
-                --kbq-file-upload-size-single-container-padding-vertical,
-                map.get($tokens, file-upload-size-single-container-padding-vertical)
-            )
-            var(
-                --kbq-file-upload-size-single-container-padding-horizontal,
-                map.get($tokens, file-upload-size-single-container-padding-horizontal)
-            );
+        padding: kbq-css-variable(file-upload-size-single-container-padding-vertical)
+            kbq-css-variable(file-upload-size-single-container-padding-horizontal);
 
         & .dropzone {
-            gap: var(
-                --kbq-file-upload-size-single-container-content-gap-horizontal,
-                map.get($tokens, file-upload-size-single-container-content-gap-horizontal)
-            );
+            gap: kbq-css-variable(file-upload-size-single-container-content-gap-horizontal);
 
             & .dropzone__text.multiple__caption {
-                padding-top: var(
-                    --kbq-file-upload-size-single-text-block-padding-vertical,
-                    map.get($tokens, file-upload-size-single-text-block-padding-vertical)
-                );
+                padding-top: kbq-css-variable(file-upload-size-single-text-block-padding-vertical);
 
-                padding-bottom: var(
-                    --kbq-file-upload-size-single-text-block-padding-vertical,
-                    map.get($tokens, file-upload-size-single-text-block-padding-vertical)
-                );
+                padding-bottom: kbq-css-variable(file-upload-size-single-text-block-padding-vertical);
 
-                gap: var(
-                    --kbq-file-upload-size-single-text-block-content-gap-horizontal,
-                    map.get($tokens, file-upload-size-single-text-block-content-gap-horizontal)
-                );
+                gap: kbq-css-variable(file-upload-size-single-text-block-content-gap-horizontal);
             }
         }
     }
@@ -110,14 +65,17 @@ $tokens: meta.module-variables(tokens) !default;
             $padding-horizontal: map.get($tokens, file-upload-size-multiple-big-grid-cell-padding-horizontal);
             $outline-width: map.get($tokens, list-size-container-focus-outline-width);
 
-            padding:
-                calc(
-                    var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical, $padding-vertical) -
-                    var(--kbq-list-size-container-focus-outline-width, $outline-width)
+            padding: calc(
+                    var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical, $padding-vertical) - var(
+                            --kbq-list-size-container-focus-outline-width,
+                            $outline-width
+                        )
                 )
                 calc(
-                    var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal, $padding-horizontal) -
-                    var(--kbq-list-size-container-focus-outline-width, $outline-width)
+                    var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal, $padding-horizontal) - var(
+                            --kbq-list-size-container-focus-outline-width,
+                            $outline-width
+                        )
                 );
         }
 
@@ -139,10 +97,7 @@ $tokens: meta.module-variables(tokens) !default;
             width: 65%;
             max-width: 65%;
 
-            gap: var(
-                --kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal,
-                map.get($tokens, file-upload-size-multiple-big-grid-cell-content-gap-horizontal)
-            );
+            gap: kbq-css-variable(file-upload-size-multiple-big-grid-cell-content-gap-horizontal);
         }
 
         .kbq-file-upload__size {
@@ -154,7 +109,7 @@ $tokens: meta.module-variables(tokens) !default;
 
         .kbq-file-upload__file,
         .kbq-file-upload__size,
-        .kbq-file-upload__action, {
+        .kbq-file-upload__action {
             //padding-left: $horizontal-padding-item;
             //padding-right: $horizontal-padding-item;
         }
@@ -179,19 +134,17 @@ $tokens: meta.module-variables(tokens) !default;
         .kbq-file-multiple-uploaded__header-inner {
             $padding-vertical: map.get($tokens, file-upload-size-multiple-big-grid-cell-padding-vertical);
             $padding-horizontal: map.get($tokens, file-upload-size-multiple-big-grid-cell-padding-horizontal);
-            $compensation: 3px;
+            $compensation: 2px;
 
-            padding:
-                calc(
+            padding: calc(
                     var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical, $padding-vertical) +
-                    $compensation
+                        $compensation
                 )
                 calc(
                     var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal, $padding-horizontal) +
-                    $compensation
+                        $compensation
                 );
         }
-
     }
 
     .btn-upload {
@@ -199,46 +152,24 @@ $tokens: meta.module-variables(tokens) !default;
         $padding-horizontal: map.get($tokens, file-upload-size-single-container-padding-horizontal);
         $border-width: map.get($tokens, file-upload-size-single-container-border-width);
 
-        padding:
-            calc(var(--kbq-file-upload-size-single-container-padding-vertical, $padding-vertical) - $border-width)
+        padding: calc(var(--kbq-file-upload-size-single-container-padding-vertical, $padding-vertical) - $border-width)
             calc(var(--kbq-file-upload-size-single-container-padding-horizontal, $padding-horizontal) - $border-width);
 
-        border-top-left-radius: var(
-            --kbq-file-upload-size-single-container-border-radius,
-            map.get($tokens, file-upload-size-single-container-border-radius)
-        );
-
-        border-top-right-radius: var(
-            --kbq-file-upload-size-single-container-border-radius,
-            map.get($tokens, file-upload-size-single-container-border-radius)
-        );
-        border-top-width: var(
-            --kbq-file-upload-size-single-container-border-width,
-            map.get($tokens, file-upload-size-single-container-border-width)
-        );
+        border-top-left-radius: kbq-css-variable(file-upload-size-single-container-border-radius);
+
+        border-top-right-radius: kbq-css-variable(file-upload-size-single-container-border-radius);
+        border-top-width: kbq-css-variable(file-upload-size-single-container-border-width);
         border-top-style: dashed;
 
         & .dropzone {
-            gap: var(
-                --kbq-file-upload-size-single-container-content-gap-horizontal,
-                map.get($tokens, file-upload-size-single-container-content-gap-horizontal)
-            );
+            gap: kbq-css-variable(file-upload-size-single-container-content-gap-horizontal);
 
             & .dropzone__text.multiple__caption {
-                padding-top: var(
-                    --kbq-file-upload-size-single-text-block-padding-vertical,
-                    map.get($tokens, file-upload-size-single-text-block-padding-vertical)
-                );
+                padding-top: kbq-css-variable(file-upload-size-single-text-block-padding-vertical);
 
-                padding-bottom: var(
-                    --kbq-file-upload-size-single-text-block-padding-vertical,
-                    map.get($tokens, file-upload-size-single-text-block-padding-vertical)
-                );
+                padding-bottom: kbq-css-variable(file-upload-size-single-text-block-padding-vertical);
 
-                gap: var(
-                    --kbq-file-upload-size-single-text-block-content-gap-horizontal,
-                    map.get($tokens, file-upload-size-single-text-block-content-gap-horizontal)
-                );
+                gap: kbq-css-variable(file-upload-size-single-text-block-content-gap-horizontal);
             }
         }
     }
@@ -254,6 +185,5 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .kbq-file-upload__hint {
-    margin-top: var(--kbq-form-field-hint-size-margin-top, map.get($tokens, form-field-hint-size-margin-top));
+    margin-top: kbq-css-variable(form-field-hint-size-margin-top);
 }
-/* stylelint-enable no-descending-specificity */

package/file-upload/single-file-upload.component.d.ts

@@ -1,41 +1,68 @@
-import { FocusMonitor } from '@angular/cdk/a11y';
 import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
 import { CanDisable, KbqLocaleService } from '@koobiq/components/core';
+import { Subscription } from 'rxjs';
+import { ProgressSpinnerMode } from '@koobiq/components/progress-spinner';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { KbqFile, KbqFileItem, KbqFileValidatorFn, KbqInputFile, KbqInputFileLabel } from './file-upload';
 import * as i0 from "@angular/core";
 export declare const KBQ_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION: KbqInputFileLabel;
-export declare class KbqSingleFileUploadComponent implements AfterViewInit, OnDestroy, KbqInputFile, CanDisable {
-    private focusMonitor;
+export declare class KbqSingleFileUploadComponent implements AfterViewInit, OnDestroy, KbqInputFile, CanDisable, ControlValueAccessor {
     private cdr;
     private renderer;
     readonly configuration: KbqInputFileLabel;
     private localeService?;
-    accept: string[];
+    ngControl?: NgControl | undefined;
+    /**
+     * A value responsible for progress spinner type.
+     * Loading logic depends on selected mode */
+    progressMode: ProgressSpinnerMode;
+    accept?: string[];
     disabled: boolean;
     errors: string[];
-    files: KbqFileItem[];
     inputId: string;
+    /**
+     * Alternative for FormControl's validation
+     */
     customValidation?: KbqFileValidatorFn[];
-    fileQueueChanged: EventEmitter<KbqFileItem | null>;
+    private _file;
+    get file(): KbqFileItem | null;
+    set file(currentFile: KbqFileItem | null);
+    fileQueueChange: EventEmitter<KbqFileItem | null>;
     input: ElementRef<HTMLInputElement>;
-    hasFocus: boolean;
     config: KbqInputFileLabel;
     separatedCaptionText: string[];
-    private focusMonitorSubscription;
+    statusChangeSubscription?: Subscription;
+    /** cvaOnChange function registered via registerOnChange (ControlValueAccessor). */
+    cvaOnChange: (_: KbqFileItem | null) => void;
+    /** onTouch function registered via registerOnTouch (ControlValueAccessor). */
+    onTouched: () => void;
     get acceptedFiles(): string;
-    constructor(focusMonitor: FocusMonitor, cdr: ChangeDetectorRef, renderer: Renderer2, configuration: KbqInputFileLabel, localeService?: KbqLocaleService | undefined);
+    constructor(cdr: ChangeDetectorRef, renderer: Renderer2, configuration: KbqInputFileLabel, localeService?: KbqLocaleService | undefined, ngControl?: NgControl | undefined);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
+    /** Implemented as part of ControlValueAccessor.
+     * @docs-private */
+    writeValue(file: File | KbqFileItem | null): void;
+    /** Implemented as part of ControlValueAccessor.
+     * @docs-private */
+    registerOnChange(fn: any): void;
+    /** Implemented as part of ControlValueAccessor.
+     * @docs-private */
+    registerOnTouched(fn: any): void;
+    /**
+     * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.
+     * @param isDisabled Whether the control should be disabled.
+     * @docs-private
+     */
+    setDisabledState(isDisabled: boolean): void;
     onFileSelectedViaClick({ target }: Event): void;
     deleteItem(event?: MouseEvent): void;
     onFileDropped(files: FileList | KbqFile[]): void;
-    onFocus(focusState: boolean): void;
     private updateLocaleParams;
     private mapToFileItem;
     private validateFile;
-    private isCorrectExtension;
     private initDefaultParams;
     private getCaptionText;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSingleFileUploadComponent, [null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSingleFileUploadComponent, "kbq-single-file-upload", never, { "accept": { "alias": "accept"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "files": { "alias": "files"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; }, { "fileQueueChanged": "fileQueueChanged"; }, never, ["[hint]", "[kbq-icon]"], false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSingleFileUploadComponent, [null, null, { optional: true; }, { optional: true; }, { optional: true; self: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSingleFileUploadComponent, "kbq-single-file-upload,kbq-file-upload:not([multiple])", never, { "progressMode": { "alias": "progressMode"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; "file": { "alias": "file"; "required": false; }; }, { "fileQueueChange": "fileQueueChange"; }, never, ["[hint]", "[kbq-icon]"], false, never>;
 }

package/file-upload/single-file-upload.component.scss

@@ -4,6 +4,7 @@
 @use '../core/styles/tokens';
 
 @use '../core/styles/common';
+@use '../core/styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
@@ -12,42 +13,23 @@ $tokens: meta.module-variables(tokens) !default;
     $padding-horizontal: map.get($tokens, file-upload-size-single-container-padding-horizontal);
     $border-width: map.get($tokens, file-upload-size-single-container-border-width);
 
-    padding:
-        calc(var(--kbq-file-upload-size-single-container-padding-vertical, $padding-vertical) - $border-width)
+    padding: calc(var(--kbq-file-upload-size-single-container-padding-vertical, $padding-vertical) - $border-width)
         calc(var(--kbq-file-upload-size-single-container-padding-horizontal, $padding-horizontal) - $border-width);
 
-    border-radius: var(
-        --kbq-file-upload-size-single-container-border-radius,
-        map.get($tokens, file-upload-size-single-container-border-radius)
-    );
-    border-width: var(
-        --kbq-file-upload-size-single-container-border-width,
-        map.get($tokens, file-upload-size-single-container-border-width)
-    );
+    border-radius: kbq-css-variable(file-upload-size-single-container-border-radius);
+    border-width: kbq-css-variable(file-upload-size-single-container-border-width);
     border-style: dashed;
 
     & .dropzone__text {
-        padding-top: var(
-            --kbq-file-upload-size-single-text-block-padding-vertical,
-            map.get($tokens, file-upload-size-single-text-block-padding-vertical)
-        );
-
-        padding-bottom: var(
-            --kbq-file-upload-size-single-text-block-padding-vertical,
-            map.get($tokens, file-upload-size-single-text-block-padding-vertical)
-        );
-
-        gap: var(
-            --kbq-file-upload-size-single-text-block-content-gap-horizontal,
-            map.get($tokens, file-upload-size-single-text-block-content-gap-horizontal)
-        );
+        padding-top: kbq-css-variable(file-upload-size-single-text-block-padding-vertical);
+
+        padding-bottom: kbq-css-variable(file-upload-size-single-text-block-padding-vertical);
+
+        gap: kbq-css-variable(file-upload-size-single-text-block-content-gap-horizontal);
     }
 
     & .dropzone {
-        gap: var(
-            --kbq-file-upload-size-single-container-content-gap-horizontal,
-            map.get($tokens, file-upload-size-single-container-content-gap-horizontal)
-        );
+        gap: kbq-css-variable(file-upload-size-single-container-content-gap-horizontal);
     }
 
     .file-item {
@@ -58,10 +40,7 @@ $tokens: meta.module-variables(tokens) !default;
             align-items: center;
             width: 100%;
 
-            gap: var(
-                --kbq-file-upload-size-single-container-content-gap-horizontal,
-                map.get($tokens, file-upload-size-single-container-content-gap-horizontal)
-            );
+            gap: kbq-css-variable(file-upload-size-single-container-content-gap-horizontal);
 
             .file-item__text {
                 width: 120px;
@@ -76,5 +55,5 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .kbq-file-upload__hint {
-    margin-top: var(--kbq-form-field-hint-size-margin-top, map.get($tokens, form-field-hint-size-margin-top));
+    margin-top: kbq-css-variable(form-field-hint-size-margin-top);
 }

package/form-field/_form-field-theme.scss

@@ -3,104 +3,114 @@
 
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
+@mixin kbq-form-field-state($component, $state-name) {
+    $state: map.get($component, $state-name);
 
-@mixin kbq-form-field-state($state) {
     .kbq-form-field__container {
-        border-color: map.get($state, border);
-        background-color: map.get($state, background);
+        border-color: kbq-css-variable(form-field-#{$state-name}-border, map.get($state, border));
+        background-color: kbq-css-variable(form-field-#{$state-name}-background, map.get($state, background));
     }
 
     .kbq-input,
     .kbq-tag-input,
     .kbq-textarea {
-        color: map.get($state, text);
+        color: kbq-css-variable(form-field-#{$state-name}-text, map.get($state, text));
 
         &::placeholder {
-            color: map.get($state, placeholder);
+            color: kbq-css-variable(form-field-#{$state-name}-placeholder, map.get($state, placeholder));
         }
 
         &::-ms-input-placeholder {
-            color: map.get($state, placeholder);
+            color: kbq-css-variable(form-field-#{$state-name}-placeholder, map.get($state, placeholder));
         }
 
         &::-webkit-input-placeholder {
-            color: map.get($state, placeholder);
+            color: kbq-css-variable(form-field-#{$state-name}-placeholder, map.get($state, placeholder));
         }
     }
 }
 
 @mixin kbq-form-field-theme($theme) {
-    $foreground: map.get($theme, foreground);
-
     .kbq-form-field {
-        $form-field: map.get(map.get($theme, components), form-field);
-
-        $default: map.get($form-field, default);
-        $autofill: map.get($form-field, autofill);
-        $error: map.get($form-field, error);
-        $focused: map.get($form-field, focused);
-        $disabled: map.get($form-field, disabled);
+        $form-field: map.get($theme, components, form-field);
 
-        @include kbq-form-field-state($default);
+        @include kbq-form-field-state($form-field, default);
 
-        /* stylelint-disable no-descending-specificity */
         & .kbq-input {
             //https://css-tricks.com/almanac/selectors/a/autofill/
             &:-webkit-autofill,
             &:-webkit-autofill:hover,
             &:-webkit-autofill:focus {
-                -webkit-box-shadow: 0 0 0 40rem map.get($autofill, background) inset;
-                -webkit-text-fill-color: map.get($autofill, text);
-                caret-color: map-get($autofill, text);
+                -webkit-box-shadow: 0 0 0 40rem
+                    kbq-css-variable(
+                        form-field-states-autofill-background,
+                        map.get($form-field, states-autofill, background)
+                    )
+                    inset;
+                -webkit-text-fill-color: kbq-css-variable(
+                    form-field-states-autofill-text,
+                    map.get($form-field, states-autofill, text)
+                );
+                caret-color: kbq-css-variable(
+                    form-field-states-autofill-text,
+                    map.get($form-field, states-autofill, text)
+                );
             }
         }
 
         &.cdk-focused {
-            @include kbq-form-field-state($focused);
+            @include kbq-form-field-state($form-field, states-focused);
 
             & .kbq-form-field__container {
-                box-shadow: 0 0 0 1px map.get($focused, focus-outline);
+                box-shadow: 0 0 0.1px 1px
+                    kbq-css-variable(
+                        form-field-states-focused-focu-outline,
+                        map.get($form-field, states-focused, focus-outline)
+                    );
             }
         }
 
         &.kbq-form-field_invalid,
         &.ng-invalid {
-            @include kbq-form-field-state($error);
+            @include kbq-form-field-state($form-field, states-error);
 
             &.cdk-focused .kbq-form-field__container {
-                box-shadow: 0 0 0 1px map.get($error, focus-outline);
+                box-shadow: 0 0 0.1px 1px
+                    kbq-css-variable(
+                        form-field-states-error-focu-outline,
+                        map.get($form-field, states-error, focus-outline)
+                    );
             }
         }
 
         &.kbq-disabled {
-            @include kbq-form-field-state($disabled);
+            @include kbq-form-field-state($form-field, states-disabled);
 
             .kbq-icon {
-                color: map.get($disabled, text);
-                -webkit-text-fill-color: map.get($disabled, text);
+                color: kbq-css-variable(form-field-disabled-text, map.get($form-field, disabled, text));
+                -webkit-text-fill-color: kbq-css-variable(
+                    form-field-disabled-text,
+                    map.get($form-field, disabled, text)
+                );
             }
         }
-        /* stylelint-enable no-descending-specificity */
     }
 
     .kbq-form-field__hint {
         & > .kbq-hint:not(.kbq-password-hint, .kbq-contrast-fade, .kbq-success, .kbq-warning, .kbq-error) {
-            $form-field-hint: map.get(map.get($theme, components), form-field-hint);
-
-            color: map.get($form-field-hint, text);
+            color: kbq-css-variable(form-field-hint-text, map.get($theme, components, form-field-hint, text));
         }
     }
 }
 
 @mixin kbq-form-field-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-form-field {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, form-field-font-text));
+        @include kbq-typography-css-variables(form-field, text);
     }
 
     .kbq-form-field__hint > .kbq-hint:not(.kbq-password-hint) .kbq-hint__text {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, form-field-hint-font-text));
+        @include kbq-typography-css-variables(form-field-hint, text);
     }
 }

package/form-field/_hint-theme.scss

@@ -3,69 +3,64 @@
 
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
+@mixin kbq-hint-color($component, $type, $style-name) {
+    $style: map.get($component, $type, $style-name);
 
-@mixin kbq-hint-color($hint) {
-    color: map.get($hint, text);
+    color: kbq-css-variable(hint-#{$type}-#{$style-name}-text, map.get($style, text));
 
     & .kbq-icon {
-        color: map.get($hint, icon) !important;
+        color: kbq-css-variable(hint-#{$type}-#{$style-name}-icon, map.get($style, icon)) !important;
     }
 }
 
-
 @mixin kbq-hint-theme($theme) {
     $hint: map.get(map.get($theme, components), hint);
 
     .kbq-hint {
-        $fill-text-on: map.get($hint, fill-text-on);
-
         &.kbq-contrast-fade {
-            @include kbq-hint-color(map.get($fill-text-on, fade-contrast));
+            @include kbq-hint-color($hint, fill-text-on, fade-contrast);
         }
 
         &.kbq-success {
-            @include kbq-hint-color(map.get($fill-text-on, success));
+            @include kbq-hint-color($hint, fill-text-on, success);
         }
 
         &.kbq-warning {
-            @include kbq-hint-color(map.get($fill-text-on, warning));
+            @include kbq-hint-color($hint, fill-text-on, warning);
         }
 
         &.kbq-error {
-            @include kbq-hint-color(map.get($fill-text-on, error));
+            @include kbq-hint-color($hint, fill-text-on, error);
         }
     }
 
     .kbq-hint.kbq-hint_fill-text-off {
-        $fill-text-off: map.get($hint, fill-text-off);
-
         &.kbq-contrast-fade {
-            @include kbq-hint-color(map.get($fill-text-off, fade-contrast));
+            @include kbq-hint-color($hint, fill-text-off, fade-contrast);
         }
 
         &.kbq-success {
-            @include kbq-hint-color(map.get($fill-text-off, success));
+            @include kbq-hint-color($hint, fill-text-off, success);
         }
 
         &.kbq-warning {
-            @include kbq-hint-color(map.get($fill-text-off, warning));
+            @include kbq-hint-color($hint, fill-text-off, warning);
         }
 
         &.kbq-error {
-            @include kbq-hint-color(map.get($fill-text-off, error));
+            @include kbq-hint-color($hint, fill-text-off, error);
         }
     }
 }
 
 @mixin kbq-hint-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-hint .kbq-hint__text {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, hint-font-normal-text));
+        @include kbq-typography-css-variables(hint, normal-text);
     }
 
     .kbq-hint.kbq-hint_compact .kbq-hint__text {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, hint-font-compact-text));
+        @include kbq-typography-css-variables(hint, compact-text);
     }
 }