Services publics et éducation · Nouvelle ressource
Système de design Amsterdam.
Utilisez le contrat réel et open source de Switch de Amsterdam, avec un thème neutre complet, des libellés accessibles et des préférences de lecture appliquées immédiatement.
CSS du commutateur natif Amsterdam4.4.0, thème neutre d’origine et comportement de l’application ; aucun élément graphique propriétaire. · Référence de mise en œuvre
02
Référence de conception du système de design Amsterdam
Implémentations de CSS et React4.4.0 examinées ; vérification des limites concernant les jetons et les éléments graphiques propriétaires. Toutes les valeurs du thème de l’aperçu sont originales.
Système de design Amsterdam : séparer le composant du thème
Utilisez honnêtement la couche open source
Amsterdam publie séparément le composant CSS, ce qui permet d’implémenter son contrat de classes en dehors de React. La feuille de style dépend des propriétés personnalisées de CSS ; l’importer sans thème complet laisse des dimensions et des couleurs importantes sans valeur définie. La feuille de style du commutateur natif de cet exemple est donc associée à une configuration neutre complète et originale.
Le dépôt distingue les packages open source des éléments graphiques propriétaires. Le package de jetons examiné, en version 4.3.0, comporte sa propre mention de licence, qui l’exclut de la licence open source. Amsterdam Sans, les icônes et le logo de la ville sont également soumis à des restrictions spécifiques. Ce guide les mentionne à titre de contexte, mais ne les redistribue pas et ne prétend pas qu’un téléchargement public depuis npm confère des droits d’utilisation illimités de la marque.
Système de design Amsterdam : une configuration neutre complète
Fournissez toutes les propriétés nécessaires au composant
Le tableau de référence répertorie toutes les variables utilisées par la feuille de style du commutateur sélectionnée. La largeur, les dimensions du curseur, l’épaisseur de la bordure, les couleurs, le décalage du contour, le curseur et le traitement au survol ont tous des valeurs explicites. Ces valeurs sont originales pour cet exemple et ne sont pas des jetons de conception Amsterdam copiés. Cette distinction permet de reproduire l’exemple sans avoir à deviner les éléments manquants du thème.
Le rail mesure 50px de large, avec un curseur de 22px et une bordure de 3px. La transformation de l’état natif checked calcule le déplacement du curseur à partir de sa largeur et de l’épaisseur de la bordure. Modifier uniquement la largeur du rail peut donc désaligner le curseur ; modifiez ensemble les dimensions associées et vérifiez les deux états.
Système de design Amsterdam : anatomie du commutateur natif
Le label doit suivre l’input
L’implémentation React produit un conteneur, un input et un label associé vide. Son CSS utilise des sélecteurs de frères adjacents pour appliquer des styles au label en fonction des états de focus, checked et disabled de l’input. Dans une implémentation HTML simple, conservez cet ordre : insérer une description entre l’input et le label rompt ces sélecteurs.
L’input réel est une case à cocher avec role="switch". Il conserve la propriété native checked et le comportement clavier. Comme le label visuel ne contient aucun texte, fournissez un nom accessible avec aria-label ou aria-labelledby. L’exemple fait référence au titre visible du paramètre et associe son explication avec aria-describedby.
Système de design Amsterdam : paramètres immédiats
Un commutateur modifie la vue actuelle
Le code source du composant définit Switch comme un paramètre binaire à effet immédiat. L’aperçu respecte ce contrat : l’agrandissement du texte modifie la taille de l’article, le renforcement du contraste modifie le texte et le contour, et la réduction des animations supprime le bref effet d’apparition du badge. Aucun bouton Enregistrer ne prétend envoyer ces choix locaux à un service de compte.
Restaurer les paramètres par défaut désactive les trois états natifs checked et réapplique les classes par défaut de l’article. Un message d’état décrit les paramètres activés. Rien n’est conservé après une navigation ou un rechargement. Un service de préférences en production pourrait ajouter la persistance, mais il devrait préciser si le paramètre s’applique à cette page, à un appareil ou à un compte.
Activez Texte agrandi et vérifiez la taille du paragraphe dans l’article adjacent.
Placez le focus sur Contraste renforcé et appuyez sur Espace pour l’activer ou le désactiver au clavier.
Restaurez les paramètres par défaut et vérifiez que les trois commutateurs et l’article reviennent ensemble à leur état initial.
Système de design Amsterdam : clavier, focus et animations
Laissez l’input natif disponible
La feuille de style réduit la largeur visuelle de l’input, mais conserve le contrôle réel. Son sélecteur de focus place le contour sur le label suivant. Remplacer l’input par un div décoratif ferait perdre les sémantiques natives du formulaire et nécessiterait une implémentation clavier distincte. N’appliquez pas display:none à l’input.
La feuille de style native limite ses transitions à prefers-reduced-motion:no-preference. L’effet appliqué à l’article respecte également la préférence du système d’exploitation, indépendamment du commutateur local. Une personne qui demande moins d’animations au niveau du système ne devrait pas avoir à découvrir un commutateur supplémentaire pour que l’exemple adopte un comportement discret.
Utilisez la propriété checked comme source de vérité ; n’inventez pas un état visuel activé sans rapport.
Donnez un nom stable à chaque paramètre et associez son explication au champ correspondant.
Après avoir modifié la géométrie ou les couleurs du thème, testez les états désactivé, activé, avec focus et indisponible.
Système de design Amsterdam — composition de l’aperçu de lecture
Montrez l’effet à côté du contrôle
L’exemple utilise une composition en deux colonnes afin que chaque paramètre ait une conséquence visible dans l’article. En dessous d’un point de rupture de 700px propre à l’application, les contrôles s’empilent au-dessus de l’aperçu. La largeur maximale de 900px et l’écart de 32px sont des choix de mise en page initiaux, et non la preuve d’un jeton de grille à l’échelle de la ville.
La police neutre est Arial. Le texte du corps est en 18px, avec une interligne de 1.5 ; le mode texte agrandi ne modifie que l’article, qui passe à 22px. Il s’agit d’un exemple de paramètre d’application, et non d’un remplacement du zoom du navigateur ni d’une affirmation selon laquelle ces tailles seraient prescrites par Amsterdam. Les libellés longs passent à la ligne sans réduire la largeur native de l’interrupteur.
Système de design Amsterdam — intégration de CSS ou React
Choisissez la couche d’implémentation
Dans une application React existante, le composant Switch vérifié accepte les attributs d’entrée standard et transmet la ref à l’input. Pour une utilisation contrôlée, fournissez checked et onChange ; pour une utilisation non contrôlée, vous pouvez fournir defaultChecked. Le composant ne fournit ni stockage d’application ni API de préférences de compte.
Pour cet exemple indépendant de HTML, seul le Switch open source CSS est requis. La configuration et le code complet fournissent la configuration de thème manquante et la gestion locale de l’état. Le gestionnaire de paquets peut installer des ressources propriétaires comme dépendances ; leur présence sur le disque n’autorise pas à les importer ni à les distribuer. L’exemple intégré ne contient que le CSS sélectionné et sa licence open source.
Ne confondez pas ressemblance visuelle et affiliation
Le système de la ville vise à rendre les produits municipaux cohérents et accessibles. Son code réutilisable peut être étudié et adapté dans le respect de sa licence, mais son logo, sa police propriétaire et ses icônes sont soumis à des conditions distinctes. L’aperçu utilise une identité visuelle originale et un contenu neutre afin d’éviter qu’il soit pris pour un service Amsterdam.
La portée vérifiée se limite à un composant natif doté d’un thème personnalisé complet et d’un comportement local pertinent. Il ne s’agit pas d’une réimplémentation complète du thème de la ville. Un produit réel qui adopte le package CSS plus large doit définir et tester toutes les variables requises par les composants supplémentaires, plutôt que d’extrapoler la configuration de ce Switch à des contrôles sans rapport.
Système de design Amsterdam — configuration de l’agent
Point de départ de l’implémentation
Utilisez uniquement le CSS open source ; le thème original complet et le HTML fonctionnel sont inclus. Aucun ensemble de jetons ou de ressources propriétaire n’est distribué. L’archive ZIP complète de l’exemple fonctionnel, disponible dans les Sources, fournit également les dépendances exactes de l’aperçu et le document complet. Extrayez-la, exécutez python3 -m http.server 8080 dans ce répertoire, puis ouvrez http://localhost:8080/amsterdam.html. N’ouvrez pas les exemples utilisant des modules via 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.
Un prompt pour votre projet
Prompt pour l’agent IA
Utilisez le Switch open source CSS de Amsterdam avec un thème original complet. Préservez la structure wrapper/input/libellé adjacent, role=switch et un nom accessible. Appliquez immédiatement les paramètres binaires et utilisez checked comme état. Respectez la préférence de réduction des animations et distinguez les préférences locales des paramètres de compte enregistrés. N’importez pas de jetons, polices, logos ou icônes propriétaires sans disposer des droits nécessaires.
05
Système de design Amsterdam — sources et portée
Exemple indépendant de OpenDesign. Les jetons de marque Amsterdam, la police Amsterdam Sans, les icônes officielles et le logo ne sont pas inclus.
