DUOLABS DEUX디자인 시스템

테마 손잡이

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

모든 손잡이

목록은 system-package-contract.md 「테마 손잡이」와 같다. 「Polaris 값」은 이 시스템이 정하지 않아 Polaris 값을 그대로 쓴다는 뜻이다.

--background

#f7f7fc

다크#0b0d18

무채색 · 필수

--surface

#ffffff

다크#111425

무채색 · 필수

--surface-muted

#f1f2fa

다크#181c31

무채색 · 필수

--foreground

#202235

다크#f2f1fb

무채색 · 필수

--muted

#5d6178

다크#a8abc0

무채색 · 필수

--subtle

#70758c

다크#7f849c

무채색 · 필수

--border

#d7d9e8

다크#343950

무채색 · 필수

--border-strong

#9ba0b8

다크#596078

무채색 · 필수

--primary

#5558c9

다크#a9afff

주색 · 강조 · 필수

--primary-hover

#4245aa

다크#c1c5ff

주색 · 강조 · 필수

--primary-foreground

#ffffff

다크#0b0d18

주색 · 강조 · 필수

--accent

#5558c9

다크#a9afff

주색 · 강조 · 필수

--point

#7048bd

다크#c4a4ff

주색 · 강조 · 필수

--danger

#bf3048

다크#ff7587

상태색 · 필수

--danger-foreground

#ffffff

다크#0b0d18

상태색 · 필수

--danger-text

#bf3048

다크#ff7587

상태색 · 필수

--success

#167357

다크#57d3a0

상태색 · 필수

--success-foreground

#ffffff

다크#0b0d18

상태색 · 필수

--success-text

#167357

다크#57d3a0

상태색 · 필수

--warning

#8a5a00

다크#f0bd58

상태색 · 필수

--warning-foreground

#ffffff

다크#0b0d18

상태색 · 필수

--warning-text

#8a5a00

다크#f0bd58

상태색 · 필수

--chart-motion-duration

300ms

움직임 · 필수

--chart-motion-ease

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

움직임 · 필수

--number-motion-duration

0s

움직임 · 필수

--number-motion-ease

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

움직임 · 필수

--dx-radius-scale

Polaris 값

모양 · 필수

--dx-border-width

Polaris 값

모양 · 필수

--dx-shadow-sm

Polaris 값

모양 · 필수

--dx-shadow-lg

Polaris 값

모양 · 필수

--dx-shadow-xl

Polaris 값

모양 · 필수

--dx-font-sans

Polaris 값

글꼴 · 필수

--dx-font-heading

Polaris 값

글꼴

--dx-focus-color

Polaris 값

포커스 · 필수

--dx-focus-width

Polaris 값

포커스 · 필수

--dx-focus-offset

Polaris 값

포커스 · 필수

--dx-heading-weight

Polaris 값

제목 · 필수

--dx-heading-tracking

Polaris 값

제목 · 필수

--border-subtle

#d7d9e8b3

다크#343950b3

선 위계

--table-header-bg

Polaris 값

다크Polaris 값

표 머리

--table-header-fg

Polaris 값

다크Polaris 값

표 머리

--table-header-border

Polaris 값

다크Polaris 값

표 머리

--chart-series-1

Polaris 값

다크Polaris 값

차트 색

--chart-series-2

Polaris 값

다크Polaris 값

차트 색

--chart-series-3

Polaris 값

다크Polaris 값

차트 색

--chart-series-4

Polaris 값

다크Polaris 값

차트 색

--chart-grid

Polaris 값

다크Polaris 값

차트 색

--chart-grid-strong

Polaris 값

다크Polaris 값

차트 색

--chart-track

Polaris 값

다크Polaris 값

차트 색

--chart-line-width

Polaris 값

차트 모양

--chart-area-opacity

Polaris 값

차트 모양

--chart-bar-radius

Polaris 값

차트 모양

--chart-point-radius

Polaris 값

차트 모양

--chart-cell-radius

Polaris 값

차트 모양