@openshift-migration-advisor/shared-components 0.27.0-ad43dbdf05ab → 0.28.0-16fc442157c1

package/dist/charts/MigrationDonutChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MigrationDonutChart.d.ts","sourceRoot":"","sources":["../../src/charts/MigrationDonutChart.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,EAAE,EAAgB,MAAM,OAAO,CAAC;AAG9C,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,WAAW,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,MAAM,MAAM,gCAAgC,GAAG,MAAM,GAAG,OAAO,CAAC;AAEhE,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,wBAAwB,EAAE,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE;QAC7B,KAAK,EAAE;YACL,CAAC,EAAE,MAAM,CAAC;YACV,CAAC,EAAE,MAAM,CAAC;YACV,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;YAC/B,cAAc,EAAE,MAAM,CAAC;SACxB,CAAC;QACF,OAAO,EAAE,MAAM,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;KACf,KAAK,MAAM,CAAC;IACb,iDAAiD;IACjD,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,wBAAwB,KAAK,IAAI,CAAC;IACvD,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,mFAAmF;IACnF,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE;QAC5B,CAAC,EAAE,MAAM,CAAC;QACV,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KAChC,KAAK,MAAM,CAAC;IACb;;;;OAIG;IACH,aAAa,CAAC,EAAE,gCAAgC,CAAC;IACjD,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0EAA0E;IAC1E,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AA8ED,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAiX5D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"MigrationDonutChart.d.ts","sourceRoot":"","sources":["../../src/charts/MigrationDonutChart.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,EAAE,EAAgB,MAAM,OAAO,CAAC;AAG9C,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,WAAW,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,MAAM,MAAM,gCAAgC,GAAG,MAAM,GAAG,OAAO,CAAC;AAEhE,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,wBAAwB,EAAE,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE;QAC7B,KAAK,EAAE;YACL,CAAC,EAAE,MAAM,CAAC;YACV,CAAC,EAAE,MAAM,CAAC;YACV,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;YAC/B,cAAc,EAAE,MAAM,CAAC;SACxB,CAAC;QACF,OAAO,EAAE,MAAM,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;KACf,KAAK,MAAM,CAAC;IACb,iDAAiD;IACjD,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,wBAAwB,KAAK,IAAI,CAAC;IACvD,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,mFAAmF;IACnF,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE;QAC5B,CAAC,EAAE,MAAM,CAAC;QACV,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KAChC,KAAK,MAAM,CAAC;IACb;;;;OAIG;IACH,aAAa,CAAC,EAAE,gCAAgC,CAAC;IACjD,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0EAA0E;IAC1E,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAoFD,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAoX5D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/charts/MigrationDonutChart.js

@@ -35,6 +35,8 @@ const themedChartTooltipFlyoutPadding = {
     left: 10,
     right: 10,
 };
+/** Victory SVG text defaults to a serif face; match PatternFly / html2canvas export. */
+const chartTextFontFamily = "RedHatText, Overpass, Helvetica, Arial, sans-serif";
 const styles = {
     legendIcon: css `
     margin-right: 4px;
@@ -63,6 +65,7 @@ const styles = {
     background: none;
     padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--ml);
     margin: 0;
+    font-family: ${chartTextFontFamily};
     transition: opacity var(--pf-t--global--motion--duration--short);
     white-space: nowrap;
 
@@ -73,6 +76,7 @@ const styles = {
     legendLabel: css `
     gap: var(--pf-t--global--spacer--lg);
     padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--ml);
+    font-family: ${chartTextFontFamily};
     white-space: nowrap;
   `,
     legendInner: css `
@@ -214,6 +218,7 @@ export const MigrationDonutChart = ({ data, legend, customColors, height = 260,
                         labels: {
                             fontSize: labelFontSize,
                             fill: "var(--pf-t--global--text--color--regular)",
+                            fontFamily: chartTextFontFamily,
                         },
                     } }) }) }) }));
     return (_jsxs(Flex, { direction: { default: "column" }, alignItems: { default: "alignItemsCenter" }, className: `${onItemClick ? styles.cursorPointer : styles.cursorDefault} ${styles.chartContainer}`, children: [_jsxs("div", { className: styles.donutWrapper, children: [_jsx(ChartDonut, { ariaDesc: "Migration data donut chart", data: chartData, events: chartEvents, labelComponent: donutTooltip, labels: ({ datum, }) => formatLabel(datum), colorScale: colorScale, constrainToVisibleArea: true, innerRadius: innerRadius, padAngle: padAngle, title: title, subTitle: subTitle, height: height, width: width, padding: {
@@ -226,11 +231,13 @@ export const MigrationDonutChart = ({ data, legend, customColors, height = 260,
                                     fill: titleColor,
                                     fontSize: titleFontSize,
                                     fontWeight: "bold",
+                                    fontFamily: chartTextFontFamily,
                                 },
                             ] })) : undefined, subTitleComponent: subTitle ? (_jsx(ChartLabel, { dy: showChartLegend ? 7 : undefined, style: [
                                 {
                                     fill: subTitleColor,
                                     fontSize: subTitleFontSize,
+                                    fontFamily: chartTextFontFamily,
                                 },
                             ] })) : undefined }), onTitleClick && title && (_jsx("div", { onClick: onTitleClick, className: css `
               position: absolute;

package/dist/report/ChartExportProvider.d.ts

@@ -1,6 +1,6 @@
 import { type FC, type ReactNode } from "react";
 import { type ChartCaptureSource, type ChartExportFile, type PdfTextPage } from "./chartExport.js";
-export type CaptureChartElement = (element: HTMLElement) => Promise<HTMLCanvasElement>;
+export type CaptureChartElement = (element: HTMLElement, options?: import("./captureChartElement.js").CaptureChartElementOptions) => Promise<HTMLCanvasElement>;
 export type ZipChartFiles = (files: ChartExportFile[]) => Promise<Blob>;
 export type EncodeChartPng = (canvas: HTMLCanvasElement) => Promise<Blob>;
 export type BuildChartDocument = (charts: ChartCaptureSource[], documentTitle: string) => Promise<Blob>;

package/dist/report/ChartExportProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartExportProvider.d.ts","sourceRoot":"","sources":["../../src/report/ChartExportProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EAAE,EACP,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,EACL,KAAK,kBAAkB,EACvB,KAAK,eAAe,EAGpB,KAAK,WAAW,EAMjB,MAAM,kBAAkB,CAAC;AAU1B,MAAM,MAAM,mBAAmB,GAAG,CAChC,OAAO,EAAE,WAAW,KACjB,OAAO,CAAC,iBAAiB,CAAC,CAAC;AAChC,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;AACxE,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,iBAAiB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;AAC1E,MAAM,MAAM,kBAAkB,GAAG,CAC/B,MAAM,EAAE,kBAAkB,EAAE,EAC5B,aAAa,EAAE,MAAM,KAClB,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnB,MAAM,MAAM,gBAAgB,GAAG,CAC7B,MAAM,EAAE,kBAAkB,EAAE,EAC5B,aAAa,EAAE,MAAM,EACrB,UAAU,CAAC,EAAE,WAAW,EAAE,KACvB,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnB,YAAY,EACV,cAAc,EACd,iBAAiB,GAClB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3E,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,cAAc,CAAC,EAAE,MAAM,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,MAAM,CAAC;CAChC;AAsED,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAiQ5D,CAAC"}
+{"version":3,"file":"ChartExportProvider.d.ts","sourceRoot":"","sources":["../../src/report/ChartExportProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EAAE,EACP,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,KAAK,kBAAkB,EACvB,KAAK,eAAe,EAGpB,KAAK,WAAW,EAMjB,MAAM,kBAAkB,CAAC;AAU1B,MAAM,MAAM,mBAAmB,GAAG,CAChC,OAAO,EAAE,WAAW,EACpB,OAAO,CAAC,EAAE,OAAO,0BAA0B,EAAE,0BAA0B,KACpE,OAAO,CAAC,iBAAiB,CAAC,CAAC;AAChC,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;AACxE,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,iBAAiB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;AAC1E,MAAM,MAAM,kBAAkB,GAAG,CAC/B,MAAM,EAAE,kBAAkB,EAAE,EAC5B,aAAa,EAAE,MAAM,KAClB,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnB,MAAM,MAAM,gBAAgB,GAAG,CAC7B,MAAM,EAAE,kBAAkB,EAAE,EAC5B,aAAa,EAAE,MAAM,EACrB,UAAU,CAAC,EAAE,WAAW,EAAE,KACvB,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnB,YAAY,EACV,cAAc,EACd,iBAAiB,GAClB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3E,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,cAAc,CAAC,EAAE,MAAM,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,MAAM,CAAC;CAChC;AAsED,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAmQ5D,CAAC"}

package/dist/report/ChartExportProvider.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useMemo, useRef, useState, } from "react";
+import { CHART_CAPTURE_SCALE_SINGLE } from "./captureChartElement.js";
 import { canvasToBlob, downloadBlob, releaseCanvas, restoreChartExportViews, sortRegisteredChartsByDocumentOrder, toBulkChartCaptureSources, } from "./chartExport.js";
 import { ChartExportApiContext, ChartExportRegistryContext, } from "./chartExportContext.js";
 import { getChartExportFilename } from "./chartExportFilenames.js";
@@ -108,7 +109,9 @@ export const ChartExportProvider = ({ children, capture, zipFiles, encodePng = c
                 throw new Error("The chart is not ready to export yet.");
             }
             const captureFn = await resolveCapture(capture);
-            const canvas = await captureFn(chart.element);
+            const canvas = await captureFn(chart.element, {
+                scale: CHART_CAPTURE_SCALE_SINGLE,
+            });
             try {
                 downloadFile(await encodePng(canvas), chart.filename);
             }

package/dist/report/FeatureStatusBadge.js

@@ -8,6 +8,6 @@ export const FeatureStatusBadge = ({ status }) => {
     if (status === "enabled") {
         return (_jsx(Label, { color: "green", isCompact: true, icon: _jsx(CheckCircleIcon, {}), children: "Enabled" }));
     }
-    return (_jsx(Label, { color: "grey", isCompact: true, icon: _jsx(TimesCircleIcon, {}), children: "Disabled" }));
+    return (_jsx(Label, { variant: "outline", isCompact: true, icon: _jsx(TimesCircleIcon, {}), children: "Disabled" }));
 };
 FeatureStatusBadge.displayName = "FeatureStatusBadge";

package/dist/report/captureChartElement.d.ts

@@ -1,8 +1,13 @@
+export declare const CHART_CAPTURE_SCALE_SINGLE = 2;
+export type CaptureChartElementOptions = {
+    /** Higher scale sharpens text in PNG exports; keep at 1 for bulk PDF/zip. */
+    scale?: number;
+};
 /**
  * Tab panels stay mounted with `hidden` / `display:none` when another tab is
  * active. html2canvas then measures a 0×0 box. Reveal those ancestors off-screen
  * for the duration of the capture, then restore.
  */
 export declare function revealHiddenChartAncestors(element: HTMLElement): () => void;
-export declare function captureChartElement(element: HTMLElement): Promise<HTMLCanvasElement>;
+export declare function captureChartElement(element: HTMLElement, options?: CaptureChartElementOptions): Promise<HTMLCanvasElement>;
 //# sourceMappingURL=captureChartElement.d.ts.map

package/dist/report/captureChartElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"captureChartElement.d.ts","sourceRoot":"","sources":["../../src/report/captureChartElement.ts"],"names":[],"mappings":"AAsCA;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,IAAI,CAqD3E;AAuQD,wBAAsB,mBAAmB,CACvC,OAAO,EAAE,WAAW,GACnB,OAAO,CAAC,iBAAiB,CAAC,CAoC5B"}
+{"version":3,"file":"captureChartElement.d.ts","sourceRoot":"","sources":["../../src/report/captureChartElement.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,0BAA0B,IAAI,CAAC;AAG5C,MAAM,MAAM,0BAA0B,GAAG;IACvC,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAwBF;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,IAAI,CAqD3E;AAwQD,wBAAsB,mBAAmB,CACvC,OAAO,EAAE,WAAW,EACpB,OAAO,GAAE,0BAA+B,GACvC,OAAO,CAAC,iBAAiB,CAAC,CA0C5B"}

package/dist/report/captureChartElement.js

@@ -1,8 +1,10 @@
 import { t_color_gray_20, t_color_white, t_global_text_color_regular, } from "@patternfly/react-tokens";
 import html2canvas from "html2canvas-pro";
 import { applyLightThemeToDocument, CHART_EXPORT_CAPTURING_ATTR, CHART_EXPORT_SCROLL_ATTR, shouldIgnoreChartExportElement, } from "./chartExport.js";
-/** CSS-pixel scale; 2x made zip-all of ~15 live cards too slow. */
-const CHART_CAPTURE_SCALE = 1;
+/** Default scale for bulk exports; single-chart PNG uses a higher scale. */
+const CHART_CAPTURE_SCALE_DEFAULT = 1;
+export const CHART_CAPTURE_SCALE_SINGLE = 2;
+const EXPORT_FONT_FAMILY = "RedHatText, Overpass, Helvetica, Arial, sans-serif";
 const HIDDEN_LAYOUT_STYLE_KEYS = [
     "display",
     "position",
@@ -140,6 +142,7 @@ function applyLightThemeSvgText(root) {
         }
         node.style.fill = LIGHT_EXPORT_TEXT;
         node.style.color = LIGHT_EXPORT_TEXT;
+        node.style.fontFamily = EXPORT_FONT_FAMILY;
     }
 }
 function hideCardBeforePseudo() {
@@ -266,7 +269,8 @@ function prepareCaptureLayout(element) {
         }
     };
 }
-export async function captureChartElement(element) {
+export async function captureChartElement(element, options = {}) {
+    const scale = options.scale ?? CHART_CAPTURE_SCALE_DEFAULT;
     const restoreHidden = revealHiddenChartAncestors(element);
     const restoreLayout = prepareCaptureLayout(element);
     element.setAttribute(CHART_EXPORT_CAPTURING_ATTR, "");
@@ -284,14 +288,19 @@ export async function captureChartElement(element) {
             useCORS: true,
             backgroundColor: LIGHT_EXPORT_BACKGROUND,
             logging: false,
-            scale: CHART_CAPTURE_SCALE,
+            scale,
             imageTimeout: 0,
             ignoreElements: (node) => node instanceof Element &&
                 shouldIgnoreChartExportElement(node, element),
             onclone: (clonedDoc, clonedElement) => {
+                // Dropping the dark-theme class off the clone root makes every
+                // PatternFly CSS-variable surface (cards, tables, labels) resolve to
+                // light automatically — html2canvas reads computed styles from this
+                // clone. Only Victory's inlined SVG text needs explicit recoloring.
                 applyLightThemeToDocument(clonedDoc);
                 applyComputedStylesToClone(element, clonedElement);
                 applyLightThemeSvgText(clonedElement);
+                clonedElement.style.fontFamily = EXPORT_FONT_FAMILY;
             },
         });
     }

package/dist/report/chartExport.js

@@ -9,7 +9,7 @@ export const chartExportScrollProps = {
 };
 export const chartExportRootStyle = {
     width: "100%",
-    height: "100%",
+    height: "auto",
 };
 export function releaseCanvas(canvas) {
     canvas.width = 0;

package/dist/report/dashboardStyles.d.ts

@@ -3,6 +3,12 @@ export declare const dashboardStyles: {
     cardScroll: string;
     equalHeightRow: string;
     equalHeight: string;
+    /**
+     * Flex child of {@link dashboardStyles.card}. `min-height: 0` lets the body
+     * shrink inside the card max-height; `overflow: auto` scrolls tables and tall
+     * charts when needed (phantom scrollbars on donut cards are avoided by the
+     * card layout and ChartExportSurface sizing, not a second body class).
+     */
     cardBodyScrollable: string;
     card: string;
     storageCardOverflowHidden: string;

package/dist/report/dashboardStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dashboardStyles.d.ts","sourceRoot":"","sources":["../../src/report/dashboardStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe;;;;;;;;;;;;;CAkF3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,QAM/B,CAAC"}
+{"version":3,"file":"dashboardStyles.d.ts","sourceRoot":"","sources":["../../src/report/dashboardStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe;;;;;IA8B1B;;;;;OAKG;;;;;;;;;CAkDJ,CAAC;AAEF,eAAO,MAAM,mBAAmB,QAM/B,CAAC"}

package/dist/report/dashboardStyles.js

@@ -25,6 +25,12 @@ export const dashboardStyles = {
     flex: 1 1 0;
     height: 100%;
   `,
+    /**
+     * Flex child of {@link dashboardStyles.card}. `min-height: 0` lets the body
+     * shrink inside the card max-height; `overflow: auto` scrolls tables and tall
+     * charts when needed (phantom scrollbars on donut cards are avoided by the
+     * card layout and ChartExportSurface sizing, not a second body class).
+     */
     cardBodyScrollable: css `
     overflow: auto;
   `,
@@ -32,12 +38,9 @@ export const dashboardStyles = {
     // at the same specificity, which wins in the production build due to stylesheet
     // injection order. `!important` forces `hidden` regardless of that order.
     card: css `
-    min-height: 430px;
-    max-height: 520px;
-    height: 100%;
+    height: 520px;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
     overflow: hidden !important;
   `,
     storageCardOverflowHidden: css `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openshift-migration-advisor/shared-components",
-  "version": "0.27.0-ad43dbdf05ab",
+  "version": "0.28.0-16fc442157c1",
   "description": "Shared React UI components for Migration Advisor apps (report charts, forms, OS support tiers)",
   "author": "Montse Ortega <mortegag@redhat.com>",
   "license": "Apache-2.0",
@@ -46,7 +46,7 @@
     "README.md"
   ],
   "dependencies": {
-    "html2canvas-pro": "^2.5.1",
+    "html2canvas-pro": "^2.5.2",
     "jspdf": "^4.2.1",
     "jszip": "^3.10.2"
   }

package/src/charts/MigrationDonutChart.tsx

@@ -108,6 +108,10 @@ const themedChartTooltipFlyoutPadding = {
   right: 10,
 } as const;
 
+/** Victory SVG text defaults to a serif face; match PatternFly / html2canvas export. */
+const chartTextFontFamily =
+  "RedHatText, Overpass, Helvetica, Arial, sans-serif";
+
 const styles = {
   legendIcon: css`
     margin-right: 4px;
@@ -136,6 +140,7 @@ const styles = {
     background: none;
     padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--ml);
     margin: 0;
+    font-family: ${chartTextFontFamily};
     transition: opacity var(--pf-t--global--motion--duration--short);
     white-space: nowrap;
 
@@ -146,6 +151,7 @@ const styles = {
   legendLabel: css`
     gap: var(--pf-t--global--spacer--lg);
     padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--ml);
+    font-family: ${chartTextFontFamily};
     white-space: nowrap;
   `,
   legendInner: css`
@@ -422,6 +428,7 @@ export const MigrationDonutChart: FC<MigrationDonutChartProps> = ({
               labels: {
                 fontSize: labelFontSize,
                 fill: "var(--pf-t--global--text--color--regular)",
+                fontFamily: chartTextFontFamily,
               },
             }}
           />
@@ -474,6 +481,7 @@ export const MigrationDonutChart: FC<MigrationDonutChartProps> = ({
                     fill: titleColor,
                     fontSize: titleFontSize,
                     fontWeight: "bold",
+                    fontFamily: chartTextFontFamily,
                   },
                 ]}
               />
@@ -487,6 +495,7 @@ export const MigrationDonutChart: FC<MigrationDonutChartProps> = ({
                   {
                     fill: subTitleColor,
                     fontSize: subTitleFontSize,
+                    fontFamily: chartTextFontFamily,
                   },
                 ]}
               />

package/src/report/ChartExportProvider.tsx

@@ -6,6 +6,7 @@ import {
   useRef,
   useState,
 } from "react";
+import { CHART_CAPTURE_SCALE_SINGLE } from "./captureChartElement.js";
 import {
   type ChartCaptureSource,
   type ChartExportFile,
@@ -29,6 +30,7 @@ import { getChartExportFilename } from "./chartExportFilenames.js";
 
 export type CaptureChartElement = (
   element: HTMLElement,
+  options?: import("./captureChartElement.js").CaptureChartElementOptions,
 ) => Promise<HTMLCanvasElement>;
 export type ZipChartFiles = (files: ChartExportFile[]) => Promise<Blob>;
 export type EncodeChartPng = (canvas: HTMLCanvasElement) => Promise<Blob>;
@@ -227,7 +229,9 @@ export const ChartExportProvider: FC<ChartExportProviderProps> = ({
             throw new Error("The chart is not ready to export yet.");
           }
           const captureFn = await resolveCapture(capture);
-          const canvas = await captureFn(chart.element);
+          const canvas = await captureFn(chart.element, {
+            scale: CHART_CAPTURE_SCALE_SINGLE,
+          });
           try {
             downloadFile(await encodePng(canvas), chart.filename);
           } finally {

package/src/report/FeatureStatusBadge.tsx

@@ -21,7 +21,7 @@ export const FeatureStatusBadge: FC<FeatureStatusBadgeProps> = ({ status }) => {
   }
 
   return (
-    <Label color="grey" isCompact icon={<TimesCircleIcon />}>
+    <Label variant="outline" isCompact icon={<TimesCircleIcon />}>
       Disabled
     </Label>
   );

package/src/report/__tests__/captureChartElement.test.ts

@@ -202,4 +202,51 @@ describe("captureChartElement", () => {
     ).toBe(true);
     expect(card.style.backgroundColor).toBe("rgb(30, 30, 30)");
   });
+
+  it("relights tables and labels via the clone cascade, not by hand-painting them", async () => {
+    document.documentElement.classList.add("pf-v6-theme-dark");
+    const root = document.createElement("div");
+    const label = document.createElement("span");
+    label.className = "pf-v6-c-label pf-m-compact pf-m-outline";
+    const labelContent = document.createElement("span");
+    labelContent.className = "pf-v6-c-label__content";
+    label.append(labelContent);
+    root.append(label);
+    document.body.append(root);
+
+    mockedHtml2Canvas.mockImplementation(async (_element, options) => {
+      const clonedDoc = document.implementation.createHTMLDocument("export");
+      clonedDoc.documentElement.classList.add("pf-v6-theme-dark");
+      const cloneRoot = clonedDoc.createElement("div");
+      const cloneTh = clonedDoc.createElement("th");
+      cloneTh.className = "pf-v6-c-table__th";
+      const cloneLabelContent = clonedDoc.createElement("span");
+      cloneLabelContent.className = "pf-v6-c-label__content";
+      cloneRoot.append(cloneTh, cloneLabelContent);
+      clonedDoc.body.append(cloneRoot);
+
+      await options?.onclone?.(clonedDoc, cloneRoot);
+
+      // Dropping the dark class off the clone root is what relights these
+      // surfaces — the cascade does the work. We must NOT hand-paint inline
+      // colors onto PatternFly table/label nodes, and the live page stays dark.
+      expect(
+        clonedDoc.documentElement.classList.contains("pf-v6-theme-dark"),
+      ).toBe(false);
+      expect(cloneTh.style.backgroundColor).toBe("");
+      expect(cloneLabelContent.style.backgroundColor).toBe("");
+
+      const canvas = document.createElement("canvas");
+      canvas.width = 1;
+      canvas.height = 1;
+      return canvas;
+    });
+
+    await captureChartElement(root);
+
+    expect(
+      document.documentElement.classList.contains("pf-v6-theme-dark"),
+    ).toBe(true);
+    expect(labelContent.style.backgroundColor).toBe("");
+  });
 });

package/src/report/captureChartElement.ts

@@ -11,8 +11,15 @@ import {
   shouldIgnoreChartExportElement,
 } from "./chartExport.js";
 
-/** CSS-pixel scale; 2x made zip-all of ~15 live cards too slow. */
-const CHART_CAPTURE_SCALE = 1;
+/** Default scale for bulk exports; single-chart PNG uses a higher scale. */
+const CHART_CAPTURE_SCALE_DEFAULT = 1;
+export const CHART_CAPTURE_SCALE_SINGLE = 2;
+const EXPORT_FONT_FAMILY = "RedHatText, Overpass, Helvetica, Arial, sans-serif";
+
+export type CaptureChartElementOptions = {
+  /** Higher scale sharpens text in PNG exports; keep at 1 for bulk PDF/zip. */
+  scale?: number;
+};
 const HIDDEN_LAYOUT_STYLE_KEYS = [
   "display",
   "position",
@@ -187,6 +194,7 @@ function applyLightThemeSvgText(root: HTMLElement): void {
     }
     node.style.fill = LIGHT_EXPORT_TEXT;
     node.style.color = LIGHT_EXPORT_TEXT;
+    node.style.fontFamily = EXPORT_FONT_FAMILY;
   }
 }
 
@@ -359,7 +367,9 @@ function prepareCaptureLayout(element: HTMLElement): () => void {
 
 export async function captureChartElement(
   element: HTMLElement,
+  options: CaptureChartElementOptions = {},
 ): Promise<HTMLCanvasElement> {
+  const scale = options.scale ?? CHART_CAPTURE_SCALE_DEFAULT;
   const restoreHidden = revealHiddenChartAncestors(element);
   const restoreLayout = prepareCaptureLayout(element);
   element.setAttribute(CHART_EXPORT_CAPTURING_ATTR, "");
@@ -378,15 +388,20 @@ export async function captureChartElement(
       useCORS: true,
       backgroundColor: LIGHT_EXPORT_BACKGROUND,
       logging: false,
-      scale: CHART_CAPTURE_SCALE,
+      scale,
       imageTimeout: 0,
       ignoreElements: (node) =>
         node instanceof Element &&
         shouldIgnoreChartExportElement(node, element),
       onclone: (clonedDoc, clonedElement) => {
+        // Dropping the dark-theme class off the clone root makes every
+        // PatternFly CSS-variable surface (cards, tables, labels) resolve to
+        // light automatically — html2canvas reads computed styles from this
+        // clone. Only Victory's inlined SVG text needs explicit recoloring.
         applyLightThemeToDocument(clonedDoc);
         applyComputedStylesToClone(element, clonedElement);
         applyLightThemeSvgText(clonedElement);
+        clonedElement.style.fontFamily = EXPORT_FONT_FAMILY;
       },
     });
   } finally {

package/src/report/chartExport.ts

@@ -14,7 +14,7 @@ export const chartExportScrollProps = {
 
 export const chartExportRootStyle: CSSProperties = {
   width: "100%",
-  height: "100%",
+  height: "auto",
 };
 
 export type ChartExportMeta = {

package/src/report/dashboardStyles.ts

@@ -30,6 +30,12 @@ export const dashboardStyles = {
     height: 100%;
   `,
 
+  /**
+   * Flex child of {@link dashboardStyles.card}. `min-height: 0` lets the body
+   * shrink inside the card max-height; `overflow: auto` scrolls tables and tall
+   * charts when needed (phantom scrollbars on donut cards are avoided by the
+   * card layout and ChartExportSurface sizing, not a second body class).
+   */
   cardBodyScrollable: css`
     overflow: auto;
   `,
@@ -38,12 +44,9 @@ export const dashboardStyles = {
   // at the same specificity, which wins in the production build due to stylesheet
   // injection order. `!important` forces `hidden` regardless of that order.
   card: css`
-    min-height: 430px;
-    max-height: 520px;
-    height: 100%;
+    height: 520px;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
     overflow: hidden !important;
   `,