Farger

Fargesystemet bygger på semantiske fargeskalaer som sikrer konsistent bruk og tilstrekkelig kontrast.

DsColorScheme

DsColorScheme inneholder ni semantiske fargeskalaer:

Skala	Bruksområde
accent	Primærhandlinger og fremhevinger
neutral	Nøytralt innhold, bakgrunner og skillelinjer
brand1	Første merkevarefargen
brand2	Andre merkevarefargen
brand3	Tredje merkevarefargen
success	Bekreftelser og suksessmeldinger
danger	Feil og destruktive handlinger
warning	Advarsler
info	Informasjonsmeldinger

DsColorScale

Hver fargeskala består av 16 tokens fordelt i fem grupper.

Bakgrunn (2 tokens)

Token	Bruk	Kontrast
backgroundDefault	Standard sidebakgrunn	--
backgroundTinted	Tonet bakgrunn for seksjoner	--

Overflate (4 tokens)

Token	Bruk	Kontrast
surfaceDefault	Kort, boks, standard overflate	--
surfaceTinted	Tonet overflate	--
surfaceHover	Hover-tilstand på overflate	--
surfaceActive	Aktiv-tilstand på overflate	--

Kantlinje (3 tokens)

Token	Bruk	Kontrast
borderSubtle	Subtile skillelinjer	--
borderDefault	Standard kantlinjer	>=3:1 mot bakgrunn
borderStrong	Tydelige kantlinjer, fokusindikatorer	>=3:1 mot bakgrunn

Tekst (2 tokens)

Token	Bruk	Kontrast
textSubtle	Sekundær tekst, hjelpetekst	>=4.5:1 mot bakgrunn
textDefault	Brødtekst og overskrifter	>=4.5:1 mot bakgrunn

Base (5 tokens)

Token	Bruk	Kontrast
baseDefault	Fylte knapper, aktive elementer	--
baseHover	Hover-tilstand på base	--
baseActive	Aktiv-tilstand på base	--
baseContrastSubtle	Subtil tekst på base	>=3:1 mot base
baseContrastDefault	Tekst og ikoner på base	>=4.5:1 mot base

DsColorScope

DsColorScope lar deg overstyre fargeskalaen for et undertreav widgeter:

DsColorScope(
  color: DsColor.danger,
  child: DsButton(
    variant: DsButtonVariant.primary,
    onPressed: () => slett(),
    child: Text('Slett'),
  ),
)

Alle komponenter inne i DsColorScope bruker den angitte fargeskalaen i stedet for standard.

DsColor

DsColor-enumen representerer de tilgjengelige fargeskalaene:

DsColor.accent
DsColor.neutral
DsColor.brand1
DsColor.brand2
DsColor.brand3
DsColor.success
DsColor.danger
DsColor.warning
DsColor.info
DsColor.custom('minFarge')  // Egendefinert fargeskala fra tema

Bruke fargetokens direkte

Widget build(BuildContext context) {
  final farger = DsTheme.of(context).colorScheme;
  final accent = farger.accent;

  return Container(
    color: accent.surfaceDefault,
    child: Text(
      'Eksempel',
      style: TextStyle(color: accent.textDefault),
    ),
  );
}

Kontrastgarantier

Fargesystemet garanterer følgende kontrastnivå i både lyst og mørkt modus:

• Tekst mot bakgrunn: textDefault og textSubtle har minst 4.5:1 kontrast
• Kantlinjer mot bakgrunn: borderDefault har minst 3:1 kontrast
• Tekst på base: baseContrastDefault har minst 4.5:1 kontrast mot baseDefault