diff --git a/package.json b/package.json index cf19bfa5c2a..5469842e3a3 100644 --- a/package.json +++ b/package.json @@ -84,7 +84,7 @@ "@babel/runtime": "^7.12.5", "@element-hq/element-web-module-api": "1.5.0", "@element-hq/web-shared-components": "link:packages/shared-components", - "@fontsource/inconsolata": "^5", + "@fontsource/fira-code": "^5", "@fontsource/inter": "^5", "@formatjs/intl-segmenter": "^11.5.7", "@matrix-org/analytics-events": "^0.30.0", diff --git a/playwright/e2e/audio-player/audio-player.spec.ts b/playwright/e2e/audio-player/audio-player.spec.ts index fbbc107ce32..282440f74e6 100644 --- a/playwright/e2e/audio-player/audio-player.spec.ts +++ b/playwright/e2e/audio-player/audio-player.spec.ts @@ -49,7 +49,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => { /** * Take snapshots of mx_EventTile_last on each layout, outputting log for reference/debugging. * @param detail The snapshot name. Used for outputting logs too. - * @param monospace This changes the font used to render the UI from a default one to Inconsolata. Set to false by default. + * @param monospace This changes the font used to render the UI from a default one to Fira Code. Set to false by default. */ const takeSnapshots = async (page: Page, app: ElementAppPage, detail: string, monospace = false) => { // Check that the audio player is rendered and its button becomes visible @@ -65,7 +65,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => { if (monospace) { // Assert that the monospace timer is visible - await expect(locator.locator("[role='timer']")).toHaveCSS("font-family", "Inconsolata"); + await expect(locator.locator("[role='timer']")).toHaveCSS("font-family", '"Fira Code"'); } }; @@ -73,7 +73,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => { // Enable system font and monospace setting await app.settings.setValue("useBundledEmojiFont", null, SettingLevel.DEVICE, false); await app.settings.setValue("useSystemFont", null, SettingLevel.DEVICE, true); - await app.settings.setValue("systemFont", null, SettingLevel.DEVICE, "Inconsolata"); + await app.settings.setValue("systemFont", null, SettingLevel.DEVICE, "Fira Code"); } // Check the status of the seek bar diff --git a/playwright/e2e/right-panel/right-panel.spec.ts b/playwright/e2e/right-panel/right-panel.spec.ts index 0fbd306d86f..5ebf793c3cb 100644 --- a/playwright/e2e/right-panel/right-panel.spec.ts +++ b/playwright/e2e/right-panel/right-panel.spec.ts @@ -164,7 +164,7 @@ test.describe("RightPanel", () => { css: ` /* Use monospace font for consistent mask width */ .mx_UserInfo_profile_mxid { - font-family: Inconsolata !important; + font-family: "Fira Code" !important; } `, }); diff --git a/playwright/e2e/user-view/user-view.spec.ts b/playwright/e2e/user-view/user-view.spec.ts index de97133e6a0..e09d8a15930 100644 --- a/playwright/e2e/user-view/user-view.spec.ts +++ b/playwright/e2e/user-view/user-view.spec.ts @@ -24,7 +24,7 @@ test.describe("UserView", () => { css: ` /* Use monospace font for consistent mask width */ .mx_UserInfo_profile_mxid { - font-family: Inconsolata !important; + font-family: "Fira Code" !important; } `, }); diff --git a/playwright/element-web-test.ts b/playwright/element-web-test.ts index fee9f070d8b..c75750519d3 100644 --- a/playwright/element-web-test.ts +++ b/playwright/element-web-test.ts @@ -144,7 +144,7 @@ export const expect = baseExpect.extend({ } /* Use monospace font for timestamp for consistent mask width */ .mx_MessageTimestamp { - font-family: Inconsolata !important; + font-family: "Fira Code" !important; } `; diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--bubble-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--bubble-layout-linux.png index d6bcac6994d..706ed777131 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--bubble-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--bubble-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--group-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--group-layout-linux.png index 38743dd61ca..73af329b429 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--group-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--group-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--irc-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--irc-layout-linux.png index bba959643a4..3e97f587c3c 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--irc-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--irc-layout-linux.png differ diff --git a/playwright/snapshots/devtools/upgraderoom.spec.ts/upgrade-room-linux.png b/playwright/snapshots/devtools/upgraderoom.spec.ts/upgrade-room-linux.png index 94f0c9a5996..4a27b52da03 100644 Binary files a/playwright/snapshots/devtools/upgraderoom.spec.ts/upgrade-room-linux.png and b/playwright/snapshots/devtools/upgraderoom.spec.ts/upgrade-room-linux.png differ diff --git a/playwright/snapshots/right-panel/right-panel.spec.ts/with-long-name-linux.png b/playwright/snapshots/right-panel/right-panel.spec.ts/with-long-name-linux.png index 9a3479a1e61..b1f73126c8a 100644 Binary files a/playwright/snapshots/right-panel/right-panel.spec.ts/with-long-name-linux.png and b/playwright/snapshots/right-panel/right-panel.spec.ts/with-long-name-linux.png differ diff --git a/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png b/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png index e9b8ad7885c..884b10b0386 100644 Binary files a/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png and b/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png differ diff --git a/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-bubble-layout-linux.png b/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-bubble-layout-linux.png index fd4e0b0011c..92a2f512969 100644 Binary files a/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-bubble-layout-linux.png and b/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-bubble-layout-linux.png differ diff --git a/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-group-layout-linux.png b/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-group-layout-linux.png index 05111f18224..ee90846a5bd 100644 Binary files a/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-group-layout-linux.png and b/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-group-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/code-block-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/code-block-linux.png index 6321da30108..2430ea5e5a9 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/code-block-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/code-block-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/edited-code-block-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/edited-code-block-linux.png index e59feb48bfd..5b931cb6746 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/edited-code-block-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/edited-code-block-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png index ae6d560c549..3528a86c9f6 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png index 618b61c50ed..ce0a7c5b64f 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/hovered-hidden-event-line-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/hovered-hidden-event-line-irc-layout-linux.png index 2eb3f8725db..8a86ec81bba 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/hovered-hidden-event-line-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/hovered-hidden-event-line-irc-layout-linux.png differ diff --git a/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png b/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png index a4f6a476f66..9926b5801af 100644 Binary files a/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png and b/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png differ diff --git a/res/css/views/settings/encryption/_ChangeRecoveryKey.pcss b/res/css/views/settings/encryption/_ChangeRecoveryKey.pcss index 872decadc86..e37000931fc 100644 --- a/res/css/views/settings/encryption/_ChangeRecoveryKey.pcss +++ b/res/css/views/settings/encryption/_ChangeRecoveryKey.pcss @@ -45,7 +45,7 @@ color: var(--cpd-color-text-secondary); .mx_KeyPanel_key { - font-family: Inconsolata, monospace; + font-family: "Fira Code", monospace; /* * From figma https://www.figma.com/design/qTWRfItpO3RdCjnTKPu4mL/Settings?node-id=375-77471&t=t7lozYrSI1AVZZ3U-4 */ diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index eea7197d9fc..7b95ded5d45 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -15,7 +15,7 @@ $font-family: "Noto Color Emoji"; $monospace-font-family: - "Inconsolata", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace, + "Fira Code", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace, "Noto Color Emoji"; /* unified palette */ diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index a6bb29bac44..8edf5b814a4 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -15,7 +15,7 @@ $font-family: "Noto Color Emoji"; $monospace-font-family: - "Inconsolata", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace, + "Fira Code", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace, "Noto Color Emoji"; /* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A120 */ diff --git a/src/theme.ts b/src/theme.ts index bfc471544c2..4cd07f32ab6 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -16,10 +16,10 @@ import "@fontsource/inter/600-italic.css"; import "@fontsource/inter/700.css"; import "@fontsource/inter/700-italic.css"; -import "@fontsource/inconsolata/latin-ext-400.css"; -import "@fontsource/inconsolata/latin-400.css"; -import "@fontsource/inconsolata/latin-ext-700.css"; -import "@fontsource/inconsolata/latin-700.css"; +import "@fontsource/fira-code/latin-ext-400.css"; +import "@fontsource/fira-code/latin-400.css"; +import "@fontsource/fira-code/latin-ext-700.css"; +import "@fontsource/fira-code/latin-700.css"; import { logger } from "matrix-js-sdk/src/logger"; diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts index ade56edb3e4..8c470aaa0d2 100644 --- a/src/utils/exportUtils/exportCSS.ts +++ b/src/utils/exportUtils/exportCSS.ts @@ -13,14 +13,14 @@ import customCSS from "!!raw-loader!./exportCustomCSS.css"; const cssSelectorTextClassesRegex = /\.[\w-]+/g; function mutateCssText(css: string): string { - // replace used fonts so that we don't have to bundle Inter & Inconsalata + // replace used fonts so that we don't have to bundle Inter & Fira Code const sansFont = `-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif`; return css .replace(/font-family: ?(Inter|'Inter'|"Inter")/g, `font-family: ${sansFont}`) .replace(/--cpd-font-family-sans: ?(Inter|'Inter'|"Inter")/g, `--cpd-font-family-sans: ${sansFont}`) .replace( - /font-family: ?Inconsolata/g, + /font-family: ?Fira Code/g, "font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace", ); } diff --git a/yarn.lock b/yarn.lock index 7177d436fbb..aa4e4ea055c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1814,10 +1814,10 @@ resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.10.tgz#a2a1e3812d14525f725d011a73eceb41fef5bc1c" integrity sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ== -"@fontsource/inconsolata@^5": - version "5.2.8" - resolved "https://registry.yarnpkg.com/@fontsource/inconsolata/-/inconsolata-5.2.8.tgz#593859a9229939558219efb9c894f9f5ee6c491a" - integrity sha512-lIZW+WOZYpUH91g9r6rYYhfTmptF3YPPM54ZOs8IYVeeL4SeiAu4tfj7mdr8llYEq31DLYgi6JtGIJa192gB0Q== +"@fontsource/fira-code@^5": + version "5.2.7" + resolved "https://registry.yarnpkg.com/@fontsource/fira-code/-/fira-code-5.2.7.tgz#9ecbd909d53e7196a5d895b601747fe34491fc6a" + integrity sha512-tnB9NNund9TwIym8/7DMJe573nlPEQb+fKUV5GL8TBYXjIhDvL0D7mgmNVNQUPhXp+R7RylQeiBdkA4EbOHPGQ== "@fontsource/inter@^5": version "5.2.8" @@ -4218,8 +4218,9 @@ classnames "^2.5.1" vaul "^1.0.0" -"@vector-im/matrix-wysiwyg-wasm@link:../../../.cache/yarn/v6/npm-@vector-im-matrix-wysiwyg-2.40.0-53c9ca5ea907d91e4515da64f20a82e5586b882c-integrity/node_modules/bindings/wysiwyg-wasm": +"@vector-im/matrix-wysiwyg-wasm@link:../../Library/Caches/Yarn/v6/npm-@vector-im-matrix-wysiwyg-2.40.0-53c9ca5ea907d91e4515da64f20a82e5586b882c-integrity/node_modules/bindings/wysiwyg-wasm": version "0.0.0" + uid "" "@vector-im/matrix-wysiwyg@2.40.0": version "2.40.0" @@ -9695,14 +9696,6 @@ matrix-widget-api@^1.14.0: "@types/events" "^3.0.0" events "^3.2.0" -matrix-widget-api@^1.14.0: - version "1.14.0" - resolved "https://registry.yarnpkg.com/matrix-widget-api/-/matrix-widget-api-1.14.0.tgz#aa90c40ace27d3165299f7dbc760a53001ce1446" - integrity sha512-DDvZGOQhI/rilPWg5VlLN7pHIsPt0Jt14lsuHDP+KU+fmpAQNITJ6aIld1ZoXWsrVGv2PS3x6K/MHtfruIOQJQ== - dependencies: - "@types/events" "^3.0.0" - events "^3.2.0" - mdn-data@2.0.28: version "2.0.28" resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.28.tgz#5ec48e7bef120654539069e1ae4ddc81ca490eba"