@pushwoosh/kit-charts 0.1.0 → 0.2.1

package/ai-documentation.md

@@ -26,7 +26,7 @@ npm install @pushwoosh/kit-charts
 ## Core Dependencies
 
 - **react**: >= 18.0.0 (peer dependency)
-- **styled-components**: >= 5.3.3 (peer dependency)
+- **styled-components**: ^6.5.3 (peer dependency)
 - **@pushwoosh/kit-constants**: runtime dependency — fonts, greys and tooltip
   colours come from the design system tokens. The series palette is built in.
 

package/core/model/palette.d.ts

@@ -16,8 +16,10 @@ export declare const DEFAULT_SURFACE_COLOR: string;
  * reads at 2.8:1, far under the 4.5:1 small text needs.
  */
 export declare const DEFAULT_ON_FILL_TEXT_COLOR = "#FFFFFF";
+/** WCAG contrast ratio of two colours under the active theme, or null if either cannot be read. */
+export declare function contrastRatio(one: string, other: string): number | null;
 /** 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;
-export declare const DEFAULT_TOOLTIP_TEXT_COLOR: string;
+export declare const DEFAULT_TOOLTIP_TEXT_COLOR = "#FFFFFF";
 export declare const colorAt: (colors: readonly string[], index: number) => string;

package/core/model/palette.js

@@ -34,6 +34,12 @@ 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);
+/** WCAG contrast ratio of two colours under the active theme, or null if either cannot be read. */
+export function contrastRatio(one, other) {
+  const first = luminance(one);
+  const second = luminance(other);
+  return first === null || second === null ? null : contrast(first, second);
+}
 /** Whichever of the two neutrals reads better on a fill. */
 export function textColorOn(fill) {
   const behind = luminance(fill);
@@ -45,7 +51,8 @@ export function textColorOn(fill) {
   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.
+// Chart tooltips follow the product hint style: dark bubble, light text. The bubble is
+// BRAND_BLACK in both themes, so the text cannot be `Color.CLEAR`, which goes dark too.
 export const DEFAULT_TOOLTIP_SURFACE_COLOR = Color.BRAND_BLACK;
-export const DEFAULT_TOOLTIP_TEXT_COLOR = Color.CLEAR;
+export const DEFAULT_TOOLTIP_TEXT_COLOR = DEFAULT_ON_FILL_TEXT_COLOR;
 export const colorAt = (colors, index) => colors[index % colors.length] ?? DEFAULT_COLORS[index % DEFAULT_COLORS.length];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/kit-charts",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Small React chart library on SVG, with a Highcharts-shaped configuration model",
   "license": "MIT",
   "repository": {
@@ -29,7 +29,7 @@
     "@pushwoosh/kit-constants": "^2.1.1"
   },
   "devDependencies": {
-    "@pushwoosh/frontend-builder-engine": "^3.1.4",
+    "@pushwoosh/frontend-builder-engine": "^3.1.6",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
@@ -45,7 +45,7 @@
   },
   "peerDependencies": {
     "react": ">=18.0.0",
-    "styled-components": ">=5.3.3"
+    "styled-components": "^6.5.3"
   },
   "engines": {
     "node": ">= 24"