olympus-ds-design-tokens v0.0.8

@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