> For clean Markdown of any page, append .md to the page URL. > For a complete documentation index, see https://docs.knapsack.cloud/llms.txt. > For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.knapsack.cloud/_mcp/server. # Using Tokens in Projects ## 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` #### 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. ```css .text-style { color: var(--color-text-base); margin-bottom: var(--spacing-large); } ``` #### 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`. ```html ```