#1: Display Theme Colors

[ana-nova]

Value Proposition

As a User

I want to view a single theme

in order to understand its color scheme and visual representation.

Acceptance Criteria

• When I open the app, I can see a single theme displayed.
• Each color in the theme is represented by a color card.
• Each color card displays:
  • hex value of the color
  • the role of the color
  • the color itself in the background color of the element
  • the font in the respective contrastText color

💡 Check if your colors are accessible: Contrast Checker

Tasks

• Set up a React component for displaying a single color card.
• Display hex value, role and contrastText on each color card.
• Style color cards to accurately represent the colors.
• Map color cards for each color in the theme.