83.3K+Baixar
Software empresarial · Novo recurso

Sistema de design Oracle Redwood.

Conheça a paleta, as funções semânticas, o espaçamento e os limites de densidade reais do Oracle JET 19 Redwood por meio de uma planilha original e completa para revisão de estoque.

Baixar OpenDesign Baixar DESIGN.md
Guia OpenDesign8 capítulos45 entradas de referênciaGuia de aplicação original
01

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.

Revise um rascunho local de materiaisAbrir exemplo completo
Implementação original no navegador, usando variáveis públicas reais do tema Redwood do JET 19; sem ambiente de execução nativo do JavaScript do JET. · Referência de implementação
02

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

Fonte
Nome / RegraValor / ConfiguraçãoUso
--oj-core-text-color-primaryrgb(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-secondaryrgba(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-disabledrgba(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-contentrgb(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-colorrgb(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-colorrgba(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-colorrgb(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

Fonte
Nome / RegraValor / ConfiguraçãoUso
--oj-palette-neutral-rgb-0255, 255, 255Os 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-10251, 249, 248Os 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-20245, 244, 242Os 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-19022, 21, 19Os 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-1200, 104, 140Os 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-20237, 246, 249Os 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-120179, 49, 31Os 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-20235, 248, 222Os 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-14053, 86, 23Os 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

Fonte
Nome / RegraValor / ConfiguraçãoUso
--oj-core-spacing-1x.25remEscala 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.5remEscala 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.75remEscala 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-4x1remEscala 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-5x1.25remEscala 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-6x1.5remEscala 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-7x1.75remEscala 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-8x2remEscala 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-9x2.25remEscala 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-10x2.5remEscala 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-11x2.75remEscala 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-12x3remEscala 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-sm2pxEscala 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.25remEscala 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.375remEscala 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.5remEscala 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

Fonte
Nome / RegraValor / ConfiguraçãoUso
--oj-typography-body-xs-font-size0.75remDeclaraçõ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-size0.859remDeclaraçõ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-size1remDeclaraçõ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-size1.125remDeclaraçõ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-size1.25remDeclaraçõ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-height1.25Declaraçõ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-height2.75remDeclaraçõ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-radiusvar(--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

Fonte
Nome / RegraValor / ConfiguraçãoUso
Global theme overrides:root declarations after JET CSSUma substituição na raiz afeta todos os consumidores dessa variável pública.
Instance stylingA class scoped to the target componentDefina o escopo de uma variável pública quando apenas um componente nativo precisar da alteração.
Redwood baseTracks Oracle visual changesEscolha essa opção se o objetivo for corresponder à aparência da Oracle; atualizações podem alterar os valores herdados.
Stable baseAlternative for a distinct custom themeNã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-* excludedO exemplo não baseia sua referência pública em mecanismos internos privados.
03

Guia completo do sistema de design Oracle Redwood

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

DESIGN-oracle-redwood.md

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

Baixar o guia

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.

Com base neste guia de OpenDesign
  • 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

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

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.

html
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Studio supplies worksheet</title><style>:root{--oj-palette-danger-rgb-10:255, 248, 247;--oj-palette-danger-rgb-20:255, 241, 239;--oj-palette-danger-rgb-30:255, 235, 232;--oj-palette-danger-rgb-40:255, 217, 211;--oj-palette-danger-rgb-50:255, 193, 184;--oj-palette-danger-rgb-60:255, 157, 144;--oj-palette-danger-rgb-70:255, 134, 117;--oj-palette-danger-rgb-80:254, 104, 84;--oj-palette-danger-rgb-90:236, 79, 58;--oj-palette-danger-rgb-100:214, 59, 37;--oj-palette-danger-rgb-110:195, 53, 34;--oj-palette-danger-rgb-120:179, 49, 31;--oj-palette-danger-rgb-130:170, 34, 34;--oj-palette-danger-rgb-140:143, 39, 25;--oj-palette-danger-rgb-150:124, 34, 22;--oj-palette-danger-rgb-160:102, 28, 18;--oj-palette-danger-rgb-170:86, 24, 15;--oj-palette-warning-rgb-10:254, 249, 242;--oj-palette-warning-rgb-20:253, 242, 229;--oj-palette-warning-rgb-30:252, 237, 220;--oj-palette-warning-rgb-40:249, 221, 188;--oj-palette-warning-rgb-50:246, 199, 146;--oj-palette-warning-rgb-60:240, 169, 87;--oj-palette-warning-rgb-70:235, 150, 50;--oj-palette-warning-rgb-80:225, 128, 18;--oj-palette-warning-rgb-90:198, 113, 14;--oj-palette-warning-rgb-100:172, 99, 12;--oj-palette-warning-rgb-110:156, 89, 11;--oj-palette-warning-rgb-120:143, 82, 10;--oj-palette-warning-rgb-130:129, 73, 9;--oj-palette-warning-rgb-140:114, 65, 8;--oj-palette-warning-rgb-150:99, 56, 7;--oj-palette-warning-rgb-160:81, 47, 6;--oj-palette-warning-rgb-170:69, 39, 5;--oj-palette-success-rgb-10:244, 252, 235;--oj-palette-success-rgb-20:235, 248, 222;--oj-palette-success-rgb-30:228, 245, 211;--oj-palette-success-rgb-40:207, 235, 179;--oj-palette-success-rgb-50:177, 221, 136;--oj-palette-success-rgb-60:138, 201, 79;--oj-palette-success-rgb-70:125, 186, 69;--oj-palette-success-rgb-80:111, 169, 57;--oj-palette-success-rgb-90:94, 148, 43;--oj-palette-success-rgb-100:80, 130, 35;--oj-palette-success-rgb-110:73, 118, 32;--oj-palette-success-rgb-120:67, 107, 29;--oj-palette-success-rgb-130:60, 96, 26;--oj-palette-success-rgb-140:53, 86, 23;--oj-palette-success-rgb-150:46, 73, 20;--oj-palette-success-rgb-160:38, 61, 16;--oj-palette-success-rgb-170:31, 51, 14;--oj-palette-info-rgb-10:246, 250, 252;--oj-palette-info-rgb-20:237, 246, 249;--oj-palette-info-rgb-30:228, 241, 247;--oj-palette-info-rgb-40:208, 229, 238;--oj-palette-info-rgb-50:180, 213, 225;--oj-palette-info-rgb-60:143, 191, 208;--oj-palette-info-rgb-70:121, 177, 198;--oj-palette-info-rgb-80:95, 162, 186;--oj-palette-info-rgb-90:65, 144, 172;--oj-palette-info-rgb-100:34, 126, 158;--oj-palette-info-rgb-110:14, 114, 151;--oj-palette-info-rgb-120:0, 104, 140;--oj-palette-info-rgb-130:2, 94, 126;--oj-palette-info-rgb-140:4, 83, 111;--oj-palette-info-rgb-150:6, 72, 95;--oj-palette-info-rgb-160:6, 60, 78;--oj-palette-info-rgb-170:5, 50, 66;--oj-palette-brand-rgb-10:246, 250, 252;--oj-palette-brand-rgb-20:237, 246, 249;--oj-palette-brand-rgb-30:228, 241, 247;--oj-palette-brand-rgb-40:208, 229, 238;--oj-palette-brand-rgb-50:180, 213, 225;--oj-palette-brand-rgb-60:143, 191, 208;--oj-palette-brand-rgb-70:121, 177, 198;--oj-palette-brand-rgb-80:95, 162, 186;--oj-palette-brand-rgb-90:65, 144, 172;--oj-palette-brand-rgb-100:34, 126, 158;--oj-palette-brand-rgb-110:14, 114, 151;--oj-palette-brand-rgb-120:0, 104, 140;--oj-palette-brand-rgb-130:2, 94, 126;--oj-palette-brand-rgb-140:4, 83, 111;--oj-palette-brand-rgb-150:6, 72, 95;--oj-palette-brand-rgb-160:6, 60, 78;--oj-palette-brand-rgb-170:5, 50, 66;--oj-palette-neutral-rgb-0:255, 255, 255;--oj-palette-neutral-rgb-10:251, 249, 248;--oj-palette-neutral-rgb-20:245, 244, 242;--oj-palette-neutral-rgb-30:241, 239, 237;--oj-palette-neutral-rgb-40:228, 225, 221;--oj-palette-neutral-rgb-50:212, 207, 202;--oj-palette-neutral-rgb-60:188, 182, 177;--oj-palette-neutral-rgb-70:174, 168, 162;--oj-palette-neutral-rgb-80:158, 152, 146;--oj-palette-neutral-rgb-90:139, 133, 128;--oj-palette-neutral-rgb-100:123, 117, 112;--oj-palette-neutral-rgb-110:111, 105, 100;--oj-palette-neutral-rgb-120:101, 95, 91;--oj-palette-neutral-rgb-130:92, 86, 81;--oj-palette-neutral-rgb-140:81, 76, 71;--oj-palette-neutral-rgb-150:71, 66, 62;--oj-palette-neutral-rgb-160:58, 54, 50;--oj-palette-neutral-rgb-170:49, 45, 42;--oj-palette-neutral-rgb-180:32, 30, 28;--oj-palette-neutral-rgb-190:22, 21, 19;--oj-palette-neutral-rgb-200:00, 00, 00;--oj-palette-dvt-rgb-1:36, 93, 99;--oj-palette-dvt-rgb-2:215, 121, 15;--oj-palette-dvt-rgb-3:49, 160, 156;--oj-palette-dvt-rgb-4:78, 65, 55;--oj-palette-dvt-rgb-5:105, 158, 97;--oj-palette-dvt-rgb-6:180, 114, 130;--oj-palette-dvt-rgb-7:131, 64, 30;--oj-palette-dvt-rgb-8:158, 127, 204;--oj-palette-dvt-rgb-9:168, 142, 0;--oj-palette-dvt-rgb-10:88, 49, 110;--oj-palette-dvt-rgb-11:89, 153, 181;--oj-palette-dvt-rgb-12:49, 122, 69;--oj-core-text-color-primary:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-text-color-secondary:rgba(var(--oj-palette-neutral-rgb-190), .70);--oj-core-text-color-disabled:rgba(var(--oj-palette-neutral-rgb-190), .4);--oj-core-text-color-brand:rgb(var(--oj-palette-brand-rgb-110));--oj-core-text-color-danger:rgb(var(--oj-palette-danger-rgb-120));--oj-core-text-color-warning:rgb(var(--oj-palette-warning-rgb-120));--oj-core-text-color-success:rgb(var(--oj-palette-success-rgb-120));--oj-core-bg-color-content:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-bg-color-hover:rgba(var(--oj-palette-neutral-rgb-190), .08);--oj-core-bg-color-active:rgba(var(--oj-palette-neutral-rgb-190), .16);--oj-core-bg-color-selected:rgb(var(--oj-palette-brand-rgb-30));--oj-core-border-color-selected:rgb(var(--oj-palette-brand-rgb-100));--oj-core-border-color-enabled:rgba(var(--oj-palette-neutral-rgb-190), 0.5);--oj-core-color-disabled-1:rgba(var(--oj-palette-neutral-rgb-190), 0.04);--oj-core-color-disabled-2:rgba(var(--oj-palette-neutral-rgb-190),.20);--oj-core-icon-size-lg:1.5rem;--oj-core-icon-size-sm:1rem;--oj-core-divider-color:rgba(var(--oj-palette-neutral-rgb-190),.12);--oj-core-divider-margin:0.5rem;--oj-core-neutral-1:rgb(var(--oj-palette-neutral-rgb-100));--oj-core-neutral-2:rgb(var(--oj-palette-neutral-rgb-110));--oj-core-neutral-3:rgb(var(--oj-palette-neutral-rgb-120));--oj-core-neutral-contrast:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-neutral-secondary-1:rgba(var(--oj-palette-neutral-rgb-190), 0.08);--oj-core-neutral-secondary-2:rgb(var(--oj-palette-neutral-rgb-20));--oj-core-neutral-secondary-3:rgb(var(--oj-palette-neutral-rgb-10));--oj-core-neutral-secondary-contrast:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-brand-1:rgb(var(--oj-palette-brand-rgb-100));--oj-core-brand-2:rgb(var(--oj-palette-brand-rgb-110));--oj-core-brand-3:rgb(var(--oj-palette-brand-rgb-120));--oj-core-brand-contrast:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-danger-1:rgb(var(--oj-palette-danger-rgb-120));--oj-core-danger-2:rgb(var(--oj-palette-danger-rgb-110));--oj-core-danger-3:rgb(var(--oj-palette-danger-rgb-120));--oj-core-danger-contrast:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-danger-secondary-1:rgba(var(--oj-palette-danger-rgb-60), 0.4);--oj-core-danger-secondary-2:rgb(var(--oj-palette-danger-rgb-20));--oj-core-danger-secondary-3:rgb(var(--oj-palette-danger-rgb-10));--oj-core-danger-secondary-contrast:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-warning-1:rgb(var(--oj-palette-warning-rgb-120));--oj-core-warning-2:rgb(var(--oj-palette-warning-rgb-110));--oj-core-warning-3:rgb(var(--oj-palette-warning-rgb-120));--oj-core-warning-contrast:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-warning-secondary-1:rgba(var(--oj-palette-warning-rgb-60), 0.4);--oj-core-warning-secondary-2:rgb(var(--oj-palette-warning-rgb-20));--oj-core-warning-secondary-3:rgb(var(--oj-palette-warning-rgb-10));--oj-core-warning-secondary-contrast:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-success-1:rgb(var(--oj-palette-success-rgb-120));--oj-core-success-2:rgb(var(--oj-palette-success-rgb-110));--oj-core-success-3:rgb(var(--oj-palette-success-rgb-120));--oj-core-success-contrast:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-success-secondary-1:rgba(var(--oj-palette-success-rgb-60), 0.4);--oj-core-success-secondary-2:rgb(var(--oj-palette-success-rgb-20));--oj-core-success-secondary-3:rgb(var(--oj-palette-success-rgb-10));--oj-core-success-secondary-contrast:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-info-1:rgb(var(--oj-palette-info-rgb-120));--oj-core-info-2:rgb(var(--oj-palette-info-rgb-110));--oj-core-info-3:rgb(var(--oj-palette-info-rgb-120));--oj-core-info-contrast:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-info-secondary-1:rgba(var(--oj-palette-info-rgb-60), 0.4);--oj-core-info-secondary-2:rgb(var(--oj-palette-info-rgb-20));--oj-core-info-secondary-3:rgb(var(--oj-palette-info-rgb-10));--oj-core-info-secondary-contrast:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-focus-border-color:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-cursor-clickable:pointer;--oj-core-drag-drop-color-1:rgb(var(--oj-palette-brand-rgb-40));--oj-core-drag-drop-color-2:rgb(var(--oj-palette-brand-rgb-100));--oj-core-drag-drop-line-color:rgb(var(--oj-palette-brand-rgb-100));--oj-core-touch-target-min-size:2.25rem;--oj-core-box-shadow-rgb:var(--oj-palette-neutral-rgb-200);--oj-core-box-shadow-xs:0px 1px 4px 0px rgba(var(--oj-core-box-shadow-rgb),.12);--oj-core-box-shadow-sm:0px 4px 8px 0px rgba(var(--oj-core-box-shadow-rgb),.16);--oj-core-box-shadow-md:0px 6px 12px 0px rgba(var(--oj-core-box-shadow-rgb),.2);--oj-core-box-shadow-lg:0px 8px 16px 0px rgba(var(--oj-core-box-shadow-rgb),0.24);--oj-core-box-shadow-xl:0px 12px 20px 0px rgba(var(--oj-core-box-shadow-rgb),0.28);--oj-core-dropdown-box-shadow:var(--oj-core-box-shadow-sm);--oj-core-scrim-color:rgba(var(--oj-palette-neutral-rgb-190), .4);--oj-core-spacing-1x:.25rem;--oj-core-spacing-2x:.5rem;--oj-core-spacing-3x:.75rem;--oj-core-spacing-4x:1rem;--oj-core-spacing-5x:1.25rem;--oj-core-spacing-6x:1.5rem;--oj-core-spacing-7x:1.75rem;--oj-core-spacing-8x:2rem;--oj-core-spacing-9x:2.25rem;--oj-core-spacing-10x:2.5rem;--oj-core-spacing-11x:2.75rem;--oj-core-spacing-12x:3rem;--oj-core-border-radius-sm:2px;--oj-core-border-radius-md:.25rem;--oj-core-border-radius-lg:.375rem;--oj-core-border-radius-xl:.5rem;--oj-core-z-index-popup:1000;--oj-core-z-index-dialog:1050;--oj-core-z-index-messages:2000;--oj-typography-heading-2xl-font-size:2.5rem;--oj-typography-heading-2xl-font-weight:800;--oj-typography-heading-2xl-line-height:1.3;--oj-typography-heading-xl-font-size:2.25rem;--oj-typography-heading-xl-font-weight:800;--oj-typography-heading-xl-line-height:1.222;--oj-typography-heading-lg-font-size:2rem;--oj-typography-heading-lg-font-weight:800;--oj-typography-heading-lg-line-height:1.25;--oj-typography-heading-md-font-size:1.75rem;--oj-typography-heading-md-font-weight:800;--oj-typography-heading-md-line-height:1.2857;--oj-typography-heading-sm-font-size:1.5rem;--oj-typography-heading-sm-font-weight:800;--oj-typography-heading-sm-line-height:1.3333;--oj-typography-heading-xs-font-size:1.25rem;--oj-typography-heading-xs-font-weight:800;--oj-typography-heading-xs-line-height:1.4;--oj-typography-subheading-2xl-font-size:2.25rem;--oj-typography-subheading-2xl-font-weight:bold;--oj-typography-subheading-2xl-line-height:1.2222;--oj-typography-subheading-xl-font-size:2rem;--oj-typography-subheading-xl-font-weight:bold;--oj-typography-subheading-xl-line-height:1.25;--oj-typography-subheading-lg-font-size:1.75rem;--oj-typography-subheading-lg-font-weight:bold;--oj-typography-subheading-lg-line-height:1.2857;--oj-typography-subheading-md-font-size:1.5rem;--oj-typography-subheading-md-font-weight:bold;--oj-typography-subheading-md-line-height:1.3333;--oj-typography-subheading-sm-font-size:1.25rem;--oj-typography-subheading-sm-font-weight:bold;--oj-typography-subheading-sm-line-height:1.4;--oj-typography-subheading-xs-font-size:1rem;--oj-typography-subheading-xs-font-weight:bold;--oj-typography-subheading-xs-line-height:1.5;--oj-typography-body-xl-font-size:1.25rem;--oj-typography-body-xl-line-height:1.4;--oj-typography-body-lg-font-size:1.125rem;--oj-typography-body-lg-line-height:1.3333;--oj-typography-body-md-font-size:1rem;--oj-typography-body-md-line-height:1.25;--oj-typography-body-sm-font-size:0.859rem;--oj-typography-body-sm-line-height:1.2;--oj-typography-body-xs-font-size:0.75rem;--oj-typography-body-xs-line-height:1.3333;--oj-typography-body-2xs-font-size:0.625rem;--oj-typography-body-2xs-line-height:1.2;--oj-body-bg-color:rgb(var(--oj-palette-neutral-rgb-10));--oj-button-height:2.75rem;--oj-button-border-radius:var(--oj-core-border-radius-md);}*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;font-size:16px;color:var(--oj-core-text-color-primary);background:var(--oj-body-bg-color)}main{max-width:1120px;padding:32px;margin:auto}header{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;flex-wrap:wrap}h1{font-size:32px;line-height:1.2;margin:12px 0 24px}.eyebrow{font-size:12px;letter-spacing:.08em;font-weight:700}.scope{font-size:14px;line-height:1.6;max-width:78ch;color:var(--oj-core-text-color-secondary)}.count{padding:16px 24px;border:1px solid var(--oj-core-divider-color);border-radius:var(--oj-core-border-radius-lg);background:var(--oj-core-bg-color-content);min-width:140px}.count strong{display:block;font-size:32px}.toolbar{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:24px 0}button,select,input{font:inherit}button{min-height:var(--oj-button-height);padding:8px 16px;border:1px solid var(--oj-core-divider-color);border-radius:var(--oj-button-border-radius);background:var(--oj-core-bg-color-content);color:var(--oj-core-text-color-primary);cursor:pointer}button.primary{background:rgb(var(--oj-palette-brand-rgb-120));color:white;border-color:transparent}button:disabled{opacity:.5;cursor:default}select{min-height:44px;border:1px solid var(--oj-core-divider-color);border-radius:4px;padding:8px;background:white;max-width:100%}.table-wrap{overflow:auto;background:var(--oj-core-bg-color-content);border:1px solid var(--oj-core-divider-color);border-radius:var(--oj-core-border-radius-lg)}table{width:100%;border-collapse:collapse;table-layout:fixed}th,td{text-align:left;padding:20px 24px;vertical-align:top;border-bottom:1px solid var(--oj-core-divider-color)}thead th{font-size:13px;background:rgb(var(--oj-palette-neutral-rgb-20))}th:first-child{width:36%}tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}td p,th p{font-size:13px;color:var(--oj-core-text-color-secondary);font-weight:400;margin:8px 0;line-height:1.5}input{width:88px;max-width:100%;padding:8px;border:1px solid var(--oj-core-divider-color);border-radius:4px;background:white;min-height:44px}.note{margin:24px 0;padding:24px;background:rgb(var(--oj-palette-info-rgb-20));border-left:4px solid rgb(var(--oj-palette-brand-rgb-120));line-height:1.6}.actions{display:flex;gap:16px;flex-wrap:wrap}.error{color:rgb(var(--oj-palette-danger-rgb-120));font-size:13px;line-height:1.5}.status{font-size:13px;padding:4px 8px;border-radius:4px;background:rgb(var(--oj-palette-neutral-rgb-20));display:inline-block}.status.ready{background:rgb(var(--oj-palette-success-rgb-20));color:rgb(var(--oj-palette-success-rgb-140))}:focus-visible{outline:2px solid var(--oj-core-focus-border-color);outline-offset:3px}[hidden]{display:none!important}@media(max-width:650px){main{padding:16px}table,tbody,tr,td,th{display:block}table{table-layout:auto}thead{display:none}th:first-child{width:auto}tbody tr{padding:16px;border-bottom:1px solid var(--oj-core-divider-color)}tbody tr:last-child{border-bottom:0}td,th{padding:8px;border:0!important}td:before{content:attr(data-label);display:block;font-size:12px;font-weight:700;margin-bottom:8px}.toolbar label{display:flex;flex-wrap:wrap;gap:8px}}
</style></head><body><main><header><div><p class="eyebrow">REDWOOD FOUNDATIONS / ORIGINAL WORKSHEET</p><h1>Prepare the studio supplies</h1><p class="scope">An original stock-review worksheet using public Oracle JET 19 Redwood variables. This is plain HTML/CSS and JavaScript, not a native JET component runtime or an Oracle inventory service. Arial is an explicit font fallback.</p></div><div class="count"><strong id="total">0</strong>units in the local draft</div></header><div class="toolbar"><label for="filter">Show <select id="filter"><option value="all">All sample items</option><option value="low">Below minimum stock</option></select></label><button id="sort">Sort by item name</button></div><div class="table-wrap"><table><thead><tr><th scope="col">Item</th><th scope="col">On hand / minimum</th><th scope="col">Add to draft</th><th scope="col">Review state</th></tr></thead><tbody id="rows"></tbody></table></div><p id="empty" hidden>No items match this view. <button id="show-all">Show all items</button></p><p class="note">Change a quantity to build a local replenishment draft. A draft may contain zero units. Nothing is ordered, approved or sent from this example.</p><div class="actions"><button class="primary" id="keep">Review this draft</button><button id="reset">Reset quantities</button></div><p id="message" role="status"></p></main><script>const initial=[{id:'paper',name:'Sketch paper',detail:'A4 recycled sheets',stock:18,min:30},{id:'markers',name:'Fine-tip markers',detail:'Black ink / single pens',stock:12,min:10},{id:'clips',name:'Binder clips',detail:'Medium / single clips',stock:6,min:20}];let amounts={paper:12,markers:0,clips:14},ascending=false;const tbody=document.querySelector('#rows');function visible(){let a=initial.filter(x=>document.querySelector('#filter').value!=='low'||x.stock<x.min);return ascending?[...a].sort((a,b)=>a.name.localeCompare(b.name)):a;}function count(){let inputs=[...document.querySelectorAll('input')];let bad=inputs.some(x=>!x.checkValidity()||x.value==='');document.querySelector('#keep').disabled=bad;document.querySelector('#total').textContent=Object.values(amounts).reduce((a,b)=>a+b,0);return bad;}function render(){tbody.innerHTML=visible().map(x=>`<tr><th scope="row">${x.name}<p>${x.detail}</p></th><td data-label="On hand / minimum">${x.stock} / ${x.min}<p>${x.stock<x.min?'Below minimum':'Above minimum'}</p></td><td data-label="Add to draft"><input id="qty-${x.id}" aria-label="Quantity for ${x.name}" type="number" min="0" max="99" step="1" value="${amounts[x.id]}" data-id="${x.id}"><p class="error" hidden>Use a whole number from 0 to 99.</p></td><td data-label="Review state"><span class="status ${amounts[x.id]?'ready':''}">${amounts[x.id]?'In draft':'No addition'}</span></td></tr>`).join('');tbody.querySelectorAll('input').forEach(input=>input.addEventListener('input',()=>{let valid=input.checkValidity()&&input.value!=='';input.setAttribute('aria-invalid',String(!valid));input.nextElementSibling.hidden=valid;document.querySelector('#message').textContent='';if(valid){amounts[input.dataset.id]=Number(input.value);const status=input.closest('tr').querySelector('.status');status.textContent=Number(input.value)?'In draft':'No addition';status.classList.toggle('ready',Number(input.value)>0)}count()}));document.querySelector('#empty').hidden=visible().length>0;count()}document.querySelector('#filter').addEventListener('change',render);document.querySelector('#sort').addEventListener('click',e=>{ascending=!ascending;e.currentTarget.textContent=ascending?'Use original order':'Sort by item name';render()});document.querySelector('#show-all').addEventListener('click',()=>{document.querySelector('#filter').value='all';render()});document.querySelector('#keep').addEventListener('click',()=>{if(!count())document.querySelector('#message').textContent='Reviewed '+Object.values(amounts).reduce((a,b)=>a+b,0)+' units across '+Object.values(amounts).filter(x=>x>0).length+' items in this local draft. No order was sent.'});document.querySelector('#reset').addEventListener('click',()=>{amounts={paper:12,markers:0,clips:14};document.querySelector('#message').textContent='';render()});render();</script></body></html>

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.
04

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.

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

Um prompt para seu projeto

Prompt para agente de IA
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.
05

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.