# Système de design Designsystemet ## Aperçu de l’interface du système de design Designsystemet Utilisez le compteur de caractères natif, changez de thème et de taille, et conservez ou invalidez la vérification selon les changements effectués. ## Référence de conception du système de design Designsystemet Exports du thème par défaut et implémentation native de ds-field dans @digdir/designsystemet-css/web 1.23.0. Les lignes de couleur indiquent explicitement les valeurs du mode clair. ### Rôles d’accentuation du thème clair par défaut | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --ds-color-accent-background-default | #fff | Rôle réel du thème clair par défaut en version 1.23.0. Le mode sombre à l’exécution utilise des valeurs de rôle distinctes. | | --ds-color-accent-background-tinted | #eef4fa | Rôle réel du thème clair par défaut en version 1.23.0. Le mode sombre à l’exécution utilise des valeurs de rôle distinctes. | | --ds-color-accent-surface-tinted | #ddeaf6 | Rôle réel du thème clair par défaut en version 1.23.0. Le mode sombre à l’exécution utilise des valeurs de rôle distinctes. | | --ds-color-accent-surface-hover | #c7ddf0 | Rôle réel du thème clair par défaut en version 1.23.0. Le mode sombre à l’exécution utilise des valeurs de rôle distinctes. | | --ds-color-accent-border-subtle | #99c0e3 | Rôle réel du thème clair par défaut en version 1.23.0. Le mode sombre à l’exécution utilise des valeurs de rôle distinctes. | | --ds-color-accent-border-default | #2a7cc5 | Rôle réel du thème clair par défaut en version 1.23.0. Le mode sombre à l’exécution utilise des valeurs de rôle distinctes. | | --ds-color-accent-text-default | #002c54 | Rôle réel du thème clair par défaut en version 1.23.0. Le mode sombre à l’exécution utilise des valeurs de rôle distinctes. | | --ds-color-accent-base-default | #0062ba | Rôle réel du thème clair par défaut en version 1.23.0. Le mode sombre à l’exécution utilise des valeurs de rôle distinctes. | | --ds-color-accent-base-hover | #004f96 | Rôle réel du thème clair par défaut en version 1.23.0. Le mode sombre à l’exécution utilise des valeurs de rôle distinctes. | | --ds-color-accent-base-active | #003d75 | Rôle réel du thème clair par défaut en version 1.23.0. Le mode sombre à l’exécution utilise des valeurs de rôle distinctes. | | --ds-color-accent-base-contrast-default | #fff | Rôle réel du thème clair par défaut en version 1.23.0. Le mode sombre à l’exécution utilise des valeurs de rôle distinctes. | ### Rôles neutres du thème clair par défaut | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --ds-color-neutral-background-default | #fff | Utilisez des rôles neutres pour les surfaces et le texte d’accompagnement, sans leur attribuer de signification d’état superflue. | | --ds-color-neutral-background-tinted | #f3f3f4 | Utilisez des rôles neutres pour les surfaces et le texte d’accompagnement, sans leur attribuer de signification d’état superflue. | | --ds-color-neutral-surface-default | #fff | Utilisez des rôles neutres pour les surfaces et le texte d’accompagnement, sans leur attribuer de signification d’état superflue. | | --ds-color-neutral-surface-tinted | #e8e8e9 | Utilisez des rôles neutres pour les surfaces et le texte d’accompagnement, sans leur attribuer de signification d’état superflue. | | --ds-color-neutral-border-subtle | #bbbcbd | Utilisez des rôles neutres pour les surfaces et le texte d’accompagnement, sans leur attribuer de signification d’état superflue. | | --ds-color-neutral-text-subtle | #5b5d60 | Utilisez des rôles neutres pour les surfaces et le texte d’accompagnement, sans leur attribuer de signification d’état superflue. | | --ds-color-neutral-text-default | #292c30 | Utilisez des rôles neutres pour les surfaces et le texte d’accompagnement, sans leur attribuer de signification d’état superflue. | | --ds-color-neutral-base-default | #24272b | Utilisez des rôles neutres pour les surfaces et le texte d’accompagnement, sans leur attribuer de signification d’état superflue. | | --ds-color-neutral-base-contrast-default | #fff | Utilisez des rôles neutres pour les surfaces et le texte d’accompagnement, sans leur attribuer de signification d’état superflue. | ### Mode de taille et bases typographiques | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --ds-size-mode-font-size--sm | 1 | Scalaire ou expression effectivement exporté. Utilisez les modes data-size au lieu d’interpréter chaque scalaire comme une valeur en pixels. | | --ds-size-mode-font-size--md | 1.125 | Scalaire ou expression effectivement exporté. Utilisez les modes data-size au lieu d’interpréter chaque scalaire comme une valeur en pixels. | | --ds-size-mode-font-size--lg | 1.3125 | Scalaire ou expression effectivement exporté. Utilisez les modes data-size au lieu d’interpréter chaque scalaire comme une valeur en pixels. | | --ds-size-base | 18 | Scalaire ou expression effectivement exporté. Utilisez les modes data-size au lieu d’interpréter chaque scalaire comme une valeur en pixels. | | --ds-font-family | Inter | Scalaire ou expression effectivement exporté. Utilisez les modes data-size au lieu d’interpréter chaque scalaire comme une valeur en pixels. | | --ds-font-weight-regular | 400 | Scalaire ou expression effectivement exporté. Utilisez les modes data-size au lieu d’interpréter chaque scalaire comme une valeur en pixels. | | --ds-font-weight-medium | 500 | Scalaire ou expression effectivement exporté. Utilisez les modes data-size au lieu d’interpréter chaque scalaire comme une valeur en pixels. | | --ds-font-weight-semibold | 600 | Scalaire ou expression effectivement exporté. Utilisez les modes data-size au lieu d’interpréter chaque scalaire comme une valeur en pixels. | | --ds-line-height-sm | 1.3 | Scalaire ou expression effectivement exporté. Utilisez les modes data-size au lieu d’interpréter chaque scalaire comme une valeur en pixels. | | --ds-line-height-md | 1.5 | Scalaire ou expression effectivement exporté. Utilisez les modes data-size au lieu d’interpréter chaque scalaire comme une valeur en pixels. | | --ds-line-height-lg | 1.7 | Scalaire ou expression effectivement exporté. Utilisez les modes data-size au lieu d’interpréter chaque scalaire comme une valeur en pixels. | | --ds-border-radius-base | 0.25rem | Scalaire ou expression effectivement exporté. Utilisez les modes data-size au lieu d’interpréter chaque scalaire comme une valeur en pixels. | | --ds-border-radius-sm | min(.5 * var(--ds-border-radius-base), var(--ds-border-radius-scale)) | Scalaire ou expression effectivement exporté. Utilisez les modes data-size au lieu d’interpréter chaque scalaire comme une valeur en pixels. | | --ds-border-radius-md | min(var(--ds-border-radius-base), 2 * var(--ds-border-radius-scale)) | Scalaire ou expression effectivement exporté. Utilisez les modes data-size au lieu d’interpréter chaque scalaire comme une valeur en pixels. | | --ds-border-radius-lg | min(2 * var(--ds-border-radius-base), 5 * var(--ds-border-radius-scale)) | Scalaire ou expression effectivement exporté. Utilisez les modes data-size au lieu d’interpréter chaque scalaire comme une valeur en pixels. | ## Guide complet du système de design Designsystemet 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. ## Designsystemet Comportement du système de design, CSS et packages de thèmes ### Charger les trois parties dans le bon ordre > Designsystemet sépare le comportement indépendant du framework, les styles des composants CSS et les valeurs du thème. Cet exemple fixe designsystemet-web et designsystemet-css à la version 1.23.0, importe CSS, puis le thème par défaut, et enregistre le comportement une seule fois. Un champ stylisé sans son package de comportement ne correspond pas à la même implémentation que le ds-field connecté présenté ici. ### Utiliser le contrat HTML natif actuel L’exemple utilise ds-field autour d’éléments input, textarea et select standard dotés de classes ds-input. Les contrôles de formulaire natifs sont ainsi conservés, tandis que le package relie les libellés et les descriptions. Il ne reprend pas une ancienne implémentation de champ API limitée à React. Le code source complet contient les bons imports de packages et la logique de vérification de l’application d’origine. ## Schéma de couleurs et modes de taille du système de design Designsystemet ### Modifier l’apparence à l’aide d’attributs data La page définit data-color-scheme sur light ou dark à la racine. Le thème fournit les couleurs sémantiques correspondantes, tandis que les valeurs du formulaire restent inchangées. Le tableau des paramètres indique explicitement les valeurs par défaut du mode clair ; il ne prétend pas que ces mêmes couleurs hexadécimales s’appliquent en mode sombre. Un bouton d’apparence secondaire décrit l’action qui sera effectuée ensuite. ### Appliquer le mode de taille à tout le système Le contrôle de taille de lecture fait passer data-size entre sm, md et lg. Il modifie le mode de taille du thème au lieu d’agrandir uniquement le titre. Les facteurs des modes publiés sont 1, 1.125 et 1.3125 ; ils interviennent dans les formules des jetons et ne constituent pas une consigne universelle de réglage des contrôles à ces valeurs en pixels. L’exemple teste le grand mode sur un téléphone comme sur un ordinateur de bureau. ## Inter et typographie sémantique dans le système de design Designsystemet ### Inclure les graisses prévues L’aperçu inclut Inter en graisses 400, 500 et 600 et active la fonctionnalité de police cv05 documentée pour la forme de la lettre l minuscule. La page utilise les classes natives de titre et de paragraphe afin que la graisse et la hauteur de ligne suivent le thème. Une annotation fixe de 14px sert de note complémentaire rédigée, clairement en dehors de l’échelle interactive principale. ### Placer les indications à proximité de leur contrôle L’indication du titre explique l’utilité du libellé ; celle du résultat décrit le type de contenu attendu. Elles restent à côté de leurs contrôles et y sont reliées par ds-field. Les conseils complémentaires se trouvent dans une carte distincte, placée après le formulaire sur les écrans étroits. La mise en page ne dépend pas du survol pour afficher les instructions. ## Relations automatiques et retour sur le nombre de caractères dans le système de design Designsystemet ### Laisser ds-field relier un seul contrôle Chaque ds-field contient un contrôle de type champ, son libellé et, éventuellement, des descriptions data-field. Le package attribue les ID et établit les relations entre le libellé et les descriptions. Regrouper des contrôles sans lien dans un même ds-field rendrait ce fonctionnement automatique ambigu. Utilisez un fieldset pour regrouper des contrôles, plutôt que de supposer que ce composant est un conteneur de formulaire générique. - Placer un seul contrôle de type champ dans chaque ds-field. - Utiliser les descriptions data-field pour le contenu complémentaire associé. - Laisser l’observateur natif gérer les ID et les relations described-by. ### Comprendre ce que mesure le compteur Le compteur natif utilise data-limit, data-under et data-over, en remplaçant %d par le nombre de caractères restants ou excédentaires. En version 1.23.0, il calcule la longueur de chaîne JavaScript et expose le retour via data-label/data-state, notamment un état invalide lorsque la limite est dépassée. Cela ne garantit pas un décompte des graphèmes pour tous les emoji. La limite de 140 caractères est une contrainte rédactionnelle propre à cet exemple, et non une règle officielle de contenu de Designsystemet. ## Validation de l’application et état de vérification dans le système de design Designsystemet ### Valider séparément les exigences de la tâche L’application exige un titre et un résultat de tâche non vides, et refuse un résultat qui dépasse la limite de l’exemple. Après avoir affiché un message indiquant la marche à suivre, elle place le focus sur le champ concerné. Le compteur natif indique la longueur, tandis que le gestionnaire de soumission applique la règle de vérification locale. Aucun attribut maxlength ne supprime silencieusement le texte collé. ### Préserver les données lors d’un changement de présentation Une vérification réussie affiche le titre et le résultat actuels sous forme de texte. Toute modification de l’un ou l’autre champ efface le résultat ; les changements d’apparence ou de taille le préservent, car ces contrôles ne modifient pas le descriptif. Cette distinction est intentionnelle et vérifiée. Aucune donnée n’est envoyée à un service de gestion de projets et l’aperçu ne prétend jamais qu’une tâche a été créée dans un service externe. ## Implémentation complète des champs natifs du système de design Designsystemet ### Reproduire l’exemple de la version indiquée Créez un projet Vite vanilla, installez les deux packages Designsystemet épinglés à une version précise ainsi que Inter, puis enregistrez le fichier d’entrée complet et digdir.css. Conservez l’élément racine de montage. Le code source comprend l’enregistrement, l’ordre des thèmes, le balisage du compteur, les contrôles de présentation et toutes les transitions de validation de la vérification. L’aperçu local utilise le même observateur de champs natifs, plutôt qu’une imitation dessinée à la main. 1. Importer le comportement une seule fois, puis les composants CSS et le thème par défaut. 2. Charger Inter en graisses 400, 500 et 600, puis enregistrer le fichier d’entrée/CSS complet. 3. Tester le compteur au-delà de la limite et corriger le résultat. 4. Effectuer la vérification, changer la taille et l’apparence, puis modifier le texte pour effacer le résultat. ### Tester le dépassement de limite et le retour à un état valide Collez 150 caractères ordinaires dans le résultat et vérifiez que le compteur indique un dépassement de dix caractères. La vérification doit le refuser. Remplacez le texte par un résultat court, effectuez la vérification avec succès, puis passez en mode sombre et changez la taille de lecture sans perdre le résultat. Modifiez le titre et vérifiez que l’ancienne vérification est effacée. Contrôlez la visibilité du focus et le retour à la ligne à chaque largeur d’écran. ## Exemples de composants du système de design Designsystemet ### main.js — étude complète des champs natifs et du thème Éditeur complet, balisage réel du compteur, contrôles d’apparence et de taille, et validation locale de la vérification. ``` import '@digdir/designsystemet-web'; import '@digdir/designsystemet-css'; import '@digdir/designsystemet-css/theme'; import '@fontsource/inter/latin-400.css'; import '@fontsource/inter/latin-500.css'; import '@fontsource/inter/latin-600.css'; import './digdir.css'; document.documentElement.dataset.colorScheme='light';document.documentElement.dataset.size='md';document.getElementById('root').innerHTML=`

DESIGNSYSTEMET / NATIVE FIELD STUDY

Write a useful task brief

Describe one outcome clearly. The native field connects its label, hint and character feedback while the theme controls size and appearance.

Use a short label that identifies the work.

Describe the result, not a list of implementation instructions.

`;const $=id=>document.getElementById(id);function edit(){$('review').hidden=true;$('error').hidden=true}['title','outcome'].forEach(id=>$(id).addEventListener('input',edit));$('theme').addEventListener('click',()=>{const dark=document.documentElement.dataset.colorScheme!=='dark';document.documentElement.dataset.colorScheme=dark?'dark':'light';$('theme').setAttribute('aria-pressed',String(dark));$('theme').textContent=dark?'Light appearance':'Dark appearance'});$('size').addEventListener('change',e=>document.documentElement.dataset.size=e.target.value);$('brief-form').addEventListener('submit',e=>{e.preventDefault();let message='',focus='outcome';if(!$('title').value.trim()){message='Enter a task title.';focus='title'}else if(!$('outcome').value.trim())message='Describe the desired outcome.';else if($('outcome').value.length>140)message='Shorten the outcome to 140 characters or fewer.';if(message){$('error').textContent=message;$('error').hidden=false;$(focus).focus();return}$('review-title').textContent=$('title').value.trim();$('review-body').textContent=$('outcome').value.trim();$('review').hidden=false;$('review').focus()}); ``` Référence du code - Select utilise le style ds-input actuel dans ds-field. Le retour du compteur est géré par l’observateur natif. ### digdir.css — composition adaptative d’origine Mise en page autour du thème natif, avec le réglage de la fonctionnalité Inter. ``` body{margin:0;font-family:Inter,sans-serif;font-feature-settings:"cv05" 1}main{max-width:1160px;margin:auto;padding:32px}header{display:flex;gap:24px;justify-content:space-between;align-items:start}.eyebrow{font-size:13px;letter-spacing:.04em;font-weight:600}.lead{max-width:65ch;margin-top:24px}.layout{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;margin-top:32px}form{display:grid;gap:24px;align-content:start}form button{justify-self:start}aside{padding:24px;align-self:start}aside h3{margin-top:32px}aside select{margin-top:8px}aside li{margin:12px 0}.small{font-size:14px;line-height:1.6}#review{padding:24px;margin-top:32px}#review h3{margin-top:16px}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.layout{grid-template-columns:1fr;gap:24px}header{flex-direction:column}} ``` Référence du code - Les changements de thème et de taille préservent les valeurs ; seules les modifications du contenu invalident la vérification. ## Configuration de l’agent du système de design Designsystemet ### Point de départ de l’implémentation Les relations natives entre libellés, l’état du compteur, le retour après validation et les changements de taille en modes clair et sombre ont été testés dans un navigateur réel. ``` npm create vite@latest ds-brief -- --template vanilla cd ds-brief npm install npm install @digdir/designsystemet-css@1.23.0 @digdir/designsystemet-web@1.23.0 @fontsource/inter # Replace src/main.js and add src/digdir.css. Keep
. npm run dev ``` ### Un prompt pour votre projet ``` Créez l’éditeur de brief en respectant l’ordre du comportement de Designsystemet 1.23.0, de CSS et du thème par défaut. Utilisez ds-field avec un seul contrôle natif, de vrais attributs de compteur data-field et les graisses Inter. Conservez l’état de révision lors des changements d’apparence et de taille, effacez-le après toute modification du contenu et appliquez la limite initiale de 140 caractères sans tronquer le texte collé. ``` ## Sources et périmètre du système de design Designsystemet Un éditeur local créé par OpenDesign, utilisant CSS de Designsystemet et le comportement web 1.23.0. Le thème par défaut et l’observateur de champ sont natifs ; le contenu du brief, la limite de 140 caractères et le processus de révision sont spécifiques à ce projet. - Configuration initiale et ordre des thèmes Comportement natif, CSS, configuration du thème et des polices. - Fondations du thème Points d’entrée pour la taille, les couleurs et la typographie. - Implémentation publique Observateur ds-field versionné et thème généré. - Périmètre du système Périmètre commun des composants et des recommandations. ## Ressources associées au système de design Designsystemet ### DSFR Découvrez la typographie, la grille et l’accordéon API du système de l’État français dans leur contexte institutionnel. Comparez les comportements d’ouverture liés et indépendants dans un exemple pédagogique au ton neutre. ### Europa Component Library Examinez les rôles de couleur, de typographie et d’espacement de l’EC Europa à travers un brief complet avec accordéon natif, incluant la navigation au clavier, l’ouverture de tous les éléments et une solution de repli lisible en l’absence de JavaScript. ### gov.cz système de design Découvrez les véritables rôles de couleur de Gov Design System CE, les emplacements des cartes et la pagination native à travers une boîte à outils de lecture complète pour six ressources, avec gestion explicite du focus et de l’état de la page. - [Référence de mise en œuvre](https://designsystemet.no/en/fundamentals/code/setup) - [Source](https://github.com/digdir/designsystemet) - [Référence du code](https://designsystemet.no/en/fundamentals/code/setup) - [Configuration initiale et ordre des thèmes Comportement natif, CSS, configuration du thème et des polices.](https://designsystemet.no/en/fundamentals/code/setup) - [Fondations du thème Points d’entrée pour la taille, les couleurs et la typographie.](https://designsystemet.no/en/fundamentals) - [Implémentation publique Observateur ds-field versionné et thème généré.](https://github.com/digdir/designsystemet) - [Périmètre du système Périmètre commun des composants et des recommandations.](https://designsystemet.no/en/intro)