Replace Sass variables with custom properties on _font-weights.pcss (#10554)

* Replace `$font-normal` and `$font-semi-bold` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Replace `font-weight: 600` with the custom property Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Replace the existing variables Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-04-21 14:16:00 +00:00 · 2023-04-21 14:16:00 +00:00 · 92906c2130
commit 92906c2130
parent 7c4d0ceddc
95 changed files with 149 additions and 147 deletions
--- a/res/css/_common.pcss
+++ b/res/css/_common.pcss
@ -132,7 +132,7 @@ input[type="password"] {
    font-family: inherit;
    padding: 9px;
    font-size: $font-14px;
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
    min-width: 0;
 }

@ -575,7 +575,7 @@ legend {
    margin-bottom: 5px;

    /* flip colours for the secondary ones */
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
    border: 1px solid $accent;
    color: $accent;
    background-color: $button-secondary-bg-color;
@ -794,7 +794,7 @@ legend {

@define-mixin LegacyCallButton {
    box-sizing: border-box;
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
    height: $font-24px;
    line-height: $font-24px;
    margin-right: 0;
@ -816,7 +816,7 @@ legend {

@define-mixin ThreadRepliesAmount {
    color: $secondary-content;
-    font-weight: $font-semi-bold;
+    font-weight: var(--font-semi-bold);
    white-space: nowrap;
    position: relative;
    padding: 0 $spacing-12 0 $spacing-8;
--- a/res/css/_font-weights.pcss
+++ b/res/css/_font-weights.pcss
@ -14,5 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-$font-normal: 400;
-$font-semi-bold: 600;
+:root {
+    --font-normal: 400;
+    --font-semi-bold: 600;
+}
--- 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: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
    }
 }

--- 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: $font-semi-bold !important;
+    font-weight: var(--font-semi-bold) !important;
 }
--- 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: $font-semi-bold;
+    font-weight: var(--font-semi-bold);
    display: block;
 }

--- 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: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
            // underline
            box-shadow: 0 1.5px 0 0 currentColor;
        }
--- 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: $font-semi-bold;
+    font-weight: var(--font-semi-bold);
    background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
 }

--- 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: $font-semi-bold;
+    font-weight: var(--font-semi-bold);
    font-size: $font-12px;
    line-height: $font-15px;
    color: $secondary-content;
--- 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: $font-semi-bold;
+                font-weight: var(--font-semi-bold);
            }
        }

--- a/res/css/structures/_HomePage.pcss
+++ b/res/css/structures/_HomePage.pcss
@ -37,7 +37,7 @@ limitations under the License.
    }

    h1 {
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        font-size: $font-32px;
        line-height: $font-44px;
        margin-bottom: 4px;
@ -45,7 +45,7 @@ limitations under the License.

    h2 {
        margin-top: 4px;
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        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: 600;
+            font-weight: var(--font-semi-bold);
            font-size: $font-15px;
            line-height: $font-20px;
            color: #fff; /* on all themes */
--- 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: 600;
+        font-weight: var(--font-semi-bold);
        padding: 0 16px;
        position: relative;
        text-align: center;
--- 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: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        font-size: $font-15px;
        line-height: $font-24px;
        color: $primary-content;
@ -72,7 +72,7 @@ limitations under the License.
    }

    > div > h4 {
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        font-size: $font-12px;
        line-height: $font-15px;
        text-transform: uppercase;
--- a/res/css/structures/_RightPanel.pcss
+++ b/res/css/structures/_RightPanel.pcss
@ -251,7 +251,7 @@ $pulse-color: $alert;
 .mx_RightPanel_scopeHeader {
    margin: 24px;
    text-align: center;
-    font-weight: $font-semi-bold;
+    font-weight: var(--font-semi-bold);
    font-size: $font-18px;
    line-height: $font-22px;

--- a/res/css/structures/_RoomSearch.pcss
+++ b/res/css/structures/_RoomSearch.pcss
@ -51,7 +51,7 @@ limitations under the License.
        /* the following rules are to match that of a real input field */
        overflow: hidden;
        margin: 9px;
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
    }

    .mx_RoomSearch_shortcutPrompt {
@ -62,7 +62,7 @@ limitations under the License.
        font-size: $font-12px;
        line-height: $font-15px;
        font-family: inherit;
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        color: $light-fg-color;
        margin-right: 6px;
        white-space: nowrap;
--- 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: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
            margin: 0;
        }

@ -71,7 +71,7 @@ limitations under the License.

    .mx_SpaceHierarchy_error {
        position: relative;
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        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: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
            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: $font-semi-bold;
+                    font-weight: var(--font-semi-bold);
                    font-size: $font-15px;
                    line-height: $font-18px;
                    display: grid;
--- a/res/css/structures/_SpacePanel.pcss
+++ b/res/css/structures/_SpacePanel.pcss
@ -276,7 +276,7 @@ $activeBorderColor: $primary-content;
            border-radius: 8px;
            background-color: $panel-actions;
            font-size: $font-15px !important; /* override inline style */
-            font-weight: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
            line-height: $font-18px;

            & + .mx_BaseAvatar_image {
@ -380,7 +380,7 @@ $activeBorderColor: $primary-content;

    .mx_SpacePanel_contextMenu_header {
        margin: 12px 16px 12px;
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        font-size: $font-15px;
        line-height: $font-18px;
        overflow: hidden;
@ -432,7 +432,7 @@ $activeBorderColor: $primary-content;
        color: $tertiary-content;
        font-size: $font-10px;
        line-height: $font-12px;
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        //margin-left: 8px;
    }
 }
--- a/res/css/structures/_SpaceRoomView.pcss
+++ b/res/css/structures/_SpaceRoomView.pcss
@ -24,7 +24,7 @@ $SpaceRoomViewInnerWidth: 428px;
    border-radius: 8px;
    border: 1px solid $input-border-color;
    font-size: $font-17px;
-    font-weight: $font-semi-bold;
+    font-weight: var(--font-semi-bold);
    margin: 20px 0;

    > div {
@ -73,7 +73,7 @@ $SpaceRoomViewInnerWidth: 428px;
        h1 {
            margin: 0;
            font-size: $font-24px;
-            font-weight: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
            color: $primary-content;
            width: max-content;
        }
@ -120,7 +120,7 @@ $SpaceRoomViewInnerWidth: 428px;
        }

        .mx_SpaceRoomView_errorText {
-            font-weight: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
            font-size: $font-12px;
            line-height: $font-15px;
            color: $alert;
--- a/res/css/structures/_ToastContainer.pcss
+++ b/res/css/structures/_ToastContainer.pcss
@ -115,7 +115,7 @@ limitations under the License.
                color: $primary-content;
                margin: 0;
                font-size: $font-18px;
-                font-weight: $font-semi-bold;
+                font-weight: var(--font-semi-bold);
            }

            .mx_Toast_title_countIndicator {
@ -142,7 +142,7 @@ limitations under the License.
        .mx_Toast_description {
            color: $primary-content;
            font-size: $font-15px;
-            font-weight: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
            max-width: 300px;

            a {
@ -152,7 +152,7 @@ limitations under the License.

        .mx_Toast_detail {
            display: block;
-            font-weight: $font-normal;
+            font-weight: var(--font-normal);
            margin-top: $spacing-4;
            max-width: 300px;
        }
--- 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: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        font-size: $font-15px;
        line-height: $font-24px;
        margin-left: 10px;
@ -147,7 +147,7 @@ limitations under the License.
            display: inline-block;

            > span {
-                font-weight: 600;
+                font-weight: var(--font-semi-bold);
                display: block;

                & + span {
--- 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: 600;
+    font-weight: var(--font-semi-bold);
    width: 100%;
    margin-top: 24px;
    margin-bottom: 24px;
--- 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: 600;
+        font-weight: var(--font-semi-bold);
    }

    &.mx_AuthBody_flex {
@ -35,14 +35,14 @@ limitations under the License.

    h1 {
        font-size: $font-24px;
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        margin-top: $spacing-8;
        color: $authpage-primary-color;
    }

    h2 {
        font-size: $font-14px;
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        color: $authpage-secondary-color;
    }

@ -155,7 +155,7 @@ limitations under the License.
    }

    .mx_Login_submit {
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        margin: 0 0 $spacing-16;
    }

@ -168,7 +168,7 @@ limitations under the License.
    }

    .mx_AuthBody_sign-in-instead-button {
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        padding: $spacing-4;
    }

@ -262,7 +262,7 @@ limitations under the License.
    text-align: center;

    > a {
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
    }
 }

--- a/res/css/views/auth/_CompleteSecurityBody.pcss
+++ b/res/css/views/auth/_CompleteSecurityBody.pcss
@ -25,13 +25,13 @@ limitations under the License.

    h2 {
        font-size: $font-24px;
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);
        margin-top: 0;
    }

    h3 {
        font-size: $font-14px;
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);
    }

    a:link,
--- a/res/css/views/auth/_LanguageSelector.pcss
+++ b/res/css/views/auth/_LanguageSelector.pcss
@ -21,7 +21,7 @@ limitations under the License.
 .mx_AuthBody_language .mx_Dropdown_input {
    border: none;
    font-size: $font-14px;
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
    color: $authpage-lang-color;
    width: auto;
 }
--- a/res/css/views/auth/_LoginWithQR.pcss
+++ b/res/css/views/auth/_LoginWithQR.pcss
@ -111,7 +111,7 @@ limitations under the License.
    .mx_LoginWithQR_confirmationDigits {
        text-align: center;
        margin: $spacing-48 auto;
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);
        font-size: $font-24px;
        color: $primary-content;
    }
--- a/res/css/views/beta/_BetaCard.pcss
+++ b/res/css/views/beta/_BetaCard.pcss
@ -32,7 +32,7 @@ limitations under the License.
            flex: 1;

            .mx_BetaCard_title {
-                font-weight: $font-semi-bold;
+                font-weight: var(--font-semi-bold);
                font-size: $font-18px;
                line-height: $font-22px;
                color: $primary-content;
@ -126,7 +126,7 @@ limitations under the License.
    border-radius: 8px;
    text-transform: uppercase;
    font-size: $font-12px;
-    font-weight: $font-semi-bold;
+    font-weight: var(--font-semi-bold);
    line-height: 15px;
    color: $button-primary-fg-color;
    display: inline-block;
--- a/res/css/views/context_menus/_IconizedContextMenu.pcss
+++ b/res/css/views/context_menus/_IconizedContextMenu.pcss
@ -27,7 +27,7 @@ limitations under the License.

        .mx_IconizedContextMenu_optionList_label {
            font-size: $font-15px;
-            font-weight: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
        }

        /* the notFirst class is for cases where the optionList might be under a header of sorts. */
--- 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: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
            line-height: $font-15px;
        }

@ -96,7 +96,7 @@ limitations under the License.
            }

            .mx_AddExistingToSpace_errorHeading {
-                font-weight: $font-semi-bold;
+                font-weight: var(--font-semi-bold);
                font-size: $font-15px;
                line-height: $font-18px;
                color: $alert;
@ -171,7 +171,7 @@ limitations under the License.

    > div {
        > h1 {
-            font-weight: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
            font-size: $font-18px;
            line-height: $font-22px;
            margin: 0;
--- 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: 600;
+            font-weight: var(--font-semi-bold);
            font-size: $font-24px;
            margin: 0; /* managed by header class */
        }
--- 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: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        cursor: pointer;
        color: $accent;

@ -96,7 +96,7 @@ limitations under the License.
    .mx_SettingsFlag_label {
        flex: 1 1 0;
        min-width: 0;
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);
    }

    .mx_ToggleSwitch {
--- 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: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        color: $primary-content;
        margin-top: 18px;
        margin-bottom: 12px;
--- 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: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
            font-size: $font-18px;
            line-height: $font-22px;
        }
--- 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: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        line-height: $font-15px;
    }

--- a/res/css/views/dialogs/_InviteDialog.pcss
+++ b/res/css/views/dialogs/_InviteDialog.pcss
@ -114,7 +114,7 @@ limitations under the License.

    > span {
        color: $primary-content;
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);
    }

    > p {
@ -277,7 +277,7 @@ limitations under the License.

        input {
            font-size: 18px;
-            font-weight: 600;
+            font-weight: var(--font-semi-bold);
            padding-top: 0;
        }

@ -429,7 +429,7 @@ limitations under the License.

        .mx_InviteDialog_tile_nameStack_name {
            font-size: $font-15px;
-            font-weight: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
            color: $primary-content;
        }

--- 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: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
            line-height: $font-15px;
        }

--- a/res/css/views/dialogs/_NewSessionReviewDialog.pcss
+++ b/res/css/views/dialogs/_NewSessionReviewDialog.pcss
@ -28,7 +28,7 @@ limitations under the License.
 }

 .mx_NewSessionReviewDialog_deviceName {
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
 }

 .mx_NewSessionReviewDialog_deviceID {
--- a/res/css/views/dialogs/_PollCreateDialog.pcss
+++ b/res/css/views/dialogs/_PollCreateDialog.pcss
@ -26,7 +26,7 @@ limitations under the License.
    }

    h2 {
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);
        font-size: $font-15px;
        line-height: $font-24px;
        margin-top: 0;
--- 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: $font-semi-bold;
+                    font-weight: var(--font-semi-bold);

                    .mx_RoomSettingsDialog_channel {
                        margin-inline-start: 5px;
--- a/res/css/views/dialogs/_ServerPickerDialog.pcss
+++ b/res/css/views/dialogs/_ServerPickerDialog.pcss
@ -37,7 +37,7 @@ limitations under the License.

        > h2 {
            font-size: $font-15px;
-            font-weight: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
            color: $secondary-content;
            margin: 16px 0 16px 8px;
        }
--- 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: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        font-size: $font-12px;
        line-height: $font-15px;
        color: $alert;
@ -48,7 +48,7 @@ limitations under the License.
            margin-bottom: 4px;

            .mx_StyledRadioButton_content {
-                font-weight: $font-semi-bold;
+                font-weight: var(--font-semi-bold);
                line-height: $font-18px;
                color: $primary-content;
            }
--- 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: $font-semi-bold;
+                font-weight: var(--font-semi-bold);
                font-size: $font-12px;
                line-height: $font-15px;
                color: $secondary-content;
--- a/res/css/views/dialogs/_VerifyEMailDialog.pcss
+++ b/res/css/views/dialogs/_VerifyEMailDialog.pcss
@ -27,7 +27,7 @@ limitations under the License.

        h1 {
            font-size: $font-24px;
-            font-weight: 600;
+            font-weight: var(--font-semi-bold);
        }

        .mx_VerifyEMailDialog_text-light {
--- 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: 600;
+        font-weight: var(--font-semi-bold);
    }

    .mx_ToggleSwitch {
@ -103,7 +103,7 @@ limitations under the License.

 .mx_CreateSecretStorageDialog_optionTitle {
    color: $dialog-title-fg-color;
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
    font-size: $font-18px;
    padding-bottom: 10px;
 }
--- a/res/css/views/elements/_AccessibleButton.pcss
+++ b/res/css/views/elements/_AccessibleButton.pcss
@ -90,7 +90,7 @@ limitations under the License.
    &.mx_AccessibleButton_kind_primary,
    &.mx_AccessibleButton_kind_primary_outline,
    &.mx_AccessibleButton_kind_secondary {
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);
    }

    &.mx_AccessibleButton_kind_primary,
--- a/res/css/views/elements/_RoomAliasField.pcss
+++ b/res/css/views/elements/_RoomAliasField.pcss
@ -39,7 +39,7 @@ limitations under the License.
        color: $info-plinth-fg-color;
        border-left: none;
        border-right: none;
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);
        padding: 9px 10px;
        flex: 0 0 auto;
    }
--- a/res/css/views/elements/_SSOButtons.pcss
+++ b/res/css/views/elements/_SSOButtons.pcss
@ -33,7 +33,7 @@ limitations under the License.
        border-radius: 8px;
        display: inline-block;
        font-size: $font-14px;
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        border: 1px solid $input-border-color;
        color: $primary-content;

--- a/res/css/views/elements/_ServerPicker.pcss
+++ b/res/css/views/elements/_ServerPicker.pcss
@ -25,7 +25,7 @@ limitations under the License.
    line-height: $font-20px;

    > h2 {
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        margin: 0 0 20px;
        grid-column: 1;
        grid-row: 1;
--- a/res/css/views/elements/_Tooltip.pcss
+++ b/res/css/views/elements/_Tooltip.pcss
@ -102,7 +102,7 @@ limitations under the License.
 }

 .mx_Tooltip_title {
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
 }

 .mx_Tooltip_sub {
--- a/res/css/views/elements/_UseCaseSelection.pcss
+++ b/res/css/views/elements/_UseCaseSelection.pcss
@ -26,7 +26,7 @@ limitations under the License.
        justify-content: flex-end;

        h1 {
-            font-weight: 600;
+            font-weight: var(--font-semi-bold);
            font-size: $font-32px;
            text-align: center;
        }
--- a/res/css/views/emojipicker/_EmojiPicker.pcss
+++ b/res/css/views/emojipicker/_EmojiPicker.pcss
@ -213,7 +213,7 @@ limitations under the License.
 .mx_EmojiPicker_category_label,
 .mx_EmojiPicker_preview_name {
    font-size: $font-16px;
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
    margin: 0;
 }

--- a/res/css/views/messages/_CallEvent.pcss
+++ b/res/css/views/messages/_CallEvent.pcss
@ -67,7 +67,7 @@ limitations under the License.
 }

 .mx_CallEvent_active .mx_CallEvent_title {
-    font-weight: $font-semi-bold;
+    font-weight: var(--font-semi-bold);
 }

 .mx_CallEvent_columns {
--- a/res/css/views/messages/_DisambiguatedProfile.pcss
+++ b/res/css/views/messages/_DisambiguatedProfile.pcss
@ -22,12 +22,12 @@ limitations under the License.
    cursor: pointer;

    .mx_DisambiguatedProfile_displayName {
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);
        margin-inline-end: 0;
    }

    .mx_DisambiguatedProfile_mxid {
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);
        font-size: 1.1rem;
        margin-inline-start: 5px;
        opacity: 0.5; /* Match mx_TextualEvent */
--- a/res/css/views/messages/_EventTileBubble.pcss
+++ b/res/css/views/messages/_EventTileBubble.pcss
@ -48,7 +48,7 @@ limitations under the License.
    }

    .mx_EventTileBubble_title {
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);
        font-size: $font-15px;
        grid-row: 1;
    }
--- a/res/css/views/messages/_LegacyCallEvent.pcss
+++ b/res/css/views/messages/_LegacyCallEvent.pcss
@ -118,7 +118,7 @@ limitations under the License.
                min-width: 0;

                .mx_LegacyCallEvent_sender {
-                    font-weight: 600;
+                    font-weight: var(--font-semi-bold);
                    font-size: 1.5rem;
                    line-height: 1.8rem;
                    margin-bottom: $spacing-4;
--- a/res/css/views/messages/_MPollBody.pcss
+++ b/res/css/views/messages/_MPollBody.pcss
@ -18,7 +18,7 @@ limitations under the License.
    margin-top: 8px;

    h2 {
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);
        font-size: $font-15px;
        line-height: $font-24px;
        margin-top: 0;
--- a/res/css/views/right_panel/_BaseCard.pcss
+++ b/res/css/views/right_panel/_BaseCard.pcss
@ -34,7 +34,7 @@ limitations under the License.
        > h2 {
            margin: 0 44px; /* TODO: Use a spacing variable */
            font-size: $font-18px;
-            font-weight: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
@ -199,7 +199,7 @@ limitations under the License.
        .mx_AccessibleButton_kind_secondary {
            color: $secondary-content;
            background-color: rgba(141, 151, 165, 0.2);
-            font-weight: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
            font-size: $font-14px;
        }

@ -227,7 +227,7 @@ limitations under the License.
        position: initial;

        span:first-of-type {
-            font-weight: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
            font-size: inherit;
            color: $primary-content;
        }
--- a/res/css/views/right_panel/_RoomSummaryCard.pcss
+++ b/res/css/views/right_panel/_RoomSummaryCard.pcss
@ -21,7 +21,7 @@ limitations under the License.

        h1 {
            margin: $spacing-12 0 $spacing-4;
-            font-weight: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
        }

        .mx_RoomSummaryCard_alias {
@ -237,7 +237,7 @@ limitations under the License.
        margin-top: 12px;
        margin-bottom: 12px;
        font-size: $font-13px;
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
    }
 }

--- a/res/css/views/right_panel/_ThreadPanel.pcss
+++ b/res/css/views/right_panel/_ThreadPanel.pcss
@ -174,7 +174,7 @@ limitations under the License.

    h2 {
        color: $primary-content;
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        font-size: $font-18px;
        margin-top: 24px;
        margin-bottom: 10px;
@ -204,7 +204,7 @@ limitations under the License.
        line-height: $font-15px;

        > b {
-            font-weight: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
        }
    }
 }
--- a/res/css/views/right_panel/_UserInfo.pcss
+++ b/res/css/views/right_panel/_UserInfo.pcss
@ -43,7 +43,7 @@ limitations under the License.

    h2 {
        font-size: $font-18px;
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);
        margin: 18px 0 0 0; /* TODO: Use a variable */
    }

@ -145,7 +145,7 @@ limitations under the License.
    h3 {
        text-transform: uppercase;
        color: $tertiary-content;
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);
        font-size: $font-12px;
        margin: $spacing-4 0;
    }
--- a/res/css/views/room_settings/_AliasSettings.pcss
+++ b/res/css/views/room_settings/_AliasSettings.pcss
@ -31,7 +31,7 @@ limitations under the License.
    summary {
        cursor: pointer;
        color: $accent;
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);
        list-style: none;

        /* list-style doesn't do it for webkit */
--- a/res/css/views/rooms/_AppsDrawer.pcss
+++ b/res/css/views/rooms/_AppsDrawer.pcss
@ -329,7 +329,7 @@ $MinWidth: 240px;
 }

 .mx_AppPermissionWarning_bolder {
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
 }

 .mx_AppPermissionWarning h4 {
--- a/res/css/views/rooms/_DecryptionFailureBar.pcss
+++ b/res/css/views/rooms/_DecryptionFailureBar.pcss
@ -73,7 +73,7 @@ limitations under the License.
        .mx_DecryptionFailureBar_start_headline {
            grid-area: headline;

-            font-weight: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
            font-size: $font-16px;
            align-self: center;
        }
--- a/res/css/views/rooms/_MemberInfo.pcss
+++ b/res/css/views/rooms/_MemberInfo.pcss
@ -50,7 +50,7 @@ limitations under the License.

 .mx_MemberInfo h2 {
    font-size: $font-18px;
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
    margin: 16px 0 16px 15px;
 }

--- a/res/css/views/rooms/_MemberList.pcss
+++ b/res/css/views/rooms/_MemberList.pcss
@ -31,7 +31,7 @@ limitations under the License.
    h2 {
        text-transform: uppercase;
        color: $h3-color;
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);
        font-size: $font-13px;
        padding-left: 3px;
        padding-right: 12px;
@ -85,7 +85,7 @@ limitations under the License.
    display: flex;
    justify-content: center;
    color: $button-fg-color;
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
 }

 .mx_MemberList_invite.mx_AccessibleButton_disabled {
--- a/res/css/views/rooms/_MessageComposerFormatBar.pcss
+++ b/res/css/views/rooms/_MessageComposerFormatBar.pcss
@ -99,7 +99,7 @@ limitations under the License.
 .mx_MessageComposerFormatBar_buttonTooltip {
    white-space: nowrap;
    font-size: $font-13px;
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
    min-width: 54px;
    text-align: center;

--- a/res/css/views/rooms/_NewRoomIntro.pcss
+++ b/res/css/views/rooms/_NewRoomIntro.pcss
@ -55,7 +55,7 @@ limitations under the License.
    > h2 {
        margin-top: 24px;
        font-size: $font-24px;
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);
    }

    > p {
--- a/res/css/views/rooms/_PinnedEventTile.pcss
+++ b/res/css/views/rooms/_PinnedEventTile.pcss
@ -48,7 +48,7 @@ limitations under the License.

    .mx_PinnedEventTile_sender {
        grid-area: name;
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        font-size: $font-15px;
        line-height: $font-24px;
        text-overflow: ellipsis;
--- a/res/css/views/rooms/_ReadReceiptGroup.pcss
+++ b/res/css/views/rooms/_ReadReceiptGroup.pcss
@ -86,7 +86,7 @@ limitations under the License.
        font-size: 12px;
        line-height: 15px;
        margin: 16px 16px 8px;
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);
        /* shouldn’t be actually focusable */
        outline: none;
    }
--- a/res/css/views/rooms/_RoomBreadcrumbs.pcss
+++ b/res/css/views/rooms/_RoomBreadcrumbs.pcss
@ -44,7 +44,7 @@ limitations under the License.
    }

    .mx_RoomBreadcrumbs_placeholder {
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);
        font-size: $font-14px;
        line-height: 32px; /* specifically to match the height this is not scaled */
        height: 32px;
--- a/res/css/views/rooms/_RoomCallBanner.pcss
+++ b/res/css/views/rooms/_RoomCallBanner.pcss
@ -36,7 +36,7 @@ limitations under the License.

 .mx_RoomCallBanner_label {
    color: $primary-content;
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
    padding-right: $spacing-8;

    &::before {
--- a/res/css/views/rooms/_RoomHeader.pcss
+++ b/res/css/views/rooms/_RoomHeader.pcss
@ -65,7 +65,7 @@ limitations under the License.
    flex: 0 1 auto;
    overflow: hidden;
    color: $primary-content;
-    font-weight: $font-semi-bold;
+    font-weight: var(--font-semi-bold);
    font-size: $font-15px;
    min-height: 24px;
    align-items: center;
--- a/res/css/views/rooms/_RoomList.pcss
+++ b/res/css/views/rooms/_RoomList.pcss
@ -50,7 +50,7 @@ limitations under the License.
    font-size: $font-14px;

    div:first-child {
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        line-height: $font-18px;
        color: $primary-content;
    }
--- a/res/css/views/rooms/_RoomListHeader.pcss
+++ b/res/css/views/rooms/_RoomListHeader.pcss
@ -22,7 +22,7 @@ limitations under the License.
    .mx_RoomListHeader_contextMenuButton {
        font-size: $font-15px;
        line-height: $font-24px;
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        padding: 1px 24px 1px 4px;
        position: relative;
        overflow: hidden;
--- a/res/css/views/rooms/_RoomPreviewBar.pcss
+++ b/res/css/views/rooms/_RoomPreviewBar.pcss
@ -24,7 +24,7 @@ limitations under the License.

    h3 {
        font-size: $font-18px;
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);

        &.mx_RoomPreviewBar_spinnerTitle {
            display: flex;
@ -141,7 +141,7 @@ limitations under the License.
 }

 .mx_RoomPreviewBar_inviter {
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
 }

 a.mx_RoomPreviewBar_inviter {
--- a/res/css/views/rooms/_RoomPreviewCard.pcss
+++ b/res/css/views/rooms/_RoomPreviewCard.pcss
@ -26,7 +26,7 @@ limitations under the License.
    font-size: $font-14px;

    .mx_RoomPreviewCard_notice {
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        line-height: $font-24px;
        color: $primary-content;
        margin-top: $spacing-24;
--- a/res/css/views/rooms/_RoomSublist.pcss
+++ b/res/css/views/rooms/_RoomSublist.pcss
@ -147,7 +147,7 @@ limitations under the License.
            max-width: calc(100% - 16px); /* 16px is the badge width */
            line-height: $font-16px;
            font-size: $font-13px;
-            font-weight: 600;
+            font-weight: var(--font-semi-bold);

            /* Ellipsize any text overflow */
            text-overflow: ellipsis;
@ -399,7 +399,7 @@ limitations under the License.
    .mx_RoomSublist_contextMenu_title {
        font-size: $font-15px;
        line-height: $font-20px;
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);
        margin-bottom: 4px;
    }

--- a/res/css/views/rooms/_RoomTile.pcss
+++ b/res/css/views/rooms/_RoomTile.pcss
@ -70,7 +70,7 @@ limitations under the License.
            line-height: $font-18px;

            &.mx_RoomTile_titleHasUnreadEvents {
-                font-weight: 600;
+                font-weight: var(--font-semi-bold);
            }
        }

--- a/res/css/views/rooms/_SearchBar.pcss
+++ b/res/css/views/rooms/_SearchBar.pcss
@ -49,7 +49,7 @@ limitations under the License.
        cursor: pointer;
        color: $primary-content;
        border-bottom: 2px solid $accent;
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);
    }

    .mx_SearchBar_unselected {
--- a/res/css/views/rooms/_ThreadSummary.pcss
+++ b/res/css/views/rooms/_ThreadSummary.pcss
@ -107,7 +107,7 @@ limitations under the License.
    }

    .mx_ThreadSummary_sender {
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
    }

    .mx_ThreadSummary_content {
--- a/res/css/views/rooms/_WhoIsTypingTile.pcss
+++ b/res/css/views/rooms/_WhoIsTypingTile.pcss
@ -58,7 +58,7 @@ limitations under the License.
 .mx_WhoIsTypingTile_label {
    flex: 1;
    font-size: $font-14px;
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
    color: $roomtopic-color;
 }

--- a/res/css/views/settings/_DevicesPanel.pcss
+++ b/res/css/views/settings/_DevicesPanel.pcss
@ -31,7 +31,7 @@ limitations under the License.

    .mx_DevicesPanel_header_title {
        font-size: $font-18px;
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);
        color: $primary-content;
    }

--- a/res/css/views/settings/_JoinRuleSettings.pcss
+++ b/res/css/views/settings/_JoinRuleSettings.pcss
@ -27,7 +27,7 @@ limitations under the License.
 .mx_JoinRuleSettings_spacesWithAccess {
    > h4 {
        color: $secondary-content;
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        font-size: $font-12px;
        line-height: $font-15px;
        text-transform: uppercase;
@ -61,7 +61,7 @@ limitations under the License.

    .mx_StyledRadioButton_content {
        margin-left: 14px;
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        font-size: $font-15px;
        line-height: $font-24px;
        color: $primary-content;
--- a/res/css/views/settings/_Notifications.pcss
+++ b/res/css/views/settings/_Notifications.pcss
@ -53,13 +53,13 @@ limitations under the License.
 }
 .mx_UserNotifSettings_gridRowHeading {
    font-size: $font-18px;
-    font-weight: $font-semi-bold;
+    font-weight: var(--font-semi-bold);
 }

 .mx_UserNotifSettings_gridColumnLabel {
    color: $secondary-content;
    font-size: $font-12px;
-    font-weight: $font-semi-bold;
+    font-weight: var(--font-semi-bold);
 }
 .mx_UserNotifSettings_gridRowError {
    // occupy full row
@ -79,7 +79,7 @@ limitations under the License.
        & > div:first-child {
            /* section header */
            font-size: $font-18px;
-            font-weight: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
        }

        > table {
--- a/res/css/views/settings/_SettingsFieldset.pcss
+++ b/res/css/views/settings/_SettingsFieldset.pcss
@ -22,7 +22,7 @@ limitations under the License.
 .mx_SettingsFieldset_legend {
    font-size: $font-16px;
    display: block;
-    font-weight: $font-semi-bold;
+    font-weight: var(--font-semi-bold);
    color: $primary-content;
    margin-bottom: 10px;
    margin-top: 12px;
--- a/res/css/views/settings/_ThemeChoicePanel.pcss
+++ b/res/css/views/settings/_ThemeChoicePanel.pcss
@ -40,7 +40,7 @@ limitations under the License.
            margin-right: 15px;
            margin-top: 10px;

-            font-weight: 600;
+            font-weight: var(--font-semi-bold);

            > span {
                justify-content: center;
--- a/res/css/views/settings/tabs/_SettingsTab.pcss
+++ b/res/css/views/settings/tabs/_SettingsTab.pcss
@ -33,7 +33,7 @@ limitations under the License.

 .mx_SettingsTab_heading {
    font-size: $font-20px;
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
    color: $primary-content;
    margin-top: 10px; /* TODO: Use a spacing variable */
    margin-bottom: 10px; /* TODO: Use a spacing variable */
@ -47,7 +47,7 @@ limitations under the License.
 .mx_SettingsTab_subheading {
    font-size: $font-16px;
    display: block;
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
    color: $primary-content;
    margin-top: $spacing-12;
    margin-bottom: 10px; /* TODO: Use a spacing variable */
--- a/res/css/views/settings/tabs/room/_NotificationSettingsTab.pcss
+++ b/res/css/views/settings/tabs/room/_NotificationSettingsTab.pcss
@ -22,7 +22,7 @@ limitations under the License.
        color: $primary-content;
        font-size: $font-15px;
        line-height: $font-18px;
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        margin-top: 16px;
        position: relative;
        padding-left: 8px;
--- a/res/css/views/spaces/_SpaceCreateMenu.pcss
+++ b/res/css/views/spaces/_SpaceCreateMenu.pcss
@ -33,7 +33,7 @@ $spacePanelWidth: 68px;

        > div {
            > h2 {
-                font-weight: $font-semi-bold;
+                font-weight: var(--font-semi-bold);
                font-size: $font-18px;
                margin-top: 4px;
            }
--- a/res/css/views/toasts/_AnalyticsToast.pcss
+++ b/res/css/views/toasts/_AnalyticsToast.pcss
@ -19,13 +19,13 @@ limitations under the License.
        background-color: $accent;
        color: #ffffff;
        border: 1px solid $accent;
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
    }

    .mx_AccessibleButton_kind_primary {
        background-color: $accent;
        color: #ffffff;
        border: 1px solid $accent;
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
    }
 }
--- a/res/css/views/toasts/_IncomingCallToast.pcss
+++ b/res/css/views/toasts/_IncomingCallToast.pcss
@ -36,7 +36,7 @@ limitations under the License.
            .mx_IncomingCallToast_room {
                display: inline-block;

-                font-weight: $font-semi-bold;
+                font-weight: var(--font-semi-bold);
                font-size: $font-15px;
                line-height: $font-24px;

--- a/res/css/views/typography/_Heading.pcss
+++ b/res/css/views/typography/_Heading.pcss
@ -16,7 +16,7 @@ limitations under the License.

 .mx_Heading_h1 {
    font-size: $font-32px;
-    font-weight: $font-semi-bold;
+    font-weight: var(--font-semi-bold);
    line-height: $font-39px;
    margin-inline: unset;
    margin-block: unset;
@ -24,7 +24,7 @@ limitations under the License.

 .mx_Heading_h2 {
    font-size: $font-24px;
-    font-weight: $font-semi-bold;
+    font-weight: var(--font-semi-bold);
    line-height: $font-29px;
    margin-inline: unset;
    margin-block: unset;
@ -32,7 +32,7 @@ limitations under the License.

 .mx_Heading_h3 {
    font-size: $font-18px;
-    font-weight: $font-semi-bold;
+    font-weight: var(--font-semi-bold);
    line-height: $font-22px;
    margin-inline: unset;
    margin-block: unset;
@ -40,7 +40,7 @@ limitations under the License.

 .mx_Heading_h4 {
    font-size: $font-15px;
-    font-weight: $font-semi-bold;
+    font-weight: var(--font-semi-bold);
    line-height: $font-20px;
    margin-inline: unset;
    margin-block: unset;
--- a/res/css/views/voip/_DialPad.pcss
+++ b/res/css/views/voip/_DialPad.pcss
@ -36,7 +36,7 @@ limitations under the License.
    background-color: $quinary-content;
    border-radius: 40px;
    font-size: 18px;
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
    text-align: center;
    vertical-align: middle;
    margin-left: auto;
--- a/res/css/views/voip/_DialPadContextMenu.pcss
+++ b/res/css/views/voip/_DialPadContextMenu.pcss
@ -48,19 +48,19 @@ limitations under the License.
 .mx_DialPadContextMenu_title {
    color: $muted-fg-color;
    font-size: 12px;
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
 }

 .mx_DialPadContextMenu_dialled {
    height: 1.5em;
    font-size: 18px;
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
    border: none;
    margin: 0px;
 }
 .mx_DialPadContextMenu_dialled input {
    font-size: 18px;
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
    overflow: hidden;
    max-width: 185px;
    text-align: left;
--- a/res/css/views/voip/_DialPadModal.pcss
+++ b/res/css/views/voip/_DialPadModal.pcss
@ -41,7 +41,7 @@ limitations under the License.
 .mx_DialPadModal_title {
    color: $muted-fg-color;
    font-size: 12px;
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
 }

 .mx_DialPadModal_cancel {
@ -65,7 +65,7 @@ limitations under the License.

 .mx_DialPadModal_field input {
    font-size: 18px;
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
 }

 .mx_DialPadModal_dialPad {
--- a/res/css/voice-broadcast/atoms/_LiveBadge.pcss
+++ b/res/css/voice-broadcast/atoms/_LiveBadge.pcss
@ -21,7 +21,7 @@ limitations under the License.
    color: $live-badge-color;
    display: inline-flex;
    font-size: $font-12px;
-    font-weight: $font-semi-bold;
+    font-weight: var(--font-semi-bold);
    gap: $spacing-4;
    padding: 2px 4px;
 }
--- a/res/css/voice-broadcast/atoms/_VoiceBroadcastHeader.pcss
+++ b/res/css/voice-broadcast/atoms/_VoiceBroadcastHeader.pcss
@ -34,7 +34,7 @@ limitations under the License.

 .mx_VoiceBroadcastHeader_room {
    font-size: $font-12px;
-    font-weight: $font-semi-bold;
+    font-weight: var(--font-semi-bold);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;