Elevation
컴포넌트의 높이, 그림자 깊이를 위한 토큰. elevation-2, 4, 8, 16, 28, 64 제공.
--global-elevation-{code}
Usage
import { global } from '@featuring-corp/design-tokens';
// TypeScript에서 사용
console.log(global.elevation[8]);/* CSS에서 사용 */
.card {
box-shadow: var(--global-elevation-8);
}Tokens
| Code | Value | Preview |
|---|---|---|
2 | 0px 0px 2px 0px rgb(from var(--global-colors-black) r g b / 12%), 0px 1px 2px 0px rgb(from var(--global-colors-black) r g b / 14%) | |
4 | 0px 0px 2px 0px rgb(from var(--global-colors-black) r g b / 12%), 0px 2px 4px 0px rgb(from var(--global-colors-black) r g b / 14%) | |
8 | 0px 0px 2px 0px rgb(from var(--global-colors-black) r g b / 12%), 0px 4px 8px 0px rgb(from var(--global-colors-black) r g b / 14%) | |
16 | 0px 0px 2px 0px rgb(from var(--global-colors-black) r g b / 12%), 0px 8px 16px 0px rgb(from var(--global-colors-black) r g b / 14%) | |
28 | 0px 0px 8px 0px rgb(from var(--global-colors-black) r g b / 20%), 0px 14px 28px 0px rgb(from var(--global-colors-black) r g b / 24%) | |
64 | 0px 0px 8px 0px rgb(from var(--global-colors-black) r g b / 20%), 0px 32px 64px 0px rgb(from var(--global-colors-black) r g b / 24%) |
전체 토큰 목록
--global-elevation-2: 0px 0px 2px 0px rgb(from var(--global-colors-black) r g b / 12%), 0px 1px 2px 0px rgb(from var(--global-colors-black) r g b / 14%)
--global-elevation-4: 0px 0px 2px 0px rgb(from var(--global-colors-black) r g b / 12%), 0px 2px 4px 0px rgb(from var(--global-colors-black) r g b / 14%)
--global-elevation-8: 0px 0px 2px 0px rgb(from var(--global-colors-black) r g b / 12%), 0px 4px 8px 0px rgb(from var(--global-colors-black) r g b / 14%)
--global-elevation-16: 0px 0px 2px 0px rgb(from var(--global-colors-black) r g b / 12%), 0px 8px 16px 0px rgb(from var(--global-colors-black) r g b / 14%)
--global-elevation-28: 0px 0px 8px 0px rgb(from var(--global-colors-black) r g b / 20%), 0px 14px 28px 0px rgb(from var(--global-colors-black) r g b / 24%)
--global-elevation-64: 0px 0px 8px 0px rgb(from var(--global-colors-black) r g b / 20%), 0px 32px 64px 0px rgb(from var(--global-colors-black) r g b / 24%)