# REI Cedar-Designsystem ## REI Cedar-Designsystem: Interface-Vorschau Verwenden Sie native Cedar-Kacheln, um Versand oder Abholung auszuwählen, einschließlich Tastaturnavigation und einer nicht verfügbaren Option. ## REI Cedar-Designsystem: Designreferenz Werte aus dem REI-Theme von @rei/cdr-tokens 14.0.1 extrahiert; natives Komponentenverhalten mit @rei/cedar 17.1.0 überprüft. ### Farbrollen des REI-Themes | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | cdr-color-background-button-primary-rest | #1f513f | Füllfarbe der primären Schaltfläche. | | cdr-color-background-button-primary-hover | #c7dfd1 | Primäre Hover-Fläche. | | cdr-color-background-primary | #ffffff | Standardinhaltshintergrund. | | cdr-color-background-secondary | #F4F2ED | Sekundäre Oberfläche. | | cdr-color-text-button-primary | #fafbf9 | Beschriftung der primären Schaltfläche. | | cdr-color-text-primary | #4b4a48 | Rolle für den Haupttext. | | cdr-color-text-secondary | #736e65 | Unterstützender Text. | | cdr-color-text-error | #811823 | Text der Fehlermeldung. | | cdr-color-border-primary | #d5cfc3 | Begrenzung der primären Oberfläche. | | cdr-color-border-secondary | #958e83 | Sekundäre Rahmenrolle. | ### Abstände und Radius bei einer Root-Größe von 10px | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | cdr-space-zero | 0 | Im Cedar-Root entspricht 1rem 10px; wenden Sie diese Werte nicht unverändert auf einen 16px-Root an. | | cdr-space-sixteenth-x | 0.1rem | Im Cedar-Root entspricht 1rem 10px; wenden Sie diese Werte nicht unverändert auf einen 16px-Root an. | | cdr-space-eighth-x | 0.2rem | Im Cedar-Root entspricht 1rem 10px; wenden Sie diese Werte nicht unverändert auf einen 16px-Root an. | | cdr-space-three-sixteenth-x | 0.3rem | Im Cedar-Root entspricht 1rem 10px; wenden Sie diese Werte nicht unverändert auf einen 16px-Root an. | | cdr-space-quarter-x | 0.4rem | Im Cedar-Root entspricht 1rem 10px; wenden Sie diese Werte nicht unverändert auf einen 16px-Root an. | | cdr-space-three-eighth-x | 0.6rem | Im Cedar-Root entspricht 1rem 10px; wenden Sie diese Werte nicht unverändert auf einen 16px-Root an. | | cdr-space-half-x | 0.8rem | Im Cedar-Root entspricht 1rem 10px; wenden Sie diese Werte nicht unverändert auf einen 16px-Root an. | | cdr-space-three-quarter-x | 1.2rem | Im Cedar-Root entspricht 1rem 10px; wenden Sie diese Werte nicht unverändert auf einen 16px-Root an. | | cdr-space-one-x | 1.6rem | Im Cedar-Root entspricht 1rem 10px; wenden Sie diese Werte nicht unverändert auf einen 16px-Root an. | | cdr-space-one-and-a-half-x | 2.4rem | Im Cedar-Root entspricht 1rem 10px; wenden Sie diese Werte nicht unverändert auf einen 16px-Root an. | | cdr-space-two-x | 3.2rem | Im Cedar-Root entspricht 1rem 10px; wenden Sie diese Werte nicht unverändert auf einen 16px-Root an. | | cdr-space-three-x | 4.8rem | Im Cedar-Root entspricht 1rem 10px; wenden Sie diese Werte nicht unverändert auf einen 16px-Root an. | | cdr-space-four-x | 6.4rem | Im Cedar-Root entspricht 1rem 10px; wenden Sie diese Werte nicht unverändert auf einen 16px-Root an. | | cdr-radius-sharp | 0 | Eckenform aus dem festgelegten Token-Paket. | | cdr-radius-soft | 0.2rem | Eckenform aus dem festgelegten Token-Paket. | | cdr-radius-softer | 0.4rem | Eckenform aus dem festgelegten Token-Paket. | | cdr-radius-softest | 0.6rem | Eckenform aus dem festgelegten Token-Paket. | | cdr-radius-round | 999.9rem | Eckenform aus dem festgelegten Token-Paket. | ### Fulfillment-Kachel API | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | checked | boolean | Die ausgewählte Methode anzeigen. | | disabled | boolean | Nicht verfügbare Option; Zustandsänderungen verhindern. | | role | radio \| checkbox | Verwenden Sie radio, um eine einzelne Fulfillment-Methode auszuwählen. | | tabindex | 0 / -1 | Die Anwendung verwaltet einen einzelnen Tastaturfokuspunkt und die Pfeiltastennavigation. | | header slot | method label | Gut lesbarer Name der Auswahl. | | body slot | supporting details | Lieferzeit oder Abholort. | | footer slot | prominent detail | Kosten oder Verfügbarkeit. | | icon-right slot | selection indicator | Das Beispiel ergänzt die ausgewählte Methode um ein Häkchen. | | loading | boolean | Blendet den Body und Footer aus, behält aber Header und Abmessungen bei. | ## Vollständiger REI Cedar-Designsystem-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. ## REI Cedar-Designsystem: Vue-Laufzeit- und Stilabhängigkeiten ### Komponenten und Token gemeinsam festlegen > Das Beispiel verwendet @rei/cedar 17.1.0 mit @rei/cdr-tokens 14.0.1 und Vue 3. Das Komponentenpaket bietet modulare Einstiegspunkte. Dieses Beispiel importiert nur CdrButton und CdrFulfillmentTile sowie CSS, das von den darin verschachtelten Oberflächen-, Layout- und Textkomponenten benötigt wird. Im Quellcode sind alle Imports aufgeführt, denn das Verhalten von JavaScript allein garantiert keine gestylte Ausgabe. ### Keine proprietären Schriftarten in das Beispiel aufnehmen Die Installationsanleitung von Cedar unterscheidet zwischen der Verwendung von Komponenten und den Nutzungsrechten für REI-Schriftarten. Das Beispiel importiert weder cdr-fonts.css noch das Stylesheet-Bundle mit den Schriftdefinitionen. Für den Oberflächentext verwendet es eine serifenlose Systemschrift, für die originale redaktionelle Überschrift Georgia. Diese Ersatzschriften sind eine Entscheidung der Anwendung und nicht die REI-Markenschrift. ## REI Cedar-Designsystem: Token-Einheiten und Oberflächenfarben ### Die Cedar-Grundskalierung verwenden Cedar-Tokens geben einen Abstand von 16px als 1.6rem an, da eine Root-Größe von 10px vorausgesetzt wird. Bei einer Root-Größe von 16px würde derselbe Wert auf 25.6rem anwachsen. Das isolierte Beispiel setzt html auf 62.5% und verwendet für den Body eine Schriftgröße von 1.6rem. Ein Host-Produkt mit einer anderen Root-Größe benötigt eine bewusst definierte Integrationsgrenze, statt ein globales Reset in eine bestehende Website einzufügen. ### Tokens den Komponentenrollen zuordnen Die primäre Schaltfläche verwendet im Ruhezustand eine dunkelgrüne Füllfarbe und beim Hover eine hellgrüne. Oberflächen für Inhalte und Rahmen sind in warmen Neutraltönen gehalten. Die Tabelle enthält semantische Werte aus dem REI-Theme, nicht aus dem Theme der Dokumentationswebsite. Die dargestellte Tasche verwendet eigens gewählte Dekorationsfarben, die nicht als offizielle Cedar-Token-Exporte ausgegeben werden. ## REI Cedar-Designsystem: Zusammensetzung der Fulfillment-Kachel ### Pro Kachel nur eine änderbare Auswahl anbieten Eine Fulfillment-Kachel fasst eine Methode, Zeitangaben und Kosten oder Verfügbarkeit zusammen. Sie sollte keinen zweiten interaktiven Link oder Button enthalten. Im Beispiel befindet sich die Prüfaktion außerhalb der Radiogruppe, und für die nicht verfügbare Expressoption wird eine weiterhin lesbare Erklärung angezeigt. Die Slots für Kopfzeile, Inhalt und Fußzeile machen die Hierarchie deutlich. ### Auswahl nicht nur durch einen Rahmen kenntlich machen Für die ausgewählte Methode werden checked=true und ein Häkchen im Slot icon-right gesetzt. So ist die aktuelle Auswahl auch dann erkennbar, wenn sich dezente Rahmen schwer unterscheiden lassen. Ein Klick auf eine verfügbare Option aktualisiert nur die Auswahl; erst im separaten Prüfschritt wird die lokale Auswahl bestätigt. Deaktivierte Methoden aktualisieren niemals das Modell. ## REI Cedar-Designsystem: Produktkontext und responsives Layout ### Das Produkt neben seinen Auswahlmöglichkeiten anzeigen Auf breiteren Bildschirmen stehen eine originale CSS-Tagesrucksack-Illustration und eine Produktübersicht neben den Fulfillment-Optionen. Das Produkt ist fiktiv, und die Lieferangaben sind als Beispiele gekennzeichnet. Die Komposition veranschaulicht die warmen Oberflächen von Cedar, ohne REI-Produktfotos zu kopieren oder Echtzeit-Lagerbestände zu erfinden. ### Steuerelemente neu anordnen, nicht verkleinern Unter 700px werden die Auswahlmöglichkeiten zu einem Abschnitt in voller Breite, der auf eine kompakte Produktübersicht folgt. Dieser Schwellenwert von 700px ist eine anwendungsspezifische Layoutentscheidung und kein Cedar-Breakpoint-Token. Der Inhalt der Kacheln kann umbrechen, und die Gesamthöhe des Beispiels richtet sich nach dem Inhalt statt nach einem festen Viewport. Die Produktillustration bleibt dekorativ. ## REI Cedar-Designsystem: Auswahl, Tastaturbedienung und Feedback ### Das Radiobutton-Verhalten auf Anwendungsebene bereitstellen Die Kacheln stellen die Radiobutton-Semantik bereit, aber die Anwendung verwaltet die Gruppenbeschriftung, den ausgewählten Wert und das Fokusmodell. Nur die ausgewählte verfügbare Option ist in der Tab-Reihenfolge. Mit den Pfeiltasten wird durch verfügbare Optionen gewechselt, mit Pos1 und Ende werden die jeweiligen Endpunkte ausgewählt; die nicht verfügbare Expresslieferung wird übersprungen. Dieses Verhalten ist im vollständigen Quellcode enthalten und bleibt nicht als TODO für Barrierefreiheit offen. ### Veraltetes Prüf-Feedback löschen Die Prüfung der Auswahl schreibt einen zutreffenden lokalen Status, ohne zu behaupten, dass eine Bestellung aufgegeben wurde. Wird eine andere Kachel ausgewählt, wird das vorherige Ergebnis gelöscht. Der Statusbereich ist von der Methodenbeschreibung getrennt, sodass assistive Technologien das Feedback ankündigen können, ohne den zugänglichen Namen des Radiobuttons zu ändern. ## REI Cedar-Designsystem: vollständige Vue-Implementierung ### Denselben Bildschirm nativ nachbilden Erstelle ein Vite-Vue-Projekt, installiere die festgelegten Pakete und verwende die vollständigen Beispiele für main.js und cedar.css weiter unten. Behalte das Root-Element mit dem Namen root bei oder passe den Mount-Selektor an das Vite-Template an. Das Beispiel verwendet Vue-Renderfunktionen, sodass keine verborgene SFC-Vorverarbeitung nötig ist. 1. Die festgelegten Komponenten- und Token-Pakete installieren. 2. Alle Imports aus main.js für CSS beibehalten. 3. Die App in das Root-Element einbinden. 4. Mit den Pfeiltasten die Fulfillment-Option ändern und das lokale Ergebnis prüfen. ### Vor der Layout-Fehlersuche die Styles prüfen Bei der ersten Integrationsprüfung sollte sichergestellt werden, dass die Kacheln Oberflächen, Rahmen und Innenabstände haben und die Schaltfläche Cedar-Styling aufweist. Wenn die Oberfläche funktioniert, aber wie reiner Text aussieht, überprüfe die Komponenten-CSS- und Token-CSS-Imports. Sind die Abstände zu groß, prüfe die Schriftgröße des Root-Elements. Das sind unterschiedliche Ursachen, die jeweils eine eigene Lösung erfordern. ## REI Cedar-Designsystem: Übergabe an den Agenten und Abnahme ### Die Integrationsgrenze festlegen Bitte den Agenten um einen Fulfillment-Auswahldialog für Vue 3 mit den festgelegten Cedar-Komponenten und dem Token-Paket, ohne proprietäre Schriftarten. Gib die genauen Kachelzustände und das Tastaturverhalten vor. Ersetze bei einem realen Produkt die fiktiven Zeitangaben durch einen Backend-Vertrag und behandle Ladezustände und Fehler, bevor eine Bestellaktion freigeschaltet wird. ### Verhalten und Quellcode gemeinsam prüfen Die lokale Überprüfung umfasst die Auswahl per Pfeiltasten, einen sichtbaren Auswahlstatus, die lokale Bestätigung, das Löschen veralteter Ergebnisse und schmale Layouts. Die herunterladbare Anleitung enthält denselben Anwendungscode wie die Vorschau. Eine erfolgreiche Überprüfung zur Laufzeit macht die beispielhaften Lieferangaben nicht real und gewährt keine Erlaubnis zur Wiederverwendung des REI-Brandings. - Nicht verfügbare Methoden können nicht ausgewählt werden. - Wenn die Auswahl geändert wird, wird die vorherige Bestätigung gelöscht. - Es sind weder Schriftdateien noch Serviceaufrufe erforderlich. ## REI Cedar-Designsystem: Komponentenbeispiele ### main.js — vollständiger Vue-Fulfillment-Auswahldialog Native Komponenten, lokaler Zustand, roving Radiobutton-Fokus und alle erforderlichen Style-Imports. ``` import { createApp, h, ref } from "vue"; import CdrButton from "@rei/cedar/CdrButton"; import CdrFulfillmentTile from "@rei/cedar/CdrFulfillmentTile"; import "@rei/cedar/dist/cdr-reset.css"; import "@rei/cedar/dist/style/cdr-button.css"; import "@rei/cedar/dist/style/cdr-fulfillment-title.css"; import "@rei/cedar/dist/style/cdr-surface-selection.css"; import "@rei/cedar/dist/style/cdr-layout.css"; import "@rei/cdr-tokens/css"; import "@rei/cedar/dist/style/cdr-surface.css"; import "@rei/cedar/dist/style/cdr-body.css"; import "@rei/cedar/dist/style/cdr-subheading-sans.css"; import "./cedar.css"; const choices = [ { id: "ship", label: "Ship to home", detail: "Sample delivery: 3–5 days", price: "No delivery charge", available: true, }, { id: "pickup", label: "Pick up nearby", detail: "Sample location: North Trail", price: "Ready tomorrow", available: true, }, { id: "express", label: "Express delivery", detail: "Unavailable for this sample item", price: "Choose another method", available: false, }, ]; createApp({ setup() { const selected = ref("ship"), result = ref(""); function choose(id) { selected.value = id; result.value = ""; } function keyboard(e, id) { if ( [ "ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp", "Home", "End", ].includes(e.key) ) { e.preventDefault(); const ids = choices.filter((x) => x.available).map((x) => x.id); let next = e.key === "Home" ? ids[0] : e.key === "End" ? ids.at(-1) : ids[ (ids.indexOf(id) + (e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : ids.length - 1)) % ids.length ]; choose(next); document.getElementById("choice-" + next).focus(); } } return () => h("main", [ h("header", [ h("p", { class: "eyebrow" }, "OUTDOOR GEAR / ORIGINAL SPECIMEN"), h("h1", "Ready for the next trail"), h("p", "Choose a fulfillment method for this fictional daypack."), ]), h("div", { class: "composition" }, [ h("section", { class: "product", "aria-label": "Sample product" }, [ h("div", { class: "art", "aria-hidden": "true" }, [ h("div", { class: "pack" }, [h("i"), h("span"), h("b")]), ]), h("div", [ h("h2", "Ridge daypack · 24 L"), h("p", "A lightweight everyday pack for short outings."), h( "p", { class: "note" }, "Illustrated sample product · no inventory or purchase connection", ), ]), ]), h("section", { class: "options" }, [ h( "h2", { id: "fulfillment-label" }, "How would you like to receive it?", ), h( "div", { class: "tiles", role: "radiogroup", "aria-labelledby": "fulfillment-label", }, choices.map((c) => h( CdrFulfillmentTile, { id: "choice-" + c.id, role: "radio", tabindex: c.available && selected.value === c.id ? 0 : -1, checked: selected.value === c.id, disabled: !c.available, "aria-label": c.label, onClick: () => c.available && choose(c.id), onKeydown: (e) => keyboard(e, c.id), }, { header: () => c.label, "icon-right": () => selected.value === c.id ? h( "span", { "aria-hidden": "true", style: "font-size:2rem;color:#1f513f", }, "✓", ) : null, body: () => c.detail, footer: () => c.price, }, ), ), ), h("div", { class: "review" }, [ h( CdrButton, { onClick: () => { result.value = `Local selection: ${choices.find((c) => c.id === selected.value).label}. No order has been placed.`; }, }, () => "Review selection", ), h("p", { role: "status", class: "result" }, result.value), ]), ]), ]), h( "footer", "Native Cedar 17.1.0 fulfillment tiles and button. Original composition with system-font fallback; no REI proprietary fonts or photography.", ), ]); }, }).mount("#root"); ``` Code-Referenz - Verwende
in index.html. ### cedar.css — originale Produktkomposition Responsives Layout, eine CSS-Illustration und explizite Ersatzschriften. ``` html { font-size: 62.5%; } body { margin: 0; color: #2e2e2b; background: #fafbf9; font: 1.6rem/1.5 system-ui, sans-serif; } * { box-sizing: border-box; } main { padding: 3.2rem; } header { border-bottom: 1px solid #dcd6cb; margin-bottom: 3.2rem; padding-bottom: 2.4rem; } h1 { font: 700 3.6rem/1.1 Georgia, serif; margin: 1.2rem 0; } h2 { font: 700 2.2rem/1.25 system-ui, sans-serif; margin: 0 0 1.6rem; } p { margin: 0.8rem 0; } .eyebrow, footer, .note { font-size: 1.4rem; color: #4b4a48; } .composition { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4.8rem; } .product { display: grid; gap: 2.4rem; align-content: start; } .art { height: 25rem; background: #edeae3; border-radius: 0.4rem; display: grid; place-items: center; } .pack { position: relative; width: 12rem; height: 17rem; border-radius: 4rem 4rem 2rem 2rem; background: #48633c; border: 0.6rem solid #34492c; box-shadow: 2rem 1rem 0 -1.2rem #b3ad9f; } .pack i { position: absolute; top: -2.2rem; left: 3.2rem; width: 4.4rem; height: 2.4rem; border: 0.7rem solid #34492c; border-bottom: 0; border-radius: 1.4rem 1.4rem 0 0; } .pack span { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.2rem; height: 7rem; border-radius: 1rem; background: #607b52; border-top: 0.5rem solid #34492c; } .pack b { position: absolute; left: 4.4rem; top: 4rem; width: 2rem; height: 2rem; background: #edeae3; border-radius: 50%; } .tiles { display: grid; gap: 1.6rem; } .tiles > * { font-family: system-ui, sans-serif !important; } .review { margin-top: 2.4rem; } .result { color: #355e28; font-size: 1.4rem; margin-top: 1.6rem; } footer { margin-top: 3.2rem; padding-top: 1.6rem; border-top: 1px solid #dcd6cb; } :focus-visible { outline: 3px solid #406eb5; outline-offset: 3px; } @media (max-width: 700px) { main { padding: 2rem; } .composition { grid-template-columns: 1fr; gap: 3.2rem; } .product { grid-template-columns: 12rem 1fr; gap: 1.6rem; } .art { height: 17rem; } .pack { transform: scale(0.7); } h1 { font-size: 2.8rem; } .product h2 { font-size: 1.8rem; } } ``` Code-Referenz - Es werden keine proprietären REI-Schriftdateien importiert. ## REI Cedar – Einrichtung des Designsystem-Agenten ### Ausgangspunkt für die Implementierung Die Vorschau bündelt diese nativen Module lokal. Für Schriftarten werden System-Fallbacks verwendet. ``` npm create vite@latest cedar-study -- --template vue cd cedar-study npm install npm install @rei/cedar@17.1.0 @rei/cdr-tokens@14.0.1 # Replace src/main.js and add src/cedar.css with the complete examples. # Change the index.html mount element to id="root". npm run dev ``` ### Ein Prompt für dein Projekt ``` Erstelle mit Cedar 17.1.0 und tokens 14.0.1 anhand dieses vollständigen Quelltexts einen Vue-3-Fulfillment-Selektor. Isoliere die 10-px-Wurzelskala, importiere die erforderliche Komponente und das erforderliche Token CSS, verzichte auf proprietäre Schriftarten und erhalte die Fokussteuerung mit wanderndem Fokus für Radiobuttons sowie deaktivierte Auswahlmöglichkeiten. Verwende fiktive Verfügbarkeitsangaben, bis eine echte Bestandsdaten-Schnittstelle vorliegt. ``` ## REI Cedar – Quellen und Geltungsbereich des Designsystems Ein OpenDesign-Leitfaden zu REI Cedar. Das Beispiel verwendet Cedar 17.1.0 mit tokens 14.0.1. Produkt-, Illustrations-, Filial- und Lieferangaben sind fiktiv; proprietäre REI-Schriftarten und -Fotos sind nicht enthalten. - Cedar installieren Vue-Einrichtung, Integration von CSS und Schriftartengrenzen. - Fulfillment-Kachel Slots, Zustände und Barrierefreiheitsverantwortung der Anwendung. - Tokenreferenz Web-Token-Rollen und -Werte. - Cedar-Quelltext Komponentenquelltext und Paketversionen. ## REI Cedar – Weiterführende Ressourcen zum Designsystem ### Sainsbury's Designsystem Setzen Sie Sainsburys öffentliche Designrichtlinien für einen vollständigen Ablauf zur Auswahl eines Lieferzeitfensters um: mit echten Farb- und Größenreferenzen, barrierefreien Radio-Optionen, einer aktualisierten Zusammenfassung und einer transparenten lokalen Rückmeldung. ### Salesforce Lightning Ein Lightning-Blueprint-Leitfaden für die Bearbeitung umfangreicher Datensätze: realistische Abstände, Typografie und semantische Farben, ein bearbeitbarer Fallarbeitsbereich, Feldvalidierung und ein Aktivitätsverlauf, der lokale Änderungen widerspiegelt. ### Samsung One UI Untersuche One UIs Ansichts- und Interaktionsstruktur, die Empfehlungen zu 24-dp-Rändern und die Anforderung zur Textskalierung auf 200 % anhand einer vollständigen, eigenständigen Vorschau der Leseeinstellungen mit dunkler Darstellung und expliziter Möglichkeit zum Zurücksetzen. - [Implementierungsreferenz](https://cedar.rei.com/components/fulfillment-tile) - [Quelle](https://cedar.rei.com/tokens/web) - [Quelle](https://cedar.rei.com/components/fulfillment-tile) - [Code-Referenz](https://cedar.rei.com/components/fulfillment-tile) - [Code-Referenz](https://cedar.rei.com/tools-resources/installing-cedar) - [Cedar installieren Vue-Einrichtung, Integration von CSS und Schriftartengrenzen.](https://cedar.rei.com/tools-resources/installing-cedar) - [Fulfillment-Kachel Slots, Zustände und Barrierefreiheitsverantwortung der Anwendung.](https://cedar.rei.com/components/fulfillment-tile) - [Tokenreferenz Web-Token-Rollen und -Werte.](https://cedar.rei.com/tokens/web) - [Cedar-Quelltext Komponentenquelltext und Paketversionen.](https://github.com/rei/rei-cedar)