@oxyhq/bloom 0.8.5 → 0.8.6
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/color-scope/index.web.js +6 -7
- package/lib/commonjs/theme/color-scope/index.web.js.map +1 -1
- package/lib/commonjs/theme/color-scope/style-builder.js +18 -6
- package/lib/commonjs/theme/color-scope/style-builder.js.map +1 -1
- package/lib/module/theme/color-scope/index.web.js +6 -7
- package/lib/module/theme/color-scope/index.web.js.map +1 -1
- package/lib/module/theme/color-scope/style-builder.js +19 -7
- package/lib/module/theme/color-scope/style-builder.js.map +1 -1
- package/lib/typescript/commonjs/theme/color-scope/index.web.d.ts.map +1 -1
- package/lib/typescript/commonjs/theme/color-scope/style-builder.d.ts +7 -5
- package/lib/typescript/commonjs/theme/color-scope/style-builder.d.ts.map +1 -1
- package/lib/typescript/module/theme/color-scope/index.web.d.ts.map +1 -1
- package/lib/typescript/module/theme/color-scope/style-builder.d.ts +7 -5
- package/lib/typescript/module/theme/color-scope/style-builder.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/__tests__/BloomColorScope.test.tsx +12 -4
- package/src/theme/color-scope/index.web.tsx +6 -7
- package/src/theme/color-scope/style-builder.ts +19 -7
|
@@ -8,17 +8,16 @@ exports.useColorScopeStyle = useColorScopeStyle;
|
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _BloomThemeProvider = require("../BloomThemeProvider.js");
|
|
10
10
|
var _buildTheme = require("../build-theme.js");
|
|
11
|
-
var
|
|
11
|
+
var _styleBuilder = require("./style-builder.js");
|
|
12
12
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
13
|
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); }
|
|
14
14
|
/**
|
|
15
|
-
* `
|
|
16
|
-
* `rgb(...)` string
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
* full CSS color with no per-value wrapping needed.
|
|
15
|
+
* `buildScopeVars` returns every canonical token already resolved to an sRGB
|
|
16
|
+
* `rgb(...)` string, plus the `--color-*` aliases consumed by Tailwind v4
|
|
17
|
+
* utilities. Scoped onto an element's inline `style`, profile-level NativeWind
|
|
18
|
+
* classes resolve against the subtree preset instead of the document root.
|
|
20
19
|
*/function buildWebScopeVars(colorPreset, mode) {
|
|
21
|
-
return (0,
|
|
20
|
+
return (0, _styleBuilder.buildScopeVars)(colorPreset, mode);
|
|
22
21
|
}
|
|
23
22
|
|
|
24
23
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_BloomThemeProvider","_buildTheme","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_BloomThemeProvider","_buildTheme","_styleBuilder","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","buildWebScopeVars","colorPreset","mode","buildScopeVars","BloomColorScope","asChild","style","children","parent","useContext","BloomThemeContext","Error","jsx","Fragment","resolvedMode","theme","contextValue","useMemo","buildTheme","varsStyle","content","child","Children","only","isValidElement","childStyle","props","mergedStyle","cloneElement","Provider","value","useColorScopeStyle"],"sourceRoot":"../../../../src","sources":["theme/color-scope/index.web.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -20,14 +20,26 @@ const getNativeWindVars = (0, _lazyRequire.lazyRequire)('nativewind');
|
|
|
20
20
|
|
|
21
21
|
/**
|
|
22
22
|
* Build the CSS custom-property map for a preset, ready to be applied to a
|
|
23
|
-
* subtree. Every token is resolved to an sRGB `rgb(...)` string
|
|
24
|
-
* `getResolvedTokens` — the single
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
* same
|
|
23
|
+
* subtree. Every canonical `--x` token is resolved to an sRGB `rgb(...)` string
|
|
24
|
+
* via `getResolvedTokens` — the single token pipeline shared by web and native.
|
|
25
|
+
*
|
|
26
|
+
* The returned map also includes Tailwind v4 `--color-x` aliases generated from
|
|
27
|
+
* those same canonical values. Scoped aliases are required on web because
|
|
28
|
+
* inherited custom properties like `--color-primary: var(--primary)` compute at
|
|
29
|
+
* the document root and would otherwise keep pointing at the app-wide preset.
|
|
28
30
|
*/
|
|
29
31
|
function buildScopeVars(colorPreset, mode) {
|
|
30
|
-
|
|
32
|
+
const tokens = (0, _tokenRegistry.getResolvedTokens)(colorPreset, mode);
|
|
33
|
+
const vars = {
|
|
34
|
+
...tokens
|
|
35
|
+
};
|
|
36
|
+
for (const token of _tokenRegistry.CANONICAL_TOKENS) {
|
|
37
|
+
const value = tokens[`--${token}`];
|
|
38
|
+
if (value !== undefined) {
|
|
39
|
+
vars[`--color-${token}`] = value;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
return vars;
|
|
31
43
|
}
|
|
32
44
|
|
|
33
45
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_reactNative","require","_tokenRegistry","_lazyRequire","getNativeWindVars","lazyRequire","buildScopeVars","colorPreset","mode","getResolvedTokens","getVariableContextProvider","Platform","OS","module","VariableContextProvider","buildNativePresetStyle"
|
|
1
|
+
{"version":3,"names":["_reactNative","require","_tokenRegistry","_lazyRequire","getNativeWindVars","lazyRequire","buildScopeVars","colorPreset","mode","tokens","getResolvedTokens","vars","token","CANONICAL_TOKENS","value","undefined","getVariableContextProvider","Platform","OS","module","VariableContextProvider","buildNativePresetStyle"],"sourceRoot":"../../../../src","sources":["theme/color-scope/style-builder.ts"],"mappings":";;;;;;;;AACA,IAAAA,YAAA,GAAAC,OAAA;AAEA,IAAAC,cAAA,GAAAD,OAAA;AAEA,IAAAE,YAAA,GAAAF,OAAA;AAEA;AACA;AACA;AACA;AACA;AACA;;AAWA,MAAMG,iBAAiB,GAAG,IAAAC,wBAAW,EAAuB,YAAY,CAAC;;AAEzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,cAAcA,CAC5BC,WAAyB,EACzBC,IAAsB,EACE;EACxB,MAAMC,MAAM,GAAG,IAAAC,gCAAiB,EAACH,WAAW,EAAEC,IAAI,CAAC;EACnD,MAAMG,IAA4B,GAAG;IAAE,GAAGF;EAAO,CAAC;EAElD,KAAK,MAAMG,KAAK,IAAIC,+BAAgB,EAAE;IACpC,MAAMC,KAAK,GAAGL,MAAM,CAAC,KAAKG,KAAK,EAAE,CAAC;IAClC,IAAIE,KAAK,KAAKC,SAAS,EAAE;MACvBJ,IAAI,CAAC,WAAWC,KAAK,EAAE,CAAC,GAAGE,KAAK;IAClC;EACF;EAEA,OAAOH,IAAI;AACb;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASK,0BAA0BA,CAAA,EAA4C;EACpF,IAAIC,qBAAQ,CAACC,EAAE,KAAK,KAAK,EAAE,OAAO,IAAI;EACtC,MAAMC,MAAM,GAAGf,iBAAiB,CAAC,CAAC;EAClC,IAAI,CAACe,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;AACO,SAASC,sBAAsBA,CACpCd,WAAyB,EACzBC,IAAsB,EACA;EACtB,IAAIS,qBAAQ,CAACC,EAAE,KAAK,KAAK,EAAE,OAAOH,SAAS;EAC3C,MAAMI,MAAM,GAAGf,iBAAiB,CAAC,CAAC;EAClC,IAAI,CAACe,MAAM,IAAI,OAAOA,MAAM,CAACR,IAAI,KAAK,UAAU,EAAE,OAAOI,SAAS;EAClE,OAAOI,MAAM,CAACR,IAAI,CAACL,cAAc,CAACC,WAAW,EAAEC,IAAI,CAAC,CAAC;AACvD","ignoreList":[]}
|
|
@@ -3,18 +3,17 @@
|
|
|
3
3
|
import React, { Children, cloneElement, isValidElement, useContext, useMemo } from 'react';
|
|
4
4
|
import { BloomThemeContext } from "../BloomThemeProvider.js";
|
|
5
5
|
import { buildTheme } from "../build-theme.js";
|
|
6
|
-
import {
|
|
6
|
+
import { buildScopeVars } from "./style-builder.js";
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
|
-
* `
|
|
10
|
-
* `rgb(...)` string
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
* full CSS color with no per-value wrapping needed.
|
|
9
|
+
* `buildScopeVars` returns every canonical token already resolved to an sRGB
|
|
10
|
+
* `rgb(...)` string, plus the `--color-*` aliases consumed by Tailwind v4
|
|
11
|
+
* utilities. Scoped onto an element's inline `style`, profile-level NativeWind
|
|
12
|
+
* classes resolve against the subtree preset instead of the document root.
|
|
14
13
|
*/
|
|
15
14
|
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
16
15
|
function buildWebScopeVars(colorPreset, mode) {
|
|
17
|
-
return
|
|
16
|
+
return buildScopeVars(colorPreset, mode);
|
|
18
17
|
}
|
|
19
18
|
|
|
20
19
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Children","cloneElement","isValidElement","useContext","useMemo","BloomThemeContext","buildTheme","
|
|
1
|
+
{"version":3,"names":["React","Children","cloneElement","isValidElement","useContext","useMemo","BloomThemeContext","buildTheme","buildScopeVars","Fragment","_Fragment","jsx","_jsx","buildWebScopeVars","colorPreset","mode","BloomColorScope","asChild","style","children","parent","Error","resolvedMode","theme","contextValue","varsStyle","content","child","only","childStyle","props","mergedStyle","Provider","value","useColorScopeStyle"],"sourceRoot":"../../../../src","sources":["theme/color-scope/index.web.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import { Platform } from 'react-native';
|
|
4
|
-
import { getResolvedTokens } from "../token-registry.js";
|
|
4
|
+
import { CANONICAL_TOKENS, getResolvedTokens } from "../token-registry.js";
|
|
5
5
|
import { lazyRequire } from "../../utils/lazy-require.js";
|
|
6
6
|
|
|
7
7
|
/**
|
|
@@ -15,14 +15,26 @@ const getNativeWindVars = lazyRequire('nativewind');
|
|
|
15
15
|
|
|
16
16
|
/**
|
|
17
17
|
* Build the CSS custom-property map for a preset, ready to be applied to a
|
|
18
|
-
* subtree. Every token is resolved to an sRGB `rgb(...)` string
|
|
19
|
-
* `getResolvedTokens` — the single
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
* same
|
|
18
|
+
* subtree. Every canonical `--x` token is resolved to an sRGB `rgb(...)` string
|
|
19
|
+
* via `getResolvedTokens` — the single token pipeline shared by web and native.
|
|
20
|
+
*
|
|
21
|
+
* The returned map also includes Tailwind v4 `--color-x` aliases generated from
|
|
22
|
+
* those same canonical values. Scoped aliases are required on web because
|
|
23
|
+
* inherited custom properties like `--color-primary: var(--primary)` compute at
|
|
24
|
+
* the document root and would otherwise keep pointing at the app-wide preset.
|
|
23
25
|
*/
|
|
24
26
|
export function buildScopeVars(colorPreset, mode) {
|
|
25
|
-
|
|
27
|
+
const tokens = getResolvedTokens(colorPreset, mode);
|
|
28
|
+
const vars = {
|
|
29
|
+
...tokens
|
|
30
|
+
};
|
|
31
|
+
for (const token of CANONICAL_TOKENS) {
|
|
32
|
+
const value = tokens[`--${token}`];
|
|
33
|
+
if (value !== undefined) {
|
|
34
|
+
vars[`--color-${token}`] = value;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
return vars;
|
|
26
38
|
}
|
|
27
39
|
|
|
28
40
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Platform","getResolvedTokens","lazyRequire","getNativeWindVars","buildScopeVars","colorPreset","mode","
|
|
1
|
+
{"version":3,"names":["Platform","CANONICAL_TOKENS","getResolvedTokens","lazyRequire","getNativeWindVars","buildScopeVars","colorPreset","mode","tokens","vars","token","value","undefined","getVariableContextProvider","OS","module","VariableContextProvider","buildNativePresetStyle"],"sourceRoot":"../../../../src","sources":["theme/color-scope/style-builder.ts"],"mappings":";;AACA,SAASA,QAAQ,QAAwC,cAAc;AAEvE,SAASC,gBAAgB,EAAEC,iBAAiB,QAAQ,sBAAmB;AAEvE,SAASC,WAAW,QAAQ,6BAA0B;;AAEtD;AACA;AACA;AACA;AACA;AACA;;AAWA,MAAMC,iBAAiB,GAAGD,WAAW,CAAuB,YAAY,CAAC;;AAEzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASE,cAAcA,CAC5BC,WAAyB,EACzBC,IAAsB,EACE;EACxB,MAAMC,MAAM,GAAGN,iBAAiB,CAACI,WAAW,EAAEC,IAAI,CAAC;EACnD,MAAME,IAA4B,GAAG;IAAE,GAAGD;EAAO,CAAC;EAElD,KAAK,MAAME,KAAK,IAAIT,gBAAgB,EAAE;IACpC,MAAMU,KAAK,GAAGH,MAAM,CAAC,KAAKE,KAAK,EAAE,CAAC;IAClC,IAAIC,KAAK,KAAKC,SAAS,EAAE;MACvBH,IAAI,CAAC,WAAWC,KAAK,EAAE,CAAC,GAAGC,KAAK;IAClC;EACF;EAEA,OAAOF,IAAI;AACb;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASI,0BAA0BA,CAAA,EAA4C;EACpF,IAAIb,QAAQ,CAACc,EAAE,KAAK,KAAK,EAAE,OAAO,IAAI;EACtC,MAAMC,MAAM,GAAGX,iBAAiB,CAAC,CAAC;EAClC,IAAI,CAACW,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,CACpCX,WAAyB,EACzBC,IAAsB,EACA;EACtB,IAAIP,QAAQ,CAACc,EAAE,KAAK,KAAK,EAAE,OAAOF,SAAS;EAC3C,MAAMG,MAAM,GAAGX,iBAAiB,CAAC,CAAC;EAClC,IAAI,CAACW,MAAM,IAAI,OAAOA,MAAM,CAACN,IAAI,KAAK,UAAU,EAAE,OAAOG,SAAS;EAClE,OAAOG,MAAM,CAACN,IAAI,CAACJ,cAAc,CAACC,WAAW,EAAEC,IAAI,CAAC,CAAC;AACvD","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/index.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAI3F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/index.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAI3F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAgBrD,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,WAAW,EAAE,YAAY,GAAG,SAAS,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yGAAyG;IACzG,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAuBD,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,OAAe,EACf,KAAK,EACL,QAAQ,GACT,EAAE,oBAAoB,2CA4CtB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,YAAY,GAAG,KAAK,CAAC,aAAa,CAUjF"}
|
|
@@ -13,11 +13,13 @@ export type VariableContextProviderComponent = React.ComponentType<{
|
|
|
13
13
|
}>;
|
|
14
14
|
/**
|
|
15
15
|
* Build the CSS custom-property map for a preset, ready to be applied to a
|
|
16
|
-
* subtree. Every token is resolved to an sRGB `rgb(...)` string
|
|
17
|
-
* `getResolvedTokens` — the single
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
* same
|
|
16
|
+
* subtree. Every canonical `--x` token is resolved to an sRGB `rgb(...)` string
|
|
17
|
+
* via `getResolvedTokens` — the single token pipeline shared by web and native.
|
|
18
|
+
*
|
|
19
|
+
* The returned map also includes Tailwind v4 `--color-x` aliases generated from
|
|
20
|
+
* those same canonical values. Scoped aliases are required on web because
|
|
21
|
+
* inherited custom properties like `--color-primary: var(--primary)` compute at
|
|
22
|
+
* the document root and would otherwise keep pointing at the app-wide preset.
|
|
21
23
|
*/
|
|
22
24
|
export declare function buildScopeVars(colorPreset: AppColorName, mode: 'light' | 'dark'): Record<string, string>;
|
|
23
25
|
/**
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAC5B,WAAW,EAAE,YAAY,EACzB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAYxB;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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/index.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAI3F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/index.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAI3F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAgBrD,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,WAAW,EAAE,YAAY,GAAG,SAAS,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yGAAyG;IACzG,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAuBD,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,OAAe,EACf,KAAK,EACL,QAAQ,GACT,EAAE,oBAAoB,2CA4CtB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,YAAY,GAAG,KAAK,CAAC,aAAa,CAUjF"}
|
|
@@ -13,11 +13,13 @@ export type VariableContextProviderComponent = React.ComponentType<{
|
|
|
13
13
|
}>;
|
|
14
14
|
/**
|
|
15
15
|
* Build the CSS custom-property map for a preset, ready to be applied to a
|
|
16
|
-
* subtree. Every token is resolved to an sRGB `rgb(...)` string
|
|
17
|
-
* `getResolvedTokens` — the single
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
* same
|
|
16
|
+
* subtree. Every canonical `--x` token is resolved to an sRGB `rgb(...)` string
|
|
17
|
+
* via `getResolvedTokens` — the single token pipeline shared by web and native.
|
|
18
|
+
*
|
|
19
|
+
* The returned map also includes Tailwind v4 `--color-x` aliases generated from
|
|
20
|
+
* those same canonical values. Scoped aliases are required on web because
|
|
21
|
+
* inherited custom properties like `--color-primary: var(--primary)` compute at
|
|
22
|
+
* the document root and would otherwise keep pointing at the app-wide preset.
|
|
21
23
|
*/
|
|
22
24
|
export declare function buildScopeVars(colorPreset: AppColorName, mode: 'light' | 'dark'): Record<string, string>;
|
|
23
25
|
/**
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAC5B,WAAW,EAAE,YAAY,EACzB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAYxB;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"}
|
package/package.json
CHANGED
|
@@ -153,17 +153,25 @@ describe('BloomColorScope', () => {
|
|
|
153
153
|
);
|
|
154
154
|
|
|
155
155
|
// Web var contract: the scoped base tokens (`--background`, `--primary`)
|
|
156
|
-
// must be full `rgb(...)` colors from the single canonical pipeline
|
|
157
|
-
//
|
|
158
|
-
//
|
|
156
|
+
// must be full `rgb(...)` colors from the single canonical pipeline, and
|
|
157
|
+
// the scoped Tailwind v4 aliases (`--color-primary`) must be generated
|
|
158
|
+
// from those same values so NativeWind utilities resolve inside the
|
|
159
|
+
// subtree instead of inheriting the app-wide preset.
|
|
159
160
|
const vars = Object.assign(
|
|
160
161
|
{},
|
|
161
|
-
...flat.filter(
|
|
162
|
+
...flat.filter(
|
|
163
|
+
(entry) =>
|
|
164
|
+
'--background' in entry ||
|
|
165
|
+
'--primary' in entry ||
|
|
166
|
+
'--color-primary' in entry,
|
|
167
|
+
),
|
|
162
168
|
) as Record<string, unknown>;
|
|
163
169
|
const background = String(vars['--background'] ?? '');
|
|
164
170
|
const primary = String(vars['--primary'] ?? '');
|
|
171
|
+
const colorPrimary = String(vars['--color-primary'] ?? '');
|
|
165
172
|
expect(background.startsWith('rgb(')).toBe(true);
|
|
166
173
|
expect(primary.startsWith('rgb(')).toBe(true);
|
|
174
|
+
expect(colorPrimary).toBe(primary);
|
|
167
175
|
expect(/^-?\d[\d.]*\s+[\d.]+%/.test(background)).toBe(false);
|
|
168
176
|
});
|
|
169
177
|
});
|
|
@@ -3,20 +3,19 @@ import React, { Children, cloneElement, isValidElement, useContext, useMemo } fr
|
|
|
3
3
|
import { BloomThemeContext, type BloomThemeContextValue } from '../BloomThemeProvider';
|
|
4
4
|
import { buildTheme } from '../build-theme';
|
|
5
5
|
import type { AppColorName } from '../color-presets';
|
|
6
|
-
import {
|
|
6
|
+
import { buildScopeVars } from './style-builder';
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
|
-
* `
|
|
10
|
-
* `rgb(...)` string
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
* full CSS color with no per-value wrapping needed.
|
|
9
|
+
* `buildScopeVars` returns every canonical token already resolved to an sRGB
|
|
10
|
+
* `rgb(...)` string, plus the `--color-*` aliases consumed by Tailwind v4
|
|
11
|
+
* utilities. Scoped onto an element's inline `style`, profile-level NativeWind
|
|
12
|
+
* classes resolve against the subtree preset instead of the document root.
|
|
14
13
|
*/
|
|
15
14
|
function buildWebScopeVars(
|
|
16
15
|
colorPreset: AppColorName,
|
|
17
16
|
mode: 'light' | 'dark',
|
|
18
17
|
): React.CSSProperties {
|
|
19
|
-
return
|
|
18
|
+
return buildScopeVars(colorPreset, mode) as React.CSSProperties;
|
|
20
19
|
}
|
|
21
20
|
|
|
22
21
|
export interface BloomColorScopeProps {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type React from 'react';
|
|
2
2
|
import { Platform, type StyleProp, type ViewStyle } from 'react-native';
|
|
3
3
|
|
|
4
|
-
import { getResolvedTokens } from '../token-registry';
|
|
4
|
+
import { CANONICAL_TOKENS, getResolvedTokens } from '../token-registry';
|
|
5
5
|
import type { AppColorName } from '../color-presets';
|
|
6
6
|
import { lazyRequire } from '../../utils/lazy-require';
|
|
7
7
|
|
|
@@ -25,17 +25,29 @@ const getNativeWindVars = lazyRequire<NativeWindVarsModule>('nativewind');
|
|
|
25
25
|
|
|
26
26
|
/**
|
|
27
27
|
* Build the CSS custom-property map for a preset, ready to be applied to a
|
|
28
|
-
* subtree. Every token is resolved to an sRGB `rgb(...)` string
|
|
29
|
-
* `getResolvedTokens` — the single
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
* same
|
|
28
|
+
* subtree. Every canonical `--x` token is resolved to an sRGB `rgb(...)` string
|
|
29
|
+
* via `getResolvedTokens` — the single token pipeline shared by web and native.
|
|
30
|
+
*
|
|
31
|
+
* The returned map also includes Tailwind v4 `--color-x` aliases generated from
|
|
32
|
+
* those same canonical values. Scoped aliases are required on web because
|
|
33
|
+
* inherited custom properties like `--color-primary: var(--primary)` compute at
|
|
34
|
+
* the document root and would otherwise keep pointing at the app-wide preset.
|
|
33
35
|
*/
|
|
34
36
|
export function buildScopeVars(
|
|
35
37
|
colorPreset: AppColorName,
|
|
36
38
|
mode: 'light' | 'dark',
|
|
37
39
|
): Record<string, string> {
|
|
38
|
-
|
|
40
|
+
const tokens = getResolvedTokens(colorPreset, mode);
|
|
41
|
+
const vars: Record<string, string> = { ...tokens };
|
|
42
|
+
|
|
43
|
+
for (const token of CANONICAL_TOKENS) {
|
|
44
|
+
const value = tokens[`--${token}`];
|
|
45
|
+
if (value !== undefined) {
|
|
46
|
+
vars[`--color-${token}`] = value;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
return vars;
|
|
39
51
|
}
|
|
40
52
|
|
|
41
53
|
/**
|