@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
|
@@ -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-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-
|
|
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 {
|
|
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-
|
|
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 {
|
|
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-
|
|
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-
|
|
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-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-
|
|
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-
|
|
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
|
-
|
|
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-
|
|
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
|
-
|
|
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:
|
|
@@ -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` |
|
|
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,
|
|
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
|
-
|
|
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
|
|
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
|
|
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/
|
|
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,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,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 };
|
package/dist/themes/oca.cjs
DELETED
|
@@ -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;
|
package/dist/themes/oca.d.cts
DELETED
package/dist/themes/oca.d.mts
DELETED
package/dist/themes/oca.mjs
DELETED
|
@@ -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 };
|
package/dist/themes/ventures.cjs
DELETED
|
@@ -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;
|
package/dist/themes/ventures.mjs
DELETED
|
@@ -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 };
|