React

Project Structure

Your React project uses CSS modules for styling with color variables defined in src/index.css.

Color Variables

All colors are defined as CSS custom properties:

:root {
  --primary: /* Your primary color */;
  --secondary: /* Your secondary color */;
  --accent: /* Your accent color */;
  --text-on-primary: /* Text color for primary bg */;
  --text-on-secondary: /* Text color for secondary bg */;
  --text-on-accent: /* Text color for accent bg */;
}

Using Colors in Components

Apply colors using CSS custom properties:

.button {
  background-color: var(--accent);
  color: var(--text-on-accent);
}

.card {
  background-color: var(--secondary);
  color: var(--text-on-secondary);
}

Inline Styles

You can also use colors in inline styles:

<div style={{ 
  backgroundColor: 'var(--primary)',
  color: 'var(--text-on-primary)'
}}>
  Content
</div>