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/signet-tokens

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 @episource/signet-tokens/dist/{product} to import the token file you need.

• JavaScript

  import * as tokens from '@episource/signet-tokens/dist/analyst/tokens'
  
  backgroundColor: tokens.PrimaryMain;
  
  
  <span style={{ display: 'inline-block', width: '12px',  height: '12px', backgroundColor: tokens.PrimaryMain }}></span>
  

• TypeScript

  
  import * as tokens from '@episource/signet-tokens/dist/analyst/tokens'
  
  backgroundColor: tokens.PrimaryMain;
  
  <span style={{ display: 'inline-block', width: '12px',  height: '12px', backgroundColor: tokens.PrimaryMain }}></span>

• CSS

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

• SCSS

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

• LESS

  @import url('@episource/signet-tokens/dist/analyst/token.less');
  
  or
  
  @import url('~@episource/signet-tokens/dist/analyst/token.less');
  
  .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, coder, episource, 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:

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