@manifoldco/mercury

☤ Mercury

Design tokens auto-generated from our Figma files.

👉 View Storybook

💽 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-bodyMono-fontFamily;
}

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

Updating from Figma happens ✨ automatically ✨ with a daily check and Pull Requests. However, if you want to manually try it, add export FIGMA_TOKEN=[token] to your ~/.zshrc or ~/.bashrc and run npm run extract.

🚀 Deploying to npm

npm deployment happens ✨ automatically ✨ on merge to master.

In order to release versions yourself, you’ll have to do so manually, locally:

make package

Then update version in pkg/package.json manually with your desired version.

cd pkg && npm publish --tag next