Skip to content

Commit d97aa1b

Browse files
jzempeljzempel
authored
feat(grid): new light/dark mode colors (#1839)
1 parent 54514f3 commit d97aa1b

File tree

6 files changed

+133
-82
lines changed

6 files changed

+133
-82
lines changed

‎packages/grid/demo/grid.stories.mdx

Lines changed: 36 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -32,75 +32,93 @@ set any related `Grid.Col` prop along with `children` text for display.
3232
argTypes={{
3333
rows: { name: 'children' },
3434
alignItems: {
35-
control: { type: 'select', options: ALIGN_ITEMS },
35+
control: { type: 'select' },
36+
options: ALIGN_ITEMS,
3637
table: { category: 'Grid.Row' }
3738
},
3839
alignItemsXs: {
39-
control: { type: 'select', options: ALIGN_ITEMS },
40+
control: { type: 'select' },
41+
options: ALIGN_ITEMS,
4042
table: { category: 'Grid.Row' }
4143
},
4244
alignItemsSm: {
43-
control: { type: 'select', options: ALIGN_ITEMS },
45+
control: { type: 'select' },
46+
options: ALIGN_ITEMS,
4447
table: { category: 'Grid.Row' }
4548
},
4649
alignItemsMd: {
47-
control: { type: 'select', options: ALIGN_ITEMS },
50+
control: { type: 'select' },
51+
options: ALIGN_ITEMS,
4852
table: { category: 'Grid.Row' }
4953
},
5054
alignItemsLg: {
51-
control: { type: 'select', options: ALIGN_ITEMS },
55+
control: { type: 'select' },
56+
options: ALIGN_ITEMS,
5257
table: { category: 'Grid.Row' }
5358
},
5459
alignItemsXl: {
55-
control: { type: 'select', options: ALIGN_ITEMS },
60+
control: { type: 'select' },
61+
options: ALIGN_ITEMS,
5662
table: { category: 'Grid.Row' }
5763
},
5864
justifyContent: {
59-
control: { type: 'select', options: JUSTIFY_CONTENT },
65+
control: { type: 'select' },
66+
options: JUSTIFY_CONTENT,
6067
table: { category: 'Grid.Row' }
6168
},
6269
justifyContentXs: {
63-
control: { type: 'select', options: JUSTIFY_CONTENT },
70+
control: { type: 'select' },
71+
options: JUSTIFY_CONTENT,
6472
table: { category: 'Grid.Row' }
6573
},
6674
justifyContentSm: {
67-
control: { type: 'select', options: JUSTIFY_CONTENT },
75+
control: { type: 'select' },
76+
options: JUSTIFY_CONTENT,
6877
table: { category: 'Grid.Row' }
6978
},
7079
justifyContentMd: {
71-
control: { type: 'select', options: JUSTIFY_CONTENT },
80+
control: { type: 'select' },
81+
options: JUSTIFY_CONTENT,
7282
table: { category: 'Grid.Row' }
7383
},
7484
justifyContentLg: {
75-
control: { type: 'select', options: JUSTIFY_CONTENT },
85+
control: { type: 'select' },
86+
options: JUSTIFY_CONTENT,
7687
table: { category: 'Grid.Row' }
7788
},
7889
justifyContentXl: {
79-
control: { type: 'select', options: JUSTIFY_CONTENT },
90+
control: { type: 'select' },
91+
options: JUSTIFY_CONTENT,
8092
table: { category: 'Grid.Row' }
8193
},
8294
wrap: {
83-
control: { type: 'select', options: WRAP },
95+
control: { type: 'select' },
96+
options: WRAP,
8497
table: { category: 'Grid.Row' }
8598
},
8699
wrapXs: {
87-
control: { type: 'select', options: WRAP },
100+
control: { type: 'select' },
101+
options: WRAP,
88102
table: { category: 'Grid.Row' }
89103
},
90104
wrapSm: {
91-
control: { type: 'select', options: WRAP },
105+
control: { type: 'select' },
106+
options: WRAP,
92107
table: { category: 'Grid.Row' }
93108
},
94109
wrapMd: {
95-
control: { type: 'select', options: WRAP },
110+
control: { type: 'select' },
111+
options: WRAP,
96112
table: { category: 'Grid.Row' }
97113
},
98114
wrapLg: {
99-
control: { type: 'select', options: WRAP },
115+
control: { type: 'select' },
116+
options: WRAP,
100117
table: { category: 'Grid.Row' }
101118
},
102119
wrapXl: {
103-
control: { type: 'select', options: WRAP },
120+
control: { type: 'select' },
121+
options: WRAP,
104122
table: { category: 'Grid.Row' }
105123
}
106124
}}

‎packages/grid/src/styled/StyledCol.ts

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

88
import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
99
import { math } from 'polished';
10-
import { retrieveComponentStyles, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
10+
import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
1111
import { AlignSelf, Breakpoint, GridNumber, IColProps, IGridProps, TextAlign } from '../types';
1212

1313
const COMPONENT_ID = 'grid.col';
1414

15-
const colorStyles = (props: IStyledColProps) => {
16-
const backgroundColor = getColorV8('primaryHue', 600, props.theme, 0.1);
15+
interface IStyledColProps extends Omit<IColProps, 'size'>, ThemeProps<DefaultTheme> {
16+
columns?: IGridProps['columns'];
17+
gutters?: IGridProps['gutters'];
18+
sizeAll?: IColProps['size'];
19+
debug?: IGridProps['debug'];
20+
}
21+
22+
const colorStyles = ({ theme }: IStyledColProps) => {
23+
const backgroundColor = getColor({
24+
theme,
25+
variable: 'background.primaryEmphasis',
26+
dark: { transparency: theme.opacity[200] },
27+
light: { transparency: theme.opacity[100] }
28+
});
1729

1830
return css`
1931
background-clip: content-box;
@@ -101,22 +113,15 @@ const mediaStyles = (
101113
`;
102114
};
103115

104-
const sizeStyles = (props: IStyledColProps) => {
105-
const padding = props.gutters ? math(`${props.theme.space[props.gutters!]} / 2`) : 0;
116+
const sizeStyles = ({ theme, gutters }: IStyledColProps) => {
117+
const padding = gutters ? math(`${theme.space[gutters!]} / 2`) : 0;
106118

107119
return css`
108120
padding-right: ${padding};
109121
padding-left: ${padding};
110122
`;
111123
};
112124

113-
interface IStyledColProps extends Omit<IColProps, 'size'>, ThemeProps<DefaultTheme> {
114-
columns?: IGridProps['columns'];
115-
gutters?: IGridProps['gutters'];
116-
sizeAll?: IColProps['size'];
117-
debug?: IGridProps['debug'];
118-
}
119-
120125
export const StyledCol = styled.div.attrs<IStyledColProps>({
121126
'data-garden-id': COMPONENT_ID,
122127
'data-garden-version': PACKAGE_VERSION
@@ -135,7 +140,9 @@ export const StyledCol = styled.div.attrs<IStyledColProps>({
135140
props.order,
136141
props
137142
)};
138-
${props => sizeStyles(props)};
143+
144+
${sizeStyles};
145+
139146
${props => props.debug && colorStyles(props)};
140147
141148
${props =>

‎packages/grid/src/styled/StyledGrid.ts

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

88
import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
99
import { math } from 'polished';
10-
import { retrieveComponentStyles, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
10+
import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
1111
import { IGridProps } from '../types';
1212

1313
const COMPONENT_ID = 'grid.grid';
1414

15-
const colorStyles = (props: IStyledGridProps) => {
16-
const borderColor = getColorV8(props.theme.palette.crimson, 400, props.theme, 0.5);
17-
const borderWidth = math(`${props.theme.borderWidths.sm} * 2`);
15+
const colorStyles = ({ theme }: IStyledGridProps) => {
16+
const borderColor = getColor({
17+
theme,
18+
hue: 'crimson',
19+
shade: 700,
20+
transparency: theme.opacity[600]
21+
});
22+
const borderWidth = math(`${theme.borderWidths.sm} * 2`);
1823

1924
return css`
2025
/* prettier-ignore */
@@ -24,8 +29,8 @@ const colorStyles = (props: IStyledGridProps) => {
2429
`;
2530
};
2631

27-
const sizeStyles = (props: IStyledGridProps) => {
28-
const padding = props.gutters ? math(`${props.theme.space[props.gutters!]} / 2`) : 0;
32+
const sizeStyles = ({ theme, gutters }: IStyledGridProps) => {
33+
const padding = gutters ? math(`${theme.space[gutters!]} / 2`) : 0;
2934

3035
return css`
3136
padding-right: ${padding};
@@ -45,7 +50,8 @@ export const StyledGrid = styled.div.attrs<IStyledGridProps>({
4550
width: 100%;
4651
box-sizing: border-box;
4752
48-
${props => sizeStyles(props)};
53+
${sizeStyles};
54+
4955
${props => props.debug && colorStyles(props)};
5056
5157
${props => retrieveComponentStyles(COMPONENT_ID, props)};

‎packages/grid/src/styled/StyledRow.ts

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,25 @@
77

88
import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
99
import { math } from 'polished';
10-
import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
10+
import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
1111
import { AlignItems, IGridProps, IRowProps, JustifyContent, Wrap } from '../types';
1212

1313
const COMPONENT_ID = 'grid.row';
1414

15-
const colorStyles = (props: IStyledRowProps) => {
16-
const borderColor = getColorV8(props.theme.palette.mint, 600, props.theme, 0.5);
17-
const borderWidth = props.theme.borderWidths.sm;
15+
interface IStyledRowProps extends Omit<IRowProps, 'wrap'>, ThemeProps<DefaultTheme> {
16+
gutters?: IGridProps['gutters'];
17+
wrapAll?: IRowProps['wrap'];
18+
debug?: IGridProps['debug'];
19+
}
20+
21+
const colorStyles = ({ theme }: IStyledRowProps) => {
22+
const borderColor = getColor({
23+
theme,
24+
hue: 'mint',
25+
shade: 700,
26+
transparency: theme.opacity[600]
27+
});
28+
const borderWidth = theme.borderWidths.sm;
1829

1930
return css`
2031
/* prettier-ignore */
@@ -62,21 +73,15 @@ const mediaStyles = (
6273
`;
6374
};
6475

65-
const sizeStyles = (props: IStyledRowProps) => {
66-
const margin = props.gutters ? math(`${props.theme.space[props.gutters!]} / 2`) : 0;
76+
const sizeStyles = ({ theme, gutters }: IStyledRowProps) => {
77+
const margin = gutters ? math(`${theme.space[gutters!]} / 2`) : 0;
6778

6879
return css`
6980
margin-right: -${margin};
7081
margin-left: -${margin};
7182
`;
7283
};
7384

74-
interface IStyledRowProps extends Omit<IRowProps, 'wrap'>, ThemeProps<DefaultTheme> {
75-
gutters?: IGridProps['gutters'];
76-
wrapAll?: IRowProps['wrap'];
77-
debug?: IGridProps['debug'];
78-
}
79-
8085
export const StyledRow = styled.div.attrs<IStyledRowProps>({
8186
'data-garden-id': COMPONENT_ID,
8287
'data-garden-version': PACKAGE_VERSION
@@ -85,7 +90,9 @@ export const StyledRow = styled.div.attrs<IStyledRowProps>({
8590
box-sizing: border-box;
8691
8792
${props => flexStyles(props.alignItems, props.justifyContent, props.wrapAll)}
88-
${props => sizeStyles(props)};
93+
94+
${sizeStyles};
95+
8996
${props => props.debug && colorStyles(props)};
9097
9198
${props =>

0 commit comments

Comments
 (0)