Figma

https://www.figma.com/file/UgKHFUAUypejazg9nUPTIl/[File-upload]%23678?type=design&node-id=7274-640&mode=design

Specs

The file uploader component has two different variants:

Default: which consists of a trigger with its label, hint, and error message.
Dropzone: which on top of that, allows dragging and dropping files over a specific area.

Default

File uploader-default.png

File uploader-deafult-preview.png

	Component tokens	Reference
Font-size	`--w-file-uploader-font-size`	`--w-font-size-body`
Font-weight	`--w-file-uploader-font-weight`	`--w-font-weight-body`
Line-height	`--w-file-uploader-line-height`	`--w-line-height-body`

Label

	Component tokens	Reference
Color	`--w-file-uploader-label-color-foreground`	`--w-color-foreground-primary`
Font-weight	`--w-file-uploader-label-font-weight`	`--w-font-weight-heading`
Margin-bottom	`--w-file-uploader-label-margin`	`--w-space-m`

Caption

	Component tokens	Reference
Margin-top	`--w-file-uploader-info-margin`	`--w-space-m`

Hint

	Component tokens	Reference
Color	`--w-file-uploader-hint-color-foreground`	`--w-color-foreground-secondary`

Error

	Component tokens	Reference
Color	`--w-file-uploader-error-color-foreground`	`--w-color-foreground-danger`
Margin-left	`--w-file-uploader-error-margin`	`--w-space-s`

Dropzone

File uploader.png

File uploader-preview.png

	Component tokens	Reference
Background	`--w-file-uploader-dropzone-color-background`	`--w-color-background-raised`
stroke	`--w-file-uploader-dropzone-color-stroke`	`--w-color-border-primary`
stroke-width	`--w-file-uploader-dropzone-stroke-width`	1
stroke-dasharray	`--w-file-uploader-dropzone-stroke-dasharray`	2 4
stroke-linecap	`--w-file-uploader-dropzone-stroke-linecap`	round
border-radius	`--w-file-uploader-dropzone-border-radius`	`--w-border-radius-l`