프로젝트
색 16개 + 모서리 곡률 + 서체를 고객사/제품 단위 프리셋으로 묶는다. 라이트/다크 모드와 직교하며, 우상단 드롭다운으로 지금 바로 전환해볼 수 있다.
지금 화면이 데모
우상단 프로젝트 드롭다운을 바꾸면 이 문서 전체의 색·곡률·서체가 함께 바뀐다. 아래 상자의 모서리와 버튼 곡률을 보면서 전환해보자.
rounded-xl 카드 모서리pill (rounded-full 은 배율 무관)
프리셋
Leopard기본. blue/teal, 곡률 1배tokens.css 내장 (기본값)
Pantherblue/zinc 쿨 콘솔, 곡률 0.7배(각지게)tokens.css 내장
Tigerwarm stone/amber, 곡률 1배tokens.css 내장
Acme웜 크림 + 와인, 곡률 1.8배 + 라운디드 서체: 완전히 다른 제품 인상opt-in: projects/acme.css
새 고객 프로젝트 추가 (3단계)
①
프리셋 파일 작성
projects/acme.css 를 복사해 색 16개(라이트/다크)와 형태(--dx-radius-scale, --dx-font-sans)를 채운다.
②
소비 앱에서 import
@import "@duolabs-deux/ui/projects/<이름>.css": 쓰는 앱만 가져간다(버전에 함께 잠김).
③
적용
<html data-theme="<이름>"> 으로 고정하거나, ProjectSelect 목록에 추가해 런타임 전환.
형태 토큰: --dx-radius-scale 은 rounded-xs~4xl 전체에 곱해지는 배율(0.7 각지게 · 1 기본 · 1.8 아주 부드럽게), --dx-font-sans 는 font-sans 서체 스택. 컴포넌트 코드는 무변경: 값만 갈아끼운다.