색상과 테마 · Tinyrack Design System

시맨틱 역할 선택

색상 값보다 의미부터 정하세요.

표면: surface와 surfaceMuted는 중립적인 레이어를 만들어요. surfaceHover, surfaceSelected, surfacePressed는 상호작용을 강조할 때만 Rack Blue를 더해요.
콘텐츠: 기본·보조 텍스트, 자리표시자, 테두리, 반전 역할은 전경색을 맥락에 연결해요. text, textMuted, textPlaceholder, border, surfaceInverse처럼 의미에 맞는 토큰을 선택하세요.
동작: 기본 동작의 평상시, 포인터 올림, 누름, 전경색은 primary, primaryHover, primaryPressed, onPrimary로 한 세트를 이뤄요.
상태: 정보, 성공, 경고, 위험에는 각각 콘텐츠, 표면, 상호작용, 테두리, 전경색 역할이 있어요.

테마 구조

상위 요소에 data-theme="tinyrack-light" 또는 data-theme="tinyrack-dark"를 설정하세요. 두 선택자는 같은 시맨틱 변수를 정의하므로 테마가 바뀌어도 하위 요소의 의도가 유지돼요.

<html data-theme="tinyrack-light">

평상시, 포인터 올림, 누름 역할을 한 세트로 사용하세요. 밝은 테마 값으로 어두운 테마 값을 계산하거나 관련 없는 채움에 전경색을 사용하지 마세요.

어두운 테마의 기본 경계에는 border, controlBorder, controlTrack과 함께 Neutral 800 #262626을 사용해요. hover, pressed, dragged 상태의 컨트롤은 상호작용을 강조하도록 Neutral 700 #404040인 borderStrong을 사용할 수 있어요. 두 색 모두 시각적으로 절제되어 있으며 기본 다크 표면에서 단독으로 WCAG 비텍스트 대비 3:1을 충족하지 않아요. 경계가 중요한 경우 포커스, 상태, 텍스트, 표면 단서를 함께 유지하세요.

기본 동작 색상 안전하게 재정의

Tinyrack은 기본 동작에 Rack Blue를 사용해요. 제품에 다른 정체성이 필요할 때만 Tinyrack 테마 선택자는 그대로 두고 별도의 제품 강조색 선택자를 추가하세요. 평상시, 포인터 올림, 누름, 전경 대비가 하나의 규약으로 맞물리도록 네 역할을 모두 재정의하세요.

[data-accent="product-violet"] {
  --tinyrack-primary: #6d28d9;
  --tinyrack-primary-hover: #5b21b6;
  --tinyrack-primary-pressed: #4c1d95;
  --tinyrack-on-primary: #ffffff;
}

<main data-theme="tinyrack-dark" data-accent="product-violet">

피해야 할 사용

제품 UI에서 팔레트 값을 직접 사용하지 마세요. 테마에 대응하지 못해요.
상태 색상을 장식에만 쓰거나 경고와 위험 역할을 바꾸어 쓰지 마세요.
primary 하나만 재정의하지 마세요. 상태 세트가 불완전하면 상호작용 피드백이 일관되지 않아요.
on-* 색상을 다른 배경 역할 위에 놓지 마세요.

기능 색상 참고

역할	밝은 테마	어두운 테마
`surface`	`#ffffff`	`#0a0a0a`
`surfaceMuted`	`#f5f5f5`	`#171717`
`surfaceHover`	`#eff6ff`	`#172554`
`surfaceSelected`	`#dbeafe`	`#1e3a8a`
`surfacePressed`	`#bfdbfe`	`#1e40af`
`text`	`#171717`	`#fafafa`
`textMuted`	`#525252`	`#a3a3a3`
`textPlaceholder`	`#737373`	`#a3a3a3`
`border`	`#d4d4d4`	`#262626`
`borderStrong`	`#a3a3a3`	`#404040`
`controlBorder`	`#d4d4d4`	`#262626`
`controlTrack`	`#d4d4d4`	`#262626`
`focus`	`#2563eb`	`#60a5fa`
`surfaceInverse`	`#171717`	`#fafafa`
`textInverse`	`#fafafa`	`#171717`
`borderInverse`	`#a3a3a3`	`#737373`
`skeletonFill`	`#d4d4d4`	`#404040`
`skeletonHighlight`	`#f5f5f5`	`#525252`
`primary`	`#1d4ed8`	`#60a5fa`
`primaryHover`	`#1e40af`	`#93c5fd`
`primaryPressed`	`#1e3a8a`	`#bfdbfe`
`onPrimary`	`#ffffff`	`#172554`
`info`	`#1d4ed8`	`#93c5fd`
`infoHover`	`#1e40af`	`#bfdbfe`
`infoPressed`	`#1e3a8a`	`#dbeafe`
`infoSurface`	`#eff6ff`	`#172554`
`infoSurfaceSubtle`	`#eff6ff`	`#262d34`
`infoSurfaceHover`	`#dbeafe`	`#1e3a8a`
`infoSurfacePressed`	`#bfdbfe`	`#1e40af`
`infoBorder`	`#2563eb`	`#60a5fa`
`onInfo`	`#ffffff`	`#172554`
`success`	`#15803d`	`#86efac`
`successHover`	`#166534`	`#bbf7d0`
`successPressed`	`#14532d`	`#dcfce7`
`successSurface`	`#f0fdf4`	`#052e16`
`successSurfaceSubtle`	`#f0fdf4`	`#25322a`
`successSurfaceHover`	`#dcfce7`	`#14532d`
`successSurfacePressed`	`#bbf7d0`	`#166534`
`successBorder`	`#16a34a`	`#4ade80`
`onSuccess`	`#ffffff`	`#052e16`
`warning`	`#92400e`	`#fcd34d`
`warningHover`	`#78350f`	`#fde68a`
`warningPressed`	`#451a03`	`#fef3c7`
`warningSurface`	`#fffbeb`	`#451a03`
`warningSurfaceSubtle`	`#fffbeb`	`#342e1e`
`warningSurfaceHover`	`#fef3c7`	`#78350f`
`warningSurfacePressed`	`#fde68a`	`#92400e`
`warningBorder`	`#d97706`	`#fbbf24`
`onWarning`	`#ffffff`	`#451a03`
`danger`	`#b91c1c`	`#f87171`
`dangerHover`	`#991b1b`	`#fca5a5`
`dangerPressed`	`#7f1d1d`	`#fecaca`
`dangerSurface`	`#fef2f2`	`#450a0a`
`dangerSurfaceSubtle`	`#fef2f2`	`#332222`
`dangerSurfaceHover`	`#fee2e2`	`#7f1d1d`
`dangerSurfacePressed`	`#fecaca`	`#991b1b`
`dangerBorder`	`#dc2626`	`#f87171`
`onDanger`	`#ffffff`	`#450a0a`
`scrim`	`#0000008f`	`#000000b8`

구현

@import "@tinyrack/ui/core.css";
.rack-status { color: var(--tinyrack-info); background: var(--tinyrack-info-surface-subtle); border-color: var(--tinyrack-info-border); }

접두사가 붙은 유틸리티는 Tailwind 색상 매핑에서 확인하세요.

토큰 작성자용 기본 팔레트 참고

기본 색상 단계는 토큰 작성 도구에서 사용하도록 내보내요. 실행 시점 CSS와 Tailwind 연결 계층에는 포함되지 않아요.

`neutral`

단계	값
50	`#fafafa`
100	`#f5f5f5`
300	`#d4d4d4`
400	`#a3a3a3`
500	`#737373`
600	`#525252`
700	`#404040`
800	`#262626`
900	`#171717`
950	`#0a0a0a`

`blue`

단계	값
50	`#eff6ff`
100	`#dbeafe`
200	`#bfdbfe`
300	`#93c5fd`
400	`#60a5fa`
600	`#2563eb`
700	`#1d4ed8`
800	`#1e40af`
900	`#1e3a8a`
950	`#172554`

`green`

단계	값
50	`#f0fdf4`
100	`#dcfce7`
200	`#bbf7d0`
300	`#86efac`
400	`#4ade80`
600	`#16a34a`
700	`#15803d`
800	`#166534`
900	`#14532d`
950	`#052e16`

`amber`

단계	값
50	`#fffbeb`
100	`#fef3c7`
200	`#fde68a`
300	`#fcd34d`
400	`#fbbf24`
600	`#d97706`
800	`#92400e`
900	`#78350f`
950	`#451a03`

`red`

단계	값
50	`#fef2f2`
100	`#fee2e2`
200	`#fecaca`
300	`#fca5a5`
400	`#f87171`
600	`#dc2626`
700	`#b91c1c`
800	`#991b1b`
900	`#7f1d1d`
950	`#450a0a`