@x-plat/design-system 0.5.48 → 0.5.50

package/guidelines/AGENT_PROMPT.md

@@ -38,6 +38,26 @@ import { Button, Modal, ToastProvider, useToast, ... } from "@x-plat/design-syst
 import { Layout, Header, SideBar, FullGrid, FullScreen, GapGrid, GridItem } from "@x-plat/design-system/layout";
 ```
 
+### 브랜드 전환 (default 외 다른 브랜드 적용)
+
+design-system 은 빌드 시점에 tokens-default 를 임베드한다. 다른 브랜드를 쓰려면 **design-system 의 style.css 를 import 한 뒤** 브랜드 tokens.css 를 추가 import 한다 (CSS 카스케이드: 나중 선언이 이김).
+
+```tsx
+// ✅ 햇빛길 브랜드
+import "@x-plat/design-system/style.css";          // 1) 컴포넌트 스타일 + default 토큰
+import "@x-plat/tokens-haetbitgil/tokens.css";     // 2) 색상/타이포 override
+
+// ✅ CBIO 브랜드
+import "@x-plat/design-system/style.css";
+import "@x-plat/tokens-cbio/tokens.css";
+
+// ❌ 순서 반대 — design-system 이 default 로 다시 덮어버린다
+import "@x-plat/tokens-haetbitgil/tokens.css";
+import "@x-plat/design-system/style.css";  // 이게 마지막에 로드되어 default 적용
+```
+
+> 브랜드 토큰 단독 import 만으로는 작동 X — 컴포넌트 스타일이 빠진다. 반드시 design-system style.css 를 먼저 로드.
+
 ---
 
 ## 앱 최상단 레이아웃 (필수 구조)

package/guidelines/setup.md

@@ -8,6 +8,34 @@
 import "@x-plat/design-system/style.css";
 ```
 
+> `style.css` 는 **컴포넌트 스타일 + tokens-default 의 토큰 값** 을 함께 포함한다. 다른 브랜드를 적용하려면 아래 "브랜드 전환" 섹션 참고.
+
+## 브랜드 전환 (cbio / haetbitgil / daibee-ir 등)
+
+design-system 은 tokens-default 를 기본으로 사용한다. 다른 브랜드 토큰을 적용하려면 **design-system 의 style.css 를 import 한 뒤** 해당 브랜드 토큰을 import 한다 (CSS 카스케이드: 나중 선언이 이김).
+
+```tsx
+// ✅ 햇빛길 브랜드 적용
+import "@x-plat/design-system/style.css";          // 1) 컴포넌트 스타일 + default 토큰
+import "@x-plat/tokens-haetbitgil/tokens.css";     // 2) 햇빛길 색상/타이포로 override
+```
+
+```tsx
+// ✅ CBIO 브랜드 적용
+import "@x-plat/design-system/style.css";
+import "@x-plat/tokens-cbio/tokens.css";
+```
+
+```tsx
+// ❌ 순서 반대 — design-system 이 다시 default 로 덮음
+import "@x-plat/tokens-haetbitgil/tokens.css";
+import "@x-plat/design-system/style.css";
+```
+
+**기본(default) 브랜드** 만 쓸 거면 design-system style.css 만 import 하면 된다.
+
+**브랜드 토큰만** import 하면 컴포넌트 스타일이 빠져서 동작하지 않는다 — 반드시 design-system 의 style.css 를 함께 로드.
+
 ## 컴포넌트 Import
 
 ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-plat/design-system",
-  "version": "0.5.48",
+  "version": "0.5.50",
   "description": "XPLAT UI Design System",
   "author": "XPLAT WOONG",
   "main": "dist/index.cjs",