# Sistema de diseño Volvo Cars Web ## Sistema de diseño Volvo Cars Web Vista previa de la interfaz Elige un plan, añade extras independientes y revisa las mismas opciones en los modos claro y oscuro. ## Sistema de diseño Volvo Cars Web Referencia de diseño Tokens públicos reales de @volvo-cars/css 2.5.1, adaptados al marcado documentado de las tarjetas seleccionables. Se muestran los valores predeterminados del modo claro; la misma hoja de estilos proporciona el modo oscuro. ### Roles predeterminados del modo claro | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --v-color-foreground-primary | #000 | Primeras declaraciones del modo claro de 2.5.1; el tema oscuro nativo reemplaza estos valores de rol. | | --v-color-foreground-secondary | #5e5e5e | Primeras declaraciones del modo claro de 2.5.1; el tema oscuro nativo reemplaza estos valores de rol. | | --v-color-foreground-tertiary | #787878 | Primeras declaraciones del modo claro de 2.5.1; el tema oscuro nativo reemplaza estos valores de rol. | | --v-color-foreground-inverted | #fff | Primeras declaraciones del modo claro de 2.5.1; el tema oscuro nativo reemplaza estos valores de rol. | | --v-color-foreground-accent-blue | #0b2ded | Primeras declaraciones del modo claro de 2.5.1; el tema oscuro nativo reemplaza estos valores de rol. | | --v-color-background-primary | #fff | Primeras declaraciones del modo claro de 2.5.1; el tema oscuro nativo reemplaza estos valores de rol. | | --v-color-background-secondary | #fafafa | Primeras declaraciones del modo claro de 2.5.1; el tema oscuro nativo reemplaza estos valores de rol. | | --v-color-background-feedback-green | #d7f9df | Primeras declaraciones del modo claro de 2.5.1; el tema oscuro nativo reemplaza estos valores de rol. | | --v-color-background-feedback-red | #fce5e3 | Primeras declaraciones del modo claro de 2.5.1; el tema oscuro nativo reemplaza estos valores de rol. | | --v-color-surface-gray | #e3e3e3 | Primeras declaraciones del modo claro de 2.5.1; el tema oscuro nativo reemplaza estos valores de rol. | ### Espaciado y formas fijos | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --v-space-2 | .125rem | Escala fija publicada. Mantenla separada de los tokens de espaciado fluido de la página. | | --v-space-4 | .25rem | Escala fija publicada. Mantenla separada de los tokens de espaciado fluido de la página. | | --v-space-8 | .5rem | Escala fija publicada. Mantenla separada de los tokens de espaciado fluido de la página. | | --v-space-12 | .75rem | Escala fija publicada. Mantenla separada de los tokens de espaciado fluido de la página. | | --v-space-16 | 1rem | Escala fija publicada. Mantenla separada de los tokens de espaciado fluido de la página. | | --v-space-24 | 1.5rem | Escala fija publicada. Mantenla separada de los tokens de espaciado fluido de la página. | | --v-space-32 | 2rem | Escala fija publicada. Mantenla separada de los tokens de espaciado fluido de la página. | | --v-space-48 | 3rem | Escala fija publicada. Mantenla separada de los tokens de espaciado fluido de la página. | | --v-space-64 | 4rem | Escala fija publicada. Mantenla separada de los tokens de espaciado fluido de la página. | | --v-radius-sm | .25rem | Escala fija publicada. Mantenla separada de los tokens de espaciado fluido de la página. | | --v-radius-md | .5rem | Escala fija publicada. Mantenla separada de los tokens de espaciado fluido de la página. | | --v-radius-lg | 1rem | Escala fija publicada. Mantenla separada de los tokens de espaciado fluido de la página. | | --v-radius-full | 9999px | Escala fija publicada. Mantenla separada de los tokens de espaciado fluido de la página. | ### Reglas de texto y bordes | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --v-font-sans-family | "Volvo Centum", "Helvetica Neue", "Helvetica", "Noto Sans", "Segoe UI", "Arial", sans-serif | Valores públicos reales de 2.5.1. El ejemplo no incluye archivos de fuentes de Volvo y, por tanto, usa la fuente alternativa de la pila tipográfica. | | --v-font-regular-weight | 400 | Valores públicos reales de 2.5.1. El ejemplo no incluye archivos de fuentes de Volvo y, por tanto, usa la fuente alternativa de la pila tipográfica. | | --v-font-emphasis-weight | 600 | Valores públicos reales de 2.5.1. El ejemplo no incluye archivos de fuentes de Volvo y, por tanto, usa la fuente alternativa de la pila tipográfica. | | --v-font-14-size | .875rem | Valores públicos reales de 2.5.1. El ejemplo no incluye archivos de fuentes de Volvo y, por tanto, usa la fuente alternativa de la pila tipográfica. | | --v-font-14-lineheight | 1.572 | Valores públicos reales de 2.5.1. El ejemplo no incluye archivos de fuentes de Volvo y, por tanto, usa la fuente alternativa de la pila tipográfica. | | --v-font-16-size | 1rem | Valores públicos reales de 2.5.1. El ejemplo no incluye archivos de fuentes de Volvo y, por tanto, usa la fuente alternativa de la pila tipográfica. | | --v-font-16-lineheight | 1.5 | Valores públicos reales de 2.5.1. El ejemplo no incluye archivos de fuentes de Volvo y, por tanto, usa la fuente alternativa de la pila tipográfica. | | --v-font-20-size | 1.25rem | Valores públicos reales de 2.5.1. El ejemplo no incluye archivos de fuentes de Volvo y, por tanto, usa la fuente alternativa de la pila tipográfica. | | --v-font-20-lineheight | 1.4 | Valores públicos reales de 2.5.1. El ejemplo no incluye archivos de fuentes de Volvo y, por tanto, usa la fuente alternativa de la pila tipográfica. | | --v-border-width-default | 1px | Valores públicos reales de 2.5.1. El ejemplo no incluye archivos de fuentes de Volvo y, por tanto, usa la fuente alternativa de la pila tipográfica. | | --v-border-width-selected | 2px | Valores públicos reales de 2.5.1. El ejemplo no incluye archivos de fuentes de Volvo y, por tanto, usa la fuente alternativa de la pila tipográfica. | ## Sistema de diseño Volvo Cars Web Guía completa 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. ## Sistema de diseño Volvo Cars Web HTML-Primero Foundation y elección de versión ### Fija la versión de la hoja de estilos que corresponde al patrón > El ejemplo usa @volvo-cars/css 2.5.1, que coincide con la referencia de tarjetas seleccionables usada en la implementación. La versión 3 tiene un contrato distinto, así que instalar el paquete más reciente sin comprobar el marcado puede dejar el patrón incompleto. La versión debe indicarse tanto en la configuración como en la guía: una clase de componente no garantiza que todas las versiones la estilicen de la misma manera. ### Usa deliberadamente la capa web pública Este estudio importa directamente los tokens web públicos y la hoja de estilos para todos los medios. No depende del paquete interno EDLS, que es independiente. La aplicación sigue siendo HTML sin adornos, con una pequeña cantidad de JavaScript para la lista. El CSS instalado se encarga del aspecto de las tarjetas seleccionables, los estilos de los controles y los roles del modo de color; la aplicación aporta el contenido y el estado. ## Sistema de diseño Volvo Cars Web Roles neutros, tipografía y espaciado ### Mantén relacionados los roles de los modos claro y oscuro La tabla registra las declaraciones predeterminadas del modo claro, mientras que data-color-mode selecciona los valores nativos correspondientes al modo oscuro. La composición usa roles de fondo y primer plano en vez de fijar texto blanco en todas las tarjetas. El cambio de tema debe conservar el plan y los extras seleccionados; cambiar la paleta no debe alterar la lista. ### Distingue los pasos fijos del ritmo fluido de la página Los valores de espaciado fijo de la referencia seleccionada van de 2px a 64px. Otros tokens públicos de página usan clamp y round, por lo que se adaptan al tamaño de la ventana. La composición de dos columnas y el espacio de 40px del ejemplo son decisiones de diseño originales en torno a las tarjetas nativas. Se conserva la pila tipográfica publicada, pero no se incluyen recursos de fuentes de Volvo; la representación usa la fuente alternativa del sistema disponible. ## Sistema de diseño Volvo Cars Web Semántica de tarjetas seleccionables ### Usa botones de opción para elegir un plan Las dos tarjetas de plan contienen botones de opción nativos con el mismo nombre, dentro de un fieldset con una leyenda. Cada tarjeta es una etiqueta con espacios para el título, los metadatos y la descripción. Al hacer clic en la tarjeta, se selecciona su botón de opción y se mantiene el comportamiento de teclado habitual. Por tanto, el plan seleccionado es un estado real del formulario, no un borde decorativo gestionado por separado. ### Usa casillas de verificación para los extras independientes El agua y una capa adicional se pueden seleccionar de forma independiente, así que usan casillas de verificación. Las tarjetas no contienen enlaces ni botones anidados: un elemento interactivo dentro de una etiqueta generaría comportamientos de activación contradictorios. Las acciones del resumen están fuera de las tarjetas. La capa de formularios publicada de React es una alternativa cuando el diseño realmente necesita contenido interactivo más complejo en las tarjetas. - Mantén el grupo de botones de opción dentro de un fieldset con una leyenda. - Usa casillas de verificación para los extras independientes. - Mantén los enlaces y botones fuera de las tarjetas CSS que solo contienen etiquetas. ## Sistema de diseño Volvo Cars Web Lista derivada y confirmación ### Deriva el resumen de los mismos controles El resumen combina los elementos básicos del plan elegido con los extras seleccionados. Si cambias el botón de opción, se actualizan el título y los elementos básicos del plan, mientras se mantienen los extras independientes. El recuento se calcula a partir de la lista resultante. Todo el contenido de ejemplo para la lista es original y evita deliberadamente las especificaciones de vehículos, los precios y las afirmaciones sobre una configuración de compra real de Volvo. ### Borra las confirmaciones obsoletas cuando cambien las opciones La opción Mantener este plan muestra una confirmación local. Si luego cambia el plan o algún extra, el mensaje se oculta para que no dé a entender que ya se había guardado la nueva combinación. La acción no escribe en una cuenta, no realiza ninguna compra ni envía datos. La nota visible y el código fuente describen de forma coherente este comportamiento limitado, que solo ocurre en la página. ## Sistema de diseño Volvo Cars Web Modo de color y composición adaptable ### Mantén el tema separado del estado de la lista El selector de modo de color cambia data-color-mode en el documento. No vuelve a crear los botones de opción, las casillas de verificación ni el resumen. La hoja de estilos nativa aplica transiciones a algunas superficies, por lo que la verificación visual debe examinar el tema una vez asentado, no una captura tomada a mitad del cambio. Comprueba conjuntamente el texto, el estado de los controles y el contraste de las superficies. ### Apila los elementos en orden de lectura en pantallas estrechas Las opciones de equipaje aparecen antes que el resumen en el orden del documento. En pantallas de teléfono, la cuadrícula de dos columnas pasa a una sola columna y conserva el orden y todas las acciones. Los fieldset tienen min-width:0 para que su tamaño predeterminado no provoque desbordamiento horizontal. El contenido extenso de las tarjetas se ajusta al diseño de tarjetas seleccionables en lugar de salirse del contenedor. ## Sistema de diseño Volvo Cars Web Código fuente completo y verificación local ### Ejecuta los dos archivos fuente con el paquete correspondiente JavaScript incluye el contenido original completo y todos los controladores de interacción. CSS contiene únicamente la composición de la aplicación y una alternativa local para mostrar la marca de verificación de las casillas. Usa el shell HTML proporcionado, guarda los dos archivos fuente e instala la versión fijada de CSS. Importar solo la hoja de estilos daría estilo a los controles, pero no implementaría el recuento de elementos de la lista ni la confirmación local. 1. Crea la aplicación JavaScript sin framework e instala @volvo-cars/css 2.5.1. 2. Guarda main.js, volvo.css y el shell raíz HTML proporcionado. 3. Ejecuta la aplicación y compara el comportamiento de los botones de opción y las casillas. 4. Inspecciona los temas claro y oscuro una vez asentados, y el estado restablecido. ### Comprueba conjuntamente las opciones, el tema y el restablecimiento Elige el plan costero, añade agua y confirma que aparecen cuatro elementos. Mantén el plan, añade una capa y comprueba que desaparezca la confirmación anterior. Cambia al modo oscuro sin perder las opciones y, después, restablece el primer plan sin extras. Verifica la selección de botones de opción mediante el teclado y el ajuste en pantallas estrechas; inspecciona las superficies claras y oscuras una vez asentadas. ## Ejemplos de componentes del sistema de diseño sistema de diseño Volvo Cars Web ### main.js — selección completa del plan Todas las opciones, el resumen derivado, la confirmación local, el tema y el restablecimiento. ``` import '@volvo-cars/css/tokens.css'; import '@volvo-cars/css/styles_all-media.css'; import './volvo.css'; document.querySelector('#root').innerHTML=`

OpenDesign · Original planning study

A little room for the weekend.

Build a simple packing plan with selectable cards. These sample choices are not vehicle options or product specifications.

Choose your plan
Add to your checklist

Published Volvo Cars CSS 2.5.1 selectable-card styling with original packing content and local behavior. The preview uses the stylesheet’s system-font fallback; Volvo font assets are not bundled. Nothing is booked, purchased or sent.

`; const plans={city:{title:'A day in the city',items:['Day bag','Comfortable shoes']},coast:{title:'A quiet coastal break',items:['Weekend bag','Route notes','A good book']}};const extras={water:'Water and a reusable cup',layers:'An extra layer'};let current='city'; function render(){current=document.querySelector('[name=plan]:checked').value;let list=[...plans[current].items,...[...document.querySelectorAll('.extras input:checked')].map(e=>extras[e.value])];document.querySelector('#plan-title').textContent=plans[current].title;const ul=document.querySelector('#items');ul.replaceChildren(...list.map(x=>{let li=document.createElement('li');li.textContent=x;return li}));document.querySelector('#count').textContent=`${list.length} things on your checklist`;document.querySelector('#saved').hidden=true;} document.querySelectorAll('fieldset input').forEach(e=>e.addEventListener('change',render));document.querySelector('#mode').addEventListener('change',e=>document.documentElement.dataset.colorMode=e.target.value);document.querySelector('#save').addEventListener('click',()=>{let p=document.querySelector('#saved');p.hidden=false;p.textContent='Plan kept in this page. Changing a choice will clear this confirmation.';});document.querySelector('#reset').addEventListener('click',()=>{document.querySelector('[value=city]').checked=true;document.querySelectorAll('.extras input').forEach(e=>e.checked=false);render();document.querySelector('[value=city]').focus();});render(); ``` Referencia de código - Usa el patrón de radio y espacio de etiqueta con el mismo nombre de la hoja de estilos fijada. ### volvo.css — composición original Disposición adaptable y alternativa local para mostrar la marca de verificación de las casillas. ``` html{color-scheme:light}html[data-color-mode=dark]{color-scheme:dark}body{margin:0}main{max-width:1100px;padding:32px;margin:auto}header{padding:16px 0 40px}.eyebrow{font-size:12px;letter-spacing:.06em}.intro{max-width:60ch;margin-top:24px}.mode{display:flex;align-items:center;gap:16px;margin-top:24px}.mode select{max-width:180px}.composition{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(240px,1fr);gap:40px}fieldset{min-width:0;border:0;padding:0;margin:0}legend{font-size:20px;margin-bottom:16px}.extras{margin-top:32px}.summary{align-self:start}#items{padding-left:20px;margin:24px 0}#items li{margin:8px 0}.summary button{display:block;width:100%;margin-top:16px}.note{font-size:14px;color:var(--v-color-foreground-secondary);border-top:1px solid var(--v-color-surface-gray);padding-top:24px;margin-top:40px;max-width:80ch}#saved{margin-top:24px}.selectable-card input[type=checkbox]:checked:before{background-image:none!important;content:'✓';color:var(--v-color-foreground-inverted);display:grid;place-items:center}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.composition{grid-template-columns:1fr;gap:32px}.selectable-card{overflow-wrap:anywhere}.eyebrow{overflow-wrap:anywhere}} ``` Referencia de código - La disposición es original; el estilo de las tarjetas proviene de CSS, instalado y de acceso público. ### index.html — estructura raíz Raíz completa y punto de entrada del módulo. ``` Weekend packing study
``` Referencia de código - Reemplaza el index.html raíz de Vite con este archivo. ## Configuración del agente para sistema de diseño Volvo Cars Web ### Punto de partida para la implementación La versión fijada es compatible con esta implementación de tarjetas seleccionables. Los recursos tipográficos oficiales no están incluidos en la vista previa. ``` npm create vite@latest weekend-plan -- --template vanilla cd weekend-plan npm install npm install @volvo-cars/css@2.5.1 # Save index.html at the root; main.js and volvo.css in src. npm run dev ``` ### Una instrucción para tu proyecto ``` Crea el estudio original sobre el equipaje para una escapada de fin de semana con Volvo Cars CSS 2.5.1 y el código fuente completo proporcionado. Usa tarjetas seleccionables nativas basadas en etiquetas, un grupo de botones de opción con fieldset, casillas independientes para los extras, recuentos derivados, eliminación de confirmaciones obsoletas y un estado del tema independiente de las opciones. Mantén todo el contenido de ejemplo separado de las especificaciones de vehículos reales. ``` ## Fuentes y alcance de sistema de diseño Volvo Cars Web Estudio original sobre equipaje de OpenDesign que usa @volvo-cars/css 2.5.1. No es un configurador de vehículos. Los archivos de fuentes de Volvo no están incluidos; se usan alternativas nativas de la hoja de estilos. - Tarjetas seleccionables Espacios para etiquetas, grupos de botones de opción y límites del contenido interactivo. - Instalación CSS web público y límites independientes de EDLS interno. - Primeros pasos Fundamentos con prioridad para HTML y capas opcionales de React. - Colores Relaciones entre roles de color y temas. ## Recursos relacionados de sistema de diseño Volvo Cars Web ### Wonderflow Wanda Usa los roles de tema y la sintaxis de tokens reales de Wanda en un espacio de trabajo completo para leer comentarios, con filtros por tema, contexto de evidencia desplegable y un cuaderno local persistente. ### Workday Canvas Crea un plan de aprendizaje local con el FormField compuesto, el TextInput controlado y el PrimaryButton de Canvas Kit, y distingue las fuentes actuales de tokens semánticos de los ejemplos de migración antiguos de space.x4. ### Zendesk Garden Una guía de Garden para tareas de soporte, con alias de tema reales, escalas tipográficas y de radio, un compositor de respuestas completo, borradores locales que respetan la visibilidad y recuperación de campos. - [Referencia de implementación](https://designsystem.volvocars.com/web/components/selectable-cards/) - [Fuente](https://designsystem.volvocars.com/web/core-concepts/colors/) - [Fuente](https://designsystem.volvocars.com/web/developing/installation/) - [Referencia de código](https://designsystem.volvocars.com/web/components/selectable-cards/) - [Tarjetas seleccionables Espacios para etiquetas, grupos de botones de opción y límites del contenido interactivo.](https://designsystem.volvocars.com/web/components/selectable-cards/) - [Instalación CSS web público y límites independientes de EDLS interno.](https://designsystem.volvocars.com/web/developing/installation/) - [Primeros pasos Fundamentos con prioridad para HTML y capas opcionales de React.](https://designsystem.volvocars.com/web/developing/getting-started/) - [Colores Relaciones entre roles de color y temas.](https://designsystem.volvocars.com/web/core-concepts/colors/)