# Sistema de diseño Amsterdam ## Vista previa de la interfaz del sistema de diseño Amsterdam Activa el texto más grande, el contraste reforzado y la reducción del movimiento en la vista previa; restaura la configuración predeterminada. ## Referencia de diseño del sistema de diseño Amsterdam Se inspeccionaron la implementación de CSS y React4.4.0; se comprobó el límite de tokens/recursos propietarios. Todos los valores del tema de la vista previa son originales. ### Contrato del componente de código abierto | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | CSS package | @amsterdam/design-system-css 4.4.0 | La hoja de estilos del interruptor nativo se usa sin cambios. | | Class anatomy | ams-switch; ams-switch__input; ams-switch__label | El elemento de entrada precede inmediatamente a su etiqueta asociada. | | Input semantics | type=checkbox; role=switch | El estado nativo marcado representa activado/desactivado. | | Native behavior | Immediate binary setting | El código fuente de React indica que no se requiere enviar el formulario. | | React props | InputHTMLAttributes | Las propiedades checked, defaultChecked, onChange, disabled y ARIA se pasan al elemento de entrada. | | Focus | Input focus styles the following label | No ocultes el elemento de entrada real con display:none. | ### Tema neutro original completo del interruptor | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --ams-switch-inline-size | 50px | Ancho original del carril del interruptor. | | --ams-switch-thumb-inline-size / block-size | 22px / 22px | Geometría original del control circular. | | --ams-switch-label-border-width | 3px | Margen interno del carril; la traslación al activarse usa este valor. | | --ams-switch-background-color | #666 | Color original del carril desactivado. | | --ams-switch-checked-background-color | #286044 | Color original del carril activado; no es un token de marca de Amsterdam. | | --ams-switch-thumb-background-color | #fff | Color original del control. | | --ams-switch-disabled-background-color | #aaa | Aspecto desactivado; la propiedad nativa disabled proporciona el comportamiento. | | --ams-switch-outline-offset | 4px | Separación del anillo de foco. | | --ams-switch-cursor / disabled-cursor | pointer / not-allowed | Configuración explícita de la interacción. | | --ams-switch-thumb-hover-box-shadow | 0 0 0 2px #fff | Tratamiento original al pasar el cursor. | ### Tipografía y diseño de la aplicación | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Font / body | Arial / 18px with 1.5 leading | Configuración neutra original; sin recursos de Amsterdam Sans. | | Heading | 36px; 30px below700px | Decisión de la aplicación, no una escala oficial de Amsterdam. | | Layout | 900px maximum; two columns with32px gap | Decisión de la aplicación; una columna por debajo de 700px. | | Larger reading mode | 22px article text | Preferencia local, no un reemplazo global del zoom del navegador. | | Reduced motion | OS preference plus local preview setting | El componente CSS ya respeta prefers-reduced-motion en sus transiciones. | ### Límites de reutilización e identidad | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Component code | EUPL-1.2 or later | Conserva la licencia y los avisos aplicables. | | Documentation | CC0-1.0 | Mantén separados los recursos propietarios. | | Token package4.3.0 | Proprietary assets | Su propio archivo LICENSE lo excluye de la licencia de código abierto. | | Amsterdam Sans / icons / logo | Restricted institutional assets | No se ha copiado en este ejemplo independiente. | ## Guía completa del sistema de diseño de Amsterdam 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. ## Componente y tema independientes del sistema de diseño de Amsterdam ### Usa la capa de código abierto de forma transparente > Amsterdam publica por separado el componente CSS para que su contrato de clases pueda implementarse fuera de React. La hoja de estilos depende de las propiedades personalizadas de CSS; importarla sin un tema completo deja sin definir dimensiones y colores importantes. Por eso, en este ejemplo, la hoja de estilos nativa de Switch se combina con una configuración neutra original completa. El repositorio separa los paquetes de código abierto de los recursos propietarios. El paquete de tokens inspeccionado, versión 4.3.0, tiene su propio aviso de licencia, que lo excluye de la licencia de código abierto. Amsterdam Sans, los iconos y el logotipo de la ciudad también están sujetos a restricciones específicas. Esta guía menciona su existencia como contexto, pero no los redistribuye ni afirma que una descarga pública de npm otorgue derechos de marca sin restricciones. Consulta la especificación complementaria ## Configuración neutra completa del sistema de diseño de Amsterdam ### Proporciona todas las propiedades que necesita el componente La tabla de referencia identifica todas las variables que usa la hoja de estilos de Switch seleccionada. El ancho, las dimensiones del deslizador, el grosor del borde, los colores, el desplazamiento del contorno, el cursor y el tratamiento al pasar el puntero tienen valores explícitos. Son valores originales para este ejemplo, no tokens de diseño de Amsterdam copiados. Esta distinción permite reproducir el ejemplo sin tener que adivinar los elementos que faltan del tema. La pista mide 50px de ancho, el deslizador 22px y el borde 3px. La transformación del estado marcado nativo calcula su recorrido a partir del ancho del deslizador y del grosor del borde. Por tanto, si solo se modifica el ancho de la pista, el deslizador puede quedar desalineado; cambia conjuntamente la geometría relacionada y comprueba ambos estados. ``` :root { --ams-switch-label-border-width:3px; --ams-switch-background-color:#666; --ams-switch-thumb-background-color:#fff; --ams-switch-thumb-inline-size:22px; --ams-switch-thumb-block-size:22px; --ams-switch-inline-size:50px; --ams-switch-checked-background-color:#286044; --ams-switch-disabled-background-color:#aaa; --ams-switch-disabled-cursor:not-allowed; --ams-switch-cursor:pointer; --ams-switch-outline-offset:4px; --ams-switch-thumb-hover-box-shadow:0 0 0 2px #fff; } ``` Referencia de código Consulta la especificación complementaria ## Anatomía del Switch nativo del sistema de diseño de Amsterdam ### La etiqueta debe ir después del input La implementación de React representa un contenedor, un input y una etiqueta asociada vacía. Su CSS usa selectores de hermanos adyacentes para aplicar estilos a la etiqueta según los estados de foco, marcado y deshabilitado del input. En una implementación simple de HTML, conserva ese orden; insertar una descripción entre el input y la etiqueta rompe esos selectores. El input real es una casilla de verificación con role="switch". Conserva la propiedad checked nativa y el comportamiento del teclado. Como la etiqueta visual no contiene texto, proporciona un nombre accesible mediante aria-label o aria-labelledby. El ejemplo hace referencia al título visible de una opción y asocia su explicación mediante aria-describedby. ``` Larger text

Increase the article text size immediately.

``` Referencia de código Consulta la especificación complementaria ## Configuración inmediata del sistema de diseño de Amsterdam ### Un switch cambia la vista actual El código fuente del componente define Switch como una opción binaria inmediata. La vista previa respeta ese contrato: el texto más grande modifica el tamaño del artículo, el mayor contraste cambia el texto y el contorno, y el movimiento reducido elimina el breve efecto de aparición de la insignia. No hay ningún botón Guardar que dé a entender que estas opciones locales se envían a un servicio de cuenta. Restablecer valores predeterminados desactiva los tres estados checked nativos y vuelve a aplicar las clases predeterminadas al artículo. Un mensaje de estado describe las opciones activadas. No se guarda nada al navegar a otra página o recargarla. Un servicio de preferencias de producción podría añadir persistencia, pero debería indicar si la opción afecta a esta página, a un dispositivo o a una cuenta. 1. Activa Texto más grande y observa el tamaño del párrafo en el artículo contiguo. 2. Enfoca Mayor contraste y pulsa la barra espaciadora para activarlo o desactivarlo con el teclado. 3. Restablece los valores predeterminados y comprueba que los tres switches y el artículo vuelvan juntos a su estado inicial. Consulta la especificación complementaria ## Teclado, foco y movimiento del sistema de diseño de Amsterdam ### Mantén disponible el input nativo La hoja de estilos reduce el ancho visual del input, pero conserva el control real. Su selector de foco aplica el contorno a la etiqueta siguiente. Si reemplazas el input por un div decorativo, perderás la semántica nativa de formulario y tendrás que implementar el teclado por separado. No apliques display:none al input. La hoja de estilos nativa limita sus transiciones a prefers-reduced-motion:no-preference. El efecto del artículo también respeta la preferencia del sistema operativo, independientemente del switch local. Si una persona solicita menos movimiento en el nivel del sistema, no debería tener que descubrir otro switch para que el ejemplo se comporte de forma serena. - Usa la propiedad checked como fuente de verdad; no inventes un estado visual activo sin relación. - Proporciona un nombre estable para cada opción y mantén su explicación asociada al input. - Prueba los estados desactivado, activado, con foco y deshabilitado después de cambiar la geometría o los colores del tema. Consulta la especificación complementaria ## Composición de la vista previa de lectura del sistema de diseño de Amsterdam ### Muestra el efecto junto al control El ejemplo usa una composición de dos columnas para que cada opción tenga un efecto visible en el artículo. Por debajo del punto de interrupción de 700px específico de la aplicación, los controles se colocan encima de la vista previa. El ancho máximo de 900px y la separación de 32px son decisiones de diseño originales, no pruebas de que exista un token de cuadrícula para toda la ciudad. La fuente neutra es Arial. El texto del cuerpo mide 18px y tiene un interlineado de 1.5; el modo de texto más grande cambia el artículo a 22px. Es un ejemplo de una opción de la aplicación, no un sustituto del zoom del navegador ni una afirmación de que Amsterdam prescriba esos tamaños. Las etiquetas largas se ajustan en varias líneas sin reducir el ancho del switch nativo. Consulta la especificación complementaria ## Integración de CSS o React con el sistema de diseño de Amsterdam ### Elige la capa de implementación En una aplicación existente de React, se ha verificado que Switch acepta atributos estándar del input y reenvía la referencia al input. Para usarlo de forma controlada, proporciona checked y onChange; para usarlo sin control, puedes proporcionar defaultChecked. El componente no proporciona almacenamiento de la aplicación ni un API para las preferencias de cuenta. Para este ejemplo independiente de HTML, solo se necesita el Switch CSS de código abierto. La configuración y el código completos proporcionan la configuración de tema que falta y la gestión del estado local. El instalador de paquetes puede descargar recursos propietarios como dependencias; que estén en el disco no autoriza a importarlos ni distribuirlos. El ejemplar incluido contiene únicamente el CSS seleccionado y su licencia de código abierto. Consulta la especificación complementaria ## Adopción y limitaciones del sistema de diseño de Amsterdam ### No confundas la similitud visual con una afiliación El sistema de la ciudad busca que los productos municipales sean coherentes y accesibles. Su código reutilizable puede estudiarse y adaptarse de acuerdo con su licencia, pero el logotipo, la fuente propietaria y los recursos de iconos tienen condiciones independientes. La vista previa usa una identidad visual original y contenido neutro para que no se confunda con un servicio de Amsterdam. El alcance verificado consta de un componente nativo con un tema personalizado completo y un comportamiento local útil. No es una reimplementación completa del tema de la ciudad. Si un producto real adopta el paquete más amplio de CSS, debe definir y probar todas las variables que requieren los componentes adicionales, en lugar de extrapolar esta configuración de Switch a controles distintos. Consulta la especificación complementaria ## Ejemplos de componentes del sistema de diseño de Amsterdam ### Tema neutro completo para Switch Se definen todas las variables que requiere la hoja de estilos nativa; todos los valores son originales. ``` :root { --ams-switch-label-border-width:3px; --ams-switch-background-color:#666; --ams-switch-thumb-background-color:#fff; --ams-switch-thumb-inline-size:22px; --ams-switch-thumb-block-size:22px; --ams-switch-inline-size:50px; --ams-switch-checked-background-color:#286044; --ams-switch-disabled-background-color:#aaa; --ams-switch-disabled-cursor:not-allowed; --ams-switch-cursor:pointer; --ams-switch-outline-offset:4px; --ams-switch-thumb-hover-box-shadow:0 0 0 2px #fff; } ``` Referencia de código ### Estructura nativa accesible Entrada checkbox real, rol de switch y etiqueta visual adyacente. ``` Larger text

Increase the article text size immediately.

``` Referencia de código ### Preferencias de lectura inmediatas y completas Switch nativo CSS, tema personalizado y efectos locales visibles. ``` Reading preferences

PERSONAL READING VIEW

Make this page easier to read

Settings apply immediately to the preview. They are not saved after you leave.

Larger text

Increase the article text size.

Stronger contrast

Use black text and a stronger outline.

Reduce preview motion

Remove the short badge appearance effect.

Default reading settings.

Reading preview

A quieter place to read

A community reading room offers shared tables, individual seats and a small collection of reference books.

Before visiting, check opening hours and ask about any facilities you need.

Original example content · no external service

``` Referencia de código ## Configuración del agente del sistema de diseño de Amsterdam ### Punto de partida para la implementación Solo el CSS de código abierto; a continuación, un tema original completo y HTML funcional. No se distribuye ningún paquete de tokens ni recursos propietarios. El ZIP del ejemplo funcional completo en Fuentes también proporciona las dependencias exactas de la vista previa y el documento completo. Extráelo, ejecuta python3 -m http.server 8080 en ese directorio y abre http://localhost:8080/amsterdam.html. No abras ejemplos basados en módulos mediante file://. ``` npm install @amsterdam/design-system-css@4.4.0 # Copy dist/switch/switch.css into your public assets. # Load it before the complete original theme configuration below. # Do not import the proprietary assets or tokens for this neutral example. ``` ### Una instrucción para tu proyecto ``` Usa el Switch CSS de código abierto de Amsterdam con un tema original completo. Conserva la estructura de contenedor/entrada/etiqueta adyacente, role=switch y un nombre accesible. Aplica inmediatamente los ajustes binarios y usa checked como estado. Respeta la preferencia de movimiento reducido y distingue las preferencias locales de los ajustes de cuenta persistidos. No importes tokens, fuentes, logotipos ni iconos propietarios sin los derechos correspondientes. ``` ## Fuentes y alcance del sistema de diseño de Amsterdam Ejemplar independiente de OpenDesign. No incluye los tokens de marca de Amsterdam, Amsterdam Sans, los iconos oficiales ni el logotipo. - Repositorio y licencias Paquetes de código abierto y separación de recursos propietarios. - Contrato de CSS Arquitectura de clases, uso de CSS y dependencia del tema. - Documentación de Switch Semántica de ajustes binarios inmediatos. - Aviso sobre recursos Restricciones de fuentes, iconos, marca y logotipo. - Alcance del paquete de tokens Capa de tokens propietarios independiente. - Descargar el ejemplo funcional completo Archivo ZIP con HTML completo, dependencias locales CSS/JavaScript, licencias incluidas e instrucciones exactas para ejecutarlo. No se requiere un paso de compilación. ## Recursos relacionados con el sistema de diseño de Amsterdam ### B.C. sistema de diseño Crea un formulario de preferencias de recordatorios al estilo de B.C. con tokens semánticos reales, controles Aria nativos de React, campos de contacto condicionales y validación completa. ### Canada.ca sistema de diseño Explora la tipografía, los tokens semánticos y los componentes web nativos de GC Design System mediante una guía de preparación completa y con búsqueda, comportamientos de divulgación y estados vacíos. ### CFPB sistema de diseño Implementa la cuadrícula editorial, la tipografía actual y los componentes Expandables nativos de CFPB con una hoja de trabajo de lectura funcional, API de paquetes verificadas y límites de identidad explícitos. - [Referencia de implementación](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs) - [Fuente](https://github.com/Amsterdam/design-system/tree/develop/packages/css) - [Fuente](https://github.com/Amsterdam/design-system/blob/develop/NOTICE.md) - [Consulta la especificación complementaria](https://github.com/Amsterdam/design-system/blob/develop/NOTICE.md) - [Referencia de código](https://github.com/Amsterdam/design-system/tree/develop/packages/css) - [Consulta la especificación complementaria](https://github.com/Amsterdam/design-system/tree/develop/packages/css) - [Referencia de código](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs) - [Consulta la especificación complementaria](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs) - [Repositorio y licencias Paquetes de código abierto y separación de recursos propietarios.](https://github.com/Amsterdam/design-system) - [Contrato de CSS Arquitectura de clases, uso de CSS y dependencia del tema.](https://github.com/Amsterdam/design-system/tree/develop/packages/css) - [Documentación de Switch Semántica de ajustes binarios inmediatos.](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs) - [Aviso sobre recursos Restricciones de fuentes, iconos, marca y logotipo.](https://github.com/Amsterdam/design-system/blob/develop/NOTICE.md) - [Alcance del paquete de tokens Capa de tokens propietarios independiente.](https://github.com/Amsterdam/design-system/tree/develop/packages-proprietary/tokens)