@galaxy-ds/tokens
v1.0.1
Published
@galaxy-ds/tokens package provides css, scss, js, ios and android tokens to unify styles accross all platforms and themes.
Downloads
501
Keywords
Readme
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
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