fix: Move headings typography adjustments to Heading component to avoid interfering with UI elements that don't look like heading but rendering using heading elements

Author: sapegin

src/components/Heading.tsx

@@ -4,6 +4,10 @@ import { createBox, type BoxProps } from './Box';
 
 const heading = cva({
 	base: {
+		textRendering: 'optimizeLegibility',
+		// @ts-expect-error Not in the types for some reason
+		MozOsxFontSmoothing: 'grayscale',
+		WebkitFontSmoothing: 'antialiased',
 		color: 'text',
 		fontFamily: 'heading',
 		fontWeight: 'bold',

src/panda-preset/globalCss.ts

@@ -38,13 +38,6 @@ export const globalCss = defineGlobalStyles({
 		hyphens: 'none',
 	},
 
-	// Better looking headings
-	'h1, h2, h3, h4, h5, h6': {
-		textRendering: 'optimizeLegibility',
-		MozOsxFontSmoothing: 'grayscale',
-		WebkitFontSmoothing: 'antialiased',
-	},
-
 	// Remove the weird gap below images
 	'img, svg, video, canvas, audio, iframe, embed, object': {
 		display: 'block',