# Oracle Redwood-Designsystem

## Vorschau der Oracle Redwood-Designsystemoberfläche

Bearbeiten Sie Mengen, prüfen Sie die Validierung und sortieren und filtern Sie, ohne den gültigen Entwurf zu verlieren.

## Designreferenz für das Oracle Redwood-Designsystem

Öffentliche Basisdeklarationen aus dem festgelegten JET-19.0.0-Redwood-Stylesheet. Das Verhalten des ursprünglichen Arbeitsblatts und sein Layout sind separat gekennzeichnet; private Variablen und spätere invertierte Überschreibungen sind nicht Teil der Basisreferenz.

### Semantische Redwood-Basisfunktionen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --oj-core-text-color-primary | rgb(var(--oj-palette-neutral-rgb-190)) | Erste/Basisdeklarationen aus JET 19 Redwood. Invertierte und Dichte-Selektoren können Werte überschreiben; fassen Sie nicht alle Deklarationen zu einem einzigen Wert aus der letzten Deklaration zusammen. |
| --oj-core-text-color-secondary | rgba(var(--oj-palette-neutral-rgb-190), .70) | Erste/Basisdeklarationen aus JET 19 Redwood. Invertierte und Dichte-Selektoren können Werte überschreiben; fassen Sie nicht alle Deklarationen zu einem einzigen Wert aus der letzten Deklaration zusammen. |
| --oj-core-text-color-disabled | rgba(var(--oj-palette-neutral-rgb-190), .4) | Erste/Basisdeklarationen aus JET 19 Redwood. Invertierte und Dichte-Selektoren können Werte überschreiben; fassen Sie nicht alle Deklarationen zu einem einzigen Wert aus der letzten Deklaration zusammen. |
| --oj-core-bg-color-content | rgb(var(--oj-palette-neutral-rgb-0)) | Erste/Basisdeklarationen aus JET 19 Redwood. Invertierte und Dichte-Selektoren können Werte überschreiben; fassen Sie nicht alle Deklarationen zu einem einzigen Wert aus der letzten Deklaration zusammen. |
| --oj-body-bg-color | rgb(var(--oj-palette-neutral-rgb-10)) | Erste/Basisdeklarationen aus JET 19 Redwood. Invertierte und Dichte-Selektoren können Werte überschreiben; fassen Sie nicht alle Deklarationen zu einem einzigen Wert aus der letzten Deklaration zusammen. |
| --oj-core-divider-color | rgba(var(--oj-palette-neutral-rgb-190),.12) | Erste/Basisdeklarationen aus JET 19 Redwood. Invertierte und Dichte-Selektoren können Werte überschreiben; fassen Sie nicht alle Deklarationen zu einem einzigen Wert aus der letzten Deklaration zusammen. |
| --oj-core-focus-border-color | rgb(var(--oj-palette-neutral-rgb-190)) | Erste/Basisdeklarationen aus JET 19 Redwood. Invertierte und Dichte-Selektoren können Werte überschreiben; fassen Sie nicht alle Deklarationen zu einem einzigen Wert aus der letzten Deklaration zusammen. |
### Im Arbeitsblatt verwendete Palettenwerte

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --oj-palette-neutral-rgb-0 | 255, 255, 255 | Rohe RGB-Kanalwerte werden innerhalb von rgb() oder rgba() verwendet. Für sich genommen sind dies keine vollständigen CSS-Farbwerte. |
| --oj-palette-neutral-rgb-10 | 251, 249, 248 | Rohe RGB-Kanalwerte werden innerhalb von rgb() oder rgba() verwendet. Für sich genommen sind dies keine vollständigen CSS-Farbwerte. |
| --oj-palette-neutral-rgb-20 | 245, 244, 242 | Rohe RGB-Kanalwerte werden innerhalb von rgb() oder rgba() verwendet. Für sich genommen sind dies keine vollständigen CSS-Farbwerte. |
| --oj-palette-neutral-rgb-190 | 22, 21, 19 | Rohe RGB-Kanalwerte werden innerhalb von rgb() oder rgba() verwendet. Für sich genommen sind dies keine vollständigen CSS-Farbwerte. |
| --oj-palette-brand-rgb-120 | 0, 104, 140 | Rohe RGB-Kanalwerte werden innerhalb von rgb() oder rgba() verwendet. Für sich genommen sind dies keine vollständigen CSS-Farbwerte. |
| --oj-palette-info-rgb-20 | 237, 246, 249 | Rohe RGB-Kanalwerte werden innerhalb von rgb() oder rgba() verwendet. Für sich genommen sind dies keine vollständigen CSS-Farbwerte. |
| --oj-palette-danger-rgb-120 | 179, 49, 31 | Rohe RGB-Kanalwerte werden innerhalb von rgb() oder rgba() verwendet. Für sich genommen sind dies keine vollständigen CSS-Farbwerte. |
| --oj-palette-success-rgb-20 | 235, 248, 222 | Rohe RGB-Kanalwerte werden innerhalb von rgb() oder rgba() verwendet. Für sich genommen sind dies keine vollständigen CSS-Farbwerte. |
| --oj-palette-success-rgb-140 | 53, 86, 23 | Rohe RGB-Kanalwerte werden innerhalb von rgb() oder rgba() verwendet. Für sich genommen sind dies keine vollständigen CSS-Farbwerte. |
### Abstände und Formen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --oj-core-spacing-1x | .25rem | Veröffentlichte Grundlagenskala. Die nativen HTML-Steuerelemente des Arbeitsblatts verwenden ausgewählte Werte, ohne JET-Komponentenverhalten zu beanspruchen. |
| --oj-core-spacing-2x | .5rem | Veröffentlichte Grundlagenskala. Die nativen HTML-Steuerelemente des Arbeitsblatts verwenden ausgewählte Werte, ohne JET-Komponentenverhalten zu beanspruchen. |
| --oj-core-spacing-3x | .75rem | Veröffentlichte Grundlagenskala. Die nativen HTML-Steuerelemente des Arbeitsblatts verwenden ausgewählte Werte, ohne JET-Komponentenverhalten zu beanspruchen. |
| --oj-core-spacing-4x | 1rem | Veröffentlichte Grundlagenskala. Die nativen HTML-Steuerelemente des Arbeitsblatts verwenden ausgewählte Werte, ohne JET-Komponentenverhalten zu beanspruchen. |
| --oj-core-spacing-5x | 1.25rem | Veröffentlichte Grundlagenskala. Die nativen HTML-Steuerelemente des Arbeitsblatts verwenden ausgewählte Werte, ohne JET-Komponentenverhalten zu beanspruchen. |
| --oj-core-spacing-6x | 1.5rem | Veröffentlichte Grundlagenskala. Die nativen HTML-Steuerelemente des Arbeitsblatts verwenden ausgewählte Werte, ohne JET-Komponentenverhalten zu beanspruchen. |
| --oj-core-spacing-7x | 1.75rem | Veröffentlichte Grundlagenskala. Die nativen HTML-Steuerelemente des Arbeitsblatts verwenden ausgewählte Werte, ohne JET-Komponentenverhalten zu beanspruchen. |
| --oj-core-spacing-8x | 2rem | Veröffentlichte Grundlagenskala. Die nativen HTML-Steuerelemente des Arbeitsblatts verwenden ausgewählte Werte, ohne JET-Komponentenverhalten zu beanspruchen. |
| --oj-core-spacing-9x | 2.25rem | Veröffentlichte Grundlagenskala. Die nativen HTML-Steuerelemente des Arbeitsblatts verwenden ausgewählte Werte, ohne JET-Komponentenverhalten zu beanspruchen. |
| --oj-core-spacing-10x | 2.5rem | Veröffentlichte Grundlagenskala. Die nativen HTML-Steuerelemente des Arbeitsblatts verwenden ausgewählte Werte, ohne JET-Komponentenverhalten zu beanspruchen. |
| --oj-core-spacing-11x | 2.75rem | Veröffentlichte Grundlagenskala. Die nativen HTML-Steuerelemente des Arbeitsblatts verwenden ausgewählte Werte, ohne JET-Komponentenverhalten zu beanspruchen. |
| --oj-core-spacing-12x | 3rem | Veröffentlichte Grundlagenskala. Die nativen HTML-Steuerelemente des Arbeitsblatts verwenden ausgewählte Werte, ohne JET-Komponentenverhalten zu beanspruchen. |
| --oj-core-border-radius-sm | 2px | Veröffentlichte Grundlagenskala. Die nativen HTML-Steuerelemente des Arbeitsblatts verwenden ausgewählte Werte, ohne JET-Komponentenverhalten zu beanspruchen. |
| --oj-core-border-radius-md | .25rem | Veröffentlichte Grundlagenskala. Die nativen HTML-Steuerelemente des Arbeitsblatts verwenden ausgewählte Werte, ohne JET-Komponentenverhalten zu beanspruchen. |
| --oj-core-border-radius-lg | .375rem | Veröffentlichte Grundlagenskala. Die nativen HTML-Steuerelemente des Arbeitsblatts verwenden ausgewählte Werte, ohne JET-Komponentenverhalten zu beanspruchen. |
| --oj-core-border-radius-xl | .5rem | Veröffentlichte Grundlagenskala. Die nativen HTML-Steuerelemente des Arbeitsblatts verwenden ausgewählte Werte, ohne JET-Komponentenverhalten zu beanspruchen. |
### Fließtexttypografie und Steuerelementmaße

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --oj-typography-body-xs-font-size | 0.75rem | Deklarationen des Basisthemas. Das ursprüngliche Beispiel verwendet Arial als Fallback; sein Tabellen- und Inhaltslayout ist Anwendungscode. |
| --oj-typography-body-sm-font-size | 0.859rem | Deklarationen des Basisthemas. Das ursprüngliche Beispiel verwendet Arial als Fallback; sein Tabellen- und Inhaltslayout ist Anwendungscode. |
| --oj-typography-body-md-font-size | 1rem | Deklarationen des Basisthemas. Das ursprüngliche Beispiel verwendet Arial als Fallback; sein Tabellen- und Inhaltslayout ist Anwendungscode. |
| --oj-typography-body-lg-font-size | 1.125rem | Deklarationen des Basisthemas. Das ursprüngliche Beispiel verwendet Arial als Fallback; sein Tabellen- und Inhaltslayout ist Anwendungscode. |
| --oj-typography-body-xl-font-size | 1.25rem | Deklarationen des Basisthemas. Das ursprüngliche Beispiel verwendet Arial als Fallback; sein Tabellen- und Inhaltslayout ist Anwendungscode. |
| --oj-typography-body-md-line-height | 1.25 | Deklarationen des Basisthemas. Das ursprüngliche Beispiel verwendet Arial als Fallback; sein Tabellen- und Inhaltslayout ist Anwendungscode. |
| --oj-button-height | 2.75rem | Deklarationen des Basisthemas. Das ursprüngliche Beispiel verwendet Arial als Fallback; sein Tabellen- und Inhaltslayout ist Anwendungscode. |
| --oj-button-border-radius | var(--oj-core-border-radius-md) | Deklarationen des Basisthemas. Das ursprüngliche Beispiel verwendet Arial als Fallback; sein Tabellen- und Inhaltslayout ist Anwendungscode. |
### Grenzen der öffentlichen Gestaltung

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Global theme overrides | :root declarations after JET CSS | Eine Überschreibung auf Root-Ebene wirkt sich auf alle Verwendungen dieser öffentlichen Variable aus. |
| Instance styling | A class scoped to the target component | Begrenzen Sie den Geltungsbereich einer öffentlichen Variable, wenn die Änderung nur für eine native Komponente gelten soll. |
| Redwood base | Tracks Oracle visual changes | Wählen Sie diese Option, wenn das Erscheinungsbild von Oracle das Ziel ist; bei Upgrades können sich übernommene Werte ändern. |
| Stable base | Alternative for a distinct custom theme | Stellen Sie es nicht als identisch mit Redwood dar und nehmen Sie nicht an, dass alle Funktionen für invertierte Darstellungen und Skalierung übereinstimmen. |
| Private variables | --oj-private-* excluded | Die öffentliche Referenz des Beispiels basiert nicht auf privaten Implementierungsschnittstellen. |
## Vollständiger Leitfaden zum Oracle Redwood-Designsystem

Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface.

Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen.

## Oracle Redwood-Designsystem und JET-Versionsgrenzen

### Die Implementierungsebene präzise benennen

> Redwood umfasst mehr als eine einzelne herunterladbare Komponentenbibliothek. Dieser Leitfaden verwendet die öffentlichen CSS-Grundlagen aus Oracle JET 19.0.0 als konkrete, überprüfbare Referenz. Die Vorschau ist ein eigens entwickeltes Arbeitsblatt zur Bestandsprüfung mit HTML/CSS, das diese Werte verwendet; es bindet weder oj-table noch oj-input-number oder ein anderes natives JET-Custom-Element ein. Die Laufzeitumgebung wird ausdrücklich benannt, damit visuelle Grundlagen nicht mit einem vollständigen Oracle-Anwendungs-SDK verwechselt werden.

- Referenzquelle: Oracle JET 19 Redwood CSS.

- Laufzeitumgebung der Vorschau: eigens entwickelte HTML/CSS/JavaScript-Implementierung für den nativen Browser.

- Daten und Validierungsregeln: originales lokales Beispiel.

### Oracle-Anwendungen getrennt betrachten

Redwood in einem Oracle-SaaS-Produkt zu übernehmen, eine JET-Anwendung zu konfigurieren und eine öffentliche Theme-Referenz zu verwenden, sind unterschiedliche Tätigkeiten. Das Beispiel ändert keinen Mandanten, stellt keine Verbindung zu Bestandsdaten her und führt keine Produktmigration durch. Das vollständige lokale Dokument eignet sich zum Studium der visuellen Regeln und des Zustandsmodells. Eine echte JET-Anwendung sollte sich dagegen nach der versionierten Framework-Einrichtung und der Dokumentation nativer Komponenten richten.

## Semantische Funktionen und Palettenwerte des Oracle Redwood-Designsystems

### Basisdeklarationen richtig ermitteln

Die Referenz übernimmt für jede öffentliche Variable die erste/Basisdeklaration aus dem festgelegten Stylesheet. Spätere Bereiche für invertierte Darstellungen oder Dichte können denselben Namen neu definieren. Eine naive Extraktion des letzten passenden Eintrags würde daher eine invertierte Vordergrundfarbe fälschlich als standardmäßige helle Textfarbe kennzeichnen. Der Leitfaden weist den Basisbereich ausdrücklich aus und schließt --oj-private-* Schnittstellen aus der veröffentlichten Referenz aus.

### Rohe Kanäle von Farbwerten unterscheiden

Palettenvariablen wie --oj-palette-brand-rgb-120 enthalten drei RGB-Kanäle, während semantische Funktionen sie mit rgb() oder rgba() umschließen. Die ursprüngliche Aktion verwendet die Markenkanäle über rgb(), für Text kommt core-text-color-primary und für die Kartenoberfläche core-bg-color-content zum Einsatz. Eine rohe Kanalzeichenfolge direkt in background-color einzusetzen, wäre ungültiges CSS, auch wenn die Zahlen plausibel aussehen.

## Abstände, Typografie und Dichte im Oracle Redwood-Designsystem

### Die konkrete Grundlagenskala verwenden

Die öffentliche Folge core-spacing umfasst Werte in 4-px-Schritten von 1x bis 12x. Die Rollen für kleine, mittlere, große und extragroße Ränder sind voneinander getrennt; die Schaltflächenhöhe ist eine separate Komponentenvariable. Das Arbeitsblatt verwendet diese tatsächlichen Werte, wo es sinnvoll ist, und kennzeichnet seine 32-px-Überschrift, die responsive Umgestaltung der Tabelle und das äußere Maß von 1120 px als eigene Gestaltungsentscheidungen.

### Werte für unterschiedliche Dichtegrade nicht mischen

Die Basisgröße body-md beträgt in diesem festgelegten Stylesheet 1rem bei einem Zeilenabstand von 1.25; spätere Selektoren können skalierte Pixelwerte anzeigen. Der Leitfaden dokumentiert den Basiswert, statt den Eindruck zu erwecken, jeder Redwood-Kontext müsse dieselbe berechnete Größe verwenden. Das Browserbeispiel nutzt Arial als Fallback, ohne zu behaupten, Oracle Sans sei geladen. Eine native JET-Anwendung sollte die ausgewählte Dichte, das Theme und die Plattform gemeinsam testen.

## Tabellenstruktur im Stil des Oracle Redwood-Designsystems Oracle Redwood

### Daten und Aktionen verständlich machen

Jede Originalzeile benennt einen Atelierbedarf, beschreibt seine Einheit, vergleicht den aktuellen Bestand mit einem Mindestbestand und bietet ein Mengenfeld. Eine Statusbezeichnung für die Prüfung gibt an, ob der Artikel zum lokalen Entwurf beiträgt. Die Zusammenfassung zählt die Einheiten im gesamten Entwurf, auch in Zeilen, die durch den Filter ausgeblendet sind. Dies sind fiktive Beispieldatensätze, keine Bestandsnachweise oder Beschaffungsempfehlungen.

### Die Identität der Zeilen beim Sortieren beibehalten

Die Anwendung speichert Mengen nach Artikel-ID statt nach Tabellenposition. Daher bleiben Bearbeitungen erhalten, wenn nach Namen sortiert oder zur ursprünglichen Reihenfolge zurückgekehrt wird. Der Filter „Unter Mindestbestand“ ändert nur die sichtbare Sammlung. Ein positionsgebundenes Array, das an die dargestellte Zeilenreihenfolge gekoppelt ist, könnte nach dem Sortieren die Menge eines Artikels einem anderen zuordnen. Der bereitgestellte Code verhindert dieses Problem ausdrücklich.

## Mengenvalidierung im Stil des Oracle Redwood-Designsystems Oracle Redwood

### Werte außerhalb der angegebenen lokalen Regeln zurückweisen

Das ursprüngliche Mengenfeld akzeptiert ganze Zahlen von null bis 99. Bei leeren, negativen, gebrochenen oder außerhalb des zulässigen Bereichs liegenden Werten wird ein Inline-Fehler angezeigt und die Prüfaktion deaktiviert. Das Entwurfsmodell behält die zuletzt gültige Menge bei, bis sie durch eine gültige Eingabe ersetzt wird. Der sichtbare Fehler macht diesen Unterschied deutlich, und ungültige Werte werden nicht in die geprüfte Gesamtmenge eingerechnet.

### Erklären, wann eine ungültige Eingabe verworfen wird

Beim Ändern des Filters oder der Sortierung werden die sichtbaren Zeilen anhand der zuletzt gültigen Entwurfswerte neu erstellt. Dadurch wird eine ungültige, noch nicht abgeschlossene Eingabe verworfen. Das ist eine bewusste Einschränkung dieses lokalen Beispiels und keine Garantie für die Validierung in nativem JET. Eine bearbeitbare Tabelle in einer Produktionsanwendung könnte ungültige Entwürfe stattdessen in jeder Ansicht beibehalten oder die Navigation blockieren. Dieses Verhalten muss im jeweiligen Zustandsmodell entworfen und getestet werden.

## Prüfung und Zurücksetzen im Stil des Oracle Redwood-Designsystems Oracle Redwood

### Eine lokale Prüfung beschreiben, ohne eine Übermittlung vorzutäuschen

Mit „Entwurf prüfen“ wird eine verständliche Anzahl von Einheiten und beitragenden Artikeln angezeigt. Zudem wird ausdrücklich darauf hingewiesen, dass keine Bestellung gesendet wurde. Die Aktion akzeptiert einen gültigen Entwurf mit null Einheiten, da das Beispiel keine verpflichtende Kaufregel erfindet. Bei einer Mengenänderung wird die vorherige Prüfmeldung gelöscht, damit für einen geänderten Entwurf keine veraltete Bestätigung stehen bleibt.

### Vorhersehbare Wiederherstellung ermöglichen

Mit „Mengen zurücksetzen“ werden die ursprünglich vorgeschlagenen Ergänzungen wiederhergestellt und die Prüfmeldung gelöscht. Der aktuelle Filter und die Sortierung bleiben erhalten; anschließend werden die Zeilen anhand des zurückgesetzten Modells neu dargestellt. So ist die Wiederherstellung sichtbar, ohne die Seite neu zu laden. Das Beispiel verwendet weder Speicher noch Backend. Beim Neuladen werden daher ebenfalls die ursprünglichen lokalen Daten wiederhergestellt.

## Responsive Tabelle im Stil des Oracle Redwood-Designsystems Oracle Redwood

### Die Informationshierarchie auf schmalen Bildschirmen beibehalten

In der breiten Ansicht wird eine Tabelle mit Spaltenüberschriften und Artikelbezeichnungen als Zeilenköpfen angezeigt. Unterhalb von 650px werden die Zeilen in übersichtliche Blöcke umgewandelt; jede Datenzelle zeigt ihr Label vor dem Wert an. Eingabefelder bleiben innerhalb der verfügbaren Breite, und die Artikelbeschreibung bleibt dem Artikelnamen zugeordnet. Dieser Übergang gehört zur ursprünglichen Anwendung CSS und ist keine Aussage über das responsive Verhalten von oj-table.

### Bearbeitete und gefilterte Zustände testen

Bei der Browserprüfung wird eine ungültige Menge eingegeben und korrigiert, nach Artikeln sortiert, nach Zeilen unter Mindestbestand gefiltert und die resultierende Gesamtmenge geprüft, bevor das Layout vermessen wird. Es wurden vier Breiten von 1440px bis hinunter zu 280px geprüft. Damit werden tatsächliche Inhalte und Zustandsänderungen getestet, nicht bloß das Vorhandensein eines leeren Tabellencontainers.

## Vollständige Referenzimplementierung des Oracle Redwood-Designsystems

### Das bereitgestellte vollständige Dokument ausführen

Das Beispiel HTML enthält die erforderlichen öffentlichen Token-Deklarationen, die ursprünglichen Stile, Beispieldatensätze und alle Ereignisbehandlungsroutinen. Speichere es als index.html und stelle das Verzeichnis bereit; fehlende Importe oder externe Laufzeitaufrufe gibt es nicht. Die Referenzwerte sind auf JET 19.0.0 festgelegt, obwohl die lokale Implementierung zum Ausführen kein JET-JavaScript-Paket benötigt.

1. Speichere das vollständige bereitgestellte Dokument als index.html.

2. Stelle das Verzeichnis über lokales HTTP bereit.

3. Teste ungültige Mengenangaben und ihre Korrektur.

4. Sortiere und filtere, prüfe anschließend denselben Entwurf und setze ihn zurück.

### Native JET-Komponenten mit der jeweils eigenen Einrichtung verwenden

Installiere für eine native Anwendung das passende Oracle-JET-Paket und befolge die Einrichtung für das jeweilige Framework. Verwende anschließend die versionsspezifischen Verträge der oj-*-Komponenten und die öffentlichen Styling-Variablen. Füge kein oj-*-Tag in diese eigenständige Umsetzung ein und gehe davon aus, dass es initialisiert wird. Die verlinkte Styling-Übersicht unterscheidet zwischen Themes auf Root-Ebene und komponentenbezogenen Überschreibungen. Außerdem wird erläutert, wann Redwood oder Stable die geeignetere Basis ist.

## Komponentenbeispiele des Oracle Redwood-Designsystems

### index.html – vollständiges originales Arbeitsblatt

Teilmenge der vollständigen öffentlichen Tokens, responsives HTML, Validierung, stabiler Zeilenzustand sowie lokales Prüf- und Zurücksetzverhalten.

```
<!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>
```

Code-Referenz

- Dies ist ausdrücklich weder oj-table noch oj-input-number.

- Es besteht keine Verbindung zu einer Oracle-Anwendung, einem Bestandsdienst oder einem Bestellendpunkt.

## Einrichtung eines Agents für das Oracle Redwood-Designsystem

### Ausgangspunkt für die Implementierung

Führt die eigenständige Originalumsetzung aus. Die Verwendung von nativem JET erfordert eine separate Einrichtung für das Framework, die in der verlinkten offiziellen Dokumentation beschrieben ist.

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

### Ein Prompt für dein Projekt

```
Implementiere das bereitgestellte originale, von Redwood inspirierte Arbeitsblatt zur Bestandsprüfung anhand verifizierter öffentlicher Basisvariablen aus JET 19. Bewahre die RGB-Kanalsyntax, den Zustand gültiger Mengen nach Artikel-ID, die Validierungsgrenzen, die Beibehaltung beim Sortieren und Filtern sowie die ausschließlich lokale Prüfung und das Zurücksetzen. Beschreibe diese Browserimplementierung nicht als natives JET oder als Oracle-Dienst.
```

## Quellen und Geltungsbereich des Oracle Redwood-Designsystems

Eine OpenDesign-Interpretation mit öffentlichen Oracle-JET-19-Redwood-Variablen. Die Vorschau besteht aus einfachem HTML/CSS/JavaScript, nicht aus nativen JET-Komponenten oder einem Oracle-Inventardienst. Arial ist ausdrücklich als Fallback angegeben.

- Überblick zur JET-Gestaltung Umfang der öffentlichen Variablen, Redwood im Vergleich zu Stable und Theme-Grenzen.

- Festgelegtes Redwood-CSS Tatsächliche Basiswerte aus der Referenz und dem Beispiel.

- Oracle-JET-Dokumentation Einrichtung und Entwicklungskontext des nativen Frameworks.

- Einführung von Redwood Separater Kontext zur Einführung in Oracle-Anwendungen.

## Verwandte Ressourcen zum Oracle Redwood-Designsystem

### Orange OUDS Web

Untersuchen Sie in einer vollständigen responsiven Vergleichsstudie die tatsächlichen semantischen Tokens, Theme-Pakete und das native Offcanvas-Verhalten von Orange OUDS 1.4.

### Palantir Blueprint

Erstellen Sie mit Blueprint einen datenintensiven Arbeitsbereich: mit verifizierten Typografie- und Intent-Tokens, einer Tabelle mit auswählbarem Datensatz, einem Prüfbereich und vollständigem React-Quellcode.

### Pega Bolt

Entdecke Bolts Inhaltsdesignsystem im Pega-Stil: variable Schriftgrößen, getrennte horizontale und vertikale Abstände sowie eine Twig-Akkordeon-Komposition für eine redaktionelle Ressourcenseite.


- [Implementierungsreferenz](https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-styling/CssVariablesOverview.html)
- [Quelle](https://cdn.jsdelivr.net/npm/@oracle/oraclejet@19.0.0/dist/css/redwood/oj-redwood.css)
- [Quelle](https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-styling/CssVariablesOverview.html)
- [Code-Referenz](https://cdn.jsdelivr.net/npm/@oracle/oraclejet@19.0.0/dist/css/redwood/oj-redwood.css)
- [Überblick zur JET-Gestaltung Umfang der öffentlichen Variablen, Redwood im Vergleich zu Stable und Theme-Grenzen.](https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-styling/CssVariablesOverview.html)
- [Festgelegtes Redwood-CSS Tatsächliche Basiswerte aus der Referenz und dem Beispiel.](https://cdn.jsdelivr.net/npm/@oracle/oraclejet@19.0.0/dist/css/redwood/oj-redwood.css)
- [Oracle-JET-Dokumentation Einrichtung und Entwicklungskontext des nativen Frameworks.](https://docs.oracle.com/en/middleware/developer-tools/jet/19/develop/index.html)
- [Einführung von Redwood Separater Kontext zur Einführung in Oracle-Anwendungen.](https://docs.oracle.com/en/cloud/saas/readiness/redwood-adoption/)