chore: understanding the color scale

apps/storefront/app/grunnleggende/designelementer/farger/page.mdx

@@ -2,6 +2,7 @@ import { PaletteIcon } from '@navikt/aksel-icons';
 
 import { MenuPageLayout } from '@layouts';
 import { TokenList } from '../../../../components/Tokens/';
+import {Image} from '../../../../components/Image';
 
 export const metadata = {
   title: 'Farger',
@@ -22,19 +23,130 @@ export default ({ children }) => (
   />
 );
 
-## Et fleksibelt fargesystem
 
 Fargesystemet består av globale farger som refererer til hva fargen er (eks. red-1) og et semantisk nivå som beskriver hva fargen skal brukes til (eks. Text.Danger).
 
-### Navnestruktur
+## Semantiske farger
 
-Et semantisk fargenavn er bygget opp av 3 ledd: <br/>
-_farge - styrke - vekt_ <br/>
+Et semantisk fargenavn er bygget opp av 3 ledd: Navn på fargeskala, gruppe (bruksområde) og variant.
 
-- Background: Som regel bakgrunnen på hele siden (HTML body).
-- Surface: Bakgrunnsfargen til en ting. Eks. et panel, en knapp, en seksjon, etc.
-- Border: Fargen til en ramme (stroke).
-- Text/Icon: Fargen på tekst og ikoner.
+<Image
+  src='/img/tomat.png'
+  alt='Skjermbilde av Figma som vise hvor du finner plugins'
+  boxShadow={false}
+  dataUnstyled
+/>
+
+* `Navn` Det første leddet er navnet på fargeskalaen. 
+Som standard kommer Designsystemet med fargeskalaene Success, Danger, Warning, Info og Neutral.
+Flere skalaer kan legges til ved hjelp av [Temabyggeren](https://theme.designsystemet.no/).
+
+* `Gruppe` Hver fargeskala er delt inn i gruppene Background, Surface, Border, Text og Base. 
+Disse gruppene beskriver bruksområdene til fargene. Border-gruppen skal for eksempel brukes på rammer (strokes).
+
+<Image
+  src='/img/tomat2.png'
+  alt='Skjermbilde av Figma som vise hvor du finner plugins'
+  boxShadow={false}
+  dataUnstyled
+  caption='Viser fargeskalaen til den grønne Success fargen.'
+/>
+
+
+* `Variant` Inne i hver gruppe finnes det varianter som beskriver hvordan fargene ser ut eller skal brukes. 
+Tinted betyr for eksempel at fargen har et hint av farge i seg, mens Hover betyr at fargen er tenkt brukt for en interaktiv tilstand.
+
+<Image
+  src='/img/tomat3.png'
+  alt='Skjermbilde av Figma som vise hvor du finner plugins'
+  boxShadow={false}
+  dataUnstyled
+  caption='Viser hvordan de semantiske fargene kan brukes i designet. Eksempelet bruker fire forskjellige fargeskalaer. Danger, Neutral og to forskjellige blåskalaer.'
+/>
+
+
+## Oversikt og forklaring av farger
+Hver fargeskala består av totalt 16 farger, nøye utformet for å dekke ulike behov i designet. 
+Nedenfor finner du en oversikt over de forskjellige fargene og deres tiltenkte bruksområder.
+
+
+| Navn      | Bruksområde |
+| ----------- | ----------- |
+| 1.  Background default     | Standard bakgrunnsfarge.       |
+| 2.  Background tinted      | Bakgrunn med et hint av farge i seg.        |
+| 3.  Surface default        | Standard farge for overflater / komponenter.        |
+| 4.  Surface tinted         | Overflater / komponenter med et hint av farge i seg.        |
+| 5.  Surface hover          | Hover-farge til overflater / komponenter.       |
+| 6.  Surface active         | Active-farge til overflater / komponenter.       |
+| 7.  Border subtle          | Border-farge med lav kontrast til dekorativ bruk (skillelinjer).     |
+| 8.  Border default         | Standard border-farge til skjemakomponenter og meningsbærende elementer.       |
+| 9.  Border strong          | Border-farge med høy kontrast for ekstra synlighet.      |
+| 10. Text subtle            | Tekst- og ikonfarge med lavere kontrast.        |
+| 11. Text default           | Tekst- og ikonfarge med høy kontrast og god synlighet.      |
+| 12. Base default           | Standardfarge for solide bakgrunner.       |
+| 13. Base hover             | Hover-farge for solide bakgrunner.          |
+| 14. Base active            | Active-farge for solide bakgrunner.          |
+| 15. Base contrast subtle   | Farge med god kontrast mot Base default.     |
+| 16. Base contrast default  | Farge med god kontrast mot Base default og Base hover.      |
+
+
+### Background
+Background-fargene brukes for å fargelegge store flater og er som oftest det bakerste laget på en nettside. Det er vanlig å bruke disse fargene på body-elementet.
+
+* `Background default` er den lyseste og mest nøytrale bakgrunnsfargen.
+* `Background tinted` får et hint av farge i seg og kan brukes for å skape variasjon i bakgrunnslaget. 
+Det fungerer godt å bruke Surface default som et lag over denne fargen.
+
+<Image
+  src='/img/tomat4.png'
+  alt='Skjermbilde av Figma som vise hvor du finner plugins'
+  boxShadow={false}
+  dataUnstyled
+  caption='Viser et eksempel på hvordan man kan alternere Background default og Background tinted nedover på en side og hvorden dette ser ut i lys- og mørk modus. 
+  Legg merke til at Background default fargen er hentet fra en gråskala for å få til en mer nøytral overgang i mørk modus.'
+/>
+
+### Surface
+Surface-fargene brukes til å fargelegge elementer som ligger over background-fargene, for eksempel paneler eller kort (Card).
+Disse fargene fungerer som forgrunnsfarger og bidrar til å skape dybde i designet ved å skille elementer fra bakgrunnen.
+I mørk modus blir disse fire fargene gradvis lysere, med Surface active som den lyseste nyansen.
+
+* `Surface default` er helt hvit i lys modus og brukes som standard bakgrunnsfarge på elementer.
+* `Surface tinted` får et hint av farge i seg og kan brukes for å skille elementer fra bakgrunnen.
+* `Surface hover` kan brukes til hover-tilstander for elementer eller til å skape visuelle hierarkier i Surface-laget når den kombineres med Surface tinted og Surface active.
+* `Surface active` kan brukes til active-tilstander for elementer eller til å forsterke hierarkiet i Surface-laget sammen med Surface tinted og Surface hover.
+
+### Border
+Border-fargene brukes for å fargelegge rammer (strokes) til elementer.
+
+* `Border subtle` har lav kontrast mot background- og surface-fargene og bør kun brukes til dekorative formål. 
+Vanlige bruksområder er skillelinjer og dekorative rammer.
+Fargen bør ikke være den eneste visuelle indikatoren på at et element er interaktivt.
+* `Border default` brukes på skjemakomponenter eller på andre meningsbærende rammer. 
+Fargen har god kontrast (over 3:1) mot alle background-fargene, Surface default og Surface tinted.
+* `Border strong` har god kontrast (over 3:1) mot alle background- og surface-fargene og kan brukes på rammer for å gjøre elementer ekstra synlige.
+
+### Text
+Text-fargene brukes på tekst og ikoner.
+
+* `Text subtle` er en lys tekstfarge som kan brukes for å skape variasjon i typografien eller for å indikere hierarkiske nivåer av viktighet.
+Den forsøker også å bevare mest mulig av fargemetningen fra den opprinnelige fargen valgt i Temabyggeren. 
+Fargen har god kontrast (4.5:1) mot alle background-fargene og "Surface tinted".
+* `Text default` er en tekstfarge med høy kontrast, optimal for lesbarhet. 
+Den bør brukes på hovedinnholdet og den primære teksten på en side. 
+Denne fargen i Neutral varianten kan være en fin farge å bruke på mesteparten av teksten.
+Fargen har god kontrast (4.5:1) mot alle background- og surface-fargene.
+
+### Base
+Base-fargene brukes for å fargelegge solide bakgrunner, som for eksempel knapper og andre interaktive elementer.
+Fargene som blir valgt med temabyggeren blir plassert i "Base default", og hover og active fargene blir generert ut i fra denne.
+"Base contrast" fargene blir generert basert på hvor lys eller mørk "Base default" fargen er. 
+
+* `Base default` kan brukes for å fargelegge solide bakgrunner til elementer.
+* `Base hover` kan brukes til hover-tilstander for solide elementer eller til å skape visuelle hierarkier i Base-laget når den kombineres med Base tinted og Base active.
+* `Base active` kan brukes til active-tilstander for solide elementer eller til å forsterke hierarkiet i Base-laget sammen med Base default og Base hover.
+* `Base contrast subtle` har god kontrast (**4.5:1**) mot "Base default" fargen fra samme fargeskala og kan trygt brukes som tekst-farger.
+* `Base contrast default` har god kontrast (**4.5:1**) kontrast mot Base default og Base hover fargene fra samme fargeskala, og kan trygt brukes som en tekst-farge på disse.
 
 ## Farge-tokens