
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
@metamask/design-tokens
Advanced tools
Design tokens to be used throughout MetaMask products.
@metamask/design-tokens
A collection of design tokens based on MetaMask's design system.
Have a question, suggestion, feedback? Contributors can create an issue or internal folks can post on the #metamask-design-system Slack channel. We're here to help! 💁
The primary documentation for MetaMask Design Tokens is storybook, which describes the different token formats and gives examples of their usage.
Currently the metamask design tokens repo supports 2 formats. CSS-in-JS for React Native applications and CSS variables for web applications. These formats are based on its primary consumers metamask-extension and metamask-mobile.
yarn add @metamask/design-tokens
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 '../../node_modules/@metamask/design-tokens/src/css/design-tokens';
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>
yarn add @metamask/design-tokens
import { lightTheme, darkTheme } from '@metamask/design-tokens';
// Create provider that swaps theme (sudo code)
<ThemeProvider theme={theme === 'default' ? lightTheme : darkTheme} />;
const createStyles = (theme) =>
StyleSheet.create({
modalContainer: {
backgroundColor: theme.colors.background.default,
borderColor: theme.colors.border.default,
},
});
For a detailed list of design tokens visit the MetaMask design token storybook
Follow these steps to below to get the library up and running locally.
nvm use
will automatically choose the right node version for you.yarn setup
to install dependencies and run any requried post-install scripts
yarn
/ yarn install
command directly. Use yarn setup
instead. The normal install command will skip required post-install scripts, leaving your development environment in an invalid state.We use storybook for documentation. To get storybook up and running use:
yarn storybook
The primary data for the generation of tokens is based on the json generated from a figma plugin called Figma Tokens. This keeps our code in sync with our figma libraries. Currently the token formats are manually generated we are hoping to automate this process in future.
Run yarn test
to run the tests once. To run tests on file changes, run yarn test:watch
.
Run yarn lint
to run the linter, or run yarn lint:fix
to run the linter and fix any automatically fixable issues.
The project follows the same release process as the other libraries in the MetaMask organization. The GitHub Actions action-create-release-pr
and action-publish-release
are used to automate the release process; see those repositories for more information about how they work.
Choose a release version.
If this release is backporting changes onto a previous release, then ensure there is a major version branch for that version (e.g. 1.x
for a v1
backport release).
v1.0.2
release, you'd want to ensure there was a 1.x
branch that was set to the v1.0.1
tag.Trigger the workflow_dispatch
event manually for the Create Release Pull Request
action to create the release PR.
action-create-release-pr
workflow to create the release PR.Update the changelog to move each change entry into the appropriate change category (See here for the full list of change categories, and the correct ordering), and edit them to be more easily understood by users of the package.
yarn auto-changelog validate --rc
to check that the changelog is correctly formatted.Review and QA the release.
Squash & Merge the release.
action-publish-release
workflow to tag the final release commit and publish the release on GitHub.Publish the release on npm.
npm publish --dry-run
to examine the release contents to ensure the correct files are included. Compare to previous releases if necessary (e.g. using https://unpkg.com/browse/[package name]@[package version]/
).npm publish
.FAQs
Design tokens to be used throughout MetaMask products
The npm package @metamask/design-tokens receives a total of 4,146 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.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.