From 33e54939031f424231c8ae47742724148303a762 Mon Sep 17 00:00:00 2001
From: Naman Goel <nmn@users.noreply.github.com>
Date: Thu, 5 Dec 2024 03:39:03 -0800
Subject: [PATCH] Update 03-descendant styles.mdx

---
 .../learn/06-recipes/03-descendant styles.mdx | 55 +++++++++++++------
 1 file changed, 37 insertions(+), 18 deletions(-)

diff --git a/apps/docs/docs/learn/06-recipes/03-descendant styles.mdx b/apps/docs/docs/learn/06-recipes/03-descendant styles.mdx
index 7204a3f1..c34e2a75 100644
--- a/apps/docs/docs/learn/06-recipes/03-descendant styles.mdx	
+++ b/apps/docs/docs/learn/06-recipes/03-descendant styles.mdx	
@@ -9,26 +9,29 @@ sidebar_position: 7
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-# Descendant styles
+# Descendant styles dependent on ancestor state
 
-## Hover-Dependent Descendant Styles
+## Example: Sidebar
 
-Using CSS variables, you can style descendants based on a parent's state, such as `:hover`.
-
-### Example: Nested Hover Styles
+Consider the case where the content within a sidebar needs to have conditional styles applied
+when the sidebar as whole is hovered.
 
-In this example, we'll apply a hover effect to a child element when the parent is hovered:
+Using CSS variables, you can style descendants based on a parent's state, such as `:hover`.
 
-`variables.stylex.ts` defines a variable using `stylex.defineVars`:
+### Step 1
+Define one or more variables using `stylex.defineVars`:
 
-```tsx
+```tsx variables.stylex.ts
+// variables.stylex.ts
 import * as stylex from '@stylexjs/stylex';
 
 export const vars = stylex.defineVars({
   childColor: 'black',
 });
 ```
-In the `styles.parent` object, the variable `vars.childColor` is referenced and updated on hover.
+
+### Step 2
+Define conditional styles setting the value for the variable in the anscestor component.
 
 ```tsx
 import * as stylex from '@stylexjs/stylex';
@@ -36,22 +39,38 @@ import { vars } from './variables.stylex';
 
 const styles = stylex.create({
   parent: {
-    [vars.childColor]: vars.childColor,
-    ':hover': {
-      [vars.childColor]: 'blue',
+    [vars.childColor]: {
+      default: 'black',
+      ':hover': 'blue',
     },
   },
-  child: {
-    color: `vars.childColor`,
-  },
 });
 
-function ParentWithHover() {
+function ParentWithHover({children}) {
   return (
     <div {...stylex.props(styles.parent)}>
-      <span {...stylex.props(styles.child)}>Hover over me!</span>
+      {children}
     </div>
   );
 }
+```
+
+### Step 3
+Use the variable to style the child component
 
-```
\ No newline at end of file
+```tsx
+import * as stylex from '@stylexjs/stylex';
+import { vars } from './variables.stylex';
+
+const styles = stylex.create({
+  row: {
+    color: vars.childColor,
+  }
+});
+
+function ParentWithHover() {
+  return (
+      <span {...stylex.props(styles.child)}><Icon />A Row</span>
+  );
+}
+```