@pushwoosh/kit-charts 0.0.18 → 0.0.20

package/core/model/palette.d.ts

@@ -15,7 +15,7 @@ export declare const DEFAULT_SURFACE_COLOR: string;
  * yet. Two neutrals, not one: white on the mid greys a threshold is painted in
  * reads at 2.8:1, far under the 4.5:1 small text needs.
  */
-export declare const DEFAULT_ON_FILL_TEXT_COLOR: string;
+export declare const DEFAULT_ON_FILL_TEXT_COLOR = "#FFFFFF";
 /** Whichever of the two neutrals reads better on a fill. */
 export declare function textColorOn(fill: string): string;
 export declare const DEFAULT_TOOLTIP_SURFACE_COLOR: string;

package/core/model/palette.js

@@ -17,7 +17,9 @@ export const DEFAULT_SURFACE_COLOR = Color.CLEAR;
  * yet. Two neutrals, not one: white on the mid greys a threshold is painted in
  * reads at 2.8:1, far under the 4.5:1 small text needs.
  */
-export const DEFAULT_ON_FILL_TEXT_COLOR = Color.CLEAR;
+// Literal white rather than `Color.CLEAR`: the fill is the caller's, so the ink on it
+// must stay readable instead of turning #323233 with the dark theme.
+export const DEFAULT_ON_FILL_TEXT_COLOR = '#FFFFFF';
 const ON_FILL_DARK_TEXT_COLOR = Color.BRAND_BLACK;
 const linearChannel = value => {
   const unit = value / 255;
@@ -32,15 +34,16 @@ const luminance = color => {
   return 0.2126 * linearChannel(rgba[0]) + 0.7152 * linearChannel(rgba[1]) + 0.0722 * linearChannel(rgba[2]);
 };
 const contrast = (one, other) => (Math.max(one, other) + 0.05) / (Math.min(one, other) + 0.05);
-const LIGHT_TEXT_LUMINANCE = luminance(DEFAULT_ON_FILL_TEXT_COLOR) ?? 1;
-const DARK_TEXT_LUMINANCE = luminance(ON_FILL_DARK_TEXT_COLOR) ?? 0;
 /** Whichever of the two neutrals reads better on a fill. */
 export function textColorOn(fill) {
   const behind = luminance(fill);
   if (behind === null) {
     return DEFAULT_ON_FILL_TEXT_COLOR;
   }
-  return contrast(behind, LIGHT_TEXT_LUMINANCE) >= contrast(behind, DARK_TEXT_LUMINANCE) ? DEFAULT_ON_FILL_TEXT_COLOR : ON_FILL_DARK_TEXT_COLOR;
+  // Read per call, not once: both neutrals are tokens and swap literals when the theme does.
+  const light = luminance(DEFAULT_ON_FILL_TEXT_COLOR) ?? 1;
+  const dark = luminance(ON_FILL_DARK_TEXT_COLOR) ?? 0;
+  return contrast(behind, light) >= contrast(behind, dark) ? DEFAULT_ON_FILL_TEXT_COLOR : ON_FILL_DARK_TEXT_COLOR;
 }
 // Chart tooltips follow the product hint style: dark bubble, light text.
 export const DEFAULT_TOOLTIP_SURFACE_COLOR = Color.BRAND_BLACK;

package/core/scale/color.d.ts

@@ -1,9 +1,12 @@
+import { type ThemeName } from '@pushwoosh/kit-constants';
 import { type ColorScale, type ColorStop } from '../types/scale';
 export interface ColorScaleOptions {
     domain: readonly [number, number];
     stops: readonly ColorStop[];
 }
 type Rgba = [number, number, number, number];
+/** Theme the page is painted in; a chart reads it the way CSS does, off `<html>`. */
+export declare const activeTheme: () => ThemeName;
 export declare const parseColor: (color: string) => Rgba | null;
 export declare function createColorScale(options: ColorScaleOptions): ColorScale;
 export {};

package/core/scale/color.js

@@ -1,3 +1,4 @@
+import { Color, DEFAULT_THEME, getThemeColors, THEME_ATTRIBUTE } from '@pushwoosh/kit-constants';
 const clampChannel = value => Math.min(255, Math.max(0, Math.round(value)));
 const parseHex = color => {
   const match = /^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.exec(color);
@@ -21,7 +22,26 @@ const parseFunctional = color => {
   }
   return [parts[0], parts[1], parts[2], parts[3] === undefined ? 1 : parts[3]];
 };
-export const parseColor = color => parseHex(color.trim()) ?? parseFunctional(color.trim());
+const TOKEN_OF_VALUE = new Map(Object.keys(Color).filter(token => token !== 'CURRENT').map(token => [Color[token], token]));
+/** Theme the page is painted in; a chart reads it the way CSS does, off `<html>`. */
+export const activeTheme = () => typeof document !== 'undefined' && document.documentElement.getAttribute(THEME_ATTRIBUTE) === 'dark' ? 'dark' : DEFAULT_THEME;
+const unwrapVar = color => {
+  const match = /^var\(\s*--[^,)]+,([\s\S]+)\)$/.exec(color);
+  return match ? match[1].trim() : null;
+};
+/**
+ * Literal behind a design-system colour. Tokens are `var(--pw-color-x, <light hex>)`, whose fallback lies
+ * under a dark theme, so a token resolves through the palette and only an unknown `var()` takes its fallback.
+ */
+const resolveColor = color => {
+  const token = TOKEN_OF_VALUE.get(color);
+  return token ? getThemeColors(activeTheme())[token] : unwrapVar(color);
+};
+export const parseColor = color => {
+  const value = color.trim();
+  const literal = resolveColor(value);
+  return literal !== null ? parseColor(literal) : parseHex(value) ?? parseFunctional(value);
+};
 const toCss = ([r, g, b, a]) => a >= 1 ? `#${[r, g, b].map(channel => clampChannel(channel).toString(16).padStart(2, '0')).join('')}` : `rgba(${clampChannel(r)}, ${clampChannel(g)}, ${clampChannel(b)}, ${Number(a.toFixed(3))})`;
 const mix = (from, to, t) => [from[0] + (to[0] - from[0]) * t, from[1] + (to[1] - from[1]) * t, from[2] + (to[2] - from[2]) * t, from[3] + (to[3] - from[3]) * t];
 // A stop whose colour cannot be parsed still holds its position: it is returned

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@pushwoosh/kit-charts",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "Small React chart library on SVG, with a Highcharts-shaped configuration model",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://gitlab.corp.pushwoosh.com/frontend/development-kit/charts.git"
+    "url": "git+https://gitlab.corp.pushwoosh.com/frontend/frontend-monorepo.git",
+    "directory": "packages/charts"
   },
   "keywords": [
     "chart",
@@ -21,44 +22,48 @@
   "types": "index.d.ts",
   "sideEffects": false,
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "directory": "dist"
   },
-  "scripts": {
-    "start": "npm run playground",
-    "build": "pushwoosh-engine lib:build && cp ai-documentation.md LICENSE dist/",
-    "playground": "webpack serve --config ./node_modules/@pushwoosh/frontend-builder-engine/lib/webpack.playground.config.js --stats-error-details",
-    "check": "npm run check:lint && npm run check:types",
-    "check:lint": "echo \"Run check:lint\" && NODE_ENV=production eslint ./src ./playground ./tests",
-    "check:lint-fix": "echo \"Run check:lint\" && NODE_ENV=production eslint ./src ./playground ./tests --fix",
-    "check:types": "echo \"Run check:types\" && pushwoosh-engine lib:check-types && tsc --noEmit -p tsconfig.json",
-    "test": "jest"
-  },
-  "pre-commit": "check",
   "dependencies": {
-    "@pushwoosh/kit-constants": "^1.8.0"
+    "@pushwoosh/kit-constants": "^2.0.0"
   },
   "devDependencies": {
     "@pushwoosh/frontend-builder-engine": "^3.1.0",
+    "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@types/jest": "^30.0.0",
-    "@types/react": "^18.3.2",
-    "@types/react-dom": "^18.3.0",
+    "@types/node": "^26.1.1",
+    "@types/react": "^18.3.31",
+    "@types/react-dom": "^18.3.7",
     "@types/styled-components": "^5.1.34",
-    "cross-env": "^7.0.3",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
-    "pre-commit": "^1.2.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "styled-components": "^5.3.11",
-    "ts-jest": "^29.4.6"
+    "ts-jest": "^29.4.6",
+    "typescript": "^6.0.3",
+    "webpack": "^5.94.0",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.0.4"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
     "styled-components": ">=5.3.3"
   },
   "engines": {
-    "node": ">= 18"
+    "node": ">= 24"
+  },
+  "scripts": {
+    "start": "pnpm run playground",
+    "build": "pushwoosh-engine lib:build && cp ai-documentation.md LICENSE dist/",
+    "playground": "webpack serve --config ./node_modules/@pushwoosh/frontend-builder-engine/lib/webpack.playground.config.js --stats-error-details",
+    "check": "pnpm run check:lint && pnpm run check:types",
+    "check:lint": "echo \"Run check:lint\" && NODE_ENV=production eslint ./src ./playground ./tests",
+    "check:lint-fix": "echo \"Run check:lint\" && NODE_ENV=production eslint ./src ./playground ./tests --fix",
+    "check:types": "echo \"Run check:types\" && pushwoosh-engine lib:check-types && tsc --noEmit -p tsconfig.json",
+    "test": "jest"
   }
-}
+}