Shadows

테마에서 사용되는 그림자 스타일을 이해합니다.

구성 요소에서 사용되는 그림자는 6단계 스케일에서 파생됩니다.

Shadow tokens

그림자 토큰은 CSS 변수를 사용하여 접근할 수 있습니다. 이러한 토큰을 사용하여 사용자 정의 구성 요소를 스타일링하여 나머지 테마와 일관되게 유지할 수 있습니다.

/* 인셋 그림자 */
var(--shadow-1);

/* 변형="classic" 패널의 그림자, 예: 카드 */
var(--shadow-2);
var(--shadow-3);

/* 작은 오버레이 패널의 그림자, 예: Hover Card 및 Popover */
var(--shadow-4);
var(--shadow-5);

/* 큰 오버레이 패널의 그림자, 예: 다이얼로그 */
var(--shadow-6);

그림자 토큰을 사용하여 사용자 정의 구성 요소를 스타일링하면, 테마의 나머지 부분과 일관되게 유지할 수 있습니다. 그림자 스타일을 적절하게 사용하여 깊이와 차원을 추가하세요.