Design Tokens for Anvil Design System

Usage for Android (Kotlin)

$3

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

$3

- AnvilColorToken.kt contains base colors.
- AnvilThemeToken.kt contains color pairings for the light and the dark mode.

$3

``Kotlin
AnvilThemeToken.AppBackground.forTheme()
`

$3

`Kotlin
AnvilColorToken.Neutral10
`

Usage for iOS (Swift)

$3

To include this package, add to your Package.swift:
`Swift
dependencies: [
.package(
url: "https://github.com/servicetitan/tokens.git",
from: "12.0.0"
)
]
`

$3

`Swift
import AnvilCore

Text("Hello World")
.foregroundColor(.anvil(.neutral10))
`

Usage for Web

$3

`shell
$ npm i @servicetitan/tokens
`

$3

`ts
import { core } from "@servicetitan/tokens";
`

`ts
import { light, dark, tokens } from "@servicetitan/tokens/core";
`

$3

`less
@import (reference) '@servicetitan/tokens/core/tokens.less';
`

$3

`css
@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/ 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.