Configuring Token Engine

Overview

You can configure the Knapsack Token Engine by using the knapsack.config.js file located in the knapsack folder. This configuration file allows you to specify the source location of design tokens, the output format location, and select which output formats to include. It gives you the flexibility to define how design tokens are processed and where they are stored.

Configuration

distDir

The distDir property specifies the directory where the output of the design tokens will be generated. By default, the design token output is placed in the tokens directory within the dist directory of the knapsack folder.

srcFilePath

The srcFilePath property points to the file that contains the design tokens data. By default, the design tokens are sourced from the knapsack.design-tokens.json file in the data directory of the knapsack folder.

targets

The targets property allows you to enable or disable specific targets for generating design tokens. Available targets include android, css, ios, and js.

filterTokens

The filterTokens functionality lets you selectively include or exclude specific tokens based on defined criteria.

Here’s an example code snippet that demonstrates configuring these properties and functionality:

1
const DesignTokensJson = join(__dirname, './packages/design-tokens/design-tokens.json');
2
const DesignTokenDist = join(__dirname, './packages/design-tokens/dist');
3
4
module.exports = configureKnapsack({
5
  designTokens: {
6
    distDir: DesignTokenDist,
7
    srcFilePath: DesignTokensJson,
8
    targets: {
9
      android: {
10
        enabled: true,
11
        filterTokens: (token) => {
12
          // how to filter tokens
13
          return token.id.startsWith('breakpoint');
14
        },
15
      },
16
      css: { enabled: true },
17
      ios: { enabled: true },
18
      js: { enabled: true },
19
    },
20
  },
21
  ...
22
});

Supported Outputs

The Knapsack Platform supports several output formats for exporting design tokens:

Web

• CommonJS (.cjs)
• Cascading Style Sheets (.css)
• TypeScript Declaration File (.d.ts)
• JavaScript Module (.js)
• JSON (.json)
• Less CSS (.less)
• Nested JSON (.nested.json)
• Sass/SCSS (.scss)
• Style Dictionary (.style-dictionary)

Native

• Android XML Resource Files (android.xml)
• Swift Programming Language (.swift)

These output formats provide flexibility and compatibility for integrating design tokens into various development environments and platforms.

The Knapsack Token Engine provides a powerful and user-friendly way to work with design tokens, enabling efficient collaboration between designers and developers while ensuring consistency across platforms and workflows.

Extra Token Asset Builds

If more than one set of tokens are needed to be built from multiple token source JSON files, there is an extra CLI tool for doing so:

$
$ ./node_modules/.bin/knapsack-build-tokens --help
$
$
Options:
$
  --help        Show help                                              [boolean]
$
  --version     Show version number                                    [boolean]
$
  --src         Path to the design tokens JSON file          [string] [required]
$
  --dist        Path to the directory where the files will be written
$
                                                             [string] [required]
$
  --clean       Delete the dist directory before writing files
$
                                                      [boolean] [default: false]
$
  --src-format
$
      [string] [choices: "knapsack", "w3c", "tokens-studio", "style-dictionary"]
$
                                                           [default: "knapsack"]
$
  --verbose     Show verbose output                   [boolean] [default: false]

Example usage

$
npx knapsack-build-tokens --src ./src/tokens/tokens.json --dist ./dist/assets --src-format tokens-studio --config ./knapsack/knapsack.config.json

Assume the following values:

• srcTokenFilePath: "./src/tokens/tokens.json"
• assetsFolder: "./dist/assets"
• knapsackConfigPath: "./knapsack/knapsack.config.json"