@kubit-ui-web/react-components/dist/cjs/designSystem/kubit/components/divider/styles.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.DIVIDER_STYLES = void 0;
const dividerEmbebed_1 = require("../../../../components/divider/types/dividerEmbebed");
const borders_1 = require("../../foundations/borders");
const colors_1 = require("../../foundations/colors");
const sizes_1 = require("../../foundations/sizes");
const spacings_1 = require("../../foundations/spacings");
const typography_1 = require("../../foundations/typography");
const variants_1 = require("../text/variants");
const variants_2 = require("../variants");
const variants_3 = require("./variants");
const commonEmbebedTokens = {
    [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 },
};
const commonContainerTokens = {
    display: 'flex',
    flex_direction: 'column',
    width: '100%',
    height: '100%',
    border_radius: borders_1.RADIUS.radius_50,
    padding: `${spacings_1.SPACINGS.spacing_200} ${spacings_1.SPACINGS.spacing_300}`,
    gap: spacings_1.SPACINGS.spacing_100,
};
const row = {
    display: 'flex',
    justify_content: 'space-between',
    align_items: 'center',
};
const labelIconContainer = {
    display: 'flex',
    align_items: 'center',
    gap: spacings_1.SPACINGS.spacing_100,
};
const commonLabelTokens = {
    font_variant: variants_1.TextVariantType.PARAGRAPH_SMALL_EXTENDED,
    font_weight: typography_1.FONT_WEIGHT.font_weight_600,
};
const icon = {
    color: colors_1.COLORS.NEUTRAL.color_neutral_icon_250,
    height: sizes_1.SIZES.size_200,
    width: sizes_1.SIZES.size_200,
};
exports.DIVIDER_STYLES = {
    [variants_3.DividerVariantType.DEFAULT]: {
        container: {
            ...commonContainerTokens,
            background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_50,
        },
        row,
        labelIconContainer,
        label: {
            ...commonLabelTokens,
            color: colors_1.COLORS.NEUTRAL.color_neutral_font_250,
        },
        sublabel: {
            ...commonLabelTokens,
            color: colors_1.COLORS.NEUTRAL.color_neutral_font_250,
        },
        icon,
        tooltipVariant: variants_2.TooltipVariantType.DEFAULT,
        embebed: commonEmbebedTokens,
    },
    [variants_3.DividerVariantType.SECONDARY]: {
        container: {
            ...commonContainerTokens,
            background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
        },
        row,
        labelIconContainer,
        label: {
            ...commonLabelTokens,
            color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
        },
        sublabel: {
            ...commonLabelTokens,
            color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
        },
        icon: {
            ...icon,
            color: colors_1.COLORS.NEUTRAL.color_neutral_icon_50,
        },
        tooltipVariant: variants_2.TooltipVariantType.DEFAULT,
        embebed: commonEmbebedTokens,
    },
};
//# sourceMappingURL=styles.js.map