# Oracle Redwood Système de conception

## Aperçu de l’interface du système de conception Oracle Redwood

Modifiez les quantités, vérifiez la validation, triez et filtrez tout en conservant le brouillon valide.

## Référence de conception du système de design Oracle Redwood

Déclarations publiques de base extraites de la feuille de style Redwood de JET 19.0.0, dont la version est verrouillée. Le comportement et la mise en page d’origine de la feuille de travail sont décrits séparément ; les variables privées et les surcharges inversées ultérieures sont exclues de cette référence de base.

### Rôles sémantiques de base de Redwood

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --oj-core-text-color-primary | rgb(var(--oj-palette-neutral-rgb-190)) | Premières déclarations, qui constituent la base de Redwood pour JET 19. Les sélecteurs inversés et de densité peuvent remplacer ces valeurs ; ne regroupez pas toutes les déclarations dans une simple recherche de la dernière valeur. |
| --oj-core-text-color-secondary | rgba(var(--oj-palette-neutral-rgb-190), .70) | Premières déclarations, qui constituent la base de Redwood pour JET 19. Les sélecteurs inversés et de densité peuvent remplacer ces valeurs ; ne regroupez pas toutes les déclarations dans une simple recherche de la dernière valeur. |
| --oj-core-text-color-disabled | rgba(var(--oj-palette-neutral-rgb-190), .4) | Premières déclarations, qui constituent la base de Redwood pour JET 19. Les sélecteurs inversés et de densité peuvent remplacer ces valeurs ; ne regroupez pas toutes les déclarations dans une simple recherche de la dernière valeur. |
| --oj-core-bg-color-content | rgb(var(--oj-palette-neutral-rgb-0)) | Premières déclarations, qui constituent la base de Redwood pour JET 19. Les sélecteurs inversés et de densité peuvent remplacer ces valeurs ; ne regroupez pas toutes les déclarations dans une simple recherche de la dernière valeur. |
| --oj-body-bg-color | rgb(var(--oj-palette-neutral-rgb-10)) | Premières déclarations, qui constituent la base de Redwood pour JET 19. Les sélecteurs inversés et de densité peuvent remplacer ces valeurs ; ne regroupez pas toutes les déclarations dans une simple recherche de la dernière valeur. |
| --oj-core-divider-color | rgba(var(--oj-palette-neutral-rgb-190),.12) | Premières déclarations, qui constituent la base de Redwood pour JET 19. Les sélecteurs inversés et de densité peuvent remplacer ces valeurs ; ne regroupez pas toutes les déclarations dans une simple recherche de la dernière valeur. |
| --oj-core-focus-border-color | rgb(var(--oj-palette-neutral-rgb-190)) | Premières déclarations, qui constituent la base de Redwood pour JET 19. Les sélecteurs inversés et de densité peuvent remplacer ces valeurs ; ne regroupez pas toutes les déclarations dans une simple recherche de la dernière valeur. |
### Valeurs de palette utilisées par la feuille de travail

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --oj-palette-neutral-rgb-0 | 255, 255, 255 | Les valeurs brutes des canaux RVB sont utilisées dans rgb() ou rgba(). À elles seules, elles ne constituent pas des valeurs de couleur CSS complètes. |
| --oj-palette-neutral-rgb-10 | 251, 249, 248 | Les valeurs brutes des canaux RVB sont utilisées dans rgb() ou rgba(). À elles seules, elles ne constituent pas des valeurs de couleur CSS complètes. |
| --oj-palette-neutral-rgb-20 | 245, 244, 242 | Les valeurs brutes des canaux RVB sont utilisées dans rgb() ou rgba(). À elles seules, elles ne constituent pas des valeurs de couleur CSS complètes. |
| --oj-palette-neutral-rgb-190 | 22, 21, 19 | Les valeurs brutes des canaux RVB sont utilisées dans rgb() ou rgba(). À elles seules, elles ne constituent pas des valeurs de couleur CSS complètes. |
| --oj-palette-brand-rgb-120 | 0, 104, 140 | Les valeurs brutes des canaux RVB sont utilisées dans rgb() ou rgba(). À elles seules, elles ne constituent pas des valeurs de couleur CSS complètes. |
| --oj-palette-info-rgb-20 | 237, 246, 249 | Les valeurs brutes des canaux RVB sont utilisées dans rgb() ou rgba(). À elles seules, elles ne constituent pas des valeurs de couleur CSS complètes. |
| --oj-palette-danger-rgb-120 | 179, 49, 31 | Les valeurs brutes des canaux RVB sont utilisées dans rgb() ou rgba(). À elles seules, elles ne constituent pas des valeurs de couleur CSS complètes. |
| --oj-palette-success-rgb-20 | 235, 248, 222 | Les valeurs brutes des canaux RVB sont utilisées dans rgb() ou rgba(). À elles seules, elles ne constituent pas des valeurs de couleur CSS complètes. |
| --oj-palette-success-rgb-140 | 53, 86, 23 | Les valeurs brutes des canaux RVB sont utilisées dans rgb() ou rgba(). À elles seules, elles ne constituent pas des valeurs de couleur CSS complètes. |
### Espacement et formes

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --oj-core-spacing-1x | .25rem | Échelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET. |
| --oj-core-spacing-2x | .5rem | Échelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET. |
| --oj-core-spacing-3x | .75rem | Échelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET. |
| --oj-core-spacing-4x | 1rem | Échelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET. |
| --oj-core-spacing-5x | 1.25rem | Échelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET. |
| --oj-core-spacing-6x | 1.5rem | Échelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET. |
| --oj-core-spacing-7x | 1.75rem | Échelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET. |
| --oj-core-spacing-8x | 2rem | Échelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET. |
| --oj-core-spacing-9x | 2.25rem | Échelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET. |
| --oj-core-spacing-10x | 2.5rem | Échelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET. |
| --oj-core-spacing-11x | 2.75rem | Échelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET. |
| --oj-core-spacing-12x | 3rem | Échelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET. |
| --oj-core-border-radius-sm | 2px | Échelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET. |
| --oj-core-border-radius-md | .25rem | Échelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET. |
| --oj-core-border-radius-lg | .375rem | Échelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET. |
| --oj-core-border-radius-xl | .5rem | Échelle de base publiée. Les composants HTML natifs de la feuille de travail utilisent certaines de ces valeurs, sans prétendre reproduire le comportement des composants JET. |
### Typographie du corps de texte et dimensions des contrôles

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --oj-typography-body-xs-font-size | 0.75rem | Déclarations du thème de base. L’exemple d’origine utilise Arial comme police de remplacement ; la mise en page du tableau et du contenu relève du code de l’application. |
| --oj-typography-body-sm-font-size | 0.859rem | Déclarations du thème de base. L’exemple d’origine utilise Arial comme police de remplacement ; la mise en page du tableau et du contenu relève du code de l’application. |
| --oj-typography-body-md-font-size | 1rem | Déclarations du thème de base. L’exemple d’origine utilise Arial comme police de remplacement ; la mise en page du tableau et du contenu relève du code de l’application. |
| --oj-typography-body-lg-font-size | 1.125rem | Déclarations du thème de base. L’exemple d’origine utilise Arial comme police de remplacement ; la mise en page du tableau et du contenu relève du code de l’application. |
| --oj-typography-body-xl-font-size | 1.25rem | Déclarations du thème de base. L’exemple d’origine utilise Arial comme police de remplacement ; la mise en page du tableau et du contenu relève du code de l’application. |
| --oj-typography-body-md-line-height | 1.25 | Déclarations du thème de base. L’exemple d’origine utilise Arial comme police de remplacement ; la mise en page du tableau et du contenu relève du code de l’application. |
| --oj-button-height | 2.75rem | Déclarations du thème de base. L’exemple d’origine utilise Arial comme police de remplacement ; la mise en page du tableau et du contenu relève du code de l’application. |
| --oj-button-border-radius | var(--oj-core-border-radius-md) | Déclarations du thème de base. L’exemple d’origine utilise Arial comme police de remplacement ; la mise en page du tableau et du contenu relève du code de l’application. |
### Limites du style public

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| Global theme overrides | :root declarations after JET CSS | Une surcharge à la racine affecte tous les éléments qui utilisent cette variable publique. |
| Instance styling | A class scoped to the target component | Limitez la portée d’une variable publique si la modification ne concerne qu’un seul composant natif. |
| Redwood base | Tracks Oracle visual changes | Choisissez cette option si l’objectif est de respecter l’apparence d’Oracle ; les mises à niveau peuvent modifier les valeurs héritées. |
| Stable base | Alternative for a distinct custom theme | Ne le présentez pas comme identique à Redwood et ne supposez pas que toutes les capacités d’inversion ou de mise à l’échelle sont équivalentes. |
| Private variables | --oj-private-* excluded | L’exemple ne fonde pas sa référence publique sur des mécanismes internes d’implémentation. |
## Guide complet du système de design Oracle Redwood

Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle.

Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources.

## Limites des versions du système de design Oracle Redwood et de JET

### Précisez la couche d’implémentation

> Redwood ne se limite pas à une bibliothèque de composants téléchargeable. Ce guide s’appuie sur les fondations publiques CSS fournies avec Oracle JET 19.0.0, qui constituent une référence concrète et vérifiable. L’aperçu est une feuille de travail originale d’examen des stocks HTML/CSS qui utilise ces valeurs ; il ne crée aucune instance de oj-table, oj-input-number ni d’aucun autre élément personnalisé natif de JET. La déclaration concernant l’environnement d’exécution est explicite afin que le lecteur ne confonde pas les fondations visuelles avec un SDK complet pour les applications Oracle.

- Source de référence : CSS Redwood d’Oracle JET 19.

- Environnement d’exécution de l’aperçu : HTML/CSS/JavaScript original exécuté dans le navigateur.

- Données et règles de validation : exemple local original.

### Distinguez l’adoption des applications Oracle

Adopter Redwood dans un produit SaaS Oracle, configurer une application JET et reprendre une référence de thème publique sont trois démarches distinctes. L’exemple ne modifie aucun environnement client, ne se connecte pas à des données de stock et n’effectue aucune migration de produit. Son document local complet permet d’étudier les règles visuelles et le modèle d’état, tandis qu’une véritable application JET doit suivre les procédures de configuration du framework correspondant à sa version ainsi que la documentation des composants natifs.

## Rôles sémantiques et valeurs de palette du système de design Oracle Redwood

### Interprétez correctement les déclarations de base

La référence reprend la première déclaration, c’est-à-dire celle de base, de chaque variable publique dans la feuille de style dont la version est verrouillée. Les portées inversées ou de densité définies plus loin peuvent redéfinir le même nom. Une extraction naïve de la dernière correspondance pourrait donc étiqueter une couleur de premier plan inversée comme couleur de texte par défaut du thème clair. Le guide indique explicitement la portée de base et exclut les mécanismes --oj-private-* de la référence publiée.

### Distinguez les canaux bruts des valeurs de couleur

Les variables de palette telles que --oj-palette-brand-rgb-120 contiennent trois canaux RVB, tandis que les rôles sémantiques les enveloppent dans rgb() ou rgba(). L’action d’origine utilise les canaux de la marque avec rgb(), le texte utilise core-text-color-primary et la surface de la carte utilise core-bg-color-content. Copier directement la chaîne de canaux bruts dans background-color produirait du CSS invalide, même si les nombres semblent plausibles.

## Espacement, typographie et densité du système de design Oracle Redwood

### Utilisez l’échelle de fondation concrète

La séquence publique core-spacing progresse par paliers de 4px, de 1x à 12x. Les rôles de bordure small, medium, large et extra-large sont distincts, tout comme la variable de hauteur du bouton. La feuille de travail utilise ces valeurs réelles lorsque cela convient et précise que son titre de 32px, la transformation adaptative du tableau et sa largeur extérieure de 1120px sont des choix de composition originaux.

### Ne mélangez pas les valeurs propres à la densité

Dans cette feuille de style verrouillée, la taille de base body-md est de 1rem et son interligne de 1.25 ; des sélecteurs ultérieurs peuvent exposer des valeurs en pixels mises à l’échelle. Le guide consigne la valeur de base sans laisser entendre que chaque contexte Redwood doit utiliser une seule taille calculée. L’exemple dans le navigateur utilise Arial comme police de remplacement et ne prétend pas charger Oracle Sans. Une application JET native doit tester ensemble la densité, le thème et la plateforme sélectionnés.

## Structure d’une feuille de travail inspirée du système de design Oracle Redwood

### Rendez les données et les actions compréhensibles

Chaque ligne d’origine désigne une fourniture de studio, précise son unité, compare le stock actuel au minimum et propose un champ de saisie de quantité. Un libellé d’état de validation indique également si l’article est inclus dans le brouillon local. Le récapitulatif compte les unités de l’ensemble du brouillon, y compris celles des lignes masquées par le filtre. Il s’agit d’exemples fictifs, et non de données de stock avérées ni de recommandations d’achat.

### Préservez l’identité des lignes lors du tri

L’application enregistre les quantités par identifiant d’article, et non selon la position dans le tableau. Le tri par nom ou le rétablissement de l’ordre initial préserve donc les modifications. Le filtre « Stock inférieur au minimum » ne modifie que la collection affichée. Un tableau de valeurs indexé sur l’ordre des lignes affichées risquerait d’attribuer la quantité d’un article à un autre après le tri ; le code fourni évite explicitement ce problème.

## Validation des quantités dans une feuille de travail inspirée du système de design Oracle Redwood

### Rejetez les valeurs qui ne respectent pas la règle locale indiquée

Le champ de quantité d’origine accepte des nombres entiers compris entre zéro et 99. Une valeur vide, négative, fractionnaire ou hors limites affiche une erreur en ligne et désactive l’action de validation. Le modèle de brouillon conserve la dernière quantité valide jusqu’à ce qu’une modification valide la remplace. L’erreur visible rend cette distinction claire, et aucune valeur invalide n’est incluse dans le total validé.

### Indiquez quand une modification invalide est abandonnée

Modifier le filtre ou le tri reconstruit les lignes visibles à partir des dernières valeurs provisoires valides ; toute modification invalide et inachevée est donc abandonnée. Il s’agit d’une limite délibérée de cet exemple local, et non d’une garantie de validation native de JET. Dans un tableau modifiable de production, il pourrait être préférable de conserver les valeurs provisoires invalides dans toutes les vues ou d’empêcher la navigation ; ce comportement doit être conçu et testé dans son propre modèle d’état.

## Révision et réinitialisation inspirées du système de design Oracle Redwood Oracle Redwood

### Décrire une révision locale sans prétendre envoyer quoi que ce soit

L’action Réviser ce brouillon affiche le nombre d’unités et d’articles concernés. Elle précise explicitement qu’aucune commande n’a été envoyée. L’action accepte un brouillon valide de zéro unité, car l’exemple n’invente aucune obligation d’achat. Modifier une quantité efface le message de révision précédent afin qu’un brouillon modifié ne conserve pas une confirmation obsolète.

### Permettre une reprise prévisible

Réinitialiser les quantités rétablit les ajouts suggérés d’origine et efface le message de révision. Le filtre et le tri en cours sont conservés, puis les lignes sont redessinées à partir du modèle réinitialisé. La reprise est ainsi visible sans recharger la page. L’exemple n’utilise ni stockage ni serveur ; un rechargement rétablit donc également les données locales initiales.

## Tableau responsive inspiré du système de design Oracle Redwood Oracle Redwood

### Conserver la hiérarchie de l’information sur les écrans étroits

Sur grand écran, la disposition prend la forme d’un tableau avec des en-têtes de colonnes et des noms d’articles servant d’en-têtes de ligne. En dessous de 650px, les lignes deviennent des blocs lisibles et chaque cellule de données affiche son libellé avant sa valeur. Les champs restent dans l’espace disponible et la description demeure associée au nom de l’article. Cette adaptation relève de l’application d’origine CSS ; elle ne prétend pas décrire le comportement responsive de oj-table.

### Tester les états modifiés et filtrés

Le test dans le navigateur saisit une quantité invalide, la corrige, trie les articles, filtre ceux dont le stock est inférieur au minimum et révise le total obtenu avant de mesurer la mise en page. Quatre largeurs, de 1440px à 280px, ont été vérifiées. Le test porte sur le contenu réel et les changements d’état, pas simplement sur la présence d’un conteneur de tableau vide.

## Implémentation de référence complète du système de design Oracle Redwood

### Exécuter le document complet fourni

L’exemple HTML comprend les déclarations de jetons publics requises, les styles d’origine, les enregistrements d’exemple et tous les gestionnaires d’événements. Enregistrez-le sous le nom index.html et servez le répertoire ; aucun import manquant ni appel externe à l’exécution n’est nécessaire. Les valeurs de référence sont celles de JET 19.0.0, même si l’implémentation locale ne nécessite aucun package JET JavaScript pour fonctionner.

1. Enregistrez le document complet fourni sous le nom index.html.

2. Servez son dossier en HTTP local.

3. Testez les quantités invalides et leur correction.

4. Triez et filtrez, puis révisez et réinitialisez le même brouillon.

### Utiliser les composants natifs de JET avec leur propre configuration

Pour une application native, installez le package Oracle JET correspondant et suivez la configuration de son framework, puis utilisez les contrats des composants oj-* et les variables de style publiques propres à la version. Ne collez pas une balise oj-* dans cette interprétation autonome en supposant qu’elle s’initialisera. La présentation des styles liée distingue la thématisation à la racine des substitutions limitées à un composant et explique quand Redwood ou Stable constitue une base plus appropriée.

## Exemples de composants du système de design Oracle Redwood

### index.html — fiche de travail complète d’origine

Sous-ensemble complet de jetons publics, HTML responsive, validation, état stable des lignes et comportement local de révision et de réinitialisation.

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

Référence du code

- Il ne s’agit volontairement ni de oj-table ni de oj-input-number.

- Aucune application Oracle, aucun service de stock et aucun point de terminaison de commande ne sont connectés.

## Configuration de l’agent du système de design Oracle Redwood

### Point de départ de l’implémentation

Exécute l’interprétation autonome d’origine. L’adoption de JET natif nécessite une configuration distincte du framework, décrite dans la documentation officielle liée.

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

### Un prompt pour votre projet

```
Implémentez la fiche de travail fournie pour la révision des stocks, inspirée de Redwood et créée à l’origine, à l’aide de variables de base publiques de JET 19 vérifiées. Préservez la syntaxe des canaux RVB, l’état des quantités valides indexé par identifiant d’article, les limites de validation, la conservation du tri et du filtre, la révision exclusivement locale et la réinitialisation. Ne présentez pas cette implémentation dans le navigateur comme JET natif ou comme un service Oracle.
```

## Sources et périmètre du système de design Oracle Redwood

Une interprétation OpenDesign qui utilise les variables publiques Redwood d’Oracle JET 19. L’aperçu est en HTML/CSS/JavaScript simple, sans composants JET natifs ni service de stock Oracle. Arial est explicitement indiqué comme police de remplacement.

- Présentation des styles JET Portée des variables publiques, comparaison entre Redwood et Stable et limites des thèmes.

- CSS Redwood de référence Valeurs de base réellement utilisées dans la référence et l’exemple.

- Documentation Oracle JET Configuration du framework natif et contexte de développement.

- Adoption de Redwood Contexte distinct pour l’adoption d’une application Oracle.

## Ressources associées au système de design Oracle Redwood

### Orange OUDS Web

Examinez les tokens sémantiques réels d’Orange OUDS 1.4, ses packages de thème et le comportement natif d’Offcanvas grâce à une étude comparative complète et adaptative.

### Palantir Blueprint

Créez un espace de travail dense pour les données avec Blueprint : tokens de typographie et d’intention vérifiés, tableau de données sélectionnable, panneau d’inspection et code source React complet.

### Pega Bolt

Découvrez le système de contenu de Bolt aux couleurs de Pega : typographie fluide, espacements horizontaux et verticaux distincts, et composition d’accordéon Twig pour une page de ressources éditoriale.


- [Référence de mise en œuvre](https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-styling/CssVariablesOverview.html)
- [Source](https://cdn.jsdelivr.net/npm/@oracle/oraclejet@19.0.0/dist/css/redwood/oj-redwood.css)
- [Source](https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-styling/CssVariablesOverview.html)
- [Référence du code](https://cdn.jsdelivr.net/npm/@oracle/oraclejet@19.0.0/dist/css/redwood/oj-redwood.css)
- [Présentation des styles JET Portée des variables publiques, comparaison entre Redwood et Stable et limites des thèmes.](https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-styling/CssVariablesOverview.html)
- [CSS Redwood de référence Valeurs de base réellement utilisées dans la référence et l’exemple.](https://cdn.jsdelivr.net/npm/@oracle/oraclejet@19.0.0/dist/css/redwood/oj-redwood.css)
- [Documentation Oracle JET Configuration du framework natif et contexte de développement.](https://docs.oracle.com/en/middleware/developer-tools/jet/19/develop/index.html)
- [Adoption de Redwood Contexte distinct pour l’adoption d’une application Oracle.](https://docs.oracle.com/en/cloud/saas/readiness/redwood-adoption/)