@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
342 lines • 12.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SLIDER_STYLES = void 0;
const state_1 = require("../../../../components/slider/types/state");
const tooltipAlign_1 = require("../../../../components/tooltip/types/tooltipAlign");
const borders_1 = require("../../foundations/borders");
const colors_1 = require("../../foundations/colors");
const spacings_1 = require("../../foundations/spacings");
const typography_1 = require("../../foundations/typography");
// text variants
const variants_1 = require("../text/variants");
const variants_2 = require("../tooltip/variants");
const variants_3 = require("./variants");
const commonProps = {
scaleContainer: {
position: 'relative',
width: '100%',
height: spacings_1.SPACINGS.spacing_100,
},
scaleOption: {
position: 'absolute',
background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_100,
width: '0.0625rem',
height: '100%',
},
tracksThumbsContainer: {
position: 'relative',
width: '100%',
height: spacings_1.SPACINGS.spacing_100,
margin_top: spacings_1.SPACINGS.spacing_100,
margin_bottom: spacings_1.SPACINGS.spacing_50,
},
tracksThumbsInnerContainer: {
position: 'absolute',
top: `calc(${spacings_1.SPACINGS.spacing_100} / 2)`,
right: '0px',
bottom: '0px',
left: '0px',
background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_100,
},
helperTextContainer: {
display: 'flex',
justify_content: 'space-between',
margin_top: spacings_1.SPACINGS.spacing_200,
},
helperTextLeftContainer: {
text_align: typography_1.TEXT_ALIGN.left,
margin_right: spacings_1.SPACINGS.spacing_100,
},
helperTextRightContainer: {
text_align: typography_1.TEXT_ALIGN.right,
margin_right: spacings_1.SPACINGS.spacing_100,
},
handle_width: spacings_1.SPACINGS.spacing_100,
tooltip: {
variant: variants_2.TooltipVariantType.DEFAULT,
align: tooltipAlign_1.TooltipAlignType.TOP,
},
};
const commonContainer = {
width: '100%',
};
const commonThumb = {
position: 'absolute',
box_sizing: 'border-box',
pointer_events: 'inherit',
overflow: 'visible',
display: 'flex',
justify_content: 'center',
align_items: 'center',
border_radius: '50%',
height: spacings_1.SPACINGS.spacing_400,
width: spacings_1.SPACINGS.spacing_400,
top: '50%',
border_width: borders_1.BORDERS.border_200,
transform: 'translate(-50%, -50%)',
border_style: 'solid',
border_color: colors_1.COLORS.NEUTRAL.color_neutral_border_250,
};
const commonRightThumb = {
...commonThumb,
transform: 'translate(50%, -50%)',
};
const commonInnerThumbTooltip = {
width: spacings_1.SPACINGS.spacing_100,
height: spacings_1.SPACINGS.spacing_100,
border_radius: '50%',
};
const commonActiveTrack = {
position: 'absolute',
height: spacings_1.SPACINGS.spacing_100,
top: `calc(-${spacings_1.SPACINGS.spacing_100} / 2)`,
border_radius: borders_1.RADIUS.radius_100,
};
const commonInactiveTrack = {
position: 'absolute',
height: spacings_1.SPACINGS.spacing_100,
top: `calc(-${spacings_1.SPACINGS.spacing_100} / 2)`,
border_radius: borders_1.RADIUS.radius_100,
};
const commonHelperText = {
font_variant: variants_1.TextVariantType.DEFAULT,
color: colors_1.COLORS.NEUTRAL.color_neutral_bg_50,
};
exports.SLIDER_STYLES = {
[variants_3.SliderVariantType.PRIMARY]: {
...commonProps,
states: {
[state_1.SliderStateType.DEFAULT]: {
container: {
...commonContainer,
cursor: 'default',
},
thumb: {
...commonThumb,
background_color: colors_1.COLORS.ACCENT.color_accent_default_icon_100,
},
rightThumb: {
...commonRightThumb,
background_color: colors_1.COLORS.ACCENT.color_accent_default_icon_100,
},
innerThumbTooltip: {
...commonInnerThumbTooltip,
},
activeTrack: {
...commonActiveTrack,
background_color: colors_1.COLORS.ACCENT.color_accent_default_font_100,
},
inactiveTrack: {
...commonInactiveTrack,
background_color: colors_1.COLORS.NEUTRAL.color_neutral_icon_100,
},
helperText: {
...commonHelperText,
},
},
[state_1.SliderStateType.HOVER]: {
container: {
...commonContainer,
cursor: 'grab',
},
thumb: {
...commonThumb,
background_color: colors_1.COLORS.ACCENT.color_accent_hover_bg_50,
},
rightThumb: {
...commonRightThumb,
background_color: colors_1.COLORS.ACCENT.color_accent_hover_bg_50,
},
innerThumbTooltip: {
...commonInnerThumbTooltip,
},
activeTrack: {
...commonActiveTrack,
background_color: colors_1.COLORS.ACCENT.color_accent_default_bg_100,
},
inactiveTrack: {
...commonInactiveTrack,
background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_100,
},
helperText: {
...commonHelperText,
},
},
[state_1.SliderStateType.PRESSED]: {
container: {
...commonContainer,
cursor: 'grabbing',
},
thumb: {
...commonThumb,
background_color: colors_1.COLORS.PRESSED.color_accent_pressed_bg_50,
},
rightThumb: {
...commonRightThumb,
background_color: colors_1.COLORS.ACCENT.color_accent_pressed_bg_50,
},
innerThumbTooltip: {
...commonInnerThumbTooltip,
},
activeTrack: {
...commonActiveTrack,
background_color: colors_1.COLORS.ACCENT.color_accent_default_bg_100,
},
inactiveTrack: {
...commonInactiveTrack,
background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_100,
},
helperText: {
...commonHelperText,
},
},
[state_1.SliderStateType.DISABLED]: {
container: {
...commonContainer,
cursor: 'default',
},
thumb: {
...commonThumb,
background_color: colors_1.COLORS.DISABLED.color_accentDisabled_bg_50,
},
rightThumb: {
...commonRightThumb,
background_color: colors_1.COLORS.DISABLED.color_accentDisabled_bg_50,
},
innerThumbTooltip: {
...commonInnerThumbTooltip,
},
activeTrack: {
...commonActiveTrack,
background_color: colors_1.COLORS.DISABLED.color_accentDisabled_border_50,
},
inactiveTrack: {
...commonInactiveTrack,
background_color: colors_1.COLORS.DISABLED.color_accentDisabled_border_100,
},
helperText: {
...commonHelperText,
},
},
},
},
[variants_3.SliderVariantType.TEST_NO_THUMB_EXCEEDS_TRACK]: {
...commonProps,
thumbExceedsTrack: false,
states: {
[state_1.SliderStateType.DEFAULT]: {
container: {
...commonContainer,
cursor: 'default',
},
thumb: {
...commonThumb,
background_color: colors_1.COLORS.ACCENT.color_accent_default_bg_50,
},
rightThumb: {
...commonRightThumb,
background_color: colors_1.COLORS.ACCENT.color_accent_default_bg_50,
},
innerThumbTooltip: {
...commonInnerThumbTooltip,
},
activeTrack: {
...commonActiveTrack,
background_color: colors_1.COLORS.ACCENT.color_accent_default_bg_50,
},
inactiveTrack: {
...commonInactiveTrack,
background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_100,
},
helperText: {
...commonHelperText,
},
},
[state_1.SliderStateType.HOVER]: {
container: {
...commonContainer,
cursor: 'grab',
},
thumb: {
...commonThumb,
background_color: colors_1.COLORS.ACCENT.color_accent_default_bg_50,
},
rightThumb: {
...commonRightThumb,
background_color: colors_1.COLORS.ACCENT.color_accent_default_bg_50,
},
innerThumbTooltip: {
...commonInnerThumbTooltip,
},
activeTrack: {
...commonActiveTrack,
background_color: colors_1.COLORS.ACCENT.color_accent_default_bg_50,
},
inactiveTrack: {
...commonInactiveTrack,
background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_100,
},
helperText: {
...commonHelperText,
},
},
[state_1.SliderStateType.PRESSED]: {
container: {
...commonContainer,
cursor: 'grabbing',
},
thumb: {
...commonThumb,
background_color: colors_1.COLORS.ACCENT.color_accent_default_bg_50,
},
rightThumb: {
...commonRightThumb,
background_color: colors_1.COLORS.ACCENT.color_accent_default_bg_50,
},
innerThumbTooltip: {
...commonInnerThumbTooltip,
},
activeTrack: {
...commonActiveTrack,
background_color: colors_1.COLORS.ACCENT.color_accent_default_bg_50,
},
inactiveTrack: {
...commonInactiveTrack,
background_color: colors_1.COLORS.NEUTRAL.color_neutral_bg_100,
},
helperText: {
...commonHelperText,
},
},
[state_1.SliderStateType.DISABLED]: {
container: {
...commonContainer,
cursor: 'default',
},
thumb: {
...commonThumb,
background_color: colors_1.COLORS.ACCENT.color_accent_default_bg_100,
},
rightThumb: {
...commonRightThumb,
background_color: colors_1.COLORS.ACCENT.color_accent_default_bg_100,
},
innerThumbTooltip: {
...commonInnerThumbTooltip,
},
activeTrack: {
...commonActiveTrack,
background_color: colors_1.COLORS.ACCENT.color_accent_default_bg_100,
},
inactiveTrack: {
...commonInactiveTrack,
background_color: colors_1.COLORS.ACCENT.color_accent_default_bg_100,
},
helperText: {
...commonHelperText,
},
},
},
},
};
//# sourceMappingURL=styles.js.map