@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
78 lines • 3.26 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DOT_STYLES = void 0;
const borders_1 = require("../../foundations/borders");
const colors_1 = require("../../foundations/colors");
const spacings_1 = require("../../foundations/spacings");
const typography_1 = require("../../foundations/typography");
const variants_1 = require("./variants");
const containerCommonProps = {
justify_content: 'center',
align_items: 'center',
display: 'inline-flex',
};
exports.DOT_STYLES = {
[variants_1.DotVariantType.WITH_BORDER]: {
container: {
...containerCommonProps,
background_color: colors_1.COLORS.ACCENT.color_accent_default_bg_100,
border_width: borders_1.BORDERS.border_50,
border_color: colors_1.COLORS.ACCENT.color_accent_default_border_150,
border_style: 'solid',
color: colors_1.COLORS.ACCENT.color_accent_default_font_150,
},
},
[variants_1.DotVariantType.WITHOUT_BORDER]: {
container: {
...containerCommonProps,
background_color: colors_1.COLORS.ACCENT.color_accent_default_bg_100,
color: colors_1.COLORS.ACCENT.color_accent_default_font_150,
},
},
[variants_1.DotVariantType.ALTERNATIVE]: {
container: {
...containerCommonProps,
background_color: colors_1.COLORS.ACCENT.color_accent_default_bg_150,
border_width: borders_1.BORDERS.border_50,
border_color: colors_1.COLORS.ACCENT.color_accent_default_border_100,
border_style: 'solid',
color: colors_1.COLORS.ACCENT.color_accent_default_font_100,
},
},
[variants_1.DotSizeType.SMALL]: {
container: {
border_radius: borders_1.RADIUS.radius_circle,
border_width: borders_1.BORDERS.border_100,
height: spacings_1.SPACINGS.spacing_150,
width: spacings_1.SPACINGS.spacing_150,
},
},
[variants_1.DotSizeType.MEDIUM]: {
container: {
border_radius: borders_1.RADIUS.radius_50,
border_width: borders_1.BORDERS.border_50,
height: spacings_1.SPACINGS.spacing_300,
width: 'fit-content',
padding_left: spacings_1.SPACINGS.spacing_100,
padding_right: spacings_1.SPACINGS.spacing_100,
font_size: typography_1.PARAGRAPH.CAPTION.DESKTOP.font_size,
line_height: typography_1.PARAGRAPH.CAPTION.DESKTOP.line_height,
font_weight: typography_1.FONT_WEIGHT.font_weight_600,
font_style: 'normal',
},
},
[variants_1.DotSizeType.BIG]: {
container: {
border_radius: borders_1.RADIUS.radius_50,
border_width: borders_1.BORDERS.border_50,
height: spacings_1.SPACINGS.spacing_400,
padding: spacings_1.SPACINGS.spacing_100,
width: 'fit-content',
font_size: typography_1.PARAGRAPH.CAPTION.DESKTOP.font_size,
line_height: typography_1.PARAGRAPH.CAPTION.DESKTOP.line_height,
font_weight: typography_1.FONT_WEIGHT.font_weight_600,
font_style: 'normal',
},
},
};
//# sourceMappingURL=styles.js.map