text updates

digdir · Nov 26, 2024 · 11c1b0a · 11c1b0a
1 parent 560e2de
commit 11c1b0a
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 99 deletions.
diff --git 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
@@ -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 }) => (
+  <MenuPageLayout
+    content={children}
+    data={{
+      title: 'Fargar',
+      date: '25. 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`
+
+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.
+
+<CodeSnippet language="jsx">
+{`<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">
+  <Button>
+    Eg har ikkje neutral farge.
+  </Button>
+</div>
+`}
+</CodeSnippet>
+
+## 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.
+
+<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.
diff --git a/apps/storefront/app/grunnleggende/for-utviklere/farger/page.mdx b/apps/storefront/app/grunnleggende/for-utviklere/farger/page.mdx
diff --git 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',