digdir · Barsnes · Jan 2, 2025 · Nov 25, 2024 · Nov 25, 2024 · Nov 26, 2024
@@ -0,0 +1,141 @@
+import { CodeIcon } from '@navikt/aksel-icons';
+
+import { MenuPageLayout } from '@layouts';
+import { CodeSnippet } from '@repo/components';
+
+export const metadata = {
+  title: 'Fargar',
+  description: 'Informasjon om korleis du bruker fargar på frontend.',
+};
+
+export default ({ children }) => (
+  <MenuPageLayout
+    content={children}
+    data={{
+      title: 'Fargar',
+      date: '26. november 2024',
+      icon: <CodeIcon />,
+      color: 'blue',
+    }}
+  />
+);
+
+Denne artikkelen føreset at du allereie har definert fargane du skal bruke ved hjelp av [Temabyggeren](/grunnleggende/for-designere/eget-tema).
+
+HTML data-attributt vert brukt for å definere farge på ein komponent. Komponentane kan nytte alle fargane i temaet.
+
+Når du skal setje farge på ein komponent, er det to data-attributt som kan nyttast:
+- `data-color-scheme` som endrar fargemodus
+- `data-color` som endrar farge
+
+## `data-color-scheme`
+
+Dette data-attributtet blir brukt for å veksle mellom lys, mørk eller andre fargemodusar. Innhald som er barn av dette data-attributtet 
+vil få modusen spesifisert av forelder. Som standard vil lys modus bli nytta.
+
+<CodeSnippet language="html">
+{`
+<body>
+  <div>
+    <!-- Innhaldet her vil ha lys fargemodus -->
+  </div>
+
+  <div data-color-scheme="dark">
+    <!-- Innhaldet her vil ha mørk fargemodus -->
+  </div>
+</body>
+`}
+</CodeSnippet>
+
+Du kan endre `data-color-scheme` på heile eller delar av sida og byte mellom ulike fargemodus så ofte du vil. Til dømes kan hovudsida vere lys, 
+men med ei mørk botnlinje (footer). Du kan då setje `data-color-scheme="dark"` på botnlinja.
+
+`data-color-scheme` kan bli satt til `light`, `dark` eller `auto`. `auto` vil følgje systeminnstillingane til brukaren.
+
+## `data-color`
+
+Dette data-attributtet blir brukt for å endre fargen til ein komponent. Du kan bruke alle fargane som finst i temaet ditt.
+
+<CodeSnippet language="html">
+{`
+<div data-color="neutral">
+  <!-- Innholdet her vil ha neutral farge -->
+</div>
+`}
+</CodeSnippet>
+
+Nokre komponentar kan arve farge frå næraste overordna element som har `data-color` definert. 
+Dette betyr at du ikkje treng å bruke `data-color` på alle komponentane i eit hierarki, dersom dei skal ha same farge.
+
+## Korleis komponentar blir påverka
+
+Me delar komponentar inn i 3 grupper for farge:
+- Eksplisitt
+- Nøytral
+- Cascading
+
+### Eksplisitt
+
+Komponentar brukt til validering eller systemvarslar følgjer eigne dedikerte systemfargar, og arvar ikkje farge frå næraste forelder med `data-color` satt.
+Dei dedikerte systemfargane er `success`, `warning`, `fanger` og `info`. 
+
+Dette er komponentar som
+- `Alert`
+- `ValidationMessage`
+- `ErrorSummary`
+
+### Nøytral
+
+Dette er komponentar som alltid skal være nøytrale, og blir verken påverka av arva farge eller direkte `data-color`. Dette er komponentar som `Modal` og `Tooltip`.
+Desse brukar alltid `neutral` fargen.
+
+### Cascading
+
+Denne gruppa inneheld resten av komponentane, og vil arve farge frå næraste forelder med `data-color` satt. 
+
+<CodeSnippet language="tsx">
+{`<div data-color="neutral">
+  <Chip>
+    Denne Chip'en har neutral farge.
+  </Chip>
+</div>
+
+<Button data-color="neutral">
+  Eg har neutral farge.
+</Button>
+
+<div data-color="neutral">
+  <Alert>
+    Eg har ikkje neutral farge.
+  </Alert>
+</div>
+`}
+</CodeSnippet>
+
+## Bruk `data-color-scheme` og `data-color` saman
+
+Du kan bruke `data-color-scheme` og `data-color` saman for å endre både fargemodus og farge på komponentar.
+
+`data-color` set variablar som blir resatt av `data-color-scheme`. Dersom du endrar fargemodus, må du setje `data-color` på nytt.
+
+<CodeSnippet language="html">
+{`
+<div data-color="neutral">
+  <!-- Innholdet her vil ha neutral farge -->
+</div>
+
+<div data-color="neutral" data-color-scheme="dark">
+  <!-- Innholdet her vil ha neutral farge og mørkt fargemodus -->
+</div>
+
+<div data-color="neutral">
+  <div data-color-scheme="dark">
+    <!-- Innholdet her vil ikkje ha neutral farge -->
+  </div>
+</div>
+`}
+</CodeSnippet>
+
+## Kort oppsummert
+
+Du endrar farge med `data-color`, men denne må bli satt på nytt dersom du endrar fargemodus med `data-color-scheme`. Nokre komponentar arvar farge frå næraste forelder med `data-color` satt.
@@ -94,6 +94,10 @@ export const SiteConfig = {
               name: 'Kom i gang',
               url: 'grunnleggende/for-utviklere/kom-i-gang',
             },
+            {
+              name: 'Fargar',
+              url: 'grunnleggende/for-utviklere/fargar',
+            },
             {
               name: 'Komposisjon',
               url: 'grunnleggende/for-utviklere/komposisjon',