83.3K+ダウンロード
企業ソフトウェア · 新しいリソース

Oracle Redwoodデザインシステム.

Oracle JET 19 Redwoodの実際の配色、セマンティックな役割、スペーシング、密度の境界を、編集可能な独自の株式レビューシートを通して詳しく確認できます。

OpenDesign をダウンロード DESIGN.md をダウンロード
OpenDesign ガイド8章45件の参考項目オリジナルアプリケーションガイド
01

Oracle Redwoodデザインシステムのインターフェースプレビュー

有効な下書きを維持したまま、数量を編集し、入力検証を確認し、並べ替えや絞り込みを行えます。

備品の下書きをローカルで確認する完全な例を開く
JET 19 Redwoodの実際の公開テーマ変数を使ったオリジナルのブラウザー実装です。ネイティブのJET JavaScriptランタイムは使用していません。 · 実装リファレンス
02

Oracle Redwoodデザインシステムのデザインリファレンス

バージョンを固定したJET 19.0.0 Redwoodスタイルシートの公開宣言をベースにしています。オリジナルのワークシートの動作とレイアウトは別途明記しています。ベースのリファレンスには、非公開の変数と後から追加された反転表示のオーバーライドは含まれません。

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, 255RGBの各チャンネル値はrgb()またはrgba()の中で使われます。これらの値だけでは、CSSのカラー値として完結しません。
--oj-palette-neutral-rgb-10251, 249, 248RGBの各チャンネル値はrgb()またはrgba()の中で使われます。これらの値だけでは、CSSのカラー値として完結しません。
--oj-palette-neutral-rgb-20245, 244, 242RGBの各チャンネル値はrgb()またはrgba()の中で使われます。これらの値だけでは、CSSのカラー値として完結しません。
--oj-palette-neutral-rgb-19022, 21, 19RGBの各チャンネル値はrgb()またはrgba()の中で使われます。これらの値だけでは、CSSのカラー値として完結しません。
--oj-palette-brand-rgb-1200, 104, 140RGBの各チャンネル値はrgb()またはrgba()の中で使われます。これらの値だけでは、CSSのカラー値として完結しません。
--oj-palette-info-rgb-20237, 246, 249RGBの各チャンネル値はrgb()またはrgba()の中で使われます。これらの値だけでは、CSSのカラー値として完結しません。
--oj-palette-danger-rgb-120179, 49, 31RGBの各チャンネル値はrgb()またはrgba()の中で使われます。これらの値だけでは、CSSのカラー値として完結しません。
--oj-palette-success-rgb-20235, 248, 222RGBの各チャンネル値はrgb()またはrgba()の中で使われます。これらの値だけでは、CSSのカラー値として完結しません。
--oj-palette-success-rgb-14053, 86, 23RGBの各チャンネル値はrgb()またはrgba()の中で使われます。これらの値だけでは、CSSのカラー値として完結しません。

スペーシングと形状

ソース
名前 / ルール値 / 設定用途
--oj-core-spacing-1x.25rem公開されている基礎スケールです。ワークシートのネイティブなHTMLコントロールは、その一部の値を使用しますが、JETのコンポーネント動作を再現するものではありません。
--oj-core-spacing-2x.5rem公開されている基礎スケールです。ワークシートのネイティブなHTMLコントロールは、その一部の値を使用しますが、JETのコンポーネント動作を再現するものではありません。
--oj-core-spacing-3x.75rem公開されている基礎スケールです。ワークシートのネイティブなHTMLコントロールは、その一部の値を使用しますが、JETのコンポーネント動作を再現するものではありません。
--oj-core-spacing-4x1rem公開されている基礎スケールです。ワークシートのネイティブなHTMLコントロールは、その一部の値を使用しますが、JETのコンポーネント動作を再現するものではありません。
--oj-core-spacing-5x1.25rem公開されている基礎スケールです。ワークシートのネイティブなHTMLコントロールは、その一部の値を使用しますが、JETのコンポーネント動作を再現するものではありません。
--oj-core-spacing-6x1.5rem公開されている基礎スケールです。ワークシートのネイティブなHTMLコントロールは、その一部の値を使用しますが、JETのコンポーネント動作を再現するものではありません。
--oj-core-spacing-7x1.75rem公開されている基礎スケールです。ワークシートのネイティブなHTMLコントロールは、その一部の値を使用しますが、JETのコンポーネント動作を再現するものではありません。
--oj-core-spacing-8x2rem公開されている基礎スケールです。ワークシートのネイティブなHTMLコントロールは、その一部の値を使用しますが、JETのコンポーネント動作を再現するものではありません。
--oj-core-spacing-9x2.25rem公開されている基礎スケールです。ワークシートのネイティブなHTMLコントロールは、その一部の値を使用しますが、JETのコンポーネント動作を再現するものではありません。
--oj-core-spacing-10x2.5rem公開されている基礎スケールです。ワークシートのネイティブなHTMLコントロールは、その一部の値を使用しますが、JETのコンポーネント動作を再現するものではありません。
--oj-core-spacing-11x2.75rem公開されている基礎スケールです。ワークシートのネイティブなHTMLコントロールは、その一部の値を使用しますが、JETのコンポーネント動作を再現するものではありません。
--oj-core-spacing-12x3rem公開されている基礎スケールです。ワークシートのネイティブなHTMLコントロールは、その一部の値を使用しますが、JETのコンポーネント動作を再現するものではありません。
--oj-core-border-radius-sm2px公開されている基礎スケールです。ワークシートのネイティブなHTMLコントロールは、その一部の値を使用しますが、JETのコンポーネント動作を再現するものではありません。
--oj-core-border-radius-md.25rem公開されている基礎スケールです。ワークシートのネイティブなHTMLコントロールは、その一部の値を使用しますが、JETのコンポーネント動作を再現するものではありません。
--oj-core-border-radius-lg.375rem公開されている基礎スケールです。ワークシートのネイティブなHTMLコントロールは、その一部の値を使用しますが、JETのコンポーネント動作を再現するものではありません。
--oj-core-border-radius-xl.5rem公開されている基礎スケールです。ワークシートのネイティブな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変更が必要なのがネイティブコンポーネント1つだけの場合は、公開変数の適用範囲を限定してください。
Redwood baseTracks Oracle visual changesOracleの外観に合わせることが目的の場合に選択してください。継承される値はアップグレードによって変わる可能性があります。
Stable baseAlternative for a distinct custom themeRedwoodと同一だと示したり、反転や拡大縮小に関するすべての機能が一致すると想定したりしないでください。
Private variables--oj-private-* excludedこのサンプルでは、公開リファレンスの基盤として非公開の実装フックを使用していません。
03

Oracle Redwoodデザインシステム完全ガイド

実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。

DESIGN-oracle-redwood.md

詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。

ガイドをダウンロード

Oracle RedwoodデザインシステムとJETのバージョン境界

実装レイヤーを正確に示す

Redwoodは、ダウンロード可能な単一のコンポーネントライブラリにとどまりません。このガイドでは、Oracle JET 19.0.0に同梱された公開CSS基盤を使用します。具体的に確認できるリファレンスとして利用できるものです。プレビューは、これらの値を使用する独自のHTML/CSS在庫確認ワークシートであり、oj-table、oj-input-numberなどのネイティブJETカスタム要素をインスタンス化していません。視覚的な基盤とOracleアプリケーション向けの完全なSDKを混同しないよう、実行環境を明記しています。

この OpenDesign ガイドから
  • リファレンスソース：Oracle JET 19 Redwood CSS。
  • プレビューの実行環境：独自のネイティブブラウザーHTML/CSS/JavaScript。
  • データと検証ルール：独自のローカルサンプル。

Oracleアプリケーションへの導入と切り分ける

Oracle SaaS製品へのRedwoodの導入、JETアプリケーションの設定、公開テーマリファレンスの利用は、それぞれ異なる作業です。この例では、テナントの変更、在庫レコードへの接続、製品の移行は行いません。ローカルで完結するドキュメントは、視覚的なルールや状態モデルの学習に役立ちます。一方、実際のJETアプリケーションでは、バージョンに応じたフレームワークのセットアップ手順とネイティブコンポーネントのドキュメントに従ってください。

Oracle Redwoodデザインシステムのセマンティックロールとパレット値

基本の宣言を正しく特定する

このリファレンスでは、固定したスタイルシートにある各公開変数の最初の宣言（基本値）を採用しています。後続の反転スコープや密度スコープで、同じ名前が再定義される場合があります。そのため、単純に最後に一致した宣言を抽出すると、反転時の前景色をデフォルトのライトテーマのテキスト色として扱ってしまう可能性があります。このガイドでは基本スコープを明示し、公開リファレンスから --oj-private-* フックを除外しています。

生のチャンネル値と色の値を区別する

--oj-palette-brand-rgb-120などのパレット変数には3つのRGBチャンネルが含まれています。一方、セマンティックロールでは、それらをrgb()またはrgba()でラップします。元のアクションではブランドのチャンネル値をrgb()で使用し、テキストにはcore-text-color-primary、カードの背景にはcore-bg-color-contentを使用しています。数値がもっともらしく見えても、生のチャンネル文字列をそのままbackground-colorにコピーすると、有効なCSSになりません。

Oracle Redwoodデザインシステムのスペーシング、タイポグラフィ、密度

具体的な基盤のスケールを使用する

公開されているcore-spacingの系列は、1xから12xまで4px刻みです。小、中、大、特大のボーダーロールはそれぞれ異なり、ボタンの高さは独立したコンポーネント変数です。このワークシートでは、適切な箇所に実際の値を使用しています。また、32pxの見出し、レスポンシブなテーブル表示の切り替え、1120pxの外寸は、独自のレイアウト上の判断であることを明記しています。

密度固有の値を混在させない

この固定スタイルシートでは、基本のbody-mdサイズは1rem、行の高さは1.25です。後続のセレクターでは、拡大縮小されたピクセル値が公開される場合があります。このガイドでは基本値を記録し、どのRedwoodのコンテキストでも計算後のサイズが一律であるかのような示し方はしません。ブラウザーの例では、Oracle Sansが読み込まれているとはせず、代わりにArialをフォールバックとして使用します。ネイティブJETアプリケーションでは、選択した密度、テーマ、プラットフォームを組み合わせてテストしてください。

Oracle Redwoodデザインシステムを参考にしたワークシートの構成

データと操作を分かりやすくする

各行には、スタジオ用品の名前、単位の説明、現在庫と最小在庫の比較、数量入力欄を表示します。確認状態のラベルには、その用品がローカルの下書きに含まれるかどうかを示します。サマリーでは、フィルターで非表示になっている行も含め、下書き全体の数量を集計します。これらは架空のサンプルデータであり、在庫の実証データでも、調達に関する推奨事項でもありません。

並べ替え後も行の識別情報を維持する

Oracle Redwoodデザインシステムを参考にした数量の検証

定められたローカルルールに反する値を拒否する

独自の数量入力欄では、0から99までの整数を受け付けます。空欄、負数、小数、範囲外の値を入力すると、インラインエラーが表示され、確認操作が無効になります。下書きモデルでは、有効な編集が行われるまで直近の有効な数量を保持します。画面上のエラーによってこの違いが明確になり、無効な値が確認済み合計に含まれることはありません。

無効な編集が破棄されるタイミングを説明する

フィルターや並べ替えを変更すると、直近の有効な下書き値から表示行が再構成されるため、確定前の無効な編集は破棄されます。これはローカルの例における意図的な制約であり、ネイティブJETの検証動作を保証するものではありません。実運用の編集可能なテーブルでは、画面を切り替えても無効な下書きを保持する方法や、移動をブロックする方法も考えられます。そうした動作は、独自の状態モデルで設計し、テストする必要があります。

Oracle Redwoodデザインシステムを参考にした確認とリセット

送信したかのように装わず、ローカルでの確認であることを説明する

「下書きを確認」すると、合計数量と該当項目数が読みやすい形式で表示されます。また、注文は送信されていないことを明示します。この例では、購入に必須の条件を独自に設けていないため、数量の合計が0でも有効な下書きとして受け付けます。数量を編集すると、以前の確認メッセージが消去され、変更後の下書きに古い確認結果が残らないようになっています。

予測可能な復旧手段を用意する

数量をリセットすると、提案された追加数が元に戻り、確認メッセージが消去されます。現在のフィルターと並べ替えは維持され、リセット後のモデルに基づいて該当する行が再描画されます。ページを再読み込みせずに復元を確認できます。このサンプルにはストレージやバックエンドがないため、再読み込みしてもローカルデータは初期状態に戻ります。

Oracle Redwood デザインシステム Oracle Redwoodに着想を得たレスポンシブテーブル

狭い画面でも情報の階層を維持する

幅の広いレイアウトでは、列見出しと行見出しの商品名を備えたテーブルを表示します。650px未満では、各行が読みやすいブロックに変わり、各データセルの値の前にラベルが表示されます。入力欄は利用可能な幅に収まり、商品説明は商品名に付随します。この切り替えは元のアプリケーション CSS のものであり、oj-tableのレスポンシブ動作を示すものではありません。

編集後とフィルター適用後の状態をテストする

ブラウザのチェックでは、無効な数量を入力して修正し、商品を並べ替え、最小在庫を下回る行にフィルターを適用して、レイアウトを測定する前に結果の合計を確認します。1440pxから280pxまでの4つの幅で検証しました。空のテーブルコンテナーがあるかどうかだけでなく、実際のコンテンツと状態の変化をテストします。

Oracle Redwood デザインシステムの完全なリファレンス実装

付属の完全なドキュメントを実行する

HTMLのサンプルには、必要な公開トークンの宣言、オリジナルのスタイル、サンプルレコード、すべてのイベントハンドラーが含まれています。index.htmlとして保存し、ディレクトリを配信してください。不足しているインポートや外部ランタイム呼び出しはありません。ローカル実装の実行にJET JavaScriptパッケージは不要ですが、リファレンスの値はJET 19.0.0に固定されています。

  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の採用には別途フレームワークのセットアップが必要です。手順はリンク先の公式ドキュメントに記載されています。

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

あなたのプロジェクト向けプロンプト

AI エージェント用プロンプト
検証済みのJET 19公開ベース変数を使用して、付属のオリジナルRedwood着想の在庫確認ワークシートを実装します。RGBチャンネル構文、有効な数量のアイテムID単位の状態管理、検証の境界、並べ替えとフィルターの維持、ローカルのみの確認とリセットを保持してください。このブラウザー実装をネイティブJETやOracleのサービスとして説明しないでください。
05

Oracle Redwood デザインシステムの情報源と対象範囲

公開されているOracle JET 19 Redwood変数を使用したOpenDesignの実装例です。プレビューはプレーンなHTML/CSS/JavaScriptであり、ネイティブJETコンポーネントやOracleの在庫サービスではありません。Arialをフォールバックフォントとして明示的に指定しています。