@oxyhq/bloom 0.7.0 → 0.7.2

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.
Files changed (76) hide show
  1. package/lib/commonjs/react-native-css.d.js +2 -0
  2. package/lib/commonjs/react-native-css.d.js.map +1 -0
  3. package/lib/commonjs/theme/BloomThemeProvider.js +39 -7
  4. package/lib/commonjs/theme/BloomThemeProvider.js.map +1 -1
  5. package/lib/commonjs/theme/apply-dark-class.js +6 -3
  6. package/lib/commonjs/theme/apply-dark-class.js.map +1 -1
  7. package/lib/commonjs/theme/color-presets.js +118 -118
  8. package/lib/commonjs/theme/color-presets.js.map +1 -1
  9. package/lib/commonjs/theme/color-scope/index.js +28 -6
  10. package/lib/commonjs/theme/color-scope/index.js.map +1 -1
  11. package/lib/commonjs/theme/color-scope/style-builder.js +35 -0
  12. package/lib/commonjs/theme/color-scope/style-builder.js.map +1 -1
  13. package/lib/commonjs/theme/native-root-vars.js +110 -0
  14. package/lib/commonjs/theme/native-root-vars.js.map +1 -0
  15. package/lib/commonjs/theme/native-root-vars.web.js +27 -0
  16. package/lib/commonjs/theme/native-root-vars.web.js.map +1 -0
  17. package/lib/commonjs/theme/preset-vars.js +71 -2
  18. package/lib/commonjs/theme/preset-vars.js.map +1 -1
  19. package/lib/module/react-native-css.d.js +2 -0
  20. package/lib/module/react-native-css.d.js.map +1 -0
  21. package/lib/module/theme/BloomThemeProvider.js +40 -8
  22. package/lib/module/theme/BloomThemeProvider.js.map +1 -1
  23. package/lib/module/theme/apply-dark-class.js +6 -3
  24. package/lib/module/theme/apply-dark-class.js.map +1 -1
  25. package/lib/module/theme/color-presets.js +118 -118
  26. package/lib/module/theme/color-presets.js.map +1 -1
  27. package/lib/module/theme/color-scope/index.js +29 -7
  28. package/lib/module/theme/color-scope/index.js.map +1 -1
  29. package/lib/module/theme/color-scope/style-builder.js +35 -0
  30. package/lib/module/theme/color-scope/style-builder.js.map +1 -1
  31. package/lib/module/theme/native-root-vars.js +106 -0
  32. package/lib/module/theme/native-root-vars.js.map +1 -0
  33. package/lib/module/theme/native-root-vars.web.js +23 -0
  34. package/lib/module/theme/native-root-vars.web.js.map +1 -0
  35. package/lib/module/theme/preset-vars.js +70 -2
  36. package/lib/module/theme/preset-vars.js.map +1 -1
  37. package/lib/typescript/commonjs/icons/common.d.ts +8 -8
  38. package/lib/typescript/commonjs/theme/BloomThemeProvider.d.ts.map +1 -1
  39. package/lib/typescript/commonjs/theme/apply-dark-class.d.ts +6 -3
  40. package/lib/typescript/commonjs/theme/apply-dark-class.d.ts.map +1 -1
  41. package/lib/typescript/commonjs/theme/color-scope/index.d.ts +9 -2
  42. package/lib/typescript/commonjs/theme/color-scope/index.d.ts.map +1 -1
  43. package/lib/typescript/commonjs/theme/color-scope/style-builder.d.ts +32 -0
  44. package/lib/typescript/commonjs/theme/color-scope/style-builder.d.ts.map +1 -1
  45. package/lib/typescript/commonjs/theme/native-root-vars.d.ts +94 -0
  46. package/lib/typescript/commonjs/theme/native-root-vars.d.ts.map +1 -0
  47. package/lib/typescript/commonjs/theme/native-root-vars.web.d.ts +20 -0
  48. package/lib/typescript/commonjs/theme/native-root-vars.web.d.ts.map +1 -0
  49. package/lib/typescript/commonjs/theme/preset-vars.d.ts +35 -2
  50. package/lib/typescript/commonjs/theme/preset-vars.d.ts.map +1 -1
  51. package/lib/typescript/module/icons/common.d.ts +8 -8
  52. package/lib/typescript/module/theme/BloomThemeProvider.d.ts.map +1 -1
  53. package/lib/typescript/module/theme/apply-dark-class.d.ts +6 -3
  54. package/lib/typescript/module/theme/apply-dark-class.d.ts.map +1 -1
  55. package/lib/typescript/module/theme/color-scope/index.d.ts +9 -2
  56. package/lib/typescript/module/theme/color-scope/index.d.ts.map +1 -1
  57. package/lib/typescript/module/theme/color-scope/style-builder.d.ts +32 -0
  58. package/lib/typescript/module/theme/color-scope/style-builder.d.ts.map +1 -1
  59. package/lib/typescript/module/theme/native-root-vars.d.ts +94 -0
  60. package/lib/typescript/module/theme/native-root-vars.d.ts.map +1 -0
  61. package/lib/typescript/module/theme/native-root-vars.web.d.ts +20 -0
  62. package/lib/typescript/module/theme/native-root-vars.web.d.ts.map +1 -0
  63. package/lib/typescript/module/theme/preset-vars.d.ts +35 -2
  64. package/lib/typescript/module/theme/preset-vars.d.ts.map +1 -1
  65. package/package.json +1 -1
  66. package/src/__tests__/native-root-vars.test.ts +127 -0
  67. package/src/__tests__/preset-vars.test.ts +45 -4
  68. package/src/react-native-css.d.ts +70 -0
  69. package/src/theme/BloomThemeProvider.tsx +32 -6
  70. package/src/theme/apply-dark-class.ts +6 -3
  71. package/src/theme/color-presets.ts +118 -118
  72. package/src/theme/color-scope/index.tsx +30 -8
  73. package/src/theme/color-scope/style-builder.ts +40 -0
  74. package/src/theme/native-root-vars.ts +107 -0
  75. package/src/theme/native-root-vars.web.ts +22 -0
  76. package/src/theme/preset-vars.ts +88 -4
@@ -3,6 +3,14 @@
3
3
  import { Platform } from 'react-native';
4
4
  import { getPresetVars } from "../preset-vars.js";
5
5
  import { lazyRequire } from "../../utils/lazy-require.js";
6
+
7
+ /**
8
+ * Component that provides inline CSS variables to a subtree via NativeWind's
9
+ * (react-native-css's) real `VariableContext`. The runtime strips the leading
10
+ * `--` from each key internally, so we feed it the full `--name -> value`
11
+ * record produced by `buildScopeVars`.
12
+ */
13
+
6
14
  const getNativeWindVars = lazyRequire('nativewind');
7
15
 
8
16
  /**
@@ -16,11 +24,38 @@ export function buildScopeVars(colorPreset, mode) {
16
24
  });
17
25
  }
18
26
 
27
+ /**
28
+ * Resolve NativeWind's `VariableContextProvider` — the canonical, non-deprecated
29
+ * react-native-css v3 API for providing inline CSS variables to a subtree. It
30
+ * reads the same `VariableContext` that interop className components consume, so
31
+ * descendants resolve `var(--primary)` etc. correctly. Returns `null` on web or
32
+ * when `nativewind` is not installed.
33
+ *
34
+ * This replaces the deprecated `vars()`-on-a-plain-`<View>`-style mechanism:
35
+ * under react-native-css@3, `vars()` returns an inline-vars marker that is only
36
+ * propagated to children when the host element matches className style rules
37
+ * (`usesVariables`/`variables`). A plain `<View>` with no `className` drops the
38
+ * vars silently, so the subtree renders without the preset palette.
39
+ */
40
+ export function getVariableContextProvider() {
41
+ if (Platform.OS === 'web') return null;
42
+ const module = getNativeWindVars();
43
+ if (!module || typeof module.VariableContextProvider !== 'function') return null;
44
+ return module.VariableContextProvider;
45
+ }
46
+
19
47
  /**
20
48
  * Build a native style object carrying every CSS var of the preset, using
21
49
  * NativeWind's `vars()` when available. Returns `undefined` on web (where the
22
50
  * provider writes vars to `documentElement` instead) or when `nativewind` is
23
51
  * not installed.
52
+ *
53
+ * @deprecated Under react-native-css@3, `vars()` only propagates to a subtree
54
+ * when applied to an interop className component (the runtime gates propagation
55
+ * on matched className style rules). Applied to a plain `<View>` the vars are
56
+ * dropped silently. Prefer wrapping children in `getVariableContextProvider()`.
57
+ * Retained only as the escape-hatch contract of `useColorScopeStyle`, where the
58
+ * caller owns the host element and is expected to be a className component.
24
59
  */
25
60
  export function buildNativePresetStyle(colorPreset, mode) {
26
61
  if (Platform.OS === 'web') return undefined;
@@ -1 +1 @@
1
- {"version":3,"names":["Platform","getPresetVars","lazyRequire","getNativeWindVars","buildScopeVars","colorPreset","mode","includeResolvedColorVars","buildNativePresetStyle","OS","undefined","module","vars"],"sourceRoot":"../../../../src","sources":["theme/color-scope/style-builder.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAwC,cAAc;AAEvE,SAASC,aAAa,QAAQ,mBAAgB;AAE9C,SAASC,WAAW,QAAQ,6BAA0B;AAMtD,MAAMC,iBAAiB,GAAGD,WAAW,CAAuB,YAAY,CAAC;;AAEzE;AACA;AACA;AACA;AACA;AACA,OAAO,SAASE,cAAcA,CAC5BC,WAAyB,EACzBC,IAAsB,EACE;EACxB,OAAOL,aAAa,CAACI,WAAW,EAAEC,IAAI,EAAE;IAAEC,wBAAwB,EAAE;EAAK,CAAC,CAAC;AAC7E;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,sBAAsBA,CACpCH,WAAyB,EACzBC,IAAsB,EACA;EACtB,IAAIN,QAAQ,CAACS,EAAE,KAAK,KAAK,EAAE,OAAOC,SAAS;EAC3C,MAAMC,MAAM,GAAGR,iBAAiB,CAAC,CAAC;EAClC,IAAI,CAACQ,MAAM,IAAI,OAAOA,MAAM,CAACC,IAAI,KAAK,UAAU,EAAE,OAAOF,SAAS;EAClE,OAAOC,MAAM,CAACC,IAAI,CAACR,cAAc,CAACC,WAAW,EAAEC,IAAI,CAAC,CAAC;AACvD","ignoreList":[]}
1
+ {"version":3,"names":["Platform","getPresetVars","lazyRequire","getNativeWindVars","buildScopeVars","colorPreset","mode","includeResolvedColorVars","getVariableContextProvider","OS","module","VariableContextProvider","buildNativePresetStyle","undefined","vars"],"sourceRoot":"../../../../src","sources":["theme/color-scope/style-builder.ts"],"mappings":";;AACA,SAASA,QAAQ,QAAwC,cAAc;AAEvE,SAASC,aAAa,QAAQ,mBAAgB;AAE9C,SAASC,WAAW,QAAQ,6BAA0B;;AAEtD;AACA;AACA;AACA;AACA;AACA;;AAWA,MAAMC,iBAAiB,GAAGD,WAAW,CAAuB,YAAY,CAAC;;AAEzE;AACA;AACA;AACA;AACA;AACA,OAAO,SAASE,cAAcA,CAC5BC,WAAyB,EACzBC,IAAsB,EACE;EACxB,OAAOL,aAAa,CAACI,WAAW,EAAEC,IAAI,EAAE;IAAEC,wBAAwB,EAAE;EAAK,CAAC,CAAC;AAC7E;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,0BAA0BA,CAAA,EAA4C;EACpF,IAAIR,QAAQ,CAACS,EAAE,KAAK,KAAK,EAAE,OAAO,IAAI;EACtC,MAAMC,MAAM,GAAGP,iBAAiB,CAAC,CAAC;EAClC,IAAI,CAACO,MAAM,IAAI,OAAOA,MAAM,CAACC,uBAAuB,KAAK,UAAU,EAAE,OAAO,IAAI;EAChF,OAAOD,MAAM,CAACC,uBAAuB;AACvC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,sBAAsBA,CACpCP,WAAyB,EACzBC,IAAsB,EACA;EACtB,IAAIN,QAAQ,CAACS,EAAE,KAAK,KAAK,EAAE,OAAOI,SAAS;EAC3C,MAAMH,MAAM,GAAGP,iBAAiB,CAAC,CAAC;EAClC,IAAI,CAACO,MAAM,IAAI,OAAOA,MAAM,CAACI,IAAI,KAAK,UAAU,EAAE,OAAOD,SAAS;EAClE,OAAOH,MAAM,CAACI,IAAI,CAACV,cAAc,CAACC,WAAW,EAAEC,IAAI,CAAC,CAAC;AACvD","ignoreList":[]}
@@ -0,0 +1,106 @@
1
+ "use strict";
2
+
3
+ import { rootVariables } from 'react-native-css/native-internal';
4
+ import { buildScopeVars } from "./color-scope/style-builder.js";
5
+ /**
6
+ * Publish the active color preset's CSS custom properties into react-native-css's
7
+ * GLOBAL root-variable family so they reach the ENTIRE native app tree — including
8
+ * content rendered outside the React subtree of `BloomThemeProvider`: expo-router
9
+ * navigator screens, `Portal`s, `Dialog`/`BottomSheet` overlays, and any other host
10
+ * that paints through a separate React root.
11
+ *
12
+ * Why a global write is required (native only)
13
+ * --------------------------------------------
14
+ * react-native-css resolves a `var(--x)` reference (its `varResolver`) in this order:
15
+ * 1. `name in inheritedVariables` — the React-context-inherited vars. This is what
16
+ * `VariableContextProvider` populates, but it is React-context-scoped, so it only
17
+ * reaches *direct descendants* of the provider in the React tree.
18
+ * 2. `inlineVariables[name]` — same-component inline vars.
19
+ * 3. `variables[name]` — resolved inherited vars.
20
+ * 4. `universalVariables(name)` — a GLOBAL observable family.
21
+ * 5. `rootVariables(name)` — a GLOBAL observable family.
22
+ * 6. the declared fallback.
23
+ *
24
+ * `BloomThemeProvider`'s `VariableContextProvider` only feeds path #1, so the navigator
25
+ * host and every portal/modal — which render outside that subtree — never see the
26
+ * preset vars and fall through to `rootVariables`/`universalVariables`. By default those
27
+ * families hold only react-native-css's own `__rn-css-rem`/`__rn-css-color` entries
28
+ * (Bloom's `global.css` defines the `hsl(var(--primary))` indirection but not the HSL
29
+ * triples themselves — those are injected at runtime), so the whole tree below the
30
+ * navigator renders monochrome. Writing the vars into `rootVariables` here is the
31
+ * exact same mechanism react-native-css uses for compiled `:root {}` / `@theme` vars
32
+ * (`StyleCollection.inject` does `rootVariables(name).set(valueArray)`), so portaled
33
+ * content resolves the palette identically regardless of React-tree position.
34
+ *
35
+ * The raw tokens are written as HSL triples (`primary: '205 87% 53%'`) and the
36
+ * resolved Tailwind v4 `--color-*` vars as sRGB `rgb(...)` (`color-primary:
37
+ * 'rgb(31 153 239)'`) — the latter so `color-mix`-based alpha utilities resolve
38
+ * on native (see `getPresetVars` / `hslTripletToRgb`).
39
+ *
40
+ * Why a STATIC `import`, not a runtime `require` (critical)
41
+ * ---------------------------------------------------------
42
+ * react-native-css@3.0.7 ships both a `dist/commonjs` and a `dist/module` build, and
43
+ * Metro bundles BOTH. In `native-internal/root.js` the variable families are plain
44
+ * module-local consts — NOT `globalThis`-guarded the way `StyleCollection` is — so the
45
+ * commonjs `root.js` and the module `root.js` each instantiate their OWN separate
46
+ * `rootVariables` family. The react-native-css renderer (`react-native-css/src/components/View.tsx`
47
+ * → `varResolver`) imports its `root.js` via ESM `import`, i.e. the MODULE build. A
48
+ * runtime `require('react-native-css/native-internal')` resolves the package's `require`
49
+ * export condition → the COMMONJS build → a DIFFERENT family the renderer never
50
+ * subscribes to, so the writes are a silent no-op on device. A static top-level
51
+ * `import` resolves the `import` condition → the MODULE build → the renderer's instance.
52
+ *
53
+ * This plain file is the NATIVE/default variant (Metro selects it on iOS/Android,
54
+ * which have no `.native` override here); the web variant lives in the sibling
55
+ * `native-root-vars.web.ts` no-op, which web bundlers pick over this one. So the
56
+ * static `react-native-css/native-internal` import below is never pulled into a web
57
+ * bundle — only into native. This mirrors Bloom's existing platform-split convention
58
+ * (`color-scope/index.tsx` + `color-scope/index.web.tsx`, `FontLoader.native.tsx`).
59
+ *
60
+ * Keying contract (verified against react-native-css@3.0.7)
61
+ * ---------------------------------------------------------
62
+ * The `rootVariables` family is keyed by the BARE variable name, WITHOUT the leading
63
+ * `--`. The compiler strips it uniformly: a `:root { --primary: ... }` declaration is
64
+ * stored via `rule.v.push([property.slice(2), value])` then routed into
65
+ * `shared.rootVariables[name]`, and `@property --x` goes through
66
+ * `name.startsWith("--") ? name.slice(2) : name`. The lookup side matches: a `var(--x)`
67
+ * reference compiles to `[{}, "var", ident.slice(2)]`, so `varResolver` looks up the
68
+ * bare name. `buildScopeVars` returns keys WITH the `--` prefix, so we strip it before
69
+ * writing each entry.
70
+ *
71
+ * Value shape
72
+ * -----------
73
+ * Each entry is a `VariableValue[]` — an array of `[value, mediaCondition?]` tuples.
74
+ * Bloom's preset vars are unconditional, so each is a single-element `[[value]]`, e.g.
75
+ * `rootVariables('primary').set([['205 87% 53%']])`. This is the same shape the compiler
76
+ * emits for unconditional `:root` vars.
77
+ *
78
+ * This is native-only and additive: the `VariableContextProvider` wrapper stays (it is
79
+ * the correct, scoped mechanism for `BloomColorScope` subtree overrides and harmlessly
80
+ * covers direct descendants). The web fork (`native-root-vars.web.ts`) no-ops — web
81
+ * writes the same vars to `document.documentElement` via `applyColorPresetVars`.
82
+ */
83
+
84
+ /**
85
+ * Write the preset's CSS vars to react-native-css's global `rootVariables` family
86
+ * so the whole native tree (navigator screens + portals/modals/bottom-sheets)
87
+ * resolves the active palette.
88
+ *
89
+ * Each `.set` notifies its own observers synchronously (react-native-css only
90
+ * batches notifications inside its own `StyleCollection.inject`; outside it,
91
+ * `observableBatch.current` is unset so every `.set` runs observers immediately),
92
+ * so sequential writes correctly trigger a re-render when the preset/mode changes.
93
+ *
94
+ * Defensive guard: if a host ships a react-native-css build that doesn't expose
95
+ * `rootVariables` as a callable (it always does on @3), we bail rather than throw.
96
+ */
97
+ export function applyNativeRootVars(colorPreset, mode) {
98
+ if (typeof rootVariables !== 'function') return;
99
+ const vars = buildScopeVars(colorPreset, mode);
100
+ for (const [key, value] of Object.entries(vars)) {
101
+ // The family is keyed by the bare name; `buildScopeVars` keys include `--`.
102
+ const name = key.startsWith('--') ? key.slice(2) : key;
103
+ rootVariables(name).set([[value]]);
104
+ }
105
+ }
106
+ //# sourceMappingURL=native-root-vars.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["rootVariables","buildScopeVars","applyNativeRootVars","colorPreset","mode","vars","key","value","Object","entries","name","startsWith","slice","set"],"sourceRoot":"../../../src","sources":["theme/native-root-vars.ts"],"mappings":";;AAAA,SAASA,aAAa,QAAQ,kCAAkC;AAEhE,SAASC,cAAc,QAAQ,gCAA6B;AAG5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,mBAAmBA,CAACC,WAAyB,EAAEC,IAAsB,EAAQ;EAC3F,IAAI,OAAOJ,aAAa,KAAK,UAAU,EAAE;EAEzC,MAAMK,IAAI,GAAGJ,cAAc,CAACE,WAAW,EAAEC,IAAI,CAAC;EAC9C,KAAK,MAAM,CAACE,GAAG,EAAEC,KAAK,CAAC,IAAIC,MAAM,CAACC,OAAO,CAACJ,IAAI,CAAC,EAAE;IAC/C;IACA,MAAMK,IAAI,GAAGJ,GAAG,CAACK,UAAU,CAAC,IAAI,CAAC,GAAGL,GAAG,CAACM,KAAK,CAAC,CAAC,CAAC,GAAGN,GAAG;IACtDN,aAAa,CAACU,IAAI,CAAC,CAACG,GAAG,CAAC,CAAC,CAACN,KAAK,CAAC,CAAC,CAAC;EACpC;AACF","ignoreList":[]}
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+
3
+ /**
4
+ * Web fork of `applyNativeRootVars` — a no-op.
5
+ *
6
+ * On web, `BloomThemeProvider` already writes the active preset's CSS vars to
7
+ * `document.documentElement` via `applyColorPresetVars`, which the browser /
8
+ * react-native-web resolve natively. The native/default variant — the plain
9
+ * sibling `native-root-vars.ts` — instead publishes those vars into
10
+ * react-native-css's GLOBAL `rootVariables` family.
11
+ *
12
+ * Keeping the native variant's `react-native-css/native-internal` import out of
13
+ * the web bundle is the whole reason this is a platform-split module: web (and
14
+ * any non-NativeWind host) picks this `.web` fork over the plain file and so
15
+ * never statically pulls react-native-css internals.
16
+ *
17
+ * The signature is intentionally identical to the plain variant so the import
18
+ * site in `BloomThemeProvider` is platform-agnostic.
19
+ */
20
+ export function applyNativeRootVars(_colorPreset, _mode) {
21
+ // Intentionally empty — web applies preset vars to `document.documentElement`.
22
+ }
23
+ //# sourceMappingURL=native-root-vars.web.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["applyNativeRootVars","_colorPreset","_mode"],"sourceRoot":"../../../src","sources":["theme/native-root-vars.web.ts"],"mappings":";;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,mBAAmBA,CAACC,YAA0B,EAAEC,KAAuB,EAAQ;EAC7F;AAAA","ignoreList":[]}
@@ -8,6 +8,71 @@ function extractHue(hslVar) {
8
8
  function extractSat(hslVar) {
9
9
  return parseInt(hslVar.split(' ')[1] ?? '0', 10);
10
10
  }
11
+
12
+ /**
13
+ * Convert a shadcn-style HSL triple (`'H S% L%'`, optionally with an alpha tail
14
+ * `'H S% L% / A'`) into an sRGB `rgb(...)` string.
15
+ *
16
+ * Why rgb and not hsl (the native alpha-utility bug this fixes)
17
+ * -------------------------------------------------------------
18
+ * Tailwind v4 compiles an alpha-on-theme-color utility (`bg-primary/10`) into a
19
+ * `color-mix(... var(--color-primary) 10%, transparent)` declaration. On native,
20
+ * react-native-css resolves that `color-mix` at runtime via `colorjs.io/fn`, but
21
+ * its `color-mix` implementation registers ONLY the `sRGB`, `P3`, and `OKLab`
22
+ * color spaces — never `HSL`. So if `--color-primary` resolves to an `hsl(...)`
23
+ * string, `parse('hsl(...)')` throws, the mix is swallowed, and the utility
24
+ * silently produces no color. Emitting the resolved var as `rgb(...)` (a space
25
+ * colorjs.io always has registered) makes the alpha utilities resolve on native,
26
+ * matching web. Full (non-alpha) utilities already worked because React Native's
27
+ * native color parser handles `hsl()` directly; only `color-mix` was affected.
28
+ *
29
+ * Output is space-separated channels (`rgb(31 153 239)`), the modern CSS syntax
30
+ * parsed by both `colorjs.io/fn` (with only sRGB/P3/OKLab registered) and
31
+ * react-native-web / browsers. An alpha tail emits `rgb(r g b / a)`, likewise
32
+ * parsed by both.
33
+ *
34
+ * Pure function — standard HSL→sRGB conversion, channels rounded to integers.
35
+ * Tolerates a `deg` suffix on the hue and `%` suffixes on saturation/lightness.
36
+ */
37
+ export function hslTripletToRgb(triplet) {
38
+ const [colorPart, alphaPart] = triplet.split('/').map(part => part.trim());
39
+ const channels = (colorPart ?? '').split(/\s+/).filter(Boolean);
40
+ const hue = parseFloat((channels[0] ?? '0').replace(/deg$/i, ''));
41
+ const sat = parseFloat((channels[1] ?? '0').replace('%', '')) / 100;
42
+ const light = parseFloat((channels[2] ?? '0').replace('%', '')) / 100;
43
+ const h = Number.isFinite(hue) ? hue : 0;
44
+ const s = Number.isFinite(sat) ? sat : 0;
45
+ const l = Number.isFinite(light) ? light : 0;
46
+ const chroma = (1 - Math.abs(2 * l - 1)) * s;
47
+ const huePrime = (h % 360 + 360) % 360 / 60;
48
+ const second = chroma * (1 - Math.abs(huePrime % 2 - 1));
49
+ let r = 0;
50
+ let g = 0;
51
+ let b = 0;
52
+ if (huePrime < 1) {
53
+ [r, g, b] = [chroma, second, 0];
54
+ } else if (huePrime < 2) {
55
+ [r, g, b] = [second, chroma, 0];
56
+ } else if (huePrime < 3) {
57
+ [r, g, b] = [0, chroma, second];
58
+ } else if (huePrime < 4) {
59
+ [r, g, b] = [0, second, chroma];
60
+ } else if (huePrime < 5) {
61
+ [r, g, b] = [second, 0, chroma];
62
+ } else {
63
+ [r, g, b] = [chroma, 0, second];
64
+ }
65
+ const match = l - chroma / 2;
66
+ const red = Math.round((r + match) * 255);
67
+ const green = Math.round((g + match) * 255);
68
+ const blue = Math.round((b + match) * 255);
69
+ if (alphaPart !== undefined && alphaPart !== '') {
70
+ const alpha = alphaPart.endsWith('%') ? parseFloat(alphaPart) / 100 : parseFloat(alphaPart);
71
+ const safeAlpha = Number.isFinite(alpha) ? alpha : 1;
72
+ return `rgb(${red} ${green} ${blue} / ${safeAlpha})`;
73
+ }
74
+ return `rgb(${red} ${green} ${blue})`;
75
+ }
11
76
  const RESOLVED_COLOR_MAP = {
12
77
  '--background': '--color-background',
13
78
  '--foreground': '--color-foreground',
@@ -49,7 +114,10 @@ export function getPresetVars(colorName, mode, options = {}) {
49
114
  const isDark = mode === 'dark';
50
115
  const extended = {
51
116
  ...base,
52
- '--card': isDark ? `${hue} 30% 10%` : '0 0% 100%',
117
+ // Light cards carry the same faint preset tint as `--popover` (H 12% 99%)
118
+ // so they read as part of the preset family rather than a pure-white slab —
119
+ // mirroring how dark cards (H 30% 10%) carry the accent hue into near-black.
120
+ '--card': isDark ? `${hue} 30% 10%` : `${hue} 12% 99%`,
53
121
  '--card-foreground': foreground,
54
122
  '--chart-1': `${hue} ${sat}% 85%`,
55
123
  '--chart-2': `${hue} ${sat}% 75%`,
@@ -71,7 +139,7 @@ export function getPresetVars(colorName, mode, options = {}) {
71
139
  };
72
140
  for (const [rawKey, colorKey] of Object.entries(RESOLVED_COLOR_MAP)) {
73
141
  const value = extended[rawKey];
74
- if (value) resolved[colorKey] = `hsl(${value})`;
142
+ if (value) resolved[colorKey] = hslTripletToRgb(value);
75
143
  }
76
144
  return resolved;
77
145
  }
@@ -1 +1 @@
1
- {"version":3,"names":["Platform","APP_COLOR_PRESETS","extractHue","hslVar","parseInt","split","extractSat","RESOLVED_COLOR_MAP","getPresetVars","colorName","mode","options","preset","base","light","dark","get","key","primary","foreground","hue","sat","Math","min","isDark","extended","includeResolvedColorVars","resolved","rawKey","colorKey","Object","entries","value","applyPresetVarsToDocument","OS","document","vars","root","documentElement","style","setProperty"],"sourceRoot":"../../../src","sources":["theme/preset-vars.ts"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["Platform","APP_COLOR_PRESETS","extractHue","hslVar","parseInt","split","extractSat","hslTripletToRgb","triplet","colorPart","alphaPart","map","part","trim","channels","filter","Boolean","hue","parseFloat","replace","sat","light","h","Number","isFinite","s","l","chroma","Math","abs","huePrime","second","r","g","b","match","red","round","green","blue","undefined","alpha","endsWith","safeAlpha","RESOLVED_COLOR_MAP","getPresetVars","colorName","mode","options","preset","base","dark","get","key","primary","foreground","min","isDark","extended","includeResolvedColorVars","resolved","rawKey","colorKey","Object","entries","value","applyPresetVarsToDocument","OS","document","vars","root","documentElement","style","setProperty"],"sourceRoot":"../../../src","sources":["theme/preset-vars.ts"],"mappings":"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","ignoreList":[]}
@@ -37,14 +37,6 @@ export declare function useCommonSVGProps(props: Props): {
37
37
  title?: string | undefined;
38
38
  children?: React.ReactNode;
39
39
  filter?: string | undefined;
40
- color?: ColorValue | undefined;
41
- scale?: import("react-native-svg").NumberArray | undefined;
42
- scaleX?: import("react-native-svg").NumberProp | undefined;
43
- scaleY?: import("react-native-svg").NumberProp | undefined;
44
- translateX?: import("react-native-svg").NumberProp | undefined;
45
- translateY?: import("react-native-svg").NumberProp | undefined;
46
- skewX?: import("react-native-svg").NumberProp | undefined;
47
- skewY?: import("react-native-svg").NumberProp | undefined;
48
40
  hitSlop?: number | import("react-native").Insets | undefined;
49
41
  id?: string | undefined;
50
42
  needsOffscreenAlphaCompositing?: boolean | undefined | undefined;
@@ -136,6 +128,14 @@ export declare function useCommonSVGProps(props: Props): {
136
128
  accessibilityShowsLargeContentViewer?: boolean | undefined | undefined;
137
129
  accessibilityLargeContentTitle?: string | undefined | undefined;
138
130
  accessibilityRespondsToUserInteraction?: boolean | undefined | undefined;
131
+ color?: ColorValue | undefined;
132
+ scale?: import("react-native-svg").NumberArray | undefined;
133
+ scaleX?: import("react-native-svg").NumberProp | undefined;
134
+ scaleY?: import("react-native-svg").NumberProp | undefined;
135
+ translateX?: import("react-native-svg").NumberProp | undefined;
136
+ translateY?: import("react-native-svg").NumberProp | undefined;
137
+ skewX?: import("react-native-svg").NumberProp | undefined;
138
+ skewY?: import("react-native-svg").NumberProp | undefined;
139
139
  fontSize?: import("react-native-svg").NumberProp | undefined;
140
140
  fontWeight?: import("react-native-svg").FontWeight | undefined;
141
141
  fontStyle?: import("react-native-svg").FontStyle | undefined;
@@ -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;AAOtB,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,OAAO,EAKL,KAAK,iBAAiB,EAEvB,MAAM,eAAe,CAAC;AAGvB,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,eAAO,MAAM,iBAAiB,8CAAqD,CAAC;AAEpF,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,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,QAAQ,GACT,EAAE,uBAAuB,2CA+DzB"}
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;AAOtB,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGpD,OAAO,EAKL,KAAK,iBAAiB,EAEvB,MAAM,eAAe,CAAC;AAGvB,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,eAAO,MAAM,iBAAiB,8CAAqD,CAAC;AAEpF,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,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,QAAQ,GACT,EAAE,uBAAuB,2CAwFzB"}
@@ -5,10 +5,13 @@ export declare function applyDarkClass(resolved: 'light' | 'dark'): void;
5
5
  * No-op on native — only affects web.
6
6
  *
7
7
  * Writes both the raw HSL triples (e.g. `--primary: 185 100% 20%`) and the
8
- * resolved `--color-*` vars (`--color-primary: hsl(185 100% 20%)`) so both
8
+ * resolved `--color-*` vars (`--color-primary: rgb(0 94 102)`) so both
9
9
  * shadcn-style `hsl(var(--primary))` plumbing and Tailwind v4 `@theme`
10
- * utilities resolve consistently. Includes extended tokens (card, chart-*,
11
- * content-area, sidebar-*) so consumer apps don't need to synthesize them.
10
+ * utilities resolve consistently. The resolved vars are emitted as `rgb(...)`
11
+ * (not `hsl(...)`) so the alpha utilities (`bg-primary/10`) resolve on native —
12
+ * see `getPresetVars` / `hslTripletToRgb`. Includes extended tokens (card,
13
+ * chart-*, content-area, sidebar-*) so consumer apps don't need to synthesize
14
+ * them.
12
15
  */
13
16
  export declare function applyColorPresetVars(preset: AppColorName, resolved: 'light' | 'dark'): void;
14
17
  //# sourceMappingURL=apply-dark-class.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"apply-dark-class.d.ts","sourceRoot":"","sources":["../../../../src/theme/apply-dark-class.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGvE,wBAAgB,cAAc,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,QAIxD;AAED;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,QAUpF"}
1
+ {"version":3,"file":"apply-dark-class.d.ts","sourceRoot":"","sources":["../../../../src/theme/apply-dark-class.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGvE,wBAAgB,cAAc,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,QAIxD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,QAUpF"}
@@ -19,8 +19,15 @@ export interface BloomColorScopeProps {
19
19
  export declare function BloomColorScope({ colorPreset, asChild, style, children, }: BloomColorScopeProps): import("react/jsx-runtime").JSX.Element;
20
20
  /**
21
21
  * Escape hatch for advanced cases where the wrapping element is owned by the
22
- * caller. Returns a stable native style object carrying the preset's CSS vars.
23
- * Returns `undefined` on web or when `nativewind` is not installed.
22
+ * caller. Returns a stable native style object carrying the preset's CSS vars
23
+ * via NativeWind's `vars()`. Returns `undefined` on web or when `nativewind`
24
+ * is not installed.
25
+ *
26
+ * NOTE: subject to the react-native-css@3 limitation — the returned style only
27
+ * propagates vars to descendants when applied to an interop className component
28
+ * (the runtime gates propagation on matched className style rules). It is a
29
+ * no-op on a plain `<View>` with no `className`. For the common case prefer
30
+ * `<BloomColorScope>`, which wraps children in `VariableContextProvider`.
24
31
  */
25
32
  export declare function useColorScopeStyle(colorPreset: AppColorName): StyleProp<ViewStyle>;
26
33
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAC3F,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGrD,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,WAAW,EAAE,YAAY,GAAG,SAAS,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0GAA0G;IAC1G,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAMD,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,OAAe,EACf,KAAK,EACL,QAAQ,GACT,EAAE,oBAAoB,2CAoCtB;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,YAAY,GAAG,SAAS,CAAC,SAAS,CAAC,CAUlF"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAC3F,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGrD,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,WAAW,EAAE,YAAY,GAAG,SAAS,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0GAA0G;IAC1G,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAMD,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,OAAe,EACf,KAAK,EACL,QAAQ,GACT,EAAE,oBAAoB,2CAmDtB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,YAAY,GAAG,SAAS,CAAC,SAAS,CAAC,CAUlF"}
@@ -1,16 +1,48 @@
1
+ import type React from 'react';
1
2
  import { type StyleProp, type ViewStyle } from 'react-native';
2
3
  import type { AppColorName } from '../color-presets';
4
+ /**
5
+ * Component that provides inline CSS variables to a subtree via NativeWind's
6
+ * (react-native-css's) real `VariableContext`. The runtime strips the leading
7
+ * `--` from each key internally, so we feed it the full `--name -> value`
8
+ * record produced by `buildScopeVars`.
9
+ */
10
+ export type VariableContextProviderComponent = React.ComponentType<{
11
+ value: Record<string, string>;
12
+ children: React.ReactNode;
13
+ }>;
3
14
  /**
4
15
  * Build the CSS custom-property map for a preset, ready to be applied to a
5
16
  * subtree. Always includes the resolved `--color-*` vars so Tailwind v4
6
17
  * `@theme` utilities (e.g. `bg-background`) honour the scope.
7
18
  */
8
19
  export declare function buildScopeVars(colorPreset: AppColorName, mode: 'light' | 'dark'): Record<string, string>;
20
+ /**
21
+ * Resolve NativeWind's `VariableContextProvider` — the canonical, non-deprecated
22
+ * react-native-css v3 API for providing inline CSS variables to a subtree. It
23
+ * reads the same `VariableContext` that interop className components consume, so
24
+ * descendants resolve `var(--primary)` etc. correctly. Returns `null` on web or
25
+ * when `nativewind` is not installed.
26
+ *
27
+ * This replaces the deprecated `vars()`-on-a-plain-`<View>`-style mechanism:
28
+ * under react-native-css@3, `vars()` returns an inline-vars marker that is only
29
+ * propagated to children when the host element matches className style rules
30
+ * (`usesVariables`/`variables`). A plain `<View>` with no `className` drops the
31
+ * vars silently, so the subtree renders without the preset palette.
32
+ */
33
+ export declare function getVariableContextProvider(): VariableContextProviderComponent | null;
9
34
  /**
10
35
  * Build a native style object carrying every CSS var of the preset, using
11
36
  * NativeWind's `vars()` when available. Returns `undefined` on web (where the
12
37
  * provider writes vars to `documentElement` instead) or when `nativewind` is
13
38
  * not installed.
39
+ *
40
+ * @deprecated Under react-native-css@3, `vars()` only propagates to a subtree
41
+ * when applied to an interop className component (the runtime gates propagation
42
+ * on matched className style rules). Applied to a plain `<View>` the vars are
43
+ * dropped silently. Prefer wrapping children in `getVariableContextProvider()`.
44
+ * Retained only as the escape-hatch contract of `useColorScopeStyle`, where the
45
+ * caller owns the host element and is expected to be a className component.
14
46
  */
15
47
  export declare function buildNativePresetStyle(colorPreset: AppColorName, mode: 'light' | 'dark'): StyleProp<ViewStyle>;
16
48
  //# sourceMappingURL=style-builder.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"style-builder.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/style-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGxE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AASrD;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,WAAW,EAAE,YAAY,EACzB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAExB;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CACpC,WAAW,EAAE,YAAY,EACzB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,SAAS,CAAC,SAAS,CAAC,CAKtB"}
1
+ {"version":3,"file":"style-builder.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/style-builder.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAY,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGxE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGrD;;;;;GAKG;AACH,MAAM,MAAM,gCAAgC,GAAG,KAAK,CAAC,aAAa,CAAC;IACjE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC,CAAC;AASH;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,WAAW,EAAE,YAAY,EACzB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAExB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,0BAA0B,IAAI,gCAAgC,GAAG,IAAI,CAKpF;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,sBAAsB,CACpC,WAAW,EAAE,YAAY,EACzB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,SAAS,CAAC,SAAS,CAAC,CAKtB"}
@@ -0,0 +1,94 @@
1
+ import { type AppColorName } from './color-presets';
2
+ /**
3
+ * Publish the active color preset's CSS custom properties into react-native-css's
4
+ * GLOBAL root-variable family so they reach the ENTIRE native app tree — including
5
+ * content rendered outside the React subtree of `BloomThemeProvider`: expo-router
6
+ * navigator screens, `Portal`s, `Dialog`/`BottomSheet` overlays, and any other host
7
+ * that paints through a separate React root.
8
+ *
9
+ * Why a global write is required (native only)
10
+ * --------------------------------------------
11
+ * react-native-css resolves a `var(--x)` reference (its `varResolver`) in this order:
12
+ * 1. `name in inheritedVariables` — the React-context-inherited vars. This is what
13
+ * `VariableContextProvider` populates, but it is React-context-scoped, so it only
14
+ * reaches *direct descendants* of the provider in the React tree.
15
+ * 2. `inlineVariables[name]` — same-component inline vars.
16
+ * 3. `variables[name]` — resolved inherited vars.
17
+ * 4. `universalVariables(name)` — a GLOBAL observable family.
18
+ * 5. `rootVariables(name)` — a GLOBAL observable family.
19
+ * 6. the declared fallback.
20
+ *
21
+ * `BloomThemeProvider`'s `VariableContextProvider` only feeds path #1, so the navigator
22
+ * host and every portal/modal — which render outside that subtree — never see the
23
+ * preset vars and fall through to `rootVariables`/`universalVariables`. By default those
24
+ * families hold only react-native-css's own `__rn-css-rem`/`__rn-css-color` entries
25
+ * (Bloom's `global.css` defines the `hsl(var(--primary))` indirection but not the HSL
26
+ * triples themselves — those are injected at runtime), so the whole tree below the
27
+ * navigator renders monochrome. Writing the vars into `rootVariables` here is the
28
+ * exact same mechanism react-native-css uses for compiled `:root {}` / `@theme` vars
29
+ * (`StyleCollection.inject` does `rootVariables(name).set(valueArray)`), so portaled
30
+ * content resolves the palette identically regardless of React-tree position.
31
+ *
32
+ * The raw tokens are written as HSL triples (`primary: '205 87% 53%'`) and the
33
+ * resolved Tailwind v4 `--color-*` vars as sRGB `rgb(...)` (`color-primary:
34
+ * 'rgb(31 153 239)'`) — the latter so `color-mix`-based alpha utilities resolve
35
+ * on native (see `getPresetVars` / `hslTripletToRgb`).
36
+ *
37
+ * Why a STATIC `import`, not a runtime `require` (critical)
38
+ * ---------------------------------------------------------
39
+ * react-native-css@3.0.7 ships both a `dist/commonjs` and a `dist/module` build, and
40
+ * Metro bundles BOTH. In `native-internal/root.js` the variable families are plain
41
+ * module-local consts — NOT `globalThis`-guarded the way `StyleCollection` is — so the
42
+ * commonjs `root.js` and the module `root.js` each instantiate their OWN separate
43
+ * `rootVariables` family. The react-native-css renderer (`react-native-css/src/components/View.tsx`
44
+ * → `varResolver`) imports its `root.js` via ESM `import`, i.e. the MODULE build. A
45
+ * runtime `require('react-native-css/native-internal')` resolves the package's `require`
46
+ * export condition → the COMMONJS build → a DIFFERENT family the renderer never
47
+ * subscribes to, so the writes are a silent no-op on device. A static top-level
48
+ * `import` resolves the `import` condition → the MODULE build → the renderer's instance.
49
+ *
50
+ * This plain file is the NATIVE/default variant (Metro selects it on iOS/Android,
51
+ * which have no `.native` override here); the web variant lives in the sibling
52
+ * `native-root-vars.web.ts` no-op, which web bundlers pick over this one. So the
53
+ * static `react-native-css/native-internal` import below is never pulled into a web
54
+ * bundle — only into native. This mirrors Bloom's existing platform-split convention
55
+ * (`color-scope/index.tsx` + `color-scope/index.web.tsx`, `FontLoader.native.tsx`).
56
+ *
57
+ * Keying contract (verified against react-native-css@3.0.7)
58
+ * ---------------------------------------------------------
59
+ * The `rootVariables` family is keyed by the BARE variable name, WITHOUT the leading
60
+ * `--`. The compiler strips it uniformly: a `:root { --primary: ... }` declaration is
61
+ * stored via `rule.v.push([property.slice(2), value])` then routed into
62
+ * `shared.rootVariables[name]`, and `@property --x` goes through
63
+ * `name.startsWith("--") ? name.slice(2) : name`. The lookup side matches: a `var(--x)`
64
+ * reference compiles to `[{}, "var", ident.slice(2)]`, so `varResolver` looks up the
65
+ * bare name. `buildScopeVars` returns keys WITH the `--` prefix, so we strip it before
66
+ * writing each entry.
67
+ *
68
+ * Value shape
69
+ * -----------
70
+ * Each entry is a `VariableValue[]` — an array of `[value, mediaCondition?]` tuples.
71
+ * Bloom's preset vars are unconditional, so each is a single-element `[[value]]`, e.g.
72
+ * `rootVariables('primary').set([['205 87% 53%']])`. This is the same shape the compiler
73
+ * emits for unconditional `:root` vars.
74
+ *
75
+ * This is native-only and additive: the `VariableContextProvider` wrapper stays (it is
76
+ * the correct, scoped mechanism for `BloomColorScope` subtree overrides and harmlessly
77
+ * covers direct descendants). The web fork (`native-root-vars.web.ts`) no-ops — web
78
+ * writes the same vars to `document.documentElement` via `applyColorPresetVars`.
79
+ */
80
+ /**
81
+ * Write the preset's CSS vars to react-native-css's global `rootVariables` family
82
+ * so the whole native tree (navigator screens + portals/modals/bottom-sheets)
83
+ * resolves the active palette.
84
+ *
85
+ * Each `.set` notifies its own observers synchronously (react-native-css only
86
+ * batches notifications inside its own `StyleCollection.inject`; outside it,
87
+ * `observableBatch.current` is unset so every `.set` runs observers immediately),
88
+ * so sequential writes correctly trigger a re-render when the preset/mode changes.
89
+ *
90
+ * Defensive guard: if a host ships a react-native-css build that doesn't expose
91
+ * `rootVariables` as a callable (it always does on @3), we bail rather than throw.
92
+ */
93
+ export declare function applyNativeRootVars(colorPreset: AppColorName, mode: 'light' | 'dark'): void;
94
+ //# sourceMappingURL=native-root-vars.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"native-root-vars.d.ts","sourceRoot":"","sources":["../../../../src/theme/native-root-vars.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6EG;AAEH;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAS3F"}
@@ -0,0 +1,20 @@
1
+ import { type AppColorName } from './color-presets';
2
+ /**
3
+ * Web fork of `applyNativeRootVars` — a no-op.
4
+ *
5
+ * On web, `BloomThemeProvider` already writes the active preset's CSS vars to
6
+ * `document.documentElement` via `applyColorPresetVars`, which the browser /
7
+ * react-native-web resolve natively. The native/default variant — the plain
8
+ * sibling `native-root-vars.ts` — instead publishes those vars into
9
+ * react-native-css's GLOBAL `rootVariables` family.
10
+ *
11
+ * Keeping the native variant's `react-native-css/native-internal` import out of
12
+ * the web bundle is the whole reason this is a platform-split module: web (and
13
+ * any non-NativeWind host) picks this `.web` fork over the plain file and so
14
+ * never statically pulls react-native-css internals.
15
+ *
16
+ * The signature is intentionally identical to the plain variant so the import
17
+ * site in `BloomThemeProvider` is platform-agnostic.
18
+ */
19
+ export declare function applyNativeRootVars(_colorPreset: AppColorName, _mode: 'light' | 'dark'): void;
20
+ //# sourceMappingURL=native-root-vars.web.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"native-root-vars.web.d.ts","sourceRoot":"","sources":["../../../../src/theme/native-root-vars.web.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,mBAAmB,CAAC,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAE7F"}