Description

This PR upgrades the @metamask/design-tokens package to version 2.1.1, which introduces an enhancement for dynamic theming support. With this update, components can now be wrapped in parent containers tagged with data-theme="light" or data-theme="dark" attributes, allowing for seamless theme changes that respect the specified theme at any level of nesting. This improvement addresses the need for more flexible theming options within our application, ensuring that theme consistency is maintained across different UI components regardless of their hierarchical structure.

Related issues

Related: MetaMask/design-tokens#626

Manual testing steps

1. Pull this branch
2. Implement a component structure similar to the provided template, with nested Box components having different data-theme attributes.
3. Verify that each Box component correctly displays its theme according to the data-theme attribute, demonstrating the dynamic theming capability.

Provided template in ui/components/component-library/text/text.stories.tsx

const Template: StoryFn<typeof Text> = (args) => (
  <Box data-theme="dark" padding={4} backgroundColor={BackgroundColor.backgroundDefault}>
    <Text>dark theme</Text>
    <Box data-theme="light" padding={4} backgroundColor={BackgroundColor.backgroundDefault}>
      <Text>light theme</Text>
      <Box data-theme="dark" padding={4} backgroundColor={BackgroundColor.backgroundDefault}>
        <Text>dark theme</Text>
      </Box>
    </Box>
  </Box>
);

Screenshots/Recordings

Before

After

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.
• I’ve properly set the pull request status to "ready for review".

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.