How to use design tokens in CSS

Atlassian Ecosystem Design
1

We can use design tokens in JS fils by importing

@atlaskit/tokens
@atlaskit/theme/colors

But how can I access these predefined tokens in a CSS file as variables. Is there a CSS pack ADS has released which I can use.

Thank you

2

Hi @YohanEdiriweera, you can use CSS variables as shown here:

// CSS variables, Sass, Less
.bg-surface {
  background: var(--ds-surface-raised, #eeeeee);
}

source: Migrate to tokens - Tokens - Atlassian Design System

You can find the list of the tokens here:
https://atlassian.designs/components/tokens/all-tokens#all-design-tokens-list

To see the CSS variables you need to switch the “JavaScript syntax” dropdown to “CSS syntax”.

More information:

Thanks,
Maciej Adamczak
Atlassian Developer