@amsterdam/design-system-tokens/build.js

All design tokens from the Amsterdam Design System. Use it to apply its visual design to your website or application.

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */

import StyleDictionary from 'style-dictionary'

import { dtcgDimension } from './style-dictionary/transforms/dtcg-dimension.js'
import { dtcgFontFamily } from './style-dictionary/transforms/dtcg-font-family.js'
import { nameCustomCamel } from './style-dictionary/transforms/name-custom-camel.js'
import { nameCustomKebab } from './style-dictionary/transforms/name-custom-kebab.js'
import { shadowDTCGDimensionNormalize } from './style-dictionary/transforms/shadow-dtcg-dimension-normalize.js'

StyleDictionary.registerTransform(dtcgDimension)
StyleDictionary.registerTransform(dtcgFontFamily)
StyleDictionary.registerTransform(nameCustomCamel)
StyleDictionary.registerTransform(nameCustomKebab)
StyleDictionary.registerTransform(shadowDTCGDimensionNormalize)

const commonCssTransforms = [
  'shadow/dtcg-dimension-normalize',
  'shadow/css/shorthand',
  'dtcg/dimension',
  'dtcg/fontFamily',
]
const modes = ['compact']

function generateSharedConfig(mode) {
  const name = mode || 'index'

  return {
    css: {
      buildPath: 'dist/',
      files: [
        {
          destination: `${name}.css`,
          format: 'css/variables',
          options: {
            outputReferences: true,
          },
        },
      ],
      transforms: [...commonCssTransforms, 'name/customKebab'],
    },
    cssTheme: {
      buildPath: 'dist/',
      files: [
        {
          destination: `${name}.theme.css`,
          format: 'css/variables',
          options: {
            outputReferences: true,
            selector: `.ams-theme${name === 'index' ? '' : `--${name}`}`,
          },
        },
      ],
      transforms: [...commonCssTransforms, 'name/customKebab'],
    },
    js: {
      buildPath: 'dist/',
      files: [
        {
          destination: `${name}.mjs`,
          format: 'javascript/es6',
        },
      ],
      transforms: [...commonCssTransforms, 'name/customCamel'],
    },
    json: {
      buildPath: 'dist/',
      files: [
        {
          destination: `${name}.json`,
          format: 'json/nested',
        },
      ],
      transforms: [...commonCssTransforms, 'name/camel'],
    },
    scss: {
      buildPath: 'dist/',
      files: [
        {
          destination: `${name}.scss`,
          format: 'scss/variables',
          options: {
            outputReferences: true,
          },
        },
      ],
      transforms: [...commonCssTransforms, 'name/customKebab'],
    },
    typescript: {
      buildPath: 'dist/',
      files: [
        {
          destination: `${name}.d.ts`,
          format: 'typescript/module-declarations',
        },
      ],
      // Type declarations only — no CSS-specific transforms needed
      transforms: ['name/customCamel'],
    },
  }
}

const defaultMode = new StyleDictionary({
  log: {
    verbosity: 'verbose',
  },
  platforms: generateSharedConfig(),
  source: [
    // exclude non-default modes from source
    `./src/**/!(*.${modes.join(`|*.`)}).tokens.json`,
  ],
})

defaultMode.buildAllPlatforms()

for (const mode of modes) {
  const styleDictionary = new StyleDictionary({
    log: {
      verbosity: 'verbose',
    },
    platforms: generateSharedConfig(mode),
    source: [`./src/**/*.${mode}.tokens.json`],
  })

  styleDictionary.buildAllPlatforms()
}