docs: update

Author: segunadebayo

website/content/docs/theming/animation-styles.mdx

@@ -92,6 +92,64 @@ export const popoverSlotRecipe = defineSlotRecipe({
 })
 ```
 
+## Nesting animation styles
+
+Animation styles support nested structures with a special `DEFAULT` key. This allows you to create variants of an
+animation style while having a default fallback.
+
+When you define a `DEFAULT` key within a nested animation style, you can reference the parent key directly to use the
+default value.
+
+```js filename="panda.config.ts"
+export default defineConfig({
+  theme: {
+    extend: {
+      animationStyles: {
+        fade: {
+          DEFAULT: {
+            value: {
+              animationName: 'fade-in',
+              animationDuration: '300ms',
+              animationTimingFunction: 'ease-in-out'
+            }
+          },
+          slow: {
+            value: {
+              animationName: 'fade-in',
+              animationDuration: '600ms',
+              animationTimingFunction: 'ease-in-out'
+            }
+          },
+          fast: {
+            value: {
+              animationName: 'fade-in',
+              animationDuration: '150ms',
+              animationTimingFunction: 'ease-in-out'
+            }
+          }
+        }
+      }
+    }
+  }
+})
+```
+
+Now you can use the default fade animation or specific speed variants:
+
+```jsx
+import { css } from '../styled-system/css'
+
+function App() {
+  return (
+    <div>
+      <div className={css({ animationStyle: 'fade' })}>Default fade speed</div>
+      <div className={css({ animationStyle: 'fade.slow' })}>Slow fade</div>
+      <div className={css({ animationStyle: 'fade.fast' })}>Fast fade</div>
+    </div>
+  )
+}
+```
+
 ## Best Practices
 
 ### Avoid Overuse

website/content/docs/theming/layer-styles.mdx

@@ -65,3 +65,66 @@ function App() {
   return <div className={css({ layerStyle: 'container' })}>This is inside a container style</div>
 }
 ```
+
+## Nesting layer styles
+
+Layer styles support nested structures with a special `DEFAULT` key. This allows you to create variants of a layer style
+while having a default fallback.
+
+When you define a `DEFAULT` key within a nested layer style, you can reference the parent key directly to use the
+default value.
+
+```js filename="panda.config.ts"
+export default defineConfig({
+  theme: {
+    extend: {
+      layerStyles: {
+        card: {
+          DEFAULT: {
+            value: {
+              background: 'white',
+              border: '1px solid',
+              borderColor: 'gray.200',
+              borderRadius: 'md',
+              boxShadow: 'sm'
+            }
+          },
+          elevated: {
+            value: {
+              background: 'white',
+              border: 'none',
+              borderRadius: 'lg',
+              boxShadow: 'lg'
+            }
+          },
+          outlined: {
+            value: {
+              background: 'transparent',
+              border: '2px solid',
+              borderColor: 'gray.300',
+              borderRadius: 'md',
+              boxShadow: 'none'
+            }
+          }
+        }
+      }
+    }
+  }
+})
+```
+
+Now you can use the default card style or specific variants:
+
+```jsx
+import { css } from '../styled-system/css'
+
+function App() {
+  return (
+    <div>
+      <div className={css({ layerStyle: 'card' })}>Default card style</div>
+      <div className={css({ layerStyle: 'card.elevated' })}>Elevated card</div>
+      <div className={css({ layerStyle: 'card.outlined' })}>Outlined card</div>
+    </div>
+  )
+}
+```

website/content/docs/theming/text-styles.mdx

@@ -70,6 +70,67 @@ function App() {
 }
 ```
 
+## Nesting text styles
+
+Text styles support nested structures with a special `DEFAULT` key. This allows you to create variants of a text style
+while having a default fallback.
+
+When you define a `DEFAULT` key within a nested text style, you can reference the parent key directly to use the default
+value.
+
+```js filename="panda.config.ts"
+export default defineConfig({
+  theme: {
+    extend: {
+      textStyles: {
+        heading: {
+          DEFAULT: {
+            value: {
+              fontFamily: 'Inter',
+              fontWeight: 'bold',
+              fontSize: '1.5rem',
+              lineHeight: '1.2'
+            }
+          },
+          h1: {
+            value: {
+              fontFamily: 'Inter',
+              fontWeight: 'bold',
+              fontSize: '2.5rem',
+              lineHeight: '1.1'
+            }
+          },
+          h2: {
+            value: {
+              fontFamily: 'Inter',
+              fontWeight: 'bold',
+              fontSize: '2rem',
+              lineHeight: '1.15'
+            }
+          }
+        }
+      }
+    }
+  }
+})
+```
+
+Now you can use the default heading style or specific variants:
+
+```jsx
+import { css } from '../styled-system/css'
+
+function App() {
+  return (
+    <div>
+      <h1 className={css({ textStyle: 'heading.h1' })}>Main Title</h1>
+      <h2 className={css({ textStyle: 'heading.h2' })}>Subtitle</h2>
+      <h3 className={css({ textStyle: 'heading' })}>Uses DEFAULT variant</h3>
+    </div>
+  )
+}
+```
+
 ## Best Practices
 
 ### Avoid layout properties