@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
63 lines (62 loc) • 2.12 kB
JavaScript
import { ErrorType } from '../types';
import { colors, inputColors } from '@workday/canvas-kit-react/tokens';
import chroma from 'chroma-js';
const isAccessible = (foreground, background = colors.frenchVanilla100) => {
return chroma.contrast(foreground, background) >= 3;
};
export function getErrorColors(error, theme) {
if (error === ErrorType.Error) {
if (theme) {
const palette = theme.canvas.palette.error;
return {
outer: isAccessible(palette.main) ? palette.main : palette.darkest,
inner: palette.main,
};
}
else {
return {
outer: inputColors.error.border,
inner: inputColors.error.border,
};
}
}
else if (error === ErrorType.Alert) {
if (theme) {
const palette = theme.canvas.palette.alert;
return {
outer: isAccessible(palette.main) ? palette.main : palette.darkest,
inner: palette.main,
};
}
else {
return {
outer: colors.cantaloupe600,
inner: inputColors.alert.border,
};
}
}
else {
return {};
}
}
export function errorRing(error, theme) {
if (error !== ErrorType.Error && error !== ErrorType.Alert) {
return {};
}
const errorColors = getErrorColors(error, theme);
const errorBoxShadow = `inset 0 0 0 ${errorColors.outer === errorColors.inner ? 1 : 2}px ${errorColors.inner}`;
return {
borderColor: errorColors.outer,
transition: '100ms box-shadow',
boxShadow: errorBoxShadow,
'&:hover, &:disabled, &.hover, &.disabled': {
borderColor: errorColors.outer,
},
'&:focus-visible:not([disabled]), &.focus:not([disabled])': {
borderColor: errorColors.outer,
boxShadow: `${errorBoxShadow},
0 0 0 2px ${colors.frenchVanilla100},
0 0 0 4px ${theme ? theme.canvas.palette.common.focusOutline : inputColors.focusBorder}`,
},
};
}