Easy UI Tokens

Design tokens for Easy UI, EasyPost's design system.

Easy UI Tokens uses Style Dictionary as its organizational paradigm and build tool. It transpiles JSON configuration values to platform-specific variables.

Usage

JavaScript

import tokens from "@easypost/easy-ui-tokens/js/tokens.js";

console.log(tokens["color-blue-100"]);

CSS

import '@easypost/easy-ui-tokens/css/variables.css';

div {
  background: var(--ezui-color-blue-100);
}

CSS variables are prefixed with --ezui to signal that these variables are Easy UI variables.

SCSS

@import "@easypost/easy-ui-tokens/scss/variables.scss";

div {
  background: $ezui-color-blue-100;
}

// Map:
@import "@easypost/easy-ui-tokens/scss/map.scss";

div {
  background: map-get($ezui-tokens, "color-blue-100");
}

SCSS variables are prefixed with $ezui to signal that these variables are Easy UI variables.

JSON

const tokens = require("@easypost/easy-ui-tokens/json/tokens.json");

console.log(tokens["color-blue-100"]);

Development

Commands

Command	Runs
npm run build	Builds Easy UI design tokens
npm run clean	Removes temp directories
npm run dev	Builds Easy UI design tokens on file changes