fix: text visibility issues in error page in dark mode

[georgewrmarshall]

Description

This PR addresses an issue where the error page text was not visible in dark mode due to missing theme handling and color inheritance. The changes ensure proper text visibility regardless of the user's system theme by:

1. Adding TextColor.inherit to all text components in the error page to ensure proper color inheritance
2. Fixing the theme handling in base styles to properly apply dark mode colors
3. Ensuring the banner alert text inherits the correct color
4. Adding max-width to textarea components to prevent overflow issues
5. Adding comprehensive Storybook stories for the error page component to improve test coverage and enable isolated development

Related issues

Fixes: #30407

Manual testing steps

1. Set your system to dark mode
2. Trigger an error in MetaMask by setting if (error) { to if (true) { in ui/pages/index.js
3. Verify the error page text is visible and properly contrasted
4. Switch to light mode and repeat steps 2-3
5. Test the Textarea component to ensure it doesn't overflow its container
6. Run Storybook and verify all error page stories render correctly

Screenshots/Recordings

Before

error.page.bug720.mov

After

after720.mov

storybook.after720.mov

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
• 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]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[georgewrmarshall]

Fixes issue with Textarea component extending beyond container

Before

After

[DDDDDanica]

Thanks for fixing !

[georgewrmarshall]

Need to include body here so it inherits the color styles for text at the moment we are setting it to text/default which defaults to grey

after.body720.mov

[georgewrmarshall]

This page will be rendered outside of the theme provider so we need to ensure it works by changing all text components to inherit the text color from html/body

[metamaskbot]

Builds ready [ed2034e]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (MMI): chrome
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
  • content-script: 0
  • offscreen: 0

Page Load Metrics (1816 ± 130 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	320	2692	1678	513	246
		domContentLoaded	1535	2683	1792	251	120
		load	1544	2777	1816	271	130
		domInteractive	25	74	37	13	6
		backgroundConnect	8	94	26	24	12
		firstReactRender	15	93	39	26	12
		getState	4	54	19	18	9
		initialActions	0	0	0	0	0
		loadScripts	1091	1879	1292	182	88
		setupStore	8	60	19	18	9
		uiStartup	1789	3128	2079	289	139

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 205 Bytes (0.00%)
• common: 0 Bytes (0.00%)

[DDDDDanica]

LGTM !

[vinnyhoward]

LGTM!