DesignSystem css tokens

Table of Contents

• Install
• Usage

Install

This project uses node and npm. Go check them out if you don't have them locally installed.

$ npm install @mahdaad/tokens

Then with a module bundler like rollup or webpack, use as you would anything else:

// using ES6 modules
import tokens from '@mahdaad/tokens'

// using CommonJS modules
var tokens = require('@mahdaad/tokens')

Usage

define CSS Variables

// main.ts
import {defineCssVars} from 'mitt'

defineCssVars()

get css variable

import {getCssCoreColor} from 'mitt'

getCssCoreColor('primary-5')

get css variable

import {getCoreHexColor, getCoreHexColorList, getCssCoreColorList, getCssCoreColor} from 'mitt'

getCoreHexColor('primary-5') // #xxxxxx
getCssCoreColor('primary-5') // rgba(var(--mt-primary-5), 1)
getCoreHexColorList(['primary-5', 'blue-2'])
getCssCoreColorList(['primary-5', 'blue-2'])

variables

import {
    _colors,
    classColors, 
    systemTheme, 
    tokensEmitter,
    lessVars,
    prefixComponentCore,
    prefixClsCore
} from 'mitt'