@spartanbio/schedio-tokens v2.1.0-alpha.2

Schédio design tokens

Built with Theo for @spartanbio/schedio.

A full list of tokens is available at https://spartanbio.github.io/schedio-tokens/.

• Schédio design tokens
  • Installation
  • Usage
    • JS
      • React Native
    • SCSS
    • Adobe Creative Cloud Applications

Installation

yarn add @spartanbio/schedio-tokens

Usage

Tokens are organized with the path structure dist/<platform>/<language>/<token>.<format>.<ext>

JS

Standard usage:

import SchedioTokens from '@spartanbio/schedio-tokens';

const Schedio = new SchedioTokens();
const blue = Schedio.color('blue');

React Native

All CommonJS and ESModule tokens are available in dist/react-native/. Each includes TypeScript typings.

// JS tokens
import SchedioTokens, { nativeTokens } from '@spartanbio/schedio-tokens';

const Schedio = new SchedioTokens(nativeTokens);
const blue = Schedio.color('blue');

// TS interface if needed
import { SchedioTokensNative } from '@spartanbio/schedio-tokens';

SCSS

All variables and keys are kebab-case.

// All tokens as variables
@import '~@spartanbio/schedio/dist/web/scss/tokens';

// All tokens as a map
@import '~@spartanbio/schedio/dist/web/scss/tokens.map';

// All tokens as custom properties (works for CSS too)
@import '~@spartanbio/schedio/dist/web/css/tokens.custom-properties';

// Unprefixed maps of specific token categories
@import '~@spartanbio/schedio/dist/web/scss/<token-category>.map';

// Colors, grouped by hue
@import '~@spartanbio/schedio/dist/web/scss/color.color-map';

Adobe Creative Cloud Applications

CC applications that support swatch files can import dist/web/adobe/color.ase to use color. Note they are imported without groups.