@xsolla/xui-button 0.150.0-pr250.1778061864 → 0.150.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 +33 -0
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -6,6 +6,8 @@ A cross-platform React button component with primary/secondary variants, multipl
|
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
8
|
npm install @xsolla/xui-button
|
|
9
|
+
# or
|
|
10
|
+
yarn add @xsolla/xui-button
|
|
9
11
|
```
|
|
10
12
|
|
|
11
13
|
## Demo
|
|
@@ -480,6 +482,37 @@ A container for grouping related buttons together.
|
|
|
480
482
|
| sm | 8 | 12 |
|
|
481
483
|
| xs | 4 | 12 |
|
|
482
484
|
|
|
485
|
+
## Theming
|
|
486
|
+
|
|
487
|
+
Button components use the design system theme for colors and sizing:
|
|
488
|
+
|
|
489
|
+
```typescript
|
|
490
|
+
// Colors accessed via theme
|
|
491
|
+
theme.colors.control.[tone].[variant].bg // Background color
|
|
492
|
+
theme.colors.control.[tone].[variant].bgHover // Hover background
|
|
493
|
+
theme.colors.control.[tone].[variant].bgPress // Pressed background
|
|
494
|
+
theme.colors.control.[tone].[variant].bgDisable // Disabled background
|
|
495
|
+
theme.colors.control.[tone].[variant].border // Border color
|
|
496
|
+
theme.colors.control.[tone].[variant].borderHover // Hover border
|
|
497
|
+
theme.colors.control.[tone].[variant].borderPress // Pressed border
|
|
498
|
+
theme.colors.control.[tone].[variant].borderDisable // Disabled border
|
|
499
|
+
|
|
500
|
+
// Text colors are at the tone level, mapped by variant name
|
|
501
|
+
theme.colors.control.[tone].text.primary // Text color for primary variant
|
|
502
|
+
theme.colors.control.[tone].text.secondary // Text color for secondary variant
|
|
503
|
+
theme.colors.control.[tone].text.tertiary // Text color for tertiary variant
|
|
504
|
+
theme.colors.control.[tone].text.disable // Text color for disabled state
|
|
505
|
+
|
|
506
|
+
// Sizing accessed via theme
|
|
507
|
+
theme.sizing.button(size).height
|
|
508
|
+
theme.sizing.button(size).paddingHorizontal
|
|
509
|
+
theme.sizing.button(size).fontSize
|
|
510
|
+
theme.sizing.button(size).iconSize
|
|
511
|
+
|
|
512
|
+
// Border radius
|
|
513
|
+
theme.radius.button
|
|
514
|
+
```
|
|
515
|
+
|
|
483
516
|
## Accessibility
|
|
484
517
|
|
|
485
518
|
- All buttons use semantic `<button>` elements
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-button",
|
|
3
|
-
"version": "0.150.0
|
|
3
|
+
"version": "0.150.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -13,9 +13,9 @@
|
|
|
13
13
|
"test:coverage": "vitest run --coverage"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@xsolla/xui-core": "0.150.0
|
|
17
|
-
"@xsolla/xui-icons": "0.150.0
|
|
18
|
-
"@xsolla/xui-primitives-core": "0.150.0
|
|
16
|
+
"@xsolla/xui-core": "0.150.0",
|
|
17
|
+
"@xsolla/xui-icons": "0.150.0",
|
|
18
|
+
"@xsolla/xui-primitives-core": "0.150.0"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"react": ">=16.8.0",
|