diff --git a/packages/.template/src/styled/Styled{{capitalize component}}.ts b/packages/.template/src/styled/Styled{{capitalize component}}.ts index 3e506a0f49..a2c26dc15e 100644 --- a/packages/.template/src/styled/Styled{{capitalize component}}.ts +++ b/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 sizeStyles(props)}; + ${sizeStyles}; &:focus { outline: none; } - ${props => colorStyles(props)}; + ${colorStyles}; & > * { display: block; @@ -78,7 +78,7 @@ export const Styled{{capitalize component}} = styled.div.attrs retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; Styled{{capitalize component}}.defaultProps = { diff --git a/packages/accordions/src/styled/accordion/StyledAccordion.ts b/packages/accordions/src/styled/accordion/StyledAccordion.ts index 760c598e45..734b36b02d 100644 --- a/packages/accordions/src/styled/accordion/StyledAccordion.ts +++ b/packages/accordions/src/styled/accordion/StyledAccordion.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.accordion'; @@ -14,5 +14,5 @@ export const StyledAccordion = styled.div.attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/accordions/src/styled/accordion/StyledButton.ts b/packages/accordions/src/styled/accordion/StyledButton.ts index d56c80c404..1910bf1d65 100644 --- a/packages/accordions/src/styled/accordion/StyledButton.ts +++ b/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({ cursor: ${props => (props.$isCollapsible || !props.$isExpanded) && 'pointer'}; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/accordions/src/styled/accordion/StyledHeader.ts b/packages/accordions/src/styled/accordion/StyledHeader.ts index 6e8811c72d..69a9bc6a17 100644 --- a/packages/accordions/src/styled/accordion/StyledHeader.ts +++ b/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({ selector: `&:has(${StyledButton}:focus-visible)` })} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/accordions/src/styled/accordion/StyledInnerPanel.ts b/packages/accordions/src/styled/accordion/StyledInnerPanel.ts index ce45ee21a8..e9162616e7 100644 --- a/packages/accordions/src/styled/accordion/StyledInnerPanel.ts +++ b/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}; `; diff --git a/packages/accordions/src/styled/accordion/StyledPanel.ts b/packages/accordions/src/styled/accordion/StyledPanel.ts index 63f91bec8a..23e46dc098 100644 --- a/packages/accordions/src/styled/accordion/StyledPanel.ts +++ b/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({ ${sizeStyles} ${colorStyles} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; StyledPanel.defaultProps = { diff --git a/packages/accordions/src/styled/accordion/StyledRotateIcon.ts b/packages/accordions/src/styled/accordion/StyledRotateIcon.ts index cbf5a40642..e6f708ac60 100644 --- a/packages/accordions/src/styled/accordion/StyledRotateIcon.ts +++ b/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({ ${colorStyles} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/accordions/src/styled/accordion/StyledSection.ts b/packages/accordions/src/styled/accordion/StyledSection.ts index afe2f999bf..4f97db7fa3 100644 --- a/packages/accordions/src/styled/accordion/StyledSection.ts +++ b/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}; `; diff --git a/packages/accordions/src/styled/stepper/StyledContent.ts b/packages/accordions/src/styled/stepper/StyledContent.ts index 3226f98bc5..c8cd62eb72 100644 --- a/packages/accordions/src/styled/stepper/StyledContent.ts +++ b/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({ ${sizeStyles} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/accordions/src/styled/stepper/StyledIcon.ts b/packages/accordions/src/styled/stepper/StyledIcon.ts index 2037491e06..b2f42700a3 100644 --- a/packages/accordions/src/styled/stepper/StyledIcon.ts +++ b/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({ ${sizeStyles} ${colorStyles} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/accordions/src/styled/stepper/StyledInnerContent.ts b/packages/accordions/src/styled/stepper/StyledInnerContent.ts index 1c9cf7c1f9..dc76a72e28 100644 --- a/packages/accordions/src/styled/stepper/StyledInnerContent.ts +++ b/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}; `; diff --git a/packages/accordions/src/styled/stepper/StyledLabel.ts b/packages/accordions/src/styled/stepper/StyledLabel.ts index 4d0c0aee06..cee0e9084c 100644 --- a/packages/accordions/src/styled/stepper/StyledLabel.ts +++ b/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({ font-size: ${props => props.theme.fontSizes.md}; font-weight: ${props => props.$isActive && 600}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/accordions/src/styled/stepper/StyledStep.ts b/packages/accordions/src/styled/stepper/StyledStep.ts index 6f910f832a..1a12e5d293 100644 --- a/packages/accordions/src/styled/stepper/StyledStep.ts +++ b/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({ border-color: ${({ theme }) => getColor({ theme, variable: 'border.default' })}; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/accordions/src/styled/stepper/StyledStepper.ts b/packages/accordions/src/styled/stepper/StyledStepper.ts index cd47f7cc8e..4d43f89a1b 100644 --- a/packages/accordions/src/styled/stepper/StyledStepper.ts +++ b/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({ padding: 0; /* [1] */ list-style: none; /* [1] */ - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/accordions/src/styled/timeline/StyledContent.ts b/packages/accordions/src/styled/timeline/StyledContent.ts index f4b2f7af58..38cfbf395c 100644 --- a/packages/accordions/src/styled/timeline/StyledContent.ts +++ b/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}; `; diff --git a/packages/accordions/src/styled/timeline/StyledItem.ts b/packages/accordions/src/styled/timeline/StyledItem.ts index ea6ca0cfde..d0af1074d9 100644 --- a/packages/accordions/src/styled/timeline/StyledItem.ts +++ b/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}; `; diff --git a/packages/accordions/src/styled/timeline/StyledItemIcon.ts b/packages/accordions/src/styled/timeline/StyledItemIcon.ts index 423ae904e8..ccdc7748de 100644 --- a/packages/accordions/src/styled/timeline/StyledItemIcon.ts +++ b/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({ ${colorStyles} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/accordions/src/styled/timeline/StyledOppositeContent.ts b/packages/accordions/src/styled/timeline/StyledOppositeContent.ts index e141822721..94b888bb1f 100644 --- a/packages/accordions/src/styled/timeline/StyledOppositeContent.ts +++ b/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}; `; diff --git a/packages/accordions/src/styled/timeline/StyledSeparator.ts b/packages/accordions/src/styled/timeline/StyledSeparator.ts index 2d4691ff61..1f5961fb6b 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 { 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}; `; diff --git a/packages/accordions/src/styled/timeline/StyledTimeline.ts b/packages/accordions/src/styled/timeline/StyledTimeline.ts index b90e0f64da..4c3af6012a 100644 --- a/packages/accordions/src/styled/timeline/StyledTimeline.ts +++ b/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}; `; diff --git a/packages/avatars/src/styled/StyledAvatar.ts b/packages/avatars/src/styled/StyledAvatar.ts index eee2f24cdc..861a81f56a 100644 --- a/packages/avatars/src/styled/StyledAvatar.ts +++ b/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 = { diff --git a/packages/avatars/src/styled/StyledStandaloneStatus.ts b/packages/avatars/src/styled/StyledStandaloneStatus.ts index a6352dc148..5b2565fe1b 100644 --- a/packages/avatars/src/styled/StyledStandaloneStatus.ts +++ b/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}; `; diff --git a/packages/avatars/src/styled/StyledStandaloneStatusCaption.ts b/packages/avatars/src/styled/StyledStandaloneStatusCaption.ts index 88fce3630b..fbac4e8266 100644 --- a/packages/avatars/src/styled/StyledStandaloneStatusCaption.ts +++ b/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({ })>` ${sizeStyles} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/avatars/src/styled/StyledStandaloneStatusIndicator.ts b/packages/avatars/src/styled/StyledStandaloneStatusIndicator.ts index 811994afab..a9e62d22d6 100644 --- a/packages/avatars/src/styled/StyledStandaloneStatusIndicator.ts +++ b/packages/avatars/src/styled/StyledStandaloneStatusIndicator.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { componentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { getStatusSize, IStyledStatusIndicatorProps } from './utility'; import { StyledStatusIndicatorBase } from './StyledStatusIndicatorBase'; @@ -22,7 +22,7 @@ export const StyledStandaloneStatusIndicator = styled(StyledStatusIndicatorBase) margin-top: ${props => `calc((${props.theme.lineHeights.md} - ${getStatusSize(props, '0')}) / 2)`}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; StyledStandaloneStatusIndicator.defaultProps = { diff --git a/packages/avatars/src/styled/StyledStatusIndicator.ts b/packages/avatars/src/styled/StyledStatusIndicator.ts index 09346300d3..fde7e336c9 100644 --- a/packages/avatars/src/styled/StyledStatusIndicator.ts +++ b/packages/avatars/src/styled/StyledStatusIndicator.ts @@ -6,7 +6,7 @@ */ import styled, { css, ThemeProps, 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'; @@ -97,7 +97,7 @@ export const StyledStatusIndicator = styled(StyledStatusIndicatorBase).attrs({ ${sizeStyles} ${colorStyles} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; StyledStatusIndicator.defaultProps = { diff --git a/packages/avatars/src/styled/StyledStatusIndicatorBase.ts b/packages/avatars/src/styled/StyledStatusIndicatorBase.ts index 0d14ca80f4..98d2e8833f 100644 --- a/packages/avatars/src/styled/StyledStatusIndicatorBase.ts +++ b/packages/avatars/src/styled/StyledStatusIndicatorBase.ts @@ -6,7 +6,7 @@ */ import styled, { css, keyframes } from 'styled-components'; -import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; import { TRANSITION_DURATION, @@ -95,7 +95,7 @@ export const StyledStatusIndicatorBase = styled.div.attrs({ ${sizeStyles} ${colorStyles} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; StyledStatusIndicatorBase.defaultProps = { diff --git a/packages/avatars/src/styled/StyledText.ts b/packages/avatars/src/styled/StyledText.ts index d4820f2409..1b4b51b9f4 100644 --- a/packages/avatars/src/styled/StyledText.ts +++ b/packages/avatars/src/styled/StyledText.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 = 'avatars.text'; @@ -21,5 +21,5 @@ export const StyledText = styled.span.attrs({ text-align: center; white-space: nowrap; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/breadcrumbs/src/styled/StyledBreadcrumb.ts b/packages/breadcrumbs/src/styled/StyledBreadcrumb.ts index b3c45f2e62..89762c87ff 100644 --- a/packages/breadcrumbs/src/styled/StyledBreadcrumb.ts +++ b/packages/breadcrumbs/src/styled/StyledBreadcrumb.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 = 'breadcrumbs.list'; @@ -24,5 +24,5 @@ export const StyledBreadcrumb = styled.ol.attrs({ font-size: ${props => props.theme.fontSizes.md}; direction: ${props => props.theme.rtl && 'rtl'}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/breadcrumbs/src/styled/StyledBreadcrumbItem.ts b/packages/breadcrumbs/src/styled/StyledBreadcrumbItem.ts index b635086a73..d1a2d67e56 100644 --- a/packages/breadcrumbs/src/styled/StyledBreadcrumbItem.ts +++ b/packages/breadcrumbs/src/styled/StyledBreadcrumbItem.ts @@ -6,7 +6,7 @@ */ import styled, { DefaultTheme, ThemeProps, css } from 'styled-components'; -import { getColor, getLineHeight, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { getColor, getLineHeight, componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'breadcrumbs.item'; @@ -57,5 +57,5 @@ export const StyledBreadcrumbItem = styled.li.attrs({ ${colorStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/buttons/src/styled/StyledAnchor.ts b/packages/buttons/src/styled/StyledAnchor.ts index 2a5cf02a25..c55fed54bd 100644 --- a/packages/buttons/src/styled/StyledAnchor.ts +++ b/packages/buttons/src/styled/StyledAnchor.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledButton } from './StyledButton'; import { IAnchorProps } from './../types'; @@ -25,5 +25,5 @@ export const StyledAnchor = styled(StyledButton).attrs(props => ({ }))` direction: ${props => props.theme.rtl && 'rtl'}; - ${props => retrieveComponentStyles((props as any)['data-garden-id'], props)}; + ${componentStyles}; `; diff --git a/packages/buttons/src/styled/StyledButton.ts b/packages/buttons/src/styled/StyledButton.ts index cf4a880f72..2a35116649 100644 --- a/packages/buttons/src/styled/StyledButton.ts +++ b/packages/buttons/src/styled/StyledButton.ts @@ -13,7 +13,7 @@ import { focusStyles, getColor, getFocusBoxShadow, - retrieveComponentStyles + componentStyles } from '@zendeskgarden/react-theming'; import { IButtonProps } from '../types'; import { StyledSplitButton } from './StyledSplitButton'; @@ -517,5 +517,5 @@ export const StyledButton = styled.button.attrs(props => ({ ${props => groupStyles(props)} } - ${props => retrieveComponentStyles(COMPONENT_ID, props)} + ${componentStyles} `; diff --git a/packages/buttons/src/styled/StyledExternalIcon.ts b/packages/buttons/src/styled/StyledExternalIcon.ts index bc05ecefb0..13c101f877 100644 --- a/packages/buttons/src/styled/StyledExternalIcon.ts +++ b/packages/buttons/src/styled/StyledExternalIcon.ts @@ -7,7 +7,7 @@ import styled from 'styled-components'; import NewWindowIcon from '@zendeskgarden/svg-icons/src/12/new-window-stroke.svg'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'buttons.external_icon'; @@ -25,5 +25,5 @@ export const StyledExternalIcon = styled(NewWindowIcon).attrs({ width: 0.85em; height: 0.85em; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/buttons/src/styled/StyledIcon.ts b/packages/buttons/src/styled/StyledIcon.ts index e5c4b46b85..f70324ebaf 100644 --- a/packages/buttons/src/styled/StyledIcon.ts +++ b/packages/buttons/src/styled/StyledIcon.ts @@ -6,7 +6,7 @@ */ import styled, { css, ThemeProps, DefaultTheme, DataAttributes } from 'styled-components'; -import { StyledBaseIcon, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { StyledBaseIcon, componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'buttons.icon'; @@ -43,5 +43,5 @@ export const StyledIcon = styled(StyledBaseIcon).attrs({ ${props => sizeStyles(props)}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/buttons/src/styled/StyledIconButton.ts b/packages/buttons/src/styled/StyledIconButton.ts index 40b2cae528..54e34ac7a8 100644 --- a/packages/buttons/src/styled/StyledIconButton.ts +++ b/packages/buttons/src/styled/StyledIconButton.ts @@ -6,7 +6,7 @@ */ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; import { IButtonProps } from '../types'; import { COMPONENT_ID as BTN_COMPONENT_ID, @@ -88,5 +88,5 @@ export const StyledIconButton = styled(StyledButton).attrs(props => { ${iconStyles} } - ${props => retrieveComponentStyles((props as any)['data-garden-id'], props)}; + ${componentStyles}; `; diff --git a/packages/buttons/src/styled/StyledSplitButton.ts b/packages/buttons/src/styled/StyledSplitButton.ts index 7ae83f514b..0b2c777165 100644 --- a/packages/buttons/src/styled/StyledSplitButton.ts +++ b/packages/buttons/src/styled/StyledSplitButton.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 = 'buttons.button_group_view'; @@ -23,5 +23,5 @@ export const StyledSplitButton = styled.div.attrs({ direction: ${props => props.theme.rtl && 'rtl'}; white-space: nowrap; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/chrome/src/styled/StyledChrome.ts b/packages/chrome/src/styled/StyledChrome.ts index 475f01ed0d..9375af5885 100644 --- a/packages/chrome/src/styled/StyledChrome.ts +++ b/packages/chrome/src/styled/StyledChrome.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 = 'chrome.chrome'; @@ -25,5 +25,5 @@ export const StyledChrome = styled.div.attrs({ font-family: ${props => props.theme.fonts.system}; direction: ${props => props.theme.rtl && 'rtl'}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/chrome/src/styled/StyledSkipNav.ts b/packages/chrome/src/styled/StyledSkipNav.ts index 251f79b091..bb6924946d 100644 --- a/packages/chrome/src/styled/StyledSkipNav.ts +++ b/packages/chrome/src/styled/StyledSkipNav.ts @@ -8,7 +8,7 @@ import styled, { css, keyframes, DefaultTheme, ThemeProps } from 'styled-components'; import { math } from 'polished'; import { - retrieveComponentStyles, + componentStyles, getLineHeight, focusStyles, SELECTOR_FOCUS_VISIBLE, @@ -127,5 +127,5 @@ export const StyledSkipNav = styled.a.attrs({ ${colorStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/chrome/src/styled/StyledSkipNavIcon.ts b/packages/chrome/src/styled/StyledSkipNavIcon.ts index b375e7db6c..6f90805cf8 100644 --- a/packages/chrome/src/styled/StyledSkipNavIcon.ts +++ b/packages/chrome/src/styled/StyledSkipNavIcon.ts @@ -7,7 +7,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import LinkIcon from '@zendeskgarden/svg-icons/src/16/link-stroke.svg'; -import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { getColor, componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'chrome.skipnav_icon'; @@ -31,5 +31,5 @@ export const StyledSkipNavIcon = styled(LinkIcon).attrs({ ${sizeStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/chrome/src/styled/body/StyledBody.ts b/packages/chrome/src/styled/body/StyledBody.ts index 91932a7511..12dedd154a 100644 --- a/packages/chrome/src/styled/body/StyledBody.ts +++ b/packages/chrome/src/styled/body/StyledBody.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 = 'chrome.body'; @@ -19,5 +19,5 @@ export const StyledBody = styled.div.attrs({ background-color: ${props => getColor({ theme: props.theme, variable: 'background.default' })}; min-width: 0; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/chrome/src/styled/body/StyledContent.tsx b/packages/chrome/src/styled/body/StyledContent.tsx index 35e1dcfc92..3019c0f4f8 100644 --- a/packages/chrome/src/styled/body/StyledContent.tsx +++ b/packages/chrome/src/styled/body/StyledContent.tsx @@ -7,7 +7,7 @@ import styled, { DefaultTheme, ThemeProps, css } from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles, getLineHeight, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getLineHeight, getColor } from '@zendeskgarden/react-theming'; import { getFooterHeight, getHeaderHeight } from '../utils'; const COMPONENT_ID = 'chrome.content'; @@ -44,5 +44,5 @@ export const StyledContent = styled.div.attrs({ outline: none; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/chrome/src/styled/body/StyledMain.tsx b/packages/chrome/src/styled/body/StyledMain.tsx index 780bf6adcb..b5e753a8ec 100644 --- a/packages/chrome/src/styled/body/StyledMain.tsx +++ b/packages/chrome/src/styled/body/StyledMain.tsx @@ -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 = 'chrome.main'; @@ -23,5 +23,5 @@ export const StyledMain = styled.main.attrs({ outline: none; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/chrome/src/styled/footer/StyledFooter.ts b/packages/chrome/src/styled/footer/StyledFooter.ts index 020b416b44..1a8861fe04 100644 --- a/packages/chrome/src/styled/footer/StyledFooter.ts +++ b/packages/chrome/src/styled/footer/StyledFooter.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; import { getFooterHeight } from '../utils'; const COMPONENT_ID = 'chrome.footer'; @@ -46,5 +46,5 @@ export const StyledFooter = styled.footer.attrs({ ${colorStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/chrome/src/styled/footer/StyledFooterItem.ts b/packages/chrome/src/styled/footer/StyledFooterItem.ts index 20036e43a4..78cfec5ec4 100644 --- a/packages/chrome/src/styled/footer/StyledFooterItem.ts +++ b/packages/chrome/src/styled/footer/StyledFooterItem.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 = 'chrome.footer_item'; @@ -19,5 +19,5 @@ export const StyledFooterItem = styled.div.attrs({ })` margin: ${props => `0 ${props.theme.space.base}px`}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/chrome/src/styled/header/StyledBaseHeaderItem.ts b/packages/chrome/src/styled/header/StyledBaseHeaderItem.ts index b6061dc806..78b764f6f1 100644 --- a/packages/chrome/src/styled/header/StyledBaseHeaderItem.ts +++ b/packages/chrome/src/styled/header/StyledBaseHeaderItem.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { retrieveComponentStyles, getLineHeight } from '@zendeskgarden/react-theming'; +import { componentStyles, getLineHeight } from '@zendeskgarden/react-theming'; import { getHeaderItemSize } from '../utils'; const COMPONENT_ID = 'chrome.base_header_item'; @@ -77,5 +77,5 @@ export const StyledBaseHeaderItem = styled.button.attrs({ ${sizeStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/chrome/src/styled/header/StyledHeader.ts b/packages/chrome/src/styled/header/StyledHeader.ts index 0a7313daac..4d13c3bcd9 100644 --- a/packages/chrome/src/styled/header/StyledHeader.ts +++ b/packages/chrome/src/styled/header/StyledHeader.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; import { StyledLogoHeaderItem } from './StyledLogoHeaderItem'; import { getHeaderHeight } from '../utils'; @@ -65,5 +65,5 @@ export const StyledHeader = styled.header.attrs({ display: ${props => props.$isStandalone && 'inline-flex'}; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/chrome/src/styled/header/StyledHeaderItem.ts b/packages/chrome/src/styled/header/StyledHeaderItem.ts index ebc17408f9..21e6ae56f6 100644 --- a/packages/chrome/src/styled/header/StyledHeaderItem.ts +++ b/packages/chrome/src/styled/header/StyledHeaderItem.ts @@ -7,7 +7,7 @@ import styled, { DefaultTheme, ThemeProps, css } from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles, focusStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, focusStyles, getColor } from '@zendeskgarden/react-theming'; import { StyledHeaderItemIcon } from './StyledHeaderItemIcon'; import { StyledBaseHeaderItem, IStyledBaseHeaderItemProps } from './StyledBaseHeaderItem'; import { StyledHeaderItemText } from './StyledHeaderItemText'; @@ -90,5 +90,5 @@ export const StyledHeaderItem = styled(StyledBaseHeaderItem as 'button').attrs({ color 0.1s ease-in-out; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/chrome/src/styled/header/StyledHeaderItemIcon.ts b/packages/chrome/src/styled/header/StyledHeaderItemIcon.ts index b1889ce398..0fb460d746 100644 --- a/packages/chrome/src/styled/header/StyledHeaderItemIcon.ts +++ b/packages/chrome/src/styled/header/StyledHeaderItemIcon.ts @@ -6,7 +6,7 @@ */ import styled, { DataAttributes, DefaultTheme, ThemeProps, css } from 'styled-components'; -import { retrieveComponentStyles, StyledBaseIcon } from '@zendeskgarden/react-theming'; +import { componentStyles, StyledBaseIcon } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'chrome.header_item_icon'; @@ -30,5 +30,5 @@ export const StyledHeaderItemIcon = styled(StyledBaseIcon).attrs ${sizeStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/chrome/src/styled/header/StyledHeaderItemText.ts b/packages/chrome/src/styled/header/StyledHeaderItemText.ts index 264cae7849..50b8be9655 100644 --- a/packages/chrome/src/styled/header/StyledHeaderItemText.ts +++ b/packages/chrome/src/styled/header/StyledHeaderItemText.ts @@ -7,7 +7,7 @@ import styled from 'styled-components'; import { hideVisually } from 'polished'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'chrome.header_item_text'; @@ -23,5 +23,5 @@ export const StyledHeaderItemText = styled.span.attrs props.$isClipped && hideVisually()} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/chrome/src/styled/header/StyledHeaderItemWrapper.ts b/packages/chrome/src/styled/header/StyledHeaderItemWrapper.ts index 9376809a00..d14dcd88e2 100644 --- a/packages/chrome/src/styled/header/StyledHeaderItemWrapper.ts +++ b/packages/chrome/src/styled/header/StyledHeaderItemWrapper.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledBaseHeaderItem } from './StyledBaseHeaderItem'; const COMPONENT_ID = 'chrome.header_item_wrapper'; @@ -16,5 +16,5 @@ export const StyledHeaderItemWrapper = styled(StyledBaseHeaderItem as 'div').att 'data-garden-version': PACKAGE_VERSION, as: 'div' })` - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/chrome/src/styled/header/StyledLogoHeaderItem.ts b/packages/chrome/src/styled/header/StyledLogoHeaderItem.ts index 96395e086e..14a7303658 100644 --- a/packages/chrome/src/styled/header/StyledLogoHeaderItem.ts +++ b/packages/chrome/src/styled/header/StyledLogoHeaderItem.ts @@ -7,7 +7,7 @@ import styled, { DefaultTheme, ThemeProps, css } from 'styled-components'; import { hideVisually } from 'polished'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; import { Product } from '../../types'; import { StyledHeaderItemIcon } from './StyledHeaderItemIcon'; import { StyledBaseHeaderItem } from './StyledBaseHeaderItem'; @@ -80,5 +80,5 @@ export const StyledLogoHeaderItem = styled(StyledBaseHeaderItem).attrs({ ${hideVisually()} } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/chrome/src/styled/nav/StyledNav.ts b/packages/chrome/src/styled/nav/StyledNav.ts index c4c5e2404e..7ad22a08c8 100644 --- a/packages/chrome/src/styled/nav/StyledNav.ts +++ b/packages/chrome/src/styled/nav/StyledNav.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; import { getNavWidth, getNavWidthExpanded } from '../utils'; const COMPONENT_ID = 'chrome.nav'; @@ -51,5 +51,5 @@ export const StyledNav = styled.nav.attrs({ ${sizeStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/chrome/src/styled/nav/StyledNavButton.ts b/packages/chrome/src/styled/nav/StyledNavButton.ts index 028121111c..6bfe217dc4 100644 --- a/packages/chrome/src/styled/nav/StyledNavButton.ts +++ b/packages/chrome/src/styled/nav/StyledNavButton.ts @@ -7,7 +7,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles, focusStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, focusStyles, getColor } from '@zendeskgarden/react-theming'; import { StyledBaseNavItem } from './StyledBaseNavItem'; import { StyledNavItemIcon } from './StyledNavItemIcon'; import { getNavWidth } from '../utils'; @@ -133,5 +133,5 @@ export const StyledNavButton = styled(StyledBaseNavItem as 'button').attrs({ ${colorStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/chrome/src/styled/nav/StyledNavItemIcon.ts b/packages/chrome/src/styled/nav/StyledNavItemIcon.ts index eed1add6a1..a6feaaf058 100644 --- a/packages/chrome/src/styled/nav/StyledNavItemIcon.ts +++ b/packages/chrome/src/styled/nav/StyledNavItemIcon.ts @@ -6,7 +6,7 @@ */ import styled, { DataAttributes, DefaultTheme, ThemeProps, css } from 'styled-components'; -import { retrieveComponentStyles, StyledBaseIcon } from '@zendeskgarden/react-theming'; +import { componentStyles, StyledBaseIcon } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'chrome.nav_item_icon'; @@ -29,5 +29,5 @@ export const StyledNavItemIcon = styled(StyledBaseIcon).attrs({ ${sizeStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/chrome/src/styled/nav/StyledNavItemText.ts b/packages/chrome/src/styled/nav/StyledNavItemText.ts index e8ac095f0c..e1939818d5 100644 --- a/packages/chrome/src/styled/nav/StyledNavItemText.ts +++ b/packages/chrome/src/styled/nav/StyledNavItemText.ts @@ -7,7 +7,7 @@ import styled, { DefaultTheme, ThemeProps, css } from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles, getLineHeight } from '@zendeskgarden/react-theming'; +import { componentStyles, getLineHeight } from '@zendeskgarden/react-theming'; import { StyledNavButton } from './StyledNavButton'; import { getNavWidth } from '../utils'; @@ -64,5 +64,5 @@ export const StyledNavItemText = styled.span.attrs({ ${sizeStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/chrome/src/styled/nav/StyledNavList.ts b/packages/chrome/src/styled/nav/StyledNavList.ts index 5074eae5d0..1788041235 100644 --- a/packages/chrome/src/styled/nav/StyledNavList.ts +++ b/packages/chrome/src/styled/nav/StyledNavList.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 = 'chrome.nav_list'; @@ -22,5 +22,5 @@ export const StyledNavList = styled.ul.attrs({ padding: 0; list-style: none; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/chrome/src/styled/nav/StyledNavListItem.ts b/packages/chrome/src/styled/nav/StyledNavListItem.ts index 70c2b9da60..1853780b51 100644 --- a/packages/chrome/src/styled/nav/StyledNavListItem.ts +++ b/packages/chrome/src/styled/nav/StyledNavListItem.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 = 'chrome.nav_list_item'; @@ -20,5 +20,5 @@ export const StyledNavListItem = styled.li.attrs({ padding: 0; list-style-type: none; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/chrome/src/styled/sheet/StyledSheet.ts b/packages/chrome/src/styled/sheet/StyledSheet.ts index a2b5a4f203..fe7c587a18 100644 --- a/packages/chrome/src/styled/sheet/StyledSheet.ts +++ b/packages/chrome/src/styled/sheet/StyledSheet.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { retrieveComponentStyles, getLineHeight, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getLineHeight, getColor } from '@zendeskgarden/react-theming'; import { ISheetProps } from '../../types'; const COMPONENT_ID = 'chrome.sheet'; @@ -74,5 +74,5 @@ export const StyledSheet = styled.aside.attrs({ ${colorStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/chrome/src/styled/sheet/StyledSheetBody.ts b/packages/chrome/src/styled/sheet/StyledSheetBody.ts index 956a1ce35c..2005df8d04 100644 --- a/packages/chrome/src/styled/sheet/StyledSheetBody.ts +++ b/packages/chrome/src/styled/sheet/StyledSheetBody.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 = 'chrome.sheet_body'; @@ -19,5 +19,5 @@ export const StyledSheetBody = styled.div.attrs({ padding: ${props => props.theme.space.base * 5}px; color-scheme: only ${p => p.theme.colors.base}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/chrome/src/styled/sheet/StyledSheetClose.ts b/packages/chrome/src/styled/sheet/StyledSheetClose.ts index 22cf56b46b..2e0e323502 100644 --- a/packages/chrome/src/styled/sheet/StyledSheetClose.ts +++ b/packages/chrome/src/styled/sheet/StyledSheetClose.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { IconButton } from '@zendeskgarden/react-buttons'; const COMPONENT_ID = 'chrome.sheet_close'; @@ -29,5 +29,5 @@ export const StyledSheetClose = styled(IconButton).attrs({ ${positionStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/chrome/src/styled/sheet/StyledSheetDescription.ts b/packages/chrome/src/styled/sheet/StyledSheetDescription.ts index a104f2ef23..a1ffaf9af2 100644 --- a/packages/chrome/src/styled/sheet/StyledSheetDescription.ts +++ b/packages/chrome/src/styled/sheet/StyledSheetDescription.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles, getLineHeight, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getLineHeight, getColor } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'chrome.sheet_description'; @@ -17,5 +17,5 @@ export const StyledSheetDescription = styled.div.attrs({ line-height: ${p => getLineHeight(p.theme.space.base * 4, p.theme.fontSizes.md)}; color: ${p => getColor({ theme: p.theme, variable: 'foreground.subtle' })}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/chrome/src/styled/sheet/StyledSheetFooter.ts b/packages/chrome/src/styled/sheet/StyledSheetFooter.ts index 043b88ab69..b71a498980 100644 --- a/packages/chrome/src/styled/sheet/StyledSheetFooter.ts +++ b/packages/chrome/src/styled/sheet/StyledSheetFooter.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'chrome.sheet_footer'; @@ -46,5 +46,5 @@ export const StyledSheetFooter = styled.footer.attrs({ ${colorStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/chrome/src/styled/sheet/StyledSheetFooterItem.ts b/packages/chrome/src/styled/sheet/StyledSheetFooterItem.ts index 64c7af07ec..eac874e505 100644 --- a/packages/chrome/src/styled/sheet/StyledSheetFooterItem.ts +++ b/packages/chrome/src/styled/sheet/StyledSheetFooterItem.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 = 'chrome.sheet_footer_item'; @@ -16,5 +16,5 @@ export const StyledSheetFooterItem = styled.div.attrs({ })` ${props => `margin-${props.theme.rtl ? 'right' : 'left'}: ${props.theme.space.base * 5}px;`} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/chrome/src/styled/sheet/StyledSheetHeader.ts b/packages/chrome/src/styled/sheet/StyledSheetHeader.ts index 0689c13f5b..e7f448de93 100644 --- a/packages/chrome/src/styled/sheet/StyledSheetHeader.ts +++ b/packages/chrome/src/styled/sheet/StyledSheetHeader.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'chrome.sheet_header'; @@ -51,5 +51,5 @@ export const StyledSheetHeader = styled.header.attrs({ ${colorStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/chrome/src/styled/sheet/StyledSheetTitle.ts b/packages/chrome/src/styled/sheet/StyledSheetTitle.ts index 5c08a3b099..96c303d784 100644 --- a/packages/chrome/src/styled/sheet/StyledSheetTitle.ts +++ b/packages/chrome/src/styled/sheet/StyledSheetTitle.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 = 'chrome.sheet_title'; @@ -17,5 +17,5 @@ export const StyledSheetTitle = styled.div.attrs({ color: ${p => getColor({ theme: p.theme, variable: 'foreground.default' })}; font-weight: ${props => props.theme.fontWeights.semibold}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/chrome/src/styled/sheet/StyledSheetWrapper.ts b/packages/chrome/src/styled/sheet/StyledSheetWrapper.ts index c5e5c82bc4..00be8e21a8 100644 --- a/packages/chrome/src/styled/sheet/StyledSheetWrapper.ts +++ b/packages/chrome/src/styled/sheet/StyledSheetWrapper.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { ISheetProps } from '../../types'; const COMPONENT_ID = 'chrome.sheet_wrapper'; @@ -52,5 +52,5 @@ export const StyledSheetWrapper = styled.div.attrs({ ${transformStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/colorpickers/src/styled/ColorPicker/StyledColorPicker.ts b/packages/colorpickers/src/styled/ColorPicker/StyledColorPicker.ts index 3ee5111d80..100632b795 100644 --- a/packages/colorpickers/src/styled/ColorPicker/StyledColorPicker.ts +++ b/packages/colorpickers/src/styled/ColorPicker/StyledColorPicker.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 = 'colorpickers.colorpicker'; @@ -25,5 +25,5 @@ export const StyledColorPicker = styled.div.attrs({ width: ${getColorPickerWidth}px; min-width: ${getColorPickerWidth}px; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/colorpickers/src/styled/ColorPicker/StyledColorWell.ts b/packages/colorpickers/src/styled/ColorPicker/StyledColorWell.ts index 11b7972c87..9e41f76be3 100644 --- a/packages/colorpickers/src/styled/ColorPicker/StyledColorWell.ts +++ b/packages/colorpickers/src/styled/ColorPicker/StyledColorWell.ts @@ -7,7 +7,7 @@ import styled, { DefaultTheme, ThemeProps } from 'styled-components'; import { hsl, rgba } from 'polished'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'colorpickers.colorpicker_colorwell'; @@ -40,5 +40,5 @@ export const StyledColorWell = styled.div.attrs(props => height: 208px; overflow: hidden; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/colorpickers/src/styled/ColorPicker/StyledColorWellThumb.ts b/packages/colorpickers/src/styled/ColorPicker/StyledColorWellThumb.ts index e93f42a08b..4c3b980646 100644 --- a/packages/colorpickers/src/styled/ColorPicker/StyledColorWellThumb.ts +++ b/packages/colorpickers/src/styled/ColorPicker/StyledColorWellThumb.ts @@ -7,7 +7,7 @@ import styled, { DefaultTheme, ThemeProps, css } from 'styled-components'; import { stripUnit } from 'polished'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'colorpickers.colorpicker_colorwell_thumb'; @@ -57,5 +57,5 @@ export const StyledColorWellThumb = styled.div.attrs retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/colorpickers/src/styled/ColorPicker/StyledHexField.ts b/packages/colorpickers/src/styled/ColorPicker/StyledHexField.ts index b177ac78d4..1907b764e5 100644 --- a/packages/colorpickers/src/styled/ColorPicker/StyledHexField.ts +++ b/packages/colorpickers/src/styled/ColorPicker/StyledHexField.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { Field } from '@zendeskgarden/react-forms'; const COMPONENT_ID = 'colorpickers.colorpicker_hex_field'; @@ -30,5 +30,5 @@ export const StyledHexField = styled(Field as unknown as 'div').attrs({ direction: ltr; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/colorpickers/src/styled/ColorPicker/StyledInput.ts b/packages/colorpickers/src/styled/ColorPicker/StyledInput.ts index 520b1d6bfd..94b8bc5794 100644 --- a/packages/colorpickers/src/styled/ColorPicker/StyledInput.ts +++ b/packages/colorpickers/src/styled/ColorPicker/StyledInput.ts @@ -7,7 +7,7 @@ import styled from 'styled-components'; import { Input } from '@zendeskgarden/react-forms'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'colorpickers.colorpicker_input'; @@ -18,5 +18,5 @@ export const StyledInput = styled(Input as any).attrs({ })` text-align: center; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/colorpickers/src/styled/ColorPicker/StyledInputGroup.ts b/packages/colorpickers/src/styled/ColorPicker/StyledInputGroup.ts index 650f3fc997..b0063eeccc 100644 --- a/packages/colorpickers/src/styled/ColorPicker/StyledInputGroup.ts +++ b/packages/colorpickers/src/styled/ColorPicker/StyledInputGroup.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 = 'colorpickers.colorpicker_input_group'; @@ -17,5 +17,5 @@ export const StyledInputGroup = styled.div.attrs({ display: flex; justify-content: space-between; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/colorpickers/src/styled/ColorPicker/StyledLabel.ts b/packages/colorpickers/src/styled/ColorPicker/StyledLabel.ts index 686b5e136a..2074e7d15a 100644 --- a/packages/colorpickers/src/styled/ColorPicker/StyledLabel.ts +++ b/packages/colorpickers/src/styled/ColorPicker/StyledLabel.ts @@ -7,7 +7,7 @@ import styled from 'styled-components'; import { Label } from '@zendeskgarden/react-forms'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'colorpickers.colorpicker_label'; @@ -19,5 +19,5 @@ export const StyledLabel = styled(Label as any).attrs({ text-overflow: ellipsis; white-space: nowrap; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/colorpickers/src/styled/ColorPicker/StyledPreview.ts b/packages/colorpickers/src/styled/ColorPicker/StyledPreview.ts index 5b8e814294..bb5f6defe0 100644 --- a/packages/colorpickers/src/styled/ColorPicker/StyledPreview.ts +++ b/packages/colorpickers/src/styled/ColorPicker/StyledPreview.ts @@ -7,7 +7,7 @@ import styled, { DefaultTheme, ThemeProps } from 'styled-components'; import { rgba } from 'polished'; -import { retrieveComponentStyles, getCheckeredBackground } from '@zendeskgarden/react-theming'; +import { componentStyles, getCheckeredBackground } from '@zendeskgarden/react-theming'; import { IRGBColorProps } from '../types'; const COMPONENT_ID = 'colorpickers.colorpicker_preview_box'; @@ -46,5 +46,5 @@ export const StyledPreview = styled.div.attrs(props => width: ${props => props.theme.space.base * (props.$isOpaque ? 6 : 8)}px; height: ${props => props.theme.space.base * (props.$isOpaque ? 6 : 8)}px; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/colorpickers/src/styled/ColorPicker/StyledRGBAField.ts b/packages/colorpickers/src/styled/ColorPicker/StyledRGBAField.ts index ecbaecc2ea..44eeeb6e25 100644 --- a/packages/colorpickers/src/styled/ColorPicker/StyledRGBAField.ts +++ b/packages/colorpickers/src/styled/ColorPicker/StyledRGBAField.ts @@ -7,7 +7,7 @@ import { Field } from '@zendeskgarden/react-forms'; import styled, { DefaultTheme } from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'colorpickers.colorpicker_rgb_field'; @@ -32,5 +32,5 @@ export const StyledRGBAField = styled(Field as unknown as 'div').attrs({ ${props => sizeStyles(props.theme)}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/colorpickers/src/styled/ColorPicker/StyledSliderGroup.ts b/packages/colorpickers/src/styled/ColorPicker/StyledSliderGroup.ts index 489e911c28..372e88cdb7 100644 --- a/packages/colorpickers/src/styled/ColorPicker/StyledSliderGroup.ts +++ b/packages/colorpickers/src/styled/ColorPicker/StyledSliderGroup.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 = 'colorpickers.colorpicker_slider_group'; @@ -18,5 +18,5 @@ export const StyledSliderGroup = styled.div.attrs({ justify-content: space-between; margin-bottom: ${props => props.theme.space.base * 2}px; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/colorpickers/src/styled/ColorPicker/StyledSliders.ts b/packages/colorpickers/src/styled/ColorPicker/StyledSliders.ts index 392426b28c..8e842d16c1 100644 --- a/packages/colorpickers/src/styled/ColorPicker/StyledSliders.ts +++ b/packages/colorpickers/src/styled/ColorPicker/StyledSliders.ts @@ -6,7 +6,7 @@ */ import styled, { DefaultTheme, ThemeProps } from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { getTrackHeight, getTrackMargin } from '../common/StyledRange'; const COMPONENT_ID = 'colorpickers.colorpicker_sliders'; @@ -50,5 +50,5 @@ export const StyledSliders = styled.div.attrs({ ${sizeStyles} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/colorpickers/src/styled/ColorPickerDialog/StyledButtonPreview.ts b/packages/colorpickers/src/styled/ColorPickerDialog/StyledButtonPreview.ts index 1f8a58cb7d..87e2d7b638 100644 --- a/packages/colorpickers/src/styled/ColorPickerDialog/StyledButtonPreview.ts +++ b/packages/colorpickers/src/styled/ColorPickerDialog/StyledButtonPreview.ts @@ -7,7 +7,7 @@ import styled, { ThemeProps, DefaultTheme } from 'styled-components'; import { rgba } from 'polished'; -import { retrieveComponentStyles, getCheckeredBackground } from '@zendeskgarden/react-theming'; +import { componentStyles, getCheckeredBackground } from '@zendeskgarden/react-theming'; import { IColorPickerDialogProps } from '../../types'; const COMPONENT_ID = 'colorpickers.colordialog_preview'; @@ -52,5 +52,5 @@ export const StyledButtonPreview = styled.span.attrs(p width: ${props => props.theme.space.base * 5}px; height: ${props => props.theme.space.base * 5}px; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/colorpickers/src/styled/ColorPickerDialog/StyledTooltipBody.ts b/packages/colorpickers/src/styled/ColorPickerDialog/StyledTooltipBody.ts index bdad574ae1..0a5c54371f 100644 --- a/packages/colorpickers/src/styled/ColorPickerDialog/StyledTooltipBody.ts +++ b/packages/colorpickers/src/styled/ColorPickerDialog/StyledTooltipBody.ts @@ -7,7 +7,7 @@ import styled from 'styled-components'; import { TooltipDialog } from '@zendeskgarden/react-modals'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'colorpickers.colordialog_tooltipdialog_body'; @@ -17,5 +17,5 @@ export const StyledTooltipBody = styled(TooltipDialog.Body as unknown as 'div'). })` padding: 0; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/colorpickers/src/styled/ColorPickerDialog/StyledTooltipDialog.ts b/packages/colorpickers/src/styled/ColorPickerDialog/StyledTooltipDialog.ts index 4be1388fb5..a8e305417a 100644 --- a/packages/colorpickers/src/styled/ColorPickerDialog/StyledTooltipDialog.ts +++ b/packages/colorpickers/src/styled/ColorPickerDialog/StyledTooltipDialog.ts @@ -7,7 +7,7 @@ import styled from 'styled-components'; import { TooltipDialog } from '@zendeskgarden/react-modals'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'colorpickers.colordialog_tooltipdialog'; @@ -22,5 +22,5 @@ export const StyledTooltipDialog = styled(TooltipDialog as any).attrs({ width: auto !important; /* [1] */ /* stylelint-enable declaration-no-important */ - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/colorpickers/src/styled/ColorSwatch/StyledCell.ts b/packages/colorpickers/src/styled/ColorSwatch/StyledCell.ts index a618c8f5a2..fdfda837b1 100644 --- a/packages/colorpickers/src/styled/ColorSwatch/StyledCell.ts +++ b/packages/colorpickers/src/styled/ColorSwatch/StyledCell.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 = 'colorpickers.swatch_cell'; @@ -17,5 +17,5 @@ export const StyledCell = styled.td.attrs({ padding: ${props => props.theme.space.base}px; font-size: 0; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatch.ts b/packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatch.ts index d43d5bd2f5..58f73a50b0 100644 --- a/packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatch.ts +++ b/packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatch.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 = 'colorpickers.color_swatch'; @@ -20,5 +20,5 @@ export const StyledColorSwatch = styled.table.attrs({ border-collapse: collapse; line-height: normal; /* [1] */ - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatchInput.ts b/packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatchInput.ts index 3fcd3e2d95..83e401fbdd 100644 --- a/packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatchInput.ts +++ b/packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatchInput.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 = 'colorpickers.color_swatch_input'; @@ -25,5 +25,5 @@ export const StyledColorSwatchInput = styled.input.attrs({ width: 100%; height: 100%; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatchLabel.ts b/packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatchLabel.ts index 29e87f8886..8d365651cb 100644 --- a/packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatchLabel.ts +++ b/packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatchLabel.ts @@ -7,7 +7,7 @@ import styled, { DefaultTheme, ThemeProps } from 'styled-components'; import { parseToRgb, readableColor } from 'polished'; -import { focusStyles, getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { focusStyles, getColor, componentStyles } from '@zendeskgarden/react-theming'; import { StyledButtonPreview } from '../ColorPickerDialog/StyledButtonPreview'; import { IRGBColor } from '../../types'; @@ -53,5 +53,5 @@ export const StyledColorSwatchLabel = styled(StyledButtonPreview).attrs({ ${props => focusStyles({ theme: props.theme, selector: '&:has(:focus-visible)' })} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/colorpickers/src/styled/ColorSwatch/StyledIcon.ts b/packages/colorpickers/src/styled/ColorSwatch/StyledIcon.ts index 133ce06f45..b1de0e464c 100644 --- a/packages/colorpickers/src/styled/ColorSwatch/StyledIcon.ts +++ b/packages/colorpickers/src/styled/ColorSwatch/StyledIcon.ts @@ -6,7 +6,7 @@ */ import styled, { DataAttributes } from 'styled-components'; -import { retrieveComponentStyles, StyledBaseIcon } from '@zendeskgarden/react-theming'; +import { componentStyles, StyledBaseIcon } from '@zendeskgarden/react-theming'; import { StyledColorSwatchInput } from './StyledColorSwatchInput'; const COMPONENT_ID = 'colorpickers.colorswatch_check'; @@ -27,5 +27,5 @@ export const StyledIcon = styled(StyledBaseIcon).attrs({ opacity: 1; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/colorpickers/src/styled/common/StyledRange.ts b/packages/colorpickers/src/styled/common/StyledRange.ts index 37c6cde8a2..5a2f299406 100644 --- a/packages/colorpickers/src/styled/common/StyledRange.ts +++ b/packages/colorpickers/src/styled/common/StyledRange.ts @@ -8,7 +8,7 @@ import { Range } from '@zendeskgarden/react-forms'; import styled, { ThemeProps, DefaultTheme } from 'styled-components'; import { stripUnit } from 'polished'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; export interface IStyledRangeProps { $isOpaque?: boolean; @@ -179,5 +179,5 @@ export const StyledRange = styled(Range as unknown as 'input').attrs({ ${colorStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/datepickers/src/styled/StyledCalendar.ts b/packages/datepickers/src/styled/StyledCalendar.ts index 9dd91a60bd..5dcfe92f9c 100644 --- a/packages/datepickers/src/styled/StyledCalendar.ts +++ b/packages/datepickers/src/styled/StyledCalendar.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 = 'datepickers.calendar'; @@ -21,5 +21,5 @@ export const StyledCalendar = styled.div.attrs({ width: ${props => props.$isCompact ? props.theme.space.base * 56 : props.theme.space.base * 70}px; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/datepickers/src/styled/StyledCalendarItem.ts b/packages/datepickers/src/styled/StyledCalendarItem.ts index c096945ad7..25da1acfe4 100644 --- a/packages/datepickers/src/styled/StyledCalendarItem.ts +++ b/packages/datepickers/src/styled/StyledCalendarItem.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'datepickers.calendar_item'; @@ -42,5 +42,5 @@ export const StyledCalendarItem = styled.div.attrs({ ${sizeStyles} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/datepickers/src/styled/StyledDatePicker.ts b/packages/datepickers/src/styled/StyledDatePicker.ts index d067e6f505..4990053e6e 100644 --- a/packages/datepickers/src/styled/StyledDatePicker.ts +++ b/packages/datepickers/src/styled/StyledDatePicker.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'datepickers.datepicker'; @@ -40,5 +40,5 @@ export const StyledDatePicker = styled.div.attrs({ ${sizeStyles} ${colorStyles} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/datepickers/src/styled/StyledDay.ts b/packages/datepickers/src/styled/StyledDay.ts index e073c6ec40..d6571c8e28 100644 --- a/packages/datepickers/src/styled/StyledDay.ts +++ b/packages/datepickers/src/styled/StyledDay.ts @@ -6,7 +6,7 @@ */ import styled, { DefaultTheme, ThemeProps, css } from 'styled-components'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; interface IStyledDayProps extends ThemeProps { $isPreviousMonth?: boolean; @@ -104,5 +104,5 @@ export const StyledDay = styled.div.attrs({ ${sizeStyles} ${colorStyles} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/datepickers/src/styled/StyledDayLabel.ts b/packages/datepickers/src/styled/StyledDayLabel.ts index 79948e65f2..316dab7294 100644 --- a/packages/datepickers/src/styled/StyledDayLabel.ts +++ b/packages/datepickers/src/styled/StyledDayLabel.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 = 'datepickers.day_label'; @@ -22,5 +22,5 @@ export const StyledDayLabel = styled.div.attrs({ font-size: ${props => (props.$isCompact ? props.theme.fontSizes.sm : props.theme.fontSizes.md)}; font-weight: ${props => props.theme.fontWeights.semibold}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/datepickers/src/styled/StyledHeader.ts b/packages/datepickers/src/styled/StyledHeader.ts index 8cb5f246ee..43a4513dca 100644 --- a/packages/datepickers/src/styled/StyledHeader.ts +++ b/packages/datepickers/src/styled/StyledHeader.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 = 'datepickers.header'; @@ -18,5 +18,5 @@ export const StyledHeader = styled.div.attrs({ width: ${props => props.$isCompact ? props.theme.space.base * 56 : props.theme.space.base * 70}px; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/datepickers/src/styled/StyledHeaderLabel.ts b/packages/datepickers/src/styled/StyledHeaderLabel.ts index d3325da742..8a1de60178 100644 --- a/packages/datepickers/src/styled/StyledHeaderLabel.ts +++ b/packages/datepickers/src/styled/StyledHeaderLabel.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 = 'datepickers.header_label'; @@ -21,5 +21,5 @@ export const StyledHeaderLabel = styled.div.attrs({ font-size: ${props => (props.$isCompact ? props.theme.fontSizes.sm : props.theme.fontSizes.md)}; font-weight: ${props => props.theme.fontWeights.semibold}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/datepickers/src/styled/StyledHeaderPaddle.ts b/packages/datepickers/src/styled/StyledHeaderPaddle.ts index 7eaaa8147d..b6fea0572a 100644 --- a/packages/datepickers/src/styled/StyledHeaderPaddle.ts +++ b/packages/datepickers/src/styled/StyledHeaderPaddle.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; interface IStyledHeaderPaddleProps { $isCompact: boolean; @@ -88,5 +88,5 @@ export const StyledHeaderPaddle = styled.div.attrs({ ${sizeStyles} ${colorStyles} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/datepickers/src/styled/StyledHighlight.ts b/packages/datepickers/src/styled/StyledHighlight.ts index 335310beb9..8cd51b78fa 100644 --- a/packages/datepickers/src/styled/StyledHighlight.ts +++ b/packages/datepickers/src/styled/StyledHighlight.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, css, DefaultTheme } from 'styled-components'; -import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { getColor, componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'datepickers.highlight'; @@ -72,5 +72,5 @@ export const StyledHighlight = styled.div.attrs({ ${sizeStyles} ${colorStyles} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/datepickers/src/styled/StyledMenu.ts b/packages/datepickers/src/styled/StyledMenu.ts index 7e5f94345b..3cab2a4b9f 100644 --- a/packages/datepickers/src/styled/StyledMenu.ts +++ b/packages/datepickers/src/styled/StyledMenu.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 = 'datepickers.menu'; @@ -14,5 +14,5 @@ export const StyledMenu = styled.div.attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/datepickers/src/styled/StyledMenuWrapper.ts b/packages/datepickers/src/styled/StyledMenuWrapper.ts index 0a39ca68fd..11397b4f9d 100644 --- a/packages/datepickers/src/styled/StyledMenuWrapper.ts +++ b/packages/datepickers/src/styled/StyledMenuWrapper.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { getMenuPosition, menuStyles, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { getMenuPosition, menuStyles, componentStyles } from '@zendeskgarden/react-theming'; import { Placement } from '@floating-ui/react-dom'; const COMPONENT_ID = 'datepickers.menu_wrapper'; @@ -38,5 +38,5 @@ export const StyledMenuWrapper = styled.div.attrs(props animationModifier: props.$isAnimated ? '.is-animated' : undefined })}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/datepickers/src/styled/StyledRangeCalendar.ts b/packages/datepickers/src/styled/StyledRangeCalendar.ts index c912249623..fd5272e4f4 100644 --- a/packages/datepickers/src/styled/StyledRangeCalendar.ts +++ b/packages/datepickers/src/styled/StyledRangeCalendar.ts @@ -7,7 +7,7 @@ import styled from 'styled-components'; import { StyledDatePicker } from './StyledDatePicker'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'datepickers.range_calendar'; @@ -27,5 +27,5 @@ export const StyledRangeCalendar = styled.div.attrs({ : `&:first-of-type {margin-right: ${props.theme.space.base * 5}px}`} } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/draggable/src/styled/draggable-list/StyledDraggableList.ts b/packages/draggable/src/styled/draggable-list/StyledDraggableList.ts index 712865e6e1..edad7dace5 100644 --- a/packages/draggable/src/styled/draggable-list/StyledDraggableList.ts +++ b/packages/draggable/src/styled/draggable-list/StyledDraggableList.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledItem } from './StyledItem'; const COMPONENT_ID = 'draggable_list'; @@ -58,5 +58,5 @@ export const StyledDraggableList = styled.ul.attrs({ ${sizeStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/draggable/src/styled/draggable-list/StyledDropIndicator.ts b/packages/draggable/src/styled/draggable-list/StyledDropIndicator.ts index a116410228..94c0345b74 100644 --- a/packages/draggable/src/styled/draggable-list/StyledDropIndicator.ts +++ b/packages/draggable/src/styled/draggable-list/StyledDropIndicator.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'draggable_list.drop_indicator'; @@ -75,5 +75,5 @@ export const StyledDropIndicator = styled.li.attrs({ content: ''; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/draggable/src/styled/draggable-list/StyledItem.ts b/packages/draggable/src/styled/draggable-list/StyledItem.ts index f5f85483d5..19c34093fe 100644 --- a/packages/draggable/src/styled/draggable-list/StyledItem.ts +++ b/packages/draggable/src/styled/draggable-list/StyledItem.ts @@ -6,7 +6,7 @@ */ import styled, { DefaultTheme, ThemeProps, css } from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'draggable_list.item'; @@ -33,5 +33,5 @@ export const StyledItem = styled.li.attrs({ ${sizeStyles} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/draggable/src/styled/draggable/StyledContent.ts b/packages/draggable/src/styled/draggable/StyledContent.ts index 28266f8466..d77618608b 100644 --- a/packages/draggable/src/styled/draggable/StyledContent.ts +++ b/packages/draggable/src/styled/draggable/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 = 'draggable.content'; @@ -18,5 +18,5 @@ export const StyledContent = styled.div.attrs({ word-wrap: break-word; overflow-wrap: anywhere; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/draggable/src/styled/draggable/StyledDraggable.ts b/packages/draggable/src/styled/draggable/StyledDraggable.ts index 1053b927d3..e567c3daf5 100644 --- a/packages/draggable/src/styled/draggable/StyledDraggable.ts +++ b/packages/draggable/src/styled/draggable/StyledDraggable.ts @@ -7,7 +7,7 @@ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; import { - retrieveComponentStyles, + componentStyles, getColor, IGardenTheme, getLineHeight, @@ -147,5 +147,5 @@ export const StyledDraggable = styled.div.attrs({ visibility: ${p => p.$isPlaceholder && !p.$isDisabled && 'hidden'}; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/draggable/src/styled/draggable/StyledGrip.ts b/packages/draggable/src/styled/draggable/StyledGrip.ts index 1c70c927b0..a2c7376cba 100644 --- a/packages/draggable/src/styled/draggable/StyledGrip.ts +++ b/packages/draggable/src/styled/draggable/StyledGrip.ts @@ -6,7 +6,7 @@ */ import styled, { DefaultTheme, ThemeProps, css } from 'styled-components'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'draggable.grip'; @@ -30,5 +30,5 @@ export const StyledGrip = styled.div.attrs({ ${sizeStyles} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/draggable/src/styled/dropzone/StyledDropzone.ts b/packages/draggable/src/styled/dropzone/StyledDropzone.ts index b5da6c6d63..ade424f0b0 100644 --- a/packages/draggable/src/styled/dropzone/StyledDropzone.ts +++ b/packages/draggable/src/styled/dropzone/StyledDropzone.ts @@ -7,7 +7,7 @@ import styled, { DefaultTheme, ThemeProps, css } from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'dropzone'; @@ -107,5 +107,5 @@ export const StyledDropzone = styled.div.attrs({ ${sizeStyles} ${colorStyles} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/draggable/src/styled/dropzone/StyledIcon.ts b/packages/draggable/src/styled/dropzone/StyledIcon.ts index 93a8a2be50..f58cbce3c3 100644 --- a/packages/draggable/src/styled/dropzone/StyledIcon.ts +++ b/packages/draggable/src/styled/dropzone/StyledIcon.ts @@ -6,7 +6,7 @@ */ import styled, { DefaultTheme, ThemeProps, css } from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'dropzone.icon'; @@ -45,5 +45,5 @@ export const StyledIcon = styled.div.attrs({ ${p => p.$hasMessage && sizeStyles(p)} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/draggable/src/styled/dropzone/StyledMessage.ts b/packages/draggable/src/styled/dropzone/StyledMessage.ts index 7cb92fc950..4503fc8213 100644 --- a/packages/draggable/src/styled/dropzone/StyledMessage.ts +++ b/packages/draggable/src/styled/dropzone/StyledMessage.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles, getLineHeight } from '@zendeskgarden/react-theming'; +import { componentStyles, getLineHeight } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'dropzone.message'; @@ -20,5 +20,5 @@ export const StyledMessage = styled.p.attrs({ font-size: ${p => p.theme.fontSizes.md}; font-weight: ${p => p.theme.fontWeights.regular}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns.legacy/src/styled/items/StyledAddItem.ts b/packages/dropdowns.legacy/src/styled/items/StyledAddItem.ts index 6e1c3d92c6..3170a57c96 100644 --- a/packages/dropdowns.legacy/src/styled/items/StyledAddItem.ts +++ b/packages/dropdowns.legacy/src/styled/items/StyledAddItem.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 { StyledItem } from './StyledItem'; @@ -22,5 +22,5 @@ export const StyledAddItem = styled(StyledItem).attrs({ color: ${props => !props.disabled && getColor({ theme: props.theme, variable: 'foreground.primary' })}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns.legacy/src/styled/items/StyledItem.ts b/packages/dropdowns.legacy/src/styled/items/StyledItem.ts index a7949ef9d5..63d87335e4 100644 --- a/packages/dropdowns.legacy/src/styled/items/StyledItem.ts +++ b/packages/dropdowns.legacy/src/styled/items/StyledItem.ts @@ -6,7 +6,7 @@ */ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'dropdowns.item'; @@ -97,5 +97,5 @@ export const StyledItem = styled.li.attrs(props => ({ ${props => getColorStyles(props)}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns.legacy/src/styled/items/StyledItemMeta.ts b/packages/dropdowns.legacy/src/styled/items/StyledItemMeta.ts index e6b7904327..b5ce0eec80 100644 --- a/packages/dropdowns.legacy/src/styled/items/StyledItemMeta.ts +++ b/packages/dropdowns.legacy/src/styled/items/StyledItemMeta.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 = 'dropdowns.item_meta'; @@ -31,5 +31,5 @@ export const StyledItemMeta = styled.span.attrs({ })}; font-size: ${props => props.theme.fontSizes.sm}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns.legacy/src/styled/items/StyledNextIcon.tsx b/packages/dropdowns.legacy/src/styled/items/StyledNextIcon.tsx index 5e637696fd..c7cb45f50c 100644 --- a/packages/dropdowns.legacy/src/styled/items/StyledNextIcon.tsx +++ b/packages/dropdowns.legacy/src/styled/items/StyledNextIcon.tsx @@ -8,7 +8,7 @@ import React, { HTMLAttributes } from 'react'; import styled from 'styled-components'; import NextIconSvg from '@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'dropdowns.next_item_icon'; @@ -31,5 +31,5 @@ export const StyledNextIcon = styled(NextIconComponent)` ? 'inherit' : getColor({ theme: props.theme, variable: 'foreground.disabled' })}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns.legacy/src/styled/items/StyledNextItem.ts b/packages/dropdowns.legacy/src/styled/items/StyledNextItem.ts index a8a745bea3..c8b1dfeb22 100644 --- a/packages/dropdowns.legacy/src/styled/items/StyledNextItem.ts +++ b/packages/dropdowns.legacy/src/styled/items/StyledNextItem.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledItem } from './StyledItem'; import { StyledItemIcon } from './StyledItemIcon'; @@ -25,5 +25,5 @@ export const StyledNextItem = styled(StyledItem).attrs({ left: ${props => (props.theme.rtl ? `${props.theme.space.base * 3}px` : 'auto')}; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns.legacy/src/styled/items/StyledPreviousIcon.tsx b/packages/dropdowns.legacy/src/styled/items/StyledPreviousIcon.tsx index d9275038cd..d9c23d46fc 100644 --- a/packages/dropdowns.legacy/src/styled/items/StyledPreviousIcon.tsx +++ b/packages/dropdowns.legacy/src/styled/items/StyledPreviousIcon.tsx @@ -8,7 +8,7 @@ import React, { HTMLAttributes } from 'react'; import styled from 'styled-components'; import PreviousIconSvg from '@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'dropdowns.previous_item_icon'; @@ -31,5 +31,5 @@ export const StyledPreviousIcon = styled(PreviousIconComponent) retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns.legacy/src/styled/items/StyledPreviousItem.ts b/packages/dropdowns.legacy/src/styled/items/StyledPreviousItem.ts index b1eae6b58b..e4822b3528 100644 --- a/packages/dropdowns.legacy/src/styled/items/StyledPreviousItem.ts +++ b/packages/dropdowns.legacy/src/styled/items/StyledPreviousItem.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledItem } from './StyledItem'; @@ -21,5 +21,5 @@ export const StyledPreviousItem = styled(StyledItem).attrs({ })` font-weight: ${props => props.theme.fontWeights.semibold}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns.legacy/src/styled/items/header/StyledHeaderIcon.ts b/packages/dropdowns.legacy/src/styled/items/header/StyledHeaderIcon.ts index d676d47517..afaf06397b 100644 --- a/packages/dropdowns.legacy/src/styled/items/header/StyledHeaderIcon.ts +++ b/packages/dropdowns.legacy/src/styled/items/header/StyledHeaderIcon.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 = 'dropdowns.header_icon'; @@ -28,5 +28,5 @@ export const StyledHeaderIcon = styled.div.attrs({ height: ${props => props.theme.iconSizes.md}; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns.legacy/src/styled/items/header/StyledHeaderItem.ts b/packages/dropdowns.legacy/src/styled/items/header/StyledHeaderItem.ts index 71772b14e2..c6a784bcc8 100644 --- a/packages/dropdowns.legacy/src/styled/items/header/StyledHeaderItem.ts +++ b/packages/dropdowns.legacy/src/styled/items/header/StyledHeaderItem.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 { StyledItem } from '../StyledItem'; @@ -38,5 +38,5 @@ export const StyledHeaderItem = styled(StyledItem).attrs padding-left: ${props => getHorizontalPadding(props)}; font-weight: ${props => props.theme.fontWeights.semibold}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns.legacy/src/styled/items/media/StyledMediaBody.ts b/packages/dropdowns.legacy/src/styled/items/media/StyledMediaBody.ts index e066df5f34..3e00017f49 100644 --- a/packages/dropdowns.legacy/src/styled/items/media/StyledMediaBody.ts +++ b/packages/dropdowns.legacy/src/styled/items/media/StyledMediaBody.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 = 'dropdowns.media_body'; @@ -26,5 +26,5 @@ export const StyledMediaBody = styled.div.attrs({ padding-${props => (props.theme.rtl ? 'right' : 'left')}: ${props => props.theme.space.base * 2}px; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns.legacy/src/styled/items/media/StyledMediaFigure.ts b/packages/dropdowns.legacy/src/styled/items/media/StyledMediaFigure.ts index e5d1fb0e3e..4de7b221cf 100644 --- a/packages/dropdowns.legacy/src/styled/items/media/StyledMediaFigure.ts +++ b/packages/dropdowns.legacy/src/styled/items/media/StyledMediaFigure.ts @@ -7,7 +7,7 @@ import React, { Children, HTMLAttributes, PropsWithChildren } from 'react'; import styled, { ThemeProps, DefaultTheme } from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'dropdowns.media_figure'; @@ -39,5 +39,5 @@ export const StyledMediaFigure = styled( width: ${props => props.theme.iconSizes.md}; height: ${props => props.theme.iconSizes.md}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns.legacy/src/styled/items/media/StyledMediaItem.ts b/packages/dropdowns.legacy/src/styled/items/media/StyledMediaItem.ts index 1923b2ea33..fcd51c6f35 100644 --- a/packages/dropdowns.legacy/src/styled/items/media/StyledMediaItem.ts +++ b/packages/dropdowns.legacy/src/styled/items/media/StyledMediaItem.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledItem } from '../StyledItem'; const COMPONENT_ID = 'dropdowns.media_item'; @@ -22,5 +22,5 @@ export const StyledMediaItem = styled(StyledItem).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns.legacy/src/styled/menu/StyledMenu.ts b/packages/dropdowns.legacy/src/styled/menu/StyledMenu.ts index 67c73aec49..0643edeaf4 100644 --- a/packages/dropdowns.legacy/src/styled/menu/StyledMenu.ts +++ b/packages/dropdowns.legacy/src/styled/menu/StyledMenu.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles, arrowStyles } from '@zendeskgarden/react-theming'; +import { componentStyles, arrowStyles } from '@zendeskgarden/react-theming'; import { PopperPlacement } from '../../types'; import { getArrowPosition } from '../../utils/garden-placements'; @@ -42,5 +42,5 @@ export const StyledMenu = styled.ul.attrs(props => ({ animationModifier: props.$isAnimated ? '.is-animated' : undefined })}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns.legacy/src/styled/menu/StyledMenuWrapper.ts b/packages/dropdowns.legacy/src/styled/menu/StyledMenuWrapper.ts index ea2201e5ce..597102bb82 100644 --- a/packages/dropdowns.legacy/src/styled/menu/StyledMenuWrapper.ts +++ b/packages/dropdowns.legacy/src/styled/menu/StyledMenuWrapper.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { menuStyles, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { menuStyles, componentStyles } from '@zendeskgarden/react-theming'; import { PopperPlacement } from '../../types'; import { getMenuPosition } from '../../utils/garden-placements'; @@ -34,5 +34,5 @@ export const StyledMenuWrapper = styled.div.attrs(props animationModifier: props.$isAnimated ? '.is-animated' : undefined })}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns.legacy/src/styled/menu/StyledSeparator.ts b/packages/dropdowns.legacy/src/styled/menu/StyledSeparator.ts index 342b785eb7..4d07d6c32f 100644 --- a/packages/dropdowns.legacy/src/styled/menu/StyledSeparator.ts +++ b/packages/dropdowns.legacy/src/styled/menu/StyledSeparator.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { getColor, componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'dropdowns.separator'; @@ -23,5 +23,5 @@ export const StyledSeparator = styled.li.attrs({ border-bottom: ${props => `${props.theme.borders.sm} ${getColor({ theme: props.theme, variable: 'border.subtle' })}`}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectInput.ts b/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectInput.ts index fe56bdb0e2..f538baecec 100644 --- a/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectInput.ts +++ b/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectInput.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'; import { StyledInput } from '../select/StyledInput'; const COMPONENT_ID = 'dropdowns.multiselect_input'; @@ -50,5 +50,5 @@ export const StyledMultiselectInput = styled(StyledInput).attrs({ ${props => visibleStyling(props)}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectItemWrapper.ts b/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectItemWrapper.ts index aacbb94675..13e024aa2c 100644 --- a/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectItemWrapper.ts +++ b/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectItemWrapper.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 = 'dropdowns.multiselect_item_wrapper'; @@ -19,5 +19,5 @@ export const StyledMultiselectItemWrapper = styled.div.attrs({ margin: ${props => props.theme.space.base / 2}px; max-width: 100%; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectItemsContainer.ts b/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectItemsContainer.ts index eb56c9c68b..892b8cc370 100644 --- a/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectItemsContainer.ts +++ b/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectItemsContainer.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 = 'dropdowns.multiselect_items_container'; @@ -55,5 +55,5 @@ export const StyledMultiselectItemsContainer = styled.div.attrs({ ${props => sizeStyles(props)}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectMoreAnchor.ts b/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectMoreAnchor.ts index c0ebf390f8..a29b11a70b 100644 --- a/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectMoreAnchor.ts +++ b/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectMoreAnchor.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 = 'dropdowns.multiselect_more_anchor'; @@ -38,5 +38,5 @@ export const StyledMultiselectMoreAnchor = styled.div.attrs({ text-decoration: ${props => !props.$isDisabled && 'underline'}; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns.legacy/src/styled/select/StyledFauxInput.ts b/packages/dropdowns.legacy/src/styled/select/StyledFauxInput.ts index 5c597d0a19..d1c47cfa7f 100644 --- a/packages/dropdowns.legacy/src/styled/select/StyledFauxInput.ts +++ b/packages/dropdowns.legacy/src/styled/select/StyledFauxInput.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { FauxInput } from '@zendeskgarden/react-forms'; const COMPONENT_ID = 'dropdowns.faux_input'; @@ -20,5 +20,5 @@ export const StyledFauxInput = styled(FauxInput).attrs(props => ({ cursor: ${props => !props.disabled && 'pointer'}; min-width: ${props => props.theme.space.base * (props.isCompact ? 25 : 36)}px; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns.legacy/src/styled/select/StyledInput.ts b/packages/dropdowns.legacy/src/styled/select/StyledInput.ts index fa637d1ee4..556731c6c1 100644 --- a/packages/dropdowns.legacy/src/styled/select/StyledInput.ts +++ b/packages/dropdowns.legacy/src/styled/select/StyledInput.ts @@ -7,7 +7,7 @@ import styled, { css } from 'styled-components'; import { Input } from '@zendeskgarden/react-forms'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'dropdowns.input'; @@ -33,5 +33,5 @@ export const StyledInput = styled(Input).attrs({ })` ${props => props.$isHidden && hiddenStyling}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns.legacy/src/styled/select/StyledSelect.ts b/packages/dropdowns.legacy/src/styled/select/StyledSelect.ts index 2329abd0eb..2727867f08 100644 --- a/packages/dropdowns.legacy/src/styled/select/StyledSelect.ts +++ b/packages/dropdowns.legacy/src/styled/select/StyledSelect.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 = 'dropdowns.select'; @@ -19,5 +19,5 @@ export const StyledSelect = styled.div.attrs({ text-overflow: ellipsis; white-space: nowrap; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/combobox/StyledCombobox.ts b/packages/dropdowns/src/views/combobox/StyledCombobox.ts index a7ec68a4c6..6104be5180 100644 --- a/packages/dropdowns/src/views/combobox/StyledCombobox.ts +++ b/packages/dropdowns/src/views/combobox/StyledCombobox.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledLabel } from './StyledLabel'; import { StyledHint } from './StyledHint'; import { StyledMessage } from './StyledMessage'; @@ -40,5 +40,5 @@ export const StyledCombobox = styled.div.attrs({ })` ${sizeStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/combobox/StyledContainer.ts b/packages/dropdowns/src/views/combobox/StyledContainer.ts index 444555d50c..ad31205212 100644 --- a/packages/dropdowns/src/views/combobox/StyledContainer.ts +++ b/packages/dropdowns/src/views/combobox/StyledContainer.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 = 'dropdowns.combobox.container'; @@ -16,5 +16,5 @@ export const StyledContainer = styled.div.attrs({ })` display: flex; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/combobox/StyledField.ts b/packages/dropdowns/src/views/combobox/StyledField.ts index b557c026f1..46f257b01e 100644 --- a/packages/dropdowns/src/views/combobox/StyledField.ts +++ b/packages/dropdowns/src/views/combobox/StyledField.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 = 'dropdowns.combobox.field'; @@ -21,5 +21,5 @@ export const StyledField = styled.div.attrs({ direction: ${props => (props.theme.rtl ? 'rtl' : 'ltr')}; text-align: start; /* [1] */ - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/combobox/StyledFloatingListbox.ts b/packages/dropdowns/src/views/combobox/StyledFloatingListbox.ts index 32003103a3..11728091dd 100644 --- a/packages/dropdowns/src/views/combobox/StyledFloatingListbox.ts +++ b/packages/dropdowns/src/views/combobox/StyledFloatingListbox.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme } from 'styled-components'; -import { retrieveComponentStyles, MenuPosition, menuStyles } from '@zendeskgarden/react-theming'; +import { componentStyles, MenuPosition, menuStyles } from '@zendeskgarden/react-theming'; import { IListboxProps } from '../../types'; const COMPONENT_ID = 'dropdowns.combobox.floating'; @@ -35,5 +35,5 @@ export const StyledFloatingListbox = styled.div.attrs({ zIndex: props.$zIndex })}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/combobox/StyledHint.ts b/packages/dropdowns/src/views/combobox/StyledHint.ts index d2c8021f74..5a5c483911 100644 --- a/packages/dropdowns/src/views/combobox/StyledHint.ts +++ b/packages/dropdowns/src/views/combobox/StyledHint.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { Field } from '@zendeskgarden/react-forms'; const COMPONENT_ID = 'dropdowns.combobox.hint'; @@ -15,5 +15,5 @@ export const StyledHint = styled(Field.Hint).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/combobox/StyledInput.ts b/packages/dropdowns/src/views/combobox/StyledInput.ts index 4eeacff38f..0fc6917d57 100644 --- a/packages/dropdowns/src/views/combobox/StyledInput.ts +++ b/packages/dropdowns/src/views/combobox/StyledInput.ts @@ -7,7 +7,7 @@ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; import { hideVisually, math } from 'polished'; -import { retrieveComponentStyles, getLineHeight, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getLineHeight, getColor } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'dropdowns.combobox.input'; @@ -87,5 +87,5 @@ export const StyledInput = styled.input.attrs({ display: none; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/combobox/StyledInputGroup.ts b/packages/dropdowns/src/views/combobox/StyledInputGroup.ts index 1e2737c07d..7be2c92ad8 100644 --- a/packages/dropdowns/src/views/combobox/StyledInputGroup.ts +++ b/packages/dropdowns/src/views/combobox/StyledInputGroup.ts @@ -6,7 +6,7 @@ */ import styled, { css, DefaultTheme, ThemeProps } from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'dropdowns.combobox.input_group'; @@ -33,5 +33,5 @@ export const StyledInputGroup = styled.div.attrs({ ${sizeStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/combobox/StyledInputIcon.ts b/packages/dropdowns/src/views/combobox/StyledInputIcon.ts index cb38bdf7a5..dbaace6edf 100644 --- a/packages/dropdowns/src/views/combobox/StyledInputIcon.ts +++ b/packages/dropdowns/src/views/combobox/StyledInputIcon.ts @@ -7,7 +7,7 @@ import styled, { ThemeProps, DefaultTheme, css, DataAttributes } from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles, StyledBaseIcon, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, StyledBaseIcon, getColor } from '@zendeskgarden/react-theming'; import { getHeight as getInputHeight } from './StyledInput'; import { StyledTrigger } from './StyledTrigger'; @@ -78,5 +78,5 @@ export const StyledInputIcon = styled(StyledBaseIcon).attrs({ ${colorStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/combobox/StyledLabel.ts b/packages/dropdowns/src/views/combobox/StyledLabel.ts index 92c71f70f9..5ab077cd7b 100644 --- a/packages/dropdowns/src/views/combobox/StyledLabel.ts +++ b/packages/dropdowns/src/views/combobox/StyledLabel.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { Field } from '@zendeskgarden/react-forms'; const COMPONENT_ID = 'dropdowns.combobox.label'; @@ -17,5 +17,5 @@ export const StyledLabel = styled(Field.Label).attrs({ })` vertical-align: revert; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/combobox/StyledListboxSeparator.ts b/packages/dropdowns/src/views/combobox/StyledListboxSeparator.ts index 73d91f4884..fd405341bd 100644 --- a/packages/dropdowns/src/views/combobox/StyledListboxSeparator.ts +++ b/packages/dropdowns/src/views/combobox/StyledListboxSeparator.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'dropdowns.combobox.separator'; @@ -38,5 +38,5 @@ export const StyledListboxSeparator = styled.li.attrs({ ${colorStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/combobox/StyledMessage.ts b/packages/dropdowns/src/views/combobox/StyledMessage.ts index f07899136c..5c24e96367 100644 --- a/packages/dropdowns/src/views/combobox/StyledMessage.ts +++ b/packages/dropdowns/src/views/combobox/StyledMessage.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { Field } from '@zendeskgarden/react-forms'; const COMPONENT_ID = 'dropdowns.combobox.message'; @@ -15,5 +15,5 @@ export const StyledMessage = styled(Field.Message).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/combobox/StyledOptGroup.ts b/packages/dropdowns/src/views/combobox/StyledOptGroup.ts index d6c6feef2b..64d20b9d4e 100644 --- a/packages/dropdowns/src/views/combobox/StyledOptGroup.ts +++ b/packages/dropdowns/src/views/combobox/StyledOptGroup.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme } from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'dropdowns.combobox.optgroup'; @@ -22,5 +22,5 @@ export const StyledOptGroup = styled.ul.attrs({ padding: 0; list-style-type: none; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/combobox/StyledOption.ts b/packages/dropdowns/src/views/combobox/StyledOption.ts index 9ec8e598c3..dad9ceb233 100644 --- a/packages/dropdowns/src/views/combobox/StyledOption.ts +++ b/packages/dropdowns/src/views/combobox/StyledOption.ts @@ -7,7 +7,7 @@ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; import { hideVisually, math } from 'polished'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; import { OptionType } from '../../types'; const COMPONENT_ID = 'dropdowns.combobox.option'; @@ -107,5 +107,5 @@ export const StyledOption = styled.li.attrs({ ${hideVisually()}; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/combobox/StyledOptionContent.ts b/packages/dropdowns/src/views/combobox/StyledOptionContent.ts index 06526c57bc..df33cef7be 100644 --- a/packages/dropdowns/src/views/combobox/StyledOptionContent.ts +++ b/packages/dropdowns/src/views/combobox/StyledOptionContent.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 = 'dropdowns.combobox.option.content'; @@ -18,5 +18,5 @@ export const StyledOptionContent = styled.div.attrs({ flex-direction: column; flex-grow: 1; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/combobox/StyledOptionIcon.ts b/packages/dropdowns/src/views/combobox/StyledOptionIcon.ts index 2870384b44..ad840b1a91 100644 --- a/packages/dropdowns/src/views/combobox/StyledOptionIcon.ts +++ b/packages/dropdowns/src/views/combobox/StyledOptionIcon.ts @@ -7,7 +7,7 @@ import styled, { ThemeProps, DefaultTheme, css, DataAttributes } from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles, StyledBaseIcon, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, StyledBaseIcon, getColor } from '@zendeskgarden/react-theming'; import { OptionType } from '../../types'; const COMPONENT_ID = 'dropdowns.combobox.option.icon'; @@ -60,5 +60,5 @@ export const StyledOptionIcon = styled(StyledBaseIcon).attrs({ ${colorStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/combobox/StyledOptionMeta.ts b/packages/dropdowns/src/views/combobox/StyledOptionMeta.ts index c95ee3ab16..f39f84e44f 100644 --- a/packages/dropdowns/src/views/combobox/StyledOptionMeta.ts +++ b/packages/dropdowns/src/views/combobox/StyledOptionMeta.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'dropdowns.combobox.option.meta'; @@ -44,5 +44,5 @@ export const StyledOptionMeta = styled.div.attrs({ ${colorStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/combobox/StyledOptionSelectionIcon.ts b/packages/dropdowns/src/views/combobox/StyledOptionSelectionIcon.ts index 4c064e0e88..534915f331 100644 --- a/packages/dropdowns/src/views/combobox/StyledOptionSelectionIcon.ts +++ b/packages/dropdowns/src/views/combobox/StyledOptionSelectionIcon.ts @@ -7,7 +7,7 @@ import styled, { css, DataAttributes, DefaultTheme, ThemeProps } from 'styled-components'; import { math } from 'polished'; -import { getColor, retrieveComponentStyles, StyledBaseIcon } from '@zendeskgarden/react-theming'; +import { getColor, componentStyles, StyledBaseIcon } from '@zendeskgarden/react-theming'; import { getMinHeight as getOptionMinHeight } from './StyledOption'; const COMPONENT_ID = 'dropdowns.combobox.option.selection_icon'; @@ -48,5 +48,5 @@ export const StyledOptionSelectionIcon = styled(StyledBaseIcon).attrs retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/combobox/StyledOptionTypeIcon.ts b/packages/dropdowns/src/views/combobox/StyledOptionTypeIcon.ts index 55dca3ada1..065d716c88 100644 --- a/packages/dropdowns/src/views/combobox/StyledOptionTypeIcon.ts +++ b/packages/dropdowns/src/views/combobox/StyledOptionTypeIcon.ts @@ -7,7 +7,7 @@ import styled, { ThemeProps, DefaultTheme, css, DataAttributes } from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles, StyledBaseIcon, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, StyledBaseIcon, getColor } from '@zendeskgarden/react-theming'; import { StyledOption, getMinHeight as getOptionMinHeight } from './StyledOption'; import { OptionType } from '../../types'; @@ -77,5 +77,5 @@ export const StyledOptionTypeIcon = styled(StyledBaseIcon).attrs ${colorStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/combobox/StyledTag.ts b/packages/dropdowns/src/views/combobox/StyledTag.ts index 387997fb03..1228eaf274 100644 --- a/packages/dropdowns/src/views/combobox/StyledTag.ts +++ b/packages/dropdowns/src/views/combobox/StyledTag.ts @@ -7,7 +7,7 @@ import styled from 'styled-components'; import { hideVisually } from 'polished'; -import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { getColor, componentStyles } from '@zendeskgarden/react-theming'; import { Tag } from '@zendeskgarden/react-tags'; const COMPONENT_ID = 'dropdowns.combobox.tag'; @@ -26,5 +26,5 @@ export const StyledTag = styled(Tag).attrs({ ${hideVisually()} } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/combobox/StyledTagsButton.ts b/packages/dropdowns/src/views/combobox/StyledTagsButton.ts index a55bd081bf..b6e98a8277 100644 --- a/packages/dropdowns/src/views/combobox/StyledTagsButton.ts +++ b/packages/dropdowns/src/views/combobox/StyledTagsButton.ts @@ -6,7 +6,7 @@ */ import styled, { DefaultTheme, ThemeProps, css } from 'styled-components'; -import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { getColor, componentStyles } from '@zendeskgarden/react-theming'; import { StyledValue } from './StyledValue'; const COMPONENT_ID = 'dropdowns.combobox.tags_button'; @@ -56,5 +56,5 @@ export const StyledTagsButton = styled(StyledValue as 'button').attrs({ text-decoration: none; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/combobox/StyledTrigger.ts b/packages/dropdowns/src/views/combobox/StyledTrigger.ts index 373bb6454e..c63e39c763 100644 --- a/packages/dropdowns/src/views/combobox/StyledTrigger.ts +++ b/packages/dropdowns/src/views/combobox/StyledTrigger.ts @@ -7,7 +7,7 @@ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles, focusStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, focusStyles, getColor } from '@zendeskgarden/react-theming'; import { Validation } from '../../types'; import { getHeight as getInputHeight } from './StyledInput'; @@ -161,5 +161,5 @@ export const StyledTrigger = styled.div.attrs({ cursor: default; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/combobox/StyledValue.ts b/packages/dropdowns/src/views/combobox/StyledValue.ts index 3a7858a0df..7134c28f08 100644 --- a/packages/dropdowns/src/views/combobox/StyledValue.ts +++ b/packages/dropdowns/src/views/combobox/StyledValue.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; import { sizeStyles } from './StyledInput'; const COMPONENT_ID = 'dropdowns.combobox.value'; @@ -55,5 +55,5 @@ export const StyledValue = styled.div.attrs({ display: none; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/menu/StyledFloatingMenu.ts b/packages/dropdowns/src/views/menu/StyledFloatingMenu.ts index f36c7a86d8..f47f7afeea 100644 --- a/packages/dropdowns/src/views/menu/StyledFloatingMenu.ts +++ b/packages/dropdowns/src/views/menu/StyledFloatingMenu.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledFloatingListbox } from '../combobox/StyledFloatingListbox'; const COMPONENT_ID = 'dropdowns.menu.floating'; @@ -15,5 +15,5 @@ export const StyledFloatingMenu = styled(StyledFloatingListbox).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/menu/StyledItem.ts b/packages/dropdowns/src/views/menu/StyledItem.ts index 110c15f104..ddac8a8c91 100644 --- a/packages/dropdowns/src/views/menu/StyledItem.ts +++ b/packages/dropdowns/src/views/menu/StyledItem.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledOption } from '../combobox/StyledOption'; const COMPONENT_ID = 'dropdowns.menu.item'; @@ -15,5 +15,5 @@ export const StyledItem = styled(StyledOption).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/menu/StyledItemContent.ts b/packages/dropdowns/src/views/menu/StyledItemContent.ts index 60964c38f2..fc7f32cf70 100644 --- a/packages/dropdowns/src/views/menu/StyledItemContent.ts +++ b/packages/dropdowns/src/views/menu/StyledItemContent.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledOptionContent } from '../combobox/StyledOptionContent'; const COMPONENT_ID = 'dropdowns.menu.item.content'; @@ -15,5 +15,5 @@ export const StyledItemContent = styled(StyledOptionContent).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/menu/StyledItemGroup.ts b/packages/dropdowns/src/views/menu/StyledItemGroup.ts index e55c821355..83575c3227 100644 --- a/packages/dropdowns/src/views/menu/StyledItemGroup.ts +++ b/packages/dropdowns/src/views/menu/StyledItemGroup.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledOptGroup } from '../combobox/StyledOptGroup'; const COMPONENT_ID = 'dropdowns.menu.item_group'; @@ -15,5 +15,5 @@ export const StyledItemGroup = styled(StyledOptGroup).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/menu/StyledItemIcon.ts b/packages/dropdowns/src/views/menu/StyledItemIcon.ts index 997dc00dbc..e4968e3fec 100644 --- a/packages/dropdowns/src/views/menu/StyledItemIcon.ts +++ b/packages/dropdowns/src/views/menu/StyledItemIcon.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledOptionIcon } from '../combobox/StyledOptionIcon'; const COMPONENT_ID = 'dropdowns.menu.item.icon'; @@ -15,5 +15,5 @@ export const StyledItemIcon = styled(StyledOptionIcon).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/menu/StyledItemMeta.ts b/packages/dropdowns/src/views/menu/StyledItemMeta.ts index fe6d0ca3ce..aa290958df 100644 --- a/packages/dropdowns/src/views/menu/StyledItemMeta.ts +++ b/packages/dropdowns/src/views/menu/StyledItemMeta.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledOptionMeta } from '../combobox/StyledOptionMeta'; const COMPONENT_ID = 'dropdowns.menu.item.meta'; @@ -15,5 +15,5 @@ export const StyledItemMeta = styled(StyledOptionMeta).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/menu/StyledItemTypeIcon.ts b/packages/dropdowns/src/views/menu/StyledItemTypeIcon.ts index 9e1a616a49..29f3890cd1 100644 --- a/packages/dropdowns/src/views/menu/StyledItemTypeIcon.ts +++ b/packages/dropdowns/src/views/menu/StyledItemTypeIcon.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledOptionTypeIcon } from '../combobox/StyledOptionTypeIcon'; import { StyledItem } from './StyledItem'; @@ -20,5 +20,5 @@ export const StyledItemTypeIcon = styled(StyledOptionTypeIcon).attrs({ opacity: 1; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/menu/StyledMenu.ts b/packages/dropdowns/src/views/menu/StyledMenu.ts index b59e01df8d..ac11541339 100644 --- a/packages/dropdowns/src/views/menu/StyledMenu.ts +++ b/packages/dropdowns/src/views/menu/StyledMenu.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles, arrowStyles, ArrowPosition } from '@zendeskgarden/react-theming'; +import { componentStyles, arrowStyles, ArrowPosition } from '@zendeskgarden/react-theming'; import { IStyledListboxProps, StyledListbox } from '../combobox/StyledListbox'; const COMPONENT_ID = 'dropdowns.menu'; @@ -33,5 +33,5 @@ export const StyledMenu = styled(StyledListbox).attrs({ animationModifier: '[data-garden-animate-arrow="true"]' })}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/dropdowns/src/views/menu/StyledSeparator.ts b/packages/dropdowns/src/views/menu/StyledSeparator.ts index 9c4f99384f..486ee1a6a1 100644 --- a/packages/dropdowns/src/views/menu/StyledSeparator.ts +++ b/packages/dropdowns/src/views/menu/StyledSeparator.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledListboxSeparator } from '../combobox/StyledListboxSeparator'; const COMPONENT_ID = 'dropdowns.menu.separator'; @@ -15,5 +15,5 @@ export const StyledSeparator = styled(StyledListboxSeparator).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/checkbox/StyledCheckHint.ts b/packages/forms/src/styled/checkbox/StyledCheckHint.ts index 8411ae5a2d..876633bf09 100644 --- a/packages/forms/src/styled/checkbox/StyledCheckHint.ts +++ b/packages/forms/src/styled/checkbox/StyledCheckHint.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledRadioHint } from '../radio/StyledRadioHint'; const COMPONENT_ID = 'forms.checkbox_hint'; @@ -15,5 +15,5 @@ export const StyledCheckHint = styled(StyledRadioHint).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/checkbox/StyledCheckInput.ts b/packages/forms/src/styled/checkbox/StyledCheckInput.ts index 289e26629e..e46e0528d8 100644 --- a/packages/forms/src/styled/checkbox/StyledCheckInput.ts +++ b/packages/forms/src/styled/checkbox/StyledCheckInput.ts @@ -6,7 +6,7 @@ */ import styled, { css, DefaultTheme, ThemeProps } from 'styled-components'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; import { StyledRadioInput } from '../radio/StyledRadioInput'; import { StyledCheckLabel } from './StyledCheckLabel'; @@ -66,5 +66,5 @@ export const StyledCheckInput = styled(StyledRadioInput).attrs({ ${colorStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/checkbox/StyledCheckLabel.ts b/packages/forms/src/styled/checkbox/StyledCheckLabel.ts index 66889a6db1..dafdcbd8fe 100644 --- a/packages/forms/src/styled/checkbox/StyledCheckLabel.ts +++ b/packages/forms/src/styled/checkbox/StyledCheckLabel.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledRadioLabel } from '../radio/StyledRadioLabel'; const COMPONENT_ID = 'forms.checkbox_label'; @@ -15,5 +15,5 @@ export const StyledCheckLabel = styled(StyledRadioLabel).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/checkbox/StyledCheckMessage.ts b/packages/forms/src/styled/checkbox/StyledCheckMessage.ts index 1f4c3c1e95..01b4066d4a 100644 --- a/packages/forms/src/styled/checkbox/StyledCheckMessage.ts +++ b/packages/forms/src/styled/checkbox/StyledCheckMessage.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledRadioMessage } from '../radio/StyledRadioMessage'; const COMPONENT_ID = 'forms.checkbox_message'; @@ -15,5 +15,5 @@ export const StyledCheckMessage = styled(StyledRadioMessage).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/checkbox/StyledCheckSvg.ts b/packages/forms/src/styled/checkbox/StyledCheckSvg.ts index 9234278f5d..f3ca892519 100644 --- a/packages/forms/src/styled/checkbox/StyledCheckSvg.ts +++ b/packages/forms/src/styled/checkbox/StyledCheckSvg.ts @@ -7,7 +7,7 @@ import styled from 'styled-components'; import CheckIcon from '@zendeskgarden/svg-icons/src/12/check-sm-fill.svg'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledCheckInput } from './StyledCheckInput'; import { StyledCheckLabel } from './StyledCheckLabel'; @@ -29,5 +29,5 @@ export const StyledCheckSvg = styled(CheckIcon).attrs({ opacity: 0; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/checkbox/StyledDashSvg.ts b/packages/forms/src/styled/checkbox/StyledDashSvg.ts index 8d68abe8ff..9d537893bf 100644 --- a/packages/forms/src/styled/checkbox/StyledDashSvg.ts +++ b/packages/forms/src/styled/checkbox/StyledDashSvg.ts @@ -7,7 +7,7 @@ import styled from 'styled-components'; import DashIcon from '@zendeskgarden/svg-icons/src/12/dash-fill.svg'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledCheckInput } from './StyledCheckInput'; import { StyledCheckLabel } from './StyledCheckLabel'; @@ -25,5 +25,5 @@ export const StyledDashSvg = styled(DashIcon).attrs({ opacity: 1; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/common/StyledField.ts b/packages/forms/src/styled/common/StyledField.ts index f911b9f6c7..e4135dda56 100644 --- a/packages/forms/src/styled/common/StyledField.ts +++ b/packages/forms/src/styled/common/StyledField.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 = 'forms.field'; @@ -26,5 +26,5 @@ export const StyledField = styled.div.attrs({ padding: 0; /* [2] */ font-size: 0; /* [3] */ - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/common/StyledFieldset.ts b/packages/forms/src/styled/common/StyledFieldset.ts index 6407b5b2d2..769c876007 100644 --- a/packages/forms/src/styled/common/StyledFieldset.ts +++ b/packages/forms/src/styled/common/StyledFieldset.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledField } from './StyledField'; const COMPONENT_ID = 'forms.fieldset'; @@ -23,5 +23,5 @@ export const StyledFieldset = styled(StyledField as 'fieldset').attrs({ ${StyledField} { margin-top: ${props => props.theme.space.base * (props.$isCompact ? 1 : 2)}px; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/common/StyledHint.ts b/packages/forms/src/styled/common/StyledHint.ts index 339c6f21ff..2a90584a21 100644 --- a/packages/forms/src/styled/common/StyledHint.ts +++ b/packages/forms/src/styled/common/StyledHint.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 = 'forms.input_hint'; @@ -21,5 +21,5 @@ export const StyledHint = styled.div.attrs(props => ({ color: ${props => getColor({ theme: props.theme, variable: 'foreground.subtle' })}; font-size: ${props => props.theme.fontSizes.md}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/common/StyledLabel.ts b/packages/forms/src/styled/common/StyledLabel.ts index 12906e01d9..223a17f003 100644 --- a/packages/forms/src/styled/common/StyledLabel.ts +++ b/packages/forms/src/styled/common/StyledLabel.ts @@ -7,7 +7,7 @@ import styled from 'styled-components'; import { hideVisually } from 'polished'; -import { retrieveComponentStyles, getLineHeight, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getLineHeight, getColor } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'forms.input_label'; @@ -40,5 +40,5 @@ export const StyledLabel = styled.label.attrs(props => ({ ${props => !props.$isRadio && hideVisually()}; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/common/StyledLegend.ts b/packages/forms/src/styled/common/StyledLegend.ts index 2485f0bfa2..cd274fe32d 100644 --- a/packages/forms/src/styled/common/StyledLegend.ts +++ b/packages/forms/src/styled/common/StyledLegend.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledLabel } from './StyledLabel'; const COMPONENT_ID = 'forms.fieldset_legend'; @@ -21,5 +21,5 @@ export const StyledLegend = styled(StyledLabel as 'legend').attrs({ })` padding: 0; /* [1] */ - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/common/StyledMessage.ts b/packages/forms/src/styled/common/StyledMessage.ts index b39068fbb8..2797929be7 100644 --- a/packages/forms/src/styled/common/StyledMessage.ts +++ b/packages/forms/src/styled/common/StyledMessage.ts @@ -7,7 +7,7 @@ import styled, { css, DefaultTheme, ThemeProps } from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles, getLineHeight, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getLineHeight, getColor } from '@zendeskgarden/react-theming'; import { Validation } from '../../types'; import { StyledMessageIcon } from './StyledMessageIcon'; import { StyledLabel } from './StyledLabel'; @@ -80,5 +80,5 @@ export const StyledMessage = styled.div.attrs(props => ({ display: block; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/common/StyledMessageIcon.ts b/packages/forms/src/styled/common/StyledMessageIcon.ts index 9e908a1ef0..e501301d1b 100644 --- a/packages/forms/src/styled/common/StyledMessageIcon.ts +++ b/packages/forms/src/styled/common/StyledMessageIcon.ts @@ -6,7 +6,7 @@ */ import styled, { DataAttributes } from 'styled-components'; -import { retrieveComponentStyles, StyledBaseIcon } from '@zendeskgarden/react-theming'; +import { componentStyles, StyledBaseIcon } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'forms.input_message_icon'; @@ -17,5 +17,5 @@ export const StyledMessageIcon = styled(StyledBaseIcon).attrs({ width: ${props => props.theme.iconSizes.md}; height: ${props => props.theme.iconSizes.md}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/file-list/StyledFile.ts b/packages/forms/src/styled/file-list/StyledFile.ts index ada3181809..6a0ab12785 100644 --- a/packages/forms/src/styled/file-list/StyledFile.ts +++ b/packages/forms/src/styled/file-list/StyledFile.ts @@ -7,7 +7,7 @@ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; import { - retrieveComponentStyles, + componentStyles, getLineHeight, focusStyles, getColor @@ -130,5 +130,5 @@ export const StyledFile = styled.div.attrs({ opacity: 0; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/file-list/StyledFileClose.ts b/packages/forms/src/styled/file-list/StyledFileClose.ts index a5c5cbe955..abb5a3fd00 100644 --- a/packages/forms/src/styled/file-list/StyledFileClose.ts +++ b/packages/forms/src/styled/file-list/StyledFileClose.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 = 'forms.file.close'; @@ -34,5 +34,5 @@ export const StyledFileClose = styled.button.attrs({ outline: none; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/file-list/StyledFileDelete.ts b/packages/forms/src/styled/file-list/StyledFileDelete.ts index edcd2069d7..9d87c44da9 100644 --- a/packages/forms/src/styled/file-list/StyledFileDelete.ts +++ b/packages/forms/src/styled/file-list/StyledFileDelete.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 { StyledFileClose } from './StyledFileClose'; const COMPONENT_ID = 'forms.file.delete'; @@ -17,5 +17,5 @@ export const StyledFileDelete = styled(StyledFileClose).attrs({ })` color: ${props => getColor({ theme: props.theme, variable: 'foreground.danger' })}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/file-list/StyledFileIcon.ts b/packages/forms/src/styled/file-list/StyledFileIcon.ts index 6f2a5d1415..156df38f0b 100644 --- a/packages/forms/src/styled/file-list/StyledFileIcon.ts +++ b/packages/forms/src/styled/file-list/StyledFileIcon.ts @@ -6,7 +6,7 @@ */ import styled, { DataAttributes, DefaultTheme, ThemeProps, css } from 'styled-components'; -import { StyledBaseIcon, getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { StyledBaseIcon, getColor, componentStyles } from '@zendeskgarden/react-theming'; import { FileValidation } from '../../types'; const COMPONENT_ID = 'forms.file.icon'; @@ -44,5 +44,5 @@ export const StyledFileIcon = styled(StyledBaseIcon).attrs({ ${colorStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/file-list/StyledFileList.ts b/packages/forms/src/styled/file-list/StyledFileList.ts index 742f4f660a..6d7556ab06 100644 --- a/packages/forms/src/styled/file-list/StyledFileList.ts +++ b/packages/forms/src/styled/file-list/StyledFileList.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 = 'forms.file_list'; @@ -21,5 +21,5 @@ export const StyledFileList = styled.ul.attrs({ padding: 0; /* [1] */ list-style: none; /* [1] */ - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/file-list/StyledFileListItem.ts b/packages/forms/src/styled/file-list/StyledFileListItem.ts index 404cce8760..a2c9c16965 100644 --- a/packages/forms/src/styled/file-list/StyledFileListItem.ts +++ b/packages/forms/src/styled/file-list/StyledFileListItem.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledFileList } from './StyledFileList'; import { StyledFileUpload } from '../file-upload/StyledFileUpload'; @@ -21,5 +21,5 @@ export const StyledFileListItem = styled.li.attrs({ margin-top: ${props => props.theme.space.base * 2}px; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/file-upload/StyledFileUpload.ts b/packages/forms/src/styled/file-upload/StyledFileUpload.ts index ce889493ef..2a93c83698 100644 --- a/packages/forms/src/styled/file-upload/StyledFileUpload.ts +++ b/packages/forms/src/styled/file-upload/StyledFileUpload.ts @@ -8,7 +8,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { math } from 'polished'; import { - retrieveComponentStyles, + componentStyles, getLineHeight, focusStyles, getColor @@ -126,5 +126,5 @@ export const StyledFileUpload = styled.div.attrs({ ${colorStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/input-group/StyledInputGroup.ts b/packages/forms/src/styled/input-group/StyledInputGroup.ts index 5785353b58..9fbbd33f3d 100644 --- a/packages/forms/src/styled/input-group/StyledInputGroup.ts +++ b/packages/forms/src/styled/input-group/StyledInputGroup.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'; import { StyledTextInput } from '../text/StyledTextInput'; import { StyledLabel } from '../common/StyledLabel'; import { StyledHint } from '../common/StyledHint'; @@ -115,5 +115,5 @@ export const StyledInputGroup = styled.div.attrs({ ${props => positionStyles(props)}; ${props => itemStyles(props)}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/radio/StyledRadioHint.ts b/packages/forms/src/styled/radio/StyledRadioHint.ts index 4f0535f265..44b4fb32e4 100644 --- a/packages/forms/src/styled/radio/StyledRadioHint.ts +++ b/packages/forms/src/styled/radio/StyledRadioHint.ts @@ -7,7 +7,7 @@ import styled from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledHint } from '../common/StyledHint'; const COMPONENT_ID = 'forms.radio_hint'; @@ -19,5 +19,5 @@ export const StyledRadioHint = styled(StyledHint).attrs({ padding-${props => (props.theme.rtl ? 'right' : 'left')}: ${props => math(`${props.theme.space.base} * 6px`)}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/radio/StyledRadioInput.ts b/packages/forms/src/styled/radio/StyledRadioInput.ts index 643dfea257..787ff93713 100644 --- a/packages/forms/src/styled/radio/StyledRadioInput.ts +++ b/packages/forms/src/styled/radio/StyledRadioInput.ts @@ -7,7 +7,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles, focusStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, focusStyles, getColor } from '@zendeskgarden/react-theming'; import { StyledRadioLabel } from './StyledRadioLabel'; import { StyledMessage } from '../common/StyledMessage'; @@ -182,5 +182,5 @@ export const StyledRadioInput = styled.input.attrs({ cursor: default; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/radio/StyledRadioLabel.ts b/packages/forms/src/styled/radio/StyledRadioLabel.ts index ce238794d5..6906188770 100644 --- a/packages/forms/src/styled/radio/StyledRadioLabel.ts +++ b/packages/forms/src/styled/radio/StyledRadioLabel.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'; import { StyledLabel } from '../common/StyledLabel'; const COMPONENT_ID = 'forms.radio_label'; @@ -40,5 +40,5 @@ export const StyledRadioLabel = styled(StyledLabel).attrs({ ${props => sizeStyles(props)}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/radio/StyledRadioMessage.ts b/packages/forms/src/styled/radio/StyledRadioMessage.ts index 63c54914f5..39e3cc4a4e 100644 --- a/packages/forms/src/styled/radio/StyledRadioMessage.ts +++ b/packages/forms/src/styled/radio/StyledRadioMessage.ts @@ -7,7 +7,7 @@ import styled from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledMessage } from '../common/StyledMessage'; const COMPONENT_ID = 'forms.radio_message'; @@ -19,5 +19,5 @@ export const StyledRadioMessage = styled(StyledMessage).attrs({ padding-${props => (props.theme.rtl ? 'right' : 'left')}: ${props => math(`${props.theme.space.base} * 6px`)}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/radio/StyledRadioSvg.ts b/packages/forms/src/styled/radio/StyledRadioSvg.ts index 15f6e367be..7ba7afebb6 100644 --- a/packages/forms/src/styled/radio/StyledRadioSvg.ts +++ b/packages/forms/src/styled/radio/StyledRadioSvg.ts @@ -7,7 +7,7 @@ import styled from 'styled-components'; import CircleIcon from '@zendeskgarden/svg-icons/src/12/circle-sm-fill.svg'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledRadioInput } from './StyledRadioInput'; import { StyledRadioLabel } from './StyledRadioLabel'; @@ -24,5 +24,5 @@ export const StyledRadioSvg = styled(CircleIcon).attrs({ opacity: 1; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/range/StyledRangeInput.ts b/packages/forms/src/styled/range/StyledRangeInput.ts index d542fc9a1f..0ca9c6fde0 100644 --- a/packages/forms/src/styled/range/StyledRangeInput.ts +++ b/packages/forms/src/styled/range/StyledRangeInput.ts @@ -9,7 +9,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { math } from 'polished'; import { getFocusBoxShadow, - retrieveComponentStyles, + componentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; @@ -290,7 +290,7 @@ export const StyledRangeInput = styled.input.attrs(props cursor: default; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; StyledRangeInput.defaultProps = { diff --git a/packages/forms/src/styled/text/StyledTextFauxInput.ts b/packages/forms/src/styled/text/StyledTextFauxInput.ts index c8d201309e..67afc925b8 100644 --- a/packages/forms/src/styled/text/StyledTextFauxInput.ts +++ b/packages/forms/src/styled/text/StyledTextFauxInput.ts @@ -7,7 +7,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { - retrieveComponentStyles, + componentStyles, SELECTOR_FOCUS_VISIBLE, focusStyles, getColor @@ -91,5 +91,5 @@ export const StyledTextFauxInput = styled( flex-shrink: ${props => props.$mediaLayout && '0'}; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/text/StyledTextInput.tsx b/packages/forms/src/styled/text/StyledTextInput.tsx index 92d1555dd5..bcee7db396 100644 --- a/packages/forms/src/styled/text/StyledTextInput.tsx +++ b/packages/forms/src/styled/text/StyledTextInput.tsx @@ -10,7 +10,7 @@ import { renderToString } from 'react-dom/server'; import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { em, math } from 'polished'; import { - retrieveComponentStyles, + componentStyles, getLineHeight, focusStyles, getColor @@ -311,5 +311,5 @@ export const StyledTextInput = styled.input.attrs(props = cursor: default; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/text/StyledTextMediaFigure.ts b/packages/forms/src/styled/text/StyledTextMediaFigure.ts index f990ed3935..445f6bd621 100644 --- a/packages/forms/src/styled/text/StyledTextMediaFigure.ts +++ b/packages/forms/src/styled/text/StyledTextMediaFigure.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 = 'forms.media_figure'; @@ -76,5 +76,5 @@ export const StyledTextMediaFigure = styled(StyledBaseIcon).attrs retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/text/StyledTextMediaInput.ts b/packages/forms/src/styled/text/StyledTextMediaInput.ts index 84b40deb91..0940bd2dd9 100644 --- a/packages/forms/src/styled/text/StyledTextMediaInput.ts +++ b/packages/forms/src/styled/text/StyledTextMediaInput.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledTextInput } from './StyledTextInput'; const COMPONENT_ID = 'forms.media_input'; @@ -18,5 +18,5 @@ export const StyledTextMediaInput = styled(StyledTextInput).attrs({ })` flex-grow: 1; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/text/StyledTextarea.ts b/packages/forms/src/styled/text/StyledTextarea.ts index 12932bbe98..f3d1a0d6e7 100644 --- a/packages/forms/src/styled/text/StyledTextarea.ts +++ b/packages/forms/src/styled/text/StyledTextarea.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledTextInput } from './StyledTextInput'; const COMPONENT_ID = 'forms.textarea'; @@ -35,5 +35,5 @@ export const StyledTextarea = styled(StyledTextInput).attrs({ overflow: auto; ${props => props.$isHidden && hiddenStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/tiles/StyledTile.ts b/packages/forms/src/styled/tiles/StyledTile.ts index 4a05721435..0502ad9238 100644 --- a/packages/forms/src/styled/tiles/StyledTile.ts +++ b/packages/forms/src/styled/tiles/StyledTile.ts @@ -6,7 +6,7 @@ */ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; -import { retrieveComponentStyles, focusStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, focusStyles, getColor } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'forms.tile'; @@ -107,5 +107,5 @@ export const StyledTile = styled.label.attrs({ ${colorStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/tiles/StyledTileDescription.ts b/packages/forms/src/styled/tiles/StyledTileDescription.ts index b1f88930a2..45ce2fc931 100644 --- a/packages/forms/src/styled/tiles/StyledTileDescription.ts +++ b/packages/forms/src/styled/tiles/StyledTileDescription.ts @@ -7,7 +7,7 @@ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles, getLineHeight } from '@zendeskgarden/react-theming'; +import { componentStyles, getLineHeight } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'forms.tile_description'; @@ -43,5 +43,5 @@ export const StyledTileDescription = styled.span.attrs({ ${sizeStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/tiles/StyledTileIcon.ts b/packages/forms/src/styled/tiles/StyledTileIcon.ts index 54224e4479..b766c6ad10 100644 --- a/packages/forms/src/styled/tiles/StyledTileIcon.ts +++ b/packages/forms/src/styled/tiles/StyledTileIcon.ts @@ -6,7 +6,7 @@ */ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; -import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { getColor, componentStyles } from '@zendeskgarden/react-theming'; import { math } from 'polished'; import { StyledTile } from './StyledTile'; @@ -82,5 +82,5 @@ export const StyledTileIcon = styled.span.attrs({ ${colorStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/tiles/StyledTileLabel.ts b/packages/forms/src/styled/tiles/StyledTileLabel.ts index a4a8aee95b..4faf437793 100644 --- a/packages/forms/src/styled/tiles/StyledTileLabel.ts +++ b/packages/forms/src/styled/tiles/StyledTileLabel.ts @@ -7,7 +7,7 @@ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles, getLineHeight } from '@zendeskgarden/react-theming'; +import { componentStyles, getLineHeight } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'forms.tile_label'; @@ -41,5 +41,5 @@ export const StyledTileLabel = styled.span.attrs({ ${sizeStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/toggle/StyledToggleHint.ts b/packages/forms/src/styled/toggle/StyledToggleHint.ts index e5d0c19532..b5695d45fe 100644 --- a/packages/forms/src/styled/toggle/StyledToggleHint.ts +++ b/packages/forms/src/styled/toggle/StyledToggleHint.ts @@ -7,7 +7,7 @@ import styled from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledHint } from '../common/StyledHint'; const COMPONENT_ID = 'forms.toggle_hint'; @@ -19,5 +19,5 @@ export const StyledToggleHint = styled(StyledHint).attrs({ padding-${props => (props.theme.rtl ? 'right' : 'left')}: ${props => math(`${props.theme.space.base} * 12px`)}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/toggle/StyledToggleInput.ts b/packages/forms/src/styled/toggle/StyledToggleInput.ts index bbc8751e66..35a2d6de99 100644 --- a/packages/forms/src/styled/toggle/StyledToggleInput.ts +++ b/packages/forms/src/styled/toggle/StyledToggleInput.ts @@ -7,7 +7,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; import { StyledCheckInput } from '../checkbox/StyledCheckInput'; import { StyledToggleLabel } from './StyledToggleLabel'; @@ -91,5 +91,5 @@ export const StyledToggleInput = styled(StyledCheckInput).attrs({ ${colorStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/toggle/StyledToggleLabel.ts b/packages/forms/src/styled/toggle/StyledToggleLabel.ts index b1007dd342..8535d57f99 100644 --- a/packages/forms/src/styled/toggle/StyledToggleLabel.ts +++ b/packages/forms/src/styled/toggle/StyledToggleLabel.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'; import { StyledCheckLabel } from '../checkbox/StyledCheckLabel'; const COMPONENT_ID = 'forms.toggle_label'; @@ -30,5 +30,5 @@ export const StyledToggleLabel = styled(StyledCheckLabel).attrs({ })` ${props => sizeStyles(props)}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/toggle/StyledToggleMessage.ts b/packages/forms/src/styled/toggle/StyledToggleMessage.ts index 9d9c84a0c4..9c5f770683 100644 --- a/packages/forms/src/styled/toggle/StyledToggleMessage.ts +++ b/packages/forms/src/styled/toggle/StyledToggleMessage.ts @@ -7,7 +7,7 @@ import styled from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledMessage } from '../common/StyledMessage'; import { StyledMessageIcon } from '../common/StyledMessageIcon'; @@ -25,5 +25,5 @@ export const StyledToggleMessage = styled(StyledMessage).attrs({ math(`${props.theme.space.base} * 10px - ${props.theme.iconSizes.md}`)}; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/forms/src/styled/toggle/StyledToggleSvg.ts b/packages/forms/src/styled/toggle/StyledToggleSvg.ts index c45e878d98..0962b58900 100644 --- a/packages/forms/src/styled/toggle/StyledToggleSvg.ts +++ b/packages/forms/src/styled/toggle/StyledToggleSvg.ts @@ -7,7 +7,7 @@ import styled from 'styled-components'; import CircleIcon from '@zendeskgarden/svg-icons/src/16/circle-sm-fill.svg'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'forms.toggle_svg'; @@ -17,5 +17,5 @@ export const StyledToggleSvg = styled(CircleIcon).attrs({ })` transition: all 0.15s ease-in-out; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/grid/src/styled/StyledCol.ts b/packages/grid/src/styled/StyledCol.ts index cd72eefa13..ec4ee3e89d 100644 --- a/packages/grid/src/styled/StyledCol.ts +++ b/packages/grid/src/styled/StyledCol.ts @@ -7,7 +7,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; import { AlignSelf, Breakpoint, GridNumber, IColProps, IGridProps, TextAlign } from '../types'; const COMPONENT_ID = 'grid.col'; @@ -228,7 +228,7 @@ export const StyledCol = styled.div.attrs({ props )}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; StyledCol.defaultProps = { diff --git a/packages/grid/src/styled/StyledGrid.ts b/packages/grid/src/styled/StyledGrid.ts index 7a9c23517d..ab68953b60 100644 --- a/packages/grid/src/styled/StyledGrid.ts +++ b/packages/grid/src/styled/StyledGrid.ts @@ -7,7 +7,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; import { IGridProps } from '../types'; const COMPONENT_ID = 'grid.grid'; @@ -62,7 +62,7 @@ export const StyledGrid = styled.div.attrs({ ${colorStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; StyledGrid.defaultProps = { diff --git a/packages/grid/src/styled/StyledRow.ts b/packages/grid/src/styled/StyledRow.ts index 0bf9dddb97..d876a9fffa 100644 --- a/packages/grid/src/styled/StyledRow.ts +++ b/packages/grid/src/styled/StyledRow.ts @@ -7,7 +7,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; import { AlignItems, IGridProps, IRowProps, JustifyContent, Wrap } from '../types'; const COMPONENT_ID = 'grid.row'; @@ -152,7 +152,7 @@ export const StyledRow = styled.div.attrs({ props.$wrapXl )}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; StyledRow.defaultProps = { diff --git a/packages/grid/src/styled/pane/StyledPane.ts b/packages/grid/src/styled/pane/StyledPane.ts index 79c78535fc..16ebe71430 100644 --- a/packages/grid/src/styled/pane/StyledPane.ts +++ b/packages/grid/src/styled/pane/StyledPane.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 = 'pane'; @@ -18,5 +18,5 @@ export const StyledPane = styled.div.attrs({ min-width: 0; min-height: 0; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/grid/src/styled/pane/StyledPaneContent.ts b/packages/grid/src/styled/pane/StyledPaneContent.ts index 70fe2717a4..da4c22acda 100644 --- a/packages/grid/src/styled/pane/StyledPaneContent.ts +++ b/packages/grid/src/styled/pane/StyledPaneContent.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 = 'pane.content'; @@ -22,5 +22,5 @@ export const StyledPaneContent = styled.div.attrs({ display: none; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/grid/src/styled/pane/StyledPaneSplitter.ts b/packages/grid/src/styled/pane/StyledPaneSplitter.ts index 045bf5f4da..ba3b9f7ba7 100644 --- a/packages/grid/src/styled/pane/StyledPaneSplitter.ts +++ b/packages/grid/src/styled/pane/StyledPaneSplitter.ts @@ -10,7 +10,7 @@ import { math } from 'polished'; import { focusStyles, getColor, - retrieveComponentStyles, + componentStyles, SELECTOR_FOCUS_VISIBLE } from '@zendeskgarden/react-theming'; import { Orientation } from '../../types'; @@ -188,5 +188,5 @@ export const StyledPaneSplitter = styled.div.attrs({ ${colorStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/grid/src/styled/pane/StyledPaneSplitterButton.ts b/packages/grid/src/styled/pane/StyledPaneSplitterButton.ts index 1556816e2b..a4d8173c85 100644 --- a/packages/grid/src/styled/pane/StyledPaneSplitterButton.ts +++ b/packages/grid/src/styled/pane/StyledPaneSplitterButton.ts @@ -6,6 +6,7 @@ */ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { ChevronButton } from '@zendeskgarden/react-buttons'; import { Orientation } from '../../types'; @@ -61,4 +62,6 @@ export const StyledPaneSplitterButton = styled(ChevronButton).attrs /** * 1. Match focused `Splitter` z-index */ -export const StyledPaneSplitterButtonContainer = styled.div` +export const StyledPaneSplitterButtonContainer = styled.div.attrs({ + 'data-garden-id': COMPONENT_ID, + 'data-garden-version': PACKAGE_VERSION +})` display: ${props => props.$splitterSize <= minimumSplitterSize(props.theme) ? 'none' : undefined}; position: absolute; @@ -179,5 +182,5 @@ export const StyledPaneSplitterButtonContainer = styled.div retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/loaders/src/styled/StyledInline.ts b/packages/loaders/src/styled/StyledInline.ts index 9543ddbc6a..ab18b43139 100644 --- a/packages/loaders/src/styled/StyledInline.ts +++ b/packages/loaders/src/styled/StyledInline.ts @@ -6,7 +6,7 @@ */ import styled, { DefaultTheme, ThemeProps, css, keyframes } from 'styled-components'; -import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { getColor, componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'loaders.inline'; @@ -69,5 +69,5 @@ export const StyledInline = styled.svg.attrs(props => ({ } } - ${props => retrieveComponentStyles(COMPONENT_ID, props)} + ${componentStyles} `; diff --git a/packages/loaders/src/styled/StyledLoadingPlaceholder.ts b/packages/loaders/src/styled/StyledLoadingPlaceholder.ts index e6bcd9d31a..dead78f0e3 100644 --- a/packages/loaders/src/styled/StyledLoadingPlaceholder.ts +++ b/packages/loaders/src/styled/StyledLoadingPlaceholder.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 = 'loaders.loading_placeholder'; @@ -26,5 +26,5 @@ export const StyledLoadingPlaceholder = styled.div.attrs({ height: ${props => props.height || '0.9em'}; font-size: ${props => props.fontSize}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)} + ${componentStyles} `; diff --git a/packages/loaders/src/styled/StyledProgress.ts b/packages/loaders/src/styled/StyledProgress.ts index b38002e3bd..5707434989 100644 --- a/packages/loaders/src/styled/StyledProgress.ts +++ b/packages/loaders/src/styled/StyledProgress.ts @@ -6,7 +6,7 @@ */ import styled, { DefaultTheme, ThemeProps, css } from 'styled-components'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; import { Size } from '../types'; const sizeToHeight = ($size: Size, theme: DefaultTheme) => { @@ -65,7 +65,7 @@ export const StyledProgressBackground = styled.div.attrs retrieveComponentStyles(PROGRESS_BACKGROUND_COMPONENT_ID, props)} + ${componentStyles} `; interface IStyledProgressIndicatorProps { @@ -85,5 +85,5 @@ export const StyledProgressIndicator = styled.div.attrs props.$value}%; height: ${props => sizeToHeight(props.$size, props.theme)}px; - ${props => retrieveComponentStyles(PROGESS_INDICATOR_COMPONENT_ID, props)} + ${componentStyles} `; diff --git a/packages/loaders/src/styled/StyledSVG.ts b/packages/loaders/src/styled/StyledSVG.ts index 10dbf6cd28..4cc5560ac6 100644 --- a/packages/loaders/src/styled/StyledSVG.ts +++ b/packages/loaders/src/styled/StyledSVG.ts @@ -6,7 +6,7 @@ */ import styled, { css, DefaultTheme, ThemeProps } from 'styled-components'; -import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { getColor, componentStyles } from '@zendeskgarden/react-theming'; interface IStyledSVGProps { 'data-garden-id': string; @@ -39,5 +39,5 @@ export const StyledSVG = styled.svg.attrs(props => ({ ${colorStyles}; - ${props => retrieveComponentStyles(props['data-garden-id'], props)}; + ${componentStyles}; `; diff --git a/packages/loaders/src/styled/StyledSkeleton.ts b/packages/loaders/src/styled/StyledSkeleton.ts index 5194752c0e..9ba944c683 100644 --- a/packages/loaders/src/styled/StyledSkeleton.ts +++ b/packages/loaders/src/styled/StyledSkeleton.ts @@ -6,7 +6,7 @@ */ import styled, { keyframes, css, ThemeProps, DefaultTheme } from 'styled-components'; -import { retrieveComponentStyles, getLineHeight, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getLineHeight, getColor } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'loaders.skeleton'; @@ -116,5 +116,5 @@ export const StyledSkeleton = styled.div.attrs({ ${gradientStyles} } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/modals/src/styled/StyledBackdrop.ts b/packages/modals/src/styled/StyledBackdrop.ts index e6bc9f1e49..2ad461c4ec 100644 --- a/packages/modals/src/styled/StyledBackdrop.ts +++ b/packages/modals/src/styled/StyledBackdrop.ts @@ -7,7 +7,7 @@ import PropTypes from 'prop-types'; import styled, { css, keyframes } from 'styled-components'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'modals.backdrop'; @@ -64,7 +64,7 @@ export const StyledBackdrop = styled.div.attrs({ ${animationStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; StyledBackdrop.propTypes = { diff --git a/packages/modals/src/styled/StyledBody.ts b/packages/modals/src/styled/StyledBody.ts index 49631db8f0..7a593ff551 100644 --- a/packages/modals/src/styled/StyledBody.ts +++ b/packages/modals/src/styled/StyledBody.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 = 'modals.body'; @@ -24,5 +24,5 @@ export const StyledBody = styled.div.attrs({ color: ${({ theme }) => getColor({ theme, variable: 'foreground.default' })}; font-size: ${props => props.theme.fontSizes.md}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/modals/src/styled/StyledClose.ts b/packages/modals/src/styled/StyledClose.ts index a505258e93..a92a7db63a 100644 --- a/packages/modals/src/styled/StyledClose.ts +++ b/packages/modals/src/styled/StyledClose.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { IconButton } from '@zendeskgarden/react-buttons'; const COMPONENT_ID = 'modals.close'; @@ -26,5 +26,5 @@ export const StyledClose = styled(IconButton).attrs({ ${props => (props.theme.rtl ? 'left' : 'right')}: ${props => `${props.theme.space.base * BASE_MULTIPLIERS.side}px`}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/modals/src/styled/StyledDrawer.ts b/packages/modals/src/styled/StyledDrawer.ts index 6f564e69ab..f579e82592 100644 --- a/packages/modals/src/styled/StyledDrawer.ts +++ b/packages/modals/src/styled/StyledDrawer.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { getColor, componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'modals.drawer_modal'; @@ -70,5 +70,5 @@ export const StyledDrawer = styled.div.attrs({ ${colorStyles} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/modals/src/styled/StyledDrawerBody.ts b/packages/modals/src/styled/StyledDrawerBody.ts index 6a774794c5..378e567b04 100644 --- a/packages/modals/src/styled/StyledDrawerBody.ts +++ b/packages/modals/src/styled/StyledDrawerBody.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledBody } from './StyledBody'; const COMPONENT_ID = 'modals.drawer_modal.body'; @@ -18,5 +18,5 @@ export const StyledDrawerBody = styled(StyledBody).attrs({ padding: ${props => props.theme.space.base * 5}px; color-scheme: only ${p => p.theme.colors.base}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/modals/src/styled/StyledDrawerClose.ts b/packages/modals/src/styled/StyledDrawerClose.ts index 0072620d45..ab504a6cb7 100644 --- a/packages/modals/src/styled/StyledDrawerClose.ts +++ b/packages/modals/src/styled/StyledDrawerClose.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledClose, BASE_MULTIPLIERS as styledCloseBaseMultipliers } from './StyledClose'; const COMPONENT_ID = 'modals.drawer_modal.close'; @@ -24,5 +24,5 @@ export const StyledDrawerClose = styled(StyledClose).attrs({ ${props => (props.theme.rtl ? 'left' : 'right')}: ${props => `${props.theme.space.base * BASE_MULTIPLIERS.side}px`}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/modals/src/styled/StyledDrawerFooter.ts b/packages/modals/src/styled/StyledDrawerFooter.ts index 2acbc444f3..b26e89a3ac 100644 --- a/packages/modals/src/styled/StyledDrawerFooter.ts +++ b/packages/modals/src/styled/StyledDrawerFooter.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { getColor, componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'modals.drawer_modal.footer'; @@ -21,5 +21,5 @@ export const StyledDrawerFooter = styled.div.attrs({ `${theme.borders.sm} ${getColor({ theme, variable: 'border.subtle' })}`}; padding: ${props => props.theme.space.base * 5}px; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/modals/src/styled/StyledDrawerFooterItem.ts b/packages/modals/src/styled/StyledDrawerFooterItem.ts index 806adfd1a5..c16da45ffd 100644 --- a/packages/modals/src/styled/StyledDrawerFooterItem.ts +++ b/packages/modals/src/styled/StyledDrawerFooterItem.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledFooterItem } from './StyledFooterItem'; const COMPONENT_ID = 'modals.drawer_modal.footer_item'; @@ -15,5 +15,5 @@ export const StyledDrawerFooterItem = styled(StyledFooterItem as 'span').attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/modals/src/styled/StyledDrawerHeader.ts b/packages/modals/src/styled/StyledDrawerHeader.ts index b919f37248..ac60fc7a47 100644 --- a/packages/modals/src/styled/StyledDrawerHeader.ts +++ b/packages/modals/src/styled/StyledDrawerHeader.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledHeader } from './StyledHeader'; import { BASE_MULTIPLIERS } from './StyledDrawerClose'; @@ -27,5 +27,5 @@ export const StyledDrawerHeader = styled(StyledHeader).attrs({ props.theme.space.base * (BASE_MULTIPLIERS.size + BASE_MULTIPLIERS.side + 2) }px;`} /* [1] */ - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/modals/src/styled/StyledFooter.ts b/packages/modals/src/styled/StyledFooter.ts index dff3bd2d7d..0a3eeb8754 100644 --- a/packages/modals/src/styled/StyledFooter.ts +++ b/packages/modals/src/styled/StyledFooter.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { getColor, componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'modals.footer'; @@ -32,5 +32,5 @@ export const StyledFooter = styled.div.attrs({ props.theme.space.base * 8 }px`}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/modals/src/styled/StyledFooterItem.ts b/packages/modals/src/styled/StyledFooterItem.ts index c70bb548ff..c16b4681fd 100644 --- a/packages/modals/src/styled/StyledFooterItem.ts +++ b/packages/modals/src/styled/StyledFooterItem.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 = 'modals.footer_item'; @@ -22,5 +22,5 @@ export const StyledFooterItem = styled.span.attrs({ margin-${props => (props.theme.rtl ? 'right' : 'left')}: 0; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/modals/src/styled/StyledHeader.ts b/packages/modals/src/styled/StyledHeader.ts index cce7024e03..946db4a2a1 100644 --- a/packages/modals/src/styled/StyledHeader.ts +++ b/packages/modals/src/styled/StyledHeader.ts @@ -6,7 +6,7 @@ */ import styled, { css, DefaultTheme, ThemeProps } from 'styled-components'; -import { getLineHeight, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { getLineHeight, componentStyles, getColor } from '@zendeskgarden/react-theming'; import { BASE_MULTIPLIERS } from './StyledClose'; @@ -54,5 +54,5 @@ export const StyledHeader = styled.div.attrs({ ${colorStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/modals/src/styled/StyledModal.ts b/packages/modals/src/styled/StyledModal.ts index 8595e7e7a8..491f8cc8d6 100644 --- a/packages/modals/src/styled/StyledModal.ts +++ b/packages/modals/src/styled/StyledModal.ts @@ -7,7 +7,7 @@ import PropTypes from 'prop-types'; import styled, { css, keyframes, ThemeProps, DefaultTheme } from 'styled-components'; -import { mediaQuery, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { mediaQuery, componentStyles, getColor } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'modals.modal'; @@ -109,7 +109,7 @@ export const StyledModal = styled.div.attrs({ transform: ${props => props.$isCentered && 'translate(50%, 50%)'}; /* [1] */ } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; StyledModal.propTypes = { diff --git a/packages/modals/src/styled/StyledTooltipDialog.ts b/packages/modals/src/styled/StyledTooltipDialog.ts index 8a8c4f4f5a..3ad90fc886 100644 --- a/packages/modals/src/styled/StyledTooltipDialog.ts +++ b/packages/modals/src/styled/StyledTooltipDialog.ts @@ -7,11 +7,7 @@ import styled, { DefaultTheme, ThemeProps } from 'styled-components'; import { Placement } from '@floating-ui/react-dom'; -import { - arrowStyles, - retrieveComponentStyles, - getArrowPosition -} from '@zendeskgarden/react-theming'; +import { arrowStyles, componentStyles, getArrowPosition } from '@zendeskgarden/react-theming'; import { StyledTooltipDialogClose } from '../styled/StyledTooltipDialogClose'; import { TransitionStatus } from 'react-transition-group'; @@ -54,5 +50,5 @@ export const StyledTooltipDialog = styled.div.attrs(p ${sizeStyles} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/modals/src/styled/StyledTooltipDialogBackdrop.ts b/packages/modals/src/styled/StyledTooltipDialogBackdrop.ts index 141623befb..c1a6445541 100644 --- a/packages/modals/src/styled/StyledTooltipDialogBackdrop.ts +++ b/packages/modals/src/styled/StyledTooltipDialogBackdrop.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 = 'modals.tooltip_dialog.backdrop'; @@ -34,5 +34,5 @@ export const StyledTooltipDialogBackdrop = styled.div.attrs({ opacity: 0; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/modals/src/styled/StyledTooltipDialogBody.ts b/packages/modals/src/styled/StyledTooltipDialogBody.ts index 07e08b8ac2..c8f31705f9 100644 --- a/packages/modals/src/styled/StyledTooltipDialogBody.ts +++ b/packages/modals/src/styled/StyledTooltipDialogBody.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 = 'modals.tooltip_dialog.body'; @@ -22,5 +22,5 @@ export const StyledTooltipDialogBody = styled.div.attrs({ color: ${({ theme }) => getColor({ variable: 'foreground.default', theme })}; font-size: ${props => props.theme.fontSizes.md}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/modals/src/styled/StyledTooltipDialogClose.ts b/packages/modals/src/styled/StyledTooltipDialogClose.ts index 0736e59702..f5cf54db26 100644 --- a/packages/modals/src/styled/StyledTooltipDialogClose.ts +++ b/packages/modals/src/styled/StyledTooltipDialogClose.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledClose } from './StyledClose'; const COMPONENT_ID = 'modals.tooltip_dialog.close'; @@ -17,5 +17,5 @@ export const StyledTooltipDialogClose = styled(StyledClose).attrs({ })` top: ${props => props.theme.space.base * 3.5}px; ${props => (props.theme.rtl ? 'left' : 'right')}: ${props => `${props.theme.space.base * 3}px`}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/modals/src/styled/StyledTooltipDialogFooter.ts b/packages/modals/src/styled/StyledTooltipDialogFooter.ts index 3b40bca648..f6299c5990 100644 --- a/packages/modals/src/styled/StyledTooltipDialogFooter.ts +++ b/packages/modals/src/styled/StyledTooltipDialogFooter.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 = 'modals.tooltip_dialog.footer'; @@ -20,5 +20,5 @@ export const StyledTooltipDialogFooter = styled.div.attrs({ justify-content: flex-end; padding-top: ${p => p.theme.space.base * 5}px; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/modals/src/styled/StyledTooltipDialogFooterItem.ts b/packages/modals/src/styled/StyledTooltipDialogFooterItem.ts index becc3fadc4..95c393671e 100644 --- a/packages/modals/src/styled/StyledTooltipDialogFooterItem.ts +++ b/packages/modals/src/styled/StyledTooltipDialogFooterItem.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledFooterItem } from './StyledFooterItem'; const COMPONENT_ID = 'modals.tooltip_dialog.footer_item'; @@ -15,5 +15,5 @@ export const StyledTooltipDialogFooterItem = styled(StyledFooterItem).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/modals/src/styled/StyledTooltipDialogTitle.ts b/packages/modals/src/styled/StyledTooltipDialogTitle.ts index 36f129db8c..0b5d1e1089 100644 --- a/packages/modals/src/styled/StyledTooltipDialogTitle.ts +++ b/packages/modals/src/styled/StyledTooltipDialogTitle.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 = 'modals.tooltip_dialog.title'; @@ -26,5 +26,5 @@ export const StyledTooltipDialogTitle = styled.div.attrs({ ${props => sizeStyles(props)}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/notifications/src/styled/StyledAlert.ts b/packages/notifications/src/styled/StyledAlert.ts index 2f2df57472..a048661116 100644 --- a/packages/notifications/src/styled/StyledAlert.ts +++ b/packages/notifications/src/styled/StyledAlert.ts @@ -6,7 +6,7 @@ */ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; import { StyledTitle } from './content/StyledTitle'; import { IStyledBaseProps, StyledBase } from './StyledBase'; import { validationTypes } from '../utils/icons'; @@ -56,5 +56,5 @@ export const StyledAlert = styled(StyledBase).attrs({ })` ${colorStyles} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/notifications/src/styled/StyledBase.ts b/packages/notifications/src/styled/StyledBase.ts index 9fe6190070..e779734163 100644 --- a/packages/notifications/src/styled/StyledBase.ts +++ b/packages/notifications/src/styled/StyledBase.ts @@ -6,7 +6,7 @@ */ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; -import { getLineHeight, getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { getLineHeight, getColor, componentStyles } from '@zendeskgarden/react-theming'; import { Type } from '../types'; import { validationTypes } from '../utils/icons'; @@ -92,5 +92,5 @@ export const StyledBase = styled.div.attrs({ ${colorStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)} + ${componentStyles} `; diff --git a/packages/notifications/src/styled/StyledIcon.ts b/packages/notifications/src/styled/StyledIcon.ts index f54f652112..8f2d7ebd57 100644 --- a/packages/notifications/src/styled/StyledIcon.ts +++ b/packages/notifications/src/styled/StyledIcon.ts @@ -6,7 +6,7 @@ */ import styled, { DataAttributes, DefaultTheme, ThemeProps, css } from 'styled-components'; -import { getColor, StyledBaseIcon, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { getColor, StyledBaseIcon, componentStyles } from '@zendeskgarden/react-theming'; import { Type } from '../types'; import { validationTypes } from '../utils/icons'; @@ -61,5 +61,5 @@ export const StyledIcon = styled(StyledBaseIcon).attrs({ ${sizeStyles} ${colorStyles} - ${props => retrieveComponentStyles(COMPONENT_ID, props)} + ${componentStyles} `; diff --git a/packages/notifications/src/styled/StyledNotification.ts b/packages/notifications/src/styled/StyledNotification.ts index a7b301d548..98601eb7fc 100644 --- a/packages/notifications/src/styled/StyledNotification.ts +++ b/packages/notifications/src/styled/StyledNotification.ts @@ -7,7 +7,7 @@ import PropTypes from 'prop-types'; import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; import { TYPE, Type } from '../types'; import { StyledTitle } from './content/StyledTitle'; import { IStyledBaseProps, StyledBase } from './StyledBase'; @@ -57,7 +57,7 @@ export const StyledNotification = styled(StyledBase).attrs({ })` ${colorStyles} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; StyledNotification.propTypes = { diff --git a/packages/notifications/src/styled/StyledWell.ts b/packages/notifications/src/styled/StyledWell.ts index 27aabda461..6b1368d061 100644 --- a/packages/notifications/src/styled/StyledWell.ts +++ b/packages/notifications/src/styled/StyledWell.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, css, DefaultTheme } from 'styled-components'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; import { StyledBase } from './StyledBase'; const COMPONENT_ID = 'notifications.well'; @@ -49,5 +49,5 @@ export const StyledWell = styled(StyledBase).attrs({ })` ${colorStyles} - ${p => retrieveComponentStyles(COMPONENT_ID, p)}; + ${componentStyles}; `; diff --git a/packages/notifications/src/styled/content/StyledClose.ts b/packages/notifications/src/styled/content/StyledClose.ts index 8d7470354b..a0c42ab2bf 100644 --- a/packages/notifications/src/styled/content/StyledClose.ts +++ b/packages/notifications/src/styled/content/StyledClose.ts @@ -6,7 +6,7 @@ */ import styled, { DefaultTheme, ThemeProps, css } from 'styled-components'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; import { Type } from '../../types'; import { validationTypes } from '../../utils/icons'; import { IconButton } from '@zendeskgarden/react-buttons'; @@ -74,5 +74,5 @@ export const StyledClose = styled(IconButton).attrs({ ${colorStyles} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/notifications/src/styled/content/StyledParagraph.ts b/packages/notifications/src/styled/content/StyledParagraph.ts index b1542d8687..9fea439dbc 100644 --- a/packages/notifications/src/styled/content/StyledParagraph.ts +++ b/packages/notifications/src/styled/content/StyledParagraph.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 = 'notifications.paragraph'; @@ -19,5 +19,5 @@ export const StyledParagraph = styled.p.attrs({ })` margin: ${props => props.theme.space.base * 2}px 0 0; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/notifications/src/styled/content/StyledTitle.ts b/packages/notifications/src/styled/content/StyledTitle.ts index 36c63d1454..2dfec201d0 100644 --- a/packages/notifications/src/styled/content/StyledTitle.ts +++ b/packages/notifications/src/styled/content/StyledTitle.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 = 'notifications.title'; @@ -26,5 +26,5 @@ export const StyledTitle = styled.div.attrs({ font-weight: ${props => props.$isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/notifications/src/styled/global-alert/StyledGlobalAlert.ts b/packages/notifications/src/styled/global-alert/StyledGlobalAlert.ts index 300841310c..54f12dff3b 100644 --- a/packages/notifications/src/styled/global-alert/StyledGlobalAlert.ts +++ b/packages/notifications/src/styled/global-alert/StyledGlobalAlert.ts @@ -7,7 +7,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { - retrieveComponentStyles, + componentStyles, getLineHeight, focusStyles, getColor @@ -137,5 +137,5 @@ export const StyledGlobalAlert = styled.div.attrs({ text-decoration: underline; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/notifications/src/styled/global-alert/StyledGlobalAlertButton.ts b/packages/notifications/src/styled/global-alert/StyledGlobalAlertButton.ts index 9a9a67a030..bacf73d6a8 100644 --- a/packages/notifications/src/styled/global-alert/StyledGlobalAlertButton.ts +++ b/packages/notifications/src/styled/global-alert/StyledGlobalAlertButton.ts @@ -9,7 +9,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { getColor, focusStyles, - retrieveComponentStyles, + componentStyles, ColorParameters } from '@zendeskgarden/react-theming'; import { Button } from '@zendeskgarden/react-buttons'; @@ -125,5 +125,5 @@ export const StyledGlobalAlertButton = styled(Button).attrs({ ${colorStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/notifications/src/styled/global-alert/StyledGlobalAlertClose.ts b/packages/notifications/src/styled/global-alert/StyledGlobalAlertClose.ts index 9cf2d6c60b..31d0f2cede 100644 --- a/packages/notifications/src/styled/global-alert/StyledGlobalAlertClose.ts +++ b/packages/notifications/src/styled/global-alert/StyledGlobalAlertClose.ts @@ -6,7 +6,7 @@ */ import styled, { css, DefaultTheme, ThemeProps } from 'styled-components'; -import { focusStyles, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { focusStyles, componentStyles, getColor } from '@zendeskgarden/react-theming'; import { IconButton } from '@zendeskgarden/react-buttons'; import { IGlobalAlertProps } from '../../types'; @@ -124,5 +124,5 @@ export const StyledGlobalAlertClose = styled(IconButton).attrs({ ${colorStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/notifications/src/styled/global-alert/StyledGlobalAlertContent.ts b/packages/notifications/src/styled/global-alert/StyledGlobalAlertContent.ts index 00146c929b..61a27364cf 100644 --- a/packages/notifications/src/styled/global-alert/StyledGlobalAlertContent.ts +++ b/packages/notifications/src/styled/global-alert/StyledGlobalAlertContent.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 = 'notifications.global_alert.content'; @@ -16,5 +16,5 @@ export const StyledGlobalAlertContent = styled.div.attrs({ })` flex-grow: 1; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/notifications/src/styled/global-alert/StyledGlobalAlertIcon.ts b/packages/notifications/src/styled/global-alert/StyledGlobalAlertIcon.ts index 21530d2ba6..fc3c73655b 100644 --- a/packages/notifications/src/styled/global-alert/StyledGlobalAlertIcon.ts +++ b/packages/notifications/src/styled/global-alert/StyledGlobalAlertIcon.ts @@ -7,7 +7,7 @@ import styled, { css, DataAttributes, DefaultTheme, ThemeProps } from 'styled-components'; import { math } from 'polished'; -import { getColor, retrieveComponentStyles, StyledBaseIcon } from '@zendeskgarden/react-theming'; +import { getColor, componentStyles, StyledBaseIcon } from '@zendeskgarden/react-theming'; import { Type } from '../../types'; const COMPONENT_ID = 'notifications.global_alert.icon'; @@ -68,5 +68,5 @@ export const StyledGlobalAlertIcon = styled(StyledBaseIcon).attrs retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/notifications/src/styled/global-alert/StyledGlobalAlertTitle.ts b/packages/notifications/src/styled/global-alert/StyledGlobalAlertTitle.ts index c9c7d981a7..21f0127fbf 100644 --- a/packages/notifications/src/styled/global-alert/StyledGlobalAlertTitle.ts +++ b/packages/notifications/src/styled/global-alert/StyledGlobalAlertTitle.ts @@ -6,7 +6,7 @@ */ import styled, { css, DefaultTheme, ThemeProps } from 'styled-components'; -import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { getColor, componentStyles } from '@zendeskgarden/react-theming'; import { IGlobalAlertProps, IGlobalAlertTitleProps } from '../../types'; const COMPONENT_ID = 'notifications.global_alert.title'; @@ -53,5 +53,5 @@ export const StyledGlobalAlertTitle = styled.div.attrs({ ${colorStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/pagination/src/styled/CursorPagination/StyledCursor.ts b/packages/pagination/src/styled/CursorPagination/StyledCursor.ts index 9128af8a03..9784435158 100644 --- a/packages/pagination/src/styled/CursorPagination/StyledCursor.ts +++ b/packages/pagination/src/styled/CursorPagination/StyledCursor.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledPageBase } from '../OffsetPagination/StyledPageBase'; const COMPONENT_ID = 'cursor_pagination.cursor'; @@ -30,5 +30,5 @@ export const StyledCursor = styled(StyledPageBase as 'button').attrs({ margin-right: ${props => props.theme.space.base}px; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/pagination/src/styled/CursorPagination/StyledCursorPagination.ts b/packages/pagination/src/styled/CursorPagination/StyledCursorPagination.ts index aaac644402..4c5e321954 100644 --- a/packages/pagination/src/styled/CursorPagination/StyledCursorPagination.ts +++ b/packages/pagination/src/styled/CursorPagination/StyledCursorPagination.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 = 'cursor_pagination'; @@ -17,5 +17,5 @@ export const StyledCursorPagination = styled.nav.attrs({ display: flex; justify-content: center; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/pagination/src/styled/OffsetPagination/StyledGapListItem.ts b/packages/pagination/src/styled/OffsetPagination/StyledGapListItem.ts index 8dcfa04bb9..efd4e800af 100644 --- a/packages/pagination/src/styled/OffsetPagination/StyledGapListItem.ts +++ b/packages/pagination/src/styled/OffsetPagination/StyledGapListItem.ts @@ -7,7 +7,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles, getLineHeight, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getLineHeight, getColor } from '@zendeskgarden/react-theming'; import { StyledListItem } from './StyledListItem'; const COMPONENT_ID = 'pagination.gap'; @@ -50,5 +50,5 @@ export const StyledGapListItem = styled(StyledListItem).attrs({ color: inherit; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/pagination/src/styled/OffsetPagination/StyledList.ts b/packages/pagination/src/styled/OffsetPagination/StyledList.ts index 9e3d2f0459..9f4041f856 100644 --- a/packages/pagination/src/styled/OffsetPagination/StyledList.ts +++ b/packages/pagination/src/styled/OffsetPagination/StyledList.ts @@ -6,7 +6,7 @@ */ import styled, { DefaultTheme, ThemeProps, css } from 'styled-components'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'pagination.list'; @@ -38,5 +38,5 @@ export const StyledList = styled.ul.attrs({ outline: none; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/pagination/src/styled/OffsetPagination/StyledListItem.ts b/packages/pagination/src/styled/OffsetPagination/StyledListItem.ts index f00b2be249..96e119bf0a 100644 --- a/packages/pagination/src/styled/OffsetPagination/StyledListItem.ts +++ b/packages/pagination/src/styled/OffsetPagination/StyledListItem.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 = 'pagination.list_item'; @@ -22,5 +22,5 @@ export const StyledListItem = styled.li.attrs({ margin-left: 0; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/pagination/src/styled/OffsetPagination/StyledNav.ts b/packages/pagination/src/styled/OffsetPagination/StyledNav.ts index 2b6c6b85b1..fda3f5ac8b 100644 --- a/packages/pagination/src/styled/OffsetPagination/StyledNav.ts +++ b/packages/pagination/src/styled/OffsetPagination/StyledNav.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 = 'pagination.pagination_view'; @@ -14,5 +14,5 @@ export const StyledNav = styled.nav.attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/pagination/src/styled/OffsetPagination/StyledNavigation.ts b/packages/pagination/src/styled/OffsetPagination/StyledNavigation.ts index f779a2f68c..8bff669ed9 100644 --- a/packages/pagination/src/styled/OffsetPagination/StyledNavigation.ts +++ b/packages/pagination/src/styled/OffsetPagination/StyledNavigation.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledPage } from './StyledPage'; const COMPONENT_ID = 'pagination.navigation'; @@ -19,5 +19,5 @@ export const StyledNavigation = styled(StyledPage).attrs({ align-items: center; justify-content: center; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/pagination/src/styled/OffsetPagination/StyledPage.ts b/packages/pagination/src/styled/OffsetPagination/StyledPage.ts index 0dda79605a..826536d07e 100644 --- a/packages/pagination/src/styled/OffsetPagination/StyledPage.ts +++ b/packages/pagination/src/styled/OffsetPagination/StyledPage.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'; import { StyledPageBase } from './StyledPageBase'; const COMPONENT_ID = 'pagination.page'; @@ -35,5 +35,5 @@ export const StyledPage = styled(StyledPageBase).attrs({ font-weight: ${props => props.theme.fontWeights.semibold}; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/pagination/src/styled/OffsetPagination/StyledPageBase.ts b/packages/pagination/src/styled/OffsetPagination/StyledPageBase.ts index 29d90fe00c..acc46e3e46 100644 --- a/packages/pagination/src/styled/OffsetPagination/StyledPageBase.ts +++ b/packages/pagination/src/styled/OffsetPagination/StyledPageBase.ts @@ -7,7 +7,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { - retrieveComponentStyles, + componentStyles, getLineHeight, focusStyles, getColor @@ -152,5 +152,5 @@ export const StyledPageBase = styled.button.attrs({ ${props => colorStyles(props)}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/tables/src/styled/StyledBody.ts b/packages/tables/src/styled/StyledBody.ts index 6eb060114d..e488d6f189 100644 --- a/packages/tables/src/styled/StyledBody.ts +++ b/packages/tables/src/styled/StyledBody.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 = 'tables.body'; @@ -14,5 +14,5 @@ export const StyledBody = styled.tbody.attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/tables/src/styled/StyledCaption.ts b/packages/tables/src/styled/StyledCaption.ts index 63631068c2..1ef4ea5533 100644 --- a/packages/tables/src/styled/StyledCaption.ts +++ b/packages/tables/src/styled/StyledCaption.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 = 'tables.caption'; @@ -17,5 +17,5 @@ export const StyledCaption = styled.caption.attrs({ display: table-caption; text-align: ${props => (props.theme.rtl ? 'right' : 'left')}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/tables/src/styled/StyledCell.ts b/packages/tables/src/styled/StyledCell.ts index 4f1615afd6..f1e2ff928a 100644 --- a/packages/tables/src/styled/StyledCell.ts +++ b/packages/tables/src/styled/StyledCell.ts @@ -7,7 +7,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { ICellProps, ITableProps } from '../types'; import { getLineHeight } from './StyledTable'; import { getRowHeight } from './style-utils'; @@ -72,5 +72,5 @@ export const StyledCell = styled.td.attrs({ ${props => sizeStyling(props)}; ${props => props.$isTruncated && truncatedStyling}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/tables/src/styled/StyledGroupRow.ts b/packages/tables/src/styled/StyledGroupRow.ts index 4097cc1a3e..fb7f1d470d 100644 --- a/packages/tables/src/styled/StyledGroupRow.ts +++ b/packages/tables/src/styled/StyledGroupRow.ts @@ -7,7 +7,7 @@ import styled, { css, DefaultTheme, ThemeProps } from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; import { StyledBaseRow } from './StyledBaseRow'; import { IStyledRowProps } from './StyledRow'; import { StyledCell } from './StyledCell'; @@ -55,5 +55,5 @@ export const StyledGroupRow = styled(StyledBaseRow).attrs({ ${colorStyles} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/tables/src/styled/StyledHead.ts b/packages/tables/src/styled/StyledHead.ts index 2d49dfac55..f43b81e54a 100644 --- a/packages/tables/src/styled/StyledHead.ts +++ b/packages/tables/src/styled/StyledHead.ts @@ -6,7 +6,7 @@ */ import styled, { css, DefaultTheme, ThemeProps } from 'styled-components'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; import { StyledHeaderRow } from './StyledHeaderRow'; const COMPONENT_ID = 'tables.head'; @@ -51,5 +51,5 @@ export const StyledHead = styled.thead.attrs({ ${colorStyles} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/tables/src/styled/StyledHeaderCell.ts b/packages/tables/src/styled/StyledHeaderCell.ts index 74046f107b..b7936c2520 100644 --- a/packages/tables/src/styled/StyledHeaderCell.ts +++ b/packages/tables/src/styled/StyledHeaderCell.ts @@ -7,7 +7,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { StyledCell, IStyledCellProps } from './StyledCell'; import { StyledSortableButton } from './StyledSortableButton'; import { getLineHeight } from './StyledTable'; @@ -58,5 +58,5 @@ export const StyledHeaderCell = styled(StyledCell).attrs({ ${props => props.$isTruncated && truncatedStyling} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/tables/src/styled/StyledHeaderRow.ts b/packages/tables/src/styled/StyledHeaderRow.ts index 030781eec9..86ee0277ab 100644 --- a/packages/tables/src/styled/StyledHeaderRow.ts +++ b/packages/tables/src/styled/StyledHeaderRow.ts @@ -7,7 +7,7 @@ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; import { StyledBaseRow } from './StyledBaseRow'; import { StyledOverflowButton } from './StyledOverflowButton'; import { ITableProps } from '../types'; @@ -62,5 +62,5 @@ export const StyledHeaderRow = styled(StyledBaseRow).attrs({ opacity: 1; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/tables/src/styled/StyledHiddenCell.ts b/packages/tables/src/styled/StyledHiddenCell.ts index af133bdbf4..f6153e0d10 100644 --- a/packages/tables/src/styled/StyledHiddenCell.ts +++ b/packages/tables/src/styled/StyledHiddenCell.ts @@ -7,7 +7,7 @@ import styled from 'styled-components'; import { hideVisually } from 'polished'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'tables.hidden_cell'; @@ -17,5 +17,5 @@ export const StyledHiddenCell = styled.div.attrs({ })` ${hideVisually()} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/tables/src/styled/StyledOverflowButton.ts b/packages/tables/src/styled/StyledOverflowButton.ts index 8d3b872206..a25663baed 100644 --- a/packages/tables/src/styled/StyledOverflowButton.ts +++ b/packages/tables/src/styled/StyledOverflowButton.ts @@ -7,7 +7,7 @@ import styled from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { getRowHeight } from './style-utils'; import { IconButton } from '@zendeskgarden/react-buttons'; import { ITableProps } from '../types'; @@ -33,5 +33,5 @@ export const StyledOverflowButton = styled(IconButton).attrs({ height: ${OVERFLOW_BUTTON_SIZE}; /* [1] */ font-size: inherit; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/tables/src/styled/StyledRow.ts b/packages/tables/src/styled/StyledRow.ts index 76de301971..0d0a9dc81f 100644 --- a/packages/tables/src/styled/StyledRow.ts +++ b/packages/tables/src/styled/StyledRow.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; import { ITableProps } from '../types'; import { StyledCell } from './StyledCell'; import { StyledBaseRow } from './StyledBaseRow'; @@ -127,5 +127,5 @@ export const StyledRow = styled(StyledBaseRow).attrs({ ${colorStyles} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/tables/src/styled/StyledSortableButton.ts b/packages/tables/src/styled/StyledSortableButton.ts index bda0647e72..53f45696ab 100644 --- a/packages/tables/src/styled/StyledSortableButton.ts +++ b/packages/tables/src/styled/StyledSortableButton.ts @@ -8,7 +8,7 @@ import styled, { DefaultTheme, ThemeProps, css } from 'styled-components'; import { math } from 'polished'; import { - retrieveComponentStyles, + componentStyles, focusStyles, SELECTOR_FOCUS_VISIBLE, getColor @@ -161,5 +161,5 @@ export const StyledSortableButton = styled.button.attrs retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/tables/src/styled/StyledTable.ts b/packages/tables/src/styled/StyledTable.ts index bfb20645c8..f969bd3bd7 100644 --- a/packages/tables/src/styled/StyledTable.ts +++ b/packages/tables/src/styled/StyledTable.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme } from 'styled-components'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'tables.table'; @@ -32,5 +32,5 @@ export const StyledTable = styled.table.attrs({ font-size: ${props => props.theme.fontSizes.md}; direction: ${props => props.theme.rtl && 'rtl'}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/tabs/src/styled/StyledTab.ts b/packages/tabs/src/styled/StyledTab.ts index 6cd4d074ce..87065ad374 100644 --- a/packages/tabs/src/styled/StyledTab.ts +++ b/packages/tabs/src/styled/StyledTab.ts @@ -6,7 +6,7 @@ */ import styled, { DefaultTheme, css, ThemeProps } from 'styled-components'; -import { focusStyles, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { focusStyles, componentStyles, getColor } from '@zendeskgarden/react-theming'; import { stripUnit } from 'polished'; const COMPONENT_ID = 'tabs.tab'; @@ -147,5 +147,5 @@ export const StyledTab = styled.div.attrs({ cursor: default; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/tabs/src/styled/StyledTabList.ts b/packages/tabs/src/styled/StyledTabList.ts index 82c16d93c7..b4cbfe9946 100644 --- a/packages/tabs/src/styled/StyledTabList.ts +++ b/packages/tabs/src/styled/StyledTabList.ts @@ -6,7 +6,7 @@ */ import styled, { DefaultTheme, ThemeProps, css } from 'styled-components'; -import { retrieveComponentStyles, getLineHeight, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getLineHeight, getColor } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'tabs.tablist'; @@ -58,5 +58,5 @@ export const StyledTabList = styled.div.attrs({ ${colorStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/tabs/src/styled/StyledTabPanel.ts b/packages/tabs/src/styled/StyledTabPanel.ts index 6daf08974d..0756244b23 100644 --- a/packages/tabs/src/styled/StyledTabPanel.ts +++ b/packages/tabs/src/styled/StyledTabPanel.ts @@ -6,7 +6,7 @@ */ import styled, { DefaultTheme, ThemeProps, css } from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'tabs.tabpanel'; @@ -36,5 +36,5 @@ export const StyledTabPanel = styled.div.attrs({ display: none; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/tabs/src/styled/StyledTabs.ts b/packages/tabs/src/styled/StyledTabs.ts index eee8226977..d66b31ee31 100644 --- a/packages/tabs/src/styled/StyledTabs.ts +++ b/packages/tabs/src/styled/StyledTabs.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 = 'tabs.tabs'; @@ -25,5 +25,5 @@ export const StyledTabs = styled.div.attrs({ overflow: hidden; direction: ${props => props.theme.rtl && 'rtl'}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/tags/src/styled/StyledAvatar.ts b/packages/tags/src/styled/StyledAvatar.ts index a5fe58f062..59d04c0aa5 100644 --- a/packages/tags/src/styled/StyledAvatar.ts +++ b/packages/tags/src/styled/StyledAvatar.ts @@ -6,7 +6,7 @@ */ import styled, { DataAttributes } from 'styled-components'; -import { StyledBaseIcon, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { StyledBaseIcon, componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'tags.avatar'; @@ -17,5 +17,5 @@ export const StyledAvatar = styled(StyledBaseIcon).attrs({ flex-shrink: 0; font-size: 0; /* text content reset */ - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/tags/src/styled/StyledClose.ts b/packages/tags/src/styled/StyledClose.ts index e8e04b7302..6647930490 100644 --- a/packages/tags/src/styled/StyledClose.ts +++ b/packages/tags/src/styled/StyledClose.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 = 'tags.close'; @@ -45,5 +45,5 @@ export const StyledClose = styled.button.attrs({ opacity: ${props => props.theme.opacity[1200]}; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/tags/src/styled/StyledTag.ts b/packages/tags/src/styled/StyledTag.ts index 5de6223ad5..d269e3c88c 100644 --- a/packages/tags/src/styled/StyledTag.ts +++ b/packages/tags/src/styled/StyledTag.ts @@ -9,7 +9,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { math, readableColor } from 'polished'; import { DEFAULT_THEME, - retrieveComponentStyles, + componentStyles, getLineHeight, SELECTOR_FOCUS_VISIBLE, focusStyles, @@ -271,7 +271,7 @@ export const StyledTag = styled.div.attrs({ display: ${props => props.$isRound && 'none'}; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; StyledTag.defaultProps = { diff --git a/packages/tooltips/src/styled/StyledParagraph.ts b/packages/tooltips/src/styled/StyledParagraph.ts index 7783852fd3..06d5f0aba9 100644 --- a/packages/tooltips/src/styled/StyledParagraph.ts +++ b/packages/tooltips/src/styled/StyledParagraph.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 = 'tooltip.paragraph'; @@ -19,5 +19,5 @@ export const StyledParagraph = styled.p.attrs({ })` margin: 0; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/tooltips/src/styled/StyledTitle.ts b/packages/tooltips/src/styled/StyledTitle.ts index e3d695d653..69f0baba73 100644 --- a/packages/tooltips/src/styled/StyledTitle.ts +++ b/packages/tooltips/src/styled/StyledTitle.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 = 'tooltip.title'; @@ -21,5 +21,5 @@ export const StyledTitle = styled.strong.attrs({ margin: 0; font-weight: ${props => props.theme.fontWeights.semibold}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/tooltips/src/styled/StyledTooltip.ts b/packages/tooltips/src/styled/StyledTooltip.ts index 9ba3f3ff7a..a1bc2c4d65 100644 --- a/packages/tooltips/src/styled/StyledTooltip.ts +++ b/packages/tooltips/src/styled/StyledTooltip.ts @@ -8,7 +8,7 @@ import styled, { css, DefaultTheme, ThemeProps } from 'styled-components'; import { arrowStyles, - retrieveComponentStyles, + componentStyles, getLineHeight, getArrowPosition, getColor @@ -186,5 +186,5 @@ export const StyledTooltip = styled.div.attrs({ ${colorStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/typography/src/styled/StyledBlockquote.ts b/packages/typography/src/styled/StyledBlockquote.ts index 769c64a7d4..04865ec674 100644 --- a/packages/typography/src/styled/StyledBlockquote.ts +++ b/packages/typography/src/styled/StyledBlockquote.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { getColor, componentStyles } from '@zendeskgarden/react-theming'; import { IBlockquoteProps } from '../types'; import { THEME_SIZES } from './StyledFont'; @@ -30,5 +30,5 @@ export const StyledBlockquote = styled.blockquote.attrs({ margin-top: ${props => props.theme.lineHeights[THEME_SIZES[props.size!]]}; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/typography/src/styled/StyledCode.ts b/packages/typography/src/styled/StyledCode.ts index 0f76ab0f36..f0fec6fb44 100644 --- a/packages/typography/src/styled/StyledCode.ts +++ b/packages/typography/src/styled/StyledCode.ts @@ -6,7 +6,7 @@ */ import styled, { css, DefaultTheme, ThemeProps } from 'styled-components'; -import { DEFAULT_THEME, getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { DEFAULT_THEME, getColor, componentStyles } from '@zendeskgarden/react-theming'; import { StyledFont, IStyledFontProps } from './StyledFont'; import { ICodeProps } from '../types'; @@ -69,7 +69,7 @@ export const StyledCode = styled(StyledFont as 'code').attrs({ ${props => colorStyles(props)}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; StyledCode.defaultProps = { diff --git a/packages/typography/src/styled/StyledCodeBlock.ts b/packages/typography/src/styled/StyledCodeBlock.ts index 056b98c1ff..0746f32cb8 100644 --- a/packages/typography/src/styled/StyledCodeBlock.ts +++ b/packages/typography/src/styled/StyledCodeBlock.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { getColor, componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'typography.codeblock'; @@ -35,5 +35,5 @@ export const StyledCodeBlock = styled.pre.attrs({ ${colorStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/typography/src/styled/StyledCodeBlockContainer.ts b/packages/typography/src/styled/StyledCodeBlockContainer.ts index b9bbdb8a9a..f390b8c88d 100644 --- a/packages/typography/src/styled/StyledCodeBlockContainer.ts +++ b/packages/typography/src/styled/StyledCodeBlockContainer.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles, focusStyles } from '@zendeskgarden/react-theming'; +import { componentStyles, focusStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'typography.codeblock_container'; @@ -22,5 +22,5 @@ export const StyledCodeBlockContainer = styled.div.attrs({ theme: props.theme })} - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/typography/src/styled/StyledCodeBlockLine.ts b/packages/typography/src/styled/StyledCodeBlockLine.ts index 5f49e05b8f..711b418312 100644 --- a/packages/typography/src/styled/StyledCodeBlockLine.ts +++ b/packages/typography/src/styled/StyledCodeBlockLine.ts @@ -7,7 +7,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { Language } from 'prism-react-renderer'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; import { Diff, Size } from '../types'; import { StyledFont, THEME_SIZES } from './StyledFont'; @@ -112,5 +112,5 @@ export const StyledCodeBlockLine = styled(StyledFont as 'code').attrs({ content: ''; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/typography/src/styled/StyledCodeBlockToken.ts b/packages/typography/src/styled/StyledCodeBlockToken.ts index c82aa359b5..b7592520c7 100644 --- a/packages/typography/src/styled/StyledCodeBlockToken.ts +++ b/packages/typography/src/styled/StyledCodeBlockToken.ts @@ -6,7 +6,7 @@ */ import styled, { css, DefaultTheme, ThemeProps } from 'styled-components'; -import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { getColor, componentStyles } from '@zendeskgarden/react-theming'; import { StyledCodeBlock } from './StyledCodeBlock'; const COMPONENT_ID = 'typography.codeblock_token'; @@ -189,5 +189,5 @@ export const StyledCodeBlockToken = styled.span.attrs({ ${colorStyles}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/typography/src/styled/StyledEllipsis.ts b/packages/typography/src/styled/StyledEllipsis.ts index 6e646d111b..faac46337e 100644 --- a/packages/typography/src/styled/StyledEllipsis.ts +++ b/packages/typography/src/styled/StyledEllipsis.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 = 'typography.ellipsis'; @@ -19,5 +19,5 @@ export const StyledEllipsis = styled.div.attrs({ white-space: nowrap; direction: ${props => (props.theme.rtl ? 'rtl' : 'ltr')}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/typography/src/styled/StyledFont.tsx b/packages/typography/src/styled/StyledFont.tsx index 2ab2108192..cd63772a6f 100644 --- a/packages/typography/src/styled/StyledFont.tsx +++ b/packages/typography/src/styled/StyledFont.tsx @@ -7,7 +7,7 @@ import styled, { css, DefaultTheme, ThemeProps } from 'styled-components'; import { hideVisually, math } from 'polished'; -import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; import { SIZE } from '../types'; const COMPONENT_ID = 'typography.font'; @@ -103,7 +103,7 @@ export const StyledFont = styled.div.attrs({ ${hideVisually()}; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; StyledFont.defaultProps = { diff --git a/packages/typography/src/styled/StyledIcon.ts b/packages/typography/src/styled/StyledIcon.ts index 7b2a736fbc..fd7678ac09 100644 --- a/packages/typography/src/styled/StyledIcon.ts +++ b/packages/typography/src/styled/StyledIcon.ts @@ -6,7 +6,7 @@ */ import styled, { css, ThemeProps, DefaultTheme, DataAttributes } from 'styled-components'; -import { StyledBaseIcon, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { StyledBaseIcon, componentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'typography.icon'; @@ -35,5 +35,5 @@ export const StyledIcon = styled(StyledBaseIcon).attrs({ ${props => sizeStyles(props)}; - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `; diff --git a/packages/typography/src/styled/StyledList.ts b/packages/typography/src/styled/StyledList.ts index a1165cc534..5f339272dd 100644 --- a/packages/typography/src/styled/StyledList.ts +++ b/packages/typography/src/styled/StyledList.ts @@ -6,7 +6,7 @@ */ import styled, { css, DefaultTheme, ThemeProps } from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { IOrderedListProps, IUnorderedListProps } from '../types'; const listStyles = (props: { $listType?: string } & ThemeProps) => { @@ -32,8 +32,9 @@ export const StyledOrderedList = styled.ol.attrs({ 'data-garden-id': ORDERED_ID, 'data-garden-version': PACKAGE_VERSION })` - ${props => listStyles(props)}; - ${props => retrieveComponentStyles(ORDERED_ID, props)}; + ${listStyles}; + + ${componentStyles}; `; const UNORDERED_ID = 'typography.unordered_list'; @@ -46,6 +47,7 @@ export const StyledUnorderedList = styled.ul.attrs({ 'data-garden-id': UNORDERED_ID, 'data-garden-version': PACKAGE_VERSION })` - ${props => listStyles(props)}; - ${props => retrieveComponentStyles(UNORDERED_ID, props)}; + ${listStyles}; + + ${componentStyles}; `; diff --git a/packages/typography/src/styled/StyledListItem.ts b/packages/typography/src/styled/StyledListItem.ts index b8f2dbe53a..68695efe32 100644 --- a/packages/typography/src/styled/StyledListItem.ts +++ b/packages/typography/src/styled/StyledListItem.ts @@ -7,11 +7,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { math } from 'polished'; -import { - DEFAULT_THEME, - getLineHeight, - retrieveComponentStyles -} from '@zendeskgarden/react-theming'; +import { DEFAULT_THEME, getLineHeight, componentStyles } from '@zendeskgarden/react-theming'; import { Size } from '../types'; import { StyledOrderedList, StyledUnorderedList } from './StyledList'; import { StyledFont } from './StyledFont'; @@ -65,9 +61,9 @@ export const StyledOrderedListItem = styled(StyledFont as 'li').attrs({ padding-${props => (props.theme.rtl ? 'right' : 'left')}: ${props => math(`${props.theme.space.base} * 1px`)}; - ${props => listItemStyles(props)}; + ${listItemStyles}; - ${props => retrieveComponentStyles(ORDERED_ID, props)}; + ${componentStyles}; `; StyledOrderedListItem.defaultProps = { @@ -82,9 +78,9 @@ export const StyledUnorderedListItem = styled(StyledFont as 'li').attrs({ 'data-garden-version': PACKAGE_VERSION, as: 'li' })` - ${props => listItemStyles(props)}; + ${listItemStyles}; - ${props => retrieveComponentStyles(UNORDERED_ID, props)}; + ${componentStyles}; `; StyledUnorderedListItem.defaultProps = { diff --git a/packages/typography/src/styled/StyledParagraph.ts b/packages/typography/src/styled/StyledParagraph.ts index 2ef3b1d0ff..e91ad5254d 100644 --- a/packages/typography/src/styled/StyledParagraph.ts +++ b/packages/typography/src/styled/StyledParagraph.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { componentStyles } from '@zendeskgarden/react-theming'; import { IParagraphProps } from '../types'; import { THEME_SIZES } from './StyledFont'; @@ -25,5 +25,5 @@ export const StyledParagraph = styled.p.attrs({ margin-top: ${props => props.theme.lineHeights[THEME_SIZES[props.size!]]}; } - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; + ${componentStyles}; `;