@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
38 lines • 1.85 kB
JavaScript
import { RADIUS } from '../../foundations/borders';
import { COLORS } from '../../foundations/colors';
import { SkeletonShapeVariant, SkeletonVariantType } from './variants';
export const SKELETON_STYLES = {
[SkeletonShapeVariant.SQUARE]: {
[SkeletonVariantType.DEFAULT]: {
skeleton: {
background_size: '200% 100%',
border_radius: RADIUS.radius_50,
background: `linear-gradient(90deg, ${COLORS.NEUTRAL.color_neutral_font_200} 0%, ${COLORS.NEUTRAL.color_neutral_font_200}00 45%, ${COLORS.NEUTRAL.color_neutral_font_200} 87%)`,
},
},
[SkeletonVariantType.ALTERNATIVE]: {
skeleton: {
background_size: '200% 100%',
border_radius: RADIUS.radius_50,
background: `linear-gradient(90deg, ${COLORS.NEUTRAL.color_neutral_bg_200} 0%, ${COLORS.NEUTRAL.color_neutral_bg_200}00 45%, ${COLORS.NEUTRAL.color_neutral_bg_200} 87%)`,
},
},
},
[SkeletonShapeVariant.CIRCLE]: {
[SkeletonVariantType.DEFAULT]: {
skeleton: {
background_size: '200% 100%',
border_radius: RADIUS.radius_circle,
background: `linear-gradient(90deg, ${COLORS.NEUTRAL.color_neutral_font_200} 0%, ${COLORS.NEUTRAL.color_neutral_font_200}00 45%, ${COLORS.NEUTRAL.color_neutral_font_200} 87%)`,
},
},
[SkeletonVariantType.ALTERNATIVE]: {
skeleton: {
background_size: '200% 100%',
border_radius: RADIUS.radius_circle,
background: `linear-gradient(90deg, ${COLORS.NEUTRAL.color_neutral_bg_200} 0%, ${COLORS.NEUTRAL.color_neutral_bg_200}00 45%, ${COLORS.NEUTRAL.color_neutral_bg_200} 87%)`,
},
},
},
};
//# sourceMappingURL=styles.js.map