@manifoldco/mercury

☤ Mercury

Design tokens auto-generated from our Figma files.

💽 Usage

With Node installed, run the following in the project folder of your choice:

npm install @manifoldco/mercury

👓 Sass

Mercury ships with some Sass Modules which can be imported and extended if you’re using version 1.23.0 or greater:

@use "node_modules/@manifoldco/mercury";

.Manifold__Button {
  @include mercury.Manifold__Button; /* extend button styles */
  @include mercury.Manifold__Typography__Body;

  background: mercury.$color-purple; /* provide overrides from common variables */
  color: mercury.$color-white;
  font-family: mercury.$typography-bodyMonoFontFamily;
}

For reference, please see the generated .scss files which are tracked in version control.

🐢 JS

import { css } from 'linaria';
import { color, typography } from '@manifoldco/mercury';

const header = css`
  font-family: ${typography.body.fontFamily};
  color: ${color.black};
`;

🌈 Tokens

Group	Sass	JS
Color	$color-*	color.*
Gradient	$gradient-*	gradient.*
Shadow	$shadow-*	shadow.*
Typography	$typography-*	typography.*

⚛️ Components

Component	Description
.Manifold__Button	Those Manifold buttons you know and love
.Manifold__Typography	Global typography styles to really lighten that copy/paste load

🚺 Icons

Icons are all included in the icons/ folder as .svg files. You should be able to import these however you normally import files from npm. If using webpack, you may need to enable raw-loader for SVG files.

Contributing

📚 Running Storybook Locally

npm run dev

♻️ Updating from Figma

In your .zshrc or .bashrc, add your Figma access token (needed to access Manifold files):

export FIGMA_TOKEN=myaccesstoken

Then run:

npm run extract

If something breaks, bug Drew.

🚀 Deploying to npm

Simply draft a new release and tag it:

Tag	Release
v#.#.#	Stable: ⚠️ dependabot will update all our repos using it!
v#.#.#-beta.0	Unstable: this is safe for testing

⚠️ Note: deploying won’t update the tokens! You’ll need to run npm run extract to pull the latest values.