update react bruk

apps/storybook/docs-components/CodeSnippet/CodeSnippet.module.css

@@ -4,6 +4,7 @@
   overflow-x: auto;
   width: 100%;
   border-radius: var(--ds-border-radius-md);
+  height: fit-content;
 }
 
 .copyContainer {
@@ -19,8 +20,6 @@
 
 .icon {
   position: absolute;
-  top: 24px;
-  right: 24px;
-  height: 40px;
-  width: 40px;
+  top: var(--ds-spacing-4);
+  right: var(--ds-spacing-4);
 }

packages/react/stories/react-usage.mdx → packages/react/stories/bruk.mdx

@@ -2,13 +2,15 @@ import { Meta } from '@storybook/blocks';
 
 import { CodeSnippet } from '@doc-components';
 
-<Meta title='Bruk React' />
+<Meta title='Bruk' />
 
 # Bruk
 
 Introduksjon til bruk, regler og gotchas.
 
-## Installasjon
+## React
+
+### Installasjon
 
 For å bruke Designsystemet i React, så må du installere `@digdir/designsystemet-react`.
 
@@ -30,15 +32,15 @@ import { Button } from '@digdir/designsystemet-react';
 
 Alle komponentene som er tilgjengelige i Designsystemet er uten styling. Legg til styling ved å importere vår css pakke, `@digdir/designsystemet-css`.
 
-## SSR
+### SSR
 
 Alle våre komponenter er klient komponenter, og bruker `"use client"`.
 
 Dersom du ønsker å bruke våre komponenter i dine server komponenter, så kan du ikke bruke dot-notation.
 Dette betyr at du ikke kan skrive `<Accordion.Item>`, men må skrive `<AccordionItem>`. Grunnen for dette er at serveren ikke kan få tak i noe
 som ligger i en klient komponent, som `Accordion` er.
 
-### I en server komponent:
+#### I en server komponent:
 
 <CodeSnippet language='ts'>
 {`
@@ -53,7 +55,7 @@ import { AccordionRoot, AccordionHeader, AccordionItem, AccordionContent } from
 `}
 </CodeSnippet>
 
-### I en klient komponent:
+#### I en klient komponent:
 
 <CodeSnippet language='ts'>
 {`
@@ -67,3 +69,29 @@ import { Accordion } from '@digdir/designsystemet-react';
 </Accordion.Root>
 `}
 </CodeSnippet>
+
+<br />
+<br />
+<br />
+
+## CSS
+
+For å bruke Designsystemets CSS, så må du installere `@digdir/designsystemet-css`.
+
+### Layers
+
+Vi bruker [css layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) for å få lavest mulig spesifisitet i våre css klasser.
+Dette betyr at du lett kan overstye med dine egne klasser.
+
+Alle våre layers ligger under root layeren `ds`.
+Under har vi lagt sub-layers for hver komponent, som `ds.btn`.
+
+Vi har bare sortert det slik at det som senere skal bli overstyrt kommer først i listen:
+
+<CodeSnippet language='css'>
+  {`@layer ds.reset, ds.typography, ds.utils, ds.box, ds.btn;`}
+</CodeSnippet>
+
+Har du en css reset, så må du sortere denne først. Dette gjør du ved å først legge reseten din i en layer, og så sortere denne layeren først:
+
+<CodeSnippet language='css'>{`@layer my-reset, ds;`}</CodeSnippet>