# Adeo Mozaic-Designsystem ## Adeo Mozaic-Designsystem – Interface-Vorschau Gib eine Menge ein oder ändere sie schrittweise, teste die Grenzwerte und erstelle eine lokale Materialliste. ## Adeo Mozaic-Designsystem – Designreferenz Die Mozaic-Dokumentation zu SCSS/BEM nennt auf den Grundlagen- und Installationsseiten v1.85.0; in der Referenz zum Mengensteuerungscode ist v1.76.0 angegeben. Dies sind dokumentierte Referenzstände und keine Aussage dazu, dass alle Seiten dieselbe neueste Paketversion verwenden. ### Referenzen zur Magic Unit | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | mu025 | 4px | Rem-basierte Abstandsreferenz; das Pixeläquivalent setzt die dokumentierte Basis von 16 px voraus. | | mu050 | 8px | Rem-basierte Abstandsreferenz; das Pixeläquivalent setzt die dokumentierte Basis von 16 px voraus. | | mu075 | 12px | Rem-basierte Abstandsreferenz; das Pixeläquivalent setzt die dokumentierte Basis von 16 px voraus. | | mu100 | 16px | Rem-basierte Abstandsreferenz; das Pixeläquivalent setzt die dokumentierte Basis von 16 px voraus. | | mu125 | 20px | Rem-basierte Abstandsreferenz; das Pixeläquivalent setzt die dokumentierte Basis von 16 px voraus. | | mu150 | 24px | Rem-basierte Abstandsreferenz; das Pixeläquivalent setzt die dokumentierte Basis von 16 px voraus. | | mu175 | 28px | Rem-basierte Abstandsreferenz; das Pixeläquivalent setzt die dokumentierte Basis von 16 px voraus. | | mu200 | 32px | Rem-basierte Abstandsreferenz; das Pixeläquivalent setzt die dokumentierte Basis von 16 px voraus. | | mu250 | 40px | Rem-basierte Abstandsreferenz; das Pixeläquivalent setzt die dokumentierte Basis von 16 px voraus. | | mu300 | 48px | Rem-basierte Abstandsreferenz; das Pixeläquivalent setzt die dokumentierte Basis von 16 px voraus. | | mu350 | 56px | Rem-basierte Abstandsreferenz; das Pixeläquivalent setzt die dokumentierte Basis von 16 px voraus. | | mu400 | 64px | Rem-basierte Abstandsreferenz; das Pixeläquivalent setzt die dokumentierte Basis von 16 px voraus. | | mu500 | 80px | Rem-basierte Abstandsreferenz; das Pixeläquivalent setzt die dokumentierte Basis von 16 px voraus. | | mu600 | 96px | Rem-basierte Abstandsreferenz; das Pixeläquivalent setzt die dokumentierte Basis von 16 px voraus. | | mu700 | 112px | Rem-basierte Abstandsreferenz; das Pixeläquivalent setzt die dokumentierte Basis von 16 px voraus. | ### Schaltflächenabmessungen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | Small height | 32px / 2mu | Kompakte Steuerelemente. | | Medium height | 48px / 3mu | Für die Mengensteuerung auf Mobilgeräten verwenden. | | Large height | 56px / 3.5mu | Große, stark hervorgehobene Aktion. | | Text + icon, small / medium | 24px icon | Symbol und Beschriftung ausgewogen halten. | | Text + icon, large | 32px icon | Große Schaltfläche. | | Icon-only, medium / large | 32px icon | Quadratisches Steuerelement. | ### Hierarchie des Fließtexts | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | mt-body-m | 16px regular | Standard-Fließtext. | | Small body | 14px | Empfohlene Mindestgröße für mehrzeiligen Fließtext. | | Large body | 18px | Empfohlene maximale Absatzgröße. | ### Aufbau der Mengensteuerung | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | mc-quantity-selector | Wrapper | Enthält zwei Steuerelemente und das Eingabefeld. | | mc-quantity-selector__input | Input element | Zusätzlich mc-text-input anwenden. | | mc-quantity-selector__button-left | Decrement element | Zusätzlich mc-button--square und --bordered anwenden. | | mc-quantity-selector__button-right | Increment element | Zusätzlich mc-button--square und --bordered anwenden. | | Small composition | mc-text-input--s + mc-button--s | Die gesamte Gruppe gemeinsam ändern. | | is-disabled | Visual state class | Für das tatsächliche Verhalten mit dem nativen Attribut disabled kombinieren. | ### Erstellung und Anpassung | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | postcssPluginConfig | @mozaic-ds/css-dev-tools/postcssPluginConfig | Erforderliche Plugin-Liste. | | Parser | postcss-scss | SCSS-Quellcode lesen. | | Production environment | MOZAIC_ENV=production | Ermöglicht die Konfiguration von Produktions-Plugins. | ### Abstandshilfen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | mu-mb-100 | 16px bottom margin | Abstand zwischen Komponenten. | | mu-pl-050 | 8px left padding | Abstände über Hilfsklassen. | | make-space-util(m, t, 075) | Top margin at mu075 | Eine ausgewählte Hilfsklasse generieren. | ## Adeo Mozaic-Designsystem – vollständiger Leitfaden Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface. Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen. ## Adeo Mozaic-Designsystem: SCSS-Komponenten mit einer konfigurierbaren Einzelhandelsidentität ### ADEO ist die Organisation, nicht die Standardvoreinstellung > Mozaic stellt Quellstile und Tokens getrennt von Schriftarten und SVG-Symbolen bereit. Das Standard-Token-Theme ist Leroy Merlin; ADEO ist eine ausdrücklich wählbare Voreinstellung. Eine grüne Originalvorschau ist daher kein Beleg für eine offizielle ADEO-Unternehmensfarbe. Lege für die ADEO-Voreinstellung eine Datei namens mozaic.config.js mit preset: "adeo" und tokens.localTokensExportPath an und führe anschließend npx mozaic-tokens-build aus. Ein benutzerdefiniertes Token-Verzeichnis führt einen Deep Merge der entsprechenden JSON-Pfade durch, anstatt nicht zugehörige Werte zu ersetzen. Theme-Generierung und Komponentenstile sind getrennte Build-Aufgaben. - styles stellt SCSS-Komponenten bereit. - tokens stellt Quell- und generierte Token-Formate bereit. - web-fonts und icons stellen separate Assets bereit. - css-dev-tools stellt Build- und Lint-Konfigurationen bereit. Unterstützende Spezifikation lesen ## Adeo Mozaic-Designsystem: Magic Unit verwenden, ohne Textcontainer starr zu begrenzen ### Eine rem-basierte Referenz mit 16 px Im unteren Bereich von Mozaics Skala gibt es Schritte von einem Viertel der Einheit, im mittleren Bereich Schritte von einer halben Einheit und bei größeren Abständen ganze Einheiten. Die Referenztabelle zeigt die tatsächlich benannten Abstufungen, ohne ein zweites Abstandssystem einzuführen. Der Planer verwendet Abstände von 16 px, Innenabstände von 24 px und eine Steuerelementhöhe von 48 px. Damit folgt die Komponente demselben Rhythmus, während umgebende Karten und Texte flexibel wachsen können. Eine minimale Steuerelementhöhe ist besser, als eine übersetzte oder vergrößerte Beschriftung in einem starren Inhaltsbereich abzuschneiden. Unterstützende Spezifikation lesen ## Adeo Mozaic-Designsystem: Fließtext neben dichten Steuerelementen gut lesbar halten ### Drei praktische Schriftgrößen für Fließtext Die dokumentierte Fließtextskala hat 16 px in normaler Stärke als Mittelwert. 14 px ist die empfohlene Untergrenze für mehrzeiligen Text, 18 px die empfohlene Obergrenze für Absätze. Die Vorschau verwendet einen Systemschriftarten-Fallback und gibt nicht vor, das Web-Font-Paket von Mozaic mitzuliefern. Verwende den größeren Titel, um das Projekt zu benennen, Fließtext, um die Berechnung zu erläutern, und eine kleinere Zusatzzeile, um den Umfang des Beispiels zu beschreiben. Die Materialwerte bleiben echter Text und werden nicht in die Regalillustration hineingezeichnet. Unterstützende Spezifikation lesen ## Adeo Mozaic-Designsystem: Eine Komponente, drei aufeinander abgestimmte Elemente ### Der Wrapper stellt keinen Anwendungsstatus bereit Die Mengensteuerung kombiniert eine quadratische Schaltfläche mit Umrandung zum Verringern, ein numerisches Eingabefeld und eine passende Schaltfläche zum Erhöhen. Importiere die Stile aller drei Komponenten, einschließlich Texteingabe und Schaltfläche; nur quantity-selector zu importieren ergibt nicht die dokumentierte Komposition. Wenn Sie eine kompakte Variante verwenden, ändern Sie die Größe von Schaltflächen und Eingabefeldern gemeinsam. Die Nutzungshinweise verlangen an kleinen Breakpoints die mittlere Größe. Auf einem Smartphone alles zu verkleinern, wäre also die falsche Optimierung. Die Vorschau behält Steuerelemente mit 48px bei und stapelt stattdessen die umgebenden Elemente. Unterstützende Spezifikation lesen ## Adeo Mozaic Designsystem: Die Gestaltung von Grenzwerten muss dem tatsächlichen Verhalten entsprechen ### Bei einer Texteingabe gibt es mehr Zustände als Plus und Minus Das ursprüngliche Beispiel validiert Ganzzahlen von 1 bis 12. Bei eins ist das Verringern tatsächlich deaktiviert, bei zwölf das Erhöhen. Die Klasse is-disabled allein würde die Aktivierung per Tastatur nicht verhindern. Das native disabled-Attribut und die visuelle Klasse sind aufeinander abgestimmt. Ein leerer oder gebrochener Eingabewert wird nicht stillschweigend in eine plausible Materialliste umgewandelt. Beim Absenden wird der zulässige Bereich erläutert und das Feld fokussiert. Bei einer anschließenden Änderung wird das zuvor erstellte Ergebnis gelöscht, da es sich auf die vorherige Menge bezog. Die Berechnung der Regalböden ist ein fiktives Beispiel und keine bauliche oder kaufmännische Empfehlung. 1. Den eingegebenen Wert auslesen, ohne eine leere Zeichenfolge als null zu behandeln. 2. Ganzzahligkeit und Wertebereich prüfen, bevor die Beispielanzahlen berechnet werden. 3. Beide Grenzwert-Schaltflächen und den barrierefrei zugänglichen Fehlerstatus aktualisieren. 4. Erst nach erfolgreicher Validierung eine lokale Momentaufnahme erstellen. Unterstützende Spezifikation lesen ## Adeo Mozaic Designsystem: Eine einzige primäre Aktion für das Projektergebnis verwenden ### Schrittweise Änderung und Vorbereitung voneinander trennen Der Stepper verwendet zurückhaltende, umrandete quadratische Steuerelemente, da er einen Eingabewert ändert. Die hervorgehobene Schaltfläche „Materialliste vorbereiten“ wirkt sich auf das gesamte Formular aus. Zwei nebeneinanderliegende, gleichfarbige hervorgehobene Aktionen würden diesen Unterschied verwischen. In der resultierenden Meldung wird ausdrücklich darauf hingewiesen, dass nichts bestellt wurde. Es gibt keinen vorgetäuschten Ladezustand, Zahlungsablauf oder Netzwerkaufruf. Eine konkrete Zusammenfassung genügt, um den Zusammenhang zwischen Werten und Aktionen zu veranschaulichen. Unterstützende Spezifikation lesen ## Adeo Mozaic Designsystem: Die dokumentierten Importe über die Mozaic-Pipeline kompilieren ### Zuerst die Einstellungen, dann die Komponentenausgabe Der Import aller Einstellungen stellt Variablen, Funktionen und Mixins bereit, erzeugt für sich genommen aber kein CSS für Komponenten. Das bereitgestellte Bundle lädt anschließend text-input, button und quantity-selector. Die mitgelieferte Plugin-Konfiguration löst die Mozaic-Importpfade auf und führt die vorgesehenen Verarbeitungsschritte aus. Die Einrichtung stellt einen PostCSS-CLI-Runner bereit, da das Plugin-Paket keinen eigenen mitliefert. Für die Produktion ändert MOZAIC_ENV die Plugin-Konfiguration. Auf der Installationsseite wird jetzt Node 20+ vorausgesetzt und Dart Sass empfohlen. Ältere Hinweise zu Node Sass sollten nicht als Grund für die Installation des veralteten Compilers herangezogen werden. Unterstützende Spezifikation lesen ## Adeo Mozaic Designsystem: Abstände außerhalb der Komponenteninterna mit Utilities festlegen ### Skalenwerte verwenden, wenn das Layout in den Zuständigkeitsbereich der Komponente fällt Die Margin- und Padding-Utilities von Mozaic sind für Abstände zwischen Komponenten vorgesehen. Innerhalb einer neuen Komponente sollten Sie SCSS-Variablen für Magic Units verwenden, damit die Komponente in sich geschlossen bleibt. Um die gewünschte Dimension beizubehalten, muss unter Umständen ein Rahmen abgezogen werden, etwa mit calc($mu025 - 1px). Die Offline-Demo beansprucht nicht, Mozaic CSS nativ auszuführen. Sie interpretiert die dokumentierten Maße und die Struktur der Mengenangabe mit eigenen Farben, einer CSS-Regalillustration und einer ausschließlich lokalen Interaktion. Der separate Codeblock enthält die tatsächlichen Bibliotheksklassen und die Build-Anbindung. Unterstützende Spezifikation lesen ## Adeo Mozaic – Beispiele für Komponenten des Designsystems ### Vollständige, eigenständige interaktive Demo Speichere das vollständige Dokument als index.html und öffne es in einem Browser. Eigenständige Offline-Interpretation von Mozaics Magic Unit und Mengensteuerung für mittlere Größen mit HTML/CSS; eigene Illustration und Anwendungspalette, keine native CSS-Bibliothek. ``` Shelf materials planner
PROJECT WORKSHOPOriginal Mozaic interpretation

SMALL PROJECT · BIG DIFFERENCE

Make room for what matters.

Plan a simple shelf arrangement and prepare its sample materials list.

Your shelf project

Each sample shelf uses one board, two brackets and four screws.

Choose a whole number from 1 to 12.

2Boards
4Brackets
8Screws
``` Code-Referenz - Aus den Regalmengen entsteht eine Materialliste, keine Bestellung. Das native Markup benötigt die dokumentierte Mozaic-PostCSS-Ausgabe; dieses eigenständige Dokument enthält eigene Interpretationsstile. ### Begrenzte Regalmenge und abgeleitete Materialliste Echte Mozaic-Klassen umschließen ein natives Zahlenfeld. JavaScript übernimmt die Ganzzahlvalidierung, deaktiviert die Schaltflächen an den Grenzen und erstellt eine ausschließlich lokale Zusammenfassung. ``` Shelf materials

Plan a shelf project

Choose 1 to 12. Each sample shelf needs two brackets and four screws.

``` Code-Referenz - Die beiden Stepper-Schaltflächen verwenden type="button", damit sie das Formular nicht absenden. - Die nativen Attribute min/max/step behalten ihre Bedeutung; eine benutzerdefinierte Validierung deckt leere und gebrochene Werte ab. - Bei einer Mengenänderung wird der zuvor vorbereitete Stand ungültig. ## Adeo Mozaic – Einrichtung des Designsystem-Agenten ### Ausgangspunkt für die Implementierung Öffentlicher SCSS-Workflow mit der dokumentierten PostCSS-Konfiguration. Speichere das HTML-Beispiel unter public/index.html. Der native Paket-Build wurde hier nicht ausgeführt; die Offline-Vorschau ist eine unabhängige Interpretation. Die aktuellen Installationshinweise verwenden Dart Sass und ersetzen damit die Angaben zu Node Sass auf der älteren PostCSS-Seite. ``` # Node 20+. Use a CommonJS project for this configuration. npm install @mozaic-ds/styles sass npm install --save-dev @mozaic-ds/css-dev-tools postcss postcss-cli postcss-scss # Save the configuration and SCSS below, then build: npx postcss src/bundle.scss --output public/mozaic.css # Production build on a POSIX shell: MOZAIC_ENV=production npx postcss src/bundle.scss --output public/mozaic.css // postcss.config.js module.exports = { syntax: require('postcss-scss'), plugins: require('@mozaic-ds/css-dev-tools/postcssPluginConfig') }; // src/bundle.scss — settings must precede components. @import 'settings-tools/all-settings'; @import 'components/c.text-input'; @import 'components/c.button'; @import 'components/c.quantity-selector'; ``` ### Ein Prompt für dein Projekt ``` Erstelle eine Mozaic-SCSS-Komposition mit settings-tools/all-settings vor text-input, button und quantity-selector. Verwende auf kleinen Bildschirmen mittlere Steuerelemente mit 48 px Höhe, deaktiviere Grenzschaltflächen nativ, validiere eingegebene Ganzzahlen und erstelle eine ausschließlich lokale Zusammenfassung. Verwende die dokumentierte PostCSS-Pipeline und unterscheide zwischen dem Leroy-Merlin-Standarddesign und der ADEO-Voreinstellung. ``` ## Adeo Mozaic – Quellen und Geltungsbereich des Designsystems Unabhängige OpenDesign-Referenz zu Mozaic. Das Beispiel ist weder ein ADEO- oder Leroy-Merlin-Shop noch eine Live-Bestellung oder eine Anleitung zur Konstruktion. Die Dokumentationsstände weisen unterschiedliche Versionsangaben auf. - Installation Pakete, Node und Dart Sass. - PostCSS-Konfiguration Erforderliche Plugin-Pipeline. - SCSS-Imports Abhängigkeitseinstellungen und Importreihenfolge. - Magic Unit Tatsächliche Abstandsabstufungen. - Textkörper-Stile Dokumentierte Absatzgrößen. - Schaltflächen Maße und Aktionshierarchie. - Verwendung der Mengensteuerung Responsive Größe und vorgesehener Einsatz. - Code für die Mengensteuerung BEM-Struktur und Abhängigkeits-Imports. - Anpassung von Design-Tokens Standarddesign und Überschreibungen. - Abstandshilfen Utility-Klassen und Komponentenabstände. ## Adeo Mozaic – Ressourcen zum Designsystem ### Adobe Spectrum Lernen Sie React Spectrum v3 anhand einer auswählbaren Tabelle für kreative Assets und eines Inspektors für Exportvorgaben kennen. Erfahren Sie mehr über Provider-Themes und Eingabeskalen, unterstützte Style-Props, schlüsselbasierte Collections und die Abgrenzung zwischen v3 und der neueren Implementierung Spectrum 2. ### Alaska Airlines Auro Entdecke Auro’s Alaska-Theme anhand echter semantischer Farb- und Typografie-Tokens, klassenbasierter Typografie und der nativen Flugkomponente. Zwei eigene Flugdaten zeigen lokale Filterung und Auswahl, ohne den Eindruck echter Airline-Angebote oder Buchungen zu erwecken. ### Arco Design Erstelle mit Arcos gesteuerter Transfer-Komponente eine Auswahl für Berichtsabschnitte. Entdecke die tatsächlichen Abstands- und Größenabstufungen, CSS-Variablenkonventionen, semantischen Oberflächen und den Unterschied zwischen dem Auswählen und dem Verschieben von Zeilen. - [Implementierungsreferenz](https://mozaic.adeo.cloud/components/form/quantity-selector/) - [Quelle](https://mozaic.adeo.cloud/foundations/spacing/magic-unit/) - [Quelle](https://mozaic.adeo.cloud/components/buttons/) - [Quelle](https://mozaic.adeo.cloud/foundations/typography/body-styles/) - [Quelle](https://mozaic.adeo.cloud/components/form/quantity-selector/code/) - [Quelle](https://mozaic.adeo.cloud/get-started/developers/installation/postcss/) - [Quelle](https://mozaic.adeo.cloud/foundations/spacing/margin-and-paddings/code/) - [Unterstützende Spezifikation lesen](https://mozaic.adeo.cloud/get-started/developers/customize-tokens/) - [Unterstützende Spezifikation lesen](https://mozaic.adeo.cloud/foundations/spacing/magic-unit/) - [Unterstützende Spezifikation lesen](https://mozaic.adeo.cloud/foundations/typography/body-styles/) - [Unterstützende Spezifikation lesen](https://mozaic.adeo.cloud/components/form/quantity-selector/) - [Unterstützende Spezifikation lesen](https://mozaic.adeo.cloud/components/form/quantity-selector/code/) - [Unterstützende Spezifikation lesen](https://mozaic.adeo.cloud/components/buttons/) - [Unterstützende Spezifikation lesen](https://mozaic.adeo.cloud/get-started/developers/installation/import/) - [Unterstützende Spezifikation lesen](https://mozaic.adeo.cloud/foundations/spacing/margin-and-paddings/code/) - [Code-Referenz](https://mozaic.adeo.cloud/components/form/quantity-selector/) - [Code-Referenz](https://mozaic.adeo.cloud/components/form/quantity-selector/code/) - [Installation Pakete, Node und Dart Sass.](https://mozaic.adeo.cloud/get-started/developers/installation/) - [PostCSS-Konfiguration Erforderliche Plugin-Pipeline.](https://mozaic.adeo.cloud/get-started/developers/installation/postcss/) - [SCSS-Imports Abhängigkeitseinstellungen und Importreihenfolge.](https://mozaic.adeo.cloud/get-started/developers/installation/import/) - [Magic Unit Tatsächliche Abstandsabstufungen.](https://mozaic.adeo.cloud/foundations/spacing/magic-unit/) - [Textkörper-Stile Dokumentierte Absatzgrößen.](https://mozaic.adeo.cloud/foundations/typography/body-styles/) - [Schaltflächen Maße und Aktionshierarchie.](https://mozaic.adeo.cloud/components/buttons/) - [Verwendung der Mengensteuerung Responsive Größe und vorgesehener Einsatz.](https://mozaic.adeo.cloud/components/form/quantity-selector/) - [Code für die Mengensteuerung BEM-Struktur und Abhängigkeits-Imports.](https://mozaic.adeo.cloud/components/form/quantity-selector/code/) - [Anpassung von Design-Tokens Standarddesign und Überschreibungen.](https://mozaic.adeo.cloud/get-started/developers/customize-tokens/) - [Abstandshilfen Utility-Klassen und Komponentenabstände.](https://mozaic.adeo.cloud/foundations/spacing/margin-and-paddings/code/)