feat(fonts): bruke variable fonts og hoste de lokalt

[amish1188]

Her kommer et nytt forsøk på å hoste fonter 👋

Jeg har tatt i bruk variable fonts, som gir mindre fontfiler og gjør dem enklere å hoste og distribuere. I den forbindelse legger jeg også til en LICENSE.txt i /fonts-mappen. Det er tillatt å hoste disse fontene så lenge lisensen følger med.

I design system-pakken vil fontene nå ligge i public-mappen. global.css importerer dem via ../fonts, noe som løser problemet vi opplevde siste gang vi forsøkte å hoste fonter. Det ble brukt en absolutt sti til fontfilene, som førte til at enkelte prosjekter forsøkte å laste dem fra sin egen root-mappe. Nå bruker vi relativ font som forhåpentligvis løser problemet.

Vi fjerner også importen av @shoelace-style/shoelace/dist/themes/light.css fra nve-designsystem.ts.
I stedet kopierer vi Shoelace-stylingen direkte inn i en egen CSS-fil. Dette gjør oppsettet mer oversiktlig og reduserer kompleksiteten rundt CSS-imports. Vi oppdaterer shoelace ikke så ofte så dette er ikke et problem. Fremover er det kun global.css som importerer all nødvendig CSS i tillegg til tema css som fortsatt må importeres av prosjektet.

Alle Shoelace-tokens, samt endringene vi har gjort på dem, er samlet i en separat fil: shoelace-style.css. Jeg har valgt å beholde Shoelace sin opprinnelige struktur og legge våre endringer i en egen :root nederst i fila. På den måten er det enklere å se hva som sto der før, og hva vi faktisk har endret.

global.css, shoelace-style.css og fonts-mappen blir også kopiert inn i docs-prosjektet. Siden docs-siden bruker komponentene direkte fra src (og ikke nve-designsystem sin dist-pakke), må disse ressursene injiseres manuelt der også. Det viste seg å være litt knotete å få fonter til å fungere i docs-prosjektet, så dette er verdt å være ekstra oppmerksom på.

Test gjerne lokalt om fontene fungerer i andre prosjekter – både i dev- og prod-build, hvis mulig. Deretter kan vi verifisere at alt fortsatt fungerer som forventet i deployment.

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-meadow-0c645bd03-750.westeurope.5.azurestaticapps.net