import { getColor } from '@chakra-ui/theme-tools';
import { cssVar, defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';

var $startColor = cssVar('skeleton-start-color');
var $endColor = cssVar('skeleton-end-color');
var baseStyle = defineStyle(function (props) {
    var _a;
    var _b = props.startColor, startColor = _b === void 0 ? 'gray.100' : _b, _c = props.endColor, endColor = _c === void 0 ? 'gray.400' : _c, theme = props.theme;
    var start = getColor(theme, startColor);
    var end = getColor(theme, endColor);
    return _a = {},
        _a[$startColor.variable] = start,
        _a[$endColor.variable] = end,
        _a.opacity = 0.7,
        _a.borderRadius = '2px',
        _a.borderColor = start,
        _a.background = end,
        _a;
});
var skeletonTheme = defineStyleConfig({
    baseStyle: baseStyle,
});

export { skeletonTheme as default };
//# sourceMappingURL=skeleton.js.map
