Design tokens for MSK Design System, providing a centralized source of design variables and tokens.
Design tokens for MSK Design System, providing a centralized source of design variables and tokens.
We recommend tailwindcss to get the full benefit of the tokens.
``bash`
npm install @mskcc/tokens
For tailwind4, import the following css file with you tailwind config:
`css
@import 'tailwindcss';
@import '@mskcc/tokens/css/tailwind.css';
/ For consumer facing apps. Use Pro for provider facing apps. /
@import '@mskcc/tokens/css/consumer.css';
`
`css
@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';
`
| 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 |
|