@ptsecurity/mosaic 17.0.0 → 17.2.0

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

@@ -2,98 +2,141 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
-@mixin mc-file-upload-text-color($states) {
-    &, .mc-icon, .mc-link {
-        color: map.get($states, border);
-    }
-}
-
-@mixin mc-file-upload-color($states) {
-    background-color: map.get($states, background);
-    border-color: map.get($states, border) !important;
-}
 
 @mixin mc-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);
-    $foreground: map.get($theme, foreground);
+    $foreground: map-get($theme, foreground);
+
+    $file-upload: 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);
 
     .mc-file-upload {
         .mc-focused, .mc-link.mc-focused {
-            border: 2px solid map.get(map.get($theme, states), focused-color);
+            border: 2px solid mc-css-variable(states-focused-color, map-get($theme, states, focused-color));
         }
     }
 
     .mc-single-file-upload {
         .mc-file-upload {
-            @include mc-file-upload-color(map.get($single, default));
+            background-color: mc-css-variable(
+                file-upload-single-default-background, map-get($single, default, background));
+            border-color: mc-css-variable(
+                file-upload-single-default-border, map-get($single, default, border)) !important;
 
             &.dragover {
-                @include mc-file-upload-color(map.get($single-states, drag-n-drop));
+                background-color: mc-css-variable(
+                    file-upload-single-states-drag-n-drop-background, map-get($single-states, drag-n-drop, background));
+                border-color: mc-css-variable(
+                    file-upload-single-states-drag-n-drop-border, map-get($single-states, drag-n-drop, border)
+                ) !important;
             }
 
             &.mc-error:not(.disabled) {
                 &:not(.dragover) {
-                    @include mc-file-upload-color(map.get($single-states, error));
+                    background-color: mc-css-variable(
+                        file-upload-single-states-error-background, map-get($single-states, error, background));
+                    border-color: mc-css-variable(
+                        file-upload-single-states-error-border, map-get($single-states, error, border)) !important;
                 }
 
                 *, .mc-icon {
-                    color: map.get($foreground, text-error);
+                    color: mc-css-variable(foreground-text-error, map-get($foreground, text-error));
                 }
             }
 
             &.disabled {
-                @include mc-file-upload-color(map.get($single-states, disabled));
-
-                @include mc-file-upload-text-color(map.get($single-states, disabled));
+                background-color: mc-css-variable(
+                    file-upload-single-states-disabled-background, map-get($single-states, disabled, background));
+                border-color: mc-css-variable(
+                    file-upload-single-states-disabled-border, map-get($single-states, disabled, border)) !important;
+
+                /* stylelint-disable no-descending-specificity */
+                &,
+                .mc-icon,
+                .mc-link {
+                    color: mc-css-variable(
+                        file-upload-single-states-disabled-text, map-get($single-states, disabled, text));
+                }
+                /* stylelint-enable no-descending-specificity */
             }
         }
     }
 
     .mc-multiple-file-upload {
         .mc-file-upload {
-            @include mc-file-upload-color(map.get($multiple, default));
+            background-color: mc-css-variable(
+                file-upload-multiple-default-background, map-get($multiple, default, background));
+            border-color: mc-css-variable(
+                file-upload-multiple-default-border, map-get($multiple, default, border)) !important;
 
             .btn-upload {
                 .dropzone {
-                    border-top-color: map.get(map.get($multiple, default), border);
+                    border-top-color: mc-css-variable(
+                        file-upload-multiple-default-border, map-get($multiple, default, border));
                 }
             }
 
             .mc-file-multiple-uploaded__header {
-                border-bottom-color: map.get(map.get($multiple, default), border);
+                border-bottom-color: mc-css-variable(
+                    file-upload-multiple-default-border, map-get($multiple, default, border));
 
                 &-inner {
-                    color: map.get($foreground, text-less-contrast);
+                    color: mc-css-variable(foreground-text-less-contrast, map-get($foreground, text-less-contrast));
                 }
             }
 
             &.dragover {
-                @include mc-file-upload-color(map.get($multiple-states, drag-n-drop));
+                background-color: mc-css-variable(
+                    file-upload-multiple-states-drag-n-drop-background,
+                    map-get($multiple-states, drag-n-drop, background)
+                );
+                border-color: mc-css-variable(
+                    file-upload-multiple-states-drag-n-drop-border, map-get($multiple-states, drag-n-drop, border)
+                ) !important;
 
                 .mc-file-multiple-uploaded__header {
-                    border-bottom-color: map.get(map.get($multiple-states, drag-n-drop), background) !important;
+                    border-bottom-color: mc-css-variable(
+                        file-upload-multiple-states-drag-n-drop-background,
+                        map-get($multiple-states, drag-n-drop, background)
+                    ) !important;
                 }
 
                 &.selected {
                     .dropzone {
-                        border-top-color: map.get(map.get($multiple-states, drag-n-drop), border);
+                        border-top-color: mc-css-variable(
+                            file-upload-multiple-states-drag-n-drop-border,
+                            map-get($multiple-states, drag-n-drop, border)
+                        );
                     }
                 }
             }
 
             &.disabled {
-                @include mc-file-upload-color(map.get($multiple-states, disabled));
-
-                @include mc-file-upload-text-color(map.get($multiple-states, disabled));
+                background-color: mc-css-variable(
+                    file-upload-multiple-states-disabled-background, map-get($multiple-states, disabled, background));
+                border-color: mc-css-variable(
+                    file-upload-multiple-states-disabled-border, map-get($multiple-states, disabled, border)
+                ) !important;
+
+                /* stylelint-disable no-descending-specificity */
+                &,
+                .mc-icon,
+                .mc-link {
+                    color: mc-css-variable(
+                        file-upload-multiple-states-disabled-text, map-get($multiple-states, disabled, text));
+                }
+                /* stylelint-enable no-descending-specificity */
 
                 &.selected {
                     .dropzone {
-                        border-top-color: map.get(map.get($multiple-states, disabled), border);
+                        border-top-color: mc-css-variable(
+                            file-upload-multiple-states-disabled-border, map-get($multiple-states, disabled, border));
                     }
                 }
             }
@@ -101,7 +144,7 @@
             &:not(.disabled) {
                 .mc-file-upload__row.error {
                     *, .mc-icon {
-                        color: map.get($foreground, text-error);
+                        color: mc-css-variable(foreground-text-error, map-get($foreground, text-error));
                     }
                 }
             }
@@ -116,57 +159,47 @@
 
     .mc-single-file-upload, .mc-multiple-file-upload {
         .mc-file-upload__hint:not(.mc-error) {
-            color: map-get($foreground, text-less-contrast);
+            color: mc-css-variable(foreground-text-less-contrast, map-get($foreground, text-less-contrast));
         }
     }
 }
 
 
 @mixin mc-file-upload-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-single-file-upload {
-        @include mc-typography-level-to-styles($config, map.get($tokens, file-upload-font-single));
+        @include mc-typography-css-variables(file-upload, single);
     }
 
     .mc-multiple-file-upload {
         .multiple__header {
-            @include mc-typography-level-to-styles($config, map.get($tokens, file-upload-font-multiple-header));
+            @include mc-typography-css-variables(file-upload, multiple-header);
         }
 
         .multiple__caption {
             &, .mc-link {
-                @include mc-typography-level-to-styles(
-                    $config, map.get($tokens, file-upload-font-multiple-caption)
-                );
+                @include mc-typography-css-variables(file-upload, multiple-caption);
             }
         }
 
         .mc-file-multiple-uploaded__header {
-            @include mc-typography-level-to-styles(
-                $config,
-                map.get($tokens, file-upload-font-multiple-uploaded-header)
-            );
+            @include mc-typography-css-variables(file-upload, multiple-uploaded-header);
         }
 
         .multiple__uploaded-item {
-            @include mc-typography-level-to-styles($config, map.get($tokens, file-upload-font-multiple-uploaded-item));
+            @include mc-typography-css-variables(file-upload, multiple-uploaded-item);
         }
 
         .mc-file-upload {
             .mc-list-item,
             .mc-list-option {
-                @include mc-typography-level-to-styles(
-                    $config,
-                    map.get($tokens, file-upload-font-multiple-uploaded-item)
-                );
+                @include mc-typography-css-variables(file-upload, multiple-uploaded-item);
             }
         }
     }
 
     .mc-single-file-upload, .mc-multiple-file-upload {
         .mc-file-upload__hint {
-            @include mc-typography-level-to-styles($config, map.get($tokens, form-field-hint-font-default));
+            @include mc-typography-css-variables(form-field-hint, default);
         }
     }
 }

package/file-upload/file-upload.module.d.ts

@@ -11,8 +11,9 @@ import * as i9 from "@ptsecurity/mosaic/list";
 import * as i10 from "@ptsecurity/mosaic/form-field";
 import * as i11 from "@ptsecurity/mosaic/ellipsis-center";
 import * as i12 from "@ptsecurity/mosaic/core";
+import * as i13 from "@ptsecurity/mosaic/link";
 export declare class McFileUploadModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<McFileUploadModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<McFileUploadModule, [typeof i1.McFileDropDirective, typeof i2.McSingleFileUploadComponent, typeof i3.McMultipleFileUploadComponent], [typeof i4.CommonModule, typeof i5.McToolTipModule, typeof i6.McProgressSpinnerModule, typeof i7.McIconModule, typeof i8.McButtonModule, typeof i9.McListModule, typeof i10.McFormFieldModule, typeof i11.McEllipsisCenterModule, typeof i12.McDataSizeModule], [typeof i2.McSingleFileUploadComponent, typeof i3.McMultipleFileUploadComponent, typeof i1.McFileDropDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<McFileUploadModule, [typeof i1.McFileDropDirective, typeof i2.McSingleFileUploadComponent, typeof i3.McMultipleFileUploadComponent], [typeof i4.CommonModule, typeof i5.McToolTipModule, typeof i6.McProgressSpinnerModule, typeof i7.McIconModule, typeof i8.McButtonModule, typeof i9.McListModule, typeof i10.McFormFieldModule, typeof i11.McEllipsisCenterModule, typeof i12.McDataSizeModule, typeof i13.McLinkModule], [typeof i2.McSingleFileUploadComponent, typeof i3.McMultipleFileUploadComponent, typeof i1.McFileDropDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<McFileUploadModule>;
 }

package/file-upload/file-upload.scss

@@ -1,31 +1,16 @@
-@use 'sass:meta';
-@use 'sass:map';
 
-@use '../core/styles/tokens';
-
-@use '../core/styles/common';
-
-$tokens: meta.module-variables(tokens) !default;
-$dropzone-text-margin-left: map.get($tokens, size-xs);
 
 .mc-file-upload {
     box-sizing: border-box;
     display: flex;
     align-items: center;
     position: relative;
-    cursor: pointer;
 
     .dropzone, .file-item {
         display: flex;
         align-items: center;
     }
 
-    .dropzone {
-        .dropzone__text {
-            margin-left: $dropzone-text-margin-left;
-        }
-    }
-
     .mc-ellipsis-center {
         position: relative;
         display: flex;

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

@@ -1,5 +1,4 @@
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, Renderer2, TemplateRef } from '@angular/core';
+import { ElementRef, EventEmitter, Renderer2, TemplateRef } from '@angular/core';
 import { CanDisable } from '@ptsecurity/mosaic/core';
 import { McFile, McFileItem, McFileValidatorFn, McInputFile, McInputFileLabel } from './file-upload';
 import * as i0 from "@angular/core";
@@ -13,9 +12,7 @@ export interface McInputFileMultipleLabel extends McInputFileLabel {
     [k: string | number | symbol]: unknown;
 }
 export declare const MC_MULTIPLE_FILE_UPLOAD_DEFAULT_CONFIGURATION: McInputFileMultipleLabel;
-export declare class McMultipleFileUploadComponent implements AfterViewInit, OnDestroy, McInputFile, CanDisable {
-    private focusMonitor;
-    private cdr;
+export declare class McMultipleFileUploadComponent implements McInputFile, CanDisable {
     private renderer;
     config: McInputFileMultipleLabel;
     accept?: string[];
@@ -28,25 +25,20 @@ export declare class McMultipleFileUploadComponent implements AfterViewInit, OnD
     fileQueueChanged: EventEmitter<McFileItem[]>;
     customFileIcon: TemplateRef<HTMLElement>;
     input: ElementRef<HTMLInputElement>;
-    hasFocus: boolean;
     columnDefs: {
         header: string;
         cssClass: string;
     }[];
-    private focusMonitorSubscription;
     get acceptedFiles(): string;
     get hasErrors(): boolean;
-    constructor(focusMonitor: FocusMonitor, cdr: ChangeDetectorRef, renderer: Renderer2, config: McInputFileMultipleLabel);
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
+    constructor(renderer: Renderer2, config: McInputFileMultipleLabel);
     onFileSelectedViaClick({ target }: Event): void;
     onFileDropped(files: FileList | McFile[]): void;
     deleteFile(index: number, event?: MouseEvent): void;
     onFileListChange(): void;
-    onFocus(focusState: boolean): void;
     private mapToFileItem;
     private validateFile;
     private isCorrectExtension;
-    static ɵfac: i0.ɵɵFactoryDeclaration<McMultipleFileUploadComponent, [null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McMultipleFileUploadComponent, [null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<McMultipleFileUploadComponent, "mc-multiple-file-upload", never, { "accept": { "alias": "accept"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "files": { "alias": "files"; "required": false; }; "size": { "alias": "size"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; }, { "fileQueueChanged": "fileQueueChanged"; }, ["customFileIcon"], ["[hint]"], false, never>;
 }

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

@@ -4,59 +4,25 @@
 @use '../core/styles/tokens';
 
 @use '../core/styles/common';
+@use '../core/styles/common/tokens' as *;
+
 
 $tokens: meta.module-variables(tokens) !default;
 
-$dropzone-text-margin-left: map.get($tokens, size-xs);
 $multiple-default-height: 176px;
 $border-type-header: solid;
 
-$horizontal-padding-item: var(
-    --mc-file-upload-size-multiple-uploaded-item-horizontal-padding,
-    map.get($tokens, file-upload-size-multiple-uploaded-item-horizontal-padding)
-);
-$vertical-padding-item: var(
-    --mc-file-upload-size-multiple-uploaded-item-vertical-padding,
-    map.get($tokens, file-upload-size-multiple-uploaded-item-vertical-padding)
-);
+$horizontal-padding-item: mc-css-variable(file-upload-size-multiple-uploaded-item-horizontal-padding);
+$vertical-padding-item: mc-css-variable(file-upload-size-multiple-uploaded-item-vertical-padding);
 
 .mc-file-upload {
-    border-radius: var(
-        --mc-file-upload-size-multiple-border-radius,
-        map.get($tokens, file-upload-size-multiple-border-radius)
-    );
-    border-width: var(
-        --mc-file-upload-size-multiple-border-width,
-        map.get($tokens, file-upload-size-multiple-border-width)
-    );
-    border-style: var(
-        --mc-file-upload-size-multiple-border-style,
-        map.get($tokens, file-upload-size-multiple-border-style)
-    );
-
-    &.default {
-        min-height: $multiple-default-height;
-        justify-content: center;
-    }
-
-    &.compact:not(.selected) {
-        height: var(
-            --mc-file-upload-size-single-height,
-            map.get($tokens, file-upload-size-single-height)
-        );
-        padding-top: var(
-            --mc-file-upload-size-single-vertical-padding,
-            map.get($tokens, file-upload-size-single-vertical-padding)
-        );
-        padding-bottom: var(
-            --mc-file-upload-size-single-vertical-padding,
-            map.get($tokens, file-upload-size-single-vertical-padding)
-        );
-        padding-left: map.get($tokens, size-m);
-    }
+    border-radius: mc-css-variable(file-upload-size-multiple-border-radius);
+    border-width: mc-css-variable(file-upload-size-multiple-border-width);
+    border-style: mc-css-variable(file-upload-size-multiple-border-style);
 
     .mc-list-option {
         padding: $horizontal-padding-item $vertical-padding-item;
+        height: 36px;
 
         .mc-icon {
             margin-right: 0;
@@ -64,7 +30,7 @@ $vertical-padding-item: var(
     }
 
     .mc-file-upload__grid {
-        min-height: 144px;
+        min-height: 142px;
     }
 
     .mc-file-multiple-uploaded__header-inner,
@@ -90,6 +56,11 @@ $vertical-padding-item: var(
             padding-left: $horizontal-padding-item;
             padding-right: $horizontal-padding-item;
         }
+
+        .mc-file-upload__action {
+            display: flex;
+            align-items: center;
+        }
     }
 
     .mc-file-upload__row {
@@ -113,26 +84,59 @@ $vertical-padding-item: var(
             border: 2px solid transparent;
             border-bottom: unset;
             box-sizing: border-box;
-            height: var(--mc-list-size-item-height, map.get($tokens, size-3xl));
+            height: mc-css-variable(size-3xl);
         }
 
     }
 
     .btn-upload {
         .dropzone {
+            $padding-top: map.get($tokens, size-xxs);
             margin: 0;
-            border-top-width: var(
-                --mc-file-upload-size-multiple-border-width,
-                map.get($tokens, file-upload-size-multiple-border-width)
-            );
-            border-top-style: var(
-                --mc-file-upload-size-multiple-border-style,
-                map.get($tokens, file-upload-size-multiple-border-style)
-            );
-            padding: map.get($tokens, size-xxs) map.get($tokens, size-m);
+            border-top-width: mc-css-variable(file-upload-size-multiple-border-width);
+            border-top-style: mc-css-variable(file-upload-size-multiple-border-style);
+            padding: calc($padding-top - 1px)
+                map.get($tokens, size-m)
+                map.get($tokens, size-xxs)
+                map.get($tokens, size-m);
+        }
+    }
+
+    &.compact {
+        &:not(.selected) {
+            height: mc-css-variable(file-upload-size-single-height);
+            padding-top: mc-css-variable(file-upload-size-single-vertical-padding);
+            padding-bottom: mc-css-variable(file-upload-size-single-vertical-padding);
+            padding-left: map.get($tokens, size-m);
+        }
+
+        .dropzone {
+            .dropzone__text {
+                margin-left: map.get($tokens, size-xs);
+            }
+        }
+    }
+
+    &.default {
+        min-height: $multiple-default-height;
+        justify-content: center;
+
+        .dropzone {
+            .dropzone__text {
+                margin-left: map.get($tokens, size-l);
+            }
+        }
+
+        .btn-upload {
+            .dropzone {
+                .dropzone__text {
+                    margin-left: map.get($tokens, size-xs);
+                }
+            }
         }
     }
 
+
     .file-upload__dropzone {
         width: 100%;
         height: 100%;
@@ -144,5 +148,5 @@ $vertical-padding-item: var(
 }
 
 .mc-file-upload__hint {
-    margin-top: var(--mc-form-field-hint-size-margin-top, map.get($tokens, form-field-hint-size-margin-top));
+    margin-top: mc-css-variable(form-field-hint-size-margin-top);
 }

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

@@ -1,12 +1,9 @@
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
+import { ElementRef, EventEmitter, Renderer2 } from '@angular/core';
 import { CanDisable } from '@ptsecurity/mosaic/core';
 import { McFile, McFileItem, McFileValidatorFn, McInputFile, McInputFileLabel } from './file-upload';
 import * as i0 from "@angular/core";
 export declare const MC_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION: McInputFileLabel;
-export declare class McSingleFileUploadComponent implements AfterViewInit, OnDestroy, McInputFile, CanDisable {
-    private focusMonitor;
-    private cdr;
+export declare class McSingleFileUploadComponent implements McInputFile, CanDisable {
     private renderer;
     config: McInputFileLabel;
     accept: string[];
@@ -17,19 +14,14 @@ export declare class McSingleFileUploadComponent implements AfterViewInit, OnDes
     customValidation?: McFileValidatorFn[];
     fileQueueChanged: EventEmitter<McFileItem | null>;
     input: ElementRef<HTMLInputElement>;
-    hasFocus: boolean;
-    private focusMonitorSubscription;
     get acceptedFiles(): string;
-    constructor(focusMonitor: FocusMonitor, cdr: ChangeDetectorRef, renderer: Renderer2, config: McInputFileLabel);
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
+    constructor(renderer: Renderer2, config: McInputFileLabel);
     onFileSelectedViaClick({ target }: Event): void;
     deleteItem(event?: MouseEvent): void;
     onFileDropped(files: FileList | McFile[]): void;
-    onFocus(focusState: boolean): void;
     private mapToFileItem;
     private validateFile;
     private isCorrectExtension;
-    static ɵfac: i0.ɵɵFactoryDeclaration<McSingleFileUploadComponent, [null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McSingleFileUploadComponent, [null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<McSingleFileUploadComponent, "mc-single-file-upload", never, { "accept": { "alias": "accept"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "files": { "alias": "files"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; }, { "fileQueueChanged": "fileQueueChanged"; }, never, ["[hint]", "[mc-icon]"], false, never>;
 }

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

@@ -4,35 +4,26 @@
 @use '../core/styles/tokens';
 
 @use '../core/styles/common';
+@use '../core/styles/common/tokens' as *;
+
 
 $tokens: meta.module-variables(tokens) !default;
 
 .mc-file-upload {
-    height: var(
-        --mc-file-upload-size-single-height,
-        map.get($tokens, file-upload-size-single-height)
-    );
-    padding-top: var(
-        --mc-file-upload-size-single-vertical-padding,
-        map.get($tokens, file-upload-size-single-vertical-padding)
-    );
-    padding-bottom: var(
-        --mc-file-upload-size-single-vertical-padding,
-        map.get($tokens, file-upload-size-single-vertical-padding)
-    );
+    height: mc-css-variable(file-upload-size-single-height);
+    padding-top: mc-css-variable(file-upload-size-single-vertical-padding);
+    padding-bottom: mc-css-variable(file-upload-size-single-vertical-padding);
     padding-left: map.get($tokens, size-m);
 
-    border-radius: var(
-        --mc-file-upload-size-single-border-radius,
-        map.get($tokens, file-upload-size-single-border-radius)
-    );
-    border-width: var(
-        --mc-file-upload-size-single-border-width,
-        map.get($tokens, file-upload-size-single-border-width));
-    border-style: var(
-        --mc-file-upload-size-single-border-style,
-        map.get($tokens, file-upload-size-single-border-style)
-    );
+    border-radius: mc-css-variable(file-upload-size-single-border-radius);
+    border-width: mc-css-variable(file-upload-size-single-border-width);
+    border-style: mc-css-variable(file-upload-size-single-border-style);
+
+    .dropzone {
+        .dropzone__text {
+            margin-left: map.get($tokens, size-xs);
+        }
+    }
 
     .file-item {
         width: 100%;
@@ -56,5 +47,5 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .mc-file-upload__hint {
-    margin-top: var(--mc-form-field-hint-size-margin-top, map.get($tokens, form-field-hint-size-margin-top));
+    margin-top: mc-css-variable(form-field-hint-size-margin-top);
 }