{"id":28425330,"url":"https://github.com/metamask/design-tokens","last_synced_at":"2025-06-15T00:34:58.153Z","repository":{"id":37597418,"uuid":"449877030","full_name":"MetaMask/design-tokens","owner":"MetaMask","description":"Design tokens to be used throughout MetaMask products","archived":true,"fork":false,"pushed_at":"2024-11-26T18:51:10.000Z","size":11946,"stargazers_count":30,"open_issues_count":0,"forks_count":16,"subscribers_count":62,"default_branch":"main","last_synced_at":"2025-06-05T10:50:31.248Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://metamask.github.io/design-tokens/?path=/docs/getting-started-introduction--docs","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MetaMask.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":null,"patreon":null,"open_collective":"metamask","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2022-01-19T22:34:53.000Z","updated_at":"2025-04-14T17:53:37.000Z","dependencies_parsed_at":"2023-12-21T01:47:08.970Z","dependency_job_id":"bc273c35-e3da-4673-affa-ff7560294d24","html_url":"https://github.com/MetaMask/design-tokens","commit_stats":{"total_commits":91,"total_committers":11,"mean_commits":8.272727272727273,"dds":0.6923076923076923,"last_synced_commit":"64c4f31181ef819b2b3193389bd488db75ebafbd"},"previous_names":[],"tags_count":33,"template":false,"template_full_name":"MetaMask/metamask-module-template","purl":"pkg:github/MetaMask/design-tokens","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MetaMask%2Fdesign-tokens","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MetaMask%2Fdesign-tokens/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MetaMask%2Fdesign-tokens/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MetaMask%2Fdesign-tokens/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MetaMask","download_url":"https://codeload.github.com/MetaMask/design-tokens/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MetaMask%2Fdesign-tokens/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259905430,"owners_count":22929917,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-05T10:37:00.827Z","updated_at":"2025-06-15T00:34:58.141Z","avatar_url":"https://github.com/MetaMask.png","language":"TypeScript","funding_links":["https://opencollective.com/metamask"],"categories":[],"sub_categories":[],"readme":"\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cp align=\"center\"\u003e\u003cb\u003e⚠️ PLEASE READ ⚠️\u003c/b\u003e\u003c/p\u003e\n      \u003cp align=\"center\"\u003e\n        This package has been migrated to our\n        \u003ca href=\"https://github.com/MetaMask/metamask-design-system\"\n          \u003e\u003ccode\u003emetamask-design-system\u003c/code\u003e\u003c/a\n        \u003e\n        monorepo, and this repository has been archived. Please note that all\n        future development and feature releases will take place in the\n        \u003ca href=\"https://github.com/MetaMask/metamask-design-system\"\n          \u003e\u003ccode\u003emetamask-design-system\u003c/code\u003e\u003c/a\n        \u003e\n        repository.\n      \u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n# MetaMask Design Tokens 🪙\n\n[![npm version](https://badge.fury.io/js/@metamask%2Fdesign-tokens.svg)](https://npmjs.com/package/@metamask/design-tokens) [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://metamask.github.io/design-tokens)\n\n## `@metamask/design-tokens`\n\nA collection of design tokens based on MetaMask's design system.\n\nHave a question, suggestion, feedback? Contributors can [create an issue](https://github.com/MetaMask/design-tokens/issues/new/choose) or internal folks can post on the [#metamask-design-system](https://consensys.slack.com/archives/C0354T27M5M) Slack channel. We're here to help! 💁\n\n### Table of Contents\n\n- [Documentation](#documentation)\n- [Installation](#installation)\n  - [CSS Variables](#css-variables)\n  - [CSS-in-JS](#css-in-js-react-native)\n- [Tooling](#tooling)\n- [Contributing](#contributing)\n  - [Setup](#setup)\n  - [Documentation](#documentation)\n  - [Figma Tokens](#figma-tokens)\n  - [Testing and Linting](#testing-and-linting)\n  - [Release \u0026 Publishing](#release-publishing)\n- [License](#license) TBC\n\n## Documentation\n\nThe primary documentation for MetaMask Design Tokens is [storybook](https://metamask.github.io/design-tokens), which describes the different token formats and gives examples of their usage.\n\n## Installation\n\n`yarn add @metamask/design-tokens`\n\nor\n\n`npm install @metamask/design-tokens`\n\nCurrently the metamask design tokens repo supports 2 formats, CSS-in-JS and CSS variables. These formats are based on its primary consumers [metamask-mobile](https://github.com/MetaMask/metamask-mobile), [metamask-extension](https://github.com/MetaMask/metamask-extension) and [metamask-portfolio](https://github.com/consensys-vertical-apps/metamask-portfolio) .\n\n### CSS Variables\n\n1. Import the design tokens stylesheet into your CSS or SCSS.\n\n\u003e _Please note the file path will depend on where in your project you are importing it from._\n\n```css\n@import '@metamask/design-tokens/styles';\n```\n\n2. Use design token CSS variables in the code.\n\n```css\n/* In CSS/SCSS */\n.card {\n  --card-color-text: var(--color-text-default);\n  --card-color-background: var(--color-background-default);\n  --card-color-border: var(--color-border-muted);\n\n  background-color: var(--card-color-background);\n  color: var(--card-color-text);\n  border: 1px solid var(--card-color-border);\n}\n```\n\n```js\n// They also work for inline styles in javascript\n\u003cdiv style={{ color: 'var(--color-error-default)' }}\u003eThis was is an error\u003c/div\u003e\n```\n\n### CSS-in-JS\n\n1. Use design tokens in code by importing from library:\n\n```js\nimport { lightTheme, darkTheme } from '@metamask/design-tokens';\n\n// Create provider that swaps theme (pseudo code)\n\u003cThemeProvider theme={theme === 'default' ? lightTheme : darkTheme} /\u003e;\n\nconst createStyles = (theme) =\u003e\n  StyleSheet.create({\n    modalContainer: {\n      backgroundColor: theme.colors.background.default,\n      borderColor: theme.colors.border.default,\n    },\n  });\n```\n\n### Usage\n\nFor a detailed list of design tokens visit the MetaMask design token [storybook](https://metamask.github.io/design-tokens)\n\n## Tooling\n\nTo prevent color tech debt and ensure themability, accessibility, and consistency of the MetaMask brand, we recommend using [@metamask/eslint-plugin-design-tokens](https://github.com/MetaMask/eslint-plugin-design-tokens). This ESLint plugin helps enforce the usage of design tokens in your codebase.\n\nYou'll first need to install [ESLint](https://eslint.org):\n\n```shell\n$ npm install --save-dev eslint\n# or\n$ yarn add --dev eslint\n```\n\nNext, install `@metamask/eslint-plugin-design-tokens`:\n\n```shell\n$ npm install --save-dev @metamask/eslint-plugin-design-tokens\n# or\n$ yarn add --dev @metamask/eslint-plugin-design-tokens\n```\n\n### Configuration\n\nAdd `eslint-plugin-design-tokens` to your ESLint configuration:\n\n```json\n{\n  \"plugins\": [\"@metamask/design-tokens\"],\n  \"rules\": {\n    \"@metamask/design-tokens/color-no-hex\": \"warn\"\n  }\n}\n```\n\nThis 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](https://github.com/MetaMask/eslint-plugin-design-tokens?tab=readme-ov-file#supported-rules)\n\n## Contributing\n\nFollow these steps to below to get the library up and running locally.\n\n### Setup\n\n- Install [Node.js](https://nodejs.org) version 16\n  - If you are using [nvm](https://github.com/creationix/nvm#installation) (recommended) running `nvm use` will automatically choose the right node version for you.\n- Install [Yarn v1](https://yarnpkg.com/en/docs/install)\n- Run `yarn setup` to install dependencies and run any required post-install scripts\n  - **Warning:** Do not use the `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.\n\n### Documentation\n\nWe use storybook for documentation. To get storybook up and running use:\n\n```\nyarn storybook\n```\n\n### Tokens Studio for Figma (formerly known as Figma Tokens)\n\nThe primary data for the generation of tokens is based on the json generated from a figma plugin called [Tokens Studio for Figma (formerly known as Figma Tokens)](https://github.com/six7/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.\n\n### Testing and Linting\n\nRun `yarn test` to run the tests once. To run tests on file changes, run `yarn test:watch`.\n\nRun `yarn lint` to run the linter, or run `yarn lint:fix` to run the linter and fix any automatically fixable issues.\n\n### Release \u0026 Publishing\n\nThe project follows the same release process as the other libraries in the MetaMask organization. The GitHub Actions [`action-create-release-pr`](https://github.com/MetaMask/action-create-release-pr) and [`action-publish-release`](https://github.com/MetaMask/action-publish-release) are used to automate the release process; see those repositories for more information about how they work.\n\n1. Choose a release version.\n\n   - The release version should be chosen according to SemVer. Analyze the changes to see whether they include any breaking changes, new features, or deprecations, then choose the appropriate SemVer version. See [the SemVer specification](https://semver.org/) for more information.\n\n2. 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).\n\n   - The major version branch should be set to the most recent release with that major version. For example, when backporting a `v1.0.2` release, you'd want to ensure there was a `1.x` branch that was set to the `v1.0.1` tag.\n\n3. Trigger the [`workflow_dispatch`](https://docs.github.com/en/actions/reference/events-that-trigger-workflows#workflow_dispatch) event [manually](https://docs.github.com/en/actions/managing-workflow-runs/manually-running-a-workflow) for the `Create Release Pull Request` action to create the release PR.\n\n   - For a backport release, the base branch should be the major version branch that you ensured existed in step 2. For a normal release, the base branch should be the main branch for that repository (which should be the default value).\n   - This should trigger the [`action-create-release-pr`](https://github.com/MetaMask/action-create-release-pr) workflow to create the release PR.\n\n4. Update the changelog to move each change entry into the appropriate change category ([See here](https://keepachangelog.com/en/1.0.0/#types) for the full list of change categories, and the correct ordering), and edit them to be more easily understood by users of the package.\n\n   - Generally any changes that don't affect consumers of the package (e.g. lockfile changes or development environment changes) are omitted. Exceptions may be made for changes that might be of interest despite not having an effect upon the published package (e.g. major test improvements, security improvements, improved documentation, etc.).\n   - Try to explain each change in terms that users of the package would understand (e.g. avoid referencing internal variables/concepts).\n   - Consolidate related changes into one change entry if it makes it easier to explain.\n   - Run `yarn auto-changelog validate --rc` to check that the changelog is correctly formatted.\n\n5. Review and QA the release.\n\n   - If changes are made to the base branch, the release branch will need to be updated with these changes and review/QA will need to restart again. As such, it's probably best to avoid merging other PRs into the base branch while review is underway.\n\n6. Squash \u0026 Merge the release.\n\n   - This should trigger the [`action-publish-release`](https://github.com/MetaMask/action-publish-release) workflow to tag the final release commit and publish the release on GitHub.\n\n7. Publish the release on npm.\n\n   - Wait for the `publish-release` GitHub Action workflow to finish. This should trigger a second job (`publish-npm`), which will wait for a run approval by the [`npm publishers`](https://github.com/orgs/MetaMask/teams/npm-publishers) team.\n   - Approve the `publish-npm` job (or ask somebody on the npm publishers team to approve it for you).\n   - Once the `publish-npm` job has finished, check npm to verify that it has been published.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetamask%2Fdesign-tokens","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmetamask%2Fdesign-tokens","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetamask%2Fdesign-tokens/lists"}