diff --git a/.changeset/kilo-console-cloud-fonts.md b/.changeset/kilo-console-cloud-fonts.md new file mode 100644 index 00000000000..da077665be5 --- /dev/null +++ b/.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. \ No newline at end of file diff --git a/packages/kilo-console/src/styles/base.css b/packages/kilo-console/src/styles/base.css index c0e70b77935..12f44c2f7e6 100644 --- a/packages/kilo-console/src/styles/base.css +++ b/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); } diff --git a/packages/kilo-console/src/styles/profile.css b/packages/kilo-console/src/styles/profile.css index c5630cfa28e..6014b408e7b 100644 --- a/packages/kilo-console/src/styles/profile.css +++ b/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; diff --git a/packages/kilo-console/src/styles/resolved.css b/packages/kilo-console/src/styles/resolved.css index bea5a2cf8f3..688c5843401 100644 --- a/packages/kilo-console/src/styles/resolved.css +++ b/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 { diff --git a/packages/kilo-web-ui/src/assets/fonts/ATTRIBUTION.md b/packages/kilo-web-ui/src/assets/fonts/ATTRIBUTION.md new file mode 100644 index 00000000000..9c1e7ae2a3d --- /dev/null +++ b/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. \ No newline at end of file diff --git a/packages/kilo-web-ui/src/assets/fonts/Inter-Variable-Italic.woff2 b/packages/kilo-web-ui/src/assets/fonts/Inter-Variable-Italic.woff2 new file mode 100644 index 00000000000..f22ec255493 Binary files /dev/null and b/packages/kilo-web-ui/src/assets/fonts/Inter-Variable-Italic.woff2 differ diff --git a/packages/kilo-web-ui/src/assets/fonts/Inter-Variable.woff2 b/packages/kilo-web-ui/src/assets/fonts/Inter-Variable.woff2 new file mode 100644 index 00000000000..22a12b04e1a Binary files /dev/null and b/packages/kilo-web-ui/src/assets/fonts/Inter-Variable.woff2 differ diff --git a/packages/kilo-web-ui/src/assets/fonts/JetBrainsMono-Variable.woff2 b/packages/kilo-web-ui/src/assets/fonts/JetBrainsMono-Variable.woff2 new file mode 100644 index 00000000000..0d8735149a1 Binary files /dev/null and b/packages/kilo-web-ui/src/assets/fonts/JetBrainsMono-Variable.woff2 differ diff --git a/packages/kilo-web-ui/src/assets/fonts/RobotoMono-Variable.woff2 b/packages/kilo-web-ui/src/assets/fonts/RobotoMono-Variable.woff2 new file mode 100644 index 00000000000..f8b74ce4229 Binary files /dev/null and b/packages/kilo-web-ui/src/assets/fonts/RobotoMono-Variable.woff2 differ diff --git a/packages/kilo-web-ui/src/styles/theme.css b/packages/kilo-web-ui/src/styles/theme.css index 4e39883ba55..fa05405b36f 100644 --- a/packages/kilo-web-ui/src/styles/theme.css +++ b/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;