# Sistema de diseño Orange OUDS Web ## Vista previa de la interfaz del sistema de diseño Orange OUDS Web Examina cada panel lateral nativo, guarda una selección local y cambia la apariencia. ## Referencia de diseño del sistema sistema de diseño Orange OUDS Web Código fuente fijado de @ouds/web-orange y @ouds/web-common 1.4.0, con las decisiones de diseño originales identificadas por separado. ### Roles de color semánticos claros | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --bs-color-action-enabled | #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-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. | ### Escala de espaciado | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --bs-space-scaled-none | 0px | Escala de espaciado exportada real. La composición comparativa original establece espacios de 24px con estos valores. | | --bs-space-scaled-3xsmall | 2px | Escala de espaciado exportada real. La composición comparativa original establece espacios de 24px con estos valores. | | --bs-space-scaled-2xsmall | 4px | Escala de espaciado exportada real. La composición comparativa original establece espacios de 24px con estos valores. | | --bs-space-scaled-xsmall | 8px | Escala de espaciado exportada real. La composición comparativa original establece espacios de 24px con estos valores. | | --bs-space-scaled-small | 12px | Escala de espaciado exportada real. La composición comparativa original establece espacios de 24px con estos valores. | | --bs-space-scaled-medium | 16px | Escala de espaciado exportada real. La composición comparativa original establece espacios de 24px con estos valores. | | --bs-space-scaled-large | 24px | Escala de espaciado exportada real. La composición comparativa original establece espacios de 24px con estos valores. | | --bs-space-scaled-xlarge | 32px | Escala de espaciado exportada real. La composición comparativa original establece espacios de 24px con estos valores. | | --bs-space-scaled-2xlarge | 40px | Escala de espaciado exportada real. La composición comparativa original establece espacios de 24px con estos valores. | | --bs-space-scaled-3xlarge | 48px | Escala de espaciado exportada real. La composición comparativa original establece espacios de 24px con estos valores. | ### Roles tipográficos | Nombre / Regla | Valor / Configuración | 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" | 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 de Offcanvas | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --bs-offcanvas-zindex | 1045 | 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. | ### Contratos del panel lateral y los botones nativos | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Brand action | .btn.btn-brand | La variante Orange real; no des por sentado que .btn-primary de Bootstrap en el upstream significa lo mismo. | | Default action | .btn.btn-default | El estilo secundario/predeterminado real usado para cambiar la apariencia y borrar la selección local. | | Open trigger | data-bs-toggle="offcanvas" / data-bs-target | Los datos nativos API abren el panel lateral compartido desde cada botón de plan original. | | Content event | show.bs.offcanvas / event.relatedTarget | Lee el plan seleccionado desde el activador antes de mostrar el contenido del panel lateral. | | Close API | oudsWeb.Offcanvas.getInstance(element).hide() | Cierra la instancia nativa existente después de una selección local. | | Theme | data-bs-theme="light" or "dark" | Cambia las variables reales del tema sin reconstruir el estado comparativo. | ## Guía completa del sistema de diseño Orange OUDS Web Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## 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. - @ouds/web-common proporciona JavaScript compartido. - 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 Los atributos de datos API gestionan la apertura, el fondo, Escape y el comportamiento del foco. Tras elegir una opción local, el controlador usa oudsWeb.Offcanvas.getInstance(drawer).hide() para cerrar la instancia existente. No elimina una clase CSS y deja activo el bloqueo del foco o el fondo. La prueba espera a que termine la transición antes de comprobar que el foco vuelve a su origen, porque el cierre asíncrono forma parte del contrato del componente. ## 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. 1. Guarda juntos los tres archivos proporcionados. 2. Instala los dos paquetes OUDS correspondientes. 3. Sirve la carpeta y consulta los detalles de cada tarjeta. 4. 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. ``` 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.

``` Referencia de código - Guarda orange-index.html como index.html; conserva sin cambios los otros dos nombres. ### orange.css Disposición adaptable original de las tarjetas y alternativa tipográfica 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} ``` Referencia de código - 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. ``` 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'}); ``` Referencia de código - Guarda orange-index.html como index.html; conserva sin cambios los otros dos nombres. ## 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. ``` 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 ``` ### Una instrucción para tu proyecto ``` 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. ``` ## 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. - Instalación Configuración coincidente de los paquetes common y de tema. - Offcanvas Estructura del cajón, eventos y API. - Botones Variantes y estados específicos de OUDS. - JavaScript Comportamiento en tiempo de ejecución y límites de integración. ## Recursos relacionados del sistema de diseño Orange OUDS Web ### Palantir Blueprint Crea un espacio de trabajo de datos denso con Blueprint: tokens verificados de tipografía e intención, una tabla de conjuntos de datos seleccionable, un panel de revisión y el código fuente completo de React. ### Pega Bolt Explora el sistema de contenido de Bolt con la marca Pega: tipografía fluida, espaciado horizontal y vertical por separado, y una composición de acordeón en Twig para una página editorial de recursos. ### Porsche sistema de diseño Explora Porsche Design System v4 con espaciado fluido, esquemas de color CSS, tipografía Porsche Next y un configurador con dos opciones. La referencia incluye expresiones reales de tokens y una entrada Vite completa que usa los eventos actuales de controles segmentados. - [Referencia de implementación](https://web.unified-design-system.orange.com/orange/docs/1.4/components/offcanvas/) - [Fuente](https://cdn.jsdelivr.net/npm/@ouds/web-orange@1.4.0/dist/css/ouds-web.css) - [Fuente](https://web.unified-design-system.orange.com/orange/docs/1.4/components/offcanvas/) - [Referencia de código](https://web.unified-design-system.orange.com/orange/docs/1.4/getting-started/introduction/) - [Instalación Configuración coincidente de los paquetes common y de tema.](https://web.unified-design-system.orange.com/orange/docs/1.4/getting-started/download/) - [Offcanvas Estructura del cajón, eventos y API.](https://web.unified-design-system.orange.com/orange/docs/1.4/components/offcanvas/) - [Botones Variantes y estados específicos de OUDS.](https://web.unified-design-system.orange.com/orange/docs/1.4/components/buttons/) - [JavaScript Comportamiento en tiempo de ejecución y límites de integración.](https://web.unified-design-system.orange.com/orange/docs/1.4/getting-started/javascript/)