Galaxy Tokens

@galaxy-ds/tokens package provides css, scss, js, ios and android tokens to unify styles accross all platforms and themes.

Current Use

• @galaxy-ds/tokens will be used within GUI (Bootstrap) providing css variables for desktop/web/mobile theme overrides

Figma

Galaxy uses Figma to bring design and code together turning Figma Styles to usable Tokens that can be used within any project for any platform.

Figma Design System

• GDS LEAP : Colors, Spacing, Typography

Figma plugins

• Figma Tokens

Use

To add to a project using npm:

# Using npm:
npm install --save @galaxy-ds/tokens

# OR Yarn:
yarn add @galaxy-ds/tokens

CSS

To make use of the css variables, import them into your code like so:

/* Inside css */
@import "~@galaxy-ds/tokens/dist/<theme>/<platform>/tokens.css";

JS

// ES6
import "@galaxy-ds/tokens/dist/<theme>/<platform>/tokens.js";

// Common
import "@galaxy-ds/tokens/dist/<theme>/<platform>/cjs/tokens.js";

SCSS

To make use of the scss variables, import them into your scss files like so:

@use '~@galaxy-ds/tokens/dist/<theme>/<platform>/tokens.scss';

Output

You should see something like this output:

Copying starter files...

desktop
✔︎  build/[BRAND]/desktop/tokens.css
✔︎  build/[BRAND]/desktop/tokens.scss
✔︎  build/[BRAND]/desktop/tokens.js

web
✔︎  build/[BRAND]/web/tokens.css
✔︎  build/[BRAND]/web/tokens.scss
✔︎  build/[BRAND]/web/tokens.js

android
✔︎ build/[BRAND]/android/tokens.colors.xml
✔︎ build/[BRAND]/android/tokens.dimens.xml
✔︎ build/[BRAND]/android/tokens.font_dimens.xml

ios
✔︎ build/[BRAND]/ios/tokens.h