mirror of
https://github.com/Kilo-Org/kilocode.git
synced 2026-08-29 03:44:06 +08:00
feat(kilo-console): align fonts with Kilo Cloud
Kilo Console was rendering the OS sans/mono fallback stack instead of
Inter / Roboto Mono / JetBrains Mono like Kilo Cloud. Kilo Cloud's web
app (apps/web/src/app/layout.tsx) loads these via `next/font/google`,
but Kilo Console is a Vite-built SolidJS SPA that can't fetch Google
Fonts at build time the same way.
Changes:
- Self-host Inter Variable, Roboto Mono Variable, and JetBrains Mono
Variable as woff2 under packages/kilo-web-ui/src/assets/fonts/.
All three are OFL-1.1; attribution added next to the files.
- Add @font-face blocks at the top of
packages/kilo-web-ui/src/styles/theme.css for the three variable
fonts. The blocks live outside the scoped [data-theme="kilo"]
selector so they're available everywhere Kilo Web UI styles load.
- Declare the three Cloud-mirror tokens in the same scoped block where
--font-family-sans/-mono are already overridden:
--font-sans-loaded -> "Inter Variable"
--font-mono-loaded -> "Roboto Mono Variable"
--font-jetbrains -> "JetBrains Mono Variable"
Re-alias --font-family-sans/-font-family-mono to point at the new
tokens, so all existing var(--font-family-*) consumers across the
200+ call sites in kilo-ui, kilo-web-ui, and kilo-console pick up the
new fonts with no per-site change.
- Drop three hard-coded inline fallbacks in kilo-console styles
(base.css, profile.css, resolved.css) that named "Inter" directly,
so the value flows through the cascade instead of short-circuiting it.
- No upstream changes: packages/ui/* (the @opencode-ai/ui fork) is
untouched, avoiding kilocode_change markers in shared files.
Verified with `bun run build` in packages/kilo-console (all four
@font-face blocks emitted to the bundled CSS with hashed woff2 URLs)
and `bun run typecheck` in both kilo-console and kilo-web-ui.
This commit is contained in:
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@kilocode/kilo-web-ui": patch
|
||||
---
|
||||
|
||||
Use the same font stack as Kilo Cloud (Inter variable for sans, Roboto Mono variable for mono, JetBrains Mono variable as the alt-mono token) in Kilo Console. Fonts are now self-hosted as woff2 in `@kilocode/kilo-web-ui`, so Inter no longer relies on the OS having it installed.
|
||||
@@ -1,5 +1,5 @@
|
||||
:root {
|
||||
font-family: var(--font-family-sans, Inter, system-ui, sans-serif);
|
||||
font-family: var(--font-family-sans);
|
||||
background: var(--background-base);
|
||||
color: var(--text-base);
|
||||
}
|
||||
|
||||
@@ -420,7 +420,7 @@
|
||||
|
||||
.kilo-console .profile-login-code small {
|
||||
color: var(--muted-foreground);
|
||||
font-family: var(--font-family-sans, system-ui, sans-serif);
|
||||
font-family: var(--font-family-sans);
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0;
|
||||
|
||||
@@ -118,7 +118,7 @@
|
||||
}
|
||||
|
||||
.kilo-console .default-model-value strong {
|
||||
font-family: var(--font-family-sans, Inter, system-ui, sans-serif);
|
||||
font-family: var(--font-family-sans);
|
||||
}
|
||||
|
||||
.kilo-console .default-model-value .default-model-id {
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
# Font attribution
|
||||
|
||||
Self-hosted variable font files in this directory are licensed under the
|
||||
[SIL Open Font License, version 1.1](https://scripts.sil.org/OFL).
|
||||
|
||||
| Family | Source | OFL copyright |
|
||||
|---|---|---|
|
||||
| Inter | https://github.com/rsms/inter | Copyright (c) 2016-2024 The Inter Project Authors |
|
||||
| Roboto Mono | https://github.com/google/fonts/tree/main/ofl/robotomono | Copyright 2015 The Roboto Mono Project Authors |
|
||||
| JetBrains Mono | https://github.com/google/fonts/tree/main/ofl/jetbrainsmono | Copyright 2020 The JetBrains Mono Project Authors |
|
||||
|
||||
The full OFL-1.1 license text is at `https://scripts.sil.org/OFL`. Redistribution
|
||||
is permitted provided the font files remain under the OFL and this attribution
|
||||
is preserved.
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,3 +1,32 @@
|
||||
@font-face {
|
||||
font-family: "Inter Variable";
|
||||
src: url("@kilocode/kilo-web-ui/fonts/Inter-Variable.woff2") format("woff2-variations");
|
||||
font-weight: 100 900;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Inter Variable";
|
||||
src: url("@kilocode/kilo-web-ui/fonts/Inter-Variable-Italic.woff2") format("woff2-variations");
|
||||
font-weight: 100 900;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto Mono Variable";
|
||||
src: url("@kilocode/kilo-web-ui/fonts/RobotoMono-Variable.woff2") format("woff2-variations");
|
||||
font-weight: 100 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "JetBrains Mono Variable";
|
||||
src: url("@kilocode/kilo-web-ui/fonts/JetBrainsMono-Variable.woff2") format("woff2-variations");
|
||||
font-weight: 100 800;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
html[data-theme="kilo"],
|
||||
html[data-theme="kilo-console"],
|
||||
.kilo-console {
|
||||
@@ -7,8 +36,11 @@ html[data-theme="kilo-console"],
|
||||
--radius-md: calc(var(--radius) * 0.8);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) * 1.4);
|
||||
--font-family-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
||||
--font-sans-loaded: "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-mono-loaded: "Roboto Mono Variable", "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
||||
--font-jetbrains: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
|
||||
--font-family-sans: var(--font-sans-loaded);
|
||||
--font-family-mono: var(--font-mono-loaded);
|
||||
--font-size-small: 0.6875rem;
|
||||
--font-size-base: 0.75rem;
|
||||
--font-size-large: 0.875rem;
|
||||
|
||||
Reference in New Issue
Block a user