@rijkshuisstijl-community/design-tokens NPM

Rijkshuisstijl design tokens

Dit project wordt niet gesteund door het Ministerie van Algemene Zaken.

Het toepassen van design-elementen uit dit project is strikt verboden voor organisaties die geen deel uitmaken van de centrale overheid van Nederland.

Dit project maakt deel uit van een samenwerkingsverband om NL Design System-componenten te gebruiken voor projecten die moeten voldoen aan de Rijkshuisstijl. Organisaties van de centrale overheid van Nederland (bijvoorbeeld: Belastingdienst, DUO, Logius, SVB) en degenen die door hen zijn ingehuurd voor het ontwikkelen van websites en apps, kunnen via dit project samenwerken.

Tokens gebruiken in eigen project

Hieronder vind je instructies hoe je de standaard Rijkshuisstijl-community tokens in je project kan toepassen.

Installeer je het design-tokens npm package.
```
npm install --save-dev @rijkshuisstijl-community/design-tokens

# En als je CSS classes wilt importeren
npm install --save-dev @rijkshuisstijl-community/components-css
```
Dit pakket bevat de CSS-variabelen van het design systeem. Importeer het index.css-bestand uit de dist map van het pakket, en omring het deel van je applicatie waar je het thema wilt toepassen. Het Rijkshuisstijl-thema is bijvoorbeeld: rhc-theme.

Pas het thema toe in je project, hieronder een voorbeeld in HTML

<!-- Als je het default Rijkshuisstijl community thema wilt gebruiken, gebruik .rhc-theme -->
<link rel="stylesheet" href="node_modules/@rijkshuisstijl-community/design-tokens/dist/index.css" />
<!-- Of als je een eigen thema wilt importeren, gebruik het thema naam als class name -->
<link rel="stylesheet" href="@rijkshuisstijl-community/design-tokens/dist/<thema naam>/index.css" />
<!-- Mogelijk wil je ook de CSS classes importeren als je Rijkshuijsstijl-community componenten gebruikt -->
<link rel="stylesheet" href="node_modules/@rijkshuisstijl-community/components-css/dist/index.css" />

<body class="rhc-theme">
    <button class="rhc-button">Click Here!</button>
  </div>
</body>

Nieuw thema toevoegen

Er zijn al verschillende bedrijfsthema's in de @rijkshuisstijl-community/design-tokens package waarvoor (gedeeltelijke) support is vanuit de Rijkshuisstijl-community. Hieronder volgt een uitleg hoe nog meer thema's kunnen worden toegevoegd

Nieuwe thema tokens

Voeg de nieuwe tokens toe aan het design tokens bestand. Mogelijk is het voor designers handiger om dit direct in Figma te doen. Zie hieronder in hoe je een thema direct in JSON toe kan voegen:

{
  // ...

  // Definieer specifieke set tokens die je wilt overschrijven met een duidelijke naam. Voeg indien nodig meerdere overwrites sets toe.
  "overwrites/primaire kleur/mintgroen": {
    // Geef aan welke tokens overschreven moeten worden
    "rhc": {
      "color": {
        "primary": {
          "50": {
            "value": "{rhc.color.mintgroen.50}",
            "type": "color"
          },
          "100": {
            "value": "{rhc.color.mintgroen.100}",
            "type": "color"
          },
          "200": {
            "value": "{rhc.color.mintgroen.200}",
            "type": "color"
          },
          "300": {
            "value": "{rhc.color.mintgroen.300}",
            "type": "color"
          },
          "400": {
            "value": "{rhc.color.mintgroen.400}",
            "type": "color"
          },
          "500": {
            "value": "{rhc.color.mintgroen.500}",
            "type": "color"
          },
          "hover": {
            "value": "{rhc.color.primary.500}",
            "type": "color",
            "$extensions": {
              "studio.tokens": {
                "modify": {
                  "type": "darken",
                  "value": "0.3",
                  "space": "lch"
                }
              }
            }
          }
        }
      }
    }
  },
  // Nog een overwrite
  "overwrites/border/geen border radius": {
    "rhc": {
      "border-radius": {
        "sm": {
          "value": "0",
          "type": "borderRadius"
        },
        "md": {
          "value": "0",
          "type": "borderRadius"
        },
        "lg": {
          "value": "0",
          "type": "borderRadius"
        }
      }
    }
  },
  // ...

  "$themes": [
    // ...
    {
      "id": "<thema ID>", // Wordt niet gebruikt door een build step, maar wel voor Figma
      "name": "<thema naam>", // Dit wordt ook de class name voor het thema
      "$figmaStyleReferences": {},
      "selectedTokenSets": {
        // Voeg eerst de sets toe die dit thema support
        "<token set 1>": "enabled",
        "<token set 2>": "enabled",
        "<etcetera...>": "enabled",
        // Voeg daarna de overwrites toe die je wilt toevoegen aan je thema
        "overwrites/primaire kleur/mintgroen": "enabled",
        "overwrites/border/geen border radius": "enabled"
      }
    }
  ]
}

Voeg het nieuwe thema toe in de storybook preview.tsx

// ...
// Voeg import toe
import '@rijkshuisstijl-community/design-tokens/dist/<thema naam>/index.css';
// ...

const preview: Preview = {
  decorators: [
    withThemeByClassName({
      themes: {
        // Voeg thema toe in storybook thema dropdown
        '<Thema naam in dropdown>': '<thema naam>',
        // ...
      },
      // ...
    }),
    // ...
  ],
  // ...
};
export default preview;

nl-design-system

@everything-registry/sub-chunk-782

6 months ago

10 months ago

10 months ago

10 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

10 months ago

10 months ago

12 months ago

11 months ago

10 months ago

12 months ago

10 months ago

12 months ago

10 months ago

12 months ago

5 months ago

10 months ago

12 months ago

10 months ago

10 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

12 months ago

10 months ago

12 months ago

10 months ago

12 months ago

10 months ago

12 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

8 months ago

8 months ago

9 months ago

8 months ago

12 months ago

12 months ago

12 months ago

8 months ago

8 months ago

11 months ago

11 months ago

11 months ago

11 months ago

9 months ago

11 months ago

9 months ago

11 months ago

9 months ago

11 months ago

11 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

11 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

11 months ago

11 months ago

11 months ago

11 months ago

10 months ago

12 months ago

12 months ago

12 months ago

9 months ago

9 months ago

10 months ago

10 months ago

9 months ago

11 months ago

9 months ago

11 months ago

9 months ago

9 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

9 months ago

11 months ago

9 months ago

11 months ago

11 months ago

11 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

11 months ago

9 months ago

11 months ago

9 months ago

9 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago