@flip-app/swirl-tokens
v0.0.13
Published
Design tokens represent design decisions such as color, spacing, and typography. Each token has a unique name that references a specific value.
Downloads
32
Readme
Swirl Tokens
When using design systems colors, you would usually start with a color palette consisting of values from 100 to 900, like green600. These values are static and are not themable. In Swirl, we intentionally skip this core layer and instead work with the semantic color tokens.
Semantic color tokens represent not just a color value but also a semantic role it's used for. By assigning semantic roles to colors, we achieve predictable theming and dark mode support.
We use generic names for the color tokens, which means that color names don't rely on our component inventory. So you can build your custom components using the same color tokens, and they will still automatically support theming and dark mode.
Installation
npm install @flip/swirl-tokens
Usage
Javascript
Accessing all of the available token groups
import { tokens } from "@flip-app/swirl-tokens";
console.log(tokens.colors);
CSS
Importing all of the css variables. CSS variables are prefixed with --s
import '@flip-app/swirl-tokens/css/styles.css';
div {
background: var(--s-background);
}
JSON
Accessing a specific token group file via the dist folder
const spacing = require("@flip/swirl-tokens/json/spacing.json");