@a-type/ui 3.0.20 → 3.0.22
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/dist/cjs/components/provider/Provider.js +1 -1
- package/dist/cjs/components/provider/Provider.js.map +1 -1
- package/dist/cjs/hooks/useTitleBarColor.js +11 -1
- package/dist/cjs/hooks/useTitleBarColor.js.map +1 -1
- package/dist/cjs/uno/preflights/colors.js +1 -1
- package/dist/cjs/uno/preflights/colors.js.map +1 -1
- package/dist/css/main.css +1 -1
- package/dist/esm/components/provider/Provider.js +1 -1
- package/dist/esm/components/provider/Provider.js.map +1 -1
- package/dist/esm/hooks/useTitleBarColor.js +12 -2
- package/dist/esm/hooks/useTitleBarColor.js.map +1 -1
- package/dist/esm/uno/preflights/colors.js +1 -1
- package/dist/esm/uno/preflights/colors.js.map +1 -1
- package/package.json +1 -1
- package/src/components/provider/Provider.tsx +1 -1
- package/src/hooks/useTitleBarColor.ts +16 -2
- package/src/uno/preflights/colors.ts +1 -1
|
@@ -21,7 +21,7 @@ function Provider({ children, disableParticles, toastPosition = 'top-center', to
|
|
|
21
21
|
? virtualKeyboardBehavior
|
|
22
22
|
: 'displace';
|
|
23
23
|
(0, useVirtualKeyboardBehavior_js_1.useVirtualKeyboardBehavior)(supportedVirtualKeyboardBehavior);
|
|
24
|
-
(0, hooks_js_1.useThemedTitleBar)('
|
|
24
|
+
(0, hooks_js_1.useThemedTitleBar)('gray', 'wash', undefined, disableTitleBarColor);
|
|
25
25
|
const otherStuff = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_js_1.IconSpritesheet, {}), (0, jsx_runtime_1.jsx)(react_hot_toast_1.Toaster, { position: toastPosition, containerClassName: toastContainerClassName })] }));
|
|
26
26
|
if (disableParticles)
|
|
27
27
|
return ((0, jsx_runtime_1.jsx)(exports.ConfigContext.Provider, { value: { virtualKeyboardBehavior: supportedVirtualKeyboardBehavior }, children: (0, jsx_runtime_1.jsxs)(index_js_3.TooltipProvider, { children: [children, otherStuff] }) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Provider.js","sourceRoot":"","sources":["../../../../src/components/provider/Provider.tsx"],"names":[],"mappings":";;;AAqBA,4BAkDC;AAQD,8BAEC;;AAjFD,iCAA6D;AAC7D,qDAAyD;AACzD,6CAA4E;AAC5E,6FAAuF;AACvF,+CAAmD;AACnD,oDAAsD;AACtD,kDAAsD;AAYtD;;GAEG;AACH,SAAgB,QAAQ,CAAC,EACxB,QAAQ,EACR,gBAAgB,EAChB,aAAa,GAAG,YAAY,EAC5B,uBAAuB,EACvB,qBAAqB,EACrB,uBAAuB,GAAG,UAAU,EACpC,oBAAoB,GACL;IACf,IAAA,kCAAuB,EAAC,qBAAqB,CAAC,CAAC;IAC/C,MAAM,gCAAgC,GACrC,OAAO,SAAS,KAAK,WAAW,IAAI,iBAAiB,IAAI,SAAS;QACjE,CAAC,CAAC,uBAAuB;QACzB,CAAC,CAAC,UAAU,CAAC;IACf,IAAA,0DAA0B,EAAC,gCAAgC,CAAC,CAAC;IAC7D,IAAA,4BAAiB,EAAC,
|
|
1
|
+
{"version":3,"file":"Provider.js","sourceRoot":"","sources":["../../../../src/components/provider/Provider.tsx"],"names":[],"mappings":";;;AAqBA,4BAkDC;AAQD,8BAEC;;AAjFD,iCAA6D;AAC7D,qDAAyD;AACzD,6CAA4E;AAC5E,6FAAuF;AACvF,+CAAmD;AACnD,oDAAsD;AACtD,kDAAsD;AAYtD;;GAEG;AACH,SAAgB,QAAQ,CAAC,EACxB,QAAQ,EACR,gBAAgB,EAChB,aAAa,GAAG,YAAY,EAC5B,uBAAuB,EACvB,qBAAqB,EACrB,uBAAuB,GAAG,UAAU,EACpC,oBAAoB,GACL;IACf,IAAA,kCAAuB,EAAC,qBAAqB,CAAC,CAAC;IAC/C,MAAM,gCAAgC,GACrC,OAAO,SAAS,KAAK,WAAW,IAAI,iBAAiB,IAAI,SAAS;QACjE,CAAC,CAAC,uBAAuB;QACzB,CAAC,CAAC,UAAU,CAAC;IACf,IAAA,0DAA0B,EAAC,gCAAgC,CAAC,CAAC;IAC7D,IAAA,4BAAiB,EAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,oBAAoB,CAAC,CAAC;IACnE,MAAM,UAAU,GAAG,CAClB,6DACC,uBAAC,0BAAe,KAAG,EACnB,uBAAC,yBAAO,IACP,QAAQ,EAAE,aAAa,EACvB,kBAAkB,EAAE,uBAAuB,GAC1C,IACA,CACH,CAAC;IAEF,IAAI,gBAAgB;QACnB,OAAO,CACN,uBAAC,qBAAa,CAAC,QAAQ,IACtB,KAAK,EAAE,EAAE,uBAAuB,EAAE,gCAAgC,EAAE,YAEpE,wBAAC,0BAAe,eACd,QAAQ,EACR,UAAU,IACM,GACM,CACzB,CAAC;IAEH,OAAO,CACN,uBAAC,qBAAa,CAAC,QAAQ,IACtB,KAAK,EAAE,EAAE,uBAAuB,EAAE,gCAAgC,EAAE,YAEpE,uBAAC,0BAAe,cACf,wBAAC,wBAAa,eACZ,QAAQ,EACR,UAAU,IACI,GACC,GACM,CACzB,CAAC;AACH,CAAC;AAEY,QAAA,aAAa,GAAG,IAAA,qBAAa,EAEvC;IACF,uBAAuB,EAAE,UAAU;CACnC,CAAC,CAAC;AAEH,SAAgB,SAAS;IACxB,OAAO,IAAA,kBAAU,EAAC,qBAAa,CAAC,CAAC;AAClC,CAAC"}
|
|
@@ -60,6 +60,16 @@ function useThemedTitleBar(paletteName, value,
|
|
|
60
60
|
/** If not provided, will inherit from app */
|
|
61
61
|
mode, skip) {
|
|
62
62
|
const { setColor } = useSetTitleBarColor();
|
|
63
|
+
// using a variable to rerun the effect instead of subscribing in-effect...
|
|
64
|
+
// this is an attempt to preserve the cascading behavior in the React tree
|
|
65
|
+
// if a child calls this hook, so ideally the parent and child should both
|
|
66
|
+
// re-evaluate but the child should 'win'
|
|
67
|
+
const visible = (0, react_1.useSyncExternalStore)((onStoreChange) => {
|
|
68
|
+
document.addEventListener('visibilitychange', onStoreChange);
|
|
69
|
+
return () => {
|
|
70
|
+
document.removeEventListener('visibilitychange', onStoreChange);
|
|
71
|
+
};
|
|
72
|
+
}, () => document.visibilityState === 'visible', () => true);
|
|
63
73
|
(0, react_1.useEffect)(() => {
|
|
64
74
|
if (skip)
|
|
65
75
|
return;
|
|
@@ -77,6 +87,6 @@ mode, skip) {
|
|
|
77
87
|
setColor(previousColor);
|
|
78
88
|
};
|
|
79
89
|
}
|
|
80
|
-
}, [setColor, paletteName, value, mode, skip]);
|
|
90
|
+
}, [setColor, paletteName, value, mode, skip, visible]);
|
|
81
91
|
}
|
|
82
92
|
//# sourceMappingURL=useTitleBarColor.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTitleBarColor.js","sourceRoot":"","sources":["../../../src/hooks/useTitleBarColor.ts"],"names":[],"mappings":";;;AAoCA,4CAoBC;AAED,kDAIC;AAED,
|
|
1
|
+
{"version":3,"file":"useTitleBarColor.js","sourceRoot":"","sources":["../../../src/hooks/useTitleBarColor.ts"],"names":[],"mappings":"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"}
|
|
@@ -7,7 +7,7 @@ const _util_js_1 = require("./_util.js");
|
|
|
7
7
|
const baseThemeCSS = `
|
|
8
8
|
--v-color: ${palettes_js_1.palettes['high-contrast'].styles.ink};
|
|
9
9
|
color: var(--v-color);
|
|
10
|
-
--v-bg: ${palettes_js_1.palettes['
|
|
10
|
+
--v-bg: ${palettes_js_1.palettes['gray'].styles.wash};
|
|
11
11
|
background-color: var(--v-bg);
|
|
12
12
|
`;
|
|
13
13
|
exports.colorPreflight = (0, _util_js_1.preflight)({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../../src/uno/preflights/colors.ts"],"names":[],"mappings":";;;AAAA,sDAK8B;AAC9B,yCAAuC;AAEvC,MAAM,YAAY,GAAG;aACR,sBAAQ,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,GAAG;;UAEvC,sBAAQ,CAAC,
|
|
1
|
+
{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../../src/uno/preflights/colors.ts"],"names":[],"mappings":";;;AAAA,sDAK8B;AAC9B,yCAAuC;AAEvC,MAAM,YAAY,GAAG;aACR,sBAAQ,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,GAAG;;UAEvC,sBAAQ,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,IAAI;;CAErC,CAAC;AAEW,QAAA,cAAc,GAAG,IAAA,oBAAS,EAAC;IACvC,MAAM,EAAE,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;GAiBZ,YAAY;;;;;;;;GAQZ,YAAY;;;;;;;;GAQZ,YAAY;;;;;;;;GAQZ,YAAY;;;;;;;;GAQZ,YAAY;;;;mBAII,4BAAc;GAC9B,YAAY;;;;mBAII,oCAAsB;;GAEtC,YAAY;;;EAGb,0BAAY;SACZ,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,MAAM,IAAI,CAAC,KAAK,eAAe,CAAC;SACpD,GAAG,CAAC,kBAAkB,CAAC;SACvB,IAAI,CAAC,IAAI,CAAC;;mBAEO,4BAAc;;;mBAGd,oCAAsB;;;;;GAKtC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Cd;CACA,CAAC,CAAC;AAEH,SAAS,kBAAkB,CAAC,UAAkB;IAC7C,OAAO;WACG,UAAU;yBACI,UAAU,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU;;;CAGtE,CAAC;AACF,CAAC"}
|
package/dist/css/main.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@layer preflightBase, preflightVariant, components, composed, responsive, variants, utilities, user;
|
|
2
2
|
@layer preflightBase{*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}}@layer preflightBase{::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}}
|
|
3
3
|
:root { --font-sans: "Inter", sans-serif; --font-serif: "Domine", serif; --font-title: "Inter", sans-serif; --font-default: var(--font-sans, sans-serif); --z-now-playing: 40; --z-nav: 50; --z-menu: 100; --z-backdrop: 900; --z-dialog: 1000; --z-tooltip: 10000; --z-overdraw: 100000; --un-shadow-color: #000000; --un-shadow-opacity: 10%; --arrow-size: 1rem; } html, body { margin: 0; padding: 0; font-family: var(--font-default); font-size: 16px; min-height: 100%; --webkit-font-smoothing: antialiased; } body { overflow: overlay; } a { color: inherit; text-decoration: none; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } @property --v-shadow-y-mult { syntax: "*"; inherits: false; } @property --v-border-r-color { syntax: "<color>"; inherits: false; } @property --v-border-b-color { syntax: "<color>"; inherits: false; } @property --v-border-l-color { syntax: "<color>"; inherits: false; } @property --v-border-t-color { syntax: "<color>"; inherits: false; } @property --v-border-r-color-altered { syntax: "<color>"; inherits: false; } @property --v-border-b-color-altered { syntax: "<color>"; inherits: false; } @property --v-border-l-color-altered { syntax: "<color>"; inherits: false; } @property --v-border-t-color-altered { syntax: "<color>"; inherits: false; }
|
|
4
|
-
:root { --p-lemon-hue: 90.8; --p-leek-hue: 165.88; --p-tomato-hue: 10.51; --p-blueberry-hue: 248.14; --p-eggplant-hue: 280.21; --p-attention-hue: 30; --p-success-hue: 140; } .theme-lemon, .theme-override-lemon.theme-override-lemon { --p-primary-hue: var(--p-lemon-hue); --p-accent-hue: var(--p-leek-hue); --l-main-hue: var(--p-primary-hue); --v-color: oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); color: var(--v-color); --v-bg: oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.
|
|
4
|
+
:root { --p-lemon-hue: 90.8; --p-leek-hue: 165.88; --p-tomato-hue: 10.51; --p-blueberry-hue: 248.14; --p-eggplant-hue: 280.21; --p-attention-hue: 30; --p-success-hue: 140; } .theme-lemon, .theme-override-lemon.theme-override-lemon { --p-primary-hue: var(--p-lemon-hue); --p-accent-hue: var(--p-leek-hue); --l-main-hue: var(--p-primary-hue); --v-color: oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); color: var(--v-color); --v-bg: oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); background-color: var(--v-bg); } .theme-leek, .theme-override-leek.theme-override-leek { --p-primary-hue: var(--p-leek-hue); --p-accent-hue: var(--p-lemon-hue); --l-main-hue: var(--p-primary-hue); --v-color: oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); color: var(--v-color); --v-bg: oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); background-color: var(--v-bg); } .theme-tomato, .theme-override-tomato.theme-override-tomato { --p-primary-hue: var(--p-tomato-hue); --p-accent-hue: var(--p-leek-hue); --l-main-hue: var(--p-primary-hue); --v-color: oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); color: var(--v-color); --v-bg: oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); background-color: var(--v-bg); } .theme-blueberry, .theme-override-blueberry.theme-override-blueberry { --p-primary-hue: var(--p-blueberry-hue); --p-accent-hue: var(--p-leek-hue); --l-main-hue: var(--p-primary-hue); --v-color: oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); color: var(--v-color); --v-bg: oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); background-color: var(--v-bg); } .theme-eggplant, .theme-override-eggplant.theme-override-eggplant { --p-primary-hue: var(--p-eggplant-hue); --p-accent-hue: var(--p-leek-hue); --l-main-hue: var(--p-primary-hue); --v-color: oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); color: var(--v-color); --v-bg: oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); background-color: var(--v-bg); } .theme-gray, .theme-salt, .theme-override-gray.theme-override-gray { --l-saturation: 0.15; --v-color: oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); color: var(--v-color); --v-bg: oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); background-color: var(--v-bg); } .theme-high-contrast, .theme-override-high-contrast.theme-override-high-contrast { --l-saturation: 0.04; --l-lightness-spread: 10; --v-color: oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); color: var(--v-color); --v-bg: oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); background-color: var(--v-bg); } .palette-primary { --l-main-hue: var(--p-primary-hue); --l-saturation: 1; } .palette-accent { --l-main-hue: var(--p-accent-hue); --l-saturation: 1; } .palette-attention { --l-main-hue: var(--p-attention-hue); --l-saturation: 1; } .palette-success { --l-main-hue: var(--p-success-hue); --l-saturation: 1; } .palette-lemon { --l-main-hue: var(--p-lemon-hue); --l-saturation: 1; } .palette-leek { --l-main-hue: var(--p-leek-hue); --l-saturation: 1; } .palette-tomato { --l-main-hue: var(--p-tomato-hue); --l-saturation: 1; } .palette-blueberry { --l-main-hue: var(--p-blueberry-hue); --l-saturation: 1; } .palette-eggplant { --l-main-hue: var(--p-eggplant-hue); --l-saturation: 1; } .palette-gray { --l-saturation: 0.15; } .palette-high-contrast { --l-saturation: 0.04; --l-lightness-spread: 10; } body { --v-color: oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); color: var(--v-color); --v-bg: oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); background-color: var(--v-bg); --l-main-hue: var(--p-primary-hue); } @property --v-bg-altered { syntax: "*"; inherits: false; } @property --v-color-altered { syntax: "*"; inherits: false; } @property --v-border-altered { syntax: "*"; inherits: false; } @property --v-ring-altered { syntax: "*"; inherits: false; } @property --v-bg-opacity { syntax: "<percentage>"; inherits: false; } @property --v-color-opacity { syntax: "<percentage>"; inherits: false; } @property --v-border-opacity { syntax: "<percentage>"; inherits: false; } @property --v-ring-opacity { syntax: "<percentage>"; inherits: false; }
|
|
5
5
|
@layer preflightBase { html { --mode-mult: 1; --mode-l-neutral: 90%; --mode-l-range-up: 10%; --mode-l-range-down: 70%; --mode-s-neutral: 75%; --mode-s-range-up: -55%; --mode-s-range-down: 20%; --mode-white: #ffffff; --mode-black: #000000; } @media (prefers-color-scheme: dark) { html { --mode-mult: -1; --mode-l-neutral: 60%; --mode-l-range-up: 38%; --mode-l-range-down: 70%; --mode-s-neutral: 80%; --mode-s-range-up: 40%; --mode-s-range-down: -30%; --mode-white: #000000; --mode-black: #ffffff; } } } @layer preflightVariants { .override-light { --mode-mult: 1; --mode-l-neutral: 90%; --mode-l-range-up: 10%; --mode-l-range-down: 70%; --mode-s-neutral: 75%; --mode-s-range-up: -55%; --mode-s-range-down: 20%; --mode-white: #ffffff; --mode-black: #000000; } .override-dark { --mode-mult: -1; --mode-l-neutral: 60%; --mode-l-range-up: 38%; --mode-l-range-down: 70%; --mode-s-neutral: 80%; --mode-s-range-up: 40%; --mode-s-range-down: -30%; --mode-white: #000000; --mode-black: #ffffff; } }
|
|
6
6
|
@layer preflightBase { :root { --global-saturation: 0.5; --global-corner-scale: 1; --global-spacing-scale: 1; --global-border-scale: 1; --global-shadow-spread: 1; --p-primary-hue: 90.8; --p-accent-hue: 165.88; } } @property --local-corner-scale { syntax: "*"; inherits: false; }
|
|
7
7
|
@font-face { font-family: "Inter"; src: url("undefined") format("truetype-variations"); font-weight: 1 999; font-style: oblique 0deg 5deg; font-display: block; }
|
|
@@ -16,7 +16,7 @@ export function Provider({ children, disableParticles, toastPosition = 'top-cent
|
|
|
16
16
|
? virtualKeyboardBehavior
|
|
17
17
|
: 'displace';
|
|
18
18
|
useVirtualKeyboardBehavior(supportedVirtualKeyboardBehavior);
|
|
19
|
-
useThemedTitleBar('
|
|
19
|
+
useThemedTitleBar('gray', 'wash', undefined, disableTitleBarColor);
|
|
20
20
|
const otherStuff = (_jsxs(_Fragment, { children: [_jsx(IconSpritesheet, {}), _jsx(Toaster, { position: toastPosition, containerClassName: toastContainerClassName })] }));
|
|
21
21
|
if (disableParticles)
|
|
22
22
|
return (_jsx(ConfigContext.Provider, { value: { virtualKeyboardBehavior: supportedVirtualKeyboardBehavior }, children: _jsxs(TooltipProvider, { children: [children, otherStuff] }) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Provider.js","sourceRoot":"","sources":["../../../../src/components/provider/Provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAa,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAiB,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAC5E,OAAO,EAAE,0BAA0B,EAAE,MAAM,2CAA2C,CAAC;AACvF,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAYtD;;GAEG;AACH,MAAM,UAAU,QAAQ,CAAC,EACxB,QAAQ,EACR,gBAAgB,EAChB,aAAa,GAAG,YAAY,EAC5B,uBAAuB,EACvB,qBAAqB,EACrB,uBAAuB,GAAG,UAAU,EACpC,oBAAoB,GACL;IACf,uBAAuB,CAAC,qBAAqB,CAAC,CAAC;IAC/C,MAAM,gCAAgC,GACrC,OAAO,SAAS,KAAK,WAAW,IAAI,iBAAiB,IAAI,SAAS;QACjE,CAAC,CAAC,uBAAuB;QACzB,CAAC,CAAC,UAAU,CAAC;IACf,0BAA0B,CAAC,gCAAgC,CAAC,CAAC;IAC7D,iBAAiB,CAAC,
|
|
1
|
+
{"version":3,"file":"Provider.js","sourceRoot":"","sources":["../../../../src/components/provider/Provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAa,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAiB,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAC5E,OAAO,EAAE,0BAA0B,EAAE,MAAM,2CAA2C,CAAC;AACvF,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAYtD;;GAEG;AACH,MAAM,UAAU,QAAQ,CAAC,EACxB,QAAQ,EACR,gBAAgB,EAChB,aAAa,GAAG,YAAY,EAC5B,uBAAuB,EACvB,qBAAqB,EACrB,uBAAuB,GAAG,UAAU,EACpC,oBAAoB,GACL;IACf,uBAAuB,CAAC,qBAAqB,CAAC,CAAC;IAC/C,MAAM,gCAAgC,GACrC,OAAO,SAAS,KAAK,WAAW,IAAI,iBAAiB,IAAI,SAAS;QACjE,CAAC,CAAC,uBAAuB;QACzB,CAAC,CAAC,UAAU,CAAC;IACf,0BAA0B,CAAC,gCAAgC,CAAC,CAAC;IAC7D,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,oBAAoB,CAAC,CAAC;IACnE,MAAM,UAAU,GAAG,CAClB,8BACC,KAAC,eAAe,KAAG,EACnB,KAAC,OAAO,IACP,QAAQ,EAAE,aAAa,EACvB,kBAAkB,EAAE,uBAAuB,GAC1C,IACA,CACH,CAAC;IAEF,IAAI,gBAAgB;QACnB,OAAO,CACN,KAAC,aAAa,CAAC,QAAQ,IACtB,KAAK,EAAE,EAAE,uBAAuB,EAAE,gCAAgC,EAAE,YAEpE,MAAC,eAAe,eACd,QAAQ,EACR,UAAU,IACM,GACM,CACzB,CAAC;IAEH,OAAO,CACN,KAAC,aAAa,CAAC,QAAQ,IACtB,KAAK,EAAE,EAAE,uBAAuB,EAAE,gCAAgC,EAAE,YAEpE,KAAC,eAAe,cACf,MAAC,aAAa,eACZ,QAAQ,EACR,UAAU,IACI,GACC,GACM,CACzB,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAEvC;IACF,uBAAuB,EAAE,UAAU;CACnC,CAAC,CAAC;AAEH,MAAM,UAAU,SAAS;IACxB,OAAO,UAAU,CAAC,aAAa,CAAC,CAAC;AAClC,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// @unocss-include
|
|
2
2
|
var _a;
|
|
3
|
-
import { useCallback, useEffect } from 'react';
|
|
3
|
+
import { useCallback, useEffect, useSyncExternalStore } from 'react';
|
|
4
4
|
import { useResolvedColorMode } from '../colorMode.js';
|
|
5
5
|
import { snapshotColorContext } from '../uno/logic/color.js';
|
|
6
6
|
import { palettes, } from '../uno/logic/palettes.js';
|
|
@@ -55,6 +55,16 @@ export function useThemedTitleBar(paletteName, value,
|
|
|
55
55
|
/** If not provided, will inherit from app */
|
|
56
56
|
mode, skip) {
|
|
57
57
|
const { setColor } = useSetTitleBarColor();
|
|
58
|
+
// using a variable to rerun the effect instead of subscribing in-effect...
|
|
59
|
+
// this is an attempt to preserve the cascading behavior in the React tree
|
|
60
|
+
// if a child calls this hook, so ideally the parent and child should both
|
|
61
|
+
// re-evaluate but the child should 'win'
|
|
62
|
+
const visible = useSyncExternalStore((onStoreChange) => {
|
|
63
|
+
document.addEventListener('visibilitychange', onStoreChange);
|
|
64
|
+
return () => {
|
|
65
|
+
document.removeEventListener('visibilitychange', onStoreChange);
|
|
66
|
+
};
|
|
67
|
+
}, () => document.visibilityState === 'visible', () => true);
|
|
58
68
|
useEffect(() => {
|
|
59
69
|
if (skip)
|
|
60
70
|
return;
|
|
@@ -72,6 +82,6 @@ mode, skip) {
|
|
|
72
82
|
setColor(previousColor);
|
|
73
83
|
};
|
|
74
84
|
}
|
|
75
|
-
}, [setColor, paletteName, value, mode, skip]);
|
|
85
|
+
}, [setColor, paletteName, value, mode, skip, visible]);
|
|
76
86
|
}
|
|
77
87
|
//# sourceMappingURL=useTitleBarColor.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTitleBarColor.js","sourceRoot":"","sources":["../../../src/hooks/useTitleBarColor.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"useTitleBarColor.js","sourceRoot":"","sources":["../../../src/hooks/useTitleBarColor.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAGN,QAAQ,GACR,MAAM,0BAA0B,CAAC;AAElC,IAAI,YAAY,GAAG,SAAS,CAAC;AAC7B,SAAS,eAAe;;IACvB,OAAO,MAAA,QAAQ;SACb,aAAa,CAAC,wBAAwB,CAAC,0CACtC,YAAY,CAAC,SAAS,CAAC,CAAC;AAC5B,CAAC;AACD,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;IACrC,YAAY,GAAG,MAAA,eAAe,EAAE,mCAAI,YAAY,CAAC;AAClD,CAAC;AAED,SAAS,gBAAgB,CAAC,KAAa;IACtC,gCAAgC;IAChC,IAAI,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,CAAC;QAC9B,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;QACtC,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;QACzC,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACzD,CAAC;IACD,IAAI,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;IACtE,IAAI,CAAC,cAAc,EAAE,CAAC;QACrB,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAChD,cAAc,CAAC,YAAY,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;QACnD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;IAC3C,CAAC;IACD,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,YAAY,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAC/C,OAAO,CAAC,GAAG,CAAC,qBAAqB,EAAE,KAAK,CAAC,CAAC;AAC3C,CAAC;AAED,MAAM,UAAU,gBAAgB,CAC/B,KAA+C;IAE/C,MAAM,SAAS,GAAG,oBAAoB,EAAE,CAAC;IACzC,SAAS,CAAC,GAAG,EAAE;;QACd,MAAM,UAAU,GACf,OAAO,KAAK,KAAK,QAAQ;YACxB,CAAC,CAAC,KAAK;YACP,CAAC,CAAC,SAAS,KAAK,MAAM;gBACtB,CAAC,CAAC,KAAK,CAAC,IAAI;gBACZ,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC;QAChB,MAAM,aAAa,GAClB,MAAA,MAAA,QAAQ;aACN,aAAa,CAAC,wBAAwB,CAAC,0CACtC,YAAY,CAAC,SAAS,CAAC,mCAAI,YAAY,CAAC;QAC5C,gBAAgB,CAAC,UAAU,CAAC,CAAC;QAC7B,OAAO,GAAG,EAAE;YACX,gBAAgB,CAAC,aAAa,CAAC,CAAC;QACjC,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;AACxB,CAAC;AAED,MAAM,UAAU,mBAAmB;IAClC,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,KAAa,EAAE,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;IAC7E,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,EAAE,EAAE,CAAC,CAAC;IACzE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;AACjC,CAAC;AAED,MAAM,UAAU,iBAAiB,CAChC,WAAwB,EACxB,KAA2C;AAC3C,6CAA6C;AAC7C,IAAuB,EACvB,IAAc;IAEd,MAAM,EAAE,QAAQ,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAC3C,2EAA2E;IAC3E,0EAA0E;IAC1E,0EAA0E;IAC1E,yCAAyC;IACzC,MAAM,OAAO,GAAG,oBAAoB,CACnC,CAAC,aAAa,EAAE,EAAE;QACjB,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,aAAa,CAAC,CAAC;QAC7D,OAAO,GAAG,EAAE;YACX,QAAQ,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,aAAa,CAAC,CAAC;QACjE,CAAC,CAAC;IACH,CAAC,EACD,GAAG,EAAE,CAAC,QAAQ,CAAC,eAAe,KAAK,SAAS,EAC5C,GAAG,EAAE,CAAC,IAAI,CACV,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,IAAI;YAAE,OAAO;QACjB,MAAM,aAAa,GAAG,eAAe,EAAE,CAAC;QAExC,SAAS,MAAM;;YACd,MAAM,OAAO,GAAG,MAAA,QAAQ,CAAC,WAAW,CAAC,mCAAI,QAAQ,CAAC,OAAO,CAAC;YAC1D,MAAM,OAAO,GAAG,oBAAoB,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;YACxD,MAAM,KAAK,GAAG,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;YAC/D,QAAQ,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC;QACD,MAAM,EAAE,CAAC;QAET,IAAI,aAAa,EAAE,CAAC;YACnB,OAAO,GAAG,EAAE;gBACX,QAAQ,CAAC,aAAa,CAAC,CAAC;YACzB,CAAC,CAAC;QACH,CAAC;IACF,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;AACzD,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { preflight } from './_util.js';
|
|
|
4
4
|
const baseThemeCSS = `
|
|
5
5
|
--v-color: ${palettes['high-contrast'].styles.ink};
|
|
6
6
|
color: var(--v-color);
|
|
7
|
-
--v-bg: ${palettes['
|
|
7
|
+
--v-bg: ${palettes['gray'].styles.wash};
|
|
8
8
|
background-color: var(--v-bg);
|
|
9
9
|
`;
|
|
10
10
|
export const colorPreflight = preflight({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../../src/uno/preflights/colors.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,cAAc,EACd,sBAAsB,EACtB,YAAY,EACZ,QAAQ,GACR,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,MAAM,YAAY,GAAG;aACR,QAAQ,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,GAAG;;UAEvC,QAAQ,CAAC,
|
|
1
|
+
{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../../src/uno/preflights/colors.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,cAAc,EACd,sBAAsB,EACtB,YAAY,EACZ,QAAQ,GACR,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,MAAM,YAAY,GAAG;aACR,QAAQ,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,GAAG;;UAEvC,QAAQ,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,IAAI;;CAErC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,SAAS,CAAC;IACvC,MAAM,EAAE,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;GAiBZ,YAAY;;;;;;;;GAQZ,YAAY;;;;;;;;GAQZ,YAAY;;;;;;;;GAQZ,YAAY;;;;;;;;GAQZ,YAAY;;;;mBAII,cAAc;GAC9B,YAAY;;;;mBAII,sBAAsB;;GAEtC,YAAY;;;EAGb,YAAY;SACZ,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,MAAM,IAAI,CAAC,KAAK,eAAe,CAAC;SACpD,GAAG,CAAC,kBAAkB,CAAC;SACvB,IAAI,CAAC,IAAI,CAAC;;mBAEO,cAAc;;;mBAGd,sBAAsB;;;;;GAKtC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Cd;CACA,CAAC,CAAC;AAEH,SAAS,kBAAkB,CAAC,UAAkB;IAC7C,OAAO;WACG,UAAU;yBACI,UAAU,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU;;;CAGtE,CAAC;AACF,CAAC"}
|
package/package.json
CHANGED
|
@@ -34,7 +34,7 @@ export function Provider({
|
|
|
34
34
|
? virtualKeyboardBehavior
|
|
35
35
|
: 'displace';
|
|
36
36
|
useVirtualKeyboardBehavior(supportedVirtualKeyboardBehavior);
|
|
37
|
-
useThemedTitleBar('
|
|
37
|
+
useThemedTitleBar('gray', 'wash', undefined, disableTitleBarColor);
|
|
38
38
|
const otherStuff = (
|
|
39
39
|
<>
|
|
40
40
|
<IconSpritesheet />
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useCallback, useEffect } from 'react';
|
|
1
|
+
import { useCallback, useEffect, useSyncExternalStore } from 'react';
|
|
2
2
|
import { useResolvedColorMode } from '../colorMode.js';
|
|
3
3
|
import { snapshotColorContext } from '../uno/logic/color.js';
|
|
4
4
|
import {
|
|
@@ -70,6 +70,20 @@ export function useThemedTitleBar(
|
|
|
70
70
|
skip?: boolean,
|
|
71
71
|
) {
|
|
72
72
|
const { setColor } = useSetTitleBarColor();
|
|
73
|
+
// using a variable to rerun the effect instead of subscribing in-effect...
|
|
74
|
+
// this is an attempt to preserve the cascading behavior in the React tree
|
|
75
|
+
// if a child calls this hook, so ideally the parent and child should both
|
|
76
|
+
// re-evaluate but the child should 'win'
|
|
77
|
+
const visible = useSyncExternalStore(
|
|
78
|
+
(onStoreChange) => {
|
|
79
|
+
document.addEventListener('visibilitychange', onStoreChange);
|
|
80
|
+
return () => {
|
|
81
|
+
document.removeEventListener('visibilitychange', onStoreChange);
|
|
82
|
+
};
|
|
83
|
+
},
|
|
84
|
+
() => document.visibilityState === 'visible',
|
|
85
|
+
() => true,
|
|
86
|
+
);
|
|
73
87
|
|
|
74
88
|
useEffect(() => {
|
|
75
89
|
if (skip) return;
|
|
@@ -88,5 +102,5 @@ export function useThemedTitleBar(
|
|
|
88
102
|
setColor(previousColor);
|
|
89
103
|
};
|
|
90
104
|
}
|
|
91
|
-
}, [setColor, paletteName, value, mode, skip]);
|
|
105
|
+
}, [setColor, paletteName, value, mode, skip, visible]);
|
|
92
106
|
}
|
|
@@ -9,7 +9,7 @@ import { preflight } from './_util.js';
|
|
|
9
9
|
const baseThemeCSS = `
|
|
10
10
|
--v-color: ${palettes['high-contrast'].styles.ink};
|
|
11
11
|
color: var(--v-color);
|
|
12
|
-
--v-bg: ${palettes['
|
|
12
|
+
--v-bg: ${palettes['gray'].styles.wash};
|
|
13
13
|
background-color: var(--v-bg);
|
|
14
14
|
`;
|
|
15
15
|
|