mineral-ui-tokens

    0.4.0 • Public • Published

    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

    Keywords

    none

    Install

    npm i mineral-ui-tokens

    DownloadsWeekly Downloads

    469

    Version

    0.4.0

    License

    Apache-2.0

    Unpacked Size

    96.4 kB

    Total Files

    38

    Last publish

    Collaborators

    • brentertz
    • coldpour
    • kylegach
    • victoriavasys