@manifoldco/mercury

@manifoldco/mercury

Design tokens auto-generated from our Figma files.

📚 Usage

npm install @manifoldco/mercury

Sass Modules

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

@use "@manifoldco/mercury" as mercury;

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

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

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

♻️ Updating from Figma

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

export FIGMA_ACCESS_TOKEN=myaccesstoken

Then run:

npm run extract

🚀 Deploying

Currently, deploying happens manually. You’ll need to be signed into npm.

Bump the patch number (the last digit) in package.json manually:

-  "version": "0.0.9",
+  "version": "0.0.10",

Commit this change.

Note: decause this is all managed by design, the version number doesn’t matter as much as traditional packages.

Then, run:

npm run deploy

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