Use theme-based styling

Always use CSS custom properties (CSS variables) for colors and include proper accessibility attributes instead of hard-coded values. This ensures consistency with the design system and improves accessibility for users with visual impairments or different theme preferences.

Color Usage: Replace hard-coded color values with theme-based CSS variables:

// ❌ Avoid hard-coded colors
style=

// ✅ Use theme-based colors
style=

Accessibility Attributes: Include appropriate ARIA labels and roles for interactive elements:

// ❌ Missing accessibility attributes
<VSCodeButton onClick={handleCopyCode} title="Copy Code">

// ✅ Include aria-label for screen readers
<VSCodeButton onClick={handleCopyCode} title="Copy Code" aria-label="Copy Code">

// ❌ Clickable div without accessibility
<div onClick={() => { /* handler */ }}>

// ✅ Proper accessibility for interactive elements  
<div onClick={() => { /* handler */ }} aria-label="View HTML Content" role="button" tabIndex={0}>

This approach helps users with visual impairments, supports different VS Code themes, and maintains consistency across the application interface.