@geotab/zenith 3.9.0-beta.ssr.1 → 3.9.0-beta.ssr.2

package/dist/chart/pieChart/centerTextPlugin.js

@@ -6,7 +6,6 @@ const getCssVar = (el, name) => { var _a, _b; return (_b = (_a = zen_1.zen.getCo
 const centerTextPlugin = (centerText) => ({
     id: "zenithPieCenterText",
     afterDraw(chart) {
-        var _a;
         if (!centerText || centerText.value === undefined) {
             return;
         }
@@ -15,7 +14,7 @@ const centerTextPlugin = (centerText) => ({
         const centerX = left + width / 2;
         const centerY = top + height / 2;
         const css = (name) => getCssVar(chart.canvas, name);
-        const fontFamily = ((_a = zen_1.zen.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, chart.canvas).fontFamily) || "Roboto";
+        const fontFamily = css("--main-font");
         const hasLabel = !!centerText.label;
         const valueY = hasLabel ? centerY - 14 : centerY;
         ctx.textAlign = "center";

package/dist/chart/pieChart.js

@@ -18,6 +18,7 @@ const typedCharts_1 = require("../react-chartjs/typedCharts");
 const auto_1 = require("chart.js/auto");
 require("../react-chartjs/dateAdapter");
 const utils_1 = require("../commonHelpers/utils");
+const zen_1 = require("../utils/zen");
 const useDrive_1 = require("../utils/theme/useDrive");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const themeContext_1 = require("../utils/theme/themeContext");
@@ -43,12 +44,18 @@ const PieChart = (_a) => {
     const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
     const legendId = (0, react_1.useId)();
     const tooltipId = (0, react_1.useId)();
+    const containerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
+        var _a;
+        const el = containerRef.current;
+        const styles = el ? (_a = zen_1.zen.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, el) : undefined;
+        const fontFamily = (styles === null || styles === void 0 ? void 0 : styles.getPropertyValue("--main-font").trim()) || "Roboto";
+        const color = (styles === null || styles === void 0 ? void 0 : styles.getPropertyValue("--text-primary").trim()) || "";
         auto_1.Chart.defaults.font = {
-            family: "Roboto",
+            family: fontFamily,
             size: fontSize
         };
-        auto_1.Chart.defaults.color = dark ? "#FFFFFF" : "#1F2833";
+        auto_1.Chart.defaults.color = color;
     }, [fontSize, dark]);
     const defOptions = (0, react_1.useMemo)(() => (0, getDefaultOptions_1.getDefaultOptions)(), []);
     const chartOptions = (0, utils_1.deepMerge)(defOptions, options);
@@ -82,6 +89,6 @@ const PieChart = (_a) => {
     const chartPlugins = (0, react_1.useMemo)(() => [...(plugins || []), chartLegend, chartTooltip, chartCenterText], [chartLegend, chartTooltip, chartCenterText, plugins]);
     const intSummary = (0, useSummary_1.useSummary)(summary, chartData);
     const legendRight = isHorizontal;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-chart", legendRight ? "zen-chart--legend-right" : "", className || ""]), children: [insight ? (0, jsx_runtime_1.jsx)(chartInsight_1.ChartInsight, Object.assign({}, insight)) : null, summary ? (0, jsx_runtime_1.jsx)(summary_1.Summary, Object.assign({}, intSummary)) : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__chart", children: (0, jsx_runtime_1.jsx)(typedCharts_1.Pie, Object.assign({ options: chartOptions, data: chartData, plugins: chartPlugins }, rest, { "aria-hidden": true })) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__legend", id: legendId }), (0, jsx_runtime_1.jsx)(accessibleChart_1.AccessibleChart, { type: "pie", data: chartData })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: (0, classNames_1.classNames)(["zen-chart", legendRight ? "zen-chart--legend-right" : "", className || ""]), children: [insight ? (0, jsx_runtime_1.jsx)(chartInsight_1.ChartInsight, Object.assign({}, insight)) : null, summary ? (0, jsx_runtime_1.jsx)(summary_1.Summary, Object.assign({}, intSummary)) : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__chart", children: (0, jsx_runtime_1.jsx)(typedCharts_1.Pie, Object.assign({ options: chartOptions, data: chartData, plugins: chartPlugins }, rest, { "aria-hidden": true })) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__legend", id: legendId }), (0, jsx_runtime_1.jsx)(accessibleChart_1.AccessibleChart, { type: "pie", data: chartData })] }));
 };
 exports.PieChart = PieChart;

package/dist/commonStyles/common.less

@@ -1,14 +1,7 @@
-// do not update the order of imports, as some of the files depend on variables defined in other files
-// only variables that are used in multiple files should be defined here, and they should not depend on any other variables
 @import "fonts/roboto.less";
 @import "fonts/robotomono.less";
-@main-font-family: Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
-@driver-font-family: "Roboto Mono", "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
-@rem: 16rem;
-
-@import "typography/typography.less";
-
 @import "colors/colors.less";
+@import "typography/typography.less";
 @import "caption/caption.less";
 @import "ellipsis.less";
 @import "notSelectable.less";
@@ -20,9 +13,6 @@
 @import "zIndex.less";
 @import "rangeFieldMixin.less";
 
-// do not set variables or styles here,
-// as this file is imported in all other files and it may cause circular dependencies
-
 @border-width-default: 1px;
 @border-radius-default: 4px;
 @padding-top-bottom: 8px;

package/dist/commonStyles/pillStyles/pillContent.less

@@ -1,4 +1,5 @@
 @import "../common.less";
+@import "../typography/typography.less";
 
 @pill-min-width-default: 30px;
 @pill-max-width-default: 200px;
@@ -97,9 +98,9 @@
         }
     }
     &.zen-pill-new-content--drive {
-        .body-04-drive();
+        .body-04-mobile-drive();
     }
     &.zen-pill-new-content--drive-tablet {
-        .body-04-drive();
+        .body-04-tablet-drive();
     }
 }

package/dist/commonStyles/pillStyles/pillStyles.less

@@ -1,4 +1,5 @@
-@import "../common.less";
+@import "../typography/typography.less";
+@import "../colors/colors.less";
 
 .zen-pill-content {
     .body-04();

package/dist/commonStyles/pillStyles/pillTextContent.less

@@ -12,9 +12,9 @@
         height: 20px;
     }
     &.zen-pill-text-content--drive {
-        .body-04-drive();
+        .body-04-mobile-drive();
     }
     &.zen-pill-text-content--drive-tablet {
-        .body-04-drive();
+        .body-04-tablet-drive();
     }
 }