feat: add distinct accent-staged color for staged items

Introduce a new accent-staged color (#F28F16 orange) to visually
distinguish staged changes from selected items. Applied to:
- Card border when bug status is staged
- Assignee button border when assignee is staged

This improves clarity between selection state and pending changes.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: msujaws

src/components/Board/Card.test.tsx

@@ -224,6 +224,20 @@ describe('Card', () => {
 
       expect(screen.getByText(/staged/i)).toBeInTheDocument()
     })
+
+    it('should show staged border with accent-staged color when status is staged', () => {
+      const { container } = render(<Card bug={mockBug} isStaged={true} />)
+
+      const card = container.firstChild as HTMLElement
+      expect(card.className).toContain('ring-accent-staged')
+    })
+
+    it('should not show staged border when isStaged is false', () => {
+      const { container } = render(<Card bug={mockBug} isStaged={false} />)
+
+      const card = container.firstChild as HTMLElement
+      expect(card.className).not.toContain('ring-accent-staged')
+    })
   })
 
   describe('interaction', () => {
@@ -468,7 +482,7 @@ describe('Card', () => {
       expect(onClick).not.toHaveBeenCalled()
     })
 
-    it('should show isAssigneeStaged indicator when assignee is staged', () => {
+    it('should show isAssigneeStaged indicator with accent-staged border when assignee is staged', () => {
       render(
         <Card
           bug={mockBug}
@@ -478,9 +492,23 @@ describe('Card', () => {
         />,
       )
 
-      // The person icon button should have a visual indicator
+      // The person icon button should have accent-staged border
+      const button = screen.getByLabelText('Change assignee')
+      expect(button.className).toContain('ring-accent-staged')
+    })
+
+    it('should not show staged border on assignee button when assignee is not staged', () => {
+      render(
+        <Card
+          bug={mockBug}
+          allAssignees={mockAssignees}
+          onAssigneeChange={vi.fn()}
+          isAssigneeStaged={false}
+        />,
+      )
+
       const button = screen.getByLabelText('Change assignee')
-      expect(button.className).toContain('ring')
+      expect(button.className).not.toContain('ring-accent-staged')
     })
 
     it('should open picker when Space key is pressed on selected card', async () => {

src/components/Board/Card.tsx

@@ -118,7 +118,7 @@ export function Card({
       return 'ring-2 ring-accent-primary shadow-xl'
     }
     if (isStaged) {
-      return 'ring-2 ring-accent-primary/50'
+      return 'ring-2 ring-accent-staged'
     }
     return 'hover:shadow-xl'
   }
@@ -192,7 +192,7 @@ export function Card({
             aria-label="Change assignee"
             onClick={handleAssigneeButtonClick}
             className={`flex items-center rounded p-0.5 transition-colors hover:bg-bg-tertiary hover:text-text-primary ${
-              isAssigneeStaged ? 'ring-2 ring-accent-primary/50' : ''
+              isAssigneeStaged ? 'ring-2 ring-accent-staged' : ''
             }`}
           >
             <span className="material-icons text-sm">person</span>

tailwind.config.js

@@ -14,6 +14,7 @@ export default {
         'accent-success': '#10b981',
         'accent-error': '#ef4444',
         'accent-warning': '#f59e0b',
+        'accent-staged': '#F28F16',
 
         // Text colors
         'text-primary': '#f5f5f5',