테마 손잡이

Polaris 가 정한 기본값이다. 위성은 같은 손잡이에 자기 값을 덮는다. 표는 @duolabs-deux/ui 의 tokens.css 에서 읽는다.

모든 손잡이

목록은 system-package-contract.md 「테마 손잡이」와 같다(정본: @duolabs-deux/contracts 의 THEME_KNOBS). 값이 「~를 따름」인 손잡이는 Polaris 가 다른 토큰에서 파생해 쓴다.

--background

#ffffff

다크#000000

무채색 · 필수

--surface

#ffffff

다크#000000

무채색 · 필수

--surface-muted

#f5f5f5

다크#171717

무채색 · 필수

--foreground

#0a0a0a

다크#f5f5f5

무채색 · 필수

--muted

#525252

다크#a3a3a3

무채색 · 필수

--subtle

#737373

다크#737373

무채색 · 필수

--border

#e5e5e5

다크#262626

무채색 · 필수

--border-strong

#d4d4d4

다크#404040

무채색 · 필수

--primary

#244bb5

다크#8fb2ff

주색 · 강조 · 필수

--primary-hover

#193b99

다크#b6ceff

주색 · 강조 · 필수

--primary-foreground

#ffffff

다크#0b1430

주색 · 강조 · 필수

--accent

#244bb5

다크#8fb2ff

주색 · 강조 · 필수

--point

#365bcb

다크#a4bbff

주색 · 강조 · 필수

--danger

#dc2626

다크#ef4444

상태색 · 필수

--danger-foreground

#ffffff

다크#0b0f17

상태색 · 필수

--danger-text

#b91c1c

다크#f87171

상태색 · 필수

--success

#16a34a

다크#22c55e

상태색 · 필수

--success-foreground

#171717

다크#0b0f17

상태색 · 필수

--success-text

#166534

다크#4ade80

상태색 · 필수

--warning

#d97706

다크#f59e0b

상태색 · 필수

--warning-foreground

#171717

다크#0b0f17

상태색 · 필수

--warning-text

#b45309

다크#fbbf24

상태색 · 필수

--chart-motion-duration

700ms

움직임 · 필수

--chart-motion-ease

cubic-bezier(0.22, 1, 0.36, 1)

움직임 · 필수

--number-motion-duration

900ms

움직임 · 필수

--number-motion-ease

cubic-bezier(0.22, 1, 0.36, 1)

움직임 · 필수

--dx-radius-scale

모양 · 필수

--dx-border-width

1px

모양 · 필수

--dx-shadow-sm

0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)

모양 · 필수

--dx-shadow-lg

0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)

모양 · 필수

--dx-shadow-xl

0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)

모양 · 필수

--dx-font-sans

"Pretendard", var(--font-geist-sans, sans-serif)

글꼴 · 필수

--dx-font-heading

var(--dx-font-sans) 를 따름

글꼴

--dx-font-mono

Geist Mono → ui-monospace → SFMono · Menlo …

글꼴

--dx-font-control

본문 글꼴을 이어받음

글꼴

--dx-font-data

본문 글꼴을 이어받음

글꼴

--dx-focus-color

var(--accent) 를 따름

포커스 · 필수

--dx-focus-width

2px

포커스 · 필수

--dx-focus-offset

0px

포커스 · 필수

--dx-heading-weight

600

제목 · 필수

--dx-heading-tracking

normal

제목 · 필수

--border-subtle

--border 를 라이트 60% · 다크 100% 로

다크--border 를 라이트 60% · 다크 100% 로

선 위계

--table-header-bg

var(--surface-muted) 를 따름

다크var(--surface-muted) 를 따름

표 머리

--table-header-fg

var(--muted) 를 따름

다크var(--muted) 를 따름

표 머리

--table-header-border

var(--border) 를 따름

다크var(--border) 를 따름

표 머리

--chart-series-1

var(--primary) 를 따름

다크var(--primary) 를 따름

차트 색

--chart-series-2

--primary 에서 색상 +180°

다크--primary 에서 색상 +180°

차트 색

--chart-series-3

--primary 에서 색상 +90°

다크--primary 에서 색상 +90°

차트 색

--chart-series-4

--primary 에서 색상 +270°

다크--primary 에서 색상 +270°

차트 색

--chart-grid

--border 에서 파생

다크--border 에서 파생

차트 색

--chart-grid-strong

--border-strong 에서 파생

다크--border-strong 에서 파생

차트 색

--chart-track

--surface-muted 에서 파생

다크--surface-muted 에서 파생

차트 색

--chart-line-width

2px

차트 모양

--chart-area-opacity

0.1

차트 모양

--chart-bar-radius

3px

차트 모양

--chart-point-radius

4.5px

차트 모양

--chart-cell-radius

4px

차트 모양