diff --git a/package.json b/package.json index 928131f817..b9d95dbf8e 100644 --- a/package.json +++ b/package.json @@ -84,11 +84,11 @@ "@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", - "@matrix-org/emojibase-bindings": "^1.3.4", + "@matrix-org/emojibase-bindings": "^1.5.0", "@matrix-org/react-sdk-module-api": "^2.4.0", "@matrix-org/spec": "^1.7.0", "@sentry/browser": "^10.0.0", @@ -109,7 +109,7 @@ "diff-dom": "^5.0.0", "diff-match-patch": "^1.0.5", "domutils": "^3.2.2", - "emojibase-regex": "15.3.2", + "emojibase-regex": "^17.0.0", "escape-html": "^1.0.3", "file-saver": "^2.0.5", "filesize": "11.0.13", diff --git a/playwright/e2e/audio-player/audio-player.spec.ts b/playwright/e2e/audio-player/audio-player.spec.ts index fbbc107ce3..282440f74e 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 0fbd306d86..5ebf793c3c 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/threads/threads.spec.ts b/playwright/e2e/threads/threads.spec.ts index 73c4c254db..5ffc2003b8 100644 --- a/playwright/e2e/threads/threads.spec.ts +++ b/playwright/e2e/threads/threads.spec.ts @@ -373,7 +373,7 @@ test.describe("Threads", () => { // Exclude timestamp, read marker, and maplibregl-map from snapshots const css = - ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker, .maplibregl-map { visibility: hidden !important; }"; + ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker, .maplibregl-map, .maplibregl-ctrl-attrib { visibility: hidden !important; }"; let locator = page.locator(".mx_RoomView_body"); // User sends message diff --git a/playwright/e2e/user-view/user-view.spec.ts b/playwright/e2e/user-view/user-view.spec.ts index de97133e6a..e09d8a1593 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 70d00671ff..bf1353ea6c 100644 --- a/playwright/element-web-test.ts +++ b/playwright/element-web-test.ts @@ -145,7 +145,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 d6bcac6994..706ed77713 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 38743dd61c..73af329b42 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 bba959643a..3e97f587c3 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 94f0c9a599..4a27b52da0 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 9a3479a1e6..b1f73126c8 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 e9b8ad7885..884b10b038 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/Reply-to-the-location-on-ThreadView-linux.png b/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png index 37145a59b5..92e8bb2d9d 100644 Binary files a/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png and b/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-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 fd4e0b0011..92a2f51296 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 05111f1822..ee90846a5b 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 6321da3010..2430ea5e5a 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 e59feb48bf..5b931cb674 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 ae6d560c54..3528a86c9f 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 618b61c50e..ce0a7c5b64 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 2eb3f8725d..8a86ec81bb 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 a4f6a476f6..9926b5801a 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 872decadc8..e37000931f 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 eea7197d9f..7b95ded5d4 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 a6bb29bac4..8edf5b814a 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 bfc471544c..4cd07f32ab 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 ade56edb3e..8c470aaa0d 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 aa82b69f1d..75405a3f3c 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" @@ -2377,13 +2377,13 @@ resolved "https://registry.yarnpkg.com/@matrix-org/analytics-events/-/analytics-events-0.30.0.tgz#67e87e56518fec5330978bf1fcc8d7bb66cdd9d1" integrity sha512-RYIgYdYIvJoTzWaTeqskNGYt6w+6wKP43xMcfpdTKhDm/o2s4keuzRnRG9Qkfg10/3dGOjYCPfH78cXPKDzxeg== -"@matrix-org/emojibase-bindings@^1.3.4": - version "1.3.4" - resolved "https://registry.yarnpkg.com/@matrix-org/emojibase-bindings/-/emojibase-bindings-1.3.4.tgz#b0dad8e8b8bbe433e419b59e38f933bcdaf9c271" - integrity sha512-+nhBg0dxjy3U4/Tn6WIsnzqiqazc0pfStc2dkSBxDnc4xnimDB6vcIad53fUIsl7SeT50ake0hhnBJs0ZDDk6Q== +"@matrix-org/emojibase-bindings@^1.5.0": + version "1.5.0" + resolved "https://registry.yarnpkg.com/@matrix-org/emojibase-bindings/-/emojibase-bindings-1.5.0.tgz#b1e9fd567341e4eeaba4e2864ee431916ffc88f7" + integrity sha512-+W9/ow2Z3iQa7ZOF698PBhwNcgGkn36B5Sr8VDPx8N8CH7+Uw+7TrtbtKPZVdgf4m/THmgmfX40jS5YDBsLaYg== dependencies: - emojibase "^15.3.1" - emojibase-data "^15.3.1" + emojibase "^17.0.0" + emojibase-data "^17.0.0" "@matrix-org/matrix-sdk-crypto-wasm@^15.3.0": version "15.3.0" @@ -6430,20 +6430,20 @@ emoji-regex@^9.2.2: resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72" integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg== -emojibase-data@^15.3.1: - version "15.3.2" - resolved "https://registry.yarnpkg.com/emojibase-data/-/emojibase-data-15.3.2.tgz#2742246bfe14f16a7829b42ca156dec09934cf85" - integrity sha512-TpDyTDDTdqWIJixV5sTA6OQ0P0JfIIeK2tFRR3q56G9LK65ylAZ7z3KyBXokpvTTJ+mLUXQXbLNyVkjvnTLE+A== +emojibase-data@^17.0.0: + version "17.0.0" + resolved "https://registry.yarnpkg.com/emojibase-data/-/emojibase-data-17.0.0.tgz#5816fba6395da6b567fbd54b029ca6b5de2d9255" + integrity sha512-Yvgb5AWoHViHV/gq1qr5ZAarcBip+B27/ZLRsUJkbgAEaLlZ/fof9g882LTpmEpyhBNEC0m2SEmItljHsTygjA== -emojibase-regex@15.3.2: - version "15.3.2" - resolved "https://registry.yarnpkg.com/emojibase-regex/-/emojibase-regex-15.3.2.tgz#5175231715b86d4b437754527288844a6c29318f" - integrity sha512-ue6BVeb2qu33l97MkxcOoyMJlg6Tug3eTv2z1at+M9TjvlWKvdmAPvZIDG1JbT2RH3FSyJNLucO5K5H/yxT03w== +emojibase-regex@^17.0.0: + version "17.0.0" + resolved "https://registry.yarnpkg.com/emojibase-regex/-/emojibase-regex-17.0.0.tgz#9133e627e0884f494000e7a51c2d963482cb9b45" + integrity sha512-iWlqiz2l2zNf2lDqgN/7qjqKHVUX6H4D+8F5vDZkgjyWyRFXcA5K4rxkoTl7AJmyjHnoytw0m/do2SrGByui+g== -emojibase@^15.3.1: - version "15.3.1" - resolved "https://registry.yarnpkg.com/emojibase/-/emojibase-15.3.1.tgz#7f6ff5482486f23e59a457de64e974bd35f3c9a3" - integrity sha512-GNsjHnG2J3Ktg684Fs/vZR/6XpOSkZPMAv85EHrr6br2RN2cJNwdS4am/3YSK3y+/gOv2kmoK3GGdahXdMxg2g== +emojibase@^17.0.0: + version "17.0.0" + resolved "https://registry.yarnpkg.com/emojibase/-/emojibase-17.0.0.tgz#711350fe0f2862945fecd06147370623874ba15e" + integrity sha512-bXdpf4HPY3p41zK5swVKZdC/VynsMZ4LoLxdYDE+GucqkFwzcM1GVc4ODfYAlwoKaf2U2oNNUoOO78N96ovpBA== emojis-list@^3.0.0: version "3.0.0"