feat: add dark/light classname

[garrettbear]

Description

This PR introduces light and dark class names to CSS variables, associating them with [data-theme="light"] and [data-theme="dark"], respectively. These additions are crucial for enabling the use of CSS variables on mobile platforms and allow theme-specific styling to be applied at the component level. The light class is also necessary to apply a light theme to specific components while the overall theme is set to dark mode, ensuring consistent visual design across different scenarios.

Related issues

Fixes: #728

Manual testing steps

1. Navigate to a page where theme variables are utilized.
2. Switch between light and dark themes using the [data-theme] attribute.
3. Apply the light and dark class names at the component level and verify that the styles are applied correctly.
4. Confirm that the light class overrides the dark theme for specific components when in dark mode.

Screenshots/Recordings

Before

After

When testing in design-tokens repo you need to add a background default variable so that you can better see the change between light and dark mode. Example below

Video demonstrating data-theme="light", data-theme="dark", .light, and .dark working. Additionally using the class at component level.

Screen.Recording.2024-08-22.at.1.53.37.PM.mov

Pre-merge author checklist

• I’ve followed MetaMask Coding Standards.
• I've clearly explained what problem this PR is solving and how it is solved.
• I've linked related issues.
• I've included manual testing steps.
• I've included screenshots/recordings if applicable.
• 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.
• I’ve properly set the pull request status:
  • In case it's not yet "ready for review", I've set it to "draft".
  • In case it's "ready for review", I've changed it from "draft" to "non-draft".

Pre-merge reviewer checklist

• I've manually tested the PR (e.g., pulled and built the branch, run the app, tested the 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.

[metamaskbot]

Builds ready [7ac40d6]

Storybook: Storybook

[georgewrmarshall]

LGTM 🚀