diff --git a/apps/storefront/app/grunnleggende/for-utviklere/farger/page.mdx b/apps/storefront/app/grunnleggende/for-utviklere/farger/page.mdx index 133a7bf77c..172ecce10a 100644 --- a/apps/storefront/app/grunnleggende/for-utviklere/farger/page.mdx +++ b/apps/storefront/app/grunnleggende/for-utviklere/farger/page.mdx @@ -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` @@ -47,12 +47,15 @@ alt som skal ha spesifisert tema. Dersom du ikkje setter denne, vil sida di bruk `} +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. @@ -60,25 +63,25 @@ dersom dei skal ha lik farge. {`
- +
`}
-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. {`
- Dette er ein Chip med accent farge. + Denne Chip'en har accent farge.
@@ -88,3 +91,10 @@ Nokon komponentar, som `Button` har ikkje støtte for ekstern `data-color`, og h
`}
+ +## 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. + + + diff --git a/apps/storefront/tsconfig.json b/apps/storefront/tsconfig.json index 1acbc9ece2..0e3ca35ddd 100644 --- a/apps/storefront/tsconfig.json +++ b/apps/storefront/tsconfig.json @@ -19,6 +19,7 @@ "jsx": "preserve", "incremental": true, "forceConsistentCasingInFileNames": true, + "types": ["@digdir/designsystemet-theme/colors.d.ts"], "plugins": [ { "name": "typescript-plugin-css-modules"