# Volvo Cars Web 设计系统 ## Volvo Cars Web 设计系统 界面预览 选择一个方案，添加彼此独立的额外选项，并在浅色和深色模式下查看相同的选择。 ## Volvo Cars Web 设计系统 设计参考 使用实际公开的 @volvo-cars/css 2.5.1 设计令牌，并与文档所述的可选卡片标记相匹配。此处展示默认浅色模式的值；深色模式由同一份样式表提供。 ### 默认浅色模式角色 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --v-color-foreground-primary | #000 | 2.5.1 中浅色模式的首组声明；原生深色主题会覆盖这些角色值。 | | --v-color-foreground-secondary | #5e5e5e | 2.5.1 中浅色模式的首组声明；原生深色主题会覆盖这些角色值。 | | --v-color-foreground-tertiary | #787878 | 2.5.1 中浅色模式的首组声明；原生深色主题会覆盖这些角色值。 | | --v-color-foreground-inverted | #fff | 2.5.1 中浅色模式的首组声明；原生深色主题会覆盖这些角色值。 | | --v-color-foreground-accent-blue | #0b2ded | 2.5.1 中浅色模式的首组声明；原生深色主题会覆盖这些角色值。 | | --v-color-background-primary | #fff | 2.5.1 中浅色模式的首组声明；原生深色主题会覆盖这些角色值。 | | --v-color-background-secondary | #fafafa | 2.5.1 中浅色模式的首组声明；原生深色主题会覆盖这些角色值。 | | --v-color-background-feedback-green | #d7f9df | 2.5.1 中浅色模式的首组声明；原生深色主题会覆盖这些角色值。 | | --v-color-background-feedback-red | #fce5e3 | 2.5.1 中浅色模式的首组声明；原生深色主题会覆盖这些角色值。 | | --v-color-surface-gray | #e3e3e3 | 2.5.1 中浅色模式的首组声明；原生深色主题会覆盖这些角色值。 | ### 固定间距与形状 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --v-space-2 | .125rem | 已发布的固定尺度。请将这些值与流动式页面间距令牌区分开来。 | | --v-space-4 | .25rem | 已发布的固定尺度。请将这些值与流动式页面间距令牌区分开来。 | | --v-space-8 | .5rem | 已发布的固定尺度。请将这些值与流动式页面间距令牌区分开来。 | | --v-space-12 | .75rem | 已发布的固定尺度。请将这些值与流动式页面间距令牌区分开来。 | | --v-space-16 | 1rem | 已发布的固定尺度。请将这些值与流动式页面间距令牌区分开来。 | | --v-space-24 | 1.5rem | 已发布的固定尺度。请将这些值与流动式页面间距令牌区分开来。 | | --v-space-32 | 2rem | 已发布的固定尺度。请将这些值与流动式页面间距令牌区分开来。 | | --v-space-48 | 3rem | 已发布的固定尺度。请将这些值与流动式页面间距令牌区分开来。 | | --v-space-64 | 4rem | 已发布的固定尺度。请将这些值与流动式页面间距令牌区分开来。 | | --v-radius-sm | .25rem | 已发布的固定尺度。请将这些值与流动式页面间距令牌区分开来。 | | --v-radius-md | .5rem | 已发布的固定尺度。请将这些值与流动式页面间距令牌区分开来。 | | --v-radius-lg | 1rem | 已发布的固定尺度。请将这些值与流动式页面间距令牌区分开来。 | | --v-radius-full | 9999px | 已发布的固定尺度。请将这些值与流动式页面间距令牌区分开来。 | ### 文本与边框规则 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --v-font-sans-family | "Volvo Centum", "Helvetica Neue", "Helvetica", "Noto Sans", "Segoe UI", "Arial", sans-serif | 实际公开的 2.5.1 值。此示例未打包 Volvo 字体文件，因此使用字体栈回退。 | | --v-font-regular-weight | 400 | 实际公开的 2.5.1 值。此示例未打包 Volvo 字体文件，因此使用字体栈回退。 | | --v-font-emphasis-weight | 600 | 实际公开的 2.5.1 值。此示例未打包 Volvo 字体文件，因此使用字体栈回退。 | | --v-font-14-size | .875rem | 实际公开的 2.5.1 值。此示例未打包 Volvo 字体文件，因此使用字体栈回退。 | | --v-font-14-lineheight | 1.572 | 实际公开的 2.5.1 值。此示例未打包 Volvo 字体文件，因此使用字体栈回退。 | | --v-font-16-size | 1rem | 实际公开的 2.5.1 值。此示例未打包 Volvo 字体文件，因此使用字体栈回退。 | | --v-font-16-lineheight | 1.5 | 实际公开的 2.5.1 值。此示例未打包 Volvo 字体文件，因此使用字体栈回退。 | | --v-font-20-size | 1.25rem | 实际公开的 2.5.1 值。此示例未打包 Volvo 字体文件，因此使用字体栈回退。 | | --v-font-20-lineheight | 1.4 | 实际公开的 2.5.1 值。此示例未打包 Volvo 字体文件，因此使用字体栈回退。 | | --v-border-width-default | 1px | 实际公开的 2.5.1 值。此示例未打包 Volvo 字体文件，因此使用字体栈回退。 | | --v-border-width-selected | 2px | 实际公开的 2.5.1 值。此示例未打包 Volvo 字体文件，因此使用字体栈回退。 | ## Volvo Cars Web 设计系统 完整指南 实用指南，介绍如何为真实界面选择、应用和评审此系统。 完整指导、实现起点和源代码链接。 ## Volvo Cars Web 设计系统 HTML 优先的 Foundation与版本选择 ### 固定使用与该模式匹配的样式表 > 此示例使用 @volvo-cars/css 2.5.1，与实现所参照的可选卡片一致。版本 3 的使用约定不同，因此如果不检查标记就安装最新版本，可能导致模式无法完整呈现。设置和指南中都应注明版本：组件类名并不保证每个版本都会以相同方式应用样式。 ### 有选择地使用公开的 Web 层 本示例直接导入公开的 Web 设计令牌和 all-media 样式表，不依赖单独的内部 EDLS 包。应用使用原生 HTML，并仅用少量 JavaScript 实现清单功能。已安装的 CSS负责可选卡片外观、控件样式和色彩模式角色；应用负责提供内容和状态。 ## Volvo Cars Web 设计系统 中性色角色、字体与间距 ### 保持浅色与深色模式角色相互对应 表格记录了默认浅色模式下的声明，而 data-color-mode 会选择对应的原生深色模式值。此布局使用背景和前景角色，而不是为每张卡片都硬编码白色文字。切换主题时应保留已选方案和额外选项；更改配色不应影响清单。 ### 区分固定间距步长与流动的页面节奏 所选参考中的固定间距值从 2px 到 64px 不等。其他公开页面令牌使用 clamp 和 round，因此会随视口变化。示例中的双列布局和 40px 间距是围绕原生卡片设计的布局选择。保留了已发布的字体栈，但未捆绑 Volvo 字体资源；渲染时会使用系统中可用的备用字体。 ## Volvo Cars Web 设计系统 可选卡片语义 ### 使用单选按钮选择一个方案 两个方案卡片包含同名原生单选按钮，并置于带有图例的 fieldset 中。每张卡片都是一个 label，包含标题、辅助信息和描述插槽。点击卡片即可选中对应的单选按钮，同时保留单选按钮原有的键盘操作方式。因此，选中的方案是真正的表单状态，而不是单独管理的装饰性边框。 ### 使用复选框选择互不关联的附加项 饮用水和额外衣物可以分别选择，因此使用复选框。卡片中不包含嵌套的链接或按钮：在 label 内放置交互元素会导致激活行为相互冲突。摘要操作位于卡片之外。若设计确实需要更复杂的卡片交互内容，可使用已发布的 React forms 层作为替代方案。 - 在同一个 fieldset 和图例中保留一个单选按钮组。 - 使用复选框选择互不关联的附加项。 - 将链接和按钮放在仅含 CSS 的 label 卡片之外。 ## Volvo Cars Web 设计系统 派生清单与确认 ### 根据相同的控件生成摘要 摘要由所选方案的基础物品和已选附加项组成。更改单选项会更新方案标题和基础物品，同时保留独立选择的附加项。物品数量根据最终列表生成。所有示例中的打包内容均为原创，并刻意避免涉及车辆规格、价格或实际 Volvo 购车配置相关的描述。 ### 选项变更时清除过期的确认提示 “保留此方案”会显示本地确认提示。之后只要更改方案或附加项，该提示就会隐藏，以免让人误以为新组合也已被保留。此操作不会写入账户、购买任何商品或提交数据。可见提示与源码对这一有限的页面内行为保持一致描述。 ## Volvo Cars Web 设计系统 颜色模式与响应式布局 ### 将主题与清单状态分开管理 颜色模式选择器会更改文档上的 data-color-mode 属性，不会重新创建单选按钮、复选框或摘要。原生样式表会为部分界面表面添加过渡效果，因此应检查主题变化完成后的状态，而不是在变化过程中截取的画面。应同时检查文本、控件状态和界面表面的对比度。 ### 在窄屏下按阅读顺序纵向排列 文档顺序中，打包选项位于摘要之前。在手机屏幕宽度下，双列网格会变为单列，同时保持原有顺序和所有操作。为 fieldset 设置 min-width:0，避免其默认尺寸导致水平溢出。较长的卡片内容会在所选卡片布局内换行，不会溢出父级容器。 ## Volvo Cars Web 设计系统 完整源码与本地验证 ### 使用匹配的软件包运行两个源文件 JavaScript 包含完整的原创内容和所有交互处理程序。CSS 仅包含应用布局以及本地复选框勾选标记的备用实现。使用提供的 HTML shell，保存两个源文件，并安装固定版本的 CSS。仅导入样式表只能为控件添加样式，无法实现清单计数或本地确认功能。 1. 创建 vanilla 应用并安装 @volvo-cars/css 2.5.1。 2. 保存 main.js、volvo.css 和提供的根目录 HTML shell。 3. 运行应用并比较单选按钮和复选框的行为。 4. 检查稳定后的浅色和深色主题，以及重置状态。 ### 同时检查选择、主题与恢复操作 选择海岸方案，添加饮用水，并确认显示四件物品。保留该方案后添加一件衣物，并检查旧的确认提示是否消失。在不丢失已选内容的情况下切换到深色模式，然后重置为第一个方案且不选择任何附加项。验证单选按钮的键盘选择方式和窄屏下的换行表现，并检查稳定后的浅色和深色界面表面。 ## Volvo Cars Web 设计系统组件示例 ### main.js — 完整的方案选择功能 包含所有选项、派生摘要、本地确认、主题和重置功能。 ``` 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(); ``` 代码参考 - 采用固定版本样式表中的同名单选按钮与 label 插槽模式。 ### volvo.css — 原创布局 响应式布局和本地复选框勾选标记的备用实现。 ``` 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}} ``` 代码参考 - 布局为原创；卡片样式来自已安装的公开 CSS。 ### index.html — 根目录外壳 完整的根入口和模块入口。 ``` Weekend packing study
``` 代码参考 - 用此文件替换根目录中的 Vite index.html。 ## Volvo Cars Web 设计系统 Agent 设置 ### 实现起点 固定版本与此可选择卡片实现相匹配。预览中未捆绑官方字体资源。 ``` 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 ``` ### 适用于你项目的提示词 ``` 使用 Volvo Cars CSS 2.5.1 和提供的完整源代码，构建原创的周末行李打包示例。使用基于原生 label 的可选择卡片、fieldset 单选组、相互独立的复选框附加项、派生计数、清除过期确认状态，以及独立于选择项的主题状态。所有示例内容都应与真实车辆规格有所区别。 ``` ## Volvo Cars Web 设计系统 来源与范围 使用 @volvo-cars/css 2.5.1 构建的原创 OpenDesign 行李打包示例。它不是车辆配置器。未捆绑 Volvo 字体文件；使用原生样式表回退字体。 - 可选择卡片 标签插槽、单选分组和交互内容限制。 - 安装 公开 Web CSS 与独立内部 EDLS 的边界。 - 入门指南 以 HTML 为先的基础层和可选 React 层。 - 颜色 颜色角色与主题之间的关系。 ## Volvo Cars Web 设计系统 相关资源 ### Wonderflow Wanda 在完整的反馈阅读工作区中使用 Wanda 的真实主题角色和令牌语法，支持主题筛选、展开查看证据背景，以及持久保存到本地的笔记本。 ### Workday Canvas 使用 Canvas Kit 的复合 FormField、受控 TextInput 和 PrimaryButton，制定本地学习计划；同时区分当前语义令牌来源与旧版 space.x4 迁移示例。 ### Zendesk Garden 面向支持工作的 Garden 指南，采用真实的主题别名、字体和圆角比例，配备完整的回复编辑器、根据可见状态保存的本地草稿，以及字段恢复功能。 - [实现参考](https://designsystem.volvocars.com/web/components/selectable-cards/) - [来源](https://designsystem.volvocars.com/web/core-concepts/colors/) - [来源](https://designsystem.volvocars.com/web/developing/installation/) - [代码参考](https://designsystem.volvocars.com/web/components/selectable-cards/) - [可选择卡片 标签插槽、单选分组和交互内容限制。](https://designsystem.volvocars.com/web/components/selectable-cards/) - [安装 公开 Web CSS 与独立内部 EDLS 的边界。](https://designsystem.volvocars.com/web/developing/installation/) - [入门指南 以 HTML 为先的基础层和可选 React 层。](https://designsystem.volvocars.com/web/developing/getting-started/) - [颜色 颜色角色与主题之间的关系。](https://designsystem.volvocars.com/web/core-concepts/colors/)