@availity/design-tokens v0.13.2
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
The tokens are first created in Figma. The tokens.json file is generated by Figma and added to the repo via pull-request.
The
transform
script, which uses token-transformer, converts thetokens.json
file to a format style-dictionary can use. The output is core.json.The newly created core.json is then used by
style-dictionary
to output consumable forms of the tokens. These includecss
,scss
, andjs
. There is a build-script which handles this conversion. This script uses config.json to determine how the transformation is handled.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.
The files are compiled using
TypeScript
and output in thedist
folder where they are ready to be published.
20 days ago
4 months ago
4 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
9 months ago
9 months ago
7 months ago
7 months ago
9 months ago
7 months ago
9 months ago
9 months ago
7 months ago
8 months ago
9 months ago
8 months ago
9 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago