@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
42 lines • 2.33 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.getSkeletonStyles = void 0;
const borders_1 = require("../../../../../designSystem/kubitWireframe/commons/foundations/borders");
const wireframe_1 = require("../../../utils/wireframe");
const variants_1 = require("./variants");
const getSkeletonStyles = (COLORS) => {
return {
[variants_1.SkeletonShapeVariant.SQUARE]: {
[variants_1.SkeletonVariantType.DEFAULT]: {
skeleton: {
background_size: '200% 100%',
border_radius: borders_1.RADIUS.radius_100,
border_width: borders_1.BORDERS.border_100,
border_color: COLORS.NEUTRAL.color_neutral_border_50,
border_style: 'solid',
background_color: COLORS.NEUTRAL.color_neutral_bg_250,
...(0, wireframe_1.transformShadow)(borders_1.RADIUS.radius_300),
...(0, wireframe_1.shadowAfterStyles)(borders_1.RADIUS.radius_300, COLORS.BRAND.color_brand_bg_50, '2px'),
background: `linear-gradient(90deg, ${COLORS.SECONDARY.color_secondary_bg_150} 0%, ${COLORS.SECONDARY.color_secondary_bg_150}00 45%, ${COLORS.SECONDARY.color_secondary_bg_150} 87%)`,
},
},
},
[variants_1.SkeletonShapeVariant.CIRCLE]: {
[variants_1.SkeletonVariantType.DEFAULT]: {
skeleton: {
background_size: '200% 100%',
border_radius: '50%',
border_width: borders_1.BORDERS.border_100,
border_color: COLORS.NEUTRAL.color_neutral_border_50,
border_style: 'solid',
background_color: COLORS.NEUTRAL.color_neutral_bg_250,
...(0, wireframe_1.transformShadow)('50%'),
...(0, wireframe_1.shadowAfterStyles)('50%', COLORS.BRAND.color_brand_bg_50, '2px'),
background: `linear-gradient(90deg, ${COLORS.SECONDARY.color_secondary_bg_150} 0%, ${COLORS.SECONDARY.color_secondary_bg_150}00 45%, ${COLORS.SECONDARY.color_secondary_bg_150} 87%)`,
},
},
},
};
};
exports.getSkeletonStyles = getSkeletonStyles;
//# sourceMappingURL=styles.js.map