diff --git a/desktop/package.json b/desktop/package.json index c28742815..e820dc38b 100644 --- a/desktop/package.json +++ b/desktop/package.json @@ -27,6 +27,7 @@ "@dnd-kit/utilities": "^3.2.2", "@emoji-mart/data": "^1.2.1", "@emoji-mart/react": "^1.1.1", + "@fontsource-variable/inter": "^5.2.8", "@mediapipe/tasks-vision": "^0.10.35", "@radix-ui/react-alert-dialog": "^1.1.15", "@radix-ui/react-avatar": "^1.1.11", diff --git a/desktop/src/features/messages/lib/useRichTextEditor.ts b/desktop/src/features/messages/lib/useRichTextEditor.ts index d54e3c8a2..f87d4599e 100644 --- a/desktop/src/features/messages/lib/useRichTextEditor.ts +++ b/desktop/src/features/messages/lib/useRichTextEditor.ts @@ -327,7 +327,7 @@ export function useRichTextEditor({ attributes: { autocapitalize: "none", autocorrect: "off", - class: `${MESSAGE_MARKDOWN_CLASS} min-h-0 resize-none overflow-y-hidden border-0 bg-transparent px-0 py-0 text-sm leading-relaxed text-foreground shadow-none focus-visible:ring-0 caret-foreground outline-hidden max-w-none`, + class: `${MESSAGE_MARKDOWN_CLASS} min-h-0 resize-none overflow-y-hidden border-0 bg-transparent px-0 py-0 text-sm leading-5 text-foreground shadow-none focus-visible:ring-0 caret-foreground outline-hidden max-w-none`, "data-testid": "message-input", spellcheck: "false", }, diff --git a/desktop/src/main.tsx b/desktop/src/main.tsx index cf41ee4b2..48c831ad3 100644 --- a/desktop/src/main.tsx +++ b/desktop/src/main.tsx @@ -1,6 +1,7 @@ import React from "react"; import ReactDOM from "react-dom/client"; import { App } from "@/app/App"; +import "@fontsource-variable/inter/wght.css"; import "@/shared/styles/globals.css"; import { UpdaterProvider } from "@/features/settings/hooks/UpdaterProvider"; import { migrateLegacyWorkspaceStorageBeforeRender } from "@/features/workspaces/legacyWorkspaceStorage"; diff --git a/desktop/src/shared/styles/globals.css b/desktop/src/shared/styles/globals.css index 2c9353729..5582fb145 100644 --- a/desktop/src/shared/styles/globals.css +++ b/desktop/src/shared/styles/globals.css @@ -512,9 +512,9 @@ /* ── Tiptap rich-text composer ──────────────────────────────────────── */ .rich-text-composer .tiptap { outline: none; - min-height: calc(var(--text-sm) * var(--leading-relaxed)); + min-height: 1lh; font-size: var(--text-sm); - line-height: var(--leading-relaxed); + line-height: var(--text-sm--line-height); } .rich-text-composer .tiptap p { @@ -619,7 +619,6 @@ --inline-code-font-size: var(--text-xs); --agent-icon-size: 0.95em; --agent-icon-gap: 0.125rem; - --agent-icon-top: 0.125rem; } .message-markdown .mention-chip, @@ -702,12 +701,13 @@ .message-markdown .agent-mention-highlight::before { content: ""; position: absolute; - top: var(--agent-icon-top); + top: 50%; left: var(--inline-chip-padding-inline); width: var(--agent-icon-size); height: var(--agent-icon-size); background: currentColor; pointer-events: none; + transform: translateY(-50%); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8V4H8'/%3E%3Crect width='16' height='12' x='4' y='8' rx='2'/%3E%3Cpath d='M2 14h2'/%3E%3Cpath d='M20 14h2'/%3E%3Cpath d='M15 13v2'/%3E%3Cpath d='M9 13v2'/%3E%3C/svg%3E") center / contain no-repeat; @@ -888,7 +888,7 @@ body { @apply bg-background text-foreground antialiased; - font-family: "Geist", "Avenir Next", "Segoe UI", sans-serif; + font-family: "Inter Variable", Inter, "Avenir Next", "Segoe UI", sans-serif; } /* diff --git a/desktop/src/shared/ui/markdown.tsx b/desktop/src/shared/ui/markdown.tsx index 40380ed8a..111dabc71 100644 --- a/desktop/src/shared/ui/markdown.tsx +++ b/desktop/src/shared/ui/markdown.tsx @@ -954,7 +954,7 @@ function createMarkdownComponents( runtimeRef: React.RefObject, interactive = true, ): Components { - const paragraphClassName = "leading-relaxed"; + const paragraphClassName = "leading-[inherit]"; const listItemClassName = "my-1 [&_p]:inline"; const listClassName = "space-y-1 pl-6 marker:text-muted-foreground"; @@ -1432,7 +1432,7 @@ function MarkdownInner({ className={cn( MESSAGE_MARKDOWN_CLASS, [ - "max-w-none [overflow-wrap:anywhere] text-sm leading-relaxed text-foreground", + "max-w-none [overflow-wrap:anywhere] text-sm leading-5 text-foreground", "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0", "[&>*+*]:mt-3", "[&>p+p]:mt-1.5", diff --git a/desktop/tailwind.config.js b/desktop/tailwind.config.js index 221cbe8ed..1e55595b4 100644 --- a/desktop/tailwind.config.js +++ b/desktop/tailwind.config.js @@ -16,6 +16,15 @@ export default { md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, + fontFamily: { + sans: [ + '"Inter Variable"', + "Inter", + '"Avenir Next"', + '"Segoe UI"', + "sans-serif", + ], + }, colors: { background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 783b01e4e..f9a3c2bbc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -36,6 +36,9 @@ importers: '@emoji-mart/react': specifier: ^1.1.1 version: 1.1.1(emoji-mart@5.6.0)(react@19.2.7) + '@fontsource-variable/inter': + specifier: ^5.2.8 + version: 5.2.8 '@mediapipe/tasks-vision': specifier: ^0.10.35 version: 0.10.35 @@ -229,6 +232,9 @@ importers: web: dependencies: + '@fontsource-variable/inter': + specifier: ^5.2.8 + version: 5.2.8 '@isomorphic-git/lightning-fs': specifier: ^4.6.2 version: 4.6.2 @@ -522,6 +528,9 @@ packages: '@floating-ui/utils@0.2.11': resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==} + '@fontsource-variable/inter@5.2.8': + resolution: {integrity: sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==} + '@isomorphic-git/idb-keyval@3.3.2': resolution: {integrity: sha512-r8/AdpiS0/WJCNR/t/gsgL+M8NMVj/ek7s60uz3LmpCaTF2mEVlZJlB01ZzalgYzRLXwSPC92o+pdzjM7PN/pA==} @@ -3274,6 +3283,8 @@ snapshots: '@floating-ui/utils@0.2.11': {} + '@fontsource-variable/inter@5.2.8': {} + '@isomorphic-git/idb-keyval@3.3.2': {} '@isomorphic-git/lightning-fs@4.6.2': diff --git a/web/package.json b/web/package.json index 693d6ff68..4a5ca5279 100644 --- a/web/package.json +++ b/web/package.json @@ -16,6 +16,7 @@ "test:e2e:smoke": "pnpm build && playwright test --project=smoke" }, "dependencies": { + "@fontsource-variable/inter": "^5.2.8", "@isomorphic-git/lightning-fs": "^4.6.2", "@radix-ui/react-slot": "^1.2.4", "@radix-ui/react-tooltip": "^1.2.8", @@ -37,12 +38,12 @@ }, "devDependencies": { "@playwright/test": "^1.58.2", + "@tailwindcss/postcss": "^4.3.0", "@tanstack/router-plugin": "^1.167.12", "@tanstack/virtual-file-routes": "^1.161.7", "@types/react": "^19.1.8", "@types/react-dom": "^19.1.6", "@vitejs/plugin-react": "^6.0.0", - "@tailwindcss/postcss": "^4.3.0", "postcss": "^8.5.8", "tailwindcss": "^4.3.0", "tw-animate-css": "^1.4.0", diff --git a/web/src/main.tsx b/web/src/main.tsx index 1165a5166..7437690ce 100644 --- a/web/src/main.tsx +++ b/web/src/main.tsx @@ -2,6 +2,7 @@ import React from "react"; import ReactDOM from "react-dom/client"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { App } from "@/app/App"; +import "@fontsource-variable/inter/wght.css"; import "@/shared/styles/globals.css"; import { ThemeProvider } from "@/shared/theme/ThemeProvider"; import { Toaster } from "@/shared/ui/sonner"; diff --git a/web/src/shared/styles/globals.css b/web/src/shared/styles/globals.css index d9638b586..e7255a9cb 100644 --- a/web/src/shared/styles/globals.css +++ b/web/src/shared/styles/globals.css @@ -95,6 +95,6 @@ body { @apply bg-background text-foreground antialiased; - font-family: "Geist", "Avenir Next", "Segoe UI", sans-serif; + font-family: "Inter Variable", Inter, "Avenir Next", "Segoe UI", sans-serif; } } diff --git a/web/tailwind.config.js b/web/tailwind.config.js index 16d129c97..68eaa65e9 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -7,6 +7,15 @@ export default { md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, + fontFamily: { + sans: [ + '"Inter Variable"', + "Inter", + '"Avenir Next"', + '"Segoe UI"', + "sans-serif", + ], + }, colors: { background: "hsl(var(--background))", foreground: "hsl(var(--foreground))",