diff --git a/packages/accordions/src/elements/accordion/components/Header.tsx b/packages/accordions/src/elements/accordion/components/Header.tsx
index 4aba2b5e940..a8959027c6e 100644
--- a/packages/accordions/src/elements/accordion/components/Header.tsx
+++ b/packages/accordions/src/elements/accordion/components/Header.tsx
@@ -50,8 +50,8 @@ const HeaderComponent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement
   return (
     <HeaderContext.Provider value={value}>
       <StyledHeader
-        isCollapsible={isCollapsible}
-        isExpanded={isExpanded}
+        $isCollapsible={isCollapsible}
+        $isExpanded={isExpanded}
         {...(getHeaderProps({
           ref,
           'aria-level': ariaLevel,
diff --git a/packages/accordions/src/elements/accordion/components/Label.tsx b/packages/accordions/src/elements/accordion/components/Label.tsx
index 29ec06e9df5..d6275a8f60f 100644
--- a/packages/accordions/src/elements/accordion/components/Label.tsx
+++ b/packages/accordions/src/elements/accordion/components/Label.tsx
@@ -19,10 +19,10 @@ const LabelComponent = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLBu
     return (
       <StyledButton
         ref={ref}
-        isCompact={isCompact}
-        isHovered={isHovered}
-        isExpanded={isExpanded}
-        isCollapsible={isCollapsible}
+        $isCompact={isCompact}
+        $isHovered={isHovered}
+        $isExpanded={isExpanded}
+        $isCollapsible={isCollapsible}
         {...otherTriggerProps}
         {...props}
       />
diff --git a/packages/accordions/src/elements/accordion/components/Panel.tsx b/packages/accordions/src/elements/accordion/components/Panel.tsx
index b9c864874fb..d6b73fed80b 100644
--- a/packages/accordions/src/elements/accordion/components/Panel.tsx
+++ b/packages/accordions/src/elements/accordion/components/Panel.tsx
@@ -20,10 +20,10 @@ const PanelComponent = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(
     return (
       <StyledPanel
         inert={isExpanded ? undefined : ''}
-        isAnimated={isAnimated}
-        isBare={isBare}
-        isCompact={isCompact}
-        isExpanded={isExpanded}
+        $isAnimated={isAnimated}
+        $isBare={isBare}
+        $isCompact={isCompact}
+        $isExpanded={isExpanded}
         {...(getPanelProps({
           role: role === undefined ? null : 'region',
           ref,
@@ -31,7 +31,7 @@ const PanelComponent = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(
           ...props
         }) as HTMLAttributes<HTMLElement>)}
       >
-        <StyledInnerPanel isAnimated={isAnimated}>{children}</StyledInnerPanel>
+        <StyledInnerPanel $isAnimated={isAnimated}>{children}</StyledInnerPanel>
       </StyledPanel>
     );
   }
diff --git a/packages/accordions/src/elements/stepper/Stepper.tsx b/packages/accordions/src/elements/stepper/Stepper.tsx
index 663b5e8da0b..f83b08756b9 100644
--- a/packages/accordions/src/elements/stepper/Stepper.tsx
+++ b/packages/accordions/src/elements/stepper/Stepper.tsx
@@ -27,7 +27,7 @@ const StepperComponent = forwardRef<HTMLOListElement, IStepperProps>(
 
     return (
       <StepperContext.Provider value={stepperContext}>
-        <StyledStepper ref={ref} isHorizontal={isHorizontal} {...props}>
+        <StyledStepper ref={ref} $isHorizontal={isHorizontal} {...props}>
           {useMemo(
             () =>
               Children.toArray(children)
diff --git a/packages/accordions/src/elements/stepper/components/Content.tsx b/packages/accordions/src/elements/stepper/components/Content.tsx
index 59eaef12b24..0861b8a4778 100644
--- a/packages/accordions/src/elements/stepper/components/Content.tsx
+++ b/packages/accordions/src/elements/stepper/components/Content.tsx
@@ -15,7 +15,7 @@ const ContentComponent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElemen
     const { isActive, isHorizontal } = useStepContext();
 
     return isHorizontal === false ? (
-      <StyledContent ref={ref} isActive={isActive} {...props}>
+      <StyledContent ref={ref} $isActive={isActive} {...props}>
         <StyledInnerContent aria-hidden={!isActive}>{props.children}</StyledInnerContent>
       </StyledContent>
     ) : null;
diff --git a/packages/accordions/src/elements/stepper/components/Label.tsx b/packages/accordions/src/elements/stepper/components/Label.tsx
index f0d5e02ca46..30452af2ff1 100644
--- a/packages/accordions/src/elements/stepper/components/Label.tsx
+++ b/packages/accordions/src/elements/stepper/components/Label.tsx
@@ -19,19 +19,19 @@ const LabelComponent = forwardRef<HTMLDivElement, IStepperLabelProps>(
     const stepIcon = icon || numericStep;
 
     const styledIcon = (
-      <StyledIcon isActive={isActive} isHorizontal={isHorizontal}>
+      <StyledIcon $isActive={isActive} $isHorizontal={isHorizontal}>
         {isCompleted ? <CheckCircleStrokeIcon {...iconProps} /> : stepIcon}
       </StyledIcon>
     );
 
     return (
-      <StyledLabel ref={ref} isActive={isActive} isHorizontal={isHorizontal} {...other}>
+      <StyledLabel ref={ref} $isActive={isActive} $isHorizontal={isHorizontal} {...other}>
         {isHorizontal ? (
           <StyledIconFlexContainer>{styledIcon}</StyledIconFlexContainer>
         ) : (
           styledIcon
         )}
-        <StyledLabelText isHidden={isHidden} isHorizontal={isHorizontal}>
+        <StyledLabelText $isHidden={isHidden} $isHorizontal={isHorizontal}>
           {children}
         </StyledLabelText>
       </StyledLabel>
diff --git a/packages/accordions/src/elements/stepper/components/Step.tsx b/packages/accordions/src/elements/stepper/components/Step.tsx
index 851a9f7681e..74833db3474 100644
--- a/packages/accordions/src/elements/stepper/components/Step.tsx
+++ b/packages/accordions/src/elements/stepper/components/Step.tsx
@@ -14,7 +14,7 @@ const StepComponent = forwardRef<HTMLLIElement, LiHTMLAttributes<HTMLLIElement>>
     const { isHorizontal } = useStepperContext();
 
     return (
-      <StyledStep ref={ref} isHorizontal={isHorizontal} {...props}>
+      <StyledStep ref={ref} $isHorizontal={isHorizontal} {...props}>
         {isHorizontal && <StyledLine data-test-id="step-line" />}
         {children}
       </StyledStep>
diff --git a/packages/accordions/src/elements/timeline/components/Item.tsx b/packages/accordions/src/elements/timeline/components/Item.tsx
index 1ea1a1291b0..e3580a0d46b 100644
--- a/packages/accordions/src/elements/timeline/components/Item.tsx
+++ b/packages/accordions/src/elements/timeline/components/Item.tsx
@@ -29,8 +29,8 @@ const ItemComponent = forwardRef<HTMLLIElement, ITimelineItemProps>(
       <TimelineItemContext.Provider value={value}>
         <StyledTimelineItem
           ref={ref}
-          isAlternate={isAlternate}
-          hasOppositeContent={hasOppositeContent}
+          $isAlternate={isAlternate}
+          $hasOppositeContent={hasOppositeContent}
           {...props}
         />
       </TimelineItemContext.Provider>
diff --git a/packages/accordions/src/styled/accordion/StyledButton.spec.tsx b/packages/accordions/src/styled/accordion/StyledButton.spec.tsx
index dcfeadfcb0c..1e8b804ffcc 100644
--- a/packages/accordions/src/styled/accordion/StyledButton.spec.tsx
+++ b/packages/accordions/src/styled/accordion/StyledButton.spec.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { render, renderRtl } from 'garden-test-utils';
-import { PALETTE_V8 } from '@zendeskgarden/react-theming';
+import { PALETTE } from '@zendeskgarden/react-theming';
 import { StyledButton } from './StyledButton';
 
 describe('StyledButton', () => {
@@ -16,12 +16,12 @@ describe('StyledButton', () => {
 
     expect(container.firstChild).toHaveStyleRule('padding', '20px');
     expect(container.firstChild).toHaveStyleRule('text-align', 'left');
-    expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[800]);
+    expect(container.firstChild).toHaveStyleRule('color', PALETTE.grey[900]);
     expect(container.firstChild).not.toHaveStyleRule('cursor');
   });
 
   it('renders isCompact styling correctly', () => {
-    const { container } = render(<StyledButton isCompact />);
+    const { container } = render(<StyledButton $isCompact />);
 
     expect(container.firstChild).toHaveStyleRule('padding', '8px 12px');
   });
@@ -33,9 +33,9 @@ describe('StyledButton', () => {
   });
 
   it('renders isHovered styling correctly', () => {
-    const { container } = render(<StyledButton isHovered />);
+    const { container } = render(<StyledButton $isHovered />);
 
-    expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.blue[600]);
+    expect(container.firstChild).toHaveStyleRule('color', PALETTE.blue[700]);
 
     expect(container.firstChild).toHaveStyleRule('cursor', 'pointer', {
       modifier: '&:hover'
diff --git a/packages/accordions/src/styled/accordion/StyledButton.ts b/packages/accordions/src/styled/accordion/StyledButton.ts
index e64925f9877..942fd17bac1 100644
--- a/packages/accordions/src/styled/accordion/StyledButton.ts
+++ b/packages/accordions/src/styled/accordion/StyledButton.ts
@@ -8,27 +8,31 @@
 import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
 import {
   getLineHeight,
-  getColorV8,
   retrieveComponentStyles,
-  DEFAULT_THEME
+  DEFAULT_THEME,
+  getColor
 } from '@zendeskgarden/react-theming';
 
 export const COMPONENT_ID = 'accordions.button';
 
 interface IStyledButton {
-  isCompact?: boolean;
-  isHovered?: boolean;
-  isCollapsible?: boolean;
-  isExpanded?: boolean;
+  $isCompact?: boolean;
+  $isHovered?: boolean;
+  $isCollapsible?: boolean;
+  $isExpanded?: boolean;
 }
 
-const colorStyles = (props: ThemeProps<DefaultTheme> & IStyledButton) => {
-  const showColor = props.isCollapsible || !props.isExpanded;
-  let color = getColorV8('foreground', 600 /* default shade */, props.theme);
-
-  if (showColor && props.isHovered) {
-    color = getColorV8('primaryHue', 600, props.theme)!;
-  }
+const colorStyles = ({
+  $isCollapsible,
+  $isExpanded,
+  $isHovered,
+  theme
+}: ThemeProps<DefaultTheme> & IStyledButton) => {
+  const showColor = $isCollapsible || !$isExpanded;
+  const color = getColor({
+    theme,
+    variable: showColor && $isHovered ? 'foreground.primary' : 'foreground.default'
+  });
 
   return css`
     color: ${color};
@@ -53,7 +57,7 @@ export const StyledButton = styled.button.attrs<IStyledButton>({
   border: none;
   background: transparent;
   padding: ${props =>
-    props.isCompact
+    props.$isCompact
       ? `${props.theme.space.base * 2}px ${props.theme.space.base * 3}px`
       : `${props.theme.space.base * 5}px`};
   width: 100%;
@@ -70,7 +74,7 @@ export const StyledButton = styled.button.attrs<IStyledButton>({
   }
 
   &:hover {
-    cursor: ${props => (props.isCollapsible || !props.isExpanded) && 'pointer'};
+    cursor: ${props => (props.$isCollapsible || !props.$isExpanded) && 'pointer'};
   }
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
diff --git a/packages/accordions/src/styled/accordion/StyledHeader.ts b/packages/accordions/src/styled/accordion/StyledHeader.ts
index a7690335971..ad283c3df53 100644
--- a/packages/accordions/src/styled/accordion/StyledHeader.ts
+++ b/packages/accordions/src/styled/accordion/StyledHeader.ts
@@ -12,8 +12,8 @@ import { StyledButton } from './StyledButton';
 const COMPONENT_ID = 'accordions.header';
 
 interface IStyledHeader {
-  isExpanded?: boolean;
-  isCollapsible?: boolean;
+  $isExpanded?: boolean;
+  $isCollapsible?: boolean;
 }
 
 export const StyledHeader = styled.div.attrs<IStyledHeader>({
@@ -26,7 +26,7 @@ export const StyledHeader = styled.div.attrs<IStyledHeader>({
   font-size: ${props => props.theme.fontSizes.md};
 
   &:hover {
-    cursor: ${props => (props.isCollapsible || !props.isExpanded) && 'pointer'};
+    cursor: ${props => (props.$isCollapsible || !props.$isExpanded) && 'pointer'};
   }
 
   ${props =>
diff --git a/packages/accordions/src/styled/accordion/StyledInnerPanel.ts b/packages/accordions/src/styled/accordion/StyledInnerPanel.ts
index 84078b360e4..8b03513824d 100644
--- a/packages/accordions/src/styled/accordion/StyledInnerPanel.ts
+++ b/packages/accordions/src/styled/accordion/StyledInnerPanel.ts
@@ -12,7 +12,7 @@ import { StyledPanel } from './StyledPanel';
 const COMPONENT_ID = 'accordions.step_inner_panel';
 
 interface IStyledInnerPanel {
-  isAnimated?: boolean;
+  $isAnimated?: boolean;
 }
 
 export const StyledInnerPanel = styled.div.attrs({
@@ -24,7 +24,7 @@ export const StyledInnerPanel = styled.div.attrs({
   font-size: inherit;
 
   ${StyledPanel}[aria-hidden='true'] > & {
-    transition: ${props => props.isAnimated && 'visibility 0s 0.25s'};
+    transition: ${props => props.$isAnimated && 'visibility 0s 0.25s'};
     visibility: hidden;
   }
 
diff --git a/packages/accordions/src/styled/accordion/StyledPanel.spec.tsx b/packages/accordions/src/styled/accordion/StyledPanel.spec.tsx
index a4f7d9b830c..56d25d920ee 100644
--- a/packages/accordions/src/styled/accordion/StyledPanel.spec.tsx
+++ b/packages/accordions/src/styled/accordion/StyledPanel.spec.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { render } from 'garden-test-utils';
-import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { DEFAULT_THEME, PALETTE } from '@zendeskgarden/react-theming';
 import { StyledPanel } from './StyledPanel';
 
 describe('StyledPanel', () => {
@@ -17,10 +17,7 @@ describe('StyledPanel', () => {
     expect(container.firstChild).toHaveStyleRule('grid-template-rows', '0fr');
     expect(container.firstChild).toHaveStyleRule('padding', '8px 20px 32px');
     expect(container.firstChild).toHaveStyleRule('border-bottom', `${DEFAULT_THEME.borders.sm}`);
-    expect(container.firstChild).toHaveStyleRule(
-      'border-bottom-color',
-      `${getColorV8('neutralHue', 300, DEFAULT_THEME)}`
-    );
+    expect(container.firstChild).toHaveStyleRule('border-bottom-color', `${PALETTE.grey[300]}`);
     expect(container.firstChild).toHaveStyleRule(
       'transition',
       'padding 0.25s ease-in-out,grid-template-rows 0.25s ease-in-out'
@@ -28,34 +25,34 @@ describe('StyledPanel', () => {
   });
 
   it('renders isCompact styling correctly', () => {
-    const { container } = render(<StyledPanel isCompact />);
+    const { container } = render(<StyledPanel $isCompact />);
 
     expect(container.firstChild).toHaveStyleRule('padding', '8px 12px 16px');
   });
 
   it('renders isExpanded styling correctly', () => {
-    const { container } = render(<StyledPanel isExpanded />);
+    const { container } = render(<StyledPanel $isExpanded />);
 
     expect(container.firstChild).toHaveStyleRule('padding', '8px 20px 32px');
     expect(container.firstChild).toHaveStyleRule('grid-template-rows', '1fr');
   });
 
   it('renders isCompact & isExpanded styling correctly', () => {
-    const { container } = render(<StyledPanel isCompact isExpanded />);
+    const { container } = render(<StyledPanel $isCompact $isExpanded />);
 
     expect(container.firstChild).toHaveStyleRule('padding', '8px 12px 16px');
     expect(container.firstChild).toHaveStyleRule('grid-template-rows', '1fr');
   });
 
   it('renders isBare styling correctly', () => {
-    const { container } = render(<StyledPanel isBare />);
+    const { container } = render(<StyledPanel $isBare />);
 
     expect(container.firstChild).toHaveStyleRule('border-bottom', `${DEFAULT_THEME.borders.sm}`);
     expect(container.firstChild).toHaveStyleRule('border-bottom-color', 'transparent');
   });
 
   it('renders transition styling correctly', () => {
-    const { container } = render(<StyledPanel isAnimated={false} />);
+    const { container } = render(<StyledPanel $isAnimated={false} />);
 
     expect(container.firstChild).not.toHaveStyleRule('transition');
   });
diff --git a/packages/accordions/src/styled/accordion/StyledPanel.ts b/packages/accordions/src/styled/accordion/StyledPanel.ts
index 186c7b5018b..63f91bec8ac 100644
--- a/packages/accordions/src/styled/accordion/StyledPanel.ts
+++ b/packages/accordions/src/styled/accordion/StyledPanel.ts
@@ -7,50 +7,50 @@
 
 import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
 import {
-  getColorV8,
   getLineHeight,
   retrieveComponentStyles,
-  DEFAULT_THEME
+  DEFAULT_THEME,
+  getColor
 } from '@zendeskgarden/react-theming';
 
 interface IStyledPanel {
   inert?: string;
-  isBare?: boolean;
-  isCompact?: boolean;
-  isExpanded?: boolean;
-  isAnimated?: boolean;
+  $isBare?: boolean;
+  $isCompact?: boolean;
+  $isExpanded?: boolean;
+  $isAnimated?: boolean;
 }
 
 const COMPONENT_ID = 'accordions.panel';
 
-const colorStyles = (props: IStyledPanel & ThemeProps<DefaultTheme>) => {
-  const { theme, isBare } = props;
-
+const colorStyles = ({ theme, $isBare }: IStyledPanel & ThemeProps<DefaultTheme>) => {
   return css`
-    border-bottom-color: ${isBare ? 'transparent' : getColorV8('neutralHue', 300, theme)};
+    border-bottom-color: ${$isBare
+      ? 'transparent'
+      : getColor({ theme, variable: 'border.default' })};
   `;
 };
 
 const sizeStyles = (props: IStyledPanel & ThemeProps<DefaultTheme>) => {
-  const { theme, isCompact, isExpanded } = props;
+  const { theme, $isCompact, $isExpanded } = props;
   const { base } = theme.space;
   let paddingTop = base * 2;
   let paddingHorizontal = base * 5;
   let paddingBottom = base * 8;
 
-  if (isCompact) {
+  if ($isCompact) {
     paddingTop = base * 2;
     paddingHorizontal = base * 3;
     paddingBottom = base * 4;
   }
 
-  if (isExpanded === false) {
+  if ($isExpanded === false) {
     paddingTop = 0;
     paddingBottom = 0;
   }
 
   return css`
-    grid-template-rows: ${isExpanded ? 1 : 0}fr;
+    grid-template-rows: ${$isExpanded ? 1 : 0}fr;
     border-bottom: ${theme.borders.sm};
     padding: ${paddingTop}px ${paddingHorizontal}px ${paddingBottom}px;
     line-height: ${getLineHeight(base * 5, theme.fontSizes.md)};
@@ -64,7 +64,7 @@ export const StyledPanel = styled.section.attrs<IStyledPanel>({
 })<IStyledPanel>`
   display: grid;
   transition: ${props =>
-    props.isAnimated && 'padding 0.25s ease-in-out, grid-template-rows 0.25s ease-in-out'};
+    props.$isAnimated && 'padding 0.25s ease-in-out, grid-template-rows 0.25s ease-in-out'};
   overflow: hidden;
 
   ${sizeStyles}
@@ -74,6 +74,6 @@ export const StyledPanel = styled.section.attrs<IStyledPanel>({
 `;
 
 StyledPanel.defaultProps = {
-  isAnimated: true,
+  $isAnimated: true,
   theme: DEFAULT_THEME
 };
diff --git a/packages/accordions/src/styled/accordion/StyledRotateIcon.spec.tsx b/packages/accordions/src/styled/accordion/StyledRotateIcon.spec.tsx
index 857350f49b8..b7e75077623 100644
--- a/packages/accordions/src/styled/accordion/StyledRotateIcon.spec.tsx
+++ b/packages/accordions/src/styled/accordion/StyledRotateIcon.spec.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { render, renderRtl } from 'garden-test-utils';
-import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { PALETTE } from '@zendeskgarden/react-theming';
 import { StyledRotateIcon } from './StyledRotateIcon';
 
 describe('StyledRotateIcon', () => {
@@ -20,10 +20,7 @@ describe('StyledRotateIcon', () => {
 
     expect(container.firstChild).not.toHaveStyleRule('transform');
     expect(container.firstChild).toHaveStyleRule('padding', '20px');
-    expect(container.firstChild).toHaveStyleRule(
-      'color',
-      getColorV8('neutralHue', 600, DEFAULT_THEME)
-    );
+    expect(container.firstChild).toHaveStyleRule('color', PALETTE.grey[700]);
   });
 
   it('renders $isRotated styling correctly', () => {
@@ -63,9 +60,6 @@ describe('StyledRotateIcon', () => {
       </StyledRotateIcon>
     );
 
-    expect(container.firstChild).toHaveStyleRule(
-      'color',
-      getColorV8('primaryHue', 600, DEFAULT_THEME)
-    );
+    expect(container.firstChild).toHaveStyleRule('color', PALETTE.blue[700]);
   });
 });
diff --git a/packages/accordions/src/styled/accordion/StyledRotateIcon.ts b/packages/accordions/src/styled/accordion/StyledRotateIcon.ts
index a93704ab360..9b765dcbfe2 100644
--- a/packages/accordions/src/styled/accordion/StyledRotateIcon.ts
+++ b/packages/accordions/src/styled/accordion/StyledRotateIcon.ts
@@ -7,10 +7,10 @@
 
 import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
 import {
-  getColorV8,
   retrieveComponentStyles,
   DEFAULT_THEME,
-  StyledBaseIcon
+  StyledBaseIcon,
+  getColor
 } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.rotate_icon';
@@ -22,13 +22,17 @@ interface IStyledRotateIcon {
   $isCollapsible?: boolean;
 }
 
-const colorStyles = (props: ThemeProps<DefaultTheme> & any) => {
-  const showColor = props.$isCollapsible || !props.$isRotated;
-  let color = getColorV8('neutralHue', 600, props.theme);
-
-  if (showColor && props.$isHovered) {
-    color = getColorV8('primaryHue', 600, props.theme);
-  }
+const colorStyles = ({
+  $isCollapsible,
+  $isHovered,
+  $isRotated,
+  theme
+}: ThemeProps<DefaultTheme> & any) => {
+  const showColor = $isCollapsible || !$isRotated;
+  const color = getColor({
+    theme,
+    variable: showColor && $isHovered ? 'foreground.primary' : 'foreground.subtle'
+  });
 
   return css`
     color: ${color};
diff --git a/packages/accordions/src/styled/stepper/StyledContent.ts b/packages/accordions/src/styled/stepper/StyledContent.ts
index dfd35ed65af..9585373118b 100644
--- a/packages/accordions/src/styled/stepper/StyledContent.ts
+++ b/packages/accordions/src/styled/stepper/StyledContent.ts
@@ -11,12 +11,12 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'accordions.step_content';
 
 interface IStyledContent {
-  isActive?: boolean;
+  $isActive?: boolean;
 }
 
 const sizeStyles = (props: IStyledContent & ThemeProps<DefaultTheme>) => {
   const { rtl, space } = props.theme;
-  const paddingBottom = props.isActive ? space.base * 8 : space.base * 6;
+  const paddingBottom = props.$isActive ? space.base * 8 : space.base * 6;
   const paddingRight = rtl ? space.base * 6 : space.base * 5;
   const paddingLeft = rtl ? space.base * 5 : space.base * 6;
   const marginRight = rtl ? space.base * 3 : '0';
@@ -36,7 +36,7 @@ export const StyledContent = styled.div.attrs<IStyledContent>({
   'data-garden-version': PACKAGE_VERSION
 })<IStyledContent>`
   display: grid;
-  grid-template-rows: ${props => (props.isActive ? 1 : 0)}fr;
+  grid-template-rows: ${props => (props.$isActive ? 1 : 0)}fr;
   transition: grid-template-rows 0.25s ease-in-out;
   word-break: break-word;
 
diff --git a/packages/accordions/src/styled/stepper/StyledIcon.spec.tsx b/packages/accordions/src/styled/stepper/StyledIcon.spec.tsx
index db668055063..5cd56fa2e3a 100644
--- a/packages/accordions/src/styled/stepper/StyledIcon.spec.tsx
+++ b/packages/accordions/src/styled/stepper/StyledIcon.spec.tsx
@@ -6,29 +6,37 @@
  */
 
 import React from 'react';
-import { render } from 'garden-test-utils';
+import { getRenderFn, render } from 'garden-test-utils';
 import { StyledIcon } from './StyledIcon';
-import { PALETTE_V8 } from '@zendeskgarden/react-theming';
+import { PALETTE } from '@zendeskgarden/react-theming';
 
 describe('StyledIcon', () => {
-  it('renders default styles', () => {
-    const { container } = render(<StyledIcon />);
+  type Args = ['light' | 'dark', string, string];
 
-    expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[800]);
-    expect(container.firstChild).toHaveStyleRule('background', PALETTE_V8.grey[200]);
+  it.each<Args>([
+    ['light', PALETTE.grey[900], PALETTE.grey[200]],
+    ['dark', PALETTE.grey[300], PALETTE.grey[800]]
+  ])('renders default styles in "%s mode', (mode, fgColor, bgColor) => {
+    const { container } = getRenderFn(mode)(<StyledIcon />);
+
+    expect(container.firstChild).toHaveStyleRule('color', fgColor);
+    expect(container.firstChild).toHaveStyleRule('background', bgColor);
     expect(container.firstChild).toHaveStyleRule('margin-right', '12px');
     expect(container.firstChild).not.toHaveStyleRule('margin-bottom');
   });
 
-  it('renders active color styles', () => {
-    const { container } = render(<StyledIcon isActive />);
+  it.each<Args>([
+    ['light', PALETTE.white, PALETTE.grey[700]],
+    ['dark', PALETTE.grey[1100], PALETTE.grey[300]]
+  ])('renders active styles in "%s mode', (mode, fgColor, bgColor) => {
+    const { container } = getRenderFn(mode)(<StyledIcon $isActive />);
 
-    expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.white);
-    expect(container.firstChild).toHaveStyleRule('background', PALETTE_V8.grey[600]);
+    expect(container.firstChild).toHaveStyleRule('color', fgColor);
+    expect(container.firstChild).toHaveStyleRule('background', bgColor);
   });
 
   it('renders correct icon styles for horizontal stepper', () => {
-    const { container } = render(<StyledIcon isActive isHorizontal />);
+    const { container } = render(<StyledIcon $isActive $isHorizontal />);
 
     expect(container.firstChild).not.toHaveStyleRule('margin-right');
     expect(container.firstChild).not.toHaveStyleRule('align-self');
diff --git a/packages/accordions/src/styled/stepper/StyledIcon.ts b/packages/accordions/src/styled/stepper/StyledIcon.ts
index 5260033f8d4..1f4a0a600c1 100644
--- a/packages/accordions/src/styled/stepper/StyledIcon.ts
+++ b/packages/accordions/src/styled/stepper/StyledIcon.ts
@@ -7,17 +7,17 @@
 
 import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
 import {
-  getColorV8,
   getLineHeight,
   retrieveComponentStyles,
-  DEFAULT_THEME
+  DEFAULT_THEME,
+  getColor
 } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.step_icon';
 
 interface IStyledIcon {
-  isActive?: boolean;
-  isHorizontal?: boolean;
+  $isActive?: boolean;
+  $isHorizontal?: boolean;
 }
 
 export const StyledIconFlexContainer = styled.div`
@@ -32,10 +32,10 @@ const sizeStyles = (props: IStyledIcon & ThemeProps<DefaultTheme>) => {
   const fontSize = props.theme.fontSizes.sm;
 
   return css`
-    margin-bottom: ${props.isHorizontal && `${props.theme.space.base * 2}px`};
+    margin-bottom: ${props.$isHorizontal && `${props.theme.space.base * 2}px`};
     /* stylelint-disable-next-line property-no-unknown */
     margin-${props.theme.rtl ? 'left' : 'right'}: ${
-      !props.isHorizontal && `${props.theme.space.base * 3}px`
+      !props.$isHorizontal && `${props.theme.space.base * 3}px`
     };
     width: ${size};
     min-width: ${size};
@@ -46,14 +46,24 @@ const sizeStyles = (props: IStyledIcon & ThemeProps<DefaultTheme>) => {
   `;
 };
 
-const colorStyles = (props: IStyledIcon & ThemeProps<DefaultTheme>) => {
+const colorStyles = ({ $isActive, theme }: IStyledIcon & ThemeProps<DefaultTheme>) => {
+  const foregroundColor = getColor({
+    theme,
+    variable: $isActive ? 'foreground.onEmphasis' : 'foreground.default'
+  });
+
+  const backgroundColor = $isActive
+    ? getColor({ theme, variable: 'background.emphasis', dark: { offset: -300 } })
+    : getColor({
+        theme,
+        variable: 'background.subtle',
+        dark: { offset: -200 },
+        light: { offset: 100 }
+      });
+
   return css`
-    background: ${props.isActive
-      ? getColorV8('neutralHue', 600, props.theme)
-      : getColorV8('neutralHue', 200, props.theme)};
-    color: ${props.isActive
-      ? getColorV8('background', 600 /* default shade */, props.theme)
-      : getColorV8('foreground', 600 /* default shade */, props.theme)};
+    background: ${backgroundColor};
+    color: ${foregroundColor};
   `;
 };
 
diff --git a/packages/accordions/src/styled/stepper/StyledInnerContent.ts b/packages/accordions/src/styled/stepper/StyledInnerContent.ts
index da279fcf505..f0ea189c29a 100644
--- a/packages/accordions/src/styled/stepper/StyledInnerContent.ts
+++ b/packages/accordions/src/styled/stepper/StyledInnerContent.ts
@@ -10,7 +10,7 @@ import {
   getLineHeight,
   retrieveComponentStyles,
   DEFAULT_THEME,
-  getColorV8
+  getColor
 } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.step_inner_content';
@@ -21,7 +21,7 @@ export const StyledInnerContent = styled.div.attrs<ThemeProps<DefaultTheme>>({
 })`
   overflow: hidden;
   line-height: ${props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md)};
-  color: ${props => getColorV8('foreground', 600 /* default shade */, props.theme)};
+  color: ${({ theme }) => getColor({ theme, variable: 'foreground.default' })};
   font-size: ${props => props.theme.fontSizes.md};
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
diff --git a/packages/accordions/src/styled/stepper/StyledLabel.spec.tsx b/packages/accordions/src/styled/stepper/StyledLabel.spec.tsx
index 49f91f527d7..6bb8b0f2e96 100644
--- a/packages/accordions/src/styled/stepper/StyledLabel.spec.tsx
+++ b/packages/accordions/src/styled/stepper/StyledLabel.spec.tsx
@@ -8,7 +8,7 @@
 import React from 'react';
 import { render } from 'garden-test-utils';
 import { StyledLabel } from './StyledLabel';
-import { PALETTE_V8 } from '@zendeskgarden/react-theming';
+import { PALETTE } from '@zendeskgarden/react-theming';
 
 describe('StyledLabel', () => {
   it('renders default styles', () => {
@@ -18,11 +18,11 @@ describe('StyledLabel', () => {
     expect(container.firstChild).not.toHaveStyleRule('text-align');
     expect(container.firstChild).toHaveStyleRule('display', 'flex');
     expect(container.firstChild).toHaveStyleRule('align-items', 'center');
-    expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[600]);
+    expect(container.firstChild).toHaveStyleRule('color', PALETTE.grey[700]);
   });
 
   it('renders styles for horizontal label', () => {
-    const { container } = render(<StyledLabel isHorizontal />);
+    const { container } = render(<StyledLabel $isHorizontal />);
 
     expect(container.firstChild).not.toHaveStyleRule('display');
     expect(container.firstChild).not.toHaveStyleRule('flex');
@@ -31,9 +31,9 @@ describe('StyledLabel', () => {
   });
 
   it('renders styles for active label', () => {
-    const { container } = render(<StyledLabel isActive />);
+    const { container } = render(<StyledLabel $isActive />);
 
-    expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[800]);
+    expect(container.firstChild).toHaveStyleRule('color', PALETTE.grey[900]);
     expect(container.firstChild).toHaveStyleRule('font-weight', '600');
   });
 });
diff --git a/packages/accordions/src/styled/stepper/StyledLabel.ts b/packages/accordions/src/styled/stepper/StyledLabel.ts
index 150ea966812..c78a12a75ae 100644
--- a/packages/accordions/src/styled/stepper/StyledLabel.ts
+++ b/packages/accordions/src/styled/stepper/StyledLabel.ts
@@ -7,36 +7,37 @@
 
 import styled from 'styled-components';
 import {
-  getColorV8,
   getLineHeight,
   retrieveComponentStyles,
-  DEFAULT_THEME
+  DEFAULT_THEME,
+  getColor
 } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.step_label';
 
 interface IStyledLabelProps {
-  isActive?: boolean;
-  isHorizontal?: boolean;
+  $isActive?: boolean;
+  $isHorizontal?: boolean;
 }
 
 export const StyledLabel = styled.div.attrs<IStyledLabelProps>({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })<IStyledLabelProps>`
-  display: ${props => !props.isHorizontal && 'flex'};
-  align-items: ${props => !props.isHorizontal && 'center'};
+  display: ${props => !props.$isHorizontal && 'flex'};
+  align-items: ${props => !props.$isHorizontal && 'center'};
   transition:
     color 0.25s ease-in-out,
     font-weight 0.25s ease-in-out;
-  text-align: ${props => props.isHorizontal && 'center'};
+  text-align: ${props => props.$isHorizontal && 'center'};
   line-height: ${props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md)};
-  color: ${props =>
-    props.isActive
-      ? getColorV8('foreground', 600 /* default shade */, props.theme)
-      : getColorV8('neutralHue', 600, props.theme)};
+  color: ${({ $isActive, theme }) =>
+    getColor({
+      theme,
+      variable: $isActive ? 'foreground.default' : 'foreground.subtle'
+    })};
   font-size: ${props => props.theme.fontSizes.md};
-  font-weight: ${props => props.isActive && 600};
+  font-weight: ${props => props.$isActive && 600};
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
diff --git a/packages/accordions/src/styled/stepper/StyledLabelText.spec.tsx b/packages/accordions/src/styled/stepper/StyledLabelText.spec.tsx
index df168b39619..f9c92202599 100644
--- a/packages/accordions/src/styled/stepper/StyledLabelText.spec.tsx
+++ b/packages/accordions/src/styled/stepper/StyledLabelText.spec.tsx
@@ -18,14 +18,14 @@ describe('StyledLabelText', () => {
     expect(container.firstChild).not.toHaveStyleRule('word-wrap');
   });
   it('renders the horizontal style', () => {
-    const { container } = render(<StyledLabelText isHorizontal />);
+    const { container } = render(<StyledLabelText $isHorizontal />);
 
     expect(container.firstChild).toHaveStyleRule('padding', '0 12px');
     expect(container.firstChild).toHaveStyleRule('word-wrap', 'break-word');
   });
 
   it('renders hidden label styling', () => {
-    const { container } = render(<StyledLabelText isHidden />);
+    const { container } = render(<StyledLabelText $isHidden />);
 
     expect(container.firstChild).toHaveStyleRule('display', 'none');
   });
diff --git a/packages/accordions/src/styled/stepper/StyledLabelText.ts b/packages/accordions/src/styled/stepper/StyledLabelText.ts
index 94ae4bbc501..e8600dec67a 100644
--- a/packages/accordions/src/styled/stepper/StyledLabelText.ts
+++ b/packages/accordions/src/styled/stepper/StyledLabelText.ts
@@ -11,17 +11,17 @@ import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'accordions.step_label_text';
 
 interface IStyledLabelTextProps {
-  isHidden?: boolean;
-  isHorizontal?: boolean;
+  $isHidden?: boolean;
+  $isHorizontal?: boolean;
 }
 
 export const StyledLabelText = styled.div.attrs<IStyledLabelTextProps>({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })<IStyledLabelTextProps>`
-  display: ${props => props.isHidden && 'none'};
-  padding: ${props => props.isHorizontal && `0 ${props.theme.space.base * 3}px`};
-  word-wrap: ${props => props.isHorizontal && 'break-word'};
+  display: ${props => props.$isHidden && 'none'};
+  padding: ${props => props.$isHorizontal && `0 ${props.theme.space.base * 3}px`};
+  word-wrap: ${props => props.$isHorizontal && 'break-word'};
 `;
 
 StyledLabelText.defaultProps = {
diff --git a/packages/accordions/src/styled/stepper/StyledLine.ts b/packages/accordions/src/styled/stepper/StyledLine.ts
index 9876d86ec5d..3f532f359a2 100644
--- a/packages/accordions/src/styled/stepper/StyledLine.ts
+++ b/packages/accordions/src/styled/stepper/StyledLine.ts
@@ -6,7 +6,7 @@
  */
 
 import styled from 'styled-components';
-import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.step_line';
 
@@ -21,7 +21,7 @@ export const StyledLine = styled.div.attrs({
   left: ${props => `calc(-50% + ${props.theme.space.base * 6}px)`};
   flex: 1;
   border-top: ${props => props.theme.borders.sm};
-  border-color: ${props => getColorV8('neutralHue', 300, props.theme)};
+  border-color: ${({ theme }) => getColor({ theme, variable: 'border.default' })};
 `;
 
 StyledLine.defaultProps = {
diff --git a/packages/accordions/src/styled/stepper/StyledStep.spec.tsx b/packages/accordions/src/styled/stepper/StyledStep.spec.tsx
index 60f9f2eec0e..ff8104944b1 100644
--- a/packages/accordions/src/styled/stepper/StyledStep.spec.tsx
+++ b/packages/accordions/src/styled/stepper/StyledStep.spec.tsx
@@ -23,7 +23,7 @@ describe('StyledStep', () => {
   });
 
   it('renders horizontal styles', () => {
-    const { container } = render(<StyledStep isHorizontal />);
+    const { container } = render(<StyledStep $isHorizontal />);
 
     expect(container.firstChild).toHaveStyleRule('position', 'relative');
     expect(container.firstChild).toHaveStyleRule('flex', '1');
diff --git a/packages/accordions/src/styled/stepper/StyledStep.ts b/packages/accordions/src/styled/stepper/StyledStep.ts
index dfe2119763c..22d43659e4e 100644
--- a/packages/accordions/src/styled/stepper/StyledStep.ts
+++ b/packages/accordions/src/styled/stepper/StyledStep.ts
@@ -6,23 +6,23 @@
  */
 
 import styled from 'styled-components';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 import { StyledContent } from './StyledContent';
 import { StyledLine } from './StyledLine';
 
 const COMPONENT_ID = 'accordions.step';
 
 interface IStyledStep {
-  isHorizontal?: boolean;
+  $isHorizontal?: boolean;
 }
 
 export const StyledStep = styled.li.attrs<IStyledStep>({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })<IStyledStep>`
-  position: ${props => props.isHorizontal && 'relative'};
-  flex: ${props => props.isHorizontal && '1'};
-  min-width: ${props => props.isHorizontal && `${props.theme.space.base * 15}px`};
+  position: ${props => props.$isHorizontal && 'relative'};
+  flex: ${props => props.$isHorizontal && '1'};
+  min-width: ${props => props.$isHorizontal && `${props.theme.space.base * 15}px`};
 
   &:last-of-type ${StyledLine} {
     display: ${props => props.theme.rtl && 'none'};
@@ -35,7 +35,7 @@ export const StyledStep = styled.li.attrs<IStyledStep>({
   &:not(:last-of-type) ${StyledContent} {
     /* stylelint-disable-next-line property-no-unknown */
     border-${props => (props.theme.rtl ? 'right' : 'left')}: ${props => props.theme.borders.sm};
-    border-color: ${props => getColorV8('neutralHue', 300, props.theme)};
+    border-color: ${({ theme }) => getColor({ theme, variable: 'border.default' })};
   }
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
diff --git a/packages/accordions/src/styled/stepper/StyledStepper.spec.tsx b/packages/accordions/src/styled/stepper/StyledStepper.spec.tsx
index 012853626dc..145db4d4502 100644
--- a/packages/accordions/src/styled/stepper/StyledStepper.spec.tsx
+++ b/packages/accordions/src/styled/stepper/StyledStepper.spec.tsx
@@ -17,7 +17,7 @@ describe('StyledStepper', () => {
   });
 
   it('renders horizontal styling correctly', () => {
-    const { container } = render(<StyledStepper isHorizontal />);
+    const { container } = render(<StyledStepper $isHorizontal />);
 
     expect(container.firstChild).toHaveStyleRule('display', 'flex');
   });
diff --git a/packages/accordions/src/styled/stepper/StyledStepper.ts b/packages/accordions/src/styled/stepper/StyledStepper.ts
index 597cf0cd346..df95ae99c8d 100644
--- a/packages/accordions/src/styled/stepper/StyledStepper.ts
+++ b/packages/accordions/src/styled/stepper/StyledStepper.ts
@@ -11,7 +11,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'accordions.stepper';
 
 interface IStyledStepper {
-  isHorizontal?: boolean;
+  $isHorizontal?: boolean;
 }
 
 /**
@@ -21,7 +21,7 @@ export const StyledStepper = styled.ol.attrs<IStyledStepper>({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })<IStyledStepper>`
-  display: ${props => props.isHorizontal && 'flex'};
+  display: ${props => props.$isHorizontal && 'flex'};
   margin: 0; /* [1] */
   padding: 0; /* [1] */
   list-style: none; /* [1] */
diff --git a/packages/accordions/src/styled/timeline/StyledItem.spec.tsx b/packages/accordions/src/styled/timeline/StyledItem.spec.tsx
index 173169c8286..616f9246112 100644
--- a/packages/accordions/src/styled/timeline/StyledItem.spec.tsx
+++ b/packages/accordions/src/styled/timeline/StyledItem.spec.tsx
@@ -33,7 +33,7 @@ describe('StyledItem', () => {
   });
 
   it('renders RTL & alternate styling correctly', () => {
-    renderRtl(<StyledTimelineItem isAlternate />);
+    renderRtl(<StyledTimelineItem $isAlternate />);
 
     const item = screen.getByRole('listitem');
 
diff --git a/packages/accordions/src/styled/timeline/StyledItem.ts b/packages/accordions/src/styled/timeline/StyledItem.ts
index 6741e59d734..18ee5a6344c 100644
--- a/packages/accordions/src/styled/timeline/StyledItem.ts
+++ b/packages/accordions/src/styled/timeline/StyledItem.ts
@@ -10,7 +10,7 @@ import {
   getLineHeight,
   retrieveComponentStyles,
   DEFAULT_THEME,
-  getColorV8
+  getColor
 } from '@zendeskgarden/react-theming';
 import { StyledSeparator } from './StyledSeparator';
 import { StyledTimelineContent } from './StyledContent';
@@ -19,9 +19,8 @@ import { StyledOppositeContent } from './StyledOppositeContent';
 const COMPONENT_ID = 'timeline.item';
 
 interface IStyledTimelineItem {
-  surfaceColor?: string;
-  isAlternate?: boolean;
-  hasOppositeContent?: boolean;
+  $isAlternate?: boolean;
+  $hasOppositeContent?: boolean;
 }
 
 export const StyledTimelineItem = styled.li.attrs({
@@ -31,7 +30,7 @@ export const StyledTimelineItem = styled.li.attrs({
   display: flex;
   position: relative;
   line-height: ${props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md)};
-  color: ${props => getColorV8('foreground', 600 /* default shade */, props.theme)};
+  color: ${({ theme }) => getColor({ theme, variable: 'foreground.default' })};
   font-size: ${props => props.theme.fontSizes.md};
 
   &:last-of-type ${StyledSeparator}::after {
@@ -39,8 +38,8 @@ export const StyledTimelineItem = styled.li.attrs({
   }
 
   ${props =>
-    !props.hasOppositeContent &&
-    props.isAlternate &&
+    !props.$hasOppositeContent &&
+    props.$isAlternate &&
     css`
       &::before {
         flex: 1;
@@ -50,7 +49,7 @@ export const StyledTimelineItem = styled.li.attrs({
     `}
 
   ${props =>
-    props.isAlternate &&
+    props.$isAlternate &&
     css`
       &:nth-child(even) {
         flex-direction: row-reverse;
diff --git a/packages/accordions/src/styled/timeline/StyledItemIcon.ts b/packages/accordions/src/styled/timeline/StyledItemIcon.ts
index fc5da8329e9..07a2d24b4aa 100644
--- a/packages/accordions/src/styled/timeline/StyledItemIcon.ts
+++ b/packages/accordions/src/styled/timeline/StyledItemIcon.ts
@@ -5,13 +5,13 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import styled from 'styled-components';
+import styled, { DefaultTheme, ThemeProps, css } from 'styled-components';
 import { math } from 'polished';
 import {
-  getColorV8,
   retrieveComponentStyles,
   DEFAULT_THEME,
-  StyledBaseIcon
+  StyledBaseIcon,
+  getColor
 } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'timeline.icon';
@@ -20,6 +20,16 @@ interface IStyledItemIcon {
   $surfaceColor?: string;
 }
 
+const colorStyles = ({ $surfaceColor, theme }: IStyledItemIcon & ThemeProps<DefaultTheme>) => {
+  const foregroundColor = getColor({ theme, variable: 'border.emphasis' });
+  const backgroundColor = $surfaceColor || getColor({ theme, variable: 'background.default' });
+
+  return css`
+    background-color: ${backgroundColor};
+    color: ${foregroundColor};
+  `;
+};
+
 /**
  * 1. Odd sizing allows the timeline line to center respective of the circle icon.
  */
@@ -29,12 +39,12 @@ export const StyledItemIcon = styled(StyledBaseIcon).attrs({
 })<IStyledItemIcon>`
   z-index: 1;
   box-sizing: content-box;
-  background-color: ${props =>
-    props.$surfaceColor || getColorV8('background', 600 /* default shade */, props.theme)};
+
   padding: ${props => props.theme.space.base}px 0;
   width: ${props => math(`${props.theme.iconSizes.sm} + 1`)}; /* [1] */
   height: ${props => math(`${props.theme.iconSizes.sm} + 1`)}; /* [1] */
-  color: ${props => getColorV8('neutralHue', 600, props.theme)};
+
+  ${colorStyles}
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
diff --git a/packages/accordions/src/styled/timeline/StyledSeparator.ts b/packages/accordions/src/styled/timeline/StyledSeparator.ts
index 407cc0773c1..f4aa08cf922 100644
--- a/packages/accordions/src/styled/timeline/StyledSeparator.ts
+++ b/packages/accordions/src/styled/timeline/StyledSeparator.ts
@@ -6,7 +6,7 @@
  */
 
 import styled from 'styled-components';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'timeline.content.separator';
 
@@ -21,8 +21,8 @@ export const StyledSeparator = styled.div.attrs({
 
   &::after {
     position: absolute;
-    border-left: ${props =>
-      `${props.theme.borders.sm} ${getColorV8('neutralHue', 600, props.theme)}`};
+    border-left: ${({ theme }) =>
+      `${theme.borders.sm} ${getColor({ theme, variable: 'border.emphasis' })}`};
     height: 100%;
     content: '';
   }
diff --git a/packages/accordions/src/types/index.ts b/packages/accordions/src/types/index.ts
index 532ea53930d..ef00219e5b5 100644
--- a/packages/accordions/src/types/index.ts
+++ b/packages/accordions/src/types/index.ts
@@ -64,6 +64,6 @@ export interface ITimelineProps extends OlHTMLAttributes<HTMLOListElement> {
 export interface ITimelineItemProps extends LiHTMLAttributes<HTMLLIElement> {
   /** Replaces the dot with an icon */
   icon?: ReactElement;
-  /** Provides surface color for an icon placed on a non-white background */
+  /** Provides surface color for an icon placed on a non-default background */
   surfaceColor?: string;
 }