Design Tokens for Anvil Design System

Usage for Android (Kotlin)

Steps

1. Copy the AnvilColorToken.kt and AnvilThemeToken.kt from build/kotlin/{theme} folder
2. 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

1. Make a new branch
2. Update the token object located under tokens/themes/<theme name> with the new value
3. Run npm run build to update the assets in the build folder
4. 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:

1. Make a new branch
2. Update tokens/themes/theme.d.ts with the new token
3. Add the new design token key and value to all of the themes
4. Run npm run build to update the assets in the build folder
5. Create a PR

Adding a new theme

Copy a theme to base on, for example tokens/themes/core, and make changes to the values.