Examina los tokens semánticos reales, los paquetes de temas y el comportamiento nativo de Offcanvas de Orange OUDS 1.4 mediante un estudio comparativo adaptable completo.
Las primeras declaraciones, correspondientes al modo claro, del ajuste preestablecido Orange 1.4. La apariencia oscura obtiene sus propios valores mediante data-bs-theme, en lugar de reutilizar esta tabla como si contuviera colores literales.
--bs-color-action-selected
#f15e00
Las primeras declaraciones, correspondientes al modo claro, del ajuste preestablecido Orange 1.4. La apariencia oscura obtiene sus propios valores mediante data-bs-theme, en lugar de reutilizar esta tabla como si contuviera colores literales.
--bs-color-action-hover
rgba(0, 0, 0, 0.68)
Las primeras declaraciones, correspondientes al modo claro, del ajuste preestablecido Orange 1.4. La apariencia oscura obtiene sus propios valores mediante data-bs-theme, en lugar de reutilizar esta tabla como si contuviera colores literales.
--bs-color-action-pressed
#f15e00
Las primeras declaraciones, correspondientes al modo claro, del ajuste preestablecido Orange 1.4. La apariencia oscura obtiene sus propios valores mediante data-bs-theme, en lugar de reutilizar esta tabla como si contuviera colores literales.
--bs-color-bg-primary
#fff
Las primeras declaraciones, correspondientes al modo claro, del ajuste preestablecido Orange 1.4. La apariencia oscura obtiene sus propios valores mediante data-bs-theme, en lugar de reutilizar esta tabla como si contuviera colores literales.
--bs-color-bg-secondary
#f4f4f4
Las primeras declaraciones, correspondientes al modo claro, del ajuste preestablecido Orange 1.4. La apariencia oscura obtiene sus propios valores mediante data-bs-theme, en lugar de reutilizar esta tabla como si contuviera colores literales.
--bs-color-border-default
rgba(0, 0, 0, 0.2)
Las primeras declaraciones, correspondientes al modo claro, del ajuste preestablecido Orange 1.4. La apariencia oscura obtiene sus propios valores mediante data-bs-theme, en lugar de reutilizar esta tabla como si contuviera colores literales.
--bs-color-always-black
#000
Las primeras declaraciones, correspondientes al modo claro, del ajuste preestablecido Orange 1.4. La apariencia oscura obtiene sus propios valores mediante data-bs-theme, en lugar de reutilizar esta tabla como si contuviera colores literales.
--bs-color-always-white
#fff
Las primeras declaraciones, correspondientes al modo claro, del ajuste preestablecido Orange 1.4. La apariencia oscura obtiene sus propios valores mediante data-bs-theme, en lugar de reutilizar esta tabla como si contuviera colores literales.
Declaraciones publicadas de fuentes y tipografía. El estudio integrado usa Arial como alternativa explícita, no los archivos de la fuente de marca HelvNeueOrange.
--bs-font-size-display-large
2.5rem
Declaraciones publicadas de fuentes y tipografía. El estudio integrado usa Arial como alternativa explícita, no los archivos de la fuente de marca HelvNeueOrange.
--bs-font-size-heading-large
1.5rem
Declaraciones publicadas de fuentes y tipografía. El estudio integrado usa Arial como alternativa explícita, no los archivos de la fuente de marca HelvNeueOrange.
--bs-font-size-body-large
1rem
Declaraciones publicadas de fuentes y tipografía. El estudio integrado usa Arial como alternativa explícita, no los archivos de la fuente de marca HelvNeueOrange.
--bs-font-size-body-medium
0.875rem
Declaraciones publicadas de fuentes y tipografía. El estudio integrado usa Arial como alternativa explícita, no los archivos de la fuente de marca HelvNeueOrange.
--bs-font-size-body-small
0.75rem
Declaraciones publicadas de fuentes y tipografía. El estudio integrado usa Arial como alternativa explícita, no los archivos de la fuente de marca HelvNeueOrange.
--bs-font-line-height-body-large
1.5
Declaraciones publicadas de fuentes y tipografía. El estudio integrado usa Arial como alternativa explícita, no los archivos de la fuente de marca HelvNeueOrange.
--bs-font-line-height-body-medium
1.4285714286
Declaraciones publicadas de fuentes y tipografía. El estudio integrado usa Arial como alternativa explícita, no los archivos de la fuente de marca HelvNeueOrange.
Valores predeterminados del componente nativo. El panel lateral original anula el ancho y lo fija en 440px, mientras que la regla nativa de ancho máximo hace que se ajuste a la ventana gráfica.
--bs-offcanvas-width
400px
Valores predeterminados del componente nativo. El panel lateral original anula el ancho y lo fija en 440px, mientras que la regla nativa de ancho máximo hace que se ajuste a la ventana gráfica.
--bs-offcanvas-height
30vh
Valores predeterminados del componente nativo. El panel lateral original anula el ancho y lo fija en 440px, mientras que la regla nativa de ancho máximo hace que se ajuste a la ventana gráfica.
--bs-offcanvas-transition
transform 0.3s ease-in-out
Valores predeterminados del componente nativo. El panel lateral original anula el ancho y lo fija en 440px, mientras que la regla nativa de ancho máximo hace que se ajuste a la ventana gráfica.
Estructura de paquetes y temas de Orange OUDS del sistema de diseño Orange OUDS Web
Instala juntos los paquetes común y Orange
OUDS Web 1.4.0 separa el comportamiento compartido del tema de marca. El ejemplo instala @ouds/web-common y @ouds/web-orange en la misma versión. El paquete Orange proporciona CSS compilado, mientras que el paquete común proporciona el JavaScript para navegador incluido. El documento raíz importa ambas rutas explícitas, de modo que la guía no deja al lector con solo un comando de instalación y una página estática sin estilos.
@ouds/web-orange proporciona el CSS del tema Orange.
En este ejemplo, ambos paquetes están fijados en la versión 1.4.0.
Considera OUDS como su propio contrato de componentes
OUDS se basa en Bootstrap, pero ese origen no significa que todas las clases del proyecto original sean intercambiables directamente. Esta versión usa btn-brand, btn-default y otras variantes con nombre. La comparación proporcionada utiliza esas clases reales y los atributos de datos nativos de Offcanvas. Para migrar, hay que comparar tanto el marcado como los valores del tema, en lugar de limitarse a cambiar la URL de una hoja de estilos.
Sistema de diseño Orange OUDS de Orange OUDS Web: roles semánticos de color y tipografía
Usa las variables semánticas instaladas
Las tarjetas originales usan color-bg-primary y color-border-default. El acento estrecho de la cabecera sigue color-action-selected, cuyo valor en las declaraciones del tema claro es #f15e00. El tema oscuro cambia estos roles mediante data-bs-theme en el elemento raíz. Por eso, la guía registra los valores del tema claro junto con su ámbito y deja que el entorno de ejecución seleccione la apariencia adecuada, en lugar de describir un único código hexadecimal naranja como si representara todo el sistema de diseño.
Sé preciso con la tipografía
El paquete sitúa HelvNeueOrange al principio de su lista de fuentes. Este estudio con fuentes incrustadas localmente elimina las declaraciones font-face que no se usan y establece Arial como alternativa explícita. La tabla sigue explicando la familia y los roles tipográficos reales publicados. Cargar el componente CSS no demuestra que se haya cargado la tipografía de marca; los proyectos que adopten esa fuente deben gestionar sus recursos tipográficos de forma intencionada.
Sistema de diseño Orange OUDS de Orange OUDS Web: tarjetas de comparación y contenido
Dale a la comparación una estructura de decisión real
Las tres tarjetas muestran datos ficticios de consumo, una breve descripción de uso y una acción para consultar detalles. Cada tarjeta incluye el texto completo, no una captura de filas de marcador de posición. Se trata de contenido original para este estudio, no de productos, precios o contratos actuales de Orange. Excluir los precios de este ejercicio de diseño también evita dar a entender que se trata de una oferta disponible para comprar o de un flujo de pago.
Mantén uniforme la alineación de las tarjetas
La composición para escritorio usa tres columnas iguales y tarjetas con flex-column, lo que permite alinear las acciones de consulta en la parte inferior. A 720px, pasa a una sola columna con altura natural. Las clases de botones nativos proporcionan los estados reales de las acciones; la cuadrícula circundante, el relleno de 24px y el orden del contenido son decisiones originales de la aplicación visibles en CSS.
Sistema de diseño Orange OUDS de Orange OUDS Web: composición nativa de Offcanvas
Rellena el panel desde el botón que lo activa
Cada botón de consulta apunta al mismo Offcanvas, con el id #details, y lleva un pequeño índice del plan en un atributo de datos. El evento show.bs.offcanvas expone relatedTarget, que permite seleccionar el título, la descripción y la lista de características originales correspondientes antes de mostrar el panel. La lista se construye con textContent y elementos de lista reales, manteniendo los datos separados del marcado. El título del panel se vincula mediante aria-labelledby.
Deja que el entorno nativo gestione la apertura y el cierre
Sistema de diseño Orange OUDS de Orange OUDS Web: elección local y recuperación
Describe la acción que realmente ocurrió
Esta elección local solo guarda cuál de los planes ficticios se seleccionó y muestra esa elección debajo de las tarjetas. El mensaje indica explícitamente que no se ha realizado ningún pedido. Una nueva elección sustituye a la anterior; al borrarla, el mensaje se oculta y el foco vuelve al primer botón de consulta. No se envía nada a una cuenta, un carrito ni un servicio de pago.
Mantén la apariencia separada de la selección
La acción de tema claro/oscuro cambia el atributo del tema en el elemento raíz y su propia etiqueta. Conserva la elección local actual y el contenido de las tres tarjetas. Esta distinción es útil al probar un tema: un cambio visual no debería restablecer silenciosamente la comparación actual del usuario. El estudio usa CSS nativo en ambas apariencias; solo la composición exterior depende de la aplicación.
Sistema de diseño Orange OUDS de Orange OUDS Web: comportamiento con teclado y en pantallas estrechas
Identifica las acciones de cierre y consulta
La acción de cada tarjeta incluye el nombre del plan, y el botón nativo de cierre, que solo muestra un icono, tiene la etiqueta accesible explícita «Cerrar detalles». El panel tiene tabindex y un título etiquetado para que funcione la gestión del foco de la implementación nativa. Las pruebas abren el panel Explorar, lo cierran con Escape y verifican que el foco vuelve al botón que lo activó antes de pasar a otra tarjeta.
Mantén el panel dentro del área visible
La aplicación elige un ancho de panel de 440px, pero la regla max-width nativa de Offcanvas lo mantiene dentro de las pantallas estrechas. Las tarjetas se apilan y el relleno exterior se reduce en tamaños pequeños. El ejemplo se comprobó a 280px, 390px y en anchos de tableta y escritorio, después de seleccionar un plan y cambiar la apariencia, no solo en su estado inicial.
Sistema de diseño Orange OUDS de Orange OUDS Web: integración estática completa
Usa el ejemplo completo de tres archivos
Guarda orange-index.html como index.html y deja orange.css y orange-app.js en la misma carpeta. Instala los dos paquetes con versiones fijadas y sirve el directorio. HTML incluye las rutas de los recursos nativos, todo el contenido de las tarjetas, la estructura del panel y el script de la aplicación. No se necesita un contenedor React, un andamiaje incompleto ni un SDK inventado para reproducir esta composición en el navegador.
Guarda juntos los tres archivos proporcionados.
Instala los dos paquetes OUDS correspondientes.
Sirve la carpeta y consulta los detalles de cada tarjeta.
Prueba Escape, el retorno del foco, el borrado local y ambas apariencias.
Mantén el código y los recursos en la misma versión
Si cambias de versión, verifica conjuntamente las variantes de botones, el espacio de nombres de los atributos de datos API, los nombres de los eventos y las variables del tema. CSS de una versión y scripts de otra pueden parecer correctos hasta que una interacción deja al descubierto la incompatibilidad. La versión proporcionada es una referencia concreta y probada, no una garantía de que cualquier combinación futura de paquetes vaya a comportarse igual.
Ejemplos de componentes del sistema de diseño Orange OUDS Web
orange-index.html
Marcado completo e importaciones nativas 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>
Guarda orange-index.html como index.html; conserva sin cambios los otros dos nombres.
orange-app.js
Gestión nativa de eventos del cajón y estado local de selección/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'});
Guarda orange-index.html como index.html; conserva sin cambios los otros dos nombres.
04
Configuración del agente del sistema de diseño Orange OUDS Web
Punto de partida para la implementación
Abre http://localhost:8000/. Usa recursos nativos compilados y no requiere una compilación de 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
Una instrucción para tu proyecto
Instrucción para el agente
Implementa el estudio comparativo completo de OUDS Web 1.4 con paquetes common/Orange emparejados, variantes reales btn-brand y btn-default, eventos nativos de Offcanvas y API, resolución de tokens para temas claros/oscuros y alternativa Arial explícita. Mantén ficticio todo el contenido de los paquetes y limita estrictamente la selección al ámbito local.
05
Fuentes y alcance del sistema de diseño Orange OUDS Web
Entorno de ejecución real de OUDS Web CSS y Offcanvas, con paquetes ficticios originales OpenDesign y selección local. La alternativa Arial es explícita; no se representa ninguna oferta comercial ni pedido.
