Spectrum tokens (compatibility release)

Usage no npm install needed!

<script type="module">
  import adobeSpectrumTokens from 'https://cdn.skypack.dev/@adobe/spectrum-tokens';



Backwards-compatible DNA release based on DSS.


Build DNA output and put contents into ./dist/:

yarn build


First, update the version number (pass major, minor, patch), or simply edit package.json to have the right version.

npm version minor

Perform the build/release:

npm run release

Local development

To use the output of this build in local development of other dependent projects:

  1. Run yarn link
  2. Run yarn build
  3. Go to the project you wish to test, run yarn link @adobe/spectrum-tokens
  4. Build and test your project as normal, using the locally linked copy of @adobe/spectrum-tokens

If you update any DSS files, run yarn build again to refresh your local build, then build and test your project again.

Incremental builds

You can speed up builds by building only a subset of components or just globals by themselves. Incremental builds will still create a full DNA build, only updating the components you specify.

  1. First run yarn build to build the entire system once
  2. Pass any components you update to yarn build -c, for instance: yarn build -c avatar well. Be sure to also pass dependents as they will need to be re-built if their dependencies/things they inherit from change.
  3. If you update core, be sure to add -g or run yarn build -g by itself to rebuild globals
  4. Each time you build, anything in dist/partials/ will be merged into the final DNA build

Custom builds

You can create custom builds with only a handful of components (+ globals):

yarn build -c textfield search checkbox radio picker -g

Additionally, you can specify which color themes to build by passing -t:

yarn build -c textfield search checkbox radio picker -g -t light dark

Be sure to run yarn clean first if your dist/ directory is unclean or you'll end up with components in your build you didn't specify.