0010. 상태 표시줄은 Orca 디자인을 그대로 따르고, 사용량 등급에 유채색을 쓴다

This content is not available in your language yet.

맥락

Orca 상태 표시줄의 기능과 함께 디자인도 그대로 가져오려 한다. Orca는 사용량 팝오버의 막대와 퍼센트에 사용률 60% 이상이면 노랑, 80% 이상이면 빨강을 쓴다.

ADR 0002는 유채색을 세션 상태와 로고에만 쓰기로 정했고, 예외는 상태 표시줄의 연동 칩 하나였다. Orca의 색을 가져오면 이 규칙과 부딪힌다.

상태 표시줄과 거기서 뜨는 팝오버는 Orca 다크 테마의 치수와 색을 그대로 따른다. 사용량 등급색 두 개를 0002의 예외로 둔다.

Orca 토큰 가운데 Belloga에 같은 값이 있는 것(--card, --muted, --muted-foreground, --border 등)은 Belloga 토큰을 쓴다. 글자체는 Belloga의 Pretendard를 그대로 쓴다.

사용량 막대를 무채색으로 둔다. 0002를 지킨다. 그러나 Orca 디자인을 그대로 가져온다는 목표와 어긋나고, 한도에 가까운지를 색으로 알 수 없다.
기존 색을 빌려 쓴다(--integration-partial, --danger). 토큰이 늘지 않는다. 그러나 --danger는 값이 다르고(#c42b1c), 뜻이 다른 상태가 같은 토큰을 쓰면 한쪽을 바꿀 때 다른 쪽이 따라 바뀐다.
채택안: 값은 Orca와 같게, 이름은 뜻대로 따로 둔다. --usage-warning은 --integration-partial과 값이 같지만 따로 둔다.
Orca 글자체(Geist)도 가져온다. Geist는 한글을 담지 않고, 상태 표시줄만 다른 글자체를 쓰면 앱 안에서 어긋나서 기각했다.

화면의 유채색 자리에 사용량 등급 둘이 더해졌다. 상태 표시줄의 작은 막대는 Orca처럼 무채색이고, 색은 팝오버 안에만 나온다.
상태 표시줄 높이가 32px(--tab-bar-height)에서 24px로 줄었다. Orca에 없는 요약과 연동 칩도 같은 치수 체계(12px 글자, 12px 간격)에 맞췄다.
Orca의 굵기 500은 Belloga 굵기 토큰(400, 600, 700)에 없어서 팝오버 이름 자리에만 직접 쓴다.
우클릭 메뉴는 네이티브 메뉴라 OS가 그리므로 Orca 모양을 따르지 않는다.