@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.
Files changed (66) hide show
  1. package/README.md +54 -41
  2. package/dist/{Types-BiBa17RL.d.cts → Types-a_sfpbha.d.cts} +84 -24
  3. package/dist/{Types-BiBa17RL.d.mts → Types-a_sfpbha.d.mts} +84 -24
  4. package/dist/{baseBundle-DiYlHNG5.mjs → baseBundle-CXdxj_re.mjs} +3 -2
  5. package/dist/{baseBundle-BWbICg4p.cjs → baseBundle-a9LDsqYy.cjs} +3 -2
  6. package/dist/{createTheme-BHGc1IFI.cjs → createTheme-B7H0xSVp.cjs} +128 -19
  7. package/dist/{createTheme-C1r5nJco.mjs → createTheme-Bm9LVQ4w.mjs} +123 -20
  8. package/dist/css.cjs +5 -4
  9. package/dist/css.d.cts +21 -2
  10. package/dist/css.d.mts +21 -2
  11. package/dist/css.mjs +5 -4
  12. package/dist/dataviz/index.cjs +2 -2
  13. package/dist/dataviz/index.d.cts +1 -1
  14. package/dist/dataviz/index.d.mts +1 -1
  15. package/dist/dataviz/index.mjs +1 -1
  16. package/dist/dtcg.cjs +26 -9
  17. package/dist/dtcg.d.cts +17 -4
  18. package/dist/dtcg.d.mts +17 -4
  19. package/dist/dtcg.mjs +26 -9
  20. package/dist/{helpers-CIqeJ8yd.cjs → helpers-BU40JvFA.cjs} +27 -5
  21. package/dist/{helpers-Dz7NfNK6.mjs → helpers-BXaKe2s3.mjs} +27 -5
  22. package/dist/{index-BuszkWMy.d.mts → index-BmZQVd3G.d.cts} +9 -12
  23. package/dist/{index-Djro6G4e.d.cts → index-XZsRrMTF.d.mts} +9 -12
  24. package/dist/index.cjs +2 -8
  25. package/dist/index.d.cts +4 -4
  26. package/dist/index.d.mts +4 -4
  27. package/dist/index.mjs +2 -5
  28. package/dist/{react-D2J482kx.d.mts → react-BwsjWKmo.d.mts} +59 -16
  29. package/dist/{react-BKLEzIN8.cjs → react-DQErMGJz.cjs} +107 -19
  30. package/dist/{react-BXqSYnmk.d.cts → react-Drr-QSuX.d.cts} +59 -16
  31. package/dist/react.cjs +3 -1
  32. package/dist/react.d.cts +1 -1
  33. package/dist/react.d.mts +1 -1
  34. package/dist/react.mjs +109 -19
  35. package/dist/runtime-entry.cjs +1 -1
  36. package/dist/runtime-entry.mjs +1 -1
  37. package/dist/{ssrScript-D3mYscp1.cjs → ssrScript-D73WcrCM.cjs} +52 -4
  38. package/dist/{ssrScript-DfmopH-w.mjs → ssrScript-zDK1dqXr.mjs} +52 -4
  39. package/dist/themes/bruttal.cjs +19 -4
  40. package/dist/themes/bruttal.d.cts +1 -1
  41. package/dist/themes/bruttal.d.mts +1 -1
  42. package/dist/themes/bruttal.mjs +19 -4
  43. package/dist/{toCssVars-CeckLjW1.mjs → toCssVars-CWTlp9St.mjs} +65 -5
  44. package/dist/{toCssVars-DDowz4wU.cjs → toCssVars-D0BR23cP.cjs} +65 -5
  45. package/dist/{tokenRegistry-DolhB5Vf.mjs → tokenRegistry-DviyqDeE.mjs} +19 -28
  46. package/dist/{tokenRegistry-B9zMRjpL.cjs → tokenRegistry-f_Bx_BAN.cjs} +19 -28
  47. package/dist/vars.cjs +8 -8
  48. package/dist/vars.d.cts +6 -6
  49. package/dist/vars.d.mts +6 -6
  50. package/dist/vars.mjs +8 -8
  51. package/dist/{withDataviz-BzZwFV2e.cjs → withDataviz-DrUtw8cc.cjs} +2 -2
  52. package/dist/{withDataviz-CrgXLR5A.mjs → withDataviz-Ln3sEwb7.mjs} +2 -2
  53. package/llms.txt +11 -9
  54. package/package.json +1 -1
  55. package/dist/themes/corporate.cjs +0 -34
  56. package/dist/themes/corporate.d.cts +0 -3
  57. package/dist/themes/corporate.d.mts +0 -3
  58. package/dist/themes/corporate.mjs +0 -31
  59. package/dist/themes/oca.cjs +0 -34
  60. package/dist/themes/oca.d.cts +0 -3
  61. package/dist/themes/oca.d.mts +0 -3
  62. package/dist/themes/oca.mjs +0 -31
  63. package/dist/themes/ventures.cjs +0 -34
  64. package/dist/themes/ventures.d.cts +0 -3
  65. package/dist/themes/ventures.d.mts +0 -3
  66. package/dist/themes/ventures.mjs +0 -31
@@ -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
- /** Derived lookup table: `[path, dtcgType]` pairs. */
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-CIqeJ8yd.cjs');
6
- const require_baseBundle = require('./baseBundle-BWbICg4p.cjs');
7
- const require_toCssVars = require('./toCssVars-DDowz4wU.cjs');
5
+ const require_helpers = require('./helpers-BU40JvFA.cjs');
6
+ const require_baseBundle = require('./baseBundle-a9LDsqYy.cjs');
7
+ const require_toCssVars = require('./toCssVars-D0BR23cP.cjs');
8
8
 
9
9
  //#region src/roots/toVars.ts
10
10
  /**
@@ -23,7 +23,7 @@ const require_toCssVars = require('./toCssVars-DDowz4wU.cjs');
23
23
  *
24
24
  * const vars = buildVarsMap(baseTheme);
25
25
  * vars.colors.action.primary.background.default
26
- * // → 'var(--tt-action-primary-background-default)'
26
+ * // → 'var(--tt-colors-action-primary-background-default)'
27
27
  * ```
28
28
  */
29
29
  var buildVarsMap = theme => {
@@ -57,15 +57,15 @@ var buildVarsMap = theme => {
57
57
  * import { vars } from '@ttoss/fsl-theme/vars';
58
58
  *
59
59
  * <Button style={{ background: vars.colors.action.primary.background.default }} />
60
- * // → background: 'var(--tt-action-primary-background-default)'
60
+ * // → background: 'var(--tt-colors-action-primary-background-default)'
61
61
  * ```
62
62
  *
63
63
  * ## Usage in CSS / CSS Modules
64
64
  *
65
65
  * ```css
66
66
  * .button {
67
- * background: var(--tt-action-primary-background-default);
68
- * color: var(--tt-action-primary-text-default);
67
+ * background: var(--tt-colors-action-primary-background-default);
68
+ * color: var(--tt-colors-action-primary-text-default);
69
69
  * }
70
70
  * ```
71
71
  *
@@ -110,7 +110,7 @@ var buildVarsMap = theme => {
110
110
  * buildVarsMap(myTheme.base) as CssVarsMap<MySemanticTokens>;
111
111
  *
112
112
  * myVars.colors.brandX.primary.default;
113
- * // → 'var(--tt-colors-brandx-primary-default)'
113
+ * // → 'var(--tt-colors-brandX-primary-default)' (camelCase is preserved)
114
114
  * ```
115
115
  *
116
116
  * For one-off custom keys where the extra structure is trivial, use
package/dist/vars.d.cts CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- import { i as ThemeTokens, n as SemanticTokens } from "./Types-BiBa17RL.cjs";
2
+ import { a as ThemeTokens, n as SemanticTokens } from "./Types-a_sfpbha.cjs";
3
3
 
4
4
  //#region src/roots/toVars.d.ts
5
5
  /**
@@ -38,7 +38,7 @@ type CssVarsMap<T> = { [K in keyof T as K extends `$${string}` ? never : K]: Non
38
38
  *
39
39
  * const vars = buildVarsMap(baseTheme);
40
40
  * vars.colors.action.primary.background.default
41
- * // → 'var(--tt-action-primary-background-default)'
41
+ * // → 'var(--tt-colors-action-primary-background-default)'
42
42
  * ```
43
43
  */
44
44
  declare const buildVarsMap: (theme: ThemeTokens) => CssVarsMap<ThemeTokens["semantic"]>;
@@ -60,15 +60,15 @@ declare const buildVarsMap: (theme: ThemeTokens) => CssVarsMap<ThemeTokens["sema
60
60
  * import { vars } from '@ttoss/fsl-theme/vars';
61
61
  *
62
62
  * <Button style={{ background: vars.colors.action.primary.background.default }} />
63
- * // → background: 'var(--tt-action-primary-background-default)'
63
+ * // → background: 'var(--tt-colors-action-primary-background-default)'
64
64
  * ```
65
65
  *
66
66
  * ## Usage in CSS / CSS Modules
67
67
  *
68
68
  * ```css
69
69
  * .button {
70
- * background: var(--tt-action-primary-background-default);
71
- * color: var(--tt-action-primary-text-default);
70
+ * background: var(--tt-colors-action-primary-background-default);
71
+ * color: var(--tt-colors-action-primary-text-default);
72
72
  * }
73
73
  * ```
74
74
  *
@@ -113,7 +113,7 @@ declare const buildVarsMap: (theme: ThemeTokens) => CssVarsMap<ThemeTokens["sema
113
113
  * buildVarsMap(myTheme.base) as CssVarsMap<MySemanticTokens>;
114
114
  *
115
115
  * myVars.colors.brandX.primary.default;
116
- * // → 'var(--tt-colors-brandx-primary-default)'
116
+ * // → 'var(--tt-colors-brandX-primary-default)' (camelCase is preserved)
117
117
  * ```
118
118
  *
119
119
  * For one-off custom keys where the extra structure is trivial, use
package/dist/vars.d.mts CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- import { i as ThemeTokens, n as SemanticTokens } from "./Types-BiBa17RL.mjs";
2
+ import { a as ThemeTokens, n as SemanticTokens } from "./Types-a_sfpbha.mjs";
3
3
 
4
4
  //#region src/roots/toVars.d.ts
5
5
  /**
@@ -38,7 +38,7 @@ type CssVarsMap<T> = { [K in keyof T as K extends `$${string}` ? never : K]: Non
38
38
  *
39
39
  * const vars = buildVarsMap(baseTheme);
40
40
  * vars.colors.action.primary.background.default
41
- * // → 'var(--tt-action-primary-background-default)'
41
+ * // → 'var(--tt-colors-action-primary-background-default)'
42
42
  * ```
43
43
  */
44
44
  declare const buildVarsMap: (theme: ThemeTokens) => CssVarsMap<ThemeTokens["semantic"]>;
@@ -60,15 +60,15 @@ declare const buildVarsMap: (theme: ThemeTokens) => CssVarsMap<ThemeTokens["sema
60
60
  * import { vars } from '@ttoss/fsl-theme/vars';
61
61
  *
62
62
  * <Button style={{ background: vars.colors.action.primary.background.default }} />
63
- * // → background: 'var(--tt-action-primary-background-default)'
63
+ * // → background: 'var(--tt-colors-action-primary-background-default)'
64
64
  * ```
65
65
  *
66
66
  * ## Usage in CSS / CSS Modules
67
67
  *
68
68
  * ```css
69
69
  * .button {
70
- * background: var(--tt-action-primary-background-default);
71
- * color: var(--tt-action-primary-text-default);
70
+ * background: var(--tt-colors-action-primary-background-default);
71
+ * color: var(--tt-colors-action-primary-text-default);
72
72
  * }
73
73
  * ```
74
74
  *
@@ -113,7 +113,7 @@ declare const buildVarsMap: (theme: ThemeTokens) => CssVarsMap<ThemeTokens["sema
113
113
  * buildVarsMap(myTheme.base) as CssVarsMap<MySemanticTokens>;
114
114
  *
115
115
  * myVars.colors.brandX.primary.default;
116
- * // → 'var(--tt-colors-brandx-primary-default)'
116
+ * // → 'var(--tt-colors-brandX-primary-default)' (camelCase is preserved)
117
117
  * ```
118
118
  *
119
119
  * For one-off custom keys where the extra structure is trivial, use
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-Dz7NfNK6.mjs";
3
- import { t as baseBundle } from "./baseBundle-DiYlHNG5.mjs";
4
- import { t as toCssVarName } from "./toCssVars-CeckLjW1.mjs";
2
+ import { o as isPlainObject } from "./helpers-BXaKe2s3.mjs";
3
+ import { t as baseBundle } from "./baseBundle-CXdxj_re.mjs";
4
+ import { t as toCssVarName } from "./toCssVars-CWTlp9St.mjs";
5
5
 
6
6
  //#region src/roots/toVars.ts
7
7
  /**
@@ -20,7 +20,7 @@ import { t as toCssVarName } from "./toCssVars-CeckLjW1.mjs";
20
20
  *
21
21
  * const vars = buildVarsMap(baseTheme);
22
22
  * vars.colors.action.primary.background.default
23
- * // → 'var(--tt-action-primary-background-default)'
23
+ * // → 'var(--tt-colors-action-primary-background-default)'
24
24
  * ```
25
25
  */
26
26
  var buildVarsMap = theme => {
@@ -54,15 +54,15 @@ var buildVarsMap = theme => {
54
54
  * import { vars } from '@ttoss/fsl-theme/vars';
55
55
  *
56
56
  * <Button style={{ background: vars.colors.action.primary.background.default }} />
57
- * // → background: 'var(--tt-action-primary-background-default)'
57
+ * // → background: 'var(--tt-colors-action-primary-background-default)'
58
58
  * ```
59
59
  *
60
60
  * ## Usage in CSS / CSS Modules
61
61
  *
62
62
  * ```css
63
63
  * .button {
64
- * background: var(--tt-action-primary-background-default);
65
- * color: var(--tt-action-primary-text-default);
64
+ * background: var(--tt-colors-action-primary-background-default);
65
+ * color: var(--tt-colors-action-primary-text-default);
66
66
  * }
67
67
  * ```
68
68
  *
@@ -107,7 +107,7 @@ var buildVarsMap = theme => {
107
107
  * buildVarsMap(myTheme.base) as CssVarsMap<MySemanticTokens>;
108
108
  *
109
109
  * myVars.colors.brandX.primary.default;
110
- * // → 'var(--tt-colors-brandx-primary-default)'
110
+ * // → 'var(--tt-colors-brandX-primary-default)' (camelCase is preserved)
111
111
  * ```
112
112
  *
113
113
  * For one-off custom keys where the extra structure is trivial, use
@@ -1,5 +1,5 @@
1
1
  /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
- const require_createTheme = require('./createTheme-BHGc1IFI.cjs');
2
+ const require_createTheme = require('./createTheme-B7H0xSVp.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
- na: "{core.colors.neutral.500}"
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
- import { t as buildTheme } from "./createTheme-C1r5nJco.mjs";
2
+ import { t as buildTheme } from "./createTheme-Bm9LVQ4w.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
- na: "{core.colors.neutral.500}"
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, corporate, oca, ventures } from '@ttoss/fsl-theme';
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, corporate, oca, ventures } from '@ttoss/fsl-theme';
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:
@@ -289,7 +289,8 @@ Not every state is legal in every `ux` context. Illegal combinations are TypeScr
289
289
  | `indeterminate` | — | ✅ | — | — | — |
290
290
  | `current` | — | — | ✅ (active route) | — | — |
291
291
  | `visited` | — | — | ✅ | — | ✅ (link in content) |
292
- | `droptarget` | | ✅ (file input) | | — | ✅ |
292
+ | `droptarget` | | ✅ (file input) | | — | ✅ |
293
+ | `invalid` | — | ✅ (runtime validation outcome — `isInvalid`, never authorial; pairs with `input.negative.*` on the validationMessage) | — | — | — |
293
294
 
294
295
  State disambiguation rules:
295
296
  - **`active` vs `pressed`**: `active` = the brief moment of clicking (transient). `pressed` = persistent toggle engaged ("Bold" button). Never use `active` for toggle state.
@@ -575,7 +576,7 @@ const DarkModeToggle = () => {
575
576
  ```tsx
576
577
  import { useResolvedTokens } from '@ttoss/fsl-theme/react';
577
578
 
578
- // Keys are full semantic dot-paths; values are resolved raw CSS values (hex, px, etc.)
579
+ // Keys are full semantic dot-paths; values are resolved raw CSS values (hex, numbers, etc.)
579
580
  const NativeButton = ({ disabled }: { disabled?: boolean }) => {
580
581
  const resolved = useResolvedTokens();
581
582
  return (
@@ -584,8 +585,7 @@ const NativeButton = ({ disabled }: { disabled?: boolean }) => {
584
585
  backgroundColor: disabled
585
586
  ? resolved['semantic.colors.action.primary.background.disabled']
586
587
  : resolved['semantic.colors.action.primary.background.default'],
587
- minHeight: resolved['semantic.sizing.hit.base'],
588
- paddingHorizontal: resolved['semantic.spacing.inset.control.md'],
588
+ opacity: disabled ? Number(resolved['semantic.opacity.disabled']) : 1,
589
589
  }}
590
590
  />
591
591
  );
@@ -594,6 +594,8 @@ const NativeButton = ({ disabled }: { disabled?: boolean }) => {
594
594
 
595
595
  `useResolvedTokens()` automatically applies coarse-pointer hit target overrides — mirrors the `@media (any-pointer: coarse)` block that `toCssVars` injects for CSS consumers.
596
596
 
597
+ ⚠ **CSS-coupled tokens stay unresolved** (model.md §8): spacing steps (`calc(N * var(--tt-core-spacing-engine-unit))`), fluid `text.*.fontSize` / `sizing.hit.*` (`clamp()` + `cqi`), `sizing.viewport.*` (`dvh`/`dvw`), `sizing.measure.reading` (`ch`), and `spacing.gutter.*` are CSS expressions and are **not usable** outside a CSS engine. In non-CSS environments, consume colors, opacity, z-index, font weights/leading, and other scalar tokens — derive dimensional values from your platform's layout system.
598
+
597
599
  ---
598
600
 
599
601
  # JOB 2 — Customizing a theme
@@ -614,7 +616,7 @@ const theme = createTheme({
614
616
  ```
615
617
 
616
618
  - Default: `createTheme()` returns the built-in `baseTheme` + built-in `darkAlternate`.
617
- - `extends`: inherit from a built-in (`bruttal`, `corporate`, `oca`, `ventures`).
619
+ - `extends`: inherit from a built-in (`bruttal`).
618
620
  - `alternate: null`: opt out of dark mode entirely (single-mode theme).
619
621
 
620
622
  ## Intent → override map
@@ -636,7 +638,7 @@ createTheme({
636
638
  - All semantic tokens that reference `{core.colors.brand.*}` automatically pick up the new values. No semantic remap needed unless contrast breaks.
637
639
  - For dark mode, the built-in `darkAlternate` already remaps semantic references to lighter brand steps — usually no extra work.
638
640
 
639
- **Reference patterns:** `corporate.ts`, `oca.ts`, `ventures.ts` are minimal brand-only overrides.
641
+ **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
642
 
641
643
  ### Adjust density
642
644
 
@@ -727,5 +729,5 @@ Cross-token semantic correctness (the rules above) is **not** statically validat
727
729
 
728
730
  - README — full grammar tables, usage examples per import path
729
731
  - `dist/Types-*.d.ts` — every token has co-located JSDoc with semantics + anti-pattern notes
730
- - `src/themes/{bruttal,corporate,oca,ventures}.ts` — worked customization patterns
732
+ - `src/themes/bruttal.ts` — worked customization pattern
731
733
  - Family specs (full grammar, decision matrices, ADRs): `docs/design/design-system/design-tokens/families/{family}.md` in the ttoss monorepo
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ttoss/fsl-theme",
3
- "version": "1.1.22",
3
+ "version": "2.1.0",
4
4
  "description": "ttoss theme provider for UI.",
5
5
  "keywords": [
6
6
  "css-variables",
@@ -1,34 +0,0 @@
1
- /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
- Object.defineProperty(exports, Symbol.toStringTag, {
3
- value: 'Module'
4
- });
5
- const require_createTheme = require('../createTheme-BHGc1IFI.cjs');
6
- const require_withDataviz = require('../withDataviz-BzZwFV2e.cjs');
7
-
8
- //#region src/themes/corporate.ts
9
- var bundle = require_createTheme.createTheme({
10
- overrides: {
11
- core: {
12
- colors: {
13
- brand: {
14
- 50: "#E3F2FF",
15
- 100: "#B3DAFF",
16
- 200: "#80BFFF",
17
- 300: "#4DA5FF",
18
- 400: "#1A8AFF",
19
- 500: "#0469E3",
20
- 600: "#0352A6",
21
- 700: "#022D66",
22
- 800: "#011923",
23
- 900: "#000000"
24
- }
25
- }
26
- },
27
- semantic: {}
28
- },
29
- alternate: void 0
30
- });
31
- var corporate = require_withDataviz.withDataviz(bundle);
32
-
33
- //#endregion
34
- exports.corporate = corporate;
@@ -1,3 +0,0 @@
1
-
2
- import { r as corporate } from "../index-Djro6G4e.cjs";
3
- export { corporate };
@@ -1,3 +0,0 @@
1
-
2
- import { r as corporate } from "../index-BuszkWMy.mjs";
3
- export { corporate };
@@ -1,31 +0,0 @@
1
- /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
- import { n as createTheme } from "../createTheme-C1r5nJco.mjs";
3
- import { t as withDataviz } from "../withDataviz-CrgXLR5A.mjs";
4
-
5
- //#region src/themes/corporate.ts
6
- var bundle = createTheme({
7
- overrides: {
8
- core: {
9
- colors: {
10
- brand: {
11
- 50: "#E3F2FF",
12
- 100: "#B3DAFF",
13
- 200: "#80BFFF",
14
- 300: "#4DA5FF",
15
- 400: "#1A8AFF",
16
- 500: "#0469E3",
17
- 600: "#0352A6",
18
- 700: "#022D66",
19
- 800: "#011923",
20
- 900: "#000000"
21
- }
22
- }
23
- },
24
- semantic: {}
25
- },
26
- alternate: void 0
27
- });
28
- var corporate = withDataviz(bundle);
29
-
30
- //#endregion
31
- export { corporate };
@@ -1,34 +0,0 @@
1
- /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
- Object.defineProperty(exports, Symbol.toStringTag, {
3
- value: 'Module'
4
- });
5
- const require_createTheme = require('../createTheme-BHGc1IFI.cjs');
6
- const require_withDataviz = require('../withDataviz-BzZwFV2e.cjs');
7
-
8
- //#region src/themes/oca.ts
9
- var bundle = require_createTheme.createTheme({
10
- overrides: {
11
- core: {
12
- colors: {
13
- brand: {
14
- 50: "#F5FBEA",
15
- 100: "#E4F6C2",
16
- 200: "#CAED8A",
17
- 300: "#ABDF4E",
18
- 400: "#8ECE1F",
19
- 500: "#6DB800",
20
- 600: "#549100",
21
- 700: "#3C6A00",
22
- 800: "#254300",
23
- 900: "#111F00"
24
- }
25
- }
26
- },
27
- semantic: {}
28
- },
29
- alternate: void 0
30
- });
31
- var oca = require_withDataviz.withDataviz(bundle);
32
-
33
- //#endregion
34
- exports.oca = oca;
@@ -1,3 +0,0 @@
1
-
2
- import { n as oca } from "../index-Djro6G4e.cjs";
3
- export { oca };
@@ -1,3 +0,0 @@
1
-
2
- import { n as oca } from "../index-BuszkWMy.mjs";
3
- export { oca };
@@ -1,31 +0,0 @@
1
- /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
- import { n as createTheme } from "../createTheme-C1r5nJco.mjs";
3
- import { t as withDataviz } from "../withDataviz-CrgXLR5A.mjs";
4
-
5
- //#region src/themes/oca.ts
6
- var bundle = createTheme({
7
- overrides: {
8
- core: {
9
- colors: {
10
- brand: {
11
- 50: "#F5FBEA",
12
- 100: "#E4F6C2",
13
- 200: "#CAED8A",
14
- 300: "#ABDF4E",
15
- 400: "#8ECE1F",
16
- 500: "#6DB800",
17
- 600: "#549100",
18
- 700: "#3C6A00",
19
- 800: "#254300",
20
- 900: "#111F00"
21
- }
22
- }
23
- },
24
- semantic: {}
25
- },
26
- alternate: void 0
27
- });
28
- var oca = withDataviz(bundle);
29
-
30
- //#endregion
31
- export { oca };
@@ -1,34 +0,0 @@
1
- /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
- Object.defineProperty(exports, Symbol.toStringTag, {
3
- value: 'Module'
4
- });
5
- const require_createTheme = require('../createTheme-BHGc1IFI.cjs');
6
- const require_withDataviz = require('../withDataviz-BzZwFV2e.cjs');
7
-
8
- //#region src/themes/ventures.ts
9
- var bundle = require_createTheme.createTheme({
10
- overrides: {
11
- core: {
12
- colors: {
13
- brand: {
14
- 50: "#EEF1F8",
15
- 100: "#CDD5EA",
16
- 200: "#9BAED5",
17
- 300: "#6887BF",
18
- 400: "#3A61A8",
19
- 500: "#1A3D8F",
20
- 600: "#142E6E",
21
- 700: "#0E2050",
22
- 800: "#081333",
23
- 900: "#03091A"
24
- }
25
- }
26
- },
27
- semantic: {}
28
- },
29
- alternate: void 0
30
- });
31
- var ventures = require_withDataviz.withDataviz(bundle);
32
-
33
- //#endregion
34
- exports.ventures = ventures;
@@ -1,3 +0,0 @@
1
-
2
- import { t as ventures } from "../index-Djro6G4e.cjs";
3
- export { ventures };
@@ -1,3 +0,0 @@
1
-
2
- import { t as ventures } from "../index-BuszkWMy.mjs";
3
- export { ventures };
@@ -1,31 +0,0 @@
1
- /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
- import { n as createTheme } from "../createTheme-C1r5nJco.mjs";
3
- import { t as withDataviz } from "../withDataviz-CrgXLR5A.mjs";
4
-
5
- //#region src/themes/ventures.ts
6
- var bundle = createTheme({
7
- overrides: {
8
- core: {
9
- colors: {
10
- brand: {
11
- 50: "#EEF1F8",
12
- 100: "#CDD5EA",
13
- 200: "#9BAED5",
14
- 300: "#6887BF",
15
- 400: "#3A61A8",
16
- 500: "#1A3D8F",
17
- 600: "#142E6E",
18
- 700: "#0E2050",
19
- 800: "#081333",
20
- 900: "#03091A"
21
- }
22
- }
23
- },
24
- semantic: {}
25
- },
26
- alternate: void 0
27
- });
28
- var ventures = withDataviz(bundle);
29
-
30
- //#endregion
31
- export { ventures };