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>
1.6 KiB
1.6 KiB
id, title, status, date, parent
| id | title | status | date | parent |
|---|---|---|---|---|
| 9-4 | 9-4 Component Styling - Buttons | QA Review | 2026-09-27 | 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