@olympus-ds/design-tokens

Design tokens for using the Olympus Design System

Getting started

To install @olympus/design-tokens in your project, you will need to run the following command using npm:

npm install @olympus/design-tokens

If you prefer Yarn, use the following command instead:

yarn add @olympus/design-tokens

Usage

You can use the @olympus/design-tokens module in your JavaScript and CSS/SASS.

CSS

You can get all tokens by doing:

@import '@olympus/design-tokens/index.css';

or individually by doing:

@import '@olympus/design-tokens/css/colors';

These variables follow the naming convention: --{prefix}-{category}-{type}-{variation}. For example:

--ods-border-stroke-lg;
--ods-color-neutral-50;
--ods-font-family-base;

Sass

You can get all tokens by doing:

@import '@olympus/design-tokens';

or individually by doing:

@import '@olympus/design-tokens/scss/colors';

These variables follow the naming convention: ${prefix}-{category}-{type}-{variation}. For example:

$ods-border-stroke-lg;
$ods-color-neutral-50;
$ods-font-family-base;

JavaScript

For JavaScript, you can import and use this module by doing the following in your code:

// ESM
import { borderStrokeLg, colorNeutral50, fontFamilyBase } from '@olympus/design-tokens';

// CommonJS
const { borderStrokeLg, colorNeutral50, fontFamilyBase } = require('@olympus/design-tokens');

or individually by doing:

// ESM
import { colorNeutral50 } from '@olympus/design-tokens/lib/color';

// CommonJS
const { colorNeutral50 } = require('@olympus/design-tokens/lib/color');

Design Tokens

| Category | Types | Variations | | :--- | :--- | :--- | | border | stroke | none / xxs / xs / sm / md / lg | color | neutral | 00-100 / white / black / base | color | primary success warning danger | 00-100 / base | font | family | base | font | size | tiny / sm / md / lg / xl / xxl / xxxl / mega / ultra / giga / base | font | weight | 100-900 / thin / light / regular / bold / black | opacity | level | semiopaque / intense / medium / light / semitransparent | radii | - | none / xxs / xs / sm / md / lg / circular / pill | size | - | nano / xxxs/ xxs / xs /sm / md / lg / xl / xxl / xxxl / mega / ultra / giga | spacing | - | nano / xxxs/ xxs / xs /sm / md / lg / xl / xxl / xxxl / mega / ultra / giga | time | transition | short / base / long / xl | time | delay duration | short / base / long | zIndex | - | min / 1-9 / overlay / max