[v12] feat(ui-heading): rework Heading

[ToMESSKa]

INSTUI-4869

ISSUE:

Heading needs to be migrated to the new theming system

TEST PLAN:

• compare the component to the Figma design https://www.figma.com/design/5WFqF3HVlNdfcJooCaiFoh/InstUI-Component-Library---Beta?node-id=9871-951&p=f&m=dev
• check if all tokens are used in styles.ts
• check if the component works the same as before
• check the icons gaps (gap between the icon and the text) and sizes for each variant against the Figma

<div>
  <Heading variant="titlePageDesktop" level="h1" renderIcon={<DiamondInstUIIcon/>}>titlePageDesktop</Heading><br/>
  <Heading variant="titlePageMobile" level="h1" renderIcon={<DiamondInstUIIcon/>}>titlePageMobile</Heading><br/>
  <Heading variant="titleSection" level="h2" renderIcon={<DiamondInstUIIcon/>}>titleSection</Heading><br/>
  <Heading variant="titleCardSection" level="h2" renderIcon={<DiamondInstUIIcon/>}>titleCardSection</Heading><br/>
  <Heading variant="titleModule" level="h2" renderIcon={<DiamondInstUIIcon/>}>titleModule</Heading><br/>
  <Heading variant="titleCardLarge" level="h3" renderIcon={<DiamondInstUIIcon/>}>titleCardLarge</Heading><br/>
  <Heading variant="titleCardRegular" level="h3" renderIcon={<DiamondInstUIIcon/>}>titleCardRegular</Heading><br/>
  <Heading variant="titleCardMini" level="h4" renderIcon={<DiamondInstUIIcon/>}>titleCardMini</Heading><br/>
  <Heading variant="label" level="h5" renderIcon={<DiamondInstUIIcon/>}>label</Heading><br/>
  <Heading variant="labelInline" level="h6" renderIcon={<DiamondInstUIIcon/>}>labelInline</Heading><br/>
</div>

• check the icons gaps (gap between the icon and the text) and sizes @adamlobler (not in Figma)

<div>
  <Heading level="h1" renderIcon={<DiamondInstUIIcon/>}>titlePageDesktop</Heading><br/>
  <Heading level="h2" renderIcon={<DiamondInstUIIcon/>}>titlePageMobile</Heading><br/>
  <Heading level="h3" renderIcon={<DiamondInstUIIcon/>}>titleSection</Heading><br/>
  <Heading level="h4" renderIcon={<DiamondInstUIIcon/>}>titleCardSection</Heading><br/>
  <Heading level="h5" renderIcon={<DiamondInstUIIcon/>}>titleModule</Heading><br/>
  <Heading level="h6" renderIcon={<DiamondInstUIIcon/>}>titleCardLarge</Heading><br/>
</div>

• check the AI variants

[github-actions]

PR Preview Action v1.8.0
🚀 View preview at https://instructure.design/pr-preview/pr-2365/
Built to branch gh-pages at 2026-01-15 15:24 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[ToMESSKa]

this is a composit token now

[ToMESSKa]

I think this is some dead code/duplication as the 'stacked', 'horizontal' and 'iconOnly' AI cases are already checked above...(?)

[adamlobler]

there was a "none breaking space" here before the heading text that is missing

before:

after:

[adamlobler]

Now the default text color is "inherit" and as a result it gets the color value from somewhere else from the system, I think it would be more secure to have the "primary" color by default, wdyt?

That's why we have this text color here as well in dark mode: