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

package/src/components/smooth-accordion.tsx

@@ -47,7 +47,7 @@ export const SmoothAccordionTrigger = React.forwardRef<
         size="md"
         isExpanded={false}
         backgroundColor="transparent"
-        borderColor="var(--color-border-default)"
+        borderColor="#3A3A3A"
         className="transition-transform duration-300 ease-in-out group-data-[state=open]:rotate-180"
       />
     </AccordionPrimitive.Trigger>

package/src/components/social-icon-row.tsx

@@ -86,7 +86,7 @@ function renderSocialIcon(platform: string) {
       // force the themed foreground via the ODS token (white on the dark
       // theme, tracking the theme unlike the literal the reddit/slack cases
       // still carry).
-      return <CopyIcon className="w-5 h-5" color="var(--color-text-primary)" />;
+      return <CopyIcon className="w-5 h-5" color="var(--ods-text-primary)" />;
     default:
       return <GlobeIcon className="w-5 h-5" />;
   }

package/src/components/sonner.tsx

@@ -13,14 +13,14 @@ const Toaster = ({ ...props }: ToasterProps) => {
       toastOptions={{
         classNames: {
           toast:
-            "group toast group-[.toaster]:bg-ods-card group-[.toaster]:text-ods-text-primary group-[.toaster]:border-ods-border group-[.toaster]:shadow-lg",
+            "group toast group-[.toaster]:bg-ods-background-secondary group-[.toaster]:text-ods-text-primary group-[.toaster]:border-ods-border group-[.toaster]:shadow-lg",
           description: "group-[.toast]:text-ods-text-secondary",
           actionButton:
-            "group-[.toast]:bg-ods-accent group-[.toast]:text-ods-text-on-accent",
+            "group-[.toast]:bg-ods-accent group-[.toast]:text-ods-text-inverted",
           cancelButton:
-            "group-[.toast]:bg-ods-bg-surface group-[.toast]:text-ods-text-secondary",
-          error: "group-[.toaster]:bg-ods-error-secondary group-[.toaster]:text-ods-text-primary group-[.toaster]:border-ods-error",
-          success: "group-[.toaster]:bg-ods-success-secondary group-[.toaster]:text-ods-text-primary group-[.toaster]:border-ods-success",
+            "group-[.toast]:bg-ods-background-tertiary group-[.toast]:text-ods-text-secondary",
+          error: "group-[.toaster]:bg-red-950 group-[.toaster]:text-red-50 group-[.toaster]:border-red-900",
+          success: "group-[.toaster]:bg-green-950 group-[.toaster]:text-green-50 group-[.toaster]:border-green-900",
         },
       }}
       {...props}

package/src/components/square-avatar.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import React from 'react';
+import { cn } from "../utils/cn";
+import { getProxiedImageUrl } from '../utils/image-proxy';
+
+interface SquareAvatarProps {
+  /** Image URL (if null/undefined, renders initials fallback) */
+  src?: string | null;
+  /** Fallback name used to derive initials when no image */
+  fallbackName?: string;
+  /** Size in px (applied to width & height). Defaults to 56 (Tailwind w-14 h-14). */
+  size?: number;
+  /** If true, avatar takes full width with square aspect ratio */
+  fullWidth?: boolean;
+  /** Corner treatment. `'square'` = rounded-lg (default, historical look); `'round'` = fully circular. */
+  shape?: 'square' | 'round';
+  className?: string;
+}
+
+/**
+ * Square avatar with rounded edges used across cards / dashboards.
+ * Automatically shows image (via proxied URL) or initials fallback.
+ */
+export function SquareAvatar({ src, fallbackName = '', size = 56, fullWidth = false, shape = 'square', className }: SquareAvatarProps) {
+  const initials = React.useMemo(() => {
+    if (!fallbackName) return '';
+    return fallbackName
+      .split(' ')
+      .map((n) => n.charAt(0))
+      .join('')
+      .slice(0, 2)
+      .toUpperCase();
+  }, [fallbackName]);
+
+  const style: React.CSSProperties = fullWidth ? {} : { width: size, height: size };
+
+  return (
+    <div
+      className={cn(
+        'border border-ods-border flex items-center justify-center overflow-hidden bg-ods-bg-secondary',
+        shape === 'round' ? 'rounded-full' : 'rounded-lg',
+        fullWidth ? 'w-full aspect-square' : 'flex-shrink-0',
+        className,
+      )}
+      style={style}
+    >
+      {src ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img src={getProxiedImageUrl(src) || src} alt="Avatar" className="object-cover w-full h-full" />
+      ) : (
+        <span className={cn(
+          "font-['DM_Sans'] text-ods-text-primary font-bold",
+          fullWidth ? 'text-4xl' : 'text-lg'
+        )}>
+          {initials}
+        </span>
+      )}
+    </div>
+  );
+} 

package/src/components/steps.tsx

@@ -65,7 +65,7 @@ const Step = React.forwardRef<HTMLDivElement, StepProps>(
               <polyline points="20 6 9 17 4 12" />
             </svg>
           ) : (
-            <span className={cn("text-h6", isActive ? "text-primary" : "text-muted-foreground")}>
+            <span className={cn("text-sm font-medium", isActive ? "text-primary" : "text-muted-foreground")}>
               {stepNumber}
             </span>
           )}
@@ -75,7 +75,7 @@ const Step = React.forwardRef<HTMLDivElement, StepProps>(
         <div className="flex flex-col gap-0.5">
           <h3
             className={cn(
-              "text-h6",
+              "text-base font-medium",
               isActive ? "text-foreground" : "text-muted-foreground",
               isCompleted && "text-primary",
             )}
@@ -83,7 +83,7 @@ const Step = React.forwardRef<HTMLDivElement, StepProps>(
             {title}
           </h3>
           {description && (
-            <p className={cn("text-h6", isActive ? "text-muted-foreground" : "text-muted-foreground/60")}>
+            <p className={cn("text-sm", isActive ? "text-muted-foreground" : "text-muted-foreground/60")}>
               {description}
             </p>
           )}

package/src/components/table.tsx

@@ -0,0 +1,72 @@
+import * as React from "react"
+
+import { cn } from "../utils/cn"
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+      <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
+    </div>
+  ),
+)
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />,
+)
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+  ),
+)
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tfoot ref={ref} className={cn("bg-primary font-medium text-primary-foreground", className)} {...props} />
+  ),
+)
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className)}
+      {...props}
+    />
+  ),
+)
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <th
+      ref={ref}
+      className={cn(
+        "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <td ref={ref} className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)} {...props} />
+  ),
+)
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
+  ({ className, ...props }, ref) => (
+    <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+  ),
+)
+TableCaption.displayName = "TableCaption"
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }

package/src/components/tabs.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "../utils/cn"
+
+/**
+ * @deprecated Use `TabNavigation` from `components/ui/tab-navigation` — the
+ * single canonical tab component (ODS tokens, URL-sync, overflow scroll
+ * shadows). This Radix-based `Tabs` set styles itself with legacy shadcn tokens
+ * (`bg-muted`, `text-foreground`, `ring-ring`) that don't exist in ODS and is
+ * kept only for un-migrated call sites. Do not use in new code.
+ */
+const Tabs = TabsPrimitive.Root
+
+/** @deprecated Use `TabNavigation` from `components/ui/tab-navigation`. See {@link Tabs}. */
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+/** @deprecated Use `TabNavigation` from `components/ui/tab-navigation`. See {@link Tabs}. */
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+/** @deprecated Use `TabNavigation` from `components/ui/tab-navigation`. See {@link Tabs}. */
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

package/src/components/tickets/help-center-create-form.tsx

@@ -195,7 +195,7 @@ export function HelpCenterCreateForm({
       {subjectError && (
         <span
           id="help-center-subject-error"
-          className="text-ods-error text-h6 mt-1"
+          className="text-ods-error text-xs font-['DM_Sans'] mt-1"
         >
           {subjectError}
         </span>

package/src/components/tickets/help-center-list.tsx

@@ -319,7 +319,7 @@ function HelpCenterListAuthed({
     <div className="w-full flex flex-col gap-[40px]">
       {error && (
         <div className="bg-ods-card border border-ods-border rounded-[6px] p-[40px] text-center w-full flex flex-col items-center gap-3">
-          <p className="text-ods-error text-h6">
+          <p className="text-ods-error text-base">
             Couldn&rsquo;t load your tickets. {error.message}
           </p>
           <Button type="button" variant="accent" onClick={() => refetch()}>

package/src/components/tickets/ticket-center.tsx

@@ -134,10 +134,10 @@ function TicketCenterAuthed({
 
       <div className="flex flex-col gap-2">
         <div className="flex items-center justify-between gap-3">
-          <p className="text-h5 text-ods-text-secondary">
+          <p className="text-xs font-medium text-ods-text-secondary uppercase tracking-wider">
             Your Current Tickets
           </p>
-          <div className="flex items-center gap-3 text-h6 text-ods-text-secondary">
+          <div className="flex items-center gap-3 text-xs text-ods-text-secondary">
             {lastUpdatedAt && (
               <span>Updated {formatRelativeTime(new Date(lastUpdatedAt))}</span>
             )}

package/src/components/tickets/ticket-detail-drawer.tsx

@@ -112,7 +112,7 @@ export function TicketDetailDrawer({
       )}
 
       <div>
-        <p className="text-h5 text-ods-text-secondary mb-2">
+        <p className="text-xs font-medium text-ods-text-secondary mb-2 uppercase tracking-wider">
           Conversation
         </p>
         <TicketTimelinePanel ticket={ticket} />
@@ -580,7 +580,7 @@ function ReplyFailureBanner({
     <div
       role="status"
       aria-live="polite"
-      className="mb-3 flex items-start gap-3 rounded-md border border-ods-error bg-ods-error-secondary px-3 py-2 text-h6 text-ods-error"
+      className="mb-3 flex items-start gap-3 rounded-md border border-ods-attention-red-error bg-ods-attention-red-error-secondary px-3 py-2 text-sm text-ods-attention-red-error"
     >
       <span className="font-medium leading-snug">{error.message}</span>
       <Button
@@ -588,7 +588,7 @@ function ReplyFailureBanner({
         variant="transparent"
         onClick={onDismiss}
         aria-label="Dismiss reply failure"
-        className="ml-auto px-2 py-0.5 text-h6 uppercase text-ods-error hover:bg-ods-error-secondary border-transparent"
+        className="ml-auto px-2 py-0.5 text-xs font-medium uppercase tracking-wider text-ods-attention-red-error hover:bg-ods-attention-red-error-secondary border-transparent"
       >
         Dismiss
       </Button>
@@ -625,8 +625,8 @@ function AssignedAgentRow({
   const displayLabel =
     trimmedName ?? (emailFallback ? emailFallback.split('@')[0] : null)
   return (
-    <div className="flex items-center gap-2 text-h6">
-      <span className="text-h5 text-ods-text-secondary">
+    <div className="flex items-center gap-2 text-xs">
+      <span className="text-ods-text-secondary uppercase tracking-wider font-medium">
         Assigned to
       </span>
       {displayLabel ? (

package/src/components/tickets/ticket-open-form.tsx

@@ -83,15 +83,15 @@ export function TicketOpenForm({
     <Card className="p-6">
       <form onSubmit={handleSubmit} className="flex flex-col md:flex-row gap-6">
         <div className="flex-1 min-w-0 md:max-w-md">
-          <h2 className="text-h2 text-ods-text-primary mb-2">
+          <h2 className="text-2xl font-semibold text-ods-text-primary mb-2">
             Need Support?
           </h2>
-          <p className="text-ods-text-secondary text-h6">
+          <p className="text-ods-text-secondary text-sm">
             Can&apos;t find what you&apos;re looking for? Submit a support ticket
             below — we&apos;ll follow up shortly.
           </p>
           {supportSystemDown && (
-            <p className="mt-4 text-h6 text-ods-error">
+            <p className="mt-4 text-sm text-ods-error">
               Support system temporarily unavailable. Please try again shortly.
             </p>
           )}
@@ -101,7 +101,7 @@ export function TicketOpenForm({
           <div>
             <label
               htmlFor="ticket-subject"
-              className="block text-h6 text-ods-text-primary mb-1"
+              className="block text-sm font-medium text-ods-text-primary mb-1"
             >
               Ticket Subject
             </label>
@@ -119,7 +119,7 @@ export function TicketOpenForm({
           <div>
             <label
               htmlFor="ticket-content"
-              className="block text-h6 text-ods-text-primary mb-1"
+              className="block text-sm font-medium text-ods-text-primary mb-1"
             >
               Your Message
             </label>
@@ -134,7 +134,7 @@ export function TicketOpenForm({
             />
             {showCounter && (
               <p
-                className={`mt-1 text-h6 text-right ${
+                className={`mt-1 text-xs text-right ${
                   overCap ? 'text-ods-error' : 'text-ods-text-secondary'
                 }`}
               >

package/src/components/toggle.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../utils/cn"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3 min-w-10",
+        sm: "h-9 px-2.5 min-w-9",
+        lg: "h-11 px-5 min-w-11",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+))
+
+Toggle.displayName = TogglePrimitive.Root.displayName
+
+export { Toggle, toggleVariants }

package/src/components/ui/.title-content-block.md

@@ -35,6 +35,6 @@ The main export — a client-side React component that pairs a title label with
   titleAs="h3"
   contentAs="p"
   spacing="lg"
-  containerClassName="p-4 rounded-lg bg-ods-bg-surface"
+  containerClassName="p-4 rounded-lg bg-ods-surface"
 />
 ```

package/src/components/ui/accordion.tsx

@@ -24,7 +24,7 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-center justify-between py-4 text-h6 transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
         className,
       )}
       {...props}
@@ -43,7 +43,7 @@ const AccordionContent = React.forwardRef<
   <AccordionPrimitive.Content
     ref={ref}
     className={cn(
-      "overflow-hidden text-h6 transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
       className,
     )}
     {...props}

package/src/components/ui/actions-menu.tsx

@@ -171,7 +171,7 @@ const MenuItem: React.FC<MenuItemProps> = ({ item, onItemClick }) => {
 	);
 
 	if (item.type === "separator") {
-		return <div className="bg-ods-divider h-1 w-full" />;
+		return <div className="bg-ods-system-greys-soft-grey h-1 w-full" />;
 	}
 
 	const itemClasses = cn(

package/src/components/ui/alert-dialog.tsx

@@ -18,7 +18,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-ods-overlay  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "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}
@@ -79,7 +79,7 @@ const AlertDialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Title
     ref={ref}
-    className={cn("text-h3", className)}
+    className={cn("text-lg font-semibold", className)}
     {...props}
   />
 ))
@@ -91,7 +91,7 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
-    className={cn("text-h6 text-muted-foreground", className)}
+    className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
 ))

package/src/components/ui/alert.tsx

@@ -14,7 +14,7 @@ const alertVariants = cva(
         destructive:
           "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
         warning:
-          "border-transparent bg-ods-warning-secondary text-ods-warning [&>svg]:text-ods-warning",
+          "border-transparent bg-[var(--ods-attention-yellow-warning-secondary)] text-[var(--ods-attention-yellow-warning)] [&>svg]:text-[var(--ods-attention-yellow-warning)]",
       },
     },
     defaultVariants: {
@@ -54,7 +54,7 @@ const AlertDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("text-h6 [&_p]:leading-relaxed", className)}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
     {...props}
   />
 ))

package/src/components/ui/allowed-domains-input.tsx

@@ -129,17 +129,17 @@ const AllowedDomainsInput = React.forwardRef<HTMLDivElement, AllowedDomainsInput
           disabled={disabled}
         >
           <PlusCircle className="h-5 w-5 text-ods-text-secondary" />
-          <span className="text-h6 font-bold">Add Domain</span>
+          <span className="font-['DM_Sans'] font-bold text-base">Add Domain</span>
         </button>
 
         {/* Error message */}
         {displayError && (
-          <p className="text-h6 text-ods-error">{displayError}</p>
+          <p className="text-sm text-ods-error">{displayError}</p>
         )}
 
         {/* Helper text */}
         {helperText && !displayError && (
-          <p className="text-h6 text-ods-text-secondary">{helperText}</p>
+          <p className="text-sm text-ods-text-secondary">{helperText}</p>
         )}
       </div>
     )

package/src/components/ui/autocomplete.tsx

@@ -485,7 +485,7 @@ function AutocompleteInner<T = string>(
                   className={cn(
                     "flex items-center h-8 px-2",
                     "bg-ods-card border border-ods-border rounded-[6px]",
-                    "text-h5 text-ods-text-secondary",
+                    "font-mono text-[14px] font-medium leading-5 text-ods-text-secondary uppercase tracking-[-0.28px]",
                     "hover:bg-ods-bg-hover transition-colors cursor-pointer"
                   )}
                 >
@@ -569,7 +569,7 @@ function AutocompleteInner<T = string>(
           <ScrollAreaPrimitive.Viewport className="max-h-[240px] w-full [&>div]:!block">
             <div role="listbox">
               {loading ? (
-                <div className="px-3 py-2 text-ods-text-secondary text-h6">
+                <div className="px-3 py-2 text-ods-text-secondary text-[14px]">
                   {loadingText}
                 </div>
               ) : filteredOptions.length === 0 ? (
@@ -593,7 +593,7 @@ function AutocompleteInner<T = string>(
                     </div>
                   )
                 ) : (
-                  <div className="px-3 py-2 text-ods-text-secondary text-h6">
+                  <div className="px-3 py-2 text-ods-text-secondary text-[14px]">
                     {freeSolo && inputValue.trim() ? (
                       <span>Press Enter to add &quot;{inputValue}&quot;</span>
                     ) : (

package/src/components/ui/badge.tsx

@@ -6,7 +6,7 @@ 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-h6 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "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: {
@@ -14,7 +14,7 @@ const badgeVariants = cva(
         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-ods-success text-ods-text-on-accent hover:bg-ods-success-hover",
+        success: "border-transparent bg-green-500 text-white hover:bg-green-600", // Add this line
       },
     },
     defaultVariants: {

package/src/components/ui/brand-association-card.tsx

@@ -42,12 +42,12 @@ export function BrandAssociationCard({
         </div>
 
         {/* Title */}
-        <h3 className="text-h2 text-ods-text-primary">
+        <h3 className="text-h2 tracking-[-0.64px] text-ods-text-primary">
           {item.title}
         </h3>
 
         {/* Description */}
-        <p className="text-h6 text-ods-text-secondary">
+        <p className="font-['DM_Sans'] font-normal text-[16px] leading-[1.5] text-ods-text-secondary">
           {item.description}
         </p>
 

package/src/components/ui/breadcrumb.tsx

@@ -21,7 +21,7 @@ const BreadcrumbList = React.forwardRef<
   <ol
     ref={ref}
     className={cn(
-      "flex flex-wrap items-center gap-1.5 break-words text-h6 text-ods-text-muted md:gap-2.5",
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground md:gap-2.5",
       className
     )}
     {...props}
@@ -52,7 +52,7 @@ const BreadcrumbLink = React.forwardRef<
   return (
     <Comp
       ref={ref}
-      className={cn("transition-colors hover:text-ods-text-primary", className)}
+      className={cn("transition-colors hover:text-foreground", className)}
       {...props}
     />
   )
@@ -68,7 +68,7 @@ const BreadcrumbPage = React.forwardRef<
     role="link"
     aria-disabled="true"
     aria-current="page"
-    className={cn("font-normal text-ods-text-primary", className)}
+    className={cn("font-normal text-foreground", className)}
     {...props}
   />
 ))

package/src/components/ui/bullet-list.tsx

@@ -27,10 +27,10 @@ const spacingMap = {
 
 export function BulletList({
   items,
-  bulletColor = 'var(--color-text-primary)',
+  bulletColor = 'var(--ods-text-primary)',
   bulletIcon: BulletIcon = ShapeCircleDashIcon,
   bulletSize = 16,
-  textClassName = 'text-h4 text-ods-text-primary',
+  textClassName = "font-['DM_Sans'] font-medium text-[16px] md:text-[18px] leading-[24px] md:leading-[28px] text-ods-text-primary",
   itemClassName = 'flex items-start gap-3',
   containerClassName = '',
   spacing = 'md'