Изучите реальные семантические токены Orange OUDS 1.4, пакеты тем и встроенное поведение Offcanvas на примере полноценного адаптивного сравнительного обзора.
Первые объявления для светлой темы в предустановке Orange 1.4. Темная тема получает собственные значения через data-bs-theme, а не использует эту таблицу как буквальный набор цветов.
--bs-color-action-selected
#f15e00
Первые объявления для светлой темы в предустановке Orange 1.4. Темная тема получает собственные значения через data-bs-theme, а не использует эту таблицу как буквальный набор цветов.
--bs-color-action-hover
rgba(0, 0, 0, 0.68)
Первые объявления для светлой темы в предустановке Orange 1.4. Темная тема получает собственные значения через data-bs-theme, а не использует эту таблицу как буквальный набор цветов.
--bs-color-action-pressed
#f15e00
Первые объявления для светлой темы в предустановке Orange 1.4. Темная тема получает собственные значения через data-bs-theme, а не использует эту таблицу как буквальный набор цветов.
--bs-color-bg-primary
#fff
Первые объявления для светлой темы в предустановке Orange 1.4. Темная тема получает собственные значения через data-bs-theme, а не использует эту таблицу как буквальный набор цветов.
--bs-color-bg-secondary
#f4f4f4
Первые объявления для светлой темы в предустановке Orange 1.4. Темная тема получает собственные значения через data-bs-theme, а не использует эту таблицу как буквальный набор цветов.
--bs-color-border-default
rgba(0, 0, 0, 0.2)
Первые объявления для светлой темы в предустановке Orange 1.4. Темная тема получает собственные значения через data-bs-theme, а не использует эту таблицу как буквальный набор цветов.
--bs-color-always-black
#000
Первые объявления для светлой темы в предустановке Orange 1.4. Темная тема получает собственные значения через data-bs-theme, а не использует эту таблицу как буквальный набор цветов.
--bs-color-always-white
#fff
Первые объявления для светлой темы в предустановке Orange 1.4. Темная тема получает собственные значения через data-bs-theme, а не использует эту таблицу как буквальный набор цветов.
Параметры нативного компонента по умолчанию. В оригинальной панели задана ширина 440px, а нативное правило max-width ограничивает ее размерами области просмотра.
--bs-offcanvas-width
400px
Параметры нативного компонента по умолчанию. В оригинальной панели задана ширина 440px, а нативное правило max-width ограничивает ее размерами области просмотра.
--bs-offcanvas-height
30vh
Параметры нативного компонента по умолчанию. В оригинальной панели задана ширина 440px, а нативное правило max-width ограничивает ее размерами области просмотра.
--bs-offcanvas-transition
transform 0.3s ease-in-out
Параметры нативного компонента по умолчанию. В оригинальной панели задана ширина 440px, а нативное правило max-width ограничивает ее размерами области просмотра.
Структура пакетов и тем Orange OUDS в дизайн-системе Orange OUDS Web
Установите пакеты common и Orange вместе
В OUDS Web 1.4.0 общая функциональность отделена от фирменной темы. В примере @ouds/web-common и @ouds/web-orange устанавливаются в одной версии. Пакет Orange предоставляет скомпилированный CSS, а пакет common — браузерный JavaScript в комплекте. В корневом документе явно импортируются оба пути, поэтому читатель получает не просто команду установки пакета и неоформленную статическую страницу.
@ouds/web-orange предоставляет CSS темы Orange.
@ouds/web-common предоставляет общий JavaScript.
В этом примере для обоих пакетов зафиксирована версия 1.4.0.
Рассматривайте OUDS как самостоятельный контракт компонентов
OUDS основана на Bootstrap, но это не означает, что любой класс upstream можно использовать без изменений. В этой версии используются btn-brand, btn-default и другие именованные варианты. В приведенном примере сравнения задействованы именно эти классы и нативные атрибуты данных Offcanvas. При миграции следует сравнивать и разметку, и значения темы, а не просто менять URL таблицы стилей.
Семантические роли цветов и типографики Orange OUDS в дизайн-системе Orange OUDS Web
В оригинальных карточках используются color-bg-primary и color-border-default. Акцентная полоса в узкой шапке задается через color-action-selected: в светлых объявлениях этой переменной соответствует #f15e00. Темная тема меняет эти роли с помощью data-bs-theme в корневом элементе. Поэтому в руководстве указаны значения для светлой темы с обозначением их области действия, а нужный вариант оформления выбирается во время выполнения. Один оранжевый HEX-код не описывает всю дизайн-систему.
Ясно указывайте особенности типографики
В стеке шрифтов пакета первым указан HelvNeueOrange. В этом локальном примере удалены неиспользуемые объявления font-face и явно задан запасной шрифт Arial. В таблице при этом приведены сведения о фактически опубликованных семействах шрифтов и ролях основного текста. Подключение CSS компонентов не доказывает, что фирменный шрифт загружен. Проекту, в котором используется этот шрифт, необходимо отдельно предусмотреть работу с его файлами.
Карточки сравнения и содержимое Orange OUDS в дизайн-системе Orange OUDS Web
Выстройте сравнение на основе реальных критериев выбора
В трех карточках представлены вымышленные объемы данных, краткое описание использования и действие для подробного просмотра. В каждой карточке есть полноценный текст, а не изображение строк-заполнителей. Это оригинальное содержимое для примера, а не актуальные продукты, цены или тарифы Orange. Отсутствие цен в этом примере также помогает избежать впечатления, что речь идет о предложении для покупки или оформлении заказа.
Выровняйте карточки по общей базовой линии
В настольной версии для трех колонок используется сетка с одинаковыми столбцами и карточки с flex-column, благодаря чему кнопки подробного просмотра выравниваются по нижнему краю. При ширине 720px карточки выстраиваются в один столбец и получают естественную высоту. Нативные классы кнопок задают фактические состояния действий; окружающая сетка, отступы 24px и порядок содержимого — оригинальные решения приложения, показанные в предоставленном CSS.
Композиция нативной панели Offcanvas Orange OUDS в дизайн-системе Orange OUDS Web
Заполняйте панель данными из элемента-инициатора
Каждая кнопка подробного просмотра ссылается на одну и ту же панель Offcanvas с идентификатором #details и содержит небольшой индекс плана в атрибуте данных. Событие show.bs.offcanvas предоставляет relatedTarget, который позволяет выбрать соответствующие оригинальные название, описание и список характеристик до отображения панели. Список создается с помощью textContent и настоящих элементов списка, поэтому данные отделены от разметки. Заголовок панели связан с ней через aria-labelledby.
Доверьте нативной среде выполнение логики открытия и закрытия
Локальный выбор и сброс состояния Orange OUDS в дизайн-системе Orange OUDS Web
Описывайте действие, которое действительно произошло
Локальный выбор хранит только сведения о том, какой из вымышленных планов был выбран, и отображает этот выбор под карточками. В сообщении явно указано, что заказ не оформлялся. Новый выбор заменяет предыдущий; при его сбросе сообщение скрывается, а фокус возвращается к первой кнопке подробного просмотра. Данные не отправляются в учетную запись, корзину или платежный сервис.
Отделяйте оформление от выбора
Переключение светлой и темной темы меняет атрибут темы в корневом элементе и собственную подпись действия. Текущий локальный выбор и содержимое трех карточек сохраняются. Это важно при проверке темы: визуальное изменение не должно незаметно сбрасывать текущее сравнение пользователя. В обоих вариантах оформления пример использует нативные CSS, а приложение задает только внешнюю композицию.
Клавиатурное управление и поведение на узких экранах Orange OUDS в дизайн-системе Orange OUDS Web
Указывайте названия действий закрытия и подробного просмотра
В названии действия каждой карточки указан план, а у нативной кнопки закрытия только со значком есть явная доступная подпись Close details. Для поддержки управления фокусом в панели предусмотрены tabindex и помеченный заголовок, как и в нативной реализации. Тесты открывают панель Explore, закрывают ее клавишей Escape и проверяют, что фокус возвращается к вызвавшей ее кнопке, прежде чем перейти к другой карточке.
Не допускайте выхода панели за пределы области просмотра
Приложение задает панели ширину 440px, но правило max-width нативного Offcanvas ограничивает ее ширину на узком экране. Карточки выстраиваются в столбец, а на маленьких экранах внешние отступы уменьшаются. После выбора плана и переключения оформления пример проверен при ширине 280px, 390px, а также на планшетах и настольных экранах, а не только в исходном состоянии.
Полная статическая интеграция Orange OUDS в дизайн-системе Orange OUDS Web
Используйте полный пример из трех файлов
Сохраните orange-index.html как index.html, а orange.css и orange-app.js разместите рядом. Установите два пакета с закреплёнными версиями и запустите сервер для этой папки. В HTML входят оба пути к исходным ресурсам, содержимое всех карточек, структура выдвижной панели и скрипт приложения. Для воспроизведения этой композиции в браузере не нужны обёртка React, недостающий каркас или выдуманный SDK.
Сохраните все три предоставленных файла вместе.
Установите оба соответствующих пакета OUDS.
Запустите сервер для папки и проверьте каждую карточку.
Проверьте клавишу Escape, возврат фокуса, очистку локального выбора и оба режима оформления.
Используйте код и ресурсы из одной версии
При смене версий проверяйте варианты кнопок, пространство имён data API, названия событий и переменные темы вместе. CSS одной версии и скрипты другой могут выглядеть корректно, пока взаимодействие не выявит несоответствие. Предоставленная версия — конкретный проверенный пример, а не гарантия одинаковой работы любых будущих сочетаний пакетов.
Примеры компонентов дизайн-системы Orange OUDS Web
orange-index.html
Полная разметка и нативные импорты CSS/JavaScript.
html
<!doctype html><html lang="en" data-bs-theme="light"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Bundle comparison study</title><link rel="stylesheet" href="./node_modules/@ouds/web-orange/dist/css/ouds-web.min.css"><link rel="stylesheet" href="./orange.css"></head><body><main><header><div><p>OUDS WEB / ORIGINAL COMPARISON STUDY</p><h1>Choose room for your day</h1><p class="scope">Three fictional mobile-data bundles for inspecting Orange-themed cards, buttons and a native detail drawer. These are not commercial offers.</p></div><button id="theme" class="btn btn-default" type="button">Use dark appearance</button></header><div class="plans"><article class="plan"><h2>Everyday</h2><p class="amount">8 GB</p><p>For messages, maps and occasional listening.</p><button class="btn btn-brand" data-plan="0" data-bs-toggle="offcanvas" data-bs-target="#details" aria-controls="details">Inspect Everyday</button></article><article class="plan"><h2>Explore</h2><p class="amount">25 GB</p><p>More room for podcasts and a longer journey.</p><button class="btn btn-brand" data-plan="1" data-bs-toggle="offcanvas" data-bs-target="#details" aria-controls="details">Inspect Explore</button></article><article class="plan"><h2>Create</h2><p class="amount">60 GB</p><p>A larger sample allowance for sharing on the move.</p><button class="btn btn-brand" data-plan="2" data-bs-toggle="offcanvas" data-bs-target="#details" aria-controls="details">Inspect Create</button></article></div><section id="selected" hidden><p role="status" id="selection-message"></p><button id="clear" class="btn btn-default">Clear local choice</button></section><p class="fine">OUDS Web 1.4.0 native CSS and Offcanvas runtime; original sample content and local selection. Arial fallback is used instead of Orange’s branded typeface.</p></main><aside class="offcanvas offcanvas-end" tabindex="-1" id="details" aria-labelledby="drawer-title"><div class="offcanvas-header"><h2 class="offcanvas-title" id="drawer-title">Bundle details</h2><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close details"></button></div><div class="offcanvas-body"><p id="drawer-description"></p><ul id="features"></ul><p>No account is connected. Keeping a choice changes this preview only.</p><button id="choose" class="btn btn-brand">Keep this local choice</button></div></aside><script src="./node_modules/@ouds/web-common/dist/js/ouds-web.bundle.min.js"></script><script src="./orange-app.js"></script></body></html>
Сохраните orange-index.html как index.html; имена двух остальных файлов оставьте без изменений.
orange-app.js
Обработка нативных событий выдвижной панели и локальное состояние выбора и темы.
javascript
const plans=[["Everyday", "8 GB", "For messages, maps and occasional listening.", ["8 GB of fictional monthly data", "One original study profile", "No contract, order or payment"]], ["Explore", "25 GB", "More room for podcasts and a longer journey.", ["25 GB of fictional monthly data", "One original study profile", "No contract, order or payment"]], ["Create", "60 GB", "A larger sample allowance for sharing on the move.", ["60 GB of fictional monthly data", "One original study profile", "No contract, order or payment"]]];let current=0;const drawer=document.querySelector('#details');drawer.addEventListener('show.bs.offcanvas',event=>{current=Number(event.relatedTarget.dataset.plan);const[name,amount,description,features]=plans[current];document.querySelector('#drawer-title').textContent=name+' · '+amount;document.querySelector('#drawer-description').textContent=description;document.querySelector('#features').replaceChildren(...features.map(text=>{const li=document.createElement('li');li.textContent=text;return li}));});document.querySelector('#choose').addEventListener('click',()=>{document.querySelector('#selected').hidden=false;document.querySelector('#selection-message').textContent=plans[current][0]+' is your local preview choice. No order was placed.';oudsWeb.Offcanvas.getInstance(drawer).hide();});document.querySelector('#clear').addEventListener('click',()=>{document.querySelector('#selected').hidden=true;document.querySelector('[data-plan]').focus()});document.querySelector('#theme').addEventListener('click',e=>{let dark=document.documentElement.dataset.bsTheme!=='dark';document.documentElement.dataset.bsTheme=dark?'dark':'light';e.currentTarget.textContent=dark?'Use light appearance':'Use dark appearance'});
Сохраните orange-index.html как index.html; имена двух остальных файлов оставьте без изменений.
04
Настройка агента дизайн-системы Orange OUDS Web
Отправная точка для реализации
Откройте http://localhost:8000/. Здесь используются скомпилированные нативные ресурсы; сборка Sass не требуется.
sh
npm init -y
npm install @ouds/[email protected] @ouds/[email protected]
# Save index.html, orange.css and orange-app.js from the supplied examples.
python3 -m http.server 8000
Запрос для вашего проекта
Промпт для AI-агента
Реализуйте полноценное сравнительное исследование на OUDS Web 1.4 с согласованными пакетами common/Orange, настоящими вариантами btn-brand и btn-default, нативными событиями Offcanvas и API, разрешением токенов для светлой и тёмной тем и явно заданным резервным шрифтом Arial. Используйте только вымышленные данные для всех пакетов, а выбор храните только локально.
05
Источники и область применения дизайн-системы Orange OUDS Web
Фактические компоненты OUDS Web CSS и среда выполнения Offcanvas; оригинальные вымышленные наборы OpenDesign и локальный выбор. Явно задан резервный шрифт Arial; коммерческие предложения и заказы не представлены.
