Legg til en minimal CSS reset i global.css

[NVEJoel]

Bakgrunn

Designsystemet leverer CSS-variabler (tokens), fonter og noen få globale regler via global.css, men inkluderer ingen CSS reset eller normalize. Dette gjør at hvert NVE-produkt som bruker designsystemet må legge til sin egen reset — noe som fører til inkonsistens og duplisert kode på tvers av repoer.

Nettlesere har ulike standardstiler (marginer, box-sizing, font-arv på skjemaelementer osv.), og uten en felles reset vil komponenter og layout oppføre seg ulikt avhengig av hva hvert enkelt prosjekt har lagt til lokalt.

Forslag

Legg til en minimal CSS reset i css/global.css (som allerede importeres via nve.css). Den bør dekke kun det som er nødvendig for de vi støtter nettlesere (Chrome, Safari, Edge, Firefox).

Foreslått innhold

/*
 * Minimal CSS reset — removes inconsistent browser defaults (margins, box-sizing,
 * font inheritance) so components render predictably across browsers.
 * Based on https://www.joshwcomeau.com/css/custom-css-reset/
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

body {
    min-height: 100svh;
    line-height: 1.5;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}
/* ===== End reset ===== */

Oppgaver:

• Oppdatere global.css med reset CSS
• Oppdatere docs https://designsystem.nve.no/introduction/forDevelopers/vue.html om at reset CSS finns i global.css og man trenger ikke legge in reset.css selv i projektet sitt.