
Research
Security News
Lazarus Strikes npm Again with New Wave of Malicious Packages
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
@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 0 weekly downloads. As such, @metamask/design-tokens popularity was classified as not 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.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
Security News
Socket CEO Feross Aboukhadijeh discusses the open web, open source security, and how Socket tackles software supply chain attacks on The Pair Program podcast.
Security News
Opengrep continues building momentum with the alpha release of its Playground tool, demonstrating the project's rapid evolution just two months after its initial launch.