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 {
@@ -18,6 +18,7 @@ import { type ThirdPartyIdentifier } from "../../../AddThreepid";
 import SettingsStore from "../../../settings/SettingsStore";
 import { UIFeature } from "../../../settings/UIFeature";
 import { AddRemoveThreepids } from "./AddRemoveThreepids";
+import Heading from "../typography/Heading.tsx";

 type LoadingState = "loading" | "loaded" | "error";

@@ -81,8 +82,8 @@ export const UserPersonalInfoSettings: React.FC<UserPersonalInfoSettingsProps> =
    if (!SettingsStore.getValue(UIFeature.ThirdPartyID)) return null;

    return (
-        <div>
-            <h2>{_t("settings|general|personal_info")}</h2>
+        <div className="mx_UserPersonalInfoSettings">
+            <Heading size="2">{_t("settings|general|personal_info")}</Heading>
            <SettingsSubsection
                heading={_t("settings|general|emails_heading")}
                stretchContent
@@ -27,6 +27,7 @@ import AccessibleButton from "../elements/AccessibleButton";
 import LogoutDialog, { shouldShowLogoutDialog } from "../dialogs/LogoutDialog";
 import Modal from "../../../Modal";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
+import Heading from "../typography/Heading.tsx";

 const SpinnerToast: React.FC<{ children?: ReactNode }> = ({ children }) => (
    <>
@@ -194,7 +195,7 @@ const UserProfileSettings: React.FC<UserProfileSettingsProps> = ({

    return (
        <div className="mx_UserProfileSettings">
-            <h2>{_t("common|profile")}</h2>
+            <Heading size="2">{_t("common|profile")}</Heading>
            <div>
                {someFieldsDisabled
                    ? _t("settings|general|profile_subtitle_oidc")
@@ -47,11 +47,12 @@ exports[`MessagePanel should handle lots of membership events quickly 1`] = `
              role="none"
            />
            <div
-              class="_flex_4dswl_9 _content_5dcky_8"
+              class="_flex_4dswl_9 _content_u6fft_8"
              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
            >
              <h2
                aria-hidden="true"
+                class="_typography_6v6n8_153 _font-heading-lg-regular_6v6n8_121"
              >
                Thu, Jan 1, 1970
              </h2>
@@ -49,11 +49,12 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
                  role="none"
                />
                <div
-                  class="_flex_4dswl_9 _content_5dcky_8"
+                  class="_flex_4dswl_9 _content_u6fft_8"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
                >
                  <h2
                    aria-hidden="true"
+                    class="_typography_6v6n8_153 _font-heading-lg-regular_6v6n8_121"
                  >
                    Thu, Jan 1, 1970
                  </h2>
@@ -188,11 +189,12 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
                  role="none"
                />
                <div
-                  class="_flex_4dswl_9 _content_5dcky_8"
+                  class="_flex_4dswl_9 _content_u6fft_8"
                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
                >
                  <h2
                    aria-hidden="true"
+                    class="_typography_6v6n8_153 _font-heading-lg-regular_6v6n8_121"
                  >
                    Thu, Jan 1, 1970
                  </h2>