naser/libra
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

generated stories for changing the colors after the client changed his logo

Browse Source
This commit is contained in:
Naser Mansour
2026-01-03 03:10:49 +02:00
parent 5a19903e30
commit 19f6386532
7 changed files with 986 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/epics/epic-10-brand-color-refresh.md
+103 -83
View File
@@ -29,7 +29,9 @@ Update the application's color system to align with the new LIBRA for Rights bra
**How it integrates:**
- Update CSS custom properties in `resources/css/app.css`
- Update component color references across all Blade views
- Update SVG logo files with new brand design
- Update PDF export templates
- Update email templates
- Update documentation (PRD, architecture, stories, CLAUDE.md)
**Success criteria:**
@@ -37,84 +39,41 @@ Update the application's color system to align with the new LIBRA for Rights bra
- WCAG AA contrast ratios maintained
- Consistent appearance across all areas (public, admin, client)
- PDF exports reflect new branding
- Email templates reflect new branding
- Logo displays correctly throughout application
- Documentation updated to reflect new colors
---
## Stories
### Story 10.1: Core Color System Update
| Story | Title | Description | Status |
|-------|-------|-------------|--------|
| 10.1 | [Core CSS Theme Update](../stories/story-10.1-core-css-theme-update.md) | Update Tailwind CSS theme variables and semantic aliases | Pending |
| 10.2 | [Blade Component Color Migration](../stories/story-10.2-blade-component-color-migration.md) | Update 16 Blade files with 64 color class occurrences | Pending |
| 10.3 | [Email Template Color Update](../stories/story-10.3-email-template-color-update.md) | Update email theme CSS and template components | Pending |
| 10.4 | [PDF Template Color Update](../stories/story-10.4-pdf-template-color-update.md) | Update 4 PDF export templates | Pending |
| 10.5 | [Logo and SVG Assets Update](../stories/story-10.5-logo-assets-update.md) | Update/replace logo SVG files for new brand | Pending |
| 10.6 | [Documentation Update](../stories/story-10.6-documentation-update.md) | Update PRD, CLAUDE.md, architecture docs, and story files | Pending |
**Description:** Update the Tailwind CSS theme configuration and core color variables.
### Story Dependencies
**Acceptance Criteria:**
- [ ] Update `resources/css/app.css` `@theme` block with new colors:
- `--color-charcoal: #4A4A42` (replaces navy)
- `--color-warm-gray: #C9C4BA` (replaces gold)
- `--color-off-white: #E8E4DC` (replaces cream/gold-light)
- `--color-deep-black: #1A1A1A` (replaces old charcoal)
- [ ] Create semantic aliases for backward compatibility during transition
- [ ] Update `.prose-navy` to `.prose-charcoal` or equivalent
- [ ] Verify WCAG AA contrast ratios for all color combinations
- [ ] Update Flux UI accent color configuration
- [ ] Test dark mode colors if applicable
```
10.1 (CSS Theme) ──┬──> 10.2 (Blade Components)
├──> 10.3 (Email Templates)
└──> 10.4 (PDF Templates)
**Technical Notes:**
- Keep status colors (success, danger, warning) unchanged
- Consider creating aliases like `--color-primary` → `--color-charcoal` for semantic usage
- Run contrast checker on all text/background combinations
10.5 (Logo Assets) ──> Can run in parallel with 10.1
---
10.6 (Documentation) ──> Should run last, after 10.1-10.5
```
### Story 10.2: Component & Page Color Migration
### Recommended Implementation Order
**Description:** Update all components and pages to use the new color palette.
**Acceptance Criteria:**
- [ ] **Navigation & Footer:**
- Update background from navy to charcoal
- Update text/links from gold to warm-gray/off-white
- Update logo component colors
- [ ] **Buttons:**
- Primary: Charcoal background, off-white text
- Secondary: Warm-gray border, charcoal text
- Hover states updated accordingly
- [ ] **Forms:**
- Focus ring: warm-gray instead of gold
- Border colors updated
- [ ] **Cards & Containers:**
- Background: off-white
- Borders/accents: warm-gray
- [ ] **Public Pages:** Home, booking, posts
- [ ] **Admin Dashboard:** All admin pages and charts
- [ ] **Client Portal:** All client pages
- [ ] **PDF Exports:** Users, consultations, timelines, monthly report
- [ ] All hardcoded hex values replaced with CSS variables
**Technical Notes:**
- Use find/replace carefully for hex values
- Test RTL layout after changes
- Verify responsive appearance on all breakpoints
---
### Story 10.3: Documentation & Asset Update
**Description:** Update all documentation and static assets to reflect new brand colors.
**Acceptance Criteria:**
- [ ] Update `docs/prd.md` color specifications
- [ ] Update `docs/architecture.md` design references
- [ ] Update `CLAUDE.md` color guidance
- [ ] Update Epic 9 story references (mark as superseded or update)
- [ ] Update any remaining story files with old color references
- [ ] Ensure logo files are current (reference `docs/brand.md` guidelines)
- [ ] Update `resources/views/components/app-logo.blade.php` if needed
- [ ] Verify favicon/app icons align with new branding
**Technical Notes:**
- Use grep to find all documentation references to old hex values
- Consider adding note in Epic 9 that colors were updated in Epic 10
1. **Story 10.5** - Logo Assets (can start immediately if assets available)
2. **Story 10.1** - Core CSS Theme (foundation for other stories)
3. **Stories 10.2, 10.3, 10.4** - Can run in parallel after 10.1
4. **Story 10.6** - Documentation (final step)
---
@@ -127,32 +86,93 @@ Update the application's color system to align with the new LIBRA for Rights bra
## Risk Mitigation
- **Primary Risk:** Missing color references causing inconsistent appearance
- **Mitigation:** Comprehensive grep search for all hex values; systematic testing of each area
- **Rollback Plan:** Git revert to pre-epic commit; CSS variables make rollback straightforward
| Risk | Likelihood | Impact | Mitigation |
|------|------------|--------|------------|
| Missing color references causing inconsistent appearance | Medium | Medium | Comprehensive grep search for all hex values; systematic testing of each area |
| Logo assets not available | Medium | High | Coordinate with client early; can update colors first and logo later |
| Contrast issues with new palette | Low | Medium | Verify WCAG AA compliance in Story 10.1 before proceeding |
| RTL layout breaks | Low | Medium | Test Arabic layout after each story |
**Rollback Plan:** Git revert to pre-epic commit; CSS variables make rollback straightforward
## Definition of Done
- [ ] All stories completed with acceptance criteria met
- [ ] Existing functionality verified through visual testing
- [ ] Story 10.1: Core CSS theme updated with new colors
- [ ] Story 10.2: All Blade components using new palette
- [ ] Story 10.3: Email templates updated
- [ ] Story 10.4: PDF templates updated
- [ ] Story 10.5: Logo files updated/replaced
- [ ] Story 10.6: All documentation updated
- [ ] All pages render correctly with new colors
- [ ] WCAG AA contrast compliance verified
- [ ] RTL layout displays correctly
- [ ] Responsive design intact across breakpoints
- [ ] PDF exports display new branding
- [ ] Documentation reflects new color palette
- [ ] No regression in existing features
- [ ] Email templates display new branding
- [ ] Code formatted with Pint
- [ ] All tests passing
- [ ] All existing tests passing
- [ ] Visual QA completed on all major pages
---
## Story Manager Handoff
## Affected Files Summary
"Please develop detailed user stories for this brownfield epic. Key considerations:
| Category | File Count | Notes |
|----------|------------|-------|
| CSS Theme | 1 | `resources/css/app.css` |
| Blade Components | 16 | 64 color class occurrences |
| Email Templates | 6+ | Theme CSS + components |
| PDF Templates | 4 | Export templates |
| Logo/SVG Assets | 4 | SVG + PNG files |
| Documentation | 44+ | PRD, CLAUDE.md, stories |
- This is a brand color refresh for an existing Laravel 12 + Tailwind CSS 4 + Livewire 3 application
- Integration points: CSS `@theme` variables, 58+ Blade/Volt files, PDF templates, documentation
- Existing patterns to follow: Current Tailwind CSS variable approach in `resources/css/app.css`
- Critical compatibility requirements: WCAG AA contrast ratios, RTL layout integrity, responsive design
- Each story must include verification that existing functionality remains intact
- Reference `docs/brand.md` for authoritative color values
**Total estimated files to modify:** ~70 files
The epic should maintain system integrity while delivering the updated LIBRA for Rights brand identity."
---
## Testing Checklist
### Visual Testing
- [ ] Home page
- [ ] Booking page
- [ ] Posts listing and detail
- [ ] Login/Auth pages
- [ ] Admin dashboard
- [ ] Admin user management
- [ ] Admin booking management
- [ ] Admin timeline management
- [ ] Client dashboard
- [ ] Client consultations view
- [ ] Client timelines view
- [ ] Settings pages
### Export Testing
- [ ] Users PDF export
- [ ] Consultations PDF export
- [ ] Timelines PDF export
- [ ] Monthly report PDF
### Email Testing
- [ ] Welcome email
- [ ] Booking submitted email
- [ ] Booking approved email
- [ ] Booking rejected email
- [ ] Consultation reminders
- [ ] Timeline update email
### Cross-Browser Testing
- [ ] Chrome
- [ ] Firefox
- [ ] Safari
- [ ] Edge
### Responsive Testing
- [ ] Mobile (< 576px)
- [ ] Tablet (576px - 991px)
- [ ] Desktop (992px+)
### RTL Testing
- [ ] Arabic language layout
- [ ] Navigation RTL
- [ ] Forms RTL
- [ ] Tables RTL