chore: removing default font sizes and colors by georgewrmarshall · Pull Request #739 · MetaMask/metamask-design-system

georgewrmarshall · 2025-06-11T05:27:08Z

Description

This PR enforces the use of design system components by removing default Tailwind CSS utilities while preserving essential semantic utilities.

What is the reason for the change?

Default Tailwind font sizes (like text-sm, text-lg) bypass our Text component and design system typography
Default Tailwind colors (like bg-blue-500, text-red-300) bypass our design system color tokens
We want to enforce consistent design system usage across the codebase

What is the improvement/solution?

Remove all default Tailwind font sizes (text-xs, text-sm, text-base, text-lg, text-xl, etc.) to enforce use of the Text component
Remove default Tailwind color palette (red-500, blue-600, etc.) while keeping essential semantic colors (inherit, current, transparent, black, white)
Update React Native press state handling from non-functional active:bg-pressed to proper Pressable state management
Apply changes across all Tailwind configurations: React web, React Native, and twrnc preset

Related issues

Fixes: #740

Manual testing steps

Run Storybook: yarn storybook:react
Navigate to Text component stories and verify all text variants render correctly
Check that Text component variants (TextVariant.BodyMd, TextVariant.HeadingLg, etc.) work as expected
Verify components using bg-transparent still render correctly (should appear with transparent background)
Test that default Tailwind utilities are no longer available:
- Try using text-sm - should not apply styles
- Try using bg-red-500 - should not apply styles
- Try using text-blue-300 - should not apply styles
For React Native: Run yarn storybook:react-native and test press states work correctly
Verify essential semantic utilities still work: bg-transparent, text-inherit, bg-black, bg-white

Screenshots/Recordings

Before

Default Tailwind font sizes were available, bypassing Text component
Default Tailwind colors were available, bypassing design system tokens
React Native press states used non-functional active: pseudo-classes

before480.mov

before.mov

After

Only design system font sizes available (enforces Text component usage)
Only design system colors + essential semantic colors available
React Native press states use proper Pressable state management

after.rn.mov

after.react.mov

Pre-merge author checklist

I've followed MetaMask Contributor Docs
I've completed the PR template to the best of my ability
I've included tests if applicable
I've documented my code using JSDoc format if applicable
I've applied the right labels on the PR (see labeling guidelines). 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.

github-actions · 2025-06-11T05:28:52Z

📖 Storybook Preview

View PR Storybook

github-actions · 2025-06-11T05:31:00Z

📖 Storybook Preview

View PR Storybook

github-actions · 2025-06-11T06:09:45Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2025-06-11T06:10:23Z

+    extend: {},
+  },
+  plugins: [],
 };


Updating the tailwind.config.js for intellisense. Going to look at generating this from tailwind.config.ts and pointing to the version that we can include in the twrnc preset

georgewrmarshall · 2025-06-11T06:15:42Z

+      white: '#ffffff',
+    },
+    fontSize: {}, // This removes all default Tailwind font sizes. We want to rely on the design system font sizes and enforce use of the Text component
    extend: {},


Updated storybook Tailwind config to explicitly include essential semantic colors like inherit, current, transparent, black, and white, while removing the default palette (e.g., bg-red-500, bg-blue-400). I hadn’t realized that setting colors: {} also removes these semantic colors, which we still need. Although I previously added this to the preset, I was concerned about potentially breaking existing Tailwind projects. For now, we’ll manage this at the project level and ensure the @MetaMask/design-system-engineers team are code owners of these configuration files.

georgewrmarshall · 2025-06-11T06:20:45Z

      !isDanger &&
        !isInverse && [
-          'bg-transparent border-2 border-icon-muted text-default',
+          'border-2 border-icon-muted bg-transparent text-default',


Now I understand why there were previous linting updates to these components. I broke bg-transparent when we used an empty object for colors

Before

bg-transparent isn't being generated due to an empty colors: {} object

After

bg-transparent is now being generated

github-actions · 2025-06-11T06:26:31Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2025-06-11T06:28:53Z

            alignItems={BoxAlignItems.Center}
            justifyContent={BoxJustifyContent.Between}
-            className="bg-transparent w-full px-4 py-2 hover:bg-hover active:bg-pressed md:px-8"
+            className="w-full px-4 py-2 hover:bg-hover active:bg-pressed md:px-8"


Removing unneeded bg-transparent classname

georgewrmarshall · 2025-06-11T06:35:42Z

          {/* Ethereum */}
          <Pressable
-            style={tw`w-full flex-row items-center justify-between bg-transparent px-4 py-2`}
+            style={({ pressed }) =>


Replacing unneeded bg-transparent with proper pressed example that mimics react example

github-actions · 2025-06-11T06:36:18Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2025-06-11T06:38:28Z

            size={IconSize.Sm}
            className={twMerge(
-              'text-inherit mr-2 animate-spin',
+              'mr-2 animate-spin text-inherit',


Fixing previously broken text-inherit class and now linting is working as expected

Before

After

georgewrmarshall · 2025-06-11T06:38:57Z

      // Non-floating styles
      !isFloating && [
-        'bg-transparent rounded',
+        'rounded bg-transparent',


linting fixes now bg-transparent is being generated properly

georgewrmarshall · 2025-06-11T06:40:08Z

                {...args}
                name={IconName[iconKey as keyof typeof IconName]}
              />
-              <div className="text-center text-xs">{iconKey}</div>


Removing default font size classnames in favor of the text component. Also did a search for any font size classnames regex: \btext-(xs|sm|base|lg|xl|[2-9]xl)(/\d+)?\b

georgewrmarshall · 2025-06-11T06:41:00Z

          name={IconName.AddSquare}
          color={IconColor.IconDefault}
-          className="text-inherit text-lg"
+          className="text-inherit"


Removing unused font size classname

georgewrmarshall · 2025-06-11T06:41:18Z

          color={IconColor.IconDefault}
          size={IconSize.Md}
-          className="text-inherit h-10 w-10"
+          className="h-10 w-10 text-inherit"


Fixing inherit color classname

georgewrmarshall · 2025-06-11T06:41:37Z

    const mergedClassName = twMerge(
      // Reset padding, height and animations
-      'bg-transparent h-auto rounded-none px-0',
+      'h-auto rounded-none bg-transparent px-0',


Lint fix now bg-transparent is being generated

georgewrmarshall · 2025-06-11T06:42:16Z

+      fontSize: {
+        // Empty to remove default Tailwind font sizes (text-sm, text-lg, etc.)
+        // Design system font sizes added via extend
+      },


Because mobile won't have a tailwind config we can update the generateTailwindConfig function

github-actions · 2025-06-11T06:49:09Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2025-06-11T06:49:35Z

+      black: '#000000',
+      white: '#ffffff',
+    },
+    fontSize: {}, // This removes all default Tailwind font sizes. We want to rely on the design system font sizes and enforce use of the Text component


We remove all default font sizes to enforce the use of the Text component. We aren't removing the below there are no inherit or other semantic default tailwind classnames for font size

text-xs text-sm text-base text-lg text-xl text-2xl text-3xl text-4xl text-5xl text-6xl text-7xl text-8xl text-9xl

… of the text component

github-actions · 2025-06-11T22:42:55Z

📖 Storybook Preview

View PR Storybook

… font size classnames

github-actions · 2025-06-11T22:48:30Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2025-06-11T22:49:46Z

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';


Replacing default colors and font size classnames with Text component

Before

After

github-actions · 2025-06-11T22:50:52Z

📖 Storybook Preview

View PR Storybook

cursor

Bug: Misused Labels Confuse Screen Readers

Semantic HTML misuse: <label> elements are incorrectly used for text referenced by aria-labelledby and aria-describedby on ButtonBase components. Labels should only be used for form controls. This can confuse screen readers and assistive technologies. The affected elements should be div, span, or p.

packages/design-system-react/src/components/ButtonBase/ButtonBase.stories.tsx#L223-L251

metamask-design-system/packages/design-system-react/src/components/ButtonBase/ButtonBase.stories.tsx

Lines 223 to 251 in d169836

    
             <div> 
        
               <Text variant={TextVariant.BodyMd} className="mb-2 block" asChild> 
        
                 <label id="save-label">Save your progress</label> 
        
               </Text> 
        
               <ButtonBase {...args} aria-labelledby="save-label"> 
        
                 💾 Save 
        
               </ButtonBase> 
        
             </div> 
        
           </div> 
        
           <div className="space-y-2"> 
        
             <Text variant={TextVariant.HeadingSm}>Using aria-describedby</Text> 
        
             <Text variant={TextVariant.BodySm} color={TextColor.TextAlternative}> 
        
               Reference an element that provides additional description 
        
             </Text> 
        
             <div> 
        
               <ButtonBase {...args} aria-describedby="submit-description"> 
        
                 Submit Form 
        
               </ButtonBase> 
        
               <Text 
        
                 variant={TextVariant.BodySm} 
        
                 color={TextColor.TextAlternative} 
        
                 className="mt-1 block" 
        
                 asChild 
        
               > 
        
                 <label id="submit-description"> 
        
                   This will submit your form and send you to the confirmation page 
        
                 </label> 
        
               </Text>

Fix in Cursor

Was this report helpful? Give feedback by reacting with 👍 or 👎

georgewrmarshall self-assigned this Jun 11, 2025

georgewrmarshall force-pushed the remove-default-colors-font-sizes branch from 10151b0 to 0689466 Compare June 11, 2025 05:29

georgewrmarshall force-pushed the remove-default-colors-font-sizes branch from 0689466 to fe1c7e0 Compare June 11, 2025 06:08

georgewrmarshall commented Jun 11, 2025

View reviewed changes

georgewrmarshall force-pushed the remove-default-colors-font-sizes branch from 0f1125f to 5ae7103 Compare June 11, 2025 06:34

georgewrmarshall commented Jun 11, 2025

View reviewed changes

georgewrmarshall marked this pull request as ready for review June 11, 2025 07:02

georgewrmarshall requested a review from a team as a code owner June 11, 2025 07:02

brianacnguyen previously approved these changes Jun 11, 2025

View reviewed changes

georgewrmarshall added 4 commits June 12, 2025 08:09

chore: removing default font sizes and colors to help enforce the use…

49be22c

… of the text component

chore: prettier fixes

3b9cb44

fix: twrnc font sizes

1918c55

chore: removing unused bg-transparent

e4a0644

georgewrmarshall added 4 commits June 12, 2025 08:10

chore: adding text inherit back

06124a6

chore: removing bg-transparentfrom dsrn example screen

21a3adf

chore: updating dsrn press example

3a780bc

chore: removing inherit from font size

423f0f4

georgewrmarshall dismissed brianacnguyen’s stale review via 423f0f4 June 11, 2025 22:41

georgewrmarshall force-pushed the remove-default-colors-font-sizes branch from 4928f42 to 423f0f4 Compare June 11, 2025 22:41

This comment was marked as outdated.

Sign in to view

chore: refactoring button base to remove default color classnames and…

59ccebe

… font size classnames

fix: button base layout stories

d169836

georgewrmarshall commented Jun 11, 2025

View reviewed changes

georgewrmarshall requested a review from brianacnguyen June 11, 2025 22:50

cursor Bot reviewed Jun 11, 2025

View reviewed changes

brianacnguyen approved these changes Jun 11, 2025

View reviewed changes

georgewrmarshall merged commit 3aa68e1 into main Jun 11, 2025
37 checks passed

georgewrmarshall deleted the remove-default-colors-font-sizes branch June 11, 2025 23:08

		@@ -1,7 +1,7 @@
		import type { Meta, StoryObj } from '@storybook/react';

	<div>
	<Text variant={TextVariant.BodyMd} className="mb-2 block" asChild>
	<label id="save-label">Save your progress</label>
	</Text>
	<ButtonBase {...args} aria-labelledby="save-label">
	💾 Save
	</ButtonBase>
	</div>
	</div>

	<div className="space-y-2">
	<Text variant={TextVariant.HeadingSm}>Using aria-describedby</Text>
	<Text variant={TextVariant.BodySm} color={TextColor.TextAlternative}>
	Reference an element that provides additional description
	</Text>
	<div>
	<ButtonBase {...args} aria-describedby="submit-description">
	Submit Form
	</ButtonBase>
	<Text
	variant={TextVariant.BodySm}
	color={TextColor.TextAlternative}
	className="mt-1 block"
	asChild
	>
	<label id="submit-description">
	This will submit your form and send you to the confirmation page
	</label>
	</Text>

Uh oh!

Conversation

georgewrmarshall commented Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Jun 11, 2025

📖 Storybook Preview

Uh oh!

github-actions Bot commented Jun 11, 2025

📖 Storybook Preview

Uh oh!

github-actions Bot commented Jun 11, 2025

📖 Storybook Preview

Uh oh!

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Before

After

Uh oh!

github-actions Bot commented Jun 11, 2025

📖 Storybook Preview

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jun 11, 2025

📖 Storybook Preview

Uh oh!

georgewrmarshall Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Before

After

Uh oh!

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jun 11, 2025

📖 Storybook Preview

Uh oh!

georgewrmarshall Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jun 11, 2025

📖 Storybook Preview

Uh oh!

This comment was marked as outdated.

Uh oh!

github-actions Bot commented Jun 11, 2025

📖 Storybook Preview

Uh oh!

Choose a reason for hiding this comment

georgewrmarshall commented Jun 11, 2025 •

edited

Loading

georgewrmarshall Jun 11, 2025 •

edited

Loading

georgewrmarshall Jun 11, 2025 •

edited

Loading

georgewrmarshall Jun 11, 2025 •

edited

Loading

georgewrmarshall Jun 11, 2025 •

edited

Loading

georgewrmarshall Jun 11, 2025 •

edited

Loading