Ocean Road
가이드
컴포넌트
가이드
컴포넌트

디자인 토큰

@coldsurfers/ocean-road-design-tokens에서 생성되는 색상 토큰 레퍼런스입니다. Style Dictionary로 빌드되며, Primitive → Semantic 2-레이어 구조로 설계되어 있습니다.

Primitive (oc.gray.9 등 raw 값) ↓ Semantic (color.foreground.1 등 의미 기반 CSS 변수)

Semantic 색상 토큰

ColorSchemeProvider가 라이트/다크 모드에 따라 아래 CSS 변수를 자동으로 주입합니다.

Background

CSS 변수 JS 라이트 다크 용도
--color-background-1 semantics.color.background[1] #ffffff #000000 페이지 최상위 배경
--color-background-2 semantics.color.background[2] #f1f3f5 #212529 카드, 패널 배경
--color-background-3 semantics.color.background[3] #e9ecef #343a40 중간 단계 배경
--color-background-4 semantics.color.background[4] #dee2e6 #495057 구분선 배경
--color-background-5 semantics.color.background[5] #ced4da #868e96 비활성 배경

Foreground

CSS 변수 JS 라이트 다크 용도
--color-foreground-1 semantics.color.foreground[1] #212529 #f1f3f5 주요 텍스트
--color-foreground-2 semantics.color.foreground[2] #343a40 #e9ecef 보조 텍스트
--color-foreground-3 semantics.color.foreground[3] #495057 #dee2e6 3차 텍스트, 플레이스홀더
--color-foreground-4 semantics.color.foreground[4] #868e96 #ced4da 비활성 텍스트

Border

CSS 변수 JS 라이트 다크 용도
--color-border-1 semantics.color.border[1] #f1f3f5 #495057 기본 구분선
--color-border-2 semantics.color.border[2] #e9ecef #868e96 강조 구분선

Dimmed

CSS 변수 JS 라이트 다크 용도
--color-dimmed-1 semantics.color.dimmed[1] #f1f3f5 #495057 비활성 오버레이

JS에서 사용하기

semantics 객체의 값은 CSS 변수 문자열("var(--color-foreground-1)")을 반환합니다. Emotion 스타일과 함께 사용하면 ColorSchemeProvider가 주입한 실제 값으로 자동 해석됩니다.

import { semantics } from '@coldsurfers/ocean-road'
import styled from '@emotion/styled'
import { Text } from '@coldsurfers/ocean-road'

const Title = styled(Text)`
  color: ${semantics.color.foreground[1]};
  background-color: ${semantics.color.background[2]};
  border-bottom: 1px solid ${semantics.color.border[1]};
`

CSS 변수로 직접 사용하기

ColorSchemeProvider 없이 CSS에서 직접 참조할 수도 있습니다. 단, 이 경우 라이트/다크 모드 전환은 직접 구현해야 합니다.

.my-element {
  color: var(--color-foreground-1);
  background-color: var(--color-background-2);
}

Primitive 색상 토큰

Semantic 토큰의 기반이 되는 Open Color 팔레트입니다. colors 객체로 접근할 수 있으나, 일반적으로는 Semantic 토큰 사용을 권장합니다.

import { colors } from '@coldsurfers/ocean-road'

// colors.gray[9], colors.gray[0], colors.white, colors.black 등
팔레트 단계
gray 0 – 9
white / black —
기타 (red, blue, green …) 0 – 9

토큰 빌드 출력 경로

경로 내용
dist/css/color/variables.css Primitive CSS 변수 (:root)
dist/css/color/variables-light.css Semantic 라이트 모드 CSS 변수
dist/css/color/variables-dark.css Semantic 다크 모드 CSS 변수
dist/js/semantic/variables.js Semantic JS 모듈 (semantics 객체)
dist/js/semantic/theme-variables.js Semantic 라이트/다크 값 객체
dist/json/color/ JSON 형태의 토큰 값
ON THIS PAGE