코드에서 토큰 쓰기

Steel 의 모든 시각 값은 디자인 토큰이에요. 색을 hex 로, 간격을 임의 px 로 적지 않고 토큰 이름으로 적어야 다크 모드와 토큰 업데이트가 자동으로 반영돼요.

이름 규칙Copy Anchor Link

토큰 CSS 변수는 Atlassian 원본과 같은 이름(--ds-*)이에요. Tailwind 유틸은 원본 이름 앞에 ds- 를 붙여 그대로 써요. Atlassian 문서나 Figma 에서 본 토큰 이름을 점(.) 대신 하이픈(-)으로 이어 붙이면 돼요.

색Copy Anchor Link

색 토큰은 역할(text, icon, border, background, surface, link)과 의미(brand, danger, warning, success, information, discovery, neutral), 강도(subtlest → subtler → subtle → 기본 → bold → bolder), 상태(hovered, pressed)를 이어 붙인 이름이에요.

<div className="rounded-ds-small border border-ds-border-danger bg-ds-background-danger p-ds-150">
  <p className="ds-font-body text-ds-text-danger">스프린트 마감일이 지났어요.</p>
</div>

• 글자에는 text-ds-text*, 아이콘에는 text-ds-icon* 을 써요. 아이콘은 글자보다 한 단계 옅은 값이 따로 있어요.
• 상호작용 요소는 기본·hovered·pressed 세 값을 짝으로 써요.

<button className="bg-ds-background-neutral-subtle hover:bg-ds-background-neutral-subtle-hovered active:bg-ds-background-neutral-subtle-pressed">
  필터
</button>

높이 (Elevation)Copy Anchor Link

면(surface)과 그림자(shadow)는 항상 짝으로 써요. 다크 모드에서는 그림자 대신 면 색이 밝아져서 높이를 표현해요.

<article className="rounded-ds-small bg-ds-surface-raised p-ds-150 shadow-ds-raised hover:bg-ds-surface-raised-hovered">
  …
</article>

간격Copy Anchor Link

간격은 8px 를 기준으로 한 스케일이에요. 숫자는 8px 대비 백분율이라 100 = 8px, 200 = 16px 이에요.

p-ds-*, px-ds-*, m-ds-*, gap-ds-*, space-y-ds-* 처럼 Tailwind 간격 유틸 어디에나 쓸 수 있어요. 의미 이름이 붙은 gap-ds-gap-small(6px), p-ds-inset-medium(16px) 같은 별칭도 있어요. 음수 간격은 -m-ds-100 또는 m-ds-negative-100 으로 써요.

모서리Copy Anchor Link

타이포그래피Copy Anchor Link

ds-font-* 는 CSS font 단축 속성이라 크기·행간·굵기·서체를 한 번에 정해요. 굵기만 바꾸고 싶다면 font-ds-* 를 함께 써요.

<h2 className="ds-font-heading-medium text-ds-text">이번 스프린트</h2>
<p className="ds-font-body text-ds-text-subtle">담당자가 지정되지 않은 이슈가 3개 있어요.</p>
<span className="ds-font-body-small font-ds-semibold text-ds-text-subtlest">마지막 업데이트 5분 전</span>

서체만 필요하면 font-ds-body, font-ds-heading, font-ds-code 를 써요.

포커스 링Copy Anchor Link

ADS 포커스 링은 2px 외곽선을 2px 띄워서 그려요. 키보드로 포커스할 때만 보이도록 focus-visible 을 써요.

<a className="rounded-ds-small outline-2 outline-offset-2 outline-transparent focus-visible:outline-ds-border-focused">
  보드 보기
</a>

모션Copy Anchor Link

--ds-motion-<이름>-duration / -curve 짝을 Tailwind 의 duration-(…), ease-(…) 로 써요.

<div className="transition-opacity duration-(--ds-motion-avatar-enter-duration) ease-(--ds-motion-avatar-enter-curve)" />

CSS 변수 직접 쓰기Copy Anchor Link

Tailwind 를 쓰지 않는 곳(CSS 모듈, 인라인 스타일, 차트 라이브러리 옵션 등)에서는 CSS 변수를 바로 써요.

.issue-card {
  padding: var(--ds-space-150);
  border-radius: var(--ds-radius-small);
  background-color: var(--ds-surface-raised);
  box-shadow: var(--ds-shadow-raised);
  font: var(--ds-font-body);
  color: var(--ds-text);
}

.issue-card:hover {
  background-color: var(--ds-surface-raised-hovered);
}

<span style={{ color: 'var(--ds-text-success)' }}>완료</span>

Tailwind 임의값과 섞어 쓸 수도 있어요: shadow-[inset_0_0_0_1px_var(--ds-border-focused)].

하지 말아야 할 것Copy Anchor Link

• dark: 변형을 따로 쓰지 않아요. 토큰이 .dark 에서 알아서 바뀌어요.
• 팔레트 변수(--ds-palette-*)는 토큰 생성용이에요. 컴포넌트에서는 시맨틱 토큰만 써요.
• 콘마켓(SEED 계열) 유틸(bg-bg-*, text-fg-*, p-x4)은 Steel 에서 쓰지 않아요.