# Дизайн-система 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 другой контракт, поэтому установка последнего пакета без проверки разметки может привести к неполному отображению шаблона. Указывайте версию не только в руководстве, но и в настройках: наличие класса компонента не гарантирует, что в каждом выпуске он оформлен одинаково. ### Используйте общедоступный веб-слой осознанно В этом примере напрямую подключаются общедоступные веб-токены и таблица стилей для всех типов медиа. Отдельный внутренний пакет EDLS не используется. Приложение написано на обычном HTML, а для списка применяется небольшая часть JavaScript. Установленный CSS отвечает за внешний вид выбираемых карточек, оформление элементов управления и роли цветовых режимов; приложение задаёт содержимое и состояние. ## Дизайн-система Volvo Cars Web Нейтральные роли, типографика и отступы ### Сохраняйте связь ролей светлого и тёмного режимов В таблице указаны значения по умолчанию для светлой темы, а data-color-mode выбирает соответствующие встроенные значения для тёмной темы. В композиции используются роли фона и текста, а не жёстко заданный белый текст для каждой карточки. Переключение темы не должно сбрасывать выбранный план и дополнительные пункты: смена цветовой палитры не зависит от изменения списка. ### Отличайте фиксированные шаги от адаптивного ритма страницы В выбранном примере фиксированные значения отступов варьируются от 2px до 64px. В других общедоступных токенах страницы используются clamp и round, поэтому они адаптируются к размеру окна просмотра. Двухколоночная композиция примера и расстояние 40px — оригинальные решения компоновки встроенных карточек. Опубликованный стек шрифтов сохранён, но файлы шрифтов Volvo не включены в комплект; при отображении используется доступный системный шрифт-запасной вариант. ## Дизайн-система Volvo Cars Web Семантика выбираемых карточек ### Используйте переключатели для выбора одного плана В карточках двух планов размещены встроенные переключатели с одинаковым значением name внутри fieldset с legend. Каждая карточка — это label с областями для заголовка, метаданных и описания. Нажатие на карточку выбирает соответствующий переключатель, при этом сохраняется стандартное управление с клавиатуры. Выбранный план — это реальное состояние формы, а не декоративная рамка, которой отдельно управляет код. ### Используйте флажки для независимых дополнений Воду и дополнительный слой одежды можно выбрать независимо, поэтому для них используются флажки. В карточках нет вложенных ссылок или кнопок: интерактивный элемент внутри label привёл бы к конфликтующему поведению при активации. Действия в сводке расположены за пределами карточек. Опубликованный слой форм React подойдёт как альтернатива, если проекту действительно нужно более сложное интерактивное содержимое карточек. - Размещайте группу переключателей внутри одного fieldset с legend. - Используйте флажки для независимых дополнений. - Размещайте ссылки и кнопки вне карточки CSS, содержащей только label. ## Дизайн-система Volvo Cars Web Список вещей и подтверждение с автоматическим обновлением ### Формируйте сводку из тех же элементов управления Сводка объединяет базовые вещи выбранного плана с выбранными дополнениями. При смене переключателя обновляются название плана и базовый список вещей, а независимые дополнения сохраняются. Количество рассчитывается по получившемуся списку. Всё содержимое примера о сборе вещей оригинальное; оно намеренно не содержит характеристик автомобилей, цен и утверждений о реальной комплектации Volvo при покупке. ### Сбрасывайте устаревшее подтверждение при изменении выбора Кнопка «Оставить этот план» показывает локальное подтверждение. При любом последующем изменении плана или дополнений сообщение скрывается, чтобы не создавать впечатление, будто новая комбинация уже сохранена. Это действие не изменяет данные в аккаунте, не совершает покупок и не отправляет данные. Видимая заметка и исходный код одинаково описывают это ограниченное поведение на странице. ## Дизайн-система Volvo Cars Web Цветовой режим и адаптивная композиция ### Не связывайте тему с состоянием списка вещей Список выбора цветового режима изменяет data-color-mode документа. Переключатели, флажки и сводка при этом не создаются заново. Некоторые поверхности плавно меняют цвет средствами встроенной таблицы стилей, поэтому при визуальной проверке следует оценивать уже установившуюся тему, а не снимок экрана, сделанный в середине перехода. Проверяйте текст, состояние элементов управления и контраст поверхностей вместе. ### Сохраняйте порядок чтения при узком экране Выбор вещей для поездки расположен в документе перед сводкой. На экранах телефона двухколоночная сетка перестраивается в одноколоночную, сохраняя этот порядок и доступность всех действий. Для fieldset задано min-width:0, чтобы размер по умолчанию не приводил к горизонтальной прокрутке. Длинное содержимое карточек переносится внутри компоновки выбранной карточки, а не выходит за её границы. ## Дизайн-система Volvo Cars Web Полный исходный код и локальная проверка ### Запустите два исходных файла с соответствующим пакетом В JavaScript содержится всё оригинальное содержимое и все обработчики взаимодействий. В CSS есть только композиция приложения и локальный запасной вариант отображения галочки у флажка. Используйте предоставленную оболочку HTML, сохраните два исходных файла и установите закреплённый выпуск CSS. Одна лишь загрузка таблицы стилей оформит элементы управления, но не реализует подсчёт пунктов списка и локальное подтверждение. 1. Создайте приложение на vanilla и установите @volvo-cars/css 2.5.1. 2. Сохраните main.js, volvo.css и предоставленную корневую оболочку HTML. 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(); ``` Справочник по коду - Используется схема с переключателями с одинаковым name и областями 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
``` Справочник по коду - Замените этим файлом корневой index.html в Vite. ## Дизайн-система 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 Источники и область применения Оригинальный пример OpenDesign — список вещей для поездки, созданный с помощью @volvo-cars/css 2.5.1. Это не конфигуратор автомобиля. Файлы шрифтов Volvo не включены; используются встроенные запасные варианты таблицы стилей. - Выбираемые карточки Области label, группы переключателей и ограничения для интерактивного содержимого. - Установка Границы общедоступной веб-CSS и отдельной внутренней EDLS. - Начало работы Основы на HTML и дополнительные слои React. - Цвета Связи между цветовыми ролями и темами. ## Дизайн-система Volvo Cars Web Связанные ресурсы ### Wonderflow Wanda Используйте настоящие роли тем и синтаксис токенов Wanda в полноценном рабочем пространстве для чтения отзывов: с фильтрами по темам, раскрывающимся контекстом подтверждений и постоянно доступным локальным блокнотом. ### Workday Canvas Составьте локальный план обучения с составным компонентом FormField, управляемым TextInput и PrimaryButton из Canvas Kit. При этом различайте актуальные источники семантических токенов и старые примеры миграции с 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/) - [Выбираемые карточки Области label, группы переключателей и ограничения для интерактивного содержимого.](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/)