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.
		
		
		
		
		
			
		
			
				
					229 lines
				
				5.9 KiB
			
		
		
			
		
	
	
					229 lines
				
				5.9 KiB
			| 
								 
											3 years ago
										 
									 | 
							
								"use strict";
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								exports.__esModule = true;
							 | 
						||
| 
								 | 
							
								exports["default"] = exports.css = exports.responsive = exports.get = void 0;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								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
							 | 
						||
| 
								 | 
							
								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;
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								exports.get = get;
							 | 
						||
| 
								 | 
							
								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));
							 | 
						||
| 
								 | 
							
								}, {});
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								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;
							 | 
						||
| 
								 | 
							
								  };
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								exports.responsive = responsive;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								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;
							 | 
						||
| 
								 | 
							
								  };
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								exports.css = css;
							 | 
						||
| 
								 | 
							
								var _default = css;
							 | 
						||
| 
								 | 
							
								exports["default"] = _default;
							 |