@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
185 lines • 9.18 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.VIDEO_STYLES = void 0;
const sizes_1 = require("../../../../components/mediaButton/types/sizes");
const breakpoints_1 = require("../../../../types/breakpoints/breakpoints");
const colors_1 = require("../../foundations/colors");
const spacings_1 = require("../../foundations/spacings");
const typography_1 = require("../../foundations/typography");
const zIndex_1 = require("../../foundations/zIndex");
const variants_1 = require("../button/variants");
const variants_2 = require("../mediaButton/variants");
const variants_3 = require("../skeleton/variants");
const variants_4 = require("../text/variants");
const variants_5 = require("../variants");
const variants_6 = require("./variants");
exports.VIDEO_STYLES = {
[variants_6.VideoVariantType.REGULAR]: {
progressBarVariant: variants_5.ProgressBarVariantType.INTERACTIVE,
progressBarSize: variants_5.ProgressBarSizeType.MEDIUM,
buttonsContainer: {
padding: spacings_1.SPACINGS.spacing_50,
background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_100,
justify_content: 'space-between',
width: '100%',
[breakpoints_1.DeviceBreakpointsType.MOBILE]: {
flex_direction: 'column',
row_gap: spacings_1.SPACINGS.spacing_100,
},
},
subtitles: {
padding_bottom: spacings_1.SPACINGS.spacing_100,
padding: spacings_1.SPACINGS.spacing_100,
color: colors_1.COLORS.NEUTRAL.color_neutral_bg_100,
background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_100,
font_weight: typography_1.FONT_WEIGHT.font_weight_400,
[breakpoints_1.DeviceBreakpointsType.DESKTOP]: {
font_size: typography_1.HEADING.H1[breakpoints_1.DeviceBreakpointsType.DESKTOP].font_size,
line_height: typography_1.HEADING.H1[breakpoints_1.DeviceBreakpointsType.DESKTOP].line_height,
},
[breakpoints_1.DeviceBreakpointsType.TABLET]: {
font_size: typography_1.HEADING.H1[breakpoints_1.DeviceBreakpointsType.DESKTOP].font_size,
line_height: typography_1.HEADING.H1[breakpoints_1.DeviceBreakpointsType.DESKTOP].line_height,
},
[breakpoints_1.DeviceBreakpointsType.MOBILE]: {
font_size: typography_1.HEADING.H1[breakpoints_1.DeviceBreakpointsType.MOBILE].font_size,
line_height: typography_1.HEADING.H1[breakpoints_1.DeviceBreakpointsType.MOBILE].line_height,
},
},
screenIconContainer: {
z_index: zIndex_1.Z_INDEX.INTERN_3,
},
screenPlayLoadingIcon: {
variant: variants_2.MediaButtonVariantType.DEFAULT,
color: colors_1.COLORS.BRAND.color_brand_bg_50,
backgroundColor: colors_1.COLORS.NEUTRAL.color_neutral_bg_100,
size: {
[breakpoints_1.DeviceBreakpointsType.DESKTOP]: sizes_1.MediaButtonSizeType.LARGE,
[breakpoints_1.DeviceBreakpointsType.TABLET]: sizes_1.MediaButtonSizeType.LARGE,
[breakpoints_1.DeviceBreakpointsType.MOBILE]: sizes_1.MediaButtonSizeType.LARGE,
[breakpoints_1.DeviceBreakpointsType.LARGE_DESKTOP]: sizes_1.MediaButtonSizeType.LARGE,
},
},
buttonsBarPlayIcon: {
variant: variants_2.MediaButtonVariantType.DEFAULT,
color: colors_1.COLORS.NEUTRAL.color_neutral_bg_100,
backgroundColor: colors_1.COLORS.NEUTRAL.color_neutral_bg_100,
size: {
[breakpoints_1.DeviceBreakpointsType.DESKTOP]: sizes_1.MediaButtonSizeType.LARGE,
[breakpoints_1.DeviceBreakpointsType.TABLET]: sizes_1.MediaButtonSizeType.LARGE,
[breakpoints_1.DeviceBreakpointsType.MOBILE]: sizes_1.MediaButtonSizeType.LARGE,
[breakpoints_1.DeviceBreakpointsType.LARGE_DESKTOP]: sizes_1.MediaButtonSizeType.LARGE,
},
},
buttonsBarVolumeIcon: {
variant: variants_2.MediaButtonVariantType.DEFAULT,
color: colors_1.COLORS.NEUTRAL.color_neutral_bg_100,
backgroundColor: colors_1.COLORS.NEUTRAL.color_neutral_bg_100,
size: {
[breakpoints_1.DeviceBreakpointsType.DESKTOP]: sizes_1.MediaButtonSizeType.LARGE,
[breakpoints_1.DeviceBreakpointsType.TABLET]: sizes_1.MediaButtonSizeType.LARGE,
[breakpoints_1.DeviceBreakpointsType.MOBILE]: sizes_1.MediaButtonSizeType.LARGE,
[breakpoints_1.DeviceBreakpointsType.LARGE_DESKTOP]: sizes_1.MediaButtonSizeType.LARGE,
},
},
volumeBar: {
accent_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_100,
width: spacings_1.SPACINGS.spacing_100,
},
videoDuration: {
font_variant: variants_4.TextVariantType.DEFAULT,
color: colors_1.COLORS.NEUTRAL.color_neutral_bg_100,
font_weight: typography_1.FONT_WEIGHT.font_weight_400,
},
buttonsBarSubtitlesIcon: {
variant: variants_2.MediaButtonVariantType.DEFAULT,
color: colors_1.COLORS.NEUTRAL.color_neutral_bg_100,
backgroundColor: colors_1.COLORS.NEUTRAL.color_neutral_bg_100,
size: {
[breakpoints_1.DeviceBreakpointsType.DESKTOP]: sizes_1.MediaButtonSizeType.LARGE,
[breakpoints_1.DeviceBreakpointsType.TABLET]: sizes_1.MediaButtonSizeType.LARGE,
[breakpoints_1.DeviceBreakpointsType.MOBILE]: sizes_1.MediaButtonSizeType.LARGE,
[breakpoints_1.DeviceBreakpointsType.LARGE_DESKTOP]: sizes_1.MediaButtonSizeType.LARGE,
},
},
buttonsBarFullScreenIcon: {
variant: variants_2.MediaButtonVariantType.DEFAULT,
color: colors_1.COLORS.NEUTRAL.color_neutral_bg_100,
backgroundColor: colors_1.COLORS.NEUTRAL.color_neutral_bg_100,
size: {
[breakpoints_1.DeviceBreakpointsType.DESKTOP]: sizes_1.MediaButtonSizeType.LARGE,
[breakpoints_1.DeviceBreakpointsType.TABLET]: sizes_1.MediaButtonSizeType.LARGE,
[breakpoints_1.DeviceBreakpointsType.MOBILE]: sizes_1.MediaButtonSizeType.LARGE,
[breakpoints_1.DeviceBreakpointsType.LARGE_DESKTOP]: sizes_1.MediaButtonSizeType.LARGE,
},
},
buttonsBarFirstSubcontainer: {
column_gap: spacings_1.SPACINGS.spacing_50,
},
buttonsBarSecondSubcontainer: {
column_gap: spacings_1.SPACINGS.spacing_50,
},
bottomContainer: {
padding: spacings_1.SPACINGS.spacing_50,
column_gap: spacings_1.SPACINGS.spacing_50,
background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_100,
},
actionButton: {
variant: variants_1.ButtonVariantType.PRIMARY,
size: variants_1.ButtonSizeType.LARGE,
},
link: {
font_variant: variants_4.TextVariantType.DEFAULT,
font_weight: typography_1.FONT_WEIGHT.font_weight_400,
color: colors_1.COLORS.ACCENT.color_accent_default_bg_100,
},
videoSkeletonContainer: {
[breakpoints_1.DeviceBreakpointsType.DESKTOP]: {
width: '1200px',
height: '675px',
},
[breakpoints_1.DeviceBreakpointsType.TABLET]: {
width: '720px',
height: '405px',
},
[breakpoints_1.DeviceBreakpointsType.MOBILE]: {
width: '328px',
height: '185px',
},
},
buttonsSkeletonContainer: {
padding: `${spacings_1.SPACINGS.spacing_50} ${spacings_1.SPACINGS.spacing_50} ${spacings_1.SPACINGS.spacing_50} ${spacings_1.SPACINGS.spacing_0}`,
column_gap: spacings_1.SPACINGS.spacing_50,
justify_content: 'flex-end',
[breakpoints_1.DeviceBreakpointsType.MOBILE]: {
padding: spacings_1.SPACINGS.spacing_50,
justify_content: 'flex-start',
},
},
videoSkeleton: {
variant: variants_3.SkeletonVariantType.DEFAULT,
shapeVariant: variants_3.SkeletonShapeVariant.SQUARE,
width: '100%',
height: '100%',
},
buttonSkeleton: {
variant: variants_3.SkeletonVariantType.DEFAULT,
shapeVariant: variants_3.SkeletonShapeVariant.SQUARE,
width: spacings_1.SPACINGS.spacing_100,
height: spacings_1.SPACINGS.spacing_100,
},
overlay: {
position: 'absolute',
top: '0',
z_index: zIndex_1.Z_INDEX.OVERLAY,
width: '100%',
height: '100%',
opacity: '0.7',
background_color: colors_1.COLORS.ACCENT.color_accent_default_bg_100,
},
tooltip: {
variant: variants_5.TooltipVariantType.DEFAULT,
},
},
};
//# sourceMappingURL=styles.js.map