색상 토큰 팔레트
이 페이지는 빌드 시 packages/ocean-road-design-tokens/dist/json/에서 자동 생성됩니다.
라이트/다크 모드별 시맨틱 색상 토큰의 실제 값을 시각화합니다. JS 접근 방법 및 CSS 변수 사용법은 디자인 토큰 페이지를 참고하세요.
Background
| JS |
라이트 |
다크 |
CSS 변수 |
semantics.color.background[1] |
#ffffff |
#000000 |
--color-background-1 |
semantics.color.background[2] |
#f1f3f5 |
#212529 |
--color-background-2 |
semantics.color.background[3] |
#e9ecef |
#343a40 |
--color-background-3 |
semantics.color.background[4] |
#dee2e6 |
#495057 |
--color-background-4 |
semantics.color.background[5] |
#ced4da |
#868e96 |
--color-background-5 |
Foreground
| JS |
라이트 |
다크 |
CSS 변수 |
semantics.color.foreground[1] |
#212529 |
#f1f3f5 |
--color-foreground-1 |
semantics.color.foreground[2] |
#343a40 |
#e9ecef |
--color-foreground-2 |
semantics.color.foreground[3] |
#495057 |
#dee2e6 |
--color-foreground-3 |
semantics.color.foreground[4] |
#868e96 |
#ced4da |
--color-foreground-4 |
Border
| JS |
라이트 |
다크 |
CSS 변수 |
semantics.color.border[1] |
#f1f3f5 |
#495057 |
--color-border-1 |
semantics.color.border[2] |
#e9ecef |
#868e96 |
--color-border-2 |
Dimmed
| JS |
라이트 |
다크 |
CSS 변수 |
semantics.color.dimmed[1] |
#f1f3f5 |
#495057 |
--color-dimmed-1 |