# Sistema de diseño REI Cedar ## Vista previa de la interfaz del sistema de diseño REI Cedar Usa mosaicos nativos de Cedar para elegir envío o recogida, incluida la navegación por teclado y una opción no disponible. ## Referencia de diseño del sistema de diseño REI Cedar Valores extraídos del tema REI de @rei/cdr-tokens 14.0.1; comportamiento de los componentes nativos verificado con @rei/cedar 17.1.0. ### Roles de color del tema REI | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | cdr-color-background-button-primary-rest | #1f513f | Relleno del botón primario. | | cdr-color-background-button-primary-hover | #c7dfd1 | Relleno al pasar el cursor del elemento principal. | | cdr-color-background-primary | #ffffff | Superficie de contenido predeterminada. | | cdr-color-background-secondary | #F4F2ED | Superficie secundaria. | | cdr-color-text-button-primary | #fafbf9 | Etiqueta del botón principal. | | cdr-color-text-primary | #4b4a48 | Rol del texto principal. | | cdr-color-text-secondary | #736e65 | Texto complementario. | | cdr-color-text-error | #811823 | Texto del mensaje de error. | | cdr-color-border-primary | #d5cfc3 | Límite de la superficie principal. | | cdr-color-border-secondary | #958e83 | Rol del borde secundario. | ### Espaciado y radio con una raíz de 10px | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | cdr-space-zero | 0 | En la raíz de Cedar, 1rem equivale a 10px; no apliques estos valores sin cambios a una raíz de 16px. | | cdr-space-sixteenth-x | 0.1rem | En la raíz de Cedar, 1rem equivale a 10px; no apliques estos valores sin cambios a una raíz de 16px. | | cdr-space-eighth-x | 0.2rem | En la raíz de Cedar, 1rem equivale a 10px; no apliques estos valores sin cambios a una raíz de 16px. | | cdr-space-three-sixteenth-x | 0.3rem | En la raíz de Cedar, 1rem equivale a 10px; no apliques estos valores sin cambios a una raíz de 16px. | | cdr-space-quarter-x | 0.4rem | En la raíz de Cedar, 1rem equivale a 10px; no apliques estos valores sin cambios a una raíz de 16px. | | cdr-space-three-eighth-x | 0.6rem | En la raíz de Cedar, 1rem equivale a 10px; no apliques estos valores sin cambios a una raíz de 16px. | | cdr-space-half-x | 0.8rem | En la raíz de Cedar, 1rem equivale a 10px; no apliques estos valores sin cambios a una raíz de 16px. | | cdr-space-three-quarter-x | 1.2rem | En la raíz de Cedar, 1rem equivale a 10px; no apliques estos valores sin cambios a una raíz de 16px. | | cdr-space-one-x | 1.6rem | En la raíz de Cedar, 1rem equivale a 10px; no apliques estos valores sin cambios a una raíz de 16px. | | cdr-space-one-and-a-half-x | 2.4rem | En la raíz de Cedar, 1rem equivale a 10px; no apliques estos valores sin cambios a una raíz de 16px. | | cdr-space-two-x | 3.2rem | En la raíz de Cedar, 1rem equivale a 10px; no apliques estos valores sin cambios a una raíz de 16px. | | cdr-space-three-x | 4.8rem | En la raíz de Cedar, 1rem equivale a 10px; no apliques estos valores sin cambios a una raíz de 16px. | | cdr-space-four-x | 6.4rem | En la raíz de Cedar, 1rem equivale a 10px; no apliques estos valores sin cambios a una raíz de 16px. | | cdr-radius-sharp | 0 | Forma de las esquinas definida por el paquete de tokens fijado. | | cdr-radius-soft | 0.2rem | Forma de las esquinas definida por el paquete de tokens fijado. | | cdr-radius-softer | 0.4rem | Forma de las esquinas definida por el paquete de tokens fijado. | | cdr-radius-softest | 0.6rem | Forma de las esquinas definida por el paquete de tokens fijado. | | cdr-radius-round | 999.9rem | Forma de las esquinas definida por el paquete de tokens fijado. | ### Mosaico de opción de entrega API | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | checked | boolean | Refleja el método seleccionado. | | disabled | boolean | Opción no disponible; no permitas cambios de estado. | | role | radio \| checkbox | Usa radio para elegir un único método de entrega. | | tabindex | 0 / -1 | La aplicación gestiona una única parada de tabulación y la navegación con las teclas de flecha. | | header slot | method label | Nombre de opción fácil de entender. | | body slot | supporting details | Plazo de entrega o lugar de recogida. | | footer slot | prominent detail | Costo o disponibilidad. | | icon-right slot | selection indicator | El ejemplo añade una marca de verificación al método seleccionado. | | loading | boolean | Enmascara el cuerpo y el pie de página, y conserva el encabezado y las dimensiones. | ## Guía completa del sistema de diseño REI Cedar Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## Dependencias de Vue para el entorno de ejecución y los estilos del sistema de diseño REI Cedar ### Fija conjuntamente los componentes y los tokens > El ejemplo funcional usa @rei/cedar 17.1.0 con @rei/cdr-tokens 14.0.1 y Vue 3. El paquete de componentes ofrece puntos de entrada modulares. Este ejemplo importa solo CdrButton y CdrFulfillmentTile, además de CSS, que necesitan sus componentes anidados de superficie, diseño y texto. El código fuente enumera todas las importaciones, porque el comportamiento de JavaScript por sí solo no garantiza que se apliquen los estilos. ### No incluyas fuentes propietarias en el ejemplo Las instrucciones de instalación de Cedar distinguen entre el uso de componentes y los derechos de uso de las fuentes de REI. El ejemplo no importa cdr-fonts.css ni la hoja de estilos agregada que contiene las declaraciones de fuentes. Usa sans serif del sistema para el texto de la interfaz y Georgia para el encabezado editorial original. Estas alternativas tipográficas son decisiones de la aplicación, no la tipografía de marca de REI. ## Unidades de los tokens y colores de superficie del sistema de diseño REI Cedar ### Usa la escala raíz de Cedar Los tokens de Cedar expresan un espaciado de 16px como 1.6rem porque el tamaño raíz previsto es 10px. Si se establece una raíz de 16px, el mismo valor pasa a ser 25.6px. El ejemplo aislado establece html en 62.5% y usa un tamaño de texto de 1.6rem para el body. Un producto anfitrión con otro valor raíz necesita un límite de integración deliberado, no un restablecimiento global pegado a un sitio existente. ### Asigna los tokens a las funciones de los componentes El botón principal usa un relleno verde oscuro en reposo y un relleno verde claro al pasar el cursor. Las superficies de contenido y los bordes usan tonos neutros cálidos. La tabla registra valores semánticos del tema de REI, no del tema del sitio de documentación. La bolsa ilustrada usa colores decorativos originales, que no se presentan como exportaciones oficiales de tokens de Cedar. ## Composición de la tarjeta de entrega del sistema de diseño REI Cedar ### Presenta una opción variable por tarjeta Una tarjeta de entrega reúne el nombre del método, el plazo y el costo o la disponibilidad. No debe contener otro enlace o botón interactivo. En el ejemplo, la acción de revisión queda fuera del grupo de botones de opción, y la opción de entrega exprés no disponible incluye una explicación que sigue siendo legible. Las ranuras de encabezado, cuerpo y pie hacen explícita la jerarquía. ### Indica la selección más allá del borde El método seleccionado recibe checked=true y una marca de verificación en la ranura icon-right. Así, la opción actual se distingue incluso cuando cuesta diferenciar los bordes sutiles. Al hacer clic en una opción disponible, solo se actualiza la selección; el paso de revisión independiente confirma la elección local. Los métodos deshabilitados nunca actualizan el modelo. ## Contexto del producto y diseño adaptable del sistema de diseño REI Cedar ### Mantén el artículo junto a sus opciones En pantallas más anchas, una ilustración original de una mochila de CSS y el resumen del producto aparecen junto a las opciones de entrega. El producto es ficticio y los plazos de entrega se identifican como ejemplos. La composición demuestra las superficies cálidas de Cedar sin copiar fotografías de productos de REI ni inventar información de existencias en tiempo real. ### Reorganiza los controles en lugar de reducirlos Por debajo de 700px, las opciones pasan a una sección de ancho completo después de un resumen compacto del producto. Este umbral de 700px es una decisión de diseño de la aplicación, no un token de punto de ruptura de Cedar. El contenido de las tarjetas puede ajustarse en varias líneas y la altura total del ejemplo se adapta al contenido, en lugar de fijarse a la ventana gráfica. La ilustración del producto es decorativa. ## Selección, teclado y comentarios del sistema de diseño REI Cedar ### Implementa el comportamiento de botones de opción a nivel de aplicación Las tarjetas exponen semántica de botones de opción, pero la aplicación controla la etiqueta del grupo, el valor seleccionado y el modelo de foco. Solo la opción disponible seleccionada forma parte del orden de tabulación. Las teclas de flecha recorren las opciones disponibles, Inicio y Fin seleccionan los extremos, y se omite la opción de entrega exprés no disponible. Esta lógica está incluida en el código fuente completo, no queda pendiente como tarea de accesibilidad. ### Invalida los comentarios de revisión obsoletos La revisión de la selección escribe un estado local veraz, sin afirmar que se haya realizado un pedido. Al cambiar la tarjeta seleccionada, se borra el resultado anterior. La región de estado está separada de la descripción del método, para que la tecnología de asistencia pueda anunciar los comentarios sin modificar el nombre accesible del botón de opción. ## Implementación completa en Vue del sistema de diseño REI Cedar ### Reproduce la misma pantalla de forma nativa Crea un proyecto Vue con Vite, instala los paquetes fijados y usa los ejemplos completos de main.js y cedar.css que aparecen a continuación. Mantén root como nombre del elemento raíz o actualiza el selector de montaje para que coincida con la plantilla de Vite. El ejemplo usa funciones de renderizado de Vue para que no haya procesamiento oculto de componentes de archivo único (SFC). 1. Instala los paquetes fijados de componentes y tokens. 2. Conserva todas las importaciones de CSS de main.js. 3. Monta la aplicación en el elemento root. 4. Usa las teclas de flecha para cambiar el método de entrega y revisar el resultado local. ### Comprueba los estilos antes de depurar el diseño La primera comprobación de integración es que las tarjetas tengan superficies, bordes y relleno, y que el botón tenga los estilos de Cedar. Si la interfaz funciona, pero parece texto sin estilos, verifica las importaciones de componentes CSS y de tokens CSS. Si el espaciado es excesivo, revisa el tamaño de fuente raíz. Son causas distintas que requieren soluciones diferentes. ## Traspaso al agente y criterios de aceptación del sistema de diseño REI Cedar ### Especifica el límite de integración Pide al agente de IA un selector de métodos de entrega en Vue 3 que use los componentes Cedar fijados y el paquete de tokens, sin fuentes propietarias. Indica exactamente los estados de las tarjetas y el comportamiento del teclado. Para un producto real, sustituye los plazos ficticios por un contrato de backend y gestiona los estados de carga y error antes de habilitar una acción para realizar pedidos. ### Revisa el comportamiento y el código fuente en conjunto La verificación local cubre la selección con las teclas de flecha, el estado seleccionado visible, la confirmación local, la eliminación de resultados obsoletos y los diseños para pantallas estrechas. La guía descargable incluye el mismo código de la aplicación que la vista previa. La verificación en tiempo de ejecución no convierte en reales los plazos de entrega de ejemplo ni concede permiso para reutilizar la marca de REI. - Los métodos no disponibles no se pueden seleccionar. - Al cambiar una opción, se borra la confirmación anterior. - No se necesitan recursos de fuentes ni llamadas a servicios. ## Ejemplos de componentes del sistema de diseño REI Cedar ### main.js — selector de métodos de entrega completo en Vue Componentes nativos, estado local, foco itinerante para los botones de opción y todas las importaciones de estilos necesarias. ``` 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"); ``` Referencia de código - Usa
en index.html. ### cedar.css — composición original del producto Diseño adaptable, una ilustración de CSS y alternativas tipográficas explícitas. ``` 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; } } ``` Referencia de código - No se importan archivos de fuentes propietarias de REI. ## Configuración del agente del sistema de diseño REI Cedar ### Punto de partida para la implementación La vista previa empaqueta estos módulos nativos localmente. Las fuentes usan alternativas del 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 ``` ### Una instrucción para tu proyecto ``` Crea un selector de opciones de entrega en Vue 3 con Cedar 17.1.0 y tokens 14.0.1 usando este código fuente completo. Mantén aislada la escala raíz de 10px, importa el componente y el token requeridos CSS, evita las fuentes propietarias y conserva el foco secuencial de las opciones de radio y las opciones deshabilitadas. Usa datos ficticios de disponibilidad hasta que se proporcione un contrato de inventario real. ``` ## Fuentes y alcance del sistema de diseño REI Cedar Una guía de OpenDesign para REI Cedar. El ejemplo ejecuta Cedar 17.1.0 con tokens 14.0.1. Los detalles del producto, las ilustraciones, las tiendas y las entregas son ficticios; no se incluyen fotografías ni fuentes propietarias de REI. - Instalación de Cedar Configuración de Vue, integración de CSS y límites de uso de fuentes. - Opción de entrega Responsabilidades de accesibilidad de las ranuras, los estados y la aplicación. - Referencia de tokens Roles y valores de los tokens web. - Código fuente de Cedar Código fuente del componente y versiones de los paquetes. ## Recursos relacionados con el sistema de diseño REI Cedar ### Sainsbury's sistema de diseño Aplica las pautas públicas de diseño de Sainsbury’s a un flujo completo de selección de franja de recogida: paleta y referencias de tamaño reales, opciones de radio accesibles, resumen actualizado y comentarios locales claros. ### Salesforce Lightning Una guía de Lightning para gestionar registros densos: espaciado, tipografía y colores semánticos reales; un espacio de trabajo editable para casos; validación de campos y un historial de actividad que refleja los cambios locales. ### Samsung One UI Descubre la estructura de visualización e interacción de One UI, las pautas de márgenes de 24dp y el requisito de escalado de texto al 200% mediante una vista previa original y completa de las preferencias de lectura, con apariencia oscura y una opción explícita para restaurar la configuración. - [Referencia de implementación](https://cedar.rei.com/components/fulfillment-tile) - [Fuente](https://cedar.rei.com/tokens/web) - [Fuente](https://cedar.rei.com/components/fulfillment-tile) - [Referencia de código](https://cedar.rei.com/components/fulfillment-tile) - [Referencia de código](https://cedar.rei.com/tools-resources/installing-cedar) - [Instalación de Cedar Configuración de Vue, integración de CSS y límites de uso de fuentes.](https://cedar.rei.com/tools-resources/installing-cedar) - [Opción de entrega Responsabilidades de accesibilidad de las ranuras, los estados y la aplicación.](https://cedar.rei.com/components/fulfillment-tile) - [Referencia de tokens Roles y valores de los tokens web.](https://cedar.rei.com/tokens/web) - [Código fuente de Cedar Código fuente del componente y versiones de los paquetes.](https://github.com/rei/rei-cedar)