테마 손잡이

Betelgeuse 가 정한 값이다. 표는 @duolabs-deux/betelgeuse-ui 의 scope.css 에서 읽고, 견본은 Betelgeuse 경계 안에서 그린다.

모든 손잡이

목록은 system-package-contract.md 「테마 손잡이」와 같다(정본: @duolabs-deux/contracts 의 THEME_KNOBS). 「Polaris 값」은 이 시스템이 정하지 않아 Polaris 값을 그대로 쓴다는 뜻이다.

--background

#fff7d6

다크#111111

무채색 · 필수

--surface

#ffffff

다크#1b1b1b

무채색 · 필수

--surface-muted

#ffe66d

다크#2d2d2d

무채색 · 필수

--foreground

#111111

다크#fff7d6

무채색 · 필수

--muted

#3f3f3f

다크#e7d98c

무채색 · 필수

--subtle

#6b5f2a

다크#a79b67

무채색 · 필수

--border

#111111

다크#fff7d6

무채색 · 필수

--border-strong

#111111

다크#fff7d6

무채색 · 필수

--primary

#c8008a

다크#ff4fd8

주색 · 강조 · 필수

--primary-hover

#a80074

다크#ff8be7

주색 · 강조 · 필수

--primary-foreground

#ffffff

다크#111111

주색 · 강조 · 필수

--accent

#00d4ff

다크#5ce1ff

주색 · 강조 · 필수

--point

#7c3cff

다크#a78bfa

주색 · 강조 · 필수

--danger

#ff3b30

다크#ff6b5f

상태색 · 필수

--danger-foreground

#111111

다크#111111

상태색 · 필수

--danger-text

#dd0008

다크#ff6b5f

상태색 · 필수

--success

#00d084

다크#3dffad

상태색 · 필수

--success-foreground

#111111

다크#111111

상태색 · 필수

--success-text

#008150

다크#3dffad

상태색 · 필수

--warning

#ffb000

다크#ffd166

상태색 · 필수

--warning-foreground

#111111

다크#111111

상태색 · 필수

--warning-text

#9a6800

다크#ffd166

상태색 · 필수

--chart-motion-duration

320ms

움직임 · 필수

--chart-motion-ease

steps(4, end)

움직임 · 필수

--number-motion-duration

300ms

움직임 · 필수

--number-motion-ease

cubic-bezier(0.2, 0.8, 0.2, 1)

움직임 · 필수

--dx-radius-scale

0.15

모양 · 필수

--dx-border-width

2px

모양 · 필수

--dx-density

Polaris 값

모양

--dx-shadow-sm

3px 3px 0 var(--border-strong)

모양 · 필수

--dx-shadow-lg

5px 5px 0 var(--border-strong)

모양 · 필수

--dx-shadow-xl

8px 8px 0 var(--border-strong)

모양 · 필수

--dx-font-sans

"Pretendard", system-ui, sans-serif

글꼴 · 필수

--dx-font-heading

Polaris 값

글꼴

--dx-font-mono

Polaris 값

글꼴

--dx-font-control

Polaris 값

글꼴

--dx-font-data

Polaris 값

글꼴

--dx-focus-color

#111111

포커스 · 필수

--dx-focus-width

2px

포커스 · 필수

--dx-focus-offset

2px

포커스 · 필수

--dx-heading-weight

800

제목 · 필수

--dx-heading-tracking

-0.01em

제목 · 필수

--dx-control-border-color

#111111

다크#fff7d6

컨트롤

--dx-control-border-style

solid

컨트롤

--dx-control-border-width

2px

컨트롤

--dx-control-shadow

3px 3px 0 var(--border-strong)

컨트롤

--dx-control-weight

800

컨트롤

--dx-control-disabled-shadow

none

컨트롤

--dx-control-hover-shadow

5px 5px 0 var(--border-strong)

컨트롤

--dx-control-hover-translate

-1px -1px

컨트롤

--dx-control-active-shadow

none

컨트롤

--dx-control-active-translate

3px 3px

컨트롤

--dx-surface-shadow

5px 5px 0 var(--border-strong)

면

--dx-pressable-hover-shadow

8px 8px 0 var(--border-strong)

누르는 카드

--dx-pressable-hover-translate

-3px -3px

누르는 카드

--dx-pressable-active-shadow

3px 3px 0 var(--border-strong)

누르는 카드

--dx-pressable-active-translate

2px 2px

누르는 카드

--dx-pressable-active-scale

none

누르는 카드

--border-subtle

color-mix(in srgb, var(--foreground) 16%, transparent)

다크color-mix(in srgb, var(--foreground) 22%, transparent)

선 위계

--table-header-bg

Polaris 값

다크Polaris 값

표 머리

--table-header-fg

Polaris 값

다크Polaris 값

표 머리

--table-header-border

Polaris 값

다크Polaris 값

표 머리

--chart-series-1

#ff4fd8

다크#ff4fd8

차트 색

--chart-series-2

#00b7dc

다크#5ce1ff

차트 색

--chart-series-3

#7c3cff

다크#a78bfa

차트 색

--chart-series-4

#00a86b

다크#3dffad

차트 색

--chart-grid

color-mix(in srgb, var(--foreground) 22%, transparent)

다크color-mix(in srgb, var(--foreground) 24%, transparent)

차트 색

--chart-grid-strong

#111111

다크#fff7d6

차트 색

--chart-track

#ffe66d

다크#2d2d2d

차트 색

--chart-line-width

3px

차트 모양

--chart-area-opacity

0.16

차트 모양

--chart-bar-radius

0px

차트 모양

--chart-point-radius

5px

차트 모양

--chart-cell-radius

0px

차트 모양