@x-plat/design-system 0.5.48 → 0.5.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/guidelines/AGENT_PROMPT.md +20 -0
- package/guidelines/setup.md +28 -0
- package/package.json +1 -1
|
@@ -38,6 +38,26 @@ import { Button, Modal, ToastProvider, useToast, ... } from "@x-plat/design-syst
|
|
|
38
38
|
import { Layout, Header, SideBar, FullGrid, FullScreen, GapGrid, GridItem } from "@x-plat/design-system/layout";
|
|
39
39
|
```
|
|
40
40
|
|
|
41
|
+
### 브랜드 전환 (default 외 다른 브랜드 적용)
|
|
42
|
+
|
|
43
|
+
design-system 은 빌드 시점에 tokens-default 를 임베드한다. 다른 브랜드를 쓰려면 **design-system 의 style.css 를 import 한 뒤** 브랜드 tokens.css 를 추가 import 한다 (CSS 카스케이드: 나중 선언이 이김).
|
|
44
|
+
|
|
45
|
+
```tsx
|
|
46
|
+
// ✅ 햇빛길 브랜드
|
|
47
|
+
import "@x-plat/design-system/style.css"; // 1) 컴포넌트 스타일 + default 토큰
|
|
48
|
+
import "@x-plat/tokens-haetbitgil/tokens.css"; // 2) 색상/타이포 override
|
|
49
|
+
|
|
50
|
+
// ✅ CBIO 브랜드
|
|
51
|
+
import "@x-plat/design-system/style.css";
|
|
52
|
+
import "@x-plat/tokens-cbio/tokens.css";
|
|
53
|
+
|
|
54
|
+
// ❌ 순서 반대 — design-system 이 default 로 다시 덮어버린다
|
|
55
|
+
import "@x-plat/tokens-haetbitgil/tokens.css";
|
|
56
|
+
import "@x-plat/design-system/style.css"; // 이게 마지막에 로드되어 default 적용
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
> 브랜드 토큰 단독 import 만으로는 작동 X — 컴포넌트 스타일이 빠진다. 반드시 design-system style.css 를 먼저 로드.
|
|
60
|
+
|
|
41
61
|
---
|
|
42
62
|
|
|
43
63
|
## 앱 최상단 레이아웃 (필수 구조)
|
package/guidelines/setup.md
CHANGED
|
@@ -8,6 +8,34 @@
|
|
|
8
8
|
import "@x-plat/design-system/style.css";
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
+
> `style.css` 는 **컴포넌트 스타일 + tokens-default 의 토큰 값** 을 함께 포함한다. 다른 브랜드를 적용하려면 아래 "브랜드 전환" 섹션 참고.
|
|
12
|
+
|
|
13
|
+
## 브랜드 전환 (cbio / haetbitgil / daibee-ir 등)
|
|
14
|
+
|
|
15
|
+
design-system 은 tokens-default 를 기본으로 사용한다. 다른 브랜드 토큰을 적용하려면 **design-system 의 style.css 를 import 한 뒤** 해당 브랜드 토큰을 import 한다 (CSS 카스케이드: 나중 선언이 이김).
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
// ✅ 햇빛길 브랜드 적용
|
|
19
|
+
import "@x-plat/design-system/style.css"; // 1) 컴포넌트 스타일 + default 토큰
|
|
20
|
+
import "@x-plat/tokens-haetbitgil/tokens.css"; // 2) 햇빛길 색상/타이포로 override
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
// ✅ CBIO 브랜드 적용
|
|
25
|
+
import "@x-plat/design-system/style.css";
|
|
26
|
+
import "@x-plat/tokens-cbio/tokens.css";
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
// ❌ 순서 반대 — design-system 이 다시 default 로 덮음
|
|
31
|
+
import "@x-plat/tokens-haetbitgil/tokens.css";
|
|
32
|
+
import "@x-plat/design-system/style.css";
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
**기본(default) 브랜드** 만 쓸 거면 design-system style.css 만 import 하면 된다.
|
|
36
|
+
|
|
37
|
+
**브랜드 토큰만** import 하면 컴포넌트 스타일이 빠져서 동작하지 않는다 — 반드시 design-system 의 style.css 를 함께 로드.
|
|
38
|
+
|
|
11
39
|
## 컴포넌트 Import
|
|
12
40
|
|
|
13
41
|
```tsx
|