@servicetitan/tokens

Design Token for Anvil Design System

All of the design tokens and assets for Anvil is in this package. It generates assets for iOS(swift), Android(Kotlin), and web(JS).

To get started, run:

$ npm install
$ npm run build

The npm run build 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 will have to run this command again to generate the updated assets.

Making changes

Don't forget that we also have Figma counterpart that requires udpate 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 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 and that's all you have to do.

How to use

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

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))