Examina la base web de Volvo Cars, centrada en HTML, sus tokens reales del modo claro y el estilo nativo de las tarjetas seleccionables mediante un ejemplo completo de plan de equipaje, con opciones independientes, cambio de tema y restablecimiento.
Estilos de tarjetas seleccionables de Volvo Cars CSS 2.5.1 publicados; controles nativos de HTML y lógica de lista original. · Referencia de implementación
02
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.
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
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.
Crea la aplicación JavaScript sin framework e instala @volvo-cars/css 2.5.1.
Guarda main.js, volvo.css y el shell raíz HTML proporcionado.
Ejecuta la aplicación y compara el comportamiento de los botones de opción y las casillas.
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.
javascript
import '@volvo-cars/css/tokens.css';
import '@volvo-cars/css/styles_all-media.css';
import './volvo.css';
document.querySelector('#root').innerHTML=`<main><header><p class="eyebrow">OpenDesign · Original planning study</p><h1>A little room for the weekend.</h1><p class="intro">Build a simple packing plan with selectable cards. These sample choices are not vehicle options or product specifications.</p><label class="mode">Color mode <select id="mode"><option value="light">Light</option><option value="dark">Dark</option></select></label></header><div class="composition"><div><fieldset class="stack-16"><legend>Choose your plan</legend><label class="selectable-card"><input type="radio" name="plan" value="city" checked><span slot="title">A day in the city</span><span slot="meta">Travel light</span><span slot="description">Space for a day bag and the things you use most.</span></label><label class="selectable-card"><input type="radio" name="plan" value="coast"><span slot="title">A quiet coastal break</span><span slot="meta">Stay a little longer</span><span slot="description">Bring layers, a weekend bag and time to pause.</span></label></fieldset><fieldset class="stack-16 extras"><legend>Add to your checklist</legend><label class="selectable-card"><input type="checkbox" value="water"><span slot="title">Water and a reusable cup</span><span slot="description">Keep everyday essentials close at hand.</span></label><label class="selectable-card"><input type="checkbox" value="layers"><span slot="title">An extra layer</span><span slot="description">Prepare for a change in the weather.</span></label></fieldset></div><aside class="summary bg-secondary p-24 shape-default"><p class="eyebrow">Your local checklist</p><h2 id="plan-title">A day in the city</h2><ul id="items"></ul><p id="count" role="status"></p><button type="button" class="button-filled" id="save">Keep this plan</button><button type="button" class="button-text" id="reset">Start again</button><p id="saved" role="status" hidden></p></aside></div><p class="note">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.</p></main>`;
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();
Reemplaza el index.html raíz de Vite con este archivo.
04
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.
sh
npm create vite@latest weekend-plan -- --template vanilla
cd weekend-plan
npm install
npm install @volvo-cars/[email protected]
# Save index.html at the root; main.js and volvo.css in src.
npm run dev
Una instrucción para tu proyecto
Instrucción para el agente
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.
05
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.
