chore: replace deprecated retrieveComponentStyles with componentStyles utility (#1989)

Author: jzempel

packages/.template/src/styled/Styled{{capitalize component}}.ts

@@ -6,7 +6,7 @@
  */
 
 import styled, { ThemeProps, DefaultTheme, css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { componentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = '{{pluralize (lowercase component)}}.{{lowercase component}}';
 
@@ -63,13 +63,13 @@ export const Styled{{capitalize component}} = styled.div.attrs<IStyled{{capitali
   white-space: nowrap;
   box-sizing: border-box;
 
-  ${props => sizeStyles(props)};
+  ${sizeStyles};
 
   &:focus {
     outline: none;
   }
 
-  ${props => colorStyles(props)};
+  ${colorStyles};
 
   & > * {
     display: block;
@@ -78,7 +78,7 @@ export const Styled{{capitalize component}} = styled.div.attrs<IStyled{{capitali
     text-overflow: ellipsis;
   }
 
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
+  ${componentStyles};
 `;
 
 Styled{{capitalize component}}.defaultProps = {

packages/accordions/src/styled/accordion/StyledAccordion.ts

@@ -6,13 +6,13 @@
  */
 
 import styled from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.accordion';
 
 export const StyledAccordion = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })`
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
+  ${componentStyles};
 `;

packages/accordions/src/styled/accordion/StyledButton.ts

@@ -6,7 +6,7 @@
  */
 
 import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
-import { getLineHeight, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { getLineHeight, componentStyles, getColor } from '@zendeskgarden/react-theming';
 
 export const COMPONENT_ID = 'accordions.button';
 
@@ -72,5 +72,5 @@ export const StyledButton = styled.button.attrs<IStyledButton>({
     cursor: ${props => (props.$isCollapsible || !props.$isExpanded) && 'pointer'};
   }
 
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
+  ${componentStyles};
 `;

packages/accordions/src/styled/accordion/StyledHeader.ts

@@ -6,7 +6,7 @@
  */
 
 import styled from 'styled-components';
-import { retrieveComponentStyles, focusStyles } from '@zendeskgarden/react-theming';
+import { componentStyles, focusStyles } from '@zendeskgarden/react-theming';
 import { StyledButton } from './StyledButton';
 
 const COMPONENT_ID = 'accordions.header';
@@ -36,5 +36,5 @@ export const StyledHeader = styled.div.attrs<IStyledHeader>({
       selector: `&:has(${StyledButton}:focus-visible)`
     })}
 
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
+  ${componentStyles};
 `;

packages/accordions/src/styled/accordion/StyledInnerPanel.ts

@@ -6,7 +6,7 @@
  */
 
 import styled from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 import { StyledPanel } from './StyledPanel';
 
 const COMPONENT_ID = 'accordions.step_inner_panel';
@@ -32,5 +32,5 @@ export const StyledInnerPanel = styled.div.attrs({
     visibility: visible;
   }
 
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
+  ${componentStyles};
 `;

packages/accordions/src/styled/accordion/StyledPanel.ts

@@ -8,7 +8,7 @@
 import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
 import {
   getLineHeight,
-  retrieveComponentStyles,
+  componentStyles,
   DEFAULT_THEME,
   getColor
 } from '@zendeskgarden/react-theming';
@@ -70,7 +70,7 @@ export const StyledPanel = styled.section.attrs<IStyledPanel>({
   ${sizeStyles}
   ${colorStyles}
 
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
+  ${componentStyles};
 `;
 
 StyledPanel.defaultProps = {

packages/accordions/src/styled/accordion/StyledRotateIcon.ts

@@ -6,7 +6,7 @@
  */
 
 import styled, { css, ThemeProps, DefaultTheme, DataAttributes } from 'styled-components';
-import { retrieveComponentStyles, StyledBaseIcon, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, StyledBaseIcon, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.rotate_icon';
 
@@ -58,5 +58,5 @@ export const StyledRotateIcon = styled(StyledBaseIcon).attrs<DataAttributes>({
 
   ${colorStyles}
 
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
+  ${componentStyles};
 `;

packages/accordions/src/styled/accordion/StyledSection.ts

@@ -6,7 +6,7 @@
  */
 
 import styled from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 import { StyledPanel } from './StyledPanel';
 
 const COMPONENT_ID = 'accordions.section';
@@ -19,5 +19,5 @@ export const StyledSection = styled.div.attrs({
     border: none;
   }
 
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
+  ${componentStyles};
 `;

packages/accordions/src/styled/stepper/StyledContent.ts

@@ -6,7 +6,7 @@
  */
 
 import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.step_content';
 
@@ -42,5 +42,5 @@ export const StyledContent = styled.div.attrs<IStyledContent>({
 
   ${sizeStyles}
 
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
+  ${componentStyles};
 `;

packages/accordions/src/styled/stepper/StyledIcon.ts

@@ -6,7 +6,7 @@
  */
 
 import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
-import { getLineHeight, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { getLineHeight, componentStyles, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.step_icon';
 
@@ -75,5 +75,5 @@ export const StyledIcon = styled.div.attrs<IStyledIcon>({
   ${sizeStyles}
   ${colorStyles}
 
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
+  ${componentStyles};
 `;

packages/accordions/src/styled/stepper/StyledInnerContent.ts

@@ -6,7 +6,7 @@
  */
 
 import styled, { ThemeProps, DefaultTheme } from 'styled-components';
-import { getLineHeight, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { getLineHeight, componentStyles, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.step_inner_content';
 
@@ -23,5 +23,5 @@ export const StyledInnerContent = styled.div.attrs({
   color: ${({ theme }) => getColor({ theme, variable: 'foreground.default' })};
   font-size: ${props => props.theme.fontSizes.md};
 
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
+  ${componentStyles};
 `;

packages/accordions/src/styled/stepper/StyledLabel.ts

@@ -6,7 +6,7 @@
  */
 
 import styled from 'styled-components';
-import { getLineHeight, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { getLineHeight, componentStyles, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.step_label';
 
@@ -34,5 +34,5 @@ export const StyledLabel = styled.div.attrs<IStyledLabelProps>({
   font-size: ${props => props.theme.fontSizes.md};
   font-weight: ${props => props.$isActive && 600};
 
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
+  ${componentStyles};
 `;

packages/accordions/src/styled/stepper/StyledStep.ts

@@ -6,7 +6,7 @@
  */
 
 import styled from 'styled-components';
-import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { StyledContent } from './StyledContent';
 import { StyledLine } from './StyledLine';
 
@@ -37,5 +37,5 @@ export const StyledStep = styled.li.attrs<IStyledStep>({
     border-color: ${({ theme }) => getColor({ theme, variable: 'border.default' })};
   }
 
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
+  ${componentStyles};
 `;

packages/accordions/src/styled/stepper/StyledStepper.ts

@@ -6,7 +6,7 @@
  */
 
 import styled from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.stepper';
 
@@ -26,5 +26,5 @@ export const StyledStepper = styled.ol.attrs<IStyledStepper>({
   padding: 0; /* [1] */
   list-style: none; /* [1] */
 
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
+  ${componentStyles};
 `;

packages/accordions/src/styled/timeline/StyledContent.ts

@@ -6,7 +6,7 @@
  */
 
 import styled from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'timeline.content';
 
@@ -16,5 +16,5 @@ export const StyledTimelineContent = styled.div.attrs({
 })`
   flex: 1;
   padding: ${props => `${props.theme.space.base * 5}px ${props.theme.space.base * 4}px`};
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
+  ${componentStyles};
 `;

packages/accordions/src/styled/timeline/StyledItem.ts

@@ -6,7 +6,7 @@
  */
 
 import styled, { css } from 'styled-components';
-import { getLineHeight, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { getLineHeight, componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { StyledSeparator } from './StyledSeparator';
 import { StyledTimelineContent } from './StyledContent';
 import { StyledOppositeContent } from './StyledOppositeContent';
@@ -57,5 +57,5 @@ export const StyledTimelineItem = styled.li.attrs({
       }
     `}
 
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
+  ${componentStyles};
 `;

packages/accordions/src/styled/timeline/StyledItemIcon.ts

@@ -7,7 +7,7 @@
 
 import styled, { DataAttributes, DefaultTheme, ThemeProps, css } from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles, StyledBaseIcon, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, StyledBaseIcon, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'timeline.icon';
 
@@ -49,5 +49,5 @@ export const StyledItemIcon = styled(StyledBaseIcon).attrs<DataAttributes>({
 
   ${colorStyles}
 
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
+  ${componentStyles};
 `;

packages/accordions/src/styled/timeline/StyledOppositeContent.ts

@@ -6,7 +6,7 @@
  */
 
 import styled from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'timeline.opposite.content';
 
@@ -17,5 +17,5 @@ export const StyledOppositeContent = styled.div.attrs({
   flex: 1;
   padding: ${props => `${props.theme.space.base * 5}px ${props.theme.space.base * 4}px`};
   text-align: ${props => (props.theme.rtl ? 'left' : 'right')};
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
+  ${componentStyles};
 `;

packages/accordions/src/styled/timeline/StyledSeparator.ts

@@ -6,7 +6,7 @@
  */
 
 import styled from 'styled-components';
-import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'timeline.content.separator';
 
@@ -27,5 +27,5 @@ export const StyledSeparator = styled.div.attrs({
     content: '';
   }
 
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
+  ${componentStyles};
 `;

packages/accordions/src/styled/timeline/StyledTimeline.ts

@@ -6,7 +6,7 @@
  */
 
 import styled from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'timeline';
 
@@ -20,5 +20,5 @@ export const StyledTimeline = styled.ol.attrs({
   margin: 0; /* [1] */
   padding: 0; /* [1] */
   list-style: none; /* [1] */
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
+  ${componentStyles};
 `;

packages/avatars/src/styled/StyledAvatar.ts

@@ -6,7 +6,7 @@
  */
 
 import styled, { css, ThemeProps, keyframes, DefaultTheme } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 import { math } from 'polished';
 
 import { IAvatarProps, SIZE } from '../types';
@@ -229,7 +229,7 @@ export const StyledAvatar = styled.figure.attrs({
     ${badgeStyles};
   }
 
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
+  ${componentStyles};
 `;
 
 StyledAvatar.defaultProps = {

packages/avatars/src/styled/StyledStandaloneStatus.ts

@@ -6,7 +6,7 @@
  */
 
 import styled, { ThemeProps, DefaultTheme } from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { componentStyles } from '@zendeskgarden/react-theming';
 
 import { TRANSITION_DURATION } from './utility';
 
@@ -22,5 +22,5 @@ export const StyledStandaloneStatus = styled.figure.attrs({
   margin: 0;
   box-sizing: content-box;
 
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
+  ${componentStyles};
 `;

packages/avatars/src/styled/StyledStandaloneStatusCaption.ts

@@ -6,7 +6,7 @@
  */
 
 import styled, { ThemeProps, DefaultTheme, css } from 'styled-components';
-import { getLineHeight, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { getLineHeight, componentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'avatars.status-indicator.caption';
 
@@ -28,5 +28,5 @@ export const StyledStandaloneStatusCaption = styled.figcaption.attrs({
 })<ThemeProps<DefaultTheme>>`
   ${sizeStyles}
 
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
+  ${componentStyles};
 `;