system-props - npm Package Compare versions

Comparing version 0.8.0 to 0.9.0

dist/index.d.ts

 export { betterGet as get } from './core/get';
 export { createSystem } from './core/createSystem';
-export { ResponsiveProp } from '@/types';
 export * from './props';
@@ -8,1 +7,2 @@ export * from './pseudos';
 export * from './shouldForwardProp';
+export { SystemProp, Theme, ColorProps, SpaceProps, BorderProps, TypographyProps, LayoutProps, ShadowProps, PositionProps, GridProps, FlexboxProps, AllSystemProps, } from './types';

dist/props/background/index.d.ts

@@ -1,15 +0,3 @@
-import { PropConfigCollection, ResponsiveProp } from '@/types';
-import { Property } from 'csstype';
+import { PropConfigCollection } from '@/types';
 export declare const background: PropConfigCollection;
-export interface BackgroundProps {
-    background?: ResponsiveProp<Property.Background>;
-    backgroundImage?: ResponsiveProp<Property.BackgroundImage>;
-    bgImage?: ResponsiveProp<Property.BackgroundImage>;
-    backgroundSize?: ResponsiveProp<Property.BackgroundSize>;
-    bgSize?: ResponsiveProp<Property.BackgroundSize>;
-    backgroundPosition?: ResponsiveProp<Property.BackgroundPosition>;
-    bgPosition?: ResponsiveProp<Property.BackgroundPosition>;
-    backgroundRepeat?: ResponsiveProp<Property.BackgroundRepeat>;
-    bgRepeat?: ResponsiveProp<Property.BackgroundRepeat>;
-}
 export default background;

dist/props/border/index.d.ts

@@ -1,29 +0,3 @@
-import { PropConfigCollection, Transform, ResponsiveProp } from '@/types';
-import { Property } from 'csstype';
+import { PropConfigCollection, Transform } from '@/types';
 export declare const borderShorthandTransform: Transform;
 export declare const border: PropConfigCollection;
-export interface BorderProps {
-    border?: ResponsiveProp<Property.Border>;
-    borderX?: ResponsiveProp<Property.Border>;
-    borderY?: ResponsiveProp<Property.Border>;
-    borderRight?: ResponsiveProp<Property.BorderRight>;
-    borderLeft?: ResponsiveProp<Property.BorderLeft>;
-    borderTop?: ResponsiveProp<Property.BorderTop>;
-    borderColor?: ResponsiveProp<Property.BorderColor>;
-    borderRightColor?: ResponsiveProp<Property.BorderRightColor>;
-    borderLeftColor?: ResponsiveProp<Property.BorderLeftColor>;
-    borderTopColor?: ResponsiveProp<Property.BorderTopColor>;
-    borderStyle?: ResponsiveProp<Property.BorderColor>;
-    borderRightStyle?: ResponsiveProp<Property.BorderRightColor>;
-    borderLeftStyle?: ResponsiveProp<Property.BorderLeftColor>;
-    borderTopStyle?: ResponsiveProp<Property.BorderTopColor>;
-    borderWidth?: ResponsiveProp<Property.BorderWidth>;
-    borderRightWidth?: ResponsiveProp<Property.BorderRightWidth>;
-    borderLeftWidth?: ResponsiveProp<Property.BorderLeftWidth>;
-    borderTopWidth?: ResponsiveProp<Property.BorderTopWidth>;
-    borderRadius?: ResponsiveProp<Property.BorderRadius>;
-    borderTopLeftRadius?: ResponsiveProp<Property.BorderTopLeftRadius>;
-    borderTopRightRadius?: ResponsiveProp<Property.BorderTopRightRadius>;
-    borderBottomLeftRadius?: ResponsiveProp<Property.BorderBottomLeftRadius>;
-    borderBottomRightRadius?: ResponsiveProp<Property.BorderBottomRightRadius>;
-}

dist/props/color/index.d.ts

@@ -1,11 +0,2 @@
-import { PropConfigCollection, ResponsiveProp } from '@/types';
-import * as CSS from 'csstype';
-export interface ColorProps {
-    color?: ResponsiveProp<CSS.Property.Color>;
-    backgroundColor?: ResponsiveProp<CSS.Property.Color>;
-    bg?: ResponsiveProp<CSS.Property.Color>;
-    fill?: ResponsiveProp<CSS.Property.Color>;
-    stroke?: ResponsiveProp<CSS.Property.Color>;
-    opacity?: ResponsiveProp<CSS.Property.Opacity>;
-}
+import { PropConfigCollection } from '@/types';
 export declare const color: PropConfigCollection;

dist/props/flexbox/index.d.ts

@@ -1,19 +0,3 @@
-import { PropConfigCollection, ResponsiveProp } from '@/types';
-import { Property } from 'csstype';
+import { PropConfigCollection } from '@/types';
 export declare const flexbox: PropConfigCollection;
-export interface FlexboxProps {
-    alignItems?: ResponsiveProp<Property.AlignItems>;
-    alignContent?: ResponsiveProp<Property.AlignContent>;
-    justifyItems?: ResponsiveProp<Property.JustifyItems>;
-    justifyContent?: ResponsiveProp<Property.JustifyContent>;
-    flexWrap?: ResponsiveProp<Property.FlexWrap>;
-    flexDirection?: ResponsiveProp<Property.FlexDirection>;
-    flex?: ResponsiveProp<Property.Flex>;
-    flexGrow?: ResponsiveProp<Property.FlexGrow>;
-    flexShrink?: ResponsiveProp<Property.FlexShrink>;
-    flexBasis?: ResponsiveProp<Property.FlexBasis>;
-    justifySelf?: ResponsiveProp<Property.JustifySelf>;
-    alignSelf?: ResponsiveProp<Property.AlignSelf>;
-    order?: ResponsiveProp<Property.Order>;
-}
 export default flexbox;

dist/props/grid/index.d.ts

@@ -1,19 +0,3 @@
-import { PropConfigCollection, ResponsiveProp } from '@/types';
-import { Property } from 'csstype';
+import { PropConfigCollection } from '@/types';
 export declare const grid: PropConfigCollection;
-export interface GridProps {
-    gap?: ResponsiveProp<Property.Gap>;
-    gridGap?: ResponsiveProp<Property.GridGap>;
-    gridColumnGap?: ResponsiveProp<Property.GridColumnGap>;
-    gridRowGap?: ResponsiveProp<Property.GridRowGap>;
-    gridRow?: ResponsiveProp<Property.GridRow>;
-    gridColumn?: ResponsiveProp<Property.GridColumn>;
-    gridAutoFlow?: ResponsiveProp<Property.GridAutoFlow>;
-    gridAutoColumns?: ResponsiveProp<Property.GridAutoColumns>;
-    gridAutoRows?: ResponsiveProp<Property.GridAutoRows>;
-    gridTemplateColumns?: ResponsiveProp<Property.GridTemplateColumns>;
-    gridTemplateRows?: ResponsiveProp<Property.GridTemplateRows>;
-    gridTemplateAreas?: ResponsiveProp<Property.GridTemplateAreas>;
-    gridArea?: ResponsiveProp<Property.GridArea>;
-}
 export default grid;

dist/props/index.d.ts

@@ -1,11 +0,1 @@
-import { BackgroundProps } from './background';
-import { BorderProps } from './border';
-import { ColorProps } from './color';
-import { FlexboxProps } from './flexbox';
-import { GridProps } from './grid';
-import { LayoutProps } from './layout';
-import { PositionProps } from './position';
-import { ShadowProps } from './shadow';
-import { SpaceProps } from './space';
-import { TypographyProps } from './typography';
 export * from './background';
@@ -22,3 +12,1 @@ export * from './border';
 export { layout as styledSystemLayout } from './styled-system-layout';
-export interface SystemProps extends BackgroundProps, BorderProps, ColorProps, FlexboxProps, GridProps, LayoutProps, PositionProps, ShadowProps, SpaceProps, TypographyProps {
-}

dist/props/layout/index.d.ts

@@ -1,17 +0,2 @@
-import { PropConfigCollection, ResponsiveProp } from '@/types';
-import { Property } from 'csstype';
+import { PropConfigCollection } from '@/types';
 export declare const layout: PropConfigCollection;
-export interface LayoutProps {
-    height?: ResponsiveProp<Property.Height>;
-    width?: ResponsiveProp<Property.Width>;
-    minWidth?: ResponsiveProp<Property.MinWidth>;
-    minHeight?: ResponsiveProp<Property.MinHeight>;
-    maxWidth?: ResponsiveProp<Property.MaxWidth>;
-    maxHeight?: ResponsiveProp<Property.MaxHeight>;
-    size?: ResponsiveProp<Property.Width>;
-    overflow?: ResponsiveProp<Property.Overflow>;
-    overflowX?: ResponsiveProp<Property.OverflowX>;
-    overflowY?: ResponsiveProp<Property.OverflowY>;
-    display?: ResponsiveProp<Property.Display>;
-    verticalAlign?: ResponsiveProp<Property.VerticalAlign>;
-}

dist/props/position/index.d.ts

@@ -1,11 +0,2 @@
-import { PropConfigCollection, ResponsiveProp } from '@/types';
-import { Property } from 'csstype';
+import { PropConfigCollection } from '@/types';
 export declare const position: PropConfigCollection;
-export interface PositionProps {
-    position?: ResponsiveProp<Property.Position>;
-    top?: ResponsiveProp<Property.Top>;
-    left?: ResponsiveProp<Property.Left>;
-    right?: ResponsiveProp<Property.Right>;
-    bottom?: ResponsiveProp<Property.Bottom>;
-    zIndex?: ResponsiveProp<Property.ZIndex>;
-}

dist/props/shadow/index.d.ts

@@ -1,8 +0,3 @@
-import { Transform, PropConfigCollection, ResponsiveProp } from '@/types';
-import { Property } from 'csstype';
+import { Transform, PropConfigCollection } from '@/types';
 export declare const getShadow: Transform;
 export declare const shadow: PropConfigCollection;
-export interface ShadowProps {
-    boxShadow?: ResponsiveProp<Property.BoxShadow>;
-    textShadow?: ResponsiveProp<Property.TextShadow>;
-}

dist/props/space/index.d.ts

@@ -1,3 +0,2 @@
-import { PropConfigCollection, ResponsiveProp } from '@/types';
-import { Property } from 'csstype';
+import { PropConfigCollection } from '@/types';
 export declare const margin: PropConfigCollection;
@@ -8,35 +7,1 @@ export declare const padding: PropConfigCollection;
 };
-export interface PaddingProps {
-    padding?: ResponsiveProp<Property.Padding>;
-    paddingTop?: ResponsiveProp<Property.PaddingTop>;
-    paddingRight?: ResponsiveProp<Property.PaddingRight>;
-    paddingLeft?: ResponsiveProp<Property.PaddingLeft>;
-    paddingBottom?: ResponsiveProp<Property.PaddingBottom>;
-    paddingX?: ResponsiveProp<Property.PaddingLeft>;
-    paddingY?: ResponsiveProp<Property.PaddingTop>;
-    p?: ResponsiveProp<Property.Padding>;
-    pt?: ResponsiveProp<Property.PaddingTop>;
-    pr?: ResponsiveProp<Property.PaddingRight>;
-    pl?: ResponsiveProp<Property.PaddingLeft>;
-    pb?: ResponsiveProp<Property.PaddingBottom>;
-    px?: ResponsiveProp<Property.PaddingLeft>;
-    py?: ResponsiveProp<Property.PaddingTop>;
-}
-export interface MarginProps {
-    margin?: ResponsiveProp<Property.Margin>;
-    marginTop?: ResponsiveProp<Property.MarginTop>;
-    marginRight?: ResponsiveProp<Property.MarginRight>;
-    marginLeft?: ResponsiveProp<Property.MarginLeft>;
-    marginBottom?: ResponsiveProp<Property.MarginBottom>;
-    marginX?: ResponsiveProp<Property.MarginLeft>;
-    marginY?: ResponsiveProp<Property.MarginTop>;
-    m?: ResponsiveProp<Property.Margin>;
-    mt?: ResponsiveProp<Property.MarginTop>;
-    mr?: ResponsiveProp<Property.MarginRight>;
-    ml?: ResponsiveProp<Property.MarginLeft>;
-    mb?: ResponsiveProp<Property.MarginBottom>;
-    mx?: ResponsiveProp<Property.MarginLeft>;
-    my?: ResponsiveProp<Property.MarginTop>;
-}
-export interface SpaceProps extends MarginProps, PaddingProps {
-}

dist/props/styled-system-layout/index.d.ts

@@ -1,17 +0,17 @@
-import { PropConfigCollection, ResponsiveProp } from '@/types';
+import { PropConfigCollection } from '@/types';
 import { Property } from 'csstype';
 export declare const layout: PropConfigCollection;
 export interface LayoutProps {
-    height?: ResponsiveProp<Property.Height>;
-    width?: ResponsiveProp<Property.Width>;
-    minWidth?: ResponsiveProp<Property.MinWidth>;
-    minHeight?: ResponsiveProp<Property.MinHeight>;
-    maxWidth?: ResponsiveProp<Property.MaxWidth>;
-    maxHeight?: ResponsiveProp<Property.MaxHeight>;
-    size?: ResponsiveProp<Property.Width>;
-    overflow?: ResponsiveProp<Property.Overflow>;
-    overflowX?: ResponsiveProp<Property.OverflowX>;
-    overflowY?: ResponsiveProp<Property.OverflowY>;
-    display?: ResponsiveProp<Property.Display>;
-    verticalAlign?: ResponsiveProp<Property.VerticalAlign>;
+    height?: Property.Height;
+    width?: Property.Width;
+    minWidth?: Property.MinWidth;
+    minHeight?: Property.MinHeight;
+    maxWidth?: Property.MaxWidth;
+    maxHeight?: Property.MaxHeight;
+    size?: Property.Width;
+    overflow?: Property.Overflow;
+    overflowX?: Property.OverflowX;
+    overflowY?: Property.OverflowY;
+    display?: Property.Display;
+    verticalAlign?: Property.VerticalAlign;
 }

dist/props/typography/index.d.ts

@@ -1,12 +0,2 @@
-import { PropConfigCollection, ResponsiveProp } from '@/types';
-import { Property } from 'csstype';
+import { PropConfigCollection } from '@/types';
 export declare const typography: PropConfigCollection;
-export interface TypographyProps {
-    fontFamily?: ResponsiveProp<Property.FontFamily>;
-    fontSize?: ResponsiveProp<Property.FontSize>;
-    fontWeight?: ResponsiveProp<Property.FontWeight>;
-    fontStyle?: ResponsiveProp<Property.FontStyle>;
-    lineHeight?: ResponsiveProp<Property.LineHeight>;
-    letterSpacing?: ResponsiveProp<Property.LetterSpacing>;
-    textAlign?: ResponsiveProp<Property.TextAlign>;
-}

dist/system-props.cjs.development.js

@@ -97,2 +97,3 @@ 'use strict';
   for (var key in propValue) {
+    // @ts-ignore
     var breakpoint = breakpoints[key];
@@ -253,3 +254,4 @@ var valueAtQuery = propValue[key]; // e.g.
     var styles = {};
-    var shouldSort = false;
+    var shouldSort = false; // @ts-ignore
+
     var isCacheDisabled = Boolean((_props$theme = props.theme) == null ? void 0 : _props$theme.disableSystemPropsCache);
@@ -689,3 +691,3 @@
 
-var config$1 = {
+var color = {
   color: {
@@ -709,4 +711,4 @@ property: 'color',
 };
-config$1.bg = config$1.backgroundColor;
-var color = config$1;
+color.bg = color.backgroundColor;
+color.textColor = color.color;
 
@@ -713,0 +715,0 @@ var flexbox = {

dist/system-props.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=function(r,e,o,t){if(!r)return o;for(var a="string"==typeof e?e.split("."):[e],i=r,s=0;s<a.length;s++){var n=a[s];i=!i||"number"!=typeof n&&"string"!=typeof n?t:i[n]}return i===t?o:i},e=function(e,o,t,a){var i=r(e,o);return!i&&"string"==typeof o&&o.startsWith("$")&&(i=r(e,o.slice(1))),i===a?t:i};function o(){return(o=Object.assign||function(r){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var t in o)Object.prototype.hasOwnProperty.call(o,t)&&(r[t]=o[t])}return r}).apply(this,arguments)}var t=function(r,o,t,a,i){return e(o,r,!0===a?i:r)},a=function(r){var e=r.transform,o=void 0===e?t:e,a=r.properties||[r.property],i=function(r,e,t,i){var s={},n=o(r,e,t,i.strict);return null===n||a.forEach((function(r){r&&(s[r]=n)})),s};return Object.assign(i,{scale:r.scale,defaultScale:r.defaultScale}),i},i=new Intl.Collator(void 0,{numeric:!0,sensitivity:"base"}),s=function(r){var e={};return Object.keys(r).sort((function(r,e){return i.compare(r,e)})).forEach((function(o){e[o]=r[o]})),e};function n(r,e){return o({},r,e)}var p=function(r,e){var o=n(r,e);for(var t in r){var a;r[t]&&"object"==typeof e[t]&&(o=n(o,((a={})[t]=n(r[t],e[t]),a)))}return o},d={_hover:"&:hover",_focus:"&:focus",_focusWithin:"&:focus-within",_focusVisible:"&:focus-visible",_active:"&:active",_visited:"&:visited",_selection:"&::selection",_before:"&::before",_after:"&::after",_placeholder:"&::placeholder",_hoverAndFocus:"&:hover, &:focus",_disabled:"[disabled], [disabled]:hover, [disabled]:focus, [aria-disabled], [aria-disabled]:hover, [aria-disabled]:focus",_readOnly:"[readOnly]",_first:"&:first-child",_last:"&:last-child",_notFirst:"&:not(:first-of-type)",_notLast:"&:not(:last-of-type)",_checked:"&[aria-checked=true], &[checked]",_odd:"&:nth-of-type(odd)",_even:"&:nth-of-type(even)"},l=function(r){return"@media screen and (min-width: "+r+")"},c={background:!0,backgroundImage:!0,backgroundSize:!0,backgroundPosition:!0,backgroundRepeat:!0};c.bgImage=c.backgroundImage,c.bgSize=c.backgroundSize,c.bgPosition=c.backgroundPosition,c.bgRepeat=c.backgroundRepeat;var f,u="",g=0,h=[[]],m=function(r){if(b(),h=[[]],!r)return h;for(var e=r.length,o=0;o<e;o++){var t=r[o];switch(t){case" ":1===f?y():f&&(u+=t);break;case",":g?u+=t:(y(),h[h.length]=[],b());break;case'"':u+=t,g||f?1===g&&2===f&&(g=0,y()):(f=2,g=1);break;case"(":g||(f=3),g++,u+=t;break;case")":u+=t,g--,3!==f||g||y();break;case"[":g||(f=4),u+=t,g++;break;case"]":u+=t,--g||y();break;default:f||(f=1),u+=t}}return u&&y(),h};function b(){g=f=0,u=""}function y(){f&&h[h.length-1].push(u),b()}var v=function(r,o,t,a){var i,s,n,p;if("string"!=typeof r)return r;var d=e((null==t||null==(i=t.theme)?void 0:i.borders)||o,r);if(d)return d;var l=m(r)[0],c=l[0],f=l[1],u=l[2];return[e(null==t||null==(s=t.theme)?void 0:s.borderWidths,c,a?void 0:c),e(null==t||null==(n=t.theme)?void 0:n.borderStyles,f,a?void 0:f),e(null==t||null==(p=t.theme)?void 0:p.colors,u,a?void 0:u)].filter(Boolean).join(" ")},R={border:{property:"border",scale:"borders",transform:v},borderWidth:{property:"borderWidth",scale:"borderWidths"},borderStyle:{property:"borderStyle",scale:"borderStyles"},borderColor:{property:"borderColor",scale:"colors"},borderRadius:{property:"borderRadius",scale:"radii"},borderTop:{property:"borderTop",scale:"borders",transform:v},borderTopLeftRadius:{property:"borderTopLeftRadius",scale:"radii"},borderTopRightRadius:{property:"borderTopRightRadius",scale:"radii"},borderRight:{property:"borderRight",scale:"borders",transform:v},borderBottom:{property:"borderBottom",scale:"borders",transform:v},borderBottomLeftRadius:{property:"borderBottomLeftRadius",scale:"radii"},borderBottomRightRadius:{property:"borderBottomRightRadius",scale:"radii"},borderLeft:{property:"borderLeft",scale:"borders",transform:v},borderX:{properties:["borderLeft","borderRight"],scale:"borders",transform:v},borderY:{properties:["borderTop","borderBottom"],scale:"borders",transform:v},borderTopWidth:{property:"borderTopWidth",scale:"borderWidths"},borderTopColor:{property:"borderTopColor",scale:"colors"},borderTopStyle:{property:"borderTopStyle",scale:"borderStyles"}};R.borderTopLeftRadius={property:"borderTopLeftRadius",scale:"radii"},R.borderTopRightRadius={property:"borderTopRightRadius",scale:"radii"},R.borderBottomWidth={property:"borderBottomWidth",scale:"borderWidths"},R.borderBottomColor={property:"borderBottomColor",scale:"colors"},R.borderBottomStyle={property:"borderBottomStyle",scale:"borderStyles"},R.borderBottomLeftRadius={property:"borderBottomLeftRadius",scale:"radii"},R.borderBottomRightRadius={property:"borderBottomRightRadius",scale:"radii"},R.borderLeftWidth={property:"borderLeftWidth",scale:"borderWidths"},R.borderLeftColor={property:"borderLeftColor",scale:"colors"},R.borderLeftStyle={property:"borderLeftStyle",scale:"borderStyles"},R.borderRightWidth={property:"borderRightWidth",scale:"borderWidths"},R.borderRightColor={property:"borderRightColor",scale:"colors"},R.borderRightStyle={property:"borderRightStyle",scale:"borderStyles"};var x=R,S={color:{property:"color",scale:"colors"},backgroundColor:{property:"backgroundColor",scale:"colors"},fill:{property:"fill",scale:"colors"},stroke:{property:"stroke",scale:"colors"},opacity:!0};S.bg=S.backgroundColor;var k=S,w={alignItems:!0,alignContent:!0,justifyItems:!0,justifyContent:!0,flexWrap:!0,flexDirection:!0,flex:!0,flexGrow:!0,flexShrink:!0,flexBasis:!0,justifySelf:!0,alignSelf:!0,order:!0},W={gap:{property:"gap",scale:"space"},gridGap:{property:"gridGap",scale:"space"},gridColumnGap:{property:"gridColumnGap",scale:"space"},gridRowGap:{property:"gridRowGap",scale:"space"},gridColumn:!0,gridRow:!0,gridAutoFlow:!0,gridAutoColumns:!0,gridAutoRows:!0,gridTemplateColumns:!0,gridTemplateRows:!0,gridTemplateAreas:!0,gridArea:!0},B={width:{property:"width",scale:"sizes"},height:{property:"height",scale:"sizes"},minWidth:{property:"minWidth",scale:"sizes"},minHeight:{property:"minHeight",scale:"sizes"},maxWidth:{property:"maxWidth",scale:"sizes"},maxHeight:{property:"maxHeight",scale:"sizes"},size:{properties:["width","height"],scale:"sizes"},overflow:!0,overflowX:!0,overflowY:!0,display:!0,verticalAlign:!0},T=function(r){return"number"==typeof r&&!isNaN(r)},L=function(r,o,t,a){if(!T(r)){if("string"==typeof r&&r.startsWith("-")){var i=r.slice(1),s=e(o,i,i);return T(s)?-1*s:"-"+s}return e(o,r,a?void 0:r)}var n=r<0,p=Math.abs(r),d=e(o,p,a?void 0:p);return T(d)?d*(n?-1:1):null!=d?n?"-"+d:d:void 0},C={position:!0,zIndex:{property:"zIndex",scale:"zIndices"},top:{property:"top",scale:"space",transform:L},right:{property:"right",scale:"space",transform:L},bottom:{property:"bottom",scale:"space",transform:L},left:{property:"left",scale:"space",transform:L}},z=function(r,o,t){var a;return e(null==t||null==(a=t.theme)?void 0:a.shadows,r)||("string"==typeof r?m(r).map((function(r){return r.map((function(r){var o;return e(null==t||null==(o=t.theme)?void 0:o.colors,r,r)})).join(" ")})).join(", "):r)},j={boxShadow:{property:"boxShadow",scale:"shadows",transform:z},textShadow:{property:"textShadow",scale:"shadows",transform:z}},_=function(r,e,o,t){if("number"==typeof r){var a,i=L(r,null==o||null==(a=o.theme)?void 0:a.space,0,t);if(i)return i}if("string"==typeof r){var s,n=r.split(" ");return 1===n.length?L(r,null==o||null==(s=o.theme)?void 0:s.space,0,t):n.reduce((function(r,e){var a,i=L(e,null==o||null==(a=o.theme)?void 0:a.space,0,t);return"number"==typeof i&&(i+="px"),[].concat(r,[i])}),[]).filter(Boolean).join(" ")}return r},O=function(r,o,t,a){if("number"==typeof r){var i,s=e(null==t||null==(i=t.theme)?void 0:i.space,r);if(s)return s}var n;return"string"==typeof r?1===r.split(" ").length?e(null==t||null==(n=t.theme)?void 0:n.space,r,a?void 0:r):r.split(" ").reduce((function(r,o){var i,s=e(null==t||null==(i=t.theme)?void 0:i.space,o,a?void 0:o);return"number"==typeof s&&(s+="px"),[].concat(r,[s])}),[]).filter(Boolean).join(" "):r},A={margin:{property:"margin",scale:"space",transform:_},marginTop:{property:"marginTop",scale:"space",transform:_},marginRight:{property:"marginRight",scale:"space",transform:_},marginBottom:{property:"marginBottom",scale:"space",transform:_},marginLeft:{property:"marginLeft",scale:"space",transform:_},marginX:{properties:["marginLeft","marginRight"],scale:"space",transform:_},marginY:{properties:["marginTop","marginBottom"],scale:"space",transform:_}};A.m=A.margin,A.mt=A.marginTop,A.mr=A.marginRight,A.mb=A.marginBottom,A.ml=A.marginLeft,A.mx=A.marginX,A.my=A.marginY;var H={padding:{property:"padding",scale:"space",transform:O},paddingTop:{property:"paddingTop",scale:"space",transform:O},paddingRight:{property:"paddingRight",scale:"space",transform:O},paddingBottom:{property:"paddingBottom",scale:"space",transform:O},paddingLeft:{property:"paddingLeft",scale:"space",transform:O},paddingX:{properties:["paddingLeft","paddingRight"],scale:"space",transform:O},paddingY:{properties:["paddingTop","paddingBottom"],scale:"space",transform:O}};H.p=H.padding,H.pt=H.paddingTop,H.pr=H.paddingRight,H.pb=H.paddingBottom,H.pl=H.paddingLeft,H.px=H.paddingX,H.py=H.paddingY;var I=o({},H,A),G={width:{property:"width",scale:"sizes",transform:function(r,o){var t,a=r;return"number"!=typeof(t=r)||isNaN(t)||(a=r>1?r:100*r+"%"),e(o,r,a)}},height:{property:"height",scale:"sizes"},minWidth:{property:"minWidth",scale:"sizes"},minHeight:{property:"minHeight",scale:"sizes"},maxWidth:{property:"maxWidth",scale:"sizes"},maxHeight:{property:"maxHeight",scale:"sizes"},size:{properties:["width","height"],scale:"sizes"},overflow:!0,overflowX:!0,overflowY:!0,display:!0,verticalAlign:!0},P=Object.keys(o({},d,c,x,k,W,w,B,C,j,I)),X=new Set(P);exports.background=c,exports.border=x,exports.borderShorthandTransform=v,exports.color=k,exports.createSystem=function(e){var t=void 0===e?{}:e,i=t.strict,n=void 0!==i&&i,c=t.pseudoSelectors,f=void 0===c?d:c;return function(e){var t={};return Object.keys(e).forEach((function(r){var o=e[r];!0!==o?"function"!=typeof o&&(t[r]=a(o)):t[r]=a({property:r,scale:r})})),function e(t,a,i){void 0===a&&(a={}),void 0===i&&(i=!1);var n={strict:i},d=function(e){var i,d={},c=!1,f=Boolean(null==(i=e.theme)?void 0:i.disableSystemPropsCache),u=function(a,i){var s,p,d=t[i],u=a[i],g=r(e.theme,d.scale);if("function"==typeof u&&(u=u(e.theme)),"object"==typeof u){var h;if(n.breakpoints=!f&&n.breakpoints||(null==e||null==(h=e.theme)?void 0:h.breakpoints),Array.isArray(u)){if(void 0===n.breakpoints)throw new Error("The system props parser could not find a `breakpoints` property in the theme object, which is required for responsive styles to work. Make sure that the theme object has a breakpoints property.");return n.media=!f&&n.media||[null].concat((p=s=n.breakpoints,Array.isArray(s)||(p=Object.values(s)),p.map(l))),function(r){var e=r.cache,t=r.systemConfig,a=r.scale,i=r.props,s={},n=e.media;return r.propValue.slice(0,n.length).forEach((function(r,p){var d,l="function"==typeof r?r(i.theme):r,c=n[p],f=t(l,a,i,e);s=o({},s,c?((d={})[c]=o({},s[c],f),d):f)})),s}({cache:n,systemConfig:d,scale:g,propValue:u,props:a})}if(null!==u)return c=!0,function(r){var e=r.cache,t=r.systemConfig,a=r.scale,i=r.propValue,s=r.props,n=e.breakpoints,p={};for(var d in i){var l=n[d],c=i[d],f=t("function"==typeof c?c(s.theme):c,a,s,e);if(l){var u,g="@media screen and (min-width: "+l+")";p=o({},p,((u={})[g]=o({},p[g],f),u))}else p=o({},p,f)}return p}({cache:n,systemConfig:d,scale:g,propValue:u,props:a})}return d(u,g,e,n)};for(var g in e)if(a[g]){var h=a[g],m=e[g];for(var b in m)d[h]=o({},d[h],u(m,b)),c&&(d[a[g]]=s(d[a[g]]),c=!1)}else t[g]&&(d=p(d,u(e,g)));return c&&(d=s(d)),d};d.config=t,d.propNames=Object.keys(t),d.cache=n;var c=Object.keys(t).filter((function(r){return"config"!==r}));return c.length>1&&c.forEach((function(r){var o,a;Object.assign(d,((a={})[r]=e(((o={})[r]=t[r],o)),a))})),d}(t,f,n)}},exports.flexbox=w,exports.get=e,exports.getShadow=z,exports.grid=W,exports.layout=B,exports.margin=A,exports.padding=H,exports.position=C,exports.propNames=P,exports.pseudoSelectors=d,exports.shadow=j,exports.shouldForwardProp=function(r){return!X.has(r)},exports.space=I,exports.styledSystemLayout=G,exports.typography={fontFamily:{property:"fontFamily",scale:"fonts"},fontSize:{property:"fontSize",scale:"fontSizes"},fontWeight:{property:"fontWeight",scale:"fontWeights"},lineHeight:{property:"lineHeight",scale:"lineHeights"},letterSpacing:{property:"letterSpacing",scale:"letterSpacings"},textAlign:!0,fontStyle:!0};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=function(r,e,o,t){if(!r)return o;for(var a="string"==typeof e?e.split("."):[e],i=r,s=0;s<a.length;s++){var n=a[s];i=!i||"number"!=typeof n&&"string"!=typeof n?t:i[n]}return i===t?o:i},e=function(e,o,t,a){var i=r(e,o);return!i&&"string"==typeof o&&o.startsWith("$")&&(i=r(e,o.slice(1))),i===a?t:i};function o(){return(o=Object.assign||function(r){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var t in o)Object.prototype.hasOwnProperty.call(o,t)&&(r[t]=o[t])}return r}).apply(this,arguments)}var t=function(r,o,t,a,i){return e(o,r,!0===a?i:r)},a=function(r){var e=r.transform,o=void 0===e?t:e,a=r.properties||[r.property],i=function(r,e,t,i){var s={},n=o(r,e,t,i.strict);return null===n||a.forEach((function(r){r&&(s[r]=n)})),s};return Object.assign(i,{scale:r.scale,defaultScale:r.defaultScale}),i},i=new Intl.Collator(void 0,{numeric:!0,sensitivity:"base"}),s=function(r){var e={};return Object.keys(r).sort((function(r,e){return i.compare(r,e)})).forEach((function(o){e[o]=r[o]})),e};function n(r,e){return o({},r,e)}var p=function(r,e){var o=n(r,e);for(var t in r){var a;r[t]&&"object"==typeof e[t]&&(o=n(o,((a={})[t]=n(r[t],e[t]),a)))}return o},d={_hover:"&:hover",_focus:"&:focus",_focusWithin:"&:focus-within",_focusVisible:"&:focus-visible",_active:"&:active",_visited:"&:visited",_selection:"&::selection",_before:"&::before",_after:"&::after",_placeholder:"&::placeholder",_hoverAndFocus:"&:hover, &:focus",_disabled:"[disabled], [disabled]:hover, [disabled]:focus, [aria-disabled], [aria-disabled]:hover, [aria-disabled]:focus",_readOnly:"[readOnly]",_first:"&:first-child",_last:"&:last-child",_notFirst:"&:not(:first-of-type)",_notLast:"&:not(:last-of-type)",_checked:"&[aria-checked=true], &[checked]",_odd:"&:nth-of-type(odd)",_even:"&:nth-of-type(even)"},l=function(r){return"@media screen and (min-width: "+r+")"},c={background:!0,backgroundImage:!0,backgroundSize:!0,backgroundPosition:!0,backgroundRepeat:!0};c.bgImage=c.backgroundImage,c.bgSize=c.backgroundSize,c.bgPosition=c.backgroundPosition,c.bgRepeat=c.backgroundRepeat;var f,u="",g=0,h=[[]],m=function(r){if(b(),h=[[]],!r)return h;for(var e=r.length,o=0;o<e;o++){var t=r[o];switch(t){case" ":1===f?y():f&&(u+=t);break;case",":g?u+=t:(y(),h[h.length]=[],b());break;case'"':u+=t,g||f?1===g&&2===f&&(g=0,y()):(f=2,g=1);break;case"(":g||(f=3),g++,u+=t;break;case")":u+=t,g--,3!==f||g||y();break;case"[":g||(f=4),u+=t,g++;break;case"]":u+=t,--g||y();break;default:f||(f=1),u+=t}}return u&&y(),h};function b(){g=f=0,u=""}function y(){f&&h[h.length-1].push(u),b()}var v=function(r,o,t,a){var i,s,n,p;if("string"!=typeof r)return r;var d=e((null==t||null==(i=t.theme)?void 0:i.borders)||o,r);if(d)return d;var l=m(r)[0],c=l[0],f=l[1],u=l[2];return[e(null==t||null==(s=t.theme)?void 0:s.borderWidths,c,a?void 0:c),e(null==t||null==(n=t.theme)?void 0:n.borderStyles,f,a?void 0:f),e(null==t||null==(p=t.theme)?void 0:p.colors,u,a?void 0:u)].filter(Boolean).join(" ")},R={border:{property:"border",scale:"borders",transform:v},borderWidth:{property:"borderWidth",scale:"borderWidths"},borderStyle:{property:"borderStyle",scale:"borderStyles"},borderColor:{property:"borderColor",scale:"colors"},borderRadius:{property:"borderRadius",scale:"radii"},borderTop:{property:"borderTop",scale:"borders",transform:v},borderTopLeftRadius:{property:"borderTopLeftRadius",scale:"radii"},borderTopRightRadius:{property:"borderTopRightRadius",scale:"radii"},borderRight:{property:"borderRight",scale:"borders",transform:v},borderBottom:{property:"borderBottom",scale:"borders",transform:v},borderBottomLeftRadius:{property:"borderBottomLeftRadius",scale:"radii"},borderBottomRightRadius:{property:"borderBottomRightRadius",scale:"radii"},borderLeft:{property:"borderLeft",scale:"borders",transform:v},borderX:{properties:["borderLeft","borderRight"],scale:"borders",transform:v},borderY:{properties:["borderTop","borderBottom"],scale:"borders",transform:v},borderTopWidth:{property:"borderTopWidth",scale:"borderWidths"},borderTopColor:{property:"borderTopColor",scale:"colors"},borderTopStyle:{property:"borderTopStyle",scale:"borderStyles"}};R.borderTopLeftRadius={property:"borderTopLeftRadius",scale:"radii"},R.borderTopRightRadius={property:"borderTopRightRadius",scale:"radii"},R.borderBottomWidth={property:"borderBottomWidth",scale:"borderWidths"},R.borderBottomColor={property:"borderBottomColor",scale:"colors"},R.borderBottomStyle={property:"borderBottomStyle",scale:"borderStyles"},R.borderBottomLeftRadius={property:"borderBottomLeftRadius",scale:"radii"},R.borderBottomRightRadius={property:"borderBottomRightRadius",scale:"radii"},R.borderLeftWidth={property:"borderLeftWidth",scale:"borderWidths"},R.borderLeftColor={property:"borderLeftColor",scale:"colors"},R.borderLeftStyle={property:"borderLeftStyle",scale:"borderStyles"},R.borderRightWidth={property:"borderRightWidth",scale:"borderWidths"},R.borderRightColor={property:"borderRightColor",scale:"colors"},R.borderRightStyle={property:"borderRightStyle",scale:"borderStyles"};var x=R,S={color:{property:"color",scale:"colors"},backgroundColor:{property:"backgroundColor",scale:"colors"},fill:{property:"fill",scale:"colors"},stroke:{property:"stroke",scale:"colors"},opacity:!0};S.bg=S.backgroundColor,S.textColor=S.color;var k={alignItems:!0,alignContent:!0,justifyItems:!0,justifyContent:!0,flexWrap:!0,flexDirection:!0,flex:!0,flexGrow:!0,flexShrink:!0,flexBasis:!0,justifySelf:!0,alignSelf:!0,order:!0},w={gap:{property:"gap",scale:"space"},gridGap:{property:"gridGap",scale:"space"},gridColumnGap:{property:"gridColumnGap",scale:"space"},gridRowGap:{property:"gridRowGap",scale:"space"},gridColumn:!0,gridRow:!0,gridAutoFlow:!0,gridAutoColumns:!0,gridAutoRows:!0,gridTemplateColumns:!0,gridTemplateRows:!0,gridTemplateAreas:!0,gridArea:!0},W={width:{property:"width",scale:"sizes"},height:{property:"height",scale:"sizes"},minWidth:{property:"minWidth",scale:"sizes"},minHeight:{property:"minHeight",scale:"sizes"},maxWidth:{property:"maxWidth",scale:"sizes"},maxHeight:{property:"maxHeight",scale:"sizes"},size:{properties:["width","height"],scale:"sizes"},overflow:!0,overflowX:!0,overflowY:!0,display:!0,verticalAlign:!0},B=function(r){return"number"==typeof r&&!isNaN(r)},T=function(r,o,t,a){if(!B(r)){if("string"==typeof r&&r.startsWith("-")){var i=r.slice(1),s=e(o,i,i);return B(s)?-1*s:"-"+s}return e(o,r,a?void 0:r)}var n=r<0,p=Math.abs(r),d=e(o,p,a?void 0:p);return B(d)?d*(n?-1:1):null!=d?n?"-"+d:d:void 0},C={position:!0,zIndex:{property:"zIndex",scale:"zIndices"},top:{property:"top",scale:"space",transform:T},right:{property:"right",scale:"space",transform:T},bottom:{property:"bottom",scale:"space",transform:T},left:{property:"left",scale:"space",transform:T}},L=function(r,o,t){var a;return e(null==t||null==(a=t.theme)?void 0:a.shadows,r)||("string"==typeof r?m(r).map((function(r){return r.map((function(r){var o;return e(null==t||null==(o=t.theme)?void 0:o.colors,r,r)})).join(" ")})).join(", "):r)},z={boxShadow:{property:"boxShadow",scale:"shadows",transform:L},textShadow:{property:"textShadow",scale:"shadows",transform:L}},j=function(r,e,o,t){if("number"==typeof r){var a,i=T(r,null==o||null==(a=o.theme)?void 0:a.space,0,t);if(i)return i}if("string"==typeof r){var s,n=r.split(" ");return 1===n.length?T(r,null==o||null==(s=o.theme)?void 0:s.space,0,t):n.reduce((function(r,e){var a,i=T(e,null==o||null==(a=o.theme)?void 0:a.space,0,t);return"number"==typeof i&&(i+="px"),[].concat(r,[i])}),[]).filter(Boolean).join(" ")}return r},_=function(r,o,t,a){if("number"==typeof r){var i,s=e(null==t||null==(i=t.theme)?void 0:i.space,r);if(s)return s}var n;return"string"==typeof r?1===r.split(" ").length?e(null==t||null==(n=t.theme)?void 0:n.space,r,a?void 0:r):r.split(" ").reduce((function(r,o){var i,s=e(null==t||null==(i=t.theme)?void 0:i.space,o,a?void 0:o);return"number"==typeof s&&(s+="px"),[].concat(r,[s])}),[]).filter(Boolean).join(" "):r},O={margin:{property:"margin",scale:"space",transform:j},marginTop:{property:"marginTop",scale:"space",transform:j},marginRight:{property:"marginRight",scale:"space",transform:j},marginBottom:{property:"marginBottom",scale:"space",transform:j},marginLeft:{property:"marginLeft",scale:"space",transform:j},marginX:{properties:["marginLeft","marginRight"],scale:"space",transform:j},marginY:{properties:["marginTop","marginBottom"],scale:"space",transform:j}};O.m=O.margin,O.mt=O.marginTop,O.mr=O.marginRight,O.mb=O.marginBottom,O.ml=O.marginLeft,O.mx=O.marginX,O.my=O.marginY;var A={padding:{property:"padding",scale:"space",transform:_},paddingTop:{property:"paddingTop",scale:"space",transform:_},paddingRight:{property:"paddingRight",scale:"space",transform:_},paddingBottom:{property:"paddingBottom",scale:"space",transform:_},paddingLeft:{property:"paddingLeft",scale:"space",transform:_},paddingX:{properties:["paddingLeft","paddingRight"],scale:"space",transform:_},paddingY:{properties:["paddingTop","paddingBottom"],scale:"space",transform:_}};A.p=A.padding,A.pt=A.paddingTop,A.pr=A.paddingRight,A.pb=A.paddingBottom,A.pl=A.paddingLeft,A.px=A.paddingX,A.py=A.paddingY;var H=o({},A,O),I={width:{property:"width",scale:"sizes",transform:function(r,o){var t,a=r;return"number"!=typeof(t=r)||isNaN(t)||(a=r>1?r:100*r+"%"),e(o,r,a)}},height:{property:"height",scale:"sizes"},minWidth:{property:"minWidth",scale:"sizes"},minHeight:{property:"minHeight",scale:"sizes"},maxWidth:{property:"maxWidth",scale:"sizes"},maxHeight:{property:"maxHeight",scale:"sizes"},size:{properties:["width","height"],scale:"sizes"},overflow:!0,overflowX:!0,overflowY:!0,display:!0,verticalAlign:!0},G=Object.keys(o({},d,c,x,S,w,k,W,C,z,H)),P=new Set(G);exports.background=c,exports.border=x,exports.borderShorthandTransform=v,exports.color=S,exports.createSystem=function(e){var t=void 0===e?{}:e,i=t.strict,n=void 0!==i&&i,c=t.pseudoSelectors,f=void 0===c?d:c;return function(e){var t={};return Object.keys(e).forEach((function(r){var o=e[r];!0!==o?"function"!=typeof o&&(t[r]=a(o)):t[r]=a({property:r,scale:r})})),function e(t,a,i){void 0===a&&(a={}),void 0===i&&(i=!1);var n={strict:i},d=function(e){var i,d={},c=!1,f=Boolean(null==(i=e.theme)?void 0:i.disableSystemPropsCache),u=function(a,i){var s,p,d=t[i],u=a[i],g=r(e.theme,d.scale);if("function"==typeof u&&(u=u(e.theme)),"object"==typeof u){var h;if(n.breakpoints=!f&&n.breakpoints||(null==e||null==(h=e.theme)?void 0:h.breakpoints),Array.isArray(u)){if(void 0===n.breakpoints)throw new Error("The system props parser could not find a `breakpoints` property in the theme object, which is required for responsive styles to work. Make sure that the theme object has a breakpoints property.");return n.media=!f&&n.media||[null].concat((p=s=n.breakpoints,Array.isArray(s)||(p=Object.values(s)),p.map(l))),function(r){var e=r.cache,t=r.systemConfig,a=r.scale,i=r.props,s={},n=e.media;return r.propValue.slice(0,n.length).forEach((function(r,p){var d,l="function"==typeof r?r(i.theme):r,c=n[p],f=t(l,a,i,e);s=o({},s,c?((d={})[c]=o({},s[c],f),d):f)})),s}({cache:n,systemConfig:d,scale:g,propValue:u,props:a})}if(null!==u)return c=!0,function(r){var e=r.cache,t=r.systemConfig,a=r.scale,i=r.propValue,s=r.props,n=e.breakpoints,p={};for(var d in i){var l=n[d],c=i[d],f=t("function"==typeof c?c(s.theme):c,a,s,e);if(l){var u,g="@media screen and (min-width: "+l+")";p=o({},p,((u={})[g]=o({},p[g],f),u))}else p=o({},p,f)}return p}({cache:n,systemConfig:d,scale:g,propValue:u,props:a})}return d(u,g,e,n)};for(var g in e)if(a[g]){var h=a[g],m=e[g];for(var b in m)d[h]=o({},d[h],u(m,b)),c&&(d[a[g]]=s(d[a[g]]),c=!1)}else t[g]&&(d=p(d,u(e,g)));return c&&(d=s(d)),d};d.config=t,d.propNames=Object.keys(t),d.cache=n;var c=Object.keys(t).filter((function(r){return"config"!==r}));return c.length>1&&c.forEach((function(r){var o,a;Object.assign(d,((a={})[r]=e(((o={})[r]=t[r],o)),a))})),d}(t,f,n)}},exports.flexbox=k,exports.get=e,exports.getShadow=L,exports.grid=w,exports.layout=W,exports.margin=O,exports.padding=A,exports.position=C,exports.propNames=G,exports.pseudoSelectors=d,exports.shadow=z,exports.shouldForwardProp=function(r){return!P.has(r)},exports.space=H,exports.styledSystemLayout=I,exports.typography={fontFamily:{property:"fontFamily",scale:"fonts"},fontSize:{property:"fontSize",scale:"fontSizes"},fontWeight:{property:"fontWeight",scale:"fontWeights"},lineHeight:{property:"lineHeight",scale:"lineHeights"},letterSpacing:{property:"letterSpacing",scale:"letterSpacings"},textAlign:!0,fontStyle:!0};
 //# sourceMappingURL=system-props.cjs.production.min.js.map

dist/system-props.esm.js

@@ -93,2 +93,3 @@ var get = function get(object, path, defaultValue, // Not used, should be undefined
   for (var key in propValue) {
+    // @ts-ignore
     var breakpoint = breakpoints[key];
@@ -249,3 +250,4 @@ var valueAtQuery = propValue[key]; // e.g.
     var styles = {};
-    var shouldSort = false;
+    var shouldSort = false; // @ts-ignore
+
     var isCacheDisabled = Boolean((_props$theme = props.theme) == null ? void 0 : _props$theme.disableSystemPropsCache);
@@ -685,3 +687,3 @@
 
-var config$1 = {
+var color = {
   color: {
@@ -705,4 +707,4 @@ property: 'color',
 };
-config$1.bg = config$1.backgroundColor;
-var color = config$1;
+color.bg = color.backgroundColor;
+color.textColor = color.color;
 
@@ -709,0 +711,0 @@ var flexbox = {

dist/types.d.ts

@@ -1,15 +0,31 @@
-import * as CSS from 'csstype';
+import { Property as CSS, Properties as CSSProperties } from 'csstype';
+declare type ThemeBreakpointKey = Theme['breakpoints'] extends object ? keyof Theme['breakpoints'] | '_' | 'all' : never;
 export declare type ResponsiveObject<T> = {
-    [x: string]: T;
+    [K in ThemeBreakpointKey]?: T;
 };
 export declare type ResponsiveArray<T> = Array<T | null>;
-export declare type ResponsiveProp<T> = T | ResponsiveObject<T> | ResponsiveArray<T>;
+export declare type ResponsiveValue<T> = ResponsiveArray<T> | ResponsiveObject<T>;
+export declare type SystemProp<T> = T | ResponsiveValue<T> | ((theme: Theme) => T | ResponsiveValue<T>);
+interface TypeScale {
+    [key: string]: string;
+    [key: number]: string;
+}
 export interface Theme {
     [x: string]: any;
-    breakpoints?: Record<string, string | number>;
+    colors?: TypeScale;
+    sizes?: TypeScale;
+    space?: TypeScale;
+    borders?: TypeScale;
+    borderStyles?: TypeScale;
+    borderWidths?: TypeScale;
+    letterSpacings?: TypeScale;
+    zIndices?: TypeScale;
+    shadows?: TypeScale;
+    fontWeights?: TypeScale;
+    fontSizes?: TypeScale;
+    lineHeights?: TypeScale;
+    fonts?: TypeScale;
+    breakpoints?: TypeScale;
+    disableSystemPropsCache?: boolean;
 }
-export interface SomeObject {
-    [x: string]: SomeObject | string | number | ((x: Theme) => string | number);
-}
-export declare type PropValue = string | number | SomeObject;
 export declare type Props = {
@@ -26,4 +42,4 @@ theme?: Theme;
 export declare type PropertyConfig = {
-    properties?: Array<keyof CSS.Properties>;
-    property?: keyof CSS.Properties;
+    properties?: Array<keyof CSSProperties>;
+    property?: keyof CSSProperties;
     scale?: string;
@@ -37,5 +53,151 @@ defaultScale?: Array<string | number>;
 export interface Cache {
-    breakpoints?: ResponsiveProp<string | number>;
+    breakpoints?: SystemProp<string | number>;
     media?: (string | null)[];
     strict: boolean;
 }
+export interface SomeObject {
+    [x: string]: SomeObject | string | number | ((x: Theme) => string | number);
+}
+export declare type ColorLookup<T> = Theme['colors'] extends object ? SystemProp<keyof Theme['colors'] | T> : SystemProp<T>;
+export declare type SpaceLookup<T> = Theme['space'] extends object ? SystemProp<keyof Theme['space'] | T> : Theme['space'] extends any[] ? SystemProp<Theme['space'][number] | T> : SystemProp<T>;
+export declare type SizeLookup<T> = Theme['sizes'] extends object ? SystemProp<keyof Theme['sizes'] | T> : SystemProp<T>;
+export interface ColorProps {
+    color?: ColorLookup<CSS.BackgroundColor>;
+    textColor?: ColorLookup<CSS.BackgroundColor>;
+    backgroundColor?: ColorLookup<CSS.BackgroundColor>;
+    bg?: ColorLookup<CSS.BackgroundColor>;
+    fill?: ColorLookup<CSS.Fill>;
+    stroke?: ColorLookup<CSS.Stroke>;
+    opacity?: SystemProp<CSS.Opacity>;
+}
+export interface MarginProps {
+    margin?: SpaceLookup<CSS.Margin>;
+    m?: SpaceLookup<CSS.Margin>;
+    marginTop?: SpaceLookup<CSS.MarginTop>;
+    marginLeft?: SpaceLookup<CSS.MarginLeft>;
+    marginBottom?: SpaceLookup<CSS.MarginBottom>;
+    marginRight?: SpaceLookup<CSS.MarginRight>;
+    mt?: SpaceLookup<CSS.MarginTop>;
+    ml?: SpaceLookup<CSS.MarginLeft>;
+    mb?: SpaceLookup<CSS.MarginBottom>;
+    mr?: SpaceLookup<CSS.MarginRight>;
+    marginX?: SpaceLookup<CSS.MarginLeft>;
+    marginY?: SpaceLookup<CSS.MarginTop>;
+    mx?: SpaceLookup<CSS.MarginLeft>;
+    my?: SpaceLookup<CSS.MarginTop>;
+}
+export interface PaddingProps {
+    padding?: SpaceLookup<CSS.Padding>;
+    p?: SpaceLookup<CSS.Padding>;
+    paddingTop?: SpaceLookup<CSS.PaddingTop>;
+    paddingLeft?: SpaceLookup<CSS.PaddingLeft>;
+    paddingBottom?: SpaceLookup<CSS.PaddingBottom>;
+    paddingRight?: SpaceLookup<CSS.PaddingRight>;
+    pt?: SpaceLookup<CSS.PaddingTop>;
+    pl?: SpaceLookup<CSS.PaddingLeft>;
+    pb?: SpaceLookup<CSS.PaddingBottom>;
+    pr?: SpaceLookup<CSS.PaddingRight>;
+    paddingX?: SpaceLookup<CSS.PaddingLeft>;
+    paddingY?: SpaceLookup<CSS.PaddingTop>;
+    px?: SpaceLookup<CSS.PaddingLeft>;
+    py?: SpaceLookup<CSS.PaddingTop>;
+}
+export interface SpaceProps extends MarginProps, PaddingProps {
+}
+export interface BorderProps {
+    border?: Theme['borders'] extends object ? SystemProp<keyof Theme['borders'] | CSS.Border> : SystemProp<CSS.Border>;
+    borderX?: Theme['borders'] extends object ? SystemProp<keyof Theme['borders'] | CSS.BorderLeft> : SystemProp<CSS.BorderLeft>;
+    borderY?: Theme['borders'] extends object ? SystemProp<keyof Theme['borders'] | CSS.BorderLeft> : SystemProp<CSS.BorderLeft>;
+    borderTop?: Theme['borders'] extends object ? SystemProp<keyof Theme['borders'] | CSS.BorderTop> : SystemProp<CSS.BorderTop>;
+    borderLeft?: Theme['borders'] extends object ? SystemProp<keyof Theme['borders'] | CSS.BorderLeft> : SystemProp<CSS.BorderLeft>;
+    borderRight?: Theme['borders'] extends object ? SystemProp<keyof Theme['borders'] | CSS.BorderRight> : SystemProp<CSS.BorderRight>;
+    borderBottom?: Theme['borders'] extends object ? SystemProp<keyof Theme['borders'] | CSS.BorderBottom> : SystemProp<CSS.BorderBottom>;
+    borderColor?: Theme['colors'] extends object ? SystemProp<keyof Theme['colors'] | CSS.BorderColor> : SystemProp<CSS.BorderColor>;
+    borderLeftColor?: Theme['colors'] extends object ? SystemProp<keyof Theme['colors'] | CSS.BorderLeftColor> : SystemProp<CSS.BorderLeftColor>;
+    borderRightColor?: Theme['colors'] extends object ? SystemProp<keyof Theme['colors'] | CSS.BorderRightColor> : SystemProp<CSS.BorderRightColor>;
+    borderBottomColor?: Theme['colors'] extends object ? SystemProp<keyof Theme['colors'] | CSS.BorderBottomColor> : SystemProp<CSS.BorderBottomColor>;
+    borderTopColor?: Theme['colors'] extends object ? SystemProp<keyof Theme['colors'] | CSS.BorderTopColor> : SystemProp<CSS.BorderTopColor>;
+    borderStyle?: Theme['borderStyles'] extends object ? SystemProp<keyof Theme['borderStyles'] | CSS.BorderStyle> : SystemProp<CSS.BorderStyle>;
+    borderLeftStyle?: Theme['borderStyles'] extends object ? SystemProp<keyof Theme['borderStyles'] | CSS.BorderLeftStyle> : SystemProp<CSS.BorderLeftStyle>;
+    borderRightStyle?: Theme['borderStyles'] extends object ? SystemProp<keyof Theme['borderStyles'] | CSS.BorderRightStyle> : SystemProp<CSS.BorderRightStyle>;
+    borderBottomStyle?: Theme['borderStyles'] extends object ? SystemProp<keyof Theme['borderStyles'] | CSS.BorderBottomStyle> : SystemProp<CSS.BorderBottomStyle>;
+    borderTopStyle?: Theme['borderStyles'] extends object ? SystemProp<keyof Theme['borderStyles'] | CSS.BorderTopStyle> : SystemProp<CSS.BorderTopStyle>;
+    borderWidth?: Theme['borderWidths'] extends object ? SystemProp<keyof Theme['borderWidths'] | CSS.BorderWidth> : SystemProp<CSS.BorderWidth>;
+    borderLeftWidth?: Theme['borderWidths'] extends object ? SystemProp<keyof Theme['borderWidths'] | CSS.BorderLeftWidth> : SystemProp<CSS.BorderLeftWidth>;
+    borderRightWidth?: Theme['borderWidths'] extends object ? SystemProp<keyof Theme['borderWidths'] | CSS.BorderRightWidth> : SystemProp<CSS.BorderRightWidth>;
+    borderBottomWidth?: Theme['borderWidths'] extends object ? SystemProp<keyof Theme['borderWidths'] | CSS.BorderBottomWidth> : SystemProp<CSS.BorderBottomWidth>;
+    borderTopWidth?: Theme['borderWidths'] extends object ? SystemProp<keyof Theme['borderWidths'] | CSS.BorderTopWidth> : SystemProp<CSS.BorderTopWidth>;
+    borderRadius?: Theme['radii'] extends object ? SystemProp<keyof Theme['radii'] | CSS.BorderRadius> : SystemProp<CSS.BorderRadius>;
+    borderTopLeftRadius?: Theme['radii'] extends object ? SystemProp<keyof Theme['radii'] | CSS.BorderTopLeftRadius> : SystemProp<CSS.BorderTopLeftRadius>;
+    borderTopRightRadius?: Theme['radii'] extends object ? SystemProp<keyof Theme['radii'] | CSS.BorderTopRightRadius> : SystemProp<CSS.BorderTopRightRadius>;
+    borderBottomRightRadius?: Theme['radii'] extends object ? SystemProp<keyof Theme['radii'] | CSS.BorderBottomRightRadius> : SystemProp<CSS.BorderBottomRightRadius>;
+    borderBottomLeftRadius?: Theme['radii'] extends object ? SystemProp<keyof Theme['radii'] | CSS.BorderBottomLeftRadius> : SystemProp<CSS.BorderBottomLeftRadius>;
+}
+export interface FlexboxProps {
+    alignItems?: SystemProp<CSS.AlignItems>;
+    alignContent?: SystemProp<CSS.AlignContent>;
+    justifyItems?: SystemProp<CSS.JustifyItems>;
+    justifyContent?: SystemProp<CSS.JustifyContent>;
+    flexWrap?: SystemProp<CSS.FlexWrap>;
+    flexDirection?: SystemProp<CSS.FlexDirection>;
+    flex?: SystemProp<CSS.Flex>;
+    flexGrow?: SystemProp<CSS.FlexGrow>;
+    flexShrink?: SystemProp<CSS.FlexShrink>;
+    flexBasis?: SystemProp<CSS.FlexBasis>;
+    justifySelf?: SystemProp<CSS.JustifySelf>;
+    alignSelf?: SystemProp<CSS.AlignSelf>;
+    order?: SystemProp<CSS.Order>;
+}
+export interface GridProps {
+    gap?: SpaceLookup<CSS.Gap>;
+    gridGap?: SpaceLookup<CSS.GridGap>;
+    gridColumnGap?: SpaceLookup<CSS.GridColumnGap>;
+    gridRowGap?: SpaceLookup<CSS.GridRowGap>;
+    gridRow?: SystemProp<CSS.GridRow>;
+    gridColumn?: SystemProp<CSS.GridColumn>;
+    gridAutoFlow?: SystemProp<CSS.GridAutoFlow>;
+    gridAutoColumns?: SystemProp<CSS.GridAutoColumns>;
+    gridAutoRows?: SystemProp<CSS.GridAutoRows>;
+    gridTemplateColumns?: SystemProp<CSS.GridTemplateColumns>;
+    gridTemplateRows?: SystemProp<CSS.GridTemplateRows>;
+    gridTemplateAreas?: SystemProp<CSS.GridTemplateAreas>;
+    gridArea?: SystemProp<CSS.GridArea>;
+}
+export interface LayoutProps {
+    height?: SizeLookup<CSS.Height>;
+    width?: SizeLookup<CSS.Width>;
+    minWidth?: SizeLookup<CSS.MinWidth>;
+    minHeight?: SizeLookup<CSS.MinHeight>;
+    maxWidth?: SizeLookup<CSS.MaxWidth>;
+    maxHeight?: SizeLookup<CSS.MaxHeight>;
+    size?: SizeLookup<CSS.Width>;
+    overflow?: SystemProp<CSS.Overflow>;
+    overflowX?: SystemProp<CSS.OverflowX>;
+    overflowY?: SystemProp<CSS.OverflowY>;
+    display?: SystemProp<CSS.Display>;
+    verticalAlign?: SystemProp<CSS.VerticalAlign>;
+}
+export interface PositionProps {
+    position?: SystemProp<CSS.Position>;
+    top?: SizeLookup<CSS.Top>;
+    left?: SizeLookup<CSS.Left>;
+    right?: SizeLookup<CSS.Right>;
+    bottom?: SizeLookup<CSS.Bottom>;
+    zIndex?: Theme['zIndices'] extends object ? SystemProp<keyof Theme['zIndices'] | CSS.ZIndex> : SystemProp<CSS.ZIndex>;
+}
+export interface ShadowProps {
+    boxShadow?: Theme['shadows'] extends object ? SystemProp<keyof Theme['shadows'] | CSS.BoxShadow> : SystemProp<CSS.BoxShadow>;
+    textShadow?: Theme['shadows'] extends object ? SystemProp<keyof Theme['shadows'] | CSS.TextShadow> : SystemProp<CSS.TextShadow>;
+}
+export interface TypographyProps {
+    fontFamily?: Theme['fonts'] extends object ? SystemProp<keyof Theme['fonts'] | CSS.FontFamily> : SystemProp<CSS.FontFamily>;
+    fontSize?: Theme['fontSizes'] extends object ? SystemProp<keyof Theme['fontSizes'] | CSS.FontSize> : SystemProp<CSS.FontSize>;
+    fontWeight?: Theme['fontWeights'] extends object ? SystemProp<keyof Theme['fontWeights'] | CSS.FontWeight> : SystemProp<CSS.FontWeight>;
+    fontStyle?: SystemProp<CSS.FontStyle>;
+    lineHeight?: Theme['lineHeights'] extends object ? SystemProp<keyof Theme['lineHeights'] | CSS.LineHeight> : SystemProp<CSS.LineHeight>;
+    letterSpacing?: Theme['letterSpacings'] extends object ? SystemProp<keyof Theme['letterSpacings'] | CSS.LetterSpacing> : SystemProp<CSS.LetterSpacing>;
+    textAlign?: SystemProp<CSS.TextAlign>;
+}
+export interface AllSystemProps extends ColorProps, SpaceProps, BorderProps, TypographyProps, LayoutProps, ShadowProps, PositionProps, GridProps, FlexboxProps {
+}
+export {};

package.json

 {
   "name": "system-props",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Inspired by styled-system, a responsive, theme-based style props for building design systems with React.",
@@ -21,3 +21,3 @@ "author": "Rogin Farrer",
     "tslib": "^2.0.1",
-    "typescript": "^4.0.2"
+    "typescript": "^4.1.0"
   },
@@ -24,0 +24,0 @@ "license": "MIT",

src/core/createSystem.ts

@@ -5,3 +5,3 @@ import { parseResponsiveStyle, parseResponsiveObject } from './parseResponsive';
 import {
-  ResponsiveProp,
+  SystemProp,
   SystemConfig,
@@ -27,3 +27,3 @@ PropConfigCollection,
 
-function parseBreakpoints(breakpoints: ResponsiveProp<string | number>) {
+function parseBreakpoints(breakpoints: SystemProp<string | number>) {
   let bps = breakpoints;
@@ -46,2 +46,3 @@ if (!Array.isArray(breakpoints)) {
     let shouldSort = false;
+    // @ts-ignore
     const isCacheDisabled = Boolean(props.theme?.disableSystemPropsCache);
@@ -48,0 +49,0 @@

src/core/parseResponsive.ts

@@ -74,5 +74,6 @@ import {
 }) => {
-  const breakpoints = cache.breakpoints as ResponsiveObject<string>;
+  const breakpoints = cache.breakpoints as ResponsiveObject<string | number>;
   let styles = {};
   for (const key in propValue) {
+    // @ts-ignore
     const breakpoint = breakpoints[key];
@@ -79,0 +80,0 @@ const valueAtQuery = propValue[key];

src/index.ts

 export { betterGet as get } from './core/get';
 export { createSystem } from './core/createSystem';
-export { ResponsiveProp } from '@/types';
 
@@ -9,1 +8,15 @@ export * from './props';
 export * from './shouldForwardProp';
+export {
+  SystemProp,
+  Theme,
+  ColorProps,
+  SpaceProps,
+  BorderProps,
+  TypographyProps,
+  LayoutProps,
+  ShadowProps,
+  PositionProps,
+  GridProps,
+  FlexboxProps,
+  AllSystemProps,
+} from './types';

src/props/background/index.ts

@@ -1,3 +0,2 @@
-import { PropConfigCollection, ResponsiveProp } from '@/types';
-import { Property } from 'csstype';
+import { PropConfigCollection } from '@/types';
 
@@ -17,14 +16,2 @@ export const background: PropConfigCollection = {
 
-export interface BackgroundProps {
-  background?: ResponsiveProp<Property.Background>;
-  backgroundImage?: ResponsiveProp<Property.BackgroundImage>;
-  bgImage?: ResponsiveProp<Property.BackgroundImage>;
-  backgroundSize?: ResponsiveProp<Property.BackgroundSize>;
-  bgSize?: ResponsiveProp<Property.BackgroundSize>;
-  backgroundPosition?: ResponsiveProp<Property.BackgroundPosition>;
-  bgPosition?: ResponsiveProp<Property.BackgroundPosition>;
-  backgroundRepeat?: ResponsiveProp<Property.BackgroundRepeat>;
-  bgRepeat?: ResponsiveProp<Property.BackgroundRepeat>;
-}
-
 export default background;

src/props/border/index.ts

 import { betterGet } from '@/core/get';
-import { PropConfigCollection, Transform, ResponsiveProp } from '@/types';
+import { PropConfigCollection, Transform } from '@/types';
 import { tokenizeValue } from '../tokenizeValue';
-import { Property } from 'csstype';
 
@@ -175,27 +174,1 @@ export const borderShorthandTransform: Transform = (
 export const border = config;
-
-export interface BorderProps {
-  border?: ResponsiveProp<Property.Border>;
-  borderX?: ResponsiveProp<Property.Border>;
-  borderY?: ResponsiveProp<Property.Border>;
-  borderRight?: ResponsiveProp<Property.BorderRight>;
-  borderLeft?: ResponsiveProp<Property.BorderLeft>;
-  borderTop?: ResponsiveProp<Property.BorderTop>;
-  borderColor?: ResponsiveProp<Property.BorderColor>;
-  borderRightColor?: ResponsiveProp<Property.BorderRightColor>;
-  borderLeftColor?: ResponsiveProp<Property.BorderLeftColor>;
-  borderTopColor?: ResponsiveProp<Property.BorderTopColor>;
-  borderStyle?: ResponsiveProp<Property.BorderColor>;
-  borderRightStyle?: ResponsiveProp<Property.BorderRightColor>;
-  borderLeftStyle?: ResponsiveProp<Property.BorderLeftColor>;
-  borderTopStyle?: ResponsiveProp<Property.BorderTopColor>;
-  borderWidth?: ResponsiveProp<Property.BorderWidth>;
-  borderRightWidth?: ResponsiveProp<Property.BorderRightWidth>;
-  borderLeftWidth?: ResponsiveProp<Property.BorderLeftWidth>;
-  borderTopWidth?: ResponsiveProp<Property.BorderTopWidth>;
-  borderRadius?: ResponsiveProp<Property.BorderRadius>;
-  borderTopLeftRadius?: ResponsiveProp<Property.BorderTopLeftRadius>;
-  borderTopRightRadius?: ResponsiveProp<Property.BorderTopRightRadius>;
-  borderBottomLeftRadius?: ResponsiveProp<Property.BorderBottomLeftRadius>;
-  borderBottomRightRadius?: ResponsiveProp<Property.BorderBottomRightRadius>;
-}

src/props/color/index.ts

@@ -1,5 +0,4 @@
-import { PropConfigCollection, ResponsiveProp } from '@/types';
-import * as CSS from 'csstype';
+import { PropConfigCollection } from '@/types';
 
-const config: PropConfigCollection = {
+export const color: PropConfigCollection = {
   color: {
@@ -23,13 +22,3 @@ property: 'color',
 };
-config.bg = config.backgroundColor;
-
-export interface ColorProps {
-  color?: ResponsiveProp<CSS.Property.Color>;
-  backgroundColor?: ResponsiveProp<CSS.Property.Color>;
-  bg?: ResponsiveProp<CSS.Property.Color>;
-  fill?: ResponsiveProp<CSS.Property.Color>;
-  stroke?: ResponsiveProp<CSS.Property.Color>;
-  opacity?: ResponsiveProp<CSS.Property.Opacity>;
-}
-
-export const color = config;
+color.bg = color.backgroundColor;
+color.textColor = color.color;

src/props/flexbox/index.ts

@@ -1,3 +0,2 @@
-import { PropConfigCollection, ResponsiveProp } from '@/types';
-import { Property } from 'csstype';
+import { PropConfigCollection } from '@/types';
 
@@ -21,18 +20,2 @@ export const flexbox: PropConfigCollection = {
 
-export interface FlexboxProps {
-  alignItems?: ResponsiveProp<Property.AlignItems>;
-  alignContent?: ResponsiveProp<Property.AlignContent>;
-  justifyItems?: ResponsiveProp<Property.JustifyItems>;
-  justifyContent?: ResponsiveProp<Property.JustifyContent>;
-  flexWrap?: ResponsiveProp<Property.FlexWrap>;
-  flexDirection?: ResponsiveProp<Property.FlexDirection>;
-  flex?: ResponsiveProp<Property.Flex>;
-  flexGrow?: ResponsiveProp<Property.FlexGrow>;
-  flexShrink?: ResponsiveProp<Property.FlexShrink>;
-  flexBasis?: ResponsiveProp<Property.FlexBasis>;
-  justifySelf?: ResponsiveProp<Property.JustifySelf>;
-  alignSelf?: ResponsiveProp<Property.AlignSelf>;
-  order?: ResponsiveProp<Property.Order>;
-}
-
 export default flexbox;

src/props/grid/index.ts

@@ -1,3 +0,2 @@
-import { PropConfigCollection, ResponsiveProp } from '@/types';
-import { Property } from 'csstype';
+import { PropConfigCollection } from '@/types';
 
@@ -32,18 +31,2 @@ export const grid: PropConfigCollection = {
 
-export interface GridProps {
-  gap?: ResponsiveProp<Property.Gap>;
-  gridGap?: ResponsiveProp<Property.GridGap>;
-  gridColumnGap?: ResponsiveProp<Property.GridColumnGap>;
-  gridRowGap?: ResponsiveProp<Property.GridRowGap>;
-  gridRow?: ResponsiveProp<Property.GridRow>;
-  gridColumn?: ResponsiveProp<Property.GridColumn>;
-  gridAutoFlow?: ResponsiveProp<Property.GridAutoFlow>;
-  gridAutoColumns?: ResponsiveProp<Property.GridAutoColumns>;
-  gridAutoRows?: ResponsiveProp<Property.GridAutoRows>;
-  gridTemplateColumns?: ResponsiveProp<Property.GridTemplateColumns>;
-  gridTemplateRows?: ResponsiveProp<Property.GridTemplateRows>;
-  gridTemplateAreas?: ResponsiveProp<Property.GridTemplateAreas>;
-  gridArea?: ResponsiveProp<Property.GridArea>;
-}
-
 export default grid;

src/props/index.ts

@@ -1,12 +0,1 @@
-import { BackgroundProps } from './background';
-import { BorderProps } from './border';
-import { ColorProps } from './color';
-import { FlexboxProps } from './flexbox';
-import { GridProps } from './grid';
-import { LayoutProps } from './layout';
-import { PositionProps } from './position';
-import { ShadowProps } from './shadow';
-import { SpaceProps } from './space';
-import { TypographyProps } from './typography';
-
 export * from './background';
@@ -23,13 +12,1 @@ export * from './border';
 export { layout as styledSystemLayout } from './styled-system-layout';
-
-export interface SystemProps
-  extends BackgroundProps,
-    BorderProps,
-    ColorProps,
-    FlexboxProps,
-    GridProps,
-    LayoutProps,
-    PositionProps,
-    ShadowProps,
-    SpaceProps,
-    TypographyProps {}

src/props/layout/index.ts

@@ -1,3 +0,2 @@
-import { PropConfigCollection, ResponsiveProp } from '@/types';
-import { Property } from 'csstype';
+import { PropConfigCollection } from '@/types';
 
@@ -39,16 +38,1 @@ export const layout: PropConfigCollection = {
 };
-
-export interface LayoutProps {
-  height?: ResponsiveProp<Property.Height>;
-  width?: ResponsiveProp<Property.Width>;
-  minWidth?: ResponsiveProp<Property.MinWidth>;
-  minHeight?: ResponsiveProp<Property.MinHeight>;
-  maxWidth?: ResponsiveProp<Property.MaxWidth>;
-  maxHeight?: ResponsiveProp<Property.MaxHeight>;
-  size?: ResponsiveProp<Property.Width>;
-  overflow?: ResponsiveProp<Property.Overflow>;
-  overflowX?: ResponsiveProp<Property.OverflowX>;
-  overflowY?: ResponsiveProp<Property.OverflowY>;
-  display?: ResponsiveProp<Property.Display>;
-  verticalAlign?: ResponsiveProp<Property.VerticalAlign>;
-}

src/props/position/index.ts

@@ -1,4 +0,3 @@
-import { PropConfigCollection, ResponsiveProp } from '@/types';
+import { PropConfigCollection } from '@/types';
 import { positiveOrNegative } from '../positiveOrNegative';
-import { Property } from 'csstype';
 
@@ -32,10 +31,1 @@ export const position: PropConfigCollection = {
 };
-
-export interface PositionProps {
-  position?: ResponsiveProp<Property.Position>;
-  top?: ResponsiveProp<Property.Top>;
-  left?: ResponsiveProp<Property.Left>;
-  right?: ResponsiveProp<Property.Right>;
-  bottom?: ResponsiveProp<Property.Bottom>;
-  zIndex?: ResponsiveProp<Property.ZIndex>;
-}

src/props/shadow/index.ts

 import { betterGet } from '@/core/get';
-import { Transform, PropConfigCollection, ResponsiveProp } from '@/types';
+import { Transform, PropConfigCollection } from '@/types';
 import { tokenizeValue } from '../tokenizeValue';
-import { Property } from 'csstype';
 
@@ -33,6 +32,1 @@ export const getShadow: Transform = (value, _, props) => {
 };
-
-export interface ShadowProps {
-  boxShadow?: ResponsiveProp<Property.BoxShadow>;
-  textShadow?: ResponsiveProp<Property.TextShadow>;
-}

src/props/space/index.ts

 import { betterGet } from '@/core/get';
-import { PropConfigCollection, Transform, ResponsiveProp } from '@/types';
+import { PropConfigCollection, Transform } from '@/types';
 import { positiveOrNegative } from '../positiveOrNegative';
-import { Property } from 'csstype';
 
@@ -185,37 +184,1 @@ const getMargin: Transform = (value, _, props, strict) => {
 export const space = { ...padding, ...margin };
-
-export interface PaddingProps {
-  padding?: ResponsiveProp<Property.Padding>;
-  paddingTop?: ResponsiveProp<Property.PaddingTop>;
-  paddingRight?: ResponsiveProp<Property.PaddingRight>;
-  paddingLeft?: ResponsiveProp<Property.PaddingLeft>;
-  paddingBottom?: ResponsiveProp<Property.PaddingBottom>;
-  paddingX?: ResponsiveProp<Property.PaddingLeft>;
-  paddingY?: ResponsiveProp<Property.PaddingTop>;
-  p?: ResponsiveProp<Property.Padding>;
-  pt?: ResponsiveProp<Property.PaddingTop>;
-  pr?: ResponsiveProp<Property.PaddingRight>;
-  pl?: ResponsiveProp<Property.PaddingLeft>;
-  pb?: ResponsiveProp<Property.PaddingBottom>;
-  px?: ResponsiveProp<Property.PaddingLeft>;
-  py?: ResponsiveProp<Property.PaddingTop>;
-}
-
-export interface MarginProps {
-  margin?: ResponsiveProp<Property.Margin>;
-  marginTop?: ResponsiveProp<Property.MarginTop>;
-  marginRight?: ResponsiveProp<Property.MarginRight>;
-  marginLeft?: ResponsiveProp<Property.MarginLeft>;
-  marginBottom?: ResponsiveProp<Property.MarginBottom>;
-  marginX?: ResponsiveProp<Property.MarginLeft>;
-  marginY?: ResponsiveProp<Property.MarginTop>;
-  m?: ResponsiveProp<Property.Margin>;
-  mt?: ResponsiveProp<Property.MarginTop>;
-  mr?: ResponsiveProp<Property.MarginRight>;
-  ml?: ResponsiveProp<Property.MarginLeft>;
-  mb?: ResponsiveProp<Property.MarginBottom>;
-  mx?: ResponsiveProp<Property.MarginLeft>;
-  my?: ResponsiveProp<Property.MarginTop>;
-}
-
-export interface SpaceProps extends MarginProps, PaddingProps {}

src/props/styled-system-layout/index.ts

@@ -1,2 +0,2 @@
-import { PropConfigCollection, Transform, ResponsiveProp } from '@/types';
+import { PropConfigCollection, Transform } from '@/types';
 import { get } from '@/core';
@@ -54,14 +54,14 @@ import { Property } from 'csstype';
 export interface LayoutProps {
-  height?: ResponsiveProp<Property.Height>;
-  width?: ResponsiveProp<Property.Width>;
-  minWidth?: ResponsiveProp<Property.MinWidth>;
-  minHeight?: ResponsiveProp<Property.MinHeight>;
-  maxWidth?: ResponsiveProp<Property.MaxWidth>;
-  maxHeight?: ResponsiveProp<Property.MaxHeight>;
-  size?: ResponsiveProp<Property.Width>;
-  overflow?: ResponsiveProp<Property.Overflow>;
-  overflowX?: ResponsiveProp<Property.OverflowX>;
-  overflowY?: ResponsiveProp<Property.OverflowY>;
-  display?: ResponsiveProp<Property.Display>;
-  verticalAlign?: ResponsiveProp<Property.VerticalAlign>;
+  height?: Property.Height;
+  width?: Property.Width;
+  minWidth?: Property.MinWidth;
+  minHeight?: Property.MinHeight;
+  maxWidth?: Property.MaxWidth;
+  maxHeight?: Property.MaxHeight;
+  size?: Property.Width;
+  overflow?: Property.Overflow;
+  overflowX?: Property.OverflowX;
+  overflowY?: Property.OverflowY;
+  display?: Property.Display;
+  verticalAlign?: Property.VerticalAlign;
 }

src/props/typography/index.ts

@@ -1,3 +0,2 @@
-import { PropConfigCollection, ResponsiveProp } from '@/types';
-import { Property } from 'csstype';
+import { PropConfigCollection } from '@/types';
 
@@ -28,11 +27,1 @@ export const typography: PropConfigCollection = {
 };
-
-export interface TypographyProps {
-  fontFamily?: ResponsiveProp<Property.FontFamily>;
-  fontSize?: ResponsiveProp<Property.FontSize>;
-  fontWeight?: ResponsiveProp<Property.FontWeight>;
-  fontStyle?: ResponsiveProp<Property.FontStyle>;
-  lineHeight?: ResponsiveProp<Property.LineHeight>;
-  letterSpacing?: ResponsiveProp<Property.LetterSpacing>;
-  textAlign?: ResponsiveProp<Property.TextAlign>;
-}

src/types.ts

@@ -1,18 +0,42 @@
-import * as CSS from 'csstype';
+import { Property as CSS, Properties as CSSProperties } from 'csstype';
 
-export type ResponsiveObject<T> = { [x: string]: T };
+type ThemeBreakpointKey = Theme['breakpoints'] extends object
+  ? keyof Theme['breakpoints'] | '_' | 'all'
+  : never;
+
+export type ResponsiveObject<T> = {
+  [K in ThemeBreakpointKey]?: T;
+};
 export type ResponsiveArray<T> = Array<T | null>;
-export type ResponsiveProp<T> = T | ResponsiveObject<T> | ResponsiveArray<T>;
+export type ResponsiveValue<T> = ResponsiveArray<T> | ResponsiveObject<T>;
 
+export type SystemProp<T> =
+  | T
+  | ResponsiveValue<T>
+  | ((theme: Theme) => T | ResponsiveValue<T>);
+
+interface TypeScale {
+  [key: string]: string;
+  [key: number]: string;
+}
+
 export interface Theme {
   [x: string]: any;
-  breakpoints?: Record<string, string | number>;
+  colors?: TypeScale;
+  sizes?: TypeScale;
+  space?: TypeScale;
+  borders?: TypeScale;
+  borderStyles?: TypeScale;
+  borderWidths?: TypeScale;
+  letterSpacings?: TypeScale;
+  zIndices?: TypeScale;
+  shadows?: TypeScale;
+  fontWeights?: TypeScale;
+  fontSizes?: TypeScale;
+  lineHeights?: TypeScale;
+  fonts?: TypeScale;
+  breakpoints?: TypeScale;
+  disableSystemPropsCache?: boolean;
 }
 
-export interface SomeObject {
-  [x: string]: SomeObject | string | number | ((x: Theme) => string | number);
-}
-
-export type PropValue = string | number | SomeObject;
-
 export type Props = {
@@ -38,4 +62,4 @@ theme?: Theme;
 export type PropertyConfig = {
-  properties?: Array<keyof CSS.Properties>;
-  property?: keyof CSS.Properties;
+  properties?: Array<keyof CSSProperties>;
+  property?: keyof CSSProperties;
   scale?: string;
@@ -51,5 +75,249 @@ defaultScale?: Array<string | number>;
 export interface Cache {
-  breakpoints?: ResponsiveProp<string | number>;
+  breakpoints?: SystemProp<string | number>;
   media?: (string | null)[];
   strict: boolean;
 }
+
+export interface SomeObject {
+  [x: string]: SomeObject | string | number | ((x: Theme) => string | number);
+}
+
+export type ColorLookup<T> = Theme['colors'] extends object
+  ? SystemProp<keyof Theme['colors'] | T>
+  : SystemProp<T>;
+export type SpaceLookup<T> = Theme['space'] extends object
+  ? SystemProp<keyof Theme['space'] | T>
+  : Theme['space'] extends any[]
+  ? SystemProp<Theme['space'][number] | T>
+  : SystemProp<T>;
+export type SizeLookup<T> = Theme['sizes'] extends object
+  ? SystemProp<keyof Theme['sizes'] | T>
+  : SystemProp<T>;
+
+export interface ColorProps {
+  color?: ColorLookup<CSS.BackgroundColor>;
+  textColor?: ColorLookup<CSS.BackgroundColor>;
+  backgroundColor?: ColorLookup<CSS.BackgroundColor>;
+  bg?: ColorLookup<CSS.BackgroundColor>;
+  fill?: ColorLookup<CSS.Fill>;
+  stroke?: ColorLookup<CSS.Stroke>;
+  opacity?: SystemProp<CSS.Opacity>;
+}
+
+export interface MarginProps {
+  margin?: SpaceLookup<CSS.Margin>;
+  m?: SpaceLookup<CSS.Margin>;
+  marginTop?: SpaceLookup<CSS.MarginTop>;
+  marginLeft?: SpaceLookup<CSS.MarginLeft>;
+  marginBottom?: SpaceLookup<CSS.MarginBottom>;
+  marginRight?: SpaceLookup<CSS.MarginRight>;
+  mt?: SpaceLookup<CSS.MarginTop>;
+  ml?: SpaceLookup<CSS.MarginLeft>;
+  mb?: SpaceLookup<CSS.MarginBottom>;
+  mr?: SpaceLookup<CSS.MarginRight>;
+  marginX?: SpaceLookup<CSS.MarginLeft>;
+  marginY?: SpaceLookup<CSS.MarginTop>;
+  mx?: SpaceLookup<CSS.MarginLeft>;
+  my?: SpaceLookup<CSS.MarginTop>;
+}
+
+export interface PaddingProps {
+  padding?: SpaceLookup<CSS.Padding>;
+  p?: SpaceLookup<CSS.Padding>;
+  paddingTop?: SpaceLookup<CSS.PaddingTop>;
+  paddingLeft?: SpaceLookup<CSS.PaddingLeft>;
+  paddingBottom?: SpaceLookup<CSS.PaddingBottom>;
+  paddingRight?: SpaceLookup<CSS.PaddingRight>;
+  pt?: SpaceLookup<CSS.PaddingTop>;
+  pl?: SpaceLookup<CSS.PaddingLeft>;
+  pb?: SpaceLookup<CSS.PaddingBottom>;
+  pr?: SpaceLookup<CSS.PaddingRight>;
+  paddingX?: SpaceLookup<CSS.PaddingLeft>;
+  paddingY?: SpaceLookup<CSS.PaddingTop>;
+  px?: SpaceLookup<CSS.PaddingLeft>;
+  py?: SpaceLookup<CSS.PaddingTop>;
+}
+
+export interface SpaceProps extends MarginProps, PaddingProps {}
+
+export interface BorderProps {
+  border?: Theme['borders'] extends object
+    ? SystemProp<keyof Theme['borders'] | CSS.Border>
+    : SystemProp<CSS.Border>;
+  borderX?: Theme['borders'] extends object
+    ? SystemProp<keyof Theme['borders'] | CSS.BorderLeft>
+    : SystemProp<CSS.BorderLeft>;
+  borderY?: Theme['borders'] extends object
+    ? SystemProp<keyof Theme['borders'] | CSS.BorderLeft>
+    : SystemProp<CSS.BorderLeft>;
+  borderTop?: Theme['borders'] extends object
+    ? SystemProp<keyof Theme['borders'] | CSS.BorderTop>
+    : SystemProp<CSS.BorderTop>;
+  borderLeft?: Theme['borders'] extends object
+    ? SystemProp<keyof Theme['borders'] | CSS.BorderLeft>
+    : SystemProp<CSS.BorderLeft>;
+  borderRight?: Theme['borders'] extends object
+    ? SystemProp<keyof Theme['borders'] | CSS.BorderRight>
+    : SystemProp<CSS.BorderRight>;
+  borderBottom?: Theme['borders'] extends object
+    ? SystemProp<keyof Theme['borders'] | CSS.BorderBottom>
+    : SystemProp<CSS.BorderBottom>;
+  borderColor?: Theme['colors'] extends object
+    ? SystemProp<keyof Theme['colors'] | CSS.BorderColor>
+    : SystemProp<CSS.BorderColor>;
+  borderLeftColor?: Theme['colors'] extends object
+    ? SystemProp<keyof Theme['colors'] | CSS.BorderLeftColor>
+    : SystemProp<CSS.BorderLeftColor>;
+  borderRightColor?: Theme['colors'] extends object
+    ? SystemProp<keyof Theme['colors'] | CSS.BorderRightColor>
+    : SystemProp<CSS.BorderRightColor>;
+  borderBottomColor?: Theme['colors'] extends object
+    ? SystemProp<keyof Theme['colors'] | CSS.BorderBottomColor>
+    : SystemProp<CSS.BorderBottomColor>;
+  borderTopColor?: Theme['colors'] extends object
+    ? SystemProp<keyof Theme['colors'] | CSS.BorderTopColor>
+    : SystemProp<CSS.BorderTopColor>;
+  borderStyle?: Theme['borderStyles'] extends object
+    ? SystemProp<keyof Theme['borderStyles'] | CSS.BorderStyle>
+    : SystemProp<CSS.BorderStyle>;
+  borderLeftStyle?: Theme['borderStyles'] extends object
+    ? SystemProp<keyof Theme['borderStyles'] | CSS.BorderLeftStyle>
+    : SystemProp<CSS.BorderLeftStyle>;
+  borderRightStyle?: Theme['borderStyles'] extends object
+    ? SystemProp<keyof Theme['borderStyles'] | CSS.BorderRightStyle>
+    : SystemProp<CSS.BorderRightStyle>;
+  borderBottomStyle?: Theme['borderStyles'] extends object
+    ? SystemProp<keyof Theme['borderStyles'] | CSS.BorderBottomStyle>
+    : SystemProp<CSS.BorderBottomStyle>;
+  borderTopStyle?: Theme['borderStyles'] extends object
+    ? SystemProp<keyof Theme['borderStyles'] | CSS.BorderTopStyle>
+    : SystemProp<CSS.BorderTopStyle>;
+  borderWidth?: Theme['borderWidths'] extends object
+    ? SystemProp<keyof Theme['borderWidths'] | CSS.BorderWidth>
+    : SystemProp<CSS.BorderWidth>;
+  borderLeftWidth?: Theme['borderWidths'] extends object
+    ? SystemProp<keyof Theme['borderWidths'] | CSS.BorderLeftWidth>
+    : SystemProp<CSS.BorderLeftWidth>;
+  borderRightWidth?: Theme['borderWidths'] extends object
+    ? SystemProp<keyof Theme['borderWidths'] | CSS.BorderRightWidth>
+    : SystemProp<CSS.BorderRightWidth>;
+  borderBottomWidth?: Theme['borderWidths'] extends object
+    ? SystemProp<keyof Theme['borderWidths'] | CSS.BorderBottomWidth>
+    : SystemProp<CSS.BorderBottomWidth>;
+  borderTopWidth?: Theme['borderWidths'] extends object
+    ? SystemProp<keyof Theme['borderWidths'] | CSS.BorderTopWidth>
+    : SystemProp<CSS.BorderTopWidth>;
+  borderRadius?: Theme['radii'] extends object
+    ? SystemProp<keyof Theme['radii'] | CSS.BorderRadius>
+    : SystemProp<CSS.BorderRadius>;
+  borderTopLeftRadius?: Theme['radii'] extends object
+    ? SystemProp<keyof Theme['radii'] | CSS.BorderTopLeftRadius>
+    : SystemProp<CSS.BorderTopLeftRadius>;
+  borderTopRightRadius?: Theme['radii'] extends object
+    ? SystemProp<keyof Theme['radii'] | CSS.BorderTopRightRadius>
+    : SystemProp<CSS.BorderTopRightRadius>;
+  borderBottomRightRadius?: Theme['radii'] extends object
+    ? SystemProp<keyof Theme['radii'] | CSS.BorderBottomRightRadius>
+    : SystemProp<CSS.BorderBottomRightRadius>;
+  borderBottomLeftRadius?: Theme['radii'] extends object
+    ? SystemProp<keyof Theme['radii'] | CSS.BorderBottomLeftRadius>
+    : SystemProp<CSS.BorderBottomLeftRadius>;
+}
+
+export interface FlexboxProps {
+  alignItems?: SystemProp<CSS.AlignItems>;
+  alignContent?: SystemProp<CSS.AlignContent>;
+  justifyItems?: SystemProp<CSS.JustifyItems>;
+  justifyContent?: SystemProp<CSS.JustifyContent>;
+  flexWrap?: SystemProp<CSS.FlexWrap>;
+  flexDirection?: SystemProp<CSS.FlexDirection>;
+  flex?: SystemProp<CSS.Flex>;
+  flexGrow?: SystemProp<CSS.FlexGrow>;
+  flexShrink?: SystemProp<CSS.FlexShrink>;
+  flexBasis?: SystemProp<CSS.FlexBasis>;
+  justifySelf?: SystemProp<CSS.JustifySelf>;
+  alignSelf?: SystemProp<CSS.AlignSelf>;
+  order?: SystemProp<CSS.Order>;
+}
+
+export interface GridProps {
+  gap?: SpaceLookup<CSS.Gap>;
+  gridGap?: SpaceLookup<CSS.GridGap>;
+  gridColumnGap?: SpaceLookup<CSS.GridColumnGap>;
+  gridRowGap?: SpaceLookup<CSS.GridRowGap>;
+  gridRow?: SystemProp<CSS.GridRow>;
+  gridColumn?: SystemProp<CSS.GridColumn>;
+  gridAutoFlow?: SystemProp<CSS.GridAutoFlow>;
+  gridAutoColumns?: SystemProp<CSS.GridAutoColumns>;
+  gridAutoRows?: SystemProp<CSS.GridAutoRows>;
+  gridTemplateColumns?: SystemProp<CSS.GridTemplateColumns>;
+  gridTemplateRows?: SystemProp<CSS.GridTemplateRows>;
+  gridTemplateAreas?: SystemProp<CSS.GridTemplateAreas>;
+  gridArea?: SystemProp<CSS.GridArea>;
+}
+
+export interface LayoutProps {
+  height?: SizeLookup<CSS.Height>;
+  width?: SizeLookup<CSS.Width>;
+  minWidth?: SizeLookup<CSS.MinWidth>;
+  minHeight?: SizeLookup<CSS.MinHeight>;
+  maxWidth?: SizeLookup<CSS.MaxWidth>;
+  maxHeight?: SizeLookup<CSS.MaxHeight>;
+  size?: SizeLookup<CSS.Width>;
+  overflow?: SystemProp<CSS.Overflow>;
+  overflowX?: SystemProp<CSS.OverflowX>;
+  overflowY?: SystemProp<CSS.OverflowY>;
+  display?: SystemProp<CSS.Display>;
+  verticalAlign?: SystemProp<CSS.VerticalAlign>;
+}
+
+export interface PositionProps {
+  position?: SystemProp<CSS.Position>;
+  top?: SizeLookup<CSS.Top>;
+  left?: SizeLookup<CSS.Left>;
+  right?: SizeLookup<CSS.Right>;
+  bottom?: SizeLookup<CSS.Bottom>;
+  zIndex?: Theme['zIndices'] extends object
+    ? SystemProp<keyof Theme['zIndices'] | CSS.ZIndex>
+    : SystemProp<CSS.ZIndex>;
+}
+
+export interface ShadowProps {
+  boxShadow?: Theme['shadows'] extends object
+    ? SystemProp<keyof Theme['shadows'] | CSS.BoxShadow>
+    : SystemProp<CSS.BoxShadow>;
+  textShadow?: Theme['shadows'] extends object
+    ? SystemProp<keyof Theme['shadows'] | CSS.TextShadow>
+    : SystemProp<CSS.TextShadow>;
+}
+
+export interface TypographyProps {
+  fontFamily?: Theme['fonts'] extends object
+    ? SystemProp<keyof Theme['fonts'] | CSS.FontFamily>
+    : SystemProp<CSS.FontFamily>;
+  fontSize?: Theme['fontSizes'] extends object
+    ? SystemProp<keyof Theme['fontSizes'] | CSS.FontSize>
+    : SystemProp<CSS.FontSize>;
+  fontWeight?: Theme['fontWeights'] extends object
+    ? SystemProp<keyof Theme['fontWeights'] | CSS.FontWeight>
+    : SystemProp<CSS.FontWeight>;
+  fontStyle?: SystemProp<CSS.FontStyle>;
+  lineHeight?: Theme['lineHeights'] extends object
+    ? SystemProp<keyof Theme['lineHeights'] | CSS.LineHeight>
+    : SystemProp<CSS.LineHeight>;
+  letterSpacing?: Theme['letterSpacings'] extends object
+    ? SystemProp<keyof Theme['letterSpacings'] | CSS.LetterSpacing>
+    : SystemProp<CSS.LetterSpacing>;
+  textAlign?: SystemProp<CSS.TextAlign>;
+}
+
+export interface AllSystemProps
+  extends ColorProps,
+    SpaceProps,
+    BorderProps,
+    TypographyProps,
+    LayoutProps,
+    ShadowProps,
+    PositionProps,
+    GridProps,
+    FlexboxProps {}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

5224

increased by1.83%

Worsened metrics

Total package byte prevSize

340166

decreased by-4.94%

No dependency changes