@ttoss/fsl-theme 1.1.16 → 1.1.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{baseBundle-DxvXyhGa.mjs → baseBundle-BLvD8XVS.mjs} +2 -2
- package/dist/{baseBundle-iEFf5nqT.cjs → baseBundle-BXvPJYzj.cjs} +2 -2
- package/dist/{createTheme-BLNYztZU.mjs → createTheme-DzLnsknT.mjs} +6 -6
- package/dist/{createTheme-Cv6RP9D6.cjs → createTheme-JOu16Shb.cjs} +6 -6
- package/dist/css.cjs +3 -3
- package/dist/css.mjs +3 -3
- package/dist/dataviz/index.cjs +3 -3
- package/dist/dataviz/index.mjs +2 -2
- package/dist/dtcg.cjs +8 -8
- package/dist/dtcg.mjs +8 -8
- package/dist/{helpers-4p4-QVt_.cjs → helpers-C29fy-Ad.cjs} +11 -11
- package/dist/{helpers-CaswNJMy.mjs → helpers-CA4Qkxct.mjs} +11 -11
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +1 -1
- package/dist/{react-EUwpdvY7.cjs → react-CoWIQYx_.cjs} +16 -16
- package/dist/react.cjs +1 -1
- package/dist/react.mjs +16 -16
- package/dist/runtime-entry.cjs +1 -1
- package/dist/runtime-entry.mjs +1 -1
- package/dist/{ssrScript-D3kGPQpi.mjs → ssrScript-CoRE6jjq.mjs} +9 -9
- package/dist/{ssrScript-CRfrN8Pm.cjs → ssrScript-DOpLExaG.cjs} +9 -9
- package/dist/themes/bruttal.cjs +5 -5
- package/dist/themes/bruttal.mjs +5 -5
- package/dist/themes/corporate.cjs +4 -4
- package/dist/themes/corporate.mjs +4 -4
- package/dist/themes/oca.cjs +4 -4
- package/dist/themes/oca.mjs +4 -4
- package/dist/themes/ventures.cjs +4 -4
- package/dist/themes/ventures.mjs +4 -4
- package/dist/{toCssVars-CYZCe-on.mjs → toCssVars-BHRiSykR.mjs} +18 -18
- package/dist/{toCssVars-DudHKvt2.cjs → toCssVars-CUiqx2kh.cjs} +18 -18
- package/dist/{tokenRegistry-OhaJ9sPJ.cjs → tokenRegistry-B9zMRjpL.cjs} +3 -3
- package/dist/{tokenRegistry-DjgSN3oU.mjs → tokenRegistry-DolhB5Vf.mjs} +3 -3
- package/dist/vars.cjs +5 -5
- package/dist/vars.mjs +5 -5
- package/dist/{withDataviz-B4pVsOwV.cjs → withDataviz-BlJcYhcw.cjs} +4 -4
- package/dist/{withDataviz-DY5s7R51.mjs → withDataviz-DYV1S_xr.mjs} +4 -4
- package/package.json +5 -5
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
|
-
import { i as darkAlternate, n as createTheme, r as baseTheme } from "./createTheme-
|
|
2
|
+
import { i as darkAlternate, n as createTheme, r as baseTheme } from "./createTheme-DzLnsknT.mjs";
|
|
3
3
|
|
|
4
4
|
//#region src/baseBundle.ts
|
|
5
5
|
/**
|
|
@@ -8,7 +8,7 @@ import { i as darkAlternate, n as createTheme, r as baseTheme } from "./createTh
|
|
|
8
8
|
*
|
|
9
9
|
* Internal-only: consumers use `createTheme()` with no args for the default.
|
|
10
10
|
*/
|
|
11
|
-
|
|
11
|
+
var baseBundle = createTheme({
|
|
12
12
|
base: baseTheme,
|
|
13
13
|
alternate: darkAlternate
|
|
14
14
|
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
|
-
const require_createTheme = require('./createTheme-
|
|
2
|
+
const require_createTheme = require('./createTheme-JOu16Shb.cjs');
|
|
3
3
|
|
|
4
4
|
//#region src/baseBundle.ts
|
|
5
5
|
/**
|
|
@@ -8,7 +8,7 @@ const require_createTheme = require('./createTheme-Cv6RP9D6.cjs');
|
|
|
8
8
|
*
|
|
9
9
|
* Internal-only: consumers use `createTheme()` with no args for the default.
|
|
10
10
|
*/
|
|
11
|
-
|
|
11
|
+
var baseBundle = require_createTheme.createTheme({
|
|
12
12
|
base: require_createTheme.baseTheme,
|
|
13
13
|
alternate: require_createTheme.darkAlternate
|
|
14
14
|
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
|
-
import { c as validateRefs, r as deepMerge } from "./helpers-
|
|
2
|
+
import { c as validateRefs, r as deepMerge } from "./helpers-CA4Qkxct.mjs";
|
|
3
3
|
|
|
4
4
|
//#region src/baseTheme.ts
|
|
5
5
|
/**
|
|
@@ -8,7 +8,7 @@ import { c as validateRefs, r as deepMerge } from "./helpers-CaswNJMy.mjs";
|
|
|
8
8
|
* System fonts, gray palette, and balanced proportions. Serves as the
|
|
9
9
|
* canonical base that all other themes extend via `createTheme`.
|
|
10
10
|
*/
|
|
11
|
-
|
|
11
|
+
var baseTheme = {
|
|
12
12
|
core: {
|
|
13
13
|
colors: {
|
|
14
14
|
brand: {
|
|
@@ -1220,7 +1220,7 @@ const baseTheme = {
|
|
|
1220
1220
|
}
|
|
1221
1221
|
}
|
|
1222
1222
|
};
|
|
1223
|
-
|
|
1223
|
+
var darkAlternate = {
|
|
1224
1224
|
semantic: {
|
|
1225
1225
|
colors: {
|
|
1226
1226
|
action: {
|
|
@@ -1723,7 +1723,7 @@ const darkAlternate = {
|
|
|
1723
1723
|
*
|
|
1724
1724
|
* @internal
|
|
1725
1725
|
*/
|
|
1726
|
-
|
|
1726
|
+
var buildTheme = ({
|
|
1727
1727
|
base = baseTheme,
|
|
1728
1728
|
overrides = {}
|
|
1729
1729
|
} = {}) => {
|
|
@@ -1731,7 +1731,7 @@ const buildTheme = ({
|
|
|
1731
1731
|
if (process.env.NODE_ENV !== "production") validateRefs(merged);
|
|
1732
1732
|
return structuredClone(merged);
|
|
1733
1733
|
};
|
|
1734
|
-
|
|
1734
|
+
var resolveAlternate = (alternate, parentBundle) => {
|
|
1735
1735
|
if (alternate === null) return void 0;
|
|
1736
1736
|
if (alternate !== void 0) return alternate;
|
|
1737
1737
|
return parentBundle?.alternate ?? darkAlternate;
|
|
@@ -1778,7 +1778,7 @@ const resolveAlternate = (alternate, parentBundle) => {
|
|
|
1778
1778
|
* const myTheme = createTheme({ alternate: null });
|
|
1779
1779
|
* ```
|
|
1780
1780
|
*/
|
|
1781
|
-
|
|
1781
|
+
var createTheme = ({
|
|
1782
1782
|
extends: parentBundle,
|
|
1783
1783
|
baseMode,
|
|
1784
1784
|
base,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
|
-
const require_helpers = require('./helpers-
|
|
2
|
+
const require_helpers = require('./helpers-C29fy-Ad.cjs');
|
|
3
3
|
|
|
4
4
|
//#region src/baseTheme.ts
|
|
5
5
|
/**
|
|
@@ -8,7 +8,7 @@ const require_helpers = require('./helpers-4p4-QVt_.cjs');
|
|
|
8
8
|
* System fonts, gray palette, and balanced proportions. Serves as the
|
|
9
9
|
* canonical base that all other themes extend via `createTheme`.
|
|
10
10
|
*/
|
|
11
|
-
|
|
11
|
+
var baseTheme = {
|
|
12
12
|
core: {
|
|
13
13
|
colors: {
|
|
14
14
|
brand: {
|
|
@@ -1220,7 +1220,7 @@ const baseTheme = {
|
|
|
1220
1220
|
}
|
|
1221
1221
|
}
|
|
1222
1222
|
};
|
|
1223
|
-
|
|
1223
|
+
var darkAlternate = {
|
|
1224
1224
|
semantic: {
|
|
1225
1225
|
colors: {
|
|
1226
1226
|
action: {
|
|
@@ -1723,7 +1723,7 @@ const darkAlternate = {
|
|
|
1723
1723
|
*
|
|
1724
1724
|
* @internal
|
|
1725
1725
|
*/
|
|
1726
|
-
|
|
1726
|
+
var buildTheme = ({
|
|
1727
1727
|
base = baseTheme,
|
|
1728
1728
|
overrides = {}
|
|
1729
1729
|
} = {}) => {
|
|
@@ -1731,7 +1731,7 @@ const buildTheme = ({
|
|
|
1731
1731
|
if (process.env.NODE_ENV !== "production") require_helpers.validateRefs(merged);
|
|
1732
1732
|
return structuredClone(merged);
|
|
1733
1733
|
};
|
|
1734
|
-
|
|
1734
|
+
var resolveAlternate = (alternate, parentBundle) => {
|
|
1735
1735
|
if (alternate === null) return void 0;
|
|
1736
1736
|
if (alternate !== void 0) return alternate;
|
|
1737
1737
|
return parentBundle?.alternate ?? darkAlternate;
|
|
@@ -1778,7 +1778,7 @@ const resolveAlternate = (alternate, parentBundle) => {
|
|
|
1778
1778
|
* const myTheme = createTheme({ alternate: null });
|
|
1779
1779
|
* ```
|
|
1780
1780
|
*/
|
|
1781
|
-
|
|
1781
|
+
var createTheme = ({
|
|
1782
1782
|
extends: parentBundle,
|
|
1783
1783
|
baseMode,
|
|
1784
1784
|
base,
|
package/dist/css.cjs
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, {
|
|
3
3
|
value: 'Module'
|
|
4
4
|
});
|
|
5
|
-
const require_helpers = require('./helpers-
|
|
6
|
-
const require_toCssVars = require('./toCssVars-
|
|
5
|
+
const require_helpers = require('./helpers-C29fy-Ad.cjs');
|
|
6
|
+
const require_toCssVars = require('./toCssVars-CUiqx2kh.cjs');
|
|
7
7
|
|
|
8
8
|
//#region src/css.ts
|
|
9
9
|
/**
|
|
@@ -35,7 +35,7 @@ const require_toCssVars = require('./toCssVars-DudHKvt2.cjs');
|
|
|
35
35
|
* res.type('text/css').send(getThemeStylesContent(myBundle, 'myTheme'));
|
|
36
36
|
* ```
|
|
37
37
|
*/
|
|
38
|
-
|
|
38
|
+
var getThemeStylesContent = (bundle, themeId) => {
|
|
39
39
|
return require_toCssVars.toCssVars(bundle, {
|
|
40
40
|
themeId
|
|
41
41
|
}).toCssString();
|
package/dist/css.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
|
-
import { s as toFlatTokens } from "./helpers-
|
|
3
|
-
import { n as toCssVars, t as toCssVarName } from "./toCssVars-
|
|
2
|
+
import { s as toFlatTokens } from "./helpers-CA4Qkxct.mjs";
|
|
3
|
+
import { n as toCssVars, t as toCssVarName } from "./toCssVars-BHRiSykR.mjs";
|
|
4
4
|
|
|
5
5
|
//#region src/css.ts
|
|
6
6
|
/**
|
|
@@ -32,7 +32,7 @@ import { n as toCssVars, t as toCssVarName } from "./toCssVars-CYZCe-on.mjs";
|
|
|
32
32
|
* res.type('text/css').send(getThemeStylesContent(myBundle, 'myTheme'));
|
|
33
33
|
* ```
|
|
34
34
|
*/
|
|
35
|
-
|
|
35
|
+
var getThemeStylesContent = (bundle, themeId) => {
|
|
36
36
|
return toCssVars(bundle, {
|
|
37
37
|
themeId
|
|
38
38
|
}).toCssString();
|
package/dist/dataviz/index.cjs
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, {
|
|
3
3
|
value: 'Module'
|
|
4
4
|
});
|
|
5
|
-
const require_react = require('../react-
|
|
6
|
-
const require_withDataviz = require('../withDataviz-
|
|
5
|
+
const require_react = require('../react-CoWIQYx_.cjs');
|
|
6
|
+
const require_withDataviz = require('../withDataviz-BlJcYhcw.cjs');
|
|
7
7
|
|
|
8
8
|
//#region src/dataviz/useDatavizTokens.ts
|
|
9
9
|
/**
|
|
@@ -32,7 +32,7 @@ const require_withDataviz = require('../withDataviz-B4pVsOwV.cjs');
|
|
|
32
32
|
*
|
|
33
33
|
* @see {@link useTokens} — access full semantic tokens (dataviz will be on `tokens.dataviz?`)
|
|
34
34
|
*/
|
|
35
|
-
|
|
35
|
+
var useDatavizTokens = () => {
|
|
36
36
|
const tokens = require_react.useTokens();
|
|
37
37
|
if (!tokens.dataviz) throw new Error("useDatavizTokens: the active theme does not include the dataviz extension.\nWrap your bundle with withDataviz before passing it to ThemeProvider:\n\n import { withDataviz } from \"@ttoss/fsl-theme/dataviz\";\n export const myTheme = withDataviz(createTheme({ ... }));");
|
|
38
38
|
return tokens.dataviz;
|
package/dist/dataviz/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
|
-
import { n as coreDataviz, r as semanticDataviz, t as withDataviz } from "../withDataviz-
|
|
2
|
+
import { n as coreDataviz, r as semanticDataviz, t as withDataviz } from "../withDataviz-DYV1S_xr.mjs";
|
|
3
3
|
import { useTokens } from "../react.mjs";
|
|
4
4
|
|
|
5
5
|
//#region src/dataviz/useDatavizTokens.ts
|
|
@@ -29,7 +29,7 @@ import { useTokens } from "../react.mjs";
|
|
|
29
29
|
*
|
|
30
30
|
* @see {@link useTokens} — access full semantic tokens (dataviz will be on `tokens.dataviz?`)
|
|
31
31
|
*/
|
|
32
|
-
|
|
32
|
+
var useDatavizTokens = () => {
|
|
33
33
|
const tokens = useTokens();
|
|
34
34
|
if (!tokens.dataviz) throw new Error("useDatavizTokens: the active theme does not include the dataviz extension.\nWrap your bundle with withDataviz before passing it to ThemeProvider:\n\n import { withDataviz } from \"@ttoss/fsl-theme/dataviz\";\n export const myTheme = withDataviz(createTheme({ ... }));");
|
|
35
35
|
return tokens.dataviz;
|
package/dist/dtcg.cjs
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, {
|
|
3
3
|
value: 'Module'
|
|
4
4
|
});
|
|
5
|
-
const require_helpers = require('./helpers-
|
|
6
|
-
const require_tokenRegistry = require('./tokenRegistry-
|
|
5
|
+
const require_helpers = require('./helpers-C29fy-Ad.cjs');
|
|
6
|
+
const require_tokenRegistry = require('./tokenRegistry-B9zMRjpL.cjs');
|
|
7
7
|
|
|
8
8
|
//#region src/roots/toDTCG.ts
|
|
9
9
|
/**
|
|
@@ -27,8 +27,8 @@ const require_tokenRegistry = require('./tokenRegistry-OhaJ9sPJ.cjs');
|
|
|
27
27
|
* Motion leaves (SemanticMotionEntry) overridden separately:
|
|
28
28
|
* - `.duration` → 'duration'
|
|
29
29
|
*/
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
var SUFFIX_TYPE_OVERRIDES = [[".duration", "duration"], [".fontFamily", "fontFamily"], [".fontSize", "dimension"], [".fontWeight", "fontWeight"], [".lineHeight", "number"], [".letterSpacing", "dimension"], [".ring.color", "color"]];
|
|
31
|
+
var inferType = path => {
|
|
32
32
|
for (const [suffix, type] of SUFFIX_TYPE_OVERRIDES) if (path.endsWith(suffix)) return type;
|
|
33
33
|
for (const [prefix, type] of require_tokenRegistry.DTCG_TYPE_PREFIXES) if (path.startsWith(prefix)) return type;
|
|
34
34
|
return "string";
|
|
@@ -37,7 +37,7 @@ const inferType = path => {
|
|
|
37
37
|
* Set a value at a dot-path in a nested object, creating intermediate
|
|
38
38
|
* objects as needed.
|
|
39
39
|
*/
|
|
40
|
-
|
|
40
|
+
var setNestedValue = (root, path, value) => {
|
|
41
41
|
const segments = path.split(".");
|
|
42
42
|
let current = root;
|
|
43
43
|
for (let i = 0; i < segments.length - 1; i++) {
|
|
@@ -48,7 +48,7 @@ const setNestedValue = (root, path, value) => {
|
|
|
48
48
|
current[segments[segments.length - 1]] = value;
|
|
49
49
|
};
|
|
50
50
|
/** Semantic hit token prefix that carries coarse-pointer overrides. */
|
|
51
|
-
|
|
51
|
+
var SEMANTIC_HIT_PREFIX = "semantic.sizing.hit.";
|
|
52
52
|
/**
|
|
53
53
|
* Build the `$extensions` metadata for a semantic hit token.
|
|
54
54
|
*
|
|
@@ -57,7 +57,7 @@ const SEMANTIC_HIT_PREFIX = "semantic.sizing.hit.";
|
|
|
57
57
|
* non-CSS consumers (React Native, design tool pipelines) can locate and
|
|
58
58
|
* apply touch-target overrides without reading `toCssVars` source code.
|
|
59
59
|
*/
|
|
60
|
-
|
|
60
|
+
var buildHitExtension = (step, theme) => {
|
|
61
61
|
const coarseValue = theme.core.sizing.hit.coarse[step];
|
|
62
62
|
if (coarseValue === void 0) return void 0;
|
|
63
63
|
return {
|
|
@@ -94,7 +94,7 @@ const buildHitExtension = (step, theme) => {
|
|
|
94
94
|
* await fs.writeFile('tokens.json', JSON.stringify(tokens, null, 2));
|
|
95
95
|
* ```
|
|
96
96
|
*/
|
|
97
|
-
|
|
97
|
+
var toDTCG = theme => {
|
|
98
98
|
const flat = require_helpers.toFlatTokens(theme);
|
|
99
99
|
const tree = {};
|
|
100
100
|
for (const [path, value] of Object.entries(flat)) {
|
package/dist/dtcg.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
|
-
import { s as toFlatTokens } from "./helpers-
|
|
3
|
-
import { n as DTCG_TYPE_PREFIXES } from "./tokenRegistry-
|
|
2
|
+
import { s as toFlatTokens } from "./helpers-CA4Qkxct.mjs";
|
|
3
|
+
import { n as DTCG_TYPE_PREFIXES } from "./tokenRegistry-DolhB5Vf.mjs";
|
|
4
4
|
|
|
5
5
|
//#region src/roots/toDTCG.ts
|
|
6
6
|
/**
|
|
@@ -24,8 +24,8 @@ import { n as DTCG_TYPE_PREFIXES } from "./tokenRegistry-DjgSN3oU.mjs";
|
|
|
24
24
|
* Motion leaves (SemanticMotionEntry) overridden separately:
|
|
25
25
|
* - `.duration` → 'duration'
|
|
26
26
|
*/
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
var SUFFIX_TYPE_OVERRIDES = [[".duration", "duration"], [".fontFamily", "fontFamily"], [".fontSize", "dimension"], [".fontWeight", "fontWeight"], [".lineHeight", "number"], [".letterSpacing", "dimension"], [".ring.color", "color"]];
|
|
28
|
+
var inferType = path => {
|
|
29
29
|
for (const [suffix, type] of SUFFIX_TYPE_OVERRIDES) if (path.endsWith(suffix)) return type;
|
|
30
30
|
for (const [prefix, type] of DTCG_TYPE_PREFIXES) if (path.startsWith(prefix)) return type;
|
|
31
31
|
return "string";
|
|
@@ -34,7 +34,7 @@ const inferType = path => {
|
|
|
34
34
|
* Set a value at a dot-path in a nested object, creating intermediate
|
|
35
35
|
* objects as needed.
|
|
36
36
|
*/
|
|
37
|
-
|
|
37
|
+
var setNestedValue = (root, path, value) => {
|
|
38
38
|
const segments = path.split(".");
|
|
39
39
|
let current = root;
|
|
40
40
|
for (let i = 0; i < segments.length - 1; i++) {
|
|
@@ -45,7 +45,7 @@ const setNestedValue = (root, path, value) => {
|
|
|
45
45
|
current[segments[segments.length - 1]] = value;
|
|
46
46
|
};
|
|
47
47
|
/** Semantic hit token prefix that carries coarse-pointer overrides. */
|
|
48
|
-
|
|
48
|
+
var SEMANTIC_HIT_PREFIX = "semantic.sizing.hit.";
|
|
49
49
|
/**
|
|
50
50
|
* Build the `$extensions` metadata for a semantic hit token.
|
|
51
51
|
*
|
|
@@ -54,7 +54,7 @@ const SEMANTIC_HIT_PREFIX = "semantic.sizing.hit.";
|
|
|
54
54
|
* non-CSS consumers (React Native, design tool pipelines) can locate and
|
|
55
55
|
* apply touch-target overrides without reading `toCssVars` source code.
|
|
56
56
|
*/
|
|
57
|
-
|
|
57
|
+
var buildHitExtension = (step, theme) => {
|
|
58
58
|
const coarseValue = theme.core.sizing.hit.coarse[step];
|
|
59
59
|
if (coarseValue === void 0) return void 0;
|
|
60
60
|
return {
|
|
@@ -91,7 +91,7 @@ const buildHitExtension = (step, theme) => {
|
|
|
91
91
|
* await fs.writeFile('tokens.json', JSON.stringify(tokens, null, 2));
|
|
92
92
|
* ```
|
|
93
93
|
*/
|
|
94
|
-
|
|
94
|
+
var toDTCG = theme => {
|
|
95
95
|
const flat = toFlatTokens(theme);
|
|
96
96
|
const tree = {};
|
|
97
97
|
for (const [path, value] of Object.entries(flat)) {
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
2
|
//#region src/roots/helpers.ts
|
|
3
3
|
/** Check if a value is a token reference like `{core.colors.brand.500}` */
|
|
4
|
-
|
|
4
|
+
var isTokenRef = value => {
|
|
5
5
|
return typeof value === "string" && value.length > 2 && value.startsWith("{") && value.endsWith("}");
|
|
6
6
|
};
|
|
7
7
|
/** Extract the inner path from a token reference: `{core.colors.brand.500}` → `core.colors.brand.500` */
|
|
8
|
-
|
|
8
|
+
var extractRefPath = ref => {
|
|
9
9
|
return ref.slice(1, -1);
|
|
10
10
|
};
|
|
11
11
|
/**
|
|
@@ -13,14 +13,14 @@ const extractRefPath = ref => {
|
|
|
13
13
|
* Shared between toCssVars (CSS selector injection guard) and ssrScript (SSR inline script).
|
|
14
14
|
* A single definition prevents the two validation paths from silently diverging.
|
|
15
15
|
*/
|
|
16
|
-
|
|
16
|
+
var SAFE_ID_RE = /^[a-zA-Z0-9_-]+$/;
|
|
17
17
|
/**
|
|
18
18
|
* Matches every `{token.path}` reference embedded in a string value.
|
|
19
19
|
* Shared between helpers.ts (toFlatTokens) and toCssVars.ts (inlineRefsToVars)
|
|
20
20
|
* so a single definition governs the `{…}` syntax in both resolution paths.
|
|
21
21
|
*/
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
var COMPOUND_REF_RE = /\{([^}]+)\}/g;
|
|
23
|
+
var isPlainObject = value => {
|
|
24
24
|
return typeof value === "object" && value !== null && !Array.isArray(value);
|
|
25
25
|
};
|
|
26
26
|
/**
|
|
@@ -28,7 +28,7 @@ const isPlainObject = value => {
|
|
|
28
28
|
* - Plain objects are merged recursively.
|
|
29
29
|
* - All other values (primitives, arrays) are replaced.
|
|
30
30
|
*/
|
|
31
|
-
|
|
31
|
+
var deepMerge = (base, overrides) => {
|
|
32
32
|
if (!isPlainObject(base) || !isPlainObject(overrides)) return overrides ?? base;
|
|
33
33
|
const result = {
|
|
34
34
|
...base
|
|
@@ -46,7 +46,7 @@ const deepMerge = (base, overrides) => {
|
|
|
46
46
|
*
|
|
47
47
|
* `{ brand: { 500: '#0469E3' } }` → `{ 'brand.500': '#0469E3' }`
|
|
48
48
|
*/
|
|
49
|
-
|
|
49
|
+
var flattenObject = (obj, prefix = "") => {
|
|
50
50
|
const result = {};
|
|
51
51
|
for (const [key, value] of Object.entries(obj)) {
|
|
52
52
|
const fullKey = prefix ? `${prefix}.${key}` : key;
|
|
@@ -62,7 +62,7 @@ const flattenObject = (obj, prefix = "") => {
|
|
|
62
62
|
* Used by both `toFlatTokens` (resolution) and `buildCssVars` (CSS emission)
|
|
63
63
|
* so the casts live in exactly one place.
|
|
64
64
|
*/
|
|
65
|
-
|
|
65
|
+
var flattenTheme = theme => {
|
|
66
66
|
return {
|
|
67
67
|
core: flattenObject(theme.core, "core"),
|
|
68
68
|
semantic: flattenObject(theme.semantic, "semantic")
|
|
@@ -72,7 +72,7 @@ const flattenTheme = theme => {
|
|
|
72
72
|
* Compute the Levenshtein edit distance between two strings.
|
|
73
73
|
* Used exclusively by `validateRefs` to power "did you mean?" suggestions.
|
|
74
74
|
*/
|
|
75
|
-
|
|
75
|
+
var levenshtein = (a, b) => {
|
|
76
76
|
const m = a.length;
|
|
77
77
|
const n = b.length;
|
|
78
78
|
const dp = Array.from({
|
|
@@ -96,7 +96,7 @@ const levenshtein = (a, b) => {
|
|
|
96
96
|
* **DEV-only** — callers gate this behind `process.env.NODE_ENV !== 'production'`
|
|
97
97
|
* so bundlers tree-shake the entire call in production builds.
|
|
98
98
|
*/
|
|
99
|
-
|
|
99
|
+
var validateRefs = theme => {
|
|
100
100
|
const {
|
|
101
101
|
core,
|
|
102
102
|
semantic
|
|
@@ -146,7 +146,7 @@ const validateRefs = theme => {
|
|
|
146
146
|
*
|
|
147
147
|
* This is the universal primitive — every root is derived from this.
|
|
148
148
|
*/
|
|
149
|
-
|
|
149
|
+
var toFlatTokens = (theme, options = {}) => {
|
|
150
150
|
const {
|
|
151
151
|
strict = false
|
|
152
152
|
} = options;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
2
|
//#region src/roots/helpers.ts
|
|
3
3
|
/** Check if a value is a token reference like `{core.colors.brand.500}` */
|
|
4
|
-
|
|
4
|
+
var isTokenRef = value => {
|
|
5
5
|
return typeof value === "string" && value.length > 2 && value.startsWith("{") && value.endsWith("}");
|
|
6
6
|
};
|
|
7
7
|
/** Extract the inner path from a token reference: `{core.colors.brand.500}` → `core.colors.brand.500` */
|
|
8
|
-
|
|
8
|
+
var extractRefPath = ref => {
|
|
9
9
|
return ref.slice(1, -1);
|
|
10
10
|
};
|
|
11
11
|
/**
|
|
@@ -13,14 +13,14 @@ const extractRefPath = ref => {
|
|
|
13
13
|
* Shared between toCssVars (CSS selector injection guard) and ssrScript (SSR inline script).
|
|
14
14
|
* A single definition prevents the two validation paths from silently diverging.
|
|
15
15
|
*/
|
|
16
|
-
|
|
16
|
+
var SAFE_ID_RE = /^[a-zA-Z0-9_-]+$/;
|
|
17
17
|
/**
|
|
18
18
|
* Matches every `{token.path}` reference embedded in a string value.
|
|
19
19
|
* Shared between helpers.ts (toFlatTokens) and toCssVars.ts (inlineRefsToVars)
|
|
20
20
|
* so a single definition governs the `{…}` syntax in both resolution paths.
|
|
21
21
|
*/
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
var COMPOUND_REF_RE = /\{([^}]+)\}/g;
|
|
23
|
+
var isPlainObject = value => {
|
|
24
24
|
return typeof value === "object" && value !== null && !Array.isArray(value);
|
|
25
25
|
};
|
|
26
26
|
/**
|
|
@@ -28,7 +28,7 @@ const isPlainObject = value => {
|
|
|
28
28
|
* - Plain objects are merged recursively.
|
|
29
29
|
* - All other values (primitives, arrays) are replaced.
|
|
30
30
|
*/
|
|
31
|
-
|
|
31
|
+
var deepMerge = (base, overrides) => {
|
|
32
32
|
if (!isPlainObject(base) || !isPlainObject(overrides)) return overrides ?? base;
|
|
33
33
|
const result = {
|
|
34
34
|
...base
|
|
@@ -46,7 +46,7 @@ const deepMerge = (base, overrides) => {
|
|
|
46
46
|
*
|
|
47
47
|
* `{ brand: { 500: '#0469E3' } }` → `{ 'brand.500': '#0469E3' }`
|
|
48
48
|
*/
|
|
49
|
-
|
|
49
|
+
var flattenObject = (obj, prefix = "") => {
|
|
50
50
|
const result = {};
|
|
51
51
|
for (const [key, value] of Object.entries(obj)) {
|
|
52
52
|
const fullKey = prefix ? `${prefix}.${key}` : key;
|
|
@@ -62,7 +62,7 @@ const flattenObject = (obj, prefix = "") => {
|
|
|
62
62
|
* Used by both `toFlatTokens` (resolution) and `buildCssVars` (CSS emission)
|
|
63
63
|
* so the casts live in exactly one place.
|
|
64
64
|
*/
|
|
65
|
-
|
|
65
|
+
var flattenTheme = theme => {
|
|
66
66
|
return {
|
|
67
67
|
core: flattenObject(theme.core, "core"),
|
|
68
68
|
semantic: flattenObject(theme.semantic, "semantic")
|
|
@@ -72,7 +72,7 @@ const flattenTheme = theme => {
|
|
|
72
72
|
* Compute the Levenshtein edit distance between two strings.
|
|
73
73
|
* Used exclusively by `validateRefs` to power "did you mean?" suggestions.
|
|
74
74
|
*/
|
|
75
|
-
|
|
75
|
+
var levenshtein = (a, b) => {
|
|
76
76
|
const m = a.length;
|
|
77
77
|
const n = b.length;
|
|
78
78
|
const dp = Array.from({
|
|
@@ -96,7 +96,7 @@ const levenshtein = (a, b) => {
|
|
|
96
96
|
* **DEV-only** — callers gate this behind `process.env.NODE_ENV !== 'production'`
|
|
97
97
|
* so bundlers tree-shake the entire call in production builds.
|
|
98
98
|
*/
|
|
99
|
-
|
|
99
|
+
var validateRefs = theme => {
|
|
100
100
|
const {
|
|
101
101
|
core,
|
|
102
102
|
semantic
|
|
@@ -146,7 +146,7 @@ const validateRefs = theme => {
|
|
|
146
146
|
*
|
|
147
147
|
* This is the universal primitive — every root is derived from this.
|
|
148
148
|
*/
|
|
149
|
-
|
|
149
|
+
var toFlatTokens = (theme, options = {}) => {
|
|
150
150
|
const {
|
|
151
151
|
strict = false
|
|
152
152
|
} = options;
|
package/dist/index.cjs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, {
|
|
3
3
|
value: 'Module'
|
|
4
4
|
});
|
|
5
|
-
const require_createTheme = require('./createTheme-
|
|
5
|
+
const require_createTheme = require('./createTheme-JOu16Shb.cjs');
|
|
6
6
|
const require_themes_bruttal = require('./themes/bruttal.cjs');
|
|
7
7
|
const require_themes_corporate = require('./themes/corporate.cjs');
|
|
8
8
|
const require_themes_oca = require('./themes/oca.cjs');
|
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
|
-
import { i as darkAlternate, n as createTheme, r as baseTheme } from "./createTheme-
|
|
2
|
+
import { i as darkAlternate, n as createTheme, r as baseTheme } from "./createTheme-DzLnsknT.mjs";
|
|
3
3
|
import { bruttal } from "./themes/bruttal.mjs";
|
|
4
4
|
import { corporate } from "./themes/corporate.mjs";
|
|
5
5
|
import { oca } from "./themes/oca.mjs";
|
|
@@ -26,21 +26,21 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
26
26
|
}) : target, mod));
|
|
27
27
|
|
|
28
28
|
//#endregion
|
|
29
|
-
const require_helpers = require('./helpers-
|
|
29
|
+
const require_helpers = require('./helpers-C29fy-Ad.cjs');
|
|
30
30
|
const require_css = require('./css.cjs');
|
|
31
|
-
const require_ssrScript = require('./ssrScript-
|
|
31
|
+
const require_ssrScript = require('./ssrScript-DOpLExaG.cjs');
|
|
32
32
|
let react = require("react");
|
|
33
33
|
react = __toESM(react);
|
|
34
34
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
35
35
|
|
|
36
36
|
//#region src/react.tsx
|
|
37
|
-
|
|
37
|
+
var COARSE_QUERY = "(any-pointer: coarse)";
|
|
38
38
|
/**
|
|
39
39
|
* Subscribe to coarse-pointer media query changes.
|
|
40
40
|
* Returns `true` when the device has at least one coarse pointer (touch).
|
|
41
41
|
* Returns `false` on SSR or when `matchMedia` is unavailable (React Native).
|
|
42
42
|
*/
|
|
43
|
-
|
|
43
|
+
var useCoarsePointer = () => {
|
|
44
44
|
const [isCoarse, setIsCoarse] = react.useState(() => {
|
|
45
45
|
return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(COARSE_QUERY).matches : false;
|
|
46
46
|
});
|
|
@@ -66,7 +66,7 @@ const useCoarsePointer = () => {
|
|
|
66
66
|
* consumers — ensuring non-CSS consumers (React Native, canvas) get
|
|
67
67
|
* touch-appropriate hit targets.
|
|
68
68
|
*/
|
|
69
|
-
|
|
69
|
+
var applyCoarseHitOverrides = (tokens, theme, isCoarse) => {
|
|
70
70
|
if (!isCoarse) return tokens;
|
|
71
71
|
const overrides = {
|
|
72
72
|
...tokens
|
|
@@ -74,16 +74,16 @@ const applyCoarseHitOverrides = (tokens, theme, isCoarse) => {
|
|
|
74
74
|
for (const [key, value] of Object.entries(theme.core.sizing.hit.coarse)) if (typeof value === "string") overrides[`semantic.sizing.hit.${key}`] = value;
|
|
75
75
|
return overrides;
|
|
76
76
|
};
|
|
77
|
-
|
|
77
|
+
var SemanticTokensCtx = react.createContext(null);
|
|
78
78
|
/**
|
|
79
79
|
* Resolves semantic tokens for the given bundle + mode combination.
|
|
80
80
|
*/
|
|
81
|
-
|
|
81
|
+
var resolveSemanticTokens = (bundle, resolvedMode) => {
|
|
82
82
|
if (resolvedMode === bundle.baseMode || !bundle.alternate?.semantic) return bundle.base.semantic;
|
|
83
83
|
return require_helpers.deepMerge(bundle.base.semantic, bundle.alternate.semantic);
|
|
84
84
|
};
|
|
85
|
-
|
|
86
|
-
|
|
85
|
+
var ResolvedTokensCtx = react.createContext(null);
|
|
86
|
+
var ModeCtx = react.createContext(null);
|
|
87
87
|
/**
|
|
88
88
|
* React provider that manages theme switching via `createThemeRuntime`.
|
|
89
89
|
*
|
|
@@ -106,7 +106,7 @@ const ModeCtx = react.createContext(null);
|
|
|
106
106
|
* );
|
|
107
107
|
* ```
|
|
108
108
|
*/
|
|
109
|
-
|
|
109
|
+
var ThemeProvider = ({
|
|
110
110
|
defaultMode,
|
|
111
111
|
storageKey,
|
|
112
112
|
theme,
|
|
@@ -200,7 +200,7 @@ const ThemeProvider = ({
|
|
|
200
200
|
});
|
|
201
201
|
return coreNode;
|
|
202
202
|
};
|
|
203
|
-
|
|
203
|
+
var useColorMode = () => {
|
|
204
204
|
const context = react.useContext(ModeCtx);
|
|
205
205
|
if (!context) throw new Error("useColorMode must be used within a <ThemeProvider>");
|
|
206
206
|
return context;
|
|
@@ -243,7 +243,7 @@ const useColorMode = () => {
|
|
|
243
243
|
* };
|
|
244
244
|
* ```
|
|
245
245
|
*/
|
|
246
|
-
|
|
246
|
+
var useTokens = () => {
|
|
247
247
|
const tokens = react.useContext(SemanticTokensCtx);
|
|
248
248
|
if (!react.useContext(ModeCtx)) throw new Error("useTokens must be used within a <ThemeProvider>");
|
|
249
249
|
if (tokens === null) throw new Error("useTokens requires a <ThemeProvider theme={...}>. Pass your theme bundle: <ThemeProvider theme={myTheme} />");
|
|
@@ -287,7 +287,7 @@ const useTokens = () => {
|
|
|
287
287
|
* };
|
|
288
288
|
* ```
|
|
289
289
|
*/
|
|
290
|
-
|
|
290
|
+
var useResolvedTokens = () => {
|
|
291
291
|
const resolved = react.useContext(ResolvedTokensCtx);
|
|
292
292
|
if (!react.useContext(ModeCtx)) throw new Error("useResolvedTokens must be used within a <ThemeProvider>");
|
|
293
293
|
if (resolved === null) throw new Error("useResolvedTokens requires a <ThemeProvider theme={...}>. Pass your theme bundle: <ThemeProvider theme={myTheme} />");
|
|
@@ -315,7 +315,7 @@ const useResolvedTokens = () => {
|
|
|
315
315
|
* }
|
|
316
316
|
* ```
|
|
317
317
|
*/
|
|
318
|
-
|
|
318
|
+
var ThemeScript = ({
|
|
319
319
|
defaultTheme,
|
|
320
320
|
defaultMode,
|
|
321
321
|
storageKey,
|
|
@@ -374,7 +374,7 @@ const ThemeScript = ({
|
|
|
374
374
|
* <ThemeStyles theme={brandB} themeId="brand-b" />
|
|
375
375
|
* ```
|
|
376
376
|
*/
|
|
377
|
-
|
|
377
|
+
var ThemeStyles = ({
|
|
378
378
|
theme,
|
|
379
379
|
themeId,
|
|
380
380
|
nonce
|
|
@@ -415,7 +415,7 @@ const ThemeStyles = ({
|
|
|
415
415
|
* }
|
|
416
416
|
* ```
|
|
417
417
|
*/
|
|
418
|
-
|
|
418
|
+
var ThemeHead = ({
|
|
419
419
|
theme,
|
|
420
420
|
themeId,
|
|
421
421
|
nonce,
|
package/dist/react.cjs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, {
|
|
3
3
|
value: 'Module'
|
|
4
4
|
});
|
|
5
|
-
const require_react = require('./react-
|
|
5
|
+
const require_react = require('./react-CoWIQYx_.cjs');
|
|
6
6
|
exports.ThemeHead = require_react.ThemeHead;
|
|
7
7
|
exports.ThemeProvider = require_react.ThemeProvider;
|
|
8
8
|
exports.ThemeScript = require_react.ThemeScript;
|