Skip to content

Commit

Permalink
some last cleanup before leaving
Browse files Browse the repository at this point in the history
  • Loading branch information
Barsnes committed Nov 25, 2024
1 parent b9796b3 commit a4a71c8
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 8 deletions.
26 changes: 18 additions & 8 deletions apps/storefront/app/grunnleggende/for-utviklere/farger/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ Denne artikkelen tar forbehold om at du allerie har farger satt opp med [Temabyg
Me brukar data attributt for å fargelegge komponentar. Alle komponentar kan ha alle fargar, men komponentar har forskjellige standardfargar.

Når du skal sette farge er det to data attributt du kan bruke:
- `data-color` endrar farge
- `data-color-scheme` endar fargetema
- `data-color` som endrar farge
- `data-color-scheme` som endrar fargetema

## `data-color-scheme`

Expand All @@ -47,38 +47,41 @@ alt som skal ha spesifisert tema. Dersom du ikkje setter denne, vil sida di bruk
`}
</CodeSnippet>

Du kan endre denne på heile eller delar av sida, og bytte så mykje du vil mellom dei ulike fargetemaene.
For ekesmpel er sida di lys, men du har ein mørk footer. Da kan du sette `data-color-scheme="dark"` på footer.

## `data-color`

Dette attributtet brukast for å endre farge på komponentar. Du kan bruke alle fargene som du har satt opp i temaet ditt. Standardverdi når denne ikkje er satt,
er din standardfarge. Brukar du tema frå `@digdir/designsystemet-theme`, vil dette være `accent`.

**Når du sett `data-color-scheme` vil `data-color` bli satt tilbake til standardverdien.**
**Når du sett `data-color-scheme` vil `data-color` bli satt tilbake til standardfargen.**

Nokon komponentar kan arve farge frå nærmaste forelder med `data-color` satt. Dette betyr at du ikkje treng å bruke denne på alle komponentar,
dersom dei skal ha lik farge.

<CodeSnippet language="html">
{`
<div data-color="neutral">
<!-- Alt innholdet her vil ha neutral farge -->
<!-- Innholdet her vil ha neutral farge -->
</div>
`}
</CodeSnippet>

Det blir satt css variablar som begynnar med `--ds-color-*`, og ikkje `--ds-color-FARGE-*`. På denne måten kan me, og du, bygge komponentar som støttar alle fargar.
Det blir satt css variablar som begynnar med `--ds-color-*`, og ikkje `--ds-color-FARGE-*`. På denne måten kan me, og du, byggje komponentar som støttar alle fargar.

Nokon komponentar, som `Button` har ikkje støtte for ekstern `data-color`, og her må du sette fargen direkte på komponenten.
Nokon komponentar, som `Button`, støttar ikkje ekstern `data-color`, og her må du sette fargen direkte på komponenten.

<CodeSnippet language="jsx">
{`
<div data-color="accent">
<Chip>
Dette er ein Chip med accent farge.
Denne Chip'en har accent farge.
</Chip>
</div>
<Button data-color="accent">
Dette er ein knapp med accent farge.
Eg har accent farge.
</Button>
<div data-color="neutral">
Expand All @@ -88,3 +91,10 @@ Nokon komponentar, som `Button` har ikkje støtte for ekstern `data-color`, og h
</div>
`}
</CodeSnippet>

## Kort oppsummert

Du endrar farge med `data-color`, men denne må bli satt på nytt dersom du endrar fargetema med `data-color-scheme`. Nokon komponentar arver farge frå nærmaste forelder med `data-color` satt.



1 change: 1 addition & 0 deletions apps/storefront/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"jsx": "preserve",
"incremental": true,
"forceConsistentCasingInFileNames": true,
"types": ["@digdir/designsystemet-theme/colors.d.ts"],
"plugins": [
{
"name": "typescript-plugin-css-modules"
Expand Down

0 comments on commit a4a71c8

Please sign in to comment.