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