@mskcc/tokens

Design tokens for MSK Design System, providing a centralized source of design variables and tokens.

Installation

We recommend tailwindcss to get the full benefit of the tokens.

npm install @mskcc/tokens

Usage

For tailwind4, import the following css file with you tailwind config:

@import 'tailwindcss';
@import '@mskcc/tokens/css/tailwind.css';

/* For consumer facing apps. Use Pro for provider facing apps. */
@import '@mskcc/tokens/css/consumer.css';

Without tailwind

@import '@mskcc/tokens/css/root.css';
@import '@mskcc/tokens/css/reset.css';

/* For consumer facing apps. Use Pro for provider facing apps. */
@import '@mskcc/tokens/css/consumer.css';

Files

| file | description | | --------------------------------------------------------- | ------------------------------------- | | @mskcc/tokens/css/tailwind.css | tokens for tailwind 4 | | @mskcc/tokens/css/consumer.css | CSS font variables for consumer | | @mskcc/tokens/css/pro.css | CSS font variables for pro | | @mskcc/tokens/css/sidebar-layout.css | CSS font variables for sidebar layout | | @mskcc/tokens/css/root.css | Root CSS variables | | @mskcc/tokens/css/reset.css | Reset CSS variables | | import { variables, modes, roles } from '@mskcc/tokens' | import tokens as javascript variables |