From 149b3c4e5375d824074fa8bed2ea0eedc981083a Mon Sep 17 00:00:00 2001 From: Naser Mansour Date: Sun, 4 Jan 2026 02:31:30 +0200 Subject: [PATCH] complete story 12.6 --- CLAUDE.md | 8 ++- docs/architecture.md | 28 +++++--- docs/brand.md | 26 +++++-- docs/logo-generation-instructions.md | 17 +++-- docs/prd.md | 67 +++++++++++-------- .../story-12.6-documentation-update.md | 40 +++++++---- tests/Feature/AccessibilityComplianceTest.php | 20 +++--- 7 files changed, 131 insertions(+), 75 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index bad2846..4a96eb7 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -173,7 +173,13 @@ Located in `app/Notifications/`: - **Bilingual required:** All user-facing text needs Arabic and English ## Design Requirements (from PRD) -- **Color scheme:** Charcoal (#4A4A42) + Warm Gray (#C9C4BA), Off-White (#E8E4DC), Deep Black (#1A1A1A) +- **Color scheme:** + - Dark Forest Green (#2D3624) - Header/Footer backgrounds + - Warm Gold (#A68966) - CTA buttons, links, accents + - Warm Cream (#F4F1EA) - Main page background + - Forest Green (#2D322A) - Headings, body text + - Pure White (#FFFFFF) - Card backgrounds + - Olive Green (#4A5D23) - Active states - **Bilingual:** Arabic (primary, RTL) / English (LTR) - Professional, elegant aesthetic with botanical/wheat Libra logo - See `docs/brand.md` for complete brand guidelines diff --git a/docs/architecture.md b/docs/architecture.md index 1c2f43f..2b38280 100644 --- a/docs/architecture.md +++ b/docs/architecture.md @@ -1814,10 +1814,16 @@ resources/lang/ --font-arabic: 'Cairo', sans-serif; --font-english: 'Montserrat', sans-serif; - /* Brand colors - Updated in Epic 10 */ - --color-charcoal: #4A4A42; - --color-warm-gray: #C9C4BA; - --color-off-white: #E8E4DC; + /* Brand colors - Updated in Epic 12 */ + --color-dark-forest: #2D3624; + --color-warm-gold: #A68966; + --color-warm-cream: #F4F1EA; + --color-forest-green: #2D322A; + --color-pure-white: #FFFFFF; + --color-olive-green: #4A5D23; + --color-primary-light: #3D4634; + --color-gold-hover: #8A7555; + --color-gold-light: #C4A882; --color-deep-black: #1A1A1A; } @@ -3119,14 +3125,20 @@ select, separator, skeleton, switch, text, textarea, tooltip ### B. Color Palette -> **Note:** Color palette updated in Epic 10 (Brand Color Refresh). +> **Note:** Color palette updated in Epic 12 (Dark Charcoal & Warm Gold refresh). > See `docs/brand.md` for complete brand guidelines. | Name | Hex | CSS Variable | Usage | |------|-----|--------------|-------| -| Charcoal | `#4A4A42` | `--color-charcoal` | Primary brand, buttons | -| Warm Gray | `#C9C4BA` | `--color-warm-gray` | Accents, borders | -| Off-White | `#E8E4DC` | `--color-off-white` | Backgrounds, cards | +| Dark Forest Green | `#2D3624` | `--color-dark-forest` | Header/Footer backgrounds | +| Warm Gold | `#A68966` | `--color-warm-gold` | CTA buttons, links, accents | +| Warm Cream | `#F4F1EA` | `--color-warm-cream` | Main page background | +| Forest Green | `#2D322A` | `--color-forest-green` | Headings, body text | +| Pure White | `#FFFFFF` | `--color-pure-white` | Card backgrounds | +| Olive Green | `#4A5D23` | `--color-olive-green` | Active states | +| Primary Light | `#3D4634` | `--color-primary-light` | Primary hover states | +| Gold Hover | `#8A7555` | `--color-gold-hover` | Button hover states | +| Gold Light | `#C4A882` | `--color-gold-light` | Light accents | | Deep Black | `#1A1A1A` | `--color-deep-black` | Text, footer | | Success Green | `#27AE60` | `--color-success` | Success states | | Warning Red | `#E74C3C` | `--color-danger` | Error states | diff --git a/docs/brand.md b/docs/brand.md index 1220151..6dd32dc 100644 --- a/docs/brand.md +++ b/docs/brand.md @@ -29,11 +29,25 @@ The logo features a stylized botanical illustration within a square frame. Centr ## Color Palette +### Primary Colors + | Color | Hex Code | Usage | |-------|----------|-------| -| Charcoal | `#4A4A42` | Primary backgrounds, text | -| Warm Gray | `#C9C4BA` | Secondary backgrounds, accents | -| Off-White | `#E8E4DC` | Light backgrounds | +| Dark Forest Green | `#2D3624` | Header/Footer backgrounds | +| Warm Gold | `#A68966` | CTA buttons, links, accents | +| Warm Cream | `#F4F1EA` | Main page background | +| Forest Green | `#2D322A` | Headings, body text | +| Pure White | `#FFFFFF` | Card backgrounds | +| Olive Green | `#4A5D23` | Active states | + +### Color Variants + +| Color | Hex Code | Usage | +|-------|----------|-------| +| Primary Light | `#3D4634` | Primary hover states | +| Gold Hover | `#8A7555` | Button hover states | +| Gold Light | `#C4A882` | Light accents | +| Olive Hover | `#5A7030` | Olive hover states | | Deep Black | `#1A1A1A` | Logo artwork, headlines | --- @@ -79,12 +93,12 @@ Maintain clear space around the logo equal to the height of one water droplet el Logo should not appear smaller than 40px in height for digital or 15mm for print. ### Backgrounds -- Use on light neutral backgrounds (off-white, warm gray) -- May be reversed to light color on dark charcoal backgrounds +- Use on light neutral backgrounds (Warm Cream #F4F1EA, Pure White #FFFFFF) +- May be reversed to light color on Dark Forest Green (#2D3624) backgrounds - Avoid busy or patterned backgrounds ### Badge Style (for colored backgrounds) -When the logo appears on olive green or other colored backgrounds (e.g., navigation, footer), apply badge styling to make the logo's beige background look intentional: +When the logo appears on Dark Forest Green (#2D3624) or other colored backgrounds (e.g., navigation, footer), apply badge styling to make the logo's cream background look intentional: - Border: 2px solid Deep Black (#1A1A1A) - Shadow: 4px 4px 6px rgba(26, 26, 26, 0.5) - This creates a "seal/stamp" effect that frames the logo professionally diff --git a/docs/logo-generation-instructions.md b/docs/logo-generation-instructions.md index d42745b..c74a565 100644 --- a/docs/logo-generation-instructions.md +++ b/docs/logo-generation-instructions.md @@ -10,9 +10,9 @@ The following SVG files have been updated with the new LIBRA for Rights botanica | Source File | Purpose | |-------------|---------| -| `public/images/logo.svg` | Primary logo (Deep Black on light backgrounds) | -| `public/images/logo-reversed.svg` | Reversed logo (Off-White on dark backgrounds) | -| `public/images/logo-mono.svg` | Monochrome logo (Charcoal, single color) | +| `public/images/logo.svg` | Primary logo (Forest Green on light backgrounds) | +| `public/images/logo-reversed.svg` | Reversed logo (Warm Cream on dark backgrounds) | +| `public/images/logo-mono.svg` | Monochrome logo (Deep Black, single color) | | `public/favicon.svg` | Favicon source | --- @@ -212,10 +212,12 @@ For any manual adjustments, use these exact colors from `docs/brand.md`: | Color | Hex Code | Usage | |-------|----------|-------| -| Deep Black | `#1A1A1A` | Primary logo artwork | -| Charcoal | `#4A4A42` | Monochrome logo, text | -| Warm Gray | `#C9C4BA` | Secondary accents | -| Off-White | `#E8E4DC` | Reversed logo artwork | +| Dark Forest Green | `#2D3624` | Header/Footer backgrounds | +| Warm Gold | `#A68966` | CTA buttons, links, accents | +| Warm Cream | `#F4F1EA` | Main page background, reversed logo | +| Forest Green | `#2D322A` | Headings, body text, primary logo | +| Pure White | `#FFFFFF` | Card backgrounds | +| Deep Black | `#1A1A1A` | Monochrome logo artwork | --- @@ -251,3 +253,4 @@ Generate from `logo.svg` at appropriate size for email clients (max width ~200px --- *Generated for Story 10.5: Logo and SVG Assets Update* +*Updated for Story 12.6: Brand Documentation Update (Dark Charcoal & Warm Gold)* diff --git a/docs/prd.md b/docs/prd.md index ffbe800..30af7b4 100644 --- a/docs/prd.md +++ b/docs/prd.md @@ -83,7 +83,7 @@ Libra Law Firm requires a professional, bilingual (Arabic/English) web platform - Highly professional aesthetic - Detail-oriented with polished elements - Clean lines and sophisticated typography -- Color palette: Charcoal with Warm Gray accents (see docs/brand.md) +- Color palette: Dark Forest Green with Warm Gold accents (see docs/brand.md) - Libra scales logo prominently displayed - Elegant, refined visual elements - Easy navigation despite sophistication @@ -462,7 +462,7 @@ Central control panel for lawyer to manage all platform operations - Responsive design for tablet use - Arabic-first with English toggle - Clear visual hierarchy -- Charcoal and Warm Gray color scheme (see docs/brand.md) +- Dark Forest Green and Warm Gold color scheme (see docs/brand.md) --- @@ -511,7 +511,7 @@ Central control panel for lawyer to manage all platform operations - Clear status indicators - Mobile-friendly - Consistent with main site design -- Charcoal and Warm Gray color scheme (see docs/brand.md) +- Dark Forest Green and Warm Gold color scheme (see docs/brand.md) --- @@ -550,21 +550,30 @@ Central control panel for lawyer to manage all platform operations #### A. Color Palette -> **Note:** The color palette was updated in Epic 10 (Brand Color Refresh). +> **Note:** The color palette was updated in Epic 12 (Dark Charcoal & Warm Gold refresh). > See `docs/brand.md` for complete and current brand guidelines. **Primary Colors:** -- **Charcoal:** #4A4A42 - - Usage: Primary brand color, buttons, links, headings +- **Dark Forest Green:** #2D3624 + - Usage: Header/Footer backgrounds - Creates professional, grounded atmosphere -- **Warm Gray:** #C9C4BA - - Usage: Accent elements, secondary buttons, borders, dividers +- **Warm Gold:** #A68966 + - Usage: CTA buttons, links, accents - Represents sophistication, balance, legal authority +- **Forest Green:** #2D322A + - Usage: Headings, body text + - Creates refined, professional tone + **Supporting Colors:** -- **Off-White:** #E8E4DC (backgrounds, card backgrounds, hover states) -- **Deep Black:** #1A1A1A (text, footer, high-contrast elements) +- **Warm Cream:** #F4F1EA (main page background) +- **Pure White:** #FFFFFF (card backgrounds) +- **Olive Green:** #4A5D23 (active states) +- **Primary Light:** #3D4634 (primary hover states) +- **Gold Hover:** #8A7555 (button hover states) +- **Gold Light:** #C4A882 (light accents) +- **Deep Black:** #1A1A1A (logo artwork, headlines) - **Success Green:** #27AE60 (approved status, success messages) - **Warning Red:** #E74C3C (rejected status, error messages) - **Pending Yellow:** #F39C12 (pending status indicators) @@ -589,8 +598,8 @@ Central control panel for lawyer to manage all platform operations - Clear space: Minimum 20px padding on all sides - Acceptable formats: SVG (primary), PNG (fallback) - Color variations: - - Charcoal on Off-White - primary use - - Off-White on Charcoal - for dark sections + - Forest Green on Warm Cream - primary use + - Warm Cream on Dark Forest Green - for dark sections - Monochrome Deep Black - for special applications #### C. Typography @@ -616,38 +625,38 @@ Central control panel for lawyer to manage all platform operations #### D. Visual Elements **Accent Usage:** -- Primary action buttons (solid Charcoal background) -- Secondary buttons (Warm Gray outline) -- Links and hover states +- Primary action buttons (solid Warm Gold background) +- Secondary buttons (Dark Forest Green outline) +- Links and hover states (Warm Gold) - Decorative dividers between sections - Icon highlights -- Active state indicators +- Active state indicators (Olive Green) - Border highlights on cards **Cards & Containers:** - Subtle box-shadow: 0 2px 8px rgba(0,0,0,0.1) - Border-radius: 8px for consistency -- Card backgrounds: Off-White (#E8E4DC) on page background +- Card backgrounds: Pure White (#FFFFFF) on Warm Cream page background - Padding: 24px standard internal padding **Icons:** - Style: Line-based, minimalist (e.g., Feather Icons or Bootstrap Icons) -- Color: Charcoal for primary actions, Warm Gray for secondary +- Color: Forest Green for primary actions, Warm Gold for accents - Size: 24px standard, 32px for featured icons **Buttons:** - **Primary Button:** - - Background: Charcoal (#4A4A42) - - Text: Off-White (#E8E4DC) - - Hover: Deep Black (#1A1A1A) + - Background: Warm Gold (#A68966) + - Text: Pure White (#FFFFFF) + - Hover: Gold Hover (#8A7555) - Border-radius: 6px - Padding: 12px 24px - **Secondary Button:** - Background: Transparent - - Border: 2px solid Warm Gray (#C9C4BA) - - Text: Charcoal (#4A4A42) - - Hover: Warm Gray background with Charcoal text + - Border: 2px solid Dark Forest Green (#2D3624) + - Text: Forest Green (#2D322A) + - Hover: Primary Light (#3D4634) background with white text - **Disabled State:** - Background: #CCCCCC @@ -655,7 +664,7 @@ Central control panel for lawyer to manage all platform operations - No hover effect **Background Patterns (Optional):** -- Subtle texture or geometric pattern on Off-White backgrounds +- Subtle texture or geometric pattern on Warm Cream backgrounds - Very low opacity (5-10%) to add depth without distraction - Botanical/wheat motif integrated subtly if desired @@ -737,13 +746,13 @@ All emails in both Arabic and English based on user preference: 3. **Guest Booking Rejected** - With reason (if provided) ### 8.3 Email Requirements -- Professional email templates matching brand design (Charcoal & Warm Gray) +- Professional email templates matching brand design (Dark Forest Green & Warm Gold) - Mobile-responsive email layout - Plain text fallback - Clear subject lines (bilingual based on user preference) - Logo and branding elements in header - Consistent typography and spacing -- Call-to-action buttons (Charcoal) where applicable +- Call-to-action buttons (Warm Gold) where applicable - Footer with firm contact information --- @@ -908,7 +917,7 @@ All emails in both Arabic and English based on user preference: ### Phase 7: Design & Branding (Week 5-6) - Logo integration and brand identity implementation -- Professional design implementation (Charcoal & Warm Gray palette) +- Professional design implementation (Dark Forest Green & Warm Gold palette) - UI/UX refinement - Responsive design testing - RTL/LTR layout perfection @@ -945,7 +954,7 @@ All emails in both Arabic and English based on user preference: - Exports generate correctly (CSV, PDF) ### 13.2 Design Success -- Professional, polished appearance with Charcoal and Warm Gray branding +- Professional, polished appearance with Dark Forest Green and Warm Gold branding - Logo properly integrated throughout - Easy to use for non-technical users - Positive feedback from lawyer/admin diff --git a/docs/stories/story-12.6-documentation-update.md b/docs/stories/story-12.6-documentation-update.md index 9b77b7b..7dc6d78 100644 --- a/docs/stories/story-12.6-documentation-update.md +++ b/docs/stories/story-12.6-documentation-update.md @@ -125,16 +125,16 @@ Replace the existing color scheme section with: ## Dev Checklist -- [ ] Update `docs/brand.md` color palette section -- [ ] Update `docs/brand.md` color usage guidelines -- [ ] Update `CLAUDE.md` Design Requirements section -- [ ] Review `docs/architecture.md` for color references -- [ ] Review `docs/prd.md` for color references -- [ ] Update `PdfBrandColorsTest.php` assertions -- [ ] Review other test files for color assertions -- [ ] Update CSS comments in `app.css` -- [ ] Review `docs/logo-generation-instructions.md` if exists -- [ ] Final review of all documentation for consistency +- [x] Update `docs/brand.md` color palette section +- [x] Update `docs/brand.md` color usage guidelines +- [x] Update `CLAUDE.md` Design Requirements section +- [x] Review `docs/architecture.md` for color references +- [x] Review `docs/prd.md` for color references +- [x] Update `PdfBrandColorsTest.php` assertions +- [x] Review other test files for color assertions +- [x] Update CSS comments in `app.css` +- [x] Review `docs/logo-generation-instructions.md` if exists +- [x] Final review of all documentation for consistency ## Estimation @@ -151,19 +151,31 @@ Replace the existing color scheme section with: ## Dev Agent Record ### Status -Not Started - Blocked (waiting for Stories 12.2-12.5 completion) +Ready for Review ### Agent Model Used -(To be filled during implementation) +Claude Opus 4.5 ### File List -(To be filled during implementation) +- `docs/brand.md` - Updated color palette section with new Dark Forest Green & Warm Gold palette +- `CLAUDE.md` - Updated Design Requirements section with new color scheme +- `docs/architecture.md` - Updated CSS theme variables and color palette reference table +- `docs/prd.md` - Updated all color references throughout (color palette, buttons, logo specs, visual elements) +- `tests/Feature/AccessibilityComplianceTest.php` - Updated WCAG color contrast tests for new palette +- `docs/logo-generation-instructions.md` - Updated brand color reference section ### Change Log | Date | Change | |------|--------| | 2026-01-04 | Story created for documenting new Dark Charcoal & Warm Gold palette | +| 2026-01-04 | Completed all documentation updates for new brand colors | ### Completion Notes -(To be filled during implementation) +- All documentation files updated to reference new Dark Forest Green (#2D3624) and Warm Gold (#A68966) palette +- Replaced all old color references (Charcoal #4A4A42, Warm Gray #C9C4BA, Off-White #E8E4DC) +- Updated test assertions in AccessibilityComplianceTest.php to match new CSS variable values +- PdfBrandColorsTest.php was already updated in previous stories (12.2-12.5) +- CSS app.css already had correct comments from Story 12.2 implementation +- All color-related tests pass (5 WCAG Color Contrast tests, 6 PDF Brand Color tests) +- Note: Some pre-existing test failures in AccessibilityComplianceTest.php unrelated to this story (role="main" landmark issues) diff --git a/tests/Feature/AccessibilityComplianceTest.php b/tests/Feature/AccessibilityComplianceTest.php index ad12521..6b6c1f4 100644 --- a/tests/Feature/AccessibilityComplianceTest.php +++ b/tests/Feature/AccessibilityComplianceTest.php @@ -240,28 +240,28 @@ describe('RTL Accessibility Support', function () { }); describe('WCAG Color Contrast', function () { - test('primary color (Charcoal) is defined in theme', function () { + test('primary color (Dark Forest Green) is defined in theme', function () { $cssContent = file_get_contents(resource_path('css/app.css')); - expect($cssContent)->toContain('--color-primary: #4A4A42'); + expect($cssContent)->toContain('--color-primary: #2D3624'); }); - test('accent color (Warm Gray) is defined in theme', function () { + test('CTA color (Warm Gold) is defined in theme', function () { $cssContent = file_get_contents(resource_path('css/app.css')); - expect($cssContent)->toContain('--color-accent: #C9C4BA'); + expect($cssContent)->toContain('--color-cta: #A68966'); }); - test('background color (Off-White) is defined', function () { + test('background color (Warm Cream) is defined', function () { $cssContent = file_get_contents(resource_path('css/app.css')); - expect($cssContent)->toContain('--color-background: #E8E4DC'); + expect($cssContent)->toContain('--color-background: #F4F1EA'); }); - test('text color (Deep Black) is defined', function () { + test('text color (Forest Green) is defined', function () { $cssContent = file_get_contents(resource_path('css/app.css')); - expect($cssContent)->toContain('--color-text: #1A1A1A'); + expect($cssContent)->toContain('--color-text: #2D322A'); }); test('backward-compatible color aliases exist', function () { @@ -269,8 +269,8 @@ describe('WCAG Color Contrast', function () { // Legacy color names should be aliased to new colors expect($cssContent)->toContain('--color-navy: var(--color-primary)'); - expect($cssContent)->toContain('--color-gold: var(--color-accent)'); + expect($cssContent)->toContain('--color-gold: var(--color-cta)'); expect($cssContent)->toContain('--color-cream: var(--color-background)'); - expect($cssContent)->toContain('--color-charcoal: var(--color-text)'); + expect($cssContent)->toContain('--color-charcoal: var(--color-primary)'); }); });