Skip to content

feat(colorpickers): adds light/dark mode colors #1862

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
merged 9 commits into from
Jul 24, 2024
Merged

feat(colorpickers): adds light/dark mode colors #1862

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
75445b1
feat(colorpickers): recolor
ze-flo Jul 16, 2024
41bfc3f
refactor: use transient props
ze-flo Jul 16, 2024
1c78ba9
refactor: clean up
ze-flo Jul 17, 2024
7503a72
tests: add specs
ze-flo Jul 17, 2024
5c1004a
refactor: PR feedback
ze-flo Jul 18, 2024
5403ac9
chore: PR feedback
ze-flo Jul 19, 2024
edc0f11
chore: PR feedback
ze-flo Jul 24, 2024
c2b4cf5
chore: remove inherited box-shadow styles + clean up
ze-flo Jul 24, 2024
4118715
test: update specs
ze-flo Jul 24, 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
2 changes: 1 addition & 1 deletion packages/colorpickers/demo/stories/data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { ILabeledColor } from '@zendeskgarden/react-colorpickers';

type Hue = 'blue' | 'green' | 'red' | 'yellow';

const SHADES = [100, 200, 300, 400, 500, 600, 700, 800] as const;
const SHADES = Object.keys(PALETTE.blue) as unknown as (keyof typeof PALETTE.blue)[];

const toLabeledValues = (hue: Hue) => {
const colors = PALETTE[hue];
Expand Down
2 changes: 1 addition & 1 deletion packages/colorpickers/src/elements/ColorPicker/ColorWell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ export const ColorWell: React.FC<IColorWellProps> = React.memo(
return (
/* eslint-disable-next-line jsx-a11y/prefer-tag-over-role */
<StyledColorWell
hue={hue}
$hue={hue}
ref={containerRef}
role="presentation"
onMouseDown={handleMouseDown}
Expand Down
22 changes: 11 additions & 11 deletions packages/colorpickers/src/elements/ColorPicker/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ export const ColorPicker = forwardRef<HTMLDivElement, IColorPickerProps>(
}, [computedColor]);

return (
<StyledColorPicker ref={ref} isOpaque={isOpaque} {...props}>
<StyledColorPicker ref={ref} $isOpaque={isOpaque} {...props}>
<ColorWell
hue={computedColor.hue}
saturation={computedColor.saturation}
Expand All @@ -126,20 +126,20 @@ export const ColorPicker = forwardRef<HTMLDivElement, IColorPickerProps>(
/>
<StyledSliderGroup>
<StyledPreview
red={computedColor.red}
green={computedColor.green}
blue={computedColor.blue}
alpha={computedColor.alpha}
isOpaque={isOpaque}
$red={computedColor.red}
$green={computedColor.green}
$blue={computedColor.blue}
$alpha={computedColor.alpha}
$isOpaque={isOpaque}
/>
<StyledSliders isOpaque={isOpaque}>
<StyledSliders $isOpaque={isOpaque}>
<Field>
<Field.Label hidden>{labels.hueSlider || 'Hue slider'}</Field.Label>
<StyledHueRange
step={1}
max={360}
value={computedColor.hue}
isOpaque={isOpaque}
$isOpaque={isOpaque}
onChange={handleHueChange}
/>
</Field>
Expand All @@ -151,9 +151,9 @@ export const ColorPicker = forwardRef<HTMLDivElement, IColorPickerProps>(
step={0.01}
value={computedColor.alpha / 100}
onChange={handleAlphaSliderChange}
red={computedColor.red}
green={computedColor.green}
blue={computedColor.blue}
$red={computedColor.red}
$green={computedColor.green}
$blue={computedColor.blue}
/>
</Field>
)}
Expand Down
3 changes: 1 addition & 2 deletions packages/colorpickers/src/elements/ColorPickerDialog/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ export const ColorPickerDialog = forwardRef<HTMLDivElement, IColorPickerDialogPr
onClick={onClick}
{...buttonProps}
>
<StyledButtonPreview backgroundColor={isControlled ? color : uncontrolledColor} />
<StyledButtonPreview $backgroundColor={isControlled ? color : uncontrolledColor} />
{/* eslint-disable-next-line no-eq-null, eqeqeq */}
<Button.EndIcon isRotated={referenceElement != null}>
<Chevron />
Expand All @@ -126,7 +126,6 @@ export const ColorPickerDialog = forwardRef<HTMLDivElement, IColorPickerDialogPr
hasArrow={hasArrow}
zIndex={zIndex}
isAnimated={isAnimated}
isOpaque={isOpaque}
focusOnMount={false}
placement={placement}
referenceElement={referenceElement}
Expand Down
2 changes: 1 addition & 1 deletion packages/colorpickers/src/elements/ColorSwatch/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ export const ColorSwatch = forwardRef<HTMLTableElement, IColorSwatchProps>(

return (
<StyledCell key={value} role={role}>
<StyledColorSwatchLabel backgroundColor={value}>
<StyledColorSwatchLabel $backgroundColor={value}>
<Tooltip content={label}>
<StyledColorSwatchInput
aria-label={label}
Expand Down
2 changes: 1 addition & 1 deletion packages/colorpickers/src/elements/ColorSwatchDialog/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ export const ColorSwatchDialog = forwardRef<HTMLDivElement, IColorSwatchDialogPr
onClick={onClick}
{...buttonProps}
>
<StyledButtonPreview backgroundColor={backgroundColor} />
<StyledButtonPreview $backgroundColor={backgroundColor} />
<Button.EndIcon isRotated={referenceElement !== null}>
<Chevron />
</Button.EndIcon>
Expand Down
12 changes: 6 additions & 6 deletions packages/colorpickers/src/styled/ColorPicker/StyledAlphaRange.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@
import styled, { DefaultTheme, ThemeProps } from 'styled-components';
import { DEFAULT_THEME, getCheckeredBackground } from '@zendeskgarden/react-theming';
import { getTrackHeight, getTrackMargin, StyledRange } from '../common/StyledRange';
import { IRGBColor } from '../../types';
import { IRGBColorProps } from '../types';

const COMPONENT_ID = 'colorpickers.colorpicker_alpha';

const background = (props: IRGBColor & ThemeProps<DefaultTheme>) => {
const background = (props: IRGBColorProps & ThemeProps<DefaultTheme>) => {
const direction = `to ${props.theme.rtl ? 'left' : 'right'}`;
const fromColor = `rgba(${props.red}, ${props.green}, ${props.blue}, 0)`;
const toColor = `rgb(${props.red}, ${props.green}, ${props.blue})`;
const fromColor = `rgba(${props.$red}, ${props.$green}, ${props.$blue}, 0)`;
const toColor = `rgb(${props.$red}, ${props.$green}, ${props.$blue})`;
const positionY = getTrackMargin(props);
const height = getTrackHeight(props);
const overlay = `linear-gradient(${direction}, ${fromColor}, ${toColor}) 0 ${positionY}px / 100% ${height}px no-repeat`;
Expand All @@ -29,14 +29,14 @@ const background = (props: IRGBColor & ThemeProps<DefaultTheme>) => {
});
};

export const StyledAlphaRange = styled(StyledRange as 'input').attrs<IRGBColor>(props => ({
export const StyledAlphaRange = styled(StyledRange as 'input').attrs<IRGBColorProps>(props => ({
style: {
backgroundSize: 'auto',
background: background(props)
},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Out of curiosity, why can't this live in the style block below?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this approach avoids dynamically creating a new class every time the color props change. styled-component will warn you when that happens.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

...and performance drops through the floor

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💀

'data-garden-id': COMPONENT_ID,
'data-garden-version': PACKAGE_VERSION
}))<IRGBColor>`
}))<IRGBColorProps>`
/* stylelint-disable no-empty-source */
`;

Expand Down
4 changes: 2 additions & 2 deletions packages/colorpickers/src/styled/ColorPicker/StyledColorPicker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
const COMPONENT_ID = 'colorpickers.colorpicker';

interface IStyledColorPickerProps {
isOpaque?: boolean;
$isOpaque?: boolean;
}

export const getColorPickerWidth = (props: IStyledColorPickerProps) => {
return props.isOpaque ? 268 : 312;
return props.$isOpaque ? 268 : 312;
};

export const StyledColorPicker = styled.div.attrs({
Expand Down
4 changes: 2 additions & 2 deletions packages/colorpickers/src/styled/ColorPicker/StyledColorWell.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,15 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
const COMPONENT_ID = 'colorpickers.colorpicker_colorwell';

interface IStyledColorWellProps {
hue: number;
$hue: number;
}

const background = (props: IStyledColorWellProps & ThemeProps<DefaultTheme>) => {
const blackAlpha = rgba(props.theme.palette.black as string, 0.9);
const black = `linear-gradient(0deg, ${props.theme.palette.black}, ${blackAlpha} 1%, transparent 99%)`;
const whiteAngle = `${props.theme.rtl ? -90 : 90}deg`;
const white = `linear-gradient(${whiteAngle}, ${props.theme.palette.white} 1%, transparent)`;
const colorValue = hsl(props.hue, 1, 0.5);
const colorValue = hsl(props.$hue, 1, 0.5);
const color = `linear-gradient(${colorValue}, ${colorValue})`;

return `${black}, ${white}, ${color}`;
Expand Down
32 changes: 19 additions & 13 deletions packages/colorpickers/src/styled/ColorPicker/StyledColorWellThumb.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
* found at http://www.apache.org/licenses/LICENSE-2.0.
*/

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

const COMPONENT_ID = 'colorpickers.colorpicker_colorwell_thumb';

Expand All @@ -16,12 +16,22 @@ interface IStyledSaturationPointerProps {
left: number;
}

const sizeStyles = (theme: DefaultTheme) => {
const colorStyles = ({ theme }: ThemeProps<DefaultTheme>) => {
const borderColor = getColor({ theme, hue: 'white' });
const boxShadow = `${theme.shadows.xs(getColor({ theme, hue: 'black' }))}`;

return css`
border-color: ${borderColor};
box-shadow: ${boxShadow};
`;
};

const sizeStyles = ({ theme }: ThemeProps<DefaultTheme>) => {
const borderWidth = (stripUnit(theme.borderWidths.sm) as number) * 2;
const size = theme.space.base * 5;
const translateValue = size / -2;

return `
return css`
transform: translate(${translateValue}px, ${translateValue}px);
box-sizing: border-box;
border-width: ${borderWidth}px;
Expand All @@ -40,16 +50,12 @@ export const StyledColorWellThumb = styled.div.attrs<IStyledSaturationPointerPro
}
}))<IStyledSaturationPointerProps>`
position: absolute;
border: solid ${props => props.theme.palette.white};
border: ${props => props.theme.borders.sm};
border-radius: 50%;
box-shadow: ${props =>
props.theme.shadows.lg(
`${props.theme.space.base}px`,
`${props.theme.space.base * 2}px`,
getColorV8('neutralHue', 800, props.theme, 0.24)!
)};

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

${sizeStyles}

${colorStyles}

${props => retrieveComponentStyles(COMPONENT_ID, props)};
`;
Expand Down
2 changes: 1 addition & 1 deletion packages/colorpickers/src/styled/ColorPicker/StyledHueRange.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export const StyledHueRange = styled(StyledRange as 'input').attrs({
#f00 100%
)
no-repeat;
background-position: ${props => !props.isOpaque && `0 ${getTrackMargin(props)}px`};
background-position: ${props => !props.$isOpaque && `0 ${getTrackMargin(props)}px`};
background-size: 100% ${props => getTrackHeight(props)}px;
`;

Expand Down
16 changes: 8 additions & 8 deletions packages/colorpickers/src/styled/ColorPicker/StyledPreview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,19 @@ import {
DEFAULT_THEME,
getCheckeredBackground
} from '@zendeskgarden/react-theming';
import { IRGBColor } from '../../types';
import { IRGBColorProps } from '../types';

const COMPONENT_ID = 'colorpickers.colorpicker_preview_box';

interface IStyledColorPreviewProps extends IRGBColor {
isOpaque?: boolean;
interface IStyledColorPreviewProps extends IRGBColorProps {
$isOpaque?: boolean;
}

const background = (props: IStyledColorPreviewProps & ThemeProps<DefaultTheme>) => {
const alpha = props.alpha ? props.alpha / 100 : 0;
let retVal = `rgba(${props.red}, ${props.green}, ${props.blue}, ${alpha})`;
const alpha = props.$alpha ? props.$alpha / 100 : 0;
let retVal = `rgba(${props.$red}, ${props.$green}, ${props.$blue}, ${alpha})`;

if (!props.isOpaque) {
if (!props.$isOpaque) {
retVal = getCheckeredBackground({
theme: props.theme,
size: 13,
Expand All @@ -48,8 +48,8 @@ export const StyledPreview = styled.div.attrs<IStyledColorPreviewProps>(props =>
/* stylelint-disable color-function-notation */
box-shadow: inset 0 0 0 ${props => props.theme.borderWidths.sm}
${props => rgba(props.theme.palette.black as string, 0.19)};
width: ${props => props.theme.space.base * (props.isOpaque ? 6 : 8)}px;
height: ${props => props.theme.space.base * (props.isOpaque ? 6 : 8)}px;
width: ${props => props.theme.space.base * (props.$isOpaque ? 6 : 8)}px;
height: ${props => props.theme.space.base * (props.$isOpaque ? 6 : 8)}px;

${props => retrieveComponentStyles(COMPONENT_ID, props)};
`;
Expand Down
43 changes: 28 additions & 15 deletions packages/colorpickers/src/styled/ColorPicker/StyledSliders.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,41 @@
* found at http://www.apache.org/licenses/LICENSE-2.0.
*/

import styled from 'styled-components';
import styled, { DefaultTheme, ThemeProps } from 'styled-components';
import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
import { getTrackHeight, getTrackMargin } from '../common/StyledRange';

const COMPONENT_ID = 'colorpickers.colorpicker_sliders';

interface IStyledSlidersProps {
isOpaque?: boolean;
$isOpaque?: boolean;
}

const sizeStyles = (props: IStyledSlidersProps & ThemeProps<DefaultTheme>) => {
if (props.$isOpaque) {
return undefined;
}

const trackHeight = getTrackHeight(props);
const trackMargin = getTrackMargin(props);

return `
& > * {
position: absolute;
width: 100%;
height: ${trackMargin * 2 + trackHeight}px;
}

& > :first-child {
top: -${trackMargin}px;
}

& > :last-child {
bottom: -${trackMargin}px;
}
`;
};

export const StyledSliders = styled.div.attrs({
'data-garden-id': COMPONENT_ID,
'data-garden-version': PACKAGE_VERSION
Expand All @@ -24,19 +49,7 @@ export const StyledSliders = styled.div.attrs({
margin-${props => (props.theme.rtl ? 'right' : 'left')}: ${props => props.theme.space.base * 2}px;
width: 100%;

& > * {
position: absolute;
width: 100%;
height: ${props => getTrackMargin(props) * 2 + getTrackHeight(props)}px;
}

& > :first-child {
top: -${getTrackMargin}px;
}

& > :last-child {
bottom: -${getTrackMargin}px;
}
${sizeStyles}

${props => retrieveComponentStyles(COMPONENT_ID, props)};
`;
Expand Down
15 changes: 7 additions & 8 deletions packages/colorpickers/src/styled/ColorPickerDialog/StyledButtonPreview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,18 @@ import { IColorPickerDialogProps } from '../../types';
const COMPONENT_ID = 'colorpickers.colordialog_preview';

export interface IStyleButtonPreviewProps extends ThemeProps<DefaultTheme> {
backgroundColor?: IColorPickerDialogProps['color'];
$backgroundColor?: IColorPickerDialogProps['color'];
}

const background = (props: IStyleButtonPreviewProps) => {
const { backgroundColor } = props;
const background = ({ $backgroundColor, theme }: IStyleButtonPreviewProps) => {
let retVal;

if (typeof backgroundColor === 'string') {
retVal = backgroundColor;
} else if (backgroundColor === undefined) {
retVal = props.theme.palette.white as string;
if (typeof $backgroundColor === 'string') {
retVal = $backgroundColor;
} else if ($backgroundColor === undefined) {
retVal = theme.palette.white as string;
} else {
const { red, green, blue, alpha = 1 } = backgroundColor;
const { red, green, blue, alpha = 1 } = $backgroundColor;

retVal = `rgba(${red}, ${green}, ${blue}, ${alpha ? alpha / 100 : 0})`;
}
Expand Down
Loading