libra/docs/stories/story-10.1-core-css-theme-update.md

Story 10.1: Core CSS Theme Update

Story

As a developer I want to update the Tailwind CSS theme color variables So that the application uses the new LIBRA for Rights brand palette

Acceptance Criteria

AC1: Update Color Variables in resources/css/app.css

Given the current theme uses Navy Blue + Gold palette When I update the @theme block Then the following color mappings are applied:

Old Variable	Old Hex	New Variable	New Hex
--color-navy	#0A1F44	--color-primary	#4A4A42 (Charcoal)
--color-gold	#D4AF37	--color-accent	#C9C4BA (Warm Gray)
--color-gold-light	#F4E4B8	--color-accent-light	#E8E4DC (Off-White)
--color-cream	#F9F7F4	--color-background	#E8E4DC (Off-White)
--color-charcoal	#2C3E50	--color-text	#1A1A1A (Deep Black)

AC2: Maintain Backward Compatibility Aliases

Given existing components use navy, gold, cream class names When the theme is updated Then aliases are created so existing classes continue to work:

• --color-navy → points to --color-primary (Charcoal)
• --color-gold → points to --color-accent (Warm Gray)
• --color-gold-light → points to --color-accent-light (Off-White)
• --color-cream → points to --color-background (Off-White)
• --color-charcoal → points to --color-text (Deep Black)

AC3: Update Semantic Aliases

Given semantic aliases exist for components When theme is updated Then these mappings are correct:

• --color-primary → #4A4A42 (Charcoal)
• --color-accent → #C9C4BA (Warm Gray)
• --color-accent-content → #C9C4BA (Warm Gray)
• --color-accent-foreground → #4A4A42 (Charcoal)
• --color-background → #E8E4DC (Off-White)
• --color-text → #1A1A1A (Deep Black)

AC4: Update Button Styles

Given button classes use gold/navy colors When theme is updated Then .btn-primary and .btn-secondary use new palette:

• Primary: Charcoal background, Off-White text
• Secondary: Warm Gray border, Charcoal text
• Hover states updated accordingly

AC5: Update Form Focus States

Given form inputs have gold focus rings When theme is updated Then focus states use Warm Gray:

• focus:border-gold → Warm Gray border
• focus:ring-gold → Warm Gray ring

AC6: Update Prose Class

Given .prose-navy class exists for blog content When theme is updated Then rename to .prose-brand or update colors:

• Headings: Charcoal
• Links: Warm Gray
• Body: Deep Black

AC7: Status Colors Unchanged

Given status colors serve functional purposes When theme is updated Then these remain unchanged:

• --color-success: #27AE60
• --color-danger: #E74C3C
• --color-warning: #F39C12

AC8: 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 Charcoal (#4A4A42): ≥4.5:1 for body text
• Warm Gray (#C9C4BA) usage verified for sufficient contrast

Technical Notes

Files to Modify

• resources/css/app.css - Main theme file

Color Reference (from docs/brand.md)

Color	Hex	Usage
Charcoal	#4A4A42	Primary backgrounds, text
Warm Gray	#C9C4BA	Secondary backgrounds, accents
Off-White	#E8E4DC	Light backgrounds
Deep Black	#1A1A1A	Logo artwork, headlines

Contrast Verification

Use WebAIM Contrast Checker or similar tool to verify:

• Deep Black on Off-White: ~12.5:1 (passes AAA)
• Off-White on Charcoal: ~4.8:1 (passes AA)
• Charcoal on Off-White: ~4.8:1 (passes AA)

Dev Checklist

• Update @theme block with new color values
• Create backward-compatible aliases
• Update semantic aliases
• Update .btn-primary styles
• Update .btn-secondary styles
• Update form focus states (input, textarea, select, checkbox, radio)
• Update .prose-navy → .prose-brand
• Update skip-link focus styles
• Update timeline-dot color
• Update skeleton loader color
• Verify status colors unchanged
• Run contrast checker on all combinations
• Run npm run build successfully
• Visual test in browser (both light and dark mode if applicable)

Estimation

Complexity: Low Risk: Low - CSS-only changes with aliases for backward compatibility