@hilum/ui 2.1.1 → 3.0.0

package/dist/tokens.css

@@ -41,7 +41,7 @@
   --color-destructive: #dc2626;
 
   --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;
+  --font-display: Gabarito, Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
 
   --radius-base: 0.5rem;
@@ -201,35 +201,35 @@
 @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *, .dark, .dark *));
 
 @utility display-xl {
-  font-family: var(--font-serif);
+  font-family: var(--font-display);
   font-size: 3rem;
   font-weight: 400;
   line-height: 1.15;
 }
 
 @utility display {
-  font-family: var(--font-serif);
+  font-family: var(--font-display);
   font-size: 2.25rem;
   font-weight: 400;
   line-height: 1.15;
 }
 
 @utility heading-xl {
-  font-family: var(--font-serif);
+  font-family: var(--font-display);
   font-size: 1.875rem;
   font-weight: 400;
   line-height: 1.2;
 }
 
 @utility heading {
-  font-family: var(--font-serif);
+  font-family: var(--font-display);
   font-size: 1.5rem;
   font-weight: 400;
   line-height: 1.2;
 }
 
 @utility subheading {
-  font-family: var(--font-serif);
+  font-family: var(--font-display);
   font-size: 1.25rem;
   font-weight: 400;
   line-height: 1.4;

package/dist/tokens.d.ts

@@ -122,37 +122,37 @@ declare const tokens: {
     };
     readonly fontFamily: {
         readonly sans: "Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
-        readonly serif: "\"Instrument Serif\", ui-serif, Georgia, serif";
+        readonly display: "Gabarito, Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
         readonly mono: "ui-monospace, \"SFMono-Regular\", \"Menlo\", \"Consolas\", monospace";
     };
     /** Type scale utilities — emitted as Tailwind v4 `@utility` blocks. */
     readonly typeScale: {
         readonly "display-xl": {
-            readonly family: "serif";
+            readonly family: "display";
             readonly size: "3rem";
             readonly weight: 400;
             readonly lineHeight: "1.15";
         };
         readonly display: {
-            readonly family: "serif";
+            readonly family: "display";
             readonly size: "2.25rem";
             readonly weight: 400;
             readonly lineHeight: "1.15";
         };
         readonly "heading-xl": {
-            readonly family: "serif";
+            readonly family: "display";
             readonly size: "1.875rem";
             readonly weight: 400;
             readonly lineHeight: "1.2";
         };
         readonly heading: {
-            readonly family: "serif";
+            readonly family: "display";
             readonly size: "1.5rem";
             readonly weight: 400;
             readonly lineHeight: "1.2";
         };
         readonly subheading: {
-            readonly family: "serif";
+            readonly family: "display";
             readonly size: "1.25rem";
             readonly weight: 400;
             readonly lineHeight: "1.4";

package/dist/tokens.js

@@ -1,3 +1,3 @@
-export { tokens } from './chunk-H6JZQWX3.js';
+export { tokens } from './chunk-5JX2YKJM.js';
 //# sourceMappingURL=tokens.js.map
 //# sourceMappingURL=tokens.js.map

package/llms.txt

@@ -17,9 +17,10 @@ Peer dependencies: `react@^19`, `react-dom@^19`, `tailwindcss@^4`
 /* globals.css */
 @import "tailwindcss";
 @import "@hilum/ui/tokens.css";
+@import "@hilum/ui/fonts.css";
 ```
 
-That single import registers all design tokens as CSS custom properties and Tailwind v4 utilities (`bg-brand-primary`, `text-ground-900`, `shadow-natural`, etc.).
+The token import registers all design tokens as CSS custom properties and Tailwind v4 utilities (`bg-brand-primary`, `text-ground-900`, `shadow-natural`, etc.). The font import loads Hilum's self-hosted Inter and Gabarito font files.
 
 ---
 
@@ -103,11 +104,11 @@ Use as Tailwind utilities (e.g. `className="display"`):
 
 | Class | Font | Size | Weight | Usage |
 |---|---|---|---|---|
-| `display-xl` | Instrument Serif | 3rem | 400 | Hero H1 |
-| `display` | Instrument Serif | 2.25rem | 400 | Page H1 |
-| `heading-xl` | Instrument Serif | 1.875rem | 400 | Section headings |
-| `heading` | Instrument Serif | 1.5rem | 400 | Card titles |
-| `subheading` | Inter | 1.25rem | 400 | Subheadings |
+| `display-xl` | Gabarito | 3rem | 400 | Hero H1 |
+| `display` | Gabarito | 2.25rem | 400 | Page H1 |
+| `heading-xl` | Gabarito | 1.875rem | 400 | Section headings |
+| `heading` | Gabarito | 1.5rem | 400 | Card titles |
+| `subheading` | Gabarito | 1.25rem | 400 | Subheadings |
 | `body-lg` | Inter | 1rem | 400 | Large body text |
 | `body` | Inter | 0.875rem | 400 | Default body |
 | `caption` | Inter | 0.75rem | 400 | Metadata, helper text |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hilum/ui",
-  "version": "2.1.1",
+  "version": "3.0.0",
   "private": false,
   "description": "Hilum UI — design system primitives (Button, Input, Dialog, Combobox, …) + tokens + fonts + icons",
   "license": "MIT",
@@ -71,7 +71,7 @@
   },
   "devDependencies": {
     "@fontsource-variable/inter": "^5.2.8",
-    "@fontsource/instrument-serif": "^5.2.8",
+    "@fontsource/gabarito": "^5.2.8",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "tailwindcss": "^4.2.0",

package/src/components/account-menu.tsx

@@ -17,7 +17,7 @@ const AccountMenuContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "w-80 overflow-hidden rounded-2xl border border-border bg-card p-0 text-foreground shadow-elevated",
+      "w-72 overflow-hidden rounded-xl border border-border bg-card p-0 text-foreground shadow-elevated",
       className,
     )}
     {...props}
@@ -37,17 +37,17 @@ const AccountMenuHeader = React.forwardRef<HTMLDivElement, AccountMenuHeaderProp
   ({ name, email, avatarSrc, avatarAlt, fallback, className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn("flex flex-col items-center px-6 py-7 text-center", className)}
+      className={cn("flex flex-col items-center px-5 py-5 text-center", className)}
       {...props}
     >
-      <Avatar size="xl" className="mb-4 size-14">
+      <Avatar size="lg" className="mb-3">
         {avatarSrc && <AvatarImage src={avatarSrc} alt={avatarAlt ?? ""} />}
-        <AvatarFallback className="bg-brand-primary text-xl text-primary-foreground">
+        <AvatarFallback className="bg-brand-primary text-primary-foreground">
           {fallback}
         </AvatarFallback>
       </Avatar>
-      <p className="body-lg font-medium leading-tight text-foreground">{name}</p>
-      {email && <p className="body text-muted-foreground">{email}</p>}
+      <p className="body font-medium leading-tight text-foreground">{name}</p>
+      {email && <p className="caption text-muted-foreground">{email}</p>}
     </div>
   ),
 );
@@ -55,7 +55,7 @@ AccountMenuHeader.displayName = "AccountMenuHeader";
 
 const AccountMenuSection = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("p-3", className)} {...props} />
+    <div ref={ref} className={cn("p-2", className)} {...props} />
   ),
 );
 AccountMenuSection.displayName = "AccountMenuSection";
@@ -74,22 +74,22 @@ const AccountMenuItem = React.forwardRef<
   <DropdownMenuItem
     ref={ref}
     className={cn(
-      "min-h-11 rounded-lg px-3 py-2.5",
+      "min-h-10 rounded-md px-2.5 py-2",
       "group",
       destructive
         ? "text-destructive focus:bg-destructive/10 focus:text-destructive"
         : "text-foreground focus:bg-muted focus:text-foreground",
       "data-[disabled]:opacity-40",
-      "[&_svg:not([class*='size-'])]:size-5",
+      "[&_svg:not([class*='size-'])]:size-4",
       className,
     )}
     {...props}
   >
-    {icon && <span className="flex size-6 shrink-0 items-center justify-center">{icon}</span>}
+    {icon && <span className="flex size-5 shrink-0 items-center justify-center">{icon}</span>}
     <span className="flex min-w-0 flex-1 flex-col">
-      <span className="body-lg truncate font-medium leading-tight">{children}</span>
+      <span className="body truncate font-medium leading-tight">{children}</span>
       {description && (
-        <span className="body truncate font-normal text-muted-foreground group-focus:text-muted-foreground">
+        <span className="caption truncate font-normal text-muted-foreground group-focus:text-muted-foreground">
           {description}
         </span>
       )}

package/src/tokens/tokens.ts

@@ -162,17 +162,17 @@ export const tokens = {
 
   fontFamily: {
     sans: 'Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-    serif: '"Instrument Serif", ui-serif, Georgia, serif',
+    display: 'Gabarito, Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
     mono: 'ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace',
   },
 
   /** Type scale utilities — emitted as Tailwind v4 `@utility` blocks. */
   typeScale: {
-    "display-xl": { family: "serif", size: "3rem", weight: 400, lineHeight: "1.15" },
-    display: { family: "serif", size: "2.25rem", weight: 400, lineHeight: "1.15" },
-    "heading-xl": { family: "serif", size: "1.875rem", weight: 400, lineHeight: "1.2" },
-    heading: { family: "serif", size: "1.5rem", weight: 400, lineHeight: "1.2" },
-    subheading: { family: "serif", size: "1.25rem", weight: 400, lineHeight: "1.4" },
+    "display-xl": { family: "display", size: "3rem", weight: 400, lineHeight: "1.15" },
+    display: { family: "display", size: "2.25rem", weight: 400, lineHeight: "1.15" },
+    "heading-xl": { family: "display", size: "1.875rem", weight: 400, lineHeight: "1.2" },
+    heading: { family: "display", size: "1.5rem", weight: 400, lineHeight: "1.2" },
+    subheading: { family: "display", size: "1.25rem", weight: 400, lineHeight: "1.4" },
     "body-lg": { family: "sans", size: "1rem", weight: 400, lineHeight: "1.625" },
     body: { family: "sans", size: "0.875rem", weight: 400, lineHeight: "1.625" },
     "body-sm": { family: "sans", size: "0.75rem", weight: 500, lineHeight: "1.625" },