@episource/epi-design-system-tokens v0.0.2

Episource Design System Tokens

At Episource, we believe in DRY - Do Not Repeat Yourself! Yes, we do not encourage using hexadecimal values for colors, font size, and spacing when they can be represented as a token variable.

What is a Design Token?

A token is a visible or tangible representation of a fact, quality, feeling, etc. A design token is a variable-name-spacing used to represent actual values such as color hexadecimal values. For example, color #fff can be represented as epi-white.

This dictionary uses design tokens to define styles once and use those styles on any platform or language. It provides a single place to create and edit your styles and exports these tokens to all the places you need - iOS, Android, CSS, JS, HTML, sketch files, style documentation, etc.

How to install

1. Install as an independent package.

   Install this design token as a standalone.

   npm install @episource/epi-design-system-tokens

2. Preinstalled with epi-design-system - work in progress

   The design token is already pre-packaged with our epiDesignSystem; all the components on the design system are already using the tokens. If you already have the epi-design-system installed on your node modules, you can use it directly.

   To install the design system, run

   npm install @episource/epi-design-system

How to use the tokens

Very easy! Import the token CSS or JS file into your application, then call the tokens! Check the token files under the dist/{-episource-product} to import the token file you need.

• JavaScript

  import * as tokens from 'epi-design-system-tokens/dist/analyst/tokens.es6.js'
  
  export const bannerStyle = {
  backgroundColor: tokens.primaryMain,
  };

• TypeScript

  import * as tokens from 'epi-design-system-tokens/dist/analyst/tokens.d.ts'
  
  export const bannerStyle = {
  backgroundColor: tokens.primaryMain,
  };

• CSS

  @import url('epi-design-system-tokens/dist/analyst/tokens.css');
  
  .parent-container{
      background: var(--primary-main)
  }
  /* The value of --primary-main should be #883907 */

• SCSS

  @import url('epi-design-system-tokens/dist/analyst/token.scss');
  
  .parent-container{
      background: $primary-main;
  }
  /* The value of --primary-main should be #883907 */

• LESS

  @import url('epi-design-system-tokens/dist/analyst/token.scss');
  
  .parent-container{
      background: @primary-main;
  }
  /* The value of --primary-main should be #883907 */

Compatible Episource Products

All Episource products are supported under the dist folder.

• analyst, care-connect, coder, episource, hub, and submitter.

To add new products, contact the design team, or scroll down to contributing section.

NOTE: The Figma file must first be updated to generate the correct token for the new product, then it /template/$themes.json must be updated for the build process to be successful.

Compatible Token Files

The following versions are available in the dist folder.

• JavaScript (tokens.es6.js)
• TypeScript (tokens.d.ts)
• SCSS (tokens.scss)
• LESS (tokens.less)
• CSS (tokens.css)

Contributing

Create a branch of this repo, set up the required dependencies running the command

Install the project dependencies via the CLI command:

npm install

Project structure

The project is made of these files and folders:

• /src contains the design tokens input files (in JSON format)
• /templates contains the templates used to generate the output files
• /dist contains the generated output files (in different formats)
• config.js is the script used to generate the output files

Running the project

You can build the design tokens from the /src/ folder using the CLI command:

npm run build

or you can automatically re-build the tokens at every change using the command:

npm run watch

The generated tokens are saved in the /dist folder, and organised by target platform and products.

If you'd like more information, you can refer to Amazon Style Dictionary, the official originator of the style dictionary.

Publish to NPM

You can either to publish to a local npm service or to publish externally.

This application is published to epi-design-system-tokens NPM package, which is a private module for @episource.

When you publish this npm module, the prepublishOnly hook will run, calling the style dictionary build system to create the necessary files.

npm version <new-version-no>
npm publish

What to look at

Open the package.json file and see how in this specific app there is an extra prepublishOnly command script, that builds the dictionary.

This command is run automatically before the package is prepared and packed via the npm publish command.