@oksigenia/access-panel 0.1.0 → 0.1.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 +25 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -49,6 +49,31 @@ Attributes:
|
|
|
49
49
|
| `trigger-icon` | `vitruvian` | One of `vitruvian`, `wheelchair`, `eye`, `universal`. |
|
|
50
50
|
| `storage-key` | `oksiacSettings` | localStorage key for persisted preferences. |
|
|
51
51
|
|
|
52
|
+
## Theming with CSS variables
|
|
53
|
+
|
|
54
|
+
The trigger button colors are exposed as CSS custom properties on the
|
|
55
|
+
element itself, so you can theme it from your host stylesheet without
|
|
56
|
+
touching JS. Same approach as native form controls.
|
|
57
|
+
|
|
58
|
+
```css
|
|
59
|
+
oksigenia-access-panel {
|
|
60
|
+
--oks-btn-size: 60px; /* default 55px */
|
|
61
|
+
--oks-bg: #be5d38; /* idle bg */
|
|
62
|
+
--oks-icon: #ffffff; /* idle icon */
|
|
63
|
+
--oks-h-bg: #ffffff; /* hover bg */
|
|
64
|
+
--oks-h-icon: #be5d38; /* hover icon */
|
|
65
|
+
}
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
The variables only affect the floating trigger button. The panel
|
|
69
|
+
internals (cards, levels, contrast modes) stay locked to neutral
|
|
70
|
+
greys/blacks on purpose: the panel is a tool the user expects to
|
|
71
|
+
look the same on every site, not a branded surface.
|
|
72
|
+
|
|
73
|
+
If you need to brand the panel itself, fork the package and customize
|
|
74
|
+
`PANEL_CSS` — the building blocks are exported from
|
|
75
|
+
`@oksigenia/access-panel`.
|
|
76
|
+
|
|
52
77
|
## Use it in Astro
|
|
53
78
|
|
|
54
79
|
```astro
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oksigenia/access-panel",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Accessibility panel as a web component. 15 controls (text size, line height, dyslexia font, contrast, colorblind, reading guide, big cursor, pause animations, focus, …) across 8 locales (incl. Guaraní). Zero deps, no tracking.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"accessibility",
|