Jarno Kiesiläinen
c8a1158a6d
All checks were successful
Backend CI / Run Maven Tests (pull_request) Successful in 27s
33 lines
2.0 KiB
Markdown
33 lines
2.0 KiB
Markdown
## Brief overview
|
|
Project-specific frontend color theme guidelines for the vibing application. Defines a cohesive peach/coral/pink color palette with specific CSS custom properties, component styling patterns, and accessibility requirements.
|
|
|
|
## Color palette usage
|
|
- Always use the defined peach-coral color scheme: Primary Peach (#FFCDB2), Secondary Coral (#FFB4A2), Light Pink (#E5989B), Medium Mauve (#B5838D), Dark Purple (#6D6875)
|
|
- Implement CSS custom properties in src/index.css for all color definitions
|
|
- Use semantic color naming: --color-primary, --color-secondary, --color-bg-dark, --color-text-primary, etc.
|
|
- Support both dark and light modes using @media (prefers-color-scheme: light)
|
|
|
|
## Component styling patterns
|
|
- Buttons: Use gradient backgrounds, implement translateY(-2px) hover animations, apply consistent focus states with peach outline
|
|
- Cards: White backgrounds with subtle shadows, translateY(-8px) hover animations, 16px border radius, scale(1.05) image hover effects
|
|
- Links: Primary color #FFCDB2, hover colors #E5989B (dark mode) or #B5838D (light mode), no text decoration by default
|
|
- Use semantic CSS class names: .btn-primary, .btn-secondary, .btn-outline, .btn-ghost
|
|
|
|
## Interactive states and animations
|
|
- Apply subtle lift animations using transform: translateY(-2px) for hover effects
|
|
- Use rgba(255, 205, 178, 0.3) for focus rings and primary shadows
|
|
- Use rgba(229, 152, 155, 0.3) for secondary shadows
|
|
- Ensure hover states are distinct from focus states for accessibility
|
|
|
|
## File organization structure
|
|
- Place global styles and CSS custom properties in src/index.css
|
|
- Create individual .css files in src/components/ for component-specific styles
|
|
- Use src/App.css for utility classes
|
|
- Consider src/styles/ directory for additional theme files when needed
|
|
|
|
## Accessibility requirements
|
|
- Maintain minimum contrast ratios: 4.5:1 for normal text, 3:1 for large text
|
|
- Use --color-focus for focus indicators
|
|
- Test with color blindness simulators
|
|
- Ensure all interactive elements have proper focus states
|