feat: move design tokens in to packages directory#128
Merged
Conversation
064834b to
151856d
Compare
| "@metamask/design-system-react-native": "workspace:^", | ||
| "@metamask/design-system-twrnc-preset": "workspace:^", | ||
| "@metamask/design-tokens": "^4.1.0", | ||
| "@metamask/design-tokens": "workspace:^", |
Contributor
Author
There was a problem hiding this comment.
Updating to workspace version of design tokens by running yarn constraints --fix
Storybook react native still working
after.mov
| '../stories/**/*.mdx', | ||
| '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)', | ||
| '../../../packages/design-system-react/src/**/*.stories.@(js|jsx|ts|tsx)', | ||
| '../../../packages/design-tokens/stories/**/*.stories.@(js|jsx|ts|tsx)', |
Contributor
Author
There was a problem hiding this comment.
Including design token stories. I’ve created an issue to improve the display and categorization of stories in Storybook, as well as Storybook React overall. These updates will be included in a separate PR shortly after this one is merged: #129
| '@metamask/design-tokens': path.resolve( | ||
| __dirname, | ||
| '../../../node_modules/@metamask/design-tokens', | ||
| '../../../packages/design-tokens', |
Contributor
Author
There was a problem hiding this comment.
Updating reference, this can possibly be removed. Will update in #129
| @@ -1,5 +1,5 @@ | |||
| import React from 'react'; | |||
| import '@metamask/design-tokens/dist/styles.css'; | |||
| import '@metamask/design-tokens/src/css/index.css'; | |||
Contributor
Author
There was a problem hiding this comment.
Updating to workspace version
| "@chromatic-com/storybook": "^1.9.0", | ||
| "@metamask/design-system-tailwind-preset": "workspace:^", | ||
| "@metamask/design-tokens": "^4.1.0", | ||
| "@metamask/design-tokens": "workspace:^", |
Contributor
Author
There was a problem hiding this comment.
Updating to workspace version of design tokens by running yarn constraints --fix
Contributor
Author
There was a problem hiding this comment.
Aligning LICENSE with packages so it passes yarn constraints. I've created an issue to update our licenses across the monorepo to align with legal here #130
Comment on lines
+18
to
+20
| coveragePathIgnorePatterns: [ | ||
| 'packages/design-tokens/src/js/colors/colors.ts', | ||
| ], |
Contributor
Author
There was a problem hiding this comment.
Revert this
| @@ -15,31 +15,38 @@ import postcss from 'postcss'; | |||
| export const getDesignTokenVariables = async ( | |||
Contributor
Author
There was a problem hiding this comment.
Updating this test util to use the workspace version of the design tokens stylesheet. We can also refactor this now that we can access the css locally
Comment on lines
+10
to
+13
| ### Added | ||
|
|
||
| - Migrate `@metamask/design-tokens` into the design system monorepo ([128](https://github.com/MetaMask/metamask-design-system/pull/128)) | ||
|
|
Contributor
Author
There was a problem hiding this comment.
| @@ -1,6 +1,6 @@ | |||
| MIT License | |||
Contributor
Author
There was a problem hiding this comment.
Aligning LICENSE with packages so it passes yarn constraints. I've created an issue to update our licenses across the monorepo to align with legal here #130
Comment on lines
-29
to
-31
| // In jest.config.packages.js we are ignoring all index.ts files e.g. coveragePathIgnorePatterns: ['./src/index.ts'], | ||
| // We want to include index.ts in coverage so we override the coveragePathIgnorePatterns | ||
| coveragePathIgnorePatterns: [], |
Contributor
Author
There was a problem hiding this comment.
This was for design-system-tailwind-preset updated now to ignore index files
Before
After
| @@ -6,15 +6,15 @@ | |||
| "MetaMask", | |||
Contributor
Author
There was a problem hiding this comment.
Yarn constraint fixes by running yarn constraints --fix
| @@ -0,0 +1,32 @@ | |||
| import { lightTheme, darkTheme } from '../themes'; | |||
Contributor
Author
There was a problem hiding this comment.
Improving test coverage for this file was failing before
| @@ -1,8 +1,7 @@ | |||
| /* eslint-disable @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports */ | |||
| import * as designTokens from '../../figma/tokens.json'; | |||
Contributor
Author
There was a problem hiding this comment.
Lint fix that disallows require
| @@ -1,8 +1,7 @@ | |||
| /* eslint-disable @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports */ | |||
| import * as designTokens from '../../figma/tokens.json'; | |||
Contributor
Author
There was a problem hiding this comment.
Lint fix that disallows require
| @@ -1,8 +1,7 @@ | |||
| /* eslint-disable @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports */ | |||
| import * as designTokens from '../../figma/tokens.json'; | |||
Contributor
Author
There was a problem hiding this comment.
Lint fix that disallows require
| @@ -1,8 +1,7 @@ | |||
| /* eslint-disable @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports */ | |||
| import * as designTokens from '../../figma/tokens.json'; | |||
Contributor
Author
There was a problem hiding this comment.
Lint fix that disallows require
| @@ -1,8 +1,7 @@ | |||
| /* eslint-disable @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports */ | |||
| import * as designTokens from '../../figma/tokens.json'; | |||
Contributor
Author
There was a problem hiding this comment.
Lint fix that disallows require
| /* eslint-disable @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports */ | ||
| /* eslint-disable @typescript-eslint/no-explicit-any */ | ||
| // TODO: Replace any types with proper types https://github.com/MetaMask/metamask-design-system/issues/127 | ||
| import * as designTokens from '../../figma/tokens.json'; |
Contributor
Author
There was a problem hiding this comment.
Lint fix that disallows require
Comment on lines
+99
to
+111
| if (workspace.ident !== '@metamask/design-tokens') { | ||
| expectWorkspaceField( | ||
| workspace, | ||
| 'scripts.build', | ||
| 'ts-bridge --project tsconfig.build.json --verbose --clean --no-references', | ||
| ); | ||
| } else if (workspace.ident === '@metamask/design-tokens') { | ||
| expectWorkspaceField( | ||
| workspace, | ||
| 'scripts.build', | ||
| 'ts-bridge --project tsconfig.build.json --verbose --clean --no-references && yarn build:css', | ||
| ); | ||
| } |
Contributor
Author
There was a problem hiding this comment.
Updating yarn constraints so the build of the css file doesn't get overridden in the design tokens package
7 tasks
georgewrmarshall
added a commit
that referenced
this pull request
Nov 19, 2024
## **Description** As part of the design tokens migration, this pull request removes the unused `fonts` folder and files from the `merged-packages/design-tokens` directory. These fonts were previously used for Storybook, but they are now duplicated and unnecessary because the `storybook-react` application (`apps/storybook-react/fonts`) provides the required fonts. ## **Related** - #128 ## **Manual Testing Steps** 1. Ensure `fonts/` folder and files have been removed from `merged-packages/design-tokens` 2. Ensure there are no references to `merge-packages/design-tokens/docs/fonts` folder or files in the codebase ## **Screenshots** Ensuring `merge-packages/design-tokens/docs/fonts` folder is not referenced in the codebase  ## **Pre-merge Author Checklist** - [x] Followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs). - [x] Ensured all PR status checks passed at least once. - [x] Updated relevant CHANGELOG files. - [x] Applied appropriate labels and linked issues. ## **Pre-merge Reviewer Checklist** - [ ] Verified manual tests for the build and migration. - [ ] Reviewed CHANGELOG entries and downstream dependency updates. - [ ] Checked for unresolved TODOs in the codebase.
…ld script that builds css
5e739fd to
3402845
Compare
Comment on lines
+59
to
+60
| "postcss": "^8.4.47", | ||
| "react": "^18.2.0", |
Contributor
Author
There was a problem hiding this comment.
postcss is used for getCSSVariablesFromStylesheet in packages/design-tokens/stories/test-utils/getCSSVariablesFromStylesheet.ts and react for stories
brianacnguyen
approved these changes
Nov 21, 2024
georgewrmarshall
added a commit
that referenced
this pull request
Dec 11, 2024
# Release 1.0.0 ## Description This PR prepares the release of version 1.0.0 of the design system packages. ## Changes - feat: color updates to the design tokens package ([#230](#230)) - `@metamask/design-tokens` package migrated from standalone repository into the design system monorepo ([128](#128)) ## Release Process Checklist - [x] Branch named `release/1.0.0` created - [x] Changelogs updated and validated - [x] Dependencies updated to latest versions (`yarn constraints --fix && yarn && yarn dedupe`) - [x] PR review and testing completed - [x] Ready for "Squash & Merge" with commit message "Release 1.0.0" ## Post-Merge Steps 1. The `publish-release` GitHub Action will tag the release 2. NPM publishing requires approval from the `npm-publishers` team 3. Verify package publication on [NPM](https://npms.io/search?q=scope%3Ametamask)
georgewrmarshall
added a commit
that referenced
this pull request
Feb 25, 2026
Address PR review feedback from georgewrmarshall: - Add ADR links in Purpose section of component-architecture.md - Update all ADR references from PR links to main branch document links - Ensures documentation remains accessible even after PRs are merged Changes: - component-architecture.md: Added clickable ADR links in Purpose section (lines 9-10) - Updated ADR-0003 reference from PR #127 to document link (line 58) - Updated ADR-0004 reference from PR #128 to document link (line 166) - Updated References section ADR links (lines 398-399) - component-creation.md: Updated ADR links in MetaMask Standards section - component-migration.md: Updated ADR links in Architecture Decision Records section - component-enum-union-migration.md: Updated ADR links in Architecture Decision Records section All ADR references now point to: - https://github.com/MetaMask/decisions/blob/main/decisions/design-system/0003-enum-to-string-union-migration.md - https://github.com/MetaMask/decisions/blob/main/decisions/design-system/0004-centralized-types-architecture.md Related: #911 (review comments)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This pull request moves the design tokens from the
merged-packages/directory to thepackages/directory in the design system monorepo following steps 1-5 of Phase C: Integration into the metamask module template's packages/ directory.Steps Performed
merged-packages/topackages/.yarn installin the root directory to update dependencies.yarn workspace @metamask/design-tokens test.tsconfig.jsonandtsconfig.build.jsonin the root directory with reference paths to design-tokens to avoid build failures during release workflows.yarn constraints --fixto the design-tokenspackage.json.changelog:validatebuild script in thepackage.json.// TODO: Replace any types with proper types https://github.com/MetaMask/metamask-design-system/issues/127## [Unreleased]heading in their respective CHANGELOG files.Related Issues
Manual Testing Steps
yarn install,yarn testandyarn buildin the root directory to confirm the migration does not break the build.yarn storybookyarn storybook:iosScreenshots/Screen recordings
After
Storybook works for both web and ios
after.mov
after.storybook720.mov
Pre-merge Author Checklist
Pre-merge Reviewer Checklist