Shadows

Shadows in our design system create visual hierarchy and depth. Use them to indicate elevation, focus states, and interactive elements.

Shadow Levels

Six shadow levels provide progressively deeper elevation effects. Higher numbers create stronger, more pronounced shadows.

// Basic usage
<div className="bg-cn-1 rounded-cn-3 shadow-cn-2 p-cn-md">
  Card with light shadow
</div>

// No shadow
<div className="bg-cn-1 rounded-cn-3 shadow-cn-none p-cn-md">
  Flat card without shadow
</div>

Shadow level guidelines:

• shadow-cn-none - No shadow, flat appearance
• shadow-cn-1 - Subtle elevation for slightly raised elements
• shadow-cn-2 - Light shadow for cards and containers
• shadow-cn-3 - Medium shadow for elevated panels
• shadow-cn-4 - Prominent shadow for floating elements
• shadow-cn-5 - Strong shadow for modals and overlays
• shadow-cn-6 - Maximum elevation for top-level overlays

Interactive Shadows

Combine shadows with hover states to create depth on interaction:

// Button with shadow transition
<Button className="shadow-cn-2 hover:shadow-cn-4 transition-shadow">
  Interactive button
</Button>

// Card with elevation on hover
<div className="bg-cn-1 rounded-cn-3 shadow-cn-2 hover:shadow-cn-5 transition-shadow">
  Hover to see elevation
</div>

Focus Ring Shadows

Focus ring shadows provide visual feedback for keyboard navigation and form validation. These appear as colored rings around focused elements.

// Selected/focused state
<input className="focus:shadow-cn-ring-selected" />

// Success validation
<input className="shadow-cn-ring-success border-cn-success" />

// Warning state
<input className="shadow-cn-ring-warning border-cn-warning" />

// Error validation
<input className="shadow-cn-ring-error border-cn-danger" />

Ring shadow guidelines:

• shadow-cn-ring-selected - Default focus ring for interactive elements
• shadow-cn-ring-success - Success or valid state indication
• shadow-cn-ring-warning - Warning state for attention-required fields
• shadow-cn-ring-error - Error or invalid state indication

Focus States

Use focus:shadow-cn-ring-selected for default keyboard focus states. Combine with focus-visible: when you want rings only for keyboard navigation, not mouse clicks.

Common Patterns

Elevated Card

<div className="bg-cn-1 rounded-cn-3 shadow-cn-2 p-cn-lg">
  <Text variant="heading-base">Card Title</Text>
  <Text variant="body-normal">Card content</Text>
</div>

Modal Overlay

<div className="bg-cn-1 rounded-cn-3 shadow-cn-6 p-cn-xl">
  <Text variant="heading-base">Modal Dialog</Text>
  <Text variant="body-normal">Modal content</Text>
</div>

Best Practices

1. Use appropriate elevation - Higher shadows for elements that need more prominence
2. Maintain consistency - Use the same shadow levels for similar components
3. Combine with transitions - Add transition-shadow for smooth elevation changes
4. Layer thoughtfully - Ensure overlaying elements have higher shadow values
5. Ring shadows for states - Use colored ring shadows for focus and validation feedback

Quick Reference

Shadow Class	Use Case	Example
shadow-cn-none	Flat elements	Reset default shadows
shadow-cn-1	Subtle elevation	Slightly raised cards
shadow-cn-2	Standard cards	Default card elevation
shadow-cn-3	Elevated panels	Sidebar panels, sections
shadow-cn-4	Dropdowns	Menus, tooltips
shadow-cn-5	Dialogs	Modal backgrounds
shadow-cn-6	Top overlays	Full-screen modals
shadow-cn-ring-selected	Focus state	Interactive element focus
shadow-cn-ring-success	Valid input	Successful validation
shadow-cn-ring-warning	Warning state	Attention required
shadow-cn-ring-error	Invalid input	Error validation