Inspired by styled-system, a responsive, theme-based style props for building design systems with React. 

roginfarrer

system-props

import { Property as P, Properties as CSSProperties, Color, Paint } from './css-types';

export declare type KeyOf<T extends []> = Exclude<keyof T, KeysOfArray>;

declare type ThemeBreakpointKey = Theme['breakpoints'] extends object ? KeyOf<Theme['breakpoints']> : never;

export declare type ResponsiveObject<T> = {

    [K in ThemeBreakpointKey | 'all']?: T;

export declare type ResponsiveArray<T> = Array<T | null>;

export declare type ResponsiveValue<T> = ResponsiveArray<T> | ResponsiveObject<T>;

export declare type SystemProp<T> = T | ResponsiveValue<T> | ((theme: Theme) => T | ResponsiveValue<T>);

export declare type PrefixOptions = 'all' | 'prefix' | 'noprefix';

export declare type PrefixDefault = 'prefix';

declare type ScaleLookup<Token extends TokenScales, TTheme extends Theme = Theme> = TTheme[Token] extends object ? KeyOf<TTheme[Token]> : TTheme[Token] extends [] ? KeyOf<TTheme[Token]> : never;

declare type ScaleLookup<Token extends TokenScales, TTheme extends Theme = Theme> = TTheme[Token] extends Array<string | number> ? KeyOf<TTheme[Token]> & TTheme[Token][number] : TTheme[Token] extends object ? KeyOf<TTheme[Token]> : never;

export declare type PrefixToken<Token extends TokenScales, PrefixOption extends PrefixOptions, TTheme extends Theme = Theme> = PrefixOption extends 'all' ? ScaleLookup<Token, TTheme> | `$${(number | string) & ScaleLookup<Token, TTheme>}` : PrefixOption extends 'prefix' ? `$${(number | 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>;

    (value: string | number, scale: string, props: Props, cache?: Cache): {};

    (obj?: any, path?: any, fallback?: any): any;

    (propertyConfig: PropertyConfig): SystemConfig;

    ({ path, object, props, strict, get, }: {

export declare type MaybeCSSProperty = keyof CSSProperties | (string & {});

    properties?: Array<MaybeCSSProperty>;

    defaultScale?: Array<string | number>;

    tokenPrefix?: 'prefix' | 'noprefix' | 'all';

    [key: string]: true | PropertyConfig;

    breakpoints?: Record<string, string> | string[];

    [x: string]: SomeObject | string | number | ((x: Theme) => string | number);

export interface ColorProps<PrefixOption extends PrefixOptions = PrefixDefault> {

    color?: MaybeToken<Color, PrefixOption, 'colors'>;

    textColor?: MaybeToken<Color, PrefixOption, 'colors'>;

    backgroundColor?: MaybeToken<Color, PrefixOption, 'colors'>;

    bg?: MaybeToken<Color, PrefixOption, 'colors'>;

    fill?: MaybeToken<Paint, PrefixOption, 'colors'>;

    stroke?: MaybeToken<Paint, PrefixOption, 'colors'>;

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<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<PrefixOption extends PrefixOptions = PrefixDefault> extends MarginProps<PrefixOption>, PaddingProps<PrefixOption> {

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<Color, PrefixOption, 'colors'>;

    borderTopColor?: MaybeToken<Color, PrefixOption, 'colors'>;

    borderRightColor?: MaybeToken<Color, PrefixOption, 'colors'>;

  "description": "Inspired by styled-system, a responsive, theme-based style props for building design systems with React.",

  "homepage": "https://github.com/system-props/system-props#readme",

    "url": "https://github.com/system-props/system-props/issues"

  "repository": "github:system-props/system-props",

    "eslint-plugin-no-only-tests": "^2.4.0",

    "lint:examples": "tsdx lint examples/styled-components/{index,Box}.tsx",

    "start-sc": "yarn --cwd ./examples/styled-components start",

    "clean": "rm -rf node_modules && rm -rf examples/**/node_modules && rm -rf dist",

    "registry": "https://registry.yarnpkg.com"

    "**/@typescript-eslint/eslint-plugin": "^4.6.1",

    "**/@typescript-eslint/parser": "^4.6.1"

export type KeyOf<T extends []> = Exclude<keyof T, KeysOfArray>;

type ThemeBreakpointKey = Theme['breakpoints'] extends object

export type ResponsiveArray<T> = Array<T | null>;

export type ResponsiveValue<T> = ResponsiveArray<T> | ResponsiveObject<T>;

  | ((theme: Theme) => T | ResponsiveValue<T>);

export type PrefixOptions = 'all' | 'prefix' | 'noprefix';

> = TTheme[Token] extends Array<string | number>

  ? KeyOf<TTheme[Token]> & TTheme[Token][number]

      | `$${(number | string) & ScaleLookup<Token, TTheme>}`

  ? `$${(number | string) & ScaleLookup<Token, TTheme>}`

  PrefixOption extends PrefixOptions = PrefixDefault,

  Token extends TokenScales | null = null

  ? SystemProp<PrefixToken<Token, PrefixOption> | CSSProperty>

  (value: string | number, scale: string, props: Props, cache?: Cache): {};

  (obj?: any, path?: any, fallback?: any): any;

  (propertyConfig: PropertyConfig): SystemConfig;

export type MaybeCSSProperty = keyof CSSProperties | (string & {});

  tokenPrefix?: 'prefix' | 'noprefix' | 'all';

  breakpoints?: Record<string, string> | string[];

  [x: string]: SomeObject | string | number | ((x: Theme) => string | number);

  PrefixOption extends PrefixOptions = PrefixDefault

  color?: MaybeToken<Color, PrefixOption, 'colors'>;

  textColor?: MaybeToken<Color, PrefixOption, 'colors'>;

  backgroundColor?: MaybeToken<Color, PrefixOption, 'colors'>;

  bg?: MaybeToken<Color, PrefixOption, 'colors'>;

  fill?: MaybeToken<Paint, PrefixOption, 'colors'>;

  stroke?: MaybeToken<Paint, PrefixOption, 'colors'>;

  margin?: MaybeToken<P.Margin, PrefixOption, 'space'>;

		{
		"name": "system-props",
		"version": "0.19.0-0",
		"version": "0.19.0-1",
		"description": "Inspired by styled-system, a responsive, theme-based style props for building design systems with React.",
		@@ -5,0 +5,0 @@ "author": "Rogin Farrer",

New alerts

Fixed alerts

Improved metrics

Worsened metrics

		@@ -17,3 +17,3 @@ import { Property as P, Properties as CSSProperties, Color, Paint } from './css-types';
		export declare type PrefixDefault = 'prefix';
		declare type ScaleLookup<Token extends TokenScales, TTheme extends Theme = Theme> = TTheme[Token] extends object ? KeyOf<TTheme[Token]> : TTheme[Token] extends [] ? KeyOf<TTheme[Token]> : never;
		declare type ScaleLookup<Token extends TokenScales, TTheme extends Theme = Theme> = TTheme[Token] extends Array<string \| number> ? KeyOf<TTheme[Token]> & TTheme[Token][number] : TTheme[Token] extends object ? KeyOf<TTheme[Token]> : never;
		export declare type PrefixToken<Token extends TokenScales, PrefixOption extends PrefixOptions, TTheme extends Theme = Theme> = PrefixOption extends 'all' ? ScaleLookup<Token, TTheme> \| `$${(number \| string) & ScaleLookup<Token, TTheme>}` : PrefixOption extends 'prefix' ? `$${(number \| string) & ScaleLookup<Token, TTheme>}` : PrefixOption extends 'noprefix' ? ScaleLookup<Token, TTheme> : never;
		@@ -20,0 +20,0 @@ 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>;

		@@ -57,6 +57,6 @@ import {
		TTheme extends Theme = Theme
		> = TTheme[Token] extends object
		> = TTheme[Token] extends Array<string \| number>
		? KeyOf<TTheme[Token]> & TTheme[Token][number]
		: TTheme[Token] extends object
		? KeyOf<TTheme[Token]>
		: TTheme[Token] extends []
		? KeyOf<TTheme[Token]>
		: never;
		@@ -63,0 +63,0 @@