Gå til hovedinnhold

Ressurser

Ny typografi

Gå over til Heading, Text og resten av den nye typografien, og til den nye avstandsskalaen i layout beta.

For deg som går over til Heading, Text og resten av @entur/typography/beta, eller som bruker gap og spacing fra @entur/layout/beta. Den dekker både de gamle komponentene (Heading1–Heading6, Paragraph og de andre) og tidligere versjoner av beta.

Se Typography (beta) for hvordan de nye komponentene brukes.

Migrer med en KI-agent

Skillen migrate-typography finner koden som berøres, endrer den og sjekker resultatet. I Claude Code installerer du pluginen og kjører skillen:

/plugin marketplace add entur/ai
/plugin install entur-linje@entur
/entur-linje:migrate-typography

I andre agenter, som GitHub Copilot og Cursor, limer du inn meldingen under. Les gjennom endringene agenten gjør.

Migrer dette prosjektet til den nye typografien i Entur Linje.

Les og følg denne migreringsguiden:
https://raw.githubusercontent.com/entur/design-system/main/skills/migrate-typography/SKILL.md

Relative lenker i guiden (f.eks. references/spacing.md) ligger under
https://raw.githubusercontent.com/entur/design-system/main/skills/migrate-typography/

De viktigste endringene

  • Ingen marger som standard. Legg løpende tekst i TextContainer, og bruk Flex gap eller spacing ellers.
  • spacing bruker samme skala som gap (xs, s, m, lg …), og { top, bottom } i stedet for -top og -bottom.
  • code-text og preformatted-text heter code og preformatted.
  • Blockquote og BlockquoteFooter er erstattet av Text variant="quote" i figure med figcaption.
  • external er fjernet fra Link. Skriv i lenketeksten hvor lenken går.
  • weight er medium eller bold.
  • Heading er h2 uten as, og Text uten variant er et avsnitt.
  • Heading har ikke lenger variant="label" eller "sublabel". Bruk Text variant="label" eller Label.

Fra de gamle komponentene

Slik tilsvarer de gamle komponentene de nye:

Heading1 → <Heading as="h1" variant="title-1">
Heading2 → <Heading as="h2" variant="title-2">
Heading3 → <Heading as="h3" variant="subtitle-1">
Heading4 → <Heading as="h4" variant="subtitle-2">
Heading5 → <Heading as="h5" variant="section-1">
Heading6 → <Heading as="h6" variant="section-2">
Paragraph → <Text variant="paragraph">
LeadParagraph → <Text variant="leading">
SubParagraph → <Text variant="subparagraph">
SmallText → <Text variant="caption" as="span">
Label → <Label> for et felt
      → <Text variant="label"> for en tekst som navngir en verdi
      → <Text variant="subparagraph" tone="subdued"> for en beskrivelse
SubLabel → som Label, med variant="sublabel" for en tekst som navngir en verdi
StrongText → <Text as="strong" weight="bold">
EmphasizedText → <Text variant="emphasized">
CodeText → <Text variant="code">
PreformattedText → <Text variant="preformatted">