diff --git a/CHANGELOG.md b/CHANGELOG.md index 9aa9e3ed1..f53ff99b6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ Currently, this repo is in Prerelease. When it is released, this project will ad ### Updates - Updates the `Pagination` component to handle 4 digit page counts. +- Updates the `Heading` component to add `line-height` styles for mobile. ## 3.5.2 (January 16, 2025) diff --git a/src/components/Heading/Heading.mdx b/src/components/Heading/Heading.mdx index 387a3a403..1a0e6179d 100644 --- a/src/components/Heading/Heading.mdx +++ b/src/components/Heading/Heading.mdx @@ -9,10 +9,10 @@ import { changelogData } from "./headingChangelogData"; # Heading -| Component Version | DS Version | -| ----------------- | ---------- | -| Added | `0.0.4` | -| Latest | `3.4.2` | +| Component Version | DS Version | +| ----------------- | ------------ | +| Added | `0.0.4` | +| Latest | `Prerelease` | ## Table of Contents diff --git a/src/components/Heading/headingChangelogData.ts b/src/components/Heading/headingChangelogData.ts index 363408bae..5ddf90813 100644 --- a/src/components/Heading/headingChangelogData.ts +++ b/src/components/Heading/headingChangelogData.ts @@ -9,6 +9,13 @@ import { ChangelogData } from "../../utils/ComponentChangelogTable"; export const changelogData: ChangelogData[] = [ + { + date: "Prerelease", + version: "Prerelease", + type: "Update", + affects: ["Styles"], + notes: ["Adds `line-height` styles for mobile."], + }, { date: "2024-11-07", version: "3.4.2", diff --git a/src/theme/components/heading.ts b/src/theme/components/heading.ts index 35ac65a42..007aec5ed 100644 --- a/src/theme/components/heading.ts +++ b/src/theme/components/heading.ts @@ -71,7 +71,7 @@ export const headings = { }, fontWeight: "heading.display1", letterSpacing: "0.0625rem", - lineHeight: "1.10", + lineHeight: { base: "1.15", md: "1.10" }, width: "auto", a: { textUnderlineOffset: "7px" }, }, @@ -84,7 +84,7 @@ export const headings = { }, fontWeight: "heading.heading1", letterSpacing: "0.0625rem", - lineHeight: "1.15", + lineHeight: { base: "1.20", md: "1.15" }, width: "auto", a: { textUnderlineOffset: "6px" }, }, @@ -97,7 +97,7 @@ export const headings = { }, fontWeight: "heading.heading2", letterSpacing: "0.0625rem", - lineHeight: "1.20", + lineHeight: { base: "1.25", md: "1.20" }, width: "auto", a: { textUnderlineOffset: "5px" }, }, @@ -110,7 +110,7 @@ export const headings = { }, fontWeight: "heading.heading3", letterSpacing: "0", - lineHeight: "1.25", + lineHeight: { base: "1.30", md: "1.25" }, width: "auto", a: { textUnderlineOffset: "4px" }, }, @@ -123,7 +123,7 @@ export const headings = { }, fontWeight: "heading.heading4", letterSpacing: "0", - lineHeight: "1.30", + lineHeight: { base: "1.35", md: "1.30" }, width: "auto", a: { textUnderlineOffset: "3px" }, }, @@ -136,7 +136,7 @@ export const headings = { }, fontWeight: "heading.heading5", letterSpacing: "0", - lineHeight: "1.35", + lineHeight: { base: "1.40", md: "1.35" }, width: "auto", }, }), @@ -148,7 +148,7 @@ export const headings = { }, fontWeight: "heading.heading6", letterSpacing: "0", - lineHeight: "1.40", + lineHeight: { base: "1.45", md: "1.40" }, width: "auto", }, }), @@ -160,7 +160,7 @@ export const headings = { }, fontWeight: "heading.heading7", letterSpacing: "0", - lineHeight: "1.45", + lineHeight: { base: "1.50", md: "1.45" }, width: "auto", }, }), @@ -172,7 +172,7 @@ export const headings = { }, fontWeight: "heading.heading8", letterSpacing: "0", - lineHeight: "1.50", + lineHeight: "1.50", // The lineHeight value is the same for mobile and desktop because the fontSize value is the same for mobile and desktop. width: "auto", }, }),