Tokens

Prefixes

Component

Design decisions used across multiple components. When developing and looking for applicable tokens always start here.

Name

Value

Demo

Semantic

Design decisions attached to a particular meaning or use case.

Name

Value

Demo

Core

Raw values that are used by the system. Not all core tokens may be in use. These tokens represent all potential values that are compliant with the system. Avoid referencing core tokens directly whenever possible.

Name

Value

Demo

Theme

Tokens that can be customized for white-labels.

Name

Value

Demo

---

Usage

Javascript

First, import the web, ios, or android tokens for your respective platform.

import { ios } from "@nudge-coach/tokens";

Then you can apply the token like so:

<Component width={web.semantic.spacing.medium.value} />

caution

Don't forget to reference the actual token value.

CSS

This package also contains a reference to every token via a CSS variable. References to our CSS variables always being with --

.myComponent {
  backgroundcolor: var(--semantic-background-success);
}