diff --git a/docs/styleguide/components/interactive-elements.html b/docs/styleguide/components/interactive-elements.html index 7fd70a8..1ccb7f9 100644 --- a/docs/styleguide/components/interactive-elements.html +++ b/docs/styleguide/components/interactive-elements.html @@ -847,7 +847,28 @@ +
+

Component: File Input

+
+
+
+ + + +
+
+
+
+ + + diff --git a/docs/styleguide/semantic-tokens-patterns.html b/docs/styleguide/semantic-tokens-patterns.html index 249e034..83b8520 100644 --- a/docs/styleguide/semantic-tokens-patterns.html +++ b/docs/styleguide/semantic-tokens-patterns.html @@ -148,6 +148,14 @@ layout-delete-confirmation-target-dim-opacityopacity-delete-confirmation-target-dimDeckkraft der grauen Überlagerung auf dem zu löschenden Objekt. layer-delete-confirmation-overlaydimension-layer-delete-confirmation-overlayZ-Index-Layer des schwebenden Bestätigungsfensters. + +

Datei-Upload

+ + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
surface-file-upload-dropzonesurface-form-previewHintergrundfläche des auswählbaren Upload-Bereichs.
surface-file-upload-file-itemsurface-control-defaultHintergrundfläche eines Eintrags in der Dateiliste.
text-file-upload-metatext-control-disabledTextfarbe für Dateigröße und ergänzende Dateimetadaten.
text-file-upload-errorcolor-signal-redTextfarbe für Validierungs- und Upload-Fehlermeldungen.
diff --git a/docs/styleguide/styleguide.css b/docs/styleguide/styleguide.css index 61459dc..376890b 100644 --- a/docs/styleguide/styleguide.css +++ b/docs/styleguide/styleguide.css @@ -2,6 +2,7 @@ @import "./styles/02-base.css"; @import "./styles/03-typography-helpers.css"; @import "./styles/10-components-interactive-elements.css"; +@import "./styles/47-patterns-file-upload.css"; @import "./styles/20-patterns-portal-header.css"; @import "./styles/21-patterns-options-row.css"; @import "./styles/22-patterns-object-card.css"; diff --git a/docs/styleguide/styles/10-components-interactive-elements.css b/docs/styleguide/styles/10-components-interactive-elements.css index 91b280b..765fadd 100644 --- a/docs/styleguide/styles/10-components-interactive-elements.css +++ b/docs/styleguide/styles/10-components-interactive-elements.css @@ -1585,3 +1585,52 @@ color: var(--text-hyperlink); text-decoration: none; } + +/* Component: File Input */ +.sg-file-input { + width: 100%; +} + +.sg-file-input__row { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--spacing-large); + width: 100%; +} + +.sg-file-input__control { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +.sg-file-input:focus-within .sg-file-input__trigger { + outline: 2px solid var(--text-hyperlink); + outline-offset: 2px; +} + +.sg-file-input__trigger { + align-self: flex-start; +} + +@media (max-width: 48rem) { + .sg-file-input__row { + align-items: flex-start; + flex-direction: column; + } +} + +.sg-file-input--disabled { + opacity: var(--disabled-opacity); +} + +.sg-file-input--disabled .sg-file-input__trigger { + cursor: not-allowed; +} diff --git a/docs/styleguide/styles/47-patterns-file-upload.css b/docs/styleguide/styles/47-patterns-file-upload.css new file mode 100644 index 0000000..3e1f594 --- /dev/null +++ b/docs/styleguide/styles/47-patterns-file-upload.css @@ -0,0 +1,87 @@ +/* ========================================================= */ +/* Patterns: Datei-Upload */ +/* ========================================================= */ + +.sg-file-upload { + --surface-file-upload-dropzone: var(--surface-form-preview); + --surface-file-upload-file-item: var(--surface-control-default); + --text-file-upload-meta: var(--text-control-disabled); + --text-file-upload-error: var(--color-signal-red); + display: flex; + flex-direction: column; + gap: var(--spacing-large); + width: 100%; + max-width: var(--layout-input-field-max-width); +} + +.sg-file-upload__status, +.sg-file-upload__file-meta { + margin: var(--spacing-small) 0 0; +} + +.sg-file-upload__dropzone { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--spacing-large); + width: 100%; + padding: var(--spacing-large); + background: var(--surface-file-upload-dropzone); + border: 1px dashed var(--surface-button-active); + border-radius: var(--radius-interaction); +} + +.sg-file-upload__dropzone[data-drag-over="true"] { + outline: 2px solid var(--text-hyperlink); + outline-offset: 2px; +} + +.sg-file-upload__files { + display: flex; + flex-direction: column; + gap: var(--spacing-small); + margin: 0; + padding: 0; + list-style: none; +} + +.sg-file-upload__file { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--spacing-large); + padding: var(--spacing-small) var(--spacing-large); + color: var(--text-control-default); + background: var(--surface-file-upload-file-item); + border-radius: var(--radius-interaction); +} + +.sg-file-upload__file-name { + min-width: 0; + overflow-wrap: anywhere; +} + +.sg-file-upload__file-meta { + color: var(--text-file-upload-meta); +} + +.sg-file-upload__remove { + flex: 0 0 auto; +} + +.sg-file-upload__error { + color: var(--text-file-upload-error); +} + +@media (max-width: 48rem) { + .sg-file-upload__dropzone { + align-items: flex-start; + flex-direction: column; + } + + .sg-file-upload__file { + align-items: flex-start; + flex-direction: column; + gap: var(--spacing-small); + } +} diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css index 2fd4e72..e3de158 100644 --- a/public/assets/styleguide.upstream.css +++ b/public/assets/styleguide.upstream.css @@ -2107,6 +2107,143 @@ section + section { text-decoration: none; } +/* Component: File Input */ +.sg-file-input { + width: 100%; +} + +.sg-file-input__row { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--spacing-large); + width: 100%; +} + +.sg-file-input__control { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +.sg-file-input:focus-within .sg-file-input__trigger { + outline: 2px solid var(--text-hyperlink); + outline-offset: 2px; +} + +.sg-file-input__trigger { + align-self: flex-start; +} + +@media (max-width: 48rem) { + .sg-file-input__row { + align-items: flex-start; + flex-direction: column; + } +} + +.sg-file-input--disabled { + opacity: var(--disabled-opacity); +} + +.sg-file-input--disabled .sg-file-input__trigger { + cursor: not-allowed; +} + +/* ========================================================= */ +/* Patterns: Datei-Upload */ +/* ========================================================= */ + +.sg-file-upload { + --surface-file-upload-dropzone: var(--surface-form-preview); + --surface-file-upload-file-item: var(--surface-control-default); + --text-file-upload-meta: var(--text-control-disabled); + --text-file-upload-error: var(--color-signal-red); + display: flex; + flex-direction: column; + gap: var(--spacing-large); + width: 100%; + max-width: var(--layout-input-field-max-width); +} + +.sg-file-upload__status, +.sg-file-upload__file-meta { + margin: var(--spacing-small) 0 0; +} + +.sg-file-upload__dropzone { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--spacing-large); + width: 100%; + padding: var(--spacing-large); + background: var(--surface-file-upload-dropzone); + border: 1px dashed var(--surface-button-active); + border-radius: var(--radius-interaction); +} + +.sg-file-upload__dropzone[data-drag-over="true"] { + outline: 2px solid var(--text-hyperlink); + outline-offset: 2px; +} + +.sg-file-upload__files { + display: flex; + flex-direction: column; + gap: var(--spacing-small); + margin: 0; + padding: 0; + list-style: none; +} + +.sg-file-upload__file { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--spacing-large); + padding: var(--spacing-small) var(--spacing-large); + color: var(--text-control-default); + background: var(--surface-file-upload-file-item); + border-radius: var(--radius-interaction); +} + +.sg-file-upload__file-name { + min-width: 0; + overflow-wrap: anywhere; +} + +.sg-file-upload__file-meta { + color: var(--text-file-upload-meta); +} + +.sg-file-upload__remove { + flex: 0 0 auto; +} + +.sg-file-upload__error { + color: var(--text-file-upload-error); +} + +@media (max-width: 48rem) { + .sg-file-upload__dropzone { + align-items: flex-start; + flex-direction: column; + } + + .sg-file-upload__file { + align-items: flex-start; + flex-direction: column; + gap: var(--spacing-small); + } +} + /* ========================================================= */ /* Patterns: Portal Header */ /* ========================================================= */ diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json index 7c807ab..47c7857 100644 --- a/public/assets/styleguide.upstream.meta.json +++ b/public/assets/styleguide.upstream.meta.json @@ -1,7 +1,7 @@ { "styleguideVersion": "2026.05.18.1", - "styleguideCommit": "7b733e5", - "syncedAtUtc": "2026-09-08T07:53:24Z", + "styleguideCommit": "5b2c75d", + "syncedAtUtc": "2026-09-08T09:28:53Z", "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide", "mirroredDocsPath": "docs/styleguide" } diff --git a/public/assets/styles.css b/public/assets/styles.css index 2fd4e72..e3de158 100644 --- a/public/assets/styles.css +++ b/public/assets/styles.css @@ -2107,6 +2107,143 @@ section + section { text-decoration: none; } +/* Component: File Input */ +.sg-file-input { + width: 100%; +} + +.sg-file-input__row { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--spacing-large); + width: 100%; +} + +.sg-file-input__control { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +.sg-file-input:focus-within .sg-file-input__trigger { + outline: 2px solid var(--text-hyperlink); + outline-offset: 2px; +} + +.sg-file-input__trigger { + align-self: flex-start; +} + +@media (max-width: 48rem) { + .sg-file-input__row { + align-items: flex-start; + flex-direction: column; + } +} + +.sg-file-input--disabled { + opacity: var(--disabled-opacity); +} + +.sg-file-input--disabled .sg-file-input__trigger { + cursor: not-allowed; +} + +/* ========================================================= */ +/* Patterns: Datei-Upload */ +/* ========================================================= */ + +.sg-file-upload { + --surface-file-upload-dropzone: var(--surface-form-preview); + --surface-file-upload-file-item: var(--surface-control-default); + --text-file-upload-meta: var(--text-control-disabled); + --text-file-upload-error: var(--color-signal-red); + display: flex; + flex-direction: column; + gap: var(--spacing-large); + width: 100%; + max-width: var(--layout-input-field-max-width); +} + +.sg-file-upload__status, +.sg-file-upload__file-meta { + margin: var(--spacing-small) 0 0; +} + +.sg-file-upload__dropzone { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--spacing-large); + width: 100%; + padding: var(--spacing-large); + background: var(--surface-file-upload-dropzone); + border: 1px dashed var(--surface-button-active); + border-radius: var(--radius-interaction); +} + +.sg-file-upload__dropzone[data-drag-over="true"] { + outline: 2px solid var(--text-hyperlink); + outline-offset: 2px; +} + +.sg-file-upload__files { + display: flex; + flex-direction: column; + gap: var(--spacing-small); + margin: 0; + padding: 0; + list-style: none; +} + +.sg-file-upload__file { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--spacing-large); + padding: var(--spacing-small) var(--spacing-large); + color: var(--text-control-default); + background: var(--surface-file-upload-file-item); + border-radius: var(--radius-interaction); +} + +.sg-file-upload__file-name { + min-width: 0; + overflow-wrap: anywhere; +} + +.sg-file-upload__file-meta { + color: var(--text-file-upload-meta); +} + +.sg-file-upload__remove { + flex: 0 0 auto; +} + +.sg-file-upload__error { + color: var(--text-file-upload-error); +} + +@media (max-width: 48rem) { + .sg-file-upload__dropzone { + align-items: flex-start; + flex-direction: column; + } + + .sg-file-upload__file { + align-items: flex-start; + flex-direction: column; + gap: var(--spacing-small); + } +} + /* ========================================================= */ /* Patterns: Portal Header */ /* ========================================================= */