@ttoss/fsl-theme 1.1.21 → 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 +16 -14
- 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-BXvPJYzj.cjs → baseBundle-DdRSa5mf.cjs} +3 -2
- package/dist/{baseBundle-BLvD8XVS.mjs → baseBundle-R7WyjyTw.mjs} +3 -2
- package/dist/{createTheme-JOu16Shb.cjs → createTheme--UFgVlEn.cjs} +144 -16
- package/dist/{createTheme-DzLnsknT.mjs → createTheme-B6tVIikC.mjs} +138 -16
- 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-C29fy-Ad.cjs → helpers-BU40JvFA.cjs} +27 -78
- package/dist/{helpers-CA4Qkxct.mjs → helpers-BXaKe2s3.mjs} +28 -73
- package/dist/{index-CsIjfw86.d.cts → index-7YL90Xqs.d.cts} +36 -12
- package/dist/{index-nJrjI0BA.d.mts → index-BmCTIOzh.d.mts} +36 -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-DnKxR2gK.d.mts → react-C8JrZf-b.d.mts} +43 -2
- package/dist/{react-CoWIQYx_.cjs → react-DLB8nrXQ.cjs} +32 -2
- package/dist/{react-CGa6FlNL.d.cts → react-Dt7vGAVG.d.cts} +43 -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 +32 -2
- package/dist/runtime-entry.cjs +1 -1
- package/dist/runtime-entry.mjs +1 -1
- package/dist/{ssrScript-CoRE6jjq.mjs → ssrScript-DNLlLDps.mjs} +2 -1
- package/dist/{ssrScript-DOpLExaG.cjs → ssrScript-MF5SIONH.cjs} +2 -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-CUiqx2kh.cjs → toCssVars-BseqmMcT.cjs} +27 -2
- package/dist/{toCssVars-BHRiSykR.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-DYV1S_xr.mjs → withDataviz-BvpZJnFx.mjs} +2 -2
- package/dist/{withDataviz-BlJcYhcw.cjs → withDataviz-CYRf4exT.cjs} +2 -2
- package/llms.txt +6 -6
- 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/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/
|
|
731
|
-
- Family specs (full grammar, decision matrices, ADRs): `docs/design/
|
|
730
|
+
- `src/themes/bruttal.ts` — worked customization pattern
|
|
731
|
+
- 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-JOu16Shb.cjs');
|
|
6
|
-
const require_withDataviz = require('../withDataviz-BlJcYhcw.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-DzLnsknT.mjs";
|
|
3
|
-
import { t as withDataviz } from "../withDataviz-DYV1S_xr.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-JOu16Shb.cjs');
|
|
6
|
-
const require_withDataviz = require('../withDataviz-BlJcYhcw.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-DzLnsknT.mjs";
|
|
3
|
-
import { t as withDataviz } from "../withDataviz-DYV1S_xr.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-JOu16Shb.cjs');
|
|
6
|
-
const require_withDataviz = require('../withDataviz-BlJcYhcw.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-DzLnsknT.mjs";
|
|
3
|
-
import { t as withDataviz } from "../withDataviz-DYV1S_xr.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 };
|