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

complete story 12.6

This commit is contained in:
Naser Mansour 2026-01-04 02:31:30 +02:00
parent 45f029a1db
commit 149b3c4e53
7 changed files with 131 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
CLAUDE.md
View File

@ -173,7 +173,13 @@ Located in `app/Notifications/`:
- **Bilingual required:** All user-facing text needs Arabic and English - **Bilingual required:** All user-facing text needs Arabic and English
## Design Requirements (from PRD) ## 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) - **Bilingual:** Arabic (primary, RTL) / English (LTR)
- Professional, elegant aesthetic with botanical/wheat Libra logo - Professional, elegant aesthetic with botanical/wheat Libra logo
- See `docs/brand.md` for complete brand guidelines - See `docs/brand.md` for complete brand guidelines

28
docs/architecture.md
View File

@ -1814,10 +1814,16 @@ resources/lang/
--font-arabic: 'Cairo', sans-serif; --font-arabic: 'Cairo', sans-serif;
--font-english: 'Montserrat', sans-serif; --font-english: 'Montserrat', sans-serif;
/* Brand colors - Updated in Epic 10 */ /* Brand colors - Updated in Epic 12 */
--color-charcoal: #4A4A42; --color-dark-forest: #2D3624;
--color-warm-gray: #C9C4BA; --color-warm-gold: #A68966;
--color-off-white: #E8E4DC; --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; --color-deep-black: #1A1A1A;
} }
@ -3119,14 +3125,20 @@ select, separator, skeleton, switch, text, textarea, tooltip
### B. Color Palette ### 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. > See `docs/brand.md` for complete brand guidelines.
| Name | Hex | CSS Variable | Usage | | Name | Hex | CSS Variable | Usage |
|------|-----|--------------|-------| |------|-----|--------------|-------|
| Charcoal | `#4A4A42` | `--color-charcoal` | Primary brand, buttons | | Dark Forest Green | `#2D3624` | `--color-dark-forest` | Header/Footer backgrounds |
| Warm Gray | `#C9C4BA` | `--color-warm-gray` | Accents, borders | | Warm Gold | `#A68966` | `--color-warm-gold` | CTA buttons, links, accents |
| Off-White | `#E8E4DC` | `--color-off-white` | Backgrounds, cards | | 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 | | Deep Black | `#1A1A1A` | `--color-deep-black` | Text, footer |
| Success Green | `#27AE60` | `--color-success` | Success states | | Success Green | `#27AE60` | `--color-success` | Success states |
| Warning Red | `#E74C3C` | `--color-danger` | Error states | | Warning Red | `#E74C3C` | `--color-danger` | Error states |

26
docs/brand.md
View File

@ -29,11 +29,25 @@ The logo features a stylized botanical illustration within a square frame. Centr
## Color Palette ## Color Palette
### Primary Colors
| Color | Hex Code | Usage | | Color | Hex Code | Usage |
|-------|----------|-------| |-------|----------|-------|
| Charcoal | `#4A4A42` | Primary backgrounds, text | | Dark Forest Green | `#2D3624` | Header/Footer backgrounds |
| Warm Gray | `#C9C4BA` | Secondary backgrounds, accents | | Warm Gold | `#A68966` | CTA buttons, links, accents |
| Off-White | `#E8E4DC` | Light backgrounds | | 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 | | 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. Logo should not appear smaller than 40px in height for digital or 15mm for print.
### Backgrounds ### Backgrounds
- Use on light neutral backgrounds (off-white, warm gray) - Use on light neutral backgrounds (Warm Cream #F4F1EA, Pure White #FFFFFF)
- May be reversed to light color on dark charcoal backgrounds - May be reversed to light color on Dark Forest Green (#2D3624) backgrounds
- Avoid busy or patterned backgrounds - Avoid busy or patterned backgrounds
### Badge Style (for colored 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) - Border: 2px solid Deep Black (#1A1A1A)
- Shadow: 4px 4px 6px rgba(26, 26, 26, 0.5) - Shadow: 4px 4px 6px rgba(26, 26, 26, 0.5)
- This creates a "seal/stamp" effect that frames the logo professionally - This creates a "seal/stamp" effect that frames the logo professionally

17
docs/logo-generation-instructions.md
View File

@ -10,9 +10,9 @@ The following SVG files have been updated with the new LIBRA for Rights botanica
| Source File | Purpose | | Source File | Purpose |
|-------------|---------| |-------------|---------|
| `public/images/logo.svg` | Primary logo (Deep Black on light backgrounds) | | `public/images/logo.svg` | Primary logo (Forest Green on light backgrounds) |
| `public/images/logo-reversed.svg` | Reversed logo (Off-White on dark backgrounds) | | `public/images/logo-reversed.svg` | Reversed logo (Warm Cream on dark backgrounds) |
| `public/images/logo-mono.svg` | Monochrome logo (Charcoal, single color) | | `public/images/logo-mono.svg` | Monochrome logo (Deep Black, single color) |
| `public/favicon.svg` | Favicon source | | `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 | | Color | Hex Code | Usage |
|-------|----------|-------| |-------|----------|-------|
| Deep Black | `#1A1A1A` | Primary logo artwork | | Dark Forest Green | `#2D3624` | Header/Footer backgrounds |
| Charcoal | `#4A4A42` | Monochrome logo, text | | Warm Gold | `#A68966` | CTA buttons, links, accents |
| Warm Gray | `#C9C4BA` | Secondary accents | | Warm Cream | `#F4F1EA` | Main page background, reversed logo |
| Off-White | `#E8E4DC` | Reversed logo artwork | | 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* *Generated for Story 10.5: Logo and SVG Assets Update*
*Updated for Story 12.6: Brand Documentation Update (Dark Charcoal & Warm Gold)*

67
docs/prd.md
View File

@ -83,7 +83,7 @@ Libra Law Firm requires a professional, bilingual (Arabic/English) web platform
- Highly professional aesthetic - Highly professional aesthetic
- Detail-oriented with polished elements - Detail-oriented with polished elements
- Clean lines and sophisticated typography - 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 - Libra scales logo prominently displayed
- Elegant, refined visual elements - Elegant, refined visual elements
- Easy navigation despite sophistication - Easy navigation despite sophistication
@ -462,7 +462,7 @@ Central control panel for lawyer to manage all platform operations
- Responsive design for tablet use - Responsive design for tablet use
- Arabic-first with English toggle - Arabic-first with English toggle
- Clear visual hierarchy - 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 - Clear status indicators
- Mobile-friendly - Mobile-friendly
- Consistent with main site design - 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 #### 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. > See `docs/brand.md` for complete and current brand guidelines.
**Primary Colors:** **Primary Colors:**
- **Charcoal:** #4A4A42 - **Dark Forest Green:** #2D3624
- Usage: Primary brand color, buttons, links, headings - Usage: Header/Footer backgrounds
- Creates professional, grounded atmosphere - Creates professional, grounded atmosphere
- **Warm Gray:** #C9C4BA - **Warm Gold:** #A68966
- Usage: Accent elements, secondary buttons, borders, dividers - Usage: CTA buttons, links, accents
- Represents sophistication, balance, legal authority - Represents sophistication, balance, legal authority
- **Forest Green:** #2D322A
- Usage: Headings, body text
- Creates refined, professional tone
**Supporting Colors:** **Supporting Colors:**
- **Off-White:** #E8E4DC (backgrounds, card backgrounds, hover states) - **Warm Cream:** #F4F1EA (main page background)
- **Deep Black:** #1A1A1A (text, footer, high-contrast elements) - **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) - **Success Green:** #27AE60 (approved status, success messages)
- **Warning Red:** #E74C3C (rejected status, error messages) - **Warning Red:** #E74C3C (rejected status, error messages)
- **Pending Yellow:** #F39C12 (pending status indicators) - **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 - Clear space: Minimum 20px padding on all sides
- Acceptable formats: SVG (primary), PNG (fallback) - Acceptable formats: SVG (primary), PNG (fallback)
- Color variations: - Color variations:
- Charcoal on Off-White - primary use - Forest Green on Warm Cream - primary use
- Off-White on Charcoal - for dark sections - Warm Cream on Dark Forest Green - for dark sections
- Monochrome Deep Black - for special applications - Monochrome Deep Black - for special applications
#### C. Typography #### C. Typography
@ -616,38 +625,38 @@ Central control panel for lawyer to manage all platform operations
#### D. Visual Elements #### D. Visual Elements
**Accent Usage:** **Accent Usage:**
- Primary action buttons (solid Charcoal background) - Primary action buttons (solid Warm Gold background)
- Secondary buttons (Warm Gray outline) - Secondary buttons (Dark Forest Green outline)
- Links and hover states - Links and hover states (Warm Gold)
- Decorative dividers between sections - Decorative dividers between sections
- Icon highlights - Icon highlights
- Active state indicators - Active state indicators (Olive Green)
- Border highlights on cards - Border highlights on cards
**Cards & Containers:** **Cards & Containers:**
- Subtle box-shadow: 0 2px 8px rgba(0,0,0,0.1) - Subtle box-shadow: 0 2px 8px rgba(0,0,0,0.1)
- Border-radius: 8px for consistency - 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 - Padding: 24px standard internal padding
**Icons:** **Icons:**
- Style: Line-based, minimalist (e.g., Feather Icons or Bootstrap 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 - Size: 24px standard, 32px for featured icons
**Buttons:** **Buttons:**
- **Primary Button:** - **Primary Button:**
- Background: Charcoal (#4A4A42) - Background: Warm Gold (#A68966)
- Text: Off-White (#E8E4DC) - Text: Pure White (#FFFFFF)
- Hover: Deep Black (#1A1A1A) - Hover: Gold Hover (#8A7555)
- Border-radius: 6px - Border-radius: 6px
- Padding: 12px 24px - Padding: 12px 24px
- **Secondary Button:** - **Secondary Button:**
- Background: Transparent - Background: Transparent
- Border: 2px solid Warm Gray (#C9C4BA) - Border: 2px solid Dark Forest Green (#2D3624)
- Text: Charcoal (#4A4A42) - Text: Forest Green (#2D322A)
- Hover: Warm Gray background with Charcoal text - Hover: Primary Light (#3D4634) background with white text
- **Disabled State:** - **Disabled State:**
- Background: #CCCCCC - Background: #CCCCCC
@ -655,7 +664,7 @@ Central control panel for lawyer to manage all platform operations
- No hover effect - No hover effect
**Background Patterns (Optional):** **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 - Very low opacity (5-10%) to add depth without distraction
- Botanical/wheat motif integrated subtly if desired - 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) 3. **Guest Booking Rejected** - With reason (if provided)
### 8.3 Email Requirements ### 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 - Mobile-responsive email layout
- Plain text fallback - Plain text fallback
- Clear subject lines (bilingual based on user preference) - Clear subject lines (bilingual based on user preference)
- Logo and branding elements in header - Logo and branding elements in header
- Consistent typography and spacing - Consistent typography and spacing
- Call-to-action buttons (Charcoal) where applicable - Call-to-action buttons (Warm Gold) where applicable
- Footer with firm contact information - 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) ### Phase 7: Design & Branding (Week 5-6)
- Logo integration and brand identity implementation - 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 - UI/UX refinement
- Responsive design testing - Responsive design testing
- RTL/LTR layout perfection - RTL/LTR layout perfection
@ -945,7 +954,7 @@ All emails in both Arabic and English based on user preference:
- Exports generate correctly (CSV, PDF) - Exports generate correctly (CSV, PDF)
### 13.2 Design Success ### 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 - Logo properly integrated throughout
- Easy to use for non-technical users - Easy to use for non-technical users
- Positive feedback from lawyer/admin - Positive feedback from lawyer/admin

40
docs/stories/story-12.6-documentation-update.md
View File

@ -125,16 +125,16 @@ Replace the existing color scheme section with:
## Dev Checklist ## Dev Checklist
- [ ] Update `docs/brand.md` color palette section - [x] Update `docs/brand.md` color palette section
- [ ] Update `docs/brand.md` color usage guidelines - [x] Update `docs/brand.md` color usage guidelines
- [ ] Update `CLAUDE.md` Design Requirements section - [x] Update `CLAUDE.md` Design Requirements section
- [ ] Review `docs/architecture.md` for color references - [x] Review `docs/architecture.md` for color references
- [ ] Review `docs/prd.md` for color references - [x] Review `docs/prd.md` for color references
- [ ] Update `PdfBrandColorsTest.php` assertions - [x] Update `PdfBrandColorsTest.php` assertions
- [ ] Review other test files for color assertions - [x] Review other test files for color assertions
- [ ] Update CSS comments in `app.css` - [x] Update CSS comments in `app.css`
- [ ] Review `docs/logo-generation-instructions.md` if exists - [x] Review `docs/logo-generation-instructions.md` if exists
- [ ] Final review of all documentation for consistency - [x] Final review of all documentation for consistency
## Estimation ## Estimation
@ -151,19 +151,31 @@ Replace the existing color scheme section with:
## Dev Agent Record ## Dev Agent Record
### Status ### Status
Not Started - Blocked (waiting for Stories 12.2-12.5 completion) Ready for Review
### Agent Model Used ### Agent Model Used
(To be filled during implementation) Claude Opus 4.5
### File List ### 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 ### Change Log
| Date | Change | | Date | Change |
|------|--------| |------|--------|
| 2026-01-04 | Story created for documenting new Dark Charcoal & Warm Gold palette | | 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 ### 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)

20
tests/Feature/AccessibilityComplianceTest.php
View File

@ -240,28 +240,28 @@ describe('RTL Accessibility Support', function () {
}); });
describe('WCAG Color Contrast', 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')); $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')); $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')); $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')); $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 () { 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 // Legacy color names should be aliased to new colors
expect($cssContent)->toContain('--color-navy: var(--color-primary)'); 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-cream: var(--color-background)');
expect($cssContent)->toContain('--color-charcoal: var(--color-text)'); expect($cssContent)->toContain('--color-charcoal: var(--color-primary)');
}); });
}); });