Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@servicetitan/tokens

Package Overview
Dependencies
Maintainers
7
Versions
137
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@servicetitan/tokens

## Usage for Android (Kotlin)

  • 12.9.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
5.7K
decreased by-40.96%
Maintainers
7
Weekly downloads
 
Created
Source

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.

FAQs

Package last updated on 14 Dec 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc