@xsolla/xui-typography 0.99.0 → 0.100.0
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 +226 -15
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,33 +1,244 @@
|
|
|
1
|
-
|
|
1
|
+
---
|
|
2
|
+
title: Typography
|
|
3
|
+
subtitle: A text component with style presets.
|
|
4
|
+
description: A cross-platform React typography component with predefined text styles for headings, body, and display text.
|
|
5
|
+
---
|
|
2
6
|
|
|
3
|
-
|
|
7
|
+
# Typography
|
|
8
|
+
|
|
9
|
+
A cross-platform React typography component that provides predefined text style variants for consistent typography throughout your application.
|
|
4
10
|
|
|
5
11
|
## Installation
|
|
6
12
|
|
|
7
13
|
```bash
|
|
14
|
+
npm install @xsolla/xui-typography
|
|
15
|
+
# or
|
|
8
16
|
yarn add @xsolla/xui-typography
|
|
9
17
|
```
|
|
10
18
|
|
|
11
|
-
##
|
|
19
|
+
## Demo
|
|
20
|
+
|
|
21
|
+
### Headings
|
|
12
22
|
|
|
13
23
|
```tsx
|
|
14
|
-
import
|
|
24
|
+
import * as React from 'react';
|
|
25
|
+
import { Typography } from '@xsolla/xui-typography';
|
|
26
|
+
|
|
27
|
+
export default function Headings() {
|
|
28
|
+
return (
|
|
29
|
+
<div>
|
|
30
|
+
<Typography variant="display">Display Text</Typography>
|
|
31
|
+
<Typography variant="h1">Heading 1</Typography>
|
|
32
|
+
<Typography variant="h2">Heading 2</Typography>
|
|
33
|
+
<Typography variant="h3">Heading 3</Typography>
|
|
34
|
+
<Typography variant="h4">Heading 4</Typography>
|
|
35
|
+
</div>
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### Body Text
|
|
15
41
|
|
|
16
|
-
|
|
17
|
-
|
|
42
|
+
```tsx
|
|
43
|
+
import * as React from 'react';
|
|
44
|
+
import { Typography } from '@xsolla/xui-typography';
|
|
45
|
+
|
|
46
|
+
export default function BodyText() {
|
|
47
|
+
return (
|
|
48
|
+
<div>
|
|
49
|
+
<Typography variant="bodyLg">Large body text</Typography>
|
|
50
|
+
<Typography variant="bodyMd">Medium body text (default)</Typography>
|
|
51
|
+
<Typography variant="bodySm">Small body text</Typography>
|
|
52
|
+
<Typography variant="bodyXs">Extra small body text</Typography>
|
|
53
|
+
</div>
|
|
54
|
+
);
|
|
55
|
+
}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Colors
|
|
59
|
+
|
|
60
|
+
```tsx
|
|
61
|
+
import * as React from 'react';
|
|
62
|
+
import { Typography } from '@xsolla/xui-typography';
|
|
63
|
+
|
|
64
|
+
export default function ColoredText() {
|
|
65
|
+
return (
|
|
66
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
|
67
|
+
<Typography color="primary">Primary color</Typography>
|
|
68
|
+
<Typography color="secondary">Secondary color</Typography>
|
|
69
|
+
<Typography color="tertiary">Tertiary color</Typography>
|
|
70
|
+
<Typography color="brand">Brand color</Typography>
|
|
71
|
+
<Typography color="success">Success color</Typography>
|
|
72
|
+
<Typography color="warning">Warning color</Typography>
|
|
73
|
+
<Typography color="alert">Alert color</Typography>
|
|
74
|
+
</div>
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
## Anatomy
|
|
80
|
+
|
|
81
|
+
```jsx
|
|
82
|
+
import { Typography } from '@xsolla/xui-typography';
|
|
83
|
+
|
|
84
|
+
<Typography
|
|
85
|
+
variant="bodyMd" // Text style variant
|
|
86
|
+
color="primary" // Text color
|
|
87
|
+
align="left" // Text alignment
|
|
88
|
+
noWrap={false} // Truncate with ellipsis
|
|
89
|
+
marginTop={0} // Top margin
|
|
90
|
+
marginBottom={0} // Bottom margin
|
|
91
|
+
as="p" // HTML element to render
|
|
92
|
+
>
|
|
93
|
+
Text content
|
|
18
94
|
</Typography>
|
|
19
95
|
```
|
|
20
96
|
|
|
21
|
-
##
|
|
97
|
+
## Examples
|
|
98
|
+
|
|
99
|
+
### Article Layout
|
|
100
|
+
|
|
101
|
+
```tsx
|
|
102
|
+
import * as React from 'react';
|
|
103
|
+
import { Typography } from '@xsolla/xui-typography';
|
|
104
|
+
|
|
105
|
+
export default function ArticleLayout() {
|
|
106
|
+
return (
|
|
107
|
+
<article style={{ maxWidth: 600 }}>
|
|
108
|
+
<Typography variant="h1" marginBottom={16}>
|
|
109
|
+
Article Title
|
|
110
|
+
</Typography>
|
|
111
|
+
<Typography variant="bodySm" color="secondary" marginBottom={24}>
|
|
112
|
+
Published on January 20, 2026
|
|
113
|
+
</Typography>
|
|
114
|
+
<Typography variant="bodyLgParagraph" marginBottom={16}>
|
|
115
|
+
This is the introduction paragraph. It uses the paragraph variant
|
|
116
|
+
which has increased line height for better readability in long-form
|
|
117
|
+
content.
|
|
118
|
+
</Typography>
|
|
119
|
+
<Typography variant="h3" marginBottom={12}>
|
|
120
|
+
Section Heading
|
|
121
|
+
</Typography>
|
|
122
|
+
<Typography variant="bodyMdParagraph">
|
|
123
|
+
This is a regular paragraph section with medium body text.
|
|
124
|
+
The paragraph variants have larger line heights for improved
|
|
125
|
+
readability.
|
|
126
|
+
</Typography>
|
|
127
|
+
</article>
|
|
128
|
+
);
|
|
129
|
+
}
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
### Text Truncation
|
|
133
|
+
|
|
134
|
+
```tsx
|
|
135
|
+
import * as React from 'react';
|
|
136
|
+
import { Typography } from '@xsolla/xui-typography';
|
|
137
|
+
|
|
138
|
+
export default function TruncatedText() {
|
|
139
|
+
return (
|
|
140
|
+
<div style={{ width: 200 }}>
|
|
141
|
+
<Typography variant="bodyMd" noWrap>
|
|
142
|
+
This is a very long text that will be truncated with an ellipsis
|
|
143
|
+
</Typography>
|
|
144
|
+
</div>
|
|
145
|
+
);
|
|
146
|
+
}
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
### Accent Variants
|
|
150
|
+
|
|
151
|
+
```tsx
|
|
152
|
+
import * as React from 'react';
|
|
153
|
+
import { Typography } from '@xsolla/xui-typography';
|
|
154
|
+
|
|
155
|
+
export default function AccentText() {
|
|
156
|
+
return (
|
|
157
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
|
158
|
+
<Typography variant="bodyLg">Regular large text</Typography>
|
|
159
|
+
<Typography variant="bodyLgAccent">Accented large text (500 weight)</Typography>
|
|
160
|
+
<Typography variant="bodyMd">Regular medium text</Typography>
|
|
161
|
+
<Typography variant="bodyMdAccent">Accented medium text (500 weight)</Typography>
|
|
162
|
+
</div>
|
|
163
|
+
);
|
|
164
|
+
}
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
## API Reference
|
|
22
168
|
|
|
23
169
|
### Typography
|
|
24
170
|
|
|
171
|
+
**Typography Props:**
|
|
172
|
+
|
|
25
173
|
| Prop | Type | Default | Description |
|
|
26
|
-
|
|
27
|
-
|
|
|
28
|
-
|
|
|
29
|
-
|
|
|
30
|
-
|
|
|
31
|
-
|
|
|
32
|
-
|
|
|
33
|
-
|
|
|
174
|
+
| :--- | :--- | :------ | :---------- |
|
|
175
|
+
| children | `ReactNode` | - | Text content. |
|
|
176
|
+
| variant | `VariantType` | `"bodyMd"` | Text style variant. |
|
|
177
|
+
| color | `ColorType` | `"inherit"` | Text color. |
|
|
178
|
+
| align | `"left" \| "center" \| "right" \| "inherit"` | `"inherit"` | Text alignment. |
|
|
179
|
+
| noWrap | `boolean` | `false` | Truncate with ellipsis. |
|
|
180
|
+
| marginTop | `number` | `0` | Top margin in pixels. |
|
|
181
|
+
| marginBottom | `number` | `0` | Bottom margin in pixels. |
|
|
182
|
+
| as | `ElementType` | - | HTML element to render. |
|
|
183
|
+
|
|
184
|
+
**VariantType:**
|
|
185
|
+
|
|
186
|
+
```typescript
|
|
187
|
+
type VariantType =
|
|
188
|
+
| "display" // 48px, 800 weight
|
|
189
|
+
| "h1" // 40px, 700 weight
|
|
190
|
+
| "h2" // 32px, 700 weight
|
|
191
|
+
| "h3" // 28px, 700 weight
|
|
192
|
+
| "h4" // 24px, 700 weight
|
|
193
|
+
| "bodyLg" // 18px, 400 weight
|
|
194
|
+
| "bodyLgAccent" // 18px, 500 weight
|
|
195
|
+
| "bodyLgParagraph" // 18px, 400 weight, larger line height
|
|
196
|
+
| "bodyMd" // 16px, 400 weight
|
|
197
|
+
| "bodyMdAccent" // 16px, 500 weight
|
|
198
|
+
| "bodyMdParagraph" // 16px, 400 weight, larger line height
|
|
199
|
+
| "bodySm" // 14px, 400 weight
|
|
200
|
+
| "bodySmAccent" // 14px, 500 weight
|
|
201
|
+
| "bodySmParagraph" // 14px, 400 weight, larger line height
|
|
202
|
+
| "bodyXs" // 12px, 400 weight
|
|
203
|
+
| "bodyXsAccent" // 12px, 500 weight
|
|
204
|
+
| "bodyXsParagraph" // 12px, 400 weight, larger line height
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
**ColorType:**
|
|
208
|
+
|
|
209
|
+
```typescript
|
|
210
|
+
type ColorType =
|
|
211
|
+
| "inherit"
|
|
212
|
+
| "primary"
|
|
213
|
+
| "secondary"
|
|
214
|
+
| "tertiary"
|
|
215
|
+
| "brand"
|
|
216
|
+
| "brandSecondary"
|
|
217
|
+
| "success"
|
|
218
|
+
| "warning"
|
|
219
|
+
| "alert"
|
|
220
|
+
| "neutral"
|
|
221
|
+
| string; // Custom color value
|
|
222
|
+
```
|
|
223
|
+
|
|
224
|
+
## Variant Specifications
|
|
225
|
+
|
|
226
|
+
| Variant | Size | Weight | Line Height |
|
|
227
|
+
| :------ | :--- | :----- | :---------- |
|
|
228
|
+
| display | 48px | 800 | 58px |
|
|
229
|
+
| h1 | 40px | 700 | 48px |
|
|
230
|
+
| h2 | 32px | 700 | 38px |
|
|
231
|
+
| h3 | 28px | 700 | 34px |
|
|
232
|
+
| h4 | 24px | 700 | 28px |
|
|
233
|
+
| bodyLg | 18px | 400 | 24px |
|
|
234
|
+
| bodyLgAccent | 18px | 500 | 24px |
|
|
235
|
+
| bodyLgParagraph | 18px | 400 | 26px |
|
|
236
|
+
| bodyMd | 16px | 400 | 20px |
|
|
237
|
+
| bodyMdAccent | 16px | 500 | 20px |
|
|
238
|
+
| bodyMdParagraph | 16px | 400 | 22px |
|
|
239
|
+
| bodySm | 14px | 400 | 18px |
|
|
240
|
+
| bodySmAccent | 14px | 500 | 18px |
|
|
241
|
+
| bodySmParagraph | 14px | 400 | 20px |
|
|
242
|
+
| bodyXs | 12px | 400 | 16px |
|
|
243
|
+
| bodyXsAccent | 12px | 500 | 16px |
|
|
244
|
+
| bodyXsParagraph | 12px | 400 | 18px |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-typography",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.100.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -13,8 +13,8 @@
|
|
|
13
13
|
"test:coverage": "vitest run --coverage"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@xsolla/xui-core": "0.
|
|
17
|
-
"@xsolla/xui-primitives-core": "0.
|
|
16
|
+
"@xsolla/xui-core": "0.100.0",
|
|
17
|
+
"@xsolla/xui-primitives-core": "0.100.0"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"react": ">=16.8.0",
|