Skip to content

feat(dropdowns.legacy): new light/dark mode colors #1867

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 2 commits into from
Jul 25, 2024
Merged

feat(dropdowns.legacy): new light/dark mode colors #1867

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f3dd424
Recolor legacy dropdowns
jzempel Jul 18, 2024
97e1e86
Fix icon color
jzempel Jul 19, 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
4 changes: 2 additions & 2 deletions packages/dropdowns.legacy/src/elements/Combobox/Combobox.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

import React from 'react';
import userEvent from '@testing-library/user-event';
import { PALETTE_V8 } from '@zendeskgarden/react-theming';
import { PALETTE } from '@zendeskgarden/react-theming';
import { fireEvent, render } from 'garden-test-utils';
import { KEY_CODES } from '@zendeskgarden/container-utilities';

Expand Down Expand Up @@ -45,7 +45,7 @@ describe('Combobox', () => {

await user.hover(label);

expect(combobox).toHaveStyleRule('border-color', PALETTE_V8.blue[600], { modifier: ':hover' });
expect(combobox).toHaveStyleRule('border-color', PALETTE.blue[700], { modifier: ':hover' });
});

it('focuses input on label click', async () => {
Expand Down
5 changes: 3 additions & 2 deletions packages/dropdowns.legacy/src/styled/items/StyledAddItem.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*/

import styled from 'styled-components';
import { retrieveComponentStyles, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';

import { StyledItem } from './StyledItem';

Expand All @@ -19,7 +19,8 @@ export const StyledAddItem = styled(StyledItem).attrs({
'data-garden-id': COMPONENT_ID,
'data-garden-version': PACKAGE_VERSION
})`
color: ${props => !props.disabled && getColorV8('primaryHue', 600, props.theme)};
color: ${props =>
!props.disabled && getColor({ theme: props.theme, variable: 'foreground.primary' })};

${props => retrieveComponentStyles(COMPONENT_ID, props)};
`;
Expand Down
16 changes: 3 additions & 13 deletions packages/dropdowns.legacy/src/styled/items/StyledItem.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,8 @@
*/

import React from 'react';
import { rgba } from 'polished';
import { render } from 'garden-test-utils';
import { PALETTE_V8 } from '@zendeskgarden/react-theming';
import { PALETTE } from '@zendeskgarden/react-theming';
import { StyledItem } from './StyledItem';

describe('StyledItem', () => {
Expand All @@ -21,21 +20,12 @@ describe('StyledItem', () => {
it('renders default styling', () => {
const { container } = render(<StyledItem />);

expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[800]);
expect(container.firstChild).toHaveStyleRule('color', PALETTE.grey[900]);
});

it('renders danger styling if provided', () => {
const { container } = render(<StyledItem isDanger />);

expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.red[600]);
});

it('render danger focus styling if provided', () => {
const { container } = render(<StyledItem isDanger isFocused />);

expect(container.firstChild).toHaveStyleRule(
'background-color',
rgba(PALETTE_V8.red[600], 0.08)
);
expect(container.firstChild).toHaveStyleRule('color', PALETTE.red[700]);
});
});
21 changes: 11 additions & 10 deletions packages/dropdowns.legacy/src/styled/items/StyledItem.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@
*/

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

const COMPONENT_ID = 'dropdowns.item';

Expand All @@ -28,19 +27,21 @@ export const getItemPaddingVertical = (props: IStyledItemProps & ThemeProps<Defa
};

const getColorStyles = (props: IStyledItemProps & ThemeProps<DefaultTheme>) => {
const backgroundColor = props.isFocused
? getColor({
theme: props.theme,
variable: 'background.primaryEmphasis',
transparency: props.theme.opacity[100]
})
: 'inherit';
let foregroundColor;
let backgroundColor;

if (props.disabled) {
foregroundColor = getColorV8('neutralHue', 400, props.theme);
foregroundColor = getColor({ theme: props.theme, variable: 'foreground.disabled' });
} else if (props.isDanger) {
foregroundColor = getColorV8('dangerHue', 600, props.theme);
backgroundColor = props.isFocused ? rgba(foregroundColor as string, 0.08) : 'inherit';
foregroundColor = getColor({ theme: props.theme, variable: 'foreground.danger' });
} else {
foregroundColor = getColorV8('foreground', 600 /* default shade */, props.theme);
backgroundColor = props.isFocused
? getColorV8('primaryHue', 600, props.theme, 0.08)
: 'inherit';
foregroundColor = getColor({ theme: props.theme, variable: 'foreground.default' });
}

return css`
Expand Down
7 changes: 5 additions & 2 deletions packages/dropdowns.legacy/src/styled/items/StyledItemIcon.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

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

const COMPONENT_ID = 'dropdowns.item_icon';
Expand Down Expand Up @@ -37,7 +37,10 @@ export const StyledItemIcon = styled.div.attrs({
justify-content: center;
transition: opacity 0.1s ease-in-out;
opacity: ${props => (props.isVisible ? '1' : '0')};
color: ${props => (props.isDisabled ? 'inherit' : getColorV8('primaryHue', 600, props.theme))};
color: ${props =>
props.isDisabled
? 'inherit'
: getColor({ theme: props.theme, variable: 'foreground.primary' })};

${props => getSizeStyles(props)};

Expand Down
8 changes: 6 additions & 2 deletions packages/dropdowns.legacy/src/styled/items/StyledItemMeta.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*/

import styled from 'styled-components';
import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';

const COMPONENT_ID = 'dropdowns.item_meta';

Expand All @@ -24,7 +24,11 @@ export const StyledItemMeta = styled.span.attrs({
})<IStyledItemMetaProps>`
display: block;
line-height: ${props => props.theme.space.base * (props.isCompact ? 3 : 4)}px;
color: ${props => getColorV8('neutralHue', props.isDisabled ? 400 : 600, props.theme)};
color: ${props =>
getColor({
theme: props.theme,
variable: props.isDisabled ? 'foreground.disabled' : 'foreground.subtle'
})};
font-size: ${props => props.theme.fontSizes.sm};

${props => retrieveComponentStyles(COMPONENT_ID, props)};
Expand Down
7 changes: 5 additions & 2 deletions packages/dropdowns.legacy/src/styled/items/StyledNextIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
import React, { HTMLAttributes } from 'react';
import styled from 'styled-components';
import NextIconSvg from '@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg';
import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';

const COMPONENT_ID = 'dropdowns.next_item_icon';

Expand All @@ -26,7 +26,10 @@ const NextIconComponent: React.FC<HTMLAttributes<SVGSVGElement>> = ({ className

export const StyledNextIcon = styled(NextIconComponent)<IStyledNextIconProps>`
transform: ${props => props.theme.rtl && 'rotate(180deg)'};
color: ${props => (props.isDisabled ? 'inherit' : getColorV8('neutralHue', 600, props.theme))};
color: ${props =>
props.isDisabled
? 'inherit'
: getColor({ theme: props.theme, variable: 'foreground.disabled' })};

${props => retrieveComponentStyles(COMPONENT_ID, props)};
`;
Expand Down
5 changes: 3 additions & 2 deletions packages/dropdowns.legacy/src/styled/items/StyledPreviousIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
import React, { HTMLAttributes } from 'react';
import styled from 'styled-components';
import PreviousIconSvg from '@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg';
import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';

const COMPONENT_ID = 'dropdowns.previous_item_icon';

Expand All @@ -26,7 +26,8 @@ const PreviousIconComponent: React.FC<HTMLAttributes<SVGSVGElement>> = ({ classN

export const StyledPreviousIcon = styled(PreviousIconComponent)<IStyledPreviousIconProps>`
transform: ${props => props.theme.rtl && 'rotate(180deg)'};
color: ${props => (props.isDisabled ? 'inherit' : getColorV8('neutralHue', 600, props.theme))};
color: ${props =>
props.isDisabled ? 'inherit' : getColor({ theme: props.theme, variable: 'foreground.subtle' })};

${props => retrieveComponentStyles(COMPONENT_ID, props)};
`;
Expand Down
4 changes: 2 additions & 2 deletions packages/dropdowns.legacy/src/styled/items/header/StyledHeaderIcon.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*/

import styled from 'styled-components';
import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';

const COMPONENT_ID = 'dropdowns.header_icon';

Expand All @@ -25,7 +25,7 @@ export const StyledHeaderIcon = styled.div.attrs({
align-items: center;
justify-content: center;
${props => (props.theme.rtl ? 'right' : 'left')}: ${props => props.theme.space.base * 3}px;
color: ${props => getColorV8('neutralHue', 600, props.theme)};
color: ${props => getColor({ theme: props.theme, variable: 'foreground.subtle' })};

& > * {
width: ${props => props.theme.iconSizes.md};
Expand Down
4 changes: 2 additions & 2 deletions packages/dropdowns.legacy/src/styled/menu/StyledSeparator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*/

import styled from 'styled-components';
import { retrieveComponentStyles, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';

const COMPONENT_ID = 'dropdowns.separator';

Expand All @@ -21,7 +21,7 @@ export const StyledSeparator = styled.li.attrs({
display: block;
margin: ${props => props.theme.space.base}px 0;
border-bottom: ${props =>
`${props.theme.borders.sm} ${getColorV8('neutralHue', 200, props.theme)}`};
`${props.theme.borders.sm} ${getColor({ theme: props.theme, variable: 'border.subtle' })}`};

${props => retrieveComponentStyles(COMPONENT_ID, props)};
`;
Expand Down
11 changes: 6 additions & 5 deletions packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectMoreAnchor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@

import styled from 'styled-components';
import {
getColorV8,
getLineHeight,
DEFAULT_THEME,
retrieveComponentStyles
retrieveComponentStyles,
getColor
} from '@zendeskgarden/react-theming';

const COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
Expand All @@ -34,9 +34,10 @@ export const StyledMultiselectMoreAnchor = styled.div.attrs({
props.isCompact ? '1em' : getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md)};
white-space: nowrap;
color: ${props =>
props.isDisabled
? getColorV8('neutralHue', 400, props.theme)
: getColorV8('primaryHue', 600, props.theme)};
getColor({
theme: props.theme,
variable: props.isDisabled ? 'foreground.disabled' : 'foreground.primary'
})};

:hover {
text-decoration: ${props => !props.isDisabled && 'underline'};
Expand Down