system-props - npm Package Compare versions

Comparing version 0.9.0 to 0.9.1-0

dist/types.d.ts

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

package.json

 {
   "name": "system-props",
-  "version": "0.9.0",
+  "version": "0.9.1-0",
   "description": "Inspired by styled-system, a responsive, theme-based style props for building design systems with React.",
@@ -45,7 +45,2 @@ "author": "Rogin Farrer",
   "peerDependencies": {},
-  "husky": {
-    "hooks": {
-      "pre-commit": "tsdx lint src"
-    }
-  },
   "prettier": {
@@ -59,3 +54,8 @@ "printWidth": 80,
     "registry": "https://registry.yarnpkg.com"
+  },
+  "resolutions": {
+    "**/typescript": "^4.1.0",
+    "**/@typescript-eslint/eslint-plugin": "^4.6.1",
+    "**/@typescript-eslint/parser": "^4.6.1"
   }
 }

src/core/parseResponsive.ts

@@ -74,3 +74,3 @@ import {
 }) => {
-  const breakpoints = cache.breakpoints as ResponsiveObject<string | number>;
+  const breakpoints = cache.breakpoints as ResponsiveObject<string>;
   let styles = {};
@@ -77,0 +77,0 @@ for (const key in propValue) {

src/types.ts

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

No alert changes

Improved metrics

Total package byte prevSize

341229

increased by0.31%

Lines of code

5290

increased by1.26%

No dependency changes