Fix flyway migration and use h2 in unit tests.
All checks were successful
Backend CI / Run Maven Tests (pull_request) Successful in 27s
All checks were successful
Backend CI / Run Maven Tests (pull_request) Successful in 27s
This commit is contained in:
32
.clinerules/frontend-color-theme.md
Normal file
32
.clinerules/frontend-color-theme.md
Normal file
@@ -0,0 +1,32 @@
|
||||
## 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
|
||||
Reference in New Issue
Block a user