@availity/design-tokens v1.1.1

Availity Design Tokens

This repo contains design tokens for the Availity Design System, Element. The tokens are created with Figma and then converted to several consumable formats with Style Dictionary. The formats are:

• ES6 modules for CSS-in-JS approach (styled-components/emotion)
• CSS variables for applications using class based CSS approach
• SCSS variables for scss integration using a global stylesheet

Installation

NPM

npm install @availity/design-tokens

Yarn

yarn add @availity/design-tokens

Usage

This package can be consumed in three different ways: css, scss, or js

CSS

Import the css file to your app

import '@availity/design-tokens/css/variables.css';

SCSS

Import the scss file to your app

import '@availity/design-tokens/scss/variables.scss';

JavaScript

Import the theme object to use in your app. In this example we create a material theme to be used with the theme provider

import { lightTheme } from '@availity/design-tokens';
import { ThemeProvider, createTheme } from '@mui/material/styles';

const defaultTheme = createTheme(lightTheme);

const App = () => {
  return (
    <MuiThemeProvider theme={theme}>
      <SampleComponents />
    </MuiThemeProvider>
  );
};

How it works

1. The tokens are first created in Figma. The tokens.json file is generated by Figma and added to the repo via pull-request.

2. The transform script, which uses token-transformer, converts the tokens.json file to a format style-dictionary can use. The output is core.json.

3. The newly created core.json is then used by style-dictionary to output consumable forms of the tokens. These include css, scss, and js. There is a build-script which handles this conversion. This script uses config.json to determine how the transformation is handled.

4. Now the theme object is created using the tokens in the generated tokens.js file. Currently, only a light-theme exists. This object is exported for apps to use.

5. The files are compiled using TypeScript and output in the dist folder where they are ready to be published.