code4lib-design-tokens
v1.1.0
Published
Design tokens for Code4Lib
Downloads
4
Maintainers
Readme
Code4Lib Design Tokens
This work is from the Intro to Figma - Code4Lib '22 Pre-Conference Workshop
Hosts, transforms, and publishes design tokens for Intro to Figma workshop at Code4Lib '22.
- Hosts tokens via Figma Tokens plugin for sharing and syncing among design team
- Transforms tokens to usable Sass variables via Github Actions using Style Dictionary
- Publishes tokens to NPM via Github Actions using Semantic Release
What are Design Tokens?
Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development. - Salesforce UX
Helpful Explainers:
- Smashing Podcast, Episode 3: What are Design Tokens? with Jina Anne
- Tokens in Design Systems by Nathan Curtis
Requirements
This package requires Dart Sass because LibSass is deprecated. If you are using the node-sass package in your project (which provides the Node.js binding to the deprecated LibSass), please replace it with the sass package:
npm uninstall node-sass && npm install sass --save-dev
Usage
Install the package:
npm install code4lib-design-tokens --save-dev
Then in your Sass, load the module (e.g., variables, typography, or helpers):
@import "~code4lib-design-tokens/scss/variables.scss";
@import "~code4lib-design-tokens/scss/helpers.scss";
@import "~code4lib-design-tokens/scss/typography.scss";
Then in your component, include the desired mixin:
.category {
@include overline;
}
or, include the desired variable:
.category {
margin-bottom: $component-06 + px;
}
or, include the desired SVG if using vue-svg-loader:
import SvgHatchRight from "~/node_modules/code4lib-design-tokens/assets/svgs/graphic-hatch-lines"
Updating to the latest package
Latest release is posted in this repository, but you can also check if your package is outdated:
npm outdated
If you are not running the latest release and would like to, then update the package:
npm install code4lib-design-tokens@latest
Or, you can update the version number in the package.json
file and run npm install
.
Files
data/tokens.json
- Syncs with Figma Tokens plugindata/transformed-tokens.json
- Tokens transformed to be usable by Style Dictionaryscss/*
- Tokens usable by developersassets/*
- Assets usable by developers
Best Practices
Helpful reminders to future selves:
- Use the commit message conventions that trigger semantic releases
- feat: A new feature
- fix: A bug fix
- docs: Documentation only changes
- style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
- refactor: A code change that neither fixes a bug nor adds a feature
- perf: A code change that improves performance
- test: Adding missing or correcting existing tests
- chore: Changes to the build process or auxiliary tools and libraries such as documentation generation
- Always leave a comment when creating, reviewing, and merging a pull request