Overgang til versjon 3

Oppgradering

Etter å ha oppgradert til versjon 3 kan det hende at siden ikke ser ut som den skal. Det er fordi stilene i versjon 3 har lavere presedens enn andre stiler du har på siden din. Hvis du for eksempel har et reset-stilsett som du bruker må du endre stilene slik at de ikke overskriver stilene til designsystem-komponentene. Dette gjøres enten ved å lage et eget lag ved hjelp av @layer i CSS, eller ved å sette reset-stilene inn i laget aneo.reset. Under forklares begge fremgangsmåtene.

Lage eget reset-lag

Hvis du vil lage ditt eget reset-lag kan det gjøres på følgende måte. Hvis du for eksempel har følgende reset-CSS:

p, h1, h2 {
  display: block;
}

For å gjøre denne reset-koden kompatibel med versjon 3 kan følgende gjøres:

@layer my-reset, aneo;

@layer my-reset {
  p, h1, h2 {
    display: block;
  }
}

For at dette skal fungere må reset-CSSen importeres før designsystem-CSSen, slik at lagene opprettes i riktig rekkefølge. Når designsystem-CSSen importeres vil den deklarere sine egne lag i sin rekkefølge, og det vil ikke lenger være mulig å overstyre rekkefølgen og legge lag under designsystem-lagene.

Bruke eksisterende reset-lag

Designsystem-CSSen deklarerer allerede et lag som kan brukes for å sette inn stiler som skal ha lavere presedens enn designsystem-stilene. Dette laget heter aneo.reset. Hvis du vil bruke dette laget til å resette stilene kan det gjøres på følgende måte.

Ved f.eks denne CSSen før migrering:

p, h1, h2 {
  display: block;
}

Kan man gi den lavere presedens enn designsystem-CSSen ved hjelp av:

@layer aneo.reset {
  p, h1, h2 {
    display: block;
  }
}

Visuelle endringer

Versjon 3 introduserer visuelle endringer i typografi-komponentene. Ingress har fått light vekt, og header-overskriftene har fått små justeringer.