@x-plat/design-system 0.5.51 → 0.5.53
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/README.md +111 -0
- package/dist/components/ChatInput/index.css +2 -2
- package/dist/components/CheckBox/index.css +8 -2
- package/dist/components/DatePicker/index.css +2 -2
- package/dist/components/Input/index.css +1 -1
- package/dist/components/Modal/index.css +1 -1
- package/dist/components/Radio/index.css +8 -2
- package/dist/components/Select/index.css +3 -2
- package/dist/components/Video/index.css +5 -5
- package/dist/components/index.css +28 -15
- package/dist/index.css +28 -15
- 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.
|
|
@@ -109,8 +109,8 @@
|
|
|
109
109
|
max-height: 200px;
|
|
110
110
|
overflow-y: auto;
|
|
111
111
|
padding: 4px 0;
|
|
112
|
-
font-size:
|
|
113
|
-
line-height:
|
|
112
|
+
font-size: var(--semantic-typo-label-1-m-size);
|
|
113
|
+
line-height: var(--semantic-typo-label-1-m-lh);
|
|
114
114
|
color: var(--semantic-text-strong);
|
|
115
115
|
background: transparent;
|
|
116
116
|
}
|
|
@@ -24,10 +24,16 @@
|
|
|
24
24
|
height: var(--spacing-space-6);
|
|
25
25
|
}
|
|
26
26
|
.lib-xplat-checkbox.sm > .label {
|
|
27
|
-
font-size:
|
|
27
|
+
font-size: var(--semantic-typo-label-2-m-size);
|
|
28
|
+
line-height: var(--semantic-typo-label-2-m-lh);
|
|
29
|
+
}
|
|
30
|
+
.lib-xplat-checkbox.md > .label {
|
|
31
|
+
font-size: var(--semantic-typo-label-1-m-size);
|
|
32
|
+
line-height: var(--semantic-typo-label-1-m-lh);
|
|
28
33
|
}
|
|
29
34
|
.lib-xplat-checkbox.lg > .label {
|
|
30
|
-
font-size:
|
|
35
|
+
font-size: var(--semantic-typo-body-1-m-size);
|
|
36
|
+
line-height: var(--semantic-typo-body-1-m-lh);
|
|
31
37
|
}
|
|
32
38
|
.lib-xplat-checkbox > .checkbox {
|
|
33
39
|
display: flex;
|
|
@@ -193,7 +193,7 @@
|
|
|
193
193
|
color: var(--semantic-text-error);
|
|
194
194
|
}
|
|
195
195
|
.lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation > .icon {
|
|
196
|
-
font-size:
|
|
196
|
+
font-size: var(--semantic-typo-label-1-m-size);
|
|
197
197
|
}
|
|
198
198
|
|
|
199
199
|
/* src/components/Modal/modal.scss */
|
|
@@ -202,7 +202,7 @@
|
|
|
202
202
|
}
|
|
203
203
|
.lib-xplat-modal.modal-box {
|
|
204
204
|
border-radius: var(--spacing-radius-lg);
|
|
205
|
-
background-color:
|
|
205
|
+
background-color: var(--semantic-surface-neutral-default);
|
|
206
206
|
padding: var(--spacing-space-6);
|
|
207
207
|
min-width: min-content;
|
|
208
208
|
max-width: calc(100vw - 32px);
|
|
@@ -19,12 +19,17 @@
|
|
|
19
19
|
height: var(--spacing-space-2);
|
|
20
20
|
}
|
|
21
21
|
.lib-xplat-radio.sm > span {
|
|
22
|
-
font-size:
|
|
22
|
+
font-size: var(--semantic-typo-label-2-m-size);
|
|
23
|
+
line-height: var(--semantic-typo-label-2-m-lh);
|
|
23
24
|
}
|
|
24
25
|
.lib-xplat-radio.md > .circle {
|
|
25
26
|
width: var(--spacing-space-5);
|
|
26
27
|
height: var(--spacing-space-5);
|
|
27
28
|
}
|
|
29
|
+
.lib-xplat-radio.md > span {
|
|
30
|
+
font-size: var(--semantic-typo-label-1-m-size);
|
|
31
|
+
line-height: var(--semantic-typo-label-1-m-lh);
|
|
32
|
+
}
|
|
28
33
|
.lib-xplat-radio.lg > .circle {
|
|
29
34
|
width: var(--spacing-space-6);
|
|
30
35
|
height: var(--spacing-space-6);
|
|
@@ -34,7 +39,8 @@
|
|
|
34
39
|
height: var(--spacing-space-4);
|
|
35
40
|
}
|
|
36
41
|
.lib-xplat-radio.lg > span {
|
|
37
|
-
font-size:
|
|
42
|
+
font-size: var(--semantic-typo-body-1-m-size);
|
|
43
|
+
line-height: var(--semantic-typo-body-1-m-lh);
|
|
38
44
|
}
|
|
39
45
|
.lib-xplat-radio > .circle {
|
|
40
46
|
border: 2px solid var(--semantic-border-strong);
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
transform: rotate(180deg);
|
|
103
103
|
}
|
|
104
104
|
.lib-xplat-select .select-trigger .select-trigger-icon svg {
|
|
105
|
-
font-size:
|
|
105
|
+
font-size: var(--semantic-typo-body-1-m-size);
|
|
106
106
|
}
|
|
107
107
|
.lib-xplat-select-content {
|
|
108
108
|
position: fixed;
|
|
@@ -141,7 +141,8 @@
|
|
|
141
141
|
}
|
|
142
142
|
.lib-xplat-select-content .select-item {
|
|
143
143
|
padding: var(--spacing-space-2) var(--spacing-space-3);
|
|
144
|
-
font-size:
|
|
144
|
+
font-size: var(--semantic-typo-label-1-m-size);
|
|
145
|
+
line-height: var(--semantic-typo-label-1-m-lh);
|
|
145
146
|
cursor: pointer;
|
|
146
147
|
transition: background-color 0.15s ease;
|
|
147
148
|
outline: none;
|
|
@@ -195,7 +195,7 @@
|
|
|
195
195
|
height: 12px;
|
|
196
196
|
margin-top: -4px;
|
|
197
197
|
border-radius: 50%;
|
|
198
|
-
background:
|
|
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:
|
|
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
|
-
|
|
248
|
-
|
|
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:
|
|
260
|
+
background: var(--semantic-icon-inverse);
|
|
261
261
|
}
|
|
@@ -2668,8 +2668,8 @@
|
|
|
2668
2668
|
max-height: 200px;
|
|
2669
2669
|
overflow-y: auto;
|
|
2670
2670
|
padding: 4px 0;
|
|
2671
|
-
font-size:
|
|
2672
|
-
line-height:
|
|
2671
|
+
font-size: var(--semantic-typo-label-1-m-size);
|
|
2672
|
+
line-height: var(--semantic-typo-label-1-m-lh);
|
|
2673
2673
|
color: var(--semantic-text-strong);
|
|
2674
2674
|
background: transparent;
|
|
2675
2675
|
}
|
|
@@ -2707,10 +2707,16 @@
|
|
|
2707
2707
|
height: var(--spacing-space-6);
|
|
2708
2708
|
}
|
|
2709
2709
|
.lib-xplat-checkbox.sm > .label {
|
|
2710
|
-
font-size:
|
|
2710
|
+
font-size: var(--semantic-typo-label-2-m-size);
|
|
2711
|
+
line-height: var(--semantic-typo-label-2-m-lh);
|
|
2712
|
+
}
|
|
2713
|
+
.lib-xplat-checkbox.md > .label {
|
|
2714
|
+
font-size: var(--semantic-typo-label-1-m-size);
|
|
2715
|
+
line-height: var(--semantic-typo-label-1-m-lh);
|
|
2711
2716
|
}
|
|
2712
2717
|
.lib-xplat-checkbox.lg > .label {
|
|
2713
|
-
font-size:
|
|
2718
|
+
font-size: var(--semantic-typo-body-1-m-size);
|
|
2719
|
+
line-height: var(--semantic-typo-body-1-m-lh);
|
|
2714
2720
|
}
|
|
2715
2721
|
.lib-xplat-checkbox > .checkbox {
|
|
2716
2722
|
display: flex;
|
|
@@ -2929,7 +2935,7 @@
|
|
|
2929
2935
|
color: var(--semantic-text-error);
|
|
2930
2936
|
}
|
|
2931
2937
|
.lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation > .icon {
|
|
2932
|
-
font-size:
|
|
2938
|
+
font-size: var(--semantic-typo-label-1-m-size);
|
|
2933
2939
|
}
|
|
2934
2940
|
|
|
2935
2941
|
/* src/components/Modal/modal.scss */
|
|
@@ -2938,7 +2944,7 @@
|
|
|
2938
2944
|
}
|
|
2939
2945
|
.lib-xplat-modal.modal-box {
|
|
2940
2946
|
border-radius: var(--spacing-radius-lg);
|
|
2941
|
-
background-color:
|
|
2947
|
+
background-color: var(--semantic-surface-neutral-default);
|
|
2942
2948
|
padding: var(--spacing-space-6);
|
|
2943
2949
|
min-width: min-content;
|
|
2944
2950
|
max-width: calc(100vw - 32px);
|
|
@@ -4096,12 +4102,17 @@
|
|
|
4096
4102
|
height: var(--spacing-space-2);
|
|
4097
4103
|
}
|
|
4098
4104
|
.lib-xplat-radio.sm > span {
|
|
4099
|
-
font-size:
|
|
4105
|
+
font-size: var(--semantic-typo-label-2-m-size);
|
|
4106
|
+
line-height: var(--semantic-typo-label-2-m-lh);
|
|
4100
4107
|
}
|
|
4101
4108
|
.lib-xplat-radio.md > .circle {
|
|
4102
4109
|
width: var(--spacing-space-5);
|
|
4103
4110
|
height: var(--spacing-space-5);
|
|
4104
4111
|
}
|
|
4112
|
+
.lib-xplat-radio.md > span {
|
|
4113
|
+
font-size: var(--semantic-typo-label-1-m-size);
|
|
4114
|
+
line-height: var(--semantic-typo-label-1-m-lh);
|
|
4115
|
+
}
|
|
4105
4116
|
.lib-xplat-radio.lg > .circle {
|
|
4106
4117
|
width: var(--spacing-space-6);
|
|
4107
4118
|
height: var(--spacing-space-6);
|
|
@@ -4111,7 +4122,8 @@
|
|
|
4111
4122
|
height: var(--spacing-space-4);
|
|
4112
4123
|
}
|
|
4113
4124
|
.lib-xplat-radio.lg > span {
|
|
4114
|
-
font-size:
|
|
4125
|
+
font-size: var(--semantic-typo-body-1-m-size);
|
|
4126
|
+
line-height: var(--semantic-typo-body-1-m-lh);
|
|
4115
4127
|
}
|
|
4116
4128
|
.lib-xplat-radio > .circle {
|
|
4117
4129
|
border: 2px solid var(--semantic-border-strong);
|
|
@@ -4276,7 +4288,7 @@
|
|
|
4276
4288
|
transform: rotate(180deg);
|
|
4277
4289
|
}
|
|
4278
4290
|
.lib-xplat-select .select-trigger .select-trigger-icon svg {
|
|
4279
|
-
font-size:
|
|
4291
|
+
font-size: var(--semantic-typo-body-1-m-size);
|
|
4280
4292
|
}
|
|
4281
4293
|
.lib-xplat-select-content {
|
|
4282
4294
|
position: fixed;
|
|
@@ -4315,7 +4327,8 @@
|
|
|
4315
4327
|
}
|
|
4316
4328
|
.lib-xplat-select-content .select-item {
|
|
4317
4329
|
padding: var(--spacing-space-2) var(--spacing-space-3);
|
|
4318
|
-
font-size:
|
|
4330
|
+
font-size: var(--semantic-typo-label-1-m-size);
|
|
4331
|
+
line-height: var(--semantic-typo-label-1-m-lh);
|
|
4319
4332
|
cursor: pointer;
|
|
4320
4333
|
transition: background-color 0.15s ease;
|
|
4321
4334
|
outline: none;
|
|
@@ -5465,7 +5478,7 @@
|
|
|
5465
5478
|
height: 12px;
|
|
5466
5479
|
margin-top: -4px;
|
|
5467
5480
|
border-radius: 50%;
|
|
5468
|
-
background:
|
|
5481
|
+
background: var(--semantic-icon-inverse);
|
|
5469
5482
|
border: none;
|
|
5470
5483
|
cursor: pointer;
|
|
5471
5484
|
}
|
|
@@ -5474,7 +5487,7 @@
|
|
|
5474
5487
|
width: 12px;
|
|
5475
5488
|
height: 12px;
|
|
5476
5489
|
border-radius: 50%;
|
|
5477
|
-
background:
|
|
5490
|
+
background: var(--semantic-icon-inverse);
|
|
5478
5491
|
border: none;
|
|
5479
5492
|
cursor: pointer;
|
|
5480
5493
|
}
|
|
@@ -5514,8 +5527,8 @@
|
|
|
5514
5527
|
background:
|
|
5515
5528
|
linear-gradient(
|
|
5516
5529
|
to right,
|
|
5517
|
-
|
|
5518
|
-
|
|
5530
|
+
var(--semantic-icon-inverse) 0%,
|
|
5531
|
+
var(--semantic-icon-inverse) var(--volume, 0%),
|
|
5519
5532
|
rgba(255, 255, 255, 0.3) var(--volume, 0%),
|
|
5520
5533
|
rgba(255, 255, 255, 0.3) 100%);
|
|
5521
5534
|
}
|
|
@@ -5527,5 +5540,5 @@
|
|
|
5527
5540
|
.lib-xplat-video .volume-slider::-moz-range-progress {
|
|
5528
5541
|
height: 4px;
|
|
5529
5542
|
border-radius: 2px;
|
|
5530
|
-
background:
|
|
5543
|
+
background: var(--semantic-icon-inverse);
|
|
5531
5544
|
}
|
package/dist/index.css
CHANGED
|
@@ -2668,8 +2668,8 @@
|
|
|
2668
2668
|
max-height: 200px;
|
|
2669
2669
|
overflow-y: auto;
|
|
2670
2670
|
padding: 4px 0;
|
|
2671
|
-
font-size:
|
|
2672
|
-
line-height:
|
|
2671
|
+
font-size: var(--semantic-typo-label-1-m-size);
|
|
2672
|
+
line-height: var(--semantic-typo-label-1-m-lh);
|
|
2673
2673
|
color: var(--semantic-text-strong);
|
|
2674
2674
|
background: transparent;
|
|
2675
2675
|
}
|
|
@@ -2707,10 +2707,16 @@
|
|
|
2707
2707
|
height: var(--spacing-space-6);
|
|
2708
2708
|
}
|
|
2709
2709
|
.lib-xplat-checkbox.sm > .label {
|
|
2710
|
-
font-size:
|
|
2710
|
+
font-size: var(--semantic-typo-label-2-m-size);
|
|
2711
|
+
line-height: var(--semantic-typo-label-2-m-lh);
|
|
2712
|
+
}
|
|
2713
|
+
.lib-xplat-checkbox.md > .label {
|
|
2714
|
+
font-size: var(--semantic-typo-label-1-m-size);
|
|
2715
|
+
line-height: var(--semantic-typo-label-1-m-lh);
|
|
2711
2716
|
}
|
|
2712
2717
|
.lib-xplat-checkbox.lg > .label {
|
|
2713
|
-
font-size:
|
|
2718
|
+
font-size: var(--semantic-typo-body-1-m-size);
|
|
2719
|
+
line-height: var(--semantic-typo-body-1-m-lh);
|
|
2714
2720
|
}
|
|
2715
2721
|
.lib-xplat-checkbox > .checkbox {
|
|
2716
2722
|
display: flex;
|
|
@@ -2929,7 +2935,7 @@
|
|
|
2929
2935
|
color: var(--semantic-text-error);
|
|
2930
2936
|
}
|
|
2931
2937
|
.lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation > .icon {
|
|
2932
|
-
font-size:
|
|
2938
|
+
font-size: var(--semantic-typo-label-1-m-size);
|
|
2933
2939
|
}
|
|
2934
2940
|
|
|
2935
2941
|
/* src/components/Modal/modal.scss */
|
|
@@ -2938,7 +2944,7 @@
|
|
|
2938
2944
|
}
|
|
2939
2945
|
.lib-xplat-modal.modal-box {
|
|
2940
2946
|
border-radius: var(--spacing-radius-lg);
|
|
2941
|
-
background-color:
|
|
2947
|
+
background-color: var(--semantic-surface-neutral-default);
|
|
2942
2948
|
padding: var(--spacing-space-6);
|
|
2943
2949
|
min-width: min-content;
|
|
2944
2950
|
max-width: calc(100vw - 32px);
|
|
@@ -4096,12 +4102,17 @@
|
|
|
4096
4102
|
height: var(--spacing-space-2);
|
|
4097
4103
|
}
|
|
4098
4104
|
.lib-xplat-radio.sm > span {
|
|
4099
|
-
font-size:
|
|
4105
|
+
font-size: var(--semantic-typo-label-2-m-size);
|
|
4106
|
+
line-height: var(--semantic-typo-label-2-m-lh);
|
|
4100
4107
|
}
|
|
4101
4108
|
.lib-xplat-radio.md > .circle {
|
|
4102
4109
|
width: var(--spacing-space-5);
|
|
4103
4110
|
height: var(--spacing-space-5);
|
|
4104
4111
|
}
|
|
4112
|
+
.lib-xplat-radio.md > span {
|
|
4113
|
+
font-size: var(--semantic-typo-label-1-m-size);
|
|
4114
|
+
line-height: var(--semantic-typo-label-1-m-lh);
|
|
4115
|
+
}
|
|
4105
4116
|
.lib-xplat-radio.lg > .circle {
|
|
4106
4117
|
width: var(--spacing-space-6);
|
|
4107
4118
|
height: var(--spacing-space-6);
|
|
@@ -4111,7 +4122,8 @@
|
|
|
4111
4122
|
height: var(--spacing-space-4);
|
|
4112
4123
|
}
|
|
4113
4124
|
.lib-xplat-radio.lg > span {
|
|
4114
|
-
font-size:
|
|
4125
|
+
font-size: var(--semantic-typo-body-1-m-size);
|
|
4126
|
+
line-height: var(--semantic-typo-body-1-m-lh);
|
|
4115
4127
|
}
|
|
4116
4128
|
.lib-xplat-radio > .circle {
|
|
4117
4129
|
border: 2px solid var(--semantic-border-strong);
|
|
@@ -4276,7 +4288,7 @@
|
|
|
4276
4288
|
transform: rotate(180deg);
|
|
4277
4289
|
}
|
|
4278
4290
|
.lib-xplat-select .select-trigger .select-trigger-icon svg {
|
|
4279
|
-
font-size:
|
|
4291
|
+
font-size: var(--semantic-typo-body-1-m-size);
|
|
4280
4292
|
}
|
|
4281
4293
|
.lib-xplat-select-content {
|
|
4282
4294
|
position: fixed;
|
|
@@ -4315,7 +4327,8 @@
|
|
|
4315
4327
|
}
|
|
4316
4328
|
.lib-xplat-select-content .select-item {
|
|
4317
4329
|
padding: var(--spacing-space-2) var(--spacing-space-3);
|
|
4318
|
-
font-size:
|
|
4330
|
+
font-size: var(--semantic-typo-label-1-m-size);
|
|
4331
|
+
line-height: var(--semantic-typo-label-1-m-lh);
|
|
4319
4332
|
cursor: pointer;
|
|
4320
4333
|
transition: background-color 0.15s ease;
|
|
4321
4334
|
outline: none;
|
|
@@ -5465,7 +5478,7 @@
|
|
|
5465
5478
|
height: 12px;
|
|
5466
5479
|
margin-top: -4px;
|
|
5467
5480
|
border-radius: 50%;
|
|
5468
|
-
background:
|
|
5481
|
+
background: var(--semantic-icon-inverse);
|
|
5469
5482
|
border: none;
|
|
5470
5483
|
cursor: pointer;
|
|
5471
5484
|
}
|
|
@@ -5474,7 +5487,7 @@
|
|
|
5474
5487
|
width: 12px;
|
|
5475
5488
|
height: 12px;
|
|
5476
5489
|
border-radius: 50%;
|
|
5477
|
-
background:
|
|
5490
|
+
background: var(--semantic-icon-inverse);
|
|
5478
5491
|
border: none;
|
|
5479
5492
|
cursor: pointer;
|
|
5480
5493
|
}
|
|
@@ -5514,8 +5527,8 @@
|
|
|
5514
5527
|
background:
|
|
5515
5528
|
linear-gradient(
|
|
5516
5529
|
to right,
|
|
5517
|
-
|
|
5518
|
-
|
|
5530
|
+
var(--semantic-icon-inverse) 0%,
|
|
5531
|
+
var(--semantic-icon-inverse) var(--volume, 0%),
|
|
5519
5532
|
rgba(255, 255, 255, 0.3) var(--volume, 0%),
|
|
5520
5533
|
rgba(255, 255, 255, 0.3) 100%);
|
|
5521
5534
|
}
|
|
@@ -5527,7 +5540,7 @@
|
|
|
5527
5540
|
.lib-xplat-video .volume-slider::-moz-range-progress {
|
|
5528
5541
|
height: 4px;
|
|
5529
5542
|
border-radius: 2px;
|
|
5530
|
-
background:
|
|
5543
|
+
background: var(--semantic-icon-inverse);
|
|
5531
5544
|
}
|
|
5532
5545
|
|
|
5533
5546
|
/* src/layout/Grid/FullGrid/fullgrid.scss */
|