refactor: add headers to theming

jsorb84 · Mar 5, 2023 · a427566 · a427566
1 parent b1b5e60
commit a427566
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 45 deletions.
diff --git a/configs/search-meta.json b/configs/search-meta.json
@@ -45350,53 +45350,75 @@
     "hierarchy": {}
   },
   {
-    "content": "Anatomy",
+    "content": "Theming",
     "id": "//docs/components/accordion/theming",
     "type": "lvl2",
+    "url": "/docs/components/accordion/theming#theming",
+    "hierarchy": { "lvl2": "Theming", "lvl3": null }
+  },
+  {
+    "content": "Anatomy",
+    "id": "//docs/components/accordion/theming",
+    "type": "lvl3",
     "url": "/docs/components/accordion/theming#anatomy",
-    "hierarchy": { "lvl2": "Anatomy", "lvl3": null }
+    "hierarchy": { "lvl2": "Theming", "lvl3": "Anatomy" }
   },
   {
     "content": "Theming utilities",
     "id": "//docs/components/accordion/theming",
-    "type": "lvl2",
+    "type": "lvl3",
     "url": "/docs/components/accordion/theming#theming-utilities",
-    "hierarchy": { "lvl2": "Theming utilities", "lvl3": null }
+    "hierarchy": { "lvl2": "Anatomy", "lvl3": "Theming utilities" }
   },
   {
     "content": "Customizing the default theme",
     "id": "//docs/components/accordion/theming",
-    "type": "lvl2",
+    "type": "lvl3",
     "url": "/docs/components/accordion/theming#customizing-the-default-theme",
-    "hierarchy": { "lvl2": "Customizing the default theme", "lvl3": null }
+    "hierarchy": {
+      "lvl2": "Theming utilities",
+      "lvl3": "Customizing the default theme"
+    }
   },
   {
     "content": "Adding a custom size",
     "id": "//docs/components/accordion/theming",
-    "type": "lvl2",
+    "type": "lvl3",
     "url": "/docs/components/accordion/theming#adding-a-custom-size",
-    "hierarchy": { "lvl2": "Adding a custom size", "lvl3": null }
+    "hierarchy": {
+      "lvl2": "Customizing the default theme",
+      "lvl3": "Adding a custom size"
+    }
   },
   {
     "content": "Adding a custom variant",
     "id": "//docs/components/accordion/theming",
-    "type": "lvl2",
+    "type": "lvl3",
     "url": "/docs/components/accordion/theming#adding-a-custom-variant",
-    "hierarchy": { "lvl2": "Adding a custom variant", "lvl3": null }
+    "hierarchy": {
+      "lvl2": "Adding a custom size",
+      "lvl3": "Adding a custom variant"
+    }
   },
   {
     "content": "Changing the default properties",
     "id": "//docs/components/accordion/theming",
-    "type": "lvl2",
+    "type": "lvl3",
     "url": "/docs/components/accordion/theming#changing-the-default-properties",
-    "hierarchy": { "lvl2": "Changing the default properties", "lvl3": null }
+    "hierarchy": {
+      "lvl2": "Adding a custom variant",
+      "lvl3": "Changing the default properties"
+    }
   },
   {
     "content": "Showcase",
     "id": "//docs/components/accordion/theming",
-    "type": "lvl2",
+    "type": "lvl3",
     "url": "/docs/components/accordion/theming#showcase",
-    "hierarchy": { "lvl2": "Showcase", "lvl3": null }
+    "hierarchy": {
+      "lvl2": "Changing the default properties",
+      "lvl3": "Showcase"
+    }
   },
   {
     "content": "Accordion",
@@ -49335,60 +49357,82 @@
     "hierarchy": {}
   },
   {
-    "content": "Anatomy",
+    "content": "Theming",
     "id": "//docs/components/modal/theming",
     "type": "lvl2",
+    "url": "/docs/components/modal/theming#theming",
+    "hierarchy": { "lvl2": "Theming", "lvl3": null }
+  },
+  {
+    "content": "Anatomy",
+    "id": "//docs/components/modal/theming",
+    "type": "lvl3",
     "url": "/docs/components/modal/theming#anatomy",
-    "hierarchy": { "lvl2": "Anatomy", "lvl3": null }
+    "hierarchy": { "lvl2": "Theming", "lvl3": "Anatomy" }
   },
   {
     "content": "Theming properties",
     "id": "//docs/components/modal/theming",
-    "type": "lvl2",
+    "type": "lvl3",
     "url": "/docs/components/modal/theming#theming-properties",
-    "hierarchy": { "lvl2": "Theming properties", "lvl3": null }
+    "hierarchy": { "lvl2": "Anatomy", "lvl3": "Theming properties" }
   },
   {
     "content": "Theming utilities",
     "id": "//docs/components/modal/theming",
-    "type": "lvl2",
+    "type": "lvl3",
     "url": "/docs/components/modal/theming#theming-utilities",
-    "hierarchy": { "lvl2": "Theming utilities", "lvl3": null }
+    "hierarchy": { "lvl2": "Theming properties", "lvl3": "Theming utilities" }
   },
   {
     "content": "Customizing the default theme",
     "id": "//docs/components/modal/theming",
-    "type": "lvl2",
+    "type": "lvl3",
     "url": "/docs/components/modal/theming#customizing-the-default-theme",
-    "hierarchy": { "lvl2": "Customizing the default theme", "lvl3": null }
+    "hierarchy": {
+      "lvl2": "Theming utilities",
+      "lvl3": "Customizing the default theme"
+    }
   },
   {
     "content": "Adding a custom size",
     "id": "//docs/components/modal/theming",
-    "type": "lvl1",
+    "type": "lvl3",
     "url": "/docs/components/modal/theming#adding-a-custom-size",
-    "hierarchy": { "lvl2": "Customizing the default theme", "lvl3": null }
+    "hierarchy": {
+      "lvl2": "Customizing the default theme",
+      "lvl3": "Adding a custom size"
+    }
   },
   {
     "content": "Adding a custom variant",
     "id": "//docs/components/modal/theming",
-    "type": "lvl2",
+    "type": "lvl3",
     "url": "/docs/components/modal/theming#adding-a-custom-variant",
-    "hierarchy": { "lvl2": "Adding a custom variant", "lvl3": null }
+    "hierarchy": {
+      "lvl2": "Adding a custom size",
+      "lvl3": "Adding a custom variant"
+    }
   },
   {
     "content": "Changing the default properties",
     "id": "//docs/components/modal/theming",
-    "type": "lvl2",
+    "type": "lvl3",
     "url": "/docs/components/modal/theming#changing-the-default-properties",
-    "hierarchy": { "lvl2": "Changing the default properties", "lvl3": null }
+    "hierarchy": {
+      "lvl2": "Adding a custom variant",
+      "lvl3": "Changing the default properties"
+    }
   },
   {
     "content": "Showcase",
     "id": "//docs/components/modal/theming",
-    "type": "lvl2",
+    "type": "lvl3",
     "url": "/docs/components/modal/theming#showcase",
-    "hierarchy": { "lvl2": "Showcase", "lvl3": null }
+    "hierarchy": {
+      "lvl2": "Changing the default properties",
+      "lvl3": "Showcase"
+    }
   },
   {
     "content": "Modal",

diff --git a/content/docs/components/accordion/theming.mdx b/content/docs/components/accordion/theming.mdx
@@ -3,14 +3,16 @@ id: accordion
 scope: theming
 ---
 
+## Theming
+
 The `Accordion` component is a multipart component. The styling needs to be
 applied to each part specifically.
 
 > To learn more about styling multipart components, visit the
 > [Component Style](/docs/styled-system/component-style#styling-multipart-components)
 > page.
 
-## Anatomy
+### Anatomy
 
 - A: `root`
 - B: `container`
@@ -1041,7 +1043,7 @@ applied to each part specifically.
   </svg>
 </AspectRatio>
 
-## Theming utilities
+### Theming utilities
 
 - `createMultiStyleConfigHelpers`: a function that returns a set of utilities
   for creating style configs for a multipart component (`definePartsStyle` and
@@ -1058,7 +1060,7 @@ const { definePartsStyle, defineMultiStyleConfig } =
   createMultiStyleConfigHelpers(accordionAnatomy.keys)
 ```
 
-## Customizing the default theme
+### Customizing the default theme
 
 ```jsx live=false
 import { accordionAnatomy } from '@chakra-ui/anatomy'
@@ -1092,7 +1094,7 @@ export const theme = extendTheme({
 > This is a crucial step to make sure that any changes that we make to the
 > accordion theme are applied.
 
-## Adding a custom size
+### Adding a custom size
 
 Let's assume we want to include an extra large accordion icon size. Here's how
 we can do that:
@@ -1124,7 +1126,7 @@ 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. You can learn more about the CLI
 tool [here](/docs/styled-system/cli).
 
-## Adding a custom variant
+### Adding a custom variant
 
 Let's assume we want to include a custom pill variant. Here's how we can do
 that:
@@ -1172,7 +1174,7 @@ export const accordionTheme = defineMultiStyleConfig({
 <Accordion variant="custom"> ... </Accordion>
 ```
 
-## Changing the default properties
+### Changing the default properties
 
 Let's assume we want to change the default size and variant of every accordion
 in our app. Here's how we can do that:
@@ -1197,7 +1199,7 @@ export const accordionTheme = defineMultiStyleConfig({
 <Accordion size="xl" variant="custom"> ... </Accordion>
 ```
 
-## Showcase
+### Showcase
 
 import {
   App,

diff --git a/content/docs/components/modal/theming.mdx b/content/docs/components/modal/theming.mdx
@@ -3,13 +3,15 @@ id: modal
 scope: theming
 ---
 
+## Theming
+
 The `Modal` component is a multipart component.
 
 > To learn more about styling multipart components, visit the
 > [Component Style](/docs/styled-system/component-style#styling-multipart-components)
 > page.
 
-## Anatomy
+### Anatomy
 
 - A: `header`
 - B: `overlay`
@@ -704,14 +706,14 @@ The `Modal` component is a multipart component.
 You can find more information in the source
 [here](https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/modal.ts).
 
-## Theming properties
+### Theming properties
 
 The properties that affect the theming of the `Modal` component are:
 
 - `variant`: The visual variant of the `Modal`. Defaults to baseStyle.
 - `size`: The size of the `Modal`. Defaults to md.
 
-## Theming utilities
+### Theming utilities
 
 - `createMultiStyleConfigHelpers`: a function that returns a set of utilities
   for creating style configs for a multipart component (definePartsStyle and
@@ -720,7 +722,7 @@ The properties that affect the theming of the `Modal` component are:
 - `defineMultiStyleConfig`: a function used to define the style configuration
   for a multipart component.
 
-## Customizing the default theme
+### Customizing the default theme
 
 ```jsx live=false
 import { modalAnatomy as parts } from '@chakra-ui/anatomy'
@@ -760,7 +762,7 @@ export const theme = extendTheme({
 > This is a crucial step to make sure that any changes that we make to the
 > `Modal` theme are applied.
 
-# Adding a custom size
+### Adding a custom size
 
 Let's assume we want to change the font size of both header and dialog.
 
@@ -801,7 +803,7 @@ 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. You can learn more about the CLI
 tool [here](/docs/styled-system/cli).
 
-## Adding a custom variant
+### Adding a custom variant
 
 Let's assume we want to include a custom variant. Here's how we can do that:
 
@@ -833,7 +835,7 @@ export const modalTheme = defineMultiStyleConfig({
 <Modal variant='purple' ... />
 ```
 
-## Changing the default properties
+### Changing the default properties
 
 Let's assume we want to change the default size and variant of every `Modal` in
 our app.
@@ -855,7 +857,7 @@ export const modalTheme = defineMultiStyleConfig({
 <Modal size="xl" variant="purple" ... />
 ```
 
-## Showcase
+### Showcase
 
 import {
   App,