# Дизайн-система Orange OUDS Web ## Предварительный просмотр интерфейса дизайн-системы Orange OUDS Web Изучите каждую нативную выдвижную панель, сохраните локальный выбор и переключите оформление. ## Эталон дизайн-системы Orange OUDS Web Зафиксированный исходный код @ouds/web-orange и @ouds/web-common 1.4.0; оригинальные решения по компоновке отмечены отдельно. ### Семантические цветовые роли светлой темы | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --bs-color-action-enabled | #000 | Первые объявления для светлой темы в предустановке 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, а не использует эту таблицу как буквальный набор цветов. | ### Масштаб интервалов | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --bs-space-scaled-none | 0px | Фактически экспортируемая шкала интервалов. В оригинальной композиции сравнения для промежутков 24px выбраны значения из этой шкалы. | | --bs-space-scaled-3xsmall | 2px | Фактически экспортируемая шкала интервалов. В оригинальной композиции сравнения для промежутков 24px выбраны значения из этой шкалы. | | --bs-space-scaled-2xsmall | 4px | Фактически экспортируемая шкала интервалов. В оригинальной композиции сравнения для промежутков 24px выбраны значения из этой шкалы. | | --bs-space-scaled-xsmall | 8px | Фактически экспортируемая шкала интервалов. В оригинальной композиции сравнения для промежутков 24px выбраны значения из этой шкалы. | | --bs-space-scaled-small | 12px | Фактически экспортируемая шкала интервалов. В оригинальной композиции сравнения для промежутков 24px выбраны значения из этой шкалы. | | --bs-space-scaled-medium | 16px | Фактически экспортируемая шкала интервалов. В оригинальной композиции сравнения для промежутков 24px выбраны значения из этой шкалы. | | --bs-space-scaled-large | 24px | Фактически экспортируемая шкала интервалов. В оригинальной композиции сравнения для промежутков 24px выбраны значения из этой шкалы. | | --bs-space-scaled-xlarge | 32px | Фактически экспортируемая шкала интервалов. В оригинальной композиции сравнения для промежутков 24px выбраны значения из этой шкалы. | | --bs-space-scaled-2xlarge | 40px | Фактически экспортируемая шкала интервалов. В оригинальной композиции сравнения для промежутков 24px выбраны значения из этой шкалы. | | --bs-space-scaled-3xlarge | 48px | Фактически экспортируемая шкала интервалов. В оригинальной композиции сравнения для промежутков 24px выбраны значения из этой шкалы. | ### Роли типографики | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --bs-font-sans-serif | "HelvNeueOrange", "Helvetica Neue", Helvetica, "SF Pro", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | Опубликованные объявления шрифтов и типографики. Встроенный пример явно использует запасной шрифт Arial, а не фирменные файлы шрифта HelvNeueOrange. | | --bs-font-size-display-large | 2.5rem | Опубликованные объявления шрифтов и типографики. Встроенный пример явно использует запасной шрифт Arial, а не фирменные файлы шрифта HelvNeueOrange. | | --bs-font-size-heading-large | 1.5rem | Опубликованные объявления шрифтов и типографики. Встроенный пример явно использует запасной шрифт Arial, а не фирменные файлы шрифта HelvNeueOrange. | | --bs-font-size-body-large | 1rem | Опубликованные объявления шрифтов и типографики. Встроенный пример явно использует запасной шрифт Arial, а не фирменные файлы шрифта HelvNeueOrange. | | --bs-font-size-body-medium | 0.875rem | Опубликованные объявления шрифтов и типографики. Встроенный пример явно использует запасной шрифт Arial, а не фирменные файлы шрифта HelvNeueOrange. | | --bs-font-size-body-small | 0.75rem | Опубликованные объявления шрифтов и типографики. Встроенный пример явно использует запасной шрифт Arial, а не фирменные файлы шрифта HelvNeueOrange. | | --bs-font-line-height-body-large | 1.5 | Опубликованные объявления шрифтов и типографики. Встроенный пример явно использует запасной шрифт Arial, а не фирменные файлы шрифта HelvNeueOrange. | | --bs-font-line-height-body-medium | 1.4285714286 | Опубликованные объявления шрифтов и типографики. Встроенный пример явно использует запасной шрифт Arial, а не фирменные файлы шрифта HelvNeueOrange. | ### Параметры Offcanvas по умолчанию | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --bs-offcanvas-zindex | 1045 | Параметры нативного компонента по умолчанию. В оригинальной панели задана ширина 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 ограничивает ее размерами области просмотра. | ### Контракты нативной панели и кнопок | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | Brand action | .btn.btn-brand | Настоящий вариант Orange; не следует считать, что upstream Bootstrap .btn-primary означает то же самое. | | Default action | .btn.btn-default | Фактическое оформление варианта secondary/default, используемое для переключения оформления и сброса локального выбора. | | Open trigger | data-bs-toggle="offcanvas" / data-bs-target | Нативный data API открывает общую панель из каждой исходной кнопки плана. | | Content event | show.bs.offcanvas / event.relatedTarget | Прочитайте выбранный план из элемента-инициатора перед отображением содержимого панели. | | Close API | oudsWeb.Offcanvas.getInstance(element).hide() | Закройте существующий нативный экземпляр после локального выбора. | | Theme | data-bs-theme="light" or "dark" | Изменяет фактические переменные темы, не создавая заново состояние сравнения. | ## Полное руководство по дизайн-системе Orange OUDS Web Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса. Подробные рекомендации, отправная точка для реализации и ссылки на источники. ## Структура пакетов и тем 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. ### Доверьте нативной среде выполнение логики открытия и закрытия Атрибут data API отвечает за открытие, фон-затемнение, клавишу Escape и управление фокусом. После локального выбора обработчик вызывает oudsWeb.Offcanvas.getInstance(drawer).hide(), чтобы закрыть существующий экземпляр. Он не удаляет класс CSS, оставляя активными ловушку фокуса или фон-затемнение. При проверке возврата фокуса тест дожидается завершения перехода: асинхронное закрытие предусмотрено контрактом компонента. ## Локальный выбор и сброс состояния 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. 1. Сохраните все три предоставленных файла вместе. 2. Установите оба соответствующих пакета OUDS. 3. Запустите сервер для папки и проверьте каждую карточку. 4. Проверьте клавишу Escape, возврат фокуса, очистку локального выбора и оба режима оформления. ### Используйте код и ресурсы из одной версии При смене версий проверяйте варианты кнопок, пространство имён data API, названия событий и переменные темы вместе. CSS одной версии и скрипты другой могут выглядеть корректно, пока взаимодействие не выявит несоответствие. Предоставленная версия — конкретный проверенный пример, а не гарантия одинаковой работы любых будущих сочетаний пакетов. ## Примеры компонентов дизайн-системы Orange OUDS Web ### orange-index.html Полная разметка и нативные импорты CSS/JavaScript. ``` Bundle comparison study

OUDS WEB / ORIGINAL COMPARISON STUDY

Choose room for your day

Three fictional mobile-data bundles for inspecting Orange-themed cards, buttons and a native detail drawer. These are not commercial offers.

Everyday

8 GB

For messages, maps and occasional listening.

Explore

25 GB

More room for podcasts and a longer journey.

Create

60 GB

A larger sample allowance for sharing on the move.

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.

``` Справочник по коду - Сохраните orange-index.html как index.html; имена двух остальных файлов оставьте без изменений. ### orange.css Исходная адаптивная компоновка карточек и явно заданный резервный шрифт. ``` *{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif}main{max-width:1080px;margin:auto;padding:32px}header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;border-bottom:4px solid var(--bs-color-action-selected);padding-bottom:24px}h1{font-size:36px;line-height:1.15;margin:12px 0}.scope{font-size:14px;line-height:1.6;max-width:75ch}.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}.plan{display:flex;flex-direction:column;border:1px solid var(--bs-color-border-default);padding:24px;background:var(--bs-color-bg-primary)}.plan h2{font-size:24px}.amount{font-size:40px;font-weight:700;line-height:1.2;margin:24px 0}.plan p{line-height:1.6}.plan .btn{margin-top:auto}.fine{font-size:13px;line-height:1.6;margin-top:24px}.offcanvas{--bs-offcanvas-width:440px}.offcanvas-header,.offcanvas-body{padding:24px}.offcanvas-header{gap:16px}.offcanvas-title{font-size:24px}.offcanvas-body p,.offcanvas-body li{line-height:1.6}.offcanvas-body ul{padding-left:24px}.offcanvas-body li{margin:12px 0}#selected{padding:24px;border:1px solid var(--bs-color-border-default);margin-top:24px}#selected p{margin:0}#selected .btn{margin-top:16px}@media(max-width:720px){main{padding:16px}.plans{grid-template-columns:1fr}.plan{padding:24px}.amount{margin:16px 0}.plan .btn{margin-top:16px}}[hidden]{display:none!important} ``` Справочник по коду - Сохраните orange-index.html как index.html; имена двух остальных файлов оставьте без изменений. ### orange-app.js Обработка нативных событий выдвижной панели и локальное состояние выбора и темы. ``` 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; имена двух остальных файлов оставьте без изменений. ## Настройка агента дизайн-системы Orange OUDS Web ### Отправная точка для реализации Откройте http://localhost:8000/. Здесь используются скомпилированные нативные ресурсы; сборка Sass не требуется. ``` npm init -y npm install @ouds/web-common@1.4.0 @ouds/web-orange@1.4.0 # Save index.html, orange.css and orange-app.js from the supplied examples. python3 -m http.server 8000 ``` ### Запрос для вашего проекта ``` Реализуйте полноценное сравнительное исследование на OUDS Web 1.4 с согласованными пакетами common/Orange, настоящими вариантами btn-brand и btn-default, нативными событиями Offcanvas и API, разрешением токенов для светлой и тёмной тем и явно заданным резервным шрифтом Arial. Используйте только вымышленные данные для всех пакетов, а выбор храните только локально. ``` ## Источники и область применения дизайн-системы Orange OUDS Web Фактические компоненты OUDS Web CSS и среда выполнения Offcanvas; оригинальные вымышленные наборы OpenDesign и локальный выбор. Явно задан резервный шрифт Arial; коммерческие предложения и заказы не представлены. - Установка Настройка согласованных пакетов common и темы. - Offcanvas Структура выдвижной панели, события и API. - Кнопки Варианты и состояния, специфичные для OUDS. - JavaScript Работа во время выполнения и границы интеграции. ## Связанные материалы по дизайн-системе Orange OUDS Web ### Palantir Blueprint Создайте насыщенную данными рабочую среду с Blueprint: проверенные токены типографики и намерений, таблица с выбором набора данных, панель проверки и полный исходный код React. ### Pega Bolt Изучите систему контента Bolt с брендингом Pega: гибкая типографика, раздельные горизонтальные и вертикальные отступы, а также композиция аккордеона на Twig для редакционной страницы с ресурсами. ### Porsche дизайн-система Изучите Porsche Design System v4: гибкие отступы, цветовые схемы CSS, типографика Porsche Next и конфигуратор с двумя вариантами. В примере приведены реальные выражения токенов и полный файл входа Vite с актуальными событиями сегментированного элемента управления. - [Справочник по реализации](https://web.unified-design-system.orange.com/orange/docs/1.4/components/offcanvas/) - [Источник](https://cdn.jsdelivr.net/npm/@ouds/web-orange@1.4.0/dist/css/ouds-web.css) - [Источник](https://web.unified-design-system.orange.com/orange/docs/1.4/components/offcanvas/) - [Справочник по коду](https://web.unified-design-system.orange.com/orange/docs/1.4/getting-started/introduction/) - [Установка Настройка согласованных пакетов common и темы.](https://web.unified-design-system.orange.com/orange/docs/1.4/getting-started/download/) - [Offcanvas Структура выдвижной панели, события и API.](https://web.unified-design-system.orange.com/orange/docs/1.4/components/offcanvas/) - [Кнопки Варианты и состояния, специфичные для OUDS.](https://web.unified-design-system.orange.com/orange/docs/1.4/components/buttons/) - [JavaScript Работа во время выполнения и границы интеграции.](https://web.unified-design-system.orange.com/orange/docs/1.4/getting-started/javascript/)