# Système de design Volvo Cars Web ## Aperçu de l’interface système de design Volvo Cars Web Choisissez une formule, ajoutez des options indépendantes et examinez les mêmes choix en mode clair et sombre. ## Référence de conception système de design Volvo Cars Web Valeurs réelles des jetons publics de @volvo-cars/css 2.5.1, conformes au balisage documenté des cartes sélectionnables. Les valeurs claires par défaut sont affichées ; le même fichier de style fournit le thème sombre. ### Rôles du mode clair par défaut | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --v-color-foreground-primary | #000 | Premières déclarations du mode clair de la version 2.5.1 ; le thème sombre natif remplace ces valeurs de rôle. | | --v-color-foreground-secondary | #5e5e5e | Premières déclarations du mode clair de la version 2.5.1 ; le thème sombre natif remplace ces valeurs de rôle. | | --v-color-foreground-tertiary | #787878 | Premières déclarations du mode clair de la version 2.5.1 ; le thème sombre natif remplace ces valeurs de rôle. | | --v-color-foreground-inverted | #fff | Premières déclarations du mode clair de la version 2.5.1 ; le thème sombre natif remplace ces valeurs de rôle. | | --v-color-foreground-accent-blue | #0b2ded | Premières déclarations du mode clair de la version 2.5.1 ; le thème sombre natif remplace ces valeurs de rôle. | | --v-color-background-primary | #fff | Premières déclarations du mode clair de la version 2.5.1 ; le thème sombre natif remplace ces valeurs de rôle. | | --v-color-background-secondary | #fafafa | Premières déclarations du mode clair de la version 2.5.1 ; le thème sombre natif remplace ces valeurs de rôle. | | --v-color-background-feedback-green | #d7f9df | Premières déclarations du mode clair de la version 2.5.1 ; le thème sombre natif remplace ces valeurs de rôle. | | --v-color-background-feedback-red | #fce5e3 | Premières déclarations du mode clair de la version 2.5.1 ; le thème sombre natif remplace ces valeurs de rôle. | | --v-color-surface-gray | #e3e3e3 | Premières déclarations du mode clair de la version 2.5.1 ; le thème sombre natif remplace ces valeurs de rôle. | ### Espacement et formes fixes | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --v-space-2 | .125rem | Échelle fixe publiée. Distinguez-la des jetons d’espacement fluide de la page. | | --v-space-4 | .25rem | Échelle fixe publiée. Distinguez-la des jetons d’espacement fluide de la page. | | --v-space-8 | .5rem | Échelle fixe publiée. Distinguez-la des jetons d’espacement fluide de la page. | | --v-space-12 | .75rem | Échelle fixe publiée. Distinguez-la des jetons d’espacement fluide de la page. | | --v-space-16 | 1rem | Échelle fixe publiée. Distinguez-la des jetons d’espacement fluide de la page. | | --v-space-24 | 1.5rem | Échelle fixe publiée. Distinguez-la des jetons d’espacement fluide de la page. | | --v-space-32 | 2rem | Échelle fixe publiée. Distinguez-la des jetons d’espacement fluide de la page. | | --v-space-48 | 3rem | Échelle fixe publiée. Distinguez-la des jetons d’espacement fluide de la page. | | --v-space-64 | 4rem | Échelle fixe publiée. Distinguez-la des jetons d’espacement fluide de la page. | | --v-radius-sm | .25rem | Échelle fixe publiée. Distinguez-la des jetons d’espacement fluide de la page. | | --v-radius-md | .5rem | Échelle fixe publiée. Distinguez-la des jetons d’espacement fluide de la page. | | --v-radius-lg | 1rem | Échelle fixe publiée. Distinguez-la des jetons d’espacement fluide de la page. | | --v-radius-full | 9999px | Échelle fixe publiée. Distinguez-la des jetons d’espacement fluide de la page. | ### Règles relatives au texte et aux bordures | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --v-font-sans-family | "Volvo Centum", "Helvetica Neue", "Helvetica", "Noto Sans", "Segoe UI", "Arial", sans-serif | Valeurs publiques réelles de la version 2.5.1. L’exemple n’inclut pas les fichiers de police Volvo et utilise donc la pile de polices de remplacement. | | --v-font-regular-weight | 400 | Valeurs publiques réelles de la version 2.5.1. L’exemple n’inclut pas les fichiers de police Volvo et utilise donc la pile de polices de remplacement. | | --v-font-emphasis-weight | 600 | Valeurs publiques réelles de la version 2.5.1. L’exemple n’inclut pas les fichiers de police Volvo et utilise donc la pile de polices de remplacement. | | --v-font-14-size | .875rem | Valeurs publiques réelles de la version 2.5.1. L’exemple n’inclut pas les fichiers de police Volvo et utilise donc la pile de polices de remplacement. | | --v-font-14-lineheight | 1.572 | Valeurs publiques réelles de la version 2.5.1. L’exemple n’inclut pas les fichiers de police Volvo et utilise donc la pile de polices de remplacement. | | --v-font-16-size | 1rem | Valeurs publiques réelles de la version 2.5.1. L’exemple n’inclut pas les fichiers de police Volvo et utilise donc la pile de polices de remplacement. | | --v-font-16-lineheight | 1.5 | Valeurs publiques réelles de la version 2.5.1. L’exemple n’inclut pas les fichiers de police Volvo et utilise donc la pile de polices de remplacement. | | --v-font-20-size | 1.25rem | Valeurs publiques réelles de la version 2.5.1. L’exemple n’inclut pas les fichiers de police Volvo et utilise donc la pile de polices de remplacement. | | --v-font-20-lineheight | 1.4 | Valeurs publiques réelles de la version 2.5.1. L’exemple n’inclut pas les fichiers de police Volvo et utilise donc la pile de polices de remplacement. | | --v-border-width-default | 1px | Valeurs publiques réelles de la version 2.5.1. L’exemple n’inclut pas les fichiers de police Volvo et utilise donc la pile de polices de remplacement. | | --v-border-width-selected | 2px | Valeurs publiques réelles de la version 2.5.1. L’exemple n’inclut pas les fichiers de police Volvo et utilise donc la pile de polices de remplacement. | ## Guide complet système de design Volvo Cars Web 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. ## Système de design Volvo Cars Web HTML en premier Foundation et choix de version ### Verrouillez la version de la feuille de style correspondant au motif > L’exemple utilise @volvo-cars/css 2.5.1, qui correspond à la référence de cartes sélectionnables retenue pour l’implémentation. La version 3 repose sur un contrat différent : installer la dernière version sans vérifier le balisage peut rendre le motif incomplet. La version doit figurer dans la configuration comme dans le guide : une classe de composant ne garantit pas que toutes les versions la stylisent de la même manière. ### Utilisez délibérément la couche Web publique Cette étude importe directement les jetons Web publics et la feuille de style all-media. Elle ne dépend pas du package interne EDLS distinct. L’application reste en HTML pur, avec un peu de JavaScript pour sa liste de contrôle. Le CSS installé gère l’apparence des cartes sélectionnables, le style des contrôles et les rôles du mode de couleur ; l’application fournit le contenu et l’état. ## Rôles neutres, typographie et espacement système de design Volvo Cars Web ### Conservez le lien entre les rôles clairs et sombres Le tableau répertorie les déclarations claires par défaut, tandis que data-color-mode sélectionne les valeurs sombres natives correspondantes. La composition utilise les rôles d’arrière-plan et de premier plan au lieu d’imposer du texte blanc à chaque carte. Le changement de thème doit préserver la formule et les options sélectionnées : modifier la palette n’a aucun effet sur la liste de contrôle. ### Distinguez les intervalles fixes du rythme fluide de la page Dans la référence sélectionnée, les valeurs d’espacement fixes vont de 2 px à 64 px. D’autres jetons publics de mise en page utilisent clamp et round et s’adaptent donc à la fenêtre d’affichage. La composition en deux colonnes et l’écart de 40 px de l’exemple sont des choix de mise en page originaux autour des cartes natives. La pile de polices publiée est conservée, mais les ressources de police Volvo ne sont pas incluses ; le rendu utilise la police système disponible comme solution de remplacement. ## Sémantique des cartes sélectionnables système de design Volvo Cars Web ### Utilisez des boutons radio pour choisir une formule Les deux cartes de formule contiennent des boutons radio natifs portant le même nom, dans un fieldset avec une légende. Chaque carte est un label comportant des emplacements pour le titre, les métadonnées et la description. Cliquer sur la carte sélectionne son bouton radio et le comportement clavier habituel des boutons radio reste disponible. La formule sélectionnée constitue donc un véritable état de formulaire, et non une bordure décorative gérée séparément. ### Utilisez des cases à cocher pour les options indépendantes L’eau et une couche supplémentaire peuvent être sélectionnées indépendamment ; elles utilisent donc des cases à cocher. Les cartes ne contiennent ni liens ni boutons imbriqués : un élément interactif à l’intérieur d’un label entraînerait des comportements d’activation contradictoires. Les actions du récapitulatif se trouvent à l’extérieur des cartes. La couche de formulaires publiée de React constitue une autre option lorsque la conception nécessite réellement un contenu de carte interactif plus complexe. - Regroupez les boutons radio dans un même fieldset avec une légende. - Utilisez des cases à cocher pour les options indépendantes. - Placez les liens et les boutons en dehors d’une carte CSS composée uniquement d’un label. ## Liste de contrôle dérivée et confirmation système de design Volvo Cars Web ### Générez le récapitulatif à partir des mêmes contrôles Le récapitulatif combine les éléments de base du programme choisi et les extras sélectionnés. Changer de bouton radio met à jour son titre et ses éléments de base, tout en conservant les extras indépendants. Le nombre est calculé à partir de la liste obtenue. Tout le contenu d’exemple consacré aux bagages est original et évite volontairement les caractéristiques des véhicules, les prix et toute affirmation concernant une configuration d’achat réelle de Volvo. ### Effacer la confirmation obsolète lorsque les choix changent « Conserver ce programme » affiche une confirmation locale. Toute modification ultérieure du programme ou des extras masque ce message afin qu’il ne laisse pas entendre que la nouvelle combinaison a déjà été conservée. Cette action n’écrit rien dans un compte, n’effectue aucun achat et ne transmet aucune donnée. La note affichée et le code source décrivent de manière cohérente cette fonctionnalité limitée à la page. ## Système de design Volvo Cars Web Mode de couleur et composition adaptative ### Dissocier le thème de l’état de la liste Le sélecteur de mode de couleur modifie data-color-mode sur le document. Il ne recrée ni les boutons radio, ni les cases à cocher, ni le récapitulatif. La feuille de style native applique des transitions à certaines surfaces ; la vérification visuelle doit donc porter sur le thème une fois la transition terminée, plutôt que sur une capture prise en cours de changement. Vérifiez ensemble le texte, l’état des contrôles et le contraste des surfaces. ### Empiler les éléments dans l’ordre de lecture sur les petits écrans Les choix de bagages précèdent le récapitulatif dans l’ordre du document. Sur les téléphones, la grille à deux colonnes devient une seule colonne, sans modifier cet ordre ni supprimer aucune action. Les fieldsets ont min-width:0 pour que leur dimensionnement par défaut ne provoque pas de débordement horizontal. Le contenu long des cartes revient à la ligne dans la mise en page des cartes sélectionnées, sans déborder du conteneur parent. ## Système de design Volvo Cars Web Code source complet et vérification locale ### Exécuter les deux fichiers source avec le package correspondant Le JavaScript contient le contenu original complet et tous les gestionnaires d’interaction. Le CSS ne contient que la composition de l’application et un correctif local pour la coche des cases à cocher. Utilisez le shell HTML fourni, enregistrez les deux fichiers source et installez la version CSS épinglée. Importer uniquement la feuille de style permettrait de styliser les contrôles, mais ne calculerait pas le nombre d’éléments de la liste et n’afficherait pas la confirmation locale. 1. Créer l’application vanilla et installer @volvo-cars/css 2.5.1. 2. Enregistrer main.js, volvo.css et le shell racine HTML fourni. 3. Lancer l’application et comparer le comportement des boutons radio et des cases à cocher. 4. Examiner les thèmes clair et sombre une fois stabilisés, ainsi que l’état après réinitialisation. ### Vérifier ensemble les choix, le thème et la réinitialisation Choisissez le programme côtier, ajoutez l’eau et vérifiez que quatre éléments apparaissent. Conservez le programme, ajoutez une couche et vérifiez que l’ancienne confirmation disparaît. Passez en mode sombre sans perdre vos choix, puis réinitialisez au premier programme sans extras. Vérifiez la sélection des boutons radio au clavier et le retour à la ligne sur petit écran, puis examinez les surfaces des thèmes clair et sombre une fois les transitions terminées. ## Système de design Volvo Cars Web Exemples de composants du système de design ### main.js — sélection complète du programme Tous les choix, le récapitulatif calculé, la confirmation locale, le thème et la réinitialisation. ``` 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(); ``` Référence du code - Utilise le modèle de bouton radio et d’emplacement de libellé portant le même nom dans la feuille de style épinglée. ### volvo.css — composition originale Mise en page adaptative et correctif local pour la coche des cases à cocher. ``` 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}} ``` Référence du code - La mise en page est originale ; le style des cartes provient du CSS public installé. ### index.html — shell racine Fichiers racine et d’entrée du module complets. ``` Weekend packing study
``` Référence du code - Remplacez le fichier index.html racine de Vite par ce fichier. ## Système de design Volvo Cars Web Configuration de l’agent IA ### Point de départ de l’implémentation La version épinglée correspond à cette implémentation de cartes sélectionnables. Les ressources de polices officielles ne sont pas incluses dans l’aperçu. ``` 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 ``` ### Un prompt pour votre projet ``` Réalisez cette étude originale de préparation pour un week-end à l’aide de CSS 2.5.1 de Volvo Cars et du code source complet fourni. Utilisez des cartes sélectionnables reposant sur des libellés natifs, un groupe de boutons radio dans un fieldset, des extras indépendants sous forme de cases à cocher, des nombres calculés, l’effacement des confirmations obsolètes et un état du thème indépendant des choix. Veillez à ce que tout le contenu d’exemple reste distinct des caractéristiques réelles des véhicules. ``` ## Système de design Volvo Cars Web Sources et périmètre Une étude originale de préparation des bagages OpenDesign utilisant @volvo-cars/css 2.5.1. Il ne s’agit pas d’un configurateur de véhicule. Les fichiers de polices Volvo ne sont pas inclus ; les polices de remplacement natives de la feuille de style sont utilisées. - Cartes sélectionnables Emplacements de libellés, groupes de boutons radio et limites du contenu interactif. - Installation Périmètre du CSS Web public et de l’EDLS interne distinct. - Pour commencer Fondations privilégiant HTML et couches React facultatives. - Couleurs Relations entre les rôles de couleur et les thèmes. ## Système de design Volvo Cars Web Ressources associées ### Wonderflow Wanda Utilisez les rôles de thème et la syntaxe des jetons réels de Wanda dans un espace de travail complet dédié à la consultation des retours, avec filtres par sujet, contexte justificatif dépliable et carnet local persistant. ### Workday Canvas Élaborez un parcours d’apprentissage local avec le composant composé FormField de Canvas Kit, TextInput contrôlé et PrimaryButton, en distinguant les sources actuelles des jetons sémantiques des anciens exemples de migration space.x4. ### Zendesk Garden Guide Garden pour le support, avec de véritables alias de thème, des échelles typographiques et de rayons, un composeur de réponse complet, des brouillons locaux tenant compte de la visibilité et la récupération des champs. - [Référence de mise en œuvre](https://designsystem.volvocars.com/web/components/selectable-cards/) - [Source](https://designsystem.volvocars.com/web/core-concepts/colors/) - [Source](https://designsystem.volvocars.com/web/developing/installation/) - [Référence du code](https://designsystem.volvocars.com/web/components/selectable-cards/) - [Cartes sélectionnables Emplacements de libellés, groupes de boutons radio et limites du contenu interactif.](https://designsystem.volvocars.com/web/components/selectable-cards/) - [Installation Périmètre du CSS Web public et de l’EDLS interne distinct.](https://designsystem.volvocars.com/web/developing/installation/) - [Pour commencer Fondations privilégiant HTML et couches React facultatives.](https://designsystem.volvocars.com/web/developing/getting-started/) - [Couleurs Relations entre les rôles de couleur et les thèmes.](https://designsystem.volvocars.com/web/core-concepts/colors/)