Merge pull request #13386 from TylerAPfledderer/feat/shadcn-migrate-text

feat: migrate text and headings to tailwind

Author: pettinarip

src/@chakra-ui/components/Accordion.ts

@@ -5,6 +5,12 @@ const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(accordionAnatomy.keys)
 
 const baseStyle = definePartsStyle({
+  container: {
+    '& > :is(h2, h3)': {
+      fontSize: "initial",
+      fontWeight: 'initial'
+    }
+  },
   button: {
     py: "2",
     px: { base: "2", md: "4" },

src/@chakra-ui/styles.ts

@@ -3,7 +3,6 @@ import { extendBaseTheme, type ThemeConfig } from "@chakra-ui/react"
 import components from "./components"
 import foundations from "./foundations"
 import semanticTokens from "./semanticTokens"
-import styles from "./styles"
 
 const config: ThemeConfig = {
   cssVarPrefix: "eth",
@@ -19,7 +18,6 @@ const config: ThemeConfig = {
  */
 const theme = {
   config,
-  styles,
   ...foundations,
   semanticTokens,
   components,

src/@chakra-ui/theme.ts

@@ -0,0 +1,52 @@
+import * as React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+
+import { Center, Stack } from "../flex"
+
+const meta = {
+  title: "Atoms / Typography / Heading",
+  parameters: {
+    layout: null,
+    chromatic: {
+      modes: {
+        md: {
+          viewport: "md",
+        },
+        "2xl": {
+          viewport: "2xl",
+        },
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Center className='flex-col min-h-[100vh]'>
+        <Story />
+      </Center>
+    ),
+  ],
+} satisfies Meta
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const 
+
+export const Heading: Story = {
+  render: () => (
+    <>
+      <div>
+        Adjust the viewport to below &quot;md&quot; to see the font size and
+        line height change
+      </div>
+      <Stack>
+        {headings.map((Heading) => (
+            <Heading key={Heading}>
+              {`${Heading} base component`}
+            </Heading>
+        ))}
+      </Stack>
+    </>
+  ),
+}