Example script for using DSM Tokens

To help you get started with DSM Design Tokens, we've created an example script that uses the the DSM Tokens API and Style Dictionary to create style files for different platforms. Use this to explore the API before jumping in with your own data.

Before you start

Before using the example script, you will need to: 

1. Add your design tokens to a DSM design system.
2. Make sure you have access to the API endpoint.
3. Install Style Dictionary into your working directory. This is typically a one-liner if you have NPM installed. For more information, see Style Dictionary's Installation documentation.

4. Create a file named config.json in the root of your project and paste in the following JSON sample:

   {
    "source": [
      "tmp/**/*.json"
    ],
    "platforms": {
      "scss": {
        "transformGroup": "scss",
        "buildPath": "pesto/scss/",
        "files": [{
          "destination": "_variables.scss",
          "format": "scss/variables"
        }]
      },
      "css": {
        "transformGroup": "css",
        "buildPath": "pesto/css/",
        "files": [{
          "destination": "_variables.css",
          "format": "css/variables"
        }]
      },
      "ios": {
        "transformGroup": "ios",
        "buildPath": "Pesto/",
        "files": [
          {
            "destination": "StyleDictionaryColor.h",
            "format": "ios/colors.h",
            "className": "StyleDictionaryColor",
            "type": "StyleDictionaryColorName",
            "filter": {
              "attributes": {
                "category": "color"
              }
            }
          },
          {
            "destination": "StyleDictionaryColor.m",
            "format": "ios/colors.m",
            "className": "StyleDictionaryColor",
            "type": "StyleDictionaryColorName",
            "filter": {
              "attributes": {
                "category": "color"
              }
            }
          },
          {
            "destination": "StyleDictionarySize.h",
            "format": "ios/static.h",
            "className": "StyleDictionarySize",
            "type": "float",
            "filter": {
              "attributes": {
                "category": "size"
              }
            }
          },
          {
            "destination": "StyleDictionarySize.m",
            "format": "ios/static.m",
            "className": "StyleDictionarySize",
            "type": "float",
            "filter": {
              "attributes": {
                "category": "size"
              }
            }
          }
        ]
      }
    }
   }

Setting up the script

The following script will allow users to download design tokens from a DSM design system and then pass the JSON through the Style Dictionary build system for consumption in any language or platform.

#!/usr/bin/env bash
TOKENS_URL=*****
API_KEY=*****
TMP_DIR=tmp
ZIP_FILE=$TMP_DIR/dsm-style-dictionary.zip

# Create temporary dir.
mkdir -p $TMP_DIR

# Download and unzip property files.
curl -H "X-API-KEY: $API_KEY" $TOKENS_URL --output $ZIP_FILE
unzip $ZIP_FILE -d $TMP_DIR

# Create styles.
style-dictionary build --config config.json

# Clean up temporary dir.
rm -rf $TMP_DIR

Save the above snippet in the root of your tokens project and name the file build with no file extension.

Running the script

To run the script, first make it executable. Using Terminal, navigate to the directory containing the script and run chmod 755 build (No quotes are needed in Terminal. For further instructions, visit the Terminal User Guide).

Next, navigate to the directory containing the build script and run ./build.