Merge branch 'main' into feat/typography-ui-polish

- Switched bundled browser font references from TTF to WOFF2 and enabled optical sizing.
- Refined heading hierarchy, text wrapping, mobile controls, and numeric alignment.
- Polished notification badges, button underlines, and ligature rendering.

apps/remix/app/app.css

@@ -3,7 +3,7 @@
 /* Inter Variable Fonts */
 @font-face {
   font-family: "Inter";
-  src: url("/fonts/inter-variablefont_opsz,wght.ttf") format("truetype-variations");
+  src: url("/fonts/inter-variablefont_opsz,wght.woff2") format("woff2");
   font-weight: 100 900;
   font-style: normal;
   font-display: swap;
@@ -12,7 +12,7 @@
 /* Inter Italic Variable Fonts */
 @font-face {
   font-family: "Inter";
-  src: url("/fonts/inter-italic-variablefont_opsz,wght.ttf") format("truetype-variations");
+  src: url("/fonts/inter-italic-variablefont_opsz,wght.woff2") format("woff2");
   font-weight: 100 900;
   font-style: italic;
   font-display: swap;
@@ -21,7 +21,7 @@
 /* Caveat Variable Font */
 @font-face {
   font-family: "Caveat";
-  src: url("/fonts/caveat-variablefont_wght.ttf") format("truetype-variations");
+  src: url("/fonts/caveat-variablefont_wght.woff2") format("woff2");
   font-weight: 400 600;
   font-style: normal;
   font-display: swap;
@@ -29,8 +29,8 @@
 
 @font-face {
   font-family: "Noto Sans";
-  src: url("/fonts/noto-sans.ttf") format("truetype-variations");
-  font-weight: 100 900;
+  src: url("/fonts/noto-sans.woff2") format("woff2");
+  font-weight: 400;
   font-style: normal;
   font-display: swap;
 }
@@ -38,7 +38,7 @@
 /* Korean noto sans */
 @font-face {
   font-family: "Noto Sans Korean";
-  src: url("/fonts/noto-sans-korean.ttf") format("truetype-variations");
+  src: url("/fonts/noto-sans-korean.woff2") format("woff2");
   font-weight: 100 900;
   font-style: normal;
   font-display: swap;
@@ -47,7 +47,7 @@
 /* Japanese noto sans */
 @font-face {
   font-family: "Noto Sans Japanese";
-  src: url("/fonts/noto-sans-japanese.ttf") format("truetype-variations");
+  src: url("/fonts/noto-sans-japanese.woff2") format("woff2");
   font-weight: 100 900;
   font-style: normal;
   font-display: swap;
@@ -56,13 +56,19 @@
 /* Chinese noto sans */
 @font-face {
   font-family: "Noto Sans Chinese";
-  src: url("/fonts/noto-sans-chinese.ttf") format("truetype-variations");
-  font-weight: 100 900;
+  src: url("/fonts/noto-sans-chinese.woff2") format("woff2");
+  font-weight: 400;
   font-style: normal;
   font-display: swap;
 }
 
 @layer base {
+  html {
+    @apply antialiased;
+    font-optical-sizing: auto;
+    font-synthesis: style;
+  }
+
   :root {
     --font-sans: "Inter";
     --font-signature: "Caveat";

apps/remix/app/components/general/app-header.tsx

@@ -71,7 +71,7 @@ export const Header = ({ className, ...props }: HeaderProps) => {
             <InboxIcon className="h-5 w-5 flex-shrink-0 text-muted-foreground transition-colors hover:text-foreground" />
 
             {unreadCountData && unreadCountData.count > 0 && (
-              <span className="absolute -top-1.5 -right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-primary font-semibold text-[10px] text-primary-foreground">
+              <span className="absolute -top-1.5 -right-1.5 flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 font-semibold text-primary-foreground text-xs tabular-nums leading-none">
                 {unreadCountData.count > 99 ? '99+' : unreadCountData.count}
               </span>
             )}

apps/remix/app/components/general/app-nav-mobile.tsx

@@ -94,7 +94,7 @@ export const AppNavMobile = ({ isMenuOpen, onMenuOpenChange }: AppNavMobileProps
             >
               {text}
               {href === '/inbox' && unreadCountData && unreadCountData.count > 0 && (
-                <span className="flex h-6 min-w-[1.5rem] items-center justify-center rounded-full bg-primary px-1.5 font-semibold text-primary-foreground text-xs">
+                <span className="flex h-6 min-w-[1.5rem] items-center justify-center rounded-full bg-primary px-1.5 font-semibold text-primary-foreground text-xs tabular-nums">
                   {unreadCountData.count > 99 ? '99+' : unreadCountData.count}
                 </span>
               )}

apps/remix/app/components/general/metric-card.tsx

@@ -29,7 +29,7 @@ export const CardMetric = ({ icon: Icon, title, value, className, children }: Ca
         </div>
 
         {children || (
-          <p className="mt-auto font-semibold text-4xl text-foreground leading-8">
+          <p className="mt-auto font-semibold text-4xl text-foreground tabular-nums leading-8">
             {typeof value === 'number' ? value.toLocaleString('en-US') : value}
           </p>
         )}

apps/remix/app/components/general/settings-header.tsx

@@ -13,10 +13,12 @@ export const SettingsHeader = ({ children, title, subtitle, className, hideDivid
   return (
     <>
       <div className={cn('flex flex-row items-center justify-between', className)}>
-        <div>
-          <h3 className="font-medium text-lg">{title}</h3>
+        <div className="min-w-0">
+          <h3 className="font-medium text-lg leading-tight [text-wrap:balance]">{title}</h3>
 
-          <p className="text-muted-foreground text-sm md:mt-2">{subtitle}</p>
+          <p className="mt-1 max-w-[65ch] text-muted-foreground text-sm leading-normal [overflow-wrap:break-word] [text-wrap:pretty] md:mt-2">
+            {subtitle}
+          </p>
         </div>
 
         {children}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents._index.tsx

@@ -143,9 +143,9 @@ export default function DocumentsPage() {
               <AvatarFallback className="text-muted-foreground text-xs">{team.name.slice(0, 1)}</AvatarFallback>
             </Avatar>
 
-            <h2 className="font-semibold text-4xl">
+            <h1 className="font-semibold text-2xl leading-tight tracking-tight md:text-3xl">
               <Trans>Documents</Trans>
-            </h2>
+            </h1>
           </div>
 
           <div className="-m-1 flex flex-wrap gap-x-4 gap-y-6 overflow-hidden p-1">
@@ -172,7 +172,7 @@ export default function DocumentsPage() {
                         <DocumentStatus status={value} />
 
                         {value !== ExtendedDocumentStatus.ALL && (
-                          <span className="ml-1 inline-block opacity-50">
+                          <span className="ml-1 inline-block tabular-nums opacity-50">
                             {stats[value] >= STATS_COUNT_CAP ? `${STATS_COUNT_CAP.toLocaleString()}+` : stats[value]}
                           </span>
                         )}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates._index.tsx

@@ -101,7 +101,7 @@ export default function TemplatesPage() {
               <AvatarFallback className="text-muted-foreground text-xs">{team.name.slice(0, 1)}</AvatarFallback>
             </Avatar>
 
-            <h1 className="truncate font-semibold text-2xl md:text-3xl">
+            <h1 className="font-semibold text-2xl leading-tight tracking-tight md:text-3xl">
               <Trans>Templates</Trans>
             </h1>
           </div>
@@ -131,15 +131,15 @@ export default function TemplatesPage() {
 
           <div className="mt-8">
             {activeQuery.data && activeQuery.data.count === 0 ? (
-              <div className="flex h-96 flex-col items-center justify-center gap-y-4 text-muted-foreground/60">
-                <Bird className="h-12 w-12" strokeWidth={1.5} />
+              <div className="flex h-96 flex-col items-center justify-center gap-y-4">
+                <Bird className="h-12 w-12 text-muted-foreground/60" strokeWidth={1.5} />
 
                 <div className="text-center">
-                  <h3 className="font-semibold text-lg">
+                  <h3 className="font-semibold text-foreground text-lg">
                     <Trans>We're all empty</Trans>
                   </h3>
 
-                  <p className="mt-2 max-w-[50ch]">
+                  <p className="mt-2 max-w-[50ch] text-muted-foreground [text-wrap:pretty]">
                     {isOrgView ? (
                       <Trans>No organisation templates are shared with your team yet.</Trans>
                     ) : (

packages/ui/primitives/button.tsx

@@ -7,7 +7,7 @@ import * as React from 'react';
 import { cn } from '../lib/utils';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background',
+  'inline-flex select-none items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background',
   {
     variants: {
       variant: {
@@ -17,7 +17,7 @@ const buttonVariants = cva(
         outline: 'border border-input hover:bg-accent hover:text-accent-foreground',
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'underline-offset-4 hover:underline text-primary',
+        link: 'underline-offset-4 hover:underline text-primary [text-decoration-skip-ink:auto] [text-decoration-thickness:from-font] [text-underline-position:from-font]',
         none: '',
       },
       size: {

packages/ui/primitives/data-table-pagination.tsx

@@ -22,7 +22,7 @@ export function DataTablePagination<TData>({
   additionalInformation = 'VisibleCount',
 }: DataTablePaginationProps<TData>) {
   return (
-    <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-4 px-2">
+    <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-4 px-2 tabular-nums">
       <div className="flex-1 text-muted-foreground text-sm">
         {match(additionalInformation)
           .with('SelectedCount', () => (

packages/ui/primitives/textarea.tsx

@@ -8,7 +8,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ classNa
   return (
     <textarea
       className={cn(
-        'flex h-20 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-20 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
         className,
         {
           '!ring-destructive ring-2 transition-all': props['aria-invalid'],

packages/ui/styles/theme.css

@@ -195,9 +195,7 @@
 
   body {
     @apply bg-background text-foreground;
-    font-feature-settings:
-      "rlig" 1,
-      "calt" 1;
+    font-variant-ligatures: common-ligatures contextual;
   }
 }