@classcraft.edu/ds-tokens

Install

# pnpm
pnpm i -D @classcraft.edu/ds-tokens

# npm
npm i -D @classcraft.edu/ds-tokens

# Yarn
yarn add -D @classcraft.edu/ds-tokens

Usage

MUI

Import tokens to MUI create theme.

import { lightTheme } from '@classcraft.edu/ds-tokens/src/theme/mui/light'
import { darkTheme } from '@classcraft.edu/ds-tokens/src/theme/mui/dark'

CSS

@import '@classcraft.edu/ds-tokens/build/tokens/css/light.css';
@import '@classcraft.edu/ds-tokens/build/tokens/css/dark.css';
/* or with @media prefers color schema */
@import '@classcraft.edu/ds-tokens/build/tokens/css/theme.css';

JS

Is possible to use via json with values of type css var or fixed values.

import { ds as var } from '@classcraft.edu/ds-tokens/build/tokens/js/variables.json'
import { ds as value } from '@classcraft.edu/ds-tokens/src/tokens/mui.json'

var.palette.common.black.value // --ds-palette-common-black
value.palette.common.black.value // #000000

License

MIT License