# Sistema de diseño Siemens iX ## Vista previa de la interfaz del sistema de diseño Siemens iX Filtra eventos ficticios, consulta una nota sobre un equipo y marca un registro como revisado localmente, sin ocultar su gravedad original. ## Referencia de diseño del sistema de diseño Siemens iX Documentación pública actual de iX y captura oficial del componente de la rama principal API. Las entradas de color que aparecen a continuación son roles semánticos, no valores hexadecimales fijos inventados. Las versiones de los paquetes instalados deben mantenerse bloqueadas en conjunto; el ejemplo sin conexión usa su propia paleta y dimensiones, claramente identificadas. ### Tema y entrada del paquete | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Core package | @siemens/ix | Componentes web y hoja de estilos global. | | React wrappers | @siemens/ix-react | Integración del componente React. | | Icons | @siemens/ix-icons | Dependencia oficial de iconos. | | data-ix-theme | classic | Selector de tema a nivel de documento. | | data-ix-color-schema | dark \| light \| system | La forma exacta del atributo se define en el esquema. | | Global CSS | @siemens/ix/dist/siemens-ix/siemens-ix.css | Importar una vez en el punto de entrada de la aplicación. | ### Roles de lectura y superficies | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --theme-color-primary | Primary action role | Se resuelven mediante el tema elegido. | | --theme-color-std-text | Default reading color | Títulos de eventos y texto del cuerpo. | | --theme-color-soft-text | Secondary reading color | Horas y metadatos de recursos. | | --theme-color-weak-text | Disabled reading color | No usar para información secundaria importante. | | --theme-color-alarm-text | Alarm text role | Usar cuando el texto de error necesite un color de primer plano. | | --theme-color-component-1 | Interactive component fill | Semitransparente; la superficie subyacente afecta su apariencia. | | color-0 | Transparent background role | Los demás niveles de fondo son opacos. | ### Vocabulario de gravedad | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Alarm | Error, invalid or dangerous condition | Mantén su etiqueta de texto junto al indicador de color. | | Critical | Between alarm and warning | Un significado distinto, no otro tono decorativo. | | Warning | Condition requiring attention | No elevarlo silenciosamente a alarma. | | Success | Positive outcome | Una acción de revisión no implica necesariamente que una alarma se haya resuelto correctamente. | | Info | Informational condition | Diferenciarlo del contenido deshabilitado. | | Neutral | Unclassified neutral condition | Disponible cuando no corresponda asignar un juicio de estado. | ### Jerarquía de bordes | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --theme-color-hard-bdr | Strong solid boundary | Separación marcada. | | --theme-color-std-bdr | Standard control boundary | Control de entrada o selección. | | --theme-color-soft-bdr | Card boundary | Se usa en el inspector del cuaderno. | | --theme-color-weak-bdr | Region boundary | Separar suavemente las regiones principales. | | --theme-color-x-weak-bdr | Very subtle boundary | División de bajo énfasis. | | --theme-primary-bdr-1 | Complete border value | Usar como borde: var(--theme-primary-bdr-1), no como color. | ### Roles tipográficos | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Headings | H1 through H6 | Jerarquía tipográfica | | Body | Multiline reading | Notas de inspección y explicaciones. | | Label | Single-line component text | Controles y campos breves. | | Display | Single-line KPI presentation | Recuentos; no párrafos. | | Code | Code and technical syntax | Ejemplos o identificadores API, cuando corresponda. | ### Captura de Event List API | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | IxEventList.itemHeight | S \| L \| number; default S | Usa L para el título y los metadatos de ejemplo. | | IxEventList.compact | boolean; default false | El modo compacto se selecciona explícitamente. | | IxEventList.chevron | boolean; default false | Mostrar un indicador de navegación. | | IxEventList.animated | boolean; default false | Evitar movimientos innecesarios en un registro estático. | | IxEventListItem.itemColor | string | Expresión de color del tema CSS. | | IxEventListItem.selected | boolean; default false | Controlado por el ID del registro seleccionado. | | IxEventListItem.variant | outline \| filled; default outline | Elección de presentación. | | IxEventListItem.disabled | boolean; default false | Deshabilitar solo cuando la interacción no esté disponible. | | itemClick | Custom event | El controlador onItemClick del contenedor React selecciona el registro. | ## Guía completa del sistema de diseño Siemens iX 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. ## Eventos industriales del sistema de diseño Siemens iX con estados de revisión y resolución diferenciados ### Un cuaderno, no un panel de control de maquinaria > El ejemplo práctico es un cuaderno ficticio de equipos. Tres registros conservan su gravedad de origen, mientras que un estado local de revisión independiente indica qué ha consultado la persona lectora. Esta separación es esencial para la composición: seleccionar una fila, leer una nota y resolver una condición física son operaciones distintas. La vista previa implementa las dos primeras y no afirma controlar equipos en tiempo real. Event List es un mejor punto de partida que las tarjetas decorativas: su estado seleccionado, indicador de gravedad y chevrón hacen que los registros repetidos se lean con claridad como una colección navegable. El inspector muestra los textos más largos fuera de la fila. No hay una transmisión de telemetría falsa ni un aviso de éxito que afirme que se ha despejado una alarma. Consulta la especificación complementaria ## Roles de color del sistema de diseño Siemens iX para el significado operativo ### Combina los indicadores con colores de lectura El sistema de color distingue las capas de fondo opacas de los rellenos semitransparentes de los componentes. No se puede evaluar el relleno de un componente sin tener en cuenta la superficie que hay debajo. En el código nativo, usa las variables reales del tema en lugar de copiar un valor hexadecimal de una captura de pantalla en cada fila. El texto estándar y el suave responden a distintas prioridades de lectura. El texto débil está pensado para contenido deshabilitado; por eso, una marca de tiempo necesaria para una investigación no debería asignarse automáticamente a ese rol. Para el primer plano de un error, es más apropiado el rol específico de texto de alarma que reutilizar sin más un relleno de estado. - Muestra la palabra Alarma, Advertencia o Info junto al borde de color. - Mantén el indicador de alarma tras la revisión local; la revisión no cambia la condición de origen. - Reserva el estilo de selección para el estado de navegación, de modo que la gravedad y la selección sigan siendo distinguibles. Consulta la especificación complementaria ## Tipografía del sistema de diseño Siemens iX que distingue las notas de las etiquetas ### Usa formatos en lugar de una escala de píxeles supuesta iX divide la tipografía en encabezados, cuerpo, etiquetas, visualización y código. Las notas de inspección necesitan el comportamiento multilínea del texto de cuerpo; un recuento grande puede usar el formato de visualización; una etiqueta breve para un filtro corresponde a la categoría de etiquetas. El formato de visualización no es una forma cómoda de agrandar la descripción completa de un evento. El ejemplo documentado ix-typography format="h3" proporciona un punto de partida concreto para la implementación. El mixin equivalente de Sass typography-h3 permite usar un elemento personalizado sin recrear sus reglas tipográficas. La vista previa usa deliberadamente una fuente alternativa del sistema y tamaños tipográficos propios de la aplicación; esos valores no se presentan como tokens oficiales de Siemens. Consulta la especificación complementaria ## Selección y densidad de Event List del sistema de diseño Siemens iX ### Controla la identidad independientemente de la apariencia del elemento La captura API expone itemHeight con los valores S, L o un número. El ejemplo elige L, deja compact en su valor predeterminado false y habilita un chevrón. En un registro de producción con títulos localizados más largos, hay que verificar que la altura elegida admita el ajuste de texto, en lugar de dar por sentado que todos los registros caben porque así ocurre en el ejemplo. Cada elemento recibe selected a partir de una comparación de ID y envía itemClick mediante el controlador onItemClick del contenedor. El inspector usa el mismo ID. Así se evita que la selección visual y el panel de detalles hagan referencia silenciosamente a registros distintos. Los cambios en los filtros borran explícitamente el ID seleccionado. Consulta la especificación complementaria ## Un inspector del sistema de diseño Siemens iX que se adapta a una ventana estrecha ### Coloca los detalles debajo de la colección de eventos La cuadrícula de dos columnas con proporción dos a uno del ejemplo es una composición de la aplicación, no un token de cuadrícula publicado de iX. En una ventana estrecha, pasa a una columna y conserva el orden de los registros antes del inspector. El inspector no crea una trampa de desplazamiento anidada; la persona lectora puede desplazarse por todo el ejemplo con naturalidad. Los metadatos del evento aparecen en una segunda línea con un color secundario legible. El filtro queda fuera de las filas repetidas y no se desplaza cuando cambian los registros. Un párrafo de estado informa del resultado de la revisión local del registro seleccionado, sin modificar el filtro ni sustituir el título. Consulta la especificación complementaria ## Sistema de diseño Siemens iX: haz que el estado sea perceptible sin depender del color ni de la precisión del puntero ### Texto, controles de teclado y foco La vista previa sin conexión usa botones nativos para los registros, un selector etiquetado para la gravedad y una región de estado aria-live para los comentarios de revisión. Se puede seleccionar un registro con Intro y Espacio. La composición nativa de la biblioteca usa sus wrappers de Event List; antes de adoptar anulaciones de foco personalizadas, se debe probar el comportamiento con teclado y tecnologías de asistencia de la versión instalada. Las etiquetas describen la distinción del negocio: «Marcar como revisado localmente», no «Resolver alarma». La acción de revisión deshabilitada va acompañada de un estado visible de revisión. El significado no depende únicamente del color, y el filtro no deja una selección obsoleta e inaccesible oculta en otra categoría. Consulta la especificación complementaria ## Sistema de diseño Siemens iX: conecta el paquete, el tema y el estado local de la aplicación ### Una secuencia de integración deliberada El bloque de configuración contiene las importaciones del paquete, los atributos de tema del documento, las propiedades reales del componente, el estado completo de React y la aplicación CSS. El selector de tema es data-ix-color-schema, no un atributo personalizado de nombre parecido. Fija en la aplicación versiones compatibles del núcleo, los wrappers y los iconos instalados. La muestra visual es una interpretación sin conexión de HTML/CSS de estas reglas de interacción. Su paleta azul marino oscuro, sus márgenes interiores de 24 píxeles y el dibujo esquemático de los equipos son decisiones originales de la aplicación. Para obtener una representación visual nativa, ejecuta el ejemplo independiente de React con la hoja de estilos oficial e inspecciona los valores del tema calculados. 1. Instala el núcleo, los wrappers de React y los iconos en una estructura inicial de Vite React; conserva el elemento raíz generado. 2. Sustituye main.jsx y style.css por los archivos proporcionados y, en el documento, selecciona classic junto con dark, light o system. 3. Selecciona un registro, márcalo como revisado, filtra la lista y confirma que la gravedad se mantiene mientras se borra la selección oculta. Consulta la especificación complementaria ## Sistema de diseño Siemens iX: ejemplos de componentes ### Muestra interactiva independiente completa Guarda el documento completo como index.html y ábrelo en un navegador. Interpretación independiente sin conexión de HTML/CSS. Paleta, fuente del sistema y dimensiones de la aplicación originales; no es el runtime nativo de iX. ``` Equipment event notebook — iX interpretation
EVENT NOTEBOOKSample plant / offline

Independent HTML interpretation of Siemens iX interaction rules. Original colors, dimensions and fictional equipment records. Local review does not acknowledge or resolve a live alarm.

``` Referencia de código - Marcar un evento como revisado no cambia su gravedad ni resuelve una alarma de un equipo. La entrada nativa de iX muestra por separado la selección de Event List y los atributos de tema. ### Event List con un panel de inspección controlado por separado Un ID seleccionado determina el resaltado del elemento y los detalles. La revisión solo registra un estado local en el cuaderno; la gravedad original sigue visible. ``` // In a Vite React project: npm install @siemens/ix @siemens/ix-react @siemens/ix-icons // src/main.jsx import React, {useState} from 'react'; import {createRoot} from 'react-dom/client'; import {IxEventList, IxEventListItem, IxTypography} from '@siemens/ix-react'; import '@siemens/ix/dist/siemens-ix/siemens-ix.css'; import './style.css'; document.documentElement.dataset.ixTheme='classic'; document.documentElement.dataset.ixColorSchema='dark'; const records=[ {id:'E-014',severity:'alarm',title:'Cooling flow below sample threshold',asset:'Pump A',time:'09:42',note:'Original demonstration record: inspect the cooling circuit before considering a reset.'}, {id:'E-015',severity:'warning',title:'Filter service approaching',asset:'Pump B',time:'09:38',note:'Original demonstration record: schedule a filter inspection.'}, {id:'E-016',severity:'info',title:'Inspection checklist attached',asset:'Line C',time:'09:30',note:'Original demonstration record: a checklist is available for review.'} ]; function App(){ const [filter,setFilter]=useState('all'),[selected,setSelected]=useState('E-014'),[reviewed,setReviewed]=useState([]); const visible=records.filter(r=>filter==='all'||r.severity===filter); const record=visible.find(r=>r.id===selected); return

Equipment event notebook

Fictional records. Reviewing an entry does not control equipment or acknowledge a live alarm.

{visible.map(r=>setSelected(r.id)}>
{r.title}{r.severity.toUpperCase()} · {r.asset} · {r.time}{reviewed.includes(r.id)?' · Reviewed locally':''}
)}
} createRoot(document.getElementById('root')).render(); /* src/style.css — custom dimensions are application choices */ main{max-width:72rem;margin:auto;padding:24px;color:var(--theme-color-std-text)} .workspace{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin-top:24px} .workspace>*{min-width:0}aside{padding:20px;border:1px solid var(--theme-color-soft-bdr)} .record{display:grid;gap:4px;padding:8px;white-space:normal;overflow-wrap:anywhere} .record span{color:var(--theme-color-soft-text)} button,select{font:inherit;padding:10px;background:var(--theme-color-component-1);color:var(--theme-color-std-text);border:1px solid var(--theme-color-std-bdr)} button:focus-visible,select:focus-visible{outline:2px solid var(--theme-color-primary);outline-offset:3px} @media(max-width:700px){.workspace{grid-template-columns:1fr}} ``` Referencia de código - Usa itemColor para el marcador de gravedad y una etiqueta textual de gravedad fácil de leer. - Al cambiar el filtro de gravedad se borra la selección para evitar que el inspector describa un evento oculto. - El botón de revisión local es lógica de la aplicación, no un API de reconocimiento de alarmas de iX inventado. ### Tipografía que se adapta al tema sin copiar tamaños de fuente Usa la propiedad format documentada o el mixin de Sass en lugar de fijar un tamaño de texto para todos los temas. ``` Inspection record @import "@siemens/ix/scss/mixins/font"; .inspection-title { @include typography-h3; } ``` Referencia de código - La vista previa usa una fuente alternativa del sistema; no distribuye las fuentes de marca de Siemens. ## Siemens iX Configuración del agente de IA del sistema de diseño ### Punto de partida para la implementación Completa main.jsx y style.css para una estructura inicial de Vite React con su elemento raíz existente. Los wrappers oficiales, la importación de CSS y las propiedades de Event List están documentados; aquí no se ejecutó la compilación nativa del paquete. La vista previa integrada es una interpretación independiente sin conexión. ``` // In a Vite React project: npm install @siemens/ix @siemens/ix-react @siemens/ix-icons // src/main.jsx import React, {useState} from 'react'; import {createRoot} from 'react-dom/client'; import {IxEventList, IxEventListItem, IxTypography} from '@siemens/ix-react'; import '@siemens/ix/dist/siemens-ix/siemens-ix.css'; import './style.css'; document.documentElement.dataset.ixTheme='classic'; document.documentElement.dataset.ixColorSchema='dark'; const records=[ {id:'E-014',severity:'alarm',title:'Cooling flow below sample threshold',asset:'Pump A',time:'09:42',note:'Original demonstration record: inspect the cooling circuit before considering a reset.'}, {id:'E-015',severity:'warning',title:'Filter service approaching',asset:'Pump B',time:'09:38',note:'Original demonstration record: schedule a filter inspection.'}, {id:'E-016',severity:'info',title:'Inspection checklist attached',asset:'Line C',time:'09:30',note:'Original demonstration record: a checklist is available for review.'} ]; function App(){ const [filter,setFilter]=useState('all'),[selected,setSelected]=useState('E-014'),[reviewed,setReviewed]=useState([]); const visible=records.filter(r=>filter==='all'||r.severity===filter); const record=visible.find(r=>r.id===selected); return

Equipment event notebook

Fictional records. Reviewing an entry does not control equipment or acknowledge a live alarm.

{visible.map(r=>setSelected(r.id)}>
{r.title}{r.severity.toUpperCase()} · {r.asset} · {r.time}{reviewed.includes(r.id)?' · Reviewed locally':''}
)}
} createRoot(document.getElementById('root')).render(); /* src/style.css — custom dimensions are application choices */ main{max-width:72rem;margin:auto;padding:24px;color:var(--theme-color-std-text)} .workspace{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin-top:24px} .workspace>*{min-width:0}aside{padding:20px;border:1px solid var(--theme-color-soft-bdr)} .record{display:grid;gap:4px;padding:8px;white-space:normal;overflow-wrap:anywhere} .record span{color:var(--theme-color-soft-text)} button,select{font:inherit;padding:10px;background:var(--theme-color-component-1);color:var(--theme-color-std-text);border:1px solid var(--theme-color-std-bdr)} button:focus-visible,select:focus-visible{outline:2px solid var(--theme-color-primary);outline-offset:3px} @media(max-width:700px){.workspace{grid-template-columns:1fr}} ``` ### Una instrucción para tu proyecto ``` Crea un cuaderno de eventos de Siemens iX con las propiedades verificadas de Event List y los atributos de tema del documento que se describen en esta guía. Mantén la gravedad independiente de la selección y de la revisión local. En la versión nativa, usa colores semánticos del tema. No des a entender nunca que una acción del cuaderno resuelve una alarma física. Etiqueta los filtros, permite usar las filas con el teclado y coloca el inspector debajo en pantallas estrechas. ``` ## Sistema de diseño Siemens iX: fuentes y alcance Guía independiente de OpenDesign. Los datos de eventos y la ilustración de los equipos son ficticios. Los estilos de la vista previa son una interpretación original; el ejemplo independiente de React usa el API de iX documentado. No se implementan conexión a máquinas, telemetría ni reconocimiento de alarmas en tiempo real. - Instalación de React Paquetes, CSS y atributos de tema. - Instantánea de API de los componentes Propiedades y eventos reales de los eventos. - Fundamentos del color Funciones de superficie, lectura y estado. - Tipografía Categorías de texto y sus funciones. - Implementación de la tipografía Formato y entrada de Sass. - Bordes Jerarquía de límites. - Event List Ejemplos de componentes y variaciones de densidad. ## Sistema de diseño Siemens iX: recursos relacionados ### Sprout Social Seeds Inspecciona los tokens públicos reales de Seeds para color, espaciado, tipografía de producto y bordes mediante una cola editorial completa, con selección múltiple, estados vacíos con filtros y opción para deshacer. ### SumUp Circuit Una guía de Circuit con tokens semánticos exactos, propiedades de validación nativas, un editor completo de artículos para comerciantes y una vista previa ilustrada para clientes. ### TDesign Crea un editor compacto de políticas de API con TDesign React: roles de tema concretos, su escala de tamaños de dos píxeles, registro de campos Form y una composición tipada de Table. - [Referencia de implementación](https://ix.siemens.io/docs/components/event-list/code) - [Fuente](https://ix.siemens.io/docs/home/installation/react) - [Fuente](https://ix.siemens.io/docs/styles/colors) - [Fuente](https://ix.siemens.io/docs/styles/borders) - [Fuente](https://ix.siemens.io/docs/styles/typography/guide) - [Fuente](https://raw.githubusercontent.com/siemens/ix/main/packages/core/component-api.json) - [Consulta la especificación complementaria](https://ix.siemens.io/docs/components/event-list/code) - [Consulta la especificación complementaria](https://ix.siemens.io/docs/styles/colors) - [Consulta la especificación complementaria](https://ix.siemens.io/docs/styles/typography/code) - [Consulta la especificación complementaria](https://raw.githubusercontent.com/siemens/ix/main/packages/core/component-api.json) - [Consulta la especificación complementaria](https://ix.siemens.io/docs/guidelines/accessibility/code) - [Consulta la especificación complementaria](https://ix.siemens.io/docs/home/installation/react) - [Referencia de código](https://ix.siemens.io/docs/components/event-list/code) - [Referencia de código](https://raw.githubusercontent.com/siemens/ix/main/packages/core/component-api.json) - [Referencia de código](https://ix.siemens.io/docs/styles/typography/code) - [Instalación de React Paquetes, CSS y atributos de tema.](https://ix.siemens.io/docs/home/installation/react) - [Instantánea de API de los componentes Propiedades y eventos reales de los eventos.](https://raw.githubusercontent.com/siemens/ix/main/packages/core/component-api.json) - [Fundamentos del color Funciones de superficie, lectura y estado.](https://ix.siemens.io/docs/styles/colors) - [Tipografía Categorías de texto y sus funciones.](https://ix.siemens.io/docs/styles/typography/guide) - [Implementación de la tipografía Formato y entrada de Sass.](https://ix.siemens.io/docs/styles/typography/code) - [Bordes Jerarquía de límites.](https://ix.siemens.io/docs/styles/borders) - [Event List Ejemplos de componentes y variaciones de densidad.](https://ix.siemens.io/docs/components/event-list/code)