Skip to content

Commit f906ed4

Browse files
jzempeljzempel
authored
feat: adds an internal getColorV8 utility (#1754)
1 parent 009d7ef commit f906ed4

File tree

165 files changed

+748
-633
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

165 files changed

+748
-633
lines changed

‎package-lock.json‎

Lines changed: 98 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
*/
77

88
import styled, { ThemeProps, DefaultTheme, css } from 'styled-components';
9-
import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
9+
import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
1010

1111
const COMPONENT_ID = '{{pluralize (lowercase component)}}.{{lowercase component}}';
1212

@@ -15,12 +15,12 @@ export interface IStyled{{capitalize component}}Props extends ThemeProps<Default
1515
}
1616

1717
const colorStyles = (props: IStyled{{capitalize component}}Props) => {
18-
const backgroundColor = getColor('primaryHue', 600, props.theme, 0.08);
19-
const borderColor = getColor('primaryHue', 600, props.theme);
18+
const backgroundColor = getColorV8('primaryHue', 600, props.theme, 0.08);
19+
const borderColor = getColorV8('primaryHue', 600, props.theme);
2020
const foregroundColor = props.theme.colors.foreground;
21-
const hoverBackgroundColor = getColor('primaryHue', 600, props.theme, 0.2);
21+
const hoverBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.2);
2222
const focusBoxShadow = props.theme.shadows.md(
23-
getColor('primaryHue', 600, props.theme, 0.35) as string
23+
getColorV8('primaryHue', 600, props.theme, 0.35) as string
2424
);
2525

2626
return css`

‎packages/accordions/src/styled/accordion/StyledButton.spec.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
import React from 'react';
99
import { render, renderRtl } from 'garden-test-utils';
10-
import { getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming';
10+
import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
1111
import { StyledButton } from './StyledButton';
1212

1313
describe('StyledButton', () => {
@@ -37,7 +37,7 @@ describe('StyledButton', () => {
3737

3838
expect(container.firstChild).toHaveStyleRule(
3939
'color',
40-
getColor('primaryHue', 600, DEFAULT_THEME)
40+
getColorV8('primaryHue', 600, DEFAULT_THEME)
4141
);
4242

4343
expect(container.firstChild).toHaveStyleRule('cursor', 'pointer', {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
99
import {
1010
getLineHeight,
11-
getColor,
11+
getColorV8,
1212
retrieveComponentStyles,
1313
DEFAULT_THEME
1414
} from '@zendeskgarden/react-theming';
@@ -27,7 +27,7 @@ const colorStyles = (props: ThemeProps<DefaultTheme> & IStyledButton) => {
2727
let color = props.theme.colors.foreground;
2828

2929
if (showColor && props.isHovered) {
30-
color = getColor('primaryHue', 600, props.theme)!;
30+
color = getColorV8('primaryHue', 600, props.theme)!;
3131
}
3232

3333
return css`

‎packages/accordions/src/styled/accordion/StyledPanel.spec.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
import React from 'react';
99
import { render } from 'garden-test-utils';
10-
import { getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming';
10+
import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
1111
import { StyledPanel } from './StyledPanel';
1212

1313
describe('StyledPanel', () => {
@@ -19,7 +19,7 @@ describe('StyledPanel', () => {
1919
expect(container.firstChild).toHaveStyleRule('border-bottom', `${DEFAULT_THEME.borders.sm}`);
2020
expect(container.firstChild).toHaveStyleRule(
2121
'border-bottom-color',
22-
`${getColor('neutralHue', 300, DEFAULT_THEME)}`
22+
`${getColorV8('neutralHue', 300, DEFAULT_THEME)}`
2323
);
2424
expect(container.firstChild).toHaveStyleRule(
2525
'transition',

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
99
import {
10-
getColor,
10+
getColorV8,
1111
getLineHeight,
1212
retrieveComponentStyles,
1313
DEFAULT_THEME
@@ -27,7 +27,7 @@ const colorStyles = (props: IStyledPanel & ThemeProps<DefaultTheme>) => {
2727
const { theme, isBare } = props;
2828

2929
return css`
30-
border-bottom-color: ${isBare ? 'transparent' : getColor('neutralHue', 300, theme)};
30+
border-bottom-color: ${isBare ? 'transparent' : getColorV8('neutralHue', 300, theme)};
3131
`;
3232
};
3333

‎packages/accordions/src/styled/accordion/StyledRotateIcon.spec.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
import React from 'react';
99
import { render, renderRtl } from 'garden-test-utils';
10-
import { getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming';
10+
import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
1111
import { StyledRotateIcon } from './StyledRotateIcon';
1212

1313
describe('StyledRotateIcon', () => {
@@ -22,7 +22,7 @@ describe('StyledRotateIcon', () => {
2222
expect(container.firstChild).toHaveStyleRule('padding', '20px');
2323
expect(container.firstChild).toHaveStyleRule(
2424
'color',
25-
getColor('neutralHue', 600, DEFAULT_THEME)
25+
getColorV8('neutralHue', 600, DEFAULT_THEME)
2626
);
2727
});
2828

@@ -65,7 +65,7 @@ describe('StyledRotateIcon', () => {
6565

6666
expect(container.firstChild).toHaveStyleRule(
6767
'color',
68-
getColor('primaryHue', 600, DEFAULT_THEME)
68+
getColorV8('primaryHue', 600, DEFAULT_THEME)
6969
);
7070
});
7171
});

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
import { cloneElement, Children } from 'react';
99
import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
10-
import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
10+
import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
1111

1212
const COMPONENT_ID = 'accordions.rotate_icon';
1313

@@ -17,10 +17,10 @@ interface IStyledRotateIcon {
1717

1818
const colorStyles = (props: ThemeProps<DefaultTheme> & any) => {
1919
const showColor = props.isCollapsible || !props.isRotated;
20-
let color = getColor('neutralHue', 600, props.theme);
20+
let color = getColorV8('neutralHue', 600, props.theme);
2121

2222
if (showColor && props.isHovered) {
23-
color = getColor('primaryHue', 600, props.theme);
23+
color = getColorV8('primaryHue', 600, props.theme);
2424
}
2525

2626
return css`

‎packages/accordions/src/styled/stepper/StyledIcon.spec.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
import React from 'react';
99
import { render } from 'garden-test-utils';
1010
import { StyledIcon } from './StyledIcon';
11-
import { getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming';
11+
import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
1212

1313
describe('StyledIcon', () => {
1414
it('renders default styles', () => {
@@ -17,7 +17,7 @@ describe('StyledIcon', () => {
1717
expect(container.firstChild).toHaveStyleRule('color', DEFAULT_THEME.colors.foreground);
1818
expect(container.firstChild).toHaveStyleRule(
1919
'background',
20-
getColor('neutralHue', 200, DEFAULT_THEME)
20+
getColorV8('neutralHue', 200, DEFAULT_THEME)
2121
);
2222
expect(container.firstChild).toHaveStyleRule('margin-right', '12px');
2323
expect(container.firstChild).not.toHaveStyleRule('margin-bottom');
@@ -28,7 +28,7 @@ describe('StyledIcon', () => {
2828
expect(container.firstChild).toHaveStyleRule('color', DEFAULT_THEME.colors.background);
2929
expect(container.firstChild).toHaveStyleRule(
3030
'background',
31-
getColor('neutralHue', 600, DEFAULT_THEME)
31+
getColorV8('neutralHue', 600, DEFAULT_THEME)
3232
);
3333
});
3434

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
99
import {
10-
getColor,
10+
getColorV8,
1111
getLineHeight,
1212
retrieveComponentStyles,
1313
DEFAULT_THEME
@@ -49,8 +49,8 @@ const sizeStyles = (props: IStyledIcon & ThemeProps<DefaultTheme>) => {
4949
const colorStyles = (props: IStyledIcon & ThemeProps<DefaultTheme>) => {
5050
return css`
5151
background: ${props.isActive
52-
? getColor('neutralHue', 600, props.theme)
53-
: getColor('neutralHue', 200, props.theme)};
52+
? getColorV8('neutralHue', 600, props.theme)
53+
: getColorV8('neutralHue', 200, props.theme)};
5454
color: ${props.isActive ? props.theme.colors.background : props.theme.colors.foreground};
5555
`;
5656
};

0 commit comments

Comments
 (0)