@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
72 lines (71 loc) • 3.25 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.focusRing = void 0;
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
function calculateFocusRing({ width, separation, inset, innerColor, outerColor, }) {
let boxShadow, innerWidth, outerWidth;
if (innerColor && innerColor.startsWith('--')) {
// eslint-disable-next-line no-param-reassign
innerColor = (0, canvas_kit_styling_1.cssVar)(innerColor);
}
if (outerColor && outerColor.startsWith('--')) {
// eslint-disable-next-line no-param-reassign
outerColor = (0, canvas_kit_styling_1.cssVar)(outerColor);
}
switch (inset) {
case 'outer':
innerWidth = width + separation;
outerWidth = separation;
boxShadow = `inset 0 0 0 ${outerWidth}px ${outerColor}, inset 0 0 0 ${innerWidth}px ${innerColor}`;
break;
case 'inner':
innerWidth = separation;
outerWidth = width;
boxShadow = `inset 0 0 0 ${innerWidth}px ${innerColor}, 0 0 0 ${outerWidth}px ${outerColor}`;
break;
default:
innerWidth = separation;
outerWidth = width + separation;
boxShadow = `0 0 0 ${innerWidth}px ${innerColor}, 0 0 0 ${outerWidth}px ${outerColor}`;
break;
}
return { boxShadow };
}
/**
* A utility to create a canvas style focus ring around your widget.
* By default, this mixin will create a 2px focus ring tightly wrapped
* to the container (no whitespace).
*
* @param width Allows the user to specify the thickness in px of the focus ring.
* @param separation Allows the user to define the width in px of the whitespace
* that there should be between the component and the focus ring.
* @param animate Set property to false to opt out of the standard grow out of the middle animation
* @param inset Determines whether or not the focus ring is inset
* @param innerShadowColor Allows the user to specify the inner shadow color
* @param outerShadowColor Allows the user to specify the outer shadow color
*
* @returns {CSSObject} the css object for the focus ring style
*/
/**
* A utility to create a canvas style focus ring around your widget.
* By default, this mixin will create a 2px focus ring tightly wrapped
* to the container (no whitespace).
*
* @returns {CSSObject} the css object for the focus ring style
*/
function focusRing(options = {}, theme) {
const { width = 2, separation = 0, animate = true,
// hard code CSS fallbacks for dynamic styles that don't use the static style transform
innerColor = (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.base.frenchVanilla100, 'rgba(255,255,255,1)'), outerColor = (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.brand.common.focusOutline, 'rgba(8,117,225,1)'), inset, } = options;
const args = {
width: width,
separation: separation,
innerColor: innerColor,
outerColor: outerColor,
animate,
inset,
};
return calculateFocusRing(args);
}
exports.focusRing = focusRing;