@vvedantb/ui 0.26.0 → 0.26.1

package/README.md

@@ -919,7 +919,7 @@ Setup. The package does not bundle the font. `--font-sans` comes from the packag
 | Prop | Type | Default | Notes |
 | --- | --- | --- | --- |
 | `app` | `"vibot" \| "vmem" \| "verve" \| "velth" \| "vhub"` | required | `ProductAppName`. |
-| `size` | `number` | `24` | Text font size in px. The icon is `Math.round(size * 0.875)` px square. Gap is `0.3em`. |
+| `size` | `number` | `24` | Text font size in px. The icon is `Math.round(size * 1.4)` px square (visible glyph about 1.3x the cap height). Gap is `0.2em`. |
 | `icon` | `boolean` | `true` | `false` renders text only. |
 | `href` | `string` | none | Root is an `<a>` with a focus ring. Otherwise a `<span>`. |
 | `className` | `string` | none | On the root. |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.26.0",
+  "version": "0.26.1",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: one JavaScript entry (primitives, shell pieces, app helpers including the Convex and Clerk provider, VITE env parsing and ensure-user, artifact viewers over the @vvedantb/server artifacts core, native tokens), design-token CSS, shared Tailwind v4 CSS and a Tailwind preset.",
   "type": "module",

package/src/brand/AppWordmark.tsx

@@ -9,7 +9,7 @@ export type ProductAppName = Exclude<AppName, "projectv">;
 export type AppWordmarkProps = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "target" | "rel" | "aria-label" | "title" | "id"> & {
   /** Which product app's name to show. The label is always the lowercase app id. */
   app: ProductAppName;
-  /** Text font size in px (default 24). The icon is `Math.round(size * 0.875)` px square and the gap is `0.3em`. */
+  /** Text font size in px (default 24). The icon is `Math.round(size * 1.4)` px square (larger than the text, so the glyph overhangs the cap height) and the gap is `0.2em`. */
   size?: number;
   /** `false` renders the name only (default `true`). */
   icon?: boolean;
@@ -18,8 +18,12 @@ export type AppWordmarkProps = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "ta
   className?: string;
 };
 
-/** Icon size relative to the text font size. */
-const ICON_SCALE = 0.875;
+/**
+ * Icon frame size relative to the text font size. The glyphs fill about 55-80% of their square frame, so 1.4 makes the
+ * visible glyph about 1.3x the Instrument Sans 500 cap height (0.72em): a slight overhang above and below the letters.
+ * Stroke glyphs may read light next to weight-500 text. That is an observation only: stroke widths are unchanged.
+ */
+const ICON_SCALE = 1.4;
 
 const FOCUS_RING =
   "rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
@@ -32,8 +36,8 @@ const FOCUS_RING =
 export function AppWordmark({ app, size = 24, icon = true, href, className, ...rest }: AppWordmarkProps) {
   const Icon = APP_ICONS[app];
   const classes = cn("inline-flex flex-row items-center text-foreground", href && FOCUS_RING, className);
-  // Font size sits on the root so the `0.3em` gap tracks the text size. The text node inherits it.
-  const style = { fontSize: size, gap: "0.3em" };
+  // Font size sits on the root so the `0.2em` gap tracks the text size. The text node inherits it.
+  const style = { fontSize: size, gap: "0.2em" };
   const content = (
     <>
       {icon ? <Icon size={Math.round(size * ICON_SCALE)} /> : null}