refactor(feature-walls): darkMode propagation (#3287)

stephl3 · web-flow · commit eb4ff1593339 · 2025-11-07T00:29:28.000Z
* refactor(feature-walls): darkMode propagation

* fix(feature-walls): drop unused imports
diff --git a/packages/feature-walls/src/ActivationSteps/ActivationSteps.tsx b/packages/feature-walls/src/ActivationSteps/ActivationSteps.tsx
@@ -42,13 +42,12 @@ export const ActivationSteps = forwardRef<HTMLElement, ActivationStepsProps>(
 
     return (
       <LeafyGreenProvider darkMode={darkMode}>
-        <Card className={cardStyles} darkMode={darkMode}>
+        <Card className={cardStyles}>
           <Section {...rest} className={className} ref={fwdRef} title={title}>
             <div className={childrenContainerStyles}>
               <VerticalStepper
                 className={verticalStepperStyles}
                 currentStep={currentStep}
-                darkMode={darkMode}
               >
                 {steps.map((props, index) => (
                   <VerticalStep key={props.title + index} {...props} />
@@ -62,7 +61,7 @@ export const ActivationSteps = forwardRef<HTMLElement, ActivationStepsProps>(
                 ref={messageContainerRef}
               >
                 <CheckmarkWithCircle fill={getIconFill(theme)} />
-                <Body className={getMessageStyles(theme)} darkMode={darkMode}>
+                <Body className={getMessageStyles(theme)}>
                   {completedMessage}
                 </Body>
               </div>
diff --git a/packages/feature-walls/src/ExpandableGrid/ExpandableGrid.stories.tsx b/packages/feature-walls/src/ExpandableGrid/ExpandableGrid.stories.tsx
@@ -7,9 +7,7 @@ import {
 import { StoryFn, StoryObj } from '@storybook/react';
 
 import { css } from '@leafygreen-ui/emotion';
-import LeafyGreenProvider, {
-  useDarkMode,
-} from '@leafygreen-ui/leafygreen-provider';
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { spacing } from '@leafygreen-ui/tokens';
 import { Body, Subtitle } from '@leafygreen-ui/typography';
 
@@ -23,12 +21,10 @@ const childContainerStyles = css`
 `;
 
 const ExpandableGridChild = ({ index }: { index: number }) => {
-  const { darkMode } = useDarkMode();
-
   return (
     <div className={childContainerStyles}>
-      <Subtitle darkMode={darkMode}>Lorem ipsum {index + 1}</Subtitle>
-      <Body darkMode={darkMode}>
+      <Subtitle>Lorem ipsum {index + 1}</Subtitle>
+      <Body>
         Lorem ipsum dolor sit amet, consectetur ipsum et adipiscing elit, sed do
         eiusmod.
       </Body>
diff --git a/packages/feature-walls/src/FeatureOverview/FeatureOverview.tsx b/packages/feature-walls/src/FeatureOverview/FeatureOverview.tsx
@@ -31,24 +31,22 @@ export const FeatureOverview = forwardRef<HTMLElement, FeatureOverviewProps>(
 
     return (
       <LeafyGreenProvider darkMode={darkMode}>
-        <Card className={cardStyles} darkMode={darkMode}>
+        <Card className={cardStyles}>
           <section
             {...rest}
             className={getSectionStyles(className)}
             ref={fwdRef}
           >
             <div className={textContainerStyles}>
-              <H3 darkMode={darkMode}>{title}</H3>
+              <H3>{title}</H3>
               <Accordion index={index} onIndexChange={setIndex}>
                 {features.map(({ title, description, onExpand }) => (
                   <AccordionItem key={title}>
                     <AccordionButton onExpand={onExpand}>
                       {title}
                     </AccordionButton>
                     <AccordionPanel>
-                      <Description darkMode={darkMode}>
-                        {description}
-                      </Description>
+                      <Description>{description}</Description>
                     </AccordionPanel>
                   </AccordionItem>
                 ))}
diff --git a/packages/feature-walls/src/InfoBlock/InfoBlock.tsx b/packages/feature-walls/src/InfoBlock/InfoBlock.tsx
@@ -77,16 +77,12 @@ export const InfoBlock = forwardRef<HTMLDivElement, InfoBlockProps>(
               <Body
                 data-testid={LGIDS_INFO_BLOCK.label}
                 baseFontSize={BaseFontSize.Body2}
-                darkMode={darkMode}
                 weight="medium"
               >
                 {label}
               </Body>
               {description && (
-                <Description
-                  darkMode={darkMode}
-                  data-testid={LGIDS_INFO_BLOCK.description}
-                >
+                <Description data-testid={LGIDS_INFO_BLOCK.description}>
                   {description}
                 </Description>
               )}
@@ -97,7 +93,6 @@ export const InfoBlock = forwardRef<HTMLDivElement, InfoBlockProps>(
                 >
                   {badgePropsArray.map((badgeProps, i) => (
                     <Badge
-                      darkMode={darkMode}
                       key={`${i}` + badgeProps.children}
                       variant={BadgeVariant.Blue}
                       {...badgeProps}
@@ -108,7 +103,6 @@ export const InfoBlock = forwardRef<HTMLDivElement, InfoBlockProps>(
             </div>
             {buttonProps && (
               <Button
-                darkMode={darkMode}
                 data-testid={LGIDS_INFO_BLOCK.button}
                 size={Size.Small}
                 variant={ButtonVariant.Default}
diff --git a/packages/feature-walls/src/Section/Section.stories.tsx b/packages/feature-walls/src/Section/Section.stories.tsx
@@ -6,7 +6,6 @@ import {
 } from '@lg-tools/storybook-utils';
 
 import { css } from '@leafygreen-ui/emotion';
-import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { spacing } from '@leafygreen-ui/tokens';
 import { Body, Subtitle } from '@leafygreen-ui/typography';
 
@@ -33,12 +32,10 @@ const sectionChildrenContainerStyles = css`
 `;
 
 const SectionChild = ({ index }: { index: number }) => {
-  const { darkMode } = useDarkMode();
-
   return (
     <div key={index} className={sectionChildContainerStyles}>
-      <Subtitle darkMode={darkMode}>Lorem ipsum</Subtitle>
-      <Body darkMode={darkMode}>
+      <Subtitle>Lorem ipsum</Subtitle>
+      <Body>
         Lorem ipsum dolor sit amet, consectetur ipsum et adipiscing elit, sed do
         eiusmod.
       </Body>
diff --git a/packages/feature-walls/src/Section/Section.tsx b/packages/feature-walls/src/Section/Section.tsx
@@ -42,7 +42,7 @@ export const Section = forwardRef<HTMLElement, SectionProps>(
             ref={fwdRef}
             {...rest}
           >
-            <H3 darkMode={darkMode}>{title}</H3>
+            <H3>{title}</H3>
             {children}
           </section>
         </Wrapper>

Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@ export const Section = forwardRef<HTMLElement, SectionProps>(`
`42`	`42`	`ref={fwdRef}`
`43`	`43`	`{...rest}`
`44`	`44`	`>`
`45`		`- <H3 darkMode={darkMode}>{title}</H3>`
	`45`	`+ <H3>{title}</H3>`
`46`	`46`	`{children}`
`47`	`47`	`</section>`
`48`	`48`	`</Wrapper>`