Skip to content

Commit 7a3ba84

Browse files
ze-floze-flo
authored
feat(typography): new light/dark mode colors (excluding CodeBlock) (#1820)
1 parent dd386ec commit 7a3ba84

File tree

7 files changed

+177
-163
lines changed

7 files changed

+177
-163
lines changed

‎.storybook/preview.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ const GlobalPreviewStyling = createGlobalStyle`
4949
background-color: ${p => getColor({ theme: p.theme, variable: 'background.default' })};
5050
/* stylelint-disable-next-line declaration-no-important */
5151
padding: 0 !important;
52+
color: ${p => getColor({ theme: p.theme, variable: 'foreground.default' })};
5253
font-family: ${p => p.theme.fonts.system};
5354
}
5455
`;

‎packages/typography/src/elements/Code.spec.tsx‎

Lines changed: 73 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,18 @@
66
*/
77

88
import React from 'react';
9-
import { render, renderRtl } from 'garden-test-utils';
10-
import { PALETTE_V8 } from '@zendeskgarden/react-theming';
9+
import { getRenderFn, render, renderRtl } from 'garden-test-utils';
10+
import { PALETTE } from '@zendeskgarden/react-theming';
1111
import { Code } from './Code';
12+
import { ICodeProps } from 'packages/typography/src/types';
1213

1314
describe('Code', () => {
15+
it('renders the expected element', () => {
16+
const { container } = render(<Code />);
17+
18+
expect(container.firstChild!.nodeName).toBe('CODE');
19+
});
20+
1421
it('applies correct styling with RTL locale', () => {
1522
const { container } = renderRtl(<Code />);
1623

@@ -26,7 +33,23 @@ describe('Code', () => {
2633
);
2734
});
2835

36+
it('renders anchor-inherited color', () => {
37+
const { getByTestId } = render(
38+
<a href="test">
39+
<Code data-test-id="test" />
40+
</a>
41+
);
42+
43+
expect(getByTestId('test')).toHaveStyleRule('color', 'inherit', { modifier: 'a &' });
44+
});
45+
2946
describe('size', () => {
47+
it('renders inherited size', () => {
48+
const { container } = render(<Code />);
49+
50+
expect(container.firstChild).not.toHaveStyleRule('font-size', 'inherit');
51+
});
52+
3053
it('renders small styling if provided', () => {
3154
const { container } = render(<Code size="small" />);
3255

@@ -47,28 +70,55 @@ describe('Code', () => {
4770
});
4871

4972
describe('hue', () => {
50-
it('renders grey hue if provided', () => {
51-
const { container } = render(<Code hue="grey" />);
52-
53-
expect(container.firstChild).toHaveStyleRule('background-color', PALETTE_V8.grey[200]);
54-
});
55-
56-
it('renders green hue if provided', () => {
57-
const { container } = render(<Code hue="green" />);
58-
59-
expect(container.firstChild).toHaveStyleRule('background-color', PALETTE_V8.green[200]);
60-
});
61-
62-
it('renders red hue if provided', () => {
63-
const { container } = render(<Code hue="red" />);
64-
65-
expect(container.firstChild).toHaveStyleRule('background-color', PALETTE_V8.red[200]);
73+
it.each<
74+
[
75+
ICodeProps['hue'],
76+
'dark' | 'light',
77+
{
78+
color: string;
79+
bgColor: string;
80+
}
81+
]
82+
>([
83+
// light mode
84+
['grey', 'light', { color: PALETTE.grey[900], bgColor: PALETTE.grey[200] }],
85+
['green', 'light', { color: PALETTE.green[900], bgColor: PALETTE.green[200] }],
86+
['red', 'light', { color: PALETTE.red[900], bgColor: PALETTE.red[200] }],
87+
['yellow', 'light', { color: PALETTE.yellow[900], bgColor: PALETTE.yellow[200] }],
88+
// dark mode
89+
['grey', 'dark', { color: PALETTE.grey[300], bgColor: PALETTE.grey[900] }],
90+
['green', 'dark', { color: PALETTE.green[300], bgColor: PALETTE.green[900] }],
91+
['red', 'dark', { color: PALETTE.red[300], bgColor: PALETTE.red[900] }],
92+
['yellow', 'dark', { color: PALETTE.yellow[300], bgColor: PALETTE.yellow[900] }]
93+
])('renders with a "%s" hue in "%s" mode', (hue, mode, { color, bgColor }) => {
94+
const { container } = getRenderFn(mode)(<Code hue={hue} />);
95+
96+
expect(container.firstChild).toHaveStyleRule('color', color);
97+
expect(container.firstChild).toHaveStyleRule('background-color', bgColor);
6698
});
6799

68-
it('renders yellow hue if provided', () => {
69-
const { container } = render(<Code hue="yellow" />);
70-
71-
expect(container.firstChild).toHaveStyleRule('background-color', PALETTE_V8.yellow[200]);
72-
});
100+
it.each<
101+
[
102+
string | undefined,
103+
'dark' | 'light',
104+
{
105+
color: string;
106+
bgColor: string;
107+
}
108+
]
109+
>([
110+
['azure', 'light', { color: PALETTE.grey[900], bgColor: PALETTE.grey[200] }],
111+
[undefined, 'light', { color: PALETTE.grey[900], bgColor: PALETTE.grey[200] }],
112+
['azure', 'dark', { color: PALETTE.grey[300], bgColor: PALETTE.grey[900] }],
113+
[undefined, 'dark', { color: PALETTE.grey[300], bgColor: PALETTE.grey[900] }]
114+
])(
115+
'outputs the grey hue color combination for an unsupported "%s" hue in "%s" mode',
116+
(hue, mode, { color, bgColor }) => {
117+
const { container } = getRenderFn(mode)(<Code hue={hue as any} />);
118+
119+
expect(container.firstChild).toHaveStyleRule('color', color);
120+
expect(container.firstChild).toHaveStyleRule('background-color', bgColor);
121+
}
122+
);
73123
});
74124
});

‎packages/typography/src/elements/span/Span.spec.tsx‎

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

88
import React from 'react';
9-
import { DEFAULT_THEME, PALETTE_V8 } from '@zendeskgarden/react-theming';
10-
import { render, renderRtl } from 'garden-test-utils';
9+
import { DEFAULT_THEME, PALETTE } from '@zendeskgarden/react-theming';
10+
import { getRenderFn, render, renderRtl } from 'garden-test-utils';
1111
import { Span } from './Span';
1212
import TestIcon from '@zendeskgarden/svg-icons/src/16/gear-stroke.svg';
1313

@@ -47,36 +47,48 @@ describe('Span', () => {
4747
});
4848

4949
describe('hue', () => {
50-
it('renders the hue provided', () => {
51-
[
52-
'grey',
53-
'blue',
54-
'kale',
55-
'red',
56-
'green',
57-
'fuschia',
58-
'pink',
59-
'crimson',
60-
'orange',
61-
'lemon',
62-
'lime',
63-
'mint',
64-
'teal',
65-
'azure',
66-
'royal',
67-
'purple'
68-
].forEach(color => {
69-
const { container } = render(<Span hue={color as any} />);
70-
71-
expect(container.firstChild).toHaveStyleRule('color', (PALETTE_V8 as any)[color][600]);
72-
});
50+
const cases = [
51+
'grey',
52+
'blue',
53+
'kale',
54+
'red',
55+
'green',
56+
'fuschia',
57+
'pink',
58+
'crimson',
59+
'orange',
60+
'lemon',
61+
'lime',
62+
'mint',
63+
'teal',
64+
'azure',
65+
'royal',
66+
'purple',
67+
'yellow'
68+
].reduce<[string, 'light' | 'dark'][]>((arr, hue) => {
69+
arr.push([hue, 'light']);
70+
arr.push([hue, 'dark']);
71+
72+
return arr;
73+
}, []);
74+
75+
it.each(cases)('renders with a "%s" hue in "%s" mode', (hue, mode) => {
76+
const { container } = getRenderFn(mode)(<Span hue={hue} />);
77+
78+
expect(container.firstChild).toHaveStyleRule(
79+
'color',
80+
(PALETTE as any)[hue][mode === 'light' ? 700 : 500]
81+
);
7382
});
7483

75-
it('handles yellow hue with specialized shading', () => {
76-
const { container } = render(<Span hue="yellow" />);
84+
it.each<['light' | 'dark']>([['light'], ['dark']])(
85+
'inherits the parent color in "%s" mode',
86+
mode => {
87+
const { container } = getRenderFn(mode)(<Span />);
7788

78-
expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.yellow[700]);
79-
});
89+
expect(container.firstChild).toHaveStyleRule('color', undefined);
90+
}
91+
);
8092
});
8193

8294
it('applies expected styling with RTL locale', () => {

‎packages/typography/src/styled/StyledBlockquote.ts‎

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

88
import styled from 'styled-components';
9-
import { DEFAULT_THEME, getColorV8, retrieveComponentStyles } from '@zendeskgarden/react-theming';
9+
import { DEFAULT_THEME, getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
1010
import { IBlockquoteProps } from '../types';
1111
import { THEME_SIZES } from './StyledFont';
1212

@@ -20,7 +20,7 @@ export const StyledBlockquote = styled.blockquote.attrs({
2020
/* stylelint-disable property-no-unknown */
2121
border-${props => (props.theme.rtl ? 'right' : 'left')}: ${props =>
2222
props.theme.shadowWidths.sm} solid;
23-
border-color: ${props => getColorV8('neutralHue', 400, props.theme)};
23+
border-color: ${props => getColor({ theme: props.theme, variable: 'border.default' })};
2424
padding: 0;
2525
padding-${props => (props.theme.rtl ? 'right' : 'left')}: ${props =>
2626
props.theme.space.base * 4}px;

‎packages/typography/src/styled/StyledCode.spec.tsx‎

Lines changed: 0 additions & 77 deletions
This file was deleted.

‎packages/typography/src/styled/StyledCode.ts‎

Lines changed: 35 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,42 @@
66
*/
77

88
import styled, { css, DefaultTheme, ThemeProps } from 'styled-components';
9-
import { DEFAULT_THEME, getColorV8, retrieveComponentStyles } from '@zendeskgarden/react-theming';
9+
import { DEFAULT_THEME, getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
1010
import { StyledFont, IStyledFontProps } from './StyledFont';
1111
import { ICodeProps } from '../types';
1212

1313
const COMPONENT_ID = 'typography.code';
1414

15-
const colorStyles = (props: IStyledCodeProps & ThemeProps<DefaultTheme>) => {
16-
const hue = props.hue || 'neutralHue';
17-
const backgroundColor = getColorV8(hue, 200, props.theme);
18-
const shade = hue === 'yellow' ? 800 : 700;
19-
const foregroundColor = getColorV8(hue, shade, props.theme);
15+
const colorStyles = ({ hue, theme }: IStyledCodeProps & ThemeProps<DefaultTheme>) => {
16+
const bgColorArgs: Parameters<typeof getColor>[0] = {
17+
theme,
18+
light: { offset: 100 },
19+
dark: { offset: -100 }
20+
};
21+
const fgColorArgs: Parameters<typeof getColor>[0] = { theme };
22+
23+
switch (hue) {
24+
case 'green':
25+
bgColorArgs.variable = 'background.success';
26+
fgColorArgs.variable = 'foreground.successEmphasis';
27+
break;
28+
case 'red':
29+
bgColorArgs.variable = 'background.danger';
30+
fgColorArgs.variable = 'foreground.dangerEmphasis';
31+
break;
32+
case 'yellow':
33+
bgColorArgs.variable = 'background.warning';
34+
fgColorArgs.variable = 'foreground.warningEmphasis';
35+
break;
36+
// includes grey
37+
default:
38+
fgColorArgs.variable = 'foreground.default';
39+
bgColorArgs.variable = 'background.subtle';
40+
break;
41+
}
42+
43+
const backgroundColor = getColor(bgColorArgs);
44+
const foregroundColor = getColor(fgColorArgs);
2045

2146
return css`
2247
background-color: ${backgroundColor};
@@ -29,14 +54,15 @@ const colorStyles = (props: IStyledCodeProps & ThemeProps<DefaultTheme>) => {
2954
};
3055

3156
interface IStyledCodeProps extends Omit<IStyledFontProps, 'size'> {
32-
hue?: string;
57+
hue?: ICodeProps['hue'];
3358
size?: ICodeProps['size'];
3459
}
3560

3661
export const StyledCode = styled(StyledFont as 'code').attrs({
3762
'data-garden-id': COMPONENT_ID,
3863
'data-garden-version': PACKAGE_VERSION,
39-
as: 'code'
64+
as: 'code',
65+
isMonospace: true
4066
})<IStyledCodeProps>`
4167
border-radius: ${props => props.theme.borderRadii.sm};
4268
padding: 1.5px;
@@ -48,7 +74,6 @@ export const StyledCode = styled(StyledFont as 'code').attrs({
4874

4975
StyledCode.defaultProps = {
5076
theme: DEFAULT_THEME,
51-
isMonospace: true,
52-
hue: 'neutralHue',
77+
hue: 'grey',
5378
size: 'inherit'
5479
};

0 commit comments

Comments
 (0)