Organisering av typografi-tokens

[piofinn]

I dagens token-definisjoner ligger definisjoner av verdier for typografi på litt forskjellige nivåer i strukturen. I tillegg er det noen ganske sterke knytninger mellom grunnverdiene for tekststørrelse og typografistilene de brukes i. Her kunne man trengt en liten opprydding for å få mer helhetlig struktur, og navn som samsvarer enda bedre med bruk.

🎢 Dagens struktur

• typography
  • weight
    • normal
    • bold
  • font
    • title
      • 1 til 7
    • body
    • small
  • line
    • height
      • 24 til 64
  • title-1, title-2, body, osv.
    • fontSize
    • fontWeight
    • lineHeight

✨ Forslag til revidert struktur

Her speiler navnene på variablene (når man følger stien nedover) CSS-attributtene de settes på i større grad, noe som forhåpentligvis gjør dem mer intuitive å navigere i. For eksempel finner man her både typography.font.size, typography.font.weight, og typography.font.family tilsvarende attributtene font-size, font-weight og font-family.

De grunnleggende verdiene er også frakoblet bruken sin i de sammensatte typografi-stilene, og nevnte stiler er sortert for seg selv som f.eks. typography.style.body.

• typography
  • font
    • family (Denne mangler i dag, bør være lik verdiene man finner i Sass)
      • regular (Evt. sans eller noe annet)
      • display
      • mono
    • weight
      • regular
      • bold
    • size (basert på systemet for units?)
      • 10
      • 20
      • 30
      • etc.
  • lineHeight (Her trenger vi kanskje ikke to nivåer?)
  • style (Nytt nivå, for å gruppere typografistilene)
    • title_1 (Understrek? Bindestrek gjør det vanskeligere å hente ut verdien i JS)
      • fontFamily: "{typography.font.family.display}"
      • fontSize: "{typography.font.size.60}" (aner ikke faktisk verdi her, bare et eksempel)
      • lineHeight: "{typography.lineHeight.64}"
      • fontWeight: "{typography.font.weight.regular}"

[piofinn]

Har ikke tenkt så mye på icon-verdiene som ligger der, men tror kanskje det er greit at de ligger litt på sida? Dersom fonten vår hadde fornuftig vekt ville de vært overflødige uansett 😑

[piofinn]

Apropos dette har jeg også veldig lyst til å få erstattet dagens skala for linjehøyder med relative verdier. Tipper at de statiske som brukes nå ikke funker kjempebra med de dynamiske fontstørrelsene 😅

Her trenger man sikkert ikke så mange verdier. I dag er den største relative linjehøyden vi bruker (i body-stilen) lik 1.6. Kanskje man bare kunne hatt desimalverdier f.o.m 1 t.o.m. 1.6? Altså 1, 1.1, 1.2, 1.3, 1.4, 1.5 og 1.6?