@jcsoftdev/ui 0.1.6 → 0.2.0

package/src/calendar/day-chip/day-chip.tsx

@@ -1,33 +1,43 @@
+import type { ComponentPropsWithRef } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 import type { CalendarMarker } from "../internal/types.js";
 
-const TONE: Record<NonNullable<CalendarMarker["tone"]>, string> = {
-  danger: "bg-danger text-on-accent",
+/** Class map behind each marker `tone`; exported so apps can extend or reuse it. */
+export const dayChipToneClasses: Readonly<Record<NonNullable<CalendarMarker["tone"]>, string>> = {
+  danger: "bg-danger text-surface",
   accent: "bg-accent-soft text-accent-ink shadow-inset-accent",
 };
 
-export interface DayChipProps {
+export type DayChipPart = "root" | "subtitle";
+
+export interface DayChipProps
+  extends Omit<ComponentPropsWithRef<"button">, "children" | "title" | "onClick"> {
   marker: CalendarMarker;
   onOpen?: (id: string) => void;
   className?: string;
+  /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+  classNames?: ClassNames<DayChipPart>;
 }
 
 /** Compact single-line chip for a day marker. */
-export function DayChip({ marker, onOpen, className }: DayChipProps) {
+export function DayChip({ marker, onOpen, className, classNames, ...props }: DayChipProps) {
   return (
     <button
       type="button"
       onClick={onOpen ? () => onOpen(marker.id) : undefined}
+      {...props}
       className={cn(
         "block w-full truncate rounded-xs px-1.5 py-0.5 text-left text-chip-text",
-        TONE[marker.tone ?? "accent"],
+        dayChipToneClasses[marker.tone ?? "accent"],
+        classNames?.root,
         className,
       )}
     >
       {marker.srLabel ? <span className="sr-only">{marker.srLabel} </span> : null}
       {marker.title}
       {marker.subtitle ? (
-        <span className="font-normal opacity-80"> · {marker.subtitle}</span>
+        <span className={cn("font-normal", classNames?.subtitle)}> · {marker.subtitle}</span>
       ) : null}
     </button>
   );

package/src/calendar/day-chip/index.ts

@@ -1,2 +1,2 @@
 export type { CalendarMarker } from "../internal/types.js";
-export { DayChip, type DayChipProps } from "./day-chip.js";
+export { DayChip, type DayChipPart, type DayChipProps, dayChipToneClasses } from "./day-chip.js";

package/src/calendar/event-block/event-block.tsx

@@ -1,7 +1,10 @@
+import type { ComponentPropsWithRef } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 import type { CalendarEvent, CalendarTone } from "../internal/types.js";
 
-const TONE: Record<CalendarTone, string> = {
+/** Class map behind each event `tone`; exported so apps can extend or reuse it. */
+export const eventToneClasses: Readonly<Record<CalendarTone, string>> = {
   accent: "bg-accent-soft border-accent-line",
   neutral: "bg-surface-2 border-line-strong",
   success: "bg-success-soft border-success/35",
@@ -9,16 +12,35 @@ const TONE: Record<CalendarTone, string> = {
   warning: "bg-warning-soft border-warning/40",
 };
 
-export interface EventBlockProps {
+export type EventBlockPart =
+  | "root"
+  | "layout"
+  | "time"
+  | "body"
+  | "title"
+  | "subtitle"
+  | "trailing";
+
+export interface EventBlockProps
+  extends Omit<ComponentPropsWithRef<"button">, "children" | "title" | "onClick"> {
   event: CalendarEvent;
   /** "detailed": time range, title and subtitle. "compact": one "time title" line. */
   variant?: "detailed" | "compact";
   onOpen?: (id: string) => void;
   className?: string;
+  /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+  classNames?: ClassNames<EventBlockPart>;
 }
 
-export function EventBlock({ event, variant = "detailed", onOpen, className }: EventBlockProps) {
-  const tone = TONE[event.tone ?? "accent"];
+export function EventBlock({
+  event,
+  variant = "detailed",
+  onOpen,
+  className,
+  classNames,
+  ...props
+}: EventBlockProps) {
+  const tone = eventToneClasses[event.tone ?? "accent"];
   const range = event.end ? `${event.start}–${event.end}` : event.start;
   const srLabel = event.srLabel ? <span className="sr-only">{event.srLabel} </span> : null;
   const handleClick = onOpen ? () => onOpen(event.id) : undefined;
@@ -28,9 +50,11 @@ export function EventBlock({ event, variant = "detailed", onOpen, className }: E
       <button
         type="button"
         onClick={handleClick}
+        {...props}
         className={cn(
           "block w-full truncate rounded-xs border px-1.5 py-0.5 text-left text-chip-text text-ink",
           tone,
+          classNames?.root,
           className,
         )}
       >
@@ -44,9 +68,11 @@ export function EventBlock({ event, variant = "detailed", onOpen, className }: E
     <button
       type="button"
       onClick={handleClick}
+      {...props}
       className={cn(
         "@container/event block w-full min-w-0 overflow-hidden rounded-event border px-2.5 py-2 text-left",
         tone,
+        classNames?.root,
         className,
       )}
     >
@@ -56,17 +82,26 @@ export function EventBlock({ event, variant = "detailed", onOpen, className }: E
           "grid h-full grid-cols-[96px_minmax(0,1fr)_auto] items-center gap-x-2.5",
           "@max-[28rem]/event:grid-cols-[70px_minmax(0,1fr)]",
           "@max-[9rem]/event:grid-cols-[minmax(0,1fr)] @max-[9rem]/event:gap-y-0.5",
+          classNames?.layout,
         )}
       >
-        <span className="whitespace-nowrap font-mono text-meta text-ink-2">{range}</span>
-        <span className="min-w-0">
-          <span className="block truncate text-row-title text-ink">{event.title}</span>
+        <span className={cn("whitespace-nowrap font-mono text-meta text-ink-2", classNames?.time)}>
+          {range}
+        </span>
+        <span className={cn("min-w-0", classNames?.body)}>
+          <span className={cn("block truncate text-row-title text-ink", classNames?.title)}>
+            {event.title}
+          </span>
           {event.subtitle ? (
-            <span className="block truncate text-meta text-ink-3">{event.subtitle}</span>
+            <span className={cn("block truncate text-meta text-ink-3", classNames?.subtitle)}>
+              {event.subtitle}
+            </span>
           ) : null}
         </span>
         {event.trailing ? (
-          <span className="@max-[28rem]/event:hidden">{event.trailing}</span>
+          <span className={cn("@max-[28rem]/event:hidden", classNames?.trailing)}>
+            {event.trailing}
+          </span>
         ) : null}
       </span>
     </button>

package/src/calendar/event-block/index.ts

@@ -1,2 +1,7 @@
 export type { CalendarEvent, CalendarTone } from "../internal/types.js";
-export { EventBlock, type EventBlockProps } from "./event-block.js";
+export {
+  EventBlock,
+  type EventBlockPart,
+  type EventBlockProps,
+  eventToneClasses,
+} from "./event-block.js";

package/src/calendar/month-view/index.ts

@@ -1 +1 @@
-export { MonthView, type MonthViewProps } from "./month-view.js";
+export { MonthView, type MonthViewPart, type MonthViewProps } from "./month-view.js";

package/src/calendar/month-view/month-view.tsx

@@ -1,3 +1,4 @@
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 import { DayChip } from "../day-chip/index.js";
 import { EventBlock } from "../event-block/index.js";
@@ -17,6 +18,16 @@ const DOT_TONE: Record<CalendarTone, string> = {
 
 type DayItem = { kind: "marker"; item: CalendarMarker } | { kind: "event"; item: CalendarEvent };
 
+export type MonthViewPart =
+  | "root"
+  | "weekday"
+  | "day"
+  | "dayNumber"
+  | "items"
+  | "more"
+  | "dots"
+  | "dot";
+
 export interface MonthViewProps {
   /** Any "YYYY-MM-DD" date inside the month to show. */
   month: string;
@@ -37,6 +48,8 @@ export interface MonthViewProps {
   /** Called with the day's date when the overflow button is clicked. */
   onSelectDate?: (date: string) => void;
   className?: string;
+  /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+  classNames?: ClassNames<MonthViewPart>;
 }
 
 export function MonthView({
@@ -52,17 +65,21 @@ export function MonthView({
   onOpenMarker,
   onSelectDate,
   className,
+  classNames,
 }: MonthViewProps) {
   const monthIndex = parseDate(month).getUTCMonth();
   const days = monthGrid(month, weekStartsOn);
   const shaded = new Set(shadedDates);
 
   return (
-    <div className={cn("@container/month grid min-w-0 grid-cols-7", className)}>
+    <div className={cn("@container/month grid min-w-0 grid-cols-7", classNames?.root, className)}>
       {days.slice(0, 7).map((date) => (
         <div
           key={date}
-          className="min-w-0 truncate border-b-divider px-2.5 py-2 text-overline text-ink-3 @max-[40rem]/month:px-0.5 @max-[40rem]/month:text-center"
+          className={cn(
+            "min-w-0 truncate border-b-divider px-2.5 py-2 text-overline text-ink-3 @max-[40rem]/month:px-0.5 @max-[40rem]/month:text-center",
+            classNames?.weekday,
+          )}
         >
           {formatWeekday(date, locale)}
         </div>
@@ -92,18 +109,26 @@ export function MonthView({
             className={cn(
               "flex min-h-30 min-w-0 flex-col gap-0.75 border-b-divider border-l-divider p-1.5 @max-[40rem]/month:min-h-16 @max-[40rem]/month:items-center @max-[40rem]/month:p-0.5",
               shaded.has(date) && SHADED_DAY_CLASS,
-              outside && "opacity-45",
+              outside && "bg-surface-2/50",
+              classNames?.day,
             )}
           >
             <span
               className={cn(
                 "grid h-5.5 min-w-6 place-items-center self-start rounded-xs font-mono text-chip-text text-ink-2",
                 isToday && "bg-accent text-on-accent",
+                outside && "text-ink-3",
+                classNames?.dayNumber,
               )}
             >
               {parsed.getUTCDate()}
             </span>
-            <div className="flex min-w-0 flex-col gap-0.75 @max-[40rem]/month:hidden">
+            <div
+              className={cn(
+                "flex min-w-0 flex-col gap-0.75 @max-[40rem]/month:hidden",
+                classNames?.items,
+              )}
+            >
               {visible.map(({ kind, item }) =>
                 kind === "marker" ? (
                   <DayChip key={item.id} marker={item} onOpen={onOpenMarker} />
@@ -115,14 +140,19 @@ export function MonthView({
                 <button
                   type="button"
                   onClick={onSelectDate ? () => onSelectDate(date) : undefined}
-                  className="px-1.5 text-left text-chip-text text-ink-3"
+                  className={cn("px-1.5 text-left text-chip-text text-ink-3", classNames?.more)}
                 >
                   {formatMore(hidden)}
                 </button>
               ) : null}
             </div>
             {items.length > 0 ? (
-              <div className="hidden flex-wrap justify-center gap-0.5 @max-[40rem]/month:flex">
+              <div
+                className={cn(
+                  "hidden flex-wrap justify-center gap-0.5 @max-[40rem]/month:flex",
+                  classNames?.dots,
+                )}
+              >
                 {items.map(({ kind, item }) => (
                   <button
                     key={item.id}
@@ -144,6 +174,7 @@ export function MonthView({
                           ? DOT_TONE.danger
                           : DOT_TONE.accent
                         : DOT_TONE[item.tone ?? "accent"],
+                      classNames?.dot,
                     )}
                   />
                 ))}

package/src/calendar/timeline-view/index.ts

@@ -1 +1 @@
-export { TimelineView, type TimelineViewProps } from "./timeline-view.js";
+export { TimelineView, type TimelineViewPart, type TimelineViewProps } from "./timeline-view.js";

package/src/calendar/timeline-view/timeline-view.tsx

@@ -1,9 +1,12 @@
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 import { DayChip } from "../day-chip/index.js";
 import { EventBlock } from "../event-block/index.js";
 import { formatMonthShort, formatWeekdayAndDay } from "../internal/date-utils.js";
 import type { CalendarEvent, CalendarMarker } from "../internal/types.js";
 
+export type TimelineViewPart = "root" | "day" | "heading" | "weekday" | "date" | "items" | "empty";
+
 export interface TimelineViewProps {
   /** "YYYY-MM-DD" date highlighted as today; the view never computes it. */
   today: string;
@@ -20,6 +23,8 @@ export interface TimelineViewProps {
   onOpenEvent?: (id: string) => void;
   onOpenMarker?: (id: string) => void;
   className?: string;
+  /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+  classNames?: ClassNames<TimelineViewPart>;
 }
 
 function visibleDates(
@@ -48,11 +53,12 @@ export function TimelineView({
   onOpenEvent,
   onOpenMarker,
   className,
+  classNames,
 }: TimelineViewProps) {
   const dates = visibleDates(today, events, markers, hiddenDates);
 
   return (
-    <div className={cn("@container/timeline flex min-w-0 flex-col", className)}>
+    <div className={cn("@container/timeline flex min-w-0 flex-col", classNames?.root, className)}>
       {dates.map((date) => {
         const isToday = date === today;
         const dayMarkers = markers.filter((marker) => marker.date === date);
@@ -69,18 +75,31 @@ export function TimelineView({
             aria-label={isToday ? `${label} · ${todayLabel}` : label}
             data-date={date}
             data-today={isToday || undefined}
-            className="grid grid-cols-[8rem_minmax(0,1fr)] gap-3.5 border-t-divider px-4 py-3.5 first:border-t-0 @max-[34rem]/timeline:grid-cols-[minmax(0,1fr)] @max-[34rem]/timeline:gap-y-2"
+            className={cn(
+              "grid grid-cols-[8rem_minmax(0,1fr)] gap-3.5 border-t-divider px-4 py-3.5 first:border-t-0 @max-[34rem]/timeline:grid-cols-[minmax(0,1fr)] @max-[34rem]/timeline:gap-y-2",
+              classNames?.day,
+            )}
           >
-            <div>
-              <b className={cn("block text-row-title", isToday && "text-accent-ink")}>{label}</b>
-              <span className="text-meta text-ink-3">
+            <div className={classNames?.heading}>
+              <b
+                className={cn(
+                  "block text-row-title",
+                  isToday && "text-accent-ink",
+                  classNames?.weekday,
+                )}
+              >
+                {label}
+              </b>
+              <span className={cn("text-meta text-ink-3", classNames?.date)}>
                 {formatMonthShort(date, locale)}
                 {isToday ? ` · ${todayLabel}` : ""}
               </span>
             </div>
-            <div className="flex min-w-0 flex-col gap-1.5">
+            <div className={cn("flex min-w-0 flex-col gap-1.5", classNames?.items)}>
               {dayMarkers.length === 0 && dayEvents.length === 0 ? (
-                <span className="py-2 text-meta text-ink-3">{emptyLabel}</span>
+                <span className={cn("py-2 text-meta text-ink-3", classNames?.empty)}>
+                  {emptyLabel}
+                </span>
               ) : (
                 <>
                   {dayMarkers.map((marker) => (

package/src/calendar/week-view/index.ts

@@ -1 +1 @@
-export { WeekView, type WeekViewProps } from "./week-view.js";
+export { WeekView, type WeekViewPart, type WeekViewProps } from "./week-view.js";

package/src/calendar/week-view/week-view.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useRef } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 import { DayChip } from "../day-chip/index.js";
 import { EventBlock } from "../event-block/index.js";
@@ -26,6 +27,20 @@ const COLUMNS = cn(
 );
 const GUTTER = "sticky left-0 z-10 bg-surface";
 
+export type WeekViewPart =
+  | "root"
+  | "scroll"
+  | "header"
+  | "dayHeader"
+  | "allDayRow"
+  | "allDayLabel"
+  | "allDayCell"
+  | "hourLabel"
+  | "column"
+  | "workingHours"
+  | "event"
+  | "nowLine";
+
 export interface WeekViewProps {
   /** Any "YYYY-MM-DD" date inside the week to show. */
   week: string;
@@ -48,6 +63,8 @@ export interface WeekViewProps {
   onOpenEvent?: (id: string) => void;
   onOpenMarker?: (id: string) => void;
   className?: string;
+  /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+  classNames?: ClassNames<WeekViewPart>;
 }
 
 export function WeekView({
@@ -64,6 +81,7 @@ export function WeekView({
   onOpenEvent,
   onOpenMarker,
   className,
+  classNames,
 }: WeekViewProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const first = startOfWeek(week, weekStartsOn);
@@ -77,10 +95,14 @@ export function WeekView({
   }, []);
 
   return (
-    <div className={cn("@container/week min-w-0", className)}>
-      <div ref={scrollRef} data-hours-scroll className="max-h-150 overflow-auto">
-        <div className="flex min-w-[820px] flex-col @max-[40rem]/week:min-w-[836px]">
-          <div className={cn("sticky top-0 z-20 grid bg-surface", COLUMNS)}>
+    <div className={cn("@container/week min-w-0", classNames?.root, className)}>
+      <div
+        ref={scrollRef}
+        data-hours-scroll
+        className={cn("max-h-150 overflow-auto", classNames?.scroll)}
+      >
+        <div className="flex min-w-205 flex-col @max-[40rem]/week:min-w-209">
+          <div className={cn("sticky top-0 z-20 grid bg-surface", COLUMNS, classNames?.header)}>
             <div className={GUTTER} />
             {days.map((date) => (
               <div
@@ -90,6 +112,7 @@ export function WeekView({
                 className={cn(
                   "flex h-10 min-w-0 items-center truncate whitespace-nowrap border-b-divider px-2 text-meta text-ink-3",
                   date === today && "text-accent-ink",
+                  classNames?.dayHeader,
                 )}
               >
                 {formatWeekdayAndDay(date, locale)}
@@ -97,11 +120,15 @@ export function WeekView({
             ))}
           </div>
 
-          <div data-all-day-row className={cn("sticky top-10 z-20 grid bg-surface", COLUMNS)}>
+          <div
+            data-all-day-row
+            className={cn("sticky top-10 z-20 grid bg-surface", COLUMNS, classNames?.allDayRow)}
+          >
             <div
               className={cn(
                 GUTTER,
                 "whitespace-nowrap border-b-divider px-1.5 pt-2.5 text-right text-meta text-ink-3",
+                classNames?.allDayLabel,
               )}
             >
               {allDayLabel}
@@ -109,7 +136,10 @@ export function WeekView({
             {days.map((date) => (
               <div
                 key={date}
-                className="flex min-h-10 flex-col gap-1 border-b-divider border-l-divider p-1"
+                className={cn(
+                  "flex min-h-10 flex-col gap-1 border-b-divider border-l-divider p-1",
+                  classNames?.allDayCell,
+                )}
               >
                 {markers
                   .filter((marker) => marker.date === date)
@@ -133,7 +163,10 @@ export function WeekView({
                 {HOURS.map((hour) => (
                   <span
                     key={hour}
-                    className="-translate-y-1/2 absolute right-2 whitespace-nowrap font-mono text-meta text-ink-3"
+                    className={cn(
+                      "-translate-y-1/2 absolute right-2 whitespace-nowrap font-mono text-meta text-ink-3",
+                      classNames?.hourLabel,
+                    )}
                     style={{ top: hour * PX_PER_HOUR }}
                   >
                     {formatHour(hour, locale)}
@@ -159,12 +192,16 @@ export function WeekView({
                       "relative border-l-divider bg-[linear-gradient(to_bottom,var(--line)_1px,transparent_1px)] bg-size-[100%_48px]",
                       isToday && "bg-accent-soft/40",
                       shaded.has(date) && SHADED_DAY_CLASS,
+                      classNames?.column,
                     )}
                   >
                     {workingHours ? (
                       <div
                         data-working-hours
-                        className="pointer-events-none absolute inset-x-0 bg-accent-soft/30"
+                        className={cn(
+                          "pointer-events-none absolute inset-x-0 bg-accent-soft/30",
+                          classNames?.workingHours,
+                        )}
                         style={{
                           top: workingHours[0] * PX_PER_HOUR,
                           height: (workingHours[1] - workingHours[0]) * PX_PER_HOUR,
@@ -179,7 +216,7 @@ export function WeekView({
                         <div
                           key={event.id}
                           data-event={event.id}
-                          className="absolute px-px"
+                          className={cn("absolute px-px", classNames?.event)}
                           style={{
                             top: (start / 60) * PX_PER_HOUR,
                             height: Math.max(((end - start) / 60) * PX_PER_HOUR - 2, 18),
@@ -200,7 +237,10 @@ export function WeekView({
                     {nowMinutes !== undefined ? (
                       <div
                         data-now-line
-                        className="pointer-events-none absolute inset-x-0 h-0.5 bg-danger"
+                        className={cn(
+                          "pointer-events-none absolute inset-x-0 h-0.5 bg-danger",
+                          classNames?.nowLine,
+                        )}
                         style={{ top: (nowMinutes / 60) * PX_PER_HOUR }}
                       />
                     ) : null}

package/src/charts/README.md

@@ -137,7 +137,7 @@ column, the x axis becomes a real time scale (`xScale="auto"`); force it with `x
 ## Theming
 
 Colors only come from CSS variables, applied through `style` (`fill`, `stroke`, `stopColor`) so `var()` resolves; never
-as SVG presentation attributes. Text uses Tailwind token utilities (`fill-ink-3`, `text-[11px]`).
+as SVG presentation attributes. Text uses Tailwind token utilities (`fill-ink-3`, `text-fs-110`).
 
 - Series 1 is always `var(--accent-word)`, so it follows `data-accent`. Series 2-8 use `--chart-cat-1` ... `--chart-cat-7`.
 - `--chart-up`, `--chart-down`, `--chart-total` are the semantic direction tokens (candles, waterfall, slopes, change columns).

package/src/charts/bar-chart/bar-race-chart.tsx

@@ -173,7 +173,7 @@ export function BarRaceChart({
             }}
             className="h-1.5 min-w-0 flex-1 cursor-pointer accent-(--accent)"
           />
-          <span className="min-w-12 text-right font-bold text-[12px] text-ink-2 tabular-nums">
+          <span className="min-w-12 text-right font-bold text-fs-120 text-ink-2 tabular-nums">
             {caption}
           </span>
         </div>
@@ -254,7 +254,7 @@ function RacePlot({
         x={width - 2}
         y={height - 6}
         textAnchor="end"
-        className="pointer-events-none font-extrabold text-[44px] tabular-nums"
+        className="pointer-events-none font-extrabold text-fs-440 tabular-nums"
         style={{ fill: "var(--ink-3)", fillOpacity: 0.22 }}
       >
         {caption}
@@ -280,7 +280,7 @@ function RacePlot({
                   y={barHeight / 2}
                   dy="0.34em"
                   textAnchor="end"
-                  className="font-semibold text-[12px]"
+                  className="font-semibold text-fs-120"
                   style={{ fill: "var(--ink-2)" }}
                 >
                   {entity.name}
@@ -289,7 +289,7 @@ function RacePlot({
                   x={length + 8}
                   y={barHeight / 2}
                   dy="0.34em"
-                  className="font-bold text-[11px] tabular-nums"
+                  className="font-bold text-fs-110 tabular-nums"
                   style={{ fill: "var(--ink-2)" }}
                 >
                   {fmt(item.value)}

package/src/charts/bubble-map/bubble-map.tsx

@@ -613,7 +613,7 @@ function BubblePlot({
                       textAnchor="middle"
                       dominantBaseline="central"
                       pointerEvents="none"
-                      className="font-bold text-[11px]"
+                      className="font-bold text-fs-110"
                       style={{ fill: "var(--surface)" }}
                     >
                       {item.points.length}

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

@@ -523,7 +523,7 @@ function BulletPlot({
                     x={centre}
                     y={-8}
                     textAnchor="middle"
-                    className="font-bold text-[11px] tabular-nums"
+                    className="font-bold text-fs-110 tabular-nums"
                     style={{ fill: "var(--ink-2)" }}
                   >
                     {fmt(item.actual)}
@@ -535,7 +535,7 @@ function BulletPlot({
                     x={innerWidth + 10}
                     y={centre}
                     dy="0.34em"
-                    className="font-bold text-[11px] tabular-nums"
+                    className="font-bold text-fs-110 tabular-nums"
                     style={{ fill: "var(--ink-2)" }}
                   >
                     {item.target == null

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

@@ -416,7 +416,7 @@ function CandlePlot({
                 y={4}
                 dy="0.34em"
                 textAnchor="end"
-                className="fill-ink-3 font-medium text-[10.5px] tabular-nums"
+                className="fill-ink-3 font-medium text-fs-105 tabular-nums"
               >
                 {vfmt(maxVolume)}
               </text>
@@ -499,7 +499,7 @@ function CandlePlot({
                     y={0}
                     dy="0.34em"
                     textAnchor="middle"
-                    className="font-bold text-[10.5px] tabular-nums"
+                    className="font-bold text-fs-105 tabular-nums"
                     style={{ fill: "var(--surface)" }}
                   >
                     {fmt(last.close)}
@@ -526,7 +526,7 @@ function CandlePlot({
         <button
           type="button"
           onClick={() => setRange([0, data.length - 1])}
-          className="absolute top-0 right-0 z-10 cursor-pointer rounded-button border-divider bg-surface-control px-2.5 py-1 font-semibold text-[11px] text-ink-2 hover:bg-surface-2"
+          className="absolute top-0 right-0 z-10 cursor-pointer rounded-button border-divider bg-surface-control px-2.5 py-1 font-semibold text-fs-110 text-ink-2 hover:bg-surface-2"
         >
           {labels.resetZoom}
         </button>

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

@@ -163,12 +163,12 @@ export function ChartGrid({
                   <header className="flex min-w-0 items-baseline justify-between gap-2">
                     <h3
                       id={headingId}
-                      className="m-0 truncate font-bold text-[12.5px] text-ink-2 leading-tight"
+                      className="m-0 truncate font-bold text-fs-125 text-ink-2 leading-tight"
                     >
                       {panel.title}
                     </h3>
                     {panel.subtitle ? (
-                      <span className="shrink-0 font-semibold text-[11.5px] text-ink-3 tabular-nums">
+                      <span className="shrink-0 font-semibold text-fs-115 text-ink-3 tabular-nums">
                         {panel.subtitle}
                       </span>
                     ) : null}

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

@@ -472,7 +472,7 @@ function ChordPlot({
                     x={at.x}
                     y={at.y + (cos > 0.4 ? -2 : cos < -0.4 ? 10 : 4)}
                     textAnchor={sin > 0.25 ? "start" : sin < -0.25 ? "end" : "middle"}
-                    className="pointer-events-none select-none fill-ink-2 font-semibold text-[11.5px]"
+                    className="pointer-events-none select-none fill-ink-2 font-semibold text-fs-115"
                     style={{ opacity: dim ? 0.4 : 1, transition: "opacity 150ms" }}
                   >
                     {groups[group.index]?.name}

package/src/charts/choropleth-map/choropleth-map.tsx

@@ -163,7 +163,7 @@ export function ChoroplethMap({
             aria-pressed={tableOpen}
             onClick={() => setTableOpen((open) => !open)}
             className={cn(
-              "cursor-pointer rounded-button border-0 px-3 py-1 font-semibold text-[12px] outline-none focus-visible:outline-2 focus-visible:outline-accent-ink",
+              "cursor-pointer rounded-button border-0 px-3 py-1 font-semibold text-fs-120 outline-none focus-visible:outline-2 focus-visible:outline-accent-ink",
               tableOpen ? "bg-surface-2 text-ink" : "bg-surface-2 text-ink-3 hover:text-ink",
             )}
           >