색상

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

견본(현재 모드)

--background

--surface

--surface-muted

--foreground

--muted

--subtle

--border

--border-strong

--primary

--primary-hover

--primary-foreground

--accent

--point

--danger

--danger-foreground

--danger-text

--success

--success-foreground

--success-text

--warning

--warning-foreground

--warning-text

--dx-focus-color

--dx-control-border-color

--border-subtle

색 변형

바탕 · 선 · 그림자는 그대로 두고 주색 계열만 바꾸는 변형이다. 경계 요소에 data-variant 로 고른다(없으면 기본 변형). 앱 전체 시스템에서는 테마 메뉴가 고른다.

링크 글자#c8008a · 다크 #ff4fd8

링크 글자#006d94 · 다크 #5ce1ff

링크 글자#367000 · 다크 #b6f400

링크 글자#a83f00 · 다크 #ff9a3c

값

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

상태색 · 필수

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

표 머리