designsystemet icon indicating copy to clipboard operation
designsystemet copied to clipboard

More flexible color theming

Open mrosvik opened this issue 5 months ago • 6 comments

Møte "Fargefloka" 4. september 2024

Udir har delt sin erfaring med bruk av temabyggeren og tokens-oppsettet.

Hovedproblem

Slik tokens er satt opp nå med èn accent-farge, er ikke systemet fleksibelt nok. Udir og Mattilsynet har grønn som primærfarge. De ønsker denne grønnfargen på noen av de interaktive komponentene, men den passer seg ikke til alle. Når den samme fargen brukes på alle interaktive element blir det en for høy vekting av denne fargen (den blir mer fremtredende enn ønskelig).

Det er ikke gitt at radioknapper og vanlig knapper MÅ ha samme farge. Dette vil være ulikt fa organisasjon til organisasjon. Vi må lage det fleksibelt nok til at en virksomhet selv kan bestemme om Button skal ha samme farge som radio f.eks.

Forslag om å utvide accent

  • Det ble foreslått å utvide accent til flere skalaer.
  • Eksempel fra token-struktur hos Møller: https://gnist.moller.no/latest/?path=/docs/foundation-colors-overview--docs

Komponent-tokens eller ikke?

  • Fordel: De gir mulighet til å sette en komponent til accent og en annen til neutral f.eks. Det gir deg veldig mye fleksibilitet.
  • Ulempe: Det blir veldig komplekst både å lage og holde oppdatert hvis noen endrer disse verdiene.

Oppfølgingspunkt

  • [ ] Teste om vi kan utvide fargeskalaen med flere farger. Utvide accent til flere skalaer.
  • [ ] Hvordan løser vi dette i praksis? I Figma og i kode? Enten gjennom varianter i Figma, eller gjennom tokens-logikk.
  • [ ] Arbeidsmøte med teamet for å se på mulige løsninger
  • [ ] Presentere forslag til Udir
### Tasks
- [ ] https://github.com/digdir/designsystemet/issues/2373

mrosvik avatar Sep 04 '24 10:09 mrosvik