# Designsystemet-Designsystem ## Vorschau der Designsystemet-Designsystem-Oberfläche Verwenden Sie den nativen Zeichenzähler, ändern Sie Theme und Größe und behalten Sie die Prüfung bei oder setzen Sie sie zurück – je nachdem, was sich geändert hat. ## Designreferenz für das Designsystemet-Designsystem Exporte des Standard-Themes und native ds-field-Implementierung in @digdir/designsystemet-css/web 1.23.0. In den Farbzeilen sind die Werte für den Hellmodus ausdrücklich angegeben. ### Akzentrollen des standardmäßigen Hellmodus | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --ds-color-accent-background-default | #fff | Tatsächliche Rolle des Standard-Hell-Themes in Version 1.23.0. Das Laufzeit-Dunkelschema verwendet eigene Rollenwerte. | | --ds-color-accent-background-tinted | #eef4fa | Tatsächliche Rolle des Standard-Hell-Themes in Version 1.23.0. Das Laufzeit-Dunkelschema verwendet eigene Rollenwerte. | | --ds-color-accent-surface-tinted | #ddeaf6 | Tatsächliche Rolle des Standard-Hell-Themes in Version 1.23.0. Das Laufzeit-Dunkelschema verwendet eigene Rollenwerte. | | --ds-color-accent-surface-hover | #c7ddf0 | Tatsächliche Rolle des Standard-Hell-Themes in Version 1.23.0. Das Laufzeit-Dunkelschema verwendet eigene Rollenwerte. | | --ds-color-accent-border-subtle | #99c0e3 | Tatsächliche Rolle des Standard-Hell-Themes in Version 1.23.0. Das Laufzeit-Dunkelschema verwendet eigene Rollenwerte. | | --ds-color-accent-border-default | #2a7cc5 | Tatsächliche Rolle des Standard-Hell-Themes in Version 1.23.0. Das Laufzeit-Dunkelschema verwendet eigene Rollenwerte. | | --ds-color-accent-text-default | #002c54 | Tatsächliche Rolle des Standard-Hell-Themes in Version 1.23.0. Das Laufzeit-Dunkelschema verwendet eigene Rollenwerte. | | --ds-color-accent-base-default | #0062ba | Tatsächliche Rolle des Standard-Hell-Themes in Version 1.23.0. Das Laufzeit-Dunkelschema verwendet eigene Rollenwerte. | | --ds-color-accent-base-hover | #004f96 | Tatsächliche Rolle des Standard-Hell-Themes in Version 1.23.0. Das Laufzeit-Dunkelschema verwendet eigene Rollenwerte. | | --ds-color-accent-base-active | #003d75 | Tatsächliche Rolle des Standard-Hell-Themes in Version 1.23.0. Das Laufzeit-Dunkelschema verwendet eigene Rollenwerte. | | --ds-color-accent-base-contrast-default | #fff | Tatsächliche Rolle des Standard-Hell-Themes in Version 1.23.0. Das Laufzeit-Dunkelschema verwendet eigene Rollenwerte. | ### Neutrale Rollen des Standard-Hellmodus | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --ds-color-neutral-background-default | #fff | Verwenden Sie neutrale Rollen für unterstützende Oberflächen und Texte, ohne ihnen unnötig eine Statusbedeutung zuzuweisen. | | --ds-color-neutral-background-tinted | #f3f3f4 | Verwenden Sie neutrale Rollen für unterstützende Oberflächen und Texte, ohne ihnen unnötig eine Statusbedeutung zuzuweisen. | | --ds-color-neutral-surface-default | #fff | Verwenden Sie neutrale Rollen für unterstützende Oberflächen und Texte, ohne ihnen unnötig eine Statusbedeutung zuzuweisen. | | --ds-color-neutral-surface-tinted | #e8e8e9 | Verwenden Sie neutrale Rollen für unterstützende Oberflächen und Texte, ohne ihnen unnötig eine Statusbedeutung zuzuweisen. | | --ds-color-neutral-border-subtle | #bbbcbd | Verwenden Sie neutrale Rollen für unterstützende Oberflächen und Texte, ohne ihnen unnötig eine Statusbedeutung zuzuweisen. | | --ds-color-neutral-text-subtle | #5b5d60 | Verwenden Sie neutrale Rollen für unterstützende Oberflächen und Texte, ohne ihnen unnötig eine Statusbedeutung zuzuweisen. | | --ds-color-neutral-text-default | #292c30 | Verwenden Sie neutrale Rollen für unterstützende Oberflächen und Texte, ohne ihnen unnötig eine Statusbedeutung zuzuweisen. | | --ds-color-neutral-base-default | #24272b | Verwenden Sie neutrale Rollen für unterstützende Oberflächen und Texte, ohne ihnen unnötig eine Statusbedeutung zuzuweisen. | | --ds-color-neutral-base-contrast-default | #fff | Verwenden Sie neutrale Rollen für unterstützende Oberflächen und Texte, ohne ihnen unnötig eine Statusbedeutung zuzuweisen. | ### Größenmodus und typografische Grundlagen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --ds-size-mode-font-size--sm | 1 | Tatsächlich exportierter Skalarwert oder Ausdruck. Verwenden Sie data-size-Modi, statt jeden Skalarwert als Pixelwert zu interpretieren. | | --ds-size-mode-font-size--md | 1.125 | Tatsächlich exportierter Skalarwert oder Ausdruck. Verwenden Sie data-size-Modi, statt jeden Skalarwert als Pixelwert zu interpretieren. | | --ds-size-mode-font-size--lg | 1.3125 | Tatsächlich exportierter Skalarwert oder Ausdruck. Verwenden Sie data-size-Modi, statt jeden Skalarwert als Pixelwert zu interpretieren. | | --ds-size-base | 18 | Tatsächlich exportierter Skalarwert oder Ausdruck. Verwenden Sie data-size-Modi, statt jeden Skalarwert als Pixelwert zu interpretieren. | | --ds-font-family | Inter | Tatsächlich exportierter Skalarwert oder Ausdruck. Verwenden Sie data-size-Modi, statt jeden Skalarwert als Pixelwert zu interpretieren. | | --ds-font-weight-regular | 400 | Tatsächlich exportierter Skalarwert oder Ausdruck. Verwenden Sie data-size-Modi, statt jeden Skalarwert als Pixelwert zu interpretieren. | | --ds-font-weight-medium | 500 | Tatsächlich exportierter Skalarwert oder Ausdruck. Verwenden Sie data-size-Modi, statt jeden Skalarwert als Pixelwert zu interpretieren. | | --ds-font-weight-semibold | 600 | Tatsächlich exportierter Skalarwert oder Ausdruck. Verwenden Sie data-size-Modi, statt jeden Skalarwert als Pixelwert zu interpretieren. | | --ds-line-height-sm | 1.3 | Tatsächlich exportierter Skalarwert oder Ausdruck. Verwenden Sie data-size-Modi, statt jeden Skalarwert als Pixelwert zu interpretieren. | | --ds-line-height-md | 1.5 | Tatsächlich exportierter Skalarwert oder Ausdruck. Verwenden Sie data-size-Modi, statt jeden Skalarwert als Pixelwert zu interpretieren. | | --ds-line-height-lg | 1.7 | Tatsächlich exportierter Skalarwert oder Ausdruck. Verwenden Sie data-size-Modi, statt jeden Skalarwert als Pixelwert zu interpretieren. | | --ds-border-radius-base | 0.25rem | Tatsächlich exportierter Skalarwert oder Ausdruck. Verwenden Sie data-size-Modi, statt jeden Skalarwert als Pixelwert zu interpretieren. | | --ds-border-radius-sm | min(.5 * var(--ds-border-radius-base), var(--ds-border-radius-scale)) | Tatsächlich exportierter Skalarwert oder Ausdruck. Verwenden Sie data-size-Modi, statt jeden Skalarwert als Pixelwert zu interpretieren. | | --ds-border-radius-md | min(var(--ds-border-radius-base), 2 * var(--ds-border-radius-scale)) | Tatsächlich exportierter Skalarwert oder Ausdruck. Verwenden Sie data-size-Modi, statt jeden Skalarwert als Pixelwert zu interpretieren. | | --ds-border-radius-lg | min(2 * var(--ds-border-radius-base), 5 * var(--ds-border-radius-scale)) | Tatsächlich exportierter Skalarwert oder Ausdruck. Verwenden Sie data-size-Modi, statt jeden Skalarwert als Pixelwert zu interpretieren. | ## Vollständiger Leitfaden zum Designsystemet-Designsystem Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface. Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen. ## Verhalten, CSS und Theme-Pakete des Designsystemet-Designsystems ### Die drei Teile in der richtigen Reihenfolge laden > Designsystemet trennt frameworkunabhängiges Verhalten, Komponenten-CSS und Theme-Werte. Dieses Beispiel verwendet designsystemet-web und designsystemet-css in Version 1.23.0, importiert zunächst das CSS und anschließend das Standard-Theme und registriert das Verhalten einmalig. Ein gestaltetes Feld ohne sein Verhaltenspaket entspricht nicht derselben Implementierung wie das hier gezeigte verbundene ds-field. ### Den aktuellen Plain-HTML-Vertrag verwenden Das Beispiel verwendet ds-field um normale input-, textarea- und select-Elemente mit ds-input-Klassen. So bleiben native Formularsteuerelemente erhalten, während das Paket Beschriftungen und Beschreibungen verknüpft. Es kopiert kein älteres, nur auf React basierendes Feld-API. Der vollständige Quellcode enthält die korrekten Paketimporte und die ursprüngliche Prüfungslogik der Anwendung. ## Farbschema und Größenmodi des Designsystemet-Designsystems ### Darstellung über Datenattribute ändern Die Seite setzt data-color-scheme im Stammelement auf light oder dark. Das Theme stellt die entsprechenden semantischen Farben bereit, während die Formularwerte unverändert bleiben. Die Parametertabelle gibt die Standardwerte für den Hellmodus ausdrücklich an; sie erweckt nicht den Eindruck, dieselben Hex-Farben würden auch im Dunkelmodus gelten. Eine Schaltfläche für die Darstellung beschreibt, welche Aktion als Nächstes ausgeführt wird. ### Den Größenmodus auf das gesamte System anwenden Die Steuerung für die Leseschriftgröße ändert data-size zwischen sm, md und lg. Dadurch ändert sich der Größenmodus des Themes, statt nur die Überschrift zu vergrößern. Die veröffentlichten Modusfaktoren sind 1, 1.125 und 1.3125. Sie fließen in die Tokenformeln ein und sind keine allgemeingültige Vorgabe, Steuerelemente auf diese Pixelwerte zu setzen. Das Beispiel prüft den großen Modus sowohl auf schmalen Smartphone-Bildschirmen als auch auf dem Desktop. ## Inter und semantische Typografie im Designsystemet-Designsystem ### Die vorgesehenen Schriftschnitte einbinden Die Vorschau bindet Inter in den Schriftschnitten 400, 500 und 600 ein und aktiviert das dokumentierte cv05-Schriftmerkmal für die Kleinbuchstabenform von l. Die Seite verwendet native Überschriften- und Absatzklassen, damit Schriftstärke und Zeilenhöhe dem Theme folgen. Eine festgelegte Anmerkung in 14px ist eine eigens verfasste ergänzende Notiz und liegt eindeutig außerhalb der Hauptskala für Interaktionen. ### Hilfetexte direkt neben dem jeweiligen Steuerelement platzieren Der Hinweis zum Titel erläutert den Zweck der Beschriftung; der Hinweis zum Ergebnis beschreibt, welche Art von Inhalt erwartet wird. Beide stehen neben den jeweiligen Steuerelementen und sind über ds-field mit ihnen verknüpft. Ergänzende Hinweise befinden sich in einer separaten Karte, die auf schmalen Bildschirmen unter dem Formular angeordnet wird. Die Anweisungen sind nicht erst beim Darüberfahren mit dem Mauszeiger sichtbar. ## Automatische Beziehungen und Zeichenanzahl-Rückmeldung im Designsystemet-Designsystem ### ds-field jeweils ein Steuerelement verknüpfen lassen Jedes ds-field enthält ein inputähnliches Steuerelement, seine Beschriftung und optionale data-field-Beschreibungen. Das Paket weist IDs zu und erstellt die Beziehungen zwischen Beschriftungen und Beschreibungen. Werden nicht zusammengehörige Steuerelemente in einem ds-field gruppiert, wird dieser automatische Vertrag mehrdeutig. Verwenden Sie für eine Gruppe ein fieldset, statt anzunehmen, der Wrapper sei ein allgemeiner Formularcontainer. - In jedem ds-field nur ein inputähnliches Steuerelement verwenden. - Zusammengehörige Hilfetexte über data-field-Beschreibungen bereitstellen. - Den nativen Observer IDs und Beschreibungsbeziehungen verwalten lassen. ### Verstehen, was der Zähler misst Der native Zähler verwendet data-limit, data-under und data-over; %d wird dabei durch die verbleibende oder überschrittene Anzahl ersetzt. In Version 1.23.0 berechnet er den Wert anhand der Zeichenlänge von JavaScript und stellt Rückmeldungen über data-label/data-state bereit, einschließlich eines ungültigen Zustands bei Überschreitung des Grenzwerts. Für jedes Emoji ist damit keine Zählung nach Graphemen garantiert. Die Begrenzung auf 140 Zeichen ist die Schreibvorgabe dieses Beispiels und keine offizielle Inhaltsregel von Designsystemet. ## Anwendungsvalidierung und Prüfstatus im Designsystemet-Designsystem ### Die Vorgaben der Anwendung gesondert validieren Die Anwendung verlangt einen nicht leeren Aufgabentitel und ein nicht leeres Ergebnis und lehnt Ergebnisse ab, die länger als das Beispiel-Limit sind. Nach Anzeige einer umsetzbaren Meldung wird das entsprechende Feld fokussiert. Der native Zähler gibt Auskunft über die Länge, während der Submit-Handler die lokale Prüfregel durchsetzt. Durch maxlength wird eingefügter Text nicht stillschweigend abgeschnitten. ### Daten bei Änderungen der Darstellung beibehalten Eine erfolgreiche Prüfung zeigt den aktuellen Titel und das Ergebnis als Text an. Wenn eines der beiden Felder bearbeitet wird, wird das Ergebnis gelöscht. Änderungen an Darstellung oder Größe lassen es bestehen, da diese Steuerelemente den Auftrag nicht verändern. Diese Unterscheidung ist beabsichtigt und wurde überprüft. Es werden keine Daten an einen Projektmanagementdienst gesendet, und die Vorschau behauptet niemals, dass eine externe Aufgabe erstellt wurde. ## Vollständige native Feldimplementierung für das Designsystemet-Designsystem ### Das versionierte Beispiel reproduzieren Erstelle ein Vite-Vanilla-Projekt, installiere die beiden festgelegten Pakete von Designsystemet und Inter und speichere anschließend den vollständigen Einstiegspunkt und digdir.css. Behalte das Root-Mount-Element bei. Der Quellcode enthält die Registrierung, die Reihenfolge der Themes, das Markup für den Zeichenzähler, die Darstellungssteuerelemente und sämtliche Zustandsübergänge zur Validierung der Prüfung. Die lokale Vorschau verwendet denselben nativen Feld-Observer und keine handgezeichnete Imitation. 1. Importiere zuerst einmal das Verhalten, dann die Komponente CSS und das Standard-Theme. 2. Lade Inter in den Schnitten 400, 500 und 600 und speichere den vollständigen Einstiegspunkt und CSS. 3. Teste den Zeichenzähler bei Überschreitung des Limits und korrigiere das Ergebnis. 4. Prüfe den Inhalt, wechsle Größe und Darstellung und bearbeite dann den Text, um das Ergebnis zu löschen. ### Verhalten bei Überschreitung und Wiederherstellung testen Füge 150 normale Zeichen in das Ergebnisfeld ein und überprüfe, ob eine Überschreitung um zehn Zeichen gemeldet wird. Die Prüfung muss den Inhalt ablehnen. Ersetze den Text durch ein kurzes Ergebnis und führe die Prüfung erfolgreich aus. Wechsle anschließend den Dunkelmodus und die Schriftgröße, ohne das Ergebnis zu verlieren. Bearbeite den Titel und vergewissere dich, dass die vorherige Prüfung gelöscht wird. Überprüfe den sichtbaren Fokus und den Textumbruch bei jeder Viewportbreite. ## Komponentenbeispiele des Designsystemet-Designsystems ### main.js — vollständige Untersuchung nativer Felder und Themes Vollständiger Editor, echtes Markup für den Zeichenzähler, Steuerelemente für Darstellung und Größe sowie lokale Prüfvalidierung. ``` 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()}); ``` Code-Referenz - Select verwendet das aktuelle ds-input-Styling innerhalb von ds-field. Die Rückmeldung des Zeichenzählers wird vom nativen Observer verwaltet. ### digdir.css — ursprüngliche responsive Gestaltung Layout rund um das native Theme, einschließlich der Inter-Feature-Einstellung. ``` 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}} ``` Code-Referenz - Änderungen an Theme und Größe erhalten die Werte; nur Änderungen am Inhalt machen die Prüfung ungültig. ## Einrichtung eines Agents für das Designsystemet-Designsystem ### Ausgangspunkt für die Implementierung Native Label-Zuordnungen, Zeichenzählerstatus, Validierungswiederherstellung sowie Änderungen an Größe und hellem/dunklem Modus wurden in einem echten Browser getestet. ``` 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 ``` ### Ein Prompt für dein Projekt ``` Erstelle den Editor für den Auftrag mit dem Verhalten von Designsystemet 1.23.0, CSS und dem Standard-Theme in der korrekten Reihenfolge. Verwende ds-field mit einem nativen Steuerelement, tatsächlichen data-field-Attributen für den Zeichenzähler und den Inter-Schriftschnitten. Erhalte die Prüfung bei Änderungen an Darstellung und Größe, lösche sie nach Änderungen am Inhalt und setze die ursprüngliche Begrenzung auf 140 Zeichen um, ohne eingefügten Text abzuschneiden. ``` ## Quellen und Geltungsbereich des Designsystemet-Designsystems Ein lokal mit OpenDesign erstellter Editor auf Basis von Designsystemet CSS und dem Webverhalten von 1.23.0. Das Standard-Theme und der Feld-Observer sind nativ; der Inhalt des Auftrags, die Begrenzung auf 140 Zeichen und der Prüfablauf sind eigens erstellt. - Einrichtung und Theme-Reihenfolge Natives Verhalten, CSS, Theme- und Schriftkonfiguration. - Grundlagen des Themes Einstiegspunkte für Größe, Farbe und Typografie. - Öffentliche Implementierung Versionierter ds-field-Observer und generiertes Theme. - Geltungsbereich des Systems Geltungsbereich gemeinsam genutzter Komponenten und Richtlinien. ## Weiterführende Ressourcen zum Designsystemet-Designsystem ### DSFR Erfasse die konkrete Typografie, das Raster und das Akkordeon des französischen Staatssystems API innerhalb seines institutionellen Kontexts. Vergleiche verknüpftes und unabhängiges Auf- und Zuklappen in einem klar neutralen Lernbeispiel. ### Europa Component Library Untersuchen Sie Europas Farb-, Typografie- und Abstandsrollen in EC anhand eines vollständigen nativen Accordion-Briefings – einschließlich Tastaturbedienung, „Alle öffnen“-Verhalten und lesbarem Fallback ohne JavaScript. ### gov.cz Designsystem Entdecke die tatsächlichen Farbrollen, Kartenbereiche und die native Paginierung von Gov Design System CE anhand eines vollständigen Lesetoolkits mit sechs Ressourcen und explizitem Fokus- und Seitenstatus. - [Implementierungsreferenz](https://designsystemet.no/en/fundamentals/code/setup) - [Quelle](https://github.com/digdir/designsystemet) - [Code-Referenz](https://designsystemet.no/en/fundamentals/code/setup) - [Einrichtung und Theme-Reihenfolge Natives Verhalten, CSS, Theme- und Schriftkonfiguration.](https://designsystemet.no/en/fundamentals/code/setup) - [Grundlagen des Themes Einstiegspunkte für Größe, Farbe und Typografie.](https://designsystemet.no/en/fundamentals) - [Öffentliche Implementierung Versionierter ds-field-Observer und generiertes Theme.](https://github.com/digdir/designsystemet) - [Geltungsbereich des Systems Geltungsbereich gemeinsam genutzter Komponenten und Richtlinien.](https://designsystemet.no/en/intro)