{"componentChunkName":"component---src-pages-components-file-uploader-style-mdx","path":"/components/file-uploader/style/","webpackCompilationHash":"9a5cb62a61994334ab3f","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"File uploader","description":"File uploaders allow the user to transfer a file or submit content of their own.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/file-uploader/style.mdx","titleType":"prepend","MdxNode":{"id":"b8abf089-d782-5d73-8d5b-28e76aa6a5a1","children":[],"parent":"947b5688-8d55-5a2b-8417-028c04041059","internal":{"content":"---\ntitle: File uploader\ndescription: File uploaders allow the user to transfer a file or submit content of their own.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n| Class | Property | Color token |\n| -------------------------- | ---------- | ----------- |\n| `.bx--label` | text color | `$text-01` |\n| `.bx--label-description` | text color | `$text-02` |\n| `.bx--file-filename` | color | `$text-01` |\n| `.bx--file__selected-file` | background | `$ui-01` |\n| `.bx--file-close` | fill | `$icon-01` |\n\n### Interactive states\n\n| Class | Property | Color token |\n| -------------------- | ------------- | -------------- |\n| File name: invalid | text color | `$disabled-02` |\n| Error message | text color | `$support-01` |\n| `.bx--file-filename` | border-bottom | `$support-01` |\n\n## Typography\n\nThe file uploader label and instruction text should be set in sentence case, with only the first letter of the first word in the sentence capitalized.\n\n| Class | Font-size (px/rem) | Font-weight | Type token |\n| ------------------------ | ------------------ | --------------- | ---------------- |\n| `.bx--label` | 14 / 0.875 | Semi-bold / 600 | `$heading-01` |\n| `.bx--label-description` | 14 / 0.875 | Regular / 400 | `$body-short-01` |\n| `.bx--file-filename` | 14 / 0.875 | Regular / 400 | `$body-short-01` |\n\n## Structure\n\nThe width of an uploaded file varies based on the content and layout of a design. Refer to the [button](/components/button) guidelines for styling and usage of the “Add files” button.\n\n| Class | Property | px / rem | Spacing token |\n| -------------------------- | ------------- | -------- | ------------- |\n| `.bx--file-filename` | height | 40 / 2.5 | – |\n| `.bx--file-filename` | width | 224 / 14 | – |\n| `.bx--file__selected-file` | padding-left | 16 / 1 | `$spacing-03` |\n| `.bx--file__selected-file` | margin-bottom | 8 / 0.5 | `$spacing-05` |\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for file uploader | px / rem\n\n\n### Recommended\n\nThe following specs are not built into the file uploader component but are recommended by design as the proper amount between file uploader elements.\n\n| Class | Property | px / rem | Spacing token |\n| ----------------- | ------------------------- | -------- | ------------- |\n| `.bx--file-close` | height, width | 16 / 1 | – |\n| `.bx--file-close` | margin-left, margin-right | 16 / 1 | `$spacing-05` |\n","type":"Mdx","contentDigest":"9b9dbce6844e6d589feb81d84270b740","counter":1182,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"File uploader","description":"File uploaders allow the user to transfer a file or submit content of their own.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: File uploader\ndescription: File uploaders allow the user to transfer a file or submit content of their own.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n| Class | Property | Color token |\n| -------------------------- | ---------- | ----------- |\n| `.bx--label` | text color | `$text-01` |\n| `.bx--label-description` | text color | `$text-02` |\n| `.bx--file-filename` | color | `$text-01` |\n| `.bx--file__selected-file` | background | `$ui-01` |\n| `.bx--file-close` | fill | `$icon-01` |\n\n### Interactive states\n\n| Class | Property | Color token |\n| -------------------- | ------------- | -------------- |\n| File name: invalid | text color | `$disabled-02` |\n| Error message | text color | `$support-01` |\n| `.bx--file-filename` | border-bottom | `$support-01` |\n\n## Typography\n\nThe file uploader label and instruction text should be set in sentence case, with only the first letter of the first word in the sentence capitalized.\n\n| Class | Font-size (px/rem) | Font-weight | Type token |\n| ------------------------ | ------------------ | --------------- | ---------------- |\n| `.bx--label` | 14 / 0.875 | Semi-bold / 600 | `$heading-01` |\n| `.bx--label-description` | 14 / 0.875 | Regular / 400 | `$body-short-01` |\n| `.bx--file-filename` | 14 / 0.875 | Regular / 400 | `$body-short-01` |\n\n## Structure\n\nThe width of an uploaded file varies based on the content and layout of a design. Refer to the [button](/components/button) guidelines for styling and usage of the “Add files” button.\n\n| Class | Property | px / rem | Spacing token |\n| -------------------------- | ------------- | -------- | ------------- |\n| `.bx--file-filename` | height | 40 / 2.5 | – |\n| `.bx--file-filename` | width | 224 / 14 | – |\n| `.bx--file__selected-file` | padding-left | 16 / 1 | `$spacing-03` |\n| `.bx--file__selected-file` | margin-bottom | 8 / 0.5 | `$spacing-05` |\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for file uploader | px / rem\n\n\n### Recommended\n\nThe following specs are not built into the file uploader component but are recommended by design as the proper amount between file uploader elements.\n\n| Class | Property | px / rem | Spacing token |\n| ----------------- | ------------------------- | -------- | ------------- |\n| `.bx--file-close` | height, width | 16 / 1 | – |\n| `.bx--file-close` | margin-left, margin-right | 16 / 1 | `$spacing-05` |\n","fileAbsolutePath":"/tmp/35443907/src/pages/components/file-uploader/style.mdx"}}}}