diff --git a/cypress/e2e/right-panel/file-panel.spec.ts b/cypress/e2e/right-panel/file-panel.spec.ts index b36edfb276f..fa436772bab 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 cb22d26b58b..e57f00a1396 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 10650d14f4e..6acf8a19b2f 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 b0d2a1d2090..88f7de5e038 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 3e8e4cd80b7..2851313c54e 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 5d83ff83df6..bb447ebfa0b 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 7931d6a56a5..00000000000 --- 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 c9b39bbebf4..3389ccc3a2f 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 c33f74e0366..31d3b7b16d5 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 dedf02da7a6..a0776b942aa 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 71f282ebeee..4bbe0ac07a7 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 a73a45c03ee..dc264ca9226 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 05329cb7d00..946bd7f5431 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 cecc0e1365a..f6bf5a2a63e 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 c2a0d5bb780..e161c0b14aa 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 a729134c124..66a97313538 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 f51276d9f96..cad93f3881a 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 cac926ec724..6aff7738fc7 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 99de3d32965..9a1ebda894e 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 c3740cc847d..1722c7fd2e1 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 b2495634357..b2f607f8226 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 555eb4bee55..55f57b02942 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 3f26e132504..631b098ad64 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 71c98607641..7d39968c11a 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 8252d2d9b9a..fea292c8baf 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 60191c34528..e046e5f7fd7 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 2dedf2099c9..81498af176a 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 a149eae6395..e8b8d8eb042 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 a83fe420a71..f1bf0cf2141 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 c33caf27583..a485afe1291 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 4c23bf23c0d..f37fbb7f08a 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 2eba8cf3d14..786e34cb681 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 b415e78f107..42ac7c0fb4e 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 b5736e644dd..5bce1bbfeaa 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 0bc2743d544..36349594ecd 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 644a9a2d375..53d5988c6dd 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 8a762e0de3c..b2e179d000c 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 699d7b0f38e..665c351eb7b 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 47ab7b005be..42dd3273474 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 581d0ca5e20..126225da5dd 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 f71d43ba0b0..7866bac1c11 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 b9ddf7837a8..6777b4f81d4 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 cdcb2b45875..2d6fd430a47 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 de0dba9a1e0..437044cc8fe 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 64599c669c7..ca972aaa723 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 aa778e1776d..06c18ceddbe 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 4190c052e5b..e6c322a77c6 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 83f93495143..3777a43bc51 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 4ffdb5d6cfa..f13e6b47246 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 83d73fcea28..5b1b8b7a188 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 8a2d079399c..1082e500055 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 69f854d50b9..03bf78e920d 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 0f9ba92cf14..dd5eb764eda 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 681a76e9e41..aad030bd674 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 440ddbf5f62..3089135824b 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 7b7c40e2689..ca224ba5c75 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 75b4f48ff5a..4e811ecef10 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 a8db4a3d0a6..c1430326f72 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 e695992008e..1a4a3f9040d 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 fbab8bef1bf..e4c00d356f8 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