From e18c34ed6f6909cf4dbb97d6526445fb35c0f645 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 9 Oct 2025 19:07:21 +0000
Subject: [PATCH 1/4] Initial plan


From d4ca49ec4adc4c6256e895ad5437ef2800cbd080 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 9 Oct 2025 19:25:39 +0000
Subject: [PATCH 2/4] Fix Heading component styles not being applied

Changed Heading from extending Text with attrs to being a standalone styled.div with its own attrs. This fixes the issue where attrs from parent components were overriding child component defaults.

Co-authored-by: ryan-roemer <445557+ryan-roemer@users.noreply.github.com>
---
 packages/spectacle/src/components/typography.test.tsx | 5 +++++
 packages/spectacle/src/components/typography.tsx      | 5 +++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/spectacle/src/components/typography.test.tsx b/packages/spectacle/src/components/typography.test.tsx
index b8eb7338..8e71d1a2 100644
--- a/packages/spectacle/src/components/typography.test.tsx
+++ b/packages/spectacle/src/components/typography.test.tsx
@@ -34,6 +34,11 @@ describe('<Heading />', () => {
     const { getByText } = mountWithTheme(<Heading>Spectacle!</Heading>);
     expect(getByText('Spectacle!')).toHaveStyle({ fontSize: 'h1' });
   });
+
+  it('should apply the secondary color from theme', () => {
+    const { getByText } = mountWithTheme(<Heading>Spectacle!</Heading>);
+    expect(getByText('Spectacle!')).toHaveStyle({ color: '#fc6986' });
+  });
 });
 
 describe('<Quote />', () => {
diff --git a/packages/spectacle/src/components/typography.tsx b/packages/spectacle/src/components/typography.tsx
index c6054f9b..9bf648da 100644
--- a/packages/spectacle/src/components/typography.tsx
+++ b/packages/spectacle/src/components/typography.tsx
@@ -53,15 +53,16 @@ const Link = styled.a.attrs<CommonTypographyProps & DecorationProps>(
   compose(color, typography, space, decoration)
 );
 
-const Heading = styled(Text).attrs<CommonTypographyProps>((props) => ({
+const Heading = styled.div.attrs<CommonTypographyProps>((props) => ({
   color: 'secondary',
   fontFamily: 'header',
   fontSize: 'h1',
   fontWeight: 'bold',
   textAlign: 'center',
   margin: 1,
+  padding: 0,
   ...props
-}))<CommonTypographyProps>({});
+}))<CommonTypographyProps>(compose(color, typography, space));
 
 const Quote = styled(
   Text as FC<

From 6d7af9b407d06f6ff89c37f2c28f567c8a55f1cf Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 9 Oct 2025 20:28:50 +0000
Subject: [PATCH 3/4] Add changeset for heading color fix at patch level

Co-authored-by: ryan-roemer <445557+ryan-roemer@users.noreply.github.com>
---
 .changeset/fix-heading-secondary-color.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/fix-heading-secondary-color.md

diff --git a/.changeset/fix-heading-secondary-color.md b/.changeset/fix-heading-secondary-color.md
new file mode 100644
index 00000000..c4023bfd
--- /dev/null
+++ b/.changeset/fix-heading-secondary-color.md
@@ -0,0 +1,5 @@
+---
+"spectacle": patch
+---
+
+Fix Heading component not applying secondary color styling. Restores pink color (#fc6986) for headings that was lost in v10.2.2 when replacing defaultProps with attrs method.

From e49d25334e4d957408cbce111f66ce11b4991784 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 9 Oct 2025 20:35:04 +0000
Subject: [PATCH 4/4] Update changeset to use named color instead of hex code

Co-authored-by: ryan-roemer <445557+ryan-roemer@users.noreply.github.com>
---
 .changeset/fix-heading-secondary-color.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/fix-heading-secondary-color.md b/.changeset/fix-heading-secondary-color.md
index c4023bfd..e33f954d 100644
--- a/.changeset/fix-heading-secondary-color.md
+++ b/.changeset/fix-heading-secondary-color.md
@@ -2,4 +2,4 @@
 "spectacle": patch
 ---
 
-Fix Heading component not applying secondary color styling. Restores pink color (#fc6986) for headings that was lost in v10.2.2 when replacing defaultProps with attrs method.
+Fix Heading component not applying secondary color styling. Restores correct theme color for headings that was lost in v10.2.2 when replacing defaultProps with attrs method.