Description

Currently, when the data-theme attribute is not set, the theme colors don't properly respect the system's color scheme preference. This has led to inconsistent implementations in the extension where custom logic has been added to handle this case.

We need to update the design tokens CSS to automatically apply the correct theme based on the user's system preference when no explicit theme is set.

Technical Details

1. Update both dark-theme-colors.css and light-theme-colors.css to include @media (prefers-color-scheme: dark) and @media (prefers-color-scheme: light) queries
2. Move the existing theme definitions inside these media queries
3. Add fallback styles for when no theme preference is available
4. Ensure the implementation is comprehensive and covers all color variables
5. Remove the need for custom implementations like the one in the extension's base-styles.scss

Acceptance Criteria

• System theme preference should work without explicit data-theme attribute
• All color variables should be properly set based on system preference
• No breaking changes to existing theme functionality
• Comprehensive test coverage for both light and dark themes
• Remove the need for custom theme handling in the extension

References

• MetaMask Extension Issue #30569: [Bug]: Error visibility issues in dark mode metamask-extension#30569
• MetaMask Extension Issue #30407: [Bug]: Error page text visibility issues in dark mode metamask-extension#30407
• Current implementation in extension: https://github.com/MetaMask/metamask-extension/blob/115238c0a568e1f291b62fd30edf75ba9dbb9a4b/ui/css/base-styles.scss#L29-L46

The implementation would involve modifying both theme CSS files to include media queries. Here's an example of how the dark theme file would be updated:

```css:packages/design-tokens/src/css/dark-theme-colors.css
// ... existing code ...

@media (prefers-color-scheme: dark) {
  [data-theme='dark'],
  .dark {
    // ... existing dark theme variables ...
  }
  
  /* Fallback for when no theme is specified */
  :root:not([data-theme]) {
    // ... dark theme variables ...
  }
}

// ... existing code ...

A similar structure would be added to the light theme file. This approach ensures that the system theme preference is respected even when no explicit theme is set.