quantumai-design-system
Version:
퀀텀에이아이의 디자인 시스템
87 lines (86 loc) • 3.76 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { css } from '@emotion/react';
import { BASE_SPACING } from '../styles/theme';
export var pxr = function (px, base) {
if (base === void 0) { base = 16; }
return !!px ? "".concat(px / base, "rem") : px;
};
export var numToPx = function (px) {
if ('string' === typeof px)
return px;
return !!px ? "".concat(px, "px") : undefined;
};
export var transitionSet = function (property) {
return css({
transitionProperty: property,
transitionDuration: '0.2s',
transitionTimingFunction: 'ease',
});
};
var spacingSize = function (props) {
if (!props || !Object.keys(BASE_SPACING).includes(props))
return props;
return BASE_SPACING[props];
};
export var mixinMargin = function (props) {
return css({
margin: spacingSize(numToPx(props.margin)),
marginTop: spacingSize(numToPx(props.mt)),
marginRight: spacingSize(numToPx(props.mr)),
marginBottom: spacingSize(numToPx(props.mb)),
marginLeft: spacingSize(numToPx(props.ml)),
});
};
export var mixinPadding = function (props) {
return css({
padding: spacingSize(numToPx(props.padding)),
paddingTop: spacingSize(numToPx(props.pt)),
paddingRight: spacingSize(numToPx(props.pr)),
paddingBottom: spacingSize(numToPx(props.pb)),
paddingLeft: spacingSize(numToPx(props.pl)),
});
};
export var mixinSpacing = function (props) {
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), mixinMargin(props), mixinPadding(props));
};
export var mixinWidth = function (props) {
return css({
width: props.width,
minWidth: props.minW,
maxWidth: props.maxW,
});
};
export var mixinHeight = function (props) {
return css({
height: props.height,
minHeight: props.minH,
maxHeight: props.maxH,
});
};
export var mixinSize = function (props) {
return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), mixinWidth(props), mixinHeight(props));
};
export var classNames = function (names) {
if (!names)
return '';
return names === null || names === void 0 ? void 0 : names.map(function (v) { return (v ? v : ''); }).join(' ');
};
export var restProps = function (props) {
var _a = props, margin = _a.margin, mt = _a.mt, mr = _a.mr, mb = _a.mb, ml = _a.ml, padding = _a.padding, pt = _a.pt, pr = _a.pr, pb = _a.pb, pl = _a.pl, width = _a.width, minW = _a.minW, maxW = _a.maxW, height = _a.height, minH = _a.minH, maxH = _a.maxH, rest = __rest(_a, ["margin", "mt", "mr", "mb", "ml", "padding", "pt", "pr", "pb", "pl", "width", "minW", "maxW", "height", "minH", "maxH"]);
return [{ margin: margin, mt: mt, mr: mr, mb: mb, ml: ml, padding: padding, pt: pt, pr: pr, pb: pb, pl: pl, width: width, minW: minW, maxW: maxW, height: height, minH: minH, maxH: maxH }, rest];
};
var templateObject_1, templateObject_2;