Skip to main content

How to use

We use tokens instead of static values (like HEX codes) for color or sizing units.

Installation​

You don’t need to install the tokens because they’re included as a dependency to ensure compatibility.

You can install the package on its own.

npm install --save @aemo/aemo-design-tokens

How to use​

To use the default tokens, add an import in the file where you want to use the design tokens.

Supported format​

Tokens are generated by JSON files from Figma, which enables us to transform this type of file into different ones. It should be possible to transform JSON into SASS, LESS, Stylus, XML, and others.

CSS Variables​

@import url('tokens.css');

.class_name {
  color: var(--gel-color-primary-purple-500);
}

Sass​

@import "@aemo/aemo-design-tokens/dist/tokens.scss";

.class_name {
  color: $gel-color-primary-purple-500;
}

Less​

@import (reference) "@aemo/aemo-design-tokens/dist/tokens.scss";

.class_name {
  color: @gel-color-primary-purple-500;
}

JavaScript​

import token from 'aemo-tokens.js';

document.getElementById(id).style.color = token.ColorPrimaryPurple500;

XML​

Download and paste aemo-tokens.android.xml to your Android project. Then:

<item android:color="@color/gel_color_primary_purple_500" />

Swift​

Download and paste aemo-tokens.android.swift to your Swift project. Then:

tokens.gelColorPrimaryPurple500

Where is the code​

The repo lives on Azure DevOps, and jFrog artefactory

Last updated on