@kubit-ui-web/react-components/dist/cjs/designSystem/kubit/components/dropdownSelected/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.DROPDOWN_SELECTED_STYLES = void 0;
const states_1 = require("../../../../components/dropdownSelected/types/states");
const breakpoints_1 = require("../../../../types/breakpoints/breakpoints");
const borders_1 = require("../../foundations/borders");
const colors_1 = require("../../foundations/colors");
const shadow_1 = require("../../foundations/shadow");
const spacings_1 = require("../../foundations/spacings");
const typography_1 = require("../../foundations/typography");
const variants_1 = require("../listOptions/variants");
const variants_2 = require("../option/variants");
const variants_3 = require("../popover/variants");
const variants_4 = require("../text/variants");
const variants_5 = require("./variants");
const commonDefaultVariantStateProps = {
    container: {
        border_right: `${spacings_1.SPACINGS.spacing_25} solid ${colors_1.COLORS.NEUTRAL.color_neutral_border_50}`,
    },
    buttonOrLinkContainer: {
        display: 'flex',
        gap: spacings_1.SPACINGS.spacing_150,
        cursor: 'pointer',
        align_items: 'center',
        background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_50,
        width: '100%',
        justify_content: 'space-between',
        padding: `${spacings_1.SPACINGS.spacing_100} ${spacings_1.SPACINGS.spacing_150}`,
    },
    labelOpened: {
        font_variant: variants_4.TextVariantType.PARAGRAPH_CAPTION_EXTENDED,
        font_weight: typography_1.FONT_WEIGHT.font_weight_400,
        color: colors_1.COLORS.ACCENT.color_accent_default_font_150,
    },
    labelClosed: {
        font_variant: variants_4.TextVariantType.PARAGRAPH_CAPTION_EXTENDED,
        font_weight: typography_1.FONT_WEIGHT.font_weight_400,
        color: colors_1.COLORS.ACCENT.color_accent_default_font_150,
    },
    iconOpened: {
        width: spacings_1.SPACINGS.spacing_400,
        height: spacings_1.SPACINGS.spacing_400,
        color: colors_1.COLORS.NEUTRAL.color_neutral_icon_250,
    },
    iconClosed: {
        width: spacings_1.SPACINGS.spacing_400,
        height: spacings_1.SPACINGS.spacing_400,
        color: colors_1.COLORS.NEUTRAL.color_neutral_font_250,
    },
    popover: {
        variant: variants_3.PopoverVariantType.INPUT_DROPDOWN_LEVEL_TWO,
    },
    listOptions: {
        variant: variants_1.ListOptionsVariantType.CODE_VIEWER_SUBTHEME,
        optionVariant: variants_2.OptionVariantType.CODE_VIEWER_SUBTHEME,
    },
    listOptionsContainer: {
        max_width: '15rem',
        box_shadow: shadow_1.SHADOW.shadow_10,
        border: `${spacings_1.SPACINGS.spacing_50} solid ${colors_1.COLORS.NEUTRAL.color_neutral_border_50}`,
    },
};
const commonTopBarVariantStateProps = {
    container: {
        padding: `${spacings_1.SPACINGS.spacing_100} ${spacings_1.SPACINGS.spacing_0}`,
        border_width: borders_1.BORDERS.border_00,
    },
    buttonOrLinkContainer: {
        display: 'flex',
        gap: spacings_1.SPACINGS.spacing_150,
        cursor: 'pointer',
        align_items: 'center',
        background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_100,
        width: '100%',
        justify_content: 'space-between',
        padding: `${spacings_1.SPACINGS.spacing_150}`,
    },
    labelOpened: {
        font_variant: variants_4.TextVariantType.PARAGRAPH_CAPTION_EXPANDED,
        font_weight: typography_1.FONT_WEIGHT.font_weight_400,
        color: colors_1.COLORS.ACCENT.color_accent_default_font_150,
    },
    labelClosed: {
        font_variant: variants_4.TextVariantType.PARAGRAPH_CAPTION_EXPANDED,
        font_weight: typography_1.FONT_WEIGHT.font_weight_400,
        color: colors_1.COLORS.ACCENT.color_accent_default_font_150,
    },
    iconOpened: {
        width: spacings_1.SPACINGS.spacing_350,
        height: spacings_1.SPACINGS.spacing_350,
        color: colors_1.COLORS.NEUTRAL.color_neutral_font_250,
    },
    iconClosed: {
        width: spacings_1.SPACINGS.spacing_350,
        height: spacings_1.SPACINGS.spacing_350,
        color: colors_1.COLORS.NEUTRAL.color_neutral_font_250,
    },
    popover: {
        variant: variants_3.PopoverVariantType.INPUT_DROPDOWN_LEVEL_ONE,
    },
    listOptions: {
        variant: variants_1.ListOptionsVariantType.INPUT_DROPDOWN_SECTION,
        optionVariant: variants_2.OptionVariantType.TOPBAR,
    },
    listOptionsContainer: {
        max_width: '15rem',
        border_style: 'solid',
        border_color: colors_1.COLORS.NEUTRAL.color_neutral_border_50,
        border_width: borders_1.BORDERS.border_00,
        background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_100,
        margin_top: spacings_1.SPACINGS.spacing_100,
        padding_bottom: spacings_1.SPACINGS.spacing_100,
    },
};
const commonSideMenuVariantStateProps = {
    container: {
        padding: spacings_1.SPACINGS.spacing_100,
        border_width: borders_1.BORDERS.border_00,
    },
    buttonOrLinkContainer: {
        display: 'flex',
        gap: spacings_1.SPACINGS.spacing_150,
        cursor: 'pointer',
        align_items: 'center',
        background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_100,
        width: '100%',
        justify_content: 'space-between',
        padding: `${spacings_1.SPACINGS.spacing_150}`,
    },
    labelOpened: {
        font_variant: variants_4.TextVariantType.PARAGRAPH_CAPTION_EXPANDED,
        font_weight: typography_1.FONT_WEIGHT.font_weight_400,
        color: colors_1.COLORS.ACCENT.color_accent_default_font_150,
    },
    labelClosed: {
        font_variant: variants_4.TextVariantType.PARAGRAPH_CAPTION_EXPANDED,
        font_weight: typography_1.FONT_WEIGHT.font_weight_400,
        color: colors_1.COLORS.ACCENT.color_accent_default_font_150,
    },
    iconOpened: {
        width: spacings_1.SPACINGS.spacing_350,
        height: spacings_1.SPACINGS.spacing_350,
        color: colors_1.COLORS.NEUTRAL.color_neutral_font_250,
    },
    iconClosed: {
        width: spacings_1.SPACINGS.spacing_350,
        height: spacings_1.SPACINGS.spacing_350,
        color: colors_1.COLORS.NEUTRAL.color_neutral_font_250,
    },
    popover: {
        variant: variants_3.PopoverVariantType.INPUT_DROPDOWN_LEVEL_TWO,
    },
    listOptions: {
        variant: variants_1.ListOptionsVariantType.DROPDOWN_SELECTED_SECTION,
        optionVariant: variants_2.OptionVariantType.INPUT_DROPDOWN,
    },
    listOptionsContainer: {
        background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_250,
        margin_top: spacings_1.SPACINGS.spacing_350,
        border: '1px solid black',
    },
};
const commonTopbarTapVariantStateProps = {
    container: {
        display: 'flex',
        flex_direction: 'column',
        [breakpoints_1.DeviceBreakpointsType.MOBILE]: {
            width: '100%',
        },
    },
    buttonOrLinkContainer: {
        display: 'flex',
        justify_content: 'space-between',
        gap: spacings_1.SPACINGS.spacing_150,
        cursor: 'pointer',
        align_items: 'center',
        padding: spacings_1.SPACINGS.spacing_250,
        text_decoration: 'none',
        background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_50,
        [breakpoints_1.DeviceBreakpointsType.MOBILE]: {
            width: '100%',
            padding: spacings_1.SPACINGS.spacing_300,
            height: spacings_1.SPACINGS.spacing_550,
        },
    },
    labelOpened: {
        font_variant: variants_4.TextVariantType.PARAGRAPH_SMALL_EXPANDED,
        font_weight: typography_1.FONT_WEIGHT.font_weight_400,
        color: colors_1.COLORS.ACCENT.color_accent_default_font_150,
    },
    labelClosed: {
        font_variant: variants_4.TextVariantType.PARAGRAPH_SMALL_EXPANDED,
        font_weight: typography_1.FONT_WEIGHT.font_weight_400,
        color: colors_1.COLORS.ACCENT.color_accent_default_font_150,
    },
    iconOpened: {
        width: spacings_1.SPACINGS.spacing_350,
        height: spacings_1.SPACINGS.spacing_350,
        color: colors_1.COLORS.NEUTRAL.color_neutral_icon_250,
    },
    iconClosed: {
        width: spacings_1.SPACINGS.spacing_350,
        height: spacings_1.SPACINGS.spacing_350,
        color: colors_1.COLORS.NEUTRAL.color_neutral_icon_250,
    },
    popover: {
        variant: variants_3.PopoverVariantType.TOPBAR_TAP,
    },
    listOptions: {
        variant: variants_1.ListOptionsVariantType.DEFAULT,
        optionVariant: variants_2.OptionVariantType.TOPBAR_TAB,
    },
    listOptionsContainer: {
        margin_top: spacings_1.SPACINGS.spacing_200,
        [breakpoints_1.DeviceBreakpointsType.MOBILE]: {
            margin_top: spacings_1.SPACINGS.spacing_0,
            width: '100%',
        },
    },
};
exports.DROPDOWN_SELECTED_STYLES = {
    [variants_5.DropdownSelectedVariantType.DEFAULT]: {
        [states_1.DropdownSelectedStateType.DEFAULT]: commonDefaultVariantStateProps,
        [states_1.DropdownSelectedStateType.HOVER]: commonDefaultVariantStateProps,
    },
    [variants_5.DropdownSelectedVariantType.TOPBAR]: {
        [states_1.DropdownSelectedStateType.DEFAULT]: commonTopBarVariantStateProps,
        [states_1.DropdownSelectedStateType.HOVER]: commonTopBarVariantStateProps,
    },
    [variants_5.DropdownSelectedVariantType.SIDE_MENU]: {
        [states_1.DropdownSelectedStateType.DEFAULT]: commonSideMenuVariantStateProps,
        [states_1.DropdownSelectedStateType.HOVER]: commonSideMenuVariantStateProps,
    },
    [variants_5.DropdownSelectedVariantType.TOPBAR_TAB]: {
        [states_1.DropdownSelectedStateType.DEFAULT]: commonTopbarTapVariantStateProps,
        [states_1.DropdownSelectedStateType.HOVER]: {
            ...commonTopbarTapVariantStateProps,
            buttonOrLinkContainer: {
                ...commonTopbarTapVariantStateProps.buttonOrLinkContainer,
                background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_100,
            },
        },
    },
};
//# sourceMappingURL=styles.js.map