docs: added heading theming docs following the new template

Author: pybash1

configs/sandpack-contents/component-theming/heading.js

@@ -0,0 +1,92 @@
+module.exports = {
+    App: `import { Box, SimpleGrid, IconButton, Center, Heading, useColorMode } from "@chakra-ui/react";
+import { FaMoon, FaSun } from "react-icons/fa";
+export default function App() {
+    const { toggleColorMode, colorMode } = useColorMode();
+    return (
+        <Box position="relative" h="100vh">
+            <SimpleGrid gap={12} p={12} columns={2}>
+              <Heading>Default heading</Heading>
+              <Heading variant="custom">Themed heading</Heading>
+              <Heading variant="brand">Another themed heading</Heading>
+              <Heading variant="thicc">Hover me(in dark mode)</Heading>
+            </SimpleGrid>
+            <IconButton
+                rounded="full"
+                size="xs"
+                position="absolute"
+                bottom={4}
+                left={4}
+                onClick={toggleColorMode} icon={colorMode === "dark" ? <FaSun /> : <FaMoon />}
+            />
+        </Box>
+    );
+}`,
+    Index: `import * as React from "react";
+import { createRoot } from "react-dom/client";
+import { ChakraProvider, extendTheme } from "@chakra-ui/react";
+import App from "./App";
+import { headingTheme } from "./theme/components/Heading.ts";
+const theme = extendTheme({
+    components: {
+        Heading: headingTheme,
+    }
+});
+const container = document.getElementById("root");
+const root = createRoot(container!);
+root.render(
+    <ChakraProvider theme={theme}>
+        <App />
+    </ChakraProvider>
+);`,
+    HeadingTheme: `import { defineStyle, defineStyleConfig } from "@chakra-ui/styled-system"
+const brandPrimary = defineStyle({
+    color: "blue.500",
+    border: "0px",
+    // let's also provide dark mode alternatives
+    _dark: {
+        color: 'blue.300',
+    }
+})
+
+const custom = defineStyle({
+    color: "yellow.500",
+    border: "0px",
+    // let's also provide dark mode alternatives
+    _dark: {
+        color: 'yellow.300',
+    }
+})
+
+const thicc = defineStyle({
+    color: "orange.500",
+    border: "0px",
+    bg: "blue.200",
+    p: "3",
+    borderRadius: "10",
+    transition: 'transform 0.15s ease-in-out, background 0.15s ease-in-out',
+    // let's also provide dark mode alternatives
+    _dark: {
+        color: 'orange.400',
+        bg: "blue.200"
+    },
+    _hover: {
+      bg: "blue.100",
+      color: "purple.300",
+      transform: "scale(1, 1)",
+      _dark: {
+        bg: "blue.100",
+        color: "purple.300",
+        transform: "scale(3, 3)",
+      }
+    }
+})
+
+export const headingTheme = defineStyleConfig({
+    variants: {
+        brand: brandPrimary,
+        "custom": custom,
+        "thicc": thicc
+    },
+})`,
+}

content/docs/components/heading/theming.mdx

@@ -2,3 +2,160 @@
 id: heading
 scope: theming
 ---
+
+The `Heading` component is a single part component. All of the styling is applied
+directly to the `h2` element.
+
+> To learn more about styling single part components, visit the [Component Style](/docs/styled-system/component-style#styling-single-part-components) page
+## Theming properties
+
+The properties that affect the theming of the `Heading` component are:
+
+- `variant`: The visual variant of the divider.
+- `colorScheme`: The color scheme of the divider.
+- `size`: The size of the divider. Defaults to `xl`.
+
+## Theming utilities
+
+- `defineStyle`: a function used to create style objects.
+- `defineStyleConfig`: a function used to define the style configuration for a single part component.
+
+```js
+import { defineStyle, defineStyleConfig } from '@chakra-ui/react'
+```
+
+## Customizing the default theme
+
+```js
+import { defineStyle, defineStyleConfig } from '@chakra-ui/react'
+
+const custom = defineStyle({
+    color: "yellow.500",
+    border: "0px",
+    // let's also provide dark mode alternatives
+    _dark: {
+        color: 'yellow.300',
+    }
+})
+```
+After customizing the divider theme, we can import it in our theme file and add it in the components property:
+
+```js
+import { extendTheme } from '@chakra-ui/react'
+import { headingTheme } from './components/divider.ts'
+
+export const theme = extendTheme({
+    components: { Heading: headingTheme },
+})
+```
+
+> This is a crucial step to make sure that any changes that we make to the divider theme are applied.
+
+Every time you're adding anything new to the theme, you'd need to run the cli command to get proper autocomplete in your IDE. Here's how you can do that:
+
+```bash
+# run it once:
+npx chakra-cli tokens path/to/theme.ts
+# or run it in watch mode:
+npx chakra-cli tokens path/to/theme.ts --watch
+```
+
+## Adding a custom variant
+
+Let's assume we want to include a custom branded variant. Here's how we can do that:
+
+```js
+import { defineStyle, defineStyleConfig } from '@chakra-ui/react'
+
+const thicc = defineStyle({
+    color: "orange.500",
+    border: "0px",
+    bg: "blue.200",
+    p: "3",
+    borderRadius: "10",
+    transition: 'transform 0.15s ease-in-out, background 0.15s ease-in-out',
+    // let's also provide dark mode alternatives
+    _dark: {
+        color: 'orange.400',
+        bg: "blue.200"
+    },
+    _hover: {
+        bg: "blue.100",
+        color: "purple.300",
+        transform: "scale(1, 1)",
+        _dark: {
+            bg: "blue.100",
+            color: "purple.300",
+            transform: "scale(3, 3)",
+        }
+    }
+})
+
+// Now we can use the new `thicc` variant
+<Divider variant="thicc">...</Divider>
+```
+
+## Using a custom color scheme
+
+Let's assume we want to use our own custom color scale based on our brand. We'd need to define the color scale first in the main theme file:
+
+```js
+import { extendTheme } from '@chakra-ui/react'
+export const theme = extendTheme({
+    colors: {
+        brand: {
+            50: '#f7fafc',
+            ...
+            500: '#718096',
+            ...
+            900: '#171923',
+        }
+    }
+})
+```
+
+Then, we can use the custom color scale as the color scheme for the divider:
+
+```jsx
+<Divider colorScheme='brand'>...</Divider>
+```
+
+## Changing the default properties
+
+```js
+import { defineStyleConfig } from '@chakra-ui/react'
+
+export const dividerTheme = defineStyleConfig({
+    defaultProps: {
+        size: 'xl',
+        variant: 'custom',
+        colorScheme: 'brand',
+    },
+})
+
+// This saves you time, instead of manually setting the size,
+// variant and color scheme every time you use a divider:
+<Divider size="xl" variant="thicc" colorScheme="brand">...</Divider>
+```
+
+## Showcase
+
+import {
+    App,
+    Index,
+    HeadingTheme,
+} from 'configs/sandpack-contents/component-theming/heading'
+
+<SandpackEmbed
+    files={{
+        '/theme/components/Heading.ts': HeadingTheme,
+        '/App.tsx': App,
+        '/index.tsx': {
+            code: Index,
+            hidden: true,
+        },
+    }}
+    dependencies={{
+        'react-icons': '^4.4.0',
+    }}
+/>