@reclack/walletkit 0.1.1 → 0.1.2
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 +30 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -125,12 +125,9 @@ this package, so the tag and its attributes autocomplete without a wrapper.
|
|
|
125
125
|
| `chain-id` | number | none | Require this chain, switching the wallet if needed |
|
|
126
126
|
| `intent` | `address`, `balance`, comma separated | `address` | What to return |
|
|
127
127
|
| `keep-alive` | present or absent | absent | Stay connected after resolving |
|
|
128
|
-
| `theme-mode` | `light`, `dark`, `system` | `system` | Which palette to wear |
|
|
129
|
-
| `brand` | `#rrggbb` | Reclack's | Your colour, worn by the primary action |
|
|
130
|
-
| `radius` | CSS length | `10px` | Corner radius |
|
|
131
|
-
| `font` | CSS font stack | inherited | Type |
|
|
132
128
|
| `asset-base` | URL path | `/images/` | Where the wallet logos are served from |
|
|
133
129
|
| `api-url` | URL | Reclack's | A different deployment, such as a sandbox |
|
|
130
|
+
| `theme` | `WalletKitTheme`, as a property | none | Colours, radius and type. See [Theming](#theming) |
|
|
134
131
|
|
|
135
132
|
### Properties
|
|
136
133
|
|
|
@@ -288,6 +285,35 @@ createWalletKit({
|
|
|
288
285
|
})
|
|
289
286
|
```
|
|
290
287
|
|
|
288
|
+
On the element, set it as a property:
|
|
289
|
+
|
|
290
|
+
```ts
|
|
291
|
+
element.theme = { mode: 'dark', brand: '#ff6600', radius: '14px' }
|
|
292
|
+
```
|
|
293
|
+
|
|
294
|
+
### Theme attributes
|
|
295
|
+
|
|
296
|
+
A nested object will not fit in an attribute, so the four values a plain HTML
|
|
297
|
+
page is most likely to want have one each. They build the same theme:
|
|
298
|
+
|
|
299
|
+
| Attribute | Theme field | Values | Default |
|
|
300
|
+
| --- | --- | --- | --- |
|
|
301
|
+
| `theme-mode` | `mode` | `light`, `dark`, `system` | `system` |
|
|
302
|
+
| `brand` | `brand` | `#rrggbb` | Reclack's |
|
|
303
|
+
| `radius` | `radius` | CSS length | `10px` |
|
|
304
|
+
| `font` | `fontFamily` | CSS font stack | inherited |
|
|
305
|
+
|
|
306
|
+
```html
|
|
307
|
+
<reclack-connect theme-mode="dark" brand="#ff6600" radius="14px"></reclack-connect>
|
|
308
|
+
```
|
|
309
|
+
|
|
310
|
+
**A theme wins over all four.** Setting the `theme` property, or sharing a kit
|
|
311
|
+
that already carries a theme, makes these attributes ignored and uses the
|
|
312
|
+
theme whole. That is deliberate: a checkout that themed its kit should not
|
|
313
|
+
have to theme every picker inside it as well.
|
|
314
|
+
|
|
315
|
+
### Following the reader's system
|
|
316
|
+
|
|
291
317
|
The resolved mode and the tokens are part of the state you are already
|
|
292
318
|
subscribed to, so the picker follows the reader's system without a second
|
|
293
319
|
listener:
|
package/package.json
CHANGED