Atomium - Tokens

This is the tokens of the Atomium design system using CSS Variables to be used in any Framework or Vanilla JS

You should see all the tokens in the Tokens section of the Storybook

Getting Started

npm i @juntossomosmais/atomium-tokens

The variables can be used in CSS

import '@juntossomosmais/atomium-tokens/tokens.css'

.my-element {
  color: var(--color-brand-primary-regular);
}

You can also use the variables in JavaScript

import * as tokens from '@juntossomosmais/atomium-tokens'

primary: tokens.colorBrandPrimaryDark1;

We also provide a JSON file with tokens. It is useful for using to compare tokens in Stylelint, for example.

import tokens from '@juntossomosmais/atomium-tokens/tokens.json'