Fix: Restore Heading component secondary color styling (regression in v10.2.2)

[Copilot]

Summary

Fixed a regression in v10.2.2 where Heading components lost their pink/secondary color styling. The issue was introduced in PR #1351 when replacing React defaultProps with styled-components .attrs() method for React 19 compatibility.

Problem

• Headings were rendering in primary color (beige #ebe5da) instead of secondary color (pink #fc6986)
• Affected both JSX slides and Markdown slides
• Regression introduced in v10.2.2

Root Cause

When a styled component with .attrs() extends another styled component with .attrs(), the parent's attrs output becomes the child's attrs input. This caused Text's color: 'primary' default to override Heading's color: 'secondary' setting.

Additionally, the original fix used an empty object ({}) instead of compose(color, typography, space), which prevented styled-system from resolving theme values.

Solution

Changed Heading from styled(Text).attrs(...) to styled.div.attrs(...) to be a standalone component. This ensures:

• Heading's defaults are not overridden by Text's defaults
• styled-system functions properly resolve theme values
• User props can still override defaults

Changes

1. Modified Heading component in packages/spectacle/src/components/typography.tsx
2. Added test case to verify secondary color is applied correctly
3. Added changeset at patch level

Testing

• ✅ Added test: "should apply the secondary color from theme"
• ✅ All 115 tests pass
• ✅ Linting passes
• ✅ Manual browser testing confirms fix works
• ✅ Markdown slides also fixed (they use Heading component)

Screenshots

After fix - Headings properly display in pink/secondary color:

Changeset

Added changeset at patch level documenting this fix for the next release.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Bug: Styles not applied.</issue_title>
<issue_description>## Issue

From 10.2.1 to 10.2.2 we lost some of the styling on elements, both in slides and markdowns. Using https://github.com/FormidableLabs/spectacle/blob/main/examples/one-page/index.html as is with npx serve in root and navigating to that page we see the following where the headings should be pink but aren't.

Changing to previous version produces the correct results:

diff --git a/examples/one-page/index.html b/examples/one-page/index.html
index 37d6341..69c23bf 100644
--- a/examples/one-page/index.html
+++ b/examples/one-page/index.html
@@ -13,7 +13,7 @@
       {
         "imports": {
           "htm": "https://esm.sh/htm@^3?external=react,react-dom",
-          "spectacle": "https://esm.sh/spectacle@10?external=react,react-dom&bundle",
+          "spectacle": "https://esm.sh/spectacle@10.2.2?external=react,react-dom&bundle",
           "broadcast-channel": "https://esm.sh/broadcast-channel@^4.17.0?external=react,react-dom",
           "history": "https://esm.sh/history@^5.3.0?external=react,react-dom",
           "kbar": "https://esm.sh/kbar@0.1.0-beta.40?external=react,react-dom",

Task

• Identify any other styling / theme issues.
• Diagnose and fix

Starting point

• Here's the diff of versions: spectacle@10.2.1...spectacle@10.2.2
• The change is this PR: fix: resolve React 19 compatibility by replacing defaultProps with attrs #1351

/cc @umxr </issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #1357

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[changeset-bot]

🦋 Changeset detected

Latest commit: e49d253

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
spectacle	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
spectacle-docs-website	Ready	Preview	Comment	Oct 9, 2025 8:35pm

[ryan-roemer]

@copilot Please add a changeset to this PR at patch level. See the instructions at https://github.com/FormidableLabs/spectacle/blob/main/CONTRIBUTING.md#changesets if you need more details for changesets in this project.

[Copilot]

@copilot Please add a changeset to this PR at patch level. See the instructions at https://github.com/FormidableLabs/spectacle/blob/main/CONTRIBUTING.md#changesets if you need more details for chang...

Added changeset at patch level in commit [hash will be shown after commit]. The changeset documents the fix for the Heading component color regression.

[ryan-roemer]

@copilot this should be a named color (primary, secondary or whatever) and not refer to hex code or color name (e.g. pink). Rest looks good.

[Copilot]

Updated changeset to refer to "secondary color" and "correct theme color" instead of hex code or color name in commit 6d7af9b.

[bredikhin]

🚢 🚢 🚢