@jcsoftdev/ui 0.1.7 → 0.2.0

package/dist/charts/core/tooltip.js

@@ -28,7 +28,7 @@ function ChartTooltip({
       ref,
       "aria-hidden": "true",
       className: cn(
-        "pointer-events-none absolute top-0 left-0 z-10 min-w-[120px] rounded-popover surface-overlay px-3 py-2.5 text-[12px] shadow-overlay",
+        "pointer-events-none absolute top-0 left-0 z-10 min-w-30 rounded-popover surface-overlay px-3 py-2.5 text-fs-120 shadow-overlay",
         "motion-safe:transition-transform motion-safe:duration-100 motion-safe:ease-out",
         className
       ),
@@ -37,7 +37,7 @@ function ChartTooltip({
         transform: `translate3d(${Math.round(left)}px, ${Math.round(y)}px, 0) translateY(-50%)`
       },
       children: [
-        title ? /* @__PURE__ */ jsx("div", { className: "mb-1.5 font-bold text-[12px] text-ink", children: title }) : null,
+        title ? /* @__PURE__ */ jsx("div", { className: "mb-1.5 font-bold text-fs-120 text-ink", children: title }) : null,
         body ? /* @__PURE__ */ jsx("div", { className: "text-ink-2 leading-snug", children: body }) : null,
         /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: rows.map((row) => /* @__PURE__ */ jsxs(
           "div",
@@ -52,7 +52,7 @@ function ChartTooltip({
                 {
                   className: cn(
                     "size-2.5 shrink-0",
-                    row.shape === "line" || row.shape === "dashed" || row.shape === "dot" ? "rounded-pill" : "rounded-[3px]"
+                    row.shape === "line" || row.shape === "dashed" || row.shape === "dot" ? "rounded-pill" : "rounded-xs"
                   ),
                   style: { background: row.color }
                 }

package/dist/charts/crossfilter/crossfilter.js

@@ -91,8 +91,8 @@ function ChartHeader({
   const owned = typeof dimension === "string" ? [dimension] : dimension;
   const own = owned.some((id) => xf.filters[id] != null);
   return /* @__PURE__ */ jsxs("div", { className: "mb-1 flex min-w-0 flex-wrap items-baseline justify-between gap-x-3 gap-y-1", children: [
-    /* @__PURE__ */ jsx("h3", { className: "m-0 min-w-0 truncate font-bold text-[13px] text-ink", children: title }),
-    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2 font-semibold text-[12px] text-ink-3 tabular-nums", children: [
+    /* @__PURE__ */ jsx("h3", { className: "m-0 min-w-0 truncate font-bold text-fs-130 text-ink", children: title }),
+    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2 font-semibold text-fs-120 text-ink-3 tabular-nums", children: [
       /* @__PURE__ */ jsx("span", { "aria-live": "polite", children: labels.count(records, xf.total) }),
       own ? /* @__PURE__ */ jsx(
         "button",
@@ -101,7 +101,7 @@ function ChartHeader({
           onClick: () => {
             for (const id of owned) xf.clear(id);
           },
-          className: "cursor-pointer rounded-button border-0 bg-surface-2 px-2 py-0.5 font-semibold text-[11px] text-ink-2 hover:text-ink",
+          className: "cursor-pointer rounded-button border-0 bg-surface-2 px-2 py-0.5 font-semibold text-fs-110 text-ink-2 hover:text-ink",
           children: labels.clear
         }
       ) : null
@@ -316,7 +316,7 @@ function CrossfilterSummary({
       {
         type: "button",
         onClick: () => xf.clear(),
-        className: "cursor-pointer rounded-button border-0 bg-surface-2 px-3 py-1 font-semibold text-[12px] text-ink-2 hover:text-ink",
+        className: "cursor-pointer rounded-button border-0 bg-surface-2 px-3 py-1 font-semibold text-fs-120 text-ink-2 hover:text-ink",
         children: labels.clearAll
       }
     ) : null

package/dist/charts/donut-chart/donut-chart.js

@@ -456,7 +456,7 @@ function DonutPlot({
                       x: label.x,
                       y: label.y,
                       textAnchor: label.side > 0 ? "start" : "end",
-                      className: "text-[11px]",
+                      className: "text-fs-110",
                       children: label.lines === 2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
                         /* @__PURE__ */ jsx("tspan", { x: label.x, dy: "-0.25em", className: "fill-ink-2 font-medium", children: truncate(label.name, maxChars) }),
                         /* @__PURE__ */ jsx("tspan", { x: label.x, dy: "1.35em", className: "fill-ink font-bold tabular-nums", children: label.percent })

package/dist/charts/dumbbell-chart/dumbbell-chart.js

@@ -443,7 +443,7 @@ function DumbbellPlot({
                   "g",
                   {
                     "data-fade": "",
-                    className: "font-bold text-[11px] tabular-nums",
+                    className: "font-bold text-fs-110 tabular-nums",
                     style: { fill: "var(--ink-2)", opacity: dimmed ? 0.4 : 1 },
                     children: row.values.map((value, index) => /* @__PURE__ */ jsx(
                       "text",
@@ -465,7 +465,7 @@ function DumbbellPlot({
                     x: cx,
                     y: -10,
                     textAnchor: "middle",
-                    className: "font-bold text-[12px] tabular-nums",
+                    className: "font-bold text-fs-120 tabular-nums",
                     style: { fill: deltaColor(row), opacity: dimmed ? 0.4 : 1 },
                     children: changeText(row, delta, fmt)
                   }
@@ -497,7 +497,7 @@ function DumbbellPlot({
                   y: cy,
                   dy: "0.34em",
                   textAnchor: "end",
-                  className: "font-semibold text-[12px]",
+                  className: "font-semibold text-fs-120",
                   style: {
                     fill: active === i ? "var(--ink)" : "var(--ink-2)",
                     opacity: dimmed ? 0.5 : 1
@@ -509,7 +509,7 @@ function DumbbellPlot({
                 "g",
                 {
                   "data-fade": "",
-                  className: "font-bold text-[11px] tabular-nums",
+                  className: "font-bold text-fs-110 tabular-nums",
                   style: { fill: "var(--ink-2)", opacity: dimmed ? 0.4 : 1 },
                   children: row.values.length === 2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
                     /* @__PURE__ */ jsx("text", { x: lowPx - 12, y: cy, dy: "0.34em", textAnchor: "end", children: fmt(
@@ -538,7 +538,7 @@ function DumbbellPlot({
                   y: cy,
                   dy: "0.34em",
                   textAnchor: "end",
-                  className: "font-bold text-[12px] tabular-nums",
+                  className: "font-bold text-fs-120 tabular-nums",
                   style: { fill: deltaColor(row), opacity: dimmed ? 0.4 : 1 },
                   children: changeText(row, delta, fmt)
                 }

package/dist/charts/fill-gauge-chart/fill-gauge-chart.js

@@ -106,7 +106,7 @@ function FillGaugeChart({
               "div",
               {
                 "aria-hidden": "true",
-                className: "absolute truncate px-1 text-center font-semibold text-[12px] text-ink-2",
+                className: "absolute truncate px-1 text-center font-semibold text-fs-120 text-ink-2",
                 style: {
                   left: column * cellWidth,
                   top: blockTop(row) + size + 2,

package/dist/charts/funnel-chart/funnel-chart.js

@@ -274,10 +274,10 @@ function FunnelPlot({
                         style: { stroke: "var(--ink-3)", strokeOpacity: 0.5 }
                       }
                     ),
-                    /* @__PURE__ */ jsx("text", { x, y: shape.cy - 3, className: "fill-ink-2 font-medium text-[11px]", children: truncate(datum.name, maxChars2) }),
-                    /* @__PURE__ */ jsxs("text", { x, y: shape.cy + 12, className: "text-[12px]", children: [
+                    /* @__PURE__ */ jsx("text", { x, y: shape.cy - 3, className: "fill-ink-2 font-medium text-fs-110", children: truncate(datum.name, maxChars2) }),
+                    /* @__PURE__ */ jsxs("text", { x, y: shape.cy + 12, className: "text-fs-120", children: [
                       /* @__PURE__ */ jsx("tspan", { className: "fill-ink font-bold tabular-nums", children: format(datum.value) }),
-                      /* @__PURE__ */ jsxs("tspan", { className: "fill-ink-3 text-[11px] tabular-nums", children: [
+                      /* @__PURE__ */ jsxs("tspan", { className: "fill-ink-3 text-fs-110 tabular-nums", children: [
                         " ",
                         formatPercent(shape.stage.ofFirst, { decimals: 0 })
                       ] })
@@ -302,7 +302,7 @@ function FunnelPlot({
                       x: shape.cx,
                       y: 16,
                       textAnchor: "middle",
-                      className: "fill-ink-2 font-medium text-[11px]",
+                      className: "fill-ink-2 font-medium text-fs-110",
                       children: truncate(datum.name, maxChars)
                     }
                   ),
@@ -312,7 +312,7 @@ function FunnelPlot({
                       x: shape.cx,
                       y: 32,
                       textAnchor: "middle",
-                      className: "fill-ink font-bold text-[12px] tabular-nums",
+                      className: "fill-ink font-bold text-fs-120 tabular-nums",
                       children: truncate(format(datum.value), maxChars + 2)
                     }
                   )
@@ -351,7 +351,7 @@ function FunnelPlot({
                       x,
                       y: y + 4,
                       textAnchor: "middle",
-                      className: cn("fill-ink-2 font-bold text-[10.5px] tabular-nums"),
+                      className: cn("fill-ink-2 font-bold text-fs-105 tabular-nums"),
                       children: formatPercent(conversion, { decimals: 0 })
                     }
                   )

package/dist/charts/gantt-chart/gantt-chart.js

@@ -747,7 +747,7 @@ function GanttBody({
                     "aria-label": texts.zoomLevels[level2],
                     onClick: () => onZoom(level2),
                     className: cn(
-                      "cursor-pointer rounded-button px-2 py-1 font-semibold text-[11.5px] outline-none focus-visible:outline-2 focus-visible:outline-accent-ink @md/chart:px-3",
+                      "cursor-pointer rounded-button px-2 py-1 font-semibold text-fs-115 outline-none focus-visible:outline-2 focus-visible:outline-accent-ink @md/chart:px-3",
                       zoom === level2 ? "bg-surface text-ink shadow-xs" : "text-ink-3 hover:text-ink"
                     ),
                     children: [
@@ -758,7 +758,7 @@ function GanttBody({
                   level2
                 ))
               ] }),
-              critical || baselines ? /* @__PURE__ */ jsxs("ul", { className: "m-0 hidden min-w-0 list-none items-center gap-3 p-0 text-[11.5px] text-ink-3 @xl/chart:flex", children: [
+              critical || baselines ? /* @__PURE__ */ jsxs("ul", { className: "m-0 hidden min-w-0 list-none items-center gap-3 p-0 text-fs-115 text-ink-3 @xl/chart:flex", children: [
                 critical ? /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1.5 whitespace-nowrap", children: [
                   /* @__PURE__ */ jsx(
                     "span",
@@ -827,7 +827,7 @@ function GanttBody({
                   {
                     type: "button",
                     onClick: () => scrollToTime(todayTime, true),
-                    className: "shrink-0 cursor-pointer rounded-button border-divider bg-surface-control px-3 py-1 font-semibold text-[11.5px] text-ink-2 outline-none hover:bg-surface-2 focus-visible:outline-2 focus-visible:outline-accent-ink",
+                    className: "shrink-0 cursor-pointer rounded-button border-divider bg-surface-control px-3 py-1 font-semibold text-fs-115 text-ink-2 outline-none hover:bg-surface-2 focus-visible:outline-2 focus-visible:outline-accent-ink",
                     children: texts.today
                   }
                 ) : null
@@ -864,7 +864,7 @@ function GanttBody({
                           "div",
                           {
                             "aria-hidden": "true",
-                            className: "flex w-full items-center font-semibold text-[11px] text-ink-3",
+                            className: "flex w-full items-center font-semibold text-fs-110 text-ink-3",
                             style: { height: HEADER_HEIGHT / 2 },
                             children: [
                               /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate px-3", children: texts.tasks }),
@@ -930,7 +930,7 @@ function GanttBody({
                               }
                             },
                             className: cn(
-                              "flex items-center text-[12px] outline-none focus-visible:bg-accent-soft focus-visible:shadow-[inset_2px_0_0_var(--accent-word)]",
+                              "flex items-center text-fs-120 outline-none focus-visible:bg-accent-soft focus-visible:shadow-[inset_2px_0_0_var(--accent-word)]",
                               activeIndex === i && "bg-[var(--chart-grid)]"
                             ),
                             style: { height: rowHeight, boxShadow: "inset 0 -1px 0 var(--chart-grid)" },
@@ -980,7 +980,7 @@ function GanttBody({
                                       "span",
                                       {
                                         "aria-hidden": "true",
-                                        className: "size-2 shrink-0 rotate-45 rounded-[1px]",
+                                        className: "size-2 shrink-0 rotate-45 rounded-xs",
                                         style: { background: row.task.color ?? "var(--ink)" }
                                       }
                                     ) : null,
@@ -1001,7 +1001,7 @@ function GanttBody({
                                 "span",
                                 {
                                   "aria-hidden": "true",
-                                  className: "shrink-0 truncate pr-3 text-right text-[11.5px] text-ink-3 tabular-nums",
+                                  className: "shrink-0 truncate pr-3 text-right text-fs-115 text-ink-3 tabular-nums",
                                   style: { width: COLUMN_WIDTH[column] },
                                   children: column === "start" ? columnDate(row.start) : column === "end" ? row.task.milestone && !row.parent ? "" : columnDate(withTime ? row.end : displayEnd(row.start, row.end)) : row.task.milestone && !row.parent ? "" : formatPercent(row.progress, { decimals: 0 })
                                 },

package/dist/charts/gantt-chart/gantt-marks.js

@@ -64,7 +64,7 @@ const TimelineHeader = memo(function TimelineHeader2({
                 x,
                 y: HEADER_ROW / 2,
                 dy: "0.34em",
-                className: "fill-ink-2 font-semibold text-[11.5px]",
+                className: "fill-ink-2 font-semibold text-fs-115",
                 children: cell.label
               }
             ) : null
@@ -100,7 +100,7 @@ const TimelineHeader = memo(function TimelineHeader2({
                 y: HEADER_ROW + HEADER_ROW / 2,
                 dy: "0.34em",
                 textAnchor: "middle",
-                className: "fill-ink-3 font-medium text-[10.5px] tabular-nums",
+                className: "fill-ink-3 font-medium text-fs-105 tabular-nums",
                 children: cell.label
               }
             ) : null
@@ -124,7 +124,7 @@ const TimelineHeader = memo(function TimelineHeader2({
               y: 8,
               dy: "0.34em",
               textAnchor: "middle",
-              className: "font-bold text-[10px]",
+              className: "font-bold text-fs-100",
               style: { fill: "var(--surface)" },
               children: todayLabel
             }
@@ -441,7 +441,7 @@ function BarLabel({
       y,
       dy: "0.34em",
       textAnchor: end ? "end" : void 0,
-      className: outside ? `pointer-events-none fill-ink-2 text-[11px] ${strong ? "font-bold" : "font-medium"}` : "pointer-events-none font-semibold text-[11px]",
+      className: outside ? `pointer-events-none fill-ink-2 text-fs-110 ${strong ? "font-bold" : "font-medium"}` : "pointer-events-none font-semibold text-fs-110",
       style: outside ? void 0 : { fill: onFill ? "var(--surface)" : "var(--ink)" },
       children: text
     }
@@ -580,7 +580,7 @@ const AnnotationLayer = memo(function AnnotationLayer2({
           x: item.x0 + 10,
           y: y + 7.5,
           dy: "0.34em",
-          className: "fill-ink font-semibold text-[10.5px]",
+          className: "fill-ink font-semibold text-fs-105",
           children: item.label
         }
       )

package/dist/charts/gauge-chart/gauge-chart.js

@@ -341,7 +341,7 @@ function GaugePlot({
               textAnchor: "middle",
               dominantBaseline: "central",
               ...DECORATIVE,
-              className: "fill-ink-3 font-medium text-[10px] tabular-nums",
+              className: "fill-ink-3 font-medium text-fs-100 tabular-nums",
               children: format(tick.v)
             },
             tick.v
@@ -374,7 +374,7 @@ function GaugePlot({
                 x: minPoint.x,
                 y: minPoint.y + band / 2 + 15,
                 textAnchor: "middle",
-                className: "fill-ink-3 font-semibold text-[11px] tabular-nums",
+                className: "fill-ink-3 font-semibold text-fs-110 tabular-nums",
                 children: format(min)
               }
             ),
@@ -384,7 +384,7 @@ function GaugePlot({
                 x: maxPoint.x,
                 y: maxPoint.y + band / 2 + 15,
                 textAnchor: "middle",
-                className: "fill-ink-3 font-semibold text-[11px] tabular-nums",
+                className: "fill-ink-3 font-semibold text-fs-110 tabular-nums",
                 children: format(max)
               }
             )
@@ -415,7 +415,7 @@ function GaugePlot({
               {
                 x: cx,
                 y: labelY,
-                className: "font-bold text-[11px]",
+                className: "font-bold text-fs-110",
                 style: { fill: valueColor },
                 children: active.label
               }

package/dist/charts/globe-chart/globe-chart.js

@@ -419,7 +419,7 @@ function GlobePlot({
   };
   const activeRegion = hover?.kind === "region" ? regions[hover.index] : void 0;
   const activePoint = hover?.kind === "point" ? points[hover.index] : void 0;
-  const buttonClass = "inline-flex h-7 cursor-pointer items-center rounded-button border-0 bg-surface-2 px-3 font-semibold text-[12px] text-ink-2 outline-none hover:bg-sunken hover:text-ink focus-visible:outline-2 focus-visible:outline-accent-ink";
+  const buttonClass = "inline-flex h-7 cursor-pointer items-center rounded-button border-0 bg-surface-2 px-3 font-semibold text-fs-120 text-ink-2 outline-none hover:bg-sunken hover:text-ink focus-visible:outline-2 focus-visible:outline-accent-ink";
   return /* @__PURE__ */ jsxs("div", { className: "relative", style: { width, height }, children: [
     /* @__PURE__ */ jsxs(
       "div",

package/dist/charts/heatmap-chart/heatmap-grid.js

@@ -250,7 +250,7 @@ function HeatmapGrid({
               textAnchor: "end",
               dominantBaseline: "central",
               className: cn(
-                "select-none text-[11px] transition-[fill] duration-150",
+                "select-none text-fs-110 transition-[fill] duration-150",
                 lit?.row === row ? "fill-ink font-bold" : "fill-ink-3 font-semibold"
               ),
               children: estimateTextWidth(label, 11) > left - 10 ? `${label.slice(0, Math.max(1, Math.floor((left - 14) / 6.4)))}\u2026` : label
@@ -264,7 +264,7 @@ function HeatmapGrid({
               y: TOP - 8,
               textAnchor: square && !honeycomb ? "start" : "middle",
               className: cn(
-                "select-none text-[11px] transition-[fill] duration-150",
+                "select-none text-fs-110 transition-[fill] duration-150",
                 lit?.column === index ? "fill-ink font-bold" : "fill-ink-3 font-semibold"
               ),
               children: label
@@ -300,7 +300,7 @@ function HeatmapGrid({
                         y: c.y,
                         textAnchor: "middle",
                         dominantBaseline: "central",
-                        className: "pointer-events-none select-none font-bold text-[11px] tabular-nums",
+                        className: "pointer-events-none select-none font-bold text-fs-110 tabular-nums",
                         style: { fill: inkOn(stop?.strength ?? 0) },
                         children: text
                       }
@@ -334,7 +334,7 @@ function HeatmapGrid({
                       y: y + ch / 2,
                       textAnchor: "middle",
                       dominantBaseline: "central",
-                      className: "pointer-events-none select-none font-bold text-[11px] tabular-nums",
+                      className: "pointer-events-none select-none font-bold text-fs-110 tabular-nums",
                       style: {
                         fill: inkOn(stop?.strength ?? 0),
                         opacity: dimmed ? 0.5 : 1
@@ -441,7 +441,7 @@ function HeatmapLegend({
   format
 }) {
   if (ranges && ranges.length > 0) {
-    return /* @__PURE__ */ jsx("ul", { className: "@md/chart:-order-1 m-0 flex list-none flex-wrap @md/chart:justify-end gap-x-3 gap-y-1 p-0 text-[12px]", children: ranges.map((range, index) => /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx("ul", { className: "@md/chart:-order-1 m-0 flex list-none flex-wrap @md/chart:justify-end gap-x-3 gap-y-1 p-0 text-fs-120", children: ranges.map((range, index) => /* @__PURE__ */ jsxs(
       "li",
       {
         className: "inline-flex min-w-0 items-center gap-1.5 font-semibold text-ink-2",
@@ -450,7 +450,7 @@ function HeatmapLegend({
             "span",
             {
               "aria-hidden": "true",
-              className: "size-2.5 shrink-0 rounded-[3px]",
+              className: "size-2.5 shrink-0 rounded-xs",
               style: {
                 background: rangeColor(range, index, ranges.length).color
               }
@@ -466,7 +466,7 @@ function HeatmapLegend({
     "div",
     {
       "aria-hidden": "true",
-      className: "@md/chart:-order-1 flex w-full max-w-[260px] @md/chart:self-end flex-col gap-1 text-[11px] text-ink-3 tabular-nums",
+      className: "@md/chart:-order-1 flex w-full max-w-[260px] @md/chart:self-end flex-col gap-1 text-fs-110 text-ink-3 tabular-nums",
       children: [
         /* @__PURE__ */ jsx(
           "span",

package/dist/charts/hierarchy-morph/hierarchy-morph.js

@@ -83,7 +83,7 @@ function HierarchyMorph({
         "aria-pressed": current === option,
         onClick: () => choose(option),
         className: cn(
-          "cursor-pointer rounded-button border px-3 py-1 text-[12px] font-semibold outline-none focus-visible:outline-2 focus-visible:outline-accent-ink focus-visible:outline-offset-2",
+          "cursor-pointer rounded-button border px-3 py-1 text-fs-120 font-semibold outline-none focus-visible:outline-2 focus-visible:outline-accent-ink focus-visible:outline-offset-2",
           current === option ? "border-transparent bg-accent-soft text-accent-ink" : "border-line bg-transparent text-ink-3 hover:text-ink"
         ),
         children: labels[option]
@@ -280,7 +280,7 @@ function MorphPlot({
                   x: slot.x,
                   y: slot.y,
                   dominantBaseline: "central",
-                  className: cn("text-[11px]", slot.group ? "font-bold" : "font-semibold"),
+                  className: cn("text-fs-110", slot.group ? "font-bold" : "font-semibold"),
                   style: { fill: inkOn(strength), opacity: treemapOpacity },
                   children: treemapText
                 }
@@ -292,7 +292,7 @@ function MorphPlot({
                   y: shape.sectorCenter.y,
                   textAnchor: "middle",
                   dominantBaseline: "central",
-                  className: "font-semibold text-[11px]",
+                  className: "font-semibold text-fs-110",
                   style: { fill: inkOn(strength), opacity: sectorOpacity },
                   children: sectorText
                 }

package/dist/charts/histogram/histogram.js

@@ -94,7 +94,7 @@ function Histogram({
           type: "button",
           "aria-pressed": exploded,
           onClick: () => setExploded(!exploded),
-          className: "inline-flex min-h-8 items-center gap-2 rounded-button border-divider bg-surface-control px-3 font-semibold text-[12px] text-ink-2 transition-colors hover:bg-surface-2 aria-pressed:border-accent aria-pressed:text-ink",
+          className: "inline-flex min-h-8 items-center gap-2 rounded-button border-divider bg-surface-control px-3 font-semibold text-fs-120 text-ink-2 transition-colors hover:bg-surface-2 aria-pressed:border-accent aria-pressed:text-ink",
           children: exploded ? labels.bars : labels.explode
         }
       ) }) : null,

package/dist/charts/icicle-chart/icicle-chart.js

@@ -336,7 +336,7 @@ function IcicleCell({
       {
         x: cell.x + 7,
         y: cell.y + 16,
-        className: "pointer-events-none select-none font-semibold text-[12px]",
+        className: "pointer-events-none select-none font-semibold text-fs-120",
         style: { fill: ink },
         children: [
           label,
@@ -345,7 +345,7 @@ function IcicleCell({
             {
               x: cell.x + 7,
               dy: 16,
-              className: "font-bold text-[11px] tabular-nums",
+              className: "font-bold text-fs-110 tabular-nums",
               style: { fill: ink, opacity: 0.78 },
               children: value
             }

package/dist/charts/isotype-rows/isotype-rows.js

@@ -54,7 +54,7 @@ function IsotypeRows({
       loading,
       empty,
       skeleton: "bars",
-      footer: keyShown ? /* @__PURE__ */ jsxs("p", { className: "m-0 flex items-center gap-1.5 text-[12px] text-ink-3", children: [
+      footer: keyShown ? /* @__PURE__ */ jsxs("p", { className: "m-0 flex items-center gap-1.5 text-fs-120 text-ink-3", children: [
         /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", width: "14", height: "14", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
           "path",
           {
@@ -168,7 +168,7 @@ function IsotypePlot({
       {
         "aria-hidden": "true",
         className: cn(
-          "absolute left-0 truncate font-semibold text-[12px] text-ink-2 transition-opacity duration-150",
+          "absolute left-0 truncate font-semibold text-fs-120 text-ink-2 transition-opacity duration-150",
           activeItem && activeItem.id !== item.id && "opacity-40"
         ),
         style: {
@@ -230,7 +230,7 @@ function IsotypePlot({
                     x: (track ? geometry.trackEnd : row.end) + 8,
                     y: row.center,
                     dominantBaseline: "central",
-                    className: "fill-ink font-bold text-[12px] tabular-nums",
+                    className: "fill-ink font-bold text-fs-120 tabular-nums",
                     children: format(item.value)
                   }
                 ) : null

package/dist/charts/lollipop-chart/lollipop-chart.js

@@ -271,7 +271,7 @@ function LollipopPlot({
                       y: vertical ? cy + (negative ? radius + 14 : -(radius + 6)) : cy,
                       dy: vertical ? void 0 : "0.34em",
                       textAnchor: vertical ? "middle" : negative ? "end" : "start",
-                      className: "font-bold text-[11px] tabular-nums",
+                      className: "font-bold text-fs-110 tabular-nums",
                       style: { fill: "var(--ink-2)" },
                       children: fmt(row.value)
                     }

package/dist/charts/maps/geo/map-data-table.js

@@ -43,13 +43,13 @@ function MapDataTable({
           className: "inline-flex cursor-pointer items-center gap-1 rounded-xs border-0 bg-transparent p-0 font-bold text-ink outline-none focus-visible:outline-2 focus-visible:outline-accent-ink focus-visible:outline-offset-2",
           children: [
             text,
-            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-[10px] text-ink-3", children: sort.key === key ? sort.direction === "asc" ? "\u25B2" : "\u25BC" : "" })
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-fs-100 text-ink-3", children: sort.key === key ? sort.direction === "asc" ? "\u25B2" : "\u25BC" : "" })
           ]
         }
       )
     }
   );
-  return /* @__PURE__ */ jsx("div", { className: "@container/table overflow-auto rounded-event border-divider", style: { height }, children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-[12.5px]", children: [
+  return /* @__PURE__ */ jsx("div", { className: "@container/table overflow-auto rounded-event border-divider", style: { height }, children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-fs-125", children: [
     /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }),
     /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b-divider", children: [
       header("name", labels.region),
@@ -70,7 +70,7 @@ function MapDataTable({
               "span",
               {
                 "aria-hidden": "true",
-                className: "size-2.5 shrink-0 rounded-[3px] border border-line",
+                className: "size-2.5 shrink-0 rounded-xs border border-line",
                 style: { background: row.color }
               }
             ),

package/dist/charts/maps/geo/map-legend.js

@@ -12,19 +12,19 @@ function MapLegend({
   format,
   noData
 }) {
-  const missing = noData ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 font-semibold text-[12px] text-ink-2", children: [
+  const missing = noData ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 font-semibold text-fs-120 text-ink-2", children: [
     /* @__PURE__ */ jsx(
       "span",
       {
         "aria-hidden": "true",
-        className: "size-2.5 shrink-0 rounded-[3px] border border-line",
+        className: "size-2.5 shrink-0 rounded-xs border border-line",
         style: { background: "var(--surface-2)" }
       }
     ),
     noData
   ] }) : null;
   return /* @__PURE__ */ jsxs("div", { className: "@md/chart:-order-1 flex flex-wrap items-end gap-x-4 gap-y-2 @md/chart:justify-end", children: [
-    ranges && ranges.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-wrap gap-x-3 gap-y-1 p-0 text-[12px]", children: ranges.map((range, index) => /* @__PURE__ */ jsxs(
+    ranges && ranges.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-wrap gap-x-3 gap-y-1 p-0 text-fs-120", children: ranges.map((range, index) => /* @__PURE__ */ jsxs(
       "li",
       {
         className: "inline-flex min-w-0 items-center gap-1.5 font-semibold text-ink-2",
@@ -33,7 +33,7 @@ function MapLegend({
             "span",
             {
               "aria-hidden": "true",
-              className: "size-2.5 shrink-0 rounded-[3px]",
+              className: "size-2.5 shrink-0 rounded-xs",
               style: { background: rangeColor(range, index, ranges.length).color }
             }
           ),
@@ -45,7 +45,7 @@ function MapLegend({
       "div",
       {
         "aria-hidden": "true",
-        className: "flex w-full max-w-[220px] flex-col gap-1 text-[11px] text-ink-3 tabular-nums",
+        className: "flex w-full max-w-[220px] flex-col gap-1 text-fs-110 text-ink-3 tabular-nums",
         children: [
           /* @__PURE__ */ jsx(
             "span",

package/dist/charts/maps/geo/map-viewport.js

@@ -109,7 +109,7 @@ function RegionLabels({
       y,
       textAnchor: "middle",
       dominantBaseline: "central",
-      className: "fill-ink font-semibold text-[11px]",
+      className: "fill-ink font-semibold text-fs-110",
       style: LABEL_STYLE,
       children: text
     },

package/dist/charts/parliament-chart/parliament-chart.js

@@ -262,7 +262,7 @@ function ParliamentPlot({
                 x: cx,
                 y: cy - radius * (1 + geometry.sr) - 8,
                 textAnchor: "middle",
-                className: "fill-ink-2 font-semibold text-[11px]",
+                className: "fill-ink-2 font-semibold text-fs-110",
                 children: [
                   majorityLabel,
                   ": ",
@@ -283,7 +283,7 @@ function ParliamentPlot({
                 children: formatNumber(total)
               }
             ),
-            /* @__PURE__ */ jsx("text", { x: cx, y: cy - 1, textAnchor: "middle", className: "fill-ink-3 text-[11px]", children: centerLabel })
+            /* @__PURE__ */ jsx("text", { x: cx, y: cy - 1, textAnchor: "middle", className: "fill-ink-3 text-fs-110", children: centerLabel })
           ] }) : null
         ]
       }

package/dist/charts/pictogram-chart/pictogram-chart.js

@@ -59,7 +59,7 @@ function PictogramChart({
   }));
   const icons = new Set(data.map((item) => item.icon ?? icon));
   const keyShape = resolveUnitShape(icons.size > 1 ? MIXED_KEY : icon);
-  const footer = keyShown ? /* @__PURE__ */ jsxs("p", { className: "m-0 flex items-center gap-1.5 text-[12px] text-ink-3", children: [
+  const footer = keyShown ? /* @__PURE__ */ jsxs("p", { className: "m-0 flex items-center gap-1.5 text-fs-120 text-ink-3", children: [
     /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", width: "14", height: "14", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: keyShape.path, style: { fill: "var(--ink-3)", fillRule: keyShape.fillRule } }) }),
     /* @__PURE__ */ jsxs("span", { children: [
       "= ",

package/dist/charts/polar-area-chart/polar-area-chart.js

@@ -304,7 +304,7 @@ function RosePlot({
               x: cx + 4,
               y: cy - ring.r - 3,
               ...DECORATIVE,
-              className: "pointer-events-none fill-ink-3 text-[9.5px] tabular-nums",
+              className: "pointer-events-none fill-ink-3 text-fs-95 tabular-nums",
               style: { paintOrder: "stroke", stroke: "var(--surface)", strokeWidth: 3 },
               children: axisFormat(ring.value)
             },
@@ -325,7 +325,7 @@ function RosePlot({
                 textAnchor: sin > 0.25 ? "start" : sin < -0.25 ? "end" : "middle",
                 ...DECORATIVE,
                 className: cn(
-                  "pointer-events-none text-[11px] motion-safe:transition-opacity motion-safe:duration-150",
+                  "pointer-events-none text-fs-110 motion-safe:transition-opacity motion-safe:duration-150",
                   focusIndex === sector.index ? "fill-ink font-bold" : "fill-ink-2 font-semibold"
                 ),
                 style: { opacity: focusIndex != null && focusIndex !== sector.index ? 0.4 : 1 },

package/dist/charts/progress-units/progress-units.js

@@ -146,7 +146,7 @@ function ProgressRow({
         ))
       }
     ),
-    showValue ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "truncate font-bold text-[13px] text-ink tabular-nums", children: text }) : null
+    showValue ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "truncate font-bold text-fs-130 text-ink tabular-nums", children: text }) : null
   ] });
 }
 export {

package/dist/charts/radar-chart/radar-chart.js

@@ -298,7 +298,7 @@ function RadarPlot({
               x: cx + 4,
               y: cy - ring.r - 2,
               ...DECORATIVE,
-              className: "fill-ink-3 text-[9.5px] tabular-nums",
+              className: "fill-ink-3 text-fs-95 tabular-nums",
               children: axisFormat(ring.value)
             },
             i

package/dist/charts/radial-bar-chart/radial-bar-chart.js

@@ -306,7 +306,7 @@ function RadialPlot({
                 textAnchor: "end",
                 dominantBaseline: "central",
                 ...DECORATIVE,
-                className: "pointer-events-none text-[11px] motion-safe:transition-opacity motion-safe:duration-150",
+                className: "pointer-events-none text-fs-110 motion-safe:transition-opacity motion-safe:duration-150",
                 style: { opacity: dimmed ? 0.35 : 1 },
                 children: [
                   /* @__PURE__ */ jsxs("tspan", { className: "fill-ink-2 font-medium", children: [