
Product
Introducing Webhook Events for Pull Request Scans
Add real-time Socket webhook events to your workflows to automatically receive pull request scan results and security alerts in real time.
@metamask/design-tokens
Advanced tools
@metamask/design-tokens
A collection of design tokens based on MetaMask's design system.
yarn add @metamask/design-tokens
or
npm install @metamask/design-tokens
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 .
Please note the file path will depend on where in your project you are importing it from.
@import '@metamask/design-tokens/styles';
/* 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>
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,
},
});
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
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
This package is part of a monorepo. Instructions for contributing can be found in the monorepo README.
FAQs
Design tokens to be used throughout MetaMask products
The npm package @metamask/design-tokens receives a total of 86,970 weekly downloads. As such, @metamask/design-tokens popularity was classified as popular.
We found that @metamask/design-tokens demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 9 open source maintainers collaborating on the project.
Did you know?
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.
Product
Add real-time Socket webhook events to your workflows to automatically receive pull request scan results and security alerts in real time.
Research
The Socket Threat Research Team uncovered malicious NuGet packages typosquatting the popular Nethereum project to steal wallet keys.
Product
A single platform for static analysis, secrets detection, container scanning, and CVE checks—built on trusted open source tools, ready to run out of the box.