@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
71 lines (70 loc) • 2.57 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.errorRing = exports.getErrorColors = void 0;
const types_1 = require("../types");
const tokens_1 = require("@workday/canvas-kit-react/tokens");
const chroma_js_1 = __importDefault(require("chroma-js"));
const isAccessible = (foreground, background = tokens_1.colors.frenchVanilla100) => {
return chroma_js_1.default.contrast(foreground, background) >= 3;
};
function getErrorColors(error, theme) {
if (error === types_1.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: tokens_1.inputColors.error.border,
inner: tokens_1.inputColors.error.border,
};
}
}
else if (error === types_1.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: tokens_1.colors.cantaloupe600,
inner: tokens_1.inputColors.alert.border,
};
}
}
else {
return {};
}
}
exports.getErrorColors = getErrorColors;
function errorRing(error, theme) {
if (error !== types_1.ErrorType.Error && error !== types_1.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 ${tokens_1.colors.frenchVanilla100},
0 0 0 4px ${theme ? theme.canvas.palette.common.focusOutline : tokens_1.inputColors.focusBorder}`,
},
};
}
exports.errorRing = errorRing;