@digitalservice4germany/style-dictionary

DigitalService4Germany Style Dictionary

A Style Dictionary is a system that allows you to define styles once, in a way for any platform or language to consume. A single place to create and edit your styles, and a single command exports these rules to all the places you need them […]

-- Style Dictionary

Supported platforms

Currently the following platforms are supported. Please get in touch if you need support for another platform.

• JavaScript/TypeScript
• Tailwind CSS
• Stitches (CSS-in-JS)

Installation

npm install @digitalService4Germany/style-dictionary

Usage examples

JavaScript/TypeScript

import { colorBackgroundButtonPrimaryFocus } from "@digitalService4Germany/style-dictionary";

console.log(colorBackgroundButtonPrimaryFocus); // #003350

Tailwind CSS

Style Dictionary provides a configuration preset which you can use as a base configuration. See Tailwind CSS docs for more information.

  // tailwind.config.js
  […]
  presets: [
    require("@digitalservice4germany/style-dictionary/tailwind")
  ],
  […]

  // use in html
  <div class="text-blue-900"></div> // #003350

Only a sensible subset of the tokens is available in Tailwind CSS.

Stitches

See Stitches docs for more information.

  // stitches.config.js|ts
  import stitchesConfig from "@digitalservice4germany/style-dictionary/stitches";
  export const { css, … } = createStitches(stitchesConfig);

  // use in code
  const button = css({
    backgroundColor: "$blue900"
  });

Only a sensible subset of the tokens is available in the Stitches configuration.

Development

npm link

Link the dist directory, not the root directory.

1. npm run build
2. cp package.json dist/
3. cd dist
4. npm link (inside dist)

Release

1. npm run build
2. git status (working directory needs to be clean)
3. npm version patch (or minor, major)
4. npm push
5. npm push origin --tags
6. cd dist (important: publish from dist directory!)
7. npm publish