@koobiq/components 17.0.0-rc.6 → 17.0.0-rc.8

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

@@ -2,81 +2,97 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
-@use '../core/styles/tokens';
-
-$tokens: meta.module-variables(tokens) !default;
 
 /* stylelint-disable no-descending-specificity */
-@mixin kbq-file-upload-text-color($states) {
-    &,
-    .kbq-icon,
-    .kbq-link {
-        color: map.get($states, border);
-    }
-}
-
-@mixin kbq-file-upload-color($states) {
-    background-color: map.get($states, background);
-    border-color: map.get($states, border) !important;
-}
-
 @mixin kbq-file-upload-theme($theme) {
-    $file-upload: map.get(map.get($theme, components), file-upload);
-
-    $single: map.get($file-upload, single);
-    $single-states: map.get($single, states);
-
-    $multiple: map.get($file-upload, multiple);
-    $multiple-states: map.get($multiple, states);
+    $file-upload: map.get($theme, components, file-upload);
 
     .kbq-file-upload {
         .kbq-focused, .kbq-link.kbq-focused {
-            border: 2px solid map.get(map.get($single, states), focused);
+            border: 2px solid kbq-css-variable(
+                file-upload-single-states-focused, map.get($file-upload, single, states, focused)
+            );
         }
     }
 
     .kbq-single-file-upload {
         .kbq-file-upload {
-            @include kbq-file-upload-color(map.get($single, default));
+            background-color: kbq-css-variable(
+                file-upload-single-default-background, map.get($file-upload, single, default, background)
+            );
+            border-color: kbq-css-variable(
+                file-upload-single-default-border, map.get($file-upload, single, default, border)) !important;
 
             &.dragover {
-                @include kbq-file-upload-color(map.get($single-states, on-drag));
+                background-color: kbq-css-variable(
+                    file-upload-single-states-on-drag-background,
+                    map.get($file-upload, single, states, on-drag, background)
+                );
+                border-color: kbq-css-variable(
+                    file-upload-single-states-on-drag-border,
+                    map.get($file-upload, single, states, on-drag, border)) !important;
             }
 
             &.kbq-error:not(.kbq-disabled) {
-                $state-error: map.get($single-states, error);
-
                 &:not(.dragover) {
-                    @include kbq-file-upload-color($state-error);
+                    background-color: kbq-css-variable(
+                        file-upload-single-states-error-background,
+                        map.get($file-upload, single, states, error, background)
+                    );
+                    border-color: kbq-css-variable(
+                        file-upload-single-states-error-border,
+                        map.get($file-upload, single, states, error, border)) !important;
                 }
 
                 *,
                 .kbq-icon {
-                    color: map.get($state-error, text-block);
+                    color: kbq-css-variable(
+                        file-upload-single-states-error-text-block,
+                        map.get($file-upload, single, states, error, text-block)
+                    );
                 }
             }
 
             &.kbq-disabled {
-                @include kbq-file-upload-color(map.get($single-states, disabled));
-
-                @include kbq-file-upload-text-color(map.get($single-states, disabled));
+                background-color: kbq-css-variable(
+                    file-upload-single-states-disabled-background,
+                    map.get($file-upload, single, states, disabled, background)
+                );
+                border-color: kbq-css-variable(
+                    file-upload-single-states-disabled-border,
+                    map.get($file-upload, single, states, disabled, border)
+                ) !important;
+
+                &,
+                .kbq-icon,
+                .kbq-link {
+                    color: kbq-css-variable(
+                        file-upload-single-states-disabled-border,
+                        map.get($file-upload, single, states, disabled, border)
+                    );
+                }
             }
         }
     }
 
     .kbq-multiple-file-upload {
         .kbq-file-upload {
-            $default: map.get($multiple, default);
-
-            @include kbq-file-upload-color($default);
+            background-color: kbq-css-variable(
+                file-upload-multiple-default-background, map.get($file-upload, multiple, default, background));
+            border-color: kbq-css-variable(
+                file-upload-multiple-default-border, map.get($file-upload, multiple, default, border)) !important;
 
             .btn-upload {
-                border-top-color: map.get($default, border);
+                border-top-color: kbq-css-variable(
+                    file-upload-multiple-default-border, map.get($file-upload, multiple, default, border));
             }
 
             .kbq-file-multiple-uploaded__header {
-                border-bottom-color: map.get($default, grid-divider);
+                border-bottom-color: kbq-css-variable(
+                    file-upload-multiple-default-grid-divider, map.get($file-upload, multiple, default, grid-divider)
+                );
 
                 .kbq-file-multiple-uploaded__header-inner {
                     //color: map.get(map.get($multiple, default), border);;
@@ -84,49 +100,84 @@ $tokens: meta.module-variables(tokens) !default;
             }
 
             &.dragover {
-                @include kbq-file-upload-color(map.get($multiple-states, on-drag));
+                background-color: kbq-css-variable(
+                    file-upload-multiple-states-on-drag-background,
+                    map.get($file-upload, multiple, states, on-drag, background)
+                );
+                border-color: kbq-css-variable(
+                    file-upload-multiple-states-on-drag-border,
+                    map.get($file-upload, multiple, states, on-drag, border)
+                ) !important;
 
                 .kbq-file-multiple-uploaded__header {
-                    border-bottom-color: map.get(map.get($multiple-states, on-drag), background) !important;
+                    border-bottom-color: kbq-css-variable(
+                        file-upload-multiple-states-on-drag-background,
+                        map.get($file-upload, multiple, states, on-drag, background)
+                    ) !important;
                 }
 
                 &.selected {
                     .dropzone {
-                        border-top-color: map.get(map.get($multiple-states, on-drag), border);
+                        border-top-color: kbq-css-variable(
+                            file-upload-multiple-states-on-drag-border,
+                            map.get($file-upload, multiple, states, on-drag, border)
+                        );
                     }
                 }
             }
 
             &.kbq-disabled {
-                @include kbq-file-upload-color(map.get($multiple-states, disabled));
-
-                @include kbq-file-upload-text-color(map.get($multiple-states, disabled));
+                background-color: kbq-css-variable(
+                    file-upload-multiple-states-disabled-background,
+                    map.get($file-upload, multiple, states, disabled, background)
+                );
+                border-color: kbq-css-variable(
+                    file-upload-multiple-states-disabled-border,
+                    map.get($file-upload, multiple, states, disabled, border)
+                ) !important;
+
+                &,
+                .kbq-icon,
+                .kbq-link {
+                    color: kbq-css-variable(
+                        file-upload-multiple-states-disabled-border,
+                        map.get($file-upload, multiple, states, disabled, border)
+                    );
+                }
 
                 &.selected {
                     .dropzone {
-                        border-top-color: map.get(map.get($multiple-states, disabled), border);
+                        border-top-color: kbq-css-variable(
+                            file-upload-multiple-states-disabled-border,
+                            map.get($file-upload, multiple, states, disabled, border)
+                        );
                     }
                 }
             }
 
             &:not(.kbq-disabled) {
                 .kbq-file-upload__row.error {
-                    $state-error: map.get($multiple-states, error);
-
                     *,
                     .kbq-icon {
-                        color: map.get($state-error, text-block);
+                        color: kbq-css-variable(
+                            file-upload-multiple-states-error-text-block,
+                            map.get($file-upload, multiple, states, error, text-block)
+                        );
                     }
                 }
             }
 
             .multiple__uploaded-item {
                 & .kbq-file-upload__file .kbq-icon {
-                    color: map.get($default, left-icon)
+                    color: kbq-css-variable(
+                        file-upload-multiple-default-left-icon, map.get($file-upload, multiple, default, left-icon)
+                    );
                 }
 
                 & .kbq-file-upload__action .kbq-icon {
-                    color: map.get($default, icon-button)
+                    color: kbq-css-variable(
+                        file-upload-multiple-default-icon-button, map.get($file-upload, multiple, default, icon-button)
+                    );
                 }
             }
         }
@@ -135,9 +186,7 @@ $tokens: meta.module-variables(tokens) !default;
     .kbq-single-file-upload,
     .kbq-multiple-file-upload {
         .kbq-file-upload__hint:not(.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));
         }
     }
 }
@@ -147,42 +196,34 @@ $tokens: meta.module-variables(tokens) !default;
     .kbq-single-file-upload {
         & .file-item__text-wrapper,
         & .dropzone__text {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, file-upload-font-single-text-block));
+            @include kbq-typography-css-variables(file-upload, single-text-block);
         }
     }
 
     .kbq-multiple-file-upload {
         .multiple__header {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, file-upload-font-multiple-title));
+            @include kbq-typography-css-variables(file-upload, multiple-title);
         }
 
         .multiple__caption {
             &,
             .kbq-link {
-                @include kbq-typography-level-to-styles(
-                    $config, map.get($tokens, file-upload-font-multiple-text-block)
-                );
+                @include kbq-typography-css-variables(file-upload, multiple-text-block);
             }
         }
 
         .kbq-file-multiple-uploaded__header {
-            @include kbq-typography-level-to-styles(
-                $config,
-                map.get($tokens, file-upload-font-multiple-grid)
-            );
+            @include kbq-typography-css-variables(file-upload, multiple-grid);
         }
 
         .multiple__uploaded-item {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, file-upload-font-multiple-grid));
+            @include kbq-typography-css-variables(file-upload, multiple-grid);
         }
 
         .kbq-file-upload {
             .kbq-list-item,
             .kbq-list-option {
-                @include kbq-typography-level-to-styles(
-                    $config,
-                    map.get($tokens, file-upload-font-multiple-grid)
-                );
+                @include kbq-typography-css-variables(file-upload, multiple-grid);
             }
         }
     }
@@ -190,7 +231,7 @@ $tokens: meta.module-variables(tokens) !default;
     .kbq-single-file-upload,
     .kbq-multiple-file-upload {
         .kbq-file-upload__hint.kbq-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/file-upload/file-upload.scss

@@ -1,11 +1,6 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-@use '../core/styles/common';
-
-$tokens: meta.module-variables(tokens) !default;
 
 .kbq-file-upload {
     box-sizing: border-box;

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

@@ -2,8 +2,8 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
-@use '../core/styles/common';
 
 $tokens: meta.module-variables(tokens) !default;
 
@@ -11,93 +11,53 @@ $tokens: meta.module-variables(tokens) !default;
 /* stylelint-disable no-descending-specificity */
 
 .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)
-        );
+            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)
-            );
+            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);
             }
         }
     }
@@ -139,10 +99,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 {
@@ -179,7 +136,7 @@ $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(
@@ -203,42 +160,21 @@ $tokens: meta.module-variables(tokens) !default;
             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 +190,6 @@ $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.scss

@@ -4,6 +4,8 @@
 @use '../core/styles/tokens';
 
 @use '../core/styles/common';
+@use '../core/styles/common/tokens' as *;
+
 
 $tokens: meta.module-variables(tokens) !default;
 
@@ -16,38 +18,20 @@ $tokens: meta.module-variables(tokens) !default;
         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 +42,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 +57,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);
 }