Open mrosvik opened 2 months ago
Å legge til flere skalaer tenker jeg er uproblematisk fra et Figma/design perspektiv, men utfordringen blir hvordan legger vi til denne fleksibiliteten? Jeg ser for meg tre mulige løsninger akkurat nå og tar gjerne forslag på andre 😄
Varianter av komponenter. For komponenter hvor det er aktuelt kan vi legge til fargevarianter slik vi gjør med button i dag. Da vil designeren kunne bestemme hvilken variant de trenger i designet. Det er nok den enkleste implementasjonen da vi ikke trenger noen store endringer på tokensstrukturen... Meeeen
Vi kan løse det i Token strukturen på samme måte som vi løser ulike brands i dag. At man setter en kontekst på selve masterkomponenten for hva deres designsystem skal bruke.
Kanskje det enkleste er det beste? Om vi lager et default oppsett hvor vi har satt de nye fargeskalaene til å peke på "fornuftige" komponenter. Så kan designere enkelt endre hvilken tokens som er satt til komponentene for å endre det.
En liten utfordring til! Mitt inntrykk er at det veldig ulikt hvordan fargesystem er laget for profilene til ulike aktører, det gjelder også hvor mange farger de forskjellige aktørene har.
Om vi nå setter det opp med primær, sekundær og accent. Vil en virksomhet kunne si at de kun trenger primær og accent? Hvordan vil det påvirke token strukturen. Eller skal vi be dem om å legge til flere farger i så fall?
Første jeg tenker er en kombinasjon av alternativ 2 (som @Febakke foreslår) og neutral color på form components (og/eller generelt alle som har accent farge).
En begrensning blir antall sets du kan ha i Figma (4stk) utenom enterprise prising, og at de kan fritt endres i Figma?
Vi kan så utvide koden til at du bestemmer hvilket tema/brand/kontekst som brukes på en kontekst. Da vil de i kode hvertfall kunne definere det i sine "wrapper" komponent for designsystemet.
Pseudo-kode:
// Primær accent grønn farge
<UdirButton>
<Button data-ds-theme="udir" />
<UdirButton>
// Tonet ned grønnfarge?
<UdirFormButton>
<Button data-ds-theme="udir-subtle" />
<UdirFormButton>
// Eller bare bruke atributtet uten wrapper komponent
// Alle komponentene vil følge tema "udir-subtle"
<div data-ds-theme="udir-subtle">
<form>
<Textfield />
<Fieldset />
<Checkbox />
<Radio />
<Button data-ds-theme="udir"> // <- Dersom du ønsker unntak fra inneværende tema
</Fieldset>
</form>
</div>
Tenker du at dette løses noe som dette i Token strukturen?
NB: En konsekvens av dette vil være at du ikke kan bruke primary og secondary i samme kontekst.
Tenker du at dette løses noe som dette i Token strukturen?
Nei, tenker vi kunne løst det uten å røre tokens-strukturen. Det blir bare litt justeringer på det rundtliggende.
Om vi ikke endrer token strukturen må vi gå for løsning 1 eller 3 som jeg nevnte over her. Jeg er ganske sikker på at 1 blir uaktuelt da det vil gjøre komponentbiblioteket gigantisk. 3 tror jeg er mer realistisk og vil fungere bra så lenge de som tar det i bruk ikke skal endre mellom accent og primary på button. (En work-around er jo at de lager varianter internt der de trenger det)
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 somradio
f.eks.Forslag om å utvide accent
Komponent-tokens eller ikke?
Oppfølgingspunkt