@koobiq/components 17.5.0 → 17.6.1

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%, 80%, 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%, 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%, 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%, 80%, 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%, 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%, 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%, 50%, 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-tokens.scss

@@ -37,7 +37,7 @@
     --kbq-form-field-states-autofill-background: hsla(216, 100%, 85%, 100%);
     --kbq-form-field-states-autofill-placeholder: hsla(229, 15%, 60%, 100%);
     --kbq-form-field-states-autofill-text: hsla(229, 15%, 15%, 100%);
-    --kbq-form-field-states-disabled-border-color: hsla(229, 15%, 15%, 32%);
+    --kbq-form-field-states-disabled-border-color: hsla(229, 15%, 50%, 32%);
     --kbq-form-field-states-disabled-background: hsla(229, 15%, 50%, 16%);
     --kbq-form-field-states-disabled-placeholder: hsla(229, 15%, 15%, 32%);
     --kbq-form-field-states-disabled-text: hsla(229, 15%, 15%, 32%);

package/icon/icon-button-tokens.scss

@@ -8,7 +8,6 @@
 }
 
 :where(.kbq-light, .theme-light, .kbq-theme-light) {
-    // TODO: remove after all settled, should be assigned via css-tokens.css (#DS-2846)
     --kbq-states-focused-color: hsla(216, 100%, 50%, 100%);
     --kbq-states-focused-color-error: hsla(7, 97%, 50%, 100%);
     --kbq-icon-button-theme-default: hsla(216, 100%, 50%, 100%);

package/link/link-tokens.scss

@@ -45,7 +45,7 @@
     --kbq-link-state-active-border-bottom: hsla(216, 100%, 85%, 100%);
     --kbq-link-state-focused-outline: hsla(216, 100%, 60%, 100%);
     --kbq-link-state-disabled-text: hsla(229, 15%, 15%, 32%);
-    --kbq-link-state-disabled-border-bottom: hsla(229, 15%, 15%, 32%);
+    --kbq-link-state-disabled-border-bottom: hsla(229, 15%, 50%, 32%);
 }
 
 :where(.kbq-dark, .theme-dark, .kbq-theme-dark) {

package/list/_list-theme.scss

@@ -1,63 +1,52 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-list-item($component, $state-name) {
-    $state: map.get($component, $state-name);
-
-    background: kbq-css-variable(list-#{$state-name}-container-background, map.get($state, container-background));
+@mixin kbq-list-item($state-name) {
+    background: kbq-css-variable(list-#{$state-name}-container-background);
 
     .kbq-list-text {
-        color: kbq-css-variable(list-#{$state-name}-text-color, map.get($state, text));
+        color: kbq-css-variable(list-#{$state-name}-text-color);
     }
 
     .kbq-icon {
-        color: kbq-css-variable(list-#{$state-name}-icon-color, map.get($state, icon));
+        color: kbq-css-variable(list-#{$state-name}-icon-color);
     }
 
     .kbq-option-action .kbq-icon {
-        color: kbq-css-variable(list-#{$state-name}-icon-button-color, map.get($state, icon-button));
+        color: kbq-css-variable(list-#{$state-name}-icon-button-color);
     }
 
     .kbq-list-option-caption {
-        color: kbq-css-variable(list-#{$state-name}-caption-color, map.get($state, caption));
+        color: kbq-css-variable(list-#{$state-name}-caption-color);
     }
 }
 
-@mixin kbq-list-theme($theme) {
-    $list-item: map.get($theme, components, list-item);
-
+@mixin kbq-list-theme() {
     .kbq-list-option {
-        @include kbq-list-item($list-item, default);
+        @include kbq-list-item(default);
 
         &:hover:not(.kbq-disabled) {
-            @include kbq-list-item($list-item, states-hover);
+            @include kbq-list-item(states-hover);
         }
 
         &.kbq-focused {
-            border-color: kbq-css-variable(
-                list-states-focused-focus-outline-color,
-                map.get($list-item, states-focused, focus-outline)
-            );
+            border-color: kbq-css-variable(list-states-focused-focus-outline-color);
         }
 
         &.kbq-selected {
-            @include kbq-list-item($list-item, states-selected);
+            @include kbq-list-item(states-selected);
 
             &:hover:not(.kbq-disabled) {
-                @include kbq-list-item($list-item, states-selected-hover);
+                @include kbq-list-item(states-selected-hover);
             }
         }
 
         &.kbq-disabled {
-            @include kbq-list-item($list-item, states-disabled);
+            @include kbq-list-item(states-disabled);
         }
     }
 }
 
-@mixin kbq-list-typography($config) {
+@mixin kbq-list-typography() {
     .kbq-list-item,
     .kbq-list-option {
         @include kbq-typography-css-variables(list, text);

package/list/list-tokens.scss

@@ -0,0 +1,100 @@
+.kbq-list,
+.kbq-list-selection {
+    --kbq-list-size-container-padding-left: 12px;
+    --kbq-list-size-container-padding-right: 12px;
+    --kbq-list-size-container-padding-vertical: 6px;
+    --kbq-list-size-container-content-gap-horizontal: 8px;
+    --kbq-list-size-container-content-gap-vertical: 2px;
+    --kbq-list-size-container-focus-outline-width: 2px;
+    --kbq-list-size-text-padding-vertical: 0;
+    --kbq-list-size-header-padding-top: 8px;
+    --kbq-list-size-header-padding-bottom: 4px;
+    --kbq-list-size-header-padding-horizontal: 12px;
+    --kbq-list-size-subheading-padding-top: 12px;
+    --kbq-list-size-subheading-padding-bottom: 4px;
+    --kbq-list-size-subheading-padding-horizontal: 12px;
+    --kbq-list-font-text-font-size: 14px;
+    --kbq-list-font-text-line-height: 20px;
+    --kbq-list-font-text-letter-spacing: -0.006em;
+    --kbq-list-font-text-font-weight: normal;
+    --kbq-list-font-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-list-font-text-text-transform: null;
+    --kbq-list-font-text-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-list-font-caption-font-size: 12px;
+    --kbq-list-font-caption-line-height: 16px;
+    --kbq-list-font-caption-letter-spacing: normal;
+    --kbq-list-font-caption-font-weight: normal;
+    --kbq-list-font-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-list-font-caption-text-transform: null;
+    --kbq-list-font-caption-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-list-font-header-font-size: 16px;
+    --kbq-list-font-header-line-height: 24px;
+    --kbq-list-font-header-letter-spacing: -0.011em;
+    --kbq-list-font-header-font-weight: 600;
+    --kbq-list-font-header-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-list-font-header-text-transform: null;
+    --kbq-list-font-header-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-list-font-subheading-font-size: 12px;
+    --kbq-list-font-subheading-line-height: 16px;
+    --kbq-list-font-subheading-letter-spacing: 1px;
+    --kbq-list-font-subheading-font-weight: 500;
+    --kbq-list-font-subheading-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-list-font-subheading-text-transform: uppercase;
+    --kbq-list-font-subheading-font-feature-settings: 'calt', 'case', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-list-default-container-background: transparent;
+    --kbq-list-default-text-color: hsla(229, 15%, 15%, 100%);
+    --kbq-list-default-icon-color: hsla(229, 15%, 15%, 100%);
+    --kbq-list-default-icon-button-color: hsla(229, 15%, 60%, 100%);
+    --kbq-list-default-caption-color: hsla(229, 15%, 50%, 100%);
+    --kbq-list-states-hover-container-background: hsla(229, 15%, 50%, 8%);
+    --kbq-list-states-hover-text-color: hsla(229, 15%, 15%, 100%);
+    --kbq-list-states-hover-icon-color: hsla(229, 15%, 15%, 100%);
+    --kbq-list-states-hover-icon-button-color: hsla(229, 15%, 60%, 100%);
+    --kbq-list-states-selected-container-background: hsla(216, 100%, 94%, 100%);
+    --kbq-list-states-selected-text-color: hsla(229, 15%, 15%, 100%);
+    --kbq-list-states-selected-icon-color: hsla(229, 15%, 15%, 100%);
+    --kbq-list-states-selected-icon-button-color: hsla(229, 15%, 60%, 100%);
+    --kbq-list-states-selected-hover-container-background: hsla(216, 100%, 90%, 100%);
+    --kbq-list-states-selected-hover-text-color: hsla(229, 15%, 15%, 100%);
+    --kbq-list-states-selected-hover-icon-color: hsla(229, 15%, 15%, 100%);
+    --kbq-list-states-selected-hover-icon-button-color: hsla(229, 15%, 60%, 100%);
+    --kbq-list-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);
+    --kbq-list-states-disabled-container-background: transparent;
+    --kbq-list-states-disabled-text-color: hsla(229, 15%, 15%, 32%);
+    --kbq-list-states-disabled-icon-color: hsla(229, 15%, 15%, 32%);
+    --kbq-list-states-disabled-icon-button-color: hsla(229, 15%, 15%, 32%);
+    --kbq-list-states-disabled-caption-color: hsla(229, 15%, 15%, 32%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-list-default-container-background: transparent;
+    --kbq-list-default-text-color: hsla(229, 15%, 80%, 100%);
+    --kbq-list-default-icon-color: hsla(229, 15%, 80%, 100%);
+    --kbq-list-default-icon-button-color: hsla(229, 15%, 45%, 100%);
+    --kbq-list-default-caption-color: hsla(229, 15%, 60%, 100%);
+    --kbq-list-states-hover-container-background: hsla(229, 15%, 50%, 16%);
+    --kbq-list-states-hover-text-color: hsla(229, 15%, 80%, 100%);
+    --kbq-list-states-hover-icon-color: hsla(229, 15%, 80%, 100%);
+    --kbq-list-states-hover-icon-button-color: hsla(229, 15%, 45%, 100%);
+    --kbq-list-states-selected-container-background: hsla(216, 100%, 18%, 100%);
+    --kbq-list-states-selected-text-color: hsla(229, 15%, 80%, 100%);
+    --kbq-list-states-selected-icon-color: hsla(229, 15%, 80%, 100%);
+    --kbq-list-states-selected-icon-button-color: hsla(229, 15%, 45%, 100%);
+    --kbq-list-states-selected-hover-container-background: hsla(216, 100%, 15%, 100%);
+    --kbq-list-states-selected-hover-text-color: hsla(229, 15%, 80%, 100%);
+    --kbq-list-states-selected-hover-icon-color: hsla(229, 15%, 80%, 100%);
+    --kbq-list-states-selected-hover-icon-button-color: hsla(229, 15%, 45%, 100%);
+    --kbq-list-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);
+    --kbq-list-states-disabled-container-background: transparent;
+    --kbq-list-states-disabled-text-color: hsla(229, 15%, 40%, 100%);
+    --kbq-list-states-disabled-icon-color: hsla(229, 15%, 30%, 100%);
+    --kbq-list-states-disabled-icon-button-color: hsla(229, 15%, 30%, 100%);
+    --kbq-list-states-disabled-caption-color: hsla(229, 15%, 40%, 100%);
+}

package/list/list.scss

@@ -4,6 +4,8 @@
 @use '../core/styles/common/list';
 @use '../core/styles/common/tokens' as *;
 
+@use './list-theme' as *;
+
 .kbq-list,
 .kbq-list-selection {
     display: block;
@@ -34,3 +36,6 @@
         }
     }
 }
+
+@include kbq-list-theme();
+@include kbq-list-typography();