@jcsoftdev/ui 0.1.6 → 0.2.0

package/src/charts/core/axes.tsx

@@ -27,7 +27,7 @@ export function thinTicks(ticks: readonly AxisTick[], gap = 10): AxisTick[] {
   return ticks.filter((_, index) => index % every === 0);
 }
 
-const TEXT = "fill-ink-3 font-medium text-[11px] tabular-nums";
+const TEXT = "fill-ink-3 font-medium text-fs-110 tabular-nums";
 
 export interface GridLinesProps {
   ticks: readonly AxisTick[];
@@ -120,7 +120,7 @@ export const AxisLeft = memo(function AxisLeft({ ticks, offset, title, color }:
           x={-10}
           y={-16}
           textAnchor="end"
-          className="fill-ink-3 font-bold text-[10.5px]"
+          className="fill-ink-3 font-bold text-fs-105"
           style={color ? { fill: color } : undefined}
         >
           {title}
@@ -152,7 +152,7 @@ export const AxisRight = memo(function AxisRight({ ticks, offset, title, color }
           x={10}
           y={-16}
           textAnchor="start"
-          className="fill-ink-3 font-bold text-[10.5px]"
+          className="fill-ink-3 font-bold text-fs-105"
           style={color ? { fill: color } : undefined}
         >
           {title}

package/src/charts/core/breadcrumb.tsx

@@ -23,7 +23,7 @@ export interface ChartBreadcrumbProps {
 export function ChartBreadcrumb({ items, onSelect, label, className }: ChartBreadcrumbProps) {
   return (
     <nav aria-label={label} className={cn("min-w-0", className)}>
-      <ol className="m-0 flex list-none flex-wrap items-center gap-1 p-0 text-[12px]">
+      <ol className="m-0 flex list-none flex-wrap items-center gap-1 p-0 text-fs-120">
         {items.map((item, index) => {
           const current = index === items.length - 1;
           return (

package/src/charts/core/cartesian/annotations.tsx

@@ -36,7 +36,7 @@ function Pill({
         y={y}
         dy="0.35em"
         textAnchor="middle"
-        className="font-bold text-[10.5px]"
+        className="font-bold text-fs-105"
         style={{ fill: ink }}
       >
         {text}
@@ -86,7 +86,7 @@ export const AnnotationLayer = memo(function AnnotationLayer({
                     paintOrder="stroke"
                     strokeWidth={3}
                     strokeLinejoin="round"
-                    className="stroke-surface font-bold text-[11px]"
+                    className="stroke-surface font-bold text-fs-110"
                     style={{ fill: ink }}
                   >
                     {note.label}
@@ -111,7 +111,7 @@ export const AnnotationLayer = memo(function AnnotationLayer({
                 <text
                   x={(horizontal ? 0 : note.from) + 6}
                   y={(horizontal ? note.from : 0) + 13}
-                  className="font-bold text-[10.5px]"
+                  className="font-bold text-fs-105"
                   style={{ fill: ink }}
                 >
                   {note.label}

package/src/charts/core/cartesian/cartesian-chart.tsx

@@ -1202,7 +1202,7 @@ function CartesianPlot({
         <button
           type="button"
           onClick={() => onRangeChange(null)}
-          className="absolute top-0 right-0 inline-flex h-7 cursor-pointer items-center gap-1 rounded-button border-0 bg-surface-2 px-3 font-semibold text-[12px] text-ink-2 hover:bg-sunken hover:text-ink"
+          className="absolute top-0 right-0 inline-flex h-7 cursor-pointer items-center gap-1 rounded-button border-0 bg-surface-2 px-3 font-semibold text-fs-120 text-ink-2 hover:bg-sunken hover:text-ink"
         >
           <svg aria-hidden="true" width="12" height="12" viewBox="0 0 24 24">
             <path

package/src/charts/core/cartesian/category-group-axis.tsx

@@ -31,7 +31,7 @@ export function CategoryGroupAxis({
             x={span.center}
             y={19}
             textAnchor="middle"
-            className="font-bold text-[12px]"
+            className="font-bold text-fs-120"
             style={{ fill: "var(--ink-2)" }}
           >
             {fit(span.label, span.to - span.from - 8)}

package/src/charts/core/cartesian/ink-layer.tsx

@@ -410,7 +410,7 @@ function Ruler({
 }
 
 const buttonClass =
-  "inline-flex h-7 cursor-pointer items-center rounded-button border-0 px-3 font-semibold text-[12px] outline-none focus-visible:outline-2 focus-visible:outline-accent-ink disabled:cursor-not-allowed disabled:opacity-40";
+  "inline-flex h-7 cursor-pointer items-center rounded-button border-0 px-3 font-semibold text-fs-120 outline-none focus-visible:outline-2 focus-visible:outline-accent-ink disabled:cursor-not-allowed disabled:opacity-40";
 
 /** Buttons for the ruler and pen tools plus undo, redo and clear. Place it next to the chart. */
 export function ChartInkToolbar({ ink, className }: { ink: ChartInk; className?: string }) {

package/src/charts/core/cartesian/marks.tsx

@@ -146,7 +146,7 @@ export const DataLabels = memo(function DataLabels({ geometry, dimmed }: DataLab
           strokeWidth={label.inside ? 0 : 3}
           strokeLinejoin="round"
           className={cn(
-            "font-bold text-[10.5px] tabular-nums",
+            "font-bold text-fs-105 tabular-nums",
             label.inside ? "fill-surface" : "fill-ink-2 stroke-surface",
           )}
         >

package/src/charts/core/chart-states.tsx

@@ -48,7 +48,7 @@ export function ChartSkeleton({ height, label, shape = "bars", className }: Char
           {SKELETON_BARS.map((ratio) => (
             <span
               key={ratio}
-              className="flex-1 rounded-t-[6px] bg-surface-2"
+              className="flex-1 rounded-t-chip bg-surface-2"
               style={{ height: `${ratio * 100}%` }}
             />
           ))}
@@ -83,7 +83,7 @@ export function ChartEmpty({ height, label, className }: ChartEmptyProps) {
           strokeLinecap="round"
         />
       </svg>
-      <p className="m-0 font-semibold text-[13px] text-ink-3">{label}</p>
+      <p className="m-0 font-semibold text-fs-130 text-ink-3">{label}</p>
     </div>
   );
 }

package/src/charts/core/distribution/layout.ts

@@ -297,6 +297,6 @@ export function tooltipFit(width: number): { containerWidth: number; className?:
   if (width >= 480) return { containerWidth: width };
   return {
     containerWidth: width * 1.2,
-    className: "min-w-[112px] max-w-[calc(50cqw-16px)]",
+    className: "min-w-28 max-w-[calc(50cqw-16px)]",
   };
 }

package/src/charts/core/distribution/marks.tsx

@@ -7,7 +7,7 @@ import type { DistributionLabels } from "./labels.js";
 import type { CategoryLayout, XYLayout } from "./layout.js";
 import type { BoxStats } from "./stats.js";
 
-const TITLE = "fill-ink-3 font-bold text-[10.5px]";
+const TITLE = "fill-ink-3 font-bold text-fs-105";
 
 /** Gridlines along the value axis plus both axes of a `categoryLayout`. */
 export const CategoryAxes = memo(function CategoryAxes({
@@ -39,7 +39,7 @@ export const CategoryAxes = memo(function CategoryAxes({
                 y={tick.position}
                 dy="0.34em"
                 textAnchor="end"
-                className="fill-ink-2 font-semibold text-[12px]"
+                className="fill-ink-2 font-semibold text-fs-120"
               >
                 {tick.label}
               </text>

package/src/charts/core/distribution/xy-points.tsx

@@ -316,7 +316,7 @@ function SizeKey({
   }));
   const box = maxRadius * 2 + 2;
   return (
-    <div className="flex flex-wrap items-center gap-x-3 gap-y-1 px-2 text-[12px] text-ink-3">
+    <div className="flex flex-wrap items-center gap-x-3 gap-y-1 px-2 text-fs-120 text-ink-3">
       <span className="font-semibold">{label}</span>
       <div className="flex flex-wrap items-end gap-x-3 gap-y-1">
         {steps.map((step) => (
@@ -980,7 +980,7 @@ function XYPointPlot({
               x={Math.min(trend.x2, innerWidth) - 4}
               y={trend.y2 - 8}
               textAnchor="end"
-              className="font-bold text-[10.5px] tabular-nums"
+              className="font-bold text-fs-105 tabular-nums"
               style={{ fill: trend.series.color }}
             >
               {`R² ${formatNumber(trend.fit.r2, { maximumFractionDigits: 2 })}`}
@@ -1004,7 +1004,7 @@ function XYPointPlot({
                 dy="0.34em"
                 textAnchor={inside ? "middle" : "start"}
                 className={cn(
-                  "pointer-events-none font-semibold text-[11px] transition-opacity duration-150",
+                  "pointer-events-none font-semibold text-fs-110 transition-opacity duration-150",
                   inside ? "fill-ink" : "fill-ink-2",
                 )}
                 style={{ opacity: isDimmed(point.series.id) ? 0.2 : 1 }}
@@ -1107,7 +1107,7 @@ function XYPointPlot({
                     x={left ? 8 : innerWidth - 8}
                     y={top ? 16 : innerHeight - 8}
                     textAnchor={left ? "start" : "end"}
-                    className="font-bold text-[11px]"
+                    className="font-bold text-fs-110"
                     style={{ fill: tone ? TONE_COLORS[tone].ink : "var(--ink-3)" }}
                   >
                     {truncateLabel(text, half(innerWidth))}

package/src/charts/core/export-menu.tsx

@@ -58,7 +58,7 @@ export function ExportMenu({
           type="button"
           aria-label={`${texts.export} ${texts[kind]}`}
           onClick={() => run(kind)}
-          className="cursor-pointer rounded-button px-2 py-1 font-semibold text-[11.5px] text-ink-3 outline-none hover:bg-surface hover:text-ink focus-visible:outline-2 focus-visible:outline-accent-ink"
+          className="cursor-pointer rounded-button px-2 py-1 font-semibold text-fs-115 text-ink-3 outline-none hover:bg-surface hover:text-ink focus-visible:outline-2 focus-visible:outline-accent-ink"
         >
           {texts[kind]}
         </button>

package/src/charts/core/legend.tsx

@@ -42,7 +42,7 @@ function Swatch({ color, shape = "square" }: { color: string; shape?: LegendShap
   return (
     <span
       aria-hidden="true"
-      className={cn("size-2.5 shrink-0", shape === "dot" ? "rounded-pill" : "rounded-[3px]")}
+      className={cn("size-2.5 shrink-0", shape === "dot" ? "rounded-pill" : "rounded-xs")}
       style={{ background: color }}
     />
   );
@@ -78,7 +78,7 @@ export function ChartLegend({
           </>
         );
         const itemClass = cn(
-          "inline-flex max-w-[220px] items-center gap-1.5 rounded-pill px-2 py-1 font-semibold text-[12px] text-ink-2 transition-[opacity,background-color] duration-150",
+          "inline-flex max-w-[220px] items-center gap-1.5 rounded-pill px-2 py-1 font-semibold text-fs-120 text-ink-2 transition-[opacity,background-color] duration-150",
           item.hidden && "opacity-45 [&>span:last-child]:line-through",
         );
         return (

package/src/charts/core/tooltip.tsx

@@ -65,7 +65,7 @@ export function ChartTooltip({
       ref={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,
       )}
@@ -74,7 +74,7 @@ export function ChartTooltip({
         transform: `translate3d(${Math.round(left)}px, ${Math.round(y)}px, 0) translateY(-50%)`,
       }}
     >
-      {title ? <div className="mb-1.5 font-bold text-[12px] text-ink">{title}</div> : null}
+      {title ? <div className="mb-1.5 font-bold text-fs-120 text-ink">{title}</div> : null}
       {body ? <div className="text-ink-2 leading-snug">{body}</div> : null}
       <div className="flex flex-col gap-1">
         {rows.map((row) => (
@@ -93,7 +93,7 @@ export function ChartTooltip({
                   "size-2.5 shrink-0",
                   row.shape === "line" || row.shape === "dashed" || row.shape === "dot"
                     ? "rounded-pill"
-                    : "rounded-[3px]",
+                    : "rounded-xs",
                 )}
                 style={{ background: row.color }}
               />

package/src/charts/crossfilter/crossfilter.tsx

@@ -170,8 +170,8 @@ function ChartHeader({
   const own = owned.some((id) => xf.filters[id] != null);
   return (
     <div className="mb-1 flex min-w-0 flex-wrap items-baseline justify-between gap-x-3 gap-y-1">
-      <h3 className="m-0 min-w-0 truncate font-bold text-[13px] text-ink">{title}</h3>
-      <div className="flex shrink-0 items-center gap-2 font-semibold text-[12px] text-ink-3 tabular-nums">
+      <h3 className="m-0 min-w-0 truncate font-bold text-fs-130 text-ink">{title}</h3>
+      <div className="flex shrink-0 items-center gap-2 font-semibold text-fs-120 text-ink-3 tabular-nums">
         <span aria-live="polite">{labels.count(records, xf.total)}</span>
         {own ? (
           <button
@@ -179,7 +179,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"
           >
             {labels.clear}
           </button>
@@ -484,7 +484,7 @@ export function CrossfilterSummary({
         <button
           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"
         >
           {labels.clearAll}
         </button>

package/src/charts/donut-chart/donut-chart.tsx

@@ -616,7 +616,7 @@ function DonutPlot({
                 x={label.x}
                 y={label.y}
                 textAnchor={label.side > 0 ? "start" : "end"}
-                className="text-[11px]"
+                className="text-fs-110"
               >
                 {label.lines === 2 ? (
                   <>

package/src/charts/dumbbell-chart/dumbbell-chart.tsx

@@ -579,7 +579,7 @@ function DumbbellPlot({
                   {showValues ? (
                     <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 }}
                     >
                       {row.values.map((value, index) => (
@@ -602,7 +602,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 }}
                     >
                       {changeText(row, delta, fmt)}
@@ -632,7 +632,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,
@@ -643,7 +643,7 @@ function DumbbellPlot({
                 {showValues ? (
                   <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 }}
                   >
                     {row.values.length === 2 ? (
@@ -681,7 +681,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 }}
                   >
                     {changeText(row, delta, fmt)}

package/src/charts/fill-gauge-chart/fill-gauge-chart.tsx

@@ -147,7 +147,7 @@ export function FillGaugeChart({
                 <div
                   key={item.id}
                   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/src/charts/funnel-chart/funnel-chart.tsx

@@ -375,12 +375,12 @@ function FunnelPlot({
                   strokeDasharray="2 3"
                   style={{ stroke: "var(--ink-3)", strokeOpacity: 0.5 }}
                 />
-                <text x={x} y={shape.cy - 3} className="fill-ink-2 font-medium text-[11px]">
+                <text x={x} y={shape.cy - 3} className="fill-ink-2 font-medium text-fs-110">
                   {truncate(datum.name, maxChars)}
                 </text>
-                <text x={x} y={shape.cy + 12} className="text-[12px]">
+                <text x={x} y={shape.cy + 12} className="text-fs-120">
                   <tspan className="fill-ink font-bold tabular-nums">{format(datum.value)}</tspan>
-                  <tspan className="fill-ink-3 text-[11px] tabular-nums">
+                  <tspan className="fill-ink-3 text-fs-110 tabular-nums">
                     {" "}
                     {formatPercent(shape.stage.ofFirst, { decimals: 0 })}
                   </tspan>
@@ -401,7 +401,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"
               >
                 {truncate(datum.name, maxChars)}
               </text>
@@ -409,7 +409,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"
               >
                 {truncate(format(datum.value), maxChars + 2)}
               </text>
@@ -443,7 +443,7 @@ function FunnelPlot({
                     x={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")}
                   >
                     {formatPercent(conversion, { decimals: 0 })}
                   </text>

package/src/charts/gantt-chart/gantt-chart.tsx

@@ -983,7 +983,7 @@ function GanttBody({
               aria-label={texts.zoomLevels[level]}
               onClick={() => onZoom(level)}
               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 === level ? "bg-surface text-ink shadow-xs" : "text-ink-3 hover:text-ink",
               )}
             >
@@ -997,7 +997,7 @@ function GanttBody({
           ))}
         </fieldset>
         {critical || baselines ? (
-          <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">
+          <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">
             {critical ? (
               <li className="flex items-center gap-1.5 whitespace-nowrap">
                 <span
@@ -1077,7 +1077,7 @@ function GanttBody({
             <button
               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"
             >
               {texts.today}
             </button>
@@ -1109,7 +1109,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 }}
               >
                 <span className="min-w-0 flex-1 truncate px-3">{texts.tasks}</span>
@@ -1174,7 +1174,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)" }}
@@ -1218,7 +1218,7 @@ function GanttBody({
                     {row.task.milestone && !row.parent ? (
                       <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}
@@ -1235,7 +1235,7 @@ function GanttBody({
                     <span
                       key={column}
                       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] }}
                     >
                       {column === "start"

package/src/charts/gantt-chart/gantt-marks.tsx

@@ -118,7 +118,7 @@ export const TimelineHeader = memo(function TimelineHeader({
                 x={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"
               >
                 {cell.label}
               </text>
@@ -150,7 +150,7 @@ export const TimelineHeader = memo(function TimelineHeader({
                 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"
               >
                 {cell.label}
               </text>
@@ -172,7 +172,7 @@ export const TimelineHeader = memo(function TimelineHeader({
             y={8}
             dy="0.34em"
             textAnchor="middle"
-            className="font-bold text-[10px]"
+            className="font-bold text-fs-100"
             style={{ fill: "var(--surface)" }}
           >
             {todayLabel}
@@ -512,8 +512,8 @@ function BarLabel({
       textAnchor={end ? "end" : undefined}
       className={
         outside
-          ? `pointer-events-none fill-ink-2 text-[11px] ${strong ? "font-bold" : "font-medium"}`
-          : "pointer-events-none font-semibold text-[11px]"
+          ? `pointer-events-none fill-ink-2 text-fs-110 ${strong ? "font-bold" : "font-medium"}`
+          : "pointer-events-none font-semibold text-fs-110"
       }
       style={outside ? undefined : { fill: onFill ? "var(--surface)" : "var(--ink)" }}
     >
@@ -698,7 +698,7 @@ export const AnnotationLayer = memo(function AnnotationLayer({
               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"
             >
               {item.label}
             </text>

package/src/charts/gauge-chart/gauge-chart.tsx

@@ -472,7 +472,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"
           >
             {format(tick.v)}
           </text>
@@ -501,7 +501,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"
             >
               {format(min)}
             </text>
@@ -509,7 +509,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"
             >
               {format(max)}
             </text>
@@ -540,7 +540,7 @@ function GaugePlot({
               <text
                 x={cx}
                 y={labelY}
-                className="font-bold text-[11px]"
+                className="font-bold text-fs-110"
                 style={{ fill: valueColor }}
               >
                 {active.label}

package/src/charts/globe-chart/globe-chart.tsx

@@ -547,7 +547,7 @@ function GlobePlot({
   const activeRegion = hover?.kind === "region" ? regions[hover.index] : undefined;
   const activePoint = hover?.kind === "point" ? points[hover.index] : undefined;
   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";
+    "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 (
     <div className="relative" style={{ width, height }}>

package/src/charts/heatmap-chart/heatmap-grid.tsx

@@ -338,7 +338,7 @@ export 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",
             )}
           >
@@ -354,7 +354,7 @@ export 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",
             )}
           >
@@ -393,7 +393,7 @@ export 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) }}
                           >
                             {text}
@@ -428,7 +428,7 @@ export 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,
@@ -550,7 +550,7 @@ export function HeatmapLegend({
 }: HeatmapLegendProps) {
   if (ranges && ranges.length > 0) {
     return (
-      <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]">
+      <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">
         {ranges.map((range, index) => (
           <li
             key={range.label}
@@ -558,7 +558,7 @@ export 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,
               }}
@@ -572,7 +572,7 @@ export function HeatmapLegend({
   return (
     <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"
     >
       <span
         className="h-2 w-full rounded-pill"

package/src/charts/hierarchy-morph/hierarchy-morph.tsx

@@ -157,7 +157,7 @@ export 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",
@@ -383,7 +383,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 }}
                 >
                   {treemapText}
@@ -395,7 +395,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 }}
                 >
                   {sectorText}

package/src/charts/histogram/histogram.tsx

@@ -161,7 +161,7 @@ export 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"
             >
               {exploded ? labels.bars : labels.explode}
             </button>