From 9c7d935aae8a86c5b4970600b443a12a4a7bd77e Mon Sep 17 00:00:00 2001 From: Germain Date: Thu, 29 Jun 2023 11:30:25 +0100 Subject: [PATCH] Compound Typography pass (#11103) * Integrate compound design tokens The icons should not be included in this repo, and should live in the compound design token repo, but for simplicity sake at this phase of the integration they will be added here * Delete unused or incorrect - sass variables * Typography pass * Deprecate _font-weights.pcss and use Compound instead * lint fix * Fix snapshot * Fix typography pass feedback * Remove unwanted e2e test cypress tests should test functionality not visual output. And we should not test visual output by inspecting CSS properties * lintfix * Migration script for baseFontSize * Updates after design review * Update font scaling panel to use min/max size * Fix custom font * Fix font slider e2e test * Update custom font * Update new baseFontSizeV2 * Disambiguate heading props * Fix appearance test * change max font size * fix e2ee test * fix tests * test baseFontSize migration code * typescript strict * Migrate baseFontSize account setting * Change assertion for font size * Fix font size controller test --- cypress/e2e/right-panel/file-panel.spec.ts | 16 ---- .../appearance-user-settings-tab.spec.ts | 12 ++- cypress/e2e/timeline/timeline.spec.ts | 14 --- res/css/_common.pcss | 34 +++---- res/css/_components.pcss | 1 - res/css/_font-sizes.pcss | 88 ++++++----------- res/css/_font-weights.pcss | 20 ---- .../views/beacon/_BeaconListItem.pcss | 2 +- .../views/beacon/_DialogSidebar.pcss | 2 +- .../views/beacon/_OwnBeaconStatus.pcss | 2 +- .../views/elements/_AppPermission.pcss | 4 +- .../views/elements/_FilterDropdown.pcss | 2 +- .../views/elements/_FilterTabGroup.pcss | 2 +- res/css/components/views/pips/_WidgetPip.pcss | 2 +- .../settings/devices/_DeviceSecurityCard.pcss | 2 +- .../views/spaces/_QuickThemeSwitcher.pcss | 2 +- .../components/views/typography/_Caption.pcss | 2 +- res/css/structures/_ContextualMenu.pcss | 1 - res/css/structures/_FilePanel.pcss | 6 +- res/css/structures/_GenericDropdownMenu.pcss | 2 +- res/css/structures/_HomePage.pcss | 8 +- res/css/structures/_LargeLoader.pcss | 2 +- res/css/structures/_QuickSettingsButton.pcss | 4 +- res/css/structures/_RightPanel.pcss | 4 +- res/css/structures/_RoomSearch.pcss | 6 +- res/css/structures/_RoomStatusBar.pcss | 4 +- res/css/structures/_SpaceHierarchy.pcss | 10 +- res/css/structures/_SpacePanel.pcss | 9 +- res/css/structures/_SpaceRoomView.pcss | 6 +- res/css/structures/_ToastContainer.pcss | 6 +- res/css/structures/_UserMenu.pcss | 13 +-- res/css/structures/auth/_Login.pcss | 2 +- res/css/structures/auth/_Registration.pcss | 2 +- res/css/views/auth/_AuthBody.pcss | 15 ++- res/css/views/auth/_AuthFooter.pcss | 2 +- res/css/views/auth/_CompleteSecurityBody.pcss | 5 +- res/css/views/auth/_LanguageSelector.pcss | 3 +- res/css/views/auth/_LoginWithQR.pcss | 4 +- res/css/views/beta/_BetaCard.pcss | 10 +- .../context_menus/_IconizedContextMenu.pcss | 5 +- .../dialogs/_AddExistingToSpaceDialog.pcss | 6 +- res/css/views/dialogs/_CompoundDialog.pcss | 2 +- .../dialogs/_ConfirmUserActionDialog.pcss | 2 +- res/css/views/dialogs/_CreateRoomDialog.pcss | 4 +- res/css/views/dialogs/_ExportDialog.pcss | 2 +- res/css/views/dialogs/_FeedbackDialog.pcss | 2 +- res/css/views/dialogs/_ForwardDialog.pcss | 2 +- .../_GenericFeatureFeedbackDialog.pcss | 2 +- res/css/views/dialogs/_InviteDialog.pcss | 10 +- res/css/views/dialogs/_JoinRuleDropdown.pcss | 6 +- .../_ManageRestrictedJoinRuleDialog.pcss | 2 +- .../dialogs/_MessageEditHistoryDialog.pcss | 2 +- res/css/views/dialogs/_PollCreateDialog.pcss | 2 +- .../dialogs/_RoomSettingsDialogBridges.pcss | 2 +- .../views/dialogs/_ServerPickerDialog.pcss | 5 +- .../views/dialogs/_SpaceSettingsDialog.pcss | 6 +- res/css/views/dialogs/_SpotlightDialog.pcss | 2 +- res/css/views/dialogs/_VerifyEMailDialog.pcss | 4 +- .../security/_CreateSecretStorageDialog.pcss | 4 +- res/css/views/elements/_AccessibleButton.pcss | 4 +- res/css/views/elements/_ExternalLink.pcss | 2 +- res/css/views/elements/_FacePile.pcss | 2 +- res/css/views/elements/_Field.pcss | 8 +- .../elements/_GenericEventListSummary.pcss | 13 ++- res/css/views/elements/_RoomAliasField.pcss | 2 +- res/css/views/elements/_SSOButtons.pcss | 3 +- res/css/views/elements/_ServerPicker.pcss | 5 +- res/css/views/elements/_SettingsFlag.pcss | 4 +- res/css/views/elements/_Slider.pcss | 2 +- res/css/views/elements/_StyledCheckbox.pcss | 5 +- .../views/elements/_StyledRadioButton.pcss | 2 +- res/css/views/elements/_Tooltip.pcss | 2 +- res/css/views/elements/_UseCaseSelection.pcss | 2 +- res/css/views/emojipicker/_EmojiPicker.pcss | 4 +- res/css/views/messages/_CallEvent.pcss | 2 +- res/css/views/messages/_DateSeparator.pcss | 2 +- .../views/messages/_DisambiguatedProfile.pcss | 5 +- res/css/views/messages/_EventTileBubble.pcss | 2 +- res/css/views/messages/_LegacyCallEvent.pcss | 2 +- res/css/views/messages/_MPollBody.pcss | 2 +- res/css/views/messages/_MediaBody.pcss | 2 +- res/css/views/right_panel/_BaseCard.pcss | 15 ++- .../views/right_panel/_RoomSummaryCard.pcss | 7 +- res/css/views/right_panel/_ThreadPanel.pcss | 4 +- res/css/views/right_panel/_UserInfo.pcss | 15 ++- .../views/right_panel/_VerificationPanel.pcss | 2 +- .../views/room_settings/_AliasSettings.pcss | 2 +- .../views/rooms/_DecryptionFailureBar.pcss | 2 +- res/css/views/rooms/_EntityTile.pcss | 2 +- res/css/views/rooms/_EventTile.pcss | 9 +- res/css/views/rooms/_MemberInfo.pcss | 2 +- res/css/views/rooms/_MemberList.pcss | 4 +- res/css/views/rooms/_MessageComposer.pcss | 4 +- .../rooms/_MessageComposerFormatBar.pcss | 2 +- res/css/views/rooms/_NewRoomIntro.pcss | 2 +- res/css/views/rooms/_PinnedEventTile.pcss | 2 +- res/css/views/rooms/_ReadReceiptGroup.pcss | 2 +- res/css/views/rooms/_ReplyTile.pcss | 4 +- res/css/views/rooms/_RoomBreadcrumbs.pcss | 3 +- res/css/views/rooms/_RoomCallBanner.pcss | 2 +- res/css/views/rooms/_RoomHeader.pcss | 12 +-- res/css/views/rooms/_RoomListHeader.pcss | 5 +- res/css/views/rooms/_RoomPreviewBar.pcss | 4 +- res/css/views/rooms/_RoomPreviewCard.pcss | 4 +- res/css/views/rooms/_RoomSublist.pcss | 6 +- res/css/views/rooms/_RoomTile.pcss | 5 +- res/css/views/rooms/_SearchBar.pcss | 2 +- res/css/views/rooms/_SendMessageComposer.pcss | 2 +- res/css/views/rooms/_ThreadSummary.pcss | 2 +- res/css/views/rooms/_WhoIsTypingTile.pcss | 3 +- .../_SendWysiwygComposer.pcss | 2 +- res/css/views/settings/_JoinRuleSettings.pcss | 7 +- res/css/views/settings/_Notifications.pcss | 5 +- res/css/views/settings/_ProfileSettings.pcss | 2 +- res/css/views/settings/_SettingsFieldset.pcss | 6 +- res/css/views/settings/_ThemeChoicePanel.pcss | 2 +- res/css/views/settings/tabs/_SettingsTab.pcss | 2 +- .../tabs/room/_NotificationSettingsTab.pcss | 2 +- res/css/views/spaces/_SpaceBasicSettings.pcss | 2 +- res/css/views/spaces/_SpaceCreateMenu.pcss | 2 +- .../views/terms/_InlineTermsAgreement.pcss | 2 +- res/css/views/toasts/_AnalyticsToast.pcss | 4 +- res/css/views/toasts/_IncomingCallToast.pcss | 2 +- res/css/views/typography/_Heading.pcss | 34 +++---- .../_UserOnboardingButton.pcss | 2 +- res/css/views/voip/_DialPad.pcss | 2 +- res/css/views/voip/_DialPadContextMenu.pcss | 6 +- res/css/views/voip/_DialPadModal.pcss | 4 +- res/css/voice-broadcast/atoms/_LiveBadge.pcss | 2 +- .../atoms/_VoiceBroadcastHeader.pcss | 2 +- .../structures/NotificationPanel.tsx | 2 +- src/components/structures/ThreadPanel.tsx | 2 +- src/components/structures/ThreadView.tsx | 2 +- src/components/views/beacon/DialogSidebar.tsx | 2 +- .../views/dialogs/AppDownloadDialog.tsx | 6 +- src/components/views/dialogs/BaseDialog.tsx | 3 +- .../views/elements/AppPermission.tsx | 2 +- .../views/location/EnableLiveShare.tsx | 2 +- src/components/views/location/MapError.tsx | 2 +- src/components/views/location/ShareType.tsx | 2 +- .../views/polls/pollHistory/PollHistory.tsx | 2 +- .../views/right_panel/PinnedMessagesCard.tsx | 4 +- .../views/right_panel/TimelineCard.tsx | 2 +- .../views/right_panel/WidgetCard.tsx | 2 +- .../views/settings/FontScalingPanel.tsx | 21 ++-- .../views/settings/IntegrationManager.tsx | 4 +- .../views/settings/SetIntegrationManager.tsx | 4 +- .../settings/devices/DeviceDetailHeading.tsx | 2 +- .../views/settings/devices/DeviceTile.tsx | 2 +- .../views/settings/shared/SettingsSection.tsx | 2 +- .../shared/SettingsSubsectionHeading.tsx | 2 +- .../tabs/room/NotificationSettingsTab.tsx | 2 +- .../tabs/user/GeneralUserSettingsTab.tsx | 2 +- src/components/views/typography/Heading.tsx | 19 +++- .../user-onboarding/UserOnboardingButton.tsx | 2 +- .../user-onboarding/UserOnboardingHeader.tsx | 2 +- .../user-onboarding/UserOnboardingList.tsx | 2 +- .../user-onboarding/UserOnboardingTask.tsx | 2 +- src/dispatcher/actions.ts | 5 + src/models/Call.ts | 2 +- src/settings/Settings.tsx | 12 +++ .../controllers/FontSizeController.ts | 18 +++- src/settings/watchers/FontWatcher.ts | 95 ++++++++++++++----- .../__snapshots__/MatrixChat-test.tsx.snap | 4 +- .../ChangelogDialog-test.tsx.snap | 2 +- .../DevtoolsDialog-test.tsx.snap | 2 +- .../__snapshots__/ExportDialog-test.tsx.snap | 2 +- .../FeedbackDialog-test.tsx.snap | 2 +- ...lDeviceKeyVerificationDialog-test.tsx.snap | 4 +- .../MessageEditHistoryDialog-test.tsx.snap | 4 +- .../ServerPickerDialog-test.tsx.snap | 2 +- .../CreateKeyBackupDialog-test.tsx.snap | 6 +- .../ImportE2eKeysDialog-test.tsx.snap | 2 +- .../views/settings/FontScalingPanel-test.tsx | 4 +- .../FontScalingPanel-test.tsx.snap | 16 ++-- .../ThemeChoicePanel-test.tsx.snap | 2 +- .../CurrentDeviceSection-test.tsx.snap | 6 +- .../LoginWithQRSection-test.tsx.snap | 4 +- .../SecurityRecommendations-test.tsx.snap | 6 +- .../EmailAddresses-test.tsx.snap | 6 +- .../__snapshots__/PhoneNumbers-test.tsx.snap | 6 +- .../SettingsSubsection-test.tsx.snap | 8 +- .../SettingsSubsectionHeading-test.tsx.snap | 4 +- .../AdvancedRoomSettingsTab-test.tsx.snap | 4 +- .../SecurityRoomSettingsTab-test.tsx.snap | 4 +- .../AppearanceUserSettingsTab-test.tsx.snap | 22 ++--- .../GeneralUserSettingsTab-test.tsx.snap | 2 +- .../KeyboardUserSettingsTab-test.tsx.snap | 14 +-- .../MjolnirUserSettingsTab-test.tsx.snap | 4 +- .../PreferencesUserSettingsTab-test.tsx.snap | 22 ++--- .../SecurityUserSettingsTab-test.tsx.snap | 12 +-- .../SessionManagerTab-test.tsx.snap | 4 +- .../SidebarUserSettingsTab-test.tsx.snap | 2 +- .../AddExistingToSpaceDialog-test.tsx.snap | 2 +- .../views/typography/Heading-test.tsx | 14 ++- .../__snapshots__/Heading-test.tsx.snap | 13 +++ test/models/Call-test.ts | 4 +- .../controllers/FontSizeController-test.ts | 7 +- test/settings/watchers/FontWatcher-test.tsx | 55 ++++++++--- 199 files changed, 606 insertions(+), 608 deletions(-) delete mode 100644 res/css/_font-weights.pcss diff --git a/cypress/e2e/right-panel/file-panel.spec.ts b/cypress/e2e/right-panel/file-panel.spec.ts index b36edfb276..fa436772ba 100644 --- a/cypress/e2e/right-panel/file-panel.spec.ts +++ b/cypress/e2e/right-panel/file-panel.spec.ts @@ -238,22 +238,6 @@ describe("FilePanel", () => { }); }); }); - - it("should not add inline padding to a tile when it is selected with right click", () => { - // Upload a file - uploadFile("cypress/fixtures/1sec.ogg"); - - cy.get(".mx_FilePanel .mx_RoomView_MessageList").within(() => { - // Wait until the spinner of the audio player vanishes - cy.get(".mx_InlineSpinner").should("not.exist"); - - // Right click the uploaded file to select the tile - cy.get(".mx_EventTile").rightclick(); - - // Assert that inline padding is not applied - cy.get(".mx_EventTile_selected .mx_EventTile_line").should("have.css", "padding-inline", "0px"); - }); - }); }); describe("download", () => { diff --git a/cypress/e2e/settings/appearance-user-settings-tab.spec.ts b/cypress/e2e/settings/appearance-user-settings-tab.spec.ts index cb22d26b58..e57f00a139 100644 --- a/cypress/e2e/settings/appearance-user-settings-tab.spec.ts +++ b/cypress/e2e/settings/appearance-user-settings-tab.spec.ts @@ -122,9 +122,10 @@ describe("Appearance user settings tab", () => { // Click the left position of the slider cy.get("input").realClick({ position: "left" }); + const MIN_FONT_SIZE = 11; // Assert that the smallest font size is selected - cy.get("input[value='13']").should("exist"); - cy.get("output .mx_Slider_selection_label").findByText("13"); + cy.get(`input[value='${MIN_FONT_SIZE}']`).should("exist"); + cy.get("output .mx_Slider_selection_label").findByText(MIN_FONT_SIZE); }); cy.get(".mx_FontScalingPanel_fontSlider").percySnapshotElement("Font size slider - smallest (13)", { @@ -135,12 +136,13 @@ describe("Appearance user settings tab", () => { // Click the right position of the slider cy.get("input").realClick({ position: "right" }); + const MAX_FONT_SIZE = 21; // Assert that the largest font size is selected - cy.get("input[value='18']").should("exist"); - cy.get("output .mx_Slider_selection_label").findByText("18"); + cy.get(`input[value='${MAX_FONT_SIZE}']`).should("exist"); + cy.get("output .mx_Slider_selection_label").findByText(MAX_FONT_SIZE); }); - cy.get(".mx_FontScalingPanel_fontSlider").percySnapshotElement("Font size slider - largest (18)", { + cy.get(".mx_FontScalingPanel_fontSlider").percySnapshotElement("Font size slider - largest (21)", { widths: [486], }); }); diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index 10650d14f4..6acf8a19b2 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -204,13 +204,6 @@ describe("Timeline", () => { cy.findByRole("button", { name: "collapse" }).should("exist"); }); - // Check the height of expanded GELS line - cy.get(".mx_GenericEventListSummary[data-layout=irc] .mx_GenericEventListSummary_spacer").should( - "have.css", - "line-height", - "18px", // var(--irc-line-height): $font-18px (See: _IRCLayout.pcss) - ); - cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS on IRC layout", { percyCSS }); }); @@ -238,13 +231,6 @@ describe("Timeline", () => { cy.findByRole("button", { name: "collapse" }).should("exist"); }); - // Check the height of expanded GELS line - cy.get(".mx_GenericEventListSummary[data-layout=group] .mx_GenericEventListSummary_spacer").should( - "have.css", - "line-height", - "22px", // $font-22px (See: _GenericEventListSummary.pcss) - ); - cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS on modern layout", { percyCSS }); }); diff --git a/res/css/_common.pcss b/res/css/_common.pcss index b0d2a1d209..88f7de5e03 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -2,7 +2,7 @@ Copyright 2015, 2016 OpenMarket Ltd Copyright 2017 Vector Creations Ltd Copyright 2017 - 2019 New Vector Ltd -Copyright 2019 - 2021 The Matrix.org Foundation C.I.C +Copyright 2019 - 2023 The Matrix.org Foundation C.I.C Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -19,7 +19,6 @@ limitations under the License. @import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css"); @import "./_font-sizes.pcss"; -@import "./_font-weights.pcss"; @import "./_animations.pcss"; @import "./_spacing.pcss"; @import url("maplibre-gl/dist/maplibre-gl.css"); @@ -77,8 +76,9 @@ html { } body { - font-family: $font-family; - font-size: $font-15px; + font: var(--cpd-font-body-md-regular); + letter-spacing: var(--cpd-font-letter-spacing-body-md); + background-color: $background; color: $primary-content; border: 0px; @@ -119,8 +119,8 @@ b { h2 { color: $primary-content; - font-weight: 400; - font-size: $font-18px; + font: var(--cpd-font-heading-lg-regular); + letter-spacing: var(--cpd-font-letter-spacing-heading-lg); margin-top: 16px; margin-bottom: 16px; } @@ -134,10 +134,9 @@ a:visited { input[type="text"], input[type="search"], input[type="password"] { - font-family: inherit; padding: 9px; - font-size: $font-14px; - font-weight: var(--font-semi-bold); + font: var(--cpd-font-body-md-semibold); + font-weight: var(--cpd-font-weight-semibold); min-width: 0; } @@ -337,11 +336,9 @@ legend { /* Styles copied/inspired by GroupLayout, ReplyTile, and EventTile variants. */ .markdown-body { - font-family: inherit !important; - white-space: normal !important; - line-height: inherit !important; + font: var(--cpd-font-body-md-regular) !important; + letter-spacing: var(--cpd-font-letter-spacing-body-md); color: inherit; /* inherit the colour from the dark or light theme by default (but not for code blocks) */ - font-size: $font-14px; pre, code { @@ -498,7 +495,7 @@ legend { .mx_Dialog_content { margin: 24px 0 68px; - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); color: $primary-content; word-wrap: break-word; } @@ -535,8 +532,7 @@ legend { vertical-align: middle; border: 0px; border-radius: 8px; - font-family: $font-family; - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); color: $button-fg-color; background-color: $accent; width: auto; @@ -570,7 +566,7 @@ legend { margin-bottom: 5px; /* flip colours for the secondary ones */ - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); border: 1px solid $accent; color: $accent; background-color: $button-secondary-bg-color; @@ -758,7 +754,7 @@ legend { @define-mixin LegacyCallButton { box-sizing: border-box; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); height: $font-24px; line-height: $font-24px; margin-right: 0; @@ -780,7 +776,7 @@ legend { @define-mixin ThreadRepliesAmount { color: $secondary-content; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); white-space: nowrap; position: relative; padding: 0 $spacing-12 0 $spacing-8; diff --git a/res/css/_components.pcss b/res/css/_components.pcss index 3e8e4cd80b..2851313c54 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -2,7 +2,6 @@ @import "./_animations.pcss"; @import "./_common.pcss"; @import "./_font-sizes.pcss"; -@import "./_font-weights.pcss"; @import "./_spacing.pcss"; @import "./components/views/beacon/_BeaconListItem.pcss"; @import "./components/views/beacon/_BeaconStatus.pcss"; diff --git a/res/css/_font-sizes.pcss b/res/css/_font-sizes.pcss index 5d83ff83df..bb447ebfa0 100644 --- a/res/css/_font-sizes.pcss +++ b/res/css/_font-sizes.pcss @@ -21,63 +21,33 @@ limitations under the License. * "Font size" setting). They exist to make the job of converting designs (which tend to be based in pixels) into CSS * easier. * - * That means that, slightly confusingly, `$font-10px` is only *actually* 10px at the default font size: at a base - * `font-size` of 15, it is actually 15px. */ -$font-1px: 0.1rem; -$font-1-5px: 0.15rem; -$font-2px: 0.2rem; -$font-3px: 0.3rem; -$font-4px: 0.4rem; -$font-5px: 0.5rem; -$font-6px: 0.6rem; -$font-7px: 0.7rem; -$font-8px: 0.8rem; -$font-9px: 0.9rem; -$font-10px: 1rem; -$font-10-4px: 1.04rem; -$font-11px: 1.1rem; -$font-12px: 1.2rem; -$font-13px: 1.3rem; -$font-14px: 1.4rem; -$font-15px: 1.5rem; -$font-16px: 1.6rem; -$font-17px: 1.7rem; -$font-18px: 1.8rem; -$font-19px: 1.9rem; -$font-20px: 2rem; -$font-21px: 2.1rem; -$font-22px: 2.2rem; -$font-23px: 2.3rem; -$font-24px: 2.4rem; -$font-25px: 2.5rem; -$font-26px: 2.6rem; -$font-27px: 2.7rem; -$font-28px: 2.8rem; -$font-29px: 2.9rem; -$font-30px: 3rem; -$font-31px: 3.1rem; -$font-32px: 3.2rem; -$font-33px: 3.3rem; -$font-34px: 3.4rem; -$font-35px: 3.5rem; -$font-36px: 3.6rem; -$font-37px: 3.7rem; -$font-38px: 3.8rem; -$font-39px: 3.9rem; -$font-40px: 4rem; -$font-41px: 4.1rem; -$font-42px: 4.2rem; -$font-43px: 4.3rem; -$font-44px: 4.4rem; -$font-45px: 4.5rem; -$font-46px: 4.6rem; -$font-47px: 4.7rem; -$font-48px: 4.8rem; -$font-49px: 4.9rem; -$font-50px: 5rem; -$font-51px: 5.1rem; -$font-52px: 5.2rem; -$font-78px: 7.8rem; -$font-88px: 8.8rem; -$font-400px: 40rem; +$font-1px: 0.0625rem; +$font-8px: 0.5rem; +$font-9px: 0.5625rem; +$font-10px: 0.625rem; +$font-10-4px: 0.6275rem; +$font-11px: 0.6875rem; +$font-12px: 0.75rem; +$font-13px: 0.8125rem; +$font-14px: 0.875rem; +$font-15px: 0.9375rem; +$font-16px: 1rem; +$font-17px: 1.0625rem; +$font-18px: 1.125rem; +$font-20px: 1.25rem; +$font-22px: 1.375rem; +$font-23px: 1.4375rem; +$font-24px: 1.5rem; +$font-25px: 1.5625rem; +$font-26px: 1.625rem; +$font-28px: 1.75rem; +$font-29px: 1.8125rem; +$font-30px: 1.875rem; +$font-32px: 2rem; +$font-34px: 2.125rem; +$font-35px: 2.1875rem; +$font-39px: 2.4375rem; +$font-42px: 2.625rem; +$font-44px: 2.75rem; +$font-48px: 3rem; diff --git a/res/css/_font-weights.pcss b/res/css/_font-weights.pcss deleted file mode 100644 index 7931d6a56a..0000000000 --- a/res/css/_font-weights.pcss +++ /dev/null @@ -1,20 +0,0 @@ -/* -Copyright 2020 The Matrix.org Foundation C.I.C. - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -:root { - --font-normal: 400; - --font-semi-bold: 600; -} diff --git a/res/css/components/views/beacon/_BeaconListItem.pcss b/res/css/components/views/beacon/_BeaconListItem.pcss index c9b39bbebf..3389ccc3a2 100644 --- a/res/css/components/views/beacon/_BeaconListItem.pcss +++ b/res/css/components/views/beacon/_BeaconListItem.pcss @@ -55,7 +55,7 @@ limitations under the License. margin-bottom: $spacing-8; .mx_BeaconStatus_label { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); } } diff --git a/res/css/components/views/beacon/_DialogSidebar.pcss b/res/css/components/views/beacon/_DialogSidebar.pcss index c33f74e036..31d3b7b16d 100644 --- a/res/css/components/views/beacon/_DialogSidebar.pcss +++ b/res/css/components/views/beacon/_DialogSidebar.pcss @@ -57,6 +57,6 @@ limitations under the License. } .mx_DialogSidebar_noResults { - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); color: $secondary-content; } diff --git a/res/css/components/views/beacon/_OwnBeaconStatus.pcss b/res/css/components/views/beacon/_OwnBeaconStatus.pcss index dedf02da7a..a0776b942a 100644 --- a/res/css/components/views/beacon/_OwnBeaconStatus.pcss +++ b/res/css/components/views/beacon/_OwnBeaconStatus.pcss @@ -27,5 +27,5 @@ limitations under the License. .mx_OwnBeaconStatus_destructiveButton { /* override button link_inline styles */ color: $alert !important; - font-weight: var(--font-semi-bold) !important; + font-weight: var(--cpd-font-weight-semibold) !important; } diff --git a/res/css/components/views/elements/_AppPermission.pcss b/res/css/components/views/elements/_AppPermission.pcss index 71f282ebee..4bbe0ac07a 100644 --- a/res/css/components/views/elements/_AppPermission.pcss +++ b/res/css/components/views/elements/_AppPermission.pcss @@ -19,7 +19,9 @@ limitations under the License. font-size: $font-12px; width: 100%; /* make mx_AppPermission fill width of mx_AppTileBody so that scroll bar appears on the edge */ overflow-y: scroll; - + .mx_AppPermission_bolder { + font-weight: var(--cpd-font-weight-semibold); + } .mx_AppPermission_content { margin-block: auto; /* place at the center */ diff --git a/res/css/components/views/elements/_FilterDropdown.pcss b/res/css/components/views/elements/_FilterDropdown.pcss index a73a45c03e..dc264ca922 100644 --- a/res/css/components/views/elements/_FilterDropdown.pcss +++ b/res/css/components/views/elements/_FilterDropdown.pcss @@ -72,7 +72,7 @@ limitations under the License. } .mx_FilterDropdown_optionLabel { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); display: block; } diff --git a/res/css/components/views/elements/_FilterTabGroup.pcss b/res/css/components/views/elements/_FilterTabGroup.pcss index 05329cb7d0..946bd7f543 100644 --- a/res/css/components/views/elements/_FilterTabGroup.pcss +++ b/res/css/components/views/elements/_FilterTabGroup.pcss @@ -38,7 +38,7 @@ limitations under the License. &:checked + span { color: $accent; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); // underline box-shadow: 0 1.5px 0 0 currentColor; } diff --git a/res/css/components/views/pips/_WidgetPip.pcss b/res/css/components/views/pips/_WidgetPip.pcss index cecc0e1365..f6bf5a2a63 100644 --- a/res/css/components/views/pips/_WidgetPip.pcss +++ b/res/css/components/views/pips/_WidgetPip.pcss @@ -42,7 +42,7 @@ limitations under the License. padding: $spacing-12; display: flex; font-size: $font-12px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0)); } diff --git a/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss b/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss index c2a0d5bb78..e161c0b14a 100644 --- a/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss +++ b/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss @@ -65,7 +65,7 @@ limitations under the License. } .mx_DeviceSecurityCard_description { margin: 0; - font-size: $font-12px; + font: var(--cpd-font-body-sm-regular); color: $secondary-content; } diff --git a/res/css/components/views/spaces/_QuickThemeSwitcher.pcss b/res/css/components/views/spaces/_QuickThemeSwitcher.pcss index a729134c12..66a9731353 100644 --- a/res/css/components/views/spaces/_QuickThemeSwitcher.pcss +++ b/res/css/components/views/spaces/_QuickThemeSwitcher.pcss @@ -30,7 +30,7 @@ limitations under the License. } .mx_QuickThemeSwitcher_heading { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-12px; line-height: $font-15px; color: $secondary-content; diff --git a/res/css/components/views/typography/_Caption.pcss b/res/css/components/views/typography/_Caption.pcss index f51276d9f9..cad93f3881 100644 --- a/res/css/components/views/typography/_Caption.pcss +++ b/res/css/components/views/typography/_Caption.pcss @@ -15,7 +15,7 @@ limitations under the License. */ .mx_Caption { - font-size: $font-12px; + font: var(--cpd-font-body-sm-regular); color: $secondary-content; &.mx_Caption_error { diff --git a/res/css/structures/_ContextualMenu.pcss b/res/css/structures/_ContextualMenu.pcss index cac926ec72..6aff7738fc 100644 --- a/res/css/structures/_ContextualMenu.pcss +++ b/res/css/structures/_ContextualMenu.pcss @@ -35,7 +35,6 @@ limitations under the License. background-color: $menu-bg-color; color: $primary-content; position: absolute; - font-size: $font-14px; z-index: 5001; width: max-content; } diff --git a/res/css/structures/_FilePanel.pcss b/res/css/structures/_FilePanel.pcss index 99de3d3296..9a1ebda894 100644 --- a/res/css/structures/_FilePanel.pcss +++ b/res/css/structures/_FilePanel.pcss @@ -70,11 +70,11 @@ limitations under the License. padding-top: $spacing-8; display: flex; justify-content: space-between; - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); color: $event-timestamp-color; .mx_MImageBody_size { - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); text-align: right; white-space: nowrap; } @@ -100,7 +100,7 @@ limitations under the License. .mx_MessageTimestamp { text-align: right; - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); } } } diff --git a/res/css/structures/_GenericDropdownMenu.pcss b/res/css/structures/_GenericDropdownMenu.pcss index c3740cc847..1722c7fd2e 100644 --- a/res/css/structures/_GenericDropdownMenu.pcss +++ b/res/css/structures/_GenericDropdownMenu.pcss @@ -92,7 +92,7 @@ limitations under the License. span:first-child { color: $primary-content; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); } } diff --git a/res/css/structures/_HomePage.pcss b/res/css/structures/_HomePage.pcss index b249563435..b2f607f822 100644 --- a/res/css/structures/_HomePage.pcss +++ b/res/css/structures/_HomePage.pcss @@ -37,15 +37,15 @@ limitations under the License. } h1 { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-32px; - line-height: $font-44px; + line-height: 1.375; margin-bottom: 4px; } h2 { margin-top: 4px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-18px; line-height: $font-25px; color: $muted-fg-color; @@ -73,7 +73,7 @@ limitations under the License. word-break: break-word; box-sizing: border-box; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-15px; line-height: $font-20px; color: #fff; /* on all themes */ diff --git a/res/css/structures/_LargeLoader.pcss b/res/css/structures/_LargeLoader.pcss index 555eb4bee5..55f57b0294 100644 --- a/res/css/structures/_LargeLoader.pcss +++ b/res/css/structures/_LargeLoader.pcss @@ -29,7 +29,7 @@ limitations under the License. .mx_LargeLoader_text { font-size: 24px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); padding: 0 16px; position: relative; text-align: center; diff --git a/res/css/structures/_QuickSettingsButton.pcss b/res/css/structures/_QuickSettingsButton.pcss index 3f26e13250..631b098ad6 100644 --- a/res/css/structures/_QuickSettingsButton.pcss +++ b/res/css/structures/_QuickSettingsButton.pcss @@ -59,7 +59,7 @@ limitations under the License. contain: unset; /* let the dropdown paint beyond the context menu */ > div > h2 { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-15px; line-height: $font-24px; color: $primary-content; @@ -72,7 +72,7 @@ limitations under the License. } > div > h4 { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-12px; line-height: $font-15px; text-transform: uppercase; diff --git a/res/css/structures/_RightPanel.pcss b/res/css/structures/_RightPanel.pcss index 71c9860764..7d39968c11 100644 --- a/res/css/structures/_RightPanel.pcss +++ b/res/css/structures/_RightPanel.pcss @@ -83,7 +83,7 @@ limitations under the License. h2, p { - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); } &::before { @@ -103,7 +103,7 @@ limitations under the License. .mx_RightPanel_scopeHeader { margin: 24px; text-align: center; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-18px; line-height: $font-22px; diff --git a/res/css/structures/_RoomSearch.pcss b/res/css/structures/_RoomSearch.pcss index 8252d2d9b9..fea292c8ba 100644 --- a/res/css/structures/_RoomSearch.pcss +++ b/res/css/structures/_RoomSearch.pcss @@ -43,15 +43,13 @@ limitations under the License. } .mx_RoomSearch_spotlightTriggerText { - font-size: $font-12px; - line-height: $font-16px; color: $tertiary-content; flex: 1; min-width: 0; /* the following rules are to match that of a real input field */ overflow: hidden; margin: 9px; - font-weight: var(--font-semi-bold); + font: var(--cpd-font-body-sm-semibold); } .mx_RoomSearch_shortcutPrompt { @@ -62,7 +60,7 @@ limitations under the License. font-size: $font-12px; line-height: $font-15px; font-family: inherit; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); color: $light-fg-color; margin-right: 6px; white-space: nowrap; diff --git a/res/css/structures/_RoomStatusBar.pcss b/res/css/structures/_RoomStatusBar.pcss index 60191c3452..e046e5f7fd 100644 --- a/res/css/structures/_RoomStatusBar.pcss +++ b/res/css/structures/_RoomStatusBar.pcss @@ -186,7 +186,7 @@ limitations under the License. .mx_RoomStatusBar_typingBar { height: 50px; - line-height: $font-50px; + line-height: 50px; color: $primary-content; opacity: 0.5; @@ -205,6 +205,6 @@ limitations under the License. .mx_RoomStatusBar_typingBar { height: 40px; - line-height: $font-40px; + line-height: 40px; } } diff --git a/res/css/structures/_SpaceHierarchy.pcss b/res/css/structures/_SpaceHierarchy.pcss index 2dedf2099c..81498af176 100644 --- a/res/css/structures/_SpaceHierarchy.pcss +++ b/res/css/structures/_SpaceHierarchy.pcss @@ -46,7 +46,7 @@ limitations under the License. .mx_SpaceHierarchy_listHeader_header { grid-column-start: 1; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); margin: 0; } @@ -71,7 +71,7 @@ limitations under the License. .mx_SpaceHierarchy_error { position: relative; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); color: $alert; font-size: $font-15px; line-height: $font-18px; @@ -94,7 +94,7 @@ limitations under the License. .mx_SpaceHierarchy_roomCount { > h3 { display: inline; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-18px; line-height: $font-22px; color: $primary-content; @@ -167,7 +167,7 @@ limitations under the License. gap: 6px 12px; .mx_SpaceHierarchy_roomTile_item { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-15px; line-height: $font-18px; display: grid; @@ -233,7 +233,7 @@ limitations under the License. .mx_SpaceHierarchy_roomTile_info { grid-row: 2; grid-column: 2; - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); font-weight: initial; line-height: $font-18px; color: $secondary-content; diff --git a/res/css/structures/_SpacePanel.pcss b/res/css/structures/_SpacePanel.pcss index a149eae639..e8b8d8eb04 100644 --- a/res/css/structures/_SpacePanel.pcss +++ b/res/css/structures/_SpacePanel.pcss @@ -156,8 +156,7 @@ limitations under the License. display: block; text-overflow: ellipsis; overflow: hidden; - font-size: $font-14px; - line-height: $font-18px; + font: var(--cpd-font-body-md-regular); } .mx_SpaceButton_toggleCollapse { @@ -275,7 +274,7 @@ limitations under the License. border-radius: 8px; background-color: $panel-actions; font-size: $font-15px !important; /* override inline style */ - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); line-height: $font-18px; & + .mx_BaseAvatar_image { @@ -379,7 +378,7 @@ limitations under the License. .mx_SpacePanel_contextMenu_header { margin: 12px 16px 12px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-15px; line-height: $font-18px; overflow: hidden; @@ -431,7 +430,7 @@ limitations under the License. color: $tertiary-content; font-size: $font-10px; line-height: $font-12px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); //margin-left: 8px; } } diff --git a/res/css/structures/_SpaceRoomView.pcss b/res/css/structures/_SpaceRoomView.pcss index a83fe420a7..f1bf0cf214 100644 --- a/res/css/structures/_SpaceRoomView.pcss +++ b/res/css/structures/_SpaceRoomView.pcss @@ -22,7 +22,7 @@ limitations under the License. border-radius: 8px; border: 1px solid $input-border-color; font-size: $font-17px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); margin: 20px 0; > div { @@ -73,7 +73,7 @@ limitations under the License. h1 { margin: 0; font-size: $font-24px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); color: $primary-content; width: max-content; } @@ -120,7 +120,7 @@ limitations under the License. } .mx_SpaceRoomView_errorText { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-12px; line-height: $font-15px; color: $alert; diff --git a/res/css/structures/_ToastContainer.pcss b/res/css/structures/_ToastContainer.pcss index c33caf2758..a485afe129 100644 --- a/res/css/structures/_ToastContainer.pcss +++ b/res/css/structures/_ToastContainer.pcss @@ -118,8 +118,8 @@ limitations under the License. h2 { margin: 0; - font-size: $font-15px; - font-weight: var(--font-semi-bold); + font: var(--cpd-font-heading-sm-medium); + font-weight: var(--cpd-font-weight-medium); display: inline; width: auto; } @@ -153,7 +153,7 @@ limitations under the License. overflow: hidden; text-overflow: ellipsis; margin: 4px 0 11px 0; - font-size: $font-12px; + font: var(--cpd-font-body-sm-regular); a { text-decoration: none; diff --git a/res/css/structures/_UserMenu.pcss b/res/css/structures/_UserMenu.pcss index 4c23bf23c0..f37fbb7f08 100644 --- a/res/css/structures/_UserMenu.pcss +++ b/res/css/structures/_UserMenu.pcss @@ -47,7 +47,7 @@ limitations under the License. } .mx_UserMenu_name { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-15px; line-height: $font-24px; margin-left: 10px; @@ -104,7 +104,7 @@ limitations under the License. .mx_UserMenu_contextMenu_displayName, .mx_UserMenu_contextMenu_userId { - font-size: $font-15px; + font: var(--cpd-font-heading-sm-regular); /* Automatically grow subelements to fit the container */ flex: 1; @@ -117,12 +117,7 @@ limitations under the License. } .mx_UserMenu_contextMenu_displayName { - font-weight: bold; - line-height: $font-20px; - } - - .mx_UserMenu_contextMenu_userId { - line-height: $font-24px; + font-weight: var(--cpd-font-weight-semibold); } } @@ -147,7 +142,7 @@ limitations under the License. display: inline-block; > span { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); display: block; & + span { diff --git a/res/css/structures/auth/_Login.pcss b/res/css/structures/auth/_Login.pcss index eeca1e8e49..aa4244bcfb 100644 --- a/res/css/structures/auth/_Login.pcss +++ b/res/css/structures/auth/_Login.pcss @@ -18,7 +18,7 @@ limitations under the License. .mx_Login_submit { @mixin mx_DialogButton; font-size: 15px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); width: 100%; margin-top: 24px; margin-bottom: 24px; diff --git a/res/css/structures/auth/_Registration.pcss b/res/css/structures/auth/_Registration.pcss index b415e78f10..42ac7c0fb4 100644 --- a/res/css/structures/auth/_Registration.pcss +++ b/res/css/structures/auth/_Registration.pcss @@ -21,7 +21,7 @@ limitations under the License. min-height: 270px; p { - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); color: $authpage-primary-color; &.secondary { diff --git a/res/css/views/auth/_AuthBody.pcss b/res/css/views/auth/_AuthBody.pcss index b5736e644d..5bce1bbfea 100644 --- a/res/css/views/auth/_AuthBody.pcss +++ b/res/css/views/auth/_AuthBody.pcss @@ -25,7 +25,7 @@ limitations under the License. box-sizing: border-box; b { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); } &.mx_AuthBody_flex { @@ -35,14 +35,13 @@ limitations under the License. h1 { font-size: $font-24px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); margin-top: $spacing-8; color: $authpage-primary-color; } h2 { - font-size: $font-14px; - font-weight: var(--font-semi-bold); + font: var(--cpd-font-body-md-semibold); color: $authpage-secondary-color; } @@ -141,7 +140,7 @@ limitations under the License. /* specialisation for password reset views */ .mx_AuthBody.mx_AuthBody_forgot-password { - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); color: $primary-content; padding: 50px 32px; min-height: 600px; @@ -156,7 +155,7 @@ limitations under the License. } .mx_Login_submit { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); margin: 0 0 $spacing-16; } @@ -169,7 +168,7 @@ limitations under the License. } .mx_AuthBody_sign-in-instead-button { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); padding: $spacing-4; } @@ -263,7 +262,7 @@ limitations under the License. text-align: center; > a { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); } } diff --git a/res/css/views/auth/_AuthFooter.pcss b/res/css/views/auth/_AuthFooter.pcss index 0bc2743d54..36349594ec 100644 --- a/res/css/views/auth/_AuthFooter.pcss +++ b/res/css/views/auth/_AuthFooter.pcss @@ -17,7 +17,7 @@ limitations under the License. .mx_AuthFooter { text-align: center; width: 100%; - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); opacity: 0.72; padding: 20px 0; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); diff --git a/res/css/views/auth/_CompleteSecurityBody.pcss b/res/css/views/auth/_CompleteSecurityBody.pcss index 644a9a2d37..53d5988c6d 100644 --- a/res/css/views/auth/_CompleteSecurityBody.pcss +++ b/res/css/views/auth/_CompleteSecurityBody.pcss @@ -25,13 +25,12 @@ limitations under the License. h2 { font-size: $font-24px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); margin-top: 0; } h3 { - font-size: $font-14px; - font-weight: var(--font-semi-bold); + font: var(--cpd-font-body-md-semibold); } a:link, diff --git a/res/css/views/auth/_LanguageSelector.pcss b/res/css/views/auth/_LanguageSelector.pcss index 8a762e0de3..b2e179d000 100644 --- a/res/css/views/auth/_LanguageSelector.pcss +++ b/res/css/views/auth/_LanguageSelector.pcss @@ -20,8 +20,7 @@ limitations under the License. .mx_AuthBody_language .mx_Dropdown_input { border: none; - font-size: $font-14px; - font-weight: var(--font-semi-bold); + font: var(--cpd-font-body-md-semibold); color: $authpage-lang-color; width: auto; } diff --git a/res/css/views/auth/_LoginWithQR.pcss b/res/css/views/auth/_LoginWithQR.pcss index 699d7b0f38..665c351eb7 100644 --- a/res/css/views/auth/_LoginWithQR.pcss +++ b/res/css/views/auth/_LoginWithQR.pcss @@ -57,7 +57,7 @@ limitations under the License. margin-left: $spacing-12; } - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); h1 { font-size: $font-24px; @@ -111,7 +111,7 @@ limitations under the License. .mx_LoginWithQR_confirmationDigits { text-align: center; margin: $spacing-48 auto; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-24px; color: $primary-content; } diff --git a/res/css/views/beta/_BetaCard.pcss b/res/css/views/beta/_BetaCard.pcss index 47ab7b005b..42dd327347 100644 --- a/res/css/views/beta/_BetaCard.pcss +++ b/res/css/views/beta/_BetaCard.pcss @@ -31,7 +31,7 @@ limitations under the License. flex: 1; .mx_BetaCard_title { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-18px; line-height: $font-22px; color: $primary-content; @@ -73,8 +73,7 @@ limitations under the License. .mx_BetaCard_faq { margin-top: $spacing-20; - font-size: $font-12px; - line-height: $font-15px; + font: var(--cpd-font-body-xs-regular); > h4 { margin: $spacing-12 0 0; @@ -108,8 +107,7 @@ limitations under the License. .mx_SettingsFlag_microcopy { margin-top: $spacing-4; - font-size: $font-12px; - line-height: $font-15px; + font: var(--cpd-font-body-sm-regular); } } } @@ -121,7 +119,7 @@ limitations under the License. border-radius: 8px; text-transform: uppercase; font-size: $font-12px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); line-height: 15px; color: $button-primary-fg-color; display: inline-block; diff --git a/res/css/views/context_menus/_IconizedContextMenu.pcss b/res/css/views/context_menus/_IconizedContextMenu.pcss index 581d0ca5e2..126225da5d 100644 --- a/res/css/views/context_menus/_IconizedContextMenu.pcss +++ b/res/css/views/context_menus/_IconizedContextMenu.pcss @@ -30,7 +30,7 @@ limitations under the License. .mx_IconizedContextMenu_optionList_label { font-size: $font-15px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); } /* the notFirst class is for cases where the optionList might be under a header of sorts. */ @@ -79,8 +79,7 @@ limitations under the License. padding-bottom: 12px; text-decoration: none; color: $primary-content; - font-size: $font-15px; - line-height: $font-24px; + font: var(--cpd-font-body-md-regular); /* Create a flexbox to more easily define the list items */ display: flex; diff --git a/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss b/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss index f71d43ba0b..7866bac1c1 100644 --- a/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss +++ b/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss @@ -48,7 +48,7 @@ limitations under the License. margin: 0; color: $secondary-content; font-size: $font-12px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); line-height: $font-15px; } @@ -96,7 +96,7 @@ limitations under the License. } .mx_AddExistingToSpace_errorHeading { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-15px; line-height: $font-18px; color: $alert; @@ -171,7 +171,7 @@ limitations under the License. > div { > h1 { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-18px; line-height: $font-22px; margin: 0; diff --git a/res/css/views/dialogs/_CompoundDialog.pcss b/res/css/views/dialogs/_CompoundDialog.pcss index b9ddf7837a..6777b4f81d 100644 --- a/res/css/views/dialogs/_CompoundDialog.pcss +++ b/res/css/views/dialogs/_CompoundDialog.pcss @@ -37,7 +37,7 @@ limitations under the License. h1 { display: inline-block; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-24px; margin: 0; /* managed by header class */ } diff --git a/res/css/views/dialogs/_ConfirmUserActionDialog.pcss b/res/css/views/dialogs/_ConfirmUserActionDialog.pcss index cdcb2b4587..2d6fd430a4 100644 --- a/res/css/views/dialogs/_ConfirmUserActionDialog.pcss +++ b/res/css/views/dialogs/_ConfirmUserActionDialog.pcss @@ -34,7 +34,7 @@ limitations under the License. } .mx_ConfirmUserActionDialog_reasonField { - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); color: $primary-content; background-color: $background; } diff --git a/res/css/views/dialogs/_CreateRoomDialog.pcss b/res/css/views/dialogs/_CreateRoomDialog.pcss index de0dba9a1e..437044cc8f 100644 --- a/res/css/views/dialogs/_CreateRoomDialog.pcss +++ b/res/css/views/dialogs/_CreateRoomDialog.pcss @@ -19,7 +19,7 @@ limitations under the License. .mx_CreateRoomDialog_details_summary { list-style: none; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); cursor: pointer; color: $accent; @@ -96,7 +96,7 @@ limitations under the License. .mx_SettingsFlag_label { flex: 1 1 0; min-width: 0; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); } .mx_ToggleSwitch { diff --git a/res/css/views/dialogs/_ExportDialog.pcss b/res/css/views/dialogs/_ExportDialog.pcss index 64599c669c..ca972aaa72 100644 --- a/res/css/views/dialogs/_ExportDialog.pcss +++ b/res/css/views/dialogs/_ExportDialog.pcss @@ -19,7 +19,7 @@ limitations under the License. font-size: $font-16px; display: block; font-family: $font-family; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); color: $primary-content; margin-top: 18px; margin-bottom: 12px; diff --git a/res/css/views/dialogs/_FeedbackDialog.pcss b/res/css/views/dialogs/_FeedbackDialog.pcss index aa778e1776..06c18ceddb 100644 --- a/res/css/views/dialogs/_FeedbackDialog.pcss +++ b/res/css/views/dialogs/_FeedbackDialog.pcss @@ -41,7 +41,7 @@ limitations under the License. > h3 { margin-top: 0; margin-bottom: 8px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-18px; line-height: $font-22px; } diff --git a/res/css/views/dialogs/_ForwardDialog.pcss b/res/css/views/dialogs/_ForwardDialog.pcss index 4190c052e5..e6c322a77c 100644 --- a/res/css/views/dialogs/_ForwardDialog.pcss +++ b/res/css/views/dialogs/_ForwardDialog.pcss @@ -27,7 +27,7 @@ limitations under the License. margin: 0 0 6px; color: $secondary-content; font-size: $font-12px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); line-height: $font-15px; } diff --git a/res/css/views/dialogs/_GenericFeatureFeedbackDialog.pcss b/res/css/views/dialogs/_GenericFeatureFeedbackDialog.pcss index 83f9349514..3777a43bc5 100644 --- a/res/css/views/dialogs/_GenericFeatureFeedbackDialog.pcss +++ b/res/css/views/dialogs/_GenericFeatureFeedbackDialog.pcss @@ -17,7 +17,7 @@ limitations under the License. .mx_GenericFeatureFeedbackDialog { .mx_GenericFeatureFeedbackDialog_subheading { color: $primary-content; - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); line-height: $font-20px; margin-bottom: 24px; } diff --git a/res/css/views/dialogs/_InviteDialog.pcss b/res/css/views/dialogs/_InviteDialog.pcss index 4ffdb5d6cf..f13e6b4724 100644 --- a/res/css/views/dialogs/_InviteDialog.pcss +++ b/res/css/views/dialogs/_InviteDialog.pcss @@ -52,8 +52,8 @@ limitations under the License. > input[type="text"] { margin: 6px 0 !important; height: 24px; + font: var(--cpd-font-body-md-regular); line-height: $font-24px; - font-size: $font-14px; padding-inline-start: $spacing-12; border: 0 !important; outline: 0 !important; @@ -110,11 +110,11 @@ limitations under the License. .mx_InviteDialog_section_hidden_suggestions_disclaimer { padding: $spacing-8 0 $spacing-16 0; - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); > span { color: $primary-content; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); } > p { @@ -277,7 +277,7 @@ limitations under the License. input { font-size: 18px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); padding-top: 0; } @@ -429,7 +429,7 @@ limitations under the License. .mx_InviteDialog_tile_nameStack_name { font-size: $font-15px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); color: $primary-content; } diff --git a/res/css/views/dialogs/_JoinRuleDropdown.pcss b/res/css/views/dialogs/_JoinRuleDropdown.pcss index 83d73fcea2..5b1b8b7a18 100644 --- a/res/css/views/dialogs/_JoinRuleDropdown.pcss +++ b/res/css/views/dialogs/_JoinRuleDropdown.pcss @@ -16,9 +16,7 @@ limitations under the License. .mx_JoinRuleDropdown { margin-bottom: 8px; - font-weight: normal; - font-family: $font-family; - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); color: $primary-content; .mx_Dropdown_input { @@ -26,7 +24,7 @@ limitations under the License. } .mx_Dropdown_option { - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); line-height: $font-32px; height: 32px; min-height: 32px; diff --git a/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss b/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss index 8a2d079399..1082e50005 100644 --- a/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss +++ b/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss @@ -54,7 +54,7 @@ limitations under the License. margin: 0; color: $secondary-content; font-size: $font-12px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); line-height: $font-15px; } diff --git a/res/css/views/dialogs/_MessageEditHistoryDialog.pcss b/res/css/views/dialogs/_MessageEditHistoryDialog.pcss index 69f854d50b..03bf78e920 100644 --- a/res/css/views/dialogs/_MessageEditHistoryDialog.pcss +++ b/res/css/views/dialogs/_MessageEditHistoryDialog.pcss @@ -31,7 +31,7 @@ limitations under the License. .mx_MessageEditHistoryDialog_edits { list-style-type: none; - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); padding: 0; color: $primary-content; diff --git a/res/css/views/dialogs/_PollCreateDialog.pcss b/res/css/views/dialogs/_PollCreateDialog.pcss index 0f9ba92cf1..dd5eb764ed 100644 --- a/res/css/views/dialogs/_PollCreateDialog.pcss +++ b/res/css/views/dialogs/_PollCreateDialog.pcss @@ -23,7 +23,7 @@ limitations under the License. } h2 { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-15px; line-height: $font-24px; margin-top: 0; diff --git a/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss b/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss index 681a76e9e4..aad030bd67 100644 --- a/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss +++ b/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss @@ -94,7 +94,7 @@ limitations under the License. .mx_RoomSettingsDialog_workspace_channel_details { color: $primary-content; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); .mx_RoomSettingsDialog_channel { margin-inline-start: 5px; diff --git a/res/css/views/dialogs/_ServerPickerDialog.pcss b/res/css/views/dialogs/_ServerPickerDialog.pcss index 440ddbf5f6..3089135824 100644 --- a/res/css/views/dialogs/_ServerPickerDialog.pcss +++ b/res/css/views/dialogs/_ServerPickerDialog.pcss @@ -23,7 +23,8 @@ limitations under the License. > p { color: $secondary-content; - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); + margin: 16px 0; &:first-of-type { @@ -37,7 +38,7 @@ limitations under the License. > h2 { font-size: $font-15px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); color: $secondary-content; margin: 16px 0 16px 8px; } diff --git a/res/css/views/dialogs/_SpaceSettingsDialog.pcss b/res/css/views/dialogs/_SpaceSettingsDialog.pcss index 7b7c40e268..ca224ba5c7 100644 --- a/res/css/views/dialogs/_SpaceSettingsDialog.pcss +++ b/res/css/views/dialogs/_SpaceSettingsDialog.pcss @@ -18,7 +18,7 @@ limitations under the License. color: $primary-content; .mx_SpaceSettings_errorText { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-12px; line-height: $font-15px; color: $alert; @@ -42,7 +42,7 @@ limitations under the License. margin-bottom: 4px; .mx_StyledRadioButton_content { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); line-height: $font-18px; color: $primary-content; } @@ -71,7 +71,7 @@ limitations under the License. .mx_AccessibleButton_hasKind { &.mx_AccessibleButton_kind_link { - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); margin: 7px 18px; &.mx_SettingsTab_showAdvanced { diff --git a/res/css/views/dialogs/_SpotlightDialog.pcss b/res/css/views/dialogs/_SpotlightDialog.pcss index 75b4f48ff5..4e811ecef1 100644 --- a/res/css/views/dialogs/_SpotlightDialog.pcss +++ b/res/css/views/dialogs/_SpotlightDialog.pcss @@ -163,7 +163,7 @@ limitations under the License. .mx_SpotlightDialog_section { > h4, > .mx_SpotlightDialog_sectionHeader > h4 { - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-12px; line-height: $font-15px; color: $secondary-content; diff --git a/res/css/views/dialogs/_VerifyEMailDialog.pcss b/res/css/views/dialogs/_VerifyEMailDialog.pcss index a8db4a3d0a..c1430326f7 100644 --- a/res/css/views/dialogs/_VerifyEMailDialog.pcss +++ b/res/css/views/dialogs/_VerifyEMailDialog.pcss @@ -20,14 +20,14 @@ limitations under the License. .mx_Dialog { color: $primary-content; - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); padding: $spacing-24 $spacing-24 $spacing-16; text-align: center; width: 485px; h1 { font-size: $font-24px; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); } .mx_VerifyEMailDialog_text-light { diff --git a/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss b/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss index e695992008..1a4a3f9040 100644 --- a/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss +++ b/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss @@ -38,7 +38,7 @@ limitations under the License. .mx_SettingsFlag_label { flex: 1 1 0; min-width: 0; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); } .mx_ToggleSwitch { @@ -103,7 +103,7 @@ limitations under the License. .mx_CreateSecretStorageDialog_optionTitle { color: $dialog-title-fg-color; - font-weight: var(--font-semi-bold); + font-weight: var(--cpd-font-weight-semibold); font-size: $font-18px; padding-bottom: 10px; } diff --git a/res/css/views/elements/_AccessibleButton.pcss b/res/css/views/elements/_AccessibleButton.pcss index fbab8bef1b..e4c00d356f 100644 --- a/res/css/views/elements/_AccessibleButton.pcss +++ b/res/css/views/elements/_AccessibleButton.pcss @@ -40,7 +40,7 @@ limitations under the License. display: inline-flex; align-items: center; justify-content: center; - font-size: $font-14px; + font: var(--cpd-font-body-md-regular); border: none; /* override default