diff --git a/apps/www/app/content/fundamentals/en/theme/colorsvg.mdx b/apps/www/app/content/fundamentals/en/theme/colorsvg.mdx new file mode 100644 index 0000000000..99352edf49 --- /dev/null +++ b/apps/www/app/content/fundamentals/en/theme/colorsvg.mdx @@ -0,0 +1,160 @@ + +--- +title: Use tokens to colour graphics +sidebar_title: Colour graphics +description: With Designsystemet, you can colour graphics using tokens. +date: 2026-06-01 +category: Theme +color: red +icon: PencilLineIcon +published: true +order: 200 +search_terms: svg, colouring, symbol +--- + +If the graphics should look exactly the same regardless of light or dark mode, and use the colours defined in the design tool, you do not need to follow the guidance below. + +However, if you want to control colours and scaling via code (for example using design tokens), graphics should be added as SVGs and structured in a specific way. + +## Basic setup + +To make an SVG easy to reuse and style, you should prepare the file as follows: + +- wrap the graphics in `` +- give the symbol an id +- define a viewBox on the symbol + +```SVG + + + +``` +The file can then be used in HTML like this: +```HTML + + + +``` +## Practical implementation + +What you need to adjust further depends on what you want to achieve. + +### Single-colour illustration (typical for certain logos and icons) + +For a single-colour illustration, you can control the colour either by inheriting the current text colour or by applying a class or id. + +If you want all SVG illustrations to use the current text colour by default, you can use currentColor. Remove all colour values from the SVG graphics and add a rule for currentColor, so the illustration inherits the surrounding text colour. You may need to do the same for stroke. +```CSS +svg { + fill: currentColor; +} +``` + +If you do not want to apply a global rule, you can instead set currentColor directly on the fill and/or stroke attributes inside the SVG file itself. This approach is used for icons in the design system, for example in buttons. +```SVG + + + +``` + +Test story for currentColor + + +If you need more control, you can manage colours via a class or id. Remove all colours from the SVG and add a class to the outer `` element, for example: +```HTML + + + +``` + +With a corresponding token: +```CSS +.iconcolour { + color: var(--ds-color-text-default); +} +``` + +Test story for icon color token + + +### Multi-colour illustration (typical for brand elements and small illustrations) + +For illustrations with multiple colours, you can control colours directly on fill and stroke for each path inside the SVG file. +```SVG + + + +``` + +With corresponding tokens. In this example, the illustration uses greyscale in dark mode: +```CSS +:root { + --ds-color-logopart1: #1E98F5; + --ds-color-logopart2: #68707C; + --ds-color-logopart3: #E5AA20; + --ds-color-logopart4: #F45F63; + @media (prefers-color-scheme: dark) { + --ds-color-logopart1: #A3A3A3; + --ds-color-logopart2: #68707C; + --ds-color-logopart3: #C2C2C2; + --ds-color-logopart4: #8A8A8A; + } +} +``` + +You can of course reference colours directly from the design system, or use dedicated tokens if you have defined them for illustrations. + +Test story for multicolored illustration + + +## Accessibility considerations +To ensure the illustration is accessible, you need to add a few attributes to the outer `` element. + +### Decorative illustration +Hide the illustration from screen readers by setting its role to presentation and marking it as hidden: +```HTML + +``` + +### Meaningful illustration +If the illustration conveys meaning, give it the role of an image and provide a descriptive label: +```HTML + + + +``` +For more complex illustrations, you may need more detailed descriptions. There are also ways to embed such descriptions directly within the SVG, but that is outside the scope of this guide. + + +## Inline illustration + +Using `` allows you to avoid repeating the same SVG code in multiple places. If the illustration is only used once on a page, it is perfectly acceptable to include it inline instead. + +```HTML + + + + + + +``` + +Test story for inline multi-colour illustration + diff --git a/apps/www/app/content/fundamentals/no/theme/colorsvg.mdx b/apps/www/app/content/fundamentals/no/theme/colorsvg.mdx new file mode 100644 index 0000000000..60716e1b74 --- /dev/null +++ b/apps/www/app/content/fundamentals/no/theme/colorsvg.mdx @@ -0,0 +1,215 @@ +--- +title: Bruk tokens for å fargelegge grafikk +sidebar_title: Fargelegg grafikk +description: Med Designsystemet kan du fargelegge grafikk. +date: 2026-06-02 +category: Tema +color: red +icon: PencilLineIcon +published: true +order: 200 +search_terms: svg, fargelegge, symbol, grafikk +--- + +Hvis grafikk skal se helt likt ut uansett lys eller mørk modus, og bruke de fargene som er satt i illustrasjonsverktøyet, trenger du ikke følge guiden under. + +Hvis du derimot ønsker å styre farger og skalering via kode (for eksempel med design tokens), må grafikken legges til som SVG på en måte som gjør den mulig å style med CSS. + +Dette kan gjøres på to måter: + +- ved å bruke SVG inline direkte i HTML +- ved å bruke `` sammen med `` for gjenbruk + +Begge metodene fungerer. `` er nyttig når samme grafikk skal brukes flere steder uten å duplisere kode, mens inline SVG gir full kontroll og er ofte enklere når grafikken kun brukes ett sted. + +Når SVG brukes inline eller via ``, kan både farger og størrelse styres via CSS. Dette forutsetter at SVG-en er satt opp riktig, blant annet med `viewBox`. + +Andre metoder for å bruke grafikk i frontend, som ``, canvas, CSS-tegning eller icon fonts, gir ikke helt de samme mulighet til å styre farger med design tokens, og er derfor ikke dekket i denne guiden. + +## Grunnleggende oppsett + +For at en SVG-en skal kunne enklest mulig, gjenbrukes og styles, bør du gjøre dette i fila: + +- pakke inn grafikken i `` +- gi symbol en id +- gi symbol viewbox verdier + +```SVG + + + +``` + +Fila brukes deretter slik i html: +```HTML + + + +``` + + +

Tips: Skalering av SVG

+
+ SVG skalerer enklest når: + - viewBox er satt på `` eller `` + - størrelse styres via width og height på det omsluttende elementet +
+ Hvis SVG ikke skalerer som forventet, er det ofte fordi: + - viewBox mangler + - eller at den har feil proporsjoner + + +## I praktisk bruk + +Hva du må tilpasse videre avhenger av hva du ønsker å oppnå. + +### Ensfarget grafikk, typisk for enkelte logoer og ikoner + +For en énsfarget grafikk kan du styre fargene enten ved å peke på gjeldende tekstfarge eller fargelegge via en klasse eller id. + +Vil du bruke gjeldende tekstfarge som standard på alle svg-grafikk kan du bruke currentColor som stil. Fjern alle farger i svg-fila og legg til stilregelen for currentColor, da arver grafikken gjeldende tekstfarge. Det kan hende du må gjøre det samme for stroke. +```css +svg { + fill:currentColor; +} +``` +Om du ikke vil sette en standard regel for alle svg-filer, kan du heller sette currentColor på fill og/eller stroke path inne i selve svg-fila. I designsystemet blir denne metoden brukt på ikoner, for eksempel i knappene. +```html + + + +``` + + + +Ønsker du mer kontroll kan du styre fargen med klasse eller id, fjern alle farger fra grafikken og sett inn for ekesmpel en klasse på det omsluttende svg-elementet: +```html + + + +``` +Med tilhørende token: +```css +.iconcolor { + color: var(--ds-color-text-default); +} +``` + +Test story for icon color token + + +### Flerfarget grafikk, typisk merkevarebærende symboler og små illustrasjoner + +For grafikk med flere farger kan du styre fargene direkte i fill og stroke på hver path i grafikken inni svg-fila. +```SVG + + + +``` +Med tilhørende tokens, i eksempelet har illustrasjonen fått gråskala i mørk modus: +```css +:root { + --logo-color-part1:#1E98F5; + --logo-color-part2:#68707C; + --logo-color-part3:#E5AA20; + --logo-color-part4:#F45F63; + @media ( prefers-color-scheme: dark) { + --logo-color-part1:#A3A3A3; + --logo-color-part2:#68707C; + --logo-color-part3:#C2C2C2; + --logo-color-part4:#8A8A8A; + } +} +``` +Du kan selvsagt fargelegge ved å peke direkte til fargene i designsystemet, eller om du har laget tokens for illustrasjoner så bruker du dem. + + + +## Husk på tilgjengelighet + +For å sikre at illustrasjonen er tilgjengelig for alle må du legge til et par detaljer i det omsluttende svg-elementet. + +### Grafikk som kun er dekorativ + +Skjul grafikken for skjermleser med å sette rolle til presentasjon og at den skal være skjult. +```html + +``` + +### Grafikk som er meningsbærende + +Gi grafikken rollen for bilde og en beskrivende tekst +```html + + + +``` +For mer kompleks grafikk kan du bruke mer detaljerte beskrivelser og det finnes også måter å sette inn slike detaljerte beskrivelser på selve grafikken, det går vi ikke inn på her. + +## Inline grafikk + +Bruken av `` muliggjør at en ikke trenger å gjenta samme svg-kode flere steder. Når du uansett kun skal ha grafikken på ett sted på siden din, så kan du gjerne sette den inn inline. + +```html + + + + + + +``` + +## Vanlige problemer og hva du bør sjekke + +Hvis SVG ikke oppfører seg som forventet, er dette de vanligste årsakene: + +- **SVG får feil størrelse** + - Sjekk at `viewBox` er satt + - Sjekk at `width` og `height` er definert på `` eller via CSS + +- **Farger endrer seg ikke** + - Sjekk at SVG ligger inline i DOM (ikke via ``) + - Sjekk at `fill` og `stroke` ikke er hardkodet med faste farger + - Sjekk at CSS-variablene (`var(...)`) er definert og tilgjengelige der SVG brukes + +- **Grafikken blir én farge i stedet for flerfarget** + - Sjekk om `currentColor` brukes på alle paths + - Sjekk at du ikke har globale regler som påvirker alle SVG-er + +- **SVG vises ikke i det hele tatt** + - Sjekk at `href` i `` peker til riktig fil og `id` (`file.svg#id`) + - Sjekk at SVG-fila inneholder et `` med riktig `id` + +- **Endringer i CSS påvirker ikke SVG** + - Sjekk at SVG ikke lastes via `` + - Sjekk at CSS-variabler (`var(...)`) er definert i samme DOM +`` + + +## Kilder og videre lesning + +Her finner du lenker til nyttige ressurser dersom du ønsker å forstå SVG bedre, fordype deg i detaljer rundt styling og feilsøking, eller jobbe videre med optimalisering av grafikk. + +- [SVG: Scalable Vector Graphics (MDN)](https://developer.mozilla.org/en-US/docs/Web/SVG) +- [\ – SVG element (MDN)](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/use) +- [viewBox attribute (MDN)](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox) +- [Fills and strokes (MDN)](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes) +- [SVG 2 spesifikkasjon (W3C)](https://svgwg.org/svg2-draft/) +- [6 Common SVG Fails (and How to Fix Them) (CSS‑Tricks)](https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/) \ No newline at end of file diff --git a/apps/www/app/content/fundamentals/no/theme/colorsvg.stories.tsx b/apps/www/app/content/fundamentals/no/theme/colorsvg.stories.tsx new file mode 100644 index 0000000000..fa815212fe --- /dev/null +++ b/apps/www/app/content/fundamentals/no/theme/colorsvg.stories.tsx @@ -0,0 +1,39 @@ +import { Textfield } from '@digdir/designsystemet-react'; + +export const WithCurrentColor = () => { + return ( + + ); +}; + +export const WithIconColor = () => { + return ( + + ); +}; + +export const WithMultiColor = () => { + return ( + + ); +}; + +export const WithMultiColorInline = () => { + return ( + + ); +}; diff --git a/apps/www/app/routes/fundamentals/page.tsx b/apps/www/app/routes/fundamentals/page.tsx index b2a8181305..49ef32a653 100644 --- a/apps/www/app/routes/fundamentals/page.tsx +++ b/apps/www/app/routes/fundamentals/page.tsx @@ -13,6 +13,7 @@ import { formatDate } from '~/_utils/date'; import { getFileFromContentDir } from '~/_utils/files.server'; import { generateFromMdx } from '~/_utils/generate-from-mdx'; import { generateMetadata } from '~/_utils/metadata'; +import { getStories } from '../../_utils/get-stories.server'; import { stripTrailingSlash } from '~/_utils/strip-trailing-slash'; import type { Route } from './+types/page'; import classes from './page.module.css'; @@ -33,6 +34,10 @@ export async function loader({ params }: Route.LoaderArgs) { }); } + const stories = await getStories({ + path: join('fundamentals', params.lang, `${file}.stories.tsx`), + }); + // Bundle the MDX content const result = await generateFromMdx(fileContent); @@ -41,6 +46,7 @@ export async function loader({ params }: Route.LoaderArgs) { frontmatter: result.frontmatter, lang: params.lang, toc: result.toc, + stories, }; }