Remove global h2 css rule in favour of heading styles/components (#32969)

* Remove global h2 css rule in favour of heading styles/components * Use Compound Heading in shared-components and forbid hX elements * Use Compound Heading in settings add back margin to some legacy headings * Tweak some headings * Update screenshots * Update screenshots * Update snapshots * Tweak .gitignore * Update snapshots * Iterate * Update screenshots * Update screenshots * Update screenshot
2026-04-02 16:13:17 +00:00
parent 7bbd86ca10
commit 2d3e2fcb70
89 changed files with 65 additions and 30 deletions
@@ -163,14 +163,6 @@ b {
    font-weight: bold;
 }

-h2 {
-    color: $primary-content;
-    font: var(--cpd-font-heading-lg-regular);
-    letter-spacing: var(--cpd-font-letter-spacing-heading-lg);
-    margin-top: 16px;
-    margin-bottom: 16px;
-}
-
 a:hover,
 a:link,
 a:visited {
@@ -335,6 +335,7 @@
@import "./views/settings/_SpellCheckLanguages.pcss";
@import "./views/settings/_ThemeChoicePanel.pcss";
@import "./views/settings/_UpdateCheckButton.pcss";
+@import "./views/settings/_UserPersonalInfoSettings.pcss";
@import "./views/settings/_UserProfileSettings.pcss";
@import "./views/settings/encryption/_AdvancedPanel.pcss";
@import "./views/settings/encryption/_ChangeRecoveryKey.pcss";
@@ -30,8 +30,7 @@ Please see LICENSE files in the repository root for full details.

 .mx_DevTools_toolHeading {
    color: var(--cpd-color-text-secondary);
-    font-weight: var(--cpd-font-weight-semibold);
-    font-size: var(--cpd-font-size-heading-sm);
+    font: var(--cpd-font-heading-sm-semibold);
 }

 .mx_DevTools_content {
@@ -118,6 +118,7 @@ Please see LICENSE files in the repository root for full details.

 .mx_EmojiPicker_category_label {
    width: 304px;
+    font: var(--cpd-font-heading-sm-semibold);
 }

 .mx_EmojiPicker_list {
@@ -37,9 +37,8 @@ Please see LICENSE files in the repository root for full details.
    }

    > h2 {
-        margin-top: 24px;
-        font-size: $font-24px;
-        font-weight: var(--cpd-font-weight-semibold);
+        margin: var(--cpd-space-6x) 0 var(--cpd-space-4x);
+        font: var(--cpd-font-heading-md-semibold);
    }

    > p {
@@ -0,0 +1,12 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_UserPersonalInfoSettings {
+    h2 {
+        margin: var(--cpd-space-4x) 0;
+    }
+}
@@ -9,6 +9,10 @@ Please see LICENSE files in the repository root for full details.
 .mx_UserProfileSettings {
    border-bottom: 1px solid $quinary-content;

+    h2 {
+        margin: var(--cpd-space-4x) 0;
+    }
+
    .mx_UserProfileSettings_profile {
        display: flex;
        margin-top: var(--cpd-space-6x);
@@ -23,7 +23,7 @@ Please see LICENSE files in the repository root for full details.

        > div {
            > h2 {
-                font-weight: var(--cpd-font-weight-semibold);
+                font: var(--cpd-font-heading-sm-semibold);
                font-size: $font-18px;
                margin-top: 4px;
            }
@@ -12,6 +12,7 @@ Please see LICENSE files in the repository root for full details.
 .mx_Heading_h4 {
    margin-inline: unset;
    margin-block: unset;
+    color: $primary-content;
 }

 .mx_Heading_h1 {