Design Tokens and Variables

Using Tokens in Projects

Learn how to use Variables within your workspace.
View as Markdown

Using variables

Once you’ve created your variables in Knapsack you’ll be able to start mapping them to your styles.

For the following example we have two variables from two separate collections:

density.spacing.large

  • Collection: density
  • Group: spacing
  • Variable: large

theme.color.text.base

  • Collection: theme
  • Group: color.text
  • Variable: base
1

Step 1: Reference the variable in your systems CSS.

When using a variable you only need to include the final variable name which includes it’s group context. You do not include the collection or mode details at this point. This is handled in the body attribute in step two.

1.text-style {
2  color: var(--color-text-base);
3  margin-bottom: var(--spacing-large);
4}
2

Step 2: Set the data attribute on your apps body tag to the desired mode for each collection.

The data attribute maps to the collection name and it’s value defines the desired variable mode. Your data attribute will be different based on your Collections Parent Key and Collection name.

For example, if your Collections Parent Key was ‘themes’ your data attribute would be data-themes-density as opposed to data-collections-density.

1<body
2  data-collections-density="cozy"
3  data-collections-theme="light"
4>
5  <!-- your components here -->
6</body>