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.
		
		
		
		
		
			
		
			
				
					126 lines
				
				3.0 KiB
			
		
		
			
		
	
	
					126 lines
				
				3.0 KiB
			| 
								 
											3 years ago
										 
									 | 
							
								import { get, system, compose } from '@styled-system/core';
							 | 
						||
| 
								 | 
							
								var defaults = {
							 | 
						||
| 
								 | 
							
								  space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var isNumber = function isNumber(n) {
							 | 
						||
| 
								 | 
							
								  return typeof n === 'number' && !isNaN(n);
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var getMargin = function getMargin(n, scale) {
							 | 
						||
| 
								 | 
							
								  if (!isNumber(n)) {
							 | 
						||
| 
								 | 
							
								    return get(scale, n, n);
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  var isNegative = n < 0;
							 | 
						||
| 
								 | 
							
								  var absolute = Math.abs(n);
							 | 
						||
| 
								 | 
							
								  var value = get(scale, absolute, absolute);
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  if (!isNumber(value)) {
							 | 
						||
| 
								 | 
							
								    return isNegative ? '-' + value : value;
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  return value * (isNegative ? -1 : 1);
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var configs = {};
							 | 
						||
| 
								 | 
							
								configs.margin = {
							 | 
						||
| 
								 | 
							
								  margin: {
							 | 
						||
| 
								 | 
							
								    property: 'margin',
							 | 
						||
| 
								 | 
							
								    scale: 'space',
							 | 
						||
| 
								 | 
							
								    transform: getMargin,
							 | 
						||
| 
								 | 
							
								    defaultScale: defaults.space
							 | 
						||
| 
								 | 
							
								  },
							 | 
						||
| 
								 | 
							
								  marginTop: {
							 | 
						||
| 
								 | 
							
								    property: 'marginTop',
							 | 
						||
| 
								 | 
							
								    scale: 'space',
							 | 
						||
| 
								 | 
							
								    transform: getMargin,
							 | 
						||
| 
								 | 
							
								    defaultScale: defaults.space
							 | 
						||
| 
								 | 
							
								  },
							 | 
						||
| 
								 | 
							
								  marginRight: {
							 | 
						||
| 
								 | 
							
								    property: 'marginRight',
							 | 
						||
| 
								 | 
							
								    scale: 'space',
							 | 
						||
| 
								 | 
							
								    transform: getMargin,
							 | 
						||
| 
								 | 
							
								    defaultScale: defaults.space
							 | 
						||
| 
								 | 
							
								  },
							 | 
						||
| 
								 | 
							
								  marginBottom: {
							 | 
						||
| 
								 | 
							
								    property: 'marginBottom',
							 | 
						||
| 
								 | 
							
								    scale: 'space',
							 | 
						||
| 
								 | 
							
								    transform: getMargin,
							 | 
						||
| 
								 | 
							
								    defaultScale: defaults.space
							 | 
						||
| 
								 | 
							
								  },
							 | 
						||
| 
								 | 
							
								  marginLeft: {
							 | 
						||
| 
								 | 
							
								    property: 'marginLeft',
							 | 
						||
| 
								 | 
							
								    scale: 'space',
							 | 
						||
| 
								 | 
							
								    transform: getMargin,
							 | 
						||
| 
								 | 
							
								    defaultScale: defaults.space
							 | 
						||
| 
								 | 
							
								  },
							 | 
						||
| 
								 | 
							
								  marginX: {
							 | 
						||
| 
								 | 
							
								    properties: ['marginLeft', 'marginRight'],
							 | 
						||
| 
								 | 
							
								    scale: 'space',
							 | 
						||
| 
								 | 
							
								    transform: getMargin,
							 | 
						||
| 
								 | 
							
								    defaultScale: defaults.space
							 | 
						||
| 
								 | 
							
								  },
							 | 
						||
| 
								 | 
							
								  marginY: {
							 | 
						||
| 
								 | 
							
								    properties: ['marginTop', 'marginBottom'],
							 | 
						||
| 
								 | 
							
								    scale: 'space',
							 | 
						||
| 
								 | 
							
								    transform: getMargin,
							 | 
						||
| 
								 | 
							
								    defaultScale: defaults.space
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								configs.margin.m = configs.margin.margin;
							 | 
						||
| 
								 | 
							
								configs.margin.mt = configs.margin.marginTop;
							 | 
						||
| 
								 | 
							
								configs.margin.mr = configs.margin.marginRight;
							 | 
						||
| 
								 | 
							
								configs.margin.mb = configs.margin.marginBottom;
							 | 
						||
| 
								 | 
							
								configs.margin.ml = configs.margin.marginLeft;
							 | 
						||
| 
								 | 
							
								configs.margin.mx = configs.margin.marginX;
							 | 
						||
| 
								 | 
							
								configs.margin.my = configs.margin.marginY;
							 | 
						||
| 
								 | 
							
								configs.padding = {
							 | 
						||
| 
								 | 
							
								  padding: {
							 | 
						||
| 
								 | 
							
								    property: 'padding',
							 | 
						||
| 
								 | 
							
								    scale: 'space',
							 | 
						||
| 
								 | 
							
								    defaultScale: defaults.space
							 | 
						||
| 
								 | 
							
								  },
							 | 
						||
| 
								 | 
							
								  paddingTop: {
							 | 
						||
| 
								 | 
							
								    property: 'paddingTop',
							 | 
						||
| 
								 | 
							
								    scale: 'space',
							 | 
						||
| 
								 | 
							
								    defaultScale: defaults.space
							 | 
						||
| 
								 | 
							
								  },
							 | 
						||
| 
								 | 
							
								  paddingRight: {
							 | 
						||
| 
								 | 
							
								    property: 'paddingRight',
							 | 
						||
| 
								 | 
							
								    scale: 'space',
							 | 
						||
| 
								 | 
							
								    defaultScale: defaults.space
							 | 
						||
| 
								 | 
							
								  },
							 | 
						||
| 
								 | 
							
								  paddingBottom: {
							 | 
						||
| 
								 | 
							
								    property: 'paddingBottom',
							 | 
						||
| 
								 | 
							
								    scale: 'space',
							 | 
						||
| 
								 | 
							
								    defaultScale: defaults.space
							 | 
						||
| 
								 | 
							
								  },
							 | 
						||
| 
								 | 
							
								  paddingLeft: {
							 | 
						||
| 
								 | 
							
								    property: 'paddingLeft',
							 | 
						||
| 
								 | 
							
								    scale: 'space',
							 | 
						||
| 
								 | 
							
								    defaultScale: defaults.space
							 | 
						||
| 
								 | 
							
								  },
							 | 
						||
| 
								 | 
							
								  paddingX: {
							 | 
						||
| 
								 | 
							
								    properties: ['paddingLeft', 'paddingRight'],
							 | 
						||
| 
								 | 
							
								    scale: 'space',
							 | 
						||
| 
								 | 
							
								    defaultScale: defaults.space
							 | 
						||
| 
								 | 
							
								  },
							 | 
						||
| 
								 | 
							
								  paddingY: {
							 | 
						||
| 
								 | 
							
								    properties: ['paddingTop', 'paddingBottom'],
							 | 
						||
| 
								 | 
							
								    scale: 'space',
							 | 
						||
| 
								 | 
							
								    defaultScale: defaults.space
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								configs.padding.p = configs.padding.padding;
							 | 
						||
| 
								 | 
							
								configs.padding.pt = configs.padding.paddingTop;
							 | 
						||
| 
								 | 
							
								configs.padding.pr = configs.padding.paddingRight;
							 | 
						||
| 
								 | 
							
								configs.padding.pb = configs.padding.paddingBottom;
							 | 
						||
| 
								 | 
							
								configs.padding.pl = configs.padding.paddingLeft;
							 | 
						||
| 
								 | 
							
								configs.padding.px = configs.padding.paddingX;
							 | 
						||
| 
								 | 
							
								configs.padding.py = configs.padding.paddingY;
							 | 
						||
| 
								 | 
							
								export var margin = system(configs.margin);
							 | 
						||
| 
								 | 
							
								export var padding = system(configs.padding);
							 | 
						||
| 
								 | 
							
								export var space = compose(margin, padding);
							 | 
						||
| 
								 | 
							
								export default space;
							 |