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
						
					
					
				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;
 |