@frockbot/plugin-ui-theme 0.3.16 → 0.3.18
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/package.json +3 -3
- package/src/client/theme.css +9 -4
- package/theme.test.ts +9 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@frockbot/plugin-ui-theme",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.18",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -18,8 +18,8 @@
|
|
|
18
18
|
"typecheck": "tsc --noEmit -p tsconfig.json"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@frockbot/client-core": "0.3.
|
|
22
|
-
"@frockbot/kernel-contracts": "0.3.
|
|
21
|
+
"@frockbot/client-core": "0.3.18",
|
|
22
|
+
"@frockbot/kernel-contracts": "0.3.18"
|
|
23
23
|
},
|
|
24
24
|
"devDependencies": {
|
|
25
25
|
"@types/bun": "1.4.0",
|
package/src/client/theme.css
CHANGED
|
@@ -95,13 +95,18 @@
|
|
|
95
95
|
* `--frock-viewport-height` is `100dvh` on a phone: a browser whose toolbar
|
|
96
96
|
* collapses on scroll changes the visible height without changing the layout
|
|
97
97
|
* viewport, and a composer pinned to `100%` of the latter ends up under the
|
|
98
|
-
* toolbar.
|
|
99
|
-
*
|
|
98
|
+
* toolbar. The native Android shell's Capacitor 8 SystemBars bridge injects
|
|
99
|
+
* corrected `--safe-area-inset-*` properties (including its IME workaround),
|
|
100
|
+
* while ordinary browsers fall back to their standard `env()` values. Both
|
|
101
|
+
* are zero on devices that have no inset.
|
|
100
102
|
*/
|
|
101
103
|
--frock-viewport-height: 100%;
|
|
102
104
|
--frock-drawer-width: min(300px, 84vw);
|
|
103
|
-
--frock-safe-bottom:
|
|
104
|
-
|
|
105
|
+
--frock-safe-bottom: var(
|
|
106
|
+
--safe-area-inset-bottom,
|
|
107
|
+
env(safe-area-inset-bottom, 0px)
|
|
108
|
+
);
|
|
109
|
+
--frock-safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
|
|
105
110
|
|
|
106
111
|
/*
|
|
107
112
|
* The size text is entered at. Mobile Safari zooms the page in on a focused
|
package/theme.test.ts
CHANGED
|
@@ -53,4 +53,13 @@ describe("dark product theme", () => {
|
|
|
53
53
|
expect(contrast(text, surface)).toBeGreaterThanOrEqual(4.5);
|
|
54
54
|
},
|
|
55
55
|
);
|
|
56
|
+
|
|
57
|
+
test("prefers Capacitor's corrected Android safe-area insets", () => {
|
|
58
|
+
expect(stylesheet).toMatch(
|
|
59
|
+
/--frock-safe-top:\s*var\(\s*--safe-area-inset-top,\s*env\(safe-area-inset-top,\s*0px\)\s*\)/,
|
|
60
|
+
);
|
|
61
|
+
expect(stylesheet).toMatch(
|
|
62
|
+
/--frock-safe-bottom:\s*var\(\s*--safe-area-inset-bottom,\s*env\(safe-area-inset-bottom,\s*0px\)\s*\)/,
|
|
63
|
+
);
|
|
64
|
+
});
|
|
56
65
|
});
|