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

2026-01-03 03:10:49 +02:00
parent 5a19903e30
commit 19f6386532
7 changed files with 986 additions and 83 deletions
@@ -0,0 +1,131 @@
+# 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