# Sistema de diseño Microsoft Fluent 2 ## Microsoft Fluent 2 Vista previa de la interfaz del sistema de diseño Alterna entre Resumen y Personas, cambia el tema web y prueba adiciones no válidas, duplicadas y correctas en local. No se envía ninguna invitación. ## Microsoft Fluent 2 Referencia de diseño del sistema de diseño Referencias web de Fluent UI React v9. Los valores numéricos globales proceden de las fuentes de tokens enlazadas de React. Los valores de color de abajo corresponden al mapeo de alias claro con brandWeb, no a los comentarios hexadecimales obsoletos del ejemplo en alias/lightColor.ts. Los colores oscuros y los temas de Teams tienen mapeos independientes. Actualmente, la tabla tipográfica del sitio indica Subtitle1 a 20/26; la fuente React fonts.ts usa 20/28, valor que sigue esta implementación. Fuentes consultadas el 3 de octubre de 2026; comprueba la versión indicada en tu archivo de bloqueo. ### Roles neutros del tema claro | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | colorNeutralForeground1 | #242424 | Texto principal del documento. | | colorNeutralForeground2 | #424242 | Etiquetas secundarias. | | colorNeutralForeground3 | #616161 | Metadatos; comprueba también el contraste final. | | colorNeutralBackground1 | #ffffff | Superficie principal. | | colorNeutralBackground2 | #fafafa | Superficie de apoyo discreta. | | colorNeutralBackground3 | #f5f5f5 | Lienzo del espacio de trabajo. | | colorNeutralStroke1 | #d1d1d1 | Borde de componente habitual. | | colorNeutralStroke2 | #e0e0e0 | Separador sutil. | | colorNeutralStrokeAccessible | #616161 | Borde de control de mayor contraste. | | colorNeutralForegroundOnBrand | #ffffff | Texto sobre los fondos de marca admitidos. | | colorStrokeFocus1 / colorStrokeFocus2 | #ffffff / #000000 | Dos colores de foco; conserva el contraste en el borde del componente. | ### Roles de marca web, resueltos a partir de brandWeb | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | colorBrandBackground | #0f6cbd · brandWeb[80] | Acción principal en webLightTheme. | | colorBrandBackgroundHover | #115ea3 · brandWeb[70] | Variante al pasar el cursor de esa acción. | | colorBrandBackgroundPressed | #0c3b5e · brandWeb[40] | Variante al presionar; no es un estado genérico de selección. | | colorBrandBackground2 | #ebf3fc · brandWeb[160] | Fondo sutil de marca. | | colorBrandForegroundLink | #115ea3 · brandWeb[70] | Color de primer plano de los enlaces en el tema web claro. | ### Espaciado horizontal y vertical | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | spacingHorizontalNone / spacingVerticalNone | 0 | Elige el eje según la dirección del diseño; paso de espaciado compartido. | | spacingHorizontalXXS / spacingVerticalXXS | 2px | Elige el eje según la dirección del diseño; paso de espaciado compartido. | | spacingHorizontalXS / spacingVerticalXS | 4px | Elige el eje según la dirección del diseño; paso de espaciado compartido. | | spacingHorizontalSNudge / spacingVerticalSNudge | 6px | Elige el eje según la dirección del diseño; ajuste de alineación de iconos. | | spacingHorizontalS / spacingVerticalS | 8px | Elige el eje según la dirección del diseño; paso de espaciado compartido. | | spacingHorizontalMNudge / spacingVerticalMNudge | 10px | Elige el eje según la dirección del diseño; ajuste de alineación de iconos. | | spacingHorizontalM / spacingVerticalM | 12px | Elige el eje según la dirección del diseño; paso de espaciado compartido. | | spacingHorizontalL / spacingVerticalL | 16px | Elige el eje según la dirección del diseño; paso de espaciado compartido. | | spacingHorizontalXL / spacingVerticalXL | 20px | Elige el eje según la dirección del diseño; paso de espaciado compartido. | | spacingHorizontalXXL / spacingVerticalXXL | 24px | Elige el eje según la dirección del diseño; paso de espaciado compartido. | | spacingHorizontalXXXL / spacingVerticalXXXL | 32px | Elige el eje según la dirección del diseño; paso de espaciado compartido. | ### React combinaciones tipográficas web | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Caption2 · fontSizeBase100 | 10px / 14px / 400 | Tamaño / altura de línea / grosor. Combínalo con lineHeightBase100. | | Caption1 · fontSizeBase200 | 12px / 16px / 400 | Tamaño / altura de línea / grosor. Combínalo con lineHeightBase200. | | Body1 · fontSizeBase300 | 14px / 20px / 400 | Tamaño / altura de línea / grosor. Combínalo con lineHeightBase300. | | Body2 / Subtitle2 · fontSizeBase400 | 16px / 22px / 400 / 600 | Tamaño / altura de línea / grosor. Combínalo con lineHeightBase400. | | Subtitle1 · fontSizeBase500 | 20px / 28px / 600 | Tamaño / altura de línea / grosor. Combínalo con lineHeightBase500. | | Title3 · fontSizeBase600 | 24px / 32px / 600 | Tamaño / altura de línea / grosor. Combínalo con lineHeightBase600. | | Title2 · fontSizeHero700 | 28px / 36px / 600 | Tamaño / altura de línea / grosor. Combínalo con lineHeightHero700. | | Title1 · fontSizeHero800 | 32px / 40px / 600 | Tamaño / altura de línea / grosor. Combínalo con lineHeightHero800. | | LargeTitle · fontSizeHero900 | 40px / 52px / 600 | Tamaño / altura de línea / grosor. Combínalo con lineHeightHero900. | | Display · fontSizeHero1000 | 68px / 92px / 600 | Tamaño / altura de línea / grosor. Combínalo con lineHeightHero1000. | ### Familia y grosor de fuente | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | fontFamilyBase | 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif | Pila web predeterminada del proveedor; no etiquetes la fuente del sitio que la rodea como Fluent. | | fontFamilyMonospace | Consolas, 'Courier New', Courier, monospace | Código e identificadores técnicos. | | fontWeightRegular / Medium / Semibold / Bold | 400 / 500 / 600 / 700 | Usa el grosor del rol junto con su escala tipográfica correspondiente. | ### Tokens de forma | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | borderRadiusNone | 0 | Usa primero el valor predeterminado del componente; este es un token disponible, no un requisito para todas las superficies. | | borderRadiusSmall | 2px | Usa primero el valor predeterminado del componente; este es un token disponible, no un requisito para todas las superficies. | | borderRadiusMedium | 4px | Usa primero el valor predeterminado del componente; este es un token disponible, no un requisito para todas las superficies. | | borderRadiusLarge | 6px | Usa primero el valor predeterminado del componente; este es un token disponible, no un requisito para todas las superficies. | | borderRadiusXLarge | 8px | Usa primero el valor predeterminado del componente; este es un token disponible, no un requisito para todas las superficies. | | borderRadius2XLarge | 12px | Usa primero el valor predeterminado del componente; este es un token disponible, no un requisito para todas las superficies. | | borderRadius3XLarge | 16px | Usa primero el valor predeterminado del componente; este es un token disponible, no un requisito para todas las superficies. | | borderRadius4XLarge | 24px | Usa primero el valor predeterminado del componente; este es un token disponible, no un requisito para todas las superficies. | | borderRadius5XLarge | 32px | Usa primero el valor predeterminado del componente; este es un token disponible, no un requisito para todas las superficies. | | borderRadius6XLarge | 40px | Usa primero el valor predeterminado del componente; este es un token disponible, no un requisito para todas las superficies. | | borderRadiusCircular | 10000px | Usa primero el valor predeterminado del componente; este es un token disponible, no un requisito para todas las superficies. | ### Escala de duración del movimiento | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | durationUltraFast | 50ms | Token disponible en tiempo de ejecución; el ejemplo usa Fast al pasar el cursor y elimina las transiciones cuando se activa la preferencia de movimiento reducido. | | durationFaster | 100ms | Token disponible en tiempo de ejecución; el ejemplo usa Fast al pasar el cursor y elimina las transiciones cuando se activa la preferencia de movimiento reducido. | | durationFast | 150ms | Token disponible en tiempo de ejecución; el ejemplo usa Fast al pasar el cursor y elimina las transiciones cuando se activa la preferencia de movimiento reducido. | | durationNormal | 200ms | Token disponible en tiempo de ejecución; el ejemplo usa Fast al pasar el cursor y elimina las transiciones cuando se activa la preferencia de movimiento reducido. | | durationGentle | 250ms | Token disponible en tiempo de ejecución; el ejemplo usa Fast al pasar el cursor y elimina las transiciones cuando se activa la preferencia de movimiento reducido. | | durationSlow | 300ms | Token disponible en tiempo de ejecución; el ejemplo usa Fast al pasar el cursor y elimina las transiciones cuando se activa la preferencia de movimiento reducido. | | durationSlower | 400ms | Token disponible en tiempo de ejecución; el ejemplo usa Fast al pasar el cursor y elimina las transiciones cuando se activa la preferencia de movimiento reducido. | | durationUltraSlow | 500ms | Token disponible en tiempo de ejecución; el ejemplo usa Fast al pasar el cursor y elimina las transiciones cuando se activa la preferencia de movimiento reducido. | ### Los cambios de tema son semánticos, no una inversión | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | colorNeutralBackground1 | #292929 | Superficie principal oscura en lugar de la clara #ffffff. | | colorNeutralForeground1 | #ffffff | Texto principal oscuro en lugar del claro #242424. | | colorNeutralForeground2 | #d6d6d6 | Texto secundario oscuro. | | colorBrandBackground | brandWeb[70] = #115ea3 | Relleno principal oscuro; el modo claro usa brandWeb[80]. | | colorBrandForegroundLink | brandWeb[100] = #479ef5 | Rol de enlace oscuro; distinto del relleno del botón principal. | ## Microsoft Fluent 2 Guía completa del sistema de diseño 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. ## Sistema de diseño Microsoft Fluent 2 e implementación v9 de React ### Elige explícitamente la implementación web > Fluent 2 es un lenguaje de diseño multiplataforma. Esta guía toma una decisión más específica y práctica: @fluentui/react-components, la biblioteca convergente React v9. El proveedor principal es FluentProvider, y este ejemplo usa webLightTheme o webDarkTheme. Un tema de Teams es una configuración de marca independiente; el conocido morado de Teams no es la escala azul predeterminada para la web. Los recursos nativos de Windows, iOS y Android tampoco son paquetes React intercambiables. El ejemplo completo de abajo muestra una descripción del proyecto y una lista local de accesos. Combina Title3 y Body1 para establecer la jerarquía, TabList y Tab para ofrecer dos vistas, y Dialog con Field, Input y Select para tomar una decisión de acceso. El código no afirma que invite a una persona real. Esta separación permite demostrar el comportamiento de los componentes sin inventar un servicio para compartir. Consulta la especificación complementaria ### Qué proporciona realmente el proveedor FluentProvider coloca las variables del tema en su subárbol. Una superficie personalizada con el estilo tokens.colorNeutralBackground2 sigue el tema seleccionado, mientras que una superficie con el color blanco codificado no lo hace. Coloca el proveedor por encima de los componentes que necesitan el tema. La biblioteca aplica estilos a sus componentes mediante su entorno de ejecución de estilos; el ejemplo no te pide importar un archivo fluent.css inexistente. Consulta la especificación complementaria ## Colores semánticos del sistema de diseño Microsoft Fluent 2 y la escala de marca web real ### Resuelve los alias según la marca elegida La fuente de alias del tema claro asigna colorBrandBackground a brand[80]. El tema web proporciona brandWeb, donde el paso 80 es #0f6cbd. Por lo tanto, #0f6cbd es el relleno principal resultante en este ejemplo. El archivo de alias contiene comentarios ilustrativos antiguos con valores hexadecimales; interpretar esos comentarios como la paleta web actual daría un resultado incorrecto. El valor se establece mediante la relación de origen, no mediante el comentario. Usa colorNeutralForeground1 para la descripción, colorNeutralForeground2 para las etiquetas complementarias y colorNeutralBackground3 para el espacio de trabajo circundante. Una acción principal puede usar colorBrandBackground con colorNeutralForegroundOnBrand. Los nombres de los roles siguen siendo el contrato cuando cambia el tema. El permiso de una persona se representa con texto; un borde azul o un indicador azul en una pestaña expresa la selección, no la autorización. Consulta la especificación complementaria ### El modo oscuro cambia la correspondencia En el modo oscuro, la superficie principal se resuelve en #292929 y el texto principal en #ffffff. El relleno principal de marca usa el paso 70, mientras que el color de primer plano de los enlaces usa el paso 100. Por eso, la vista previa cambia conjuntamente los roles de los tokens en lugar de limitarse a invertir el fondo de la página. Al alternar el tema, compara el cuadro de diálogo de acceso, la pestaña seleccionada y los metadatos atenuados: todos forman parte del mismo límite temático. Consulta la especificación complementaria ## Tipografía del sistema de diseño Microsoft Fluent 2: asigna roles de texto a tokens de tiempo de ejecución ### Usa valores emparejados de tamaño y altura de línea Body1 es el estilo de lectura base: 14px con una altura de línea de 20px. Caption1 es 12/16, Subtitle2 es 16/22 con grosor semibold y Title3 es 24/32 con grosor semibold. Estos pares crean una jerarquía diferenciada de títulos, etiquetas y cuerpo de texto sin tamaños intermedios arbitrarios. La tabla de arriba incluye los pasos más grandes como referencia, pero un espacio de trabajo compacto no necesita un titular de tamaño de presentación. La fuente de tokens React y el sitio web de diseño discrepan actualmente en un detalle útil: fontSizeBase500 / lineHeightBase500 es 20/28 en la fuente de tiempo de ejecución, mientras que el gráfico de diseño web indica Subtitle1 en 20/26. Este ejemplo sigue el par de tiempo de ejecución. Considera estas diferencias una comprobación de versión e implementación, en lugar de combinar sin indicarlo los números que mejor encajen en la maqueta. Consulta la especificación complementaria ### Estilos predefinidos de texto y pila de fuentes Usa la semántica HTML junto con el estilo visual predefinido: Title3 as="h1" es un encabezado; aplicar estilos por sí solo no crea la estructura del documento. La pila base empieza con Segoe UI e incluye alternativas para distintas plataformas. No incluyas una fuente propietaria solo para que una captura de pantalla coincida. El ejemplo usa la pila documentada, por lo que los glifos exactos dependen de las fuentes instaladas en el dispositivo donde se visualice. Para texto personalizado, typographyStyles.body1 agrupa la familia, el tamaño, el grosor y la altura de línea. Prefiere esa combinación en lugar de copiar solo fontSizeBase300. La lista de accesos usa direcciones de correo legibles que se ajustan a varias líneas; la etiqueta del permiso usa énfasis semibold, pero no compite con el título de la página. Consulta la especificación complementaria ## Espaciado, forma y densidad en un espacio de trabajo del sistema de diseño Microsoft Fluent 2 ### Los nombres de espaciado de React no son los nombres de la herramienta de diseño Las directrices generales de diseño Fluent usan nombres de tamaño globales y un ritmo de cuatro unidades, que incluye 2, 6 y 10 para los ajustes de alineación. React ofrece alias específicos por eje: spacingHorizontalS es 8px, M es 12px, L es 16px y XXL es 24px, con nombres verticales equivalentes. No traduzcas size120 como spacingHorizontal120; ese identificador de React no existe. Esta composición utiliza un relleno de 24px en el panel, una separación de 16px entre los campos del formulario y un espaciado de 12px para las filas de acceso. El ancho exacto de la página y la disposición en dos columnas son decisiones de la aplicación, no puntos de quiebre oficiales de Fluent. En una pantalla estrecha, el contexto complementario del equipo pasa debajo de la descripción, mientras las dos etiquetas de pestaña siguen visibles. Consulta la especificación complementaria ### La forma describe la escala del componente Los tokens de radio disponibles incluyen Medium, de 4px, y XLarge, de 8px, pero su disponibilidad no significa que todos los controles deban tener el mismo radio. El ejemplo de HTML utiliza una forma de control de 4px y una superficie de documento de 8px como decisiones explícitas para este estudio. Los componentes nativos deben conservar su anatomía predeterminada compatible, a menos que un requisito de diseño justifique una modificación. No accedas a los nombres de clase generados para imponer una forma diferente. Consulta la especificación complementaria ## Sistema de diseño Microsoft Fluent 2 TabList: selección, paneles y comportamiento del teclado ### El valor seleccionado es estado de la aplicación El ejemplo mantiene tab en el estado de React y lo pasa a selectedValue. onTabSelect recibe data.value, que actualiza ese estado. Cada Tab tiene un valor estable y apunta a su panel mediante aria-controls. Cada panel tiene role="tabpanel", aria-labelledby y una condición hidden. El componente no proporciona la descripción del proyecto ni la lista de accesos; estos elementos se representan explícitamente. API separa el enfoque de la selección: selectTabOnFocus tiene el valor predeterminado false. En el ejemplo independiente, las teclas Left/Right y Home/End mueven el foco, y Enter o Space activa la pestaña enfocada. Este comportamiento de activación manual permite revisar las opciones de pestaña sin provocar un cambio inesperado de contenido. Mantén cortas las etiquetas de las pestañas; las directrices oficiales de diseño indican que las pestañas horizontales no se ajustan automáticamente ni tienen desplazamiento. Consulta la especificación complementaria ### Elige otro patrón cuando aumente el número de categorías Descripción y Personas son dos vistas estrechamente relacionadas de un mismo espacio de trabajo, por lo que las pestañas son adecuadas. Una lista de todos los proyectos de la organización sería navegación, no otra fila de pestañas. Si las categorías ya no caben en un ancho reducido, diseña deliberadamente un patrón de desbordamiento u otra forma de selección; reducir las etiquetas hasta volverlas ilegibles no es una estrategia adaptable. Consulta la especificación complementaria ## Campo del sistema de diseño Fluent de Microsoft Fluent 2: etiquetas accesibles y validación significativa ### Un campo es una composición, no una entrada con estilos Field combina un espacio para la etiqueta, el control secundario, una indicación opcional y un mensaje de validación. Su contrato documentado para el control incluye id, aria-labelledby, aria-describedby, aria-invalid y aria-required. Los controles de entrada de Fluent pueden ser elementos secundarios directos; los controles personalizados pueden consumir las propiedades de la función de renderizado. Por eso, envolver el componente Input de correo electrónico con Field resulta más útil que colocar texto sin relación encima de una entrada. En el ejemplo, validationState solo tiene el valor error después de enviar un valor no válido. La aplicación comprueba que el valor tenga formato de correo electrónico y que no haya duplicados en su lista en memoria. Conserva el valor introducido y proporciona una indicación para corregirlo mediante validationMessage. Field presenta y vincula ese resultado; no determina si la dirección existe, envía una invitación ni concede acceso. Consulta la especificación complementaria ### Mantén el estado de validación separado del permiso El componente Select de permisos contiene Puede ver y Puede editar, mientras que el campo de correo electrónico tiene su propio estado de error. Evita que todo el cuadro de diálogo se vuelva rojo porque una dirección esté incompleta. required es una indicación accesible, no un sustituto de la autorización o validación del servidor. El formulario de ejemplo usa noValidate para mostrar de forma coherente su mensaje de validación explícito; un servicio de producción debe volver a validar la solicitud. - Dirección vacía o con formato incorrecto: mantén abierto el cuadro de diálogo y explica el formato aceptado. - Dirección que ya está en la lista de accesos local: muestra un mensaje específico sobre el duplicado sin añadir otra fila. - Dirección nueva y válida: añade localmente el permiso elegido, cierra el cuadro de diálogo y muestra un resultado que indique con claridad que solo se ha aplicado de forma local. Consulta la especificación complementaria ## Cuadro de diálogo del sistema de diseño Fluent de Microsoft Fluent 2: un formulario dentro de la estructura compatible ### Mantén el botón de envío dentro del formulario La composición consta de Dialog, DialogTrigger, DialogSurface, un elemento form y DialogBody, que contiene DialogTitle, DialogContent y DialogActions. El formulario envuelve el cuerpo para que el botón de envío del pie participe en el envío. Cancel tiene type="button" y se encuentra dentro de un DialogTrigger que cierra el cuadro; de lo contrario, el tipo predeterminado del botón podría enviar el formulario accidentalmente. open y onOpenChange controlan la visibilidad. disableButtonEnhancement impide que el disparador aplique mejoras redundantes a un Button de Fluent que ya proporciona el comportamiento de botón. El controlador de éxito cierra el cuadro solo después de que la validación local se complete correctamente. Si la validación falla, el mismo correo electrónico y permiso siguen disponibles para corregirlos. Consulta la especificación complementaria ### Elige el comportamiento modal según la decisión real Esta decisión breve sobre el acceso utiliza el tipo modal predeterminado. Un cuadro de diálogo no modal permitiría trabajar en segundo plano, mientras que un cuadro de diálogo de alerta está pensado para decisiones urgentes y tiene un comportamiento de cierre más estricto. Un formulario de acceso normal no necesita semántica de alerta. Las directrices oficiales indican que el foco debe estar dentro del cuadro de diálogo y volver a su disparador al cerrarlo; la implementación independiente utiliza el elemento nativo dialog y restablece explícitamente el foco en su disparador. Consulta la especificación complementaria ## Estilos personalizados del sistema de diseño Fluent de Microsoft Fluent 2 sin alterar el tema ### Usa makeStyles y variables semánticas El código completo utiliza makeStyles con tokens para las superficies, las separaciones y el radio. Así, el panel personalizado mantiene la coherencia con el proveedor. El nombre de clase generado es un detalle de implementación; no lo copies de DevTools en una hoja de estilos. Para probar otros temas, cambia el tema del proveedor y examina conjuntamente los controles nativos y las áreas personalizadas. La escala de duración publicada va de 50ms a 500ms. El ejemplo HTML usa durationFast, de 150ms, para cambios sencillos al pasar el cursor y elimina esas transiciones cuando está activo prefers-reduced-motion. Es una decisión de implementación que utiliza un token disponible, no una afirmación de que todas las interacciones de Fluent deban durar 150ms. El contenido y los mensajes de error siguen siendo comprensibles aunque se elimine el movimiento. Consulta la especificación complementaria ### Pon a prueba los límites de una interpretación El ejemplo integrado está etiquetado intencionalmente como HTML/CSS, no como una implementación nativa de Fluent. Muestra los valores verificados y la interacción del cuadro de diálogo de acceso sin descargar un framework en la vista previa. Usa el ejemplo completo de React para evaluar el estilo nativo, los portales, la gestión del foco y las actualizaciones de componentes. Superar las comprobaciones de interacción independientes es evidencia a favor de este ejemplo, no una certificación de una aplicación de uso compartido lista para producción. Consulta la especificación complementaria ## Sistema de diseño Microsoft Fluent 2: instala y verifica la composición completa ### Un punto de entrada ejecutable, no un esquema de tareas La configuración está pensada para una aplicación React existente que tenga un elemento con id root. Instala el conjunto v9 y luego añade la entrada JSX a la aplicación. Se incluyen juntos los imports, el proveedor, el árbol de componentes, los controladores, el estado y el renderizado en la raíz. No se invoca ningún servicio externo para compartir API. Si tu plantilla inicial ya renderiza App, conserva su entrada raíz y exporta App en lugar de crear una segunda raíz. Registra la versión resuelta del paquete en el archivo de bloqueo. Las referencias al código fuente enlazadas describen la implementación de React v9 que se inspeccionó, mientras que las URL de master pueden cambiar. Antes de actualizar, compara el tema exportado y el comportamiento exacto de Field, TabList y Dialog que se usan aquí. La configuración evita deliberadamente combinar componentes de v8 @fluentui/react con ejemplos de v9. 1. Instala @fluentui/react-components@9 en el proyecto React existente y conserva el archivo de bloqueo generado. 2. Renderiza la entrada proporcionada dentro de un único FluentProvider, con webLightTheme como tema inicial. 3. Abre el cuadro de diálogo, envía una dirección no válida, corrígela y confirma que la persona añadida aparezca únicamente en el estado local. 4. Repite la prueba con webDarkTheme y navegación mediante teclado; verifica la asociación del panel, el anuncio del error y la devolución del foco. Consulta la especificación complementaria ### Qué conectar en un producto real para compartir Sustituye la adición local solo después de definir el contrato del servicio: actor autenticado, espacio de trabajo de destino, valores de permiso permitidos, resultado de la invitación y comportamiento ante duplicados. Mantén abierto el cuadro de diálogo si el servicio rechaza una solicitud y muestra el resultado confirmado en lugar de afirmar de forma optimista que se concedió el acceso. Estas reglas no forman parte de Fluent, pero el código deja explícito el punto de integración en vez de ocultarlo tras un botón de envío genérico. Consulta la especificación complementaria ## Ejemplos de componentes del sistema de diseño Microsoft Fluent 2 ### Muestra interactiva independiente completa Guarda el documento completo como index.html y ábrelo en un navegador. Interpretación independiente en HTML/CSS de los tokens web de Fluent UI React v9 y de la estructura documentada de Field, TabList y Dialog. No es un entorno de ejecución nativo de componentes Fluent. ``` Fluent web workspace study
Northstar workspace / Product team
Team workspace · October launch

Launch workspace

One brief. A clear decision. The right people.

Alex Chen · Product design
Updated today at 09:30

A more welcoming first project

Help a new team move from an empty workspace to its first useful result. This review focuses on the welcome screen and the first-project setup.

The decision

Should a sample project be created automatically, or offered as an option?

We want a clear starting point without filling the workspace with content someone did not choose. Review both paths before the team walkthrough.

Review checklist

Checklist changes are local to this example.

Fluent UI React v9 web-token study · HTML/CSS interpretation, not native library components. Try tabs, theme, checkboxes and the access form.

Add a person to Launch workspace

Choose an address and permission. This demonstration updates the local list only.

For example, jordan@example.com
Viewers can read; editors can change the brief in a real application
 ``` Referencia de código - El cuadro de diálogo de acceso y las pestañas de este documento usan controles nativos de HTML; ejecuta la entrada independiente de React v9 para evaluar el comportamiento de FluentProvider, Field y Dialog. ### Entrada de implementación nativa completa La implementación completa de la configuración, reunida aquí junto con las explicaciones específicas de API. Sigue los requisitos documentados de paquetes y compilación en la sección de configuración. ``` // Terminal: npm install @fluentui/react-components@9 // Existing React application; index.html must contain
. // Entry file: src/main.jsx import * as React from 'react'; import { createRoot } from 'react-dom/client'; import { FluentProvider, webLightTheme, webDarkTheme, makeStyles, tokens, Button, Body1, Title3, TabList, Tab, Field, Input, Select, Dialog, DialogTrigger, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions } from '@fluentui/react-components'; const useStyles = makeStyles({ page: { maxWidth: '880px', margin: '0 auto', padding: tokens.spacingHorizontalXXL }, header: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: tokens.spacingHorizontalL }, panel: { padding: tokens.spacingHorizontalXXL, marginTop: tokens.spacingVerticalL, backgroundColor: tokens.colorNeutralBackground2, borderRadius: tokens.borderRadiusXLarge }, form: { display: 'grid', gap: tokens.spacingVerticalL }, row: { display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', gap: tokens.spacingHorizontalM, paddingTop: tokens.spacingVerticalM, paddingBottom: tokens.spacingVerticalM }, }); function Workspace({ dark, setDark }) { const styles = useStyles(); const [tab, setTab] = React.useState('brief'); const [open, setOpen] = React.useState(false); const [email, setEmail] = React.useState(''); const [permission, setPermission] = React.useState('Can view'); const [error, setError] = React.useState(''); const [notice, setNotice] = React.useState(''); const [people, setPeople] = React.useState([{ email: 'alex@example.com', permission: 'Owner' }]); function submit(event) { event.preventDefault(); const value = email.trim().toLowerCase(); if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) { setError('Enter an email address such as name@example.com'); return; } if (people.some(person => person.email === value)) { setError('This address already appears in the local access list'); return; } setPeople(previous => [...previous, { email: value, permission }]); setNotice(`Added ${value} as ${permission.toLowerCase()} in this local example. No invitation was sent.`); setEmail(''); setError(''); setOpen(false); setTab('people'); } return
Launch workspace
Project brief and access settings · local demonstration setTab(data.value)}> Brief People setOpen(data.open)}>
Add a person to Launch workspace

This example updates local state only. It does not send email or change real access.

{ setEmail(data.value); setError(''); }} />

{notice}

; } function App() { const [dark, setDark] = React.useState(false); return ; } createRoot(document.getElementById('root')).render(); ``` Referencia de código - Composición completa de componentes de React v9 para una aplicación React existente. La vista previa independiente es una interpretación aparte en HTML/CSS. Este código solo realiza validaciones locales y actualizaciones de estado; no envía correos electrónicos ni modifica permisos reales. Se comprobaron las API de origen; no se afirma que la compilación con el paquete nativo funcione hasta probarla en el proyecto de destino. ### Field + Input + Select: un formulario de acceso con etiquetas Estos fragmentos usan las variables de estado y los imports de la configuración completa que aparece a continuación. Field se encarga de mostrar la etiqueta, la indicación y la validación; la aplicación se encarga de la regla para el correo electrónico y de comprobar si hay duplicados. ``` { setEmail(data.value); setError(''); }} /> ``` Referencia de código - required proporciona una indicación accesible de que el campo es obligatorio; no implementa la regla de validación de la aplicación. - El estado de validación predeterminado pasa a ser error cuando existe validationMessage. Establece none explícitamente cuando no deba mostrarse ningún error. - El onChange de Input proporciona la cadena actual en data.value; no confundas su controlador con un evento de entrada del DOM sin más. ### TabList controlado con paneles asociados explícitamente TabList controla la selección y el comportamiento de las pestañas. Renderiza los paneles de contenido por tu cuenta y mantén conectados sus ids y nombres accesibles con cada Tab. ``` setTab(data.value)}> Brief People ``` Referencia de código - selectedValue debe definirse en TabList; cada Tab tiene un valor distinto. - selectTabOnFocus es false de forma predeterminada. El foco con las flechas y la activación son acciones independientes, salvo que se cambie deliberadamente ese comportamiento. - Las pestañas horizontales de Fluent no se ajustan a varias líneas ni se desplazan automáticamente; el ejemplo usa dos etiquetas cortas para que sigan visibles. ## Configuración del agente del sistema de diseño Microsoft Fluent 2 ### Punto de partida para la implementación Composición completa de componentes de React v9 para una aplicación React existente. La vista previa independiente es una interpretación aparte en HTML/CSS. Este código solo realiza validaciones locales y actualizaciones de estado; no envía correos electrónicos ni modifica permisos reales. Se comprobaron las API de origen; no se afirma que la compilación con el paquete nativo funcione hasta probarla en el proyecto de destino. ``` // Terminal: npm install @fluentui/react-components@9 // Existing React application; index.html must contain
. // Entry file: src/main.jsx import * as React from 'react'; import { createRoot } from 'react-dom/client'; import { FluentProvider, webLightTheme, webDarkTheme, makeStyles, tokens, Button, Body1, Title3, TabList, Tab, Field, Input, Select, Dialog, DialogTrigger, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions } from '@fluentui/react-components'; const useStyles = makeStyles({ page: { maxWidth: '880px', margin: '0 auto', padding: tokens.spacingHorizontalXXL }, header: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: tokens.spacingHorizontalL }, panel: { padding: tokens.spacingHorizontalXXL, marginTop: tokens.spacingVerticalL, backgroundColor: tokens.colorNeutralBackground2, borderRadius: tokens.borderRadiusXLarge }, form: { display: 'grid', gap: tokens.spacingVerticalL }, row: { display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', gap: tokens.spacingHorizontalM, paddingTop: tokens.spacingVerticalM, paddingBottom: tokens.spacingVerticalM }, }); function Workspace({ dark, setDark }) { const styles = useStyles(); const [tab, setTab] = React.useState('brief'); const [open, setOpen] = React.useState(false); const [email, setEmail] = React.useState(''); const [permission, setPermission] = React.useState('Can view'); const [error, setError] = React.useState(''); const [notice, setNotice] = React.useState(''); const [people, setPeople] = React.useState([{ email: 'alex@example.com', permission: 'Owner' }]); function submit(event) { event.preventDefault(); const value = email.trim().toLowerCase(); if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) { setError('Enter an email address such as name@example.com'); return; } if (people.some(person => person.email === value)) { setError('This address already appears in the local access list'); return; } setPeople(previous => [...previous, { email: value, permission }]); setNotice(`Added ${value} as ${permission.toLowerCase()} in this local example. No invitation was sent.`); setEmail(''); setError(''); setOpen(false); setTab('people'); } return
Launch workspace
Project brief and access settings · local demonstration setTab(data.value)}> Brief People setOpen(data.open)}>
Add a person to Launch workspace

This example updates local state only. It does not send email or change real access.

{ setEmail(data.value); setError(''); }} />

{notice}

; } function App() { const [dark, setDark] = React.useState(false); return ; } createRoot(document.getElementById('root')).render(); ``` ### Una instrucción para tu proyecto ``` Usa Fluent UI React v9 desde @fluentui/react-components. Renderiza FluentProvider con webLightTheme y un control para alternar a webDarkTheme. Compón la descripción con Title3 y Body1, vistas controladas de TabList/Tab con paneles explícitos y un cuadro de diálogo de acceso con Field/Input/Select y un formulario real. Usa tokens para las superficies personalizadas y el espaciado. Sigue el ejemplo de componentes proporcionado y los pares de tipos en tiempo de ejecución, incluido Subtitle1 en 20/28. Conserva las entradas no válidas, rechaza las direcciones duplicadas locales, devuelve el foco al cuadro de diálogo y describe con precisión las adiciones locales. Conecta un servicio para compartir solo cuando se proporcione su contrato de autorización y resultados. ``` ## Fuentes y alcance del sistema de diseño Microsoft Fluent 2 Un estudio de una aplicación OpenDesign de Fluent UI React v9; no es un producto de Microsoft ni un servicio activo para compartir. La vista previa independiente es una interpretación HTML/CSS de los tokens web verificados y de la estructura de los componentes; el código React de abajo usa componentes nativos de Fluent. Los valores de referencia corresponden a la instantánea del código fuente enlazado que se comprobó el 3 de octubre de 2026; no garantizan que todas las versiones, plataformas o marcas usen valores idénticos. - Punto de entrada del paquete React v9 Proveedor e instalación del conjunto. - Arquitectura de temas Uso de tokens semánticos y temas disponibles. - Tipografía en tiempo de ejecución Pila de fuentes, tamaño, altura de línea y grosores. - Asignación de estilos de texto Preajustes asignados a tokens globales. - Escala tipográfica de diseño Tabla del lenguaje de diseño; Subtitle1 difiere del par en tiempo de ejecución. - Espaciado en tiempo de ejecución Nombres de tokens horizontales y verticales. - Pautas de diseño Espaciado global y consideraciones adaptables. - Tokens de radio Valores de forma disponibles en tiempo de ejecución. - Duraciones del movimiento Valores de duración en tiempo de ejecución. - Asignación semántica del tema claro Asignaciones de alias neutros y de marca. - Asignación semántica del tema oscuro Asignaciones de alias del tema oscuro. - Escalas de marca Valores reales de marca para la web y Teams. - Construcción del tema web webLightTheme usa brandWeb. - Uso de Field Etiquetas, validación y pautas de composición. - Field API Espacios y contrato de accesibilidad para elementos secundarios. - Uso de TabList Pautas de diseño y selección de categorías. - TabList API Opciones de selección controlada y foco. - Uso de Dialog Pautas para la ubicación de formularios y la interacción modal. - Dialog de API Visibilidad controlada y tipos de modal. ## Recursos relacionados con el sistema de diseño Microsoft Fluent 2 ### Monday Vibe Crea un tablero de entregas funcional con tokens de Vibe 4 y controles de React. Distingue los colores semánticos de acción de las etiquetas del tablero, explora los pasos de espaciado con nombre y las abreviaturas tipográficas, y conoce la configuración explícita de CSS que necesita una aplicación nueva. ### Morningstar sistema de diseño Crea una interfaz de investigación donde los números se alineen, los colores de los activos mantengan su significado y la tipografía siga siendo legible. Explora las constantes de MDS, la adopción de Vue 3, la transición a Morningstar Intrinsic y un cuaderno de asignaciones ficticio que se puede ordenar. ### Mozilla Protocol Una guía editorial de Protocol con pilas tipográficas, escalas de espaciado y contenedores reales, una página de lectura adaptable con ilustraciones y un ejemplo completo de formulario nativo de CSS. - [Referencia de implementación](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-components/README.md) - [Fuente](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/alias/lightColor.ts) - [Fuente](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/brandColors.ts) - [Fuente](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/spacings.ts) - [Fuente](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts) - [Fuente](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/borderRadius.ts) - [Fuente](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/durations.ts) - [Fuente](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/alias/darkColor.ts) - [Consulta la especificación complementaria](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-components/README.md) - [Consulta la especificación complementaria](https://github.com/microsoft/fluentui/blob/master/docs/architecture/design-tokens.md) - [Consulta la especificación complementaria](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/alias/lightColor.ts) - [Consulta la especificación complementaria](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/alias/darkColor.ts) - [Consulta la especificación complementaria](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts) - [Consulta la especificación complementaria](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/typographyStyles.ts) - [Consulta la especificación complementaria](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/spacings.ts) - [Consulta la especificación complementaria](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/borderRadius.ts) - [Consulta la especificación complementaria](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-tabs/library/src/components/TabList/TabList.types.ts) - [Consulta la especificación complementaria](https://fluent2.microsoft.design/components/web/react/core/tablist/usage) - [Consulta la especificación complementaria](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-field/library/src/components/Field/Field.types.ts) - [Consulta la especificación complementaria](https://fluent2.microsoft.design/components/web/react/core/field/usage) - [Consulta la especificación complementaria](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-dialog/library/src/components/Dialog/Dialog.types.ts) - [Consulta la especificación complementaria](https://fluent2.microsoft.design/components/web/react/core/dialog/usage) - [Consulta la especificación complementaria](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/durations.ts) - [Referencia de código](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-components/README.md) - [Referencia de código](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-field/library/src/components/Field/Field.types.ts) - [Referencia de código](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-tabs/library/src/components/TabList/TabList.types.ts) - [Punto de entrada del paquete React v9 Proveedor e instalación del conjunto.](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-components/README.md) - [Arquitectura de temas Uso de tokens semánticos y temas disponibles.](https://github.com/microsoft/fluentui/blob/master/docs/architecture/design-tokens.md) - [Tipografía en tiempo de ejecución Pila de fuentes, tamaño, altura de línea y grosores.](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts) - [Asignación de estilos de texto Preajustes asignados a tokens globales.](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/typographyStyles.ts) - [Escala tipográfica de diseño Tabla del lenguaje de diseño; Subtitle1 difiere del par en tiempo de ejecución.](https://fluent2.microsoft.design/typography) - [Espaciado en tiempo de ejecución Nombres de tokens horizontales y verticales.](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/spacings.ts) - [Pautas de diseño Espaciado global y consideraciones adaptables.](https://fluent2.microsoft.design/layout) - [Tokens de radio Valores de forma disponibles en tiempo de ejecución.](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/borderRadius.ts) - [Duraciones del movimiento Valores de duración en tiempo de ejecución.](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/durations.ts) - [Asignación semántica del tema claro Asignaciones de alias neutros y de marca.](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/alias/lightColor.ts) - [Asignación semántica del tema oscuro Asignaciones de alias del tema oscuro.](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/alias/darkColor.ts) - [Escalas de marca Valores reales de marca para la web y Teams.](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/brandColors.ts) - [Construcción del tema web webLightTheme usa brandWeb.](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/themes/web/lightTheme.ts) - [Uso de Field Etiquetas, validación y pautas de composición.](https://fluent2.microsoft.design/components/web/react/core/field/usage) - [Field API Espacios y contrato de accesibilidad para elementos secundarios.](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-field/library/src/components/Field/Field.types.ts) - [Uso de TabList Pautas de diseño y selección de categorías.](https://fluent2.microsoft.design/components/web/react/core/tablist/usage) - [TabList API Opciones de selección controlada y foco.](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-tabs/library/src/components/TabList/TabList.types.ts) - [Uso de Dialog Pautas para la ubicación de formularios y la interacción modal.](https://fluent2.microsoft.design/components/web/react/core/dialog/usage) - [Dialog de API Visibilidad controlada y tipos de modal.](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-dialog/library/src/components/Dialog/Dialog.types.ts)