@automattic/charts 4.6.0 → 4.7.0

package/dist/index.css

@@ -1,4 +1,4 @@
-:where(.a8c-charts-scope) {
+:where(.a8c-charts-scope, .a8c-charts-tooltip-scope) {
   --a8c-charts-color-series-1: var(--wp-admin-theme-color, var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9)));
   --a8c-charts-color-grid: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
   --a8c-charts-color-axis-x: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
@@ -18,7 +18,7 @@
   --a8c-charts-color-surface: var(--wpds-color-background-surface-neutral-strong, #fff);
   --a8c-charts-color-surface-secondary: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
   --a8c-charts-color-track: var(--wpds-color-background-track-neutral-weak, #f0f0f0);
-  --a8c-charts-color-tooltip-surface: #000000d9;
+  --a8c-charts-color-tooltip-surface: #1e1e1e;
   --a8c-charts-color-zoom-selection: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
   --a8c-charts-color-zoom-selection-stroke: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
   --a8c-charts-elevation-xs: 0 1px 1px 0 #00000008,
@@ -39,7 +39,7 @@
 }
 
 @media (forced-colors: active) {
-  :where(.a8c-charts-scope) {
+  :where(.a8c-charts-scope, .a8c-charts-tooltip-scope) {
     --a8c-charts-color-label-axis: CanvasText;
     --a8c-charts-color-grid: GrayText;
     --a8c-charts-color-axis-x: GrayText;
@@ -105,13 +105,21 @@
   flex-shrink: 0;
 }
 .a8ccharts--zY0xG-surface, .a8ccharts--zY0xG-tooltip {
-  padding: var(--wpds-dimension-padding-sm, 8px);
-  background-color: var(--a8c-charts-color-tooltip-surface, #000000d9);
-  color: #fff;
+  padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-sm, 8px);
+  background-color: var(--a8c-charts-color-surface);
+  color: var(--a8c-charts-color-label);
   border-radius: var(--wpds-border-radius-md, 4px);
-  font-size: var(--wpds-typography-font-size-md, 13px);
+  font-family: var(--wpds-typography-font-family-body, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif);
+  font-size: var(--wpds-typography-font-size-sm, 12px);
   box-shadow: var(--a8c-charts-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005);
   pointer-events: none;
+  line-height: 1.4;
+}
+
+@media (forced-colors: active) {
+  .a8ccharts--zY0xG-surface, .a8ccharts--zY0xG-tooltip {
+    border: var(--wpds-border-width-xs, 1px) solid CanvasText;
+  }
 }
 
 .a8ccharts--zY0xG-tooltip {
@@ -191,7 +199,7 @@
   overflow: visible;
 }
 
-.a8ccharts-inuQka-line-chart__tooltip, .a8ccharts-inuQka-line-chart__annotation-label-popover {
+.a8ccharts-inuQka-line-chart__annotation-label-popover {
   background: var(--a8c-charts-color-surface);
   color: var(--a8c-charts-color-label);
   padding: var(--wpds-dimension-padding-sm, 8px);
@@ -202,10 +210,6 @@
   padding-bottom: var(--wpds-dimension-padding-md, 12px);
 }
 
-.a8ccharts-inuQka-line-chart__tooltip-row {
-  padding: var(--wpds-dimension-padding-xs, 4px) 0;
-}
-
 .a8ccharts-inuQka-line-chart__tooltip-label {
   font-weight: var(--wpds-typography-font-weight-emphasis, 600);
   padding-right: var(--wpds-dimension-padding-lg, 16px);
@@ -445,13 +449,6 @@
   }
 }
 
-.a8ccharts-mGEVca-tooltip-wrapper {
-  background: var(--a8c-charts-color-surface);
-  border-radius: var(--wpds-border-radius-md, 4px) !important;
-  padding: var(--wpds-dimension-padding-md, 12px) !important;
-  box-shadow: var(--a8c-charts-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005) !important;
-}
-
 .a8ccharts-mGEVca-tooltip-title {
   color: var(--a8c-charts-color-label);
   font-size: var(--wpds-typography-font-size-sm, 12px);
@@ -618,10 +615,18 @@
   font-size: var(--wpds-typography-font-size-md, 13px);
 }
 
-.a8ccharts-O3YMOW-heatmap-chart__cell--strong .a8ccharts-O3YMOW-heatmap-chart__cell-value {
+.a8ccharts-O3YMOW-heatmap-chart__cell-value--inverse {
   color: var(--a8c-charts-color-label-inverse);
 }
 
+.a8ccharts-O3YMOW-heatmap-chart__cell-value--black {
+  color: #000;
+}
+
+.a8ccharts-O3YMOW-heatmap-chart__cell-value--white {
+  color: #fff;
+}
+
 .a8ccharts-O3YMOW-heatmap-chart__legend-label {
   color: var(--a8c-charts-color-label);
 }
@@ -854,6 +859,14 @@
 .a8ccharts-gnszbG-pie-chart__label-text--on-light {
   fill: var(--a8c-charts-color-label, #1e1e1e);
 }
+
+.a8ccharts-gnszbG-pie-chart__label-text--black {
+  fill: #000;
+}
+
+.a8ccharts-gnszbG-pie-chart__label-text--white {
+  fill: #fff;
+}
 .a8ccharts-YtTOxW-pie-semi-circle-chart__plot {
   position: relative;
 }

package/dist/index.d.cts

@@ -4,7 +4,7 @@ import { AxisRendererProps, AxisScale, Orientation, TickFormatter } from "@visx/
 import { PickD3Scale, ScaleInput, ScaleType } from "@visx/scale";
 import { TextProps } from "@visx/text";
 import { EventHandlerParams, EventHandlerParams as EventHandlerParams$1, GlyphProps, GridStyles, GridStyles as GridStyles$1, LineStyles, LineStyles as LineStyles$1, TooltipContextType } from "@visx/xychart";
-import { CSSProperties, ComponentClass, ComponentProps, ComponentType, FC, MouseEvent, PointerEvent, PropsWithChildren, ReactElement, ReactNode, SVGProps } from "react";
+import { CSSProperties, ComponentClass, ComponentProps, ComponentType, FC, JSX, MouseEvent, PointerEvent, PropsWithChildren, ReactElement, ReactNode, SVGProps } from "react";
 import { TooltipProps as TooltipProps$1, UseTooltipPortalOptions } from "@visx/tooltip";
 import { PieProvidedProps } from "@visx/shape";
 //#region src/types.d.ts
@@ -829,7 +829,7 @@ type XyChartTooltipProps<Datum extends object> = {
   tooltipPlacement?: TooltipPlacement;
   /** Override the tooltip top anchor in SVG coordinates, including negative offsets. */
   tooltipAnchorTop?: number;
-  /** Merge overrides with the default box styles; use `unstyled` to strip the box styling. */
+  /** Inline overrides on the tooltip surface; `unstyled` drops both. */
   style?: TooltipProps$1['style'];
   snapTooltipToDatumX?: boolean;
   snapTooltipToDatumY?: boolean;
@@ -1209,6 +1209,7 @@ interface TooltipRenderProps {
   index: number;
   top: number;
   left: number;
+  /** @deprecated The tooltip box draws the package surface; this is no longer set. */
   className?: string;
 }
 /**
@@ -1235,6 +1236,8 @@ interface ConversionFunnelChartProps extends Pick<BaseChartProps, 'className' |
   renderMainMetric?: (props: MainMetricRenderProps) => React.ReactNode;
   /** Custom render function for tooltip content */
   renderTooltip?: (props: TooltipRenderProps) => React.ReactNode;
+  /** Inline styles merged over the tooltip box defaults. */
+  tooltipStyle?: React.CSSProperties;
 }
 //#endregion
 //#region src/charts/conversion-funnel-chart/conversion-funnel-chart.d.ts
@@ -1424,13 +1427,9 @@ interface HeatmapChartProps extends Omit<BaseChartProps<HeatmapColumn[]>, 'showL
    */
   primaryColor?: string;
   renderTooltip?: (data: HeatmapTooltipData) => ReactNode;
-  /**
-   * The tooltip box: `light` is the plain white box, `dark` the package's
-   * tooltip surface, themed through `--a8c-charts-color-tooltip-surface`.
-   * Default `light`.
-   */
+  /** @deprecated Every tooltip draws on the package tooltip surface; this prop has no effect. */
   tooltipVariant?: 'light' | 'dark';
-  /** Inline styles merged onto the tooltip box, over the variant's own. */
+  /** Inline styles merged onto the tooltip box, over the surface's own. */
   tooltipStyle?: CSSProperties;
   children?: ReactNode;
 }
@@ -1788,7 +1787,8 @@ declare const relativeLuminance: (hex: string) => number;
  * Whether light text reads better than dark text on the given background, using the W3C
  * luminance threshold (0.179) that maximizes contrast against black vs white.
  *
- * @param backgroundHex - Hex background color
+ * @deprecated Assumes black and white text, so it ignores label role overrides and cannot guarantee AA; charts no longer use it, and it will be removed in a future major version.
+ * @param      backgroundHex - Hex background color
  * @return true if light text should be used; false (dark text) for malformed colors
  */
 declare const prefersLightText: (backgroundHex: string) => boolean;
@@ -2232,7 +2232,7 @@ type TrendIndicatorProps = {
  * @param {TrendIndicatorProps} props - Component props
  * @return {JSX.Element} The rendered trend indicator
  */
-declare function TrendIndicator({ direction, value, className, style, showIcon }: TrendIndicatorProps): import("react").JSX.Element;
+declare function TrendIndicator({ direction, value, className, style, showIcon }: TrendIndicatorProps): JSX.Element;
 //#endregion
 //#region src/providers/chart-context/types.d.ts
 interface ChartRegistration {

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { EventHandlerParams, EventHandlerParams as EventHandlerParams$1, GlyphProps, GridStyles, GridStyles as GridStyles$1, LineStyles, LineStyles as LineStyles$1, TooltipContextType } from "@visx/xychart";
-import { CSSProperties, ComponentClass, ComponentProps, ComponentType, FC, MouseEvent, PointerEvent, PropsWithChildren, ReactElement, ReactNode, SVGProps } from "react";
+import { CSSProperties, ComponentClass, ComponentProps, ComponentType, FC, JSX, MouseEvent, PointerEvent, PropsWithChildren, ReactElement, ReactNode, SVGProps } from "react";
 import { TextProps } from "@visx/text";
 import { TooltipProps as TooltipProps$1, UseTooltipPortalOptions } from "@visx/tooltip";
 import { PickD3Scale, ScaleInput, ScaleType } from "@visx/scale";
@@ -829,7 +829,7 @@ type XyChartTooltipProps<Datum extends object> = {
   tooltipPlacement?: TooltipPlacement;
   /** Override the tooltip top anchor in SVG coordinates, including negative offsets. */
   tooltipAnchorTop?: number;
-  /** Merge overrides with the default box styles; use `unstyled` to strip the box styling. */
+  /** Inline overrides on the tooltip surface; `unstyled` drops both. */
   style?: TooltipProps$1['style'];
   snapTooltipToDatumX?: boolean;
   snapTooltipToDatumY?: boolean;
@@ -1209,6 +1209,7 @@ interface TooltipRenderProps {
   index: number;
   top: number;
   left: number;
+  /** @deprecated The tooltip box draws the package surface; this is no longer set. */
   className?: string;
 }
 /**
@@ -1235,6 +1236,8 @@ interface ConversionFunnelChartProps extends Pick<BaseChartProps, 'className' |
   renderMainMetric?: (props: MainMetricRenderProps) => React.ReactNode;
   /** Custom render function for tooltip content */
   renderTooltip?: (props: TooltipRenderProps) => React.ReactNode;
+  /** Inline styles merged over the tooltip box defaults. */
+  tooltipStyle?: React.CSSProperties;
 }
 //#endregion
 //#region src/charts/conversion-funnel-chart/conversion-funnel-chart.d.ts
@@ -1424,13 +1427,9 @@ interface HeatmapChartProps extends Omit<BaseChartProps<HeatmapColumn[]>, 'showL
    */
   primaryColor?: string;
   renderTooltip?: (data: HeatmapTooltipData) => ReactNode;
-  /**
-   * The tooltip box: `light` is the plain white box, `dark` the package's
-   * tooltip surface, themed through `--a8c-charts-color-tooltip-surface`.
-   * Default `light`.
-   */
+  /** @deprecated Every tooltip draws on the package tooltip surface; this prop has no effect. */
   tooltipVariant?: 'light' | 'dark';
-  /** Inline styles merged onto the tooltip box, over the variant's own. */
+  /** Inline styles merged onto the tooltip box, over the surface's own. */
   tooltipStyle?: CSSProperties;
   children?: ReactNode;
 }
@@ -1788,7 +1787,8 @@ declare const relativeLuminance: (hex: string) => number;
  * Whether light text reads better than dark text on the given background, using the W3C
  * luminance threshold (0.179) that maximizes contrast against black vs white.
  *
- * @param backgroundHex - Hex background color
+ * @deprecated Assumes black and white text, so it ignores label role overrides and cannot guarantee AA; charts no longer use it, and it will be removed in a future major version.
+ * @param      backgroundHex - Hex background color
  * @return true if light text should be used; false (dark text) for malformed colors
  */
 declare const prefersLightText: (backgroundHex: string) => boolean;
@@ -2232,7 +2232,7 @@ type TrendIndicatorProps = {
  * @param {TrendIndicatorProps} props - Component props
  * @return {JSX.Element} The rendered trend indicator
  */
-declare function TrendIndicator({ direction, value, className, style, showIcon }: TrendIndicatorProps): import("react").JSX.Element;
+declare function TrendIndicator({ direction, value, className, style, showIcon }: TrendIndicatorProps): JSX.Element;
 //#endregion
 //#region src/providers/chart-context/types.d.ts
 interface ChartRegistration {