MX Design Tokens
A simple utility for sharing themed styling information.
Installation
To install the package via npm into another JS project, run the following command:
npm install @mxenabled/design-tokens
To import the default themed objects:
import { light, dark } from '@mxenabled/design-tokens'
To build a custom colored themed object:
import { buildTheme } from '@mxenabled/design-tokens'
const myCustomOverrides = {
"Color": {
"Brand300": "green"
},
"Custom": {
"ButtonHeight": 42,
"InputText": "lime"
}
}
const greenTheme = buildTheme('light', 'react', myCustomOverrides)
Development Environment
Run the following commands in order to setup a local build environment:
git clone https://github.com/mxenabled/mx-design-tokens.git
cd ./mx-design-tokens
npm i
npm run build:all
Tokens
Token Output Types | Description |
---|---|
Markdown | documentation for light theme tokens |
documentation for dark theme tokens theme tokens | |
JSON - React Web Apps | |
SCSS - Sass / Rails Apps | |
CSS - Other Web Apps | |
JSON - React Native Apps (work in progress...) | |
JSON - Mobile OS Apps (work in progress...) |
Generate files from Tokens
Command | Description |
---|---|
npm run build:all |
Builds everything in one easy step |
npm run build |
Compile src files out to the dist folder |
npm run build:docs |
Compile markdown documentation for viewing all the tokens |
npm run build:json |
Compile static JSON files to use as style objects in React Web Apps |
npm run build:scss |
Compile static SCSS variables to use in Sass / Rails Apps |
npm run build:css |
Compile static CSS variables for use in any web project |
Publishing to NPM
In order to make sure your changes make it to NPM you need to do the following steps in order after adding/changing tokens in the src
directory:
- Update the package version in
package.json
- Run
npm install
so that thepackage-lock.json
updates with the new version - Run
npm run build:all
to ensure all output files are up to date - Update the
CHANGELOG.md
with your changes - Merge the code into
master
- Checkout the
master
branch - Run
npm publish
- Enter your OTP(one time password). This is the code from your 2 factor authentication for npm.