Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@manifoldco/mercury

Package Overview
Dependencies
Maintainers
15
Versions
35
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@manifoldco/mercury

Manifold Design System

  • 0.1.0-beta.5
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
0
decreased by-100%
Maintainers
15
Weekly downloads
 
Created
Source

☤ 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-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

GroupSassJS
Color$color-*color.*
Gradient$gradient-*gradient.*
Shadow$shadow-*shadow.*
Typography$typography-*typography.*

⚛️ Components

ComponentDescription
.Manifold__ButtonThose Manifold buttons you know and love
.Manifold__TypographyGlobal 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:

TagRelease
v#.#.#Stable: ⚠️ dependabot will update all our repos using it!
v#.#.#-beta.0Unstable: 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.

FAQs

Package last updated on 26 Mar 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc