# Système de design Amsterdam ## Aperçu de l’interface du système de design Amsterdam Activez le texte agrandi, le contraste renforcé et la réduction des animations de l’aperçu ; restaurez les paramètres par défaut. ## 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. ### Contrat du composant open source | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | CSS package | @amsterdam/design-system-css 4.4.0 | Feuille de style du commutateur natif utilisée sans modification. | | Class anatomy | ams-switch; ams-switch__input; ams-switch__label | L’input précède immédiatement le label associé. | | Input semantics | type=checkbox; role=switch | L’état natif checked représente l’activation ou la désactivation. | | Native behavior | Immediate binary setting | La source React indique qu’aucune soumission de formulaire n’est requise. | | React props | InputHTMLAttributes | Les propriétés checked, defaultChecked, onChange, disabled et ARIA sont transmises à l’input. | | Focus | Input focus styles the following label | Ne masquez pas l’input réel avec display:none. | ### Thème neutre complet et original pour le commutateur | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --ams-switch-inline-size | 50px | Largeur originale du rail du commutateur. | | --ams-switch-thumb-inline-size / block-size | 22px / 22px | Géométrie originale du curseur circulaire. | | --ams-switch-label-border-width | 3px | Marge intérieure du rail ; la translation à l’état checked utilise cette valeur. | | --ams-switch-background-color | #666 | Couleur originale du rail à l’état désactivé. | | --ams-switch-checked-background-color | #286044 | Couleur originale du rail à l’état activé ; ce n’est pas un jeton de marque Amsterdam. | | --ams-switch-thumb-background-color | #fff | Couleur originale du curseur. | | --ams-switch-disabled-background-color | #aaa | Apparence en état désactivé ; la propriété native disabled fournit le comportement correspondant. | | --ams-switch-outline-offset | 4px | Détachement de l’anneau de focus. | | --ams-switch-cursor / disabled-cursor | pointer / not-allowed | Configuration explicite des interactions. | | --ams-switch-thumb-hover-box-shadow | 0 0 0 2px #fff | Traitement original au survol. | ### Typographie et mise en page de l’application | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Font / body | Arial / 18px with 1.5 leading | Configuration neutre originale ; aucun élément graphique Amsterdam Sans. | | Heading | 36px; 30px below700px | Choix de l’application, pas une échelle officielle de Amsterdam. | | Layout | 900px maximum; two columns with32px gap | Choix de l’application ; une colonne sous 700px. | | Larger reading mode | 22px article text | Préférence locale, qui ne remplace pas le zoom global du navigateur. | | Reduced motion | OS preference plus local preview setting | Le composant CSS respecte déjà prefers-reduced-motion pour ses transitions. | ### Réutilisation et limites de propriété | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Component code | EUPL-1.2 or later | Conservez la licence et les mentions applicables. | | Documentation | CC0-1.0 | Séparez-le des éléments graphiques propriétaires. | | Token package4.3.0 | Proprietary assets | Sa propre licence LICENSE l’exclut de la licence open source. | | Amsterdam Sans / icons / logo | Restricted institutional assets | Non repris dans cet exemple indépendant. | ## Guide complet du système de design Amsterdam Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## 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. Consultez la spécification associée ## 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. ``` :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; } ``` Référence du code Consultez la spécification associée ## 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. ``` Larger text

Increase the article text size immediately.

``` Référence du code Consultez la spécification associée ## 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. 1. Activez Texte agrandi et vérifiez la taille du paragraphe dans l’article adjacent. 2. Placez le focus sur Contraste renforcé et appuyez sur Espace pour l’activer ou le désactiver au clavier. 3. Restaurez les paramètres par défaut et vérifiez que les trois commutateurs et l’article reviennent ensemble à leur état initial. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. Consultez la spécification associée ## Système de design Amsterdam — adoption et limites ### 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. Consultez la spécification associée ## Système de design Amsterdam — exemples de composants ### Thème Switch neutre complet Toutes les variables requises par la feuille de style native sont définies ; toutes les valeurs sont 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; } ``` Référence du code ### Structure native accessible Véritable champ de saisie checkbox, rôle switch et libellé visuel adjacent. ``` Larger text

Increase the article text size immediately.

``` Référence du code ### Préférences de lecture immédiates et complètes Switch natif CSS, thème personnalisé et effets locaux 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

``` Référence du code ## 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://. ``` 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. ``` ### Un prompt pour votre projet ``` 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. ``` ## 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. - Dépôt et licences Séparation entre les packages open source et les éléments propriétaires. - Contrat de CSS Architecture des classes, utilisation de CSS et dépendance au thème. - Documentation de Switch Comportement immédiat des paramètres binaires. - Avis relatif aux ressources Restrictions concernant les polices, les icônes, l’identité de marque et le logo. - Portée du package de jetons Couche de jetons propriétaire distincte. - Télécharger l’exemple complet fonctionnel Archive ZIP comprenant le HTML complet, les dépendances locales CSS/JavaScript, les licences fournies et les instructions de lancement exactes. Aucune étape de build n’est nécessaire. ## Système de design Amsterdam — ressources associées ### B.C. système de design Créez un formulaire de préférences de rappel inspiré de la Colombie-Britannique, avec de véritables jetons sémantiques, les commandes Aria natives de React, des champs de contact conditionnels et une validation complète. ### Canada.ca système de design Découvrez la typographie, les jetons sémantiques et les composants Web natifs de GC Design System grâce à un guide de préparation complet avec recherche, divulgation et gestion de l’état vide. ### CFPB système de design Mettez en œuvre la grille éditoriale, la typographie actuelle et les composants Expandables natifs de CFPB avec une fiche de lecture fonctionnelle, des API de paquet vérifiées et des limites d’identité clairement définies. - [Référence de mise en œuvre](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs) - [Source](https://github.com/Amsterdam/design-system/tree/develop/packages/css) - [Source](https://github.com/Amsterdam/design-system/blob/develop/NOTICE.md) - [Consultez la spécification associée](https://github.com/Amsterdam/design-system/blob/develop/NOTICE.md) - [Référence du code](https://github.com/Amsterdam/design-system/tree/develop/packages/css) - [Consultez la spécification associée](https://github.com/Amsterdam/design-system/tree/develop/packages/css) - [Référence du code](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs) - [Consultez la spécification associée](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs) - [Dépôt et licences Séparation entre les packages open source et les éléments propriétaires.](https://github.com/Amsterdam/design-system) - [Contrat de CSS Architecture des classes, utilisation de CSS et dépendance au thème.](https://github.com/Amsterdam/design-system/tree/develop/packages/css) - [Documentation de Switch Comportement immédiat des paramètres binaires.](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs) - [Avis relatif aux ressources Restrictions concernant les polices, les icônes, l’identité de marque et le logo.](https://github.com/Amsterdam/design-system/blob/develop/NOTICE.md) - [Portée du package de jetons Couche de jetons propriétaire distincte.](https://github.com/Amsterdam/design-system/tree/develop/packages-proprietary/tokens)