Shadow

Exem UI 디자인 시스템의 Shadow 토큰입니다. 4단계로 구성되며, UI 요소의 깊이감(elevation)을 표현합니다.

Preview

각 shadow 토큰의 시각적 프리뷰입니다.

Weak

미세한 깊이감. Tooltip, 카드 호버 등

Medium

중간 깊이감. Dropdown, Popover 등

Strong

강한 깊이감. Modal, Dialog 등

Hard

가장 강한 깊이감. Overlay, 최상위 레이어 등

Scale

각 shadow 토큰의 CSS 값입니다. shadow-* 유틸리티 클래스로 적용합니다.

Token	CSS Variable	Value
	--shadow-weak	0px 0px 16px 0px rgba(28, 28, 28, 0.16)
	--shadow-medium	0px 0px 24px 0px rgba(28, 28, 28, 0.24)
	--shadow-strong	0px 0px 32px 0px rgba(28, 28, 28, 0.32)
	--shadow-hard	0px 0px 40px 0px rgba(28, 28, 28, 0.4)

Usage

UI 요소의 레이어 수준에 따라 적절한 shadow 토큰을 선택합니다.

Tooltip

미세한 깊이감

Dropdown

중간 깊이감

Modal

강한 깊이감

Overlay

최대 깊이감

Elevation Hierarchy

Shadow 토큰은 UI 요소의 계층 구조를 시각적으로 전달합니다. 낮은 단계부터 높은 단계 순서로 사용합니다.

Base Layer

weak ~ medium — 기본 UI 요소에 미세한 깊이감을 부여합니다. Tooltip, 호버 카드, Dropdown 메뉴 등에 사용합니다.

Top Layer

strong ~ hard — 사용자의 주의를 집중시키는 최상위 레이어입니다. Modal, Dialog, Overlay 등에 사용합니다.

Token

@exem-ui/core에서 제공하는 TypeScript 토큰 객체입니다.

shadow

shadow-* 유틸리티의 box-shadow 매핑

shadow.ts

import { shadow } from '@exem-ui/core/tailwindcss';

// shadow = {
//   'weak'     '0px 0px 16px 0px rgba(28, 28, 28, 0.16)',
//   'medium'   '0px 0px 24px 0px rgba(28, 28, 28, 0.24)',
//   'strong'   '0px 0px 32px 0px rgba(28, 28, 28, 0.32)',
//   'hard'     '0px 0px 40px 0px rgba(28, 28, 28, 0.4)',
// }