From 4ae956f63a6620d70666d19ca0fac4fb4926bed8 Mon Sep 17 00:00:00 2001 From: Aarav Sareen <96787824+arvsrn@users.noreply.github.com> Date: Sun, 24 May 2026 23:19:23 +0530 Subject: [PATCH 01/25] fix bold fonts; added inter variable --- bun.lock | 3 +++ packages/app/src/components/prompt-input.tsx | 2 +- packages/app/src/context/settings.tsx | 5 +++-- packages/ui/package.json | 3 ++- packages/ui/src/styles/index.css | 2 ++ packages/ui/src/styles/theme.css | 3 ++- packages/ui/src/v2/components/accordion-v2.css | 2 +- packages/ui/src/v2/components/dialog-v2.css | 4 ++-- packages/ui/src/v2/components/keybind-v2.css | 4 ++-- packages/ui/src/v2/components/menu-v2.css | 18 +++++++++--------- packages/ui/src/v2/components/toast-v2.css | 6 +++--- packages/ui/src/v2/components/tooltip-v2.css | 2 +- 12 files changed, 31 insertions(+), 23 deletions(-) diff --git a/bun.lock b/bun.lock index ec1240b64eb1..8c0224b8faec 100644 --- a/bun.lock +++ b/bun.lock @@ -711,6 +711,7 @@ "name": "@opencode-ai/ui", "version": "1.15.11", "dependencies": { + "@fontsource-variable/inter": "5.2.8", "@kobalte/core": "catalog:", "@opencode-ai/core": "workspace:*", "@opencode-ai/sdk": "workspace:*", @@ -1352,6 +1353,8 @@ "@floating-ui/utils": ["@floating-ui/utils@0.2.11", "", {}, "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg=="], + "@fontsource-variable/inter": ["@fontsource-variable/inter@5.2.8", "", {}, "sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ=="], + "@fontsource/ibm-plex-mono": ["@fontsource/ibm-plex-mono@5.2.5", "", {}, "sha512-G09N3GfuT9qj3Ax2FDZvKqZttzM3v+cco2l8uXamhKyXLdmlaUDH5o88/C3vtTHj2oT7yRKsvxz9F+BXbWKMYA=="], "@fontsource/inter": ["@fontsource/inter@5.2.8", "", {}, "sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg=="], diff --git a/packages/app/src/components/prompt-input.tsx b/packages/app/src/components/prompt-input.tsx index 84fe7495f874..79c02d15bf02 100644 --- a/packages/app/src/components/prompt-input.tsx +++ b/packages/app/src/components/prompt-input.tsx @@ -1534,7 +1534,7 @@ export const PromptInput: Component = (props) => { />
{designPlaceholder()} diff --git a/packages/app/src/context/settings.tsx b/packages/app/src/context/settings.tsx index 84288d31a58c..aa52d922e3cd 100644 --- a/packages/app/src/context/settings.tsx +++ b/packages/app/src/context/settings.tsx @@ -53,13 +53,14 @@ export interface Settings { } export const monoDefault = "System Mono" -export const sansDefault = "System Sans" +export const sansDefault = "Inter Variable" export const terminalDefault = "JetBrainsMono Nerd Font Mono" export const newLayoutDesignsDefault = import.meta.env.VITE_OPENCODE_CHANNEL !== "prod" const monoFallback = 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace' -const sansFallback = 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif' +const sansFallback = + '"Inter Variable", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif' const terminalFallback = '"JetBrainsMono Nerd Font Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace' diff --git a/packages/ui/package.json b/packages/ui/package.json index 93315e1b48cd..72cdef3090b5 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -46,9 +46,10 @@ "vite-plugin-solid": "catalog:" }, "dependencies": { + "@fontsource-variable/inter": "5.2.8", "@kobalte/core": "catalog:", - "@opencode-ai/sdk": "workspace:*", "@opencode-ai/core": "workspace:*", + "@opencode-ai/sdk": "workspace:*", "@pierre/diffs": "catalog:", "@shikijs/transformers": "3.9.2", "@solid-primitives/bounds": "0.1.3", diff --git a/packages/ui/src/styles/index.css b/packages/ui/src/styles/index.css index 1b17f6c2b782..2cb0ff166890 100644 --- a/packages/ui/src/styles/index.css +++ b/packages/ui/src/styles/index.css @@ -1,3 +1,5 @@ +@import "@fontsource-variable/inter"; + @layer theme, base, components, utilities; @import "./colors.css" layer(theme); diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css index 751036598d4e..3a7bfd95aae4 100644 --- a/packages/ui/src/styles/theme.css +++ b/packages/ui/src/styles/theme.css @@ -1,5 +1,6 @@ :root { - --font-family-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + --font-family-sans: "Inter Variable", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + sans-serif; --font-family-sans--font-feature-settings: normal; --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; diff --git a/packages/ui/src/v2/components/accordion-v2.css b/packages/ui/src/v2/components/accordion-v2.css index 73d9ebbc1d2d..c8f7e5f911cd 100644 --- a/packages/ui/src/v2/components/accordion-v2.css +++ b/packages/ui/src/v2/components/accordion-v2.css @@ -15,7 +15,7 @@ box-shadow: 0 0 0 0.5px var(--accordion-v2-border); overflow: hidden; - font-family: var(--v2-font-family-sans), "Inter", system-ui, sans-serif; + font-family: var(--font-family-sans); color: var(--accordion-v2-fg); -webkit-font-smoothing: antialiased; diff --git a/packages/ui/src/v2/components/dialog-v2.css b/packages/ui/src/v2/components/dialog-v2.css index 066017f9561e..cb760338ed4e 100644 --- a/packages/ui/src/v2/components/dialog-v2.css +++ b/packages/ui/src/v2/components/dialog-v2.css @@ -64,7 +64,7 @@ [data-slot="dialog-title"] { margin: 0; - font-family: "Inter", var(--v2-font-family-sans); + font-family: var(--font-family-sans); font-weight: 530; font-size: 15px; line-height: 100%; @@ -74,7 +74,7 @@ } [data-slot="dialog-description"] { - font-family: "Inter", var(--v2-font-family-sans); + font-family: var(--font-family-sans); font-weight: 440; font-size: 13px; line-height: 100%; diff --git a/packages/ui/src/v2/components/keybind-v2.css b/packages/ui/src/v2/components/keybind-v2.css index 9eac86c1ffa6..e501b0cdc9a4 100644 --- a/packages/ui/src/v2/components/keybind-v2.css +++ b/packages/ui/src/v2/components/keybind-v2.css @@ -6,7 +6,7 @@ [data-component="keybind-v2"] { box-sizing: border-box; - font-family: var(--v2-font-family-sans), var(--sans), system-ui, sans-serif; + font-family: var(--font-family-sans), var(--sans), system-ui, sans-serif; font-variant-numeric: tabular-nums; display: inline-flex; flex-direction: row; @@ -53,7 +53,7 @@ padding: 0px; flex: 1 1 auto; align-self: stretch; - font-family: "Inter", var(--v2-font-family-sans), var(--sans), system-ui, sans-serif; + font-family: var(--font-family-sans); font-style: normal; font-weight: 530; font-size: 11px; diff --git a/packages/ui/src/v2/components/menu-v2.css b/packages/ui/src/v2/components/menu-v2.css index 10fb97d631ad..dab44ca04082 100644 --- a/packages/ui/src/v2/components/menu-v2.css +++ b/packages/ui/src/v2/components/menu-v2.css @@ -6,12 +6,12 @@ padding: 2px; min-width: 160px; - background: var(--v2-background-bg-layer-01); + background: var(--background-bg-layer-01); border-radius: 6px; - box-shadow: var(--v2-elevation-floating); + box-shadow: var(--elevation-floating); outline: none; - font-family: var(--v2-font-family-sans), "Inter", system-ui, sans-serif; + font-family: var(--font-family-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -31,9 +31,9 @@ --menu-v2-fg-subtle: var(--text-text-muted); --menu-v2-icon: var(--icon-icon-base); --menu-v2-accent: var(--text-text-accent); - --menu-v2-badge-bg: var(--v2-background-bg-layer-02); - --menu-v2-badge-border: var(--v2-border-border-base); - --menu-v2-hover: var(--v2-overlay-simple-overlay-hover); + --menu-v2-badge-bg: var(--background-bg-layer-02); + --menu-v2-badge-border: var(--border-border-base); + --menu-v2-hover: var(--overlay-simple-overlay-hover); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -52,7 +52,7 @@ cursor: default; user-select: none; - font-family: var(--v2-font-family-sans), "Inter", system-ui, sans-serif; + font-family: var(--font-family-sans); font-variation-settings: "slnt" 0; font-variant-numeric: tabular-nums; color: var(--menu-v2-fg); @@ -153,7 +153,7 @@ height: 1px; width: calc(100% + 4px); margin: 2px -2px; - background: var(--v2-border-border-muted); + background: var(--border-border-muted); border: none; } @@ -164,7 +164,7 @@ height: 28px; padding: 0 12px; - font-family: var(--v2-font-family-sans), "Inter", system-ui, sans-serif; + font-family: var(--font-family-sans); font-size: 11px; font-weight: 530; line-height: 100%; diff --git a/packages/ui/src/v2/components/toast-v2.css b/packages/ui/src/v2/components/toast-v2.css index de777cf93192..407de820b8c9 100644 --- a/packages/ui/src/v2/components/toast-v2.css +++ b/packages/ui/src/v2/components/toast-v2.css @@ -113,7 +113,7 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - font-family: "Inter Variable"; + font-family: var(--font-family-sans); font-size: 13px; font-style: normal; font-weight: 530; @@ -128,7 +128,7 @@ text-wrap-style: pretty; overflow-wrap: anywhere; word-break: break-word; - font-family: "Inter Variable"; + font-family: var(--font-family-sans); font-size: 13px; font-style: normal; font-weight: 440; @@ -147,7 +147,7 @@ [data-slot="toast-v2-actions"] [data-component="button-v2"] { min-height: 24px; - font-family: "Inter Variable"; + font-family: var(--font-family-sans); font-size: 13px; font-style: normal; font-weight: 530; diff --git a/packages/ui/src/v2/components/tooltip-v2.css b/packages/ui/src/v2/components/tooltip-v2.css index e3dc298aa78e..ffe365d6d661 100644 --- a/packages/ui/src/v2/components/tooltip-v2.css +++ b/packages/ui/src/v2/components/tooltip-v2.css @@ -10,7 +10,7 @@ box-shadow: var(--elevation-floating); border-radius: 4px; - font-family: "Inter Variable"; + font-family: var(--font-family-sans); font-style: normal; font-weight: 530; font-size: 11px; From 776fd58da47eef9672d34faa6297aad525c99173 Mon Sep 17 00:00:00 2001 From: Aarav Sareen <96787824+arvsrn@users.noreply.github.com> Date: Sun, 24 May 2026 23:22:14 +0530 Subject: [PATCH 02/25] fix home sidebar alignment --- packages/app/src/pages/home.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/app/src/pages/home.tsx b/packages/app/src/pages/home.tsx index 8e31ac3913e7..709bededaa32 100644 --- a/packages/app/src/pages/home.tsx +++ b/packages/app/src/pages/home.tsx @@ -300,8 +300,8 @@ function HomeProjectColumn(props: { const layout = useLayout() const projects = createMemo(() => layout.projects.list()) return ( -