@ttoss/fsl-theme 1.1.22 → 2.0.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 +14 -12
- package/dist/{Types-BiBa17RL.d.cts → Types-BkaxtsMv.d.cts} +61 -13
- package/dist/{Types-BiBa17RL.d.mts → Types-BkaxtsMv.d.mts} +61 -13
- package/dist/{baseBundle-BWbICg4p.cjs → baseBundle-DdRSa5mf.cjs} +3 -2
- package/dist/{baseBundle-DiYlHNG5.mjs → baseBundle-R7WyjyTw.mjs} +3 -2
- package/dist/{createTheme-BHGc1IFI.cjs → createTheme--UFgVlEn.cjs} +34 -3
- package/dist/{createTheme-C1r5nJco.mjs → createTheme-B6tVIikC.mjs} +29 -4
- package/dist/css.cjs +2 -2
- package/dist/css.d.cts +1 -1
- package/dist/css.d.mts +1 -1
- package/dist/css.mjs +2 -2
- 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-7YL90Xqs.d.cts} +9 -12
- package/dist/{index-Djro6G4e.d.cts → index-BmCTIOzh.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-C8JrZf-b.d.mts} +14 -2
- package/dist/{react-BKLEzIN8.cjs → react-DLB8nrXQ.cjs} +18 -2
- package/dist/{react-BXqSYnmk.d.cts → react-Dt7vGAVG.d.cts} +14 -2
- package/dist/react.cjs +1 -1
- package/dist/react.d.cts +1 -1
- package/dist/react.d.mts +1 -1
- package/dist/react.mjs +18 -2
- package/dist/runtime-entry.cjs +1 -1
- package/dist/runtime-entry.mjs +1 -1
- package/dist/{ssrScript-DfmopH-w.mjs → ssrScript-DNLlLDps.mjs} +1 -1
- package/dist/{ssrScript-D3mYscp1.cjs → ssrScript-MF5SIONH.cjs} +1 -1
- 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-DDowz4wU.cjs → toCssVars-BseqmMcT.cjs} +27 -2
- package/dist/{toCssVars-CeckLjW1.mjs → toCssVars-C-9yIZDR.mjs} +27 -2
- 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 +3 -3
- package/dist/vars.d.cts +1 -1
- package/dist/vars.d.mts +1 -1
- package/dist/vars.mjs +3 -3
- package/dist/{withDataviz-CrgXLR5A.mjs → withDataviz-BvpZJnFx.mjs} +2 -2
- package/dist/{withDataviz-BzZwFV2e.cjs → withDataviz-CYRf4exT.cjs} +2 -2
- package/llms.txt +5 -5
- 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/react.mjs
CHANGED
|
@@ -1,11 +1,22 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
|
-
import { r as deepMerge, s as toFlatTokens } from "./helpers-
|
|
2
|
+
import { r as deepMerge, s as toFlatTokens } from "./helpers-BXaKe2s3.mjs";
|
|
3
3
|
import { getThemeStylesContent } from "./css.mjs";
|
|
4
|
-
import { i as createThemeRuntime, t as getThemeScriptContent } from "./ssrScript-
|
|
4
|
+
import { i as createThemeRuntime, t as getThemeScriptContent } from "./ssrScript-DNLlLDps.mjs";
|
|
5
5
|
import * as React from "react";
|
|
6
6
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
7
7
|
|
|
8
8
|
//#region src/react.tsx
|
|
9
|
+
/**
|
|
10
|
+
* Stable `href` for the theme's hoistable `<style>` tag. React 19 keys style
|
|
11
|
+
* hoisting **and dedup** on `href` + `precedence`, so re-renders and multiple
|
|
12
|
+
* `<ThemeProvider>`s sharing a `themeId` collapse to a single tag, while
|
|
13
|
+
* distinct `themeId`s coexist (micro-frontends). Note: `ThemeStyles` /
|
|
14
|
+
* `ThemeHead` render an href-less inline `<style>`, so they do **not** dedup
|
|
15
|
+
* against this hoisted tag — don't combine them with a themed `ThemeProvider`.
|
|
16
|
+
*/
|
|
17
|
+
var themeStyleHref = themeId => {
|
|
18
|
+
return `tt-theme-${themeId ?? "root"}`;
|
|
19
|
+
};
|
|
9
20
|
var COARSE_QUERY = "(any-pointer: coarse)";
|
|
10
21
|
/**
|
|
11
22
|
* Subscribe to coarse-pointer media query changes.
|
|
@@ -160,6 +171,7 @@ var ThemeProvider = ({
|
|
|
160
171
|
});
|
|
161
172
|
if (theme) return /* @__PURE__ */jsxs(Fragment, {
|
|
162
173
|
children: [/* @__PURE__ */jsx("style", {
|
|
174
|
+
href: themeStyleHref(themeId),
|
|
163
175
|
precedence: "default",
|
|
164
176
|
children: cssContent
|
|
165
177
|
}), /* @__PURE__ */jsx(ResolvedTokensCtx.Provider, {
|
|
@@ -316,6 +328,10 @@ var ThemeScript = ({
|
|
|
316
328
|
* `dangerouslySetInnerHTML` is safe: content comes exclusively from
|
|
317
329
|
* `toCssVars()` (a pure internal function) — no user input is interpolated.
|
|
318
330
|
*
|
|
331
|
+
* Renders a plain inline `<style>` where you place it (put it in `<head>`).
|
|
332
|
+
* Do **not** also pass `theme` to `<ThemeProvider>` — that injects a second
|
|
333
|
+
* copy; pass `theme` to the head component only (see README SSR section).
|
|
334
|
+
*
|
|
319
335
|
* @example
|
|
320
336
|
* ```tsx
|
|
321
337
|
* // SSR escape hatch — no themeId needed for canonical 1-theme model
|
package/dist/runtime-entry.cjs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, {
|
|
3
3
|
value: 'Module'
|
|
4
4
|
});
|
|
5
|
-
const require_ssrScript = require('./ssrScript-
|
|
5
|
+
const require_ssrScript = require('./ssrScript-MF5SIONH.cjs');
|
|
6
6
|
exports.DATA_MODE_ATTR = require_ssrScript.DATA_MODE_ATTR;
|
|
7
7
|
exports.DATA_THEME_ATTR = require_ssrScript.DATA_THEME_ATTR;
|
|
8
8
|
exports.createThemeRuntime = require_ssrScript.createThemeRuntime;
|
package/dist/runtime-entry.mjs
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
|
-
import { i as createThemeRuntime, n as DATA_MODE_ATTR, r as DATA_THEME_ATTR, t as getThemeScriptContent } from "./ssrScript-
|
|
2
|
+
import { i as createThemeRuntime, n as DATA_MODE_ATTR, r as DATA_THEME_ATTR, t as getThemeScriptContent } from "./ssrScript-DNLlLDps.mjs";
|
|
3
3
|
export { DATA_MODE_ATTR, DATA_THEME_ATTR, createThemeRuntime, getThemeScriptContent };
|
package/dist/themes/bruttal.cjs
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, {
|
|
3
3
|
value: 'Module'
|
|
4
4
|
});
|
|
5
|
-
const require_createTheme = require('../createTheme
|
|
6
|
-
const require_helpers = require('../helpers-
|
|
7
|
-
const require_withDataviz = require('../withDataviz-
|
|
5
|
+
const require_createTheme = require('../createTheme--UFgVlEn.cjs');
|
|
6
|
+
const require_helpers = require('../helpers-BU40JvFA.cjs');
|
|
7
|
+
const require_withDataviz = require('../withDataviz-CYRf4exT.cjs');
|
|
8
8
|
|
|
9
9
|
//#region src/themes/bruttal.ts
|
|
10
10
|
/**
|
|
@@ -67,7 +67,22 @@ var bundle = require_createTheme.createTheme({
|
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
|
-
})
|
|
70
|
+
}),
|
|
71
|
+
brief: {
|
|
72
|
+
name: "bruttal",
|
|
73
|
+
purpose: "warm-brown brutalist brand identity",
|
|
74
|
+
primaryPosture: "expressive",
|
|
75
|
+
secondaryPosture: "technical",
|
|
76
|
+
densityProfile: "balanced",
|
|
77
|
+
readingMode: "mixed",
|
|
78
|
+
pointerProfile: "hybrid",
|
|
79
|
+
interactionRisk: "medium",
|
|
80
|
+
surfaceModel: "flat",
|
|
81
|
+
brandEnergy: "expressive",
|
|
82
|
+
accessibilityTarget: "AA+",
|
|
83
|
+
colorModeStrategy: "dark-supported",
|
|
84
|
+
platformBias: "web"
|
|
85
|
+
}
|
|
71
86
|
});
|
|
72
87
|
var bruttal = require_withDataviz.withDataviz(bundle);
|
|
73
88
|
|
package/dist/themes/bruttal.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
|
-
import {
|
|
3
|
-
import { r as deepMerge } from "../helpers-
|
|
4
|
-
import { t as withDataviz } from "../withDataviz-
|
|
2
|
+
import { a as darkAlternate, n as createTheme } from "../createTheme-B6tVIikC.mjs";
|
|
3
|
+
import { r as deepMerge } from "../helpers-BXaKe2s3.mjs";
|
|
4
|
+
import { t as withDataviz } from "../withDataviz-BvpZJnFx.mjs";
|
|
5
5
|
|
|
6
6
|
//#region src/themes/bruttal.ts
|
|
7
7
|
/**
|
|
@@ -64,7 +64,22 @@ var bundle = createTheme({
|
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
|
-
})
|
|
67
|
+
}),
|
|
68
|
+
brief: {
|
|
69
|
+
name: "bruttal",
|
|
70
|
+
purpose: "warm-brown brutalist brand identity",
|
|
71
|
+
primaryPosture: "expressive",
|
|
72
|
+
secondaryPosture: "technical",
|
|
73
|
+
densityProfile: "balanced",
|
|
74
|
+
readingMode: "mixed",
|
|
75
|
+
pointerProfile: "hybrid",
|
|
76
|
+
interactionRisk: "medium",
|
|
77
|
+
surfaceModel: "flat",
|
|
78
|
+
brandEnergy: "expressive",
|
|
79
|
+
accessibilityTarget: "AA+",
|
|
80
|
+
colorModeStrategy: "dark-supported",
|
|
81
|
+
platformBias: "web"
|
|
82
|
+
}
|
|
68
83
|
});
|
|
69
84
|
var bruttal = withDataviz(bundle);
|
|
70
85
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
|
-
const require_helpers = require('./helpers-
|
|
3
|
-
const require_tokenRegistry = require('./tokenRegistry-
|
|
2
|
+
const require_helpers = require('./helpers-BU40JvFA.cjs');
|
|
3
|
+
const require_tokenRegistry = require('./tokenRegistry-f_Bx_BAN.cjs');
|
|
4
4
|
|
|
5
5
|
//#region src/roots/toCssVars.ts
|
|
6
6
|
/**
|
|
@@ -26,6 +26,27 @@ var inlineRefsToVars = value => {
|
|
|
26
26
|
});
|
|
27
27
|
};
|
|
28
28
|
/**
|
|
29
|
+
* Assert that no two token paths collapse to the same CSS custom property name.
|
|
30
|
+
*
|
|
31
|
+
* `toCssVarName` is first-match-wins with no duplicate detection, so two
|
|
32
|
+
* distinct token paths sharing a `cssPrefix` (e.g. a future
|
|
33
|
+
* `semantic.dataviz.color.state.*` vs `semantic.dataviz.geo.state.*`) could
|
|
34
|
+
* silently overwrite each other in the flat record. This guards the whole
|
|
35
|
+
* registry, not just dataviz.
|
|
36
|
+
*
|
|
37
|
+
* **DEV-only** — callers gate this behind `process.env.NODE_ENV !== 'production'`
|
|
38
|
+
* so bundlers tree-shake the entire call in production builds.
|
|
39
|
+
*/
|
|
40
|
+
var assertDistinctCssVars = flat => {
|
|
41
|
+
const byVarName = /* @__PURE__ */new Map();
|
|
42
|
+
for (const path of Object.keys(flat)) {
|
|
43
|
+
const varName = toCssVarName(path);
|
|
44
|
+
const existing = byVarName.get(varName);
|
|
45
|
+
if (existing !== void 0 && existing !== path) throw new Error(`[fsl-theme] CSS variable name collision: '${varName}' is produced by both '${existing}' and '${path}'. Give one of them a distinct token path or CSS prefix (see roots/tokenRegistry.ts).`);
|
|
46
|
+
byVarName.set(varName, path);
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
/**
|
|
29
50
|
* Build a flat CSS custom properties record from a ThemeTokens.
|
|
30
51
|
*
|
|
31
52
|
* Core tokens get raw values. Semantic tokens get `var()` references
|
|
@@ -42,6 +63,10 @@ var buildCssVars = theme => {
|
|
|
42
63
|
const varName = toCssVarName(path);
|
|
43
64
|
if (typeof value === "string" && value.includes("{")) vars[varName] = inlineRefsToVars(value);else vars[varName] = value;
|
|
44
65
|
}
|
|
66
|
+
if (process.env.NODE_ENV !== "production") assertDistinctCssVars({
|
|
67
|
+
...coreFlat,
|
|
68
|
+
...semanticFlat
|
|
69
|
+
});
|
|
45
70
|
return vars;
|
|
46
71
|
};
|
|
47
72
|
var sanitizeId = value => {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
|
-
import { a as flattenTheme, i as flattenObject, n as SAFE_ID_RE, r as deepMerge, t as COMPOUND_REF_RE } from "./helpers-
|
|
3
|
-
import { t as CSS_PATH_PREFIXES } from "./tokenRegistry-
|
|
2
|
+
import { a as flattenTheme, i as flattenObject, n as SAFE_ID_RE, r as deepMerge, t as COMPOUND_REF_RE } from "./helpers-BXaKe2s3.mjs";
|
|
3
|
+
import { t as CSS_PATH_PREFIXES } from "./tokenRegistry-DviyqDeE.mjs";
|
|
4
4
|
|
|
5
5
|
//#region src/roots/toCssVars.ts
|
|
6
6
|
/**
|
|
@@ -26,6 +26,27 @@ var inlineRefsToVars = value => {
|
|
|
26
26
|
});
|
|
27
27
|
};
|
|
28
28
|
/**
|
|
29
|
+
* Assert that no two token paths collapse to the same CSS custom property name.
|
|
30
|
+
*
|
|
31
|
+
* `toCssVarName` is first-match-wins with no duplicate detection, so two
|
|
32
|
+
* distinct token paths sharing a `cssPrefix` (e.g. a future
|
|
33
|
+
* `semantic.dataviz.color.state.*` vs `semantic.dataviz.geo.state.*`) could
|
|
34
|
+
* silently overwrite each other in the flat record. This guards the whole
|
|
35
|
+
* registry, not just dataviz.
|
|
36
|
+
*
|
|
37
|
+
* **DEV-only** — callers gate this behind `process.env.NODE_ENV !== 'production'`
|
|
38
|
+
* so bundlers tree-shake the entire call in production builds.
|
|
39
|
+
*/
|
|
40
|
+
var assertDistinctCssVars = flat => {
|
|
41
|
+
const byVarName = /* @__PURE__ */new Map();
|
|
42
|
+
for (const path of Object.keys(flat)) {
|
|
43
|
+
const varName = toCssVarName(path);
|
|
44
|
+
const existing = byVarName.get(varName);
|
|
45
|
+
if (existing !== void 0 && existing !== path) throw new Error(`[fsl-theme] CSS variable name collision: '${varName}' is produced by both '${existing}' and '${path}'. Give one of them a distinct token path or CSS prefix (see roots/tokenRegistry.ts).`);
|
|
46
|
+
byVarName.set(varName, path);
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
/**
|
|
29
50
|
* Build a flat CSS custom properties record from a ThemeTokens.
|
|
30
51
|
*
|
|
31
52
|
* Core tokens get raw values. Semantic tokens get `var()` references
|
|
@@ -42,6 +63,10 @@ var buildCssVars = theme => {
|
|
|
42
63
|
const varName = toCssVarName(path);
|
|
43
64
|
if (typeof value === "string" && value.includes("{")) vars[varName] = inlineRefsToVars(value);else vars[varName] = value;
|
|
44
65
|
}
|
|
66
|
+
if (process.env.NODE_ENV !== "production") assertDistinctCssVars({
|
|
67
|
+
...coreFlat,
|
|
68
|
+
...semanticFlat
|
|
69
|
+
});
|
|
45
70
|
return vars;
|
|
46
71
|
};
|
|
47
72
|
var sanitizeId = value => {
|
|
@@ -20,28 +20,25 @@ var TOKEN_PATH_REGISTRY = [{
|
|
|
20
20
|
dtcgType: "number"
|
|
21
21
|
}, {
|
|
22
22
|
path: "core.dataviz.",
|
|
23
|
-
cssPrefix: "--tt-core-dataviz-"
|
|
24
|
-
dtcgType: "string"
|
|
23
|
+
cssPrefix: "--tt-core-dataviz-"
|
|
25
24
|
}, {
|
|
26
25
|
path: "semantic.dataviz.color.",
|
|
27
|
-
cssPrefix: "--tt-dataviz-",
|
|
26
|
+
cssPrefix: "--tt-dataviz-color-",
|
|
28
27
|
dtcgType: "color"
|
|
29
28
|
}, {
|
|
30
29
|
path: "semantic.dataviz.encoding.opacity.",
|
|
31
|
-
cssPrefix: "--tt-dataviz-",
|
|
30
|
+
cssPrefix: "--tt-dataviz-encoding-opacity-",
|
|
32
31
|
dtcgType: "number"
|
|
33
32
|
}, {
|
|
34
33
|
path: "semantic.dataviz.geo.",
|
|
35
|
-
cssPrefix: "--tt-dataviz-",
|
|
34
|
+
cssPrefix: "--tt-dataviz-geo-",
|
|
36
35
|
dtcgType: "color"
|
|
37
36
|
}, {
|
|
38
37
|
path: "semantic.dataviz.encoding.",
|
|
39
|
-
cssPrefix: "--tt-dataviz-"
|
|
40
|
-
dtcgType: "string"
|
|
38
|
+
cssPrefix: "--tt-dataviz-encoding-"
|
|
41
39
|
}, {
|
|
42
40
|
path: "semantic.dataviz.",
|
|
43
|
-
cssPrefix: "--tt-dataviz-"
|
|
44
|
-
dtcgType: "string"
|
|
41
|
+
cssPrefix: "--tt-dataviz-"
|
|
45
42
|
}, {
|
|
46
43
|
path: "core.colors.",
|
|
47
44
|
cssPrefix: "--tt-core-colors-",
|
|
@@ -72,12 +69,10 @@ var TOKEN_PATH_REGISTRY = [{
|
|
|
72
69
|
dtcgType: "dimension"
|
|
73
70
|
}, {
|
|
74
71
|
path: "core.font.optical.",
|
|
75
|
-
cssPrefix: "--tt-core-font-optical-"
|
|
76
|
-
dtcgType: "string"
|
|
72
|
+
cssPrefix: "--tt-core-font-optical-"
|
|
77
73
|
}, {
|
|
78
74
|
path: "core.font.numeric.",
|
|
79
|
-
cssPrefix: "--tt-core-font-numeric-"
|
|
80
|
-
dtcgType: "string"
|
|
75
|
+
cssPrefix: "--tt-core-font-numeric-"
|
|
81
76
|
}, {
|
|
82
77
|
path: "core.font.scale.",
|
|
83
78
|
cssPrefix: "--tt-core-font-scale-",
|
|
@@ -88,8 +83,7 @@ var TOKEN_PATH_REGISTRY = [{
|
|
|
88
83
|
dtcgType: "dimension"
|
|
89
84
|
}, {
|
|
90
85
|
path: "core.sizing.behavior.",
|
|
91
|
-
cssPrefix: "--tt-core-sizing-behavior-"
|
|
92
|
-
dtcgType: "string"
|
|
86
|
+
cssPrefix: "--tt-core-sizing-behavior-"
|
|
93
87
|
}, {
|
|
94
88
|
path: "core.sizing.",
|
|
95
89
|
cssPrefix: "--tt-core-sizing-",
|
|
@@ -104,8 +98,7 @@ var TOKEN_PATH_REGISTRY = [{
|
|
|
104
98
|
dtcgType: "dimension"
|
|
105
99
|
}, {
|
|
106
100
|
path: "core.border.style.",
|
|
107
|
-
cssPrefix: "--tt-core-border-style-"
|
|
108
|
-
dtcgType: "string"
|
|
101
|
+
cssPrefix: "--tt-core-border-style-"
|
|
109
102
|
}, {
|
|
110
103
|
path: "core.opacity.",
|
|
111
104
|
cssPrefix: "--tt-core-opacity-",
|
|
@@ -116,8 +109,7 @@ var TOKEN_PATH_REGISTRY = [{
|
|
|
116
109
|
dtcgType: "duration"
|
|
117
110
|
}, {
|
|
118
111
|
path: "core.motion.easing.",
|
|
119
|
-
cssPrefix: "--tt-core-motion-easing-"
|
|
120
|
-
dtcgType: "string"
|
|
112
|
+
cssPrefix: "--tt-core-motion-easing-"
|
|
121
113
|
}, {
|
|
122
114
|
path: "core.zIndex.level.",
|
|
123
115
|
cssPrefix: "--tt-core-z-index-",
|
|
@@ -136,8 +128,7 @@ var TOKEN_PATH_REGISTRY = [{
|
|
|
136
128
|
dtcgType: "shadow"
|
|
137
129
|
}, {
|
|
138
130
|
path: "semantic.text.",
|
|
139
|
-
cssPrefix: "--tt-text-"
|
|
140
|
-
dtcgType: "string"
|
|
131
|
+
cssPrefix: "--tt-text-"
|
|
141
132
|
}, {
|
|
142
133
|
path: "semantic.spacing.",
|
|
143
134
|
cssPrefix: "--tt-spacing-",
|
|
@@ -152,24 +143,21 @@ var TOKEN_PATH_REGISTRY = [{
|
|
|
152
143
|
dtcgType: "dimension"
|
|
153
144
|
}, {
|
|
154
145
|
path: "semantic.focus.",
|
|
155
|
-
cssPrefix: "--tt-focus-"
|
|
156
|
-
dtcgType: "string"
|
|
146
|
+
cssPrefix: "--tt-focus-"
|
|
157
147
|
}, {
|
|
158
148
|
path: "semantic.overlay.",
|
|
159
149
|
cssPrefix: "--tt-overlay-",
|
|
160
150
|
dtcgType: "color"
|
|
161
151
|
}, {
|
|
162
152
|
path: "semantic.border.",
|
|
163
|
-
cssPrefix: "--tt-border-"
|
|
164
|
-
dtcgType: "string"
|
|
153
|
+
cssPrefix: "--tt-border-"
|
|
165
154
|
}, {
|
|
166
155
|
path: "semantic.opacity.",
|
|
167
156
|
cssPrefix: "--tt-opacity-",
|
|
168
157
|
dtcgType: "number"
|
|
169
158
|
}, {
|
|
170
159
|
path: "semantic.motion.",
|
|
171
|
-
cssPrefix: "--tt-motion-"
|
|
172
|
-
dtcgType: "string"
|
|
160
|
+
cssPrefix: "--tt-motion-"
|
|
173
161
|
}, {
|
|
174
162
|
path: "semantic.zIndex.layer.",
|
|
175
163
|
cssPrefix: "--tt-z-index-",
|
|
@@ -179,7 +167,10 @@ var TOKEN_PATH_REGISTRY = [{
|
|
|
179
167
|
var CSS_PATH_PREFIXES = TOKEN_PATH_REGISTRY.map(e => {
|
|
180
168
|
return [e.path, e.cssPrefix];
|
|
181
169
|
});
|
|
182
|
-
/**
|
|
170
|
+
/**
|
|
171
|
+
* Derived lookup table: `[path, dtcgType]` pairs. `dtcgType` is `undefined` for
|
|
172
|
+
* opaque tokens — `toDTCG` omits `$type` when the matched entry has none.
|
|
173
|
+
*/
|
|
183
174
|
var DTCG_TYPE_PREFIXES = TOKEN_PATH_REGISTRY.map(e => {
|
|
184
175
|
return [e.path, e.dtcgType];
|
|
185
176
|
});
|
|
@@ -20,28 +20,25 @@ var TOKEN_PATH_REGISTRY = [{
|
|
|
20
20
|
dtcgType: "number"
|
|
21
21
|
}, {
|
|
22
22
|
path: "core.dataviz.",
|
|
23
|
-
cssPrefix: "--tt-core-dataviz-"
|
|
24
|
-
dtcgType: "string"
|
|
23
|
+
cssPrefix: "--tt-core-dataviz-"
|
|
25
24
|
}, {
|
|
26
25
|
path: "semantic.dataviz.color.",
|
|
27
|
-
cssPrefix: "--tt-dataviz-",
|
|
26
|
+
cssPrefix: "--tt-dataviz-color-",
|
|
28
27
|
dtcgType: "color"
|
|
29
28
|
}, {
|
|
30
29
|
path: "semantic.dataviz.encoding.opacity.",
|
|
31
|
-
cssPrefix: "--tt-dataviz-",
|
|
30
|
+
cssPrefix: "--tt-dataviz-encoding-opacity-",
|
|
32
31
|
dtcgType: "number"
|
|
33
32
|
}, {
|
|
34
33
|
path: "semantic.dataviz.geo.",
|
|
35
|
-
cssPrefix: "--tt-dataviz-",
|
|
34
|
+
cssPrefix: "--tt-dataviz-geo-",
|
|
36
35
|
dtcgType: "color"
|
|
37
36
|
}, {
|
|
38
37
|
path: "semantic.dataviz.encoding.",
|
|
39
|
-
cssPrefix: "--tt-dataviz-"
|
|
40
|
-
dtcgType: "string"
|
|
38
|
+
cssPrefix: "--tt-dataviz-encoding-"
|
|
41
39
|
}, {
|
|
42
40
|
path: "semantic.dataviz.",
|
|
43
|
-
cssPrefix: "--tt-dataviz-"
|
|
44
|
-
dtcgType: "string"
|
|
41
|
+
cssPrefix: "--tt-dataviz-"
|
|
45
42
|
}, {
|
|
46
43
|
path: "core.colors.",
|
|
47
44
|
cssPrefix: "--tt-core-colors-",
|
|
@@ -72,12 +69,10 @@ var TOKEN_PATH_REGISTRY = [{
|
|
|
72
69
|
dtcgType: "dimension"
|
|
73
70
|
}, {
|
|
74
71
|
path: "core.font.optical.",
|
|
75
|
-
cssPrefix: "--tt-core-font-optical-"
|
|
76
|
-
dtcgType: "string"
|
|
72
|
+
cssPrefix: "--tt-core-font-optical-"
|
|
77
73
|
}, {
|
|
78
74
|
path: "core.font.numeric.",
|
|
79
|
-
cssPrefix: "--tt-core-font-numeric-"
|
|
80
|
-
dtcgType: "string"
|
|
75
|
+
cssPrefix: "--tt-core-font-numeric-"
|
|
81
76
|
}, {
|
|
82
77
|
path: "core.font.scale.",
|
|
83
78
|
cssPrefix: "--tt-core-font-scale-",
|
|
@@ -88,8 +83,7 @@ var TOKEN_PATH_REGISTRY = [{
|
|
|
88
83
|
dtcgType: "dimension"
|
|
89
84
|
}, {
|
|
90
85
|
path: "core.sizing.behavior.",
|
|
91
|
-
cssPrefix: "--tt-core-sizing-behavior-"
|
|
92
|
-
dtcgType: "string"
|
|
86
|
+
cssPrefix: "--tt-core-sizing-behavior-"
|
|
93
87
|
}, {
|
|
94
88
|
path: "core.sizing.",
|
|
95
89
|
cssPrefix: "--tt-core-sizing-",
|
|
@@ -104,8 +98,7 @@ var TOKEN_PATH_REGISTRY = [{
|
|
|
104
98
|
dtcgType: "dimension"
|
|
105
99
|
}, {
|
|
106
100
|
path: "core.border.style.",
|
|
107
|
-
cssPrefix: "--tt-core-border-style-"
|
|
108
|
-
dtcgType: "string"
|
|
101
|
+
cssPrefix: "--tt-core-border-style-"
|
|
109
102
|
}, {
|
|
110
103
|
path: "core.opacity.",
|
|
111
104
|
cssPrefix: "--tt-core-opacity-",
|
|
@@ -116,8 +109,7 @@ var TOKEN_PATH_REGISTRY = [{
|
|
|
116
109
|
dtcgType: "duration"
|
|
117
110
|
}, {
|
|
118
111
|
path: "core.motion.easing.",
|
|
119
|
-
cssPrefix: "--tt-core-motion-easing-"
|
|
120
|
-
dtcgType: "string"
|
|
112
|
+
cssPrefix: "--tt-core-motion-easing-"
|
|
121
113
|
}, {
|
|
122
114
|
path: "core.zIndex.level.",
|
|
123
115
|
cssPrefix: "--tt-core-z-index-",
|
|
@@ -136,8 +128,7 @@ var TOKEN_PATH_REGISTRY = [{
|
|
|
136
128
|
dtcgType: "shadow"
|
|
137
129
|
}, {
|
|
138
130
|
path: "semantic.text.",
|
|
139
|
-
cssPrefix: "--tt-text-"
|
|
140
|
-
dtcgType: "string"
|
|
131
|
+
cssPrefix: "--tt-text-"
|
|
141
132
|
}, {
|
|
142
133
|
path: "semantic.spacing.",
|
|
143
134
|
cssPrefix: "--tt-spacing-",
|
|
@@ -152,24 +143,21 @@ var TOKEN_PATH_REGISTRY = [{
|
|
|
152
143
|
dtcgType: "dimension"
|
|
153
144
|
}, {
|
|
154
145
|
path: "semantic.focus.",
|
|
155
|
-
cssPrefix: "--tt-focus-"
|
|
156
|
-
dtcgType: "string"
|
|
146
|
+
cssPrefix: "--tt-focus-"
|
|
157
147
|
}, {
|
|
158
148
|
path: "semantic.overlay.",
|
|
159
149
|
cssPrefix: "--tt-overlay-",
|
|
160
150
|
dtcgType: "color"
|
|
161
151
|
}, {
|
|
162
152
|
path: "semantic.border.",
|
|
163
|
-
cssPrefix: "--tt-border-"
|
|
164
|
-
dtcgType: "string"
|
|
153
|
+
cssPrefix: "--tt-border-"
|
|
165
154
|
}, {
|
|
166
155
|
path: "semantic.opacity.",
|
|
167
156
|
cssPrefix: "--tt-opacity-",
|
|
168
157
|
dtcgType: "number"
|
|
169
158
|
}, {
|
|
170
159
|
path: "semantic.motion.",
|
|
171
|
-
cssPrefix: "--tt-motion-"
|
|
172
|
-
dtcgType: "string"
|
|
160
|
+
cssPrefix: "--tt-motion-"
|
|
173
161
|
}, {
|
|
174
162
|
path: "semantic.zIndex.layer.",
|
|
175
163
|
cssPrefix: "--tt-z-index-",
|
|
@@ -179,7 +167,10 @@ var TOKEN_PATH_REGISTRY = [{
|
|
|
179
167
|
var CSS_PATH_PREFIXES = TOKEN_PATH_REGISTRY.map(e => {
|
|
180
168
|
return [e.path, e.cssPrefix];
|
|
181
169
|
});
|
|
182
|
-
/**
|
|
170
|
+
/**
|
|
171
|
+
* Derived lookup table: `[path, dtcgType]` pairs. `dtcgType` is `undefined` for
|
|
172
|
+
* opaque tokens — `toDTCG` omits `$type` when the matched entry has none.
|
|
173
|
+
*/
|
|
183
174
|
var DTCG_TYPE_PREFIXES = TOKEN_PATH_REGISTRY.map(e => {
|
|
184
175
|
return [e.path, e.dtcgType];
|
|
185
176
|
});
|
package/dist/vars.cjs
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, {
|
|
3
3
|
value: 'Module'
|
|
4
4
|
});
|
|
5
|
-
const require_helpers = require('./helpers-
|
|
6
|
-
const require_baseBundle = require('./baseBundle-
|
|
7
|
-
const require_toCssVars = require('./toCssVars-
|
|
5
|
+
const require_helpers = require('./helpers-BU40JvFA.cjs');
|
|
6
|
+
const require_baseBundle = require('./baseBundle-DdRSa5mf.cjs');
|
|
7
|
+
const require_toCssVars = require('./toCssVars-BseqmMcT.cjs');
|
|
8
8
|
|
|
9
9
|
//#region src/roots/toVars.ts
|
|
10
10
|
/**
|
package/dist/vars.d.cts
CHANGED
package/dist/vars.d.mts
CHANGED
package/dist/vars.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
|
-
import { o as isPlainObject } from "./helpers-
|
|
3
|
-
import { t as baseBundle } from "./baseBundle-
|
|
4
|
-
import { t as toCssVarName } from "./toCssVars-
|
|
2
|
+
import { o as isPlainObject } from "./helpers-BXaKe2s3.mjs";
|
|
3
|
+
import { t as baseBundle } from "./baseBundle-R7WyjyTw.mjs";
|
|
4
|
+
import { t as toCssVarName } from "./toCssVars-C-9yIZDR.mjs";
|
|
5
5
|
|
|
6
6
|
//#region src/roots/toVars.ts
|
|
7
7
|
/**
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
|
-
import { t as buildTheme } from "./createTheme-
|
|
2
|
+
import { t as buildTheme } from "./createTheme-B6tVIikC.mjs";
|
|
3
3
|
|
|
4
4
|
//#region src/dataviz/baseTheme.ts
|
|
5
5
|
/**
|
|
@@ -81,7 +81,7 @@ var semanticDataviz = {
|
|
|
81
81
|
status: {
|
|
82
82
|
missing: "{core.colors.neutral.200}",
|
|
83
83
|
suppressed: "{core.colors.neutral.700}",
|
|
84
|
-
|
|
84
|
+
notApplicable: "{core.colors.neutral.500}"
|
|
85
85
|
}
|
|
86
86
|
},
|
|
87
87
|
encoding: {
|
|
@@ -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--UFgVlEn.cjs');
|
|
3
3
|
|
|
4
4
|
//#region src/dataviz/baseTheme.ts
|
|
5
5
|
/**
|
|
@@ -81,7 +81,7 @@ var semanticDataviz = {
|
|
|
81
81
|
status: {
|
|
82
82
|
missing: "{core.colors.neutral.200}",
|
|
83
83
|
suppressed: "{core.colors.neutral.700}",
|
|
84
|
-
|
|
84
|
+
notApplicable: "{core.colors.neutral.500}"
|
|
85
85
|
}
|
|
86
86
|
},
|
|
87
87
|
encoding: {
|
package/llms.txt
CHANGED
|
@@ -9,7 +9,7 @@ This file is the LLM-facing guide for using the package in an external applicati
|
|
|
9
9
|
## Entry points
|
|
10
10
|
|
|
11
11
|
```ts
|
|
12
|
-
import { createTheme, baseTheme, bruttal
|
|
12
|
+
import { createTheme, baseTheme, bruttal } from '@ttoss/fsl-theme';
|
|
13
13
|
import { ThemeProvider, useColorMode, useResolvedTokens } from '@ttoss/fsl-theme/react';
|
|
14
14
|
import { vars } from '@ttoss/fsl-theme/vars'; // typed CSS var(--tt-*) refs — CSS environments
|
|
15
15
|
import { toCssVarName } from '@ttoss/fsl-theme/css'; // raw --tt-* names — tooling / PostCSS
|
|
@@ -46,7 +46,7 @@ export function App() {
|
|
|
46
46
|
**Built-in themes** — extend instead of building from scratch:
|
|
47
47
|
|
|
48
48
|
```ts
|
|
49
|
-
import { bruttal
|
|
49
|
+
import { bruttal } from '@ttoss/fsl-theme';
|
|
50
50
|
// Use directly as-is:
|
|
51
51
|
<ThemeProvider theme={bruttal}>...</ThemeProvider>
|
|
52
52
|
// Or extend with brand overrides:
|
|
@@ -614,7 +614,7 @@ const theme = createTheme({
|
|
|
614
614
|
```
|
|
615
615
|
|
|
616
616
|
- Default: `createTheme()` returns the built-in `baseTheme` + built-in `darkAlternate`.
|
|
617
|
-
- `extends`: inherit from a built-in (`bruttal
|
|
617
|
+
- `extends`: inherit from a built-in (`bruttal`).
|
|
618
618
|
- `alternate: null`: opt out of dark mode entirely (single-mode theme).
|
|
619
619
|
|
|
620
620
|
## Intent → override map
|
|
@@ -636,7 +636,7 @@ createTheme({
|
|
|
636
636
|
- All semantic tokens that reference `{core.colors.brand.*}` automatically pick up the new values. No semantic remap needed unless contrast breaks.
|
|
637
637
|
- For dark mode, the built-in `darkAlternate` already remaps semantic references to lighter brand steps — usually no extra work.
|
|
638
638
|
|
|
639
|
-
**Reference
|
|
639
|
+
**Reference pattern:** `bruttal.ts` shows a full brand customization (palette + geometry + surface model + dark alternate). A brand-hue-only override is insufficient on its own — see the `brand.500` contrast invariant above.
|
|
640
640
|
|
|
641
641
|
### Adjust density
|
|
642
642
|
|
|
@@ -727,5 +727,5 @@ Cross-token semantic correctness (the rules above) is **not** statically validat
|
|
|
727
727
|
|
|
728
728
|
- README — full grammar tables, usage examples per import path
|
|
729
729
|
- `dist/Types-*.d.ts` — every token has co-located JSDoc with semantics + anti-pattern notes
|
|
730
|
-
- `src/themes/
|
|
730
|
+
- `src/themes/bruttal.ts` — worked customization pattern
|
|
731
731
|
- Family specs (full grammar, decision matrices, ADRs): `docs/design/design-system/design-tokens/families/{family}.md` in the ttoss monorepo
|