From 11c1b0a77aed284308506f0361f8cccac4332e17 Mon Sep 17 00:00:00 2001 From: Barsnes Date: Tue, 26 Nov 2024 12:15:09 +0100 Subject: [PATCH] text updates --- .../src/CodeSnippet/CodeSnippet.module.css | 8 ++ .../for-utviklere/fargar/page.mdx | 113 ++++++++++++++++++ .../for-utviklere/farger/page.mdx | 97 --------------- apps/storefront/siteConfig.tsx | 4 +- 4 files changed, 123 insertions(+), 99 deletions(-) create mode 100644 apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx delete mode 100644 apps/storefront/app/grunnleggende/for-utviklere/farger/page.mdx diff --git a/apps/_components/src/CodeSnippet/CodeSnippet.module.css b/apps/_components/src/CodeSnippet/CodeSnippet.module.css index 40776471c0..e5065ad217 100644 --- a/apps/_components/src/CodeSnippet/CodeSnippet.module.css +++ b/apps/_components/src/CodeSnippet/CodeSnippet.module.css @@ -11,6 +11,14 @@ padding-right: var(--ds-spacing-11) !important; } +.codeSnippet > pre > code { + padding: 0; +} + +.codeSnippet > pre > code span:empty { + display: none; +} + .copyButton { position: absolute; top: var(--ds-spacing-2); diff --git a/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx b/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx new file mode 100644 index 0000000000..0009d64df4 --- /dev/null +++ b/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx @@ -0,0 +1,113 @@ +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 }) => ( + , + 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. + + +{` + +
+ +
+ +
+ +
+ +`} + + +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` + +Dette data-attributtet blir brukt for å endre fargen til ein komponent. Du kan bruke alle fargane som finst i temaet ditt. + + +{` +
+ +
+`} + + +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. + + +{`
+ + Denne Chip'en har neutral farge. + +
+ + + +
+ +
+`} + + +## Bruk desse 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. + + +{` +
+ +
+ +
+ +
+ +
+
+ +
+
+`} + + +## 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. diff --git a/apps/storefront/app/grunnleggende/for-utviklere/farger/page.mdx b/apps/storefront/app/grunnleggende/for-utviklere/farger/page.mdx deleted file mode 100644 index e0df29b4b0..0000000000 --- a/apps/storefront/app/grunnleggende/for-utviklere/farger/page.mdx +++ /dev/null @@ -1,97 +0,0 @@ -import { CodeIcon } from '@navikt/aksel-icons'; - -import { MenuPageLayout } from '@layouts'; -import { CodeSnippet } from '@repo/components'; - -export const metadata = { - title: 'Farger', - description: 'Informasjon om korleis du bruker farger på frontend.', -}; - -export default ({ children }) => ( - , - color: 'blue', - }} - /> -); - -Denne artikkelen tar forbehold om at du allerie har fargar satt opp med [Temabyggeren](/grunnleggende/for-designere/eget-tema). - -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-scheme` som endrar fargetema -- `data-color` som endrar farge - -## `data-color-scheme` - -Denne brukast for å endre mellom lys, mørk, eller andre fargemoduesar som du har satt opp. Du legger denne over -alt som skal ha modusen du spesifiserer. Dersom du ikkje setter denne, vil sida di bruke lys modus. - - -{` - -
- -
- -
- -
- -`} - - -Du kan endre denne på heile eller delar av sida, og bytte så mykje du vil mellom dei ulike fargetemaene. -For eksmpel er sida di lys, men du har ein mørk footer. Då kan du sette `data-color-scheme="dark"` på footer. - -## `data-color` - -Denne 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 standardfargen.** - -Nokon komponentar kan arve farge frå næraste forelder med `data-color` satt. Dette betyr at du ikkje treng å bruke denne på alle komponentar, -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, byggje komponentar som støttar alle fargar. - -Nokon komponentar, som `Button`, støttar ikkje ekstern `data-color`, og her må du sette fargen direkte på komponenten. - - -{` -
- - Denne Chip'en har neutral farge. - -
- - - -
- -
-`} - - -## Kort oppsummert - -Du endrar farge med `data-color`, men denne må bli satt på nytt dersom du endrar fargetema med `data-color-scheme`. Nokre komponentar arvar farge frå næraste forelder med `data-color` satt. diff --git a/apps/storefront/siteConfig.tsx b/apps/storefront/siteConfig.tsx index 3f0fd30067..3c818553a4 100644 --- a/apps/storefront/siteConfig.tsx +++ b/apps/storefront/siteConfig.tsx @@ -95,8 +95,8 @@ export const SiteConfig = { url: 'grunnleggende/for-utviklere/kom-i-gang', }, { - name: 'Farger', - url: 'grunnleggende/for-utviklere/farger', + name: 'Fargar', + url: 'grunnleggende/for-utviklere/fargar', }, { name: 'Komposisjon',