npmpackage.info

Gathering detailed insights and metrics for @utrecht/design-tokens

Other packages similar to @utrecht/design-tokens

@utrecht/component-library-design-tokens

1.0.12

Design tokens metadata for the component library for the Municipality of Utrecht based on the NL Design System architecture

Gathering detailed insights and metrics for @utrecht/design-tokens

@utrecht/design-tokens - 3.3.0 | npmpackage.info

@utrecht/design-tokens

Work in Progress: Utrecht Design System based on the NL Design System architecture. Storybook: https://nl-design-system.github.io/utrecht/storybook/

3.3.0

EUPL-1.2

TypeScript

12.68 MB

5.7

Installations

npm install @utrecht/design-tokens

Developer Guide

BETA

Typescript

No

Module System

N/A

Node Version

22.16.0

NPM Version

10.9.2 Score

83.1

Supply Chain

99.3

Quality

91.9

Maintenance

100

Vulnerability

87.1

License

Pull Requests

Open

92

Total

2,564

Closed

1,180

Merged

1,292

Issues

Open

243

Total

289

Closed

46

Releases

925

@utrecht/component-library-css@7.3.0

Updated on Jun 18, 2025

@utrecht/design-tokens@3.3.0

Updated on Jun 18, 2025

@utrecht/tooltip-react@1.0.0

Updated on Jun 18, 2025

@utrecht/tooltip-css@1.0.0

Updated on Jun 18, 2025

@utrecht/component-library-vue@2.3.1

Updated on Jun 16, 2025

@utrecht/design-tokens@3.2.0

Updated on May 27, 2025

View All 925 releases

Languages

TypeScript

SCSS

HTML

JavaScript

MDX

CSS

Vue

Shell

TypeScript (73.02%)

SCSS (12.42%)

HTML (5.82%)

JavaScript (4.42%)

MDX (2.33%)

CSS (1.14%)

Vue (0.84%)

Developer

nl-design-system

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

EUPL-1.2 License

29 Stars

3,715 Commits

23 Forks

7 Watchers

258 Branches

48 Contributors

Updated on Jun 28, 2025

Maintainers

View All 48 Contributors

Package Meta Information

Latest Version

3.3.0

Package Id

@utrecht/design-tokens@3.3.0

Unpacked Size

12.68 MB

Size

718.57 kB

File Count

184

NPM Version

10.9.2

Node Version

22.16.0

Published on

Jun 18, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

@tokens-studio/sd-transforms chokidar-cli glob lodash.isplainobject lodash.merge lodash.mergewith regex-trie rimraf sass style-dictionary

Design Tokens for the Utrecht Design System

This project is very much WORK IN PROGRESS and most parts are released as alpha version. Always define the exact version you want to use, and test for breaking changes before upgrading to a newer alpha release.

Design tokens are design decisions for our design system, in this case maintained in JSON files, and distributed in various other code languages for easy reuse.

The design tokens in this package serve as single source of truth for the look and feel for our websites, apps and designs of new products and services.

List of all design tokens

To find out what design tokens are available, browser through the .tokens.json files in the src/ directory.

We currently don't have any additional documentation for every specific design token.

Brand design tokens

Brand design tokens describe design choices regarding color and typography. We provide a limited choice of fonts and a limited color palette, please avoid choosing other fonts and colors.

Common design tokens

Common design tokens are relevant to a wide range of components and situations. They help provide a consistent user experience. We provide design tokens for feedback colors (error, success, et cetera), the focus state, spacing, and so on. Components should reuse design tokens from the common layer where possible, to achieve a consistent look and feel.

Component design tokens

Design decisions at a component level, to make components look a very specific way. They are applied by the component library of the design system.

Files in this package

`dist/index.css`

Opt-in way to apply all the CSS variables to HTML elements with the utrecht-theme class name:

1<!DOCTYPE html>
2<html class="utrecht-theme">
3  <!-- var(--utrecht-button-font-family) works here...! -->
4</html>

This method is the preferred way to style the page.

Theme variations based on a media query are opt-in.

Use the utrecht-theme--media-query-color-scheme to support dark mode.Warning: Only use dark mode when all components on your page support dark mode, including 3rd party components.
Use the utrecht-theme--media-query-viewport to support responsive styling of certain components.
Use the utrecht-theme--media-query to enable both dark mode and responsive layout with one class name.

For example:

1<!DOCTYPE html>
2<html class="utrecht-theme utrecht-theme--media-query">
3  <!-- this page supports light and dark mode as well as responsive layout -->
4</html>

`dist/root.css`

Automatically applies all the CSS variables to HTML elements to the :root element:

1<!DOCTYPE html>
2<html>
3  <!-- var(--utrecht-button-font-family) works here...! -->
4</html>

This method should only be used in case there is no control over the HTML template and the utrecht-theme class name cannot be included.

`dist/property.css`

Experimental CSS @property definitions for the design tokens that are configurable via CSS custom properties. Including these definitions is not necessarily side-effect free: with syntax invalid values for custom properties will be ignored, and inherits and initial-value declarations can influence behavior. Because not all browsers support the @property declaration, including this file can result in rendering differences between browsers.

1<link rel="stylesheet" href="https://unpkg.com/@utrecht/design-tokens/dist/property.css" />

This file should only be included when you have visual regression test for both browsers that do and don't support @property.

`dist/index.js`

Use files from this package in JavaScript projects, for example in React Native or Storybook:

1import { utrechtButtonFontSize } from "@utrecht/design-tokens/dist/index.mjs";

`dist/_variables.scss`

1@import "~@utrecht/design-tokens/dist/variables";
2
3button {
4  font-size: $utrecht-button-font-size;
5}

SCSS variables are not the preferred way to style components, it is better to use CSS variables, because they can be configured differently in a specific context, whereas SCSS variables are given a fixed value at build-time.

However, SCSS variables could be very useful to re-use values where CSS variables cannot be used, like inside CSS media queries:

1@import "~@utrecht/design-tokens/dist/variables";
2
3@media (min-width: $utrecht-viewport-scale-xl-width) {
4  --utrecht-heading-1-font-size: 3rem;
5}

SCSS variables are also useful in the process of incrementally migrating away from your a codebase that currently uses SCSS, such as a website built with Bootstrap 4 components, by already using the design tokens as single source of truth. For example:

1@import "../node_modules/bootstrap/scss/bootstrap";
2
3$body-bg: $utrecht-document-background-color;
4$body-color: $utrecht-document-color;

CSS variables

To use the design tokens in your site via CSS variables, first include the design token definitions in the <head> section of your HTML page:

1<link rel="stylesheet" href="https://unpkg.com/@utrecht/design-tokens/dist/index.css" />

Then add the utrecht-theme class name to your page:

1<html class="utrecht-theme">
2  ...
3</html>

Now the CSS variables will be available and you can use of all the design tokens:

1.my-button {
2  background-color: var(--utrecht-color-red-50);
3  color: var(--utrecht-color-white);
4}

SCSS variables

Contributing

The design tokens are stored in JSON files so we can use the design token translation tool Style Dictionary to make them available in many code languages. We use .tokens.json as file extension for our design token definitions, to tell them apart from regular and unrelated .json files.

Style Dictionary only recognizes one nesting level per file, so be careful to not to mix nesting levels in one file and separate them into multiple files.

The following example doesn't work, because the CSS output would only be --utrecht-button-focus-background-color: navy.

1{
2  "utrecht": {
3    "button": {
4      "background-color": "blue",
5      "focus": {
6        "background-color": "navy"
7      }
8    }
9  }
10}

Organize the design tokens in multiple files instead:

block.tokens.json:

1{
2  "utrecht": {
3    "button": {
4      "background-color": "blue",
5      "focus": {
6        "background-color": "navy"
7      }
8    }
9  }
10}

modifier.tokens.json:

1{
2  "utrecht": {
3    "button": {
4      "background-color": "blue",
5      "focus": {
6        "background-color": "navy"
7      }
8    }
9  }
10}

CSS property definitions

Design tokens in Style Dictionary JSON files can include CSS custom property definitions. Using a custom formatter we output a CSS file with corresponding @property declarations.

1{
2  "example-color": {
3    "css": { "syntax": "<color>", "inherits": true }
4  },
5  "example-font-family": {
6    "css": { "syntax": "*", "inherits": true }
7  },
8  "example-text-align": {
9    "css": { "syntax": "start | end", "inherits": true }
10  }
11}

syntax: any supported name, a list of tokens and * are allowed. Required.

inherits: typically set to true. While "inherits": false is supported, it is discouraged because not all target browsers support this yet. Required.

initialValue: also supported, but currently discouraged because not all browsers support @property yet and it would result in significant rendering differences between supporting and non-supporting target browsers.

License

The open source license does NOT apply to files in this directory.

Applying design elements from this project is strictly prohibited for organisations that are not part of the Municipality of Utrecht.

This project is part of a community iniative to use NL Design System components for projects that need to adhere to the Utrecht Design System. Teams from the central Municipality of Utrecht, as well as those who are contracted by them to develop websites and apps, are able to collaborate via this project.

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

5

SAST

Determines if the project uses static code analysis.

4

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

83 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-593m-55hh-j8gv
Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6
Warn: Project is vulnerable to: GHSA-8hc4-vh64-cxmj
Warn: Project is vulnerable to: GHSA-xq7p-g2vc-g82p
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-gx9m-whjm-85jf
Warn: Project is vulnerable to: GHSA-mmhx-hmjr-r674
Warn: Project is vulnerable to: GHSA-vhxf-7vqr-mrjg
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
Warn: Project is vulnerable to: GHSA-f7f6-9jq7-3rqj
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-3q56-9cc2-46j4
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh
Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-7hpj-7hhx-2fgx
Warn: Project is vulnerable to: GHSA-44fp-w29j-9vj5
Warn: Project is vulnerable to: GHSA-4pg4-qvpc-4q3h
Warn: Project is vulnerable to: GHSA-g5hg-p3ph-g8qg
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-gp8f-8m3g-qvj9
Warn: Project is vulnerable to: GHSA-7m27-7ghc-44w9
Warn: Project is vulnerable to: GHSA-f82v-jwr5-mffw
Warn: Project is vulnerable to: GHSA-fr5h-rqp8-mj6g
Warn: Project is vulnerable to: GHSA-g77x-44xx-532m
Warn: Project is vulnerable to: GHSA-7gfc-8cq8-jh5f
Warn: Project is vulnerable to: GHSA-qpjv-v59x-3qc4
Warn: Project is vulnerable to: GHSA-3h52-269p-cp9r
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-wgrm-67xf-hhpq
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg
Warn: Project is vulnerable to: GHSA-3965-hpx2-q597
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-pqhp-25j4-6hq9
Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx
Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v
Warn: Project is vulnerable to: GHSA-3787-6prv-h9w3
Warn: Project is vulnerable to: GHSA-9f24-jqhm-jfcw
Warn: Project is vulnerable to: GHSA-9qxr-qj54-h672
Warn: Project is vulnerable to: GHSA-m4v8-wqvr-p9f7
Warn: Project is vulnerable to: GHSA-c76h-2ccp-4975
Warn: Project is vulnerable to: GHSA-cxrh-j4jr-qwg3
Warn: Project is vulnerable to: GHSA-rcw3-wmx7-cphr
Warn: Project is vulnerable to: GHSA-963h-3v39-3pqf
Warn: Project is vulnerable to: GHSA-c24v-8rfc-w8vw
Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g
Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986 / GHSA-64vr-g452-qvp3
Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx
Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6
Warn: Project is vulnerable to: GHSA-x574-m823-4x7w
Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8
Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x
Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4
Warn: Project is vulnerable to: GHSA-859w-5945-r5v3
Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q

Score

5.7

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More