@dialpad/dialtone-tokens v1.30.1
Design Tokens for Dialtone
Design tokens for Dialpad's design system Dialtone and everything related to building and publishing them.
Design tokens are all the defined values that are part of the design system, such as color, spacing, typography, and more. The goal is to store design tokens as JSON and output and publish them to many different formats (CSS, LESS, Android, iOS, etc.) upon build.
Usage
To use Dialtone Tokens in your project:
Web (npm)
Install Dependency
npm install @dialpad/dialtone-tokens
Import CSS Tokens
@import "@dialpad/dialtone-tokens/dist/css/variables-dark.css"; // Dark variables
@import "@dialpad/dialtone-tokens/dist/css/variables-light.css"; // Light variables
Use CSS Token
.my-css-class {
color: var(--dt-color-purple-200)
}
Or
Import LESS Tokens
@import "@dialpad/dialtone-tokens/dist/less/variables-dark.less"; // Dark variables
@import "@dialpad/dialtone-tokens/dist/less/variables-light.less"; // Light variables
Use LESS Token
.my-css-class {
color: @dt-color-purple-200
}
iOS (swift)
- Within your XCode project
File > Swift Packages > Add Package Dependency
- Enter repository url:
https://github.com/dialpad/dialtone-tokens-swift
Android (compose/xml)
pom.xml
<dependency>
<groupId>design.dialpad.tokens</groupId>
<artifactId>dialtone-tokens</artifactId>
<version>1.2.0</version>
</dependency>
Install Dependency
mvn install
Quick Start for Contributors
- clone repo
pnpm install
nx build dialtone-tokens
to build tokens. Built tokens will be output to the dist folder.
base.json
Contains tokens exported from figma.tokens/tokens.json
Contains tokens in style dictionary format (generated frombase.json
).dist
Contains tokens in their final output form, in multiple different formats.
14 days ago
28 days ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
5 months ago
5 months ago
10 months ago
9 months ago
6 months ago
8 months ago
1 year ago
1 year ago
1 year ago
1 year ago
11 months ago
12 months ago
12 months ago
12 months ago
11 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
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