# REI Cedar Sistema di progettazione ## Sistema di design REI Cedar Anteprima dell’interfaccia del sistema di progettazione Usa le schede native Cedar per selezionare la spedizione o il ritiro, con navigazione da tastiera e un’opzione non disponibile. ## Sistema di design REI Cedar Riferimento di progettazione del sistema Valori estratti dal tema REI di @rei/cdr-tokens 14.0.1; comportamento dei componenti nativi verificato con @rei/cedar 17.1.0. ### Ruoli dei colori del tema REI | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | cdr-color-background-button-primary-rest | #1f513f | Riempimento del pulsante primario. | | cdr-color-background-button-primary-hover | #c7dfd1 | Riempimento al passaggio del puntatore per l’elemento primario. | | cdr-color-background-primary | #ffffff | Superficie dei contenuti predefinita. | | cdr-color-background-secondary | #F4F2ED | Superficie secondaria. | | cdr-color-text-button-primary | #fafbf9 | Etichetta del pulsante primario. | | cdr-color-text-primary | #4b4a48 | Ruolo del testo principale. | | cdr-color-text-secondary | #736e65 | Testo di supporto. | | cdr-color-text-error | #811823 | Testo del messaggio di errore. | | cdr-color-border-primary | #d5cfc3 | Bordo della superficie primaria. | | cdr-color-border-secondary | #958e83 | Ruolo del bordo secondario. | ### Spaziatura e raggio con radice da 10px | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | cdr-space-zero | 0 | Alla radice Cedar, 1rem equivale a 10px; non applicare questi valori senza modificarli a una radice da 16px. | | cdr-space-sixteenth-x | 0.1rem | Alla radice Cedar, 1rem equivale a 10px; non applicare questi valori senza modificarli a una radice da 16px. | | cdr-space-eighth-x | 0.2rem | Alla radice Cedar, 1rem equivale a 10px; non applicare questi valori senza modificarli a una radice da 16px. | | cdr-space-three-sixteenth-x | 0.3rem | Alla radice Cedar, 1rem equivale a 10px; non applicare questi valori senza modificarli a una radice da 16px. | | cdr-space-quarter-x | 0.4rem | Alla radice Cedar, 1rem equivale a 10px; non applicare questi valori senza modificarli a una radice da 16px. | | cdr-space-three-eighth-x | 0.6rem | Alla radice Cedar, 1rem equivale a 10px; non applicare questi valori senza modificarli a una radice da 16px. | | cdr-space-half-x | 0.8rem | Alla radice Cedar, 1rem equivale a 10px; non applicare questi valori senza modificarli a una radice da 16px. | | cdr-space-three-quarter-x | 1.2rem | Alla radice Cedar, 1rem equivale a 10px; non applicare questi valori senza modificarli a una radice da 16px. | | cdr-space-one-x | 1.6rem | Alla radice Cedar, 1rem equivale a 10px; non applicare questi valori senza modificarli a una radice da 16px. | | cdr-space-one-and-a-half-x | 2.4rem | Alla radice Cedar, 1rem equivale a 10px; non applicare questi valori senza modificarli a una radice da 16px. | | cdr-space-two-x | 3.2rem | Alla radice Cedar, 1rem equivale a 10px; non applicare questi valori senza modificarli a una radice da 16px. | | cdr-space-three-x | 4.8rem | Alla radice Cedar, 1rem equivale a 10px; non applicare questi valori senza modificarli a una radice da 16px. | | cdr-space-four-x | 6.4rem | Alla radice Cedar, 1rem equivale a 10px; non applicare questi valori senza modificarli a una radice da 16px. | | cdr-radius-sharp | 0 | Forma degli angoli definita dal pacchetto di token fissato. | | cdr-radius-soft | 0.2rem | Forma degli angoli definita dal pacchetto di token fissato. | | cdr-radius-softer | 0.4rem | Forma degli angoli definita dal pacchetto di token fissato. | | cdr-radius-softest | 0.6rem | Forma degli angoli definita dal pacchetto di token fissato. | | cdr-radius-round | 999.9rem | Forma degli angoli definita dal pacchetto di token fissato. | ### API Scheda di evasione | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | checked | boolean | Riflette il metodo selezionato. | | disabled | boolean | Opzione non disponibile; non consentire modifiche allo stato. | | role | radio \| checkbox | Usa una radio per scegliere un unico metodo di evasione. | | tabindex | 0 / -1 | L’applicazione gestisce un unico punto di tabulazione e la navigazione con i tasti freccia. | | header slot | method label | Nome dell'opzione comprensibile. | | body slot | supporting details | Tempi di consegna o punto di ritiro. | | footer slot | prominent detail | Costo o disponibilità. | | icon-right slot | selection indicator | L'esempio aggiunge un segno di spunta al metodo selezionato. | | loading | boolean | Applica una maschera a corpo e piè di pagina, mantenendo intestazione e dimensioni. | ## REI Cedar Guida completa al sistema di design Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## REI Cedar Dipendenze di runtime e stile del sistema di design Vue ### Mantieni componenti e token allineati > L'esempio funzionante usa @rei/cedar 17.1.0 con @rei/cdr-tokens 14.0.1 e Vue 3. Il pacchetto dei componenti offre punti di ingresso modulari. Questo esempio importa solo CdrButton e CdrFulfillmentTile, oltre a CSS, necessario per i componenti annidati di superficie, layout e testo. Il codice elenca ogni importazione, perché il solo comportamento di JavaScript non garantisce un output stilizzato. ### Non includere font proprietari nell'esempio Le istruzioni di installazione di Cedar distinguono l'uso dei componenti dai diritti d'uso dei font REI. L'esempio non importa cdr-fonts.css né il foglio di stile aggregato che contiene le dichiarazioni dei font. Per il testo dell'interfaccia usa il sans serif di sistema, mentre per il titolo editoriale originale usa Georgia. Questi fallback sono scelte dell'applicazione, non il carattere tipografico del brand REI. ## REI Cedar Unità dei token e colori delle superfici del sistema di design ### Usa la scala radice di Cedar I token Cedar esprimono una spaziatura di 16px come 1.6rem, perché la dimensione radice prevista è 10px. Impostando la radice a 16px, lo stesso valore diventerebbe 25.6px. L'esempio isolato imposta html a 62.5% e usa una dimensione del testo di 1.6rem per il body. Un prodotto che usa una dimensione radice diversa richiede un confine di integrazione definito con attenzione, non un reset globale incollato in un sito esistente. ### Associa i token ai ruoli dei componenti Il pulsante principale usa un riempimento verde scuro allo stato normale e un riempimento verde chiaro al passaggio del puntatore. Le superfici dei contenuti e i bordi usano tonalità neutre calde. La tabella riporta valori semantici del tema REI, non del tema del sito di documentazione. La borsa illustrata usa colori decorativi originali, che non vengono presentati come esportazioni ufficiali dei token Cedar. ## REI Cedar Composizione del riquadro di consegna del sistema di design ### Presenta una sola scelta variabile per riquadro Un riquadro di consegna raggruppa il nome di un metodo, i tempi e il costo o la disponibilità. Non deve contenere un secondo link o pulsante interattivo. Nell'esempio, l'azione di revisione si trova al di fuori del gruppo di pulsanti radio, mentre l'opzione di consegna express non disponibile include una spiegazione che rimane leggibile. Gli slot di intestazione, corpo e piè di pagina rendono esplicita la gerarchia. ### Indica la selezione anche senza un bordo Al metodo selezionato vengono assegnati checked=true e un segno di spunta nello slot dell'icona a destra. La scelta corrente è così evidente anche quando è difficile distinguere i bordi più discreti. Facendo clic su un'opzione disponibile si aggiorna solo la selezione; il passaggio separato di revisione conferma la scelta locale. I metodi disabilitati non aggiornano mai il modello. ## REI Cedar Contesto del prodotto e layout adattivo del sistema di design ### Mantieni il prodotto accanto alle opzioni Sugli schermi più ampi, un'illustrazione originale di uno zaino da escursione CSS e il riepilogo del prodotto affiancano le opzioni di consegna. Il prodotto è fittizio e le promesse di consegna sono indicate come esempi. La composizione mostra le superfici calde di Cedar senza copiare le fotografie dei prodotti REI né inventare informazioni sulle scorte in tempo reale. ### Ridispone i controlli invece di rimpicciolirli Sotto i 700px, le opzioni diventano una sezione a larghezza intera, posizionata dopo un riepilogo compatto del prodotto. La soglia di 700px è una scelta di layout dell'applicazione, non un token di breakpoint Cedar. Il contenuto dei riquadri può andare a capo e l'altezza complessiva dell'esempio segue il contenuto anziché un'altezza fissa del viewport. L'illustrazione del prodotto rimane decorativa. ## REI Cedar Selezione, tastiera e feedback del sistema di design ### Implementa il comportamento dei pulsanti radio a livello di applicazione I riquadri espongono la semantica dei pulsanti radio, ma l'applicazione gestisce l'etichetta del gruppo, il valore selezionato e il modello di gestione del focus. Solo l'opzione disponibile selezionata è inclusa nell'ordine di tabulazione. I tasti freccia consentono di scorrere le opzioni disponibili, Home ed End selezionano rispettivamente la prima e l'ultima, mentre la consegna express non disponibile viene ignorata. Tutto questo è incluso nel codice completo, anziché essere lasciato come attività di accessibilità da completare. ### Annulla i feedback di revisione non più aggiornati La revisione della selezione restituisce uno stato locale veritiero, senza affermare che sia stato effettuato un ordine. Se cambia il riquadro selezionato, il risultato precedente viene cancellato. La regione di stato è separata dalla descrizione del metodo, così la tecnologia assistiva può annunciare il feedback senza modificare il nome accessibile del pulsante radio. ## REI Cedar Implementazione completa del sistema di design Vue ### Ricrea la stessa schermata nativa Crea un progetto Vite con Vue, installa i pacchetti bloccati alle versioni indicate e usa gli esempi completi di main.js e cedar.css riportati di seguito. Mantieni root come nome dell'elemento radice oppure aggiorna il selettore di mount in modo che corrisponda al template Vite. L'esempio usa le funzioni di rendering di Vue, così non nasconde al lettore alcuna pre-elaborazione SFC. 1. Installa i pacchetti dei componenti e dei token bloccati alle versioni indicate. 2. Mantieni tutte le importazioni di CSS presenti in main.js. 3. Monta l'app nell'elemento root. 4. Usa i tasti freccia per cambiare metodo di consegna e rivedere il risultato locale. ### Controlla gli stili prima di eseguire il debug del layout La prima verifica dell'integrazione consiste nel controllare che i riquadri abbiano superfici, bordi e spaziatura interna e che il pulsante abbia lo stile Cedar. Se l'interfaccia funziona ma appare come testo semplice, verifica le importazioni di componenti CSS e di token CSS. Se la spaziatura è eccessiva, controlla la dimensione del font radice. Sono cause distinte, che richiedono soluzioni diverse. ## REI Cedar Passaggio di consegne all'agente e criteri di accettazione del sistema di design ### Definisci il confine di integrazione Chiedi all'agente un selettore di consegna in Vue 3 che usi i componenti Cedar e il pacchetto di token nelle versioni indicate, senza font proprietari. Fornisci gli stati esatti dei riquadri e il comportamento da tastiera. Per un prodotto reale, sostituisci i tempi fittizi con un contratto API del backend e gestisci il caricamento e gli errori prima di abilitare un'azione per effettuare l'ordine. ### Esamina insieme il comportamento e il codice sorgente La verifica locale copre la selezione con i tasti freccia, lo stato selezionato visibile, la conferma locale, la cancellazione dei risultati non più aggiornati e i layout per schermi stretti. La guida scaricabile include lo stesso codice applicativo dell'anteprima. La verifica nativa del runtime non rende reali le promesse di consegna dell'esempio né concede il permesso di riutilizzare il brand REI. - I metodi non disponibili non possono essere selezionati. - Modificando una scelta, la conferma precedente viene cancellata. - Non sono necessari file di font né chiamate a servizi. ## REI Cedar Esempi di componenti del sistema di design ### main.js — selettore di consegna completo in Vue Componenti nativi, stato locale, gestione progressiva del focus nei pulsanti radio e tutte le importazioni di stile necessarie. ``` 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"); ``` Riferimento del codice - Usa
in index.html. ### cedar.css — composizione originale del prodotto Layout adattivo, illustrazione CSS e fallback dei font espliciti. ``` 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; } } ``` Riferimento del codice - Non vengono importati file di font proprietari REI. ## REI Cedar Configurazione dell'agente per il sistema di design ### Punto di partenza per l’implementazione L'anteprima include questi moduli nativi localmente. Per i font vengono usati i fallback di sistema. ``` 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 ``` ### Un prompt per il tuo progetto ``` Crea un selettore di consegna in Vue 3 con Cedar 17.1.0 e tokens 14.0.1 usando questo codice completo. Mantieni isolata la scala radice da 10px, importa i componenti e i token CSS richiesti, evita i font proprietari e conserva la gestione progressiva del focus nei pulsanti radio e le opzioni disabilitate. Usa disponibilità fittizie finché non viene fornito un contratto di inventario reale. ``` ## REI Cedar Fonti e ambito del sistema di design Una guida OpenDesign a REI Cedar. L'esempio usa Cedar 17.1.0 con tokens 14.0.1. I dettagli del prodotto, dell'illustrazione, del negozio e della consegna sono fittizi; i font e le fotografie proprietari REI non sono inclusi. - Installazione di Cedar Configurazione di Vue, integrazione CSS e confini d'uso dei font. - Riquadro di consegna Slot, stati e responsabilità dell'applicazione in materia di accessibilità. - Riferimento dei token Ruoli e valori dei token web. - Codice sorgente di Cedar Codice sorgente dei componenti e versioni dei pacchetti. ## REI Cedar Risorse correlate al sistema di design ### Sainsbury's sistema di design Applica le linee guida pubbliche di design di Sainsbury a un flusso completo di scelta di una fascia oraria per il ritiro: riferimenti reali a palette e dimensioni, opzioni radio accessibili, riepilogo aggiornato e riscontro locale trasparente. ### Salesforce Lightning Una guida Lightning per attività con record ad alta densità: spaziature, tipografia e colori semantici reali, un’area di lavoro modificabile per i casi, convalida dei campi e cronologia delle attività che riflette le modifiche locali. ### Samsung One UI Esamina la struttura di visualizzazione e interazione di One UI, le indicazioni sui margini di 24dp e il requisito di ridimensionamento del testo al 200% attraverso un’anteprima originale e completa delle preferenze di lettura, con aspetto scuro e ripristino esplicito. - [Riferimento per l’implementazione](https://cedar.rei.com/components/fulfillment-tile) - [Fonte](https://cedar.rei.com/tokens/web) - [Fonte](https://cedar.rei.com/components/fulfillment-tile) - [Riferimento del codice](https://cedar.rei.com/components/fulfillment-tile) - [Riferimento del codice](https://cedar.rei.com/tools-resources/installing-cedar) - [Installazione di Cedar Configurazione di Vue, integrazione CSS e confini d'uso dei font.](https://cedar.rei.com/tools-resources/installing-cedar) - [Riquadro di consegna Slot, stati e responsabilità dell'applicazione in materia di accessibilità.](https://cedar.rei.com/components/fulfillment-tile) - [Riferimento dei token Ruoli e valori dei token web.](https://cedar.rei.com/tokens/web) - [Codice sorgente di Cedar Codice sorgente dei componenti e versioni dei pacchetti.](https://github.com/rei/rei-cedar)