flourish-tokens v1.0.16
flourish-tokens
Design tokens package for the Flourish design system.
Installation
npm i flourish-tokens
Usage
CSS
To use css tokens globally, import the tokens stylesheets at the root level of your project. If you are using React, that means either at the index.js
or App.js
level like this:
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import 'flourish-tokens/tokens/css/_tokens.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
You can then use the css variables defined in this package in your individual stylesheets like this:
body {
background-color: var(--f-color-bg-dark);
}
SCSS
To use our scss tokens, import them inside your stylesheets like this:
@import 'flourish-tokens/tokens/scss/_tokens.scss';
You can then use our scss variables for our tokens like this:
body {
background-color: $f-color-bg-dark;
}
We have big plans for our tokens library - including vending our tokens as javascript variables and more. Make sure you stay up to date with flourish-tokens for exciting new updates!
How our tokens work
High level Overview
We use Figma Tokens Studio to create our tokens. Figma Tokens Studio is a Figma plugin that allows you to define design tokens, it is a free alternative to the Figma Variables REST API, which we also explored. Tokens are defined in the plugin, used in our Figma design files, and then synced to our tokens package in code. This way, we maintain a single source of truth for our tokens, and changes in the tokens studio plugin will automatically reflect in Figma as well as in our code.
Steps:
- Define or change a token value in the Figma Tokens Studio plugin, this will update any place in our Figma where that particular token value is used.
- Commit this token change to our github repo.
- Pull any tokens changes to our local workspace, this will appear in the
tokens.json
file. - Run
npm run build
, this does a couple of things - a. Use token-transformer to transform thetokens.json
file intooutput.json
, this is a different json structure needed for the next step. b. Use style dictionary to create a build, this transforms theoutput.json
file into scss and css variables that show up in thetokens/scss/_tokens.scss
andtokens/css/_tokens.css
directories. We can now use this to publish these tokens as an npm package to be used in other projects. For now we are just using scss and css, but we have the option to output these tokens in any other format we would like, for instance - we could output these tokens into swift ios (.swift
) or android (.xml
) formats. All of this transformation configuration is configured inside of theconfig.json
file. At the moment, we are only publishing our tokens as css in this npm package.