Skip to content

Commit d1fbad8

Browse files
jzempeljzempel
committed
feat: adds an internal getColorV8 utility (#1754)
1 parent f1adc24 commit d1fbad8

File tree

8 files changed

+39
-39
lines changed

8 files changed

+39
-39
lines changed

‎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/theming/src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export { default as DEFAULT_THEME } from './elements/theme';
1010
export { default as PALETTE } from './elements/palette';
1111
export { default as retrieveComponentStyles } from './utils/retrieveComponentStyles';
1212
export { getArrowPosition } from './utils/getArrowPosition';
13-
export { getColor as getColorV8 } from './utils/_getColor';
13+
export { getColorV8 as getColor, getColorV8 } from './utils/getColorV8';
1414
export { getFloatingPlacements } from './utils/getFloatingPlacements';
1515
export { getFocusBoxShadow } from './utils/getFocusBoxShadow';
1616
export { default as getLineHeight } from './utils/getLineHeight';

‎packages/theming/src/utils/focusStyles.spec.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import React from 'react';
99
import { render } from 'garden-test-utils';
1010
import styled, { ThemeProps, DefaultTheme, CSSObject } from 'styled-components';
1111
import { focusStyles } from './focusStyles';
12-
import { Hue } from './_getColor';
12+
import { Hue } from './getColorV8';
1313
import DEFAULT_THEME from '../elements/theme';
1414
import PALETTE from '../elements/palette';
1515

‎packages/theming/src/utils/_getColor.spec.ts‎ renamed to ‎packages/theming/src/utils/getColorV8.spec.ts‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,88 +5,88 @@
55
* found at http://www.apache.org/licenses/LICENSE-2.0.
66
*/
77

8-
import { getColor } from './_getColor';
8+
import { getColorV8 } from './getColorV8';
99
import PALETTE from '../elements/palette';
1010
import DEFAULT_THEME from '../elements/theme';
1111
import { darken, lighten, rgba } from 'polished';
1212

1313
const DEFAULT_SHADE = 600;
1414

15-
describe('_getColor', () => {
15+
describe('getColorV8', () => {
1616
describe('by hue', () => {
1717
it('gets the hue specified by string', () => {
18-
const color = getColor('red');
18+
const color = getColorV8('red');
1919
const expected = PALETTE.red[DEFAULT_SHADE];
2020

2121
expect(color).toBe(expected);
2222
});
2323

2424
it('gets the hue specified by object', () => {
25-
const color = getColor(PALETTE.green);
25+
const color = getColorV8(PALETTE.green);
2626
const expected = PALETTE.green[DEFAULT_SHADE];
2727

2828
expect(color).toBe(expected);
2929
});
3030

3131
it('falls back when the hue is off palette', () => {
3232
const expected = 'orchid';
33-
const color = getColor(expected);
33+
const color = getColorV8(expected);
3434

3535
expect(color).toBe(expected);
3636
});
3737

3838
describe('by `color` key', () => {
3939
it('gets the default background color', () => {
40-
const color = getColor('background');
40+
const color = getColorV8('background');
4141
const expected = DEFAULT_THEME.colors.background;
4242

4343
expect(color).toBe(expected);
4444
});
4545

4646
it('gets the default foreground color', () => {
47-
const color = getColor('foreground');
47+
const color = getColorV8('foreground');
4848
const expected = DEFAULT_THEME.colors.foreground;
4949

5050
expect(color).toBe(expected);
5151
});
5252

5353
it('gets the default primary color', () => {
54-
const color = getColor('primaryHue');
54+
const color = getColorV8('primaryHue');
5555
const expected = (PALETTE as any)[DEFAULT_THEME.colors.primaryHue][DEFAULT_SHADE];
5656

5757
expect(color).toBe(expected);
5858
});
5959

6060
it('gets the default danger color', () => {
61-
const color = getColor('dangerHue');
61+
const color = getColorV8('dangerHue');
6262
const expected = (PALETTE as any)[DEFAULT_THEME.colors.dangerHue][DEFAULT_SHADE];
6363

6464
expect(color).toBe(expected);
6565
});
6666

6767
it('gets the default warning color', () => {
68-
const color = getColor('warningHue');
68+
const color = getColorV8('warningHue');
6969
const expected = (PALETTE as any)[DEFAULT_THEME.colors.warningHue][DEFAULT_SHADE];
7070

7171
expect(color).toBe(expected);
7272
});
7373

7474
it('gets the default success color', () => {
75-
const color = getColor('successHue');
75+
const color = getColorV8('successHue');
7676
const expected = (PALETTE as any)[DEFAULT_THEME.colors.successHue][DEFAULT_SHADE];
7777

7878
expect(color).toBe(expected);
7979
});
8080

8181
it('gets the default neutral color', () => {
82-
const color = getColor('neutralHue');
82+
const color = getColorV8('neutralHue');
8383
const expected = (PALETTE as any)[DEFAULT_THEME.colors.neutralHue][DEFAULT_SHADE];
8484

8585
expect(color).toBe(expected);
8686
});
8787

8888
it('gets the default chrome color', () => {
89-
const color = getColor('chromeHue');
89+
const color = getColorV8('chromeHue');
9090
const expected = (PALETTE as any)[DEFAULT_THEME.colors.chromeHue][DEFAULT_SHADE];
9191

9292
expect(color).toBe(expected);
@@ -96,44 +96,44 @@ describe('_getColor', () => {
9696

9797
describe('by shade', () => {
9898
it('gets the specified shade of hue', () => {
99-
const color = getColor('red', 100);
99+
const color = getColorV8('red', 100);
100100
const expected = PALETTE.red[100];
101101

102102
expect(color).toBe(expected);
103103
});
104104

105105
it('darkens the color if shade is greater than what exists within the hue', () => {
106-
const color = getColor('blue', 900);
106+
const color = getColorV8('blue', 900);
107107
const expected = darken(0.05, PALETTE.blue[800]);
108108

109109
expect(color).toBe(expected);
110110
});
111111

112112
it('darkens a non-hue color if shade is greater than the default', () => {
113113
const hex = '#fd5a1e';
114-
const color = getColor(hex, DEFAULT_SHADE + 100);
114+
const color = getColorV8(hex, DEFAULT_SHADE + 100);
115115
const expected = darken(0.05, hex);
116116

117117
expect(color).toBe(expected);
118118
});
119119

120120
it('lightens the color if shade is lesser than what what exists within the hue', () => {
121-
const color = getColor('blue', 0);
121+
const color = getColorV8('blue', 0);
122122
const expected = lighten(0.05, PALETTE.blue[100]);
123123

124124
expect(color).toBe(expected);
125125
});
126126

127127
it('lightens a non-hue color if shade is greater than the default', () => {
128128
const hex = '#fd5a1e';
129-
const color = getColor(hex, DEFAULT_SHADE - 100);
129+
const color = getColorV8(hex, DEFAULT_SHADE - 100);
130130
const expected = lighten(0.05, hex);
131131

132132
expect(color).toBe(expected);
133133
});
134134

135135
it('is undefined if shade is invalid', () => {
136-
const color = getColor('red', NaN);
136+
const color = getColorV8('red', NaN);
137137

138138
expect(color).toBeUndefined();
139139
});
@@ -158,13 +158,13 @@ describe('_getColor', () => {
158158

159159
it('falls back when hue is off palette', () => {
160160
const expected = 'blue';
161-
const color = getColor(expected, undefined, theme);
161+
const color = getColorV8(expected, undefined, theme);
162162

163163
expect(color).toBe(expected);
164164
});
165165

166166
it('gets the specified color from the theme', () => {
167-
const color = getColor('test', 400, theme);
167+
const color = getColorV8('test', 400, theme);
168168
const expected = theme.palette.test[400];
169169

170170
expect(color).toBe(expected);
@@ -178,7 +178,7 @@ describe('_getColor', () => {
178178
(PALETTE as any)[DEFAULT_THEME.colors.primaryHue][DEFAULT_SHADE],
179179
transparency
180180
);
181-
const color = getColor('primaryHue', undefined, undefined, transparency);
181+
const color = getColorV8('primaryHue', undefined, undefined, transparency);
182182

183183
expect(color).toBe(expected);
184184
});

‎packages/theming/src/utils/_getColor.ts‎ renamed to ‎packages/theming/src/utils/getColorV8.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const adjust = (color: string, expected: number, actual: number) => {
3939
* @param {Object} theme Context `theme` object.
4040
* @param {Number} [transparency] An alpha-channel value between 0 and 1.
4141
*/
42-
export const getColor = memoize(
42+
export const getColorV8 = memoize(
4343
(hue: Hue, shade: number = DEFAULT_SHADE, theme?: DefaultTheme, transparency?: number) => {
4444
let retVal;
4545

‎packages/theming/src/utils/getFocusBoxShadow.spec.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
import { getFocusBoxShadow } from './getFocusBoxShadow';
99
import DEFAULT_THEME from '../elements/theme';
1010
import PALETTE from '../elements/palette';
11-
import { getColor } from './_getColor';
11+
import { getColorV8 } from './getColorV8';
1212

1313
describe('getFocusBoxShadow', () => {
1414
it('defaults as expected', () => {
@@ -41,7 +41,7 @@ describe('getFocusBoxShadow', () => {
4141
const boxShadow = getFocusBoxShadow({ theme: DEFAULT_THEME, hue, shade });
4242

4343
expect(boxShadow).toContain(
44-
`${DEFAULT_THEME.shadowWidths.md} ${getColor(hue, shade, DEFAULT_THEME)}`
44+
`${DEFAULT_THEME.shadowWidths.md} ${getColorV8(hue, shade, DEFAULT_THEME)}`
4545
);
4646
});
4747

@@ -55,7 +55,7 @@ describe('getFocusBoxShadow', () => {
5555
});
5656

5757
expect(boxShadow).toContain(
58-
`${DEFAULT_THEME.shadowWidths.xs} ${getColor(spacerHue, spacerShade, DEFAULT_THEME)}`
58+
`${DEFAULT_THEME.shadowWidths.xs} ${getColorV8(spacerHue, spacerShade, DEFAULT_THEME)}`
5959
);
6060
});
6161

‎packages/theming/src/utils/getFocusBoxShadow.ts‎

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

88
import DEFAULT_THEME from '../elements/theme';
99
import { IGardenTheme } from '../types';
10-
import { DEFAULT_SHADE, Hue, getColor } from './_getColor';
10+
import { DEFAULT_SHADE, Hue, getColorV8 } from './getColorV8';
1111

1212
export type FocusBoxShadowParameters = {
1313
boxShadow?: string;
@@ -49,14 +49,14 @@ export const getFocusBoxShadow = ({
4949
spacerWidth = 'xs',
5050
theme = DEFAULT_THEME
5151
}: FocusBoxShadowParameters) => {
52-
const color = getColor(hue, shade, theme);
52+
const color = getColorV8(hue, shade, theme);
5353
const shadow = theme.shadows[shadowWidth](color!);
5454

5555
if (spacerWidth === null) {
5656
return `${inset ? 'inset' : ''} ${shadow}`;
5757
}
5858

59-
const spacerColor = getColor(spacerHue, spacerShade, theme);
59+
const spacerColor = getColorV8(spacerHue, spacerShade, theme);
6060

6161
const retVal = `
6262
${inset ? 'inset' : ''} ${theme.shadows[spacerWidth](spacerColor!)},

‎packages/theming/src/utils/menuStyles.ts‎

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

88
import { css, DefaultTheme, keyframes } from 'styled-components';
9-
import { getColor } from './_getColor';
9+
import { getColorV8 } from './getColorV8';
1010
import DEFAULT_THEME from '../elements/theme';
1111
import { MenuPosition } from '../types';
1212

@@ -112,12 +112,12 @@ export default function menuStyles(position: MenuPosition, options: MenuOptions
112112
position: relative; /* [2] */
113113
margin: 0; /* [3] */
114114
box-sizing: border-box;
115-
border: ${theme.borders.sm} ${getColor('neutralHue', 300, theme)};
115+
border: ${theme.borders.sm} ${getColorV8('neutralHue', 300, theme)};
116116
border-radius: ${theme.borderRadii.md};
117117
box-shadow: ${theme.shadows.lg(
118118
`${theme.space.base * 5}px`,
119119
`${theme.space.base * 7.5}px`,
120-
getColor('chromeHue', 600, theme, 0.15)!
120+
getColorV8('chromeHue', 600, theme, 0.15)!
121121
)};
122122
background-color: ${theme.colors.background};
123123
cursor: default; /* [4] */

0 commit comments

Comments
 (0)