83.3K+Скачать
Корпоративное ПО · Новый ресурс

Дизайн-система Oracle Redwood.

Изучите реальную палитру, семантические роли, отступы и границы плотности Oracle JET 19 Redwood на примере полноценного оригинального редактируемого листа проверки запасов.

Скачать OpenDesign Скачать DESIGN.md
Руководство OpenDesign8 глав45 справочных записейАвторское руководство по приложению
01

Предварительный просмотр интерфейса дизайн-системы Oracle Redwood

Изменяйте количества, проверяйте валидацию, сортируйте и фильтруйте, сохраняя корректный черновик.

Проверьте черновик локального списка материаловОткрыть полный пример
Авторская реализация в браузере с использованием настоящих публичных переменных темы Redwood из JET 19; без среды выполнения JET JavaScript. · Справочник по реализации
02

Справочник по дизайн-системе Oracle Redwood

Базовые публичные объявления из закреплённой таблицы стилей Redwood для JET 19.0.0. Авторское поведение и макет рабочего листа описаны отдельно; внутренние переменные и более поздние переопределения для инвертированного режима исключены из базового справочника.

Семантические роли базовой темы Redwood

Источник
Название / правилоЗначение / конфигурацияПрименение
--oj-core-text-color-primaryrgb(var(--oj-palette-neutral-rgb-190))Исходные объявления JET 19 Redwood для базового режима. Селекторы инвертированного режима и плотности могут переопределять значения; не объединяйте все объявления в справочник только с последними значениями.
--oj-core-text-color-secondaryrgba(var(--oj-palette-neutral-rgb-190), .70)Исходные объявления JET 19 Redwood для базового режима. Селекторы инвертированного режима и плотности могут переопределять значения; не объединяйте все объявления в справочник только с последними значениями.
--oj-core-text-color-disabledrgba(var(--oj-palette-neutral-rgb-190), .4)Исходные объявления JET 19 Redwood для базового режима. Селекторы инвертированного режима и плотности могут переопределять значения; не объединяйте все объявления в справочник только с последними значениями.
--oj-core-bg-color-contentrgb(var(--oj-palette-neutral-rgb-0))Исходные объявления JET 19 Redwood для базового режима. Селекторы инвертированного режима и плотности могут переопределять значения; не объединяйте все объявления в справочник только с последними значениями.
--oj-body-bg-colorrgb(var(--oj-palette-neutral-rgb-10))Исходные объявления JET 19 Redwood для базового режима. Селекторы инвертированного режима и плотности могут переопределять значения; не объединяйте все объявления в справочник только с последними значениями.
--oj-core-divider-colorrgba(var(--oj-palette-neutral-rgb-190),.12)Исходные объявления JET 19 Redwood для базового режима. Селекторы инвертированного режима и плотности могут переопределять значения; не объединяйте все объявления в справочник только с последними значениями.
--oj-core-focus-border-colorrgb(var(--oj-palette-neutral-rgb-190))Исходные объявления JET 19 Redwood для базового режима. Селекторы инвертированного режима и плотности могут переопределять значения; не объединяйте все объявления в справочник только с последними значениями.

Значения палитры, используемые в рабочем листе

Источник
Название / правилоЗначение / конфигурацияПрименение
--oj-palette-neutral-rgb-0255, 255, 255Исходные значения каналов RGB используются внутри rgb() или rgba(). Сами по себе они не являются полными значениями цвета CSS.
--oj-palette-neutral-rgb-10251, 249, 248Исходные значения каналов RGB используются внутри rgb() или rgba(). Сами по себе они не являются полными значениями цвета CSS.
--oj-palette-neutral-rgb-20245, 244, 242Исходные значения каналов RGB используются внутри rgb() или rgba(). Сами по себе они не являются полными значениями цвета CSS.
--oj-palette-neutral-rgb-19022, 21, 19Исходные значения каналов RGB используются внутри rgb() или rgba(). Сами по себе они не являются полными значениями цвета CSS.
--oj-palette-brand-rgb-1200, 104, 140Исходные значения каналов RGB используются внутри rgb() или rgba(). Сами по себе они не являются полными значениями цвета CSS.
--oj-palette-info-rgb-20237, 246, 249Исходные значения каналов RGB используются внутри rgb() или rgba(). Сами по себе они не являются полными значениями цвета CSS.
--oj-palette-danger-rgb-120179, 49, 31Исходные значения каналов RGB используются внутри rgb() или rgba(). Сами по себе они не являются полными значениями цвета CSS.
--oj-palette-success-rgb-20235, 248, 222Исходные значения каналов RGB используются внутри rgb() или rgba(). Сами по себе они не являются полными значениями цвета CSS.
--oj-palette-success-rgb-14053, 86, 23Исходные значения каналов RGB используются внутри rgb() или rgba(). Сами по себе они не являются полными значениями цвета CSS.

Отступы и форма

Источник
Название / правилоЗначение / конфигурацияПрименение
--oj-core-spacing-1x.25remОпубликованная базовая шкала. Элементы управления JET HTML в рабочем листе используют отдельные значения, но это не означает, что они воспроизводят поведение компонентов JET.
--oj-core-spacing-2x.5remОпубликованная базовая шкала. Элементы управления JET HTML в рабочем листе используют отдельные значения, но это не означает, что они воспроизводят поведение компонентов JET.
--oj-core-spacing-3x.75remОпубликованная базовая шкала. Элементы управления JET HTML в рабочем листе используют отдельные значения, но это не означает, что они воспроизводят поведение компонентов JET.
--oj-core-spacing-4x1remОпубликованная базовая шкала. Элементы управления JET HTML в рабочем листе используют отдельные значения, но это не означает, что они воспроизводят поведение компонентов JET.
--oj-core-spacing-5x1.25remОпубликованная базовая шкала. Элементы управления JET HTML в рабочем листе используют отдельные значения, но это не означает, что они воспроизводят поведение компонентов JET.
--oj-core-spacing-6x1.5remОпубликованная базовая шкала. Элементы управления JET HTML в рабочем листе используют отдельные значения, но это не означает, что они воспроизводят поведение компонентов JET.
--oj-core-spacing-7x1.75remОпубликованная базовая шкала. Элементы управления JET HTML в рабочем листе используют отдельные значения, но это не означает, что они воспроизводят поведение компонентов JET.
--oj-core-spacing-8x2remОпубликованная базовая шкала. Элементы управления JET HTML в рабочем листе используют отдельные значения, но это не означает, что они воспроизводят поведение компонентов JET.
--oj-core-spacing-9x2.25remОпубликованная базовая шкала. Элементы управления JET HTML в рабочем листе используют отдельные значения, но это не означает, что они воспроизводят поведение компонентов JET.
--oj-core-spacing-10x2.5remОпубликованная базовая шкала. Элементы управления JET HTML в рабочем листе используют отдельные значения, но это не означает, что они воспроизводят поведение компонентов JET.
--oj-core-spacing-11x2.75remОпубликованная базовая шкала. Элементы управления JET HTML в рабочем листе используют отдельные значения, но это не означает, что они воспроизводят поведение компонентов JET.
--oj-core-spacing-12x3remОпубликованная базовая шкала. Элементы управления JET HTML в рабочем листе используют отдельные значения, но это не означает, что они воспроизводят поведение компонентов JET.
--oj-core-border-radius-sm2pxОпубликованная базовая шкала. Элементы управления JET HTML в рабочем листе используют отдельные значения, но это не означает, что они воспроизводят поведение компонентов JET.
--oj-core-border-radius-md.25remОпубликованная базовая шкала. Элементы управления JET HTML в рабочем листе используют отдельные значения, но это не означает, что они воспроизводят поведение компонентов JET.
--oj-core-border-radius-lg.375remОпубликованная базовая шкала. Элементы управления JET HTML в рабочем листе используют отдельные значения, но это не означает, что они воспроизводят поведение компонентов JET.
--oj-core-border-radius-xl.5remОпубликованная базовая шкала. Элементы управления JET HTML в рабочем листе используют отдельные значения, но это не означает, что они воспроизводят поведение компонентов JET.

Типографика основного текста и размеры элементов управления

Источник
Название / правилоЗначение / конфигурацияПрименение
--oj-typography-body-xs-font-size0.75remБазовые объявления темы. В исходном примере используется Arial с резервным шрифтом, а компоновка таблицы и содержимого реализована в коде приложения.
--oj-typography-body-sm-font-size0.859remБазовые объявления темы. В исходном примере используется Arial с резервным шрифтом, а компоновка таблицы и содержимого реализована в коде приложения.
--oj-typography-body-md-font-size1remБазовые объявления темы. В исходном примере используется Arial с резервным шрифтом, а компоновка таблицы и содержимого реализована в коде приложения.
--oj-typography-body-lg-font-size1.125remБазовые объявления темы. В исходном примере используется Arial с резервным шрифтом, а компоновка таблицы и содержимого реализована в коде приложения.
--oj-typography-body-xl-font-size1.25remБазовые объявления темы. В исходном примере используется Arial с резервным шрифтом, а компоновка таблицы и содержимого реализована в коде приложения.
--oj-typography-body-md-line-height1.25Базовые объявления темы. В исходном примере используется Arial с резервным шрифтом, а компоновка таблицы и содержимого реализована в коде приложения.
--oj-button-height2.75remБазовые объявления темы. В исходном примере используется Arial с резервным шрифтом, а компоновка таблицы и содержимого реализована в коде приложения.
--oj-button-border-radiusvar(--oj-core-border-radius-md)Базовые объявления темы. В исходном примере используется Arial с резервным шрифтом, а компоновка таблицы и содержимого реализована в коде приложения.

Границы публичной стилизации

Источник
Название / правилоЗначение / конфигурацияПрименение
Global theme overrides:root declarations after JET CSSПереопределение на корневом уровне влияет на всех пользователей этой публичной переменной.
Instance stylingA class scoped to the target componentОграничьте область действия публичной переменной, если изменить нужно только один нативный компонент.
Redwood baseTracks Oracle visual changesВыберите этот вариант, если цель — добиться сходства с оформлением Oracle; при обновлениях унаследованные значения могут измениться.
Stable baseAlternative for a distinct custom themeНе представляйте его как полную копию Redwood и не предполагайте, что поддерживаются все те же возможности инверсии или масштабирования.
Private variables--oj-private-* excludedВ примере публичный справочник не основан на частных внутренних механизмах.
03

Полное руководство по дизайн-системе Oracle Redwood

Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса.

DESIGN-oracle-redwood.md

Подробные рекомендации, отправная точка для реализации и ссылки на источники.

Скачать руководство

Дизайн-система Oracle Redwood и границы версий JET

Точно указывайте уровень реализации

Redwood — это больше, чем одна загружаемая библиотека компонентов. В руководстве используются публичные базовые значения CSS, поставляемые с Oracle JET 19.0.0 и доступные для непосредственного изучения. Предварительный просмотр — это оригинальный HTML/CSS рабочий лист для проверки запасов, использующий эти значения; он не создает экземпляры oj-table, oj-input-number или любых других нативных пользовательских элементов JET. Среда выполнения описана явно, чтобы читатель не путал визуальные основы оформления с полноценным SDK для приложений Oracle.

Из этого руководства OpenDesign
  • Источник справочных данных: Oracle JET 19 Redwood CSS.
  • Среда выполнения предварительного просмотра: оригинальная реализация на нативных средствах браузера HTML/CSS/JavaScript.
  • Данные и правила проверки: оригинальный локальный пример.

Не смешивайте внедрение приложений Oracle с другими задачами

Внедрение Redwood в продукт Oracle SaaS, настройка приложения JET и использование публичной темы в качестве справочного примера — разные задачи. Этот пример не меняет настройки клиента, не подключается к данным об остатках и не выполняет миграцию продукта. Полный локальный документ подходит для изучения визуальных правил и модели состояний, тогда как для настоящего приложения JET следует руководствоваться версионной инструкцией по настройке платформы и документацией нативных компонентов.

Семантические роли и значения палитры дизайн-системы Oracle Redwood

Правильно определяйте базовые объявления

Для каждой публичной переменной из закрепленной таблицы стилей берется первое, то есть базовое, объявление. В последующих областях действия для инверсии или плотности могут задаваться другие значения той же переменной. При наивном извлечении последнего совпадения цвет текста для инверсного фона может быть ошибочно принят за базовый цвет текста для светлой темы. В руководстве явно указана базовая область действия, а внутренние механизмы --oj-private-* исключены из публичного справочника.

Различайте необработанные каналы RGB и значения цвета

Переменные палитры, например --oj-palette-brand-rgb-120, содержат три канала RGB, тогда как семантические роли оборачивают их в rgb() или rgba(). В исходном действии каналы фирменного цвета используются через rgb(), для текста применяется core-text-color-primary, а для фона карточки — core-bg-color-content. Если напрямую передать строку с каналами в background-color, получится недопустимое значение CSS, хотя числа могут выглядеть правдоподобно.

Интервалы, типографика и плотность в дизайн-системе Oracle Redwood

Используйте конкретную шкалу базовых значений

Публичная последовательность core-spacing увеличивается шагами по 4px от 1x до 12x. Для ролей границ заданы отдельные значения: малое, среднее, большое и очень большое; высота кнопки определяется отдельной переменной компонента. В рабочем листе используются соответствующие фактические значения, а заголовок размером 32px, преобразование таблицы для адаптивного отображения и внешняя ширина 1120px обозначены как оригинальные решения компоновки.

Не смешивайте значения для разной плотности

В этой закрепленной таблице стилей базовый размер body-md равен 1rem, а высота строки — 1.25; в последующих селекторах могут задаваться масштабированные значения в пикселях. В руководстве приведено базовое значение, но не утверждается, что во всех контекстах Redwood должен применяться один и тот же вычисленный размер. В примере для браузера используется резервный шрифт Arial, а не заявляется, что загружен Oracle Sans. В нативном приложении JET необходимо совместно проверять выбранную плотность, тему и платформу.

Структура рабочего листа в стиле дизайн-системы Oracle Redwood

Сделайте данные и действия понятными

В каждой исходной строке указаны принадлежности для мастерской, описана единица измерения, сопоставлены текущий запас и минимальный уровень, а также предусмотрено поле ввода количества. Метка состояния проверки повторяет, учитывается ли эта позиция в локальном черновике. В сводке подсчитываются единицы во всем черновике, включая строки, скрытые фильтром. Это вымышленные примеры, а не данные о запасах и не рекомендации по закупкам.

Сохраняйте идентификаторы строк при сортировке

Проверка количества в стиле дизайн-системы Oracle Redwood

Отклоняйте значения, не соответствующие заданному правилу

В исходном примере поле количества принимает целые числа от нуля до 99. При пустом, отрицательном, дробном или выходящем за допустимый диапазон значении появляется встроенное сообщение об ошибке, а действие проверки отключается. В модели черновика сохраняется последнее допустимое количество, пока его не заменит корректное значение. Видимое сообщение об ошибке ясно показывает эту разницу, и недопустимое значение не учитывается в проверяемой сумме.

Поясните, когда некорректное изменение будет отброшено

При смене фильтра или сортировки видимые строки формируются заново на основе последних допустимых значений черновика, поэтому незавершенное некорректное изменение отбрасывается. Это намеренное ограничение локального примера, а не гарантия проверки данных в нативном JET. В рабочей производственной таблице с редактированием можно сохранить некорректные черновые значения при любых изменениях представления или запретить переход; такое поведение нужно проектировать и проверять в рамках собственной модели состояний.

Проверка и сброс в стиле дизайн-системы Oracle Redwood

Опишите локальную проверку, не создавая впечатления, что данные отправляются

При проверке черновика отображается понятное количество единиц и учитываемых позиций. Также явно сообщается, что заказ не отправлялся. Допустимый черновик с нулевым количеством принимается, поскольку в примере не вводится несуществующее правило об обязательной закупке. Изменение количества удаляет предыдущее сообщение о проверке, чтобы для обновленного черновика не осталось устаревшего подтверждения.

Обеспечьте предсказуемое восстановление

Сброс количества восстанавливает исходные рекомендуемые значения и удаляет сообщение о проверке. Текущие фильтр и сортировка сохраняются, после чего строки отображаются заново на основе сброшенной модели. Так результат восстановления виден без перезагрузки страницы. В примере нет хранилища или серверной части, поэтому при перезагрузке также восстанавливаются исходные локальные данные.

Адаптивная таблица в стиле дизайн-системы Oracle Redwood

Сохраняйте иерархию информации на узких экранах

В широком представлении используется таблица с заголовками столбцов и названиями товаров в заголовках строк. При ширине менее 650px строки преобразуются в удобные для чтения блоки, а перед значением в каждой ячейке отображается ее метка. Поля ввода остаются в пределах доступной ширины, а описание товара располагается рядом с его названием. Это оригинальное преобразование в коде приложения CSS, а не утверждение об адаптивном поведении oj-table.

Проверяйте отредактированные данные и состояния с фильтром

При проверке в браузере вводится некорректное количество, затем оно исправляется; далее товары сортируются, применяется фильтр позиций ниже минимального уровня, проверяется итоговая сумма и только после этого измеряется компоновка. Были проверены четыре ширины — от 1440px до 280px. Так проверяются реальные данные и изменения состояния, а не просто наличие пустого контейнера таблицы.

Полная справочная реализация дизайн-системы Oracle Redwood

Запустите предоставленный документ целиком

Пример HTML содержит необходимые объявления публичных токенов, оригинальные стили, примеры данных и все обработчики событий. Сохраните его как index.html и запустите сервер для этой папки; отсутствующих импортов и внешних вызовов во время выполнения нет. Справочные значения закреплены за JET 19.0.0, хотя для запуска локальной реализации пакет JET JavaScript не требуется.

  1. Сохраните предоставленный документ целиком как index.html.
  2. Запустите HTTP-сервер для этой папки.
  3. Проверьте некорректные значения и их исправление.
  4. Отсортируйте и отфильтруйте данные, затем проверьте и сбросьте тот же черновик.

Используйте нативные компоненты JET согласно их инструкции по настройке

Примеры компонентов дизайн-системы Oracle Redwood

index.html — полный оригинальный рабочий лист

Подмножество публичных токенов целиком, адаптивный HTML, проверка данных, стабильное состояние строк, локальная проверка и сброс.

html
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Studio supplies worksheet</title><style>:root{--oj-palette-danger-rgb-10:255, 248, 247;--oj-palette-danger-rgb-20:255, 241, 239;--oj-palette-danger-rgb-30:255, 235, 232;--oj-palette-danger-rgb-40:255, 217, 211;--oj-palette-danger-rgb-50:255, 193, 184;--oj-palette-danger-rgb-60:255, 157, 144;--oj-palette-danger-rgb-70:255, 134, 117;--oj-palette-danger-rgb-80:254, 104, 84;--oj-palette-danger-rgb-90:236, 79, 58;--oj-palette-danger-rgb-100:214, 59, 37;--oj-palette-danger-rgb-110:195, 53, 34;--oj-palette-danger-rgb-120:179, 49, 31;--oj-palette-danger-rgb-130:170, 34, 34;--oj-palette-danger-rgb-140:143, 39, 25;--oj-palette-danger-rgb-150:124, 34, 22;--oj-palette-danger-rgb-160:102, 28, 18;--oj-palette-danger-rgb-170:86, 24, 15;--oj-palette-warning-rgb-10:254, 249, 242;--oj-palette-warning-rgb-20:253, 242, 229;--oj-palette-warning-rgb-30:252, 237, 220;--oj-palette-warning-rgb-40:249, 221, 188;--oj-palette-warning-rgb-50:246, 199, 146;--oj-palette-warning-rgb-60:240, 169, 87;--oj-palette-warning-rgb-70:235, 150, 50;--oj-palette-warning-rgb-80:225, 128, 18;--oj-palette-warning-rgb-90:198, 113, 14;--oj-palette-warning-rgb-100:172, 99, 12;--oj-palette-warning-rgb-110:156, 89, 11;--oj-palette-warning-rgb-120:143, 82, 10;--oj-palette-warning-rgb-130:129, 73, 9;--oj-palette-warning-rgb-140:114, 65, 8;--oj-palette-warning-rgb-150:99, 56, 7;--oj-palette-warning-rgb-160:81, 47, 6;--oj-palette-warning-rgb-170:69, 39, 5;--oj-palette-success-rgb-10:244, 252, 235;--oj-palette-success-rgb-20:235, 248, 222;--oj-palette-success-rgb-30:228, 245, 211;--oj-palette-success-rgb-40:207, 235, 179;--oj-palette-success-rgb-50:177, 221, 136;--oj-palette-success-rgb-60:138, 201, 79;--oj-palette-success-rgb-70:125, 186, 69;--oj-palette-success-rgb-80:111, 169, 57;--oj-palette-success-rgb-90:94, 148, 43;--oj-palette-success-rgb-100:80, 130, 35;--oj-palette-success-rgb-110:73, 118, 32;--oj-palette-success-rgb-120:67, 107, 29;--oj-palette-success-rgb-130:60, 96, 26;--oj-palette-success-rgb-140:53, 86, 23;--oj-palette-success-rgb-150:46, 73, 20;--oj-palette-success-rgb-160:38, 61, 16;--oj-palette-success-rgb-170:31, 51, 14;--oj-palette-info-rgb-10:246, 250, 252;--oj-palette-info-rgb-20:237, 246, 249;--oj-palette-info-rgb-30:228, 241, 247;--oj-palette-info-rgb-40:208, 229, 238;--oj-palette-info-rgb-50:180, 213, 225;--oj-palette-info-rgb-60:143, 191, 208;--oj-palette-info-rgb-70:121, 177, 198;--oj-palette-info-rgb-80:95, 162, 186;--oj-palette-info-rgb-90:65, 144, 172;--oj-palette-info-rgb-100:34, 126, 158;--oj-palette-info-rgb-110:14, 114, 151;--oj-palette-info-rgb-120:0, 104, 140;--oj-palette-info-rgb-130:2, 94, 126;--oj-palette-info-rgb-140:4, 83, 111;--oj-palette-info-rgb-150:6, 72, 95;--oj-palette-info-rgb-160:6, 60, 78;--oj-palette-info-rgb-170:5, 50, 66;--oj-palette-brand-rgb-10:246, 250, 252;--oj-palette-brand-rgb-20:237, 246, 249;--oj-palette-brand-rgb-30:228, 241, 247;--oj-palette-brand-rgb-40:208, 229, 238;--oj-palette-brand-rgb-50:180, 213, 225;--oj-palette-brand-rgb-60:143, 191, 208;--oj-palette-brand-rgb-70:121, 177, 198;--oj-palette-brand-rgb-80:95, 162, 186;--oj-palette-brand-rgb-90:65, 144, 172;--oj-palette-brand-rgb-100:34, 126, 158;--oj-palette-brand-rgb-110:14, 114, 151;--oj-palette-brand-rgb-120:0, 104, 140;--oj-palette-brand-rgb-130:2, 94, 126;--oj-palette-brand-rgb-140:4, 83, 111;--oj-palette-brand-rgb-150:6, 72, 95;--oj-palette-brand-rgb-160:6, 60, 78;--oj-palette-brand-rgb-170:5, 50, 66;--oj-palette-neutral-rgb-0:255, 255, 255;--oj-palette-neutral-rgb-10:251, 249, 248;--oj-palette-neutral-rgb-20:245, 244, 242;--oj-palette-neutral-rgb-30:241, 239, 237;--oj-palette-neutral-rgb-40:228, 225, 221;--oj-palette-neutral-rgb-50:212, 207, 202;--oj-palette-neutral-rgb-60:188, 182, 177;--oj-palette-neutral-rgb-70:174, 168, 162;--oj-palette-neutral-rgb-80:158, 152, 146;--oj-palette-neutral-rgb-90:139, 133, 128;--oj-palette-neutral-rgb-100:123, 117, 112;--oj-palette-neutral-rgb-110:111, 105, 100;--oj-palette-neutral-rgb-120:101, 95, 91;--oj-palette-neutral-rgb-130:92, 86, 81;--oj-palette-neutral-rgb-140:81, 76, 71;--oj-palette-neutral-rgb-150:71, 66, 62;--oj-palette-neutral-rgb-160:58, 54, 50;--oj-palette-neutral-rgb-170:49, 45, 42;--oj-palette-neutral-rgb-180:32, 30, 28;--oj-palette-neutral-rgb-190:22, 21, 19;--oj-palette-neutral-rgb-200:00, 00, 00;--oj-palette-dvt-rgb-1:36, 93, 99;--oj-palette-dvt-rgb-2:215, 121, 15;--oj-palette-dvt-rgb-3:49, 160, 156;--oj-palette-dvt-rgb-4:78, 65, 55;--oj-palette-dvt-rgb-5:105, 158, 97;--oj-palette-dvt-rgb-6:180, 114, 130;--oj-palette-dvt-rgb-7:131, 64, 30;--oj-palette-dvt-rgb-8:158, 127, 204;--oj-palette-dvt-rgb-9:168, 142, 0;--oj-palette-dvt-rgb-10:88, 49, 110;--oj-palette-dvt-rgb-11:89, 153, 181;--oj-palette-dvt-rgb-12:49, 122, 69;--oj-core-text-color-primary:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-text-color-secondary:rgba(var(--oj-palette-neutral-rgb-190), .70);--oj-core-text-color-disabled:rgba(var(--oj-palette-neutral-rgb-190), .4);--oj-core-text-color-brand:rgb(var(--oj-palette-brand-rgb-110));--oj-core-text-color-danger:rgb(var(--oj-palette-danger-rgb-120));--oj-core-text-color-warning:rgb(var(--oj-palette-warning-rgb-120));--oj-core-text-color-success:rgb(var(--oj-palette-success-rgb-120));--oj-core-bg-color-content:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-bg-color-hover:rgba(var(--oj-palette-neutral-rgb-190), .08);--oj-core-bg-color-active:rgba(var(--oj-palette-neutral-rgb-190), .16);--oj-core-bg-color-selected:rgb(var(--oj-palette-brand-rgb-30));--oj-core-border-color-selected:rgb(var(--oj-palette-brand-rgb-100));--oj-core-border-color-enabled:rgba(var(--oj-palette-neutral-rgb-190), 0.5);--oj-core-color-disabled-1:rgba(var(--oj-palette-neutral-rgb-190), 0.04);--oj-core-color-disabled-2:rgba(var(--oj-palette-neutral-rgb-190),.20);--oj-core-icon-size-lg:1.5rem;--oj-core-icon-size-sm:1rem;--oj-core-divider-color:rgba(var(--oj-palette-neutral-rgb-190),.12);--oj-core-divider-margin:0.5rem;--oj-core-neutral-1:rgb(var(--oj-palette-neutral-rgb-100));--oj-core-neutral-2:rgb(var(--oj-palette-neutral-rgb-110));--oj-core-neutral-3:rgb(var(--oj-palette-neutral-rgb-120));--oj-core-neutral-contrast:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-neutral-secondary-1:rgba(var(--oj-palette-neutral-rgb-190), 0.08);--oj-core-neutral-secondary-2:rgb(var(--oj-palette-neutral-rgb-20));--oj-core-neutral-secondary-3:rgb(var(--oj-palette-neutral-rgb-10));--oj-core-neutral-secondary-contrast:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-brand-1:rgb(var(--oj-palette-brand-rgb-100));--oj-core-brand-2:rgb(var(--oj-palette-brand-rgb-110));--oj-core-brand-3:rgb(var(--oj-palette-brand-rgb-120));--oj-core-brand-contrast:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-danger-1:rgb(var(--oj-palette-danger-rgb-120));--oj-core-danger-2:rgb(var(--oj-palette-danger-rgb-110));--oj-core-danger-3:rgb(var(--oj-palette-danger-rgb-120));--oj-core-danger-contrast:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-danger-secondary-1:rgba(var(--oj-palette-danger-rgb-60), 0.4);--oj-core-danger-secondary-2:rgb(var(--oj-palette-danger-rgb-20));--oj-core-danger-secondary-3:rgb(var(--oj-palette-danger-rgb-10));--oj-core-danger-secondary-contrast:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-warning-1:rgb(var(--oj-palette-warning-rgb-120));--oj-core-warning-2:rgb(var(--oj-palette-warning-rgb-110));--oj-core-warning-3:rgb(var(--oj-palette-warning-rgb-120));--oj-core-warning-contrast:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-warning-secondary-1:rgba(var(--oj-palette-warning-rgb-60), 0.4);--oj-core-warning-secondary-2:rgb(var(--oj-palette-warning-rgb-20));--oj-core-warning-secondary-3:rgb(var(--oj-palette-warning-rgb-10));--oj-core-warning-secondary-contrast:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-success-1:rgb(var(--oj-palette-success-rgb-120));--oj-core-success-2:rgb(var(--oj-palette-success-rgb-110));--oj-core-success-3:rgb(var(--oj-palette-success-rgb-120));--oj-core-success-contrast:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-success-secondary-1:rgba(var(--oj-palette-success-rgb-60), 0.4);--oj-core-success-secondary-2:rgb(var(--oj-palette-success-rgb-20));--oj-core-success-secondary-3:rgb(var(--oj-palette-success-rgb-10));--oj-core-success-secondary-contrast:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-info-1:rgb(var(--oj-palette-info-rgb-120));--oj-core-info-2:rgb(var(--oj-palette-info-rgb-110));--oj-core-info-3:rgb(var(--oj-palette-info-rgb-120));--oj-core-info-contrast:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-info-secondary-1:rgba(var(--oj-palette-info-rgb-60), 0.4);--oj-core-info-secondary-2:rgb(var(--oj-palette-info-rgb-20));--oj-core-info-secondary-3:rgb(var(--oj-palette-info-rgb-10));--oj-core-info-secondary-contrast:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-focus-border-color:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-cursor-clickable:pointer;--oj-core-drag-drop-color-1:rgb(var(--oj-palette-brand-rgb-40));--oj-core-drag-drop-color-2:rgb(var(--oj-palette-brand-rgb-100));--oj-core-drag-drop-line-color:rgb(var(--oj-palette-brand-rgb-100));--oj-core-touch-target-min-size:2.25rem;--oj-core-box-shadow-rgb:var(--oj-palette-neutral-rgb-200);--oj-core-box-shadow-xs:0px 1px 4px 0px rgba(var(--oj-core-box-shadow-rgb),.12);--oj-core-box-shadow-sm:0px 4px 8px 0px rgba(var(--oj-core-box-shadow-rgb),.16);--oj-core-box-shadow-md:0px 6px 12px 0px rgba(var(--oj-core-box-shadow-rgb),.2);--oj-core-box-shadow-lg:0px 8px 16px 0px rgba(var(--oj-core-box-shadow-rgb),0.24);--oj-core-box-shadow-xl:0px 12px 20px 0px rgba(var(--oj-core-box-shadow-rgb),0.28);--oj-core-dropdown-box-shadow:var(--oj-core-box-shadow-sm);--oj-core-scrim-color:rgba(var(--oj-palette-neutral-rgb-190), .4);--oj-core-spacing-1x:.25rem;--oj-core-spacing-2x:.5rem;--oj-core-spacing-3x:.75rem;--oj-core-spacing-4x:1rem;--oj-core-spacing-5x:1.25rem;--oj-core-spacing-6x:1.5rem;--oj-core-spacing-7x:1.75rem;--oj-core-spacing-8x:2rem;--oj-core-spacing-9x:2.25rem;--oj-core-spacing-10x:2.5rem;--oj-core-spacing-11x:2.75rem;--oj-core-spacing-12x:3rem;--oj-core-border-radius-sm:2px;--oj-core-border-radius-md:.25rem;--oj-core-border-radius-lg:.375rem;--oj-core-border-radius-xl:.5rem;--oj-core-z-index-popup:1000;--oj-core-z-index-dialog:1050;--oj-core-z-index-messages:2000;--oj-typography-heading-2xl-font-size:2.5rem;--oj-typography-heading-2xl-font-weight:800;--oj-typography-heading-2xl-line-height:1.3;--oj-typography-heading-xl-font-size:2.25rem;--oj-typography-heading-xl-font-weight:800;--oj-typography-heading-xl-line-height:1.222;--oj-typography-heading-lg-font-size:2rem;--oj-typography-heading-lg-font-weight:800;--oj-typography-heading-lg-line-height:1.25;--oj-typography-heading-md-font-size:1.75rem;--oj-typography-heading-md-font-weight:800;--oj-typography-heading-md-line-height:1.2857;--oj-typography-heading-sm-font-size:1.5rem;--oj-typography-heading-sm-font-weight:800;--oj-typography-heading-sm-line-height:1.3333;--oj-typography-heading-xs-font-size:1.25rem;--oj-typography-heading-xs-font-weight:800;--oj-typography-heading-xs-line-height:1.4;--oj-typography-subheading-2xl-font-size:2.25rem;--oj-typography-subheading-2xl-font-weight:bold;--oj-typography-subheading-2xl-line-height:1.2222;--oj-typography-subheading-xl-font-size:2rem;--oj-typography-subheading-xl-font-weight:bold;--oj-typography-subheading-xl-line-height:1.25;--oj-typography-subheading-lg-font-size:1.75rem;--oj-typography-subheading-lg-font-weight:bold;--oj-typography-subheading-lg-line-height:1.2857;--oj-typography-subheading-md-font-size:1.5rem;--oj-typography-subheading-md-font-weight:bold;--oj-typography-subheading-md-line-height:1.3333;--oj-typography-subheading-sm-font-size:1.25rem;--oj-typography-subheading-sm-font-weight:bold;--oj-typography-subheading-sm-line-height:1.4;--oj-typography-subheading-xs-font-size:1rem;--oj-typography-subheading-xs-font-weight:bold;--oj-typography-subheading-xs-line-height:1.5;--oj-typography-body-xl-font-size:1.25rem;--oj-typography-body-xl-line-height:1.4;--oj-typography-body-lg-font-size:1.125rem;--oj-typography-body-lg-line-height:1.3333;--oj-typography-body-md-font-size:1rem;--oj-typography-body-md-line-height:1.25;--oj-typography-body-sm-font-size:0.859rem;--oj-typography-body-sm-line-height:1.2;--oj-typography-body-xs-font-size:0.75rem;--oj-typography-body-xs-line-height:1.3333;--oj-typography-body-2xs-font-size:0.625rem;--oj-typography-body-2xs-line-height:1.2;--oj-body-bg-color:rgb(var(--oj-palette-neutral-rgb-10));--oj-button-height:2.75rem;--oj-button-border-radius:var(--oj-core-border-radius-md);}*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;font-size:16px;color:var(--oj-core-text-color-primary);background:var(--oj-body-bg-color)}main{max-width:1120px;padding:32px;margin:auto}header{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;flex-wrap:wrap}h1{font-size:32px;line-height:1.2;margin:12px 0 24px}.eyebrow{font-size:12px;letter-spacing:.08em;font-weight:700}.scope{font-size:14px;line-height:1.6;max-width:78ch;color:var(--oj-core-text-color-secondary)}.count{padding:16px 24px;border:1px solid var(--oj-core-divider-color);border-radius:var(--oj-core-border-radius-lg);background:var(--oj-core-bg-color-content);min-width:140px}.count strong{display:block;font-size:32px}.toolbar{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:24px 0}button,select,input{font:inherit}button{min-height:var(--oj-button-height);padding:8px 16px;border:1px solid var(--oj-core-divider-color);border-radius:var(--oj-button-border-radius);background:var(--oj-core-bg-color-content);color:var(--oj-core-text-color-primary);cursor:pointer}button.primary{background:rgb(var(--oj-palette-brand-rgb-120));color:white;border-color:transparent}button:disabled{opacity:.5;cursor:default}select{min-height:44px;border:1px solid var(--oj-core-divider-color);border-radius:4px;padding:8px;background:white;max-width:100%}.table-wrap{overflow:auto;background:var(--oj-core-bg-color-content);border:1px solid var(--oj-core-divider-color);border-radius:var(--oj-core-border-radius-lg)}table{width:100%;border-collapse:collapse;table-layout:fixed}th,td{text-align:left;padding:20px 24px;vertical-align:top;border-bottom:1px solid var(--oj-core-divider-color)}thead th{font-size:13px;background:rgb(var(--oj-palette-neutral-rgb-20))}th:first-child{width:36%}tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}td p,th p{font-size:13px;color:var(--oj-core-text-color-secondary);font-weight:400;margin:8px 0;line-height:1.5}input{width:88px;max-width:100%;padding:8px;border:1px solid var(--oj-core-divider-color);border-radius:4px;background:white;min-height:44px}.note{margin:24px 0;padding:24px;background:rgb(var(--oj-palette-info-rgb-20));border-left:4px solid rgb(var(--oj-palette-brand-rgb-120));line-height:1.6}.actions{display:flex;gap:16px;flex-wrap:wrap}.error{color:rgb(var(--oj-palette-danger-rgb-120));font-size:13px;line-height:1.5}.status{font-size:13px;padding:4px 8px;border-radius:4px;background:rgb(var(--oj-palette-neutral-rgb-20));display:inline-block}.status.ready{background:rgb(var(--oj-palette-success-rgb-20));color:rgb(var(--oj-palette-success-rgb-140))}:focus-visible{outline:2px solid var(--oj-core-focus-border-color);outline-offset:3px}[hidden]{display:none!important}@media(max-width:650px){main{padding:16px}table,tbody,tr,td,th{display:block}table{table-layout:auto}thead{display:none}th:first-child{width:auto}tbody tr{padding:16px;border-bottom:1px solid var(--oj-core-divider-color)}tbody tr:last-child{border-bottom:0}td,th{padding:8px;border:0!important}td:before{content:attr(data-label);display:block;font-size:12px;font-weight:700;margin-bottom:8px}.toolbar label{display:flex;flex-wrap:wrap;gap:8px}}
</style></head><body><main><header><div><p class="eyebrow">REDWOOD FOUNDATIONS / ORIGINAL WORKSHEET</p><h1>Prepare the studio supplies</h1><p class="scope">An original stock-review worksheet using public Oracle JET 19 Redwood variables. This is plain HTML/CSS and JavaScript, not a native JET component runtime or an Oracle inventory service. Arial is an explicit font fallback.</p></div><div class="count"><strong id="total">0</strong>units in the local draft</div></header><div class="toolbar"><label for="filter">Show <select id="filter"><option value="all">All sample items</option><option value="low">Below minimum stock</option></select></label><button id="sort">Sort by item name</button></div><div class="table-wrap"><table><thead><tr><th scope="col">Item</th><th scope="col">On hand / minimum</th><th scope="col">Add to draft</th><th scope="col">Review state</th></tr></thead><tbody id="rows"></tbody></table></div><p id="empty" hidden>No items match this view. <button id="show-all">Show all items</button></p><p class="note">Change a quantity to build a local replenishment draft. A draft may contain zero units. Nothing is ordered, approved or sent from this example.</p><div class="actions"><button class="primary" id="keep">Review this draft</button><button id="reset">Reset quantities</button></div><p id="message" role="status"></p></main><script>const initial=[{id:'paper',name:'Sketch paper',detail:'A4 recycled sheets',stock:18,min:30},{id:'markers',name:'Fine-tip markers',detail:'Black ink / single pens',stock:12,min:10},{id:'clips',name:'Binder clips',detail:'Medium / single clips',stock:6,min:20}];let amounts={paper:12,markers:0,clips:14},ascending=false;const tbody=document.querySelector('#rows');function visible(){let a=initial.filter(x=>document.querySelector('#filter').value!=='low'||x.stock<x.min);return ascending?[...a].sort((a,b)=>a.name.localeCompare(b.name)):a;}function count(){let inputs=[...document.querySelectorAll('input')];let bad=inputs.some(x=>!x.checkValidity()||x.value==='');document.querySelector('#keep').disabled=bad;document.querySelector('#total').textContent=Object.values(amounts).reduce((a,b)=>a+b,0);return bad;}function render(){tbody.innerHTML=visible().map(x=>`<tr><th scope="row">${x.name}<p>${x.detail}</p></th><td data-label="On hand / minimum">${x.stock} / ${x.min}<p>${x.stock<x.min?'Below minimum':'Above minimum'}</p></td><td data-label="Add to draft"><input id="qty-${x.id}" aria-label="Quantity for ${x.name}" type="number" min="0" max="99" step="1" value="${amounts[x.id]}" data-id="${x.id}"><p class="error" hidden>Use a whole number from 0 to 99.</p></td><td data-label="Review state"><span class="status ${amounts[x.id]?'ready':''}">${amounts[x.id]?'In draft':'No addition'}</span></td></tr>`).join('');tbody.querySelectorAll('input').forEach(input=>input.addEventListener('input',()=>{let valid=input.checkValidity()&&input.value!=='';input.setAttribute('aria-invalid',String(!valid));input.nextElementSibling.hidden=valid;document.querySelector('#message').textContent='';if(valid){amounts[input.dataset.id]=Number(input.value);const status=input.closest('tr').querySelector('.status');status.textContent=Number(input.value)?'In draft':'No addition';status.classList.toggle('ready',Number(input.value)>0)}count()}));document.querySelector('#empty').hidden=visible().length>0;count()}document.querySelector('#filter').addEventListener('change',render);document.querySelector('#sort').addEventListener('click',e=>{ascending=!ascending;e.currentTarget.textContent=ascending?'Use original order':'Sort by item name';render()});document.querySelector('#show-all').addEventListener('click',()=>{document.querySelector('#filter').value='all';render()});document.querySelector('#keep').addEventListener('click',()=>{if(!count())document.querySelector('#message').textContent='Reviewed '+Object.values(amounts).reduce((a,b)=>a+b,0)+' units across '+Object.values(amounts).filter(x=>x>0).length+' items in this local draft. No order was sent.'});document.querySelector('#reset').addEventListener('click',()=>{amounts={paper:12,markers:0,clips:14};document.querySelector('#message').textContent='';render()});render();</script></body></html>

Справочник по коду

  • Это намеренно не oj-table и не oj-input-number.
  • Нет подключения к приложению Oracle, службе учета запасов или конечной точке заказов.
04

Настройка агента дизайн-системы Oracle Redwood

Отправная точка для реализации

Запускает оригинальную автономную интерпретацию. Внедрение нативного JET настраивается отдельно согласно связанной официальной документации.

sh
# Save the complete supplied document as index.html.
python3 -m http.server 8000
# Open http://localhost:8000/

Запрос для вашего проекта

Промпт для AI-агента
Реализуйте предоставленный оригинальный рабочий лист проверки запасов в стиле Redwood, используя проверенные базовые публичные переменные JET 19. Сохраните синтаксис каналов RGB, состояние допустимого количества с привязкой к идентификатору товара, границы проверки данных, сохранение состояния при сортировке и фильтрации, локальную проверку без отправки и сброс. Не описывайте эту браузерную реализацию как нативный JET или службу Oracle.
05

Источники и область применения дизайн-системы Oracle Redwood

Интерпретация OpenDesign на основе общедоступных переменных Oracle JET 19 Redwood. Предварительный просмотр создан на обычных HTML/CSS/JavaScript, а не на нативных компонентах JET или сервисе учета запасов Oracle. В качестве явного запасного шрифта используется Arial.