# Sistema de design Orange OUDS Web ## Prévia da interface do sistema de design Orange OUDS Web Inspecione cada painel nativo, mantenha uma escolha local e alterne a aparência. ## Referência de design do sistema de design Orange OUDS Web Código-fonte fixado de @ouds/web-orange e @ouds/web-common 1.4.0, com decisões originais de layout identificadas separadamente. ### Papéis semânticos de cores claras | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --bs-color-action-enabled | #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-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. | ### Espaçamentos em escala | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --bs-space-scaled-none | 0px | Escala de espaçamento realmente exportada. A composição comparativa original define seus próprios intervalos de 24px com estes valores. | | --bs-space-scaled-3xsmall | 2px | Escala de espaçamento realmente exportada. A composição comparativa original define seus próprios intervalos de 24px com estes valores. | | --bs-space-scaled-2xsmall | 4px | Escala de espaçamento realmente exportada. A composição comparativa original define seus próprios intervalos de 24px com estes valores. | | --bs-space-scaled-xsmall | 8px | Escala de espaçamento realmente exportada. A composição comparativa original define seus próprios intervalos de 24px com estes valores. | | --bs-space-scaled-small | 12px | Escala de espaçamento realmente exportada. A composição comparativa original define seus próprios intervalos de 24px com estes valores. | | --bs-space-scaled-medium | 16px | Escala de espaçamento realmente exportada. A composição comparativa original define seus próprios intervalos de 24px com estes valores. | | --bs-space-scaled-large | 24px | Escala de espaçamento realmente exportada. A composição comparativa original define seus próprios intervalos de 24px com estes valores. | | --bs-space-scaled-xlarge | 32px | Escala de espaçamento realmente exportada. A composição comparativa original define seus próprios intervalos de 24px com estes valores. | | --bs-space-scaled-2xlarge | 40px | Escala de espaçamento realmente exportada. A composição comparativa original define seus próprios intervalos de 24px com estes valores. | | --bs-space-scaled-3xlarge | 48px | Escala de espaçamento realmente exportada. A composição comparativa original define seus próprios intervalos de 24px com estes valores. | ### Papéis tipográficos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --bs-font-sans-serif | "HelvNeueOrange", "Helvetica Neue", Helvetica, "SF Pro", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | 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 do Offcanvas | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --bs-offcanvas-zindex | 1045 | 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. | ### Contratos nativos do drawer e dos botões | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Brand action | .btn.btn-brand | A variante real do Orange; não presuma que Bootstrap .btn-primary do upstream tenha o mesmo significado. | | Default action | .btn.btn-default | O tratamento padrão/secundário real usado para a aparência e para limpar a escolha local. | | Open trigger | data-bs-toggle="offcanvas" / data-bs-target | O atributo de dados nativo API abre o drawer compartilhado a partir de cada botão de plano original. | | Content event | show.bs.offcanvas / event.relatedTarget | Leia o plano clicado a partir do acionador antes de renderizar o conteúdo do drawer. | | Close API | oudsWeb.Offcanvas.getInstance(element).hide() | Feche a instância nativa existente após uma escolha local. | | Theme | data-bs-theme="light" or "dark" | Altera as variáveis reais do tema sem reconstruir o estado da comparação. | ## Guia completo do sistema de design Orange OUDS Web 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. ## 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 O atributo de dados API cuida da abertura, do backdrop, da tecla Escape e do foco. Após uma escolha local, o manipulador usa oudsWeb.Offcanvas.getInstance(drawer).hide() para fechar a instância existente. Ele não remove uma classe CSS e deixa para trás a contenção de foco ou o backdrop. O teste aguarda a transição antes de verificar o retorno do foco, pois o fechamento assíncrono faz parte do contrato do componente. ## 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. 1. Salve juntos os três arquivos fornecidos. 2. Instale os dois pacotes OUDS compatíveis. 3. Sirva a pasta e consulte cada cartão. 4. 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. ``` Bundle comparison study

OUDS WEB / ORIGINAL COMPARISON STUDY

Choose room for your day

Three fictional mobile-data bundles for inspecting Orange-themed cards, buttons and a native detail drawer. These are not commercial offers.

Everyday

8 GB

For messages, maps and occasional listening.

Explore

25 GB

More room for podcasts and a longer journey.

Create

60 GB

A larger sample allowance for sharing on the move.

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.

``` Referência de código - Salve orange-index.html como index.html; mantenha os outros dois nomes inalterados. ### orange.css Organização original dos cartões responsivos e alternativa de fonte explícita. ``` *{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif}main{max-width:1080px;margin:auto;padding:32px}header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;border-bottom:4px solid var(--bs-color-action-selected);padding-bottom:24px}h1{font-size:36px;line-height:1.15;margin:12px 0}.scope{font-size:14px;line-height:1.6;max-width:75ch}.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}.plan{display:flex;flex-direction:column;border:1px solid var(--bs-color-border-default);padding:24px;background:var(--bs-color-bg-primary)}.plan h2{font-size:24px}.amount{font-size:40px;font-weight:700;line-height:1.2;margin:24px 0}.plan p{line-height:1.6}.plan .btn{margin-top:auto}.fine{font-size:13px;line-height:1.6;margin-top:24px}.offcanvas{--bs-offcanvas-width:440px}.offcanvas-header,.offcanvas-body{padding:24px}.offcanvas-header{gap:16px}.offcanvas-title{font-size:24px}.offcanvas-body p,.offcanvas-body li{line-height:1.6}.offcanvas-body ul{padding-left:24px}.offcanvas-body li{margin:12px 0}#selected{padding:24px;border:1px solid var(--bs-color-border-default);margin-top:24px}#selected p{margin:0}#selected .btn{margin-top:16px}@media(max-width:720px){main{padding:16px}.plans{grid-template-columns:1fr}.plan{padding:24px}.amount{margin:16px 0}.plan .btn{margin-top:16px}}[hidden]{display:none!important} ``` Referência de código - 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. ``` 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'}); ``` Referência de código - Salve orange-index.html como index.html; mantenha os outros dois nomes inalterados. ## 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. ``` npm init -y npm install @ouds/web-common@1.4.0 @ouds/web-orange@1.4.0 # Save index.html, orange.css and orange-app.js from the supplied examples. python3 -m http.server 8000 ``` ### Um prompt para seu projeto ``` 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. ``` ## 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. - Instalação Configuração compatível dos pacotes common e de tema. - Offcanvas Estrutura do drawer, eventos e API. - Botões Variantes e estados específicos do OUDS. - JavaScript Comportamento do runtime e limites da integração. ## Recursos relacionados ao sistema de design Orange OUDS Web ### 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. ### Porsche sistema de design Explore Porsche Design System v4 com espaçamento fluido, esquemas de cores CSS, tipografia Porsche Next e um configurador com duas opções. A referência inclui expressões reais de tokens e uma entrada completa do Vite que usa os eventos atuais do controle segmentado. - [Referência de implementação](https://web.unified-design-system.orange.com/orange/docs/1.4/components/offcanvas/) - [Fonte](https://cdn.jsdelivr.net/npm/@ouds/web-orange@1.4.0/dist/css/ouds-web.css) - [Fonte](https://web.unified-design-system.orange.com/orange/docs/1.4/components/offcanvas/) - [Referência de código](https://web.unified-design-system.orange.com/orange/docs/1.4/getting-started/introduction/) - [Instalação Configuração compatível dos pacotes common e de tema.](https://web.unified-design-system.orange.com/orange/docs/1.4/getting-started/download/) - [Offcanvas Estrutura do drawer, eventos e API.](https://web.unified-design-system.orange.com/orange/docs/1.4/components/offcanvas/) - [Botões Variantes e estados específicos do OUDS.](https://web.unified-design-system.orange.com/orange/docs/1.4/components/buttons/) - [JavaScript Comportamento do runtime e limites da integração.](https://web.unified-design-system.orange.com/orange/docs/1.4/getting-started/javascript/)