Mineral UI Design Tokens

Downloads in past


556630.4.06 years ago6 years agoMinified + gzip package size for mineral-ui-tokens in KB




npm install --save mineral-ui-tokens

yarn add mineral-ui-tokens


All Tokens and their corresponding values can be viewed on the
Mineral UI Tokenstoken-page page.
This package uses the same import syntax as the mineral-ui libraryimport-syntax.
Token names use a [target]_[property]_[variation]_[state] naming scheme.
  • target - the type of element targeted by the token, e.g. "input" or "panel"
  • property (required) - the CSS property of the token, e.g. "backgroundColor"
  • variation - any differentiating aspect of the token that isn't state, e.g.
"brand", "primary", "success"
  • state - state-dependent aspects, e.g. "focus", "selected"


JavaScript token names are formatted in "pseudo
camelCase", e.g. boxShadow_1

Import tokens from the default export:

import tokens from 'mineral-ui-tokens';

Import the palette, specific color rampscolor-page, or specific tokens from named exports:

import { palette, magenta, boxShadow_1 } from 'mineral-ui-tokens';

Import tokens & palette, as Sass variables:

import 'mineral-ui-tokens/index.scss';


Sass token names are formatted in "pseudoKebab-case", with a prefix, e.g. $mnrl-boxShadow-1
@import '<path_to_node_modules>/mineral-ui-tokens/index.scss';


Check the project root's changelog for updates.


This package uses Theotheo to generate output in a variety of formats. The source tokens are located in the tokens directory. Theo recognizes values like "{!blue_60}" as aliasestheospec. Check the aliases and/or imports properties in the containing file to find the alias definition(s).
After changing the tokens source, generate the new output with npm run build:tokens, which you can run from either the project root or the mineral-ui/packages/mineral-ui-tokens directory. Format your commit messagescommitizen appropriately, using mineral-ui-tokens for your scope.
Then submit a PRpr, including both your token source changes and the generated files, for review.

Publishing the mineral-ui-tokens package

  1. Make or accept source token updates
  2. cd mineral-ui/packages/mineral-ui-tokens (if not already there)
  3. npm run build:tokens
  4. npm run format
  5. npm version minor
* This package uses the same [versioning scheme][versioning] as mineral-ui:
major, minor, and patch updates all increment the _minor_ version number:
0.1.0 -> 0.2.0
  1. npm run build
  2. Commit changes and push to GitHub
  3. cd dist && npm publish