Shadows

Shadow tokens create depth and hierarchy in your interface through consistent elevation levels.

Shadow Scale

Elevation Hierarchy

Use shadows to create visual layers and establish content hierarchy:

Component Examples

Interactive States

Usage

In CSS

.card {
  box-shadow: var(--token-shadows-sm);
}

.dropdown {
  box-shadow: var(--token-shadows-md);
}

.modal {
  box-shadow: var(--token-shadows-lg);
}

/* Hover effects */
.button:hover {
  box-shadow: var(--token-shadows-sm);
}

In JavaScript/TypeScript

import { tokens } from '@vibrant-ui/tokens';

// Convert shadow tokens to CSS
const getShadowCSS = (shadowToken: keyof typeof tokens.shadows) => {
  return tokens.shadows[shadowToken]
    .map(
      ({ offsetX, offsetY, blur, spread, transparency }) =>
        `${offsetX}px ${offsetY}px ${blur}px ${spread}px rgba(0, 0, 0, ${transparency})`,
    )
    .join(', ');
};

const cardStyle = {
  boxShadow: getShadowCSS('sm'),
};

With Vibrant UI Components

import { Card, Button, Modal } from '@vibrant-ui/components';

<Card shadow="sm">
  Card content
</Card>

<Button shadow="none">
  Flat button
</Button>

<Modal shadow="lg">
  Modal content
</Modal>

Guidelines

Elevation Levels

Use consistent elevation for similar components:

• none: Flush with background, no elevation
• sm: Subtle elevation for cards and buttons
• md: Medium elevation for dropdowns and tooltips
• lg: High elevation for modals and major overlays

Interaction States

Enhance interactivity with shadow transitions:

• Rest: Base shadow or no shadow
• Hover: Increase shadow for elevation feedback
• Active: Reduce or invert shadow for pressed effect
• Focus: Add colored shadow for accessibility

Performance

Optimize shadow rendering:

• Use CSS custom properties for consistency
• Avoid animating complex shadows frequently
• Consider reduced motion preferences
• Test on lower-end devices

Dark Mode

Shadows may need adjustment in dark themes:

• Reduce shadow opacity
• Consider using lighter shadows or borders
• Maintain relative elevation hierarchy