@soyio/soyio-widget 2.7.0 → 2.7.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 +26 -12
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -388,30 +388,38 @@ interface Variables {
|
|
|
388
388
|
|
|
389
389
|
### Available Variables
|
|
390
390
|
|
|
391
|
-
| Variable | Description
|
|
392
|
-
| ----------------- |
|
|
393
|
-
| `fontFamily` | The font stack to use for text
|
|
394
|
-
| `colorPrimary` | Primary color for interactive elements
|
|
395
|
-
| `
|
|
396
|
-
| `
|
|
397
|
-
| `
|
|
398
|
-
| `
|
|
399
|
-
| `
|
|
391
|
+
| Variable | Description | Default |
|
|
392
|
+
| ----------------- | ---------------------------------------- | ------------------------- |
|
|
393
|
+
| `fontFamily` | The font stack to use for text | `"system-ui, sans-serif"` |
|
|
394
|
+
| `colorPrimary` | Primary color for interactive elements | `"#0570DE"` |
|
|
395
|
+
| `colorSecondary` | Secondary color for interactive elements | `"#0570DE"` |
|
|
396
|
+
| `colorBackground` | Background color | `"#FFFFFF"` |
|
|
397
|
+
| `colorText` | Main text color | `"#1A1F36"` |
|
|
398
|
+
| `borderRadius` | Border radius for elements | `"4px"` |
|
|
399
|
+
| `borderWidth` | Border width for elements | `"1px"` |
|
|
400
|
+
| `borderStyle` | Border style for elements | `"solid"` |
|
|
400
401
|
|
|
401
402
|
## Rules
|
|
402
403
|
|
|
403
404
|
The `rules` object allows you to apply custom CSS to specific elements. Currently, Soyio supports styling for checkbox components.
|
|
404
405
|
|
|
406
|
+
### Supported rules
|
|
407
|
+
|
|
408
|
+
- `.MainContainer` - The main container of the consent request box. Only border CSS properties are allowed to be overridden.
|
|
409
|
+
- `.Button` - The button component.
|
|
410
|
+
- `.Checkbox` - The checkbox component.
|
|
411
|
+
- `.CheckboxInput` - The checkbox input element.
|
|
412
|
+
- `.CheckboxLabel` - The checkbox label.
|
|
413
|
+
|
|
414
|
+
|
|
415
|
+
|
|
405
416
|
### Supported Selectors
|
|
406
417
|
|
|
407
|
-
- `.CheckboxInput` - The checkbox input element
|
|
408
418
|
- `.CheckboxInput--checked` - The checked state of the checkbox
|
|
409
419
|
- `.CheckboxInput:hover` - Hover state of the checkbox
|
|
410
420
|
- `.CheckboxInput:focus` - Focus state of the checkbox
|
|
411
421
|
- `.CheckboxInput:focus-visible` - Focus-visible state of the checkbox
|
|
412
422
|
|
|
413
|
-
|
|
414
|
-
|
|
415
423
|
### Example Configuration
|
|
416
424
|
|
|
417
425
|
```javascript
|
|
@@ -420,6 +428,7 @@ const appearance = {
|
|
|
420
428
|
variables: {
|
|
421
429
|
fontFamily: "system-ui, sans-serif",
|
|
422
430
|
colorPrimary: "#f54c27",
|
|
431
|
+
colorSecondary: "#f54c27",
|
|
423
432
|
colorBackground: "#ffffff",
|
|
424
433
|
colorText: "#1E1B4B",
|
|
425
434
|
borderRadius: "0.5rem",
|
|
@@ -427,6 +436,11 @@ const appearance = {
|
|
|
427
436
|
borderStyle: "dashed",
|
|
428
437
|
},
|
|
429
438
|
rules: {
|
|
439
|
+
".MainContainer": {
|
|
440
|
+
borderWidth: "1px",
|
|
441
|
+
borderColor: "#E5E7EB",
|
|
442
|
+
borderRadius: "0.25rem",
|
|
443
|
+
},
|
|
430
444
|
".CheckboxInput": {
|
|
431
445
|
appearance: "none",
|
|
432
446
|
backgroundColor: "transparent",
|