npm install
npm run build
The package is set up for publishing as an NPM library with npm publish
. Ensure package.json
is satisfactory before you do this.
- Initialise a git repository in the current directory
- Push the tokens to GitHub, GitLab or Azure DevOps
- Open the Figma component library and save it to your project
- Install the Tokens Studio plugin in Figma
- Set up sync in Tokens Studio for Figma
- Use the "Create variables" action in Tokens Studio
- Push the resulting variables from Tokens Studio to Git
- Go to https://theme.designsystemet.no and set up a color theme
- Press "Kopier tema"
- Under "Json til Figma", copy the contents under Light / Dark to
the corresponding file under
design-tokens
:
First theme, Light:primitives/colors/light/first-theme.json
First theme, Dark:primitives/colors/dark/first-theme.json
Second theme, Light:primitives/colors/light/second-theme.json
Second theme, Dark:primitives/colors/dark/second-theme.json
This can also be done in Tokens Studio for Figma. - IMPORTANT! In the JSON data you copied, replace
theme
on line 2 with the correct theme identifier, depending on the theme you're customizing. This is the same as the json filename without extension (e.g.first-theme
,second-theme
). - Repeat steps 1—4 for the remaining themes
The "Designsystemet - Core UI Kit" component library is set up with the themes "Theme1" and "Theme2" by default. To ensure our custom themes are used, follow these steps:
- Open your copy of "Designsystemet - Core UI Kit" in Figma
- Pull any changes from Git using Tokens Studio
- Update the Figma variables using the "Styles & Variables" > "Sync variables" action in Tokens Studio
- Access the Variables modal
- Select the "Theme" collection in the upper left dropdown
- Select "All variables"
- Right click the modes "Theme1" and click "Delete mode"
- Repeat for "Theme2"
- Publish the library
- Open your copy of "Designsystemet - Core UI Kit" in Figma
- Pull any changes from Git using Tokens Studio
- Update the Figma variables using the "Styles & Variables" > "Sync variables" action in Tokens Studio
- Publish the library
The current directory is set up to easily publish the themes as an npm package.
- Check that the package.json file is set up to your liking
npm install
npm run build
- builds the css files for each theme and outputs them to./dist
npm publish
- publishes the package to npm asunes-tokens
, unless you manually changedpackage.json
In a different npm package (e.g. a frontend web app), follow the "Get started"
instructions at https://github.com/digdir/designsystemet but replace
@digdir/designsystemet-theme
with unes-tokens
. In short:
npm i unes-tokens @digdir/designsystemet-css @digdir/designsystemet-react
import 'unes-tokens';
import '@digdir/designsystemet-css';
import { Button } from '@digdir/designsystemet-react';
import 'unes-tokens/second theme.css';