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};
 `;