Design Tokens for Anvil Design System
Usage for Android (Kotlin)
Steps
- Copy the
AnvilColorToken.kt
and AnvilThemeToken.kt
from build/kotlin/{theme}
folder - Adjust the package in each file to match your file structure as necessary
Files
AnvilColorToken.kt
contains base colors.AnvilThemeToken.kt
contains color pairings for the light and the dark mode.
Example of using the themed color
AnvilThemeToken.AppBackground.forTheme()
Example of using the base color
AnvilColorToken.Neutral10
Usage for iOS (Swift)
Add as dependencies
To include this package, add to your Package.swift
:
dependencies: [
.package(
url: "https://github.com/servicetitan/tokens.git",
from: "12.0.0"
)
]
Example of using the base color
import AnvilCore
Text("Hello World")
.foregroundColor(.anvil(.neutral10))
Usage for Web
Installation using npm
$ npm i @servicetitan/tokens
JavaScript/TypeScript
import { core } from "@servicetitan/tokens";
import { light, dark, tokens } from "@servicetitan/tokens/core";
Less
@import (reference) '@servicetitan/tokens/core/tokens.less';
CSS Variables
@import '@servicetitan/tokens/core/tokens.css';
.
How to Contribute
All of the design tokens and assets for Anvil are in this package. It generates assets for iOS (Swift), Android (Kotlin), and web.
To get started, run:
$ npm install
$ npm run build
The npm run build
command runs style-dictionary build steps to generate the files for each platform. Every time you change something in the style dictionary, such as changing a color value or adding a new design token, you'll have to run this command again to generate the updated assets.
Making changes
Don't forget that we also have Figma counterpart that requires update when there is any change (May 2022).
Link to Figma guide: https://www.figma.com/file/N0wRgro1ZHxK0VTIyoj2li/Anvil-Theme-Core?node-id=1204%3A1733
Updating an existing token
- Make a new branch
- Update the token object located under
tokens/themes/<theme name>
with the new value - Run
npm run build
to update the assets in the build
folder - Create a PR
Adding a new design token
Adding a new design token requires all existing themes to have respective token defined. This only applies to color related tokens for now (May 2022).
Steps to adding new design token:
- Make a new branch
- Update
tokens/themes/theme.d.ts
with the new token - Add the new design token key and value to all of the themes
- Run
npm run build
to update the assets in the build
folder - Create a PR
Adding a new theme
Copy a theme to base on, for example tokens/themes/core
, and make changes to the values.