Usa el contrato real de Switch de código abierto de Amsterdam, con un tema neutro completo, etiquetas accesibles y preferencias de lectura que se aplican al instante.
CSS del interruptor nativo de Amsterdam4.4.0, tema neutro original y comportamiento de la aplicación; sin recursos propietarios. · Referencia de implementación
02
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.
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.
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.
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.
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.
Activa Texto más grande y observa el tamaño del párrafo en el artículo contiguo.
Enfoca Mayor contraste y pulsa la barra espaciadora para activarlo o desactivarlo con el teclado.
Restablece los valores predeterminados y comprueba que los tres switches y el artículo vuelvan juntos a su estado inicial.
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.
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.
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.
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.
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://.
bash
npm install @amsterdam/[email protected]
# 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
Instrucción para el agente
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.
05
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.
