본문으로 건너뛰기

테마 손잡이

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

모든 손잡이

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

--background
#f8f3e9
다크#151a16

무채색 · 필수

--surface
#fffdf8
다크#1d241f

무채색 · 필수

--surface-muted
#efe6d7
다크#293129

무채색 · 필수

--foreground
#223129
다크#f6efe3

무채색 · 필수

--muted
#5e6b63
다크#b8bcae

무채색 · 필수

--subtle
#8c9388
다크#858d82

무채색 · 필수

--border
#ded3c1
다크#39443a

무채색 · 필수

--border-strong
#bdaa91
다크#596658

무채색 · 필수

--primary
#b64d2f
다크#dc704d

주색 · 강조 · 필수

--primary-hover
#963a22
다크#ee8864

주색 · 강조 · 필수

--primary-foreground
#ffffff
다크#1b120e

주색 · 강조 · 필수

--accent
#347054
다크#70b48d

주색 · 강조 · 필수

--point
#d08a3d
다크#e0a55d

주색 · 강조 · 필수

--danger
#b52f35
다크#f07878

상태색 · 필수

--danger-foreground
#ffffff
다크#151a16

상태색 · 필수

--danger-text
#b52f35
다크#f07878

상태색 · 필수

--success
#347054
다크#70b48d

상태색 · 필수

--success-foreground
#ffffff
다크#151a16

상태색 · 필수

--success-text
#347054
다크#70b48d

상태색 · 필수

--warning
#b97524
다크#e5ad59

상태색 · 필수

--warning-foreground
#151a16
다크#151a16

상태색 · 필수

--warning-text
#9f5e00
다크#e5ad59

상태색 · 필수

--chart-motion-duration
600ms

움직임 · 필수

--chart-motion-ease
cubic-bezier(0.34, 1.4, 0.64, 1)

움직임 · 필수

--number-motion-duration
800ms

움직임 · 필수

--number-motion-ease
cubic-bezier(0.34, 1.4, 0.64, 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
Polaris 값
다크Polaris 값

선 위계

--table-header-bg
#b64d2f
다크#dc704d

표 머리

--table-header-fg
#ffffff
다크#1b120e

표 머리

--table-header-border
color-mix(in srgb, var(--primary-foreground) 20%, transparent)
다크color-mix(in srgb, var(--primary-foreground) 20%, transparent)

표 머리

--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 값

차트 모양