Skip to content
Branch: master
Find file History
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
scripts
src refactor(mineral-ui-tokens): Update per new styles Sep 27, 2018
tokens refactor(mineral-ui-tokens): Update per new styles Sep 27, 2018
.npmrc feat(mineral-ui-tokens): Add source tokens, build scripts, and genera… May 1, 2018
LICENSE.md feat(mineral-ui-tokens): Add source tokens, build scripts, and genera… May 1, 2018
README.md chore(website): Refactor nav to enable easy addition of guidelines pages Sep 5, 2018
package.json build(packages): Ensure sub-package builds respect babel config Feb 13, 2019

README.md

mineral-ui-tokens

Installation

npm install --save mineral-ui-tokens

or

yarn add mineral-ui-tokens

Usage

All Tokens and their corresponding values can be viewed on the Mineral UI Tokens page.

This package uses the same import syntax as the mineral-ui library.

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

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 ramps, 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

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';

Changelog

Check the project root's changelog for updates.

Contributing

This package uses Theo to generate output in a variety of formats. The source tokens are located in the tokens directory. Theo recognizes values like "{!blue_60}" as aliases. 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 messages appropriately, using mineral-ui-tokens for your scope.

Then submit a PR, 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 as mineral-ui: major, minor, and patch updates all increment the minor version number: 0.1.0 -> 0.2.0
  6. npm run build
  7. Commit changes and push to GitHub
  8. cd dist && npm publish
You can’t perform that action at this time.