feat: move design tokens in to packages directory (#128)

## **Description**

This pull request moves the design tokens from the `merged-packages/`
directory to the `packages/` directory in the design system monorepo
following steps 1-5 of [Phase C: Integration into the metamask module
template's packages/
directory](https://github.com/MetaMask/metamask-design-system/blob/main/docs/package-migration-process-guide.md#pr13-phase-c-integration-into-the-metamask-module-templates-packages-directory).

## **Steps Performed**
- Moved design-tokens directory from `merged-packages/` to `packages/`.
- Ran `yarn install` in the root directory to update dependencies.
- Verified tests in the design-tokens package by executing `yarn
workspace @metamask/design-tokens test`.
- Updated `tsconfig.json` and `tsconfig.build.json` in the root
directory with reference paths to design-tokens to avoid build failures
during release workflows.
- Updated the design-tokens version across downstream packages and root
to workspace version
- Applied `yarn constraints --fix` to the design-tokens `package.json`.
- Included the `changelog:validate` build script in the `package.json`.
- For complex type issues, annotated with `// TODO: Replace any types
with proper types
https://github.com/MetaMask/metamask-design-system/issues/127`
- Documented changes in the migration target's downstream packages under
the `## [Unreleased]` heading in their respective CHANGELOG files.

## **Related Issues**
- Fixes: #126

## **Manual Testing Steps**
1. Run `yarn install`, `yarn test` and `yarn build` in the root
directory to confirm the migration does not break the build.
2. Verify downstream dependencies reference the correct paths and
versions.
3. Check CHANGELOG updates for consistency.
4. Check storybook works for web and ios `yarn storybook` `yarn
storybook:ios`

## **Screenshots/Screen recordings**

### After

Storybook works for both web and ios



https://github.com/user-attachments/assets/8424cb16-8f93-4080-97a6-546220d389ae



https://github.com/user-attachments/assets/46426d49-7d13-41cc-948b-7336618635b4

## **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.

apps/storybook-react-native/package.json

@@ -15,7 +15,7 @@
   "dependencies": {
     "@metamask/design-system-react-native": "workspace:^",
     "@metamask/design-system-twrnc-preset": "workspace:^",
-    "@metamask/design-tokens": "^4.1.0",
+    "@metamask/design-tokens": "workspace:^",
     "expo": "~49.0.23",
     "expo-status-bar": "~1.6.0",
     "expo-system-ui": "~2.4.0",

apps/storybook-react/.storybook/main.ts

@@ -15,6 +15,7 @@ const config: StorybookConfig = {
     '../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)',
   ],
 
   addons: [
@@ -36,7 +37,7 @@ const config: StorybookConfig = {
         ...config.resolve.alias,
         '@metamask/design-tokens': path.resolve(
           __dirname,
-          '../../../node_modules/@metamask/design-tokens',
+          '../../../packages/design-tokens',
         ),
       };
     }

apps/storybook-react/.storybook/preview.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@metamask/design-tokens/dist/styles.css';
+import '@metamask/design-tokens/src/css/index.css';
 import '../tailwind.css';
 
 import { Preview } from '@storybook/react';

apps/storybook-react/package.json

@@ -11,7 +11,7 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^1.9.0",
     "@metamask/design-system-tailwind-preset": "workspace:^",
-    "@metamask/design-tokens": "^4.1.0",
+    "@metamask/design-tokens": "workspace:^",
     "@storybook/addon-a11y": "^8.3.5",
     "@storybook/addon-essentials": "^8.3.5",
     "@storybook/addon-interactions": "^8.3.5",

packages/design-system-tailwind-preset/scripts/testUtils.ts

@@ -15,31 +15,38 @@ import postcss from 'postcss';
 export const getDesignTokenVariables = async (
   prefixes: string[] = ['--'],
 ): Promise<Set<string>> => {
-  // Resolve the absolute path to the styles.css file in the design-tokens package
-  const stylesheetPath = path.resolve(
+  const designTokensPath = path.resolve(
     __dirname,
-    '../../../node_modules/@metamask/design-tokens/dist/styles.css',
+    '../../../packages/design-tokens/src/css',
   );
 
-  // Asynchronously read the content of the stylesheet
-  const cssContent = await fs.promises.readFile(stylesheetPath, 'utf-8');
+  // List of CSS files to process
+  const cssFiles = [
+    'brand-colors.css',
+    'light-theme-colors.css',
+    'dark-theme-colors.css',
+    'typography.css',
+    'shadow.css',
+  ];
 
-  // Parse the CSS content using PostCSS to create an Abstract Syntax Tree (AST)
-  const parsedRoot = postcss.parse(cssContent);
-
-  // Initialize a Set to store the filtered CSS variable names
+  // Initialize a Set to store all variables
   const variables = new Set<string>();
 
-  // Traverse all CSS declarations in the AST
-  parsedRoot.walkDecls((decl) => {
-    const { prop } = decl;
-    // Check if the property name starts with any of the specified prefixes
-    if (prefixes.some((prefix) => prop.startsWith(prefix))) {
-      variables.add(prop); // Add the matching variable to the Set
-    }
-  });
+  // Process each CSS file
+  for (const file of cssFiles) {
+    const cssPath = path.join(designTokensPath, file);
+    const cssContent = await fs.promises.readFile(cssPath, 'utf-8');
+    const parsedRoot = postcss.parse(cssContent);
+
+    parsedRoot.walkDecls((decl) => {
+      const { prop } = decl;
+      if (prefixes.some((prefix) => prop.startsWith(prefix))) {
+        variables.add(prop);
+      }
+    });
+  }
 
-  return variables; // Return the Set of filtered CSS variable names
+  return variables;
 };
 
 /**