@xsolla/xui-typography 0.148.0 → 0.148.1
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 +289 -0
- package/package.json +3 -3
package/README.md
ADDED
|
@@ -0,0 +1,289 @@
|
|
|
1
|
+
# Typography
|
|
2
|
+
|
|
3
|
+
A cross-platform React typography component that provides predefined text style variants for consistent typography throughout your application.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @xsolla/xui-typography
|
|
9
|
+
# or
|
|
10
|
+
yarn add @xsolla/xui-typography
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Demo
|
|
14
|
+
|
|
15
|
+
### Headings
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import * as React from 'react';
|
|
19
|
+
import { Typography } from '@xsolla/xui-typography';
|
|
20
|
+
|
|
21
|
+
export default function Headings() {
|
|
22
|
+
return (
|
|
23
|
+
<div>
|
|
24
|
+
<Typography variant="display">Display Text</Typography>
|
|
25
|
+
<Typography variant="h1">Heading 1</Typography>
|
|
26
|
+
<Typography variant="h2">Heading 2</Typography>
|
|
27
|
+
<Typography variant="h3">Heading 3</Typography>
|
|
28
|
+
<Typography variant="h4">Heading 4</Typography>
|
|
29
|
+
</div>
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### Body Text
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
import * as React from 'react';
|
|
38
|
+
import { Typography } from '@xsolla/xui-typography';
|
|
39
|
+
|
|
40
|
+
export default function BodyText() {
|
|
41
|
+
return (
|
|
42
|
+
<div>
|
|
43
|
+
<Typography variant="bodyLg">Large body text</Typography>
|
|
44
|
+
<Typography variant="bodyMd">Medium body text (default)</Typography>
|
|
45
|
+
<Typography variant="bodySm">Small body text</Typography>
|
|
46
|
+
<Typography variant="bodyXs">Extra small body text</Typography>
|
|
47
|
+
</div>
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Colors
|
|
53
|
+
|
|
54
|
+
```tsx
|
|
55
|
+
import * as React from 'react';
|
|
56
|
+
import { Typography } from '@xsolla/xui-typography';
|
|
57
|
+
|
|
58
|
+
export default function ColoredText() {
|
|
59
|
+
return (
|
|
60
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
|
61
|
+
<Typography color="primary">Primary color</Typography>
|
|
62
|
+
<Typography color="secondary">Secondary color</Typography>
|
|
63
|
+
<Typography color="tertiary">Tertiary color</Typography>
|
|
64
|
+
<Typography color="brand">Brand color</Typography>
|
|
65
|
+
<Typography color="success">Success color</Typography>
|
|
66
|
+
<Typography color="warning">Warning color</Typography>
|
|
67
|
+
<Typography color="alert">Alert color</Typography>
|
|
68
|
+
</div>
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
## Anatomy
|
|
74
|
+
|
|
75
|
+
```jsx
|
|
76
|
+
import { Typography } from '@xsolla/xui-typography';
|
|
77
|
+
|
|
78
|
+
<Typography
|
|
79
|
+
variant="bodyMd" // Text style variant
|
|
80
|
+
color="primary" // Text color
|
|
81
|
+
align="left" // Text alignment
|
|
82
|
+
noWrap={false} // Truncate with ellipsis
|
|
83
|
+
marginTop={0} // Top margin
|
|
84
|
+
marginBottom={0} // Bottom margin
|
|
85
|
+
as="p" // HTML element to render
|
|
86
|
+
productContext="b2c" // Override product context (optional)
|
|
87
|
+
>
|
|
88
|
+
Text content
|
|
89
|
+
</Typography>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
## Examples
|
|
93
|
+
|
|
94
|
+
### Article Layout
|
|
95
|
+
|
|
96
|
+
```tsx
|
|
97
|
+
import * as React from 'react';
|
|
98
|
+
import { Typography } from '@xsolla/xui-typography';
|
|
99
|
+
|
|
100
|
+
export default function ArticleLayout() {
|
|
101
|
+
return (
|
|
102
|
+
<article style={{ maxWidth: 600 }}>
|
|
103
|
+
<Typography variant="h1" marginBottom={16}>
|
|
104
|
+
Article Title
|
|
105
|
+
</Typography>
|
|
106
|
+
<Typography variant="bodySm" color="secondary" marginBottom={24}>
|
|
107
|
+
Published on January 20, 2026
|
|
108
|
+
</Typography>
|
|
109
|
+
<Typography variant="bodyLgParagraph" marginBottom={16}>
|
|
110
|
+
This is the introduction paragraph. It uses the paragraph variant
|
|
111
|
+
which has increased line height for better readability in long-form
|
|
112
|
+
content.
|
|
113
|
+
</Typography>
|
|
114
|
+
<Typography variant="h3" marginBottom={12}>
|
|
115
|
+
Section Heading
|
|
116
|
+
</Typography>
|
|
117
|
+
<Typography variant="bodyMdParagraph">
|
|
118
|
+
This is a regular paragraph section with medium body text.
|
|
119
|
+
The paragraph variants have larger line heights for improved
|
|
120
|
+
readability.
|
|
121
|
+
</Typography>
|
|
122
|
+
</article>
|
|
123
|
+
);
|
|
124
|
+
}
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
### Text Truncation
|
|
128
|
+
|
|
129
|
+
```tsx
|
|
130
|
+
import * as React from 'react';
|
|
131
|
+
import { Typography } from '@xsolla/xui-typography';
|
|
132
|
+
|
|
133
|
+
export default function TruncatedText() {
|
|
134
|
+
return (
|
|
135
|
+
<div style={{ width: 200 }}>
|
|
136
|
+
<Typography variant="bodyMd" noWrap>
|
|
137
|
+
This is a very long text that will be truncated with an ellipsis
|
|
138
|
+
</Typography>
|
|
139
|
+
</div>
|
|
140
|
+
);
|
|
141
|
+
}
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
### Accent Variants
|
|
145
|
+
|
|
146
|
+
```tsx
|
|
147
|
+
import * as React from 'react';
|
|
148
|
+
import { Typography } from '@xsolla/xui-typography';
|
|
149
|
+
|
|
150
|
+
export default function AccentText() {
|
|
151
|
+
return (
|
|
152
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
|
153
|
+
<Typography variant="bodyLg">Regular large text</Typography>
|
|
154
|
+
<Typography variant="bodyLgAccent">Accented large text (500 weight)</Typography>
|
|
155
|
+
<Typography variant="bodyMd">Regular medium text</Typography>
|
|
156
|
+
<Typography variant="bodyMdAccent">Accented medium text (500 weight)</Typography>
|
|
157
|
+
</div>
|
|
158
|
+
);
|
|
159
|
+
}
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
### Product Context Override
|
|
163
|
+
|
|
164
|
+
```tsx
|
|
165
|
+
import * as React from 'react';
|
|
166
|
+
import { Typography } from '@xsolla/xui-typography';
|
|
167
|
+
import { XUIProvider } from '@xsolla/xui-core';
|
|
168
|
+
|
|
169
|
+
export default function ProductContextOverride() {
|
|
170
|
+
return (
|
|
171
|
+
// Root provider sets B2B context
|
|
172
|
+
<XUIProvider initialProductContext="b2b">
|
|
173
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
|
174
|
+
{/* Uses B2B context from provider (56px, weight 400) */}
|
|
175
|
+
<Typography variant="h1">
|
|
176
|
+
Default B2B Heading
|
|
177
|
+
</Typography>
|
|
178
|
+
|
|
179
|
+
{/* Override to B2C context (40px, weight 700) */}
|
|
180
|
+
<Typography variant="h1" productContext="b2c">
|
|
181
|
+
B2C Marketing Headline
|
|
182
|
+
</Typography>
|
|
183
|
+
|
|
184
|
+
{/* Override to PayStation context for compact UI (28px, weight 700) */}
|
|
185
|
+
<Typography variant="h1" productContext="paystation">
|
|
186
|
+
Payment Form Title
|
|
187
|
+
</Typography>
|
|
188
|
+
|
|
189
|
+
{/* Override to Presentation context for large displays (56px, weight 700) */}
|
|
190
|
+
<Typography variant="h1" productContext="presentation">
|
|
191
|
+
Presentation Display
|
|
192
|
+
</Typography>
|
|
193
|
+
</div>
|
|
194
|
+
</XUIProvider>
|
|
195
|
+
);
|
|
196
|
+
}
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
## API Reference
|
|
200
|
+
|
|
201
|
+
### Typography
|
|
202
|
+
|
|
203
|
+
**Typography Props:**
|
|
204
|
+
|
|
205
|
+
| Prop | Type | Default | Description |
|
|
206
|
+
| :--- | :--- | :------ | :---------- |
|
|
207
|
+
| children | `ReactNode` | - | Text content. |
|
|
208
|
+
| variant | `VariantType` | `"bodyMd"` | Text style variant. |
|
|
209
|
+
| color | `ColorType` | `"inherit"` | Text color. |
|
|
210
|
+
| align | `"left" \| "center" \| "right" \| "inherit"` | `"inherit"` | Text alignment. |
|
|
211
|
+
| noWrap | `boolean` | `false` | Truncate with ellipsis. |
|
|
212
|
+
| marginTop | `number` | `0` | Top margin in pixels. |
|
|
213
|
+
| marginBottom | `number` | `0` | Bottom margin in pixels. |
|
|
214
|
+
| as | `ElementType` | - | HTML element to render. |
|
|
215
|
+
| productContext | `ProductContext` | - | Override product context (`"b2c"` \| `"b2b"` \| `"paystation"` \| `"presentation"`). Uses provider context if not specified. |
|
|
216
|
+
|
|
217
|
+
**VariantType:**
|
|
218
|
+
|
|
219
|
+
```typescript
|
|
220
|
+
type VariantType =
|
|
221
|
+
| "display" // 48px, 800 weight
|
|
222
|
+
| "h1" // 40px, 700 weight
|
|
223
|
+
| "h2" // 32px, 700 weight
|
|
224
|
+
| "h3" // 28px, 700 weight
|
|
225
|
+
| "h4" // 24px, 700 weight
|
|
226
|
+
| "bodyLg" // 18px, 400 weight
|
|
227
|
+
| "bodyLgAccent" // 18px, 500 weight
|
|
228
|
+
| "bodyLgParagraph" // 18px, 400 weight, larger line height
|
|
229
|
+
| "bodyMd" // 16px, 400 weight
|
|
230
|
+
| "bodyMdAccent" // 16px, 500 weight
|
|
231
|
+
| "bodyMdParagraph" // 16px, 400 weight, larger line height
|
|
232
|
+
| "bodySm" // 14px, 400 weight
|
|
233
|
+
| "bodySmAccent" // 14px, 500 weight
|
|
234
|
+
| "bodySmParagraph" // 14px, 400 weight, larger line height
|
|
235
|
+
| "bodyXs" // 12px, 400 weight
|
|
236
|
+
| "bodyXsAccent" // 12px, 500 weight
|
|
237
|
+
| "bodyXsParagraph" // 12px, 400 weight, larger line height
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
**ColorType:**
|
|
241
|
+
|
|
242
|
+
```typescript
|
|
243
|
+
type ColorType =
|
|
244
|
+
| "inherit"
|
|
245
|
+
| "primary"
|
|
246
|
+
| "secondary"
|
|
247
|
+
| "tertiary"
|
|
248
|
+
| "brand"
|
|
249
|
+
| "brandSecondary"
|
|
250
|
+
| "success"
|
|
251
|
+
| "warning"
|
|
252
|
+
| "alert"
|
|
253
|
+
| "neutral"
|
|
254
|
+
| string; // Custom color value
|
|
255
|
+
```
|
|
256
|
+
|
|
257
|
+
## Variant Specifications
|
|
258
|
+
|
|
259
|
+
The values below are for **B2B context** (the default when no context is specified). These values change based on the product context. See the [Product Context documentation](/docs/product-context.md) for complete specifications for each context.
|
|
260
|
+
|
|
261
|
+
| Variant | Size | Weight | Line Height |
|
|
262
|
+
| :------ | :--- | :----- | :---------- |
|
|
263
|
+
| display | 64px | 400 | 78px |
|
|
264
|
+
| h1 | 56px | 400 | 68px |
|
|
265
|
+
| h2 | 48px | 400 | 58px |
|
|
266
|
+
| h3 | 32px | 400 | 38px |
|
|
267
|
+
| h4 | 24px | 400 | 28px |
|
|
268
|
+
| h5 | 20px | 600 | 24px |
|
|
269
|
+
| bodyLg | 18px | 400 | 24px |
|
|
270
|
+
| bodyLgAccent | 18px | 500 | 24px |
|
|
271
|
+
| bodyLgParagraph | 18px | 400 | 26px |
|
|
272
|
+
| bodyMd | 16px | 400 | 20px |
|
|
273
|
+
| bodyMdAccent | 16px | 500 | 20px |
|
|
274
|
+
| bodyMdParagraph | 16px | 400 | 22px |
|
|
275
|
+
| bodySm | 14px | 400 | 18px |
|
|
276
|
+
| bodySmAccent | 14px | 500 | 18px |
|
|
277
|
+
| bodySmParagraph | 14px | 400 | 20px |
|
|
278
|
+
| bodyXs | 12px | 400 | 16px |
|
|
279
|
+
| bodyXsAccent | 12px | 500 | 16px |
|
|
280
|
+
| bodyXsParagraph | 12px | 400 | 18px |
|
|
281
|
+
|
|
282
|
+
### Product Contexts
|
|
283
|
+
|
|
284
|
+
Product contexts allow switching between different typographic scales (and in the future, component variations):
|
|
285
|
+
|
|
286
|
+
- **b2c**: Consumer-facing (moderate sizes, bold headings)
|
|
287
|
+
- **b2b**: Business/enterprise (larger sizes, lighter headings) - *Default*
|
|
288
|
+
- **paystation**: Compact for payments (smaller sizes)
|
|
289
|
+
- **presentation**: Large displays (largest sizes)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-typography",
|
|
3
|
-
"version": "0.148.
|
|
3
|
+
"version": "0.148.1",
|
|
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.148.
|
|
17
|
-
"@xsolla/xui-primitives-core": "0.148.
|
|
16
|
+
"@xsolla/xui-core": "0.148.1",
|
|
17
|
+
"@xsolla/xui-primitives-core": "0.148.1"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"react": ">=16.8.0",
|