Drop Shadow

A four-step elevation scale. Higher shadows signal more prominence and further distance from the canvas. All values are tuned for the Noir dark theme — the higher opacity compensates for the low-contrast dark-on-dark stacking.

Example

--diwa-shadow-sm

Badges, chips, subtle cards

--diwa-shadow-md

Standard cards, popovers, sticky elements

--diwa-shadow-lg

Modals, drawers, dialogs

--diwa-shadow-xl

Toasts, context menus, high-priority overlays

Token	Value	Use
--diwa-shadow-sm	0 1px 2px rgba(0,0,0,0.4)	Badges, chips, subtle cards
--diwa-shadow-md	0 4px 12px rgba(0,0,0,0.5)	Standard cards, popovers, sticky elements
--diwa-shadow-lg	0 8px 24px rgba(0,0,0,0.6)	Modals, drawers, dialogs
--diwa-shadow-xl	0 16px 48px rgba(0,0,0,0.7)	Toasts, context menus, high-priority overlays

Usage

✓Prefer background-color hierarchy (base → surface) over shadows to differentiate sibling panels.
✓Use the same shadow level for all components arranged in the same row.
✓Reserve shadows for elements that float above content — flyouts, toasts, navigation menus.
✓Use md for sticky or fixed elements such as headers and toolbars.
✓Use lg or xl for high-priority overlays like modals and dialogs.

Don't

✕Don't apply shadows to elements that are flush with their parent background.
✕Don't mix different shadow levels within the same horizontal group of cards.
✕Don't use drop shadow as the only visual differentiator — always pair with a background color change.
✕Don't use xl for decorative purposes; reserve it for surfaces that demand immediate attention.

Styles

All shadow tokens are available as typed JS style objects from @diwacopilot/components/styles:

import {
  dropShadowSmStyle,
  dropShadowMdStyle,
  dropShadowLgStyle,
  dropShadowXlStyle,
} from '@diwacopilot/components/styles';

/* CSS */
.modal {
  box-shadow: var(--diwa-shadow-lg);
}

.card:hover {
  box-shadow: var(--diwa-shadow-md);
}

@use '@diwacopilot/components/styles' as *;

.card {
  box-shadow: $diwa-shadow-sm;
  transition: box-shadow $diwa-motion-duration-short $diwa-motion-easing-base;
}

.card:hover { box-shadow: $diwa-shadow-md; }
.modal      { box-shadow: $diwa-shadow-lg; }
.tooltip    { box-shadow: $diwa-shadow-xl; }