@phala/pay 0.10.1 → 0.10.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 +12 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -223,8 +223,9 @@ the theme (or map the colors) that suits its background.
|
|
|
223
223
|
| `--pp-color-text-muted` | `#52525b` | `#a1a1aa` | Labels, hints, in-progress status icon |
|
|
224
224
|
| `--pp-color-border` | `#e4e4e7` | `#27272a` | Dividers and the QR code's frame |
|
|
225
225
|
| `--pp-color-input` | `#8a8a93` | `#71717a` | Edges of the network and token choices |
|
|
226
|
-
| `--pp-color-primary` | `#171717` | `#fafafa` | Pay button
|
|
226
|
+
| `--pp-color-primary` | `#171717` | `#fafafa` | Pay button |
|
|
227
227
|
| `--pp-color-primary-foreground` | `#fafafa` | `#18181b` | Text on the primary color |
|
|
228
|
+
| `--pp-color-selected` | primary | primary | Selected tab's underline, checked choice's border |
|
|
228
229
|
| `--pp-color-focus` | `#2563eb` | `#60a5fa` | Keyboard focus ring |
|
|
229
230
|
| `--pp-color-success` | `#15803d` | `#4ade80` | Credited icon |
|
|
230
231
|
| `--pp-color-warning` | `#b45309` | `#fbbf24` | "Test mode" |
|
|
@@ -243,16 +244,21 @@ import "@phala/pay-react/styles.css";
|
|
|
243
244
|
|
|
244
245
|
Set these CSS custom properties in your own stylesheet, after the SDK stylesheet, on
|
|
245
246
|
`.pp-root[data-theme]`; they are the supported way to theme the components. Pair a light primary
|
|
246
|
-
color with a dark `--pp-color-primary-foreground`.
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
247
|
+
color with a dark `--pp-color-primary-foreground`. `--pp-color-selected` follows
|
|
248
|
+
`--pp-color-primary` unless you set it: with a light primary color on a light background, set it
|
|
249
|
+
to a color with 3:1 or more contrast against the background, as WCAG 1.4.11 asks of the selected
|
|
250
|
+
tab and choice, and keep the light primary color for the pay button. Set `--pp-font-size: 1em` to
|
|
251
|
+
follow your page's text size. Keep `--pp-color-focus` distinct from `--pp-color-selected`, with at
|
|
252
|
+
least 3:1 contrast to the background: it is how a keyboard user tells the focused choice from the
|
|
253
|
+
selected one. Keep `--pp-color-input` at 3:1 or more against the background too, as WCAG 1.4.11
|
|
254
|
+
asks of the edge that shows where a control is; `--pp-color-border` draws only dividers and may be
|
|
255
|
+
fainter.
|
|
251
256
|
|
|
252
257
|
```css
|
|
253
258
|
.pp-root[data-theme] {
|
|
254
259
|
--pp-color-primary: #cdfa50;
|
|
255
260
|
--pp-color-primary-foreground: #161616;
|
|
261
|
+
--pp-color-selected: #4d7c0f;
|
|
256
262
|
--pp-color-focus: #2563eb;
|
|
257
263
|
--pp-radius: 12px;
|
|
258
264
|
}
|