theme-system

You can style UI components with design tokens by referencing a JSON-based theme system that maps predefined tokens like primary.base to CSS variables. This mechanism prevents hardcoded colors and provides CSS variable fallbacks for broad compatibility.

You should use theme tokens instead of Tailwind color classes to ensure consistent and maintainable UI theming. This approach centralizes visual properties and enforces design principles by preventing direct Tailwind color class usage in your components.

To apply a surface elevated background, reference the surface.elevated token from the JSON theme system when styling your element. This maps the visual property to the corresponding CSS variable fallback, ensuring the component adheres to design principles.

Yes, the theme token system provides CSS variable fallbacks for broad compatibility. Integrating with a JSON-based theme system ensures visual styling gracefully degrades across environments while maintaining strict adherence to design principles.

No, you cannot use hardcoded hex values when modifying UI components due to strict theme token enforcement. The system prevents hardcoded colors and direct color class usage, guaranteeing all visual elements adhere to the established theme system for maintainability.