Naser Mansour
0f9d12c3cf
Adds docs/tasks/ (16 epics + 102 stories converted to task/subtask files with statuses.md as the new status source of truth) and docs/ux-design.md (retrospective design-system reference), and points CLAUDE.md at them. docs/prd.md and docs/architecture.md are kept as BMAD wrote them; the legacy docs/stories/, docs/epics/, docs/qa/gates/ and .bmad-core/ stay in place as historical/traceability records, superseded but not deleted. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
39 lines
1.6 KiB
Markdown
39 lines
1.6 KiB
Markdown
---
|
|
id: 9-4
|
|
title: 9-4 Component Styling - Buttons
|
|
status: QA Review
|
|
date: 2026-09-27
|
|
parent: 9
|
|
---
|
|
|
|
## Description
|
|
|
|
As a user, I want consistent, professional button styling, So that interactive elements are clear and visually appealing. Flux UI buttons accept a variant prop. We extend Flux by: 1. Using Flux's <flux:button> component as-is for structure 2. Applying brand colors via the variant prop or custom CSS classes 3. NOT creating wrapper components unless absolutely necessary. Full implementation history: docs/stories/story-9.4-component-styling-buttons.md
|
|
|
|
## Acceptance Criteria
|
|
|
|
- [ ] Background: Gold (`bg-gold` / #D4AF37)
|
|
- [ ] Text: Dark Navy Blue (`text-navy`)
|
|
- [ ] Hover: Light Gold (`hover:bg-gold-light` / #F4E4B8)
|
|
- [ ] Border-radius: 6px (`rounded-md`)
|
|
- [ ] Padding: 12px 24px (`px-6 py-3`)
|
|
- [ ] Background: Transparent
|
|
- [ ] Border: 2px solid Gold (`border-2 border-gold`)
|
|
- [ ] Text: Gold (`text-gold`)
|
|
- [ ] Hover: Gold background, Navy text (`hover:bg-gold hover:text-navy`)
|
|
- [ ] Background: #CCCCCC
|
|
- [ ] Text: #666666
|
|
- [ ] No hover effect
|
|
- [ ] Cursor: not-allowed
|
|
- [ ] Background: #E74C3C (`bg-danger`)
|
|
- [ ] Text: White
|
|
- [ ] Hover: Slightly darker (`hover:bg-danger/90`)
|
|
- [ ] Small: `px-4 py-2 text-sm` (for compact UI areas)
|
|
- [ ] Default: `px-6 py-3 text-base` (standard usage)
|
|
- [ ] Large: `px-8 py-4 text-lg` (hero CTAs)
|
|
- [ ] Loading states with Flux spinner component
|
|
- [ ] Focus states: Gold outline ring for accessibility (`focus:ring-2 focus:ring-gold focus:ring-offset-2`)
|
|
- [ ] Icon support: Buttons with leading/trailing icons
|
|
- [ ] Full-width variant for mobile forms
|
|
- [ ] Button groups with proper border-radius handling
|