@koobiq/components 17.4.0 → 17.6.0

package/file-upload/_file-upload-theme.scss

@@ -4,81 +4,45 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-file-upload-theme($theme) {
-    $file-upload: map.get($theme, components, file-upload);
-
+@mixin kbq-file-upload-theme() {
     .kbq-file-upload {
         .kbq-focused,
         .kbq-link.kbq-focused {
-            border: 2px solid
-                kbq-css-variable(
-                    file-upload-single-states-focused-focus-outline,
-                    map.get($file-upload, single, states, focused)
-                );
+            border: 2px solid kbq-css-variable(file-upload-single-states-focused-focus-outline);
         }
     }
 
     .kbq-single-file-upload {
         .kbq-file-upload {
             // FIXME: move to mixin kbq-file-upload-state
-            background-color: kbq-css-variable(
-                file-upload-single-default-container-background,
-                map.get($file-upload, single, default, background)
-            );
-            border-color: kbq-css-variable(
-                file-upload-single-default-container-border,
-                map.get($file-upload, single, default, border)
-            ) !important;
+            background-color: kbq-css-variable(file-upload-single-default-container-background);
+            border-color: kbq-css-variable(file-upload-single-default-container-border) !important;
 
             &.dragover {
-                background-color: kbq-css-variable(
-                    file-upload-single-states-on-drag-container-background,
-                    map.get($file-upload, single, states, on-drag, background)
-                );
-                border-color: kbq-css-variable(
-                    file-upload-single-states-on-drag-container-border,
-                    map.get($file-upload, single, states, on-drag, border)
-                ) !important;
+                background-color: kbq-css-variable(file-upload-single-states-on-drag-container-background);
+                border-color: kbq-css-variable(file-upload-single-states-on-drag-container-border) !important;
             }
 
             &.kbq-error:not(.kbq-disabled) {
                 &:not(.dragover) {
-                    background-color: kbq-css-variable(
-                        file-upload-single-states-error-container-background,
-                        map.get($file-upload, single, states, error, background)
-                    );
-                    border-color: kbq-css-variable(
-                        file-upload-single-states-error-container-border,
-                        map.get($file-upload, single, states, error, border)
-                    ) !important;
+                    background-color: kbq-css-variable(file-upload-single-states-error-container-background);
+                    border-color: kbq-css-variable(file-upload-single-states-error-container-border) !important;
                 }
 
                 *,
                 .kbq-icon {
-                    color: kbq-css-variable(
-                        file-upload-single-states-error-text-block-color,
-                        map.get($file-upload, single, states, error, text-block)
-                    );
+                    color: kbq-css-variable(file-upload-single-states-error-text-block-color);
                 }
             }
 
             &.kbq-disabled {
-                background-color: kbq-css-variable(
-                    file-upload-single-states-disabled-container-background,
-                    map.get($file-upload, single, states, disabled, background)
-                );
-                border-color: kbq-css-variable(
-                    file-upload-single-states-disabled-container-border,
-                    map.get($file-upload, single, states, disabled, border)
-                ) !important;
+                background-color: kbq-css-variable(file-upload-single-states-disabled-container-background);
+                border-color: kbq-css-variable(file-upload-single-states-disabled-container-border) !important;
 
                 &,
                 .kbq-icon,
                 .kbq-link {
-                    color: kbq-css-variable(
-                        file-upload-single-states-disabled-container-border,
-                        map.get($file-upload, single, states, disabled, border)
-                    );
+                    color: kbq-css-variable(file-upload-single-states-disabled-container-border);
                 }
             }
         }
@@ -86,85 +50,47 @@
 
     .kbq-multiple-file-upload {
         .kbq-file-upload {
-            background-color: kbq-css-variable(
-                file-upload-multiple-default-container-background,
-                map.get($file-upload, multiple, default, background)
-            );
-            border-color: kbq-css-variable(
-                file-upload-multiple-default-container-border,
-                map.get($file-upload, multiple, default, border)
-            ) !important;
+            background-color: kbq-css-variable(file-upload-multiple-default-container-background);
+            border-color: kbq-css-variable(file-upload-multiple-default-container-border) !important;
 
             .btn-upload {
-                border-top-color: kbq-css-variable(
-                    file-upload-multiple-default-container-border,
-                    map.get($file-upload, multiple, default, border)
-                );
+                border-top-color: kbq-css-variable(file-upload-multiple-default-container-border);
             }
 
             .kbq-file-multiple-uploaded__header {
-                border-bottom-color: kbq-css-variable(
-                    file-upload-multiple-default-grid-divider-color,
-                    map.get($file-upload, multiple, default, grid-divider)
-                );
-
-                .kbq-file-multiple-uploaded__header-inner {
-                    //color: map.get(map.get($multiple, default), border);
-                }
+                border-bottom-color: kbq-css-variable(file-upload-multiple-default-grid-divider-color);
             }
 
             &.dragover {
-                background-color: kbq-css-variable(
-                    file-upload-multiple-states-on-drag-container-background,
-                    map.get($file-upload, multiple, states, on-drag, background)
-                );
-                border-color: kbq-css-variable(
-                    file-upload-multiple-states-on-drag-container-border,
-                    map.get($file-upload, multiple, states, on-drag, border)
-                ) !important;
+                background-color: kbq-css-variable(file-upload-multiple-states-on-drag-container-background);
+                border-color: kbq-css-variable(file-upload-multiple-states-on-drag-container-border) !important;
 
                 .kbq-file-multiple-uploaded__header {
                     border-bottom-color: kbq-css-variable(
-                        file-upload-multiple-states-on-drag-container-background,
-                        map.get($file-upload, multiple, states, on-drag, background)
+                        file-upload-multiple-states-on-drag-container-background
                     ) !important;
                 }
 
                 &.selected {
                     .dropzone {
-                        border-top-color: kbq-css-variable(
-                            file-upload-multiple-states-on-drag-container-border,
-                            map.get($file-upload, multiple, states, on-drag, border)
-                        );
+                        border-top-color: kbq-css-variable(file-upload-multiple-states-on-drag-container-border);
                     }
                 }
             }
 
             &.kbq-disabled {
-                background-color: kbq-css-variable(
-                    file-upload-multiple-states-disabled-container-background,
-                    map.get($file-upload, multiple, states, disabled, background)
-                );
-                border-color: kbq-css-variable(
-                    file-upload-multiple-states-disabled-container-border,
-                    map.get($file-upload, multiple, states, disabled, border)
-                ) !important;
+                background-color: kbq-css-variable(file-upload-multiple-states-disabled-container-background);
+                border-color: kbq-css-variable(file-upload-multiple-states-disabled-container-border) !important;
 
                 &,
                 .kbq-icon,
                 .kbq-link {
-                    color: kbq-css-variable(
-                        file-upload-multiple-states-disabled-container-border,
-                        map.get($file-upload, multiple, states, disabled, border)
-                    );
+                    color: kbq-css-variable(file-upload-multiple-states-disabled-container-border);
                 }
 
                 &.selected {
                     .dropzone {
-                        border-top-color: kbq-css-variable(
-                            file-upload-multiple-states-disabled-container-border,
-                            map.get($file-upload, multiple, states, disabled, border)
-                        );
+                        border-top-color: kbq-css-variable(file-upload-multiple-states-disabled-container-border);
                     }
                 }
             }
@@ -173,27 +99,18 @@
                 .kbq-file-upload__row.error {
                     *,
                     .kbq-icon {
-                        color: kbq-css-variable(
-                            file-upload-multiple-states-error-text-block-color,
-                            map.get($file-upload, multiple, states, error, text-block)
-                        );
+                        color: kbq-css-variable(file-upload-multiple-states-error-text-block-color);
                     }
                 }
             }
 
             .multiple__uploaded-item {
                 & .kbq-file-upload__file .kbq-icon {
-                    color: kbq-css-variable(
-                        file-upload-multiple-default-left-icon-color,
-                        map.get($file-upload, multiple, default, left-icon)
-                    );
+                    color: kbq-css-variable(file-upload-multiple-default-left-icon-color);
                 }
 
                 & .kbq-file-upload__action .kbq-icon {
-                    color: kbq-css-variable(
-                        file-upload-multiple-default-icon-button-color,
-                        map.get($file-upload, multiple, default, icon-button)
-                    );
+                    color: kbq-css-variable(file-upload-multiple-default-icon-button-color);
                 }
             }
         }
@@ -202,12 +119,12 @@
     .kbq-single-file-upload,
     .kbq-multiple-file-upload {
         .kbq-file-upload__hint:not(.kbq-error) {
-            color: kbq-css-variable(form-field-hint-text, map.get($theme, components, form-field-hint, text));
+            color: kbq-css-variable(form-field-hint-text);
         }
     }
 }
 
-@mixin kbq-file-upload-typography($config) {
+@mixin kbq-file-upload-typography() {
     .kbq-single-file-upload {
         & .file-item__text-wrapper,
         & .dropzone__text {

package/file-upload/file-upload-tokens.scss

@@ -0,0 +1,159 @@
+.kbq-file-upload {
+    --kbq-file-upload-size-single-container-border-radius: 8px;
+    --kbq-file-upload-size-single-container-border-width: 1px;
+    --kbq-file-upload-size-single-container-content-gap-horizontal: 8px;
+    --kbq-file-upload-size-single-container-padding-vertical: 12px;
+    --kbq-file-upload-size-single-container-padding-horizontal: 12px;
+    --kbq-file-upload-size-single-text-block-padding-vertical: 2px;
+    --kbq-file-upload-size-single-text-block-content-gap-horizontal: 4px;
+    --kbq-file-upload-size-multiple-big-container-min-height: 160px;
+    --kbq-file-upload-size-multiple-big-container-min-width: 320px;
+    --kbq-file-upload-size-multiple-big-container-border-radius: 8px;
+    --kbq-file-upload-size-multiple-big-container-border-width: 1px;
+    --kbq-file-upload-size-multiple-big-container-content-gap-horizontal: 12px;
+    --kbq-file-upload-size-multiple-big-container-padding-vertical: 24px;
+    --kbq-file-upload-size-multiple-big-container-padding-horizontal: 24px;
+    --kbq-file-upload-size-multiple-big-text-block-content-gap-vertical: 0px;
+    --kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal: 4px;
+    --kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal: 8px;
+    --kbq-file-upload-size-multiple-big-grid-cell-padding-vertical: 8px;
+    --kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal: 4px;
+    --kbq-file-upload-font-single-text-block-font-size: 14px;
+    --kbq-file-upload-font-single-text-block-line-height: 20px;
+    --kbq-file-upload-font-single-text-block-letter-spacing: -0.006em;
+    --kbq-file-upload-font-single-text-block-font-weight: normal;
+    --kbq-file-upload-font-single-text-block-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-file-upload-font-single-text-block-text-transform: null;
+    --kbq-file-upload-font-single-text-block-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-file-upload-font-multiple-title-font-size: 18px;
+    --kbq-file-upload-font-multiple-title-line-height: 26px;
+    --kbq-file-upload-font-multiple-title-letter-spacing: normal;
+    --kbq-file-upload-font-multiple-title-font-weight: 600;
+    --kbq-file-upload-font-multiple-title-font-family: 'TT-Positive', Inter, -apple-system, BlinkMacSystemFont,
+        'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+    --kbq-file-upload-font-multiple-title-text-transform: null;
+    --kbq-file-upload-font-multiple-title-font-feature-settings: 'calt', 'kern', 'liga';
+    --kbq-file-upload-font-multiple-text-block-font-size: 14px;
+    --kbq-file-upload-font-multiple-text-block-line-height: 20px;
+    --kbq-file-upload-font-multiple-text-block-letter-spacing: -0.006em;
+    --kbq-file-upload-font-multiple-text-block-font-weight: normal;
+    --kbq-file-upload-font-multiple-text-block-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-file-upload-font-multiple-text-block-text-transform: null;
+    --kbq-file-upload-font-multiple-text-block-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-file-upload-font-multiple-grid-font-size: 14px;
+    --kbq-file-upload-font-multiple-grid-line-height: 20px;
+    --kbq-file-upload-font-multiple-grid-letter-spacing: -0.006em;
+    --kbq-file-upload-font-multiple-grid-font-weight: normal;
+    --kbq-file-upload-font-multiple-grid-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-file-upload-font-multiple-grid-text-transform: null;
+    --kbq-file-upload-font-multiple-grid-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-form-field-hint-font-text-font-size: 12px;
+    --kbq-form-field-hint-font-text-line-height: 16px;
+    --kbq-form-field-hint-font-text-letter-spacing: normal;
+    --kbq-form-field-hint-font-text-font-weight: normal;
+    --kbq-form-field-hint-font-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-form-field-hint-font-text-text-transform: null;
+    --kbq-form-field-hint-font-text-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-file-upload-single-default-container-border: hsla(229, 15%, 70%, 100%);
+    --kbq-file-upload-single-default-container-background: hsla(0, 0%, 100%, 100%);
+    --kbq-file-upload-single-default-upload-icon-color: hsla(229, 15%, 60%, 100%);
+    --kbq-file-upload-single-default-left-icon-color: hsla(229, 15%, 60%, 100%);
+    --kbq-file-upload-single-default-text-block-color: hsla(229, 15%, 15%, 100%);
+    --kbq-file-upload-single-default-icon-button-color: hsla(229, 15%, 15%, 100%);
+    --kbq-file-upload-single-states-on-drag-container-border: hsla(216, 100%, 65%, 100%);
+    --kbq-file-upload-single-states-on-drag-container-background: hsla(216, 100%, 85%, 100%);
+    --kbq-file-upload-single-states-on-drag-upload-icon-color: hsla(229, 15%, 60%, 100%);
+    --kbq-file-upload-single-states-on-drag-left-icon-color: hsla(229, 15%, 60%, 100%);
+    --kbq-file-upload-single-states-on-drag-text-block-color: hsla(229, 15%, 15%, 100%);
+    --kbq-file-upload-single-states-error-container-border: hsla(7, 97%, 45%, 100%);
+    --kbq-file-upload-single-states-error-container-background: hsla(7, 97%, 99%, 100%);
+    --kbq-file-upload-single-states-error-left-icon-color: hsla(7, 97%, 45%, 100%);
+    --kbq-file-upload-single-states-error-text-block-color: hsla(7, 97%, 40%, 100%);
+    --kbq-file-upload-single-states-disabled-container-border: hsla(229, 15%, 15%, 32%);
+    --kbq-file-upload-single-states-disabled-container-background: hsla(229, 15%, 50%, 16%);
+    --kbq-file-upload-single-states-disabled-upload-icon-color: hsla(229, 15%, 15%, 32%);
+    --kbq-file-upload-single-states-disabled-left-icon-color: hsla(229, 15%, 15%, 32%);
+    --kbq-file-upload-single-states-disabled-text-block-color: hsla(229, 15%, 15%, 32%);
+    --kbq-file-upload-single-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);
+    --kbq-file-upload-multiple-default-container-border: hsla(229, 15%, 70%, 100%);
+    --kbq-file-upload-multiple-default-container-background: hsla(0, 0%, 100%, 100%);
+    --kbq-file-upload-multiple-default-upload-icon-color: hsla(229, 15%, 60%, 100%);
+    --kbq-file-upload-multiple-default-left-icon-color: hsla(229, 15%, 60%, 100%);
+    --kbq-file-upload-multiple-default-text-block-color: hsla(229, 15%, 15%, 100%);
+    --kbq-file-upload-multiple-default-icon-button-color: hsla(229, 15%, 15%, 100%);
+    --kbq-file-upload-multiple-default-grid-divider-color: hsla(229, 15%, 6%, 12%);
+    --kbq-file-upload-multiple-states-on-drag-container-border: hsla(216, 100%, 65%, 100%);
+    --kbq-file-upload-multiple-states-on-drag-container-background: hsla(216, 100%, 85%, 100%);
+    --kbq-file-upload-multiple-states-on-drag-upload-icon-color: hsla(229, 15%, 60%, 100%);
+    --kbq-file-upload-multiple-states-on-drag-left-icon-color: hsla(229, 15%, 60%, 100%);
+    --kbq-file-upload-multiple-states-on-drag-icon-button-color: hsla(229, 15%, 15%, 100%);
+    --kbq-file-upload-multiple-states-on-drag-text-block-color: hsla(229, 15%, 15%, 100%);
+    --kbq-file-upload-multiple-states-on-drag-grid-divider-color: hsla(216, 100%, 65%, 100%);
+    --kbq-file-upload-multiple-states-error-grid-cell-background: hsla(7, 97%, 99%, 100%);
+    --kbq-file-upload-multiple-states-error-left-icon-color: hsla(7, 97%, 45%, 100%);
+    --kbq-file-upload-multiple-states-error-text-block-color: hsla(7, 97%, 40%, 100%);
+    --kbq-file-upload-multiple-states-error-icon-button-color: hsla(7, 97%, 45%, 100%);
+    --kbq-file-upload-multiple-states-disabled-container-border: hsla(229, 15%, 15%, 32%);
+    --kbq-file-upload-multiple-states-disabled-container-background: hsla(229, 15%, 50%, 16%);
+    --kbq-file-upload-multiple-states-disabled-upload-icon-color: hsla(229, 15%, 15%, 32%);
+    --kbq-file-upload-multiple-states-disabled-left-icon-color: hsla(229, 15%, 15%, 32%);
+    --kbq-file-upload-multiple-states-disabled-text-block-color: hsla(229, 15%, 15%, 32%);
+    --kbq-file-upload-multiple-states-disabled-grid-divider-color: hsla(229, 15%, 15%, 32%);
+    --kbq-form-field-hint-text: hsla(229, 15%, 50%, 100%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-file-upload-single-default-container-border: hsla(229, 15%, 30%, 100%);
+    --kbq-file-upload-single-default-container-background: hsla(229, 15%, 12%, 100%);
+    --kbq-file-upload-single-default-upload-icon-color: hsla(229, 15%, 45%, 100%);
+    --kbq-file-upload-single-default-left-icon-color: hsla(229, 15%, 45%, 100%);
+    --kbq-file-upload-single-default-text-block-color: hsla(229, 15%, 80%, 100%);
+    --kbq-file-upload-single-default-icon-button-color: hsla(229, 15%, 80%, 100%);
+    --kbq-file-upload-single-states-on-drag-container-border: hsla(216, 100%, 30%, 100%);
+    --kbq-file-upload-single-states-on-drag-container-background: hsla(216, 100%, 20%, 100%);
+    --kbq-file-upload-single-states-on-drag-upload-icon-color: hsla(229, 15%, 45%, 100%);
+    --kbq-file-upload-single-states-on-drag-left-icon-color: hsla(229, 15%, 45%, 100%);
+    --kbq-file-upload-single-states-on-drag-text-block-color: hsla(229, 15%, 80%, 100%);
+    --kbq-file-upload-single-states-error-container-border: hsla(7, 97%, 35%, 100%);
+    --kbq-file-upload-single-states-error-container-background: hsla(7, 97%, 6%, 100%);
+    --kbq-file-upload-single-states-error-left-icon-color: hsla(7, 97%, 60%, 100%);
+    --kbq-file-upload-single-states-error-text-block-color: hsla(7, 97%, 60%, 100%);
+    --kbq-file-upload-single-states-disabled-container-border: hsla(229, 15%, 50%, 32%);
+    --kbq-file-upload-single-states-disabled-container-background: hsla(229, 15%, 50%, 16%);
+    --kbq-file-upload-single-states-disabled-upload-icon-color: hsla(229, 15%, 30%, 100%);
+    --kbq-file-upload-single-states-disabled-left-icon-color: hsla(229, 15%, 30%, 100%);
+    --kbq-file-upload-single-states-disabled-text-block-color: hsla(229, 15%, 40%, 100%);
+    --kbq-file-upload-single-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);
+    --kbq-file-upload-multiple-default-container-border: hsla(229, 15%, 30%, 100%);
+    --kbq-file-upload-multiple-default-container-background: hsla(229, 15%, 12%, 100%);
+    --kbq-file-upload-multiple-default-upload-icon-color: hsla(229, 15%, 45%, 100%);
+    --kbq-file-upload-multiple-default-left-icon-color: hsla(229, 15%, 45%, 100%);
+    --kbq-file-upload-multiple-default-text-block-color: hsla(229, 15%, 80%, 100%);
+    --kbq-file-upload-multiple-default-icon-button-color: hsla(229, 15%, 80%, 100%);
+    --kbq-file-upload-multiple-default-grid-divider-color: hsla(229, 15%, 22%, 100%);
+    --kbq-file-upload-multiple-states-on-drag-container-border: hsla(216, 100%, 30%, 100%);
+    --kbq-file-upload-multiple-states-on-drag-container-background: hsla(216, 100%, 20%, 100%);
+    --kbq-file-upload-multiple-states-on-drag-upload-icon-color: hsla(229, 15%, 45%, 100%);
+    --kbq-file-upload-multiple-states-on-drag-left-icon-color: hsla(229, 15%, 45%, 100%);
+    --kbq-file-upload-multiple-states-on-drag-icon-button-color: hsla(229, 15%, 80%, 100%);
+    --kbq-file-upload-multiple-states-on-drag-text-block-color: hsla(229, 15%, 80%, 100%);
+    --kbq-file-upload-multiple-states-on-drag-grid-divider-color: hsla(216, 100%, 30%, 100%);
+    --kbq-file-upload-multiple-states-error-grid-cell-background: hsla(7, 97%, 6%, 100%);
+    --kbq-file-upload-multiple-states-error-left-icon-color: hsla(7, 97%, 60%, 100%);
+    --kbq-file-upload-multiple-states-error-text-block-color: hsla(7, 97%, 60%, 100%);
+    --kbq-file-upload-multiple-states-error-icon-button-color: hsla(7, 97%, 60%, 100%);
+    --kbq-file-upload-multiple-states-disabled-container-border: hsla(229, 15%, 50%, 32%);
+    --kbq-file-upload-multiple-states-disabled-container-background: hsla(229, 15%, 50%, 16%);
+    --kbq-file-upload-multiple-states-disabled-upload-icon-color: hsla(229, 15%, 30%, 100%);
+    --kbq-file-upload-multiple-states-disabled-left-icon-color: hsla(229, 15%, 30%, 100%);
+    --kbq-file-upload-multiple-states-disabled-text-block-color: hsla(229, 15%, 40%, 100%);
+    --kbq-file-upload-multiple-states-disabled-grid-divider-color: hsla(229, 15%, 50%, 32%);
+    --kbq-form-field-hint-text: hsla(229, 15%, 60%, 100%);
+}

package/file-upload/file-upload.scss

@@ -1,5 +1,4 @@
-@use 'sass:meta';
-@use 'sass:map';
+@use './file-upload-theme' as *;
 
 .kbq-file-upload {
     box-sizing: border-box;
@@ -31,3 +30,6 @@
         }
     }
 }
+
+@include kbq-file-upload-theme();
+@include kbq-file-upload-typography();

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

@@ -5,107 +5,81 @@
 @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-name) {
     .kbq-form-field__container {
-        border-color: kbq-css-variable(form-field-#{$state-name}-border-color, map.get($state, border));
-        background-color: kbq-css-variable(form-field-#{$state-name}-background, map.get($state, background));
+        border-color: kbq-css-variable(form-field-#{$state-name}-border-color);
+        background-color: kbq-css-variable(form-field-#{$state-name}-background);
     }
 
     .kbq-input,
     .kbq-tag-input,
     .kbq-textarea {
-        color: kbq-css-variable(form-field-#{$state-name}-text, map.get($state, text));
+        color: kbq-css-variable(form-field-#{$state-name}-text);
 
         &::placeholder {
-            color: kbq-css-variable(form-field-#{$state-name}-placeholder, map.get($state, placeholder));
+            color: kbq-css-variable(form-field-#{$state-name}-placeholder);
         }
 
         &::-ms-input-placeholder {
-            color: kbq-css-variable(form-field-#{$state-name}-placeholder, map.get($state, placeholder));
+            color: kbq-css-variable(form-field-#{$state-name}-placeholder);
         }
 
         &::-webkit-input-placeholder {
-            color: kbq-css-variable(form-field-#{$state-name}-placeholder, map.get($state, placeholder));
+            color: kbq-css-variable(form-field-#{$state-name}-placeholder);
         }
     }
 }
 
-@mixin kbq-form-field-theme($theme) {
+@mixin kbq-form-field-theme() {
     .kbq-form-field {
-        $form-field: map.get($theme, components, form-field);
-
-        @include kbq-form-field-state($form-field, default);
+        @include kbq-form-field-state(default);
 
         & .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
-                    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)
-                );
+                -webkit-box-shadow: inset 0 0 0 40rem kbq-css-variable(form-field-states-autofill-background);
+                -webkit-text-fill-color: kbq-css-variable(form-field-states-autofill-text);
+                caret-color: kbq-css-variable(form-field-states-autofill-text);
             }
         }
 
         &.cdk-focused {
-            @include kbq-form-field-state($form-field, states-focused);
+            @include kbq-form-field-state(states-focused);
 
             & .kbq-form-field__container {
-                box-shadow: 0 0 0.1px 1px
-                    kbq-css-variable(
-                        form-field-states-focused-focus-outline,
-                        map.get($form-field, states-focused, focus-outline)
-                    );
+                box-shadow: 0 0 0.1px 1px kbq-css-variable(form-field-states-focused-focus-outline);
             }
         }
 
         &.kbq-form-field_invalid,
         &.ng-invalid {
-            @include kbq-form-field-state($form-field, states-error);
+            @include kbq-form-field-state(states-error);
 
             &.cdk-focused .kbq-form-field__container {
-                box-shadow: 0 0 0.1px 1px
-                    kbq-css-variable(
-                        form-field-states-error-focused-focus-outline,
-                        map.get($form-field, states-error, focus-outline)
-                    );
+                box-shadow: 0 0 0.1px 1px kbq-css-variable(form-field-states-error-focused-focus-outline);
             }
         }
 
         &.kbq-disabled {
-            @include kbq-form-field-state($form-field, states-disabled);
+            @include kbq-form-field-state(states-disabled);
 
             .kbq-icon {
-                color: kbq-css-variable(form-field-states-disabled-text, map.get($form-field, states-disabled, text));
-                -webkit-text-fill-color: kbq-css-variable(
-                    form-field-states-disabled-text,
-                    map.get($form-field, states-disabled, text)
-                );
+                color: kbq-css-variable(form-field-states-disabled-text);
+                -webkit-text-fill-color: kbq-css-variable(form-field-states-disabled-text);
             }
         }
     }
 
     .kbq-form-field__hint {
         & > .kbq-hint:not(.kbq-password-hint, .kbq-contrast-fade, .kbq-success, .kbq-warning, .kbq-error) {
-            color: kbq-css-variable(form-field-hint-text, map.get($theme, components, form-field-hint, text));
+            color: kbq-css-variable(form-field-hint-text);
         }
     }
 }
 
-@mixin kbq-form-field-typography($config) {
+@mixin kbq-form-field-typography() {
     .kbq-form-field {
         @include kbq-typography-css-variables(form-field, text);
     }

package/form-field/_hint-theme.scss

@@ -5,57 +5,53 @@
 @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);
-
-    color: kbq-css-variable(hint-#{$type}-#{$style-name}-text, map.get($style, text));
+@mixin kbq-hint-color($type, $style-name) {
+    color: kbq-css-variable(hint-#{$type}-#{$style-name}-text);
 
     & .kbq-icon {
-        color: kbq-css-variable(hint-#{$type}-#{$style-name}-icon, map.get($style, icon)) !important;
+        color: kbq-css-variable(hint-#{$type}-#{$style-name}-icon) !important;
     }
 }
 
-@mixin kbq-hint-theme($theme) {
-    $hint: map.get(map.get($theme, components), hint);
-
+@mixin kbq-hint-theme() {
     .kbq-hint {
         &.kbq-contrast-fade {
-            @include kbq-hint-color($hint, fill-text-on, fade-contrast);
+            @include kbq-hint-color(fill-text-on, fade-contrast);
         }
 
         &.kbq-success {
-            @include kbq-hint-color($hint, fill-text-on, success);
+            @include kbq-hint-color(fill-text-on, success);
         }
 
         &.kbq-warning {
-            @include kbq-hint-color($hint, fill-text-on, warning);
+            @include kbq-hint-color(fill-text-on, warning);
         }
 
         &.kbq-error {
-            @include kbq-hint-color($hint, fill-text-on, error);
+            @include kbq-hint-color(fill-text-on, error);
         }
     }
 
     .kbq-hint.kbq-hint_fill-text-off {
         &.kbq-contrast-fade {
-            @include kbq-hint-color($hint, fill-text-off, fade-contrast);
+            @include kbq-hint-color(fill-text-off, fade-contrast);
         }
 
         &.kbq-success {
-            @include kbq-hint-color($hint, fill-text-off, success);
+            @include kbq-hint-color(fill-text-off, success);
         }
 
         &.kbq-warning {
-            @include kbq-hint-color($hint, fill-text-off, warning);
+            @include kbq-hint-color(fill-text-off, warning);
         }
 
         &.kbq-error {
-            @include kbq-hint-color($hint, fill-text-off, error);
+            @include kbq-hint-color(fill-text-off, error);
         }
     }
 }
 
-@mixin kbq-hint-typography($config) {
+@mixin kbq-hint-typography() {
     .kbq-hint .kbq-hint__text {
         @include kbq-typography-css-variables(hint, normal-text);
     }