Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
import * as React from 'react';
import ColorInput from './ColorInput';
import {TextInputProps} from '@workday/canvas-kit-react-text-input';
import styled from '@emotion/styled';
import {colors} from '@workday/canvas-kit-react-core';
export interface ColorPreviewProps extends TextInputProps {
value: string;
id?: string;
}
const ColorPreviewComponent = styled(ColorInput)({
backgroundColor: colors.frenchVanilla100,
borderColor: colors.frenchVanilla100,
pointerEvents: 'none',
});
export default class ColorPreview extends React.Component {
public render() {
// TODO: Standardize on prop spread location (see #150)
const {id, value, ...elemProps} = this.props;
return (
);
}
}
({rightAlign, collapse}) => {
const rightAlignStyles: CSSObject = rightAlign
? {
display: 'flex',
maxWidth: '480px',
}
: {};
const collapseStyles: CSSObject = collapse
? {
top: 0,
right: 0,
left: 0,
bottom: 0,
margin: 0,
position: 'absolute',
background: colors.frenchVanilla100,
maxWidth: 'unset',
zIndex: 1,
'&.search-enter': {
opacity: 0,
},
'&.search-enter-active': {
opacity: 1,
transition: `opacity ${mobileTransitionDuration}ms`,
},
'&.search-exit': {
opacity: 1,
},
'&.search-exit-active': {
opacity: 0,
transition: `opacity ${mobileTransitionDuration}ms`,
},
},
};
}
function makeBorderlessStyle(_bgColor: string): CSSObject {
return {
'th, td': {
backgroundColor: rgba(_bgColor, 0.2),
},
};
}
const Row = styled('tr')(
{
'th, td': {
backgroundColor: colors.frenchVanilla100,
padding: `${spacing.xs} ${spacing.xxs}`,
fontSize: 13,
borderRight: cellBorder,
borderBottom: cellBorder,
height: spacingNumbers.xl + spacingNumbers.xxs,
boxSizing: 'border-box',
transition: 'background-color 0.2s',
},
td: {
'&:last-child': {
borderRight: 'none',
},
},
th: {
height: spacing.xxl,
'&:last-child': {
({disabled}) => ({
'& span': {
backgroundColor: disabled ? colors.soap100 : colors.frenchVanilla100,
},
'&:hover path': {
fill: disabled ? undefined : colors.licorice500,
},
})
);
...getAccentSelector(colors.frenchVanilla100),
};
case IconButtonVariant.Square:
return {
'&:focus:hover, &:focus, &:active': {
backgroundColor: 'transparent',
...getFillSelector(colors.blueberry400),
...getAccentSelector(colors.blueberry400),
},
'&:not([disabled]):focus': {
...(toggled ? focusRing(2, 0) : {}),
},
'&:hover, &:focus:hover': {
backgroundColor: colors.soap300,
},
backgroundColor: colors.frenchVanilla100,
...getFillSelector(colors.blueberry400),
...getAccentSelector(colors.blueberry400),
};
case IconButtonVariant.Circle:
return {
'&:active': {
...getFillSelector(colors.blueberry400),
...getAccentSelector(colors.frenchVanilla100),
},
...getBackgroundSelector(colors.blueberry400),
...getFillSelector(colors.blueberry400),
...getAccentSelector(colors.frenchVanilla100),
};
case IconButtonVariant.CircleFilled:
return {
backgroundColor: colors.blueberry400,
},
[SearchTheme.Light]: {
background: colors.soap200,
backgroundFocus: colors.soap200,
backgroundHover: colors.soap300,
color: colors.blackPepper300,
placeholderColor: colors.licorice300,
boxShadow: 'none',
boxShadowFocus: focusRing().boxShadow,
},
[SearchTheme.Dark]: {
background: 'rgba(0, 0, 0, 0.2)',
backgroundFocus: colors.frenchVanilla100,
color: colors.frenchVanilla100,
colorFocus: colors.blackPepper300,
placeholderColor: colors.frenchVanilla100,
placeholderColorFocus: colors.licorice300,
boxShadow: 'none',
},
};
({error, variant}) => ({
backgroundColor: error === ErrorType.Error ? colors.cinnamon500 : colors.cantaloupe400,
color: error === ErrorType.Error ? colors.frenchVanilla100 : colors.blackPepper400,
borderRadius:
variant === BannerVariant.Sticky ? `${borderRadius.m} 0 0 ${borderRadius.m}` : borderRadius.m,
width: variant === BannerVariant.Sticky ? '222px' : '328px',
'&:hover': {
backgroundColor: error === ErrorType.Error ? colors.cinnamon600 : colors.cantaloupe500,
},
})
);
classname: 'status-indicator',
styles: {
...type.small,
display: 'inline-flex',
alignItems: 'center',
verticalAlign: 'middle',
maxWidth: 150,
height: spacing.s,
padding: `1px ${spacing.xxxs}`,
borderRadius: borderRadius.s,
boxSizing: 'border-box',
},
variants: {
gray: {
high: {
color: colors.frenchVanilla100,
background: colors.licorice300,
},
low: {
color: colors.licorice400,
background: colors.soap200,
},
},
orange: {
high: {
color: colors.licorice500,
background: colors.cantaloupe400,
},
low: {
color: colors.toastedMarshmallow600,
background: colors.cantaloupe100,
},
? inputColors.disabled.background
: 'white',
borderColor: checked
? colors.blueberry400
: disabled
? inputColors.disabled.border
: inputColors.hoverBorder,
borderWidth: '1px',
},
})
);
const RadioBackground = styled('div')(
{
alignItems: 'center',
backgroundColor: colors.frenchVanilla100,
borderRadius: radioBorderRadius,
borderStyle: 'solid',
borderWidth: '1px',
boxSizing: 'border-box',
display: 'flex',
height: radioHeight,
justifyContent: 'center',
padding: '0px 2px',
pointerEvents: 'none',
position: 'absolute',
transition: 'border 200ms ease, background 200ms',
width: radioWidth,
},
({checked, disabled}) => ({
borderColor: checked
? colors.blueberry400
case IconButtonVariant.Inverse:
return {
'&:hover span .wd-icon-fill, span .wd-icon-fill': {
fill: colors.frenchVanilla100,
},
...getBackgroundSelector(colors.frenchVanilla100),
...getAccentSelector(colors.licorice200),
};
case IconButtonVariant.InverseFilled:
return {
backgroundColor: 'rgba(0, 0, 0, 0.4)',
'&:focus': {
backgroundColor: 'rgba(0, 0, 0, 0.4)',
},
...getBackgroundSelector(colors.frenchVanilla100),
...getFillSelector(colors.frenchVanilla100),
...getAccentSelector(colors.licorice200),
'&:active': {
...getAccentSelector(colors.licorice200),
},
};
}
}
);