# Sistema de diseño Oracle Redwood

## Vista previa de la interfaz del sistema de diseño Oracle Redwood

Edite las cantidades, revise la validación, ordene y filtre sin perder el borrador válido.

## Referencia de diseño del sistema de diseño Oracle Redwood

Declaraciones públicas base de la hoja de estilos Redwood de JET 19.0.0 fijada. El comportamiento original de la hoja de trabajo y su diseño se identifican por separado; se excluyen las variables privadas y las anulaciones invertidas posteriores.

### Funciones semánticas base de Redwood

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --oj-core-text-color-primary | rgb(var(--oj-palette-neutral-rgb-190)) | Primeras declaraciones y declaraciones base de JET 19 Redwood. Los selectores invertidos y de densidad pueden anular valores; no reduzca todas las declaraciones a una búsqueda del último valor. |
| --oj-core-text-color-secondary | rgba(var(--oj-palette-neutral-rgb-190), .70) | Primeras declaraciones y declaraciones base de JET 19 Redwood. Los selectores invertidos y de densidad pueden anular valores; no reduzca todas las declaraciones a una búsqueda del último valor. |
| --oj-core-text-color-disabled | rgba(var(--oj-palette-neutral-rgb-190), .4) | Primeras declaraciones y declaraciones base de JET 19 Redwood. Los selectores invertidos y de densidad pueden anular valores; no reduzca todas las declaraciones a una búsqueda del último valor. |
| --oj-core-bg-color-content | rgb(var(--oj-palette-neutral-rgb-0)) | Primeras declaraciones y declaraciones base de JET 19 Redwood. Los selectores invertidos y de densidad pueden anular valores; no reduzca todas las declaraciones a una búsqueda del último valor. |
| --oj-body-bg-color | rgb(var(--oj-palette-neutral-rgb-10)) | Primeras declaraciones y declaraciones base de JET 19 Redwood. Los selectores invertidos y de densidad pueden anular valores; no reduzca todas las declaraciones a una búsqueda del último valor. |
| --oj-core-divider-color | rgba(var(--oj-palette-neutral-rgb-190),.12) | Primeras declaraciones y declaraciones base de JET 19 Redwood. Los selectores invertidos y de densidad pueden anular valores; no reduzca todas las declaraciones a una búsqueda del último valor. |
| --oj-core-focus-border-color | rgb(var(--oj-palette-neutral-rgb-190)) | Primeras declaraciones y declaraciones base de JET 19 Redwood. Los selectores invertidos y de densidad pueden anular valores; no reduzca todas las declaraciones a una búsqueda del último valor. |
### Valores de la paleta usados en la hoja de trabajo

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --oj-palette-neutral-rgb-0 | 255, 255, 255 | Los valores de los canales RGB sin procesar se usan dentro de rgb() o rgba(). Por sí solos, no son valores de color CSS completos. |
| --oj-palette-neutral-rgb-10 | 251, 249, 248 | Los valores de los canales RGB sin procesar se usan dentro de rgb() o rgba(). Por sí solos, no son valores de color CSS completos. |
| --oj-palette-neutral-rgb-20 | 245, 244, 242 | Los valores de los canales RGB sin procesar se usan dentro de rgb() o rgba(). Por sí solos, no son valores de color CSS completos. |
| --oj-palette-neutral-rgb-190 | 22, 21, 19 | Los valores de los canales RGB sin procesar se usan dentro de rgb() o rgba(). Por sí solos, no son valores de color CSS completos. |
| --oj-palette-brand-rgb-120 | 0, 104, 140 | Los valores de los canales RGB sin procesar se usan dentro de rgb() o rgba(). Por sí solos, no son valores de color CSS completos. |
| --oj-palette-info-rgb-20 | 237, 246, 249 | Los valores de los canales RGB sin procesar se usan dentro de rgb() o rgba(). Por sí solos, no son valores de color CSS completos. |
| --oj-palette-danger-rgb-120 | 179, 49, 31 | Los valores de los canales RGB sin procesar se usan dentro de rgb() o rgba(). Por sí solos, no son valores de color CSS completos. |
| --oj-palette-success-rgb-20 | 235, 248, 222 | Los valores de los canales RGB sin procesar se usan dentro de rgb() o rgba(). Por sí solos, no son valores de color CSS completos. |
| --oj-palette-success-rgb-140 | 53, 86, 23 | Los valores de los canales RGB sin procesar se usan dentro de rgb() o rgba(). Por sí solos, no son valores de color CSS completos. |
### Espaciado y formas

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --oj-core-spacing-1x | .25rem | Escala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET. |
| --oj-core-spacing-2x | .5rem | Escala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET. |
| --oj-core-spacing-3x | .75rem | Escala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET. |
| --oj-core-spacing-4x | 1rem | Escala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET. |
| --oj-core-spacing-5x | 1.25rem | Escala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET. |
| --oj-core-spacing-6x | 1.5rem | Escala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET. |
| --oj-core-spacing-7x | 1.75rem | Escala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET. |
| --oj-core-spacing-8x | 2rem | Escala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET. |
| --oj-core-spacing-9x | 2.25rem | Escala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET. |
| --oj-core-spacing-10x | 2.5rem | Escala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET. |
| --oj-core-spacing-11x | 2.75rem | Escala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET. |
| --oj-core-spacing-12x | 3rem | Escala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET. |
| --oj-core-border-radius-sm | 2px | Escala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET. |
| --oj-core-border-radius-md | .25rem | Escala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET. |
| --oj-core-border-radius-lg | .375rem | Escala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET. |
| --oj-core-border-radius-xl | .5rem | Escala de fundamentos publicada. Los controles nativos de HTML de la hoja de trabajo usan algunos valores, pero no se atribuye a estos el comportamiento de los componentes de JET. |
### Tipografía del cuerpo y dimensiones de los controles

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --oj-typography-body-xs-font-size | 0.75rem | Declaraciones base del tema. El ejemplo original usa Arial como fuente alternativa, y el diseño de la tabla y del contenido se implementa en el código de la aplicación. |
| --oj-typography-body-sm-font-size | 0.859rem | Declaraciones base del tema. El ejemplo original usa Arial como fuente alternativa, y el diseño de la tabla y del contenido se implementa en el código de la aplicación. |
| --oj-typography-body-md-font-size | 1rem | Declaraciones base del tema. El ejemplo original usa Arial como fuente alternativa, y el diseño de la tabla y del contenido se implementa en el código de la aplicación. |
| --oj-typography-body-lg-font-size | 1.125rem | Declaraciones base del tema. El ejemplo original usa Arial como fuente alternativa, y el diseño de la tabla y del contenido se implementa en el código de la aplicación. |
| --oj-typography-body-xl-font-size | 1.25rem | Declaraciones base del tema. El ejemplo original usa Arial como fuente alternativa, y el diseño de la tabla y del contenido se implementa en el código de la aplicación. |
| --oj-typography-body-md-line-height | 1.25 | Declaraciones base del tema. El ejemplo original usa Arial como fuente alternativa, y el diseño de la tabla y del contenido se implementa en el código de la aplicación. |
| --oj-button-height | 2.75rem | Declaraciones base del tema. El ejemplo original usa Arial como fuente alternativa, y el diseño de la tabla y del contenido se implementa en el código de la aplicación. |
| --oj-button-border-radius | var(--oj-core-border-radius-md) | Declaraciones base del tema. El ejemplo original usa Arial como fuente alternativa, y el diseño de la tabla y del contenido se implementa en el código de la aplicación. |
### Límites de los estilos públicos

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| Global theme overrides | :root declarations after JET CSS | Una anulación en la raíz afecta a todos los elementos que usan esa variable pública. |
| Instance styling | A class scoped to the target component | Limite el alcance de una variable pública si solo necesita cambiar un componente nativo. |
| Redwood base | Tracks Oracle visual changes | Elija esta opción si su objetivo es reproducir el aspecto de Oracle; las actualizaciones pueden cambiar los valores heredados. |
| Stable base | Alternative for a distinct custom theme | No lo presente como idéntico a Redwood ni dé por sentado que todas las capacidades de inversión y escalado coinciden. |
| Private variables | --oj-private-* excluded | El ejemplo no basa su referencia pública en mecanismos internos privados. |
## Guía completa del sistema de diseño Oracle Redwood

Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real.

Orientación completa, un punto de partida para la implementación y enlaces al código fuente.

## Límites entre el sistema de diseño Oracle Redwood y las versiones de JET

### Identifique con precisión la capa de implementación

> Redwood abarca más que una biblioteca de componentes descargable. Esta guía usa los fundamentos públicos de CSS incluidos con Oracle JET 19.0.0, una referencia concreta que se puede inspeccionar. La vista previa es una hoja de revisión de existencias original de HTML/CSS que usa esos valores; no crea instancias de oj-table, oj-input-number ni de ningún otro elemento personalizado nativo de JET. La declaración sobre el entorno de ejecución es explícita para que nadie confunda los fundamentos visuales con un SDK completo para aplicaciones de Oracle.

- Fuente de referencia: CSS de Oracle JET 19 Redwood.

- Entorno de ejecución de la vista previa: HTML/CSS/JavaScript original en navegador nativo.

- Datos y reglas de validación: ejemplo local original.

### Mantenga por separado la adopción de aplicaciones de Oracle

Adoptar Redwood en un producto Oracle SaaS, configurar una aplicación JET y tomar como referencia un tema público son actividades distintas. El ejemplo no modifica ningún tenant, no se conecta a registros de inventario ni realiza una migración del producto. El documento local completo es útil para estudiar las reglas visuales y el modelo de estado, mientras que una aplicación JET real debe seguir la configuración de la versión del framework y la documentación de sus componentes nativos.

## Roles semánticos y valores de paleta del sistema de diseño Oracle Redwood

### Resuelve correctamente las declaraciones base

La referencia toma la primera declaración, o declaración base, de cada variable pública de la hoja de estilos fijada. Los ámbitos invertidos o de densidad que aparecen más adelante pueden redefinir el mismo nombre. Por eso, una extracción ingenua que tome la última coincidencia podría etiquetar un color de texto invertido como el color de texto claro predeterminado. La guía mantiene explícito el ámbito base y excluye los hooks --oj-private-* de la referencia publicada.

### Distingue los canales sin procesar de los valores de color

Las variables de paleta, como --oj-palette-brand-rgb-120, contienen tres canales RGB, mientras que los roles semánticos los envuelven con rgb() o rgba(). La acción original usa los canales de marca mediante rgb(), el texto usa core-text-color-primary y la superficie de la tarjeta usa core-bg-color-content. Copiar la cadena de canales sin procesar directamente en background-color produciría un valor no válido CSS, aunque los números parezcan plausibles.

## Espaciado, tipografía y densidad del sistema de diseño Oracle Redwood

### Usa la escala de fundamentos concreta

La secuencia pública core-spacing avanza en pasos de 4px, desde 1x hasta 12x. Los roles de borde pequeño, mediano, grande y extragrande son distintos, y la altura del botón es una variable de componente independiente. La hoja de trabajo usa estos valores reales cuando corresponde e identifica el encabezado de 32px, la transformación adaptable de la tabla y la medida exterior de 1120px como decisiones originales de composición.

### No mezcles valores específicos de cada densidad

En esta hoja de estilos fijada, el tamaño base de body-md es 1rem, con una altura de línea de 1.25; los selectores posteriores pueden exponer valores escalados en píxeles. La guía registra el valor base sin dar a entender que todos los contextos de Redwood deban usar un único tamaño calculado. El ejemplo del navegador usa Arial como fuente de reserva, sin afirmar que Oracle Sans esté cargada. Una aplicación JET nativa debe probar en conjunto la densidad, el tema y la plataforma que haya seleccionado.

## Estructura de hoja de trabajo inspirada en el sistema de diseño Oracle Redwood

### Haz comprensibles los datos y las acciones

Cada fila original nombra un material de estudio, describe su unidad, compara las existencias actuales con un mínimo y ofrece un campo para introducir una cantidad. Una etiqueta de estado de revisión indica si ese artículo se incluye en el borrador local. El resumen cuenta las unidades de todo el borrador, incluidas las filas ocultas por el filtro. Son registros ficticios de ejemplo, no pruebas de inventario ni recomendaciones de compra.

### Mantén estable la identidad de las filas al ordenar

La aplicación guarda las cantidades por ID de artículo, no por posición en la tabla. Por eso, ordenar por nombre o volver al orden original conserva los cambios. El filtro «Por debajo del stock mínimo» solo modifica la colección visible. Un arreglo posicional vinculado al orden de las filas renderizadas podría asignar la cantidad de un artículo a otro después de ordenar; el código proporcionado evita expresamente ese problema.

## Validación de cantidades inspirada en el sistema de diseño Oracle Redwood

### Rechaza los valores que incumplan la regla local indicada

El campo original para introducir cantidades acepta números enteros de 0 a 99. Los valores vacíos, negativos, fraccionarios o fuera de ese intervalo muestran un error en línea y desactivan la acción de revisión. El modelo del borrador conserva la última cantidad válida hasta que se sustituye por una edición válida. El error visible deja clara esa diferencia, y ningún valor no válido se incluye en el total revisado.

### Explica cuándo se descarta una edición no válida

Al cambiar el filtro o el orden, se reconstruyen las filas visibles a partir de los últimos valores válidos del borrador, por lo que se descarta cualquier edición no válida que no se haya terminado. Este es un límite deliberado del ejemplo local, no una garantía de validación nativa de JET. Una tabla editable de producción podría conservar los borradores no válidos en todas las vistas o impedir la navegación; ese comportamiento debe diseñarse y probarse con su propio modelo de estado.

## Revisión y restablecimiento inspirados en el sistema de diseño Oracle Redwood

### Describe una revisión local sin dar a entender que se envió

La acción «Revisar este borrador» muestra un recuento legible de unidades y artículos incluidos. Indica explícitamente que no se envió ningún pedido. La acción acepta un borrador válido con cero unidades porque el ejemplo no inventa una regla que exija una compra. Al editar una cantidad, se borra el mensaje de revisión anterior para que el borrador modificado no conserve una confirmación obsoleta.

### Ofrece una recuperación predecible

La acción «Restablecer cantidades» restaura las cantidades sugeridas originales y borra el mensaje de revisión. Conserva el filtro y el orden actuales y vuelve a dibujar esas filas a partir del modelo restablecido. Así, la recuperación es visible y no hace falta recargar la página. El ejemplo no tiene almacenamiento ni backend, por lo que al recargar también se restablecen los datos locales iniciales.

## Tabla adaptable inspirada en el sistema de diseño Oracle Redwood

### Conserva la jerarquía de la información en pantallas estrechas

En el diseño ancho, los datos se muestran en una tabla con encabezados de columna y nombres de artículos como encabezados de fila. Por debajo de 650px, las filas se convierten en bloques legibles y cada celda de datos muestra su etiqueta antes del valor. Los campos de entrada se mantienen dentro del ancho disponible y la descripción del artículo permanece junto a su nombre. La adaptación corresponde a la aplicación original CSS y no pretende describir el comportamiento adaptable de oj-table.

### Prueba los estados editados y filtrados

La comprobación en el navegador introduce una cantidad no válida, la corrige, ordena los artículos, filtra los que están por debajo del mínimo y revisa el total resultante antes de medir el diseño. Se comprobaron cuatro anchos, desde 1440px hasta 280px. Esto permite probar cambios reales de contenido y estado, no solo comprobar que exista un contenedor de tabla vacío.

## Implementación de referencia completa del sistema de diseño Oracle Redwood

### Ejecuta el documento completo proporcionado

El ejemplo HTML contiene las declaraciones de tokens públicos requeridas, los estilos originales, los registros de muestra y todos los controladores de eventos. Guárdalo como index.html y sirve el directorio; no faltan importaciones ni llamadas externas en tiempo de ejecución. Los valores de referencia están fijados en JET 19.0.0, aunque la implementación local no necesita el paquete JET JavaScript para ejecutarse.

1. Guarda el documento completo proporcionado como index.html.

2. Sirve su carpeta mediante HTTP local.

3. Prueba cantidades no válidas y su corrección.

4. Ordena y filtra; después, revisa y restablece el mismo borrador.

### Usa componentes nativos de JET mediante su propia configuración

Para una aplicación nativa, instala el paquete de Oracle JET correspondiente y sigue la configuración de su framework; después, utiliza los contratos versionados de los componentes oj-* y las variables públicas de estilo. No pegues una etiqueta oj-* en esta interpretación independiente suponiendo que se inicializará. La descripción general de estilos enlazada distingue entre la tematización de nivel raíz y las anulaciones específicas de componentes, y explica cuándo conviene más usar Redwood o Stable como base.

## Ejemplos de componentes del sistema de diseño Oracle Redwood

### index.html — hoja de trabajo original completa

Subconjunto completo de tokens públicos, HTML adaptable, validación, estado estable de las filas y comportamiento local de revisión y restablecimiento.

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

Referencia de código

- Esto no es oj-table ni oj-input-number.

- No hay ninguna aplicación de Oracle, servicio de inventario ni endpoint de pedidos conectado.

## Configuración del agente del sistema de diseño Oracle Redwood

### Punto de partida para la implementación

Ejecuta la interpretación original independiente. La adopción nativa de JET requiere una configuración de framework aparte, descrita en la documentación oficial enlazada.

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

### Una instrucción para tu proyecto

```
Implementa la hoja de trabajo original de revisión de existencias, inspirada en Redwood, proporcionada, usando variables base públicas verificadas de JET 19. Conserva la sintaxis de canales RGB, el estado válido de las cantidades asociado al ID del artículo, los límites de validación, la conservación al ordenar y filtrar, y las funciones locales de revisión y restablecimiento. No describas esta implementación para navegador como JET nativo ni como un servicio de Oracle.
```

## Fuentes y alcance del sistema de diseño Oracle Redwood

Una interpretación OpenDesign que utiliza variables públicas Redwood de Oracle JET 19. La vista previa está hecha con HTML/CSS/JavaScript sin procesar; no utiliza componentes nativos de JET ni un servicio de inventario de Oracle. La alternativa Arial se indica explícitamente.

- Descripción general de estilos de JET Ámbito de las variables públicas, Redwood frente a Stable y límites de los temas.

- CSS Redwood fijado Valores base reales usados en la referencia y el ejemplo.

- Documentación de Oracle JET Configuración del framework nativo y contexto de desarrollo.

- Adopción de Redwood Contexto independiente para la adopción en aplicaciones de Oracle.

## Recursos relacionados con el sistema de diseño Oracle Redwood

### Orange OUDS Web

Examina los tokens semánticos reales, los paquetes de temas y el comportamiento nativo de Offcanvas de Orange OUDS 1.4 mediante un estudio comparativo adaptable completo.

### Palantir Blueprint

Crea un espacio de trabajo de datos denso con Blueprint: tokens verificados de tipografía e intención, una tabla de conjuntos de datos seleccionable, un panel de revisión y el código fuente completo de React.

### Pega Bolt

Explora el sistema de contenido de Bolt con la marca Pega: tipografía fluida, espaciado horizontal y vertical por separado, y una composición de acordeón en Twig para una página editorial de recursos.


- [Referencia de implementación](https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-styling/CssVariablesOverview.html)
- [Fuente](https://cdn.jsdelivr.net/npm/@oracle/oraclejet@19.0.0/dist/css/redwood/oj-redwood.css)
- [Fuente](https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-styling/CssVariablesOverview.html)
- [Referencia de código](https://cdn.jsdelivr.net/npm/@oracle/oraclejet@19.0.0/dist/css/redwood/oj-redwood.css)
- [Descripción general de estilos de JET Ámbito de las variables públicas, Redwood frente a Stable y límites de los temas.](https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-styling/CssVariablesOverview.html)
- [CSS Redwood fijado Valores base reales usados en la referencia y el ejemplo.](https://cdn.jsdelivr.net/npm/@oracle/oraclejet@19.0.0/dist/css/redwood/oj-redwood.css)
- [Documentación de Oracle JET Configuración del framework nativo y contexto de desarrollo.](https://docs.oracle.com/en/middleware/developer-tools/jet/19/develop/index.html)
- [Adopción de Redwood Contexto independiente para la adopción en aplicaciones de Oracle.](https://docs.oracle.com/en/cloud/saas/readiness/redwood-adoption/)