@kubit-ui-web/react-components/dist/cjs/designSystem/kubitWireframe/commons/foundations/focusStyles.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getFocusStyles = void 0;
const styled_components_1 = require("styled-components");
const spacings_1 = require("./spacings");
const inner_border = (COLORS) => {
    return {
        border_color: COLORS.NEUTRAL.color_neutral_border_250,
        border_weight: spacings_1.SPACINGS.spacing_100,
    };
};
const outer_border = (COLORS) => {
    return {
        border_color: COLORS.NEUTRAL.color_neutral_border_250,
        border_weight: spacings_1.SPACINGS.spacing_100,
    };
};
const getFocusStyles = (COLORS) => (0, styled_components_1.css) `
  /* Inner border */
  box-shadow: 0 0 0 ${inner_border(COLORS).border_weight} ${inner_border(COLORS).border_color};
  /* Outer border */
  outline-style: solid;
  outline-offset: ${inner_border(COLORS).border_weight};
  outline-width: ${outer_border(COLORS).border_weight};
  outline-color: ${outer_border(COLORS).border_color};
`;
exports.getFocusStyles = getFocusStyles;
//# sourceMappingURL=focusStyles.js.map