stuff

Author: Thunear

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

@@ -61,60 +61,69 @@ Tinted betyr for eksempel at fargen har et hint av farge i seg, mens Hover betyr
   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 en mørkeblå, en lyseblå og en rød fargeskala'
+  caption='Viser hvordan de semantiske fargene kan brukes i designet. Eksempelet bruker fire forskjellige fargeskalaer. Danger, Neutral og to forskjellige blåskalaer.'
 />
 
 
-## Oversikt over farger
+## 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 |
 | ----------- | ----------- |
-| Background default     | Standard bakgrunnsfarge.       |
-| Background tinted      | Bakgrunn med et hint av farge i seg.        |
-| Surface default        | Standard farge for overflater / komponenter.        |
-| Surface tinted         | Overflater / komponenter med et hint av farge i seg.        |
-| Surface hover          | Hover-farge til overflater / komponenter.       |
-| Surface active         | Active-farge til overflater / komponenter.       |
-| Border subtle          | Border-farge med lav kontrast til dekorativ bruk (skillelinjer).     |
-| Border default         | Standard border-farge til skjemakomponenter og meningsbærende elementer.       |
-| Border strong          | Border-farge med høy kontrast for ekstra synlighet.      |
-| Text subtle            | Tekst- og ikonfarge med lavere kontrast.        |
-| Text default           | Tekst- og ikonfarge med høy kontrast og god synlighet.      |
-| Base default           | Standardfarge for solide bakgrunner.       |
-| Base hover             | Hover-farge for solide bakgrunner.          |
-| Base active            | Active-farge for solide bakgrunner.          |
-| Base contrast subtle   | Farge med god kontrast mot "Base default".     |
-| Base contrast default  | Farge med god kontrast mot "Base default" og "Base hover".      |
+| 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 (hvit)" oppå denne fargen.
+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 hvit i lys modus og brukes som standard bakgrunnsfarge på elementer.
+* `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 for å fargelegge hover tilstander til elementer.
-* `Surface active` kan brukes for å fargelegge active tilstander til elementer.
+* `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 og kan kun brukes til dekorative formål. 
+* `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 og "Surface tinted".
+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
@@ -134,10 +143,10 @@ Fargene som blir valgt med temabyggeren blir plassert i "Base default", og hover
 "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 for å fargelegge hover-tilstander til elementer.
-* `Base active` kan brukes for å fargelegge active-tilstander 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.
+* `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