Compound Typography pass (#11103)

* Integrate compound design tokens

The icons should not be included in this repo, and should live in the compound design token repo, but for simplicity sake at this phase of the integration they will be added here

* Delete unused or incorrect - sass variables

* Typography pass

* Deprecate _font-weights.pcss and use Compound instead

* lint fix

* Fix snapshot

* Fix typography pass feedback

* Remove unwanted e2e test

cypress tests should test functionality not visual output. And we should not test visual output by inspecting CSS properties

* lintfix

* Migration script for baseFontSize

* Updates after design review

* Update font scaling panel to use min/max size

* Fix custom font

* Fix font slider e2e test

* Update custom font

* Update new baseFontSizeV2

* Disambiguate heading props

* Fix appearance test

* change max font size

* fix e2ee test

* fix tests

* test baseFontSize migration code

* typescript strict

* Migrate baseFontSize account setting

* Change assertion for font size

* Fix font size controller test

Author: Germain

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/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],
             });
         });

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/_font-weights.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/_BeaconListItem.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/_DialogSidebar.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/beacon/_OwnBeaconStatus.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/_AppPermission.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/_FilterDropdown.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/elements/_FilterTabGroup.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/pips/_WidgetPip.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/settings/devices/_DeviceSecurityCard.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;