potatobranding-components

name: potato:branding-components description: Use when creating or styling UI components in the web-react application

Potato Cannon UI Components & Branding

This skill documents the UI components, theme variables, and styling conventions for the web-react application. Use this as a reference when creating or modifying UI elements.

Theme Variables

All colors are defined in web-react/src/index.css under the @theme block:

Background Colors

Text Colors

Accent Colors

Border & Other

Form Components

Input Component

Location: web-react/src/components/ui/input.tsx

Standard input styling:

import { Input } from "@/components/ui/input"

<Input
  placeholder="Enter value"
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

Base classes (reference only - use the component):

border-border/50 bg-bg-tertiary/50 rounded-md h-9
focus-visible:border-border focus-visible:ring-border/30 focus-visible:ring-[2px]
placeholder:text-text-muted

Select Component

Location: web-react/src/components/ui/select.tsx

Standard select dropdown:

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

<Select value={value} onValueChange={setValue}>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Select option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
  </SelectContent>
</Select>

Size variants:

• Default: h-9 (36px)
• Small: size="sm" → h-8 (32px) - use for table rows

Important: Do NOT add custom background or border classes to Select components. The base component styles match the Input component automatically.

Textarea Component

Location: web-react/src/components/ui/textarea.tsx

import { Textarea } from "@/components/ui/textarea"

<Textarea
  placeholder="Enter description"
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

Button Component

Location: web-react/src/components/ui/button.tsx

import { Button } from "@/components/ui/button"

<Button>Default</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>
<Button size="sm">Small</Button>
<Button size="icon">Icon only</Button>

Variants:

• default - Primary action, filled background
• outline - Secondary action, bordered
• ghost - Tertiary action, no border
• destructive - Dangerous action, red background

Modal/Dialog Component

Location: web-react/src/components/ui/dialog.tsx

See the potato:creating-modals skill for detailed modal patterns.

Basic structure:

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"

<Dialog open={isOpen} onOpenChange={setIsOpen}>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Title</DialogTitle>
      <DialogDescription>Description</DialogDescription>
    </DialogHeader>
    {/* Content */}
    <DialogFooter>
      <Button variant="outline" onClick={() => setIsOpen(false)}>Cancel</Button>
      <Button onClick={handleSubmit}>Confirm</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Badge Component

Location: web-react/src/components/ui/badge.tsx

import { Badge } from "@/components/ui/badge"

<Badge>Default</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>

Focus States

All interactive elements should use consistent focus styling:

focus-visible:border-border focus-visible:ring-border/30 focus-visible:ring-[2px]

This provides:

• Border color change to border (from border/50)
• 2px ring with 30% opacity border color
• Visible only on keyboard focus (not mouse click)

Hover States

Use bg-bg-hover for hover backgrounds:

className="hover:bg-bg-hover"

For text hover:

className="hover:text-text-primary"

Common Patterns

Card with hover effect

<div className="bg-bg-secondary border border-border rounded-lg p-4 hover:bg-bg-hover transition-colors cursor-pointer">
  {/* content */}
</div>

Muted label with value

<div className="space-y-1">
  <span className="text-sm text-text-muted">Label</span>
  <p className="text-text-primary">Value</p>
</div>

Icon + text row

<div className="flex items-center gap-2 text-text-secondary">
  <Icon className="h-4 w-4" />
  <span>Text</span>
</div>

Checklist

When creating UI components:

• Use theme variables from this document (not hardcoded colors)
• Use existing UI components from @/components/ui/
• Apply consistent focus states with focus-visible:ring-[2px]
• Use bg-bg-hover for hover backgrounds
• Use text-text-muted for placeholder text
• Use border-border for all borders
• Test in dark mode (the app is dark-only)
• Verify keyboard navigation works
• Check component looks correct at different sizes

Anti-Patterns

DO NOT:

• Use bg-popover, text-popover-foreground, bg-accent, text-accent-foreground - use our theme variables
• Add custom bg-bg-secondary border-border to Select components - base styles handle this
• Use ring-ring or border-ring - use ring-border and border-border
• Create new color values - use existing theme variables
• Override base component styles unless absolutely necessary