# 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を使い、ビューポートに応じて値が変化します。この例の2カラム構成と40pxの間隔は、ネイティブカードを囲む独自のレイアウト指定です。公開されているフォントスタックは維持していますが、Volvoのフォントアセットは同梱されていないため、利用可能なシステムフォントにフォールバックします。 ## Volvo Cars Web デザインシステム 選択可能なカードのセマンティクス ### プランの選択にはラジオ入力を使う 2つのプランカードには、同じname属性を持つネイティブのラジオボタンを配置し、fieldsetとlegendでグループ化します。各カードは、タイトル、メタ情報、説明のスロットを持つラベルです。カードをクリックすると対応するラジオボタンが選択され、通常のラジオボタンのキーボード操作も利用できます。したがって、選択中のプランは装飾的な枠線を別途管理したものではなく、実際のフォーム状態です。 ### 個別に選べる追加項目にはチェックボックスを使う 水と追加のレイヤーはそれぞれ独立して選択できるため、チェックボックスを使います。カード内にリンクやボタンは配置しません。ラベル内に操作可能な要素を置くと、操作が競合するためです。概要の操作ボタンはカードの外に配置します。より複雑な操作可能コンテンツをカード内に配置する必要がある場合は、公開されているReact formsレイヤーを代替として使用できます。 - ラジオボタングループは、1つのfieldsetとlegendでまとめます。 - 個別に選べる追加項目にはチェックボックスを使います。 - リンクやボタンは、CSSのみを含むラベルカードの外に配置します。 ## Volvo Cars Web デザインシステムから生成するチェックリストと確認メッセージ ### 同じコントロールから概要を生成する 概要には、選択したプランの基本項目と選択した追加項目をまとめて表示します。ラジオボタンを変更すると、個別に選んだ追加項目は維持したまま、プラン名と基本項目が更新されます。項目数は、更新後のリストから算出します。サンプルの持ち物はすべて独自に作成したもので、車両の仕様、価格、実際のVolvo購入時の構成に関する記述は意図的に含めていません。 ### 選択が変わったら古い確認メッセージを消す 「このプランを保持」を選ぶと、画面内に確認メッセージが表示されます。その後プランや追加項目を変更するとメッセージを非表示にし、新しい組み合わせも保持済みであるかのように誤解されないようにします。この操作でアカウントへの書き込み、購入、データ送信は行いません。画面に表示する注記とソースコードの説明は、この限定的なページ内の動作に一貫して沿っています。 ## Volvo Cars Web デザインシステムカラーモードとレスポンシブな構成 ### テーマとチェックリストの状態を分ける カラーモードのセレクトを変更すると、ドキュメントのdata-color-modeが更新されます。ラジオボタン、チェックボックス、概要は作り直されません。ネイティブのスタイルシートでは一部の背景レイヤーが遷移するため、変更の途中で撮影したスクリーンショットではなく、テーマが安定した状態を確認してください。テキスト、コントロールの状態、背景とのコントラストをあわせてチェックします。 ### 狭い画面では読み進める順序で縦に並べる ドキュメント上では、持ち物の選択肢が概要より先に配置されています。スマートフォンの幅では2カラムのグリッドが1カラムになり、この順序とすべての操作を維持します。fieldsetにmin-width:0を指定し、デフォルトのサイズ計算による横方向のはみ出しを防ぎます。カードの長いコンテンツも、親要素からはみ出さず、選択カードのレイアウト内で折り返されます。 ## Volvo Cars Web デザインシステム完全なソースとローカルでの検証 ### 対応するパッケージで2つのソースファイルを実行する JavaScriptには、オリジナルのコンテンツ全体とすべての操作ハンドラーが含まれています。CSSにはアプリの構成と、ローカルのチェックボックス用チェックマークのフォールバックのみを記述します。用意されたHTMLシェルを使い、2つのソースファイルを保存して、バージョンを固定したCSSをインストールします。スタイルシートをインポートするだけではコントロールにスタイルは適用されますが、チェックリストの項目数や画面内の確認メッセージは実装されません。 1. vanillaアプリを作成し、@volvo-cars/css 2.5.1をインストールします。 2. main.js、volvo.css、用意されたルートHTMLシェルを保存します。 3. アプリを実行し、ラジオボタンとチェックボックスの動作を比較します。 4. ライトとダークのテーマが安定した状態、およびリセット後の状態を確認します。 ### 選択、テーマ、復元の動作をまとめて確認する 沿岸プランを選び、水を追加して、項目が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(); ``` コードリファレンス - バージョンを固定したスタイルシートの、同じname属性を持つラジオボタンとラベルスロットのパターンを使用します。 ### 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 デザインシステムエージェントのセットアップ ### 実装の出発点 固定されたバージョンは、この選択可能なカードの実装に対応しています。公式フォントアセットはプレビューにバンドルされていません。 ``` 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 のフォントファイルはバンドルされていないため、ネイティブのスタイルシートで代替フォントを使用します。 - 選択可能なカード ラベル用スロット、ラジオグループ、インタラクティブコンテンツの制限。 - インストール 公開ウェブ 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/) - [インストール 公開ウェブ 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/)