Typings for @styled-stystem/css

index.d.ts

import * as CSS from 'csstype';

// System
// ---------------

/**
 * Aliases for defining spacing via system props.
 * See: https://styled-system.com/api#space
 */
export type SpaceAliases =
  | 'm'
  | 'mt'
  | 'mr'
  | 'mb'
  | 'ml'
  | 'mx'
  | 'marginX'
  | 'my'
  | 'marginY'
  | 'p'
  | 'pt'
  | 'pr'
  | 'pb'
  | 'pl'
  | 'px'
  | 'paddingX'
  | 'py'
  | 'paddingY';

export type SpaceProps = { [Key in SpaceAliases]?: number | string };

/**
 * Supported system properties that will be transformed to their corresponding
 * CSS property and value.
 */
export type SystemProps = {
  bg?: CSS.ColorProperty;
} & SpaceProps;

/**
 * All non-vendor-prefixed CSS properties.
 *
 * Note: We need to allow `number` because they are converted by CSS-in-JS libraries
 *       to pixels. We need to allow `string` for properties like `letterSpacing`.
 */
export type CSSProperties = CSS.StandardProperties<number | string> &
  CSS.SvgProperties<number | string>;

/**
 * The `css` function accepts arrays as values for mobile-first responsive styles.
 * Note that this extends to non-theme values also. For example `display=['none', 'block']`
 * will also works.
 *
 * For more information see: https://styled-system.com/responsive-styles
 */
export type ResponsiveStyleValue<T> = T | T[];
export type ResponsiveStyleObject<T> = {
  [Key in keyof T]?: ResponsiveStyleValue<T[Key]>
};

/**
 * The `SystemStyleObject` extends [style objes](https://emotion.sh/docs/object-styles)
 * such that properties that are part of the `Theme` will be transformed to
 * their corresponding values. Other valid CSS properties are also allowed and will
 * only be "responsivied" if the value is an array.
 */
export type SystemStyleObject = ResponsiveStyleObject<CSSProperties> &
  { [Key in CSS.SimplePseudos]?: ResponsiveStyleObject<CSSProperties> } &
  { [Key in keyof SystemProps]?: ResponsiveStyleValue<SystemProps[Key]> };

// Theme
// ---------------

/**
 * `styled-system` supports arrays or nested objects as theme values.
 */
export type ThemeValue<T> =
  | T[]
  | {
      [name: string]: T | ThemeValue<T>;
    };

export type ThemeVariants = {
  [variant: string]: ThemeValue<SystemStyleObject>;
};

/**
 * Supported properties that will be transformed to their corresponding
 * CSS property and value. See https://styled-system.com/css#theme-keys
 *
 * It is also possible to add variants. Similiar to this
 * https://styled-system.com/variants
 */
export type Theme<Variants extends string = never> = {
  breakpoints?: string[] | number[] | object;
  colors?: ThemeValue<CSS.ColorProperty>;
  space?: ThemeValue<number | string>;
  fonts?: ThemeValue<CSS.FontFamilyProperty>;
  fontSizes?: ThemeValue<CSS.FontSizeProperty<number>>;
  fontWeights?: ThemeValue<CSS.FontWeightProperty>;
  lineHeights?: ThemeValue<CSS.LineHeightProperty>;
  letterSpacings?: ThemeValue<CSS.LetterSpacingProperty>;
  borders?: ThemeValue<CSS.BorderProperty<{}>>;
  borderWidths?: ThemeValue<CSS.BorderWidthProperty<{}>>;
  borderStyles?: ThemeValue<CSS.LineStyle>;
  radii?: ThemeValue<CSS.BorderRadiusProperty<{}>>;
  shadows?: ThemeValue<CSS.BoxShadowProperty>;
  zIndices?: ThemeValue<CSS.ZIndexProperty>;
  sizes?: ThemeValue<CSS.HeightProperty<{}> | CSS.WidthProperty<{}>>;
} & { [variant in Variants]: ThemeValue<SystemStyleObject> };

// `css` function
// ---------------
export type SystemInput = SystemStyleObject & { variant?: string };

/**
 * Transforms `input` to a style object that can be processed by CSS-in-JS
 * libraries. Note that this function should be used with the [css prop](https://emotion.sh/docs/css-prop).
 *
 * If you're using variants in your theme, you can access them by using the `variant`
 * property. The value of the property has to correspond to a path of your `Theme`.
 */
const css = (input?: SystemInput) => (props?: object) => CSS.Properties;
export default css;