zendeskgarden · ze-flo · Jul 12, 2024 · Jul 8, 2024 · Jul 9, 2024 · Jul 9, 2024
diff --git 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
@@ -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
@@ -20,18 +20,18 @@ 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,
           value: sectionValue,
           ...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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,45 +17,42 @@ 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'
     );
   });
 
   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
@@ -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
 };