# Sistema de design Oracle Redwood

## Prévia da interface do sistema de design Oracle Redwood

Edite quantidades, confira a validação, ordene e filtre sem perder o rascunho válido.

## Referência de design do sistema sistema de design Oracle Redwood

Declarações públicas básicas da folha de estilos Redwood do JET 19.0.0 fixada. O comportamento da planilha e o layout originais estão identificados separadamente; variáveis privadas e substituições invertidas posteriores não fazem parte da referência básica.

### Papéis semânticos básicos do Redwood

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --oj-core-text-color-primary | rgb(var(--oj-palette-neutral-rgb-190)) | Primeiras declarações/básicas do Redwood do JET 19. Os seletores de inversão e densidade podem substituir valores; não reduza todas as declarações a uma consulta pelo último valor. |
| --oj-core-text-color-secondary | rgba(var(--oj-palette-neutral-rgb-190), .70) | Primeiras declarações/básicas do Redwood do JET 19. Os seletores de inversão e densidade podem substituir valores; não reduza todas as declarações a uma consulta pelo último valor. |
| --oj-core-text-color-disabled | rgba(var(--oj-palette-neutral-rgb-190), .4) | Primeiras declarações/básicas do Redwood do JET 19. Os seletores de inversão e densidade podem substituir valores; não reduza todas as declarações a uma consulta pelo último valor. |
| --oj-core-bg-color-content | rgb(var(--oj-palette-neutral-rgb-0)) | Primeiras declarações/básicas do Redwood do JET 19. Os seletores de inversão e densidade podem substituir valores; não reduza todas as declarações a uma consulta pelo último valor. |
| --oj-body-bg-color | rgb(var(--oj-palette-neutral-rgb-10)) | Primeiras declarações/básicas do Redwood do JET 19. Os seletores de inversão e densidade podem substituir valores; não reduza todas as declarações a uma consulta pelo último valor. |
| --oj-core-divider-color | rgba(var(--oj-palette-neutral-rgb-190),.12) | Primeiras declarações/básicas do Redwood do JET 19. Os seletores de inversão e densidade podem substituir valores; não reduza todas as declarações a uma consulta pelo último valor. |
| --oj-core-focus-border-color | rgb(var(--oj-palette-neutral-rgb-190)) | Primeiras declarações/básicas do Redwood do JET 19. Os seletores de inversão e densidade podem substituir valores; não reduza todas as declarações a uma consulta pelo último valor. |
### Valores da paleta usados na planilha

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --oj-palette-neutral-rgb-0 | 255, 255, 255 | Os valores dos canais RGB brutos são usados dentro de rgb() ou rgba(). Por si só, eles não são valores de cor completos de CSS. |
| --oj-palette-neutral-rgb-10 | 251, 249, 248 | Os valores dos canais RGB brutos são usados dentro de rgb() ou rgba(). Por si só, eles não são valores de cor completos de CSS. |
| --oj-palette-neutral-rgb-20 | 245, 244, 242 | Os valores dos canais RGB brutos são usados dentro de rgb() ou rgba(). Por si só, eles não são valores de cor completos de CSS. |
| --oj-palette-neutral-rgb-190 | 22, 21, 19 | Os valores dos canais RGB brutos são usados dentro de rgb() ou rgba(). Por si só, eles não são valores de cor completos de CSS. |
| --oj-palette-brand-rgb-120 | 0, 104, 140 | Os valores dos canais RGB brutos são usados dentro de rgb() ou rgba(). Por si só, eles não são valores de cor completos de CSS. |
| --oj-palette-info-rgb-20 | 237, 246, 249 | Os valores dos canais RGB brutos são usados dentro de rgb() ou rgba(). Por si só, eles não são valores de cor completos de CSS. |
| --oj-palette-danger-rgb-120 | 179, 49, 31 | Os valores dos canais RGB brutos são usados dentro de rgb() ou rgba(). Por si só, eles não são valores de cor completos de CSS. |
| --oj-palette-success-rgb-20 | 235, 248, 222 | Os valores dos canais RGB brutos são usados dentro de rgb() ou rgba(). Por si só, eles não são valores de cor completos de CSS. |
| --oj-palette-success-rgb-140 | 53, 86, 23 | Os valores dos canais RGB brutos são usados dentro de rgb() ou rgba(). Por si só, eles não são valores de cor completos de CSS. |
### Espaçamento e formas

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --oj-core-spacing-1x | .25rem | Escala de fundamentos publicada. Os controles nativos de HTML da planilha usam valores selecionados, sem alegar reproduzir o comportamento dos componentes do JET. |
| --oj-core-spacing-2x | .5rem | Escala de fundamentos publicada. Os controles nativos de HTML da planilha usam valores selecionados, sem alegar reproduzir o comportamento dos componentes do JET. |
| --oj-core-spacing-3x | .75rem | Escala de fundamentos publicada. Os controles nativos de HTML da planilha usam valores selecionados, sem alegar reproduzir o comportamento dos componentes do JET. |
| --oj-core-spacing-4x | 1rem | Escala de fundamentos publicada. Os controles nativos de HTML da planilha usam valores selecionados, sem alegar reproduzir o comportamento dos componentes do JET. |
| --oj-core-spacing-5x | 1.25rem | Escala de fundamentos publicada. Os controles nativos de HTML da planilha usam valores selecionados, sem alegar reproduzir o comportamento dos componentes do JET. |
| --oj-core-spacing-6x | 1.5rem | Escala de fundamentos publicada. Os controles nativos de HTML da planilha usam valores selecionados, sem alegar reproduzir o comportamento dos componentes do JET. |
| --oj-core-spacing-7x | 1.75rem | Escala de fundamentos publicada. Os controles nativos de HTML da planilha usam valores selecionados, sem alegar reproduzir o comportamento dos componentes do JET. |
| --oj-core-spacing-8x | 2rem | Escala de fundamentos publicada. Os controles nativos de HTML da planilha usam valores selecionados, sem alegar reproduzir o comportamento dos componentes do JET. |
| --oj-core-spacing-9x | 2.25rem | Escala de fundamentos publicada. Os controles nativos de HTML da planilha usam valores selecionados, sem alegar reproduzir o comportamento dos componentes do JET. |
| --oj-core-spacing-10x | 2.5rem | Escala de fundamentos publicada. Os controles nativos de HTML da planilha usam valores selecionados, sem alegar reproduzir o comportamento dos componentes do JET. |
| --oj-core-spacing-11x | 2.75rem | Escala de fundamentos publicada. Os controles nativos de HTML da planilha usam valores selecionados, sem alegar reproduzir o comportamento dos componentes do JET. |
| --oj-core-spacing-12x | 3rem | Escala de fundamentos publicada. Os controles nativos de HTML da planilha usam valores selecionados, sem alegar reproduzir o comportamento dos componentes do JET. |
| --oj-core-border-radius-sm | 2px | Escala de fundamentos publicada. Os controles nativos de HTML da planilha usam valores selecionados, sem alegar reproduzir o comportamento dos componentes do JET. |
| --oj-core-border-radius-md | .25rem | Escala de fundamentos publicada. Os controles nativos de HTML da planilha usam valores selecionados, sem alegar reproduzir o comportamento dos componentes do JET. |
| --oj-core-border-radius-lg | .375rem | Escala de fundamentos publicada. Os controles nativos de HTML da planilha usam valores selecionados, sem alegar reproduzir o comportamento dos componentes do JET. |
| --oj-core-border-radius-xl | .5rem | Escala de fundamentos publicada. Os controles nativos de HTML da planilha usam valores selecionados, sem alegar reproduzir o comportamento dos componentes do JET. |
### Tipografia do corpo e dimensões dos controles

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --oj-typography-body-xs-font-size | 0.75rem | Declarações do tema básico. O exemplo original usa Arial como fonte alternativa, e o layout da tabela e do conteúdo é código da aplicação. |
| --oj-typography-body-sm-font-size | 0.859rem | Declarações do tema básico. O exemplo original usa Arial como fonte alternativa, e o layout da tabela e do conteúdo é código da aplicação. |
| --oj-typography-body-md-font-size | 1rem | Declarações do tema básico. O exemplo original usa Arial como fonte alternativa, e o layout da tabela e do conteúdo é código da aplicação. |
| --oj-typography-body-lg-font-size | 1.125rem | Declarações do tema básico. O exemplo original usa Arial como fonte alternativa, e o layout da tabela e do conteúdo é código da aplicação. |
| --oj-typography-body-xl-font-size | 1.25rem | Declarações do tema básico. O exemplo original usa Arial como fonte alternativa, e o layout da tabela e do conteúdo é código da aplicação. |
| --oj-typography-body-md-line-height | 1.25 | Declarações do tema básico. O exemplo original usa Arial como fonte alternativa, e o layout da tabela e do conteúdo é código da aplicação. |
| --oj-button-height | 2.75rem | Declarações do tema básico. O exemplo original usa Arial como fonte alternativa, e o layout da tabela e do conteúdo é código da aplicação. |
| --oj-button-border-radius | var(--oj-core-border-radius-md) | Declarações do tema básico. O exemplo original usa Arial como fonte alternativa, e o layout da tabela e do conteúdo é código da aplicação. |
### Limites da estilização pública

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| Global theme overrides | :root declarations after JET CSS | Uma substituição na raiz afeta todos os consumidores dessa variável pública. |
| Instance styling | A class scoped to the target component | Defina o escopo de uma variável pública quando apenas um componente nativo precisar da alteração. |
| Redwood base | Tracks Oracle visual changes | Escolha essa opção se o objetivo for corresponder à aparência da Oracle; atualizações podem alterar os valores herdados. |
| Stable base | Alternative for a distinct custom theme | Não apresente isso como idêntico ao Redwood nem suponha que todos os recursos de inversão e escala sejam equivalentes. |
| Private variables | --oj-private-* excluded | O exemplo não baseia sua referência pública em mecanismos internos privados. |
## Guia completo do sistema de design Oracle Redwood

Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real.

Orientações completas, um ponto de partida para a implementação e links para o código-fonte.

## Sistema de design Oracle Redwood e limites de versões do JET

### Identifique com precisão a camada de implementação

> Redwood vai além de uma única biblioteca de componentes para download. Este guia usa os fundamentos públicos de CSS distribuídos com o Oracle JET 19.0.0, que oferecem uma referência concreta e inspecionável. A prévia é uma planilha original de revisão de estoque em HTML/CSS que utiliza esses valores; ela não instancia oj-table, oj-input-number nem qualquer outro elemento personalizado nativo do JET. A descrição do ambiente de execução é explícita para que não se confunda os fundamentos visuais com um SDK completo para aplicações Oracle.

- Fonte de referência: CSS do Oracle JET 19 Redwood.

- Ambiente de execução da prévia: HTML/CSS/JavaScript original, executado no navegador.

- Dados e regras de validação: exemplo local original.

### Mantenha separado o uso em aplicações Oracle

Adotar o Redwood em um produto Oracle SaaS, configurar uma aplicação JET e usar uma referência pública de tema são atividades diferentes. O exemplo não altera um locatário, não se conecta a registros de estoque nem realiza uma migração de produto. O documento local completo é útil para estudar as regras visuais e o modelo de estado; uma aplicação JET real deve seguir a configuração versionada do framework e a documentação dos componentes nativos.

## Oracle Redwood Papéis semânticos e valores da paleta do sistema de design

### Interprete corretamente as declarações básicas

A referência usa a primeira declaração/básica de cada variável pública da folha de estilos fixada. Escopos posteriores de inversão ou densidade podem redefinir o mesmo nome. Uma extração ingênua da última ocorrência, portanto, classificaria um primeiro plano invertido como a cor de texto clara padrão. O guia explicita o escopo básico e exclui os mecanismos --oj-private-* da referência publicada.

### Diferencie os canais brutos dos valores de cor

Variáveis de paleta como --oj-palette-brand-rgb-120 contêm três canais RGB, enquanto os papéis semânticos os envolvem com rgb() ou rgba(). A ação original usa os canais da marca com rgb(), o texto usa core-text-color-primary e a superfície do cartão usa core-bg-color-content. Copiar a sequência de canais diretamente para background-color seria inválido CSS, embora os números pareçam plausíveis.

## Espaçamento, tipografia e densidade do sistema de design Oracle Redwood

### Use a escala concreta de fundamentos

A sequência pública de core-spacing avança em incrementos de 4px, de 1x a 12x. Os papéis de borda pequeno, médio, grande e extragrande são distintos, e a altura do botão é uma variável de componente separada. Quando apropriado, a planilha usa esses valores reais e identifica o cabeçalho de 32px, a adaptação responsiva da tabela e a dimensão externa de 1120px como decisões originais de composição.

### Não misture valores específicos de densidade

O tamanho base body-md é 1rem, com uma altura de linha de 1.25 nesta versão fixada da folha de estilos; seletores posteriores podem expor valores em pixels após o dimensionamento. O guia registra o valor base sem sugerir que todo contexto Redwood deva usar o mesmo tamanho calculado. O exemplo no navegador usa Arial como fonte alternativa, sem afirmar que Oracle Sans está carregada. Um aplicativo JET nativo deve testar em conjunto a densidade, o tema e a plataforma selecionados.

## Estrutura da planilha inspirada no sistema de design Oracle Redwood

### Torne os dados e as ações compreensíveis

Cada linha original identifica um material de estúdio, descreve sua unidade, compara o estoque atual com o mínimo e oferece um campo de quantidade. Um rótulo de status da revisão indica novamente se o item faz parte do rascunho local. O resumo contabiliza as unidades de todo o rascunho, inclusive as linhas ocultas pelo filtro. Esses registros fictícios são apenas exemplos, não representam dados de estoque nem recomendações de compra.

### Mantenha a identidade das linhas estável durante a ordenação

O aplicativo armazena as quantidades pelo ID do item, não pela posição na tabela. Assim, a ordenação por nome ou a restauração da ordem original preserva as edições. Filtrar por Estoque abaixo do mínimo altera apenas a coleção visível. Um array posicional vinculado à ordem das linhas renderizadas poderia atribuir a quantidade de um item a outro após a ordenação; o código fornecido evita explicitamente esse problema.

## Validação de quantidades inspirada no sistema de design Oracle Redwood

### Rejeite valores fora da regra local especificada

O campo de quantidade original aceita números inteiros de zero a 99. Valores vazios, negativos, fracionários ou fora desse intervalo exibem um erro em linha e desabilitam a ação de revisão. O modelo do rascunho mantém a última quantidade válida até que uma edição válida a substitua. O erro visível deixa clara essa diferença, e nenhum valor inválido é incluído no total revisado.

### Explique quando uma edição inválida é descartada

Alterar o filtro ou a ordenação recria as linhas visíveis usando os últimos valores válidos do rascunho; assim, uma edição inválida ainda não concluída é descartada. Esse é um limite deliberado deste exemplo local, não uma garantia de validação nativa do JET. Uma tabela editável de produção poderia preservar rascunhos inválidos em todas as visualizações ou bloquear a navegação; esse comportamento deve ser projetado e testado no próprio modelo de estado.

## Revisão e redefinição inspiradas no sistema de design Oracle Redwood

### Descreva uma revisão local sem dar a entender que os dados serão enviados

Revisar este rascunho exibe uma contagem clara de unidades e itens incluídos. A mensagem informa explicitamente que nenhum pedido foi enviado. A ação aceita um rascunho válido com zero unidades porque o exemplo não inventa uma regra de compra obrigatória. Ao editar uma quantidade, a mensagem da revisão anterior é apagada para que um rascunho alterado não mantenha uma confirmação desatualizada.

### Ofereça uma recuperação previsível

Redefinir quantidades restaura as adições sugeridas originalmente e apaga a mensagem da revisão. O filtro e a ordenação atuais são mantidos, e as linhas são redesenhadas com base no modelo redefinido. Isso torna a recuperação visível sem recarregar a página. O exemplo não tem armazenamento nem backend; por isso, recarregar a página também restaura os dados locais iniciais.

## Tabela responsiva inspirada no sistema de design Oracle Redwood

### Mantenha a hierarquia das informações em telas estreitas

O layout amplo usa uma tabela com cabeçalhos de coluna e nomes de itens como cabeçalhos de linha. Abaixo de 650px, as linhas se transformam em blocos legíveis, e cada célula de dados exibe seu rótulo antes do valor. Os campos permanecem dentro do espaço disponível, e a descrição continua associada ao nome do item. Essa adaptação é uma implementação original do aplicativo CSS, não uma afirmação sobre o comportamento responsivo de oj-table.

### Teste estados editados e filtrados

A verificação no navegador insere uma quantidade inválida, corrige o valor, ordena os itens, filtra as linhas abaixo do estoque mínimo e revisa o total resultante antes de medir o layout. Foram verificadas quatro larguras, de 1440px a 280px. O teste verifica mudanças reais de conteúdo e estado, não apenas a presença de um contêiner de tabela vazio.

## Implementação de referência completa do sistema de design Oracle Redwood

### Execute o documento completo fornecido

O exemplo HTML contém as declarações necessárias de tokens públicos, estilos originais, registros de exemplo e todos os manipuladores de eventos. Salve-o como index.html e disponibilize o diretório; não há imports ausentes nem chamadas externas em tempo de execução. Os valores de referência são fixados para o JET 19.0.0, embora a implementação local não precise do pacote JET JavaScript para funcionar.

1. Salve o documento completo fornecido como index.html.

2. Disponibilize a pasta por HTTP local.

3. Teste quantidades inválidas e sua correção.

4. Ordene e filtre; depois, revise e redefina o mesmo rascunho.

### Use componentes JET nativos seguindo a configuração própria deles

Para um aplicativo nativo, instale o pacote Oracle JET correspondente e siga a configuração para seu framework; depois, use os contratos de componentes oj-* versionados e as variáveis públicas de estilo. Não cole uma tag oj-* nesta interpretação independente esperando que ela seja inicializada. A visão geral de estilos vinculada distingue a aplicação de temas no nível raiz das substituições no escopo do componente e explica quando Redwood ou Stable são bases mais adequadas.

## Exemplos de componentes do sistema de design Oracle Redwood

### index.html — planilha original completa

Conjunto de tokens públicos, HTML responsivo, validação, estado estável das linhas e comportamento local de revisão e redefinição.

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

Referência de código

- Isto não é oj-table nem oj-input-number.

- Não há conexão com aplicativos Oracle, serviços de estoque ou endpoints de pedidos.

## Configuração do agente de IA do sistema de design Oracle Redwood

### Ponto de partida para implementação

Executa a interpretação independente original. A adoção do JET nativo requer uma configuração separada do framework, descrita na documentação oficial vinculada.

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

### Um prompt para seu projeto

```
Implemente a planilha original de revisão de estoque inspirada em Redwood, usando variáveis públicas base verificadas do JET 19. Preserve a sintaxe dos canais RGB, o estado das quantidades válidas identificado pelo ID do item, os limites de validação, a preservação de filtros e ordenações, a revisão somente local e a redefinição. Não descreva esta implementação para navegador como JET nativo nem como serviço Oracle.
```

## Fontes e escopo do sistema de design Oracle Redwood

Uma interpretação OpenDesign que usa variáveis públicas Redwood do Oracle JET 19. A prévia usa HTML/CSS/JavaScript sem frameworks, não componentes JET nativos nem um serviço de estoque Oracle. O uso de Arial como fonte alternativa é explícito.

- Visão geral dos estilos do JET Escopo das variáveis públicas, Redwood versus Stable e limites dos temas.

- CSS Redwood fixado Valores base reais usados na referência e no exemplo.

- Documentação do Oracle JET Configuração do framework nativo e contexto de desenvolvimento.

- Adoção do Redwood Contexto separado para a adoção em aplicativos Oracle.

## Recursos relacionados ao sistema de design Oracle Redwood

### Orange OUDS Web

Inspecione os tokens semânticos reais, os pacotes de tema e o comportamento nativo de Offcanvas do Orange OUDS 1.4 em um estudo comparativo responsivo completo.

### Palantir Blueprint

Crie um espaço de trabalho de dados denso com Blueprint: tokens verificados de tipografia e intenção, uma tabela de conjuntos de dados selecionáveis, um painel de revisão e o código-fonte completo de React.

### Pega Bolt

Explore o sistema de conteúdo da Bolt com a identidade da Pega: tipografia fluida, espaçamentos horizontal e vertical separados e uma composição de acordeão Twig para uma página editorial de recursos.


- [Referência de implementação](https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-styling/CssVariablesOverview.html)
- [Fonte](https://cdn.jsdelivr.net/npm/@oracle/oraclejet@19.0.0/dist/css/redwood/oj-redwood.css)
- [Fonte](https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-styling/CssVariablesOverview.html)
- [Referência de código](https://cdn.jsdelivr.net/npm/@oracle/oraclejet@19.0.0/dist/css/redwood/oj-redwood.css)
- [Visão geral dos estilos do JET Escopo das variáveis públicas, Redwood versus Stable e limites dos temas.](https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-styling/CssVariablesOverview.html)
- [CSS Redwood fixado Valores base reais usados na referência e no exemplo.](https://cdn.jsdelivr.net/npm/@oracle/oraclejet@19.0.0/dist/css/redwood/oj-redwood.css)
- [Documentação do Oracle JET Configuração do framework nativo e contexto de desenvolvimento.](https://docs.oracle.com/en/middleware/developer-tools/jet/19/develop/index.html)
- [Adoção do Redwood Contexto separado para a adoção em aplicativos Oracle.](https://docs.oracle.com/en/cloud/saas/readiness/redwood-adoption/)