Carbon 스타일 가이드

RxControls 화면에서 색상, 레이어, 여백, 포커스와 스크롤을 일관되게 구성하기 위한 기준입니다. 공통 진입 파일은 rxcontrols.ui.carbon.2025.01.css이며, 화면에서는 개별 색상값보다 Carbon 토큰과 공통 클래스를 우선합니다.

스타일 구성

공통 진입 파일은 토큰, 기본 요소, 셸, 표면, RxComponents 연결 스타일과 호환성 스타일을 정해진 순서로 불러옵니다. 기존 경로를 참조하는 호스트가 있으므로 진입 파일의 위치는 유지하고, 기능별 선택자를 이 파일에 직접 늘리지 않습니다.

레이어와 배경

페이지 바탕에는 cds-bg-light, 보조 탐색에는 cds-bg-gray, 입력·버튼처럼 조작하는 요소에는 cds-bg-ctrl 계열을 사용합니다. 흰색 표면 위에 다시 흰색 입력 상자를 올리지 말고, 부모 레이어에 맞춰 컨트롤 배경이 한 단계 구분되도록 구성합니다.

Dock 레이아웃

세로 셸은 dock-vpanel 안에 dock-top, dock-content, dock-bottom을 배치합니다. 가로 작업 영역은 dock-wpanel 안에 dock-left, dock-content, dock-right를 둡니다. 본문 스크롤이 필요한 문서 화면에서는 임의의 중첩 스크롤을 만들지 않고 페이지가 높이를 소유하도록 합니다.

타이포그래피와 밀도

본문과 탐색은 Carbon의 정보 밀도를 따릅니다. 제목을 과도하게 굵게 만들거나 마케팅 카드처럼 넓은 여백을 두지 않습니다. 선택 항목은 배경과 왼쪽 경계로 구분하며 글자 굵기는 보통 500 이하로 유지합니다.

포커스와 키보드

버튼, 링크, 입력과 같이 조작 가능한 요소에만 명확한 포커스 표시를 제공합니다. 포커스 선은 요소 안쪽으로 축소하지 말고 Carbon 버튼과 같은 외곽 평면에 outline으로 표시합니다. 출판물 본문 컨테이너에는 폼 컨트롤처럼 포커스를 강제하지 않습니다.

스크롤 표현

스크롤 가능한 탐색 패널에는 RxScroll 규칙을 적용해 평소에는 시각적 부담을 줄이고, 마우스나 키보드가 패널에 들어왔을 때 스크롤 손잡이가 드러나도록 합니다. 운영체제 기본 스크롤을 무조건 제거하면 키보드와 고대비 모드에서 탐색이 어려워질 수 있으므로 대체 동작을 함께 확인합니다.

캐시와 변경 절차

분리된 CSS 파일을 수정했으면 진입 파일의 import 쿼리 버전도 함께 올립니다. 배포 후에는 밝은 모드와 어두운 모드, 키보드 포커스, 200% 확대, 왼쪽·본문·오른쪽 패널의 스크롤을 확인합니다.

적용 전 확인

• 기존 Carbon 토큰으로 표현할 수 있는지 확인합니다.
• 새 선택자는 실제 공통 사용처가 있을 때만 추가합니다.
• 배경색, 경계선과 텍스트 대비를 두 테마에서 확인합니다.
• 포커스, hover와 선택 상태가 서로 혼동되지 않는지 확인합니다.
• 기능별 스타일을 진입 파일에 직접 넣지 않습니다.