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.
116 lines
4.9 KiB
116 lines
4.9 KiB
import { createStyleFunction, createParser } from '@styled-system/core'; // v4 api shims
|
|
|
|
import layout from '@styled-system/layout';
|
|
import color from '@styled-system/color';
|
|
import typography from '@styled-system/typography';
|
|
import flexbox from '@styled-system/flexbox';
|
|
import grid from '@styled-system/grid';
|
|
import border from '@styled-system/border';
|
|
import background from '@styled-system/background';
|
|
import position from '@styled-system/position';
|
|
export { get, createParser, createStyleFunction, compose, system } from '@styled-system/core';
|
|
export { margin, padding, space } from '@styled-system/space';
|
|
export { color } from '@styled-system/color';
|
|
export { layout } from '@styled-system/layout';
|
|
export { typography } from '@styled-system/typography';
|
|
export { flexbox } from '@styled-system/flexbox';
|
|
export { border } from '@styled-system/border';
|
|
export { background } from '@styled-system/background';
|
|
export { position } from '@styled-system/position';
|
|
export { grid } from '@styled-system/grid';
|
|
export { shadow } from '@styled-system/shadow';
|
|
export { default as boxShadow, default as textShadow } from '@styled-system/shadow';
|
|
export { variant, buttonStyle, textStyle, colorStyle } from '@styled-system/variant';
|
|
var width = layout.width,
|
|
height = layout.height,
|
|
minWidth = layout.minWidth,
|
|
minHeight = layout.minHeight,
|
|
maxWidth = layout.maxWidth,
|
|
maxHeight = layout.maxHeight,
|
|
size = layout.size,
|
|
verticalAlign = layout.verticalAlign,
|
|
display = layout.display,
|
|
overflow = layout.overflow,
|
|
overflowX = layout.overflowX,
|
|
overflowY = layout.overflowY;
|
|
var opacity = color.opacity;
|
|
var fontSize = typography.fontSize,
|
|
fontFamily = typography.fontFamily,
|
|
fontWeight = typography.fontWeight,
|
|
lineHeight = typography.lineHeight,
|
|
textAlign = typography.textAlign,
|
|
fontStyle = typography.fontStyle,
|
|
letterSpacing = typography.letterSpacing;
|
|
var alignItems = flexbox.alignItems,
|
|
alignContent = flexbox.alignContent,
|
|
justifyItems = flexbox.justifyItems,
|
|
justifyContent = flexbox.justifyContent,
|
|
flexWrap = flexbox.flexWrap,
|
|
flexDirection = flexbox.flexDirection,
|
|
flex = flexbox.flex,
|
|
flexGrow = flexbox.flexGrow,
|
|
flexShrink = flexbox.flexShrink,
|
|
flexBasis = flexbox.flexBasis,
|
|
justifySelf = flexbox.justifySelf,
|
|
alignSelf = flexbox.alignSelf,
|
|
order = flexbox.order;
|
|
var gridGap = grid.gridGap,
|
|
gridColumnGap = grid.gridColumnGap,
|
|
gridRowGap = grid.gridRowGap,
|
|
gridColumn = grid.gridColumn,
|
|
gridRow = grid.gridRow,
|
|
gridAutoFlow = grid.gridAutoFlow,
|
|
gridAutoColumns = grid.gridAutoColumns,
|
|
gridAutoRows = grid.gridAutoRows,
|
|
gridTemplateColumns = grid.gridTemplateColumns,
|
|
gridTemplateRows = grid.gridTemplateRows,
|
|
gridTemplateAreas = grid.gridTemplateAreas,
|
|
gridArea = grid.gridArea;
|
|
var borderWidth = border.borderWidth,
|
|
borderStyle = border.borderStyle,
|
|
borderColor = border.borderColor,
|
|
borderTop = border.borderTop,
|
|
borderRight = border.borderRight,
|
|
borderBottom = border.borderBottom,
|
|
borderLeft = border.borderLeft,
|
|
borderRadius = border.borderRadius;
|
|
var backgroundImage = background.backgroundImage,
|
|
backgroundSize = background.backgroundSize,
|
|
backgroundPosition = background.backgroundPosition,
|
|
backgroundRepeat = background.backgroundRepeat;
|
|
var zIndex = position.zIndex,
|
|
top = position.top,
|
|
right = position.right,
|
|
bottom = position.bottom,
|
|
left = position.left;
|
|
export { default as borders } from '@styled-system/border';
|
|
export { width, height, minWidth, minHeight, maxWidth, maxHeight, size, verticalAlign, display, overflow, overflowX, overflowY // color
|
|
, opacity // typography
|
|
, fontSize, fontFamily, fontWeight, lineHeight, textAlign, fontStyle, letterSpacing // flexbox
|
|
, alignItems, alignContent, justifyItems, justifyContent, flexWrap, flexDirection, flex, flexGrow, flexShrink, flexBasis, justifySelf, alignSelf, order // grid
|
|
, gridGap, gridColumnGap, gridRowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea // border
|
|
, borderWidth, borderStyle, borderColor, borderTop, borderRight, borderBottom, borderLeft, borderRadius // background
|
|
, backgroundImage, backgroundSize, backgroundPosition, backgroundRepeat // position
|
|
, zIndex, top, right, bottom, left }; // v4 style API shim
|
|
|
|
export var style = function style(_ref) {
|
|
var prop = _ref.prop,
|
|
cssProperty = _ref.cssProperty,
|
|
alias = _ref.alias,
|
|
key = _ref.key,
|
|
transformValue = _ref.transformValue,
|
|
scale = _ref.scale,
|
|
properties = _ref.properties;
|
|
var config = {};
|
|
config[prop] = createStyleFunction({
|
|
properties: properties,
|
|
property: cssProperty || prop,
|
|
scale: key,
|
|
defaultScale: scale,
|
|
transform: transformValue
|
|
});
|
|
if (alias) config[alias] = config[prop];
|
|
var parse = createParser(config);
|
|
return parse;
|
|
};
|