@flamingo-stack/openframe-frontend-core 0.0.439 → 0.0.440

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

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

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

package/src/components/ui/button/button.tsx

@@ -39,7 +39,7 @@ const buttonVariants = cva(
         // mono-uppercase control style of "small" nor a heavier weight.
         // Pinned h-6 across breakpoints (24px = the WCAG 2.5.8 target-size
         // floor) with horizontal-dominant padding and a 14px glyph.
-        compact: "py-0 px-[var(--spacing-system-sf)] font-body font-normal text-[13px] md:text-sm leading-snug h-6 [&_svg]:h-3.5 [&_svg]:w-3.5",
+        compact: "py-0 px-[var(--spacing-system-sf)] text-h6 font-normal h-6 [&_svg]:h-3.5 [&_svg]:w-3.5",
         icon: "p-[var(--spacing-system-sf)] h-11 w-11 md:h-12 md:w-12 [&_svg]:h-4 [&_svg]:w-4 md:[&_svg]:h-6 md:[&_svg]:w-6",
         // Quiet 32px icon target with a 16px glyph, fixed across breakpoints
         // (Carbon ghost sm / Primer medium / shadcn icon-sm all pin 32px;

package/src/components/ui/card.tsx

@@ -38,7 +38,7 @@ const CardTitle = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
+      "text-h2",
       className
     )}
     {...props}
@@ -52,7 +52,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-h6 text-muted-foreground", className)}
     {...props}
   />
 ))
@@ -98,8 +98,8 @@ export function CardHorizontal({ icon, title, description, className = '', borde
     >
       <div className="w-5 h-5 flex-shrink-0">{icon}</div>
       <div className="flex flex-col min-w-0">
-        <span className="font-medium text-sm md:text-sm text-ods-text-primary leading-tight mb-0.5 text-left">{title}</span>
-        <span className="text-xs md:text-sm text-ods-text-secondary leading-tight text-left">{description}</span>
+        <span className="text-h6 text-ods-text-primary mb-0.5 text-left">{title}</span>
+        <span className="text-h6 text-ods-text-secondary text-left">{description}</span>
       </div>
     </div>
   );

package/src/components/ui/checkbox-with-description.tsx

@@ -56,7 +56,7 @@ const CheckboxWithDescription = React.forwardRef<
       >
         {title}
       </Label>
-      <span className="text-sm text-ods-text-secondary leading-relaxed">
+      <span className="text-h6 text-ods-text-secondary">
         {description}
       </span>
     </div>

package/src/components/ui/chevron-button.tsx

@@ -24,7 +24,7 @@ const ChevronButton = React.forwardRef<HTMLButtonElement, ChevronButtonProps>(
     return (
       <button
         className={cn(
-          "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+          "inline-flex items-center justify-center rounded-md text-h6 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
           "h-10 px-4 py-2",
           className
         )}

package/src/components/ui/content-loader.tsx

@@ -38,18 +38,18 @@ export function ContentLoader({
 }: ContentLoaderProps) {
   const renderCardSkeleton = () => (
     <div className="animate-pulse">
-      {showTitle && <div className="h-8 w-64 bg-ods-bg-secondary rounded mb-6" />}
+      {showTitle && <div className="h-8 w-64 bg-ods-skeleton rounded mb-6" />}
       <div className="bg-ods-card border border-ods-border rounded-lg p-6">
         <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
           {Array.from({ length: items }).map((_, i) => (
             <div key={i}>
-              <div className="h-4 w-20 bg-ods-bg-secondary rounded mb-2" />
-              <div className="h-6 w-32 bg-ods-bg-secondary rounded" />
+              <div className="h-4 w-20 bg-ods-skeleton rounded mb-2" />
+              <div className="h-6 w-32 bg-ods-skeleton rounded" />
             </div>
           ))}
         </div>
         <div className="border-t border-ods-border pt-4">
-          <div className="h-4 w-64 bg-ods-bg-secondary rounded" />
+          <div className="h-4 w-64 bg-ods-skeleton rounded" />
         </div>
       </div>
     </div>
@@ -62,8 +62,8 @@ export function ContentLoader({
         <div className="space-y-4">
           {Array.from({ length: items }).map((_, i) => (
             <div key={i}>
-              <div className="h-4 bg-ods-bg-secondary rounded w-32 mb-2" />
-              <div className="h-10 bg-ods-bg-secondary rounded" />
+              <div className="h-4 bg-ods-skeleton rounded w-32 mb-2" />
+              <div className="h-10 bg-ods-skeleton rounded" />
             </div>
           ))}
         </div>
@@ -73,22 +73,22 @@ export function ContentLoader({
 
   const renderDetailSkeleton = () => (
     <div className="animate-pulse">
-      {showTitle && <div className="h-8 w-64 bg-ods-bg-secondary rounded mb-6" />}
+      {showTitle && <div className="h-8 w-64 bg-ods-skeleton rounded mb-6" />}
       <div className="bg-ods-card border border-ods-border rounded-lg p-6">
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
           <div className="lg:col-span-2">
-            <div className="h-64 bg-ods-bg-secondary rounded mb-4" />
+            <div className="h-64 bg-ods-skeleton rounded mb-4" />
             <div className="space-y-2">
               {Array.from({ length: 3 }).map((_, i) => (
-                <div key={i} className="h-4 bg-ods-bg-secondary rounded" />
+                <div key={i} className="h-4 bg-ods-skeleton rounded" />
               ))}
             </div>
           </div>
           <div>
-            <div className="h-32 bg-ods-bg-secondary rounded mb-4" />
+            <div className="h-32 bg-ods-skeleton rounded mb-4" />
             <div className="space-y-2">
               {Array.from({ length: items }).map((_, i) => (
-                <div key={i} className="h-3 bg-ods-bg-secondary rounded" />
+                <div key={i} className="h-3 bg-ods-skeleton rounded" />
               ))}
             </div>
           </div>
@@ -99,16 +99,16 @@ export function ContentLoader({
 
   const renderListSkeleton = () => (
     <div className="animate-pulse space-y-3">
-      {showTitle && <div className="h-8 w-64 bg-ods-bg-secondary rounded mb-6" />}
+      {showTitle && <div className="h-8 w-64 bg-ods-skeleton rounded mb-6" />}
       {Array.from({ length: items }).map((_, i) => (
         <div key={i} className="bg-ods-card border border-ods-border rounded-lg p-4">
           <div className="flex items-center gap-4">
-            <div className="h-12 w-12 bg-ods-bg-secondary rounded" />
+            <div className="h-12 w-12 bg-ods-skeleton rounded" />
             <div className="flex-1">
-              <div className="h-4 bg-ods-bg-secondary rounded w-3/4 mb-2" />
-              <div className="h-3 bg-ods-bg-secondary rounded w-1/2" />
+              <div className="h-4 bg-ods-skeleton rounded w-3/4 mb-2" />
+              <div className="h-3 bg-ods-skeleton rounded w-1/2" />
             </div>
-            <div className="h-8 w-20 bg-ods-bg-secondary rounded" />
+            <div className="h-8 w-20 bg-ods-skeleton rounded" />
           </div>
         </div>
       ))}

package/src/components/ui/cursor-pagination.tsx

@@ -92,7 +92,7 @@ export function CursorPagination({
     >
       {/* Info text */}
       {showInfo && (
-        <div className="text-sm text-ods-text-secondary">
+        <div className="text-h6 text-ods-text-secondary">
           {displayText || <span>&nbsp;</span>}
         </div>
       )}

package/src/components/ui/date-picker.tsx

@@ -209,7 +209,7 @@ function DatePickerCalendar({
     weekday: cn(
       cellOuter,
       "flex items-center justify-center",
-      "text-[14px] font-medium leading-5 text-ods-text-secondary"
+      "text-h6 text-ods-text-secondary"
     ),
     week: "flex",
     day: cn(
@@ -248,7 +248,7 @@ function DatePickerCalendar({
       "range-end !bg-ods-accent !text-ods-card !font-bold hover:!bg-ods-accent",
       hasCompleteRange ? "!rounded-r-[6px] !rounded-l-none" : "!rounded-[6px]"
     ),
-    range_middle: "range-middle !bg-[var(--ods-open-yellow-light)] !text-ods-card !font-medium !rounded-none hover:!bg-[var(--ods-open-yellow-light)]",
+    range_middle: "range-middle !bg-ods-open-yellow-light !text-ods-card !font-medium !rounded-none hover:!bg-ods-open-yellow-light",
   };
 
   const [month, setMonth] = React.useState<Date>(

package/src/components/ui/device-card-compact.tsx

@@ -35,12 +35,12 @@ export function DeviceCardCompact({
       {...props}
     >
       {hasName && (
-        <span className="font-['DM_Sans'] font-medium text-[16px] leading-[20px] text-ods-text-primary truncate" title={deviceName}>
+        <span className="text-h6 text-ods-text-primary truncate" title={deviceName}>
           {deviceName}
         </span>
       )}
       {hasOrg && (
-        <span className="font-['DM_Sans'] font-medium text-[14px] leading-[18px] text-ods-text-secondary truncate" title={organization}>
+        <span className="text-h6 text-ods-text-secondary truncate" title={organization}>
           {organization}
         </span>
       )}

package/src/components/ui/device-card.tsx

@@ -110,7 +110,7 @@ export function DeviceCard({
             </span>
           </div>
           {device.organization && (
-            <span className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary truncate" title={device.organization}>
+            <span className="text-h6 text-ods-text-secondary truncate" title={device.organization}>
               {device.organization}
             </span>
           )}
@@ -141,7 +141,7 @@ export function DeviceCard({
               className="flex items-center justify-center px-4 py-3 rounded-[6px] shrink-0 border border-ods-border cursor-pointer hover:bg-ods-bg-hover transition-colors"
               onClick={(e) => { e.stopPropagation(); action.onClick?.() }}
             >
-              <span className="text-h3 text-ods-text-primary text-nowrap tracking-[-0.36px]">
+              <span className="text-h3 text-ods-text-primary text-nowrap">
                 {action.label}
               </span>
             </div>
@@ -162,7 +162,7 @@ export function DeviceCard({
             />
           )}
           {device.lastSeen && (
-            <span className="flex-1 font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary truncate">
+            <span className="flex-1 text-h6 text-ods-text-secondary truncate">
               Last Seen: {formatLastSeen(device.lastSeen)}
             </span>
           )}

package/src/components/ui/dialog.tsx

@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-[9998] bg-black/80 backdrop-blur-sm 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-[9998] bg-ods-overlay backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className,
     )}
     {...props}
@@ -69,7 +69,7 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    className={cn("text-h3", className)}
     {...props}
   />
 ))
@@ -79,7 +79,7 @@ const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  <DialogPrimitive.Description ref={ref} className={cn("text-h6 text-muted-foreground", className)} {...props} />
 ))
 DialogDescription.displayName = DialogPrimitive.Description.displayName
 

package/src/components/ui/drawer.tsx

@@ -11,7 +11,7 @@ import { useHeaderHeight } from "../../hooks/ui/use-header-height"
 /** Unified overlay backdrop — dimmed, no blur. Single source of truth for
  *  every full-screen backdrop (Drawer, AppLayoutDrawer, MobileBurgerMenu,
  *  TimeTracker popover) so all panels dim the page identically. */
-const OVERLAY_BACKDROP_CLASS = "bg-black/50"
+const OVERLAY_BACKDROP_CLASS = "bg-ods-overlay"
 
 const Drawer = DialogPrimitive.Root
 
@@ -316,7 +316,7 @@ function DrawerResizeHandle({
       <div
         aria-hidden
         className={cn(
-          "rounded-full bg-[var(--system-greys-soft-grey,#3A3A3A)]",
+          "rounded-full bg-ods-bg-surface",
           gripClass,
         )}
       />
@@ -495,7 +495,7 @@ const DrawerTitle = React.forwardRef<
     <DialogPrimitive.Title
       ref={ref}
       className={cn(
-        "min-w-0 flex-1 break-words font-sans text-lg font-bold leading-6 tracking-[-0.36px] text-ods-text-primary",
+        "min-w-0 flex-1 break-words text-h3 text-ods-text-primary",
         className
       )}
       {...props}
@@ -520,7 +520,7 @@ const DrawerDescription = React.forwardRef<
   <DialogPrimitive.Description
     ref={ref}
     className={cn(
-      "min-w-0 break-words font-sans text-sm font-medium leading-5 text-ods-text-secondary",
+      "min-w-0 break-words text-h6 text-ods-text-secondary",
       className
     )}
     {...props}

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

@@ -28,7 +28,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-pointer gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-ods-bg-hover focus:bg-ods-bg-hover data-[state=open]:bg-ods-bg-hover [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "flex cursor-pointer gap-2 select-none items-center rounded-sm px-2 py-1.5 text-h6 outline-none hover:bg-ods-bg-hover focus:bg-ods-bg-hover data-[state=open]:bg-ods-bg-hover [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       inset && "pl-8",
       className
     )}
@@ -89,7 +89,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-base outline-none transition-colors text-ods-text-primary hover:bg-ods-bg-hover hover:text-ods-text-primary focus:bg-ods-bg-hover focus:text-ods-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-h6 outline-none transition-colors text-ods-text-primary hover:bg-ods-bg-hover hover:text-ods-text-primary focus:bg-ods-bg-hover focus:text-ods-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       inset && "pl-8",
       className
     )}
@@ -105,7 +105,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors text-ods-text-primary hover:bg-ods-bg-hover hover:text-ods-text-primary focus:bg-ods-bg-hover focus:text-ods-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-h6 outline-none transition-colors text-ods-text-primary hover:bg-ods-bg-hover hover:text-ods-text-primary focus:bg-ods-bg-hover focus:text-ods-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     checked={checked}
@@ -129,7 +129,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors text-ods-text-primary hover:bg-ods-bg-hover hover:text-ods-text-primary focus:bg-ods-bg-hover focus:text-ods-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-h6 outline-none transition-colors text-ods-text-primary hover:bg-ods-bg-hover hover:text-ods-text-primary focus:bg-ods-bg-hover focus:text-ods-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
@@ -153,7 +153,7 @@ const DropdownMenuLabel = React.forwardRef<
   <DropdownMenuPrimitive.Label
     ref={ref}
     className={cn(
-      "px-2 py-1.5 text-sm font-semibold text-ods-text-secondary",
+      "px-2 py-1.5 text-h6 font-semibold text-ods-text-secondary",
       inset && "pl-8",
       className
     )}
@@ -180,7 +180,7 @@ const DropdownMenuShortcut = ({
 }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn("ml-auto text-xs tracking-widest text-ods-text-secondary opacity-60", className)}
+      className={cn("ml-auto text-h6 text-ods-text-secondary opacity-60", className)}
       {...props}
     />
   )

package/src/components/ui/error-state.tsx

@@ -37,17 +37,17 @@ export function ErrorState({
           // -secondary tokens, NOT `/20` alpha modifiers: the ods colors are
           // hex CSS vars, and Tailwind 3.x can't inject alpha into those —
           // the modifier silently produced no background at all.
-          bg: 'bg-ods-attention-red-error-secondary',
-          border: 'border-ods-attention-red-error',
-          text: 'text-ods-attention-red-error',
-          icon: 'text-ods-attention-red-error'
+          bg: 'bg-ods-error-secondary',
+          border: 'border-ods-error',
+          text: 'text-ods-error',
+          icon: 'text-ods-error'
         }
       case 'warning':
         return {
-          bg: 'bg-ods-attention-yellow-warning-secondary',
-          border: 'border-ods-attention-yellow-warning',
-          text: 'text-ods-attention-yellow-warning',
-          icon: 'text-ods-attention-yellow-warning'
+          bg: 'bg-ods-warning-secondary',
+          border: 'border-ods-warning',
+          text: 'text-ods-warning',
+          icon: 'text-ods-warning'
         }
       case 'info':
         return {
@@ -77,7 +77,7 @@ export function ErrorState({
             <h3 className={cn("font-semibold mb-1", styles.text)}>
               {title}
             </h3>
-            <p className={cn("text-sm", styles.text)}>
+            <p className={cn("text-h6", styles.text)}>
               {message}
             </p>
             {(showRetry || showHome) && (

package/src/components/ui/fade-preview.tsx

@@ -75,7 +75,7 @@ export function FadePreview({
       <button
         type="button"
         onClick={() => setExpanded(!expanded)}
-        className="mt-4 flex items-center gap-1.5 text-sm text-ods-text-secondary hover:text-ods-accent transition-colors duration-200"
+        className="mt-4 flex items-center gap-1.5 text-h6 text-ods-text-secondary hover:text-ods-accent transition-colors duration-200"
       >
         <span>{expanded ? 'Show less' : `Show ${hiddenCount} more`}</span>
         <ChevronDown

package/src/components/ui/field-wrapper.tsx

@@ -17,7 +17,7 @@ export interface FieldWrapperProps {
 
 const errorVariantClasses = {
   error: "text-ods-error",
-  warning: "text-[var(--ods-attention-yellow-warning)]",
+  warning: "text-ods-warning",
   success: "text-ods-success",
   muted: "text-ods-text-secondary",
 } as const

package/src/components/ui/file-manager/file-manager-breadcrumb.tsx

@@ -12,7 +12,7 @@ export function FileManagerBreadcrumb({
 }: FileManagerBreadcrumbProps) {
   return (
     <nav className={cn(
-      'flex flex-wrap items-center gap-x-1 gap-y-1 text-sm break-words',
+      'flex flex-wrap items-center gap-x-1 gap-y-1 text-h6 break-words',
       className
     )}>
       {items.map((item, index) => (
@@ -23,7 +23,7 @@ export function FileManagerBreadcrumb({
           <button
             onClick={() => onItemClick?.(item.path)}
             className={cn(
-              'shrink-0 px-1 py-0.5 rounded hover:bg-ods-bg-secondary transition-colors',
+              'shrink-0 px-1 py-0.5 rounded hover:bg-ods-bg-hover transition-colors',
               'text-ods-text-primary hover:text-ods-accent text-left break-all',
               index === items.length - 1 && 'font-medium'
             )}

package/src/components/ui/file-manager/file-manager-empty.tsx

@@ -17,15 +17,15 @@ export function FileManagerEmpty({
       'flex flex-col items-center justify-center py-20 px-4',
       className
     )}>
-      <div className="p-4 bg-ods-bg-secondary rounded-full mb-6">
+      <div className="p-4 bg-ods-bg-surface rounded-full mb-6">
         <FolderOpen className="h-12 w-12 text-ods-text-tertiary" />
       </div>
       
-      <h3 className="text-lg font-medium text-ods-text-primary mb-2">
+      <h3 className="text-h4 text-ods-text-primary mb-2">
         {message}
       </h3>
       
-      <p className="text-sm text-ods-text-secondary text-center max-w-md mb-6">
+      <p className="text-h6 text-ods-text-secondary text-center max-w-md mb-6">
         {description}
       </p>
       

package/src/components/ui/file-manager/file-manager-skeleton.tsx

@@ -50,22 +50,22 @@ export function FileManagerSkeleton({
         <div className="flex-1 min-h-0">
           <div className="bg-ods-bg border border-ods-border rounded-lg flex flex-col">
             {/* Table header */}
-            <div className="flex items-center h-12 px-4 bg-ods-bg-secondary border-b border-ods-border rounded-t-lg">
+            <div className="flex items-center h-12 px-4 bg-ods-bg-surface border-b border-ods-border rounded-t-lg">
               {/* Checkbox */}
               <div className="mr-4">
                 <Skeleton className="h-5 w-5 rounded" />
               </div>
               
               {/* Column headers */}
-              <div className="flex items-center gap-3 flex-1 min-w-0 text-sm font-medium text-ods-text-secondary">
+              <div className="flex items-center gap-3 flex-1 min-w-0 text-h5 text-ods-text-secondary">
                 NAME
               </div>
               
-              <div className="w-24 shrink-0 pr-4 text-sm font-medium text-ods-text-secondary">
+              <div className="w-24 shrink-0 pr-4 text-h5 text-ods-text-secondary">
                 SIZE
               </div>
               
-              <div className="w-36 shrink-0 pl-4 text-sm font-medium text-ods-text-secondary">
+              <div className="w-36 shrink-0 pl-4 text-h5 text-ods-text-secondary">
                 EDITED
               </div>
               

package/src/components/ui/file-manager/file-manager-table-row.tsx

@@ -48,8 +48,8 @@ export function FileManagerTableRow({
     <div
       className={cn(
         'bg-ods-card group flex items-center h-16 px-4 border-ods-border',
-        'hover:bg-ods-bg-secondary transition-colors cursor-pointer',
-        isSelected && 'bg-ods-bg-secondary',
+        'hover:bg-ods-bg-hover transition-colors cursor-pointer',
+        isSelected && 'bg-ods-bg-surface',
         className
       )}
       onClick={handleRowClick}
@@ -76,22 +76,22 @@ export function FileManagerTableRow({
           size="md" 
         />
         <div className="flex flex-col min-w-0">
-          <span className="text-sm text-ods-text-primary truncate" title={file.name}>
+          <span className="text-h6 text-ods-text-primary truncate" title={file.name}>
             {file.name}
           </span>
           {showPath && file.path && (
-            <span className="text-xs text-ods-text-secondary truncate" title={file.path}>
+            <span className="text-h6 text-ods-text-secondary truncate" title={file.path}>
               {file.path}
             </span>
           )}
         </div>
       </div>
       
-      <div className="w-24 shrink-0 pr-4 text-sm text-ods-text-secondary">
+      <div className="w-24 shrink-0 pr-4 text-h6 text-ods-text-secondary">
         {file.size || ''}
       </div>
-      
-      <div className="w-36 shrink-0 pl-4 text-sm text-ods-text-secondary">
+
+      <div className="w-36 shrink-0 pl-4 text-h6 text-ods-text-secondary">
         {file.modified}
       </div>
       

package/src/components/ui/file-manager/file-manager-table.tsx

@@ -76,22 +76,22 @@ export function FileManagerTable({
     return (
       <div className={cn('bg-ods-bg border border-ods-border rounded-lg flex flex-col', className)}>
         {/* Table header */}
-        <div className="flex items-center h-12 px-4 bg-ods-bg-secondary border-b border-ods-border rounded-t-lg">
+        <div className="flex items-center h-12 px-4 bg-ods-bg-surface border-b border-ods-border rounded-t-lg">
           {showCheckboxes && (
             <div className="mr-4">
               <Skeleton className="h-5 w-5 rounded" />
             </div>
           )}
           
-          <div className="flex items-center gap-3 flex-1 min-w-0 text-sm font-medium text-ods-text-secondary">
+          <div className="flex items-center gap-3 flex-1 min-w-0 text-h5 text-ods-text-secondary">
             NAME
           </div>
           
-          <div className="w-24 shrink-0 pr-4 text-sm font-medium text-ods-text-secondary">
+          <div className="w-24 shrink-0 pr-4 text-h5 text-ods-text-secondary">
             SIZE
           </div>
           
-          <div className="w-36 shrink-0 pl-4 text-sm font-medium text-ods-text-secondary">
+          <div className="w-36 shrink-0 pl-4 text-h5 text-ods-text-secondary">
             EDITED
           </div>
           
@@ -153,7 +153,7 @@ export function FileManagerTable({
       className={cn('bg-ods-bg border border-ods-border rounded-lg flex flex-col', className)}
       style={tableHeight ? { height: `${tableHeight}px` } : undefined}
     >
-      <div className="flex items-center h-12 px-4 bg-ods-bg-secondary border-b border-ods-border rounded-t-lg">
+      <div className="flex items-center h-12 px-4 bg-ods-bg-surface border-b border-ods-border rounded-t-lg">
         {showCheckboxes && (
           <div className="mr-4">
             <Checkbox
@@ -164,15 +164,15 @@ export function FileManagerTable({
           </div>
         )}
         
-        <div className="flex items-center gap-3 flex-1 min-w-0 text-sm font-medium text-ods-text-secondary">
+        <div className="flex items-center gap-3 flex-1 min-w-0 text-h5 text-ods-text-secondary">
           NAME
         </div>
         
-        <div className="w-24 shrink-0 pr-4 text-sm font-medium text-ods-text-secondary">
+        <div className="w-24 shrink-0 pr-4 text-h5 text-ods-text-secondary">
           SIZE
         </div>
         
-        <div className="w-36 shrink-0 pl-4 text-sm font-medium text-ods-text-secondary">
+        <div className="w-36 shrink-0 pl-4 text-h5 text-ods-text-secondary">
           EDITED
         </div>