@flamingo-stack/openframe-frontend-core 0.0.439-snapshot.20260717095442 → 0.0.439

package/src/components/accordion.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "../utils/cn"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = "AccordionTrigger"
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(
+      "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      className,
+    )}
+    {...props}
+  >
+    <div className="pb-4 pt-0">{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = "AccordionContent"
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/src/components/alert-dialog.tsx

@@ -0,0 +1,141 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "../utils/cn"
+import { buttonVariants } from "./ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/2 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/2 md:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center md:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse md:flex-row md:justify-end md:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 md:mt-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

package/src/components/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../utils/cn"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }

package/src/components/announcement-bar.tsx

@@ -223,7 +223,7 @@ export function AnnouncementBar({
             {/* Single-line message: bold title + regular description inline,
                 truncating as one unit. Separator is a middot (house rule: no
                 en/em dashes in copy). */}
-            <p className="flex-1 min-w-0 max-w-full text-h6 truncate mb-0">
+            <p className="font-body flex-1 min-w-0 max-w-full text-[13px] md:text-sm leading-snug truncate mb-0">
               <span className="font-semibold">{displayAnnouncement.title}</span>
               {displayAnnouncement.description && (
                 <span className="hidden sm:inline opacity-80"> · {displayAnnouncement.description}</span>

package/src/components/authors/author-detail-view.tsx

@@ -70,7 +70,7 @@ export function AuthorDetailView({
       {/* Identity header: avatar left; name → subtitle → socials stacked right. */}
       <div className="flex gap-6 w-full items-start">
         <div className="relative shrink-0 h-24 w-24">
-          <div className="rounded-full overflow-hidden bg-ods-bg-surface border border-ods-border w-full h-full relative">
+          <div className="rounded-full overflow-hidden bg-ods-bg-secondary border border-ods-border w-full h-full relative">
             {proxiedAvatar ? (
               <Image
                 src={proxiedAvatar}
@@ -80,7 +80,7 @@ export function AuthorDetailView({
                 unoptimized
               />
             ) : (
-              <div className="flex items-center justify-center h-full w-full text-3xl text-ods-text-secondary font-heading">
+              <div className="flex items-center justify-center h-full w-full text-3xl text-ods-text-secondary font-['Azeret_Mono']">
                 {author.fullName.charAt(0).toUpperCase()}
               </div>
             )}
@@ -111,7 +111,7 @@ export function AuthorDetailView({
       </div>
 
       {bioText && (
-        <p className="text-h6 text-ods-text-secondary">
+        <p className="font-body text-base leading-relaxed text-ods-text-secondary">
           {bioText}
         </p>
       )}

package/src/components/badge.tsx

@@ -0,0 +1,30 @@
+import type * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../utils/cn"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+        success: "border-transparent bg-green-500 text-white hover:bg-green-600", // Add this line
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
+}
+
+export { Badge, badgeVariants }

package/src/components/breadcrumb.tsx

@@ -0,0 +1,115 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "../utils/cn"
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+Breadcrumb.displayName = "Breadcrumb"
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground md:gap-2.5",
+      className
+    )}
+    {...props}
+  />
+))
+BreadcrumbList.displayName = "BreadcrumbList"
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props}
+  />
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  )
+})
+BreadcrumbLink.displayName = "BreadcrumbLink"
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("font-normal text-foreground", className)}
+    {...props}
+  />
+))
+BreadcrumbPage.displayName = "BreadcrumbPage"
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
+    {...props}
+  >
+    {children ?? <ChevronRight />}
+  </li>
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

package/src/components/calendar.tsx

@@ -23,7 +23,7 @@ function Calendar({
         months: "flex flex-col md:flex-row space-y-4 md:space-x-4 md:space-y-0",
         month: "space-y-4",
         caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-h6",
+        caption_label: "text-sm font-medium",
         nav: "space-x-1 flex items-center",
         nav_button: cn(
           buttonVariants({ variant: "outline" }),
@@ -34,7 +34,7 @@ function Calendar({
         table: "w-full border-collapse space-y-1",
         head_row: "flex",
         head_cell:
-          "text-muted-foreground rounded-md w-9 text-h6",
+          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
         row: "flex w-full mt-2",
         cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
         day: cn(

package/src/components/case-studies/share-experience-section.tsx

@@ -120,7 +120,7 @@ export function ShareExperienceSection({
         <p className="text-h4 mt-6 max-w-[765px]">{subtitle}</p>
       </div>
 
-      <div className="bg-ods-bg border border-ods-border rounded-md p-10">
+      <div className="bg-ods-background border border-ods-border rounded-md p-10">
         <div className="flex flex-col gap-10">
           <div className="flex flex-col gap-6 text-ods-text-primary">
             <h3 className="text-h2">{howItWorksTitle}</h3>
@@ -130,7 +130,7 @@ export function ShareExperienceSection({
           <BenefitCardGrid columns={4}>
             <BenefitCard
               icon={
-                <div className="bg-ods-bg border border-ods-border rounded-md p-2 w-12 h-12 flex items-center justify-center">
+                <div className="bg-ods-background border border-ods-border rounded-md p-2 w-12 h-12 flex items-center justify-center">
                   <G2Icon width={24} height={24} />
                 </div>
               }
@@ -140,7 +140,7 @@ export function ShareExperienceSection({
             />
             <BenefitCard
               icon={
-                <div className="bg-ods-bg border border-ods-border rounded-md p-2 w-12 h-12 flex items-center justify-center">
+                <div className="bg-ods-background border border-ods-border rounded-md p-2 w-12 h-12 flex items-center justify-center">
                   <CapterraIcon width={24} height={24} />
                 </div>
               }
@@ -150,7 +150,7 @@ export function ShareExperienceSection({
             />
             <BenefitCard
               icon={
-                <div className="bg-ods-bg border border-ods-border rounded-md p-2 w-12 h-12 flex items-center justify-center">
+                <div className="bg-ods-background border border-ods-border rounded-md p-2 w-12 h-12 flex items-center justify-center">
                   <TrustpilotIcon width={24} height={24} />
                 </div>
               }
@@ -160,7 +160,7 @@ export function ShareExperienceSection({
             />
             <BenefitCard
               icon={
-                <div className="bg-ods-bg border border-ods-border rounded-md p-2 w-12 h-12 flex items-center justify-center">
+                <div className="bg-ods-background border border-ods-border rounded-md p-2 w-12 h-12 flex items-center justify-center">
                   <GetAppIcon width={24} height={24} />
                 </div>
               }

package/src/components/categories-cart.tsx

@@ -19,7 +19,7 @@ export function CategoriesCart({
   return (
     <Link
       href={`/vendors?category=${category.slug}`}
-      className={`block bg-ods-card border border-ods-border rounded-lg p-3 md:p-4 pb-4 md:pb-6 hover:border-ods-accent transition-colors group relative ${className}`}
+      className={`block bg-ods-card border border-ods-border rounded-lg p-3 md:p-4 pb-4 md:pb-6 hover:border-[#FFC008] transition-colors group relative ${className}`}
     >
       <div className="flex flex-col gap-4 md:gap-6">
         {/* Vendor Icons Grid */}
@@ -49,7 +49,7 @@ export function CategoriesCart({
                   key={index}
                   className="w-8 h-8 md:w-10 md:h-10 bg-ods-border rounded flex items-center justify-center opacity-30 flex-shrink-0"
                 >
-                  <div className="w-4 h-4 md:w-6 md:h-6 bg-ods-skeleton rounded-sm" />
+                  <div className="w-4 h-4 md:w-6 md:h-6 bg-[#888888] rounded-sm" />
                 </div>
               ))
             )}
@@ -66,22 +66,22 @@ export function CategoriesCart({
             <h3 className="text-xl md:text-2xl font-bold text-ods-text-primary group-hover:text-ods-accent transition-colors leading-[1.33] font-body">
               {category.name}
             </h3>
-            <p className="text-h6 text-ods-text-secondary">
+            <p className="text-sm md:text-base font-medium text-ods-text-secondary leading-[1.43] font-body">
               {subcategoryCount || 0} Subcategories • {vendorCount || 0} Products
             </p>
           </div>
 
           <div className="flex items-start md:items-end justify-between gap-4 md:gap-6">
-            <p className="text-h4 text-ods-text-primary flex-1">
+            <p className="font-['DM_Sans'] font-medium text-lg leading-[1.33] text-ods-text-primary flex-1">
               {category.description}
             </p>
 
             {/* Arrow Button */}
             <div
-              className="flex items-center justify-center w-10 h-10 md:w-12 md:h-12 bg-transparent border border-ods-border rounded-md group-hover:bg-ods-accent transition-colors flex-shrink-0"
+              className="flex items-center justify-center w-10 h-10 md:w-12 md:h-12 bg-transparent border border-ods-border rounded-md group-hover:bg-[#FFC008] transition-colors flex-shrink-0"
               aria-label={`View ${category.name} category`}
             > 
-              <ChevronRight className="w-5 h-5 md:w-6 md:h-6 text-ods-text-primary group-hover:text-ods-text-on-accent transition-colors" />
+              <ChevronRight className="w-5 h-5 md:w-6 md:h-6 text-ods-text-primary group-hover:text-black transition-colors" />
             </div>
           </div>
         </div>

package/src/components/category-card.tsx

@@ -12,23 +12,23 @@ interface CategoryCardProps {
 
 export function CategoryCard({ name, description, categoryCount, productCount, icons = [] }: CategoryCardProps) {
   return (
-    <article className="bg-ods-card border border-ods-border rounded-[12px] p-8 flex flex-col min-w-0 box-border">
+    <article className="bg-[#1A1A1A] border border-[#424242] rounded-[12px] p-8 flex flex-col min-w-0 box-border">
       <div className="flex gap-6 mb-8 justify-center items-center">
         {(icons.length > 0 ? icons : Array(10).fill(null)).map((icon, i) => (
-          <div key={i} className="w-10 h-10 bg-ods-skeleton rounded flex items-center justify-center">
+          <div key={i} className="w-10 h-10 bg-gray-700 rounded flex items-center justify-center">
             {icon}
           </div>
         ))}
       </div>
       <div className="flex-1 flex flex-col">
         <h2 className="text-[24px] font-bold text-ods-text-primary mb-2 text-left leading-tight">{name}</h2>
-        <div className="text-h6 text-ods-text-secondary mb-4 text-left">
+        <div className="text-[16px] text-ods-text-secondary mb-4 text-left">
           {categoryCount} Categories • {productCount} Products
         </div>
         <div className="flex flex-row items-start">
-          <p className="text-h6 text-ods-text-primary text-left flex-1">{description}</p>
+          <p className="text-[16px] text-ods-text-primary text-left leading-snug flex-1">{description}</p>
           <button
-            className="w-12 h-12 flex items-center justify-center border border-ods-border rounded-[6px] bg-transparent hover:bg-ods-accent transition-colors ml-4"
+            className="w-12 h-12 flex items-center justify-center border border-ods-border rounded-[6px] bg-transparent hover:bg-[#FFC008] transition-colors ml-4"
             style={{ minWidth: 48, minHeight: 48 }}
             aria-label={`View ${name}`}
           >

package/src/components/chart.tsx

@@ -52,7 +52,7 @@ const ChartContainer = React.forwardRef<
         data-chart={chartId}
         ref={ref}
         className={cn(
-          "flex aspect-video justify-center text-h6 [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
           className
         )}
         {...props}
@@ -178,7 +178,7 @@ const ChartTooltipContent = React.forwardRef<
       <div
         ref={ref}
         className={cn(
-          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-h6 shadow-xl",
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
           className
         )}
       >
@@ -238,7 +238,7 @@ const ChartTooltipContent = React.forwardRef<
                         </span>
                       </div>
                       {item.value && (
-                        <span className="text-code tabular-nums text-foreground">
+                        <span className="font-mono font-medium tabular-nums text-foreground">
                           {item.value.toLocaleString()}
                         </span>
                       )}

package/src/components/chat/approval-request-message.tsx

@@ -22,7 +22,10 @@ function ApprovalFieldList({ fields }: { fields: ApprovalRequestField[] }) {
     <dl className="flex flex-col gap-2.5 mt-[var(--spacing-system-xxs)]">
       {fields.map((f, i) => (
         <div key={i} className="flex flex-col gap-0.5">
-          <dt className="text-h6 font-semibold uppercase text-ods-text-tertiary">
+          {/* NOTE: 11px DM Sans small-caps label has no ODS composite token
+              (h5 is Azeret Mono, h6 is 14px) — flagged for a future caption
+              token; kept as-is rather than forcing a mismatched h-class. */}
+          <dt className="font-['DM_Sans'] font-semibold text-[11px] uppercase tracking-wide text-ods-text-tertiary leading-4">
             {f.label}
           </dt>
           <dd className="text-h6 text-ods-text-primary whitespace-pre-wrap break-words">
@@ -52,7 +55,7 @@ function ApprovalCardBody({
   return (
     <div className="flex flex-col gap-[var(--spacing-system-xxs)]">
       <div className="bg-ods-bg border border-ods-border rounded-md p-[var(--spacing-system-sf)] flex gap-[var(--spacing-system-xsf)] items-start max-h-32 overflow-y-auto">
-        <code className="text-code text-ods-text-primary flex-1 whitespace-pre-wrap break-words">
+        <code className="text-h6 text-ods-text-primary flex-1 whitespace-pre-wrap break-words">
           {data.command}
         </code>
         {data.icon && (

package/src/components/chat/chat-attachment-bar.tsx

@@ -288,18 +288,18 @@ function AttachmentChip({ attachment, onRemove, disabled, size = 'default' }: At
 
       {/* Filename + status */}
       <div className="min-w-0 flex-1">
-        <div className="truncate text-ods-text-primary text-h6" title={file.name}>
+        <div className={cn('truncate text-ods-text-primary', compact ? 'text-[11px] leading-tight' : 'text-xs')} title={file.name}>
           {file.name}
         </div>
         {/* Compact mode hides the size/status sub-line for ready files to keep the
             chip to a single line; uploading/error states still surface. */}
         {(!compact || status !== 'ready') && (
-          <div className="text-ods-text-muted text-h6">
+          <div className={cn('text-ods-text-muted', compact ? 'text-[9px] leading-tight' : 'text-[10px]')}>
             {status === 'sniffing' && 'Checking…'}
             {status === 'uploading' && `${progress}% · ${formatFileSize(file.size)}`}
             {status === 'ready' && formatFileSize(file.size)}
             {status === 'error' && (
-              <span className="text-ods-error" title={errorMessage}>
+              <span className="text-ods-attention-red-error" title={errorMessage}>
                 {errorMessage ?? 'Upload failed'}
               </span>
             )}

package/src/components/chat/chat-message-enhanced.tsx

@@ -478,7 +478,7 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
               {name || (isUser ? "User" : assistantType === 'mingo' ? "Mingo" : "Fae")}{!isSystem && ':'}
             </span>
             {timestamp && (
-              <span className="text-h6 text-ods-text-secondary shrink-0 whitespace-nowrap">
+              <span className="font-sans text-heading-5 font-medium text-ods-text-secondary shrink-0 whitespace-nowrap">
                 {formatMessageTimestamp(timestamp)}
               </span>
             )}