The design systems tokens. This package contains the raw tokens in their original format, and compiled to an appropriate format for consumption by the design system components.
npm install @octopusdeploy/design-system-tokensDesign System Tokens is a package that contains:
* design token values with associated themes, corresponding to Design System Foundations file in Figma
* an automated build process for generating tokens in appropriate formats
1. Designer adds or modifies a design token in Tokens Studio Plugin initiated in the Design System | Foundations Figma file.
2. Designer creates a branch with their changes and pushes them to GitHub using Tokens Studio. The branch name should start with tokens/, new commit in a branch with such naming convention triggers Github Action to generate the Design Tokens automatically in appropriate formats.
3. Designer requests a review on the Pull Request from Frontend Foundations.
4. Engineer reviews the Pull Request, makes necessary code change if needed, and merges the changes to main.
5. Designer communicates changes accordingly to Communication Guidelines.
All the build scripts are located in the build folder, and the entry point is build.mts.
16px (1rem) based.themeTokens: contains all the colour tokens and shadow tokens.text: shorthand tokens that can be applied to font style.space: dimension tokens to be used for spacing, such as gap, padding.borderRadius, borderWidth, fontSize etc.> Note: direct usage of colorScales is highly not recommended, you should use themeTokens.color instead when seeking for colour tokens.
@octopusdeploy/design-system-tokens package.Example:
``typescript``
import { themeTokens, space, text, borderRadius } from "@octopusdeploy/design-system-tokens";
* Tokens Studio Figma Plugin
* Token Studio sd-transform package
* Style Dictionary package
If you want to add or modify a design token, follow the guidelines for Proposing a Design Token.