@x-plat/design-system 0.5.50 → 0.5.52

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.
Files changed (11) hide show
  1. package/README.md +111 -0
  2. package/dist/components/Button/index.css +6 -3
  3. package/dist/components/DatePicker/index.css +15 -8
  4. package/dist/components/Input/index.css +8 -4
  5. package/dist/components/Modal/index.css +1 -1
  6. package/dist/components/Select/index.css +10 -5
  7. package/dist/components/TextArea/index.css +3 -0
  8. package/dist/components/Video/index.css +5 -5
  9. package/dist/components/index.css +33 -18
  10. package/dist/index.css +33 -18
  11. package/package.json +1 -1
package/README.md ADDED
@@ -0,0 +1,111 @@
1
+ # @x-plat/design-system
2
+
3
+ XPLAT UI 디자인 시스템. React 컴포넌트, 레이아웃, 토큰 시스템 제공.
4
+
5
+ `@x-plat/tokens-default` 를 기본 브랜드로 사용하며, 다른 브랜드 토큰 패키지(cbio / daibee-ir / haetbitgil 등) 와 조합 가능.
6
+
7
+ ## 요구 사항
8
+
9
+ | 항목 | 버전 |
10
+ |------|------|
11
+ | Node.js | 18+ |
12
+ | React | 18+ |
13
+
14
+ ## 설치
15
+
16
+ ```bash
17
+ npm install @x-plat/design-system
18
+ ```
19
+
20
+ ## 사용법
21
+
22
+ ### 1. 스타일 로드 (필수)
23
+
24
+ ```tsx
25
+ import "@x-plat/design-system/style.css";
26
+ ```
27
+
28
+ > `style.css` 는 **컴포넌트 스타일 + tokens-default 의 토큰 값** 을 함께 포함한다.
29
+
30
+ ### 2. 컴포넌트 사용
31
+
32
+ ```tsx
33
+ import { Button, Modal, ToastProvider } from "@x-plat/design-system/components";
34
+
35
+ <ToastProvider position="top-right">
36
+ <Layout
37
+ header={<Header logo={<img src="/logo.svg" />} />}
38
+ sideBar={<SideBar>...</SideBar>}
39
+ >
40
+ <FullGrid>
41
+ <GridItem column={{ default: 6, tablet: 4, mobile: 4 }}>
42
+ <Button type="primary">저장</Button>
43
+ </GridItem>
44
+ </FullGrid>
45
+ </Layout>
46
+ </ToastProvider>
47
+ ```
48
+
49
+ ### 3. 다른 브랜드 적용 (cbio / haetbitgil / daibee-ir)
50
+
51
+ ```tsx
52
+ import "@x-plat/design-system/style.css"; // 1) 컴포넌트 + default 토큰
53
+ import "@x-plat/tokens-haetbitgil/tokens.css"; // 2) 햇빛길 토큰으로 override (CSS 카스케이드)
54
+ ```
55
+
56
+ > 순서가 중요. design-system 을 먼저, 브랜드 토큰을 뒤에 import.
57
+
58
+ ## Import 패턴
59
+
60
+ | 방식 | 예시 |
61
+ |------|------|
62
+ | 루트 barrel | `import { Button } from "@x-plat/design-system";` |
63
+ | 서브패스 barrel | `import { Button } from "@x-plat/design-system/components";` |
64
+ | Deep import | `import Button from "@x-plat/design-system/components/Button";` |
65
+
66
+ ## 컴포넌트 목록
67
+
68
+ | 카테고리 | 컴포넌트 |
69
+ |---|---|
70
+ | 입력 | Button, Input, PasswordInput, TextArea, Select, CheckBox, Radio, Switch, DatePicker, Calendar, **Editor** |
71
+ | 표시 | Table, Card, Tag, Chip, Avatar, Badge, Skeleton, Spinner, Divider, EmptyState, Progress |
72
+ | 오버레이 | Modal, Drawer, PopOver, Tooltip, Alert, Toast (ToastProvider 필요) |
73
+ | 네비 | Tab, CardTab, Breadcrumb, Pagination, Steps, Dropdown |
74
+ | 미디어 | Video, FileUpload, ImageSelector, Swiper |
75
+ | 기타 | Accordion, Chart, HtmlTypeWriter |
76
+ | Layout | Layout, Header, SideBar, FullGrid, FullScreen, GapGrid, GridItem |
77
+
78
+ ## AI 에이전트로 작업하기 (Figma Make / Claude / Cursor)
79
+
80
+ AI 에이전트 셋업용 종합 가이드:
81
+
82
+ ```
83
+ https://unpkg.com/@x-plat/design-system/guidelines/AGENT_PROMPT.md
84
+ ```
85
+
86
+ 위 내용 전체를 복사해서 에이전트 컨텍스트에 붙여넣으면, 절대 규칙 / 레이아웃 / 컴포넌트 카탈로그 / 토큰 사용법 / 흔히 누락되는 케이스 등이 함께 적용된다.
87
+
88
+ ## 핵심 규칙
89
+
90
+ 1. 컴포넌트에 `color` / `className` / `style` prop 없음
91
+ 2. 컴포넌트는 `width: 100%` → 반드시 GridItem 또는 wrapper 로 너비 제어
92
+ 3. CSS 로 DS 컴포넌트 오버라이드 금지
93
+ 4. 색상·간격·타이포는 semantic 토큰만 사용
94
+
95
+ ## 가이드라인 문서
96
+
97
+ - `guidelines/Guidelines.md` — 전체 진입 + 읽기 순서
98
+ - `guidelines/setup.md` — 설치 + Layout / Toast / 브랜드 전환
99
+ - `guidelines/AGENT_PROMPT.md` — AI 에이전트 셋업 프롬프트
100
+ - `guidelines/foundations/{color,spacing,typography,icons}.md`
101
+ - `guidelines/components/{name}.md` — 컴포넌트별 가이드
102
+ - `guidelines/composition/{grid,layout}.md`
103
+
104
+ unpkg 로 접근:
105
+ ```
106
+ https://unpkg.com/@x-plat/design-system/guidelines/{경로}
107
+ ```
108
+
109
+ ## 라이선스
110
+
111
+ Private. XPLAT WOONG.
package/dist/components/Button/index.css CHANGED
@@ -15,17 +15,20 @@
15
15
  .lib-xplat-button.sm {
16
16
  height: var(--spacing-control-height-sm);
17
17
  padding: 0 var(--spacing-space-3);
18
- font-size: 14px;
18
+ font-size: var(--semantic-typo-label-2-m-size);
19
+ line-height: var(--semantic-typo-label-2-m-lh);
19
20
  }
20
21
  .lib-xplat-button.md {
21
22
  height: var(--spacing-control-height-md);
22
23
  padding: 0 var(--spacing-space-4);
23
- font-size: 16px;
24
+ font-size: var(--semantic-typo-label-1-m-size);
25
+ line-height: var(--semantic-typo-label-1-m-lh);
24
26
  }
25
27
  .lib-xplat-button.lg {
26
28
  height: var(--spacing-control-height-lg);
27
29
  padding: 0 var(--spacing-space-6);
28
- font-size: 18px;
30
+ font-size: var(--semantic-typo-body-1-m-size);
31
+ line-height: var(--semantic-typo-body-1-m-lh);
29
32
  }
30
33
  .lib-xplat-button:disabled {
31
34
  cursor: not-allowed;
package/dist/components/DatePicker/index.css CHANGED
@@ -15,17 +15,20 @@
15
15
  .lib-xplat-button.sm {
16
16
  height: var(--spacing-control-height-sm);
17
17
  padding: 0 var(--spacing-space-3);
18
- font-size: 14px;
18
+ font-size: var(--semantic-typo-label-2-m-size);
19
+ line-height: var(--semantic-typo-label-2-m-lh);
19
20
  }
20
21
  .lib-xplat-button.md {
21
22
  height: var(--spacing-control-height-md);
22
23
  padding: 0 var(--spacing-space-4);
23
- font-size: 16px;
24
+ font-size: var(--semantic-typo-label-1-m-size);
25
+ line-height: var(--semantic-typo-label-1-m-lh);
24
26
  }
25
27
  .lib-xplat-button.lg {
26
28
  height: var(--spacing-control-height-lg);
27
29
  padding: 0 var(--spacing-space-6);
28
- font-size: 18px;
30
+ font-size: var(--semantic-typo-body-1-m-size);
31
+ line-height: var(--semantic-typo-body-1-m-lh);
29
32
  }
30
33
  .lib-xplat-button:disabled {
31
34
  cursor: not-allowed;
@@ -121,15 +124,18 @@
121
124
  }
122
125
  .lib-xplat-input-wrap .lib-xplat-input.sm {
123
126
  height: var(--spacing-control-height-sm);
124
- font-size: 14px;
127
+ font-size: var(--semantic-typo-label-2-m-size);
128
+ line-height: var(--semantic-typo-label-2-m-lh);
125
129
  }
126
130
  .lib-xplat-input-wrap .lib-xplat-input.md {
127
131
  height: var(--spacing-control-height-md);
128
- font-size: 16px;
132
+ font-size: var(--semantic-typo-label-1-m-size);
133
+ line-height: var(--semantic-typo-label-1-m-lh);
129
134
  }
130
135
  .lib-xplat-input-wrap .lib-xplat-input.lg {
131
136
  height: var(--spacing-control-height-lg);
132
- font-size: 18px;
137
+ font-size: var(--semantic-typo-body-1-m-size);
138
+ line-height: var(--semantic-typo-body-1-m-lh);
133
139
  }
134
140
  .lib-xplat-input-wrap .lib-xplat-input.disabled {
135
141
  background-color: var(--semantic-surface-neutral-disabled);
@@ -169,7 +175,8 @@
169
175
  .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation {
170
176
  display: flex;
171
177
  gap: var(--spacing-space-1);
172
- font-size: 12px;
178
+ font-size: var(--semantic-typo-caption-2-r-size);
179
+ line-height: var(--semantic-typo-caption-2-r-lh);
173
180
  align-items: center;
174
181
  user-select: none;
175
182
  }
@@ -195,7 +202,7 @@
195
202
  }
196
203
  .lib-xplat-modal.modal-box {
197
204
  border-radius: var(--spacing-radius-lg);
198
- background-color: #fff;
205
+ background-color: var(--semantic-surface-neutral-default);
199
206
  padding: var(--spacing-space-6);
200
207
  min-width: min-content;
201
208
  max-width: calc(100vw - 32px);
package/dist/components/Input/index.css CHANGED
@@ -27,15 +27,18 @@
27
27
  }
28
28
  .lib-xplat-input-wrap .lib-xplat-input.sm {
29
29
  height: var(--spacing-control-height-sm);
30
- font-size: 14px;
30
+ font-size: var(--semantic-typo-label-2-m-size);
31
+ line-height: var(--semantic-typo-label-2-m-lh);
31
32
  }
32
33
  .lib-xplat-input-wrap .lib-xplat-input.md {
33
34
  height: var(--spacing-control-height-md);
34
- font-size: 16px;
35
+ font-size: var(--semantic-typo-label-1-m-size);
36
+ line-height: var(--semantic-typo-label-1-m-lh);
35
37
  }
36
38
  .lib-xplat-input-wrap .lib-xplat-input.lg {
37
39
  height: var(--spacing-control-height-lg);
38
- font-size: 18px;
40
+ font-size: var(--semantic-typo-body-1-m-size);
41
+ line-height: var(--semantic-typo-body-1-m-lh);
39
42
  }
40
43
  .lib-xplat-input-wrap .lib-xplat-input.disabled {
41
44
  background-color: var(--semantic-surface-neutral-disabled);
@@ -75,7 +78,8 @@
75
78
  .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation {
76
79
  display: flex;
77
80
  gap: var(--spacing-space-1);
78
- font-size: 12px;
81
+ font-size: var(--semantic-typo-caption-2-r-size);
82
+ line-height: var(--semantic-typo-caption-2-r-lh);
79
83
  align-items: center;
80
84
  user-select: none;
81
85
  }
package/dist/components/Modal/index.css CHANGED
@@ -4,7 +4,7 @@
4
4
  }
5
5
  .lib-xplat-modal.modal-box {
6
6
  border-radius: var(--spacing-radius-lg);
7
- background-color: #fff;
7
+ background-color: var(--semantic-surface-neutral-default);
8
8
  padding: var(--spacing-space-6);
9
9
  min-width: min-content;
10
10
  max-width: calc(100vw - 32px);
package/dist/components/Select/index.css CHANGED
@@ -11,25 +11,30 @@
11
11
  .lib-xplat-select.sm .select-trigger {
12
12
  min-height: var(--spacing-control-height-sm);
13
13
  padding: var(--spacing-space-1) var(--spacing-space-2);
14
- font-size: 12px;
14
+ font-size: var(--semantic-typo-label-2-m-size);
15
+ line-height: var(--semantic-typo-label-2-m-lh);
15
16
  }
16
17
  .lib-xplat-select.md .select-trigger {
17
18
  min-height: var(--spacing-control-height-md);
18
19
  padding: var(--spacing-space-2) var(--spacing-space-3);
19
- font-size: 14px;
20
+ font-size: var(--semantic-typo-label-1-m-size);
21
+ line-height: var(--semantic-typo-label-1-m-lh);
20
22
  }
21
23
  .lib-xplat-select.lg .select-trigger {
22
24
  min-height: var(--spacing-control-height-lg);
23
25
  padding: var(--spacing-space-2) var(--spacing-space-4);
24
- font-size: 16px;
26
+ font-size: var(--semantic-typo-body-1-m-size);
27
+ line-height: var(--semantic-typo-body-1-m-lh);
25
28
  }
26
29
  .lib-xplat-select.sm .select-content .select-item {
27
30
  padding: var(--spacing-space-2) var(--spacing-space-2);
28
- font-size: 12px;
31
+ font-size: var(--semantic-typo-label-2-m-size);
32
+ line-height: var(--semantic-typo-label-2-m-lh);
29
33
  }
30
34
  .lib-xplat-select.lg .select-content .select-item {
31
35
  padding: var(--spacing-space-2) var(--spacing-space-4);
32
- font-size: 16px;
36
+ font-size: var(--semantic-typo-body-1-m-size);
37
+ line-height: var(--semantic-typo-body-1-m-lh);
33
38
  }
34
39
  .lib-xplat-select .select-trigger {
35
40
  cursor: pointer;
package/dist/components/TextArea/index.css CHANGED
@@ -39,6 +39,9 @@
39
39
  color: var(--semantic-text-subtle);
40
40
  resize: none;
41
41
  height: 1.5em;
42
+ font-size: var(--semantic-typo-label-1-m-size);
43
+ line-height: var(--semantic-typo-label-1-m-lh);
44
+ font-family: inherit;
42
45
  }
43
46
  .lib-xplat-textarea-wrapper .lib-xplat-textarea > textarea:disabled {
44
47
  cursor: not-allowed;
package/dist/components/Video/index.css CHANGED
@@ -195,7 +195,7 @@
195
195
  height: 12px;
196
196
  margin-top: -4px;
197
197
  border-radius: 50%;
198
- background: #fff;
198
+ background: var(--semantic-icon-inverse);
199
199
  border: none;
200
200
  cursor: pointer;
201
201
  }
@@ -204,7 +204,7 @@
204
204
  width: 12px;
205
205
  height: 12px;
206
206
  border-radius: 50%;
207
- background: #fff;
207
+ background: var(--semantic-icon-inverse);
208
208
  border: none;
209
209
  cursor: pointer;
210
210
  }
@@ -244,8 +244,8 @@
244
244
  background:
245
245
  linear-gradient(
246
246
  to right,
247
- #fff 0%,
248
- #fff var(--volume, 0%),
247
+ var(--semantic-icon-inverse) 0%,
248
+ var(--semantic-icon-inverse) var(--volume, 0%),
249
249
  rgba(255, 255, 255, 0.3) var(--volume, 0%),
250
250
  rgba(255, 255, 255, 0.3) 100%);
251
251
  }
@@ -257,5 +257,5 @@
257
257
  .lib-xplat-video .volume-slider::-moz-range-progress {
258
258
  height: 4px;
259
259
  border-radius: 2px;
260
- background: #fff;
260
+ background: var(--semantic-icon-inverse);
261
261
  }
package/dist/components/index.css CHANGED
@@ -1994,17 +1994,20 @@
1994
1994
  .lib-xplat-button.sm {
1995
1995
  height: var(--spacing-control-height-sm);
1996
1996
  padding: 0 var(--spacing-space-3);
1997
- font-size: 14px;
1997
+ font-size: var(--semantic-typo-label-2-m-size);
1998
+ line-height: var(--semantic-typo-label-2-m-lh);
1998
1999
  }
1999
2000
  .lib-xplat-button.md {
2000
2001
  height: var(--spacing-control-height-md);
2001
2002
  padding: 0 var(--spacing-space-4);
2002
- font-size: 16px;
2003
+ font-size: var(--semantic-typo-label-1-m-size);
2004
+ line-height: var(--semantic-typo-label-1-m-lh);
2003
2005
  }
2004
2006
  .lib-xplat-button.lg {
2005
2007
  height: var(--spacing-control-height-lg);
2006
2008
  padding: 0 var(--spacing-space-6);
2007
- font-size: 18px;
2009
+ font-size: var(--semantic-typo-body-1-m-size);
2010
+ line-height: var(--semantic-typo-body-1-m-lh);
2008
2011
  }
2009
2012
  .lib-xplat-button:disabled {
2010
2013
  cursor: not-allowed;
@@ -2857,15 +2860,18 @@
2857
2860
  }
2858
2861
  .lib-xplat-input-wrap .lib-xplat-input.sm {
2859
2862
  height: var(--spacing-control-height-sm);
2860
- font-size: 14px;
2863
+ font-size: var(--semantic-typo-label-2-m-size);
2864
+ line-height: var(--semantic-typo-label-2-m-lh);
2861
2865
  }
2862
2866
  .lib-xplat-input-wrap .lib-xplat-input.md {
2863
2867
  height: var(--spacing-control-height-md);
2864
- font-size: 16px;
2868
+ font-size: var(--semantic-typo-label-1-m-size);
2869
+ line-height: var(--semantic-typo-label-1-m-lh);
2865
2870
  }
2866
2871
  .lib-xplat-input-wrap .lib-xplat-input.lg {
2867
2872
  height: var(--spacing-control-height-lg);
2868
- font-size: 18px;
2873
+ font-size: var(--semantic-typo-body-1-m-size);
2874
+ line-height: var(--semantic-typo-body-1-m-lh);
2869
2875
  }
2870
2876
  .lib-xplat-input-wrap .lib-xplat-input.disabled {
2871
2877
  background-color: var(--semantic-surface-neutral-disabled);
@@ -2905,7 +2911,8 @@
2905
2911
  .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation {
2906
2912
  display: flex;
2907
2913
  gap: var(--spacing-space-1);
2908
- font-size: 12px;
2914
+ font-size: var(--semantic-typo-caption-2-r-size);
2915
+ line-height: var(--semantic-typo-caption-2-r-lh);
2909
2916
  align-items: center;
2910
2917
  user-select: none;
2911
2918
  }
@@ -2931,7 +2938,7 @@
2931
2938
  }
2932
2939
  .lib-xplat-modal.modal-box {
2933
2940
  border-radius: var(--spacing-radius-lg);
2934
- background-color: #fff;
2941
+ background-color: var(--semantic-surface-neutral-default);
2935
2942
  padding: var(--spacing-space-6);
2936
2943
  min-width: min-content;
2937
2944
  max-width: calc(100vw - 32px);
@@ -4178,25 +4185,30 @@
4178
4185
  .lib-xplat-select.sm .select-trigger {
4179
4186
  min-height: var(--spacing-control-height-sm);
4180
4187
  padding: var(--spacing-space-1) var(--spacing-space-2);
4181
- font-size: 12px;
4188
+ font-size: var(--semantic-typo-label-2-m-size);
4189
+ line-height: var(--semantic-typo-label-2-m-lh);
4182
4190
  }
4183
4191
  .lib-xplat-select.md .select-trigger {
4184
4192
  min-height: var(--spacing-control-height-md);
4185
4193
  padding: var(--spacing-space-2) var(--spacing-space-3);
4186
- font-size: 14px;
4194
+ font-size: var(--semantic-typo-label-1-m-size);
4195
+ line-height: var(--semantic-typo-label-1-m-lh);
4187
4196
  }
4188
4197
  .lib-xplat-select.lg .select-trigger {
4189
4198
  min-height: var(--spacing-control-height-lg);
4190
4199
  padding: var(--spacing-space-2) var(--spacing-space-4);
4191
- font-size: 16px;
4200
+ font-size: var(--semantic-typo-body-1-m-size);
4201
+ line-height: var(--semantic-typo-body-1-m-lh);
4192
4202
  }
4193
4203
  .lib-xplat-select.sm .select-content .select-item {
4194
4204
  padding: var(--spacing-space-2) var(--spacing-space-2);
4195
- font-size: 12px;
4205
+ font-size: var(--semantic-typo-label-2-m-size);
4206
+ line-height: var(--semantic-typo-label-2-m-lh);
4196
4207
  }
4197
4208
  .lib-xplat-select.lg .select-content .select-item {
4198
4209
  padding: var(--spacing-space-2) var(--spacing-space-4);
4199
- font-size: 16px;
4210
+ font-size: var(--semantic-typo-body-1-m-size);
4211
+ line-height: var(--semantic-typo-body-1-m-lh);
4200
4212
  }
4201
4213
  .lib-xplat-select .select-trigger {
4202
4214
  cursor: pointer;
@@ -5136,6 +5148,9 @@
5136
5148
  color: var(--semantic-text-subtle);
5137
5149
  resize: none;
5138
5150
  height: 1.5em;
5151
+ font-size: var(--semantic-typo-label-1-m-size);
5152
+ line-height: var(--semantic-typo-label-1-m-lh);
5153
+ font-family: inherit;
5139
5154
  }
5140
5155
  .lib-xplat-textarea-wrapper .lib-xplat-textarea > textarea:disabled {
5141
5156
  cursor: not-allowed;
@@ -5450,7 +5465,7 @@
5450
5465
  height: 12px;
5451
5466
  margin-top: -4px;
5452
5467
  border-radius: 50%;
5453
- background: #fff;
5468
+ background: var(--semantic-icon-inverse);
5454
5469
  border: none;
5455
5470
  cursor: pointer;
5456
5471
  }
@@ -5459,7 +5474,7 @@
5459
5474
  width: 12px;
5460
5475
  height: 12px;
5461
5476
  border-radius: 50%;
5462
- background: #fff;
5477
+ background: var(--semantic-icon-inverse);
5463
5478
  border: none;
5464
5479
  cursor: pointer;
5465
5480
  }
@@ -5499,8 +5514,8 @@
5499
5514
  background:
5500
5515
  linear-gradient(
5501
5516
  to right,
5502
- #fff 0%,
5503
- #fff var(--volume, 0%),
5517
+ var(--semantic-icon-inverse) 0%,
5518
+ var(--semantic-icon-inverse) var(--volume, 0%),
5504
5519
  rgba(255, 255, 255, 0.3) var(--volume, 0%),
5505
5520
  rgba(255, 255, 255, 0.3) 100%);
5506
5521
  }
@@ -5512,5 +5527,5 @@
5512
5527
  .lib-xplat-video .volume-slider::-moz-range-progress {
5513
5528
  height: 4px;
5514
5529
  border-radius: 2px;
5515
- background: #fff;
5530
+ background: var(--semantic-icon-inverse);
5516
5531
  }
package/dist/index.css CHANGED
@@ -1994,17 +1994,20 @@
1994
1994
  .lib-xplat-button.sm {
1995
1995
  height: var(--spacing-control-height-sm);
1996
1996
  padding: 0 var(--spacing-space-3);
1997
- font-size: 14px;
1997
+ font-size: var(--semantic-typo-label-2-m-size);
1998
+ line-height: var(--semantic-typo-label-2-m-lh);
1998
1999
  }
1999
2000
  .lib-xplat-button.md {
2000
2001
  height: var(--spacing-control-height-md);
2001
2002
  padding: 0 var(--spacing-space-4);
2002
- font-size: 16px;
2003
+ font-size: var(--semantic-typo-label-1-m-size);
2004
+ line-height: var(--semantic-typo-label-1-m-lh);
2003
2005
  }
2004
2006
  .lib-xplat-button.lg {
2005
2007
  height: var(--spacing-control-height-lg);
2006
2008
  padding: 0 var(--spacing-space-6);
2007
- font-size: 18px;
2009
+ font-size: var(--semantic-typo-body-1-m-size);
2010
+ line-height: var(--semantic-typo-body-1-m-lh);
2008
2011
  }
2009
2012
  .lib-xplat-button:disabled {
2010
2013
  cursor: not-allowed;
@@ -2857,15 +2860,18 @@
2857
2860
  }
2858
2861
  .lib-xplat-input-wrap .lib-xplat-input.sm {
2859
2862
  height: var(--spacing-control-height-sm);
2860
- font-size: 14px;
2863
+ font-size: var(--semantic-typo-label-2-m-size);
2864
+ line-height: var(--semantic-typo-label-2-m-lh);
2861
2865
  }
2862
2866
  .lib-xplat-input-wrap .lib-xplat-input.md {
2863
2867
  height: var(--spacing-control-height-md);
2864
- font-size: 16px;
2868
+ font-size: var(--semantic-typo-label-1-m-size);
2869
+ line-height: var(--semantic-typo-label-1-m-lh);
2865
2870
  }
2866
2871
  .lib-xplat-input-wrap .lib-xplat-input.lg {
2867
2872
  height: var(--spacing-control-height-lg);
2868
- font-size: 18px;
2873
+ font-size: var(--semantic-typo-body-1-m-size);
2874
+ line-height: var(--semantic-typo-body-1-m-lh);
2869
2875
  }
2870
2876
  .lib-xplat-input-wrap .lib-xplat-input.disabled {
2871
2877
  background-color: var(--semantic-surface-neutral-disabled);
@@ -2905,7 +2911,8 @@
2905
2911
  .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation {
2906
2912
  display: flex;
2907
2913
  gap: var(--spacing-space-1);
2908
- font-size: 12px;
2914
+ font-size: var(--semantic-typo-caption-2-r-size);
2915
+ line-height: var(--semantic-typo-caption-2-r-lh);
2909
2916
  align-items: center;
2910
2917
  user-select: none;
2911
2918
  }
@@ -2931,7 +2938,7 @@
2931
2938
  }
2932
2939
  .lib-xplat-modal.modal-box {
2933
2940
  border-radius: var(--spacing-radius-lg);
2934
- background-color: #fff;
2941
+ background-color: var(--semantic-surface-neutral-default);
2935
2942
  padding: var(--spacing-space-6);
2936
2943
  min-width: min-content;
2937
2944
  max-width: calc(100vw - 32px);
@@ -4178,25 +4185,30 @@
4178
4185
  .lib-xplat-select.sm .select-trigger {
4179
4186
  min-height: var(--spacing-control-height-sm);
4180
4187
  padding: var(--spacing-space-1) var(--spacing-space-2);
4181
- font-size: 12px;
4188
+ font-size: var(--semantic-typo-label-2-m-size);
4189
+ line-height: var(--semantic-typo-label-2-m-lh);
4182
4190
  }
4183
4191
  .lib-xplat-select.md .select-trigger {
4184
4192
  min-height: var(--spacing-control-height-md);
4185
4193
  padding: var(--spacing-space-2) var(--spacing-space-3);
4186
- font-size: 14px;
4194
+ font-size: var(--semantic-typo-label-1-m-size);
4195
+ line-height: var(--semantic-typo-label-1-m-lh);
4187
4196
  }
4188
4197
  .lib-xplat-select.lg .select-trigger {
4189
4198
  min-height: var(--spacing-control-height-lg);
4190
4199
  padding: var(--spacing-space-2) var(--spacing-space-4);
4191
- font-size: 16px;
4200
+ font-size: var(--semantic-typo-body-1-m-size);
4201
+ line-height: var(--semantic-typo-body-1-m-lh);
4192
4202
  }
4193
4203
  .lib-xplat-select.sm .select-content .select-item {
4194
4204
  padding: var(--spacing-space-2) var(--spacing-space-2);
4195
- font-size: 12px;
4205
+ font-size: var(--semantic-typo-label-2-m-size);
4206
+ line-height: var(--semantic-typo-label-2-m-lh);
4196
4207
  }
4197
4208
  .lib-xplat-select.lg .select-content .select-item {
4198
4209
  padding: var(--spacing-space-2) var(--spacing-space-4);
4199
- font-size: 16px;
4210
+ font-size: var(--semantic-typo-body-1-m-size);
4211
+ line-height: var(--semantic-typo-body-1-m-lh);
4200
4212
  }
4201
4213
  .lib-xplat-select .select-trigger {
4202
4214
  cursor: pointer;
@@ -5136,6 +5148,9 @@
5136
5148
  color: var(--semantic-text-subtle);
5137
5149
  resize: none;
5138
5150
  height: 1.5em;
5151
+ font-size: var(--semantic-typo-label-1-m-size);
5152
+ line-height: var(--semantic-typo-label-1-m-lh);
5153
+ font-family: inherit;
5139
5154
  }
5140
5155
  .lib-xplat-textarea-wrapper .lib-xplat-textarea > textarea:disabled {
5141
5156
  cursor: not-allowed;
@@ -5450,7 +5465,7 @@
5450
5465
  height: 12px;
5451
5466
  margin-top: -4px;
5452
5467
  border-radius: 50%;
5453
- background: #fff;
5468
+ background: var(--semantic-icon-inverse);
5454
5469
  border: none;
5455
5470
  cursor: pointer;
5456
5471
  }
@@ -5459,7 +5474,7 @@
5459
5474
  width: 12px;
5460
5475
  height: 12px;
5461
5476
  border-radius: 50%;
5462
- background: #fff;
5477
+ background: var(--semantic-icon-inverse);
5463
5478
  border: none;
5464
5479
  cursor: pointer;
5465
5480
  }
@@ -5499,8 +5514,8 @@
5499
5514
  background:
5500
5515
  linear-gradient(
5501
5516
  to right,
5502
- #fff 0%,
5503
- #fff var(--volume, 0%),
5517
+ var(--semantic-icon-inverse) 0%,
5518
+ var(--semantic-icon-inverse) var(--volume, 0%),
5504
5519
  rgba(255, 255, 255, 0.3) var(--volume, 0%),
5505
5520
  rgba(255, 255, 255, 0.3) 100%);
5506
5521
  }
@@ -5512,7 +5527,7 @@
5512
5527
  .lib-xplat-video .volume-slider::-moz-range-progress {
5513
5528
  height: 4px;
5514
5529
  border-radius: 2px;
5515
- background: #fff;
5530
+ background: var(--semantic-icon-inverse);
5516
5531
  }
5517
5532
 
5518
5533
  /* src/layout/Grid/FullGrid/fullgrid.scss */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@x-plat/design-system",
3
- "version": "0.5.50",
3
+ "version": "0.5.52",
4
4
  "description": "XPLAT UI Design System",
5
5
  "author": "XPLAT WOONG",
6
6
  "main": "dist/index.cjs",