From 6808daef0f60aa8d50e7dee57aabb5a5e99481d5 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Mon, 27 Nov 2023 18:35:29 -0300 Subject: [PATCH] chore(site): use variable font for Inter (#10903) --- site/jest.config.ts | 1 + site/package.json | 2 +- site/pnpm-lock.yaml | 16 ++++++++-------- .../WorkspaceBuildLogs/WorkspaceBuildLogs.tsx | 4 ++-- site/src/theme/constants.ts | 2 +- site/src/theme/globalFonts.ts | 5 +---- 6 files changed, 14 insertions(+), 16 deletions(-) diff --git a/site/jest.config.ts b/site/jest.config.ts index de1f518e97..410234fe6e 100644 --- a/site/jest.config.ts +++ b/site/jest.config.ts @@ -35,6 +35,7 @@ module.exports = { moduleDirectories: ["node_modules", "/src"], moduleNameMapper: { "\\.css$": "/src/testHelpers/styleMock.ts", + "^@fontsource": "/src/testHelpers/styleMock.ts", }, }, { diff --git a/site/package.json b/site/package.json index da2eb257be..726edcb633 100644 --- a/site/package.json +++ b/site/package.json @@ -34,8 +34,8 @@ "@emotion/react": "11.11.1", "@emotion/styled": "11.11.0", "@fastly/performance-observer-polyfill": "2.0.0", + "@fontsource-variable/inter": "5.0.15", "@fontsource/ibm-plex-mono": "5.0.5", - "@fontsource/inter": "5.0.2", "@monaco-editor/react": "4.6.0", "@mui/icons-material": "5.14.0", "@mui/lab": "5.0.0-alpha.129", diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml index 6b092086f1..b92febe99c 100644 --- a/site/pnpm-lock.yaml +++ b/site/pnpm-lock.yaml @@ -27,12 +27,12 @@ dependencies: '@fastly/performance-observer-polyfill': specifier: 2.0.0 version: 2.0.0 + '@fontsource-variable/inter': + specifier: 5.0.15 + version: 5.0.15 '@fontsource/ibm-plex-mono': specifier: 5.0.5 version: 5.0.5 - '@fontsource/inter': - specifier: 5.0.2 - version: 5.0.2 '@monaco-editor/react': specifier: 4.6.0 version: 4.6.0(monaco-editor@0.44.0)(react-dom@18.2.0)(react@18.2.0) @@ -2453,12 +2453,12 @@ packages: resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==} dev: true - /@fontsource/ibm-plex-mono@5.0.5: - resolution: {integrity: sha512-A1rDiQB7X7oOgsZbjeSQV3r/ZOBEZDjKEnlLvWqd4sMBZwGKTDnCxQYoqedY/8if2NXyiQoLXPdV5RpQ/3BerQ==} + /@fontsource-variable/inter@5.0.15: + resolution: {integrity: sha512-CdQPQQgOVxg6ifmbrqYZeUqtQf7p2wPn6EvJ4M+vdNnsmYZgYwPPPQDNlIOU7LCUlSGaN26v6H0uA030WKn61g==} dev: false - /@fontsource/inter@5.0.2: - resolution: {integrity: sha512-pQ1ms5nbprD+7Dnu5h0T9XOSJi5pvOanLCxi6mA9/5wclXFkkzvZo31ddoD8/Urncx11967qTnvGglPeWEOT+Q==} + /@fontsource/ibm-plex-mono@5.0.5: + resolution: {integrity: sha512-A1rDiQB7X7oOgsZbjeSQV3r/ZOBEZDjKEnlLvWqd4sMBZwGKTDnCxQYoqedY/8if2NXyiQoLXPdV5RpQ/3BerQ==} dev: false /@humanwhocodes/config-array@0.11.13: @@ -13444,7 +13444,7 @@ packages: peerDependencies: eslint: '>=7' meow: ^9.0.0 - optionator: 0.9.3 + optionator: ^0.9.1 stylelint: '>=13' typescript: '*' vite: '>=2.0.0' diff --git a/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx b/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx index 6403720652..a0fdba3f9b 100644 --- a/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx +++ b/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx @@ -1,7 +1,7 @@ import dayjs from "dayjs"; import { type ComponentProps, type FC, Fragment } from "react"; import type { ProvisionerJobLog } from "api/typesGenerated"; -import { MONOSPACE_FONT_FAMILY } from "theme/constants"; +import { BODY_FONT_FAMILY, MONOSPACE_FONT_FAMILY } from "theme/constants"; import { Logs } from "./Logs"; import Box from "@mui/material/Box"; import { type Interpolation, type Theme } from "@emotion/react"; @@ -100,7 +100,7 @@ const styles = { padding: "4px 24px", display: "flex", alignItems: "center", - fontFamily: "Inter", + fontFamily: BODY_FONT_FAMILY, borderBottom: `1px solid ${theme.palette.divider}`, background: theme.palette.background.default, diff --git a/site/src/theme/constants.ts b/site/src/theme/constants.ts index 5c58eed56a..06fafd085f 100644 --- a/site/src/theme/constants.ts +++ b/site/src/theme/constants.ts @@ -1,7 +1,7 @@ export const borderRadius = 8; export const MONOSPACE_FONT_FAMILY = "'IBM Plex Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'Liberation Mono', 'Monaco', 'Courier New', Courier, monospace"; -export const BODY_FONT_FAMILY = `"Inter", system-ui, sans-serif`; +export const BODY_FONT_FAMILY = `"Inter Variable", system-ui, sans-serif`; export const navHeight = 62; export const containerWidth = 1380; export const containerWidthMedium = 1080; diff --git a/site/src/theme/globalFonts.ts b/site/src/theme/globalFonts.ts index d840a8738b..24371dd575 100644 --- a/site/src/theme/globalFonts.ts +++ b/site/src/theme/globalFonts.ts @@ -2,7 +2,4 @@ import "@fontsource/ibm-plex-mono/400.css"; import "@fontsource/ibm-plex-mono/600.css"; // Main body copy font -import "@fontsource/inter/300.css"; -import "@fontsource/inter/400.css"; -import "@fontsource/inter/500.css"; -import "@fontsource/inter/600.css"; +import "@fontsource-variable/inter";