@episource/signet-tokens NPM

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.

Token Design System Tokens

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

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.