@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
65 lines (64 loc) • 2.38 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.errorRing = exports.getErrorColors = void 0;
const types_1 = require("../types");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
function getErrorColors(error, theme) {
if (error === types_1.ErrorType.Error) {
if (theme) {
const palette = theme.canvas.palette;
return {
outer: palette.common.errorInner,
inner: palette.common.errorInner,
};
}
else {
return {
outer: canvas_tokens_web_1.brand.common.errorInner,
inner: canvas_tokens_web_1.brand.common.errorInner,
};
}
}
else if (error === types_1.ErrorType.Caution) {
if (theme) {
const palette = theme.canvas.palette;
return {
outer: palette.common.alertOuter,
inner: palette.common.alertInner,
};
}
else {
return {
outer: canvas_tokens_web_1.brand.common.alertOuter,
inner: canvas_tokens_web_1.brand.common.alertInner,
};
}
}
else {
return {};
}
}
exports.getErrorColors = getErrorColors;
function errorRing(error, theme) {
if (error !== types_1.ErrorType.Error && error !== types_1.ErrorType.Caution) {
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 ${(0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.color.border.inverse)},
0 0 0 4px ${theme ? theme.canvas.palette.common.focusOutline : (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.brand.common.focusOutline)}`,
},
};
}
exports.errorRing = errorRing;