@xsolla/xui-avatar 0.110.0 → 0.111.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 +35 -3
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -105,6 +105,33 @@ import { Avatar } from '@xsolla/xui-avatar';
|
|
|
105
105
|
|
|
106
106
|
## Examples
|
|
107
107
|
|
|
108
|
+
### Avatar with Background Color
|
|
109
|
+
|
|
110
|
+
Use `backgroundColor` to set a custom background. You can pass any CSS color string, or use a theme token such as `theme.colors.background.brand.primary` for the standard brand color.
|
|
111
|
+
|
|
112
|
+
```tsx
|
|
113
|
+
import * as React from 'react';
|
|
114
|
+
import { Avatar } from '@xsolla/xui-avatar';
|
|
115
|
+
import { useDesignSystem } from '@xsolla/xui-core';
|
|
116
|
+
|
|
117
|
+
export default function AvatarWithBackground() {
|
|
118
|
+
const { theme } = useDesignSystem();
|
|
119
|
+
|
|
120
|
+
return (
|
|
121
|
+
<div style={{ display: 'flex', gap: 16 }}>
|
|
122
|
+
{/* Using a theme token (recommended) */}
|
|
123
|
+
<Avatar backgroundColor={theme.colors.background.brand.primary} />
|
|
124
|
+
<Avatar backgroundColor={theme.colors.background.brand.primary} text="JD" />
|
|
125
|
+
<Avatar backgroundColor={theme.colors.background.brand.primary} square />
|
|
126
|
+
|
|
127
|
+
{/* Using custom hex colors */}
|
|
128
|
+
<Avatar backgroundColor="#FF8080" text="AB" />
|
|
129
|
+
<Avatar backgroundColor="#D580FF" text="RT" />
|
|
130
|
+
</div>
|
|
131
|
+
);
|
|
132
|
+
}
|
|
133
|
+
```
|
|
134
|
+
|
|
108
135
|
### Avatar with Custom Icon
|
|
109
136
|
|
|
110
137
|
```tsx
|
|
@@ -262,11 +289,16 @@ Avatar uses the design system theme for colors:
|
|
|
262
289
|
|
|
263
290
|
```typescript
|
|
264
291
|
// Colors accessed via theme
|
|
265
|
-
theme.colors.background.secondary
|
|
266
|
-
theme.colors.
|
|
267
|
-
theme.colors.
|
|
292
|
+
theme.colors.background.secondary // Default avatar background
|
|
293
|
+
theme.colors.background.brand.primary // Brand background (e.g. #80EAFF in xsolla-dark)
|
|
294
|
+
theme.colors.content.primary // Text/icon color
|
|
295
|
+
theme.colors.border.primary // Stroke color
|
|
268
296
|
```
|
|
269
297
|
|
|
298
|
+
### Square Border Radius
|
|
299
|
+
|
|
300
|
+
Square avatars use `radius.avatarLarge` (8px) for xl–sm sizes and `radius.avatarSmall` (4px) for xs.
|
|
301
|
+
|
|
270
302
|
## Accessibility
|
|
271
303
|
|
|
272
304
|
- Supports `aria-label` for screen readers
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-avatar",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.111.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -10,11 +10,11 @@
|
|
|
10
10
|
"build:native": "PLATFORM=native tsup"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@xsolla/xui-badge": "0.
|
|
14
|
-
"@xsolla/xui-core": "0.
|
|
15
|
-
"@xsolla/xui-icons-base": "0.
|
|
16
|
-
"@xsolla/xui-primitives-core": "0.
|
|
17
|
-
"@xsolla/xui-tooltip": "0.
|
|
13
|
+
"@xsolla/xui-badge": "0.111.0",
|
|
14
|
+
"@xsolla/xui-core": "0.111.0",
|
|
15
|
+
"@xsolla/xui-icons-base": "0.111.0",
|
|
16
|
+
"@xsolla/xui-primitives-core": "0.111.0",
|
|
17
|
+
"@xsolla/xui-tooltip": "0.111.0"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"react": ">=16.8.0",
|