Skip to content

feat(grid): new light/dark mode colors #1839

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jzempel merged 3 commits into from
Jun 20, 2024
Merged

feat(grid): new light/dark mode colors #1839

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0cc4bfb
Recolor debug grid
jzempel Jun 18, 2024
5f8c8d8
Recolor pane splitter
jzempel Jun 18, 2024
1e9d704
Fix `Pane.SplitterButton` drop shadow
jzempel Jun 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 36 additions & 18 deletions packages/grid/demo/grid.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,75 +32,93 @@ set any related `Grid.Col` prop along with `children` text for display.
argTypes={{
rows: { name: 'children' },
alignItems: {
control: { type: 'select', options: ALIGN_ITEMS },
control: { type: 'select' },
options: ALIGN_ITEMS,
table: { category: 'Grid.Row' }
},
alignItemsXs: {
control: { type: 'select', options: ALIGN_ITEMS },
control: { type: 'select' },
options: ALIGN_ITEMS,
table: { category: 'Grid.Row' }
},
alignItemsSm: {
control: { type: 'select', options: ALIGN_ITEMS },
control: { type: 'select' },
options: ALIGN_ITEMS,
table: { category: 'Grid.Row' }
},
alignItemsMd: {
control: { type: 'select', options: ALIGN_ITEMS },
control: { type: 'select' },
options: ALIGN_ITEMS,
table: { category: 'Grid.Row' }
},
alignItemsLg: {
control: { type: 'select', options: ALIGN_ITEMS },
control: { type: 'select' },
options: ALIGN_ITEMS,
table: { category: 'Grid.Row' }
},
alignItemsXl: {
control: { type: 'select', options: ALIGN_ITEMS },
control: { type: 'select' },
options: ALIGN_ITEMS,
table: { category: 'Grid.Row' }
},
justifyContent: {
control: { type: 'select', options: JUSTIFY_CONTENT },
control: { type: 'select' },
options: JUSTIFY_CONTENT,
table: { category: 'Grid.Row' }
},
justifyContentXs: {
control: { type: 'select', options: JUSTIFY_CONTENT },
control: { type: 'select' },
options: JUSTIFY_CONTENT,
table: { category: 'Grid.Row' }
},
justifyContentSm: {
control: { type: 'select', options: JUSTIFY_CONTENT },
control: { type: 'select' },
options: JUSTIFY_CONTENT,
table: { category: 'Grid.Row' }
},
justifyContentMd: {
control: { type: 'select', options: JUSTIFY_CONTENT },
control: { type: 'select' },
options: JUSTIFY_CONTENT,
table: { category: 'Grid.Row' }
},
justifyContentLg: {
control: { type: 'select', options: JUSTIFY_CONTENT },
control: { type: 'select' },
options: JUSTIFY_CONTENT,
table: { category: 'Grid.Row' }
},
justifyContentXl: {
control: { type: 'select', options: JUSTIFY_CONTENT },
control: { type: 'select' },
options: JUSTIFY_CONTENT,
table: { category: 'Grid.Row' }
},
wrap: {
control: { type: 'select', options: WRAP },
control: { type: 'select' },
options: WRAP,
table: { category: 'Grid.Row' }
},
wrapXs: {
control: { type: 'select', options: WRAP },
control: { type: 'select' },
options: WRAP,
table: { category: 'Grid.Row' }
},
wrapSm: {
control: { type: 'select', options: WRAP },
control: { type: 'select' },
options: WRAP,
table: { category: 'Grid.Row' }
},
wrapMd: {
control: { type: 'select', options: WRAP },
control: { type: 'select' },
options: WRAP,
table: { category: 'Grid.Row' }
},
wrapLg: {
control: { type: 'select', options: WRAP },
control: { type: 'select' },
options: WRAP,
table: { category: 'Grid.Row' }
},
wrapXl: {
control: { type: 'select', options: WRAP },
control: { type: 'select' },
options: WRAP,
table: { category: 'Grid.Row' }
}
}}
Expand Down
33 changes: 20 additions & 13 deletions packages/grid/src/styled/StyledCol.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,25 @@

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

const COMPONENT_ID = 'grid.col';

const colorStyles = (props: IStyledColProps) => {
const backgroundColor = getColorV8('primaryHue', 600, props.theme, 0.1);
interface IStyledColProps extends Omit<IColProps, 'size'>, ThemeProps<DefaultTheme> {
columns?: IGridProps['columns'];
gutters?: IGridProps['gutters'];
sizeAll?: IColProps['size'];
debug?: IGridProps['debug'];
}

const colorStyles = ({ theme }: IStyledColProps) => {
const backgroundColor = getColor({
theme,
variable: 'background.primaryEmphasis',
dark: { transparency: theme.opacity[200] },
light: { transparency: theme.opacity[100] }
});

return css`
background-clip: content-box;
Expand Down Expand Up @@ -101,22 +113,15 @@ const mediaStyles = (
`;
};

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

return css`
padding-right: ${padding};
padding-left: ${padding};
`;
};

interface IStyledColProps extends Omit<IColProps, 'size'>, ThemeProps<DefaultTheme> {
columns?: IGridProps['columns'];
gutters?: IGridProps['gutters'];
sizeAll?: IColProps['size'];
debug?: IGridProps['debug'];
}

export const StyledCol = styled.div.attrs<IStyledColProps>({
'data-garden-id': COMPONENT_ID,
'data-garden-version': PACKAGE_VERSION
Expand All @@ -135,7 +140,9 @@ export const StyledCol = styled.div.attrs<IStyledColProps>({
props.order,
props
)};
${props => sizeStyles(props)};

${sizeStyles};

${props => props.debug && colorStyles(props)};

${props =>
Expand Down
20 changes: 13 additions & 7 deletions packages/grid/src/styled/StyledGrid.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,19 @@

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

const COMPONENT_ID = 'grid.grid';

const colorStyles = (props: IStyledGridProps) => {
const borderColor = getColorV8(props.theme.palette.crimson, 400, props.theme, 0.5);
const borderWidth = math(`${props.theme.borderWidths.sm} * 2`);
const colorStyles = ({ theme }: IStyledGridProps) => {
const borderColor = getColor({
theme,
hue: 'crimson',
shade: 700,
transparency: theme.opacity[600]
});
const borderWidth = math(`${theme.borderWidths.sm} * 2`);

return css`
/* prettier-ignore */
Expand All @@ -24,8 +29,8 @@ const colorStyles = (props: IStyledGridProps) => {
`;
};

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

return css`
padding-right: ${padding};
Expand All @@ -45,7 +50,8 @@ export const StyledGrid = styled.div.attrs<IStyledGridProps>({
width: 100%;
box-sizing: border-box;

${props => sizeStyles(props)};
${sizeStyles};

${props => props.debug && colorStyles(props)};

${props => retrieveComponentStyles(COMPONENT_ID, props)};
Expand Down
33 changes: 20 additions & 13 deletions packages/grid/src/styled/StyledRow.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,25 @@

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

const COMPONENT_ID = 'grid.row';

const colorStyles = (props: IStyledRowProps) => {
const borderColor = getColorV8(props.theme.palette.mint, 600, props.theme, 0.5);
const borderWidth = props.theme.borderWidths.sm;
interface IStyledRowProps extends Omit<IRowProps, 'wrap'>, ThemeProps<DefaultTheme> {
gutters?: IGridProps['gutters'];
wrapAll?: IRowProps['wrap'];
debug?: IGridProps['debug'];
}

const colorStyles = ({ theme }: IStyledRowProps) => {
const borderColor = getColor({
theme,
hue: 'mint',
shade: 700,
transparency: theme.opacity[600]
});
const borderWidth = theme.borderWidths.sm;

return css`
/* prettier-ignore */
Expand Down Expand Up @@ -62,21 +73,15 @@ const mediaStyles = (
`;
};

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

return css`
margin-right: -${margin};
margin-left: -${margin};
`;
};

interface IStyledRowProps extends Omit<IRowProps, 'wrap'>, ThemeProps<DefaultTheme> {
gutters?: IGridProps['gutters'];
wrapAll?: IRowProps['wrap'];
debug?: IGridProps['debug'];
}

export const StyledRow = styled.div.attrs<IStyledRowProps>({
'data-garden-id': COMPONENT_ID,
'data-garden-version': PACKAGE_VERSION
Expand All @@ -85,7 +90,9 @@ export const StyledRow = styled.div.attrs<IStyledRowProps>({
box-sizing: border-box;

${props => flexStyles(props.alignItems, props.justifyContent, props.wrapAll)}
${props => sizeStyles(props)};

${sizeStyles};

${props => props.debug && colorStyles(props)};

${props =>
Expand Down
Loading