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.
As declarações iniciais/claras da predefinição Orange 1.4. A aparência escura resolve seus próprios valores por meio de data-bs-theme, em vez de reutilizar esta tabela como cores literais.
--bs-color-action-selected
#f15e00
As declarações iniciais/claras da predefinição Orange 1.4. A aparência escura resolve seus próprios valores por meio de data-bs-theme, em vez de reutilizar esta tabela como cores literais.
--bs-color-action-hover
rgba(0, 0, 0, 0.68)
As declarações iniciais/claras da predefinição Orange 1.4. A aparência escura resolve seus próprios valores por meio de data-bs-theme, em vez de reutilizar esta tabela como cores literais.
--bs-color-action-pressed
#f15e00
As declarações iniciais/claras da predefinição Orange 1.4. A aparência escura resolve seus próprios valores por meio de data-bs-theme, em vez de reutilizar esta tabela como cores literais.
--bs-color-bg-primary
#fff
As declarações iniciais/claras da predefinição Orange 1.4. A aparência escura resolve seus próprios valores por meio de data-bs-theme, em vez de reutilizar esta tabela como cores literais.
--bs-color-bg-secondary
#f4f4f4
As declarações iniciais/claras da predefinição Orange 1.4. A aparência escura resolve seus próprios valores por meio de data-bs-theme, em vez de reutilizar esta tabela como cores literais.
--bs-color-border-default
rgba(0, 0, 0, 0.2)
As declarações iniciais/claras da predefinição Orange 1.4. A aparência escura resolve seus próprios valores por meio de data-bs-theme, em vez de reutilizar esta tabela como cores literais.
--bs-color-always-black
#000
As declarações iniciais/claras da predefinição Orange 1.4. A aparência escura resolve seus próprios valores por meio de data-bs-theme, em vez de reutilizar esta tabela como cores literais.
--bs-color-always-white
#fff
As declarações iniciais/claras da predefinição Orange 1.4. A aparência escura resolve seus próprios valores por meio de data-bs-theme, em vez de reutilizar esta tabela como cores literais.
Declarações de fontes e tipografia publicadas. O estudo incorporado usa explicitamente Arial como alternativa, e não os arquivos da fonte de marca HelvNeueOrange.
--bs-font-size-display-large
2.5rem
Declarações de fontes e tipografia publicadas. O estudo incorporado usa explicitamente Arial como alternativa, e não os arquivos da fonte de marca HelvNeueOrange.
--bs-font-size-heading-large
1.5rem
Declarações de fontes e tipografia publicadas. O estudo incorporado usa explicitamente Arial como alternativa, e não os arquivos da fonte de marca HelvNeueOrange.
--bs-font-size-body-large
1rem
Declarações de fontes e tipografia publicadas. O estudo incorporado usa explicitamente Arial como alternativa, e não os arquivos da fonte de marca HelvNeueOrange.
--bs-font-size-body-medium
0.875rem
Declarações de fontes e tipografia publicadas. O estudo incorporado usa explicitamente Arial como alternativa, e não os arquivos da fonte de marca HelvNeueOrange.
--bs-font-size-body-small
0.75rem
Declarações de fontes e tipografia publicadas. O estudo incorporado usa explicitamente Arial como alternativa, e não os arquivos da fonte de marca HelvNeueOrange.
--bs-font-line-height-body-large
1.5
Declarações de fontes e tipografia publicadas. O estudo incorporado usa explicitamente Arial como alternativa, e não os arquivos da fonte de marca HelvNeueOrange.
--bs-font-line-height-body-medium
1.4285714286
Declarações de fontes e tipografia publicadas. O estudo incorporado usa explicitamente Arial como alternativa, e não os arquivos da fonte de marca HelvNeueOrange.
Padrões nativos do componente. O drawer original substitui a largura por 440px, enquanto a regra nativa de largura máxima o mantém dentro da janela de visualização.
--bs-offcanvas-width
400px
Padrões nativos do componente. O drawer original substitui a largura por 440px, enquanto a regra nativa de largura máxima o mantém dentro da janela de visualização.
--bs-offcanvas-height
30vh
Padrões nativos do componente. O drawer original substitui a largura por 440px, enquanto a regra nativa de largura máxima o mantém dentro da janela de visualização.
--bs-offcanvas-transition
transform 0.3s ease-in-out
Padrões nativos do componente. O drawer original substitui a largura por 440px, enquanto a regra nativa de largura máxima o mantém dentro da janela de visualização.
Pacote OUDS Orange e estrutura do tema do sistema de design Orange OUDS Web
Instale juntos os pacotes common e Orange
O OUDS Web 1.4.0 separa o comportamento compartilhado do tema de marca. O exemplo instala @ouds/web-common e @ouds/web-orange na mesma versão. O pacote Orange fornece CSS compilado, enquanto o pacote common fornece o JavaScript de navegador incluído. O documento raiz importa os dois caminhos explícitos, para que o guia não deixe o leitor apenas com um comando de pacote e uma página estática sem estilos.
@ouds/web-orange fornece o CSS do tema Orange.
@ouds/web-common fornece o JavaScript compartilhado.
Neste exemplo, os dois pacotes estão fixados na versão 1.4.0.
Trate o OUDS como seu próprio contrato de componentes
O OUDS é baseado em Bootstrap, mas essa origem não significa que todas as classes do upstream sejam equivalentes diretas. Esta versão usa btn-brand, btn-default e outras variantes nomeadas. A comparação fornecida usa essas classes reais e os atributos de dados nativos do Offcanvas. Em uma migração, compare tanto a marcação quanto os valores do tema, em vez de apenas trocar a URL da folha de estilos.
Cores semânticas e papéis tipográficos do OUDS Orange no sistema de design Orange OUDS Web
Use as variáveis semânticas instaladas
Os cartões originais usam color-bg-primary e color-border-default. O destaque estreito do cabeçalho acompanha color-action-selected, que corresponde a #f15e00 nas declarações claras. O tema escuro altera esses papéis por meio de data-bs-theme na raiz. Assim, o guia registra os valores claros com seu escopo e deixa o runtime selecionar a aparência correta, em vez de descrever um único código hexadecimal de laranja como se fosse todo o sistema de design.
Seja explícito sobre a tipografia
O pacote coloca HelvNeueOrange em primeiro lugar na pilha de fontes. Este estudo incorporado localmente remove declarações font-face não utilizadas e usa Arial como alternativa explícita. A tabela ainda explica a família e os papéis tipográficos reais publicados. Carregar o componente CSS não comprova que a fonte de marca foi carregada; um projeto que adotar essa fonte precisa tratar seus arquivos deliberadamente.
Cartões comparativos e conteúdo do OUDS Orange no sistema de design Orange OUDS Web
Estruture a comparação para apoiar uma decisão real
Os três cartões apresentam franquias de dados fictícias, uma breve descrição de uso e uma ação de consulta. Cada cartão contém o texto completo, em vez de uma captura de tela com linhas de espaço reservado. O conteúdo é original do estudo, não representa produtos, preços ou contratos atuais do Orange. Além disso, deixar os preços fora deste exercício de design evita sugerir uma oferta disponível para compra ou um fluxo de pagamento.
Mantenha alinhada a base dos cartões repetidos
A composição para desktop usa três colunas de grade iguais e cartões em flex-column, permitindo alinhar as ações de consulta na parte inferior. Em 720px, passa a uma única coluna com altura natural. As classes nativas dos botões fornecem os estados reais das ações; a grade ao redor, o preenchimento de 24px e a ordem do conteúdo são decisões originais da aplicação, visíveis no CSS fornecido.
Composição nativa do Offcanvas do OUDS Orange no sistema de design Orange OUDS Web
Preencha o drawer a partir do acionador
Cada botão de consulta aponta para o mesmo Offcanvas #details e contém um pequeno índice de plano em seus dados. O evento show.bs.offcanvas expõe relatedTarget, que seleciona o título, a descrição e a lista de recursos originais correspondentes antes de o drawer ser exibido. A lista é criada com textContent e itens de lista reais, mantendo os dados separados da marcação. O título do drawer é associado por aria-labelledby.
Deixe o runtime nativo controlar o comportamento de abertura e fechamento
Escolha local e recuperação do OUDS Orange no sistema de design Orange OUDS Web
Descreva a ação que realmente aconteceu
A ação “Manter esta escolha local” armazena apenas qual plano fictício foi selecionado e exibe essa escolha abaixo dos cartões. A mensagem informa explicitamente que nenhum pedido foi feito. Uma nova escolha substitui a anterior; ao limpá-la, a mensagem desaparece e o foco volta ao primeiro botão de consulta. Nenhum dado é enviado a uma conta, carrinho ou serviço de pagamento.
Mantenha a aparência separada da seleção
A ação de alternar entre claro e escuro altera o atributo do tema na raiz e o rótulo da própria ação. Ela preserva a escolha local atual e o conteúdo dos três cartões. Essa distinção é útil ao testar um tema: uma alteração visual não deve redefinir silenciosamente a comparação atual do usuário. O estudo usa CSS nativo nas duas aparências; somente a composição externa é fornecida pela aplicação.
Teclado e comportamento em telas estreitas do OUDS Orange no sistema de design Orange OUDS Web
Identifique as ações de fechar e consultar
Cada ação dos cartões inclui o nome do plano, e o botão nativo de fechar, que contém apenas um ícone, tem o rótulo acessível explícito “Fechar detalhes”. O drawer tem tabindex e um título identificado para que o gerenciamento de foco funcione com a implementação nativa. Os testes abrem o drawer Explore, fecham-no com Escape e verificam se o foco retorna ao acionador antes de passar para outro cartão.
Mantenha o drawer dentro da janela de visualização real
A aplicação define a largura do drawer como 440px, mas a regra nativa de largura máxima do Offcanvas o mantém dentro de uma janela estreita. Os cartões ficam empilhados e o preenchimento externo diminui em telas pequenas. O exemplo foi verificado em larguras de 280px e 390px, tablet e desktop, depois da seleção de um plano e da alternância de aparência — não apenas no estado inicial.
Integração estática completa do OUDS Orange no sistema de design Orange OUDS Web
Use o exemplo completo de três arquivos
Salve orange-index.html como index.html e mantenha orange.css e orange-app.js ao lado dele. Instale os dois pacotes fixados e sirva o diretório. O HTML inclui os dois caminhos dos recursos nativos, todo o conteúdo dos cartões, a estrutura do drawer e o script da aplicação. Não é necessário nenhum wrapper React, estrutura básica ausente ou SDK inventado para reproduzir esta composição no navegador.
Salve juntos os três arquivos fornecidos.
Instale os dois pacotes OUDS compatíveis.
Sirva a pasta e consulte cada cartão.
Teste Escape, o retorno do foco, a limpeza local e as duas aparências.
Mantenha o código e os recursos na mesma versão
Se mudar as versões, verifique em conjunto as variantes de botão, o namespace de atributos de dados API, os nomes dos eventos e as variáveis do tema. CSS de uma versão e scripts de outra podem parecer corretos até que uma interação revele a incompatibilidade. A versão fornecida é uma referência concreta e testada, não uma garantia de que qualquer combinação futura de pacotes se comporte da mesma forma.
Exemplos de componentes do sistema de design Orange OUDS Web
orange-index.html
Marcação completa e imports nativos de CSS/JavaScript.
html
<!doctype html><html lang="en" data-bs-theme="light"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Bundle comparison study</title><link rel="stylesheet" href="./node_modules/@ouds/web-orange/dist/css/ouds-web.min.css"><link rel="stylesheet" href="./orange.css"></head><body><main><header><div><p>OUDS WEB / ORIGINAL COMPARISON STUDY</p><h1>Choose room for your day</h1><p class="scope">Three fictional mobile-data bundles for inspecting Orange-themed cards, buttons and a native detail drawer. These are not commercial offers.</p></div><button id="theme" class="btn btn-default" type="button">Use dark appearance</button></header><div class="plans"><article class="plan"><h2>Everyday</h2><p class="amount">8 GB</p><p>For messages, maps and occasional listening.</p><button class="btn btn-brand" data-plan="0" data-bs-toggle="offcanvas" data-bs-target="#details" aria-controls="details">Inspect Everyday</button></article><article class="plan"><h2>Explore</h2><p class="amount">25 GB</p><p>More room for podcasts and a longer journey.</p><button class="btn btn-brand" data-plan="1" data-bs-toggle="offcanvas" data-bs-target="#details" aria-controls="details">Inspect Explore</button></article><article class="plan"><h2>Create</h2><p class="amount">60 GB</p><p>A larger sample allowance for sharing on the move.</p><button class="btn btn-brand" data-plan="2" data-bs-toggle="offcanvas" data-bs-target="#details" aria-controls="details">Inspect Create</button></article></div><section id="selected" hidden><p role="status" id="selection-message"></p><button id="clear" class="btn btn-default">Clear local choice</button></section><p class="fine">OUDS Web 1.4.0 native CSS and Offcanvas runtime; original sample content and local selection. Arial fallback is used instead of Orange’s branded typeface.</p></main><aside class="offcanvas offcanvas-end" tabindex="-1" id="details" aria-labelledby="drawer-title"><div class="offcanvas-header"><h2 class="offcanvas-title" id="drawer-title">Bundle details</h2><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close details"></button></div><div class="offcanvas-body"><p id="drawer-description"></p><ul id="features"></ul><p>No account is connected. Keeping a choice changes this preview only.</p><button id="choose" class="btn btn-brand">Keep this local choice</button></div></aside><script src="./node_modules/@ouds/web-common/dist/js/ouds-web.bundle.min.js"></script><script src="./orange-app.js"></script></body></html>
Salve orange-index.html como index.html; mantenha os outros dois nomes inalterados.
orange-app.js
Tratamento de eventos nativos do drawer e estado local de seleção/tema.
javascript
const plans=[["Everyday", "8 GB", "For messages, maps and occasional listening.", ["8 GB of fictional monthly data", "One original study profile", "No contract, order or payment"]], ["Explore", "25 GB", "More room for podcasts and a longer journey.", ["25 GB of fictional monthly data", "One original study profile", "No contract, order or payment"]], ["Create", "60 GB", "A larger sample allowance for sharing on the move.", ["60 GB of fictional monthly data", "One original study profile", "No contract, order or payment"]]];let current=0;const drawer=document.querySelector('#details');drawer.addEventListener('show.bs.offcanvas',event=>{current=Number(event.relatedTarget.dataset.plan);const[name,amount,description,features]=plans[current];document.querySelector('#drawer-title').textContent=name+' · '+amount;document.querySelector('#drawer-description').textContent=description;document.querySelector('#features').replaceChildren(...features.map(text=>{const li=document.createElement('li');li.textContent=text;return li}));});document.querySelector('#choose').addEventListener('click',()=>{document.querySelector('#selected').hidden=false;document.querySelector('#selection-message').textContent=plans[current][0]+' is your local preview choice. No order was placed.';oudsWeb.Offcanvas.getInstance(drawer).hide();});document.querySelector('#clear').addEventListener('click',()=>{document.querySelector('#selected').hidden=true;document.querySelector('[data-plan]').focus()});document.querySelector('#theme').addEventListener('click',e=>{let dark=document.documentElement.dataset.bsTheme!=='dark';document.documentElement.dataset.bsTheme=dark?'dark':'light';e.currentTarget.textContent=dark?'Use light appearance':'Use dark appearance'});
Salve orange-index.html como index.html; mantenha os outros dois nomes inalterados.
04
Configuração do agente do sistema de design Orange OUDS Web
Ponto de partida para implementação
Abra http://localhost:8000/. O exemplo usa recursos nativos compilados e não requer uma compilação Sass.
sh
npm init -y
npm install @ouds/[email protected] @ouds/[email protected]
# Save index.html, orange.css and orange-app.js from the supplied examples.
python3 -m http.server 8000
Um prompt para seu projeto
Prompt para agente de IA
Implemente o estudo comparativo completo do OUDS Web 1.4, com pacotes common/Orange compatíveis, variantes reais btn-brand e btn-default, eventos nativos do Offcanvas e API, resolução de tokens para os temas claro/escuro e alternativa explícita Arial. Mantenha fictício todo o conteúdo dos pacotes e estritamente local a seleção.
05
Fontes e escopo do sistema de design Orange OUDS Web
Runtime real de CSS e Offcanvas do OUDS Web, com pacotes fictícios originais OpenDesign e seleção local. A alternativa Arial é explícita; nenhuma oferta comercial ou pedido é representado.
