@bysages/charts 0.2.0 → 0.2.1
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/dist/index.d.mts +6 -4
- package/dist/index.mjs +1 -26
- package/dist/react/chart.mjs +1 -1
- package/dist/solid/chart.mjs +1 -1
- package/dist/svelte/chart.mjs +1 -1
- package/dist/{theme-yhB90I_b.mjs → theme-Qki1v0k8.mjs} +25 -13
- package/dist/vue/chart.mjs +1 -1
- package/package.json +2 -2
package/dist/index.d.mts
CHANGED
|
@@ -5,9 +5,10 @@ export * from "@tanstack/charts";
|
|
|
5
5
|
* crosshair and focus takes the primary ink. The marks themselves carry
|
|
6
6
|
* tokens straight through paint attributes — var() resolves against the
|
|
7
7
|
* live theme, so mode, accent, and scene retune the ink with no redraw. */
|
|
8
|
-
export declare const chartThemeCss
|
|
8
|
+
export declare const chartThemeCss: string;
|
|
9
9
|
/** Inject the chart theme bridge (plus the token layer on first use).
|
|
10
|
-
* Idempotent; SSR is a no-op
|
|
10
|
+
* Idempotent; SSR is a no-op, as is a document the SSR integration
|
|
11
|
+
* already dressed. */
|
|
11
12
|
export declare function injectChartTheme(): void;
|
|
12
13
|
//#endregion
|
|
13
14
|
//#region src/palette.d.ts
|
|
@@ -23,8 +24,9 @@ export declare const chartColors: {
|
|
|
23
24
|
readonly warning: "var(--bs-color-warning)";
|
|
24
25
|
readonly info: "var(--bs-color-info)";
|
|
25
26
|
};
|
|
26
|
-
/** Series order for categorical paint —
|
|
27
|
-
*
|
|
27
|
+
/** Series order for categorical paint — the pigments in reading order,
|
|
28
|
+
* straight from the palette so the two can never drift apart. Hand this
|
|
29
|
+
* to an ordinal scale's range (`scaleOrdinal().range(chartSeriesRange)`). */
|
|
28
30
|
export declare const chartSeriesRange: string[];
|
|
29
31
|
/** The quiet ink for grids, guides, and secondary marks. */
|
|
30
32
|
export declare const chartHairline = "var(--bs-color-border)";
|
package/dist/index.mjs
CHANGED
|
@@ -1,28 +1,3 @@
|
|
|
1
|
-
import { n as injectChartTheme, t as chartThemeCss } from "./theme-
|
|
1
|
+
import { a as chartSeriesRange, i as chartHairline, n as injectChartTheme, r as chartColors, t as chartThemeCss } from "./theme-Qki1v0k8.mjs";
|
|
2
2
|
export * from "@tanstack/charts";
|
|
3
|
-
//#region src/palette.ts
|
|
4
|
-
/** The semantic pigments as paint. Marks take these strings directly —
|
|
5
|
-
* the SVG renderer writes them as paint attributes, and var() inside a
|
|
6
|
-
* paint attribute resolves against the live theme. Ink leads; the fixed
|
|
7
|
-
* pigments follow in reading order, so any series can carry any hue and
|
|
8
|
-
* the chart never presumes an industry. */
|
|
9
|
-
const chartColors = {
|
|
10
|
-
ink: "var(--bs-color-primary)",
|
|
11
|
-
danger: "var(--bs-color-danger)",
|
|
12
|
-
success: "var(--bs-color-success)",
|
|
13
|
-
warning: "var(--bs-color-warning)",
|
|
14
|
-
info: "var(--bs-color-info)"
|
|
15
|
-
};
|
|
16
|
-
/** Series order for categorical paint — hand this to an ordinal scale's
|
|
17
|
-
* range (`scaleOrdinal().range(chartSeriesRange)`). */
|
|
18
|
-
const chartSeriesRange = [
|
|
19
|
-
chartColors.ink,
|
|
20
|
-
chartColors.danger,
|
|
21
|
-
chartColors.success,
|
|
22
|
-
chartColors.warning,
|
|
23
|
-
chartColors.info
|
|
24
|
-
];
|
|
25
|
-
/** The quiet ink for grids, guides, and secondary marks. */
|
|
26
|
-
const chartHairline = "var(--bs-color-border)";
|
|
27
|
-
//#endregion
|
|
28
3
|
export { chartColors, chartHairline, chartSeriesRange, chartThemeCss, injectChartTheme };
|
package/dist/react/chart.mjs
CHANGED
package/dist/solid/chart.mjs
CHANGED
package/dist/svelte/chart.mjs
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
|
-
import { injectTokens } from "@bysages/core";
|
|
2
|
-
//#region src/
|
|
1
|
+
import { injectTokens, stylesShipped } from "@bysages/core";
|
|
2
|
+
//#region src/palette.ts
|
|
3
|
+
/** The semantic pigments as paint. Marks take these strings directly —
|
|
4
|
+
* the SVG renderer writes them as paint attributes, and var() inside a
|
|
5
|
+
* paint attribute resolves against the live theme. Ink leads; the fixed
|
|
6
|
+
* pigments follow in reading order, so any series can carry any hue and
|
|
7
|
+
* the chart never presumes an industry. */
|
|
8
|
+
const chartColors = {
|
|
9
|
+
ink: "var(--bs-color-primary)",
|
|
10
|
+
danger: "var(--bs-color-danger)",
|
|
11
|
+
success: "var(--bs-color-success)",
|
|
12
|
+
warning: "var(--bs-color-warning)",
|
|
13
|
+
info: "var(--bs-color-info)"
|
|
14
|
+
};
|
|
15
|
+
/** Series order for categorical paint — the pigments in reading order,
|
|
16
|
+
* straight from the palette so the two can never drift apart. Hand this
|
|
17
|
+
* to an ordinal scale's range (`scaleOrdinal().range(chartSeriesRange)`). */
|
|
18
|
+
const chartSeriesRange = Object.values(chartColors);
|
|
19
|
+
/** The quiet ink for grids, guides, and secondary marks. */
|
|
20
|
+
const chartHairline = "var(--bs-color-border)";
|
|
3
21
|
/** Bridge the chart engine's surface variables onto the paper-and-ink
|
|
4
22
|
* tokens: its tooltip dresses like every other popup vessel, and its
|
|
5
23
|
* crosshair and focus takes the primary ink. The marks themselves carry
|
|
@@ -7,14 +25,7 @@ import { injectTokens } from "@bysages/core";
|
|
|
7
25
|
* live theme, so mode, accent, and scene retune the ink with no redraw. */
|
|
8
26
|
const chartThemeCss = `
|
|
9
27
|
.ts-chart {
|
|
10
|
-
|
|
11
|
-
without these the engine falls back to its own default palette.
|
|
12
|
-
They ride the pigments in reading order, then one mixed ink tone. */
|
|
13
|
-
--ts-chart-1: var(--bs-color-primary);
|
|
14
|
-
--ts-chart-2: var(--bs-color-danger);
|
|
15
|
-
--ts-chart-3: var(--bs-color-success);
|
|
16
|
-
--ts-chart-4: var(--bs-color-warning);
|
|
17
|
-
--ts-chart-5: var(--bs-color-info);
|
|
28
|
+
${Object.values(chartColors).map((paint, i) => ` --ts-chart-${i + 1}: ${paint};`).join("\n")}
|
|
18
29
|
--ts-chart-6: color-mix(in oklab, var(--bs-color-primary) 60%, var(--bs-color-surface-0));
|
|
19
30
|
--ts-chart-tooltip-background: var(--bs-color-surface-2);
|
|
20
31
|
--ts-chart-tooltip-border: 1px solid var(--bs-color-border);
|
|
@@ -49,9 +60,10 @@ const chartThemeCss = `
|
|
|
49
60
|
`;
|
|
50
61
|
let injected = false;
|
|
51
62
|
/** Inject the chart theme bridge (plus the token layer on first use).
|
|
52
|
-
* Idempotent; SSR is a no-op
|
|
63
|
+
* Idempotent; SSR is a no-op, as is a document the SSR integration
|
|
64
|
+
* already dressed. */
|
|
53
65
|
function injectChartTheme() {
|
|
54
|
-
if (injected || typeof document === "undefined") return;
|
|
66
|
+
if (injected || stylesShipped() || typeof document === "undefined") return;
|
|
55
67
|
injectTokens();
|
|
56
68
|
const style = document.createElement("style");
|
|
57
69
|
style.dataset.bsStyles = "chart-theme";
|
|
@@ -60,4 +72,4 @@ function injectChartTheme() {
|
|
|
60
72
|
injected = true;
|
|
61
73
|
}
|
|
62
74
|
//#endregion
|
|
63
|
-
export { injectChartTheme as n, chartThemeCss as t };
|
|
75
|
+
export { chartSeriesRange as a, chartHairline as i, injectChartTheme as n, chartColors as r, chartThemeCss as t };
|
package/dist/vue/chart.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bysages/charts",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "Token-themed charts for By Sages Elements — TanStack Charts dressed in the paper-and-ink system: one token bridge plus thin framework adapters",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"charts",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
},
|
|
56
56
|
"dependencies": {
|
|
57
57
|
"@tanstack/charts": "0.18.0",
|
|
58
|
-
"@bysages/core": "0.2.
|
|
58
|
+
"@bysages/core": "0.2.1"
|
|
59
59
|
},
|
|
60
60
|
"devDependencies": {
|
|
61
61
|
"@sveltejs/vite-plugin-svelte": "7.3.0",
|