@jcsoftdev/ui 0.1.7 → 0.2.0

package/src/containers/banner/banner.tsx

@@ -1,5 +1,6 @@
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import { statusIcon } from "../../atoms/internal/status-icons.js";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 
 export type BannerTone = "info" | "success" | "warning" | "danger";
@@ -29,6 +30,8 @@ const toneRole: Record<BannerTone, "status" | "alert"> = {
   danger: "alert",
 };
 
+export type BannerPart = "root" | "icon" | "body" | "title" | "action";
+
 export interface BannerProps extends Omit<ComponentPropsWithoutRef<"div">, "role" | "title"> {
   tone?: BannerTone;
   /** Bold first line above the content. */
@@ -37,6 +40,8 @@ export interface BannerProps extends Omit<ComponentPropsWithoutRef<"div">, "role
   icon?: ReactNode;
   /** Actions on the right, e.g. a retry button. */
   action?: ReactNode;
+  /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+  classNames?: ClassNames<BannerPart>;
 }
 
 export function Banner({
@@ -45,6 +50,7 @@ export function Banner({
   icon,
   action,
   className,
+  classNames,
   children,
   ...props
 }: BannerProps) {
@@ -53,23 +59,31 @@ export function Banner({
     <div
       role={toneRole[tone]}
       className={cn(
-        "flex flex-wrap items-start gap-x-3 gap-y-2 rounded-banner px-3.5 py-3 text-[13px] text-ink",
+        "flex flex-wrap items-start gap-x-3 gap-y-2 rounded-banner px-3.5 py-3 text-fs-130 text-ink",
         toneClasses[tone],
+        classNames?.root,
         className,
       )}
       {...props}
     >
       {resolvedIcon ? (
-        <span aria-hidden="true" className={cn("mt-0.5 shrink-0", toneIconClasses[tone])}>
+        <span
+          aria-hidden="true"
+          className={cn("mt-0.5 shrink-0", toneIconClasses[tone], classNames?.icon)}
+        >
           {resolvedIcon}
         </span>
       ) : null}
-      <div className="min-w-0 flex-[1_1_14rem] break-words">
-        {title ? <p className="font-semibold">{title}</p> : null}
+      <div className={cn("min-w-0 flex-[1_1_14rem] break-words", classNames?.body)}>
+        {title ? <p className={cn("font-semibold", classNames?.title)}>{title}</p> : null}
         {children}
       </div>
       {action ? (
-        <div className="ml-auto flex shrink-0 flex-wrap items-center gap-1.5">{action}</div>
+        <div
+          className={cn("ml-auto flex shrink-0 flex-wrap items-center gap-1.5", classNames?.action)}
+        >
+          {action}
+        </div>
       ) : null}
     </div>
   );

package/src/containers/card/card.tsx

@@ -19,7 +19,7 @@ export function CardHeader({ className, ...props }: CardProps) {
   return (
     <div
       className={cn(
-        "flex min-h-[50px] flex-wrap items-center gap-2.5 border-b-divider px-card py-3",
+        "flex min-h-12.5 flex-wrap items-center gap-2.5 border-b-divider px-card py-3",
         className,
       )}
       {...props}

package/src/containers/carousel/carousel.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { ChevronLeft, ChevronRight, Pause, Play } from "lucide-react";
 import {
   Children,
   type ComponentPropsWithoutRef,
@@ -11,15 +10,30 @@ import {
   useRef,
   useState,
 } from "react";
+import { ChevronLeft, ChevronRight, Pause, Play } from "../../icons/index.js";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 import { usePrefersReducedMotion } from "../../utils/reduced-motion.js";
 import { nearestIndex, stepIndex } from "./model.js";
 
+export type CarouselPart =
+  | "root"
+  | "track"
+  | "slide"
+  | "controls"
+  | "previous"
+  | "next"
+  | "playPause"
+  | "dots"
+  | "dot";
+
 export interface CarouselProps extends Omit<ComponentPropsWithoutRef<"section">, "children"> {
   children: ReactNode;
   /** Accessible name of the carousel. */
   label: string;
-  /** Classes for each slide's width. Default: 1 per view, 2 from 32rem, 3 from 48rem. */
+  /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+  classNames?: ClassNames<CarouselPart>;
+  /** Classes for each slide's width. Default: 1 per view, 2 from 32rem, 3 from 48rem. Prefer `classNames.slide` to add classes without replacing this default. */
   slideClassName?: string;
   /** Wrap around at the ends. */
   loop?: boolean;
@@ -45,6 +59,7 @@ export function Carousel({
   showDots = true,
   showArrows = true,
   className,
+  classNames,
   ...props
 }: CarouselProps) {
   const slides = Children.toArray(children);
@@ -115,7 +130,11 @@ export function Carousel({
     <section
       aria-roledescription="carrusel"
       aria-label={label}
-      className={cn("@container/carousel flex min-w-0 flex-col gap-density", className)}
+      className={cn(
+        "@container/carousel flex min-w-0 flex-col gap-density",
+        classNames?.root,
+        className,
+      )}
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
       onFocus={() => setFocused(true)}
@@ -130,7 +149,10 @@ export function Carousel({
         aria-label={`${label}: usa las flechas para cambiar de diapositiva`}
         onScroll={syncIndex}
         onKeyDown={onKeyDown}
-        className="relative flex snap-x snap-mandatory gap-density overflow-x-auto scroll-smooth rounded-card outline-none [scrollbar-width:none] focus-visible:focus-ring motion-reduce:scroll-auto [&::-webkit-scrollbar]:hidden"
+        className={cn(
+          "relative flex snap-x snap-mandatory gap-density overflow-x-auto scroll-smooth rounded-card outline-none [scrollbar-width:none] focus-visible:focus-ring motion-reduce:scroll-auto [&::-webkit-scrollbar]:hidden",
+          classNames?.track,
+        )}
       >
         {slides.map((slide, i) => (
           // biome-ignore lint/a11y/useSemanticElements: slide of a carousel, not a form group
@@ -141,7 +163,7 @@ export function Carousel({
             role="group"
             aria-roledescription="diapositiva"
             aria-label={`${i + 1} de ${count}`}
-            className={cn("min-w-0 shrink-0 snap-start", slideClassName)}
+            className={cn("min-w-0 shrink-0 snap-start", slideClassName, classNames?.slide)}
           >
             {slide}
           </div>
@@ -149,7 +171,7 @@ export function Carousel({
       </section>
 
       {count > 1 && (showArrows || showDots || interval > 0) ? (
-        <div className="flex items-center justify-between gap-density">
+        <div className={cn("flex items-center justify-between gap-density", classNames?.controls)}>
           <div className="flex items-center gap-density-sm">
             {showArrows ? (
               <button
@@ -157,7 +179,7 @@ export function Carousel({
                 aria-label="Diapositiva anterior"
                 disabled={!loop && index === 0}
                 onClick={() => step(-1)}
-                className={iconButton}
+                className={cn(iconButton, classNames?.previous)}
               >
                 <ChevronLeft className="size-4" aria-hidden="true" />
               </button>
@@ -170,7 +192,7 @@ export function Carousel({
                 }
                 aria-pressed={userPaused}
                 onClick={() => setUserPaused((paused) => !paused)}
-                className={iconButton}
+                className={cn(iconButton, classNames?.playPause)}
               >
                 {userPaused ? (
                   <Play className="size-4" aria-hidden="true" />
@@ -181,7 +203,12 @@ export function Carousel({
             ) : null}
           </div>
           {showDots ? (
-            <div className="flex min-w-0 flex-wrap items-center justify-center gap-1.5">
+            <div
+              className={cn(
+                "flex min-w-0 flex-wrap items-center justify-center gap-1.5",
+                classNames?.dots,
+              )}
+            >
               {slides.map((_, i) => (
                 <button
                   // biome-ignore lint/suspicious/noArrayIndexKey: positional dots
@@ -193,6 +220,7 @@ export function Carousel({
                   className={cn(
                     "h-2 cursor-pointer rounded-badge transition-all duration-(--motion-duration) ease-style focus-visible:focus-ring",
                     i === index ? "w-5 bg-accent" : "w-2 bg-line-strong hover:bg-ink-3",
+                    classNames?.dot,
                   )}
                 />
               ))}
@@ -204,7 +232,7 @@ export function Carousel({
               aria-label="Diapositiva siguiente"
               disabled={!loop && index >= count - 1}
               onClick={() => step(1)}
-              className={iconButton}
+              className={cn(iconButton, classNames?.next)}
             >
               <ChevronRight className="size-4" aria-hidden="true" />
             </button>

package/src/containers/carousel/index.ts

@@ -1,2 +1,2 @@
-export { Carousel, type CarouselProps } from "./carousel.js";
+export { Carousel, type CarouselPart, type CarouselProps } from "./carousel.js";
 export { nearestIndex, stepIndex } from "./model.js";

package/src/containers/comment/comment.tsx

@@ -39,7 +39,7 @@ export function Comment({
       role="note"
       aria-label={label}
       className={cn(
-        "mx-4 mb-3.5 break-words rounded-control px-3 py-2.5 text-[12.5px]",
+        "mx-4 mb-3.5 break-words rounded-control px-3 py-2.5 text-fs-125",
         toneClasses[tone],
         className,
       )}

package/src/containers/confirm-action/confirm-action.tsx

@@ -3,10 +3,20 @@
 import { useEffect, useId, useRef, useState } from "react";
 import { Button, type ButtonVariant } from "../../atoms/button/button.js";
 import { useUiStrings } from "../../i18n/index.js";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 import { Banner } from "../banner/banner.js";
 import { type ConfirmResult, runConfirm } from "./model.js";
 
+export type ConfirmActionPart =
+  | "root"
+  | "trigger"
+  | "consequence"
+  | "error"
+  | "actions"
+  | "confirm"
+  | "cancel";
+
 export interface ConfirmActionProps {
   /** Trigger label, a verb in the user's words ("Cancel order"). */
   label: string;
@@ -19,6 +29,8 @@ export interface ConfirmActionProps {
   onConfirm: () => Promise<ConfirmResult> | Promise<void>;
   triggerVariant?: ButtonVariant;
   className?: string;
+  /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+  classNames?: ClassNames<ConfirmActionPart>;
 }
 
 /** Inline two-step confirmation for a destructive action; no modal, no lost context. */
@@ -30,6 +42,7 @@ export function ConfirmAction({
   onConfirm,
   triggerVariant = "secondary",
   className,
+  classNames,
 }: ConfirmActionProps) {
   const strings = useUiStrings();
   const consequenceId = useId();
@@ -55,9 +68,18 @@ export function ConfirmAction({
 
   if (!confirming) {
     return (
-      <div className={cn("flex flex-col gap-2", className)}>
-        {failure === null ? null : <Banner tone="danger">{failure}</Banner>}
-        <Button ref={triggerRef} variant={triggerVariant} onClick={() => setConfirming(true)}>
+      <div className={cn("flex flex-col gap-2", classNames?.root, className)}>
+        {failure === null ? null : (
+          <Banner tone="danger" className={classNames?.error}>
+            {failure}
+          </Banner>
+        )}
+        <Button
+          ref={triggerRef}
+          variant={triggerVariant}
+          className={classNames?.trigger}
+          onClick={() => setConfirming(true)}
+        >
           {label}
         </Button>
       </div>
@@ -67,23 +89,34 @@ export function ConfirmAction({
   return (
     <fieldset
       aria-describedby={consequenceId}
-      className={cn("m-0 flex min-w-0 flex-col gap-3 border-0 p-0", className)}
+      className={cn("m-0 flex min-w-0 flex-col gap-3 border-0 p-0", classNames?.root, className)}
     >
       <legend className="sr-only">{label}</legend>
-      <p id={consequenceId} className="text-body text-ink">
+      <p id={consequenceId} className={cn("text-body text-ink", classNames?.consequence)}>
         {consequence}
       </p>
-      {failure === null ? null : <Banner tone="danger">{failure}</Banner>}
-      <div className="flex flex-wrap gap-2">
+      {failure === null ? null : (
+        <Banner tone="danger" className={classNames?.error}>
+          {failure}
+        </Banner>
+      )}
+      <div className={cn("flex flex-wrap gap-2", classNames?.actions)}>
         <Button
           variant="danger"
+          className={classNames?.confirm}
           loading={busy}
           loadingLabel={strings.processing}
           onClick={() => void confirm()}
         >
           {confirmLabel ?? strings.confirm}
         </Button>
-        <Button variant="secondary" disabled={busy} autoFocus onClick={() => setConfirming(false)}>
+        <Button
+          variant="secondary"
+          className={classNames?.cancel}
+          disabled={busy}
+          autoFocus
+          onClick={() => setConfirming(false)}
+        >
           {cancelLabel ?? strings.cancel}
         </Button>
       </div>

package/src/containers/data-grid/chart-panel.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { BarChart2, X } from "lucide-react";
 import { useMemo } from "react";
 import { AreaChart } from "../../charts/area-chart/area-chart.js";
 import { BarChart } from "../../charts/bar-chart/bar-chart.js";
 import type { ValueFormat } from "../../charts/core/format.js";
 import { LineChart } from "../../charts/line-chart/line-chart.js";
 import { PieChart } from "../../charts/pie-chart/pie-chart.js";
+import { BarChart2, X } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import {
   availableKinds,
@@ -38,7 +38,7 @@ export interface ChartPanelProps {
 }
 
 const buttonClass =
-  "inline-flex h-7 items-center rounded-xs px-2 font-[600] text-[12px] text-ink-3 hover:text-ink aria-pressed:bg-accent-soft aria-pressed:text-accent-ink";
+  "inline-flex h-7 items-center rounded-xs px-2 font-[600] text-fs-120 text-ink-3 hover:text-ink aria-pressed:bg-accent-soft aria-pressed:text-accent-ink";
 
 /** Chart drawn from a range of grid cells: bars, lines, areas or a pie. Loaded on demand by the grid. */
 export function ChartPanel({
@@ -65,7 +65,7 @@ export function ChartPanel({
     >
       <header className="flex flex-wrap items-center gap-2 px-3 pt-2">
         <BarChart2 aria-hidden="true" className="size-4 shrink-0 text-ink-3" />
-        <h3 className="mr-auto min-w-0 truncate font-[650] text-[13px] text-ink">{labels.title}</h3>
+        <h3 className="mr-auto min-w-0 truncate font-[650] text-fs-130 text-ink">{labels.title}</h3>
         {data ? (
           <fieldset className="flex h-control-sm items-center rounded-control border-divider bg-surface-control p-0.5">
             <legend className="sr-only">{labels.kindGroup}</legend>
@@ -134,7 +134,7 @@ export function ChartPanel({
           )}
         </div>
       ) : (
-        <p className="px-3 py-6 text-center text-[13px] text-ink-3">{labels.noData}</p>
+        <p className="px-3 py-6 text-center text-fs-130 text-ink-3">{labels.noData}</p>
       )}
     </section>
   );

package/src/containers/data-grid/column-menu.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { type ReactNode, useId, useState } from "react";
 import {
   ArrowDown,
   ArrowLeft,
@@ -10,15 +11,14 @@ import {
   EllipsisVertical,
   EyeOff,
   Filter,
+  type IconComponent,
   Layers,
-  type LucideIcon,
   Minus,
   MoveHorizontal,
   PinOff,
   Plus,
   X,
-} from "lucide-react";
-import { type ReactNode, useId, useState } from "react";
+} from "../../icons/index.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../overlays/popover/popover.js";
 import { cn } from "../../utils/cn.js";
 import type { DataGridLabels } from "./labels.js";
@@ -57,10 +57,10 @@ export interface ColumnMenuProps<T> {
 }
 
 const itemClass =
-  "flex min-h-8 w-full items-center gap-2 rounded-xs px-2 text-left text-[13px] text-ink-2 hover:bg-surface-2 hover:text-ink focus-visible:bg-surface-2 focus-visible:text-ink disabled:pointer-events-none disabled:opacity-40 aria-pressed:text-accent-ink [&_svg]:size-3.5 [&_svg]:shrink-0";
+  "flex min-h-8 w-full items-center gap-2 rounded-xs px-2 text-left text-fs-130 text-ink-2 hover:bg-surface-2 hover:text-ink focus-visible:bg-surface-2 focus-visible:text-ink disabled:pointer-events-none disabled:opacity-40 aria-pressed:text-accent-ink [&_svg]:size-3.5 [&_svg]:shrink-0";
 
 const inputClass =
-  "h-control-sm w-full min-w-0 rounded-input border-control bg-surface-control px-2 text-[13px] text-ink placeholder:text-ink-3 focus-visible:border-accent focus-visible:outline-none";
+  "h-control-sm w-full min-w-0 rounded-input border-control bg-surface-control px-2 text-fs-130 text-ink placeholder:text-ink-3 focus-visible:border-accent focus-visible:outline-none";
 
 function Item({
   icon: Icon,
@@ -68,7 +68,7 @@ function Item({
   pressed,
   ...props
 }: {
-  icon: LucideIcon;
+  icon: IconComponent;
   children: ReactNode;
   pressed?: boolean;
   onClick: () => void;
@@ -86,7 +86,7 @@ function Section({ children, label }: { children: ReactNode; label?: string }) {
   return (
     <div className="border-t-divider py-1 first:border-t-0 first:pt-0 last:pb-0">
       {label ? (
-        <p className="px-2 pt-1 pb-1.5 font-[650] text-[11px] text-ink-3 uppercase tracking-[.07em]">
+        <p className="px-2 pt-1 pb-1.5 font-[650] text-fs-110 text-ink-3 uppercase tracking-[.07em]">
           {label}
         </p>
       ) : null}
@@ -127,7 +127,7 @@ function SetFilterEditor<T>({
       />
       <fieldset className="grid max-h-48 gap-0.5 overflow-y-auto">
         <legend className="sr-only">{`${labels.filter}: ${column.header}`}</legend>
-        <label className="flex min-h-7 items-center gap-2 border-b-divider px-1 text-[13px] text-ink-2">
+        <label className="flex min-h-7 items-center gap-2 border-b-divider px-1 text-fs-130 text-ink-2">
           <input
             type="checkbox"
             className="size-4 accent-accent"
@@ -139,18 +139,18 @@ function SetFilterEditor<T>({
             onChange={() => onFilter(toggleSetValues(options, filter, visible, !allVisible))}
           />
           <span className="flex-1">{labels.selectAllValues}</span>
-          <span className="text-[11px] text-ink-3 tabular-nums">
+          <span className="text-fs-110 text-ink-3 tabular-nums">
             {labels.valuesChecked(checked.size, options.length)}
           </span>
         </label>
         {visible.length === 0 ? (
-          <p className="px-1 py-1.5 text-[13px] text-ink-3">{labels.noMatches}</p>
+          <p className="px-1 py-1.5 text-fs-130 text-ink-3">{labels.noMatches}</p>
         ) : null}
         {visible.map((value, index) => (
           <label
             key={value}
             htmlFor={`${id}-${index}`}
-            className="flex min-h-7 items-center gap-2 px-1 text-[13px] text-ink"
+            className="flex min-h-7 items-center gap-2 px-1 text-fs-130 text-ink"
           >
             <input
               id={`${id}-${index}`}
@@ -222,7 +222,7 @@ function FilterEditor<T>({
       <div className="grid gap-1.5">
         {(["from", "to"] as const).map((end) => (
           <label key={end} className="grid grid-cols-[3.5rem_1fr] items-center gap-1.5">
-            <span className="text-[12px] text-ink-3">{labels[end]}</span>
+            <span className="text-fs-120 text-ink-3">{labels[end]}</span>
             <input
               type="date"
               value={range[end] ?? ""}
@@ -258,7 +258,7 @@ function FilterEditor<T>({
   return (
     <fieldset className="grid max-h-48 gap-0.5 overflow-y-auto">
       <legend className="sr-only">{`${labels.filter}: ${name}`}</legend>
-      <label className="flex min-h-7 items-center gap-2 px-1 text-[13px] text-ink-2">
+      <label className="flex min-h-7 items-center gap-2 px-1 text-fs-130 text-ink-2">
         <input
           type="checkbox"
           className="size-4 accent-accent"
@@ -271,7 +271,7 @@ function FilterEditor<T>({
         <label
           key={value}
           htmlFor={`${id}-${index}`}
-          className="flex min-h-7 items-center gap-2 px-1 text-[13px] text-ink"
+          className="flex min-h-7 items-center gap-2 px-1 text-fs-130 text-ink"
         >
           <input
             id={`${id}-${index}`}

package/src/containers/data-grid/data-grid.demos.tsx

@@ -30,7 +30,7 @@ export type DemoControls = Pick<
   "density" | "selectable" | "loading" | "hideToolbar" | "height"
 >;
 
-const note = "text-[12.5px] text-ink-3";
+const note = "text-fs-125 text-ink-3";
 
 function Stack({ children }: { children: ReactNode }) {
   return <div className="grid gap-2">{children}</div>;
@@ -131,7 +131,7 @@ export function ExpansionDemo({ density, height }: DemoControls) {
       detailHeight={116}
       defaultExpandedRowIds={["V-1002"]}
       renderDetail={(row) => (
-        <dl className="grid gap-x-6 gap-y-2 text-[13px] @sm/grid:grid-cols-3">
+        <dl className="grid gap-x-6 gap-y-2 text-fs-130 @sm/grid:grid-cols-3">
           {(
             [
               ["Cliente", row.cliente],
@@ -143,7 +143,7 @@ export function ExpansionDemo({ density, height }: DemoControls) {
             ] as const
           ).map(([term, value]) => (
             <div key={term} className="min-w-0">
-              <dt className="text-[11px] text-ink-3 uppercase tracking-[.07em]">{term}</dt>
+              <dt className="text-fs-110 text-ink-3 uppercase tracking-[.07em]">{term}</dt>
               <dd className="truncate font-[600] text-ink">{value}</dd>
             </div>
           ))}
@@ -231,7 +231,7 @@ function PersistenceGrid({ density, height, onReset }: DemoControls & { onReset:
           <button
             type="button"
             onClick={reset}
-            className="inline-flex h-control-sm items-center rounded-control border-divider bg-surface-control px-2.5 font-[600] text-[12.5px] text-ink-2 hover:border-line-strong hover:text-ink"
+            className="inline-flex h-control-sm items-center rounded-control border-divider bg-surface-control px-2.5 font-[600] text-fs-125 text-ink-2 hover:border-line-strong hover:text-ink"
           >
             Restablecer todo
           </button>
@@ -287,7 +287,7 @@ export function KeyboardDemo({ density }: DemoControls) {
           defaultPinned={{ left: ["producto"] }}
           detailHeight={72}
           renderDetail={(row) => (
-            <p className="text-[13px] text-ink-2">
+            <p className="text-fs-130 text-ink-2">
               {row.producto}: {row.stock} en {row.ubicacion}, proveedor {row.proveedor}.
             </p>
           )}
@@ -305,16 +305,16 @@ export function KeyboardDemo({ density }: DemoControls) {
           }
         />
       </div>
-      <p className="text-[13px] text-ink" aria-live="polite">
+      <p className="text-fs-130 text-ink" aria-live="polite">
         Celda activa: <b className="font-[650]">{where}</b>
       </p>
-      <table className="w-full border-collapse text-left text-[12.5px]">
+      <table className="w-full border-collapse text-left text-fs-125">
         <caption className="sr-only">Atajos de teclado</caption>
         <tbody>
           {SHORTCUTS.map(([keys, action]) => (
             <tr key={keys} className="border-t-divider">
               <th scope="row" className="w-1/2 py-1.5 pr-3 font-[600] text-ink">
-                <kbd className="font-mono text-[12px]">{keys}</kbd>
+                <kbd className="font-mono text-fs-120">{keys}</kbd>
               </th>
               <td className="py-1.5 text-ink-2">{action}</td>
             </tr>
@@ -343,7 +343,7 @@ export function TreeDemo({ density, height }: DemoControls) {
 
 function RequestLog({ entries, label }: { entries: ServerLogEntry[]; label: string }) {
   return (
-    <div className="rounded-card border-card shadow-card p-2 text-[12px] text-ink-2">
+    <div className="rounded-card border-card shadow-card p-2 text-fs-120 text-ink-2">
       <p className="font-[650] text-ink">
         {label}: {entries.length}
       </p>
@@ -388,7 +388,7 @@ export function RemotePaginationDemo({ density, height }: DemoControls) {
         pageSize={20}
         defaultPinned={{ left: ["id"] }}
       />
-      <label className="flex items-center gap-2 text-[13px] text-ink">
+      <label className="flex items-center gap-2 text-fs-130 text-ink">
         <input
           type="checkbox"
           className="size-4 accent-accent"
@@ -429,7 +429,7 @@ export function InfiniteScrollDemo({ density, height }: DemoControls) {
         maxBlocks={12}
         defaultPinned={{ left: ["id"] }}
       />
-      <label className="flex items-center gap-2 text-[13px] text-ink">
+      <label className="flex items-center gap-2 text-fs-130 text-ink">
         <input
           type="checkbox"
           className="size-4 accent-accent"
@@ -487,7 +487,7 @@ export function FilterBuilderDemo({ density, height }: DemoControls) {
             return column ? distinctValues(ventas, column) : [];
           }}
         />
-        <p className="mt-3 border-t-divider pt-2 text-[12.5px] text-ink-3">
+        <p className="mt-3 border-t-divider pt-2 text-fs-125 text-ink-3">
           {text ? `Filtro: ${text}` : "Sin filtro activo."}{" "}
           <button
             type="button"
@@ -556,7 +556,7 @@ export function ExportDemo({ density, height }: DemoControls) {
         defaultPinned={{ left: ["id"] }}
       />
       <div
-        className="rounded-card border-card shadow-card p-2 text-[12px] text-ink-2"
+        className="rounded-card border-card shadow-card p-2 text-fs-120 text-ink-2"
         aria-live="polite"
       >
         {last ? (

package/src/containers/data-grid/data-grid.samples.tsx

@@ -92,7 +92,7 @@ export const catalogoColumns: DataGridColumn<ServicioCatalogo>[] = [
               style={{ width: `${percent}%` }}
             />
           </span>
-          <span className="w-8 text-right text-[12px] text-ink-2 tabular-nums">{percent}%</span>
+          <span className="w-8 text-right text-fs-120 text-ink-2 tabular-nums">{percent}%</span>
         </span>
       );
     },