@oxyhq/bloom 0.6.0 → 0.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/theme/BloomThemeProvider.js +6 -0
- package/lib/commonjs/theme/BloomThemeProvider.js.map +1 -1
- package/lib/commonjs/theme/index.js +7 -0
- package/lib/commonjs/theme/index.js.map +1 -1
- package/lib/commonjs/theme/init-css-interop.js +112 -0
- package/lib/commonjs/theme/init-css-interop.js.map +1 -0
- package/lib/module/theme/BloomThemeProvider.js +5 -0
- package/lib/module/theme/BloomThemeProvider.js.map +1 -1
- package/lib/module/theme/index.js +1 -0
- package/lib/module/theme/index.js.map +1 -1
- package/lib/module/theme/init-css-interop.js +109 -0
- package/lib/module/theme/init-css-interop.js.map +1 -0
- package/lib/typescript/commonjs/theme/BloomThemeProvider.d.ts +1 -0
- package/lib/typescript/commonjs/theme/BloomThemeProvider.d.ts.map +1 -1
- package/lib/typescript/commonjs/theme/index.d.ts +1 -0
- package/lib/typescript/commonjs/theme/index.d.ts.map +1 -1
- package/lib/typescript/commonjs/theme/init-css-interop.d.ts +6 -0
- package/lib/typescript/commonjs/theme/init-css-interop.d.ts.map +1 -0
- package/lib/typescript/module/theme/BloomThemeProvider.d.ts +1 -0
- package/lib/typescript/module/theme/BloomThemeProvider.d.ts.map +1 -1
- package/lib/typescript/module/theme/index.d.ts +1 -0
- package/lib/typescript/module/theme/index.d.ts.map +1 -1
- package/lib/typescript/module/theme/init-css-interop.d.ts +6 -0
- package/lib/typescript/module/theme/init-css-interop.d.ts.map +1 -0
- package/package.json +1 -1
- package/src/__tests__/init-css-interop.test.ts +130 -0
- package/src/theme/BloomThemeProvider.tsx +5 -0
- package/src/theme/index.ts +1 -0
- package/src/theme/init-css-interop.ts +126 -0
|
@@ -7,6 +7,7 @@ exports.BloomColorScope = BloomColorScope;
|
|
|
7
7
|
exports.BloomThemeContext = void 0;
|
|
8
8
|
exports.BloomThemeProvider = BloomThemeProvider;
|
|
9
9
|
exports.buildTheme = buildTheme;
|
|
10
|
+
require("./init-css-interop.js");
|
|
10
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
12
|
var _reactNative = require("react-native");
|
|
12
13
|
var _colorPresets = require("./color-presets.js");
|
|
@@ -16,6 +17,11 @@ var _setColorSchemeSafe = require("./set-color-scheme-safe.js");
|
|
|
16
17
|
var _FontLoader = require("../fonts/FontLoader");
|
|
17
18
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
18
19
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
20
|
+
// Side-effect import — must come first. Initializes react-native-css-interop's
|
|
21
|
+
// `darkMode` flag to `'class'` at module load so its MutationObserver doesn't
|
|
22
|
+
// throw "Cannot manually set color scheme, as dark mode is type 'media'" the
|
|
23
|
+
// first time Bloom toggles the dark class on <html>. See ./init-css-interop.
|
|
24
|
+
|
|
19
25
|
function hslVarToCSS(value) {
|
|
20
26
|
const parts = value.split('/').map(s => s.trim());
|
|
21
27
|
if (parts.length === 2) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["require","_react","_interopRequireWildcard","_reactNative","_colorPresets","_adaptiveColors","_applyDarkClass","_setColorSchemeSafe","_FontLoader","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","hslVarToCSS","value","parts","split","map","s","trim","length","alpha","parseFloat","replace","extractHue","hslVar","parseInt","hsl","h","l","buildTheme","appColor","resolved","isAdaptive","isDark","themeColors","Platform","OS","adaptive","getAdaptiveColors","preset","APP_COLOR_PRESETS","vars","light","dark","primaryHue","destructiveHue","surface","background","mutedForeground","primaryColor","backgroundSecondary","backgroundTertiary","text","textSecondary","textTertiary","border","borderLight","primary","primaryLight","primaryDark","secondary","tint","icon","iconActive","success","error","warning","info","primarySubtle","primarySubtleForeground","negative","negativeForeground","negativeSubtle","negativeSubtleForeground","contrast50","card","shadow","overlay","mode","colors","isLight","BloomThemeContext","exports","createContext","BloomThemeProvider","controlledMode","colorPreset","controlledPreset","onModeChange","onColorPresetChange","fonts","onFontsLoading","children","rnScheme","useRNColorScheme","internalPreset","setInternalPreset","useState","undefined","effectiveMode","lastApplied","useRef","applyKey","current","setColorSchemeSafe","applyDarkClass","applyColorPresetVars","setMode","useCallback","newMode","setColorPreset","contextValue","useMemo","theme","jsx","Provider","FontLoader","enabled","fallback","BloomColorScope","parent","useContext","Error"],"sourceRoot":"../../../src","sources":["theme/BloomThemeProvider.tsx"],"mappings":";;;;;;;;;AAIAA,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AACA,IAAAK,eAAA,GAAAL,OAAA;AACA,IAAAM,eAAA,GAAAN,OAAA;AACA,IAAAO,mBAAA,GAAAP,OAAA;AACA,IAAAQ,WAAA,GAAAR,OAAA;AAAiD,IAAAS,WAAA,GAAAT,OAAA;AAAA,SAAAE,wBAAAQ,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAV,uBAAA,YAAAA,CAAAQ,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAXjD;AACA;AACA;AACA;;AAWA,SAASkB,WAAWA,CAACC,KAAa,EAAU;EAC1C,MAAMC,KAAK,GAAGD,KAAK,CAACE,KAAK,CAAC,GAAG,CAAC,CAACC,GAAG,CAAEC,CAAC,IAAKA,CAAC,CAACC,IAAI,CAAC,CAAC,CAAC;EACnD,IAAIJ,KAAK,CAACK,MAAM,KAAK,CAAC,EAAE;IACtB,MAAMC,KAAK,GAAGC,UAAU,CAACP,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,GAAG,GAAG;IACjD,OAAO,QAAQ,CAACA,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,EAAEQ,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,KAAKF,KAAK,GAAG;EAClE;EACA,OAAO,OAAOP,KAAK,CAACS,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG;AAC5C;AAEA,SAASC,UAAUA,CAACC,MAAc,EAAU;EAC1C,OAAOC,QAAQ,CAACD,MAAM,CAACT,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,EAAE,EAAE,CAAC;AAClD;AAEA,SAASW,GAAGA,CAACC,CAAS,EAAEV,CAAS,EAAEW,CAAS,EAAU;EACpD,OAAO,OAAOD,CAAC,KAAKV,CAAC,MAAMW,CAAC,IAAI;AAClC;;AAEA;AACO,SAASC,UAAUA,CAACC,QAAsB,EAAEC,QAA0B,EAAEC,UAAmB,GAAG,KAAK,EAAS;EACjH,MAAMC,MAAM,GAAGF,QAAQ,KAAK,MAAM;EAElC,IAAIG,WAAoC;EAExC,IAAIF,UAAU,IAAIG,qBAAQ,CAACC,EAAE,KAAK,KAAK,EAAE;IACvC,MAAMC,QAAQ,GAAG,IAAAC,iCAAiB,EAAC,CAAC;IACpC,IAAID,QAAQ,EAAE;MACZH,WAAW,GAAGG,QAAQ;IACxB;EACF;EAEA,IAAI,CAACH,WAAW,EAAE;IAChB,MAAMK,MAAM,GAAGC,+BAAiB,CAACV,QAAQ,CAAC;IAC1C,MAAMW,IAAI,GAAGV,QAAQ,KAAK,OAAO,GAAGQ,MAAM,CAACG,KAAK,GAAGH,MAAM,CAACI,IAAI;IAC9D,MAAMC,UAAU,GAAGrB,UAAU,CAACkB,IAAI,CAAC,WAAW,CAAC,IAAI,SAAS,CAAC;IAC7D,MAAMI,cAAc,GAAGtB,UAAU,CAACkB,IAAI,CAAC,eAAe,CAAC,IAAI,SAAS,CAAC;IAErE,MAAMK,OAAO,GAAGlC,WAAW,CAAC6B,IAAI,CAAC,WAAW,CAAC,IAAI,SAAS,CAAC;IAC3D,MAAMM,UAAU,GAAGnC,WAAW,CAAC6B,IAAI,CAAC,cAAc,CAAC,IAAI,SAAS,CAAC;IACjE,MAAMO,eAAe,GAAGpC,WAAW,CAAC6B,IAAI,CAAC,oBAAoB,CAAC,IAAI,UAAU,CAAC;IAE7E,MAAMQ,YAAY,GAAGrC,WAAW,CAAC6B,IAAI,CAAC,WAAW,CAAC,IAAI,UAAU,CAAC;IAEjEP,WAAW,GAAG;MACZa,UAAU;MACVG,mBAAmB,EAAEJ,OAAO;MAC5BK,kBAAkB,EAAEvC,WAAW,CAAC6B,IAAI,CAAC,SAAS,CAAC,IAAI,SAAS,CAAC;MAE7DW,IAAI,EAAExC,WAAW,CAAC6B,IAAI,CAAC,cAAc,CAAC,IAAI,WAAW,CAAC;MACtDY,aAAa,EAAEL,eAAe;MAC9BM,YAAY,EAAEN,eAAe;MAE7BO,MAAM,EAAE3C,WAAW,CAAC6B,IAAI,CAAC,UAAU,CAAC,IAAI,UAAU,CAAC;MACnDe,WAAW,EAAE5C,WAAW,CAAC6B,IAAI,CAAC,SAAS,CAAC,IAAI,UAAU,CAAC;MAEvDgB,OAAO,EAAER,YAAY;MACrBS,YAAY,EAAEZ,OAAO;MACrBa,WAAW,EAAEZ,UAAU;MAEvBa,SAAS,EAAEX,YAAY;MAEvBY,IAAI,EAAEZ,YAAY;MAClBa,IAAI,EAAEd,eAAe;MACrBe,UAAU,EAAEd,YAAY;MAExBe,OAAO,EAAE,SAAS;MAClBC,KAAK,EAAE,SAAS;MAChBC,OAAO,EAAE,SAAS;MAClBC,IAAI,EAAE,SAAS;MAEfC,aAAa,EAAEnC,MAAM,GAAGP,GAAG,CAACkB,UAAU,EAAE,EAAE,EAAE,EAAE,CAAC,GAAGlB,GAAG,CAACkB,UAAU,EAAE,EAAE,EAAE,EAAE,CAAC;MACzEyB,uBAAuB,EAAEpC,MAAM,GAAGP,GAAG,CAACkB,UAAU,EAAE,EAAE,EAAE,EAAE,CAAC,GAAGlB,GAAG,CAACkB,UAAU,EAAE,EAAE,EAAE,EAAE,CAAC;MACnF0B,QAAQ,EAAE5C,GAAG,CAACmB,cAAc,EAAE,EAAE,EAAE,EAAE,CAAC;MACrC0B,kBAAkB,EAAE,SAAS;MAC7BC,cAAc,EAAEvC,MAAM,GAAGP,GAAG,CAACmB,cAAc,EAAE,EAAE,EAAE,EAAE,CAAC,GAAGnB,GAAG,CAACmB,cAAc,EAAE,EAAE,EAAE,EAAE,CAAC;MAClF4B,wBAAwB,EAAExC,MAAM,GAAGP,GAAG,CAACmB,cAAc,EAAE,EAAE,EAAE,EAAE,CAAC,GAAGnB,GAAG,CAACmB,cAAc,EAAE,EAAE,EAAE,EAAE,CAAC;MAC5F6B,UAAU,EAAEzC,MAAM,GAAGP,GAAG,CAACkB,UAAU,EAAE,EAAE,EAAE,EAAE,CAAC,GAAGlB,GAAG,CAACkB,UAAU,EAAE,EAAE,EAAE,EAAE,CAAC;MAEtE+B,IAAI,EAAE7B,OAAO;MACb8B,MAAM,EAAE3C,MAAM,GAAG,oBAAoB,GAAG,oBAAoB;MAC5D4C,OAAO,EAAE;IACX,CAAC;EACH;EAEA,OAAO;IACLC,IAAI,EAAE/C,QAAQ;IACdgD,MAAM,EAAE7C,WAAW;IACnBD,MAAM;IACN+C,OAAO,EAAE,CAAC/C;EACZ,CAAC;AACH;AAUO,MAAMgD,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,gBAAG,IAAAE,oBAAa,EAAgC,IAAI,CAAC;AAsB5E,SAASC,kBAAkBA,CAAC;EACjCN,IAAI,EAAEO,cAAc;EACpBC,WAAW,EAAEC,gBAAgB;EAC7BC,YAAY;EACZC,mBAAmB;EACnBC,KAAK,GAAG,IAAI;EACZC,cAAc;EACdC;AACuB,CAAC,EAAE;EAC1B,MAAMC,QAAQ,GAAG,IAAAC,2BAAgB,EAAC,CAAC;EACnC,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAG,IAAAC,eAAQ,EAAeV,gBAAgB,IAAI,KAAK,CAAC;EAE7F,IAAIA,gBAAgB,KAAKW,SAAS,IAAIX,gBAAgB,KAAKQ,cAAc,EAAE;IACzEC,iBAAiB,CAACT,gBAAgB,CAAC;EACrC;EAEA,MAAMzD,QAAQ,GAAGiE,cAAc;EAC/B,MAAMjB,IAAI,GAAGO,cAAc,IAAI,QAAQ;EAEvC,MAAMrD,UAAU,GAAG8C,IAAI,KAAK,UAAU;EACtC,MAAMqB,aAAa,GAAGnE,UAAU,GAAG,QAAQ,GAAG8C,IAAI;EAClD,MAAM/C,QAA0B,GAC9BoE,aAAa,KAAK,QAAQ,GACrBN,QAAQ,KAAK,MAAM,GAAG,MAAM,GAAG,OAAO,GACvCM,aAAa;;EAEnB;EACA;EACA;EACA;EACA,MAAMC,WAAW,GAAG,IAAAC,aAAM,EAAS,EAAE,CAAC;EACtC,MAAMC,QAAQ,GAAG,GAAGvE,QAAQ,IAAID,QAAQ,EAAE;EAC1C,IAAIsE,WAAW,CAACG,OAAO,KAAKD,QAAQ,EAAE;IACpCF,WAAW,CAACG,OAAO,GAAGD,QAAQ;IAC9B,IAAAE,sCAAkB,EAACL,aAAa,CAAC;IACjC,IAAAM,8BAAc,EAAC1E,QAAQ,CAAC;IACxB,IAAA2E,oCAAoB,EAAC5E,QAAQ,EAAEC,QAAQ,CAAC;EAC1C;EAEA,MAAM4E,OAAO,GAAG,IAAAC,kBAAW,EACxBC,OAAkB,IAAK;IACtB,IAAAL,sCAAkB,EAACK,OAAO,CAAC;IAC3BrB,YAAY,GAAGqB,OAAO,CAAC;EACzB,CAAC,EACD,CAACrB,YAAY,CACf,CAAC;EAED,MAAMsB,cAAc,GAAG,IAAAF,kBAAW,EAC/BrE,MAAoB,IAAK;IACxByD,iBAAiB,CAACzD,MAAM,CAAC;IACzBkD,mBAAmB,GAAGlD,MAAM,CAAC;EAC/B,CAAC,EACD,CAACkD,mBAAmB,CACtB,CAAC;EAED,MAAMsB,YAAY,GAAG,IAAAC,cAAO,EAAyB,MAAM;IACzD,MAAMC,KAAK,GAAGpF,UAAU,CAACC,QAAQ,EAAEC,QAAQ,EAAEC,UAAU,CAAC;IACxD,OAAO;MAAEiF,KAAK;MAAEnC,IAAI;MAAEQ,WAAW,EAAExD,QAAQ;MAAE6E,OAAO;MAAEG;IAAe,CAAC;EACxE,CAAC,EAAE,CAAC/E,QAAQ,EAAED,QAAQ,EAAEE,UAAU,EAAE8C,IAAI,EAAE6B,OAAO,EAAEG,cAAc,CAAC,CAAC;EAEnE,oBACE,IAAAtH,WAAA,CAAA0H,GAAA,EAACjC,iBAAiB,CAACkC,QAAQ;IAACtG,KAAK,EAAEkG,YAAa;IAAAnB,QAAA,eAC9C,IAAApG,WAAA,CAAA0H,GAAA,EAAC3H,WAAA,CAAA6H,UAAU;MAACC,OAAO,EAAE3B,KAAM;MAAC4B,QAAQ,EAAE3B,cAAe;MAAAC,QAAA,EAClDA;IAAQ,CACC;EAAC,CACa,CAAC;AAEjC;;AAEA;AACA;AACA;AACA;;AAMO,SAAS2B,eAAeA,CAAC;EAAEjC,WAAW;EAAEM;AAA+B,CAAC,EAAE;EAC/E,MAAM4B,MAAM,GAAG,IAAAC,iBAAU,EAACxC,iBAAiB,CAAC;EAC5C,IAAI,CAACuC,MAAM,EAAE;IACX,MAAM,IAAIE,KAAK,CAAC,4DAA4D,CAAC;EAC/E;EAEA,MAAMX,YAAY,GAAG,IAAAC,cAAO,EAAyB,MAAM;IACzD,MAAMC,KAAK,GAAGpF,UAAU,CAACyD,WAAW,EAAEkC,MAAM,CAACP,KAAK,CAACnC,IAAwB,CAAC;IAC5E,OAAO;MACL,GAAG0C,MAAM;MACTP,KAAK;MACL3B;IACF,CAAC;EACH,CAAC,EAAE,CAACA,WAAW,EAAEkC,MAAM,CAAC,CAAC;EAEzB,oBACE,IAAAhI,WAAA,CAAA0H,GAAA,EAACjC,iBAAiB,CAACkC,QAAQ;IAACtG,KAAK,EAAEkG,YAAa;IAAAnB,QAAA,EAC7CA;EAAQ,CACiB,CAAC;AAEjC","ignoreList":[]}
|
|
@@ -51,6 +51,12 @@ Object.defineProperty(exports, "hexToAppColorName", {
|
|
|
51
51
|
return _colorPresets.hexToAppColorName;
|
|
52
52
|
}
|
|
53
53
|
});
|
|
54
|
+
Object.defineProperty(exports, "initCssInteropDarkMode", {
|
|
55
|
+
enumerable: true,
|
|
56
|
+
get: function () {
|
|
57
|
+
return _initCssInterop.initCssInteropDarkMode;
|
|
58
|
+
}
|
|
59
|
+
});
|
|
54
60
|
Object.defineProperty(exports, "setColorSchemeSafe", {
|
|
55
61
|
enumerable: true,
|
|
56
62
|
get: function () {
|
|
@@ -80,4 +86,5 @@ var _useTheme = require("./use-theme.js");
|
|
|
80
86
|
var _colorPresets = require("./color-presets.js");
|
|
81
87
|
var _applyDarkClass = require("./apply-dark-class.js");
|
|
82
88
|
var _setColorSchemeSafe = require("./set-color-scheme-safe.js");
|
|
89
|
+
var _initCssInterop = require("./init-css-interop.js");
|
|
83
90
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_BloomThemeProvider","require","_useTheme","_colorPresets","_applyDarkClass","_setColorSchemeSafe"],"sourceRoot":"../../../src","sources":["theme/index.ts"],"mappings":"
|
|
1
|
+
{"version":3,"names":["_BloomThemeProvider","require","_useTheme","_colorPresets","_applyDarkClass","_setColorSchemeSafe","_initCssInterop"],"sourceRoot":"../../../src","sources":["theme/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,mBAAA,GAAAC,OAAA;AAEA,IAAAC,SAAA,GAAAD,OAAA;AAGA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AACA,IAAAI,mBAAA,GAAAJ,OAAA;AACA,IAAAK,eAAA,GAAAL,OAAA","ignoreList":[]}
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.initCssInteropDarkMode = initCssInteropDarkMode;
|
|
7
|
+
var _reactNative = require("react-native");
|
|
8
|
+
/**
|
|
9
|
+
* Initialize react-native-css-interop's `darkMode` flag to `'class'` once at
|
|
10
|
+
* module load time so that downstream calls to its color-scheme machinery do
|
|
11
|
+
* not throw.
|
|
12
|
+
*
|
|
13
|
+
* Why this exists
|
|
14
|
+
* ---------------
|
|
15
|
+
* Bloom toggles a `dark` class on `<html>` (see `applyDarkClass`). When the
|
|
16
|
+
* consuming app ships `react-native-css-interop` (directly or via NativeWind),
|
|
17
|
+
* its web runtime installs a MutationObserver on `<head>` that watches for
|
|
18
|
+
* the NativeWind-generated CSS to be injected. Once that CSS lands, the
|
|
19
|
+
* observer reads the `--css-interop-darkMode` CSS variable and calls
|
|
20
|
+
* `colorScheme.set(...)`. If the active value is `'media'` (the Tailwind
|
|
21
|
+
* default when `darkMode` is unset), `colorScheme.set` throws:
|
|
22
|
+
*
|
|
23
|
+
* "Cannot manually set color scheme, as dark mode is type 'media'.
|
|
24
|
+
* Please use StyleSheet.setFlag('darkMode', 'class')"
|
|
25
|
+
*
|
|
26
|
+
* Bloom is class-driven by design — `applyDarkClass` toggles `<html>.dark` —
|
|
27
|
+
* so we need to force the flag to `'class'` before that observer fires.
|
|
28
|
+
*
|
|
29
|
+
* How it works
|
|
30
|
+
* ------------
|
|
31
|
+
* - On web we set the documented `--css-interop-darkMode` CSS custom property
|
|
32
|
+
* on `documentElement`. This is exactly what NativeWind's Tailwind plugin
|
|
33
|
+
* writes when its config is `darkMode: 'class'`, so we are replicating the
|
|
34
|
+
* public contract — not poking internals.
|
|
35
|
+
* - We additionally try to call `StyleSheet.setFlag('darkMode', 'class')`
|
|
36
|
+
* off of `react-native-css-interop`'s exported `StyleSheet`. The function
|
|
37
|
+
* does not exist in current `react-native-css-interop` (≤0.2.4), but the
|
|
38
|
+
* error message advertises it and future versions are likely to add it.
|
|
39
|
+
* Calling it is forward-compatible; missing-function is a no-op.
|
|
40
|
+
*
|
|
41
|
+
* The whole routine is idempotent and runs exactly once per process via
|
|
42
|
+
* a module-scoped guard.
|
|
43
|
+
*/
|
|
44
|
+
|
|
45
|
+
let initialized = false;
|
|
46
|
+
let warned = false;
|
|
47
|
+
const CSS_VAR_NAME = '--css-interop-darkMode';
|
|
48
|
+
const CSS_VAR_VALUE = 'class dark';
|
|
49
|
+
function warnOnce(message, error) {
|
|
50
|
+
if (warned) return;
|
|
51
|
+
warned = true;
|
|
52
|
+
// Internal Bloom diagnostic. Consumers cannot react to this — it signals
|
|
53
|
+
// a possible compatibility issue between Bloom and the host's css-interop.
|
|
54
|
+
// eslint-disable-next-line no-console
|
|
55
|
+
console.warn(`[Bloom] ${message}`, error ?? '');
|
|
56
|
+
}
|
|
57
|
+
function setWebCssVariable() {
|
|
58
|
+
if (typeof document === 'undefined') return;
|
|
59
|
+
const root = document.documentElement;
|
|
60
|
+
if (!root) return;
|
|
61
|
+
// Only set if not already explicitly configured by the host (e.g. the host's
|
|
62
|
+
// Tailwind config already emitted this variable). Avoid clobbering an
|
|
63
|
+
// explicit `media` choice from the consumer.
|
|
64
|
+
const current = root.style.getPropertyValue(CSS_VAR_NAME);
|
|
65
|
+
if (current) return;
|
|
66
|
+
root.style.setProperty(CSS_VAR_NAME, CSS_VAR_VALUE);
|
|
67
|
+
}
|
|
68
|
+
function tryCallSetFlag() {
|
|
69
|
+
let mod;
|
|
70
|
+
try {
|
|
71
|
+
// Dynamic require: css-interop is not a Bloom dependency. If the host
|
|
72
|
+
// app ships it (via NativeWind or directly), this resolves. Otherwise
|
|
73
|
+
// the require throws and we silently move on — there is nothing to
|
|
74
|
+
// initialize because css-interop is not in the bundle.
|
|
75
|
+
// eslint-disable-next-line @typescript-eslint/no-require-imports
|
|
76
|
+
mod = require('react-native-css-interop');
|
|
77
|
+
} catch {
|
|
78
|
+
return;
|
|
79
|
+
}
|
|
80
|
+
const setFlag = mod?.StyleSheet?.setFlag;
|
|
81
|
+
if (typeof setFlag !== 'function') {
|
|
82
|
+
// Current react-native-css-interop (≤0.2.4) does not expose `setFlag`.
|
|
83
|
+
// The CSS variable path above is the actual fix on web; on native the
|
|
84
|
+
// flag is baked in by the Tailwind build. Surface a warning so we
|
|
85
|
+
// notice if a future version adds the method but we miss it.
|
|
86
|
+
return;
|
|
87
|
+
}
|
|
88
|
+
try {
|
|
89
|
+
setFlag.call(mod?.StyleSheet, 'darkMode', 'class');
|
|
90
|
+
} catch (error) {
|
|
91
|
+
warnOnce('react-native-css-interop StyleSheet.setFlag("darkMode", "class") threw. ' + 'Falling back to CSS variable. This is non-fatal.', error);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/**
|
|
96
|
+
* Idempotent initializer. Safe to call from multiple modules; only the first
|
|
97
|
+
* invocation performs work.
|
|
98
|
+
*/
|
|
99
|
+
function initCssInteropDarkMode() {
|
|
100
|
+
if (initialized) return;
|
|
101
|
+
initialized = true;
|
|
102
|
+
if (_reactNative.Platform.OS === 'web') {
|
|
103
|
+
setWebCssVariable();
|
|
104
|
+
}
|
|
105
|
+
tryCallSetFlag();
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
// Run on module import so that the flag is in place before any component
|
|
109
|
+
// code (and, critically, before css-interop's MutationObserver fires on web).
|
|
110
|
+
// useEffect would be too late — observers can fire during initial render.
|
|
111
|
+
initCssInteropDarkMode();
|
|
112
|
+
//# sourceMappingURL=init-css-interop.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_reactNative","require","initialized","warned","CSS_VAR_NAME","CSS_VAR_VALUE","warnOnce","message","error","console","warn","setWebCssVariable","document","root","documentElement","current","style","getPropertyValue","setProperty","tryCallSetFlag","mod","setFlag","StyleSheet","call","initCssInteropDarkMode","Platform","OS"],"sourceRoot":"../../../src","sources":["theme/init-css-interop.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAEA;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,IAAIC,WAAW,GAAG,KAAK;AACvB,IAAIC,MAAM,GAAG,KAAK;AAElB,MAAMC,YAAY,GAAG,wBAAwB;AAC7C,MAAMC,aAAa,GAAG,YAAY;AAUlC,SAASC,QAAQA,CAACC,OAAe,EAAEC,KAAe,EAAQ;EACxD,IAAIL,MAAM,EAAE;EACZA,MAAM,GAAG,IAAI;EACb;EACA;EACA;EACAM,OAAO,CAACC,IAAI,CAAC,WAAWH,OAAO,EAAE,EAAEC,KAAK,IAAI,EAAE,CAAC;AACjD;AAEA,SAASG,iBAAiBA,CAAA,EAAS;EACjC,IAAI,OAAOC,QAAQ,KAAK,WAAW,EAAE;EACrC,MAAMC,IAAI,GAAGD,QAAQ,CAACE,eAAe;EACrC,IAAI,CAACD,IAAI,EAAE;EACX;EACA;EACA;EACA,MAAME,OAAO,GAAGF,IAAI,CAACG,KAAK,CAACC,gBAAgB,CAACb,YAAY,CAAC;EACzD,IAAIW,OAAO,EAAE;EACbF,IAAI,CAACG,KAAK,CAACE,WAAW,CAACd,YAAY,EAAEC,aAAa,CAAC;AACrD;AAEA,SAASc,cAAcA,CAAA,EAAS;EAC9B,IAAIC,GAAiC;EACrC,IAAI;IACF;IACA;IACA;IACA;IACA;IACAA,GAAG,GAAGnB,OAAO,CAAC,0BAA0B,CAAqB;EAC/D,CAAC,CAAC,MAAM;IACN;EACF;EAEA,MAAMoB,OAAO,GAAGD,GAAG,EAAEE,UAAU,EAAED,OAAO;EACxC,IAAI,OAAOA,OAAO,KAAK,UAAU,EAAE;IACjC;IACA;IACA;IACA;IACA;EACF;EAEA,IAAI;IACFA,OAAO,CAACE,IAAI,CAACH,GAAG,EAAEE,UAAU,EAAE,UAAU,EAAE,OAAO,CAAC;EACpD,CAAC,CAAC,OAAOd,KAAK,EAAE;IACdF,QAAQ,CACN,0EAA0E,GACxE,kDAAkD,EACpDE,KACF,CAAC;EACH;AACF;;AAEA;AACA;AACA;AACA;AACO,SAASgB,sBAAsBA,CAAA,EAAS;EAC7C,IAAItB,WAAW,EAAE;EACjBA,WAAW,GAAG,IAAI;EAElB,IAAIuB,qBAAQ,CAACC,EAAE,KAAK,KAAK,EAAE;IACzBf,iBAAiB,CAAC,CAAC;EACrB;EAEAQ,cAAc,CAAC,CAAC;AAClB;;AAEA;AACA;AACA;AACAK,sBAAsB,CAAC,CAAC","ignoreList":[]}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
// Side-effect import — must come first. Initializes react-native-css-interop's
|
|
4
|
+
// `darkMode` flag to `'class'` at module load so its MutationObserver doesn't
|
|
5
|
+
// throw "Cannot manually set color scheme, as dark mode is type 'media'" the
|
|
6
|
+
// first time Bloom toggles the dark class on <html>. See ./init-css-interop.
|
|
7
|
+
import "./init-css-interop.js";
|
|
3
8
|
import React, { createContext, useCallback, useContext, useMemo, useRef, useState } from 'react';
|
|
4
9
|
import { useColorScheme as useRNColorScheme, Platform } from 'react-native';
|
|
5
10
|
import { APP_COLOR_PRESETS } from "./color-presets.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","createContext","useCallback","useContext","useMemo","useRef","useState","useColorScheme","useRNColorScheme","Platform","APP_COLOR_PRESETS","getAdaptiveColors","applyDarkClass","applyColorPresetVars","setColorSchemeSafe","FontLoader","jsx","_jsx","hslVarToCSS","value","parts","split","map","s","trim","length","alpha","parseFloat","replace","extractHue","hslVar","parseInt","hsl","h","l","buildTheme","appColor","resolved","isAdaptive","isDark","themeColors","OS","adaptive","preset","vars","light","dark","primaryHue","destructiveHue","surface","background","mutedForeground","primaryColor","backgroundSecondary","backgroundTertiary","text","textSecondary","textTertiary","border","borderLight","primary","primaryLight","primaryDark","secondary","tint","icon","iconActive","success","error","warning","info","primarySubtle","primarySubtleForeground","negative","negativeForeground","negativeSubtle","negativeSubtleForeground","contrast50","card","shadow","overlay","mode","colors","isLight","BloomThemeContext","BloomThemeProvider","controlledMode","colorPreset","controlledPreset","onModeChange","onColorPresetChange","fonts","onFontsLoading","children","rnScheme","internalPreset","setInternalPreset","undefined","effectiveMode","lastApplied","applyKey","current","setMode","newMode","setColorPreset","contextValue","theme","Provider","enabled","fallback","BloomColorScope","parent","Error"],"sourceRoot":"../../../src","sources":["theme/BloomThemeProvider.tsx"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["React","createContext","useCallback","useContext","useMemo","useRef","useState","useColorScheme","useRNColorScheme","Platform","APP_COLOR_PRESETS","getAdaptiveColors","applyDarkClass","applyColorPresetVars","setColorSchemeSafe","FontLoader","jsx","_jsx","hslVarToCSS","value","parts","split","map","s","trim","length","alpha","parseFloat","replace","extractHue","hslVar","parseInt","hsl","h","l","buildTheme","appColor","resolved","isAdaptive","isDark","themeColors","OS","adaptive","preset","vars","light","dark","primaryHue","destructiveHue","surface","background","mutedForeground","primaryColor","backgroundSecondary","backgroundTertiary","text","textSecondary","textTertiary","border","borderLight","primary","primaryLight","primaryDark","secondary","tint","icon","iconActive","success","error","warning","info","primarySubtle","primarySubtleForeground","negative","negativeForeground","negativeSubtle","negativeSubtleForeground","contrast50","card","shadow","overlay","mode","colors","isLight","BloomThemeContext","BloomThemeProvider","controlledMode","colorPreset","controlledPreset","onModeChange","onColorPresetChange","fonts","onFontsLoading","children","rnScheme","internalPreset","setInternalPreset","undefined","effectiveMode","lastApplied","applyKey","current","setMode","newMode","setColorPreset","contextValue","theme","Provider","enabled","fallback","BloomColorScope","parent","Error"],"sourceRoot":"../../../src","sources":["theme/BloomThemeProvider.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -5,4 +5,5 @@ export { useTheme, useThemeColor, useBloomTheme } from "./use-theme.js";
|
|
|
5
5
|
export { APP_COLOR_NAMES, APP_COLOR_PRESETS, HEX_TO_APP_COLOR, hexToAppColorName } from "./color-presets.js";
|
|
6
6
|
export { applyDarkClass } from "./apply-dark-class.js";
|
|
7
7
|
export { setColorSchemeSafe } from "./set-color-scheme-safe.js";
|
|
8
|
+
export { initCssInteropDarkMode } from "./init-css-interop.js";
|
|
8
9
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["BloomThemeProvider","BloomColorScope","buildTheme","useTheme","useThemeColor","useBloomTheme","APP_COLOR_NAMES","APP_COLOR_PRESETS","HEX_TO_APP_COLOR","hexToAppColorName","applyDarkClass","setColorSchemeSafe"],"sourceRoot":"../../../src","sources":["theme/index.ts"],"mappings":";;AAAA,SAASA,kBAAkB,EAAEC,eAAe,EAAEC,UAAU,QAAQ,yBAAsB;AAEtF,SAASC,QAAQ,EAAEC,aAAa,EAAEC,aAAa,QAAQ,gBAAa;AAGpE,SAASC,eAAe,EAAEC,iBAAiB,EAAEC,gBAAgB,EAAEC,iBAAiB,QAAQ,oBAAiB;AACzG,SAASC,cAAc,QAAQ,uBAAoB;AACnD,SAASC,kBAAkB,QAAQ,4BAAyB","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["BloomThemeProvider","BloomColorScope","buildTheme","useTheme","useThemeColor","useBloomTheme","APP_COLOR_NAMES","APP_COLOR_PRESETS","HEX_TO_APP_COLOR","hexToAppColorName","applyDarkClass","setColorSchemeSafe","initCssInteropDarkMode"],"sourceRoot":"../../../src","sources":["theme/index.ts"],"mappings":";;AAAA,SAASA,kBAAkB,EAAEC,eAAe,EAAEC,UAAU,QAAQ,yBAAsB;AAEtF,SAASC,QAAQ,EAAEC,aAAa,EAAEC,aAAa,QAAQ,gBAAa;AAGpE,SAASC,eAAe,EAAEC,iBAAiB,EAAEC,gBAAgB,EAAEC,iBAAiB,QAAQ,oBAAiB;AACzG,SAASC,cAAc,QAAQ,uBAAoB;AACnD,SAASC,kBAAkB,QAAQ,4BAAyB;AAC5D,SAASC,sBAAsB,QAAQ,uBAAoB","ignoreList":[]}
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { Platform } from 'react-native';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Initialize react-native-css-interop's `darkMode` flag to `'class'` once at
|
|
7
|
+
* module load time so that downstream calls to its color-scheme machinery do
|
|
8
|
+
* not throw.
|
|
9
|
+
*
|
|
10
|
+
* Why this exists
|
|
11
|
+
* ---------------
|
|
12
|
+
* Bloom toggles a `dark` class on `<html>` (see `applyDarkClass`). When the
|
|
13
|
+
* consuming app ships `react-native-css-interop` (directly or via NativeWind),
|
|
14
|
+
* its web runtime installs a MutationObserver on `<head>` that watches for
|
|
15
|
+
* the NativeWind-generated CSS to be injected. Once that CSS lands, the
|
|
16
|
+
* observer reads the `--css-interop-darkMode` CSS variable and calls
|
|
17
|
+
* `colorScheme.set(...)`. If the active value is `'media'` (the Tailwind
|
|
18
|
+
* default when `darkMode` is unset), `colorScheme.set` throws:
|
|
19
|
+
*
|
|
20
|
+
* "Cannot manually set color scheme, as dark mode is type 'media'.
|
|
21
|
+
* Please use StyleSheet.setFlag('darkMode', 'class')"
|
|
22
|
+
*
|
|
23
|
+
* Bloom is class-driven by design — `applyDarkClass` toggles `<html>.dark` —
|
|
24
|
+
* so we need to force the flag to `'class'` before that observer fires.
|
|
25
|
+
*
|
|
26
|
+
* How it works
|
|
27
|
+
* ------------
|
|
28
|
+
* - On web we set the documented `--css-interop-darkMode` CSS custom property
|
|
29
|
+
* on `documentElement`. This is exactly what NativeWind's Tailwind plugin
|
|
30
|
+
* writes when its config is `darkMode: 'class'`, so we are replicating the
|
|
31
|
+
* public contract — not poking internals.
|
|
32
|
+
* - We additionally try to call `StyleSheet.setFlag('darkMode', 'class')`
|
|
33
|
+
* off of `react-native-css-interop`'s exported `StyleSheet`. The function
|
|
34
|
+
* does not exist in current `react-native-css-interop` (≤0.2.4), but the
|
|
35
|
+
* error message advertises it and future versions are likely to add it.
|
|
36
|
+
* Calling it is forward-compatible; missing-function is a no-op.
|
|
37
|
+
*
|
|
38
|
+
* The whole routine is idempotent and runs exactly once per process via
|
|
39
|
+
* a module-scoped guard.
|
|
40
|
+
*/
|
|
41
|
+
|
|
42
|
+
let initialized = false;
|
|
43
|
+
let warned = false;
|
|
44
|
+
const CSS_VAR_NAME = '--css-interop-darkMode';
|
|
45
|
+
const CSS_VAR_VALUE = 'class dark';
|
|
46
|
+
function warnOnce(message, error) {
|
|
47
|
+
if (warned) return;
|
|
48
|
+
warned = true;
|
|
49
|
+
// Internal Bloom diagnostic. Consumers cannot react to this — it signals
|
|
50
|
+
// a possible compatibility issue between Bloom and the host's css-interop.
|
|
51
|
+
// eslint-disable-next-line no-console
|
|
52
|
+
console.warn(`[Bloom] ${message}`, error ?? '');
|
|
53
|
+
}
|
|
54
|
+
function setWebCssVariable() {
|
|
55
|
+
if (typeof document === 'undefined') return;
|
|
56
|
+
const root = document.documentElement;
|
|
57
|
+
if (!root) return;
|
|
58
|
+
// Only set if not already explicitly configured by the host (e.g. the host's
|
|
59
|
+
// Tailwind config already emitted this variable). Avoid clobbering an
|
|
60
|
+
// explicit `media` choice from the consumer.
|
|
61
|
+
const current = root.style.getPropertyValue(CSS_VAR_NAME);
|
|
62
|
+
if (current) return;
|
|
63
|
+
root.style.setProperty(CSS_VAR_NAME, CSS_VAR_VALUE);
|
|
64
|
+
}
|
|
65
|
+
function tryCallSetFlag() {
|
|
66
|
+
let mod;
|
|
67
|
+
try {
|
|
68
|
+
// Dynamic require: css-interop is not a Bloom dependency. If the host
|
|
69
|
+
// app ships it (via NativeWind or directly), this resolves. Otherwise
|
|
70
|
+
// the require throws and we silently move on — there is nothing to
|
|
71
|
+
// initialize because css-interop is not in the bundle.
|
|
72
|
+
// eslint-disable-next-line @typescript-eslint/no-require-imports
|
|
73
|
+
mod = require('react-native-css-interop');
|
|
74
|
+
} catch {
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
77
|
+
const setFlag = mod?.StyleSheet?.setFlag;
|
|
78
|
+
if (typeof setFlag !== 'function') {
|
|
79
|
+
// Current react-native-css-interop (≤0.2.4) does not expose `setFlag`.
|
|
80
|
+
// The CSS variable path above is the actual fix on web; on native the
|
|
81
|
+
// flag is baked in by the Tailwind build. Surface a warning so we
|
|
82
|
+
// notice if a future version adds the method but we miss it.
|
|
83
|
+
return;
|
|
84
|
+
}
|
|
85
|
+
try {
|
|
86
|
+
setFlag.call(mod?.StyleSheet, 'darkMode', 'class');
|
|
87
|
+
} catch (error) {
|
|
88
|
+
warnOnce('react-native-css-interop StyleSheet.setFlag("darkMode", "class") threw. ' + 'Falling back to CSS variable. This is non-fatal.', error);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/**
|
|
93
|
+
* Idempotent initializer. Safe to call from multiple modules; only the first
|
|
94
|
+
* invocation performs work.
|
|
95
|
+
*/
|
|
96
|
+
export function initCssInteropDarkMode() {
|
|
97
|
+
if (initialized) return;
|
|
98
|
+
initialized = true;
|
|
99
|
+
if (Platform.OS === 'web') {
|
|
100
|
+
setWebCssVariable();
|
|
101
|
+
}
|
|
102
|
+
tryCallSetFlag();
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
// Run on module import so that the flag is in place before any component
|
|
106
|
+
// code (and, critically, before css-interop's MutationObserver fires on web).
|
|
107
|
+
// useEffect would be too late — observers can fire during initial render.
|
|
108
|
+
initCssInteropDarkMode();
|
|
109
|
+
//# sourceMappingURL=init-css-interop.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["Platform","initialized","warned","CSS_VAR_NAME","CSS_VAR_VALUE","warnOnce","message","error","console","warn","setWebCssVariable","document","root","documentElement","current","style","getPropertyValue","setProperty","tryCallSetFlag","mod","require","setFlag","StyleSheet","call","initCssInteropDarkMode","OS"],"sourceRoot":"../../../src","sources":["theme/init-css-interop.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,cAAc;;AAEvC;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,IAAIC,WAAW,GAAG,KAAK;AACvB,IAAIC,MAAM,GAAG,KAAK;AAElB,MAAMC,YAAY,GAAG,wBAAwB;AAC7C,MAAMC,aAAa,GAAG,YAAY;AAUlC,SAASC,QAAQA,CAACC,OAAe,EAAEC,KAAe,EAAQ;EACxD,IAAIL,MAAM,EAAE;EACZA,MAAM,GAAG,IAAI;EACb;EACA;EACA;EACAM,OAAO,CAACC,IAAI,CAAC,WAAWH,OAAO,EAAE,EAAEC,KAAK,IAAI,EAAE,CAAC;AACjD;AAEA,SAASG,iBAAiBA,CAAA,EAAS;EACjC,IAAI,OAAOC,QAAQ,KAAK,WAAW,EAAE;EACrC,MAAMC,IAAI,GAAGD,QAAQ,CAACE,eAAe;EACrC,IAAI,CAACD,IAAI,EAAE;EACX;EACA;EACA;EACA,MAAME,OAAO,GAAGF,IAAI,CAACG,KAAK,CAACC,gBAAgB,CAACb,YAAY,CAAC;EACzD,IAAIW,OAAO,EAAE;EACbF,IAAI,CAACG,KAAK,CAACE,WAAW,CAACd,YAAY,EAAEC,aAAa,CAAC;AACrD;AAEA,SAASc,cAAcA,CAAA,EAAS;EAC9B,IAAIC,GAAiC;EACrC,IAAI;IACF;IACA;IACA;IACA;IACA;IACAA,GAAG,GAAGC,OAAO,CAAC,0BAA0B,CAAqB;EAC/D,CAAC,CAAC,MAAM;IACN;EACF;EAEA,MAAMC,OAAO,GAAGF,GAAG,EAAEG,UAAU,EAAED,OAAO;EACxC,IAAI,OAAOA,OAAO,KAAK,UAAU,EAAE;IACjC;IACA;IACA;IACA;IACA;EACF;EAEA,IAAI;IACFA,OAAO,CAACE,IAAI,CAACJ,GAAG,EAAEG,UAAU,EAAE,UAAU,EAAE,OAAO,CAAC;EACpD,CAAC,CAAC,OAAOf,KAAK,EAAE;IACdF,QAAQ,CACN,0EAA0E,GACxE,kDAAkD,EACpDE,KACF,CAAC;EACH;AACF;;AAEA;AACA;AACA;AACA;AACA,OAAO,SAASiB,sBAAsBA,CAAA,EAAS;EAC7C,IAAIvB,WAAW,EAAE;EACjBA,WAAW,GAAG,IAAI;EAElB,IAAID,QAAQ,CAACyB,EAAE,KAAK,KAAK,EAAE;IACzBf,iBAAiB,CAAC,CAAC;EACrB;EAEAQ,cAAc,CAAC,CAAC;AAClB;;AAEA;AACA;AACA;AACAM,sBAAsB,CAAC,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BloomThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/theme/BloomThemeProvider.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BloomThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/theme/BloomThemeProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,KAA4E,MAAM,OAAO,CAAC;AAEjG,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAKvE,OAAO,KAAK,EAAE,KAAK,EAAe,SAAS,EAAE,MAAM,SAAS,CAAC;AAmB7D,kFAAkF;AAClF,wBAAgB,UAAU,CAAC,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,EAAE,UAAU,GAAE,OAAe,GAAG,KAAK,CAuEjH;AAED,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;CAChD;AAED,eAAO,MAAM,iBAAiB,8CAAqD,CAAC;AAEpF,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IACrD;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EAAE,cAAc,EACpB,WAAW,EAAE,gBAAgB,EAC7B,YAAY,EACZ,mBAAmB,EACnB,KAAY,EACZ,cAAc,EACd,QAAQ,GACT,EAAE,uBAAuB,2CA2DzB;AAED;;;GAGG;AACH,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,YAAY,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,eAAe,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,oBAAoB,2CAoB9E"}
|
|
@@ -6,4 +6,5 @@ export type { AppColorName, AppColorPreset } from './color-presets';
|
|
|
6
6
|
export { APP_COLOR_NAMES, APP_COLOR_PRESETS, HEX_TO_APP_COLOR, hexToAppColorName } from './color-presets';
|
|
7
7
|
export { applyDarkClass } from './apply-dark-class';
|
|
8
8
|
export { setColorSchemeSafe } from './set-color-scheme-safe';
|
|
9
|
+
export { initCssInteropDarkMode } from './init-css-interop';
|
|
9
10
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACvF,YAAY,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAClH,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACrE,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC7D,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAC1G,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACvF,YAAY,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAClH,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACrE,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC7D,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAC1G,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"init-css-interop.d.ts","sourceRoot":"","sources":["../../../../src/theme/init-css-interop.ts"],"names":[],"mappings":"AA2GA;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,IAAI,CAS7C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BloomThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/theme/BloomThemeProvider.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BloomThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/theme/BloomThemeProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,KAA4E,MAAM,OAAO,CAAC;AAEjG,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAKvE,OAAO,KAAK,EAAE,KAAK,EAAe,SAAS,EAAE,MAAM,SAAS,CAAC;AAmB7D,kFAAkF;AAClF,wBAAgB,UAAU,CAAC,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,EAAE,UAAU,GAAE,OAAe,GAAG,KAAK,CAuEjH;AAED,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;CAChD;AAED,eAAO,MAAM,iBAAiB,8CAAqD,CAAC;AAEpF,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IACrD;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EAAE,cAAc,EACpB,WAAW,EAAE,gBAAgB,EAC7B,YAAY,EACZ,mBAAmB,EACnB,KAAY,EACZ,cAAc,EACd,QAAQ,GACT,EAAE,uBAAuB,2CA2DzB;AAED;;;GAGG;AACH,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,YAAY,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,eAAe,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,oBAAoB,2CAoB9E"}
|
|
@@ -6,4 +6,5 @@ export type { AppColorName, AppColorPreset } from './color-presets';
|
|
|
6
6
|
export { APP_COLOR_NAMES, APP_COLOR_PRESETS, HEX_TO_APP_COLOR, hexToAppColorName } from './color-presets';
|
|
7
7
|
export { applyDarkClass } from './apply-dark-class';
|
|
8
8
|
export { setColorSchemeSafe } from './set-color-scheme-safe';
|
|
9
|
+
export { initCssInteropDarkMode } from './init-css-interop';
|
|
9
10
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACvF,YAAY,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAClH,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACrE,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC7D,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAC1G,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACvF,YAAY,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAClH,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACrE,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC7D,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAC1G,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"init-css-interop.d.ts","sourceRoot":"","sources":["../../../../src/theme/init-css-interop.ts"],"names":[],"mappings":"AA2GA;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,IAAI,CAS7C"}
|
package/package.json
CHANGED
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jest-environment jsdom
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
const CSS_VAR_NAME = '--css-interop-darkMode';
|
|
6
|
+
|
|
7
|
+
interface RNMock {
|
|
8
|
+
Platform: { OS: 'ios' | 'android' | 'web' | 'windows' | 'macos' };
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
describe('initCssInteropDarkMode', () => {
|
|
12
|
+
beforeEach(() => {
|
|
13
|
+
jest.resetModules();
|
|
14
|
+
document.documentElement.style.removeProperty(CSS_VAR_NAME);
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
it('sets the --css-interop-darkMode CSS variable on the document root when on web', () => {
|
|
18
|
+
expect(document.documentElement.style.getPropertyValue(CSS_VAR_NAME)).toBe('');
|
|
19
|
+
|
|
20
|
+
jest.isolateModules(() => {
|
|
21
|
+
const rn = require('react-native') as RNMock;
|
|
22
|
+
rn.Platform.OS = 'web';
|
|
23
|
+
// Importing the module triggers the side-effect initializer.
|
|
24
|
+
require('../theme/init-css-interop');
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
expect(document.documentElement.style.getPropertyValue(CSS_VAR_NAME)).toBe('class dark');
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
it('does not clobber an explicit value already set by the host app', () => {
|
|
31
|
+
document.documentElement.style.setProperty(CSS_VAR_NAME, 'media');
|
|
32
|
+
|
|
33
|
+
jest.isolateModules(() => {
|
|
34
|
+
const rn = require('react-native') as RNMock;
|
|
35
|
+
rn.Platform.OS = 'web';
|
|
36
|
+
require('../theme/init-css-interop');
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
expect(document.documentElement.style.getPropertyValue(CSS_VAR_NAME)).toBe('media');
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
it('is idempotent: subsequent calls to initCssInteropDarkMode() do not re-write', () => {
|
|
43
|
+
jest.isolateModules(() => {
|
|
44
|
+
const rn = require('react-native') as RNMock;
|
|
45
|
+
rn.Platform.OS = 'web';
|
|
46
|
+
const { initCssInteropDarkMode } = require('../theme/init-css-interop') as {
|
|
47
|
+
initCssInteropDarkMode: () => void;
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
// First call ran on import. Clear the value to prove the second call
|
|
51
|
+
// is a no-op (does not re-write).
|
|
52
|
+
document.documentElement.style.removeProperty(CSS_VAR_NAME);
|
|
53
|
+
initCssInteropDarkMode();
|
|
54
|
+
|
|
55
|
+
expect(document.documentElement.style.getPropertyValue(CSS_VAR_NAME)).toBe('');
|
|
56
|
+
});
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
it('skips the CSS variable on non-web platforms', () => {
|
|
60
|
+
jest.isolateModules(() => {
|
|
61
|
+
const rn = require('react-native') as RNMock;
|
|
62
|
+
rn.Platform.OS = 'ios';
|
|
63
|
+
require('../theme/init-css-interop');
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
expect(document.documentElement.style.getPropertyValue(CSS_VAR_NAME)).toBe('');
|
|
67
|
+
});
|
|
68
|
+
|
|
69
|
+
it('attempts to call StyleSheet.setFlag when react-native-css-interop exposes it', () => {
|
|
70
|
+
const setFlag = jest.fn();
|
|
71
|
+
|
|
72
|
+
jest.isolateModules(() => {
|
|
73
|
+
const rn = require('react-native') as RNMock;
|
|
74
|
+
rn.Platform.OS = 'web';
|
|
75
|
+
jest.doMock(
|
|
76
|
+
'react-native-css-interop',
|
|
77
|
+
() => ({
|
|
78
|
+
StyleSheet: { setFlag },
|
|
79
|
+
}),
|
|
80
|
+
{ virtual: true },
|
|
81
|
+
);
|
|
82
|
+
|
|
83
|
+
require('../theme/init-css-interop');
|
|
84
|
+
});
|
|
85
|
+
|
|
86
|
+
expect(setFlag).toHaveBeenCalledTimes(1);
|
|
87
|
+
expect(setFlag).toHaveBeenCalledWith('darkMode', 'class');
|
|
88
|
+
});
|
|
89
|
+
|
|
90
|
+
it('tolerates react-native-css-interop being absent (not a Bloom dep)', () => {
|
|
91
|
+
jest.isolateModules(() => {
|
|
92
|
+
const rn = require('react-native') as RNMock;
|
|
93
|
+
rn.Platform.OS = 'web';
|
|
94
|
+
jest.doMock(
|
|
95
|
+
'react-native-css-interop',
|
|
96
|
+
() => {
|
|
97
|
+
throw new Error('Cannot find module');
|
|
98
|
+
},
|
|
99
|
+
{ virtual: true },
|
|
100
|
+
);
|
|
101
|
+
|
|
102
|
+
expect(() => require('../theme/init-css-interop')).not.toThrow();
|
|
103
|
+
});
|
|
104
|
+
});
|
|
105
|
+
|
|
106
|
+
it('does not throw if setFlag itself throws — warns instead', () => {
|
|
107
|
+
const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
|
|
108
|
+
const setFlag = jest.fn(() => {
|
|
109
|
+
throw new Error('setFlag boom');
|
|
110
|
+
});
|
|
111
|
+
|
|
112
|
+
jest.isolateModules(() => {
|
|
113
|
+
const rn = require('react-native') as RNMock;
|
|
114
|
+
rn.Platform.OS = 'web';
|
|
115
|
+
jest.doMock(
|
|
116
|
+
'react-native-css-interop',
|
|
117
|
+
() => ({
|
|
118
|
+
StyleSheet: { setFlag },
|
|
119
|
+
}),
|
|
120
|
+
{ virtual: true },
|
|
121
|
+
);
|
|
122
|
+
|
|
123
|
+
expect(() => require('../theme/init-css-interop')).not.toThrow();
|
|
124
|
+
});
|
|
125
|
+
|
|
126
|
+
expect(setFlag).toHaveBeenCalled();
|
|
127
|
+
expect(warnSpy).toHaveBeenCalled();
|
|
128
|
+
warnSpy.mockRestore();
|
|
129
|
+
});
|
|
130
|
+
});
|
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
// Side-effect import — must come first. Initializes react-native-css-interop's
|
|
2
|
+
// `darkMode` flag to `'class'` at module load so its MutationObserver doesn't
|
|
3
|
+
// throw "Cannot manually set color scheme, as dark mode is type 'media'" the
|
|
4
|
+
// first time Bloom toggles the dark class on <html>. See ./init-css-interop.
|
|
5
|
+
import './init-css-interop';
|
|
1
6
|
import React, { createContext, useCallback, useContext, useMemo, useRef, useState } from 'react';
|
|
2
7
|
import { useColorScheme as useRNColorScheme, Platform } from 'react-native';
|
|
3
8
|
import { APP_COLOR_PRESETS, type AppColorName } from './color-presets';
|
package/src/theme/index.ts
CHANGED
|
@@ -6,3 +6,4 @@ export type { AppColorName, AppColorPreset } from './color-presets';
|
|
|
6
6
|
export { APP_COLOR_NAMES, APP_COLOR_PRESETS, HEX_TO_APP_COLOR, hexToAppColorName } from './color-presets';
|
|
7
7
|
export { applyDarkClass } from './apply-dark-class';
|
|
8
8
|
export { setColorSchemeSafe } from './set-color-scheme-safe';
|
|
9
|
+
export { initCssInteropDarkMode } from './init-css-interop';
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import { Platform } from 'react-native';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Initialize react-native-css-interop's `darkMode` flag to `'class'` once at
|
|
5
|
+
* module load time so that downstream calls to its color-scheme machinery do
|
|
6
|
+
* not throw.
|
|
7
|
+
*
|
|
8
|
+
* Why this exists
|
|
9
|
+
* ---------------
|
|
10
|
+
* Bloom toggles a `dark` class on `<html>` (see `applyDarkClass`). When the
|
|
11
|
+
* consuming app ships `react-native-css-interop` (directly or via NativeWind),
|
|
12
|
+
* its web runtime installs a MutationObserver on `<head>` that watches for
|
|
13
|
+
* the NativeWind-generated CSS to be injected. Once that CSS lands, the
|
|
14
|
+
* observer reads the `--css-interop-darkMode` CSS variable and calls
|
|
15
|
+
* `colorScheme.set(...)`. If the active value is `'media'` (the Tailwind
|
|
16
|
+
* default when `darkMode` is unset), `colorScheme.set` throws:
|
|
17
|
+
*
|
|
18
|
+
* "Cannot manually set color scheme, as dark mode is type 'media'.
|
|
19
|
+
* Please use StyleSheet.setFlag('darkMode', 'class')"
|
|
20
|
+
*
|
|
21
|
+
* Bloom is class-driven by design — `applyDarkClass` toggles `<html>.dark` —
|
|
22
|
+
* so we need to force the flag to `'class'` before that observer fires.
|
|
23
|
+
*
|
|
24
|
+
* How it works
|
|
25
|
+
* ------------
|
|
26
|
+
* - On web we set the documented `--css-interop-darkMode` CSS custom property
|
|
27
|
+
* on `documentElement`. This is exactly what NativeWind's Tailwind plugin
|
|
28
|
+
* writes when its config is `darkMode: 'class'`, so we are replicating the
|
|
29
|
+
* public contract — not poking internals.
|
|
30
|
+
* - We additionally try to call `StyleSheet.setFlag('darkMode', 'class')`
|
|
31
|
+
* off of `react-native-css-interop`'s exported `StyleSheet`. The function
|
|
32
|
+
* does not exist in current `react-native-css-interop` (≤0.2.4), but the
|
|
33
|
+
* error message advertises it and future versions are likely to add it.
|
|
34
|
+
* Calling it is forward-compatible; missing-function is a no-op.
|
|
35
|
+
*
|
|
36
|
+
* The whole routine is idempotent and runs exactly once per process via
|
|
37
|
+
* a module-scoped guard.
|
|
38
|
+
*/
|
|
39
|
+
|
|
40
|
+
let initialized = false;
|
|
41
|
+
let warned = false;
|
|
42
|
+
|
|
43
|
+
const CSS_VAR_NAME = '--css-interop-darkMode';
|
|
44
|
+
const CSS_VAR_VALUE = 'class dark';
|
|
45
|
+
|
|
46
|
+
interface CssInteropStyleSheet {
|
|
47
|
+
setFlag?: (name: string, value: string) => void;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
interface CssInteropModule {
|
|
51
|
+
StyleSheet?: CssInteropStyleSheet;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
function warnOnce(message: string, error?: unknown): void {
|
|
55
|
+
if (warned) return;
|
|
56
|
+
warned = true;
|
|
57
|
+
// Internal Bloom diagnostic. Consumers cannot react to this — it signals
|
|
58
|
+
// a possible compatibility issue between Bloom and the host's css-interop.
|
|
59
|
+
// eslint-disable-next-line no-console
|
|
60
|
+
console.warn(`[Bloom] ${message}`, error ?? '');
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
function setWebCssVariable(): void {
|
|
64
|
+
if (typeof document === 'undefined') return;
|
|
65
|
+
const root = document.documentElement;
|
|
66
|
+
if (!root) return;
|
|
67
|
+
// Only set if not already explicitly configured by the host (e.g. the host's
|
|
68
|
+
// Tailwind config already emitted this variable). Avoid clobbering an
|
|
69
|
+
// explicit `media` choice from the consumer.
|
|
70
|
+
const current = root.style.getPropertyValue(CSS_VAR_NAME);
|
|
71
|
+
if (current) return;
|
|
72
|
+
root.style.setProperty(CSS_VAR_NAME, CSS_VAR_VALUE);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
function tryCallSetFlag(): void {
|
|
76
|
+
let mod: CssInteropModule | undefined;
|
|
77
|
+
try {
|
|
78
|
+
// Dynamic require: css-interop is not a Bloom dependency. If the host
|
|
79
|
+
// app ships it (via NativeWind or directly), this resolves. Otherwise
|
|
80
|
+
// the require throws and we silently move on — there is nothing to
|
|
81
|
+
// initialize because css-interop is not in the bundle.
|
|
82
|
+
// eslint-disable-next-line @typescript-eslint/no-require-imports
|
|
83
|
+
mod = require('react-native-css-interop') as CssInteropModule;
|
|
84
|
+
} catch {
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
const setFlag = mod?.StyleSheet?.setFlag;
|
|
89
|
+
if (typeof setFlag !== 'function') {
|
|
90
|
+
// Current react-native-css-interop (≤0.2.4) does not expose `setFlag`.
|
|
91
|
+
// The CSS variable path above is the actual fix on web; on native the
|
|
92
|
+
// flag is baked in by the Tailwind build. Surface a warning so we
|
|
93
|
+
// notice if a future version adds the method but we miss it.
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
try {
|
|
98
|
+
setFlag.call(mod?.StyleSheet, 'darkMode', 'class');
|
|
99
|
+
} catch (error) {
|
|
100
|
+
warnOnce(
|
|
101
|
+
'react-native-css-interop StyleSheet.setFlag("darkMode", "class") threw. ' +
|
|
102
|
+
'Falling back to CSS variable. This is non-fatal.',
|
|
103
|
+
error,
|
|
104
|
+
);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/**
|
|
109
|
+
* Idempotent initializer. Safe to call from multiple modules; only the first
|
|
110
|
+
* invocation performs work.
|
|
111
|
+
*/
|
|
112
|
+
export function initCssInteropDarkMode(): void {
|
|
113
|
+
if (initialized) return;
|
|
114
|
+
initialized = true;
|
|
115
|
+
|
|
116
|
+
if (Platform.OS === 'web') {
|
|
117
|
+
setWebCssVariable();
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
tryCallSetFlag();
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
// Run on module import so that the flag is in place before any component
|
|
124
|
+
// code (and, critically, before css-interop's MutationObserver fires on web).
|
|
125
|
+
// useEffect would be too late — observers can fire during initial render.
|
|
126
|
+
initCssInteropDarkMode();
|