# Système de design REI Cedar ## Aperçu de l’interface du système de design REI Cedar Utilisez les tuiles Cedar natives pour choisir la livraison ou le retrait, avec navigation au clavier et une option indisponible. ## Référence de conception du système de design REI Cedar Valeurs extraites du thème REI de @rei/cdr-tokens 14.0.1 ; comportement des composants natifs vérifié avec @rei/cedar 17.1.0. ### Rôles des couleurs du thème REI | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | cdr-color-background-button-primary-rest | #1f513f | Fond du bouton principal. | | cdr-color-background-button-primary-hover | #c7dfd1 | Couleur de fond au survol pour l’action principale. | | cdr-color-background-primary | #ffffff | Surface de contenu par défaut. | | cdr-color-background-secondary | #F4F2ED | Surface secondaire. | | cdr-color-text-button-primary | #fafbf9 | Libellé du bouton principal. | | cdr-color-text-primary | #4b4a48 | Rôle du texte principal. | | cdr-color-text-secondary | #736e65 | Texte d’accompagnement. | | cdr-color-text-error | #811823 | Texte du message d’erreur. | | cdr-color-border-primary | #d5cfc3 | Limite de la surface principale. | | cdr-color-border-secondary | #958e83 | Rôle de bordure secondaire. | ### Espacement et rayon selon une racine de 10 px | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | cdr-space-zero | 0 | À la racine Cedar, 1rem équivaut à 10px ; ne réutilisez pas ces valeurs telles quelles avec une racine de 16px. | | cdr-space-sixteenth-x | 0.1rem | À la racine Cedar, 1rem équivaut à 10px ; ne réutilisez pas ces valeurs telles quelles avec une racine de 16px. | | cdr-space-eighth-x | 0.2rem | À la racine Cedar, 1rem équivaut à 10px ; ne réutilisez pas ces valeurs telles quelles avec une racine de 16px. | | cdr-space-three-sixteenth-x | 0.3rem | À la racine Cedar, 1rem équivaut à 10px ; ne réutilisez pas ces valeurs telles quelles avec une racine de 16px. | | cdr-space-quarter-x | 0.4rem | À la racine Cedar, 1rem équivaut à 10px ; ne réutilisez pas ces valeurs telles quelles avec une racine de 16px. | | cdr-space-three-eighth-x | 0.6rem | À la racine Cedar, 1rem équivaut à 10px ; ne réutilisez pas ces valeurs telles quelles avec une racine de 16px. | | cdr-space-half-x | 0.8rem | À la racine Cedar, 1rem équivaut à 10px ; ne réutilisez pas ces valeurs telles quelles avec une racine de 16px. | | cdr-space-three-quarter-x | 1.2rem | À la racine Cedar, 1rem équivaut à 10px ; ne réutilisez pas ces valeurs telles quelles avec une racine de 16px. | | cdr-space-one-x | 1.6rem | À la racine Cedar, 1rem équivaut à 10px ; ne réutilisez pas ces valeurs telles quelles avec une racine de 16px. | | cdr-space-one-and-a-half-x | 2.4rem | À la racine Cedar, 1rem équivaut à 10px ; ne réutilisez pas ces valeurs telles quelles avec une racine de 16px. | | cdr-space-two-x | 3.2rem | À la racine Cedar, 1rem équivaut à 10px ; ne réutilisez pas ces valeurs telles quelles avec une racine de 16px. | | cdr-space-three-x | 4.8rem | À la racine Cedar, 1rem équivaut à 10px ; ne réutilisez pas ces valeurs telles quelles avec une racine de 16px. | | cdr-space-four-x | 6.4rem | À la racine Cedar, 1rem équivaut à 10px ; ne réutilisez pas ces valeurs telles quelles avec une racine de 16px. | | cdr-radius-sharp | 0 | Forme des angles issue du paquet de jetons épinglé. | | cdr-radius-soft | 0.2rem | Forme des angles issue du paquet de jetons épinglé. | | cdr-radius-softer | 0.4rem | Forme des angles issue du paquet de jetons épinglé. | | cdr-radius-softest | 0.6rem | Forme des angles issue du paquet de jetons épinglé. | | cdr-radius-round | 999.9rem | Forme des angles issue du paquet de jetons épinglé. | ### Tuile de traitement de commande API | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | checked | boolean | Reflète le mode sélectionné. | | disabled | boolean | Option indisponible ; ne permettez pas de changer son état. | | role | radio \| checkbox | Utilisez des boutons radio pour choisir un seul mode de traitement de commande. | | tabindex | 0 / -1 | L’application gère un seul arrêt de tabulation et la navigation avec les touches fléchées. | | header slot | method label | Nom de l’option facile à comprendre. | | body slot | supporting details | Délai de livraison ou lieu de retrait. | | footer slot | prominent detail | Coût ou disponibilité. | | icon-right slot | selection indicator | L’exemple ajoute une coche au mode sélectionné. | | loading | boolean | Masque le corps et le pied de page tout en conservant l’en-tête et les dimensions. | ## Guide complet du système de design REI Cedar Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## Dépendances d’exécution Vue du système de design REI Cedar ### Épinglez ensemble les composants et les jetons > L’exemple fonctionnel utilise @rei/cedar 17.1.0 avec @rei/cdr-tokens 14.0.1 et Vue 3. Le paquet de composants propose des points d’entrée modulaires. Cet exemple importe uniquement CdrButton et CdrFulfillmentTile, ainsi que CSS nécessaire à leurs composants imbriqués de surface, de mise en page et de texte. Le code source répertorie chaque importation, car le comportement de JavaScript ne garantit pas à lui seul un rendu avec styles. ### N’incluez pas de polices propriétaires dans l’exemple Les instructions d’installation de Cedar distinguent l’utilisation des composants des droits d’utilisation des polices REI. L’exemple n’importe ni cdr-fonts.css ni la feuille de style globale contenant les déclarations de polices. Il utilise une police sans empattement système pour le texte de l’interface et Georgia pour le titre éditorial original. Ces polices de substitution relèvent de choix de l’application ; elles ne correspondent pas à la typographie de la marque REI. ## Unités des jetons et couleurs des surfaces du système de design REI Cedar ### Utilisez l’échelle de racine Cedar Les jetons Cedar expriment un espacement de 16px par 1.6rem, car la taille de racine attendue est de 10px. Avec une racine de 16px, cette même valeur passerait à 25.6px. L’exemple isolé définit html à 62.5 % et utilise une taille de corps de 1.6rem. Un produit hôte dont la racine est différente nécessite une frontière d’intégration réfléchie, plutôt qu’une réinitialisation globale ajoutée telle quelle à un site existant. ### Associez les jetons aux rôles des composants Le bouton principal utilise un fond vert foncé au repos et un fond vert pâle au survol. Les surfaces de contenu et les bordures adoptent des tons neutres chauds. Le tableau présente les valeurs sémantiques du thème REI, et non celles du site de documentation. Le sac illustré utilise des couleurs décoratives originales, qui ne sont pas présentées comme des jetons Cedar officiels. ## Composition de la tuile de traitement de commande du système de design REI Cedar ### Présentez une seule option à choisir par tuile Une tuile de traitement de commande regroupe le nom d’un mode, son délai et son coût ou sa disponibilité. Elle ne doit pas contenir de second lien ou bouton interactif. Dans l’exemple, l’action de révision se trouve en dehors du groupe de boutons radio, et l’option express indisponible est accompagnée d’une explication lisible. Les emplacements d’en-tête, de corps et de pied de page rendent la hiérarchie explicite. ### Ne vous limitez pas à la bordure pour signaler la sélection Le mode sélectionné reçoit checked=true et une coche dans l’emplacement icon-right. Le choix actuel reste ainsi visible même lorsque les bordures discrètes sont difficiles à distinguer. Cliquer sur une option disponible ne met à jour que la sélection ; l’étape de révision distincte confirme le choix local. Les modes désactivés ne modifient jamais le modèle. ## Contexte produit et mise en page adaptative du système de design REI Cedar ### Gardez l’article à côté des options Sur les écrans plus larges, une illustration originale de sac à dos CSS et un résumé du produit sont placés à côté des options de traitement de commande. Le produit est fictif et les délais de livraison sont indiqués comme des exemples. La composition met en valeur les surfaces chaleureuses de Cedar sans reprendre des photos de produits REI ni inventer des informations de stock en temps réel. ### Réorganisez plutôt que de réduire les commandes En dessous de 700px, les options passent dans une section pleine largeur après un résumé compact du produit. Ce seuil de 700px est un choix de mise en page propre à l’application, pas un point de rupture de jeton Cedar. Le contenu des tuiles peut revenir à la ligne, et la hauteur globale de l’exemple s’adapte au contenu plutôt qu’à une hauteur de fenêtre fixe. L’illustration du produit reste décorative. ## Sélection, clavier et retours d’information du système de design REI Cedar ### Implémentez le comportement des boutons radio au niveau de l’application Les tuiles exposent la sémantique des boutons radio, mais c’est à l’application de gérer le libellé du groupe, la valeur sélectionnée et le modèle de focus. Seule l’option disponible sélectionnée figure dans l’ordre de tabulation. Les touches fléchées parcourent les options disponibles, Home et End sélectionnent respectivement la première et la dernière, et la livraison express indisponible est ignorée. Ce comportement figure dans le code source complet : il n’est pas laissé en suspens comme une tâche d’accessibilité. ### Effacez les anciens retours de révision La révision de la sélection affiche un état local honnête sans prétendre qu’une commande a été passée. La modification de la tuile sélectionnée efface le résultat précédent. La région d’état est distincte de la description du mode, ce qui permet aux technologies d’assistance d’annoncer le retour sans modifier le nom accessible du bouton radio. ## Implémentation Vue complète du système de design REI Cedar ### Reproduisez le même écran natif Créez un projet Vue avec Vite, installez les paquets épinglés et utilisez les exemples complets de main.js et cedar.css ci-dessous. Conservez le nom root pour l’élément racine ou adaptez le sélecteur de montage au modèle Vite. L’exemple utilise les fonctions de rendu Vue : aucun prétraitement SFC n’est ainsi dissimulé au lecteur. 1. Installez les paquets de composants et de jetons épinglés. 2. Conservez chaque importation CSS de main.js. 3. Montez l’application dans l’élément root. 4. Utilisez les touches fléchées pour changer de mode de livraison ou de retrait et vérifier le résultat local. ### Vérifiez les styles avant de déboguer la mise en page La première vérification de l’intégration consiste à s’assurer que les tuiles ont un fond, des bordures et un espacement intérieur, et que le bouton utilise le style Cedar. Si l’interface fonctionne, mais ressemble à du texte brut, vérifiez les imports du composant CSS et des jetons CSS. Si les espacements sont trop grands, examinez la taille de police de l’élément racine. Ces problèmes ont des causes distinctes et nécessitent des correctifs différents. ## REI Cedar Transfert et critères d’acceptation du système de design pour un agent IA ### Définissez les limites de l’intégration Demandez à l’agent IA de créer un sélecteur des modes de livraison et de retrait en Vue 3, à l’aide des composants Cedar et du package de jetons épinglés, sans polices propriétaires. Indiquez précisément les états des tuiles et le comportement au clavier. Pour un vrai produit, remplacez les délais fictifs par un contrat avec le backend et gérez le chargement et les erreurs avant d’activer une action de commande. ### Examinez ensemble le comportement et le code source La vérification locale couvre la sélection avec les touches fléchées, l’état sélectionné visible, la confirmation locale, l’effacement des résultats obsolètes et les mises en page étroites. Le guide téléchargeable contient le même code d’application que l’aperçu. La vérification dans l’environnement d’exécution natif ne rend pas réelles les promesses de livraison de l’exemple et n’autorise pas la réutilisation de la marque REI. - Les méthodes indisponibles ne peuvent pas être sélectionnées. - Changer de choix efface l’ancienne confirmation. - Aucun fichier de police ni appel de service n’est nécessaire. ## REI Cedar Exemples de composants du système de design ### main.js — code complet du sélecteur des modes de livraison et de retrait en Vue Composants natifs, état local, gestion du focus itinérant des boutons radio et tous les imports de styles requis. ``` 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"); ``` Référence du code - Utilisez
dans index.html. ### cedar.css — composition produit originale Mise en page adaptative, illustration CSS et polices de remplacement explicites. ``` 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; } } ``` Référence du code - Aucun fichier de police propriétaire de REI n’est importé. ## REI Cedar Configuration d’un agent IA pour le système de design ### Point de départ de l’implémentation L’aperçu regroupe ces modules natifs localement. Les polices utilisent celles du système en remplacement. ``` 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 pour votre projet ``` Créez un sélecteur des modes de livraison et de retrait en Vue 3 avec Cedar 17.1.0 et tokens 14.0.1 en utilisant ce code source complet. Gardez l’échelle de 10px de l’élément racine isolée, importez le composant requis et CSS de jetons, évitez les polices propriétaires et préservez la gestion du focus itinérant des boutons radio ainsi que les choix désactivés. Utilisez des disponibilités fictives jusqu’à la fourniture d’un véritable contrat d’inventaire. ``` ## REI Cedar Sources et portée du système de design Un guide OpenDesign pour REI Cedar. L’exemple utilise Cedar 17.1.0 et tokens 14.0.1. Le produit, l’illustration, le magasin et les informations de livraison sont fictifs ; les polices et les photos propriétaires de REI ne sont pas incluses. - Installer Cedar Configuration Vue, intégration CSS et limites liées aux polices. - Tuile de livraison ou de retrait Emplacements, états et responsabilités de l’application en matière d’accessibilité. - Référence des jetons Rôles et valeurs des jetons web. - Code source de Cedar Code source des composants et versions des packages. ## REI Cedar Ressources complémentaires sur le système de design ### Sainsbury's système de design Appliquez les recommandations publiques de Sainsbury’s en matière de design à un parcours complet de réservation d’un créneau de collecte : références réelles de palette et de tailles, choix par boutons radio accessibles, récapitulatif actualisé et retour local fidèle à la réalité. ### Salesforce Lightning Un guide Lightning pour les tâches exigeant une forte densité d’informations : valeurs réelles d’espacement, de typographie et de couleurs sémantiques, espace de travail modifiable pour les dossiers, validation des champs et historique des activités reflétant les changements locaux. ### Samsung One UI Découvrez la structure de consultation et d’interaction de One UI, les recommandations de marge de 24dp et l’exigence de mise à l’échelle du texte à 200 % grâce à un aperçu complet et original des préférences de lecture, avec apparence sombre et rétablissement explicite après réinitialisation. - [Référence de mise en œuvre](https://cedar.rei.com/components/fulfillment-tile) - [Source](https://cedar.rei.com/tokens/web) - [Source](https://cedar.rei.com/components/fulfillment-tile) - [Référence du code](https://cedar.rei.com/components/fulfillment-tile) - [Référence du code](https://cedar.rei.com/tools-resources/installing-cedar) - [Installer Cedar Configuration Vue, intégration CSS et limites liées aux polices.](https://cedar.rei.com/tools-resources/installing-cedar) - [Tuile de livraison ou de retrait Emplacements, états et responsabilités de l’application en matière d’accessibilité.](https://cedar.rei.com/components/fulfillment-tile) - [Référence des jetons Rôles et valeurs des jetons web.](https://cedar.rei.com/tokens/web) - [Code source de Cedar Code source des composants et versions des packages.](https://github.com/rei/rei-cedar)