@mxenabled/design-tokens
v1.0.3
Published
Design Tokens
Downloads
7,783
Maintainers
Keywords
Readme
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.