Merge pull request #11564 from IamCoder18/superficial-chimpanzee

feat(kilo-console): align fonts with Kilo Cloud

.changeset/kilo-console-cloud-fonts.md

@@ -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.

packages/kilo-console/src/styles/base.css

@@ -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);
 }

packages/kilo-console/src/styles/profile.css

@@ -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;

packages/kilo-console/src/styles/resolved.css

@@ -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 {

packages/kilo-web-ui/src/assets/fonts/ATTRIBUTION.md

@@ -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.

packages/kilo-web-ui/src/styles/theme.css

@@ -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;