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

updates storys 12.2-12.6 for reimplimintation

Browse Source
This commit is contained in:
Naser Mansour
2026-01-04 01:39:38 +02:00
parent 61068e7eee
commit b2ff6df18e
6 changed files with 592 additions and 690 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/stories/story-12.2-core-css-theme-update.md
+91 -143
View File
@@ -1,28 +1,29 @@
# Story 12.2: Core CSS Theme Update - Olive Green Palette
# Story 12.2: Core CSS Theme Update - Dark Charcoal & Warm Gold Palette
## Story
**As a** developer
**I want to** update the Tailwind CSS theme to use the new olive green color palette
**So that** the application reflects the new LIBRA for Rights brand colors matching the botanical logo
**I want to** update the Tailwind CSS theme to use the new dark charcoal and warm gold color palette
**So that** the application reflects the refined LIBRA for Rights brand colors
## Acceptance Criteria
### AC1: Update Color Variables in `resources/css/app.css`
**Given** the current theme uses Charcoal/Warm Gray palette
**Given** the current theme uses Olive Green palette
**When** I update the `@theme` block
**Then** the following color mappings are applied:
| Old Variable | Old Hex | New Variable | New Hex |
|--------------|---------|--------------|---------|
| `--color-primary` | `#4A4A42` (Charcoal) | `--color-primary` | `#8AB357` (Olive Green) |
| `--color-accent` | `#C9C4BA` (Warm Gray) | `--color-accent` | `#A5C87A` (Light Olive) |
| `--color-accent-light` | `#E8E4DC` (Off-White) | `--color-accent-light` | `#C5D9A5` (Pale Olive) |
| `--color-background` | `#E8E4DC` (Off-White) | `--color-background` | `#E8E4DC` (Off-White) - unchanged |
| `--color-text` | `#1A1A1A` (Deep Black) | `--color-text` | `#1A1A1A` (Deep Black) - unchanged |
| Variable | New Hex | Usage |
|----------|---------|-------|
| `--color-primary` | `#1B1D1A` | Header/Footer backgrounds |
| `--color-cta` | `#A68966` | CTA buttons, links, accents |
| `--color-background` | `#F4F1EA` | Main page background |
| `--color-text` | `#2D322A` | Headings, body text |
| `--color-card` | `#FFFFFF` | Card backgrounds |
| `--color-active` | `#4A5D23` | Active states, language toggle |
### AC2: Add Olive Green Color Variants
### AC2: Add Color Variants for UI States
**Given** the new palette needs hover and active states
**When** I update the theme
@@ -30,63 +31,38 @@
| Variable | Hex | Usage |
|----------|-----|-------|
| `--color-primary` | `#8AB357` | Primary olive green |
| `--color-primary-hover` | `#7AA347` | Darker olive for hover |
| `--color-primary-dark` | `#6A9337` | Dark olive for active/pressed |
| `--color-primary-light` | `#B5D88A` | Light olive for highlights |
| `--color-accent` | `#A5C87A` | Secondary light olive |
| `--color-accent-light` | `#C5D9A5` | Pale olive for subtle backgrounds |
| `--color-primary-light` | `#2D322A` | Primary hover state |
| `--color-cta-hover` | `#8A7555` | Button hover state |
| `--color-cta-light` | `#C4A882` | Light CTA accent |
| `--color-active-hover` | `#5A7030` | Active state hover |
### AC2.1: Logo Badge Styling
### AC3: Update Button Styles
**Given** the logo has a beige background that contrasts with olive green headers/footers
**When** I add the logo badge styling
**Then** the following CSS class is defined:
| Class | Properties |
|-------|------------|
| `.logo-badge` | `border: 2px solid #1A1A1A; box-shadow: 4px 4px 6px rgba(26, 26, 26, 0.5);` |
This creates a "seal/stamp" effect for the logo on olive green backgrounds, making the beige background look intentional rather than mismatched.
### AC3: Maintain Backward Compatibility Aliases
**Given** existing components may use old color names
**When** the theme is updated
**Then** aliases are updated so existing classes continue to work:
- `--color-charcoal` → points to `--color-primary` (Olive Green)
- `--color-warm-gray` → points to `--color-accent` (Light Olive)
- Legacy navy/gold aliases remain for any residual references
### AC4: Update Button Styles
**Given** button classes use the primary color
**Given** button classes use the primary/accent colors
**When** theme is updated
**Then** `.btn-primary` and `.btn-secondary` use new olive palette:
- Primary: Olive Green background (`#8AB357`), Off-White text
- Primary Hover: Darker Olive (`#7AA347`)
- Secondary: Light Olive border, Deep Black text
**Then** `.btn-primary` and `.btn-secondary` use new palette:
- Primary: Warm Gold background (`#A68966`), White text
- Primary Hover: Darker Gold (`#8A7555`)
- Secondary: Dark Charcoal border, Dark text
- Hover states updated accordingly
### AC5: Update Form Focus States
### AC4: Update Form Focus States
**Given** form inputs have focus rings
**When** theme is updated
**Then** focus states use Olive Green:
- `focus:border-accent` → Light Olive border
- `focus:ring-accent` → Light Olive ring
- `focus:ring-primary` → Olive Green ring
**Then** focus states use Warm Gold:
- `focus:border-cta` → Warm Gold border
- `focus:ring-cta` → Warm Gold ring
### AC6: Update Link Colors
### AC5: Update Link Colors
**Given** links use accent colors
**When** theme is updated
**Then** link colors use olive palette:
- Default: Olive Green (`#8AB357`)
- Hover: Darker Olive (`#7AA347`)
- Visited: Primary Olive (unchanged)
**Then** link colors use warm gold:
- Default: Warm Gold (`#A68966`)
- Hover: Darker Gold (`#8A7555`)
### AC7: Status Colors Unchanged
### AC6: Status Colors Unchanged
**Given** status colors serve functional purposes
**When** theme is updated
@@ -95,25 +71,25 @@ This creates a "seal/stamp" effect for the logo on olive green backgrounds, maki
- `--color-danger: #E74C3C`
- `--color-warning: #F39C12`
### AC8: WCAG AA Contrast Compliance
### AC7: WCAG AA Contrast Compliance
**Given** accessibility requirements
**When** new colors are applied
**Then** all text/background combinations meet WCAG AA:
- Deep Black (`#1A1A1A`) on Off-White (`#E8E4DC`): ≥4.5:1 for body text
- Off-White on Olive Green (`#8AB357`): ≥4.5:1 for body text
- Deep Black on Light Olive (`#A5C87A`): Verify contrast ratio
- Text (`#2D322A`) on Warm Cream (`#F4F1EA`): ≥4.5:1 for body text
- White text on Dark Charcoal (`#1B1D1A`): ≥4.5:1 for body text
- White text on Warm Gold (`#A68966`): Verify contrast ratio
### AC9: Update Prose Class
### AC8: Update Prose Class
**Given** `.prose-brand` class exists for blog content
**When** theme is updated
**Then** prose colors use olive palette:
- Headings: Deep Black
- Links: Olive Green
- Body: Deep Black
**Then** prose colors use new palette:
- Headings: Forest Green (`#2D322A`)
- Links: Warm Gold (`#A68966`)
- Body: Forest Green (`#2D322A`)
### AC10: Build Succeeds
### AC9: Build Succeeds
**Given** CSS changes are made
**When** I run `npm run build`
@@ -126,60 +102,51 @@ This creates a "seal/stamp" effect for the logo on olive green backgrounds, maki
### New Color Palette Reference
| Color | Hex | RGB | Usage |
|-------|-----|-----|-------|
| Olive Green | `#8AB357` | rgb(138, 179, 87) | Primary brand color |
| Darker Olive | `#7AA347` | rgb(122, 163, 71) | Hover states |
| Dark Olive | `#6A9337` | rgb(106, 147, 55) | Active/pressed states |
| Light Olive | `#A5C87A` | rgb(165, 200, 122) | Secondary/accent |
| Pale Olive | `#C5D9A5` | rgb(197, 217, 165) | Subtle backgrounds |
| Bright Olive | `#B5D88A` | rgb(181, 216, 138) | Highlights |
| Off-White | `#E8E4DC` | rgb(232, 228, 220) | Backgrounds (unchanged) |
| Deep Black | `#1A1A1A` | rgb(26, 26, 26) | Text (unchanged) |
| Color Name | Hex | RGB | Usage |
|------------|-----|-----|-------|
| Dark Charcoal | `#1B1D1A` | rgb(27, 29, 26) | Header/Footer backgrounds |
| Warm Gold | `#A68966` | rgb(166, 137, 102) | CTA buttons, links |
| Warm Cream | `#F4F1EA` | rgb(244, 241, 234) | Main page background |
| Forest Green | `#2D322A` | rgb(45, 50, 42) | Text color |
| Pure White | `#FFFFFF` | rgb(255, 255, 255) | Card backgrounds |
| Olive Green | `#4A5D23` | rgb(74, 93, 35) | Active states |
| Gold Hover | `#8A7555` | rgb(138, 117, 85) | Button hover |
| Gold Light | `#C4A882` | rgb(196, 168, 130) | Light accents |
| Olive Hover | `#5A7030` | rgb(90, 112, 48) | Active hover |
### Contrast Verification
Use WebAIM Contrast Checker to verify:
- Deep Black (#1A1A1A) on Off-White (#E8E4DC): ~12.5:1 (passes AAA)
- Off-White (#E8E4DC) on Olive Green (#8AB357): ~3.2:1 (check if passes)
- Deep Black (#1A1A1A) on Light Olive (#A5C87A): ~8.5:1 (passes AAA)
- Forest Green (#2D322A) on Warm Cream (#F4F1EA): ~10:1 (passes AAA)
- White (#FFFFFF) on Dark Charcoal (#1B1D1A): ~17:1 (passes AAA)
- White (#FFFFFF) on Warm Gold (#A68966): ~3.5:1 (passes AA for large text)
**Note:** If Off-White on Olive Green doesn't meet 4.5:1, use Deep Black text on olive backgrounds instead.
### Logo Badge Styling
```css
/* Badge styling for logo on olive backgrounds */
.logo-badge {
border: 2px solid var(--color-text);
box-shadow: 4px 4px 6px rgba(26, 26, 26, 0.5);
}
```
**Note:** For small text on Warm Gold buttons, use white text as it provides sufficient contrast for button contexts.
### CSS Theme Block Example
```css
@theme {
/* Primary Olive Green Palette */
--color-primary: #8AB357;
--color-primary-hover: #7AA347;
--color-primary-dark: #6A9337;
--color-primary-light: #B5D88A;
/* Primary Dark Charcoal Palette */
--color-primary: #1B1D1A;
--color-primary-light: #2D322A;
/* Secondary/Accent */
--color-accent: #A5C87A;
--color-accent-light: #C5D9A5;
--color-accent-content: #A5C87A;
--color-accent-foreground: #1A1A1A;
/* CTA Warm Gold */
--color-cta: #A68966;
--color-cta-hover: #8A7555;
--color-cta-light: #C4A882;
/* Neutrals (unchanged) */
--color-background: #E8E4DC;
--color-text: #1A1A1A;
/* Active Olive Green */
--color-active: #4A5D23;
--color-active-hover: #5A7030;
/* Backward compatibility */
--color-charcoal: var(--color-primary);
--color-warm-gray: var(--color-accent);
--color-off-white: var(--color-background);
/* Neutrals */
--color-background: #F4F1EA;
--color-text: #2D322A;
--color-card: #FFFFFF;
/* For text on dark backgrounds */
--color-off-white: #F4F1EA;
/* Status colors (unchanged) */
--color-success: #27AE60;
@@ -190,66 +157,47 @@ Use WebAIM Contrast Checker to verify:
## Dev Checklist
- [x] Update `@theme` block with new olive green values
- [x] Add olive green variants (hover, dark, light)
- [x] Add `.logo-badge` class with border and shadow
- [x] Update backward-compatible aliases
- [x] Update `.btn-primary` styles
- [x] Update `.btn-secondary` styles
- [x] Update form focus states
- [x] Update link colors
- [x] Update `.prose-brand` class
- [x] Update skip-link focus styles
- [x] Update timeline-dot color
- [x] Update skeleton loader color
- [x] Verify status colors unchanged
- [ ] Update `@theme` block with new color values
- [ ] Add color variants (hover, light)
- [ ] Update `.btn-primary` styles to use CTA colors
- [ ] Update `.btn-secondary` styles
- [ ] Update form focus states
- [ ] Update link colors
- [ ] Update `.prose-brand` class
- [ ] Update skip-link focus styles
- [ ] Verify status colors unchanged
- [ ] Run contrast checker on all combinations
- [x] Run `npm run build` successfully
- [ ] Run `npm run build` successfully
- [ ] Visual test in browser
## Estimation
**Complexity:** Low-Medium
**Risk:** Low - CSS-only changes with aliases for backward compatibility
**Risk:** Low - CSS-only changes
## Dependencies
- Can run in parallel with Story 12.1 (Logo Deployment)
- Story 12.1 (Logo Deployment) - Completed
---
## Dev Agent Record
### Agent Model Used
Claude Opus 4.5
(To be filled during implementation)
### Status
In Progress - Pending Visual Test & Contrast Check
Not Started - Ready for Implementation
### File List
| File | Action |
|------|--------|
| `resources/css/app.css` | Modified |
| `resources/css/app.css` | To be modified |
### Change Log
| Date | Change |
|------|--------|
| 2026-01-04 | Updated @theme block with olive green palette (AC1, AC2) |
| 2026-01-04 | Added .logo-badge class for seal/stamp effect (AC2.1) |
| 2026-01-04 | Updated backward compatibility aliases (AC3) |
| 2026-01-04 | Updated .btn-primary and .btn-secondary styles (AC4) |
| 2026-01-04 | Form focus states auto-updated via CSS variables (AC5) |
| 2026-01-04 | Updated .prose-brand link colors (AC6, AC9) |
| 2026-01-04 | Verified status colors unchanged (AC7) |
| 2026-01-04 | Updated skip-link focus styles for olive palette |
| 2026-01-04 | Timeline-dot and skeleton loader auto-updated via CSS variables |
| 2026-01-04 | Story updated with new Dark Charcoal & Warm Gold palette |
### Completion Notes
- All CSS changes implemented in `resources/css/app.css`
- Colors use CSS variables for consistency across components
- Backward compatibility maintained via aliases (--color-charcoal, --color-warm-gray, --color-navy, --color-gold)
- Skip-link updated to use `bg-primary text-off-white` for better visibility
- Build successful: `npm run build` completed without errors (258.29 kB CSS output)
### Debug Log References
None
(To be filled during implementation)