@metamask/design-tokens

@metamask/design-tokens

A collection of design tokens based on MetaMask's design system.

Installation

yarn add @metamask/design-tokens

or

npm install @metamask/design-tokens

Usage

Currently the metamask design tokens repo supports 2 formats, CSS-in-JS and CSS variables. These formats are based on its primary consumers metamask-mobile, metamask-extension and metamask-portfolio .

CSS Variables

• Import the design tokens stylesheet into your CSS or SCSS.

Please note the file path will depend on where in your project you are importing it from.

@import '@metamask/design-tokens/styles';

• Use design token CSS variables in the code.

/* In CSS/SCSS */
.card {
  --card-color-text: var(--color-text-default);
  --card-color-background: var(--color-background-default);
  --card-color-border: var(--color-border-muted);

  background-color: var(--card-color-background);
  color: var(--card-color-text);
  border: 1px solid var(--card-color-border);
}

// They also work for inline styles in javascript
<div style={{ color: 'var(--color-error-default)' }}>This was is an error</div>

CSS-in-JS

• Use design tokens in code by importing from library:

import { lightTheme, darkTheme } from '@metamask/design-tokens';

// Create provider that swaps theme (pseudo code)
<ThemeProvider theme={theme === 'default' ? lightTheme : darkTheme} />;

const createStyles = (theme) =>
  StyleSheet.create({
    modalContainer: {
      backgroundColor: theme.colors.background.default,
      borderColor: theme.colors.border.default,
    },
  });

Tooling

To prevent color tech debt and ensure themability, accessibility, and consistency of the MetaMask brand, we recommend using @metamask/eslint-plugin-design-tokens. This ESLint plugin helps enforce the usage of design tokens in your codebase.

You'll first need to install ESLint:

$ npm install --save-dev eslint
# or
$ yarn add --dev eslint

Next, install @metamask/eslint-plugin-design-tokens:

$ npm install --save-dev @metamask/eslint-plugin-design-tokens
# or
$ yarn add --dev @metamask/eslint-plugin-design-tokens

Configuration

Add eslint-plugin-design-tokens to your ESLint configuration:

{
  "plugins": ["@metamask/design-tokens"],
  "rules": {
    "@metamask/design-tokens/color-no-hex": "warn"
  }
}

This configuration will enforce the usage of design tokens instead of static hex color values, helping to maintain a consistent design system. See more supported rules

Contributing

This package is part of a monorepo. Instructions for contributing can be found in the monorepo README.