@mskcc/tokens

MSK Design System tokens.

Installation

npm install @mskcc/tokens

Usage

Add the following to your application.

Note: For explicit control on the dark and light theme, turn $system-dark-mode to false. @use '@mskcc/tokens'

@use '@mskcc/tokens';

@import '@mskcc/tokens/dist/tokens.css';

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@mskcc/tokens@latest/dist/themes.css"
/>

JavaScript / TypeScript

import { lightTheme, darkTheme } from '@mskcc/tokens';

const style = {
  bg: lightTheme.colorBg,
};

Using tokens

You can also use the tokens directly in your scss and css stylesheets.

@use '@mskcc/themes/tokens' as tk;

body {
  background-color: tk.$msk--color-bg;
}

body {
  background-color: var(--msk-color-bg);
}