Compound Typography pass

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", () => {

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 });
         });
 

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;

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";

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;

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);
     }
 }
 

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;
 }

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;
 }

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 */
 

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;
 }
 

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;
         }

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));
 }
 

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;
 }
 

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;

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;
 }

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);
                 }
             }
         }