Aviary Tokens

Aviary tokens are foundational design primitives used in our Aviary Design System.

Design tokens originated at Salesforce, and the best way to describe them is to simply quote their documentation:

Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development – Salesforce UX

Installation

Add the following dependency to your package.json file:

"dependencies": {
  "aviary-tokens": "https://github.com/Fullscript/aviary-tokens.git#main",
}

Upgrading

Since this repository does not have an NPM Package associated with it, upgrading is done manually using Git tags and GitHub releases

In order to target a new release, simply specify the release number after the Git repository within package.json:

"dependencies": {
  "aviary-tokens": "https://github.com/Fullscript/aviary-tokens.git#0.2",
}

You can also target a specific branch for testing, using in the same format:

"dependencies": {
  "aviary-tokens": "https://github.com/Fullscript/aviary-tokens.git#my-branch",
}

Usage

Determine which platform/language you are targeting

We currently support two platforms:

Typescript (for React/React Native projects)
SCSS (For projects that do not use CSS-in-JS)

Import the package for use:

For React projects:

import { Typography } from "aviary-tokens/ts";

For SCSS projects:

TODO: Verify this part lol

@import "aviary-tokens/scss";

Use the tokens!

TODO: Fill our/fix up once we're using

React:

import { typography } from "aviary-tokens/ts";

export const myStyles = css`
  font-size: ${typography.h1.fontSize};
`;

Resources

Our Design tokens in Figma: Foundations

Contributing

TODO: Fix this up and add CONTRIBUTING.md

Pull requests are welcome. See the contribution guidelines for more information.