chore: update design tokens for preferred color scheme

[georgewrmarshall]

Description

1. Reason for change: To resolve inconsistent theme application when no explicit data-theme attribute is set, as reported in MetaMask/metamask-design-system#452. Previously, the light theme was the default, leading to incorrect theming for users with dark mode system preferences.
2. Improvement/Solution: This PR updates the CSS design tokens to fully support prefers-color-scheme media queries.
   • The light theme's :root selector has been removed to prevent it from being the unconditional default.
   • @media (prefers-color-scheme: light) and @media (prefers-color-scheme: dark) queries are added to apply the respective themes automatically based on the user's system preference.
   • A fallback @media (prefers-color-scheme: no-preference) is included, defaulting to the light theme for backward compatibility.
   • Explicit theme selection via [data-theme='light'], [data-theme='dark'], .light, and .dark selectors retains higher priority.

Related issues

Fixes: #452

Manual testing steps

1. Open an application that uses these design tokens (e.g., MetaMask extension).
2. Ensure no data-theme attribute is explicitly set on the html or body element.
3. Change your operating system's color scheme preference between "Light", "Dark", and "No preference" (if applicable).
4. Verify that the UI theme automatically switches to match the system preference (Light for "Light" and "No preference", Dark for "Dark").
5. Optionally, add data-theme="light" or data-theme="dark" to the html element and verify that the theme is forced, overriding the system preference.

Screenshots/Recordings

Before

After

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.

---

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

[github-actions]

📖 Storybook Preview

• View PR Storybook

[georgewrmarshall]

@cursoragent should we also add not .dark and same for light theme?

[cursor]

I refined the CSS selectors for system preference-based themes to prevent conflicts with explicitly set themes. This ensures that themes applied via data-theme attributes or .dark/.light classes take precedence over system preferences, improving theme consistency.

• I modified the CSS selectors within the @media (prefers-color-scheme: ...) blocks in packages/design-tokens/src/css/dark-theme-colors.css and packages/design-tokens/src/css/light-theme-colors.css.
• Specifically, I updated the :root selector from :root:not([data-theme]) to :root:not([data-theme]):not(.dark):not(.light).
• This change ensures that system preference-based themes are only applied when no explicit theme is set via the data-theme attribute or the .dark or .light classes on the :root element, preventing unintended theme overrides.

---

_{Learn more about Cursor Agents}

[github-actions]

📖 Storybook Preview

• View PR Storybook

[georgewrmarshall]

@metamaskbot publish-preview

[github-actions]

Preview builds have been published. See these instructions for more information about preview builds.

Expand for full list of packages and versions.

{
  "@metamask-previews/design-system-react": "0.3.1-preview.1775c68",
  "@metamask-previews/design-system-react-native": "0.3.1-preview.1775c68",
  "@metamask-previews/design-system-tailwind-preset": "0.6.1-preview.1775c68",
  "@metamask-previews/design-system-twrnc-preset": "0.2.1-preview.1775c68",
  "@metamask-previews/design-tokens": "8.1.1-preview.1775c68"
}

[github-actions]

📖 Storybook Preview

• View PR Storybook

[georgewrmarshall]

@metamaskbot publish-preview

[github-actions]

Preview builds have been published. See these instructions for more information about preview builds.

Expand for full list of packages and versions.

{
  "@metamask-previews/design-system-react": "0.4.0-preview.6197867",
  "@metamask-previews/design-system-react-native": "0.4.0-preview.6197867",
  "@metamask-previews/design-system-shared": "0.1.0-preview.6197867",
  "@metamask-previews/design-system-tailwind-preset": "0.6.1-preview.6197867",
  "@metamask-previews/design-system-twrnc-preset": "0.2.1-preview.6197867",
  "@metamask-previews/design-tokens": "8.1.1-preview.6197867"
}