You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
216 lines
5.7 KiB
216 lines
5.7 KiB
3 years ago
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
||
|
|
||
|
// based on https://github.com/developit/dlv
|
||
|
export var get = function get(obj, key, def, p, undef) {
|
||
|
key = key && key.split ? key.split('.') : [key];
|
||
|
|
||
|
for (p = 0; p < key.length; p++) {
|
||
|
obj = obj ? obj[key[p]] : undef;
|
||
|
}
|
||
|
|
||
|
return obj === undef ? def : obj;
|
||
|
};
|
||
|
var defaultBreakpoints = [40, 52, 64].map(function (n) {
|
||
|
return n + 'em';
|
||
|
});
|
||
|
var defaultTheme = {
|
||
|
space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
|
||
|
fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
|
||
|
};
|
||
|
var aliases = {
|
||
|
bg: 'backgroundColor',
|
||
|
m: 'margin',
|
||
|
mt: 'marginTop',
|
||
|
mr: 'marginRight',
|
||
|
mb: 'marginBottom',
|
||
|
ml: 'marginLeft',
|
||
|
mx: 'marginX',
|
||
|
my: 'marginY',
|
||
|
p: 'padding',
|
||
|
pt: 'paddingTop',
|
||
|
pr: 'paddingRight',
|
||
|
pb: 'paddingBottom',
|
||
|
pl: 'paddingLeft',
|
||
|
px: 'paddingX',
|
||
|
py: 'paddingY'
|
||
|
};
|
||
|
var multiples = {
|
||
|
marginX: ['marginLeft', 'marginRight'],
|
||
|
marginY: ['marginTop', 'marginBottom'],
|
||
|
paddingX: ['paddingLeft', 'paddingRight'],
|
||
|
paddingY: ['paddingTop', 'paddingBottom'],
|
||
|
size: ['width', 'height']
|
||
|
};
|
||
|
var scales = {
|
||
|
color: 'colors',
|
||
|
backgroundColor: 'colors',
|
||
|
borderColor: 'colors',
|
||
|
margin: 'space',
|
||
|
marginTop: 'space',
|
||
|
marginRight: 'space',
|
||
|
marginBottom: 'space',
|
||
|
marginLeft: 'space',
|
||
|
marginX: 'space',
|
||
|
marginY: 'space',
|
||
|
padding: 'space',
|
||
|
paddingTop: 'space',
|
||
|
paddingRight: 'space',
|
||
|
paddingBottom: 'space',
|
||
|
paddingLeft: 'space',
|
||
|
paddingX: 'space',
|
||
|
paddingY: 'space',
|
||
|
top: 'space',
|
||
|
right: 'space',
|
||
|
bottom: 'space',
|
||
|
left: 'space',
|
||
|
gridGap: 'space',
|
||
|
gridColumnGap: 'space',
|
||
|
gridRowGap: 'space',
|
||
|
gap: 'space',
|
||
|
columnGap: 'space',
|
||
|
rowGap: 'space',
|
||
|
fontFamily: 'fonts',
|
||
|
fontSize: 'fontSizes',
|
||
|
fontWeight: 'fontWeights',
|
||
|
lineHeight: 'lineHeights',
|
||
|
letterSpacing: 'letterSpacings',
|
||
|
border: 'borders',
|
||
|
borderTop: 'borders',
|
||
|
borderRight: 'borders',
|
||
|
borderBottom: 'borders',
|
||
|
borderLeft: 'borders',
|
||
|
borderWidth: 'borderWidths',
|
||
|
borderStyle: 'borderStyles',
|
||
|
borderRadius: 'radii',
|
||
|
borderTopRightRadius: 'radii',
|
||
|
borderTopLeftRadius: 'radii',
|
||
|
borderBottomRightRadius: 'radii',
|
||
|
borderBottomLeftRadius: 'radii',
|
||
|
borderTopWidth: 'borderWidths',
|
||
|
borderTopColor: 'colors',
|
||
|
borderTopStyle: 'borderStyles',
|
||
|
borderBottomWidth: 'borderWidths',
|
||
|
borderBottomColor: 'colors',
|
||
|
borderBottomStyle: 'borderStyles',
|
||
|
borderLeftWidth: 'borderWidths',
|
||
|
borderLeftColor: 'colors',
|
||
|
borderLeftStyle: 'borderStyles',
|
||
|
borderRightWidth: 'borderWidths',
|
||
|
borderRightColor: 'colors',
|
||
|
borderRightStyle: 'borderStyles',
|
||
|
outlineColor: 'colors',
|
||
|
boxShadow: 'shadows',
|
||
|
textShadow: 'shadows',
|
||
|
zIndex: 'zIndices',
|
||
|
width: 'sizes',
|
||
|
minWidth: 'sizes',
|
||
|
maxWidth: 'sizes',
|
||
|
height: 'sizes',
|
||
|
minHeight: 'sizes',
|
||
|
maxHeight: 'sizes',
|
||
|
flexBasis: 'sizes',
|
||
|
size: 'sizes',
|
||
|
// svg
|
||
|
fill: 'colors',
|
||
|
stroke: 'colors'
|
||
|
};
|
||
|
|
||
|
var positiveOrNegative = function positiveOrNegative(scale, value) {
|
||
|
if (typeof value !== 'number' || value >= 0) {
|
||
|
return get(scale, value, value);
|
||
|
}
|
||
|
|
||
|
var absolute = Math.abs(value);
|
||
|
var n = get(scale, absolute, absolute);
|
||
|
if (typeof n === 'string') return '-' + n;
|
||
|
return n * -1;
|
||
|
};
|
||
|
|
||
|
var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {
|
||
|
var _extends2;
|
||
|
|
||
|
return _extends({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2));
|
||
|
}, {});
|
||
|
export var responsive = function responsive(styles) {
|
||
|
return function (theme) {
|
||
|
var next = {};
|
||
|
var breakpoints = get(theme, 'breakpoints', defaultBreakpoints);
|
||
|
var mediaQueries = [null].concat(breakpoints.map(function (n) {
|
||
|
return "@media screen and (min-width: " + n + ")";
|
||
|
}));
|
||
|
|
||
|
for (var key in styles) {
|
||
|
var value = typeof styles[key] === 'function' ? styles[key](theme) : styles[key];
|
||
|
if (value == null) continue;
|
||
|
|
||
|
if (!Array.isArray(value)) {
|
||
|
next[key] = value;
|
||
|
continue;
|
||
|
}
|
||
|
|
||
|
for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
|
||
|
var media = mediaQueries[i];
|
||
|
|
||
|
if (!media) {
|
||
|
next[key] = value[i];
|
||
|
continue;
|
||
|
}
|
||
|
|
||
|
next[media] = next[media] || {};
|
||
|
if (value[i] == null) continue;
|
||
|
next[media][key] = value[i];
|
||
|
}
|
||
|
}
|
||
|
|
||
|
return next;
|
||
|
};
|
||
|
};
|
||
|
export var css = function css(args) {
|
||
|
return function (props) {
|
||
|
if (props === void 0) {
|
||
|
props = {};
|
||
|
}
|
||
|
|
||
|
var theme = _extends({}, defaultTheme, {}, props.theme || props);
|
||
|
|
||
|
var result = {};
|
||
|
var obj = typeof args === 'function' ? args(theme) : args;
|
||
|
var styles = responsive(obj)(theme);
|
||
|
|
||
|
for (var key in styles) {
|
||
|
var x = styles[key];
|
||
|
var val = typeof x === 'function' ? x(theme) : x;
|
||
|
|
||
|
if (key === 'variant') {
|
||
|
var variant = css(get(theme, val))(theme);
|
||
|
result = _extends({}, result, {}, variant);
|
||
|
continue;
|
||
|
}
|
||
|
|
||
|
if (val && typeof val === 'object') {
|
||
|
result[key] = css(val)(theme);
|
||
|
continue;
|
||
|
}
|
||
|
|
||
|
var prop = get(aliases, key, key);
|
||
|
var scaleName = get(scales, prop);
|
||
|
var scale = get(theme, scaleName, get(theme, prop, {}));
|
||
|
var transform = get(transforms, prop, get);
|
||
|
var value = transform(scale, val, val);
|
||
|
|
||
|
if (multiples[prop]) {
|
||
|
var dirs = multiples[prop];
|
||
|
|
||
|
for (var i = 0; i < dirs.length; i++) {
|
||
|
result[dirs[i]] = value;
|
||
|
}
|
||
|
} else {
|
||
|
result[prop] = value;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
return result;
|
||
|
};
|
||
|
};
|
||
|
export default css;
|