smart-react-components
Version:
React UI library, wide variety of editable ready to use Styled and React components.
625 lines (620 loc) • 20.7 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var index = require('./index-6d498b59.js');
var ColorHelper = require('./ColorHelper-27ee3c7d.js');
var DOMHelper = require('./DOMHelper-c0bd5a29.js');
/**
* Creates a Type object and returns it.
* value could be a string or Type object.
* If value is string, sets value as the main color of the type and defines other colors by default values.
* If value is a Type object, defines undefined properties by default values.
* If option is given as an object, createType defines only colors whose properties are true in the option object.
*
* @param value
*/
const createType = (value, options = true) => {
const typeOptions = options;
let type;
let color;
if (typeof value === "string")
type = {
main: value
};
else
type = value;
try {
color = ColorHelper.ColorHelper.getColor(type.main);
}
catch (ignored) {
throw "Main color is not valid.";
}
if (options === true || typeOptions.util) {
type.font = type.font || ColorHelper.ColorHelper.getFontColor(type.main);
type.dark = type.dark || color.darken(index.DV.DARK_LEVEL).hex().toString();
type.darker = type.darker || color.darken(index.DV.DARKER_LEVEL).hex().toString();
type.darkest = type.darkest || ColorHelper.ColorHelper.getColor(type.darker).darken(index.DV.DARK_LEVEL).hex().toString();
type.light = type.light || color.darken(index.DV.LIGHT_LEVEL).hex().toString();
type.lighter = type.lighter || color.darken(index.DV.LIGHTER_LEVEL).hex().toString();
type.lightest = type.lightest || ColorHelper.ColorHelper.getColor(type.lighter).darken(index.DV.LIGHT_LEVEL).hex().toString();
type.shadow = type.shadow || color.alpha(index.DV.SHADOW_FADE_LEVEL).rgb().toString();
}
if (options === true || typeOptions.alert) {
type.alert = type.alert || {};
type.alert.background = type.alert.background || ColorHelper.ColorHelper.mix(type.main, index.DV.ALERT_BG_LEVEL);
type.alert.border = type.alert.border || ColorHelper.ColorHelper.mix(type.main, index.DV.ALERT_BORDER_LEVEL);
type.alert.font = type.alert.font || ColorHelper.ColorHelper.mix(type.main, index.DV.ALERT_FONT_LEVEL);
type.alert.fontFill = type.alert.fontFill || (type.font || ColorHelper.ColorHelper.getFontColor(type.main));
type.alert.linkFont = type.alert.linkFont || ColorHelper.ColorHelper.getColor(type.alert.font).darken(index.DV.ALERT_LINK_FONT_DARKEN_LEVEL).rgb().toString();
type.alert.hr = type.alert.hr || ColorHelper.ColorHelper.getColor(type.alert.border).darken(index.DV.ALERT_HR_DARKEN_LEVEL).rgb().toString();
}
if (options === true || typeOptions.breadcrumb) {
type.breadcrumb = type.breadcrumb || {};
type.breadcrumb.background = type.breadcrumb.background || index.DV.BREADCRUMB_BG_COLOR;
type.breadcrumb.font = type.breadcrumb.font || index.DV.BREADCRUMB_FONT_COLOR;
type.breadcrumb.fontFill = type.breadcrumb.fontFill || (color.isDark() ? index.DV.BREADCRUMB_FONT_FILL_LIGHT_COLOR : index.DV.BREADCRUMB_FONT_FILL_DARK_COLOR);
}
if (options === true || typeOptions.button) {
type.button = type.button || {};
type.button.background = type.button.background || index.DV.BUTTON_BG_COLOR;
type.button.placeholder = type.button.placeholder || type.main;
type.button.placeholderFill = type.button.placeholderFill || ColorHelper.ColorHelper.getFontColor(type.main);
}
if (options == true || typeOptions.dropdown) {
type.dropdown = type.dropdown || {};
type.dropdown.background = type.dropdown.background || index.DV.DROPDOWN_BG_COLOR;
type.dropdown.font = type.dropdown.font || ColorHelper.ColorHelper.getFontColor(type.dropdown.background);
}
if (options === true || typeOptions.form) {
type.form = type.form || {};
type.form.radioColor = type.form.radioColor || index.DV.FORM_RADIO_COLOR;
type.form.radioBorder = type.form.radioBorder || index.DV.FORM_RADIO_BORDER_COLOR;
type.form.inputBackground = type.form.inputBackground || index.DV.FORM_INPUT_BG_COLOR;
type.form.inputBorder = type.form.inputBorder || index.DV.FORM_INPUT_BORDER_COLOR;
type.form.inputFont = type.form.inputFont || ColorHelper.ColorHelper.getFontColor(type.form.inputBackground);
type.form.inputPlaceholder = type.form.inputPlaceholder || index.DV.FORM_INPUT_PLACEHOLDER_COLOR;
type.form.inputPlaceholderFill = type.form.inputPlaceholderFill || ColorHelper.ColorHelper.getColor(type.font).alpha(index.DV.FORM_INPUT_PLACEHOLDER_FILL_FADE_LEVEL).rgb().toString();
}
if (options === true || typeOptions.pagination) {
type.pagination = type.pagination || {};
type.pagination.background = type.pagination.background || index.DV.PAGINATION_BG_COLOR;
type.pagination.border = type.pagination.border || index.DV.PAGINATION_BORDER_COLOR;
type.pagination.font = type.pagination.font || ColorHelper.ColorHelper.getFontColor(type.pagination.background);
}
if (options === true || typeOptions.popover) {
type.popover = type.popover || {};
type.popover.background = type.popover.background || type.main;
const popoverBgColor = ColorHelper.ColorHelper.getColor(type.popover.background);
type.popover.border = type.popover.border || popoverBgColor.darken(index.DV.POPOVER_BORDER_DARKEN_LEVEL).hex().toString();
type.popover.headerBackground = type.popover.headerBackground || popoverBgColor.darken(index.DV.POPOVER_HEADER_BG_DARKEN_LEVEL).hex().toString();
const popoverHeaderBgColor = ColorHelper.ColorHelper.getColor(type.popover.headerBackground);
type.popover.headerBorder = type.popover.headerBorder || popoverHeaderBgColor.darken(index.DV.POPOVER_BORDER_DARKEN_LEVEL).hex().toString();
}
if (options === true || typeOptions.progressBar) {
type.progressBar = type.progressBar || {};
type.progressBar.background = type.progressBar.background || index.DV.PROGRESS_BAR_BG;
type.progressBar.backgroundFill = type.progressBar.backgroundFill || index.DV.PROGRESS_BAR_BG_FILL;
type.progressBar.backgroundAlt = type.progressBar.backgroundAlt || color.alpha(index.DV.PROGRESS_BAR_BG_ALT_FADE_LEVEL).rgb().toString();
}
if (options === true || typeOptions.table) {
type.table = type.table || {};
type.table.background = type.table.background || ColorHelper.ColorHelper.mix(type.main, index.DV.TABLE_BG_LEVEL);
type.table.border = type.table.border || ColorHelper.ColorHelper.mix(type.main, index.DV.TABLE_BORDER_LEVEL);
type.table.font = type.table.font || ColorHelper.ColorHelper.getFontColor(type.table.background);
type.table.stripedBackground = type.table.stripedBackground || ColorHelper.ColorHelper.mix(type.table.background, index.DV.TABLE_STRIPED_BG_LEVEL);
type.table.stripedFont = type.table.stripedFont || ColorHelper.ColorHelper.getFontColor(type.table.stripedBackground);
type.table.hoverBackground = type.table.hoverBackground || ColorHelper.ColorHelper.mix(type.table.background, index.DV.TABLE_HOVER_BG_LEVEL);
type.table.hoverFont = type.table.hoverFont || ColorHelper.ColorHelper.getFontColor(type.table.hoverBackground);
}
if (options === true || typeOptions.waveEffect) {
type.waveEffect = type.waveEffect || {};
const waveEffectColor = ColorHelper.ColorHelper.getColor((type.waveEffect.color || type.main));
type.waveEffect.color = `radial-gradient(${waveEffectColor.alpha(.2).toString()} 0, ${waveEffectColor.alpha(.3).toString()} 40%, ${waveEffectColor.alpha(.4).toString()} 50%, ${waveEffectColor.alpha(.5).toString()} 60%, ${waveEffectColor.alpha(0).toString()} 70%)`;
}
return type;
};
const theme = {
// util
type: {
primary: createType(index.DV.BLUE),
secondary: createType(index.DV.GRAY_700),
success: createType({
main: index.DV.GREEN,
font: index.DV.LIGHT_FONT_COLOR
}),
danger: createType({
main: index.DV.RED,
font: index.DV.LIGHT_FONT_COLOR
}),
warning: createType(index.DV.YELLOW),
info: createType(index.DV.CYAN),
light: createType({
main: index.DV.GRAY_100,
table: {
background: index.DV.TABLE_LIGHT_BG_COLOR,
border: index.DV.TABLE_LIGHT_BORDER_COLOR
},
waveEffect: {
color: index.DV.WHITE
}
}),
gray: createType(index.DV.GRAY_500),
dark: createType({
main: index.DV.GRAY_900,
table: {
background: index.DV.TABLE_DARK_BG_COLOR,
border: index.DV.TABLE_DARK_BORDER_COLOR
},
waveEffect: {
color: index.DV.BLACK
}
}),
white: createType(index.DV.WHITE),
black: createType(index.DV.BLACK)
},
isMobile: DOMHelper.DOMHelper.isMobile,
// variables
zIndex: {
buttonLoading: 10,
fixedBox: 1000,
loading: 10,
modal: 1000,
overlay: 2000,
popover: 1000,
routerProgressBar: 9999,
tooltip: 1000,
waveEffect: 10
},
length: {
"-5": "-3rem",
"-4": "-2rem",
"-3": "-1rem",
"-2": "-.5rem",
"-1": "-.25rem",
"0": "0",
"1": ".25rem",
"2": ".5rem",
"3": "1rem",
"4": "2rem",
"5": "3rem"
},
radius: {
default: ".25rem",
circle: "1rem"
},
color: {
blue: index.DV.BLUE,
indigo: index.DV.INDIGO,
purple: index.DV.PURPLE,
pink: index.DV.PINK,
red: index.DV.RED,
orange: index.DV.ORANGE,
yellow: index.DV.YELLOW,
green: index.DV.GREEN,
teal: index.DV.TEAL,
cyan: index.DV.CYAN,
white: index.DV.WHITE,
gray_100: index.DV.GRAY_100,
gray_200: index.DV.GRAY_200,
gray_300: index.DV.GRAY_300,
gray_400: index.DV.GRAY_400,
gray_500: index.DV.GRAY_500,
gray_600: index.DV.GRAY_600,
gray_700: index.DV.GRAY_700,
gray_800: index.DV.GRAY_800,
gray_900: index.DV.GRAY_900,
black: index.DV.BLACK
},
fontFamily: {
primary: "Nunito",
secondary: "Open Sans",
alert: "inherit",
badge: "inherit",
button: "inherit",
dropdown: "inherit",
radioSpan: "inherit",
input: "inherit",
option: "inherit",
modal: "inherit",
popover: "inherit",
tooltip: "inherit"
},
fontWeight: {
light: "300",
normal: "400",
semiBold: "500",
bold: "600",
},
fontSize: {
"1": ".625rem",
"2": ".8125rem",
"3": ".875rem",
"4": "1rem"
},
iconSize: {
"1": ".25rem",
"2": ".5rem",
"3": ".75rem",
"4": "1rem",
"5": "1.5rem",
small: ".5rem",
default: ".75rem",
large: "1rem"
},
// components
alert: {
padding: {
small: {
x: "1.25rem",
y: ".375rem",
xHalf: ".625rem"
},
default: {
x: "1.25rem",
y: ".75rem",
xHalf: ".625rem"
},
large: {
x: "1.25rem",
y: "1rem",
xHalf: ".625rem"
}
},
radius: ".25rem",
fontSize: {
small: ".875rem",
default: "1rem",
large: "1rem"
},
linkFontWeight: "600"
},
badge: {
fixedSize: {
small: "18px",
default: "20px",
large: "22px"
},
padding: {
small: {
x: ".1875rem",
y: ".09375rem"
},
default: {
x: ".375rem",
y: ".1875rem"
},
large: {
x: ".65rem",
y: ".3rem"
}
},
margin: {
x: ".3125rem",
y: ".3125rem"
},
radius: {
default: ".15rem",
square: "0",
rounded: ".875rem",
circle: "100%"
},
fontSize: {
small: ".75rem",
default: ".75rem",
large: ".875rem"
}
},
breadcrumb: {
padding: {
x: ".6rem",
y: ".475rem"
},
radius: {
default: ".125rem",
square: "0",
rounded: ".875rem"
},
fontSize: "1rem",
disabledOpacity: .7,
transition: "ease-in-out 200ms 0ms"
},
button: {
fixedSize: {
small: "30px",
default: "36px",
large: "40px"
},
padding: {
small: {
x: ".8rem",
y: ".28rem",
xHalf: ".4rem"
},
default: {
x: ".9rem",
y: ".45rem",
xHalf: ".45rem"
},
large: {
x: "1rem",
y: ".5rem",
xHalf: ".5rem"
}
},
radius: {
default: ".125rem",
square: "0",
rounded: "1.8rem",
circle: "100%"
},
fontSize: {
small: ".875rem",
default: ".875rem",
large: "1rem"
},
disabledOpacity: .7,
transition: "ease-in-out 200ms 0ms"
},
colorPicker: {
colorLight: "#f4f4f4",
colorDark: "#1d1d1d",
pickerBoxShadow: "0 0 3px rgba(0,0,0,.3) inset",
draggerBoxShadow: "0 0 5px rgba(0,0,0,.5)",
paletteIconColor: "#c5cbd7",
paletteBorderColor: "#d7def0"
},
datePicker: {
background: "#fff",
font: "#4d4d4d",
inactive: "#919191",
arrowActive: "#000"
},
dropdown: {
padding: {
small: ".15625rem",
default: ".3125rem",
large: ".625rem"
},
margin: {
small: {
x: ".28rem",
y: ".06rem"
},
default: {
x: ".45rem",
y: ".125rem"
},
large: {
x: ".5rem",
y: ".175rem"
}
},
radius: {
default: ".2rem",
square: "0",
rounded: "2rem"
},
fontSize: {
small: ".875rem",
default: ".875rem",
large: "1rem"
},
disabledOpacity: .7
},
fixedBox: {
boxShadow: "0 0 35px 0 rgba(154,161,171,.15)"
},
form: {
disabledOpacity: .7,
radioSpanSpace: ".46875rem",
radioSpanFontSize: {
small: ".875rem",
default: "1rem",
large: "1rem"
},
inputPadding: {
small: {
x: ".8rem",
y: ".28rem"
},
default: {
x: ".9rem",
y: ".45rem"
},
large: {
x: "1rem",
y: ".5rem"
}
},
inputRadius: {
default: ".2rem",
square: "0",
rounded: "2rem"
},
inputFontSize: {
small: ".875rem",
default: "1rem",
large: "1rem"
},
optionPadding: {
small: ".15625rem",
default: ".3125rem",
large: ".625rem"
},
optionMargin: {
small: {
x: ".28rem",
y: ".06rem"
},
default: {
x: ".45rem",
y: ".125rem"
},
large: {
x: ".5rem",
y: ".175rem"
}
},
optionFontSize: {
small: ".875rem",
default: ".875rem",
large: "1rem"
}
},
grid: {
breakpoint: {
small: 576,
medium: 768,
large: 992,
xlarge: 1200
},
containerWidth: {
small: 540,
medium: 720,
large: 960,
xlarge: 1140
},
columnGap: "15px"
},
loading: {
size: {
small: "10px",
default: "20px",
large: "30px"
},
animation: "linear 2000ms 0ms"
},
modal: {
width: {
small: "300px",
default: "500px",
large: "800px"
},
borderColor: "rgba(0,0,0,.2)",
borderRadius: ".3rem",
backgroundColor: "#fff",
fontColor: "#000",
modalContentPadding: {
x: "1rem",
y: "1rem"
},
modalContentBorderColor: "#dee2e6",
modalFooterPadding: {
x: ".75rem",
y: ".75rem"
},
modalFooterContentMargin: {
x: ".25rem",
y: ".25rem"
}
},
overlay: {
space: "1.75rem",
background: "rgba(0,0,0,.3)"
},
pagination: {
padding: {
x: ".65rem",
y: ".4rem"
},
margin: {
x: ".2525rem",
y: ".2525rem"
},
radius: {
default: ".125rem",
square: "0",
rounded: ".5rem"
},
fixedSize: "32px",
fontSize: "1rem",
disabledOpacity: .7,
transition: "ease-in-out 200ms 0ms"
},
popover: {
radius: ".25rem",
fontSize: {
small: ".875rem",
default: ".875rem",
large: "1rem"
},
headerPadding: {
small: {
x: ".5rem",
y: ".4rem"
},
default: {
x: ".8rem",
y: ".7rem"
},
large: {
x: "1.1rem",
y: "1rem"
}
},
bodyPadding: {
small: {
x: ".5rem",
y: ".25rem"
},
default: {
x: ".75rem",
y: ".5rem"
},
large: {
x: "1rem",
y: ".75rem"
}
}
},
progressBar: {
radius: {
default: ".125rem",
square: "0",
rounded: "1rem",
circle: "100%"
},
transitionType: "ease-in-out",
stripedAnimationType: "linear"
},
table: {
padding: {
small: ".3rem",
default: ".75rem",
large: "1rem"
},
fontSize: {
small: ".875rem",
default: "1rem",
large: "1rem"
},
stripedOrientation: "odd",
hoverTransition: "ease-in-out 300ms 0ms"
},
tooltip: {
padding: {
small: {
x: ".4rem",
y: ".15rem"
},
default: {
x: ".6rem",
y: ".3rem"
},
large: {
x: ".8rem",
y: ".45rem"
}
},
radius: ".25rem",
fontSize: {
small: ".75rem",
default: ".875rem",
large: "1rem"
}
},
waveEffect: {
transition: `${index.DV.WAVE_EFFECT_TRANSITION_TYPE} ${index.DV.WAVE_EFFECT_TRANSITION_DURATION}ms 0ms`
}
};
exports.createType = createType;
exports.default = theme;