Tailwind v4

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import '../../../packages/design-tokens/dist/styles.css';
 import '../tailwind.css';
 
 import { Preview } from '@storybook/react';
@@ -38,7 +37,7 @@ function withColorScheme(Story: StoryFn, context: StoryContext) {
         {...props}
         style={{
           padding: '1rem',
-          backgroundColor: 'var(--color-background-default)',
+          backgroundColor: 'var(--mm-color-background-default)',
         }}
       >
         {children}

apps/storybook-react/package.json

@@ -28,15 +28,13 @@
     "@types/react-dom": "^18.2.0",
     "@vitejs/plugin-react": "^4.5.0",
     "@vitest/coverage-v8": "^3.2.4",
-    "autoprefixer": "^10.0.0",
     "axe-playwright": "^2.1.0",
     "playwright": "^1.52.0",
     "postcss": "^8.4.47",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "^9.0.17",
-    "tailwindcss": "^3.0.0",
     "typescript": "~5.2.2",
     "vite": "^6.3.6",
     "vitest": "^3.2.0"
@@ -51,6 +49,8 @@
     }
   },
   "dependencies": {
+    "@tailwindcss/postcss": "^4.0.0",
+    "@tailwindcss/vite": "^4.0.0",
     "@vitest/browser": "^3.2.0"
   }
 }

apps/storybook-react/postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };

apps/storybook-react/tailwind.css

@@ -1,6 +1,9 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@import '../../packages/design-system-tailwind-preset/src/theme.css';
+
+/* Scan the other packages with stories for tailwind class names */
+@source "../../packages/design-system-react";
+@source "../../packages/design-tokens";
 
 /* Geist */
 @font-face {

apps/storybook-react/vite.config.ts

@@ -1,9 +1,13 @@
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
+import tailwindcss from '@tailwindcss/vite';
 import path from 'path';
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    tailwindcss()
+  ],
   resolve: {
     alias: {
       '@metamask/design-tokens': path.resolve(

packages/design-system-react/src/components/AvatarBase/AvatarBase.test.tsx

@@ -194,7 +194,7 @@ describe('AvatarBase', () => {
 
     // Test XS size
     let fallbackText = screen.getByTestId('fallback-text');
-    expect(fallbackText).toHaveClass('text-s-body-sm');
+    expect(fallbackText).toHaveClass('text-body-sm');
 
     // Test MD size
     rerender(
@@ -205,7 +205,7 @@ describe('AvatarBase', () => {
       />,
     );
     fallbackText = screen.getByTestId('fallback-text');
-    expect(fallbackText).toHaveClass('text-s-body-sm');
+    expect(fallbackText).toHaveClass('text-body-sm');
 
     // Test XL size
     rerender(
@@ -216,6 +216,6 @@ describe('AvatarBase', () => {
       />,
     );
     fallbackText = screen.getByTestId('fallback-text');
-    expect(fallbackText).toHaveClass('text-s-body-sm');
+    expect(fallbackText).toHaveClass('text-body-sm');
   });
 });

packages/design-system-react/src/components/AvatarGroup/AvatarGroup.test.tsx

@@ -112,7 +112,7 @@ describe('AvatarGroup', () => {
       expect(screen.getByTestId('overflow')).toHaveStyle({ zIndex: 3 });
 
       const span = screen.getByText('+1');
-      expect(span).toHaveClass('text-s-body-md');
+      expect(span).toHaveClass('text-body-md');
       expect(span).toHaveClass(TextColor.PrimaryInverse.toLowerCase());
     });
 
@@ -321,7 +321,7 @@ describe('AvatarGroup', () => {
       expect(screen.getByTestId('overflow')).toHaveStyle({ zIndex: 3 });
 
       const span = screen.getByText('+2');
-      expect(span).toHaveClass('text-s-body-md');
+      expect(span).toHaveClass('text-body-md');
       expect(span).toHaveClass(TextColor.PrimaryInverse.toLowerCase());
     });
   });

packages/design-system-react/src/components/ButtonBase/ButtonBase.test.tsx

@@ -211,11 +211,9 @@ describe('ButtonBase', () => {
     expect(textElement.tagName).toBe('SPAN');
     expect(textElement).toHaveClass(
       'text-inherit',
-      'text-s-body-md',
-      'leading-s-body-md',
-      'tracking-s-body-md',
-      'md:text-l-body-md',
+      'text-body-md',
       'font-medium',
+      'font-default',
     );
 
     // Test custom text props
@@ -235,11 +233,8 @@ describe('ButtonBase', () => {
     const customChild = screen.getByTestId('custom-child');
     expect(customChild.parentElement).not.toHaveClass(
       'text-inherit',
-      'text-s-body-md',
-      'font-s-body-md',
-      'leading-s-body-md',
-      'tracking-s-body-md',
-      'md:text-l-body-md',
+      'text-body-md',
+      'font-medium',
     );
   });
 

packages/design-system-react/src/components/Text/Text.constants.ts

@@ -1,34 +1,20 @@
 import { TextVariant } from '../../types';
 
 export const CLASSMAP_TEXT_VARIANT_FONTSTYLE: Record<TextVariant, string> = {
-  [TextVariant.DisplayLg]:
-    'text-s-display-lg leading-s-display-lg tracking-s-display-lg md:text-l-display-lg md:leading-l-display-lg md:tracking-l-display-lg',
-  [TextVariant.DisplayMd]:
-    'text-s-display-md leading-s-display-md tracking-s-display-md md:text-l-display-md md:leading-l-display-md md:tracking-l-display-md',
-  [TextVariant.HeadingLg]:
-    'text-s-heading-lg leading-s-heading-lg tracking-s-heading-lg md:text-l-heading-lg md:leading-l-heading-lg md:tracking-l-heading-lg',
-  [TextVariant.HeadingMd]:
-    'text-s-heading-md leading-s-heading-md tracking-s-heading-md md:text-l-heading-md md:leading-l-heading-md md:tracking-l-heading-md',
-  [TextVariant.HeadingSm]:
-    'text-s-heading-sm leading-s-heading-sm tracking-s-heading-sm md:text-l-heading-sm md:leading-l-heading-sm md:tracking-l-heading-sm',
-  [TextVariant.BodyLg]:
-    'text-s-body-lg leading-s-body-lg tracking-s-body-lg md:text-l-body-lg md:leading-l-body-lg md:tracking-l-body-lg',
-  [TextVariant.BodyMd]:
-    'text-s-body-md leading-s-body-md tracking-s-body-md md:text-l-body-md md:leading-l-body-md md:tracking-l-body-md',
-  [TextVariant.BodySm]:
-    'text-s-body-sm leading-s-body-sm tracking-s-body-sm md:text-l-body-sm md:leading-l-body-sm md:tracking-l-body-sm',
-  [TextVariant.BodyXs]:
-    'text-s-body-xs leading-s-body-xs tracking-s-body-xs md:text-l-body-xs md:leading-l-body-xs md:tracking-l-body-xs',
-  [TextVariant.PageHeading]:
-    'text-s-page-heading leading-s-page-heading tracking-s-page-heading md:text-l-page-heading md:leading-l-page-heading md:tracking-l-page-heading',
-  [TextVariant.SectionHeading]:
-    'text-s-section-heading leading-s-section-heading tracking-s-section-heading md:text-l-section-heading md:leading-l-section-heading md:tracking-l-section-heading',
-  [TextVariant.ButtonLabelMd]:
-    'text-s-button-label-md leading-s-button-label-md tracking-s-button-label-md md:text-l-button-label-md md:leading-l-button-label-md md:tracking-l-button-label-md',
-  [TextVariant.ButtonLabelLg]:
-    'text-s-button-label-lg leading-s-button-label-lg tracking-s-button-label-lg md:text-l-button-label-lg md:leading-l-button-label-lg md:tracking-l-button-label-lg',
-  [TextVariant.AmountDisplayLg]:
-    'text-s-amount-display-lg leading-s-amount-display-lg tracking-s-amount-display-lg md:text-l-amount-display-lg md:leading-l-amount-display-lg md:tracking-l-amount-display-lg',
+  [TextVariant.DisplayLg]: 'text-display-lg',
+  [TextVariant.DisplayMd]: 'text-display-md',
+  [TextVariant.HeadingLg]: 'text-heading-lg',
+  [TextVariant.HeadingMd]: 'text-heading-md',
+  [TextVariant.HeadingSm]: 'text-heading-sm',
+  [TextVariant.BodyLg]: 'text-body-lg',
+  [TextVariant.BodyMd]: 'text-body-md',
+  [TextVariant.BodySm]: 'text-body-sm',
+  [TextVariant.BodyXs]: 'text-body-xs',
+  [TextVariant.PageHeading]: 'text-page-heading',
+  [TextVariant.SectionHeading]: 'text-section-heading',
+  [TextVariant.ButtonLabelMd]: 'text-button-label-md',
+  [TextVariant.ButtonLabelLg]: 'text-button-label-lg',
+  [TextVariant.AmountDisplayLg]: 'text-amount-display-lg',
 };
 
 export const CLASSMAP_TEXT_VARIANT_FONTWEIGHT: Record<TextVariant, string> = {

packages/design-system-react/src/components/Text/Text.test.tsx

@@ -200,10 +200,7 @@ describe('Text Component', () => {
     const { container } = render(<Text>Default Variant Text</Text>);
     expect(container.firstChild).toHaveClass(
       'text-default',
-      'text-s-body-md',
-      'leading-s-body-md',
-      'tracking-s-body-md',
-      'md:text-l-body-md',
+      'text-body-md',
       'font-regular',
       'font-default',
     );

packages/design-system-react/src/components/TextButton/TextButton.test.tsx

@@ -35,9 +35,7 @@ describe('TextButton', () => {
 
     const text = screen.getByText('Custom Text Variant');
     expect(text).toHaveClass(
-      'text-s-body-lg',
-      'leading-s-body-lg',
-      'tracking-s-body-lg',
+      'text-body-lg',
     );
   });
 

packages/design-system-react/src/utils/tw-merge.test.ts

@@ -20,19 +20,19 @@ describe('twMerge utility', () => {
   });
 
   describe('typography variant conflicts', () => {
-    it('should handle small variant overrides', () => {
-      const result = twMerge('text-s-body-md text-s-heading-lg');
-      expect(result).toBe('text-s-heading-lg');
+    it('should handle typography variant overrides', () => {
+      const result = twMerge('text-body-md text-heading-lg');
+      expect(result).toBe('text-heading-lg');
     });
 
-    it('should handle large variant overrides', () => {
-      const result = twMerge('text-l-body-md text-l-heading-lg');
-      expect(result).toBe('text-l-heading-lg');
+    it('should handle mixed typography variant overrides', () => {
+      const result = twMerge('text-display-lg text-body-sm');
+      expect(result).toBe('text-body-sm');
     });
 
-    it('should handle mixed size variant overrides', () => {
-      const result = twMerge('text-l-heading-lg text-s-body-md');
-      expect(result).toBe('text-s-body-md');
+    it('should handle page heading override', () => {
+      const result = twMerge('text-section-heading text-page-heading');
+      expect(result).toBe('text-page-heading');
     });
   });
 
@@ -50,57 +50,47 @@ describe('twMerge utility', () => {
 
   describe('complex class combinations', () => {
     it('should handle multiple property conflicts simultaneously', () => {
-      const result = twMerge('text-l-heading-lg font-bold text-alternative');
-      expect(result).toBe('text-l-heading-lg font-bold text-alternative');
+      const result = twMerge('text-heading-lg font-bold text-alternative');
+      expect(result).toBe('text-heading-lg font-bold text-alternative');
     });
 
     it('should preserve non-conflicting classes', () => {
       const result = twMerge('px-4 py-2 font-bold text-alternative');
       expect(result).toBe('px-4 py-2 font-bold text-alternative');
     });
+
+    it('should handle text color and typography together', () => {
+      const result = twMerge('text-default text-body-md font-medium');
+      expect(result).toBe('text-default text-body-md font-medium');
+    });
   });
 
-  describe('variant class validation', () => {
-    it('should handle all small variant classes', () => {
-      const smallVariants = [
-        'text-s-display-md',
-        'text-s-heading-lg',
-        'text-s-heading-md',
-        'text-s-heading-sm',
-        'text-s-body-lg',
-        'text-s-body-md',
-        'text-s-body-sm',
-        'text-s-body-xs',
-        'text-s-page-heading',
-        'text-s-section-heading',
-        'text-s-button-label-md',
-        'text-s-button-label-lg',
-        'text-s-amount-display-lg',
+  describe('responsive typography validation', () => {
+    it('should handle all typography variant classes', () => {
+      const typographyVariants = [
+        'text-display-lg',
+        'text-display-md',
+        'text-heading-lg',
+        'text-heading-md',
+        'text-heading-sm',
+        'text-body-lg',
+        'text-body-md',
+        'text-body-sm',
+        'text-body-xs',
+        'text-page-heading',
+        'text-section-heading',
+        'text-button-label-md',
+        'text-button-label-lg',
+        'text-amount-display-lg',
       ];
 
-      const result = twMerge(smallVariants.join(' '));
-      expect(result).toBe('text-s-amount-display-lg'); // Should keep last one
+      const result = twMerge(typographyVariants.join(' '));
+      expect(result).toBe('text-amount-display-lg'); // Should keep last one
     });
 
-    it('should handle all large variant classes', () => {
-      const largeVariants = [
-        'text-l-display-md',
-        'text-l-heading-lg',
-        'text-l-heading-md',
-        'text-l-heading-sm',
-        'text-l-body-lg',
-        'text-l-body-md',
-        'text-l-body-sm',
-        'text-l-body-xs',
-        'text-l-page-heading',
-        'text-l-section-heading',
-        'text-l-button-label-md',
-        'text-l-button-label-lg',
-        'text-l-amount-display-lg',
-      ];
-
-      const result = twMerge(largeVariants.join(' '));
-      expect(result).toBe('text-l-amount-display-lg'); // Should keep last one
+    it('should handle typography conflicts with color', () => {
+      const result = twMerge('text-body-md text-muted text-heading-lg text-default');
+      expect(result).toBe('text-heading-lg text-default');
     });
   });
 });