@steelcase/tokens

Design tokens for Steelcase brands.

Installation

pnpm add @steelcase/tokens
# or: npm i @steelcase/tokens

CSS usage (recommended)

Load exactly one brand stylesheet:

import '@steelcase/tokens/steelcase.css';
// or: import '@steelcase/tokens/coalesse.css';

Set the root font size:

html {
    font-size: 62.5%;
}

Use token variables:

.surface {
    background: var(--ds-color-background-default);
    color: var(--ds-color-content-default);
    padding: var(--ds-size-16px);
}

JavaScript / TypeScript usage

import { SC_BRANDS, steelcase } from '@steelcase/tokens';

console.log(SC_BRANDS); // ['steelcase', 'coalesse']
console.log(steelcase.colorContentDefault);
console.log(steelcase.size16);
console.log(steelcase.size16Px);
console.log(steelcase.size16Rem);

SCSS typography mixins

@use '@steelcase/tokens/typography.scss' as typography;

.body {
    @include typography.ds-typography-body-default-regular;
}