@kubit-ui-web/react-components/dist/cjs/designSystem/kubit/components/button/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.BUTTON_STYLES = void 0;
const state_1 = require("../../../../components/button/types/state");
const breakpoints_1 = require("../../../../types/breakpoints/breakpoints");
// constants
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("./variants");
const actionCommonProps = {
    text_align: typography_1.TEXT_ALIGN.center,
    icon_size: sizes_1.SIZES.size_200,
    label_font_weight: typography_1.FONT_WEIGHT.font_weight_600,
    radius_size: borders_1.BORDERS.border_100,
    text_decoration: 'underline',
    padding_right: spacings_1.SPACINGS.spacing_0,
    padding_left: spacings_1.SPACINGS.spacing_0,
    padding_top: spacings_1.SPACINGS.spacing_0,
    padding_bottom: spacings_1.SPACINGS.spacing_0,
};
const commonPropsDefault = {
    border_radius: borders_1.BORDERS.border_00,
    text_align: typography_1.TEXT_ALIGN.center,
    font_family: typography_1.FONT_FAMILY.font_family_nunito_sans,
};
exports.BUTTON_STYLES = {
    [variants_1.ButtonSizeType.SMALL]: {
        padding_right: spacings_1.SPACINGS.spacing_250,
        padding_left: spacings_1.SPACINGS.spacing_250,
        padding_top: spacings_1.SPACINGS.spacing_150,
        padding_bottom: spacings_1.SPACINGS.spacing_150,
        gap: spacings_1.SPACINGS.spacing_100,
        font_size: typography_1.PARAGRAPH.SMALL[breakpoints_1.DeviceBreakpointsType.DESKTOP].font_size,
        line_height: typography_1.PARAGRAPH.SMALL[breakpoints_1.DeviceBreakpointsType.DESKTOP].line_height,
        icon: {
            width: sizes_1.SIZES.size_200,
            height: sizes_1.SIZES.size_200,
        },
    },
    [variants_1.ButtonSizeType.MEDIUM]: {
        padding_right: spacings_1.SPACINGS.spacing_300,
        padding_left: spacings_1.SPACINGS.spacing_300,
        padding_top: spacings_1.SPACINGS.spacing_250,
        padding_bottom: spacings_1.SPACINGS.spacing_250,
        gap: spacings_1.SPACINGS.spacing_150,
        font_size: typography_1.PARAGRAPH.MEDIUM[breakpoints_1.DeviceBreakpointsType.DESKTOP].font_size,
        line_height: typography_1.PARAGRAPH.MEDIUM[breakpoints_1.DeviceBreakpointsType.DESKTOP].line_height,
        icon: {
            width: sizes_1.SIZES.size_250,
            height: sizes_1.SIZES.size_250,
        },
    },
    [variants_1.ButtonSizeType.LARGE]: {
        padding_right: spacings_1.SPACINGS.spacing_300,
        padding_left: spacings_1.SPACINGS.spacing_300,
        padding_top: spacings_1.SPACINGS.spacing_250,
        padding_bottom: spacings_1.SPACINGS.spacing_250,
        gap: spacings_1.SPACINGS.spacing_150,
        font_size: typography_1.PARAGRAPH.MEDIUM[breakpoints_1.DeviceBreakpointsType.DESKTOP].font_size,
        line_height: typography_1.PARAGRAPH.MEDIUM[breakpoints_1.DeviceBreakpointsType.DESKTOP].line_height,
        icon: {
            width: sizes_1.SIZES.size_250,
            height: sizes_1.SIZES.size_250,
        },
    },
    [variants_1.ButtonVariantType.PRIMARY]: {
        [state_1.ButtonStateType.DEFAULT]: {
            ...commonPropsDefault,
            altVariant: true,
            background_color: colors_1.COLORS.ACCENT.color_accent_default_bg_100,
            color: colors_1.COLORS.ACCENT.color_accent_default_font_50,
            icon: {
                color: colors_1.COLORS.ACCENT.color_accent_default_icon_50,
            },
        },
        [state_1.ButtonStateType.HOVER]: {
            ...commonPropsDefault,
            altVariant: true,
            background_color: colors_1.COLORS.ACCENT.color_accent_hover_bg_50,
            color: colors_1.COLORS.ACCENT.color_accent_hover_font_200,
            icon: {
                color: colors_1.COLORS.ACCENT.color_accent_hover_icon_200,
            },
        },
        [state_1.ButtonStateType.PRESSED]: {
            ...commonPropsDefault,
            altVariant: true,
            background_color: colors_1.COLORS.ACCENT.color_accent_pressed_bg_50,
            color: colors_1.COLORS.ACCENT.color_accent_pressed_font_250,
            icon: {
                color: colors_1.COLORS.ACCENT.color_accent_pressed_icon_250,
            },
            text_decoration: 'none',
        },
        [state_1.ButtonStateType.LOADING]: {
            ...commonPropsDefault,
            altVariant: true,
            background_color: colors_1.COLORS.ACCENT.color_accent_default_bg_100,
        },
        [state_1.ButtonStateType.DISABLED]: {
            ...commonPropsDefault,
            altVariant: true,
            background_color: colors_1.COLORS.DISABLED.color_accentDisabled_bg_150,
            color: colors_1.COLORS.DISABLED.color_accentDisabled_icon_100,
            icon: {
                color: colors_1.COLORS.DISABLED.color_accentDisabled_font_100,
            },
        },
    },
    [variants_1.ButtonVariantType.ACTION_PRIMARY]: {
        [state_1.ButtonStateType.DEFAULT]: {
            ...actionCommonProps,
            altVariant: true,
            color: colors_1.COLORS.ACCENT.color_accent_default_font_100,
            icon: {
                color: colors_1.COLORS.ACCENT.color_accent_default_icon_100,
            },
        },
        [state_1.ButtonStateType.PRESSED]: {
            ...actionCommonProps,
            altVariant: true,
            color: colors_1.COLORS.ACCENT.color_accent_default_font_100,
            text_decoration: 'none',
            icon: {
                color: colors_1.COLORS.ACCENT.color_accent_default_icon_100,
            },
        },
        [state_1.ButtonStateType.HOVER]: {
            ...actionCommonProps,
            altVariant: true,
            color: colors_1.COLORS.PRESSED.color_accent_pressed_font_50,
            background_color: colors_1.COLORS.PRESSED.color_accent_pressed_bg_100,
            icon: {
                color: colors_1.COLORS.PRESSED.color_accent_pressed_icon_50,
            },
        },
        [state_1.ButtonStateType.DISABLED]: {
            ...actionCommonProps,
            altVariant: true,
            color: colors_1.COLORS.DISABLED.color_accentDisabled_font_100,
            icon: {
                color: colors_1.COLORS.DISABLED.color_accentDisabled_icon_100,
            },
        },
    },
    [variants_1.ButtonVariantType.ACTION_SECONDARY]: {
        [state_1.ButtonStateType.DEFAULT]: {
            ...actionCommonProps,
            altVariant: true,
            color: colors_1.COLORS.ACCENT.color_accent_default_font_50,
            icon: {
                color: colors_1.COLORS.ACCENT.color_accent_default_icon_50,
            },
        },
        [state_1.ButtonStateType.PRESSED]: {
            ...actionCommonProps,
            altVariant: true,
            color: colors_1.COLORS.ACCENT.color_accent_default_font_50,
            text_decoration: 'none',
            icon: {
                color: colors_1.COLORS.ACCENT.color_accent_default_icon_50,
            },
        },
        [state_1.ButtonStateType.HOVER]: {
            ...actionCommonProps,
            altVariant: true,
            color: colors_1.COLORS.PRESSED.color_accent_pressed_font_150,
            background_color: colors_1.COLORS.PRESSED.color_accent_pressed_bg_100,
            icon: {
                color: colors_1.COLORS.PRESSED.color_accent_pressed_icon_150,
            },
        },
        [state_1.ButtonStateType.DISABLED]: {
            ...actionCommonProps,
            altVariant: true,
            color: colors_1.COLORS.DISABLED.color_accentDisabled_font_100,
            icon: {
                color: colors_1.COLORS.DISABLED.color_accentDisabled_icon_100,
            },
        },
    },
    [variants_1.ButtonVariantType.ACTION_SECONDARY_ALT]: {
        [state_1.ButtonStateType.DEFAULT]: {
            ...actionCommonProps,
            altVariant: true,
            color: colors_1.COLORS.ACCENT.color_accent_default_font_150,
            icon: {
                color: colors_1.COLORS.ACCENT.color_accent_default_icon_150,
            },
        },
        [state_1.ButtonStateType.PRESSED]: {
            ...actionCommonProps,
            altVariant: true,
            text_decoration: 'none',
            color: colors_1.COLORS.ACCENT.color_accent_default_font_150,
            icon: {
                color: colors_1.COLORS.ACCENT.color_accent_default_icon_150,
            },
        },
        [state_1.ButtonStateType.HOVER]: {
            ...actionCommonProps,
            altVariant: true,
            color: colors_1.COLORS.PRESSED.color_accent_pressed_font_100,
            background_color: colors_1.COLORS.PRESSED.color_accent_pressed_bg_200,
            icon: {
                color: colors_1.COLORS.PRESSED.color_accent_pressed_icon_100,
            },
        },
        [state_1.ButtonStateType.DISABLED]: {
            ...actionCommonProps,
            altVariant: true,
            color: colors_1.COLORS.DISABLED.color_accentDisabled_font_100,
            icon: {
                color: colors_1.COLORS.DISABLED.color_accentDisabled_icon_100,
            },
        },
    },
    [variants_1.ButtonVariantType.SECONDARY]: {
        [state_1.ButtonStateType.DEFAULT]: {
            ...commonPropsDefault,
            altVariant: true,
            background_color: colors_1.COLORS.ACCENT.color_accent_default_bg_150,
            color: colors_1.COLORS.ACCENT.color_accent_default_font_50,
            border: borders_1.BORDERS.border_100,
            border_style: 'solid',
            border_color: colors_1.COLORS.ACCENT.color_accent_default_border_50,
            icon: {
                color: colors_1.COLORS.ACCENT.color_accent_default_font_50,
            },
        },
        [state_1.ButtonStateType.HOVER]: {
            ...commonPropsDefault,
            altVariant: true,
            background_color: colors_1.COLORS.ACCENT.color_accent_hover_bg_100,
            color: colors_1.COLORS.ACCENT.color_accent_default_font_50,
            border: borders_1.BORDERS.border_100,
            border_style: 'solid',
            border_color: colors_1.COLORS.ACCENT.color_accent_default_border_50,
            icon: {
                color: colors_1.COLORS.ACCENT.color_accent_pressed_icon_200,
            },
        },
        [state_1.ButtonStateType.PRESSED]: {
            ...commonPropsDefault,
            altVariant: true,
            background_color: colors_1.COLORS.ACCENT.color_accent_hover_bg_100,
            color: colors_1.COLORS.ACCENT.color_accent_default_font_50,
            border: borders_1.BORDERS.border_100,
            border_style: 'solid',
            border_color: colors_1.COLORS.ACCENT.color_accent_default_border_50,
            icon: {
                color: colors_1.COLORS.NEUTRAL.color_neutral_font_50,
            },
            text_decoration: 'none',
        },
        [state_1.ButtonStateType.LOADING]: {
            ...commonPropsDefault,
            altVariant: true,
            background_color: colors_1.COLORS.ACCENT.color_accent_loading_bg_100,
            border: borders_1.BORDERS.border_100,
            border_style: 'solid',
            border_color: colors_1.COLORS.ACCENT.color_accent_loading_border_50,
        },
        [state_1.ButtonStateType.DISABLED]: {
            ...commonPropsDefault,
            altVariant: true,
            background_color: colors_1.COLORS.DISABLED.color_accentDisabled_bg_150,
            color: colors_1.COLORS.DISABLED.color_accentDisabled_font_100,
            border: borders_1.BORDERS.border_100,
            border_style: 'solid',
            border_color: colors_1.COLORS.DISABLED.color_accentDisabled_border_100,
            icon: {
                color: colors_1.COLORS.DISABLED.color_accentDisabled_icon_100,
            },
        },
    },
    [variants_1.ButtonVariantType.SECONDARY_ALT]: {
        [state_1.ButtonStateType.DEFAULT]: {
            ...commonPropsDefault,
            altVariant: true,
            background_color: colors_1.COLORS.ACCENT.color_accent_default_bg_50,
            color: colors_1.COLORS.ACCENT.color_accent_default_font_150,
            border: borders_1.BORDERS.border_100,
            border_style: 'solid',
            border_color: colors_1.COLORS.ACCENT.color_accent_default_border_150,
            icon: {
                color: colors_1.COLORS.ACCENT.color_accent_default_icon_150,
            },
        },
        [state_1.ButtonStateType.HOVER]: {
            ...commonPropsDefault,
            altVariant: true,
            background_color: colors_1.COLORS.ACCENT.color_accent_hover_bg_150,
            color: colors_1.COLORS.ACCENT.color_accent_default_font_150,
            border: borders_1.BORDERS.border_100,
            border_style: 'solid',
            border_color: colors_1.COLORS.ACCENT.color_accent_default_border_150,
            icon: {
                color: colors_1.COLORS.ACCENT.color_accent_default_font_150,
            },
        },
        [state_1.ButtonStateType.PRESSED]: {
            ...commonPropsDefault,
            altVariant: true,
            background_color: colors_1.COLORS.ACCENT.color_accent_pressed_bg_150,
            color: colors_1.COLORS.ACCENT.color_accent_default_font_150,
            border: borders_1.BORDERS.border_100,
            border_style: 'solid',
            border_color: colors_1.COLORS.ACCENT.color_accent_default_border_150,
            icon: {
                color: colors_1.COLORS.ACCENT.color_accent_default_font_150,
            },
            text_decoration: 'none',
        },
        [state_1.ButtonStateType.LOADING]: {
            ...commonPropsDefault,
            altVariant: true,
            background_color: colors_1.COLORS.ACCENT.color_accent_loading_bg_150,
            border: borders_1.BORDERS.border_100,
            border_style: 'solid',
            border_color: colors_1.COLORS.ACCENT.color_accent_loading_border_100,
        },
        [state_1.ButtonStateType.DISABLED]: {
            ...commonPropsDefault,
            altVariant: true,
            background_color: colors_1.COLORS.DISABLED.color_accentDisabled_bg_50,
            color: colors_1.COLORS.DISABLED.color_accentDisabled_font_100,
            border: borders_1.BORDERS.border_100,
            border_style: 'solid',
            border_color: colors_1.COLORS.DISABLED.color_accentDisabled_border_100,
            icon: {
                color: colors_1.COLORS.DISABLED.color_accentDisabled_icon_100,
            },
        },
    },
};
//# sourceMappingURL=styles.js.map