pivotkit-report 0.0.0-stage → 0.2.0

package/types/tokens.d.ts

@@ -0,0 +1,114 @@
+/** The light theme: print, and a screen in light mode. */
+export declare const LIGHT_TOKENS: Readonly<{
+    "--pk-surface": "#ffffff";
+    "--pk-surface-2": "#f6f7f9";
+    "--pk-surface-raised": "#ffffff";
+    "--pk-text": "#1a1d23";
+    "--pk-muted": "#5a6270";
+    "--pk-border": "#dde1e7";
+    "--pk-border-strong": "#c3c9d2";
+    "--pk-grid": "#edf0f3";
+    "--pk-total": "#eef1f5";
+    "--pk-total-strong": "#e9edf3";
+    "--pk-shadow": "0 1px 2px rgb(16 24 40 / 0.06), 0 4px 12px rgb(16 24 40 / 0.08)";
+    "--pk-heat-low": "#eaf1fb";
+    "--pk-heat-high": "#2a78d6";
+    "--pk-scale-low": "var(--pk-heat-low)";
+    "--pk-scale-high": "var(--pk-heat-high)";
+    "--pk-chart-1": "#2a78d6";
+    "--pk-chart-2": "#eb6834";
+    "--pk-chart-3": "#1baf7a";
+    "--pk-chart-4": "#eda100";
+    "--pk-chart-5": "#e87ba4";
+    "--pk-chart-6": "#008300";
+    "--pk-chart-7": "#6250d6";
+    "--pk-chart-8": "#e34948";
+}>;
+/** The dark theme, for a report read on a screen in dark mode (never printed: print is light). */
+export declare const DARK_TOKENS: Readonly<{
+    "--pk-surface": "#16181d";
+    "--pk-surface-2": "#1c1f25";
+    "--pk-surface-raised": "#22262d";
+    "--pk-text": "#e8eaef";
+    "--pk-muted": "#a3aab7";
+    "--pk-border": "#2f343e";
+    "--pk-border-strong": "#454c58";
+    "--pk-grid": "#23272e";
+    "--pk-total": "#21252d";
+    "--pk-total-strong": "#252a33";
+    "--pk-shadow": "0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.3)";
+    "--pk-heat-low": "#1d2735";
+    "--pk-heat-high": "#3987e5";
+    "--pk-scale-low": "var(--pk-heat-low)";
+    "--pk-scale-high": "var(--pk-heat-high)";
+    "--pk-chart-1": "#3987e5";
+    "--pk-chart-2": "#d95926";
+    "--pk-chart-3": "#199e70";
+    "--pk-chart-4": "#c98500";
+    "--pk-chart-5": "#d55181";
+    "--pk-chart-6": "#008300";
+    "--pk-chart-7": "#9085e9";
+    "--pk-chart-8": "#e66767";
+}>;
+/** The font weights, the same in both themes: pivotkit-react's scale (test/tokens.test.js compares them). */
+export declare const WEIGHT_TOKENS: Readonly<{
+    "--pk-weight-normal": "400";
+    "--pk-weight-medium": "500";
+    "--pk-weight-strong": "600";
+    "--pk-weight-bold": "700";
+}>;
+/**
+ * The corners the report draws, the same in both themes: the chart's card, as pivotkit-react's tooltip
+ * (test/tokens.test.js compares them).
+ */
+export declare const SHAPE_TOKENS: Readonly<{
+    "--pk-radius-card": "8px";
+}>;
+/**
+ * The report's font sizes, the same in both themes: its text (--pk-font-size, 14 px, the report's own
+ * default: pivotkit-react's follows the page, at least 14 px, and its Export menu passes it in px),
+ * secondary text (--pk-small, pivotkit-react's: the details, never below 14 px), the title (20 px at a
+ * 14 px text) and the printed text, in pt on paper: the table and, for a very wide table, the smaller
+ * size (PRINT_WIDE.small, never below 7 pt). A host passes its own as `tokens`.
+ */
+export declare const SIZE_TOKENS: Readonly<{
+    "--pk-font-size": "14px";
+    "--pk-small": "max(14px, 0.93em)";
+    "--pk-report-title-size": "calc(var(--pk-font-size) * 10 / 7)";
+    "--pk-print-size": "10pt";
+    "--pk-print-small": "7pt";
+}>;
+/**
+ * The report's font: the system's, as the screen's report inherits from most hosts. Without quotes
+ * (names of several words are valid unquoted): ECharts 6.1 writes a font into an SVG's style attribute
+ * without escaping its quotes, which would end the attribute.
+ */
+export declare const REPORT_FONT = "system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif";
+/**
+ * The tokens as a style the chart's code reads (getPropertyValue), the host's over the light ones.
+ * @param {Record<string, string>} [tokens]
+ * @returns {{ getPropertyValue(name: string): string }}
+ */
+export declare function tokenStyle(tokens?: Record<string, string>): {
+    getPropertyValue(name: string): string;
+};
+/**
+ * The host's tokens that may go into CSS: --pk-* names (and font-family) with plain values that call
+ * no function but SAFE_FUNCTIONS; others are left out.
+ * @param {Record<string, string>} tokens
+ */
+export declare function cleanTokens(tokens: Record<string, string>): Record<string, string>;
+/**
+ * The colours of a colour scale and of data bars whose view names none, from the host's tokens over
+ * the light ones, as the report on screen resolves them: the scale --pk-scale-low, the host's
+ * --pk-scale-mid and --pk-scale-high (by default the heat tokens), the bars --pk-chart-1. A value
+ * that is no plain hex colour (another token is followed) keeps pivotkit-core's default.
+ * @param {Record<string, string>} [tokens]
+ * @returns {{ colorScale?: string[], dataBar?: string }}
+ */
+export declare function conditionalColors(tokens?: Record<string, string>): {
+    colorScale?: string[];
+    dataBar?: string;
+};
+/** Tokens as CSS declarations. */
+export declare const declarations: (tokens: any) => string;