feat: Icon Button to use light theme in dark mode

[garrettbear]

Here’s the reworded PR template for the IconButton component:

---

Description

This PR updates the IconButton component (also known as ActionButton) to use light theme colors when rendered in dark mode. This update is part of the ongoing brand evolution, ensuring that the visual design is consistent with the new brand guidelines. The primary objective is to align the dark mode appearance of this component with the light theme color palette, improving overall user experience and maintaining visual coherence across the application.

Related issues

Fixes: 735

Manual testing steps

1. Navigate to any page where the IconButton component is rendered.
2. Enable dark mode in the application.
3. Observe the color scheme of the IconButton component to ensure it uses the updated light theme colors.
4. Compare the colors with the brand guidelines provided.
5. Test across various instances of the IconButton component in dark mode to ensure consistency.

Screenshots/Recordings

Before

After

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 where applicable.
• I’ve documented my code using JSDoc format where applicable.
• I’ve applied the right labels on the PR (see labeling guidelines).

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.

---

This version is tailored specifically for the IconButton component, reflecting the necessary changes and testing steps.

[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.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 70.15%. Comparing base (1998dc4) to head (1df9736).
Report is 1 commits behind head on develop.

Additional details and impacted files

@@           Coverage Diff            @@
##           develop   #26884   +/-   ##
========================================
  Coverage    70.15%   70.15%           
========================================
  Files         1425     1425           
  Lines        49653    49653           
  Branches     13893    13893           
========================================
  Hits         34831    34831           
  Misses       14822    14822           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[metamaskbot]

Builds ready [dca9c34]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

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

Page Load Metrics (1820 ± 115 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	256	2363	1754	419	201
		domContentLoaded	1571	2322	1802	235	113
		load	1580	2341	1820	239	115
		domInteractive	12	103	41	22	10

Bundle size diffs

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

[georgewrmarshall]

LGTM! 🚀

• Checked storybook in light and dark mode ✅

[sonarcloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[metamaskbot]

Builds ready [1df9736]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

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

Page Load Metrics (1893 ± 101 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	436	2494	1824	380	182
		domContentLoaded	1664	2476	1862	198	95
		load	1673	2493	1893	209	101
		domInteractive	16	112	47	22	10

Bundle size diffs

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