@ttoss/fsl-theme 1.1.22 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +54 -41
- package/dist/{Types-BiBa17RL.d.cts → Types-a_sfpbha.d.cts} +84 -24
- package/dist/{Types-BiBa17RL.d.mts → Types-a_sfpbha.d.mts} +84 -24
- package/dist/{baseBundle-DiYlHNG5.mjs → baseBundle-CXdxj_re.mjs} +3 -2
- package/dist/{baseBundle-BWbICg4p.cjs → baseBundle-a9LDsqYy.cjs} +3 -2
- package/dist/{createTheme-BHGc1IFI.cjs → createTheme-B7H0xSVp.cjs} +128 -19
- package/dist/{createTheme-C1r5nJco.mjs → createTheme-Bm9LVQ4w.mjs} +123 -20
- package/dist/css.cjs +5 -4
- package/dist/css.d.cts +21 -2
- package/dist/css.d.mts +21 -2
- package/dist/css.mjs +5 -4
- package/dist/dataviz/index.cjs +2 -2
- package/dist/dataviz/index.d.cts +1 -1
- package/dist/dataviz/index.d.mts +1 -1
- package/dist/dataviz/index.mjs +1 -1
- package/dist/dtcg.cjs +26 -9
- package/dist/dtcg.d.cts +17 -4
- package/dist/dtcg.d.mts +17 -4
- package/dist/dtcg.mjs +26 -9
- package/dist/{helpers-CIqeJ8yd.cjs → helpers-BU40JvFA.cjs} +27 -5
- package/dist/{helpers-Dz7NfNK6.mjs → helpers-BXaKe2s3.mjs} +27 -5
- package/dist/{index-BuszkWMy.d.mts → index-BmZQVd3G.d.cts} +9 -12
- package/dist/{index-Djro6G4e.d.cts → index-XZsRrMTF.d.mts} +9 -12
- package/dist/index.cjs +2 -8
- package/dist/index.d.cts +4 -4
- package/dist/index.d.mts +4 -4
- package/dist/index.mjs +2 -5
- package/dist/{react-D2J482kx.d.mts → react-BwsjWKmo.d.mts} +59 -16
- package/dist/{react-BKLEzIN8.cjs → react-DQErMGJz.cjs} +107 -19
- package/dist/{react-BXqSYnmk.d.cts → react-Drr-QSuX.d.cts} +59 -16
- package/dist/react.cjs +3 -1
- package/dist/react.d.cts +1 -1
- package/dist/react.d.mts +1 -1
- package/dist/react.mjs +109 -19
- package/dist/runtime-entry.cjs +1 -1
- package/dist/runtime-entry.mjs +1 -1
- package/dist/{ssrScript-D3mYscp1.cjs → ssrScript-D73WcrCM.cjs} +52 -4
- package/dist/{ssrScript-DfmopH-w.mjs → ssrScript-zDK1dqXr.mjs} +52 -4
- package/dist/themes/bruttal.cjs +19 -4
- package/dist/themes/bruttal.d.cts +1 -1
- package/dist/themes/bruttal.d.mts +1 -1
- package/dist/themes/bruttal.mjs +19 -4
- package/dist/{toCssVars-CeckLjW1.mjs → toCssVars-CWTlp9St.mjs} +65 -5
- package/dist/{toCssVars-DDowz4wU.cjs → toCssVars-D0BR23cP.cjs} +65 -5
- package/dist/{tokenRegistry-DolhB5Vf.mjs → tokenRegistry-DviyqDeE.mjs} +19 -28
- package/dist/{tokenRegistry-B9zMRjpL.cjs → tokenRegistry-f_Bx_BAN.cjs} +19 -28
- package/dist/vars.cjs +8 -8
- package/dist/vars.d.cts +6 -6
- package/dist/vars.d.mts +6 -6
- package/dist/vars.mjs +8 -8
- package/dist/{withDataviz-BzZwFV2e.cjs → withDataviz-DrUtw8cc.cjs} +2 -2
- package/dist/{withDataviz-CrgXLR5A.mjs → withDataviz-Ln3sEwb7.mjs} +2 -2
- package/llms.txt +11 -9
- package/package.json +1 -1
- package/dist/themes/corporate.cjs +0 -34
- package/dist/themes/corporate.d.cts +0 -3
- package/dist/themes/corporate.d.mts +0 -3
- package/dist/themes/corporate.mjs +0 -31
- package/dist/themes/oca.cjs +0 -34
- package/dist/themes/oca.d.cts +0 -3
- package/dist/themes/oca.d.mts +0 -3
- package/dist/themes/oca.mjs +0 -31
- package/dist/themes/ventures.cjs +0 -34
- package/dist/themes/ventures.d.cts +0 -3
- package/dist/themes/ventures.d.mts +0 -3
- package/dist/themes/ventures.mjs +0 -31
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-BU40JvFA.cjs');
|
|
6
|
+
const require_tokenRegistry = require('./tokenRegistry-f_Bx_BAN.cjs');
|
|
7
7
|
|
|
8
8
|
//#region src/roots/toDTCG.ts
|
|
9
9
|
/**
|
|
@@ -26,12 +26,20 @@ const require_tokenRegistry = require('./tokenRegistry-B9zMRjpL.cjs');
|
|
|
26
26
|
*
|
|
27
27
|
* Motion leaves (SemanticMotionEntry) overridden separately:
|
|
28
28
|
* - `.duration` → 'duration'
|
|
29
|
+
*
|
|
30
|
+
* Border / focus line widths resolve to a `dimension` (`1px`, `2px`) but sit
|
|
31
|
+
* under the untyped `semantic.border.` / `semantic.focus.` prefixes:
|
|
32
|
+
* - `.width` → 'dimension'
|
|
33
|
+
*/
|
|
34
|
+
var SUFFIX_TYPE_OVERRIDES = [[".duration", "duration"], [".fontFamily", "fontFamily"], [".fontSize", "dimension"], [".fontWeight", "fontWeight"], [".lineHeight", "number"], [".letterSpacing", "dimension"], [".width", "dimension"], [".ring.color", "color"]];
|
|
35
|
+
/**
|
|
36
|
+
* Infer the DTCG `$type` for a token path, or `undefined` when the token is
|
|
37
|
+
* opaque (keyword/curve/dash-string) and has no valid DTCG scalar type — in
|
|
38
|
+
* which case `toDTCG` omits `$type` rather than emitting an invalid one.
|
|
29
39
|
*/
|
|
30
|
-
var
|
|
31
|
-
var inferType = path => {
|
|
40
|
+
var inferDtcgType = path => {
|
|
32
41
|
for (const [suffix, type] of SUFFIX_TYPE_OVERRIDES) if (path.endsWith(suffix)) return type;
|
|
33
42
|
for (const [prefix, type] of require_tokenRegistry.DTCG_TYPE_PREFIXES) if (path.startsWith(prefix)) return type;
|
|
34
|
-
return "string";
|
|
35
43
|
};
|
|
36
44
|
/**
|
|
37
45
|
* Set a value at a dot-path in a nested object, creating intermediate
|
|
@@ -71,8 +79,16 @@ var buildHitExtension = (step, theme) => {
|
|
|
71
79
|
* Root 3 — W3C Design Tokens (DTCG JSON).
|
|
72
80
|
*
|
|
73
81
|
* Convert a `ThemeTokens` into a structured token tree following the
|
|
74
|
-
* W3C Design Tokens Community Group format. Every leaf
|
|
75
|
-
*
|
|
82
|
+
* W3C Design Tokens Community Group format (2025.10). Every leaf has a
|
|
83
|
+
* `$value`; `$type` is inferred from the token path and **omitted** for opaque
|
|
84
|
+
* tokens with no valid DTCG scalar type (`$type` is optional per spec).
|
|
85
|
+
*
|
|
86
|
+
* **Profile:** this emits **fully-resolved scalar tokens** — `$value`s are
|
|
87
|
+
* concrete (no `{alias}` refs) and composite shapes (typography, shadow,
|
|
88
|
+
* border, transition) are emitted as their individual scalar leaves, not as
|
|
89
|
+
* DTCG composite objects. This is a conformant DTCG profile; richer
|
|
90
|
+
* alias-preserving / composite output is a deferred enhancement (see
|
|
91
|
+
* CONTRIBUTING.md ADR-013).
|
|
76
92
|
*
|
|
77
93
|
* Semantic hit tokens (`semantic.sizing.hit.*`) include a `$extensions`
|
|
78
94
|
* field declaring their coarse-pointer override value, so non-CSS consumers
|
|
@@ -98,10 +114,11 @@ var toDTCG = theme => {
|
|
|
98
114
|
const flat = require_helpers.toFlatTokens(theme);
|
|
99
115
|
const tree = {};
|
|
100
116
|
for (const [path, value] of Object.entries(flat)) {
|
|
117
|
+
const dtcgType = inferDtcgType(path);
|
|
101
118
|
const token = {
|
|
102
|
-
$value: value
|
|
103
|
-
$type: inferType(path)
|
|
119
|
+
$value: value
|
|
104
120
|
};
|
|
121
|
+
if (dtcgType !== void 0) token.$type = dtcgType;
|
|
105
122
|
if (path.startsWith(SEMANTIC_HIT_PREFIX)) {
|
|
106
123
|
const ext = buildHitExtension(path.slice(20), theme);
|
|
107
124
|
if (ext) token.$extensions = ext;
|
package/dist/dtcg.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
import {
|
|
2
|
+
import { a as ThemeTokens } from "./Types-a_sfpbha.cjs";
|
|
3
3
|
|
|
4
4
|
//#region src/roots/toDTCG.d.ts
|
|
5
5
|
/**
|
|
@@ -10,7 +10,12 @@ import { i as ThemeTokens } from "./Types-BiBa17RL.cjs";
|
|
|
10
10
|
*/
|
|
11
11
|
interface DTCGToken {
|
|
12
12
|
$value: string | number;
|
|
13
|
-
|
|
13
|
+
/**
|
|
14
|
+
* W3C DTCG type. **Optional** — omitted for opaque/keyword tokens that have
|
|
15
|
+
* no valid DTCG scalar type (`$type` is optional in the DTCG spec). There is
|
|
16
|
+
* no `'string'` DTCG type; emitting one would break conformant importers.
|
|
17
|
+
*/
|
|
18
|
+
$type?: string;
|
|
14
19
|
$extensions?: Record<string, unknown>;
|
|
15
20
|
}
|
|
16
21
|
/**
|
|
@@ -23,8 +28,16 @@ type DTCGTokenTree = DTCGToken | {
|
|
|
23
28
|
* Root 3 — W3C Design Tokens (DTCG JSON).
|
|
24
29
|
*
|
|
25
30
|
* Convert a `ThemeTokens` into a structured token tree following the
|
|
26
|
-
* W3C Design Tokens Community Group format. Every leaf
|
|
27
|
-
*
|
|
31
|
+
* W3C Design Tokens Community Group format (2025.10). Every leaf has a
|
|
32
|
+
* `$value`; `$type` is inferred from the token path and **omitted** for opaque
|
|
33
|
+
* tokens with no valid DTCG scalar type (`$type` is optional per spec).
|
|
34
|
+
*
|
|
35
|
+
* **Profile:** this emits **fully-resolved scalar tokens** — `$value`s are
|
|
36
|
+
* concrete (no `{alias}` refs) and composite shapes (typography, shadow,
|
|
37
|
+
* border, transition) are emitted as their individual scalar leaves, not as
|
|
38
|
+
* DTCG composite objects. This is a conformant DTCG profile; richer
|
|
39
|
+
* alias-preserving / composite output is a deferred enhancement (see
|
|
40
|
+
* CONTRIBUTING.md ADR-013).
|
|
28
41
|
*
|
|
29
42
|
* Semantic hit tokens (`semantic.sizing.hit.*`) include a `$extensions`
|
|
30
43
|
* field declaring their coarse-pointer override value, so non-CSS consumers
|
package/dist/dtcg.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
import {
|
|
2
|
+
import { a as ThemeTokens } from "./Types-a_sfpbha.mjs";
|
|
3
3
|
|
|
4
4
|
//#region src/roots/toDTCG.d.ts
|
|
5
5
|
/**
|
|
@@ -10,7 +10,12 @@ import { i as ThemeTokens } from "./Types-BiBa17RL.mjs";
|
|
|
10
10
|
*/
|
|
11
11
|
interface DTCGToken {
|
|
12
12
|
$value: string | number;
|
|
13
|
-
|
|
13
|
+
/**
|
|
14
|
+
* W3C DTCG type. **Optional** — omitted for opaque/keyword tokens that have
|
|
15
|
+
* no valid DTCG scalar type (`$type` is optional in the DTCG spec). There is
|
|
16
|
+
* no `'string'` DTCG type; emitting one would break conformant importers.
|
|
17
|
+
*/
|
|
18
|
+
$type?: string;
|
|
14
19
|
$extensions?: Record<string, unknown>;
|
|
15
20
|
}
|
|
16
21
|
/**
|
|
@@ -23,8 +28,16 @@ type DTCGTokenTree = DTCGToken | {
|
|
|
23
28
|
* Root 3 — W3C Design Tokens (DTCG JSON).
|
|
24
29
|
*
|
|
25
30
|
* Convert a `ThemeTokens` into a structured token tree following the
|
|
26
|
-
* W3C Design Tokens Community Group format. Every leaf
|
|
27
|
-
*
|
|
31
|
+
* W3C Design Tokens Community Group format (2025.10). Every leaf has a
|
|
32
|
+
* `$value`; `$type` is inferred from the token path and **omitted** for opaque
|
|
33
|
+
* tokens with no valid DTCG scalar type (`$type` is optional per spec).
|
|
34
|
+
*
|
|
35
|
+
* **Profile:** this emits **fully-resolved scalar tokens** — `$value`s are
|
|
36
|
+
* concrete (no `{alias}` refs) and composite shapes (typography, shadow,
|
|
37
|
+
* border, transition) are emitted as their individual scalar leaves, not as
|
|
38
|
+
* DTCG composite objects. This is a conformant DTCG profile; richer
|
|
39
|
+
* alias-preserving / composite output is a deferred enhancement (see
|
|
40
|
+
* CONTRIBUTING.md ADR-013).
|
|
28
41
|
*
|
|
29
42
|
* Semantic hit tokens (`semantic.sizing.hit.*`) include a `$extensions`
|
|
30
43
|
* field declaring their coarse-pointer override value, so non-CSS consumers
|
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-BXaKe2s3.mjs";
|
|
3
|
+
import { n as DTCG_TYPE_PREFIXES } from "./tokenRegistry-DviyqDeE.mjs";
|
|
4
4
|
|
|
5
5
|
//#region src/roots/toDTCG.ts
|
|
6
6
|
/**
|
|
@@ -23,12 +23,20 @@ import { n as DTCG_TYPE_PREFIXES } from "./tokenRegistry-DolhB5Vf.mjs";
|
|
|
23
23
|
*
|
|
24
24
|
* Motion leaves (SemanticMotionEntry) overridden separately:
|
|
25
25
|
* - `.duration` → 'duration'
|
|
26
|
+
*
|
|
27
|
+
* Border / focus line widths resolve to a `dimension` (`1px`, `2px`) but sit
|
|
28
|
+
* under the untyped `semantic.border.` / `semantic.focus.` prefixes:
|
|
29
|
+
* - `.width` → 'dimension'
|
|
30
|
+
*/
|
|
31
|
+
var SUFFIX_TYPE_OVERRIDES = [[".duration", "duration"], [".fontFamily", "fontFamily"], [".fontSize", "dimension"], [".fontWeight", "fontWeight"], [".lineHeight", "number"], [".letterSpacing", "dimension"], [".width", "dimension"], [".ring.color", "color"]];
|
|
32
|
+
/**
|
|
33
|
+
* Infer the DTCG `$type` for a token path, or `undefined` when the token is
|
|
34
|
+
* opaque (keyword/curve/dash-string) and has no valid DTCG scalar type — in
|
|
35
|
+
* which case `toDTCG` omits `$type` rather than emitting an invalid one.
|
|
26
36
|
*/
|
|
27
|
-
var
|
|
28
|
-
var inferType = path => {
|
|
37
|
+
var inferDtcgType = path => {
|
|
29
38
|
for (const [suffix, type] of SUFFIX_TYPE_OVERRIDES) if (path.endsWith(suffix)) return type;
|
|
30
39
|
for (const [prefix, type] of DTCG_TYPE_PREFIXES) if (path.startsWith(prefix)) return type;
|
|
31
|
-
return "string";
|
|
32
40
|
};
|
|
33
41
|
/**
|
|
34
42
|
* Set a value at a dot-path in a nested object, creating intermediate
|
|
@@ -68,8 +76,16 @@ var buildHitExtension = (step, theme) => {
|
|
|
68
76
|
* Root 3 — W3C Design Tokens (DTCG JSON).
|
|
69
77
|
*
|
|
70
78
|
* Convert a `ThemeTokens` into a structured token tree following the
|
|
71
|
-
* W3C Design Tokens Community Group format. Every leaf
|
|
72
|
-
*
|
|
79
|
+
* W3C Design Tokens Community Group format (2025.10). Every leaf has a
|
|
80
|
+
* `$value`; `$type` is inferred from the token path and **omitted** for opaque
|
|
81
|
+
* tokens with no valid DTCG scalar type (`$type` is optional per spec).
|
|
82
|
+
*
|
|
83
|
+
* **Profile:** this emits **fully-resolved scalar tokens** — `$value`s are
|
|
84
|
+
* concrete (no `{alias}` refs) and composite shapes (typography, shadow,
|
|
85
|
+
* border, transition) are emitted as their individual scalar leaves, not as
|
|
86
|
+
* DTCG composite objects. This is a conformant DTCG profile; richer
|
|
87
|
+
* alias-preserving / composite output is a deferred enhancement (see
|
|
88
|
+
* CONTRIBUTING.md ADR-013).
|
|
73
89
|
*
|
|
74
90
|
* Semantic hit tokens (`semantic.sizing.hit.*`) include a `$extensions`
|
|
75
91
|
* field declaring their coarse-pointer override value, so non-CSS consumers
|
|
@@ -95,10 +111,11 @@ var toDTCG = theme => {
|
|
|
95
111
|
const flat = toFlatTokens(theme);
|
|
96
112
|
const tree = {};
|
|
97
113
|
for (const [path, value] of Object.entries(flat)) {
|
|
114
|
+
const dtcgType = inferDtcgType(path);
|
|
98
115
|
const token = {
|
|
99
|
-
$value: value
|
|
100
|
-
$type: inferType(path)
|
|
116
|
+
$value: value
|
|
101
117
|
};
|
|
118
|
+
if (dtcgType !== void 0) token.$type = dtcgType;
|
|
102
119
|
if (path.startsWith(SEMANTIC_HIT_PREFIX)) {
|
|
103
120
|
const ext = buildHitExtension(path.slice(20), theme);
|
|
104
121
|
if (ext) token.$extensions = ext;
|
|
@@ -1,8 +1,19 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
2
|
//#region src/roots/helpers.ts
|
|
3
|
-
/**
|
|
3
|
+
/**
|
|
4
|
+
* Check if a value is a **pure** token reference like `{core.colors.brand.500}`.
|
|
5
|
+
*
|
|
6
|
+
* A pure ref is a single `{path}` with no interior braces. Compound expressions
|
|
7
|
+
* (`clamp({a}, {b})`) and multi-ref strings (`{a} {b}`) are NOT pure refs — they
|
|
8
|
+
* start `{`/end `}` but carry interior braces, and must go through the compound
|
|
9
|
+
* resolution path instead. Without the interior-brace check `{a} {b}` would be
|
|
10
|
+
* mis-parsed as the single path `a} {b`.
|
|
11
|
+
*/
|
|
12
|
+
var hasInteriorBraces = value => {
|
|
13
|
+
return value.indexOf("{", 1) !== -1 || value.indexOf("}") !== value.length - 1;
|
|
14
|
+
};
|
|
4
15
|
var isTokenRef = value => {
|
|
5
|
-
return typeof value === "string" && value.length > 2 && value.startsWith("{") && value.endsWith("}");
|
|
16
|
+
return typeof value === "string" && value.length > 2 && value.startsWith("{") && value.endsWith("}") && !hasInteriorBraces(value);
|
|
6
17
|
};
|
|
7
18
|
/** Extract the inner path from a token reference: `{core.colors.brand.500}` → `core.colors.brand.500` */
|
|
8
19
|
var extractRefPath = ref => {
|
|
@@ -24,6 +35,14 @@ var isPlainObject = value => {
|
|
|
24
35
|
return typeof value === "object" && value !== null && !Array.isArray(value);
|
|
25
36
|
};
|
|
26
37
|
/**
|
|
38
|
+
* Prototype-chain keys that must never be written from override data —
|
|
39
|
+
* `result['__proto__']` reaches the prototype setter, not an own property.
|
|
40
|
+
* Guards `createTheme`'s public `overrides` against prototype pollution.
|
|
41
|
+
*/
|
|
42
|
+
var isUnsafeMergeKey = key => {
|
|
43
|
+
return key === "__proto__" || key === "constructor" || key === "prototype";
|
|
44
|
+
};
|
|
45
|
+
/**
|
|
27
46
|
* Recursively merges `overrides` into `base`.
|
|
28
47
|
* - Plain objects are merged recursively.
|
|
29
48
|
* - All other values (primitives, arrays) are replaced.
|
|
@@ -34,6 +53,7 @@ var deepMerge = (base, overrides) => {
|
|
|
34
53
|
...base
|
|
35
54
|
};
|
|
36
55
|
for (const key of Object.keys(overrides)) {
|
|
56
|
+
if (isUnsafeMergeKey(key)) continue;
|
|
37
57
|
const baseVal = result[key];
|
|
38
58
|
const overVal = overrides[key];
|
|
39
59
|
if (overVal === void 0) continue;
|
|
@@ -114,8 +134,8 @@ var toFlatTokens = (theme, options = {}) => {
|
|
|
114
134
|
/**
|
|
115
135
|
* Resolve all embedded `{path}` refs in a raw string expression.
|
|
116
136
|
*
|
|
117
|
-
* Handles both pure refs (`{core.
|
|
118
|
-
* (`clamp({core.
|
|
137
|
+
* Handles both pure refs (`{core.spacing.4}`) and compound expressions
|
|
138
|
+
* (`clamp({core.spacing.4}, {core.spacing.6}, {core.spacing.12})`).
|
|
119
139
|
*/
|
|
120
140
|
const resolveInline = (value, seen, ownerKey) => {
|
|
121
141
|
return value.replace(COMPOUND_REF_RE, (_match, path) => {
|
|
@@ -128,7 +148,9 @@ var toFlatTokens = (theme, options = {}) => {
|
|
|
128
148
|
reportUnresolved(ownerKey, path, "circular reference");
|
|
129
149
|
return `{${path}}`;
|
|
130
150
|
}
|
|
131
|
-
const
|
|
151
|
+
const childSeen = new Set(seen).add(path);
|
|
152
|
+
const resolved = resolveRef(target, childSeen, ownerKey);
|
|
153
|
+
if (typeof resolved === "string" && resolved.includes("{")) return resolveInline(resolved, childSeen, ownerKey);
|
|
132
154
|
return String(resolved);
|
|
133
155
|
});
|
|
134
156
|
};
|
|
@@ -1,8 +1,19 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
2
|
//#region src/roots/helpers.ts
|
|
3
|
-
/**
|
|
3
|
+
/**
|
|
4
|
+
* Check if a value is a **pure** token reference like `{core.colors.brand.500}`.
|
|
5
|
+
*
|
|
6
|
+
* A pure ref is a single `{path}` with no interior braces. Compound expressions
|
|
7
|
+
* (`clamp({a}, {b})`) and multi-ref strings (`{a} {b}`) are NOT pure refs — they
|
|
8
|
+
* start `{`/end `}` but carry interior braces, and must go through the compound
|
|
9
|
+
* resolution path instead. Without the interior-brace check `{a} {b}` would be
|
|
10
|
+
* mis-parsed as the single path `a} {b`.
|
|
11
|
+
*/
|
|
12
|
+
var hasInteriorBraces = value => {
|
|
13
|
+
return value.indexOf("{", 1) !== -1 || value.indexOf("}") !== value.length - 1;
|
|
14
|
+
};
|
|
4
15
|
var isTokenRef = value => {
|
|
5
|
-
return typeof value === "string" && value.length > 2 && value.startsWith("{") && value.endsWith("}");
|
|
16
|
+
return typeof value === "string" && value.length > 2 && value.startsWith("{") && value.endsWith("}") && !hasInteriorBraces(value);
|
|
6
17
|
};
|
|
7
18
|
/** Extract the inner path from a token reference: `{core.colors.brand.500}` → `core.colors.brand.500` */
|
|
8
19
|
var extractRefPath = ref => {
|
|
@@ -24,6 +35,14 @@ var isPlainObject = value => {
|
|
|
24
35
|
return typeof value === "object" && value !== null && !Array.isArray(value);
|
|
25
36
|
};
|
|
26
37
|
/**
|
|
38
|
+
* Prototype-chain keys that must never be written from override data —
|
|
39
|
+
* `result['__proto__']` reaches the prototype setter, not an own property.
|
|
40
|
+
* Guards `createTheme`'s public `overrides` against prototype pollution.
|
|
41
|
+
*/
|
|
42
|
+
var isUnsafeMergeKey = key => {
|
|
43
|
+
return key === "__proto__" || key === "constructor" || key === "prototype";
|
|
44
|
+
};
|
|
45
|
+
/**
|
|
27
46
|
* Recursively merges `overrides` into `base`.
|
|
28
47
|
* - Plain objects are merged recursively.
|
|
29
48
|
* - All other values (primitives, arrays) are replaced.
|
|
@@ -34,6 +53,7 @@ var deepMerge = (base, overrides) => {
|
|
|
34
53
|
...base
|
|
35
54
|
};
|
|
36
55
|
for (const key of Object.keys(overrides)) {
|
|
56
|
+
if (isUnsafeMergeKey(key)) continue;
|
|
37
57
|
const baseVal = result[key];
|
|
38
58
|
const overVal = overrides[key];
|
|
39
59
|
if (overVal === void 0) continue;
|
|
@@ -114,8 +134,8 @@ var toFlatTokens = (theme, options = {}) => {
|
|
|
114
134
|
/**
|
|
115
135
|
* Resolve all embedded `{path}` refs in a raw string expression.
|
|
116
136
|
*
|
|
117
|
-
* Handles both pure refs (`{core.
|
|
118
|
-
* (`clamp({core.
|
|
137
|
+
* Handles both pure refs (`{core.spacing.4}`) and compound expressions
|
|
138
|
+
* (`clamp({core.spacing.4}, {core.spacing.6}, {core.spacing.12})`).
|
|
119
139
|
*/
|
|
120
140
|
const resolveInline = (value, seen, ownerKey) => {
|
|
121
141
|
return value.replace(COMPOUND_REF_RE, (_match, path) => {
|
|
@@ -128,7 +148,9 @@ var toFlatTokens = (theme, options = {}) => {
|
|
|
128
148
|
reportUnresolved(ownerKey, path, "circular reference");
|
|
129
149
|
return `{${path}}`;
|
|
130
150
|
}
|
|
131
|
-
const
|
|
151
|
+
const childSeen = new Set(seen).add(path);
|
|
152
|
+
const resolved = resolveRef(target, childSeen, ownerKey);
|
|
153
|
+
if (typeof resolved === "string" && resolved.includes("{")) return resolveInline(resolved, childSeen, ownerKey);
|
|
132
154
|
return String(resolved);
|
|
133
155
|
});
|
|
134
156
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
import { a as
|
|
2
|
+
import { a as ThemeTokens, i as ThemeBundle, o as DeepPartial, r as ThemeBrief, t as ModeOverride } from "./Types-a_sfpbha.cjs";
|
|
3
3
|
//#region src/baseTheme.d.ts
|
|
4
4
|
/**
|
|
5
5
|
* **Foundation** — Neutral baseline theme.
|
|
@@ -85,7 +85,8 @@ declare const createTheme: ({
|
|
|
85
85
|
baseMode,
|
|
86
86
|
base,
|
|
87
87
|
overrides,
|
|
88
|
-
alternate
|
|
88
|
+
alternate,
|
|
89
|
+
brief
|
|
89
90
|
}?: {
|
|
90
91
|
/**
|
|
91
92
|
* Parent bundle to inherit from. `base`, `baseMode`, and `alternate` all
|
|
@@ -104,18 +105,14 @@ declare const createTheme: ({
|
|
|
104
105
|
* Pass `null` to opt out of any alternate (single-mode theme).
|
|
105
106
|
*/
|
|
106
107
|
alternate?: ModeOverride | null;
|
|
108
|
+
/**
|
|
109
|
+
* Machine-readable design brief. Inherited from `extends.meta` when omitted.
|
|
110
|
+
* Orthogonal to tokens — never affects DTCG/CSS output.
|
|
111
|
+
*/
|
|
112
|
+
brief?: ThemeBrief;
|
|
107
113
|
}) => ThemeBundle;
|
|
108
114
|
//#endregion
|
|
109
115
|
//#region src/themes/bruttal.d.ts
|
|
110
116
|
declare const bruttal: ThemeBundle;
|
|
111
117
|
//#endregion
|
|
112
|
-
|
|
113
|
-
declare const corporate: ThemeBundle;
|
|
114
|
-
//#endregion
|
|
115
|
-
//#region src/themes/oca.d.ts
|
|
116
|
-
declare const oca: ThemeBundle;
|
|
117
|
-
//#endregion
|
|
118
|
-
//#region src/themes/ventures.d.ts
|
|
119
|
-
declare const ventures: ThemeBundle;
|
|
120
|
-
//#endregion
|
|
121
|
-
export { createTheme as a, bruttal as i, oca as n, baseTheme as o, corporate as r, darkAlternate as s, ventures as t };
|
|
118
|
+
export { darkAlternate as i, createTheme as n, baseTheme as r, bruttal as t };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
import { a as
|
|
2
|
+
import { a as ThemeTokens, i as ThemeBundle, o as DeepPartial, r as ThemeBrief, t as ModeOverride } from "./Types-a_sfpbha.mjs";
|
|
3
3
|
//#region src/baseTheme.d.ts
|
|
4
4
|
/**
|
|
5
5
|
* **Foundation** — Neutral baseline theme.
|
|
@@ -85,7 +85,8 @@ declare const createTheme: ({
|
|
|
85
85
|
baseMode,
|
|
86
86
|
base,
|
|
87
87
|
overrides,
|
|
88
|
-
alternate
|
|
88
|
+
alternate,
|
|
89
|
+
brief
|
|
89
90
|
}?: {
|
|
90
91
|
/**
|
|
91
92
|
* Parent bundle to inherit from. `base`, `baseMode`, and `alternate` all
|
|
@@ -104,18 +105,14 @@ declare const createTheme: ({
|
|
|
104
105
|
* Pass `null` to opt out of any alternate (single-mode theme).
|
|
105
106
|
*/
|
|
106
107
|
alternate?: ModeOverride | null;
|
|
108
|
+
/**
|
|
109
|
+
* Machine-readable design brief. Inherited from `extends.meta` when omitted.
|
|
110
|
+
* Orthogonal to tokens — never affects DTCG/CSS output.
|
|
111
|
+
*/
|
|
112
|
+
brief?: ThemeBrief;
|
|
107
113
|
}) => ThemeBundle;
|
|
108
114
|
//#endregion
|
|
109
115
|
//#region src/themes/bruttal.d.ts
|
|
110
116
|
declare const bruttal: ThemeBundle;
|
|
111
117
|
//#endregion
|
|
112
|
-
|
|
113
|
-
declare const corporate: ThemeBundle;
|
|
114
|
-
//#endregion
|
|
115
|
-
//#region src/themes/oca.d.ts
|
|
116
|
-
declare const oca: ThemeBundle;
|
|
117
|
-
//#endregion
|
|
118
|
-
//#region src/themes/ventures.d.ts
|
|
119
|
-
declare const ventures: ThemeBundle;
|
|
120
|
-
//#endregion
|
|
121
|
-
export { createTheme as a, bruttal as i, oca as n, baseTheme as o, corporate as r, darkAlternate as s, ventures as t };
|
|
118
|
+
export { darkAlternate as i, createTheme as n, baseTheme as r, bruttal as t };
|
package/dist/index.cjs
CHANGED
|
@@ -2,15 +2,9 @@
|
|
|
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-B7H0xSVp.cjs');
|
|
6
6
|
const require_themes_bruttal = require('./themes/bruttal.cjs');
|
|
7
|
-
const require_themes_corporate = require('./themes/corporate.cjs');
|
|
8
|
-
const require_themes_oca = require('./themes/oca.cjs');
|
|
9
|
-
const require_themes_ventures = require('./themes/ventures.cjs');
|
|
10
7
|
exports.baseTheme = require_createTheme.baseTheme;
|
|
11
8
|
exports.bruttal = require_themes_bruttal.bruttal;
|
|
12
|
-
exports.corporate = require_themes_corporate.corporate;
|
|
13
9
|
exports.createTheme = require_createTheme.createTheme;
|
|
14
|
-
exports.darkAlternate = require_createTheme.darkAlternate;
|
|
15
|
-
exports.oca = require_themes_oca.oca;
|
|
16
|
-
exports.ventures = require_themes_ventures.ventures;
|
|
10
|
+
exports.darkAlternate = require_createTheme.darkAlternate;
|
package/dist/index.d.cts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
|
-
import { a as
|
|
3
|
-
import {
|
|
2
|
+
import { a as ThemeTokens, i as ThemeBundle, n as SemanticTokens, o as DeepPartial, r as ThemeBrief, t as ModeOverride } from "./Types-a_sfpbha.cjs";
|
|
3
|
+
import { i as darkAlternate, n as createTheme, r as baseTheme, t as bruttal } from "./index-BmZQVd3G.cjs";
|
|
4
4
|
import { o as ThemeMode } from "./ssrScript-BVysxDws.cjs";
|
|
5
|
-
import { c as ThemeStylesProps, n as ThemeHeadProps } from "./react-
|
|
6
|
-
export { type DeepPartial, type ModeOverride, type SemanticTokens, type ThemeBundle, type ThemeHeadProps, type ThemeMode, type ThemeStylesProps, type ThemeTokens, baseTheme, bruttal,
|
|
5
|
+
import { c as ThemeStylesProps, n as ThemeHeadProps } from "./react-Drr-QSuX.cjs";
|
|
6
|
+
export { type DeepPartial, type ModeOverride, type SemanticTokens, type ThemeBrief, type ThemeBundle, type ThemeHeadProps, type ThemeMode, type ThemeStylesProps, type ThemeTokens, baseTheme, bruttal, createTheme, darkAlternate };
|
package/dist/index.d.mts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
|
-
import { a as
|
|
3
|
-
import {
|
|
2
|
+
import { a as ThemeTokens, i as ThemeBundle, n as SemanticTokens, o as DeepPartial, r as ThemeBrief, t as ModeOverride } from "./Types-a_sfpbha.mjs";
|
|
3
|
+
import { i as darkAlternate, n as createTheme, r as baseTheme, t as bruttal } from "./index-XZsRrMTF.mjs";
|
|
4
4
|
import { o as ThemeMode } from "./ssrScript-BVysxDws.mjs";
|
|
5
|
-
import { c as ThemeStylesProps, n as ThemeHeadProps } from "./react-
|
|
6
|
-
export { type DeepPartial, type ModeOverride, type SemanticTokens, type ThemeBundle, type ThemeHeadProps, type ThemeMode, type ThemeStylesProps, type ThemeTokens, baseTheme, bruttal,
|
|
5
|
+
import { c as ThemeStylesProps, n as ThemeHeadProps } from "./react-BwsjWKmo.mjs";
|
|
6
|
+
export { type DeepPartial, type ModeOverride, type SemanticTokens, type ThemeBrief, type ThemeBundle, type ThemeHeadProps, type ThemeMode, type ThemeStylesProps, type ThemeTokens, baseTheme, bruttal, createTheme, darkAlternate };
|
package/dist/index.mjs
CHANGED
|
@@ -1,7 +1,4 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
|
-
import {
|
|
2
|
+
import { a as darkAlternate, i as baseTheme, n as createTheme } from "./createTheme-Bm9LVQ4w.mjs";
|
|
3
3
|
import { bruttal } from "./themes/bruttal.mjs";
|
|
4
|
-
|
|
5
|
-
import { oca } from "./themes/oca.mjs";
|
|
6
|
-
import { ventures } from "./themes/ventures.mjs";
|
|
7
|
-
export { baseTheme, bruttal, corporate, createTheme, darkAlternate, oca, ventures };
|
|
4
|
+
export { baseTheme, bruttal, createTheme, darkAlternate };
|
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
|
|
2
|
-
import {
|
|
2
|
+
import { i as ThemeBundle, n as SemanticTokens } from "./Types-a_sfpbha.mjs";
|
|
3
3
|
import { a as ResolvedMode, o as ThemeMode, t as ThemeScriptConfig } from "./ssrScript-BVysxDws.mjs";
|
|
4
4
|
import * as React from "react";
|
|
5
5
|
|
|
6
6
|
//#region src/react.d.ts
|
|
7
|
+
/**
|
|
8
|
+
* Accepted shapes for the `root` prop: a concrete element, or a ref object.
|
|
9
|
+
* Prefer the ref form — refs are populated before layout effects run, so the
|
|
10
|
+
* runtime attaches directly to the target element with no transient attach
|
|
11
|
+
* to `<html>` on the first render (the element form is `null` during the
|
|
12
|
+
* first render when read from `ref.current`).
|
|
13
|
+
*/
|
|
14
|
+
type ThemeRootInput = HTMLElement | React.RefObject<HTMLElement | null>;
|
|
7
15
|
/**
|
|
8
16
|
* Props for the `ThemeProvider` component.
|
|
9
17
|
*/
|
|
@@ -24,7 +32,15 @@ interface ThemeProviderProps {
|
|
|
24
32
|
*
|
|
25
33
|
* Passing `theme` enables `useTokens()` and `useResolvedTokens()` for all
|
|
26
34
|
* descendants, and automatically injects the CSS Custom Properties `<style>`
|
|
27
|
-
* tag into the document head (React 19 hoisting).
|
|
35
|
+
* tag into the document head (React 19 hoisting, deduped by `href`).
|
|
36
|
+
*
|
|
37
|
+
* **React version:** auto-injection into `<head>` requires **React 19** style
|
|
38
|
+
* hoisting. On React 18 the `<style>` renders inline where the provider sits
|
|
39
|
+
* (not hoisted); use `<ThemeHead>` / `<ThemeStyles>` in your `<head>` for
|
|
40
|
+
* explicit injection there — but do not also pass `theme` here, since the
|
|
41
|
+
* href-less `<ThemeHead>`/`<ThemeStyles>` tag does not dedup against this
|
|
42
|
+
* provider's href-keyed one. The stable `href` only collapses multiple themed
|
|
43
|
+
* `<ThemeProvider>`s sharing a `themeId` into one tag on 19.
|
|
28
44
|
*
|
|
29
45
|
* @example
|
|
30
46
|
* ```tsx
|
|
@@ -75,25 +91,32 @@ interface ThemeProviderProps {
|
|
|
75
91
|
onModeChange?: (mode: ThemeMode, resolvedMode: ResolvedMode) => void;
|
|
76
92
|
/**
|
|
77
93
|
* Root element to anchor `data-tt-theme` / `data-tt-mode` attributes.
|
|
78
|
-
* Defaults to `document.documentElement`. Pass a container
|
|
79
|
-
*
|
|
94
|
+
* Defaults to `document.documentElement`. Pass a container for Storybook
|
|
95
|
+
* isolation or micro-frontend use cases.
|
|
80
96
|
*
|
|
81
|
-
*
|
|
82
|
-
*
|
|
83
|
-
*
|
|
97
|
+
* **Must be paired with `themeId`.** Without a `themeId`, the generated CSS
|
|
98
|
+
* targets `:root` / `:root[data-tt-mode="dark"]` (the `<html>` element),
|
|
99
|
+
* while the attributes are written to this element — the alternate mode CSS
|
|
100
|
+
* would never match. A dev-mode warning fires on this combination.
|
|
101
|
+
*
|
|
102
|
+
* **Prefer passing the ref object itself** (`root={rootRef}`): refs are
|
|
103
|
+
* populated before layout effects, so the runtime attaches directly to the
|
|
104
|
+
* element. Passing `rootRef.current ?? undefined` also works, but the value
|
|
105
|
+
* is `null` on the first render, causing one transient attach to `<html>`
|
|
106
|
+
* before the runtime is recreated on the element.
|
|
84
107
|
*
|
|
85
108
|
* @example
|
|
86
109
|
* ```tsx
|
|
87
110
|
* // Storybook decorator — isolates each story from <html>
|
|
88
111
|
* const rootRef = React.useRef<HTMLDivElement>(null);
|
|
89
112
|
* <div ref={rootRef}>
|
|
90
|
-
* <ThemeProvider theme={myTheme} root={rootRef
|
|
113
|
+
* <ThemeProvider theme={myTheme} themeId="story" root={rootRef}>
|
|
91
114
|
* <Story />
|
|
92
115
|
* </ThemeProvider>
|
|
93
116
|
* </div>
|
|
94
117
|
* ```
|
|
95
118
|
*/
|
|
96
|
-
root?:
|
|
119
|
+
root?: ThemeRootInput;
|
|
97
120
|
children: React.ReactNode;
|
|
98
121
|
}
|
|
99
122
|
/**
|
|
@@ -170,11 +193,11 @@ declare const useColorMode: () => UseColorModeResult;
|
|
|
170
193
|
* inline styles produces silently broken rendering:
|
|
171
194
|
*
|
|
172
195
|
* ```tsx
|
|
173
|
-
* // ✗ WRONG —
|
|
174
|
-
* <div style={{ color: tokens.colors.
|
|
196
|
+
* // ✗ WRONG — the leaf is '{core.colors.neutral.1000}' (a ref string), not a CSS color
|
|
197
|
+
* <div style={{ color: tokens.colors.action.primary.text.default }} />
|
|
175
198
|
*
|
|
176
199
|
* // ✓ CSS consumers — use vars:
|
|
177
|
-
* <div style={{ color: 'var(--tt-
|
|
200
|
+
* <div style={{ color: 'var(--tt-colors-action-primary-text-default)' }} />
|
|
178
201
|
*
|
|
179
202
|
* // ✓ Non-CSS consumers (React Native, canvas) — use useResolvedTokens():
|
|
180
203
|
* const resolved = useResolvedTokens();
|
|
@@ -189,8 +212,8 @@ declare const useColorMode: () => UseColorModeResult;
|
|
|
189
212
|
*
|
|
190
213
|
* const Button = () => {
|
|
191
214
|
* const tokens = useTokens(); // introspection only
|
|
192
|
-
* // tokens.colors.action.primary.background.default → '{core.colors.
|
|
193
|
-
* return <button style={{ background: 'var(--tt-action-primary-background-default)' }} />;
|
|
215
|
+
* // tokens.colors.action.primary.background.default → '{core.colors.neutral.1000}'
|
|
216
|
+
* return <button style={{ background: 'var(--tt-colors-action-primary-background-default)' }} />;
|
|
194
217
|
* };
|
|
195
218
|
* ```
|
|
196
219
|
*/
|
|
@@ -210,13 +233,21 @@ declare const useTokens: () => SemanticTokens;
|
|
|
210
233
|
*
|
|
211
234
|
* ```tsx
|
|
212
235
|
* // ✓ CSS (browser)
|
|
213
|
-
* <div style={{ color: 'var(--tt-
|
|
236
|
+
* <div style={{ color: 'var(--tt-colors-informational-primary-text-default)' }} />
|
|
214
237
|
*
|
|
215
238
|
* // ✓ Non-CSS (React Native, canvas)
|
|
216
239
|
* const resolved = useResolvedTokens();
|
|
217
240
|
* <View style={{ backgroundColor: resolved['semantic.colors.action.primary.background.default'] }} />
|
|
218
241
|
* ```
|
|
219
242
|
*
|
|
243
|
+
* ### ⚠ CSS-coupled tokens stay unresolved
|
|
244
|
+
* A registered set of dimensional tokens (model.md §8 — spacing steps, fluid
|
|
245
|
+
* `text.*.fontSize`, `sizing.hit.*`, `sizing.viewport.*`, `sizing.measure.reading`,
|
|
246
|
+
* `spacing.gutter.*`) carry CSS-only constructs (`var()`, `calc()`, `clamp()`,
|
|
247
|
+
* `cqi`, `dvh`, `ch`). This hook returns those **as-is** — they are not usable
|
|
248
|
+
* outside a CSS engine. Colors, opacity, z-index, font weights/leading and
|
|
249
|
+
* other scalar tokens resolve to plain raw values and are safe everywhere.
|
|
250
|
+
*
|
|
220
251
|
* Requires `<ThemeProvider theme={...}>`.
|
|
221
252
|
*
|
|
222
253
|
* @example
|
|
@@ -288,6 +319,13 @@ interface ThemeStylesProps {
|
|
|
288
319
|
themeId?: string;
|
|
289
320
|
/** CSP nonce for the inline style tag. */
|
|
290
321
|
nonce?: string;
|
|
322
|
+
/**
|
|
323
|
+
* Emit the `@media (prefers-color-scheme)` fallback block (themeId-less
|
|
324
|
+
* bundles only). Default `true`. Set `false` when the app's `defaultMode`
|
|
325
|
+
* is a fixed `'light'`/`'dark'` rather than `'system'` — `<ThemeHead>`
|
|
326
|
+
* derives this automatically from its `defaultMode`.
|
|
327
|
+
*/
|
|
328
|
+
systemModeFallback?: boolean;
|
|
291
329
|
}
|
|
292
330
|
/**
|
|
293
331
|
* Renders an inline `<style>` tag with all CSS Custom Properties for a theme
|
|
@@ -301,6 +339,10 @@ interface ThemeStylesProps {
|
|
|
301
339
|
* `dangerouslySetInnerHTML` is safe: content comes exclusively from
|
|
302
340
|
* `toCssVars()` (a pure internal function) — no user input is interpolated.
|
|
303
341
|
*
|
|
342
|
+
* Renders a plain inline `<style>` where you place it (put it in `<head>`).
|
|
343
|
+
* Do **not** also pass `theme` to `<ThemeProvider>` — that injects a second
|
|
344
|
+
* copy; pass `theme` to the head component only (see README SSR section).
|
|
345
|
+
*
|
|
304
346
|
* @example
|
|
305
347
|
* ```tsx
|
|
306
348
|
* // SSR escape hatch — no themeId needed for canonical 1-theme model
|
|
@@ -334,7 +376,8 @@ interface ThemeStylesProps {
|
|
|
334
376
|
declare const ThemeStyles: ({
|
|
335
377
|
theme,
|
|
336
378
|
themeId,
|
|
337
|
-
nonce
|
|
379
|
+
nonce,
|
|
380
|
+
systemModeFallback
|
|
338
381
|
}: ThemeStylesProps) => any;
|
|
339
382
|
/**
|
|
340
383
|
* Props for the `ThemeHead` component.
|