@oxyhq/bloom 0.44.1 → 0.45.0
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/lib/commonjs/theme/BloomThemeProvider.js +34 -15
- package/lib/commonjs/theme/BloomThemeProvider.js.map +1 -1
- package/lib/commonjs/theme/ambient-store.js +153 -0
- package/lib/commonjs/theme/ambient-store.js.map +1 -0
- package/lib/commonjs/theme/index.js +13 -0
- package/lib/commonjs/theme/index.js.map +1 -1
- package/lib/module/theme/BloomThemeProvider.js +34 -15
- package/lib/module/theme/BloomThemeProvider.js.map +1 -1
- package/lib/module/theme/ambient-store.js +146 -0
- package/lib/module/theme/ambient-store.js.map +1 -0
- package/lib/module/theme/index.js +1 -0
- package/lib/module/theme/index.js.map +1 -1
- package/lib/typescript/commonjs/theme/BloomThemeProvider.d.ts.map +1 -1
- package/lib/typescript/commonjs/theme/ambient-store.d.ts +61 -0
- package/lib/typescript/commonjs/theme/ambient-store.d.ts.map +1 -0
- package/lib/typescript/commonjs/theme/index.d.ts +2 -0
- package/lib/typescript/commonjs/theme/index.d.ts.map +1 -1
- package/lib/typescript/module/theme/BloomThemeProvider.d.ts.map +1 -1
- package/lib/typescript/module/theme/ambient-store.d.ts +61 -0
- package/lib/typescript/module/theme/ambient-store.d.ts.map +1 -0
- package/lib/typescript/module/theme/index.d.ts +2 -0
- package/lib/typescript/module/theme/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/__tests__/ambient-theme.test.tsx +136 -0
- package/src/theme/BloomThemeProvider.tsx +52 -13
- package/src/theme/ambient-store.ts +186 -0
- package/src/theme/index.ts +7 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BloomThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/theme/BloomThemeProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"BloomThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/theme/BloomThemeProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAWtB,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGpD,OAAO,EAKL,KAAK,iBAAiB,EAEvB,MAAM,eAAe,CAAC;AAIvB,OAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKhD,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW,EAAE,YAAY,CAAC;IAC1B,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,cAAc,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,6BAA6B,EAC7B,KAAK,CAAC,OAAO,CAAC,sBAAsB,GAAG,IAAI,CAAC,GAC5C,SAAS,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,OAAO,CAAC,sBAAsB,GAAG,IAAI,CAEpB,CAAC;AAExD,MAAM,WAAW,uBAAuB;IACtC,uFAAuF;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,mEAAmE;IACnE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,YAAY,CAAC;IAElC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAErD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iDAAiD;IACjD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wDAAwD;IACxD,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE1C;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAkJD,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EAAE,cAAc,EACpB,WAAW,EAAE,gBAAgB,EAC7B,WAA0B,EAC1B,kBAAmC,EACnC,YAAY,EACZ,mBAAmB,EACnB,UAAU,EACV,OAAO,EACP,cAAc,EACd,WAAW,EACX,KAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,IAAI,EACJ,QAAQ,GACT,EAAE,uBAAuB,2CA+JzB"}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The current ambient theme override. When `seed` is non-null the whole app is
|
|
3
|
+
* themed from this dynamic seed (same colour engine the `seed` prop uses),
|
|
4
|
+
* overriding the active preset / static `seed` prop. `secondary`/`tertiary` pin
|
|
5
|
+
* this seed's accent families (e.g. the 2nd/3rd colours extracted from artwork).
|
|
6
|
+
*/
|
|
7
|
+
export interface AmbientThemeState {
|
|
8
|
+
readonly seed: string | null;
|
|
9
|
+
readonly secondary: string | null;
|
|
10
|
+
readonly tertiary: string | null;
|
|
11
|
+
}
|
|
12
|
+
export interface AmbientAccents {
|
|
13
|
+
secondary?: string | null;
|
|
14
|
+
tertiary?: string | null;
|
|
15
|
+
}
|
|
16
|
+
export interface AmbientThemeApi {
|
|
17
|
+
/**
|
|
18
|
+
* Set the ambient seed (and optional accents). Coalesced through an internal
|
|
19
|
+
* debounce so rapid hover/scroll doesn't thrash the theme. The debounce lives
|
|
20
|
+
* HERE — apps never own one.
|
|
21
|
+
*/
|
|
22
|
+
setAmbient: (seed: string, accents?: AmbientAccents) => void;
|
|
23
|
+
/** Clear the ambient override, restoring the preset (or the static `seed` prop). */
|
|
24
|
+
clearAmbient: () => void;
|
|
25
|
+
}
|
|
26
|
+
/** Options for {@link useAmbientTheme}. */
|
|
27
|
+
export interface UseAmbientThemeOptions {
|
|
28
|
+
/**
|
|
29
|
+
* Debounce, in ms, applied to `setAmbient`/`clearAmbient` before the store
|
|
30
|
+
* commits. Default `120`. Pass `0` to apply synchronously.
|
|
31
|
+
*/
|
|
32
|
+
debounceMs?: number;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Read + drive the app-wide ambient theme. Reading returns the current override
|
|
36
|
+
* (via `useSyncExternalStore` — stable snapshot ref while unchanged); the
|
|
37
|
+
* returned `setAmbient`/`clearAmbient` are debounced imperative controls.
|
|
38
|
+
*
|
|
39
|
+
* `BloomThemeProvider` consumes the SAME store internally, so calling
|
|
40
|
+
* `setAmbient(...)` from anywhere themes the whole app through the provider's
|
|
41
|
+
* single apply path — no `seed` prop threading, no app-owned theming store.
|
|
42
|
+
*/
|
|
43
|
+
export declare function useAmbientTheme(options?: UseAmbientThemeOptions): AmbientThemeState & AmbientThemeApi;
|
|
44
|
+
/**
|
|
45
|
+
* Provider-side subscription. Returns the current ambient state with a stable
|
|
46
|
+
* ref while unchanged. Uses the same store, so it stays in lockstep with any
|
|
47
|
+
* `useAmbientTheme()` caller.
|
|
48
|
+
*/
|
|
49
|
+
export declare function useAmbientThemeState(): AmbientThemeState;
|
|
50
|
+
/**
|
|
51
|
+
* Non-hook imperative escape hatch (e.g. gesture handlers / worklets bridges /
|
|
52
|
+
* non-React callers). Same debounced store as {@link useAmbientTheme}.
|
|
53
|
+
*/
|
|
54
|
+
export declare const ambientTheme: AmbientThemeApi & {
|
|
55
|
+
getState: () => AmbientThemeState;
|
|
56
|
+
};
|
|
57
|
+
/** Test-only: flush any pending debounced commit synchronously. */
|
|
58
|
+
export declare function __flushAmbientForTests(): void;
|
|
59
|
+
/** Test-only: reset the store to the empty state without notifying via debounce. */
|
|
60
|
+
export declare function __resetAmbientForTests(): void;
|
|
61
|
+
//# sourceMappingURL=ambient-store.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ambient-store.d.ts","sourceRoot":"","sources":["../../../../src/theme/ambient-store.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,QAAQ,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CAClC;AAED,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAED,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7D,oFAAoF;IACpF,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,2CAA2C;AAC3C,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAqFD;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,OAAO,CAAC,EAAE,sBAAsB,GAC/B,iBAAiB,GAAG,eAAe,CAUrC;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,IAAI,iBAAiB,CAExD;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,eAAe,GAAG;IAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;CAI/E,CAAC;AAEF,mEAAmE;AACnE,wBAAgB,sBAAsB,IAAI,IAAI,CAU7C;AAED,oFAAoF;AACpF,wBAAgB,sBAAsB,IAAI,IAAI,CAO7C"}
|
|
@@ -13,6 +13,8 @@ export { buildThemeFromSeed, buildColorsFromSeed } from './build-theme-from-seed
|
|
|
13
13
|
export type { SeedAccents } from './build-theme-from-seed';
|
|
14
14
|
export { THEME_GRADIENTS } from './gradients';
|
|
15
15
|
export { useTheme, useThemeColor, useBloomTheme } from './use-theme';
|
|
16
|
+
export { useAmbientTheme, ambientTheme } from './ambient-store';
|
|
17
|
+
export type { AmbientThemeState, AmbientThemeApi, AmbientAccents, UseAmbientThemeOptions, } from './ambient-store';
|
|
16
18
|
export { useNavigationTheme } from './use-navigation-theme';
|
|
17
19
|
export type { NavigationTheme, NavigationThemeFont } from './use-navigation-theme';
|
|
18
20
|
export type { Theme, ThemeColors, ThemeMode, ThemeGradient, ThemeGradients } from './types';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EACV,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACpE,YAAY,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,YAAY,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AACxF,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAIjE,OAAO,EACL,kBAAkB,EAClB,sBAAsB,EACtB,oBAAoB,EACpB,aAAa,EACb,WAAW,EACX,WAAW,EACX,WAAW,EACX,WAAW,EACX,aAAa,EACb,YAAY,GACb,MAAM,gBAAgB,CAAC;AACxB,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC1G,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAClF,YAAY,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AACnF,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC5F,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAClF,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC;AACzE,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EACV,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACpE,YAAY,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,YAAY,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AACxF,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAIjE,OAAO,EACL,kBAAkB,EAClB,sBAAsB,EACtB,oBAAoB,EACpB,aAAa,EACb,WAAW,EACX,WAAW,EACX,WAAW,EACX,WAAW,EACX,aAAa,EACb,YAAY,GACb,MAAM,gBAAgB,CAAC;AACxB,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC1G,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAClF,YAAY,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAChE,YAAY,EACV,iBAAiB,EACjB,eAAe,EACf,cAAc,EACd,sBAAsB,GACvB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AACnF,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC5F,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAClF,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC;AACzE,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BloomThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/theme/BloomThemeProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"BloomThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/theme/BloomThemeProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAWtB,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGpD,OAAO,EAKL,KAAK,iBAAiB,EAEvB,MAAM,eAAe,CAAC;AAIvB,OAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKhD,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW,EAAE,YAAY,CAAC;IAC1B,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,cAAc,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,6BAA6B,EAC7B,KAAK,CAAC,OAAO,CAAC,sBAAsB,GAAG,IAAI,CAAC,GAC5C,SAAS,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,OAAO,CAAC,sBAAsB,GAAG,IAAI,CAEpB,CAAC;AAExD,MAAM,WAAW,uBAAuB;IACtC,uFAAuF;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,mEAAmE;IACnE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,YAAY,CAAC;IAElC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAErD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iDAAiD;IACjD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wDAAwD;IACxD,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE1C;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAkJD,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EAAE,cAAc,EACpB,WAAW,EAAE,gBAAgB,EAC7B,WAA0B,EAC1B,kBAAmC,EACnC,YAAY,EACZ,mBAAmB,EACnB,UAAU,EACV,OAAO,EACP,cAAc,EACd,WAAW,EACX,KAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,IAAI,EACJ,QAAQ,GACT,EAAE,uBAAuB,2CA+JzB"}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The current ambient theme override. When `seed` is non-null the whole app is
|
|
3
|
+
* themed from this dynamic seed (same colour engine the `seed` prop uses),
|
|
4
|
+
* overriding the active preset / static `seed` prop. `secondary`/`tertiary` pin
|
|
5
|
+
* this seed's accent families (e.g. the 2nd/3rd colours extracted from artwork).
|
|
6
|
+
*/
|
|
7
|
+
export interface AmbientThemeState {
|
|
8
|
+
readonly seed: string | null;
|
|
9
|
+
readonly secondary: string | null;
|
|
10
|
+
readonly tertiary: string | null;
|
|
11
|
+
}
|
|
12
|
+
export interface AmbientAccents {
|
|
13
|
+
secondary?: string | null;
|
|
14
|
+
tertiary?: string | null;
|
|
15
|
+
}
|
|
16
|
+
export interface AmbientThemeApi {
|
|
17
|
+
/**
|
|
18
|
+
* Set the ambient seed (and optional accents). Coalesced through an internal
|
|
19
|
+
* debounce so rapid hover/scroll doesn't thrash the theme. The debounce lives
|
|
20
|
+
* HERE — apps never own one.
|
|
21
|
+
*/
|
|
22
|
+
setAmbient: (seed: string, accents?: AmbientAccents) => void;
|
|
23
|
+
/** Clear the ambient override, restoring the preset (or the static `seed` prop). */
|
|
24
|
+
clearAmbient: () => void;
|
|
25
|
+
}
|
|
26
|
+
/** Options for {@link useAmbientTheme}. */
|
|
27
|
+
export interface UseAmbientThemeOptions {
|
|
28
|
+
/**
|
|
29
|
+
* Debounce, in ms, applied to `setAmbient`/`clearAmbient` before the store
|
|
30
|
+
* commits. Default `120`. Pass `0` to apply synchronously.
|
|
31
|
+
*/
|
|
32
|
+
debounceMs?: number;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Read + drive the app-wide ambient theme. Reading returns the current override
|
|
36
|
+
* (via `useSyncExternalStore` — stable snapshot ref while unchanged); the
|
|
37
|
+
* returned `setAmbient`/`clearAmbient` are debounced imperative controls.
|
|
38
|
+
*
|
|
39
|
+
* `BloomThemeProvider` consumes the SAME store internally, so calling
|
|
40
|
+
* `setAmbient(...)` from anywhere themes the whole app through the provider's
|
|
41
|
+
* single apply path — no `seed` prop threading, no app-owned theming store.
|
|
42
|
+
*/
|
|
43
|
+
export declare function useAmbientTheme(options?: UseAmbientThemeOptions): AmbientThemeState & AmbientThemeApi;
|
|
44
|
+
/**
|
|
45
|
+
* Provider-side subscription. Returns the current ambient state with a stable
|
|
46
|
+
* ref while unchanged. Uses the same store, so it stays in lockstep with any
|
|
47
|
+
* `useAmbientTheme()` caller.
|
|
48
|
+
*/
|
|
49
|
+
export declare function useAmbientThemeState(): AmbientThemeState;
|
|
50
|
+
/**
|
|
51
|
+
* Non-hook imperative escape hatch (e.g. gesture handlers / worklets bridges /
|
|
52
|
+
* non-React callers). Same debounced store as {@link useAmbientTheme}.
|
|
53
|
+
*/
|
|
54
|
+
export declare const ambientTheme: AmbientThemeApi & {
|
|
55
|
+
getState: () => AmbientThemeState;
|
|
56
|
+
};
|
|
57
|
+
/** Test-only: flush any pending debounced commit synchronously. */
|
|
58
|
+
export declare function __flushAmbientForTests(): void;
|
|
59
|
+
/** Test-only: reset the store to the empty state without notifying via debounce. */
|
|
60
|
+
export declare function __resetAmbientForTests(): void;
|
|
61
|
+
//# sourceMappingURL=ambient-store.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ambient-store.d.ts","sourceRoot":"","sources":["../../../../src/theme/ambient-store.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,QAAQ,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CAClC;AAED,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAED,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7D,oFAAoF;IACpF,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,2CAA2C;AAC3C,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAqFD;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,OAAO,CAAC,EAAE,sBAAsB,GAC/B,iBAAiB,GAAG,eAAe,CAUrC;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,IAAI,iBAAiB,CAExD;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,eAAe,GAAG;IAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;CAI/E,CAAC;AAEF,mEAAmE;AACnE,wBAAgB,sBAAsB,IAAI,IAAI,CAU7C;AAED,oFAAoF;AACpF,wBAAgB,sBAAsB,IAAI,IAAI,CAO7C"}
|
|
@@ -13,6 +13,8 @@ export { buildThemeFromSeed, buildColorsFromSeed } from './build-theme-from-seed
|
|
|
13
13
|
export type { SeedAccents } from './build-theme-from-seed';
|
|
14
14
|
export { THEME_GRADIENTS } from './gradients';
|
|
15
15
|
export { useTheme, useThemeColor, useBloomTheme } from './use-theme';
|
|
16
|
+
export { useAmbientTheme, ambientTheme } from './ambient-store';
|
|
17
|
+
export type { AmbientThemeState, AmbientThemeApi, AmbientAccents, UseAmbientThemeOptions, } from './ambient-store';
|
|
16
18
|
export { useNavigationTheme } from './use-navigation-theme';
|
|
17
19
|
export type { NavigationTheme, NavigationThemeFont } from './use-navigation-theme';
|
|
18
20
|
export type { Theme, ThemeColors, ThemeMode, ThemeGradient, ThemeGradients } from './types';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EACV,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACpE,YAAY,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,YAAY,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AACxF,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAIjE,OAAO,EACL,kBAAkB,EAClB,sBAAsB,EACtB,oBAAoB,EACpB,aAAa,EACb,WAAW,EACX,WAAW,EACX,WAAW,EACX,WAAW,EACX,aAAa,EACb,YAAY,GACb,MAAM,gBAAgB,CAAC;AACxB,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC1G,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAClF,YAAY,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AACnF,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC5F,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAClF,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC;AACzE,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EACV,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACpE,YAAY,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,YAAY,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AACxF,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAIjE,OAAO,EACL,kBAAkB,EAClB,sBAAsB,EACtB,oBAAoB,EACpB,aAAa,EACb,WAAW,EACX,WAAW,EACX,WAAW,EACX,WAAW,EACX,aAAa,EACb,YAAY,GACb,MAAM,gBAAgB,CAAC;AACxB,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC1G,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAClF,YAAY,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAChE,YAAY,EACV,iBAAiB,EACjB,eAAe,EACf,cAAc,EACd,sBAAsB,GACvB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AACnF,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC5F,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAClF,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC;AACzE,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}
|
package/package.json
CHANGED
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Text, Pressable } from 'react-native';
|
|
3
|
+
import { act, render, fireEvent } from '@testing-library/react-native';
|
|
4
|
+
|
|
5
|
+
import { BloomThemeProvider } from '../theme/BloomThemeProvider';
|
|
6
|
+
import { useTheme } from '../theme/use-theme';
|
|
7
|
+
import {
|
|
8
|
+
useAmbientTheme,
|
|
9
|
+
ambientTheme,
|
|
10
|
+
__flushAmbientForTests,
|
|
11
|
+
__resetAmbientForTests,
|
|
12
|
+
} from '../theme/ambient-store';
|
|
13
|
+
import { buildThemeFromSeed } from '../theme/build-theme-from-seed';
|
|
14
|
+
import { buildTheme } from '../theme/build-theme';
|
|
15
|
+
|
|
16
|
+
const OXY_PRESET_PRIMARY = buildTheme('oxy', 'light', false).colors.primary;
|
|
17
|
+
const RED_SEED = '#ff0000';
|
|
18
|
+
const RED_SEED_PRIMARY = buildThemeFromSeed(RED_SEED, 'light').colors.primary;
|
|
19
|
+
|
|
20
|
+
function PrimaryProbe() {
|
|
21
|
+
const theme = useTheme();
|
|
22
|
+
return <Text testID="primary">{theme.colors.primary}</Text>;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
function AmbientDriver({ debounceMs }: { debounceMs?: number }) {
|
|
26
|
+
const { seed, setAmbient, clearAmbient } = useAmbientTheme({ debounceMs });
|
|
27
|
+
return (
|
|
28
|
+
<>
|
|
29
|
+
<Text testID="ambient-seed">{seed ?? 'null'}</Text>
|
|
30
|
+
<Pressable testID="set" onPress={() => setAmbient(RED_SEED)} />
|
|
31
|
+
<Pressable testID="clear" onPress={() => clearAmbient()} />
|
|
32
|
+
</>
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
describe('ambient theme store', () => {
|
|
37
|
+
beforeEach(() => {
|
|
38
|
+
__resetAmbientForTests();
|
|
39
|
+
});
|
|
40
|
+
afterEach(() => {
|
|
41
|
+
__resetAmbientForTests();
|
|
42
|
+
});
|
|
43
|
+
|
|
44
|
+
it('starts empty and returns a stable snapshot ref while unchanged', () => {
|
|
45
|
+
const { getByTestId } = render(
|
|
46
|
+
<BloomThemeProvider>
|
|
47
|
+
<AmbientDriver debounceMs={0} />
|
|
48
|
+
</BloomThemeProvider>,
|
|
49
|
+
);
|
|
50
|
+
expect(getByTestId('ambient-seed').props.children).toBe('null');
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
it('debounces setAmbient and coalesces rapid calls', () => {
|
|
54
|
+
ambientTheme.setAmbient('#111111');
|
|
55
|
+
ambientTheme.setAmbient('#222222');
|
|
56
|
+
ambientTheme.setAmbient(RED_SEED);
|
|
57
|
+
// Nothing committed yet — still debouncing.
|
|
58
|
+
expect(ambientTheme.getState().seed).toBeNull();
|
|
59
|
+
act(() => {
|
|
60
|
+
__flushAmbientForTests();
|
|
61
|
+
});
|
|
62
|
+
// Only the LAST call wins.
|
|
63
|
+
expect(ambientTheme.getState().seed).toBe(RED_SEED);
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
it('applies debounceMs: 0 synchronously', () => {
|
|
67
|
+
const { getByTestId } = render(
|
|
68
|
+
<BloomThemeProvider>
|
|
69
|
+
<AmbientDriver debounceMs={0} />
|
|
70
|
+
</BloomThemeProvider>,
|
|
71
|
+
);
|
|
72
|
+
act(() => {
|
|
73
|
+
fireEvent.press(getByTestId('set'));
|
|
74
|
+
});
|
|
75
|
+
expect(getByTestId('ambient-seed').props.children).toBe(RED_SEED);
|
|
76
|
+
});
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
describe('BloomThemeProvider ambient override / restore', () => {
|
|
80
|
+
beforeEach(() => {
|
|
81
|
+
__resetAmbientForTests();
|
|
82
|
+
});
|
|
83
|
+
afterEach(() => {
|
|
84
|
+
__resetAmbientForTests();
|
|
85
|
+
});
|
|
86
|
+
|
|
87
|
+
it('overrides the preset while ambient is set and restores it on clear', () => {
|
|
88
|
+
const { getByTestId } = render(
|
|
89
|
+
<BloomThemeProvider>
|
|
90
|
+
<PrimaryProbe />
|
|
91
|
+
<AmbientDriver debounceMs={0} />
|
|
92
|
+
</BloomThemeProvider>,
|
|
93
|
+
);
|
|
94
|
+
// Baseline: the oxy preset.
|
|
95
|
+
expect(getByTestId('primary').props.children).toBe(OXY_PRESET_PRIMARY);
|
|
96
|
+
|
|
97
|
+
act(() => {
|
|
98
|
+
fireEvent.press(getByTestId('set'));
|
|
99
|
+
});
|
|
100
|
+
// Ambient seed themes the whole app from the red seed.
|
|
101
|
+
expect(getByTestId('primary').props.children).toBe(RED_SEED_PRIMARY);
|
|
102
|
+
expect(RED_SEED_PRIMARY).not.toBe(OXY_PRESET_PRIMARY);
|
|
103
|
+
|
|
104
|
+
act(() => {
|
|
105
|
+
fireEvent.press(getByTestId('clear'));
|
|
106
|
+
});
|
|
107
|
+
// Cleared → back to the preset.
|
|
108
|
+
expect(getByTestId('primary').props.children).toBe(OXY_PRESET_PRIMARY);
|
|
109
|
+
});
|
|
110
|
+
|
|
111
|
+
it('ambient overrides even a static seed prop, then restores it on clear', () => {
|
|
112
|
+
const staticSeed = '#00ff00';
|
|
113
|
+
const staticPrimary = buildThemeFromSeed(staticSeed, 'light').colors.primary;
|
|
114
|
+
|
|
115
|
+
const { getByTestId } = render(
|
|
116
|
+
<BloomThemeProvider seed={staticSeed}>
|
|
117
|
+
<PrimaryProbe />
|
|
118
|
+
<AmbientDriver debounceMs={0} />
|
|
119
|
+
</BloomThemeProvider>,
|
|
120
|
+
);
|
|
121
|
+
// Static seed prop is active.
|
|
122
|
+
expect(getByTestId('primary').props.children).toBe(staticPrimary);
|
|
123
|
+
|
|
124
|
+
act(() => {
|
|
125
|
+
fireEvent.press(getByTestId('set'));
|
|
126
|
+
});
|
|
127
|
+
// Ambient wins over the static seed prop.
|
|
128
|
+
expect(getByTestId('primary').props.children).toBe(RED_SEED_PRIMARY);
|
|
129
|
+
|
|
130
|
+
act(() => {
|
|
131
|
+
fireEvent.press(getByTestId('clear'));
|
|
132
|
+
});
|
|
133
|
+
// Restored to the static seed prop, NOT the preset.
|
|
134
|
+
expect(getByTestId('primary').props.children).toBe(staticPrimary);
|
|
135
|
+
});
|
|
136
|
+
});
|
|
@@ -24,6 +24,8 @@ import {
|
|
|
24
24
|
import { useControllableState } from '../hooks/useControllableState';
|
|
25
25
|
import { FontLoader } from '../fonts/FontLoader';
|
|
26
26
|
|
|
27
|
+
import { useAmbientThemeState } from './ambient-store';
|
|
28
|
+
|
|
27
29
|
import { applyDarkClass, applyVarsToDocument } from './apply-dark-class';
|
|
28
30
|
import { buildTheme } from './build-theme';
|
|
29
31
|
import { buildThemeFromSeed } from './build-theme-from-seed';
|
|
@@ -332,16 +334,40 @@ export function BloomThemeProvider({
|
|
|
332
334
|
}: BloomThemeProviderProps) {
|
|
333
335
|
const rnScheme = useRNColorScheme();
|
|
334
336
|
|
|
337
|
+
// The app-wide ambient override, driven imperatively via `useAmbientTheme()`
|
|
338
|
+
// from anywhere in the app. Subscribed through the module-level store's
|
|
339
|
+
// `useSyncExternalStore` (stable snapshot ref while unchanged → React-Compiler
|
|
340
|
+
// safe). When an ambient seed is set it OVERRIDES the static `seed` prop and
|
|
341
|
+
// the active preset; clearing it restores them.
|
|
342
|
+
const ambient = useAmbientThemeState();
|
|
343
|
+
|
|
344
|
+
// The EFFECTIVE dynamic seed + accents for this render: ambient wins over the
|
|
345
|
+
// static props. `null` ambient seed means "no override" → fall back to the
|
|
346
|
+
// `seed` prop (which itself may be undefined → preset path). When ambient is
|
|
347
|
+
// active, ambient accents replace the static accent props entirely (a null
|
|
348
|
+
// ambient accent = "no pin for this artwork colour").
|
|
349
|
+
const ambientActive = ambient.seed !== null;
|
|
350
|
+
const effectiveSeed: string | undefined = ambientActive
|
|
351
|
+
? ambient.seed ?? undefined
|
|
352
|
+
: seed;
|
|
353
|
+
const effectiveSecondary: string | undefined = ambientActive
|
|
354
|
+
? ambient.secondary ?? undefined
|
|
355
|
+
: secondaryColor;
|
|
356
|
+
const effectiveTertiary: string | undefined = ambientActive
|
|
357
|
+
? ambient.tertiary ?? undefined
|
|
358
|
+
: tertiaryColor;
|
|
359
|
+
|
|
335
360
|
// The app-wide pinned accents, if any. Memoized so its identity only changes
|
|
336
|
-
// when
|
|
361
|
+
// when an accent changes (keeps the effect/memo deps below stable). Left
|
|
337
362
|
// `undefined` when neither is set so every downstream call is byte-identical
|
|
338
|
-
// to the no-accent path.
|
|
363
|
+
// to the no-accent path. Uses the EFFECTIVE accents so ambient accents apply
|
|
364
|
+
// to the preset path too when no ambient seed is present.
|
|
339
365
|
const explicitAccents = useMemo<ExplicitAccents | undefined>(
|
|
340
366
|
() =>
|
|
341
|
-
|
|
367
|
+
effectiveSecondary === undefined && effectiveTertiary === undefined
|
|
342
368
|
? undefined
|
|
343
|
-
: { secondaryHex:
|
|
344
|
-
[
|
|
369
|
+
: { secondaryHex: effectiveSecondary, tertiaryHex: effectiveTertiary },
|
|
370
|
+
[effectiveSecondary, effectiveTertiary],
|
|
345
371
|
);
|
|
346
372
|
|
|
347
373
|
const { mode, colorPreset, setMode, setColorPreset, resetTheme, hydrated } = useThemeState({
|
|
@@ -371,20 +397,33 @@ export function BloomThemeProvider({
|
|
|
371
397
|
// colour engine, so there is one code path — no seed/preset duplication.
|
|
372
398
|
const themeVars = useMemo(
|
|
373
399
|
() =>
|
|
374
|
-
|
|
375
|
-
? buildSeedScopeVars({
|
|
400
|
+
effectiveSeed
|
|
401
|
+
? buildSeedScopeVars({
|
|
402
|
+
seed: effectiveSeed,
|
|
403
|
+
mode: resolved,
|
|
404
|
+
secondarySeed: effectiveSecondary,
|
|
405
|
+
tertiarySeed: effectiveTertiary,
|
|
406
|
+
})
|
|
376
407
|
: buildScopeVars(colorPreset, resolved, explicitAccents),
|
|
377
|
-
[
|
|
408
|
+
[effectiveSeed, effectiveSecondary, effectiveTertiary, colorPreset, resolved, explicitAccents],
|
|
378
409
|
);
|
|
379
410
|
const themeColors = useMemo(
|
|
380
411
|
() =>
|
|
381
|
-
|
|
382
|
-
? buildThemeFromSeed(
|
|
383
|
-
secondarySeed:
|
|
384
|
-
tertiarySeed:
|
|
412
|
+
effectiveSeed
|
|
413
|
+
? buildThemeFromSeed(effectiveSeed, resolved, undefined, undefined, {
|
|
414
|
+
secondarySeed: effectiveSecondary,
|
|
415
|
+
tertiarySeed: effectiveTertiary,
|
|
385
416
|
})
|
|
386
417
|
: buildTheme(colorPreset, resolved, isAdaptive, explicitAccents),
|
|
387
|
-
[
|
|
418
|
+
[
|
|
419
|
+
effectiveSeed,
|
|
420
|
+
effectiveSecondary,
|
|
421
|
+
effectiveTertiary,
|
|
422
|
+
colorPreset,
|
|
423
|
+
resolved,
|
|
424
|
+
isAdaptive,
|
|
425
|
+
explicitAccents,
|
|
426
|
+
],
|
|
388
427
|
);
|
|
389
428
|
|
|
390
429
|
useIsomorphicLayoutEffect(() => {
|
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
import { useSyncExternalStore } from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* The current ambient theme override. When `seed` is non-null the whole app is
|
|
5
|
+
* themed from this dynamic seed (same colour engine the `seed` prop uses),
|
|
6
|
+
* overriding the active preset / static `seed` prop. `secondary`/`tertiary` pin
|
|
7
|
+
* this seed's accent families (e.g. the 2nd/3rd colours extracted from artwork).
|
|
8
|
+
*/
|
|
9
|
+
export interface AmbientThemeState {
|
|
10
|
+
readonly seed: string | null;
|
|
11
|
+
readonly secondary: string | null;
|
|
12
|
+
readonly tertiary: string | null;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export interface AmbientAccents {
|
|
16
|
+
secondary?: string | null;
|
|
17
|
+
tertiary?: string | null;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export interface AmbientThemeApi {
|
|
21
|
+
/**
|
|
22
|
+
* Set the ambient seed (and optional accents). Coalesced through an internal
|
|
23
|
+
* debounce so rapid hover/scroll doesn't thrash the theme. The debounce lives
|
|
24
|
+
* HERE — apps never own one.
|
|
25
|
+
*/
|
|
26
|
+
setAmbient: (seed: string, accents?: AmbientAccents) => void;
|
|
27
|
+
/** Clear the ambient override, restoring the preset (or the static `seed` prop). */
|
|
28
|
+
clearAmbient: () => void;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/** Options for {@link useAmbientTheme}. */
|
|
32
|
+
export interface UseAmbientThemeOptions {
|
|
33
|
+
/**
|
|
34
|
+
* Debounce, in ms, applied to `setAmbient`/`clearAmbient` before the store
|
|
35
|
+
* commits. Default `120`. Pass `0` to apply synchronously.
|
|
36
|
+
*/
|
|
37
|
+
debounceMs?: number;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
const DEFAULT_DEBOUNCE_MS = 120;
|
|
41
|
+
|
|
42
|
+
// A single frozen "no override" snapshot. `getSnapshot` returns this EXACT
|
|
43
|
+
// reference whenever nothing is set, so `useSyncExternalStore` sees a stable
|
|
44
|
+
// identity across renders (React-Compiler-safe: the memoized value never
|
|
45
|
+
// silently goes stale because the snapshot ref only changes on a real commit).
|
|
46
|
+
const EMPTY_STATE: AmbientThemeState = Object.freeze({
|
|
47
|
+
seed: null,
|
|
48
|
+
secondary: null,
|
|
49
|
+
tertiary: null,
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
let state: AmbientThemeState = EMPTY_STATE;
|
|
53
|
+
const listeners = new Set<() => void>();
|
|
54
|
+
|
|
55
|
+
// Pending debounced commit. `null` operation means "clear".
|
|
56
|
+
let pendingTimer: ReturnType<typeof setTimeout> | null = null;
|
|
57
|
+
let pendingCommit: (() => void) | null = null;
|
|
58
|
+
|
|
59
|
+
function emit(): void {
|
|
60
|
+
for (const listener of listeners) listener();
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
function commit(next: AmbientThemeState): void {
|
|
64
|
+
// Skip a no-op commit so subscribers don't re-render for an identical value.
|
|
65
|
+
if (
|
|
66
|
+
next.seed === state.seed &&
|
|
67
|
+
next.secondary === state.secondary &&
|
|
68
|
+
next.tertiary === state.tertiary
|
|
69
|
+
) {
|
|
70
|
+
return;
|
|
71
|
+
}
|
|
72
|
+
state = next;
|
|
73
|
+
emit();
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
function schedule(next: AmbientThemeState, debounceMs: number): void {
|
|
77
|
+
if (pendingTimer !== null) {
|
|
78
|
+
clearTimeout(pendingTimer);
|
|
79
|
+
pendingTimer = null;
|
|
80
|
+
}
|
|
81
|
+
const run = () => {
|
|
82
|
+
pendingTimer = null;
|
|
83
|
+
pendingCommit = null;
|
|
84
|
+
commit(next);
|
|
85
|
+
};
|
|
86
|
+
if (debounceMs <= 0) {
|
|
87
|
+
run();
|
|
88
|
+
return;
|
|
89
|
+
}
|
|
90
|
+
pendingCommit = run;
|
|
91
|
+
pendingTimer = setTimeout(run, debounceMs);
|
|
92
|
+
pendingTimer.unref?.();
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
function subscribe(listener: () => void): () => void {
|
|
96
|
+
listeners.add(listener);
|
|
97
|
+
return () => {
|
|
98
|
+
listeners.delete(listener);
|
|
99
|
+
};
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
function getSnapshot(): AmbientThemeState {
|
|
103
|
+
return state;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
/** Internal setter used by the debounced hook API. */
|
|
107
|
+
function setAmbientInternal(seed: string, accents: AmbientAccents | undefined, debounceMs: number): void {
|
|
108
|
+
schedule(
|
|
109
|
+
{
|
|
110
|
+
seed,
|
|
111
|
+
secondary: accents?.secondary ?? null,
|
|
112
|
+
tertiary: accents?.tertiary ?? null,
|
|
113
|
+
},
|
|
114
|
+
debounceMs,
|
|
115
|
+
);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/** Internal clear used by the debounced hook API. */
|
|
119
|
+
function clearAmbientInternal(debounceMs: number): void {
|
|
120
|
+
schedule(EMPTY_STATE, debounceMs);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
/**
|
|
124
|
+
* Read + drive the app-wide ambient theme. Reading returns the current override
|
|
125
|
+
* (via `useSyncExternalStore` — stable snapshot ref while unchanged); the
|
|
126
|
+
* returned `setAmbient`/`clearAmbient` are debounced imperative controls.
|
|
127
|
+
*
|
|
128
|
+
* `BloomThemeProvider` consumes the SAME store internally, so calling
|
|
129
|
+
* `setAmbient(...)` from anywhere themes the whole app through the provider's
|
|
130
|
+
* single apply path — no `seed` prop threading, no app-owned theming store.
|
|
131
|
+
*/
|
|
132
|
+
export function useAmbientTheme(
|
|
133
|
+
options?: UseAmbientThemeOptions,
|
|
134
|
+
): AmbientThemeState & AmbientThemeApi {
|
|
135
|
+
const debounceMs = options?.debounceMs ?? DEFAULT_DEBOUNCE_MS;
|
|
136
|
+
const current = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
|
|
137
|
+
return {
|
|
138
|
+
seed: current.seed,
|
|
139
|
+
secondary: current.secondary,
|
|
140
|
+
tertiary: current.tertiary,
|
|
141
|
+
setAmbient: (seed, accents) => setAmbientInternal(seed, accents, debounceMs),
|
|
142
|
+
clearAmbient: () => clearAmbientInternal(debounceMs),
|
|
143
|
+
};
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
/**
|
|
147
|
+
* Provider-side subscription. Returns the current ambient state with a stable
|
|
148
|
+
* ref while unchanged. Uses the same store, so it stays in lockstep with any
|
|
149
|
+
* `useAmbientTheme()` caller.
|
|
150
|
+
*/
|
|
151
|
+
export function useAmbientThemeState(): AmbientThemeState {
|
|
152
|
+
return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
/**
|
|
156
|
+
* Non-hook imperative escape hatch (e.g. gesture handlers / worklets bridges /
|
|
157
|
+
* non-React callers). Same debounced store as {@link useAmbientTheme}.
|
|
158
|
+
*/
|
|
159
|
+
export const ambientTheme: AmbientThemeApi & { getState: () => AmbientThemeState } = {
|
|
160
|
+
setAmbient: (seed, accents) => setAmbientInternal(seed, accents, DEFAULT_DEBOUNCE_MS),
|
|
161
|
+
clearAmbient: () => clearAmbientInternal(DEFAULT_DEBOUNCE_MS),
|
|
162
|
+
getState: getSnapshot,
|
|
163
|
+
};
|
|
164
|
+
|
|
165
|
+
/** Test-only: flush any pending debounced commit synchronously. */
|
|
166
|
+
export function __flushAmbientForTests(): void {
|
|
167
|
+
if (pendingCommit) {
|
|
168
|
+
if (pendingTimer !== null) {
|
|
169
|
+
clearTimeout(pendingTimer);
|
|
170
|
+
pendingTimer = null;
|
|
171
|
+
}
|
|
172
|
+
const run = pendingCommit;
|
|
173
|
+
pendingCommit = null;
|
|
174
|
+
run();
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
/** Test-only: reset the store to the empty state without notifying via debounce. */
|
|
179
|
+
export function __resetAmbientForTests(): void {
|
|
180
|
+
if (pendingTimer !== null) {
|
|
181
|
+
clearTimeout(pendingTimer);
|
|
182
|
+
pendingTimer = null;
|
|
183
|
+
}
|
|
184
|
+
pendingCommit = null;
|
|
185
|
+
commit(EMPTY_STATE);
|
|
186
|
+
}
|
package/src/theme/index.ts
CHANGED
|
@@ -30,6 +30,13 @@ export { buildThemeFromSeed, buildColorsFromSeed } from './build-theme-from-seed
|
|
|
30
30
|
export type { SeedAccents } from './build-theme-from-seed';
|
|
31
31
|
export { THEME_GRADIENTS } from './gradients';
|
|
32
32
|
export { useTheme, useThemeColor, useBloomTheme } from './use-theme';
|
|
33
|
+
export { useAmbientTheme, ambientTheme } from './ambient-store';
|
|
34
|
+
export type {
|
|
35
|
+
AmbientThemeState,
|
|
36
|
+
AmbientThemeApi,
|
|
37
|
+
AmbientAccents,
|
|
38
|
+
UseAmbientThemeOptions,
|
|
39
|
+
} from './ambient-store';
|
|
33
40
|
export { useNavigationTheme } from './use-navigation-theme';
|
|
34
41
|
export type { NavigationTheme, NavigationThemeFont } from './use-navigation-theme';
|
|
35
42
|
export type { Theme, ThemeColors, ThemeMode, ThemeGradient, ThemeGradients } from './types';
|