@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
59 lines • 2.84 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.getDividerStyles = void 0;
const dividerEmbebed_1 = require("../../../../../components/divider/types/dividerEmbebed");
const borders_1 = require("../../../../../designSystem/kubitWireframe/commons/foundations/borders");
const sizes_1 = require("../../../../../designSystem/kubitWireframe/commons/foundations/sizes");
const spacings_1 = require("../../../../../designSystem/kubitWireframe/commons/foundations/spacings");
const typography_1 = require("../../../../../designSystem/kubitWireframe/commons/foundations/typography");
const variants_1 = require("../../../../kubit/components/text/variants");
const variants_2 = require("../variants");
const variants_3 = require("./variants");
const getDividerStyles = (COLORS) => {
return {
[variants_3.DividerVariantType.DEFAULT]: {
container: {
display: 'flex',
flex_direction: 'column',
width: spacings_1.SPACINGS.spacing_100_percent,
height: spacings_1.SPACINGS.spacing_100_percent,
border_radius: borders_1.RADIUS.radius_50,
padding: `${spacings_1.SPACINGS.spacing_200} ${spacings_1.SPACINGS.spacing_300}`,
gap: spacings_1.SPACINGS.spacing_100,
background_color: COLORS.NEUTRAL.color_neutral_bg_50,
},
row: {
display: 'flex',
justify_content: 'space-between',
align_items: 'center',
},
labelIconContainer: {
display: 'flex',
align_items: 'center',
gap: spacings_1.SPACINGS.spacing_100,
},
label: {
font_variant: variants_1.TextVariantType.PARAGRAPH_SMALL_EXTENDED,
font_weight: typography_1.FONT_WEIGHT.font_weight_600,
color: COLORS.NEUTRAL.color_neutral_font_250,
},
icon: {
color: COLORS.NEUTRAL.color_neutral_icon_250,
height: sizes_1.SIZES.size_200,
width: sizes_1.SIZES.size_200,
},
tooltipVariant: variants_2.TooltipVariantType.DEFAULT,
embebed: {
[dividerEmbebed_1.DividerEmbebed.TOP]: {
border_radius: `${borders_1.RADIUS.radius_50} ${borders_1.RADIUS.radius_50} 0 0`,
},
[dividerEmbebed_1.DividerEmbebed.BOTTOM]: {
border_radius: `0 0 ${borders_1.RADIUS.radius_50} ${borders_1.RADIUS.radius_50}`,
},
[dividerEmbebed_1.DividerEmbebed.WITHOUT]: { border_radius: borders_1.RADIUS.radius_00 },
},
},
};
};
exports.getDividerStyles = getDividerStyles;
//# sourceMappingURL=styles.js.map