Get Started

Learn more about installing and configuring your project to use the ODS Design Tokens library.

If you install the @ods/components package, the @ods/design-tokens library will be installed automatically.

Install

Install the @ods/design-tokens package using npm or your favorite package manager.

Terminal window
npm install '@ods/design-tokens'
yarn add '@ods/design-tokens'

This will add the @ods/design-tokens dependency to your package.json.

package.json
"dependencies": {
  "@ods/design-tokens": "..."
}

Configuration

Import Design Tokens

OLYSENSE Design System components leverage design tokens through CSS Custom Properties. The file below has to be imported at the entry point of your application for our components to render correctly.

index.ts
import '@ods/design-tokens/assets/tokens.css';

Enable Dark Mode Support

To enable dark mode support, add an HTML data attribute data-color or CSS class to the body element of the page. If a data attribute or class is not specified, light mode will be the default.

index.html
<body class="dark">
  ...
</body>


// or


<body data-color='dark'>
  ...
</body>

Usage

In CSS

If you are just developing with traditional CSS, tokens can be applied using the CSS var() function. Because these tokens live at the page level, they’re prefixed with --ods- to avoid collisions with other libraries. 

div {
  background-color: var(--ods-sys-color-accent);
  margin-right: var(--ods-sys-space-4);
  font-size: var(--ods-sys-font-size-xl);
}

In Code

If you need to leverage the tokens in code, you can import them as shown below.

index.ts
import { colorTokens, spaceTokens, fontSizeTokens } from '@ods/design-tokens/tokens';


const colorAccent = colorTokens['ods-sys-color-accent'];
const space4 = spaceTokens['ods-sys-space-4'];
const fontSizeXl = fontSizeTokens['ods-sys-font-size-xl'];

Search