Create Initial Tailwind Preset Package with colors (#41)

## **Description** This PR introduces the logic for the `@metamask/design-system-tailwind-preset` to the MetaMask Design System monorepo. This package provides a Tailwind CSS preset that encapsulates MetaMask's design tokens and styling conventions for color making it easier for developers to create consistent UIs across MetaMask Tailwind projects. Subsequent PRs will add shadow, typography, space, etc **NOTE:** This PR does not contain tests. Tests are in a separate PR, as they need to check against the design tokens stylesheet and are quite intensive, deserving their own PR and review: #51 ## **Related issues** Fixes: #34 ## **Manual testing steps** 1. Pull this branch. 2. Navigate to the `design-system-tailwind-preset` package: `cd package/design-system-tailwind-preset`. 3. Run `yarn build`. 4. Ensure you're using `yarn version 1.22.22`: `yarn set version 1.22.22`. 5. Run `yarn link`. 6. Navigate to the `metamask-portfolio` repo. 7. Pull this branch: [feat/design-system-tailwind-preset](https://github.com/consensys-vertical-apps/metamask-portfolio/tree/feat/design-system-tailwind-preset). 8. Run `yarn link "@metamask/design-system-tailwind-preset"`. 9. Run `yarn && yarn start`. 10. Verify that the MetaMask design tokens are available as Tailwind classes. ## **Screenshots/Recordings** The recording shows a locally linked `@metamask/design-system-tailwind-preset` package inside the `metamask-portfolio`. The `tailwind.config.js` has been updated, and the design token-generated Tailwind class names have been removed in favor of the preset package. The preset package is now responsible for generating all of the design token-aligned Tailwind class names for color. https://github.com/user-attachments/assets/f13350cb-e64c-44d1-b7d5-020cff07b011 ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) - [x] I've completed the PR template to the best of my ability - [ ] I've included tests if applicable - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I've applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.
MetaMask · Oct 17, 2024 · ac1a779 · ac1a779
1 parent e666367
commit ac1a779
Show file tree

Hide file tree

Showing 7 changed files with 174 additions and 23 deletions.
diff --git a/packages/design-system-tailwind-preset/README.md b/packages/design-system-tailwind-preset/README.md
@@ -1,6 +1,6 @@
 # `@metamask/design-system-tailwind-preset`
 
-Design system tailwind css preset
+Design System Tailwind CSS preset for MetaMask projects
 
 ## Installation
 
@@ -10,6 +10,54 @@ or
 
 `npm install @metamask/design-system-tailwind-preset`
 
+## Usage
+
+To use the MetaMask Design System Tailwind CSS preset in your project, follow these steps:
+
+1. Install the package as described in the Installation section above.
+
+2. In your `tailwind.config.js` file, import and use the preset:
+
+```javascript
+module.exports = {
+  presets: [require('@metamask/design-system-tailwind-preset')],
+  // ...
+};
+```
+
+```html
+<div class="bg-background-default text-text-default">
+  <h1 class="font-s-heading-lg sm:font-l-heading-lg">Welcome to MetaMask</h1>
+  <p class="font-s-body-md sm:font-l-body">
+    Enjoy our consistent design across projects!
+  </p>
+</div>
+```
+
+## Customization
+
+You can override or extend the preset's configurations in your `tailwind.config.js` file:
+
+```javascript
+module.exports = {
+  presets: [require('@metamask/design-system-tailwind-preset')],
+  theme: {
+    extend: {
+      // Your custom extensions...
+    },
+  },
+  // Other Tailwind configurations...
+};
+```
+
+## Documentation
+
+For more information on how to use Tailwind CSS and configure your project, refer to the official Tailwind CSS documentation:
+
+- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
+- [Customizing Your Tailwind Configuration](https://tailwindcss.com/docs/configuration)
+- [Presets in Tailwind CSS](https://tailwindcss.com/docs/presets)
+
 ## Contributing
 
 This package is part of a monorepo. Instructions for contributing can be found in the [monorepo README](https://github.com/MetaMask/metamask-design-system#readme).
diff --git a/packages/design-system-tailwind-preset/package.json b/packages/design-system-tailwind-preset/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@metamask/design-system-tailwind-preset",
   "version": "0.0.0",
-  "description": "Design system tailwind css preset",
+  "description": "Design System Tailwind CSS preset for MetaMask projects",
   "keywords": [
     "MetaMask",
     "Ethereum"
@@ -51,11 +51,15 @@
     "@types/jest": "^27.4.1",
     "deepmerge": "^4.2.2",
     "jest": "^27.5.1",
+    "tailwindcss": "^3.4.13",
     "ts-jest": "^27.1.4",
     "typedoc": "^0.24.8",
     "typedoc-plugin-missing-exports": "^2.0.0",
     "typescript": "~5.2.2"
   },
+  "peerDependencies": {
+    "tailwindcss": "^3.0.0"
+  },
   "engines": {
     "node": "^18.18 || >=20"
   },

diff --git a/packages/design-system-tailwind-preset/src/colors.test.ts b/packages/design-system-tailwind-preset/src/colors.test.ts
@@ -0,0 +1,8 @@
+import { colors } from './colors';
+
+describe('Colors', () => {
+  // TODO: Implement tests for colors https://github.com/MetaMask/metamask-design-system/issues/48
+  it('should have a dummy test', () => {
+    expect(colors).toBeDefined();
+  });
+});
diff --git a/packages/design-system-tailwind-preset/src/colors.ts b/packages/design-system-tailwind-preset/src/colors.ts
@@ -0,0 +1,66 @@
+export const colors = {
+  background: {
+    default: 'var(--color-background-default)',
+    'default-hover': 'var(--color-background-default-hover)',
+    'default-pressed': 'var(--color-background-default-pressed)',
+    alternative: 'var(--color-background-alternative)',
+    'alternative-hover': 'var(--color-background-alternative-hover)',
+    'alternative-pressed': 'var(--color-background-alternative-pressed)',
+    hover: 'var(--color-background-hover)',
+    pressed: 'var(--color-background-pressed)',
+  },
+  text: {
+    default: 'var(--color-text-default)',
+    alternative: 'var(--color-text-alternative)',
+    muted: 'var(--color-text-muted)',
+  },
+  border: {
+    default: 'var(--color-border-default)',
+    muted: 'var(--color-border-muted)',
+  },
+  icon: {
+    default: 'var(--color-icon-default)',
+    alternative: 'var(--color-icon-alternative)',
+    muted: 'var(--color-icon-muted)',
+  },
+  overlay: {
+    default: 'var(--color-overlay-default)',
+    alternative: 'var(--color-overlay-alternative)',
+    inverse: 'var(--color-overlay-inverse)',
+  },
+  primary: {
+    default: 'var(--color-primary-default)',
+    'default-hover': 'var(--color-primary-default-hover)',
+    'default-pressed': 'var(--color-primary-default-pressed)',
+    alternative: 'var(--color-primary-alternative)',
+    muted: 'var(--color-primary-muted)',
+    inverse: 'var(--color-primary-inverse)',
+  },
+  error: {
+    default: 'var(--color-error-default)',
+    'default-hover': 'var(--color-error-default-hover)',
+    'default-pressed': 'var(--color-error-default-pressed)',
+    alternative: 'var(--color-error-alternative)',
+    muted: 'var(--color-error-muted)',
+    inverse: 'var(--color-error-inverse)',
+  },
+  warning: {
+    default: 'var(--color-warning-default)',
+    'default-hover': 'var(--color-warning-default-hover)',
+    'default-pressed': 'var(--color-warning-default-pressed)',
+    muted: 'var(--color-warning-muted)',
+    inverse: 'var(--color-warning-inverse)',
+  },
+  success: {
+    default: 'var(--color-success-default)',
+    'default-hover': 'var(--color-success-default-hover)',
+    'default-pressed': 'var(--color-success-default-pressed)',
+    muted: 'var(--color-success-muted)',
+    inverse: 'var(--color-success-inverse)',
+  },
+  info: {
+    default: 'var(--color-info-default)',
+    muted: 'var(--color-info-muted)',
+    inverse: 'var(--color-info-inverse)',
+  },
+};
diff --git a/packages/design-system-tailwind-preset/src/index.test.ts b/packages/design-system-tailwind-preset/src/index.test.ts
@@ -1,9 +1,8 @@
-import greeter from '.';
+import tailwindConfig from '.';
 
-describe('Test', () => {
-  it('greets', () => {
-    const name = 'Huey';
-    const result = greeter(name);
-    expect(result).toBe('Hello, Huey!');
+describe('Tailwind Preset', () => {
+  // TODO: Implement tests for Tailwind preset https://github.com/MetaMask/metamask-design-system/issues/48
+  it('should have a dummy test', () => {
+    expect(tailwindConfig).toBeDefined();
   });
 });
diff --git a/packages/design-system-tailwind-preset/src/index.ts b/packages/design-system-tailwind-preset/src/index.ts
@@ -1,9 +1,32 @@
-/**
- * Example function that returns a greeting for the given name.
- *
- * @param name - The name to greet.
- * @returns The greeting.
- */
-export default function greeter(name: string): string {
-  return `Hello, ${name}!`;
-}
+import type { Config } from 'tailwindcss';
+
+import { colors } from './colors';
+
+const tailwindConfig: Config = {
+  content: [],
+  theme: {
+    extend: {
+      colors: {
+        ...colors,
+      },
+      // Reduces redundancy by enabling shorter Tailwind class names
+      textColor: ({ theme }) => ({
+        ...theme('colors'), // Incorporate existing color utilities like text-primary-default
+        ...colors.text, // e.g. text-default instead of text-text-default
+      }),
+      backgroundColor: ({ theme }) => ({
+        ...theme('colors'), // Incorporate existing color utilities like bg-primary-default
+        ...colors.background, // e.g. bg-default instead of bg-background-default
+      }),
+      borderColor: ({ theme }) => ({
+        ...theme('colors'), // Incorporate existing color utilities like border-primary-default
+        ...colors.border, // e.g. border-default instead of border-border-default
+      }),
+    },
+  },
+  plugins: [],
+};
+
+export default tailwindConfig;
+
+module.exports = tailwindConfig;
diff --git a/yarn.lock b/yarn.lock
@@ -56,25 +56,25 @@ __metadata:
   linkType: hard
 
 "@babel/core@npm:^7.1.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.18.9, @babel/core@npm:^7.23.5, @babel/core@npm:^7.7.2, @babel/core@npm:^7.8.0":
-  version: 7.25.8
-  resolution: "@babel/core@npm:7.25.8"
+  version: 7.25.7
+  resolution: "@babel/core@npm:7.25.7"
   dependencies:
     "@ampproject/remapping": "npm:^2.2.0"
     "@babel/code-frame": "npm:^7.25.7"
     "@babel/generator": "npm:^7.25.7"
     "@babel/helper-compilation-targets": "npm:^7.25.7"
     "@babel/helper-module-transforms": "npm:^7.25.7"
     "@babel/helpers": "npm:^7.25.7"
-    "@babel/parser": "npm:^7.25.8"
+    "@babel/parser": "npm:^7.25.7"
     "@babel/template": "npm:^7.25.7"
     "@babel/traverse": "npm:^7.25.7"
-    "@babel/types": "npm:^7.25.8"
+    "@babel/types": "npm:^7.25.7"
     convert-source-map: "npm:^2.0.0"
     debug: "npm:^4.1.0"
     gensync: "npm:^1.0.0-beta.2"
     json5: "npm:^2.2.3"
     semver: "npm:^6.3.1"
-  checksum: 10/31eb1a8ca1a3cc0026060720eb290e68205d95c5c00fbd831e69ddc0810f5920b8eb2749db1889ac0a0312b6eddbf321d18a996a88858f3b75c9582bef9ec1e4
+  checksum: 10/f5fb7fb1e3ce357485cb33fe7984051a2d416472370b33144ae809df86a4663192b58cf0d828d40674d30f485790f3dd5aaf72eb659487673a4dc4be47cb3575
   languageName: node
   linkType: hard
 
@@ -255,7 +255,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.25.3, @babel/parser@npm:^7.25.7, @babel/parser@npm:^7.25.8":
+"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.25.3, @babel/parser@npm:^7.25.7":
   version: 7.25.8
   resolution: "@babel/parser@npm:7.25.8"
   dependencies:
@@ -1471,10 +1471,13 @@ __metadata:
     "@types/jest": "npm:^27.4.1"
     deepmerge: "npm:^4.2.2"
     jest: "npm:^27.5.1"
+    tailwindcss: "npm:^3.4.13"
     ts-jest: "npm:^27.1.4"
     typedoc: "npm:^0.24.8"
     typedoc-plugin-missing-exports: "npm:^2.0.0"
     typescript: "npm:~5.2.2"
+  peerDependencies:
+    tailwindcss: ^3.0.0
   languageName: unknown
   linkType: soft