diff --git a/types/styled-system/dist/mixed.d.ts b/types/styled-system/dist/mixed.d.ts deleted file mode 100644 index 25f115aa55..0000000000 --- a/types/styled-system/dist/mixed.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -export interface MixedProps { - key?: any; - // Defaults to "variant" - prop?: string; -} - -export function mixed(...args: any[]): any; diff --git a/types/styled-system/dist/space.d.ts b/types/styled-system/dist/space.d.ts deleted file mode 100644 index 9632ed7e45..0000000000 --- a/types/styled-system/dist/space.d.ts +++ /dev/null @@ -1,46 +0,0 @@ -import * as CSS from 'csstype'; -export type TLengthStyledSystem = string | 0 | number; -export type ResponsiveValue = T | Array; - -/** - * Converts shorthand margin and padding props to margin and padding CSS declarations - * - * - Numbers from 0-4 (or the length of theme.space) are converted to values on the spacing scale. - * - Negative values can be used for negative margins. - * - Numbers greater than the length of the theme.space array are converted to raw pixel values. - * - String values are passed as raw CSS values. - * - Array values are converted into responsive values. - */ - -export interface SpaceProps { - /** Margin on top, left, bottom and right */ - m?: ResponsiveValue>; - /** Margin for the top */ - mt?: ResponsiveValue>; - /** Margin for the right */ - mr?: ResponsiveValue>; - /** Margin for the bottom */ - mb?: ResponsiveValue>; - /** Margin for the left */ - ml?: ResponsiveValue>; - /** Margin for the left and right */ - mx?: ResponsiveValue>; - /** Margin for the top and bottom */ - my?: ResponsiveValue>; - /** Padding on top, left, bottom and right */ - p?: ResponsiveValue>; - /** Padding for the top */ - pt?: ResponsiveValue>; - /** Padding for the right */ - pr?: ResponsiveValue>; - /** Padding for the bottom */ - pb?: ResponsiveValue>; - /** Padding for the left */ - pl?: ResponsiveValue>; - /** Padding for the left and right */ - px?: ResponsiveValue>; - /** Padding for the top and bottom */ - py?: ResponsiveValue>; -} - -export function space(...args: any[]): any; diff --git a/types/styled-system/dist/styles.d.ts b/types/styled-system/dist/styles.d.ts deleted file mode 100644 index 59f8077ec9..0000000000 --- a/types/styled-system/dist/styles.d.ts +++ /dev/null @@ -1,836 +0,0 @@ -import * as CSS from 'csstype'; -import { ResponsiveValue, TLengthStyledSystem } from './space'; - -export * from './space'; - -export interface BaseTheme { - breakpoints?: number[]; - space?: number[]; - fontSizes?: number[]; - colors?: { - [name: string]: string; - }; -} - -/** - * Font Size - */ - -export interface FontSizeProps { - /** - * The fontSize utility parses a component's `fontSize` prop and converts it into a CSS font-size declaration. - * - * - Numbers from 0-8 (or `theme.fontSizes.length`) are converted to values on the [font size scale](#default-theme). - * - Numbers greater than `theme.fontSizes.length` are converted to raw pixel values. - * - String values are passed as raw CSS values. - * - And array values are converted into responsive values. - * - */ - fontSize?: ResponsiveValue>; -} - -export function fontSize(...args: any[]): any; - -/** - * Color - */ - -export interface TextColorProps { - /** - * The color utility parses a component's `color` and `bg` props and converts them into CSS declarations. - * By default the raw value of the prop is returned. - * - * Color palettes can be configured with the ThemeProvider to use keys as prop values, with support for dot notation. - * Array values are converted into responsive values. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/color) - */ - color?: ResponsiveValue; -} - -export function textColor(...args: any[]): any; - -export interface BgColorProps { - /** - * The color utility parses a component's `color` and `bg` props and converts them into CSS declarations. - * By default the raw value of the prop is returned. - * - * Color palettes can be configured with the ThemeProvider to use keys as prop values, with support for dot notation. - * Array values are converted into responsive values. - * - * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) - */ - bg?: ResponsiveValue>; -} - -export function bgColor(...args: any[]): any; - -export interface ColorProps extends TextColorProps, BgColorProps {} - -export function color(...args: any[]): any; - -/** - * Typography - */ -export interface FontFamilyProps { - fontFamily?: ResponsiveValue; -} -export function fontFamily(...args: any[]): any; - -export interface TextAlignProps { - /** - * The text-align CSS property specifies the horizontal alignment of an inline or table-cell box. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) - */ - textAlign?: ResponsiveValue; -} - -export function textAlign(...args: any[]): any; - -export interface LineHeightProps { - /** - * The line-height CSS property sets the amount of space used for lines, such as in text. On block-level elements, - * it specifies the minimum height of line boxes within the element. - * - * On non-replaced inline elements, it specifies the height that is used to calculate line box height. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) - */ - lineHeight?: ResponsiveValue>; -} -export function lineHeight(...args: any[]): any; - -export interface FontWeightProps { - /** - * The font-weight CSS property specifies the weight (or boldness) of the font. - * - * The font weights available to you will depend on the font-family you are using. Some fonts are only available in normal and bold. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) - */ - fontWeight?: ResponsiveValue; -} - -export function fontWeight(...args: any[]): any; - -export interface FontStyleProps { - /** - * The font-style CSS property specifies whether a font should be styled with a normal, italic, - * or oblique face from its font-family. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style) - */ - fontStyle?: ResponsiveValue; -} -export function fontStyle(...args: any[]): any; - -export interface LetterSpacingProps { - /** - * The letter-spacing CSS property sets the spacing behavior between text characters. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) - */ - letterSpacing?: ResponsiveValue>; -} -export function letterSpacing(...args: any[]): any; - -/** - * Layout - */ - -export interface DisplayProps { - /** - * The display CSS property defines the display type of an element, which consists of the two basic qualities - * of how an element generates boxes — the outer display type defining how the box participates in flow layout, - * and the inner display type defining how the children of the box are laid out. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/display) - */ - display?: ResponsiveValue; -} - -export function display(...args: any[]): any; - -export interface MaxWidthProps { - /** - * The max-width CSS property sets the maximum width of an element. - * It prevents the used value of the width property from becoming larger than the value specified by max-width. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) - */ - maxWidth?: ResponsiveValue>; -} - -export function maxWidth(...args: any[]): any; - -export interface MinWidthProps { - /** - * The min-width CSS property sets the minimum width of an element. - * It prevents the used value of the width property from becoming smaller than the value specified for min-width. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) - */ - minWidth?: ResponsiveValue>; -} - -export function minWidth(...args: any[]): any; - -export interface WidthProps { - /** - * The width utility parses a component's `width` prop and converts it into a CSS width declaration. - * - * - Numbers from 0-1 are converted to percentage widths. - * - Numbers greater than 1 are converted to pixel values. - * - String values are passed as raw CSS values. - * - And arrays are converted to responsive width styles. - */ - width?: ResponsiveValue>; -} - -export function width(...args: any[]): any; - -export interface MaxHeightProps { - /** - * The max-height CSS property sets the maximum height of an element. It prevents the used value of the height - * property from becoming larger than the value specified for max-height. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) - */ - maxHeight?: ResponsiveValue>; -} - -export function maxHeight(...args: any[]): any; - -export interface MinHeightProps { - /** - * The min-height CSS property sets the minimum height of an element. It prevents the used value of the height - * property from becoming smaller than the value specified for min-height. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/display) - */ - minHeight?: ResponsiveValue>; -} - -export function minHeight(...args: any[]): any; - -export interface HeightProps { - /** - * The height CSS property specifies the height of an element. By default, the property defines the height of the - * content area. If box-sizing is set to border-box, however, it instead determines the height of the border area. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/height) - */ - height?: ResponsiveValue>; -} - -export function height(...args: any[]): any; - -// TODO: Document, I couldn't find any info on these two properties... - -export interface SizeWidthProps { - size?: ResponsiveValue>; -} - -export function sizeWidth(...args: any[]): any; - -export interface SizeHeightProps { - size?: ResponsiveValue>; -} - -export function sizeHeight(...args: any[]): any; - -export interface SizeProps extends SizeHeightProps, SizeWidthProps {} - -export function size(...args: any[]): any; - -export interface RatioProps { - /** - * The ration is height: 0 & paddingBottom - */ - ratio?: ResponsiveValue; -} - -export function ratio(...args: any[]): any; - -export interface VerticalAlignProps { - /** - * The vertical-align CSS property specifies sets vertical alignment of an inline or table-cell box. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) - */ - verticalAlign?: ResponsiveValue>; -} - -export function verticalAlign(...args: any[]): any; - -/** - * Flexbox - */ - -export interface AlignItemsProps { - /** - * The CSS align-items property sets the align-self value on all direct children as a group. The align-self - * property sets the alignment of an item within its containing block. - * - * In Flexbox it controls the alignment of items on the Cross Axis, in Grid Layout it controls the alignment - * of items on the Block Axis within their grid area. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) - */ - alignItems?: ResponsiveValue; -} - -export function alignItems(...args: any[]): any; - -export interface AlignContentProps { - /** - * The CSS align-content property sets how the browser distributes space between and around content items - * along the cross-axis of a flexbox container, and the main-axis of a grid container. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) - */ - alignContent?: ResponsiveValue; -} - -export function alignContent(...args: any[]): any; - -export interface JustifyItemsProps { - /** - * The CSS justify-items property defines the default justify-self for all items of the box, giving them all - * a default way of justifying each box along the appropriate axis. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items) - */ - justifyItems?: ResponsiveValue; -} - -export interface JustifyContentProps { - /** - * The CSS justify-content property defines how the browser distributes space between and around content items - * along the main-axis of a flex container, and the inline axis of a grid container. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) - */ - justifyContent?: ResponsiveValue; -} - -export function justifyContent(...args: any[]): any; - -export interface FlexWrapProps { - /** - * The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. - * If wrapping is allowed, it sets the direction that lines are stacked. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) - */ - flexWrap?: ResponsiveValue; -} - -export function flexWrap(...args: any[]): any; - -export interface FlexBasisProps { - // TODO: The FlexBasisValue currently really only exists for documentation - // purposes, because flex-basis also accepts `Nem` and `Npx` strings. - // Not sure there’s a way to still have the union values show up as - // auto-completion results. - flexBasis?: ResponsiveValue>; -} - -export function flexBasis(...args: any[]): any; - -export interface FlexDirectionProps { - /** - * The flex-direction CSS property specifies how flex items are placed in the flex container defining the main - * axis and the direction (normal or reversed). - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) - */ - flexDirection?: ResponsiveValue; -} - -export function flexDirection(...args: any[]): any; - -export interface FlexProps { - /** - * The flex CSS property specifies how a flex item will grow or shrink so as to fit the space available in - * its flex container. This is a shorthand property that sets flex-grow, flex-shrink, and flex-basis. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) - */ - flex?: ResponsiveValue>; -} - -export function flex(...args: any[]): any; - -export interface JustifySelfProps { - /** - * The CSS justify-self property set the way a box is justified inside its alignment container along - * the appropriate axis. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self) - */ - justifySelf?: ResponsiveValue; -} - -export function justifySelf(...args: any[]): any; - -export interface AlignSelfProps { - /** - * The align-self CSS property aligns flex items of the current flex line overriding the align-items value. - * - * If any of the item's cross-axis margin is set to auto, then align-self is ignored. In Grid layout align-self - * aligns the item inside the grid area. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) - */ - alignSelf?: ResponsiveValue; -} - -export function alignSelf(...args: any[]): any; - -export interface OrderProps { - /** - * The order CSS property sets the order to lay out an item in a flex or grid container. Items in a container - * are sorted by ascending order value and then by their source code order. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/order) - */ - order?: ResponsiveValue; -} - -export function order(...args: any[]): any; - -/** - * Grid Layout - */ - -export interface GridGapProps { - /** - * The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap - * and column-gap. - * - * @deprecated use gap - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) - */ - gridGap?: ResponsiveValue>; -} - -export function gridGap(...args: any[]): any; - -export interface GridColumnGapProps { - /** - * The column-gap CSS property sets the size of the gap (gutter) between an element's columns. - * - * @deprecated use column-gap - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) - */ - gridColumnGap?: ResponsiveValue>; -} - -export function gridColumnGap(...args: any[]): any; - -export interface GridRowGapProps { - /** - * The row-gap CSS property sets the size of the gap (gutter) between an element's rows. - * - * @deprecated use row-gap - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) - */ - gridRowGap?: ResponsiveValue>; -} - -export function gridRowGap(...args: any[]): any; - -export interface GridColumnProps { - /** - * The grid-column CSS property is a shorthand property for grid-column-start and grid-column-end specifying - * a grid item's size and location within the grid column by contributing a line, a span, or nothing (automatic) - * to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column) - */ - gridColumn?: ResponsiveValue; -} - -export function gridColumn(...args: any[]): any; - -export interface GridRowProps { - /** - * The grid-row CSS property is a shorthand property for grid-row-start and grid-row-end specifying a grid item’s - * size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid - * placement, thereby specifying the inline-start and inline-end edge of its grid area. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row) - */ - gridRow?: ResponsiveValue; -} - -export function gridRow(...args: any[]): any; - -export interface GridAutoFlowProps { - /** - * The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly - * how auto-placed items get flowed into the grid. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) - */ - gridAutoFlow?: ResponsiveValue; -} - -export function gridAutoFlow(...args: any[]): any; - -export interface GridAutoColumnsProps { - /** - * The grid-auto-columns CSS property specifies the size of an implicitly-created grid column track. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns) - */ - gridAutoColumns?: ResponsiveValue>; -} - -export function gridAutoColumns(...args: any[]): any; - -export interface GridAutoRowsProps { - /** - * The grid-auto-rows CSS property specifies the size of an implicitly-created grid row track. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows) - */ - gridAutoRows?: ResponsiveValue>; -} - -export function gridAutoRows(...args: any[]): any; - -export interface GridTemplatesColumnsProps { - /** - * The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) - */ - gridTemplateColumns?: ResponsiveValue>; -} - -export function gridTemplateColumns(...args: any[]): any; - -export interface GridTemplatesRowsProps { - /** - * The grid-template-rows CSS property defines the line names and track sizing functions of the grid rows. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-template-rows) - */ - gridTemplateRows?: ResponsiveValue>; -} - -export function gridTemplateRows(...args: any[]): any; - -export interface GridTemplatesAreasProps { - /** - * The grid-template-areas CSS property specifies named grid areas. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas) - */ - gridTemplateAreas?: ResponsiveValue; -} - -export function gridTemplateAreas(...args: any[]): any; - -export interface GridAreaProps { - /** - * The grid-area CSS property is a shorthand property for grid-row-start, grid-column-start, grid-row-end - * and grid-column-end, specifying a grid item’s size and location within the grid row by contributing a line, - * a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area) - */ - gridArea?: ResponsiveValue; -} - -export function gridArea(...args: any[]): any; - -/** - * Borders - */ - -export interface BorderProps { - /** - * The border CSS property sets an element's border. It's a shorthand for border-width, border-style, - * and border-color. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border) - */ - border?: ResponsiveValue>; -} - -export function border(...args: any[]): any; - -export interface BorderTopProps { - /** - * The border-top CSS property is a shorthand that sets the values of border-top-width, border-top-style, - * and border-top-color. These properties describe an element's top border. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top) - */ - borderTop?: ResponsiveValue>; -} - -export function borderTop(...args: any[]): any; - -export interface BorderRightProps { - /** - * The border-right CSS property is a shorthand that sets border-right-width, border-right-style, - * and border-right-color. These properties set an element's right border. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right) - */ - borderRight?: ResponsiveValue>; -} - -export function borderRight(...args: any[]): any; - -export interface BorderBottomProps { - /** - * The border-bottom CSS property sets an element's bottom border. It's a shorthand for - * border-bottom-width, border-bottom-style and border-bottom-color. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom) - */ - borderBottom?: ResponsiveValue>; -} - -export function borderBottom(...args: any[]): any; - -export interface BorderLeftProps { - /** - * The border-left CSS property is a shorthand that sets the values of border-left-width, - * border-left-style, and border-left-color. These properties describe an element's left border. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left) - */ - borderLeft?: ResponsiveValue>; -} - -export function borderLeft(...args: any[]): any; - -export interface BordersProps extends BorderTopProps, BorderRightProps, BorderBottomProps, BorderLeftProps {} - -export function borders(...args: any[]): any; - -export interface BorderColorProps { - /** - * The border-color shorthand CSS property sets the color of all sides of an element's border. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color) - */ - borderColor?: ResponsiveValue; -} - -export function borderColor(...args: any[]): any; - -export interface BorderRadiusProps { - /** - * The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single - * radius to make circular corners, or two radii to make elliptical corners. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) - */ - borderRadius?: ResponsiveValue>; -} - -export function borderRadius(...args: any[]): any; - -export interface BoxShadowProps { - /** - * The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects - * separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread - * radii, and color. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) - */ - boxShadow?: ResponsiveValue; -} - -export function boxShadow(...arg: any[]): any; - -export interface OpacityProps { - /** - * The opacity CSS property sets the transparency of an element or the degree to which content - * behind an element is visible. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) - */ - opacity?: ResponsiveValue; -} - -export function opacity(...arg: any[]): any; - -export interface OverflowProps { - /** - * The overflow CSS property sets what to do when an element's content is too big to fit in its block - * formatting context. It is a shorthand for overflow-x and overflow-y. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) - */ - overflow?: ResponsiveValue; -} - -export function overflow(...arg: any[]): any; -/** - * Background - */ - -export interface BackgroundProps { - /** - * The background shorthand CSS property sets all background style properties at once, - * such as color, image, origin and size, repeat method, and others. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/background) - */ - background?: ResponsiveValue>; -} - -export function background(...args: any[]): any; - -export interface BackgroundImageProps { - /** - * The background-image CSS property sets one or more background images on an element. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) - */ - backgroundImage?: ResponsiveValue; -} - -export function backgroundImage(...args: any[]): any; - -export interface BackgroundSizeProps { - /** - * The background-size CSS property sets the size of the element's background image. The - * image can be left to its natural size, stretched, or constrained to fit the available space. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) - */ - backgroundSize?: ResponsiveValue>; -} - -export function backgroundSize(...args: any[]): any; - -export interface BackgroundPositionProps { - /** - * The background-position CSS property sets the initial position for each background image. The - * position is relative to the position layer set by background-origin. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position) - */ - backgroundPosition?: ResponsiveValue>; -} - -export function backgroundPosition(...args: any[]): any; - -export interface BackgroundRepeatProps { - /** - * The background-repeat CSS property sets how background images are repeated. A background - * image can be repeated along the horizontal and vertical axes, or not repeated at all. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat) - */ - backgroundRepeat?: ResponsiveValue; -} - -export function backgroundRepeat(...args: any[]): any; - -/** - * Position - */ - -export interface PositionProps { - /** - * The position CSS property specifies how an element is positioned in a document. - * The top, right, bottom, and left properties determine the final location of positioned elements. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/position) - */ - position?: ResponsiveValue; -} - -export function position(...args: any[]): any; - -export interface ZIndexProps { - /** - * The z-index CSS property sets the z-order of a positioned element and its descendants or - * flex items. Overlapping elements with a larger z-index cover those with a smaller one. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) - */ - zIndex?: ResponsiveValue; -} - -export function zIndex(...args: any[]): any; - -export interface TopProps { - /** - * The top CSS property participates in specifying the vertical position of a - * positioned element. It has no effect on non-positioned elements. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/top) - */ - top?: ResponsiveValue>; -} - -export function top(...args: any[]): any; - -export interface RightProps { - /** - * The right CSS property participates in specifying the horizontal position of a - * positioned element. It has no effect on non-positioned elements. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) - */ - right?: ResponsiveValue>; -} - -export function right(...args: any[]): any; - -export interface BottomProps { - /** - * The bottom CSS property participates in specifying the vertical position of a - * positioned element. It has no effect on non-positioned elements. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/top) - */ - bottom?: ResponsiveValue>; -} - -export function bottom(...args: any[]): any; - -export interface LeftProps { - /** - * The left CSS property participates in specifying the horizontal position - * of a positioned element. It has no effect on non-positioned elements. - * - * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/left) - */ - left?: ResponsiveValue>; -} - -export function left(...args: any[]): any; - -export interface TextStyleProps { - textStyle?: ResponsiveValue; -} - -export function textStyle(...args: any[]): any; - -export interface ColorStyleProps { - colors?: ResponsiveValue; -} - -export function colorStyle(...args: any[]): any; - -export interface ButtonStyleProps { - variant?: ResponsiveValue; -} - -export function buttonStyle(...args: any[]): any; diff --git a/types/styled-system/dist/util.d.ts b/types/styled-system/dist/util.d.ts deleted file mode 100644 index 445bb81567..0000000000 --- a/types/styled-system/dist/util.d.ts +++ /dev/null @@ -1,26 +0,0 @@ -export const defaultBreakpoints: string[]; -export function is(n: any): boolean; -export function num(n: any): boolean; -export function px(n: any): string; - -export function get(obj: any, ...paths: Array): any; - -export function themeGet(keys: string, fallback?: string): any; -export function cloneFunc(fn: (...args: any[]) => any): (...args: any[]) => any; - -export function merge(a: any, b: any): any; - -export function compose(...funcs: Array<(...args: any[]) => any>): (...args: any[]) => any; - -export function createMediaQuery(n: string): string; - -export interface LowLevelStylefunctionArguments { - prop: string; - cssProperty?: string; - key?: string; - getter?: () => any; - transformValue?: (n: string|number) => any; - scale?: Array; -} - -export function style(args: LowLevelStylefunctionArguments): any; diff --git a/types/styled-system/dist/variant.d.ts b/types/styled-system/dist/variant.d.ts deleted file mode 100644 index 8a3f8b15ec..0000000000 --- a/types/styled-system/dist/variant.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -export interface VariantArgs { - key?: string; - // Defaults to "variant" - prop?: string; -} - -export function variant(props: VariantArgs): (...args: any[]) => any; diff --git a/types/styled-system/index.d.ts b/types/styled-system/index.d.ts index 2511fbb99c..495df8a6d3 100644 --- a/types/styled-system/index.d.ts +++ b/types/styled-system/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for styled-system 3.0 +// Type definitions for styled-system 3.1 // Project: https://github.com/jxnblk/styled-system#readme // Definitions by: Marshall Bowers // Ben McCormick @@ -11,16 +11,935 @@ // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.8 -import * as util from './dist/util'; +import * as CSS from "csstype"; -export { util }; -export { - style, - themeGet, - merge, - compose, -} from './dist/util'; +export const defaultBreakpoints: string[]; +export function is(n: any): boolean; +export function num(n: any): boolean; +export function px(n: any): string; -export * from './dist/styles'; -export * from './dist/variant'; -export * from './dist/mixed'; +export function get(obj: any, ...paths: Array): any; + +export function themeGet(keys: string, fallback?: string): any; +export function cloneFunc(fn: (...args: any[]) => any): (...args: any[]) => any; + +export function merge(a: any, b: any): any; + +export function compose( + ...funcs: Array<(...args: any[]) => any> +): (...args: any[]) => any; + +export function createMediaQuery(n: number | string): string; + +export interface LowLevelStylefunctionArguments { + prop: string; + cssProperty?: string; + key?: string; + getter?: () => any; + transformValue?: (n: string | number) => any; + scale?: Array; +} + +export function style(args: LowLevelStylefunctionArguments): any; + +export type TLengthStyledSystem = string | 0 | number; +export type ResponsiveValue = T | Array; + +/** + * Converts shorthand margin and padding props to margin and padding CSS declarations + * + * - Numbers from 0-4 (or the length of theme.space) are converted to values on the spacing scale. + * - Negative values can be used for negative margins. + * - Numbers greater than the length of the theme.space array are converted to raw pixel values. + * - String values are passed as raw CSS values. + * - Array values are converted into responsive values. + */ + +export interface SpaceProps { + /** Margin on top, left, bottom and right */ + m?: ResponsiveValue>; + /** Margin for the top */ + mt?: ResponsiveValue>; + /** Margin for the right */ + mr?: ResponsiveValue>; + /** Margin for the bottom */ + mb?: ResponsiveValue>; + /** Margin for the left */ + ml?: ResponsiveValue>; + /** Margin for the left and right */ + mx?: ResponsiveValue>; + /** Margin for the top and bottom */ + my?: ResponsiveValue>; + /** Padding on top, left, bottom and right */ + p?: ResponsiveValue>; + /** Padding for the top */ + pt?: ResponsiveValue>; + /** Padding for the right */ + pr?: ResponsiveValue>; + /** Padding for the bottom */ + pb?: ResponsiveValue>; + /** Padding for the left */ + pl?: ResponsiveValue>; + /** Padding for the left and right */ + px?: ResponsiveValue>; + /** Padding for the top and bottom */ + py?: ResponsiveValue>; +} + +export function space(...args: any[]): any; + +export interface VariantArgs { + key?: string; + // Defaults to "variant" + prop?: string; +} + +export function variant(props: VariantArgs): (...args: any[]) => any; + +export interface BaseTheme { + breakpoints?: number[]; + space?: number[]; + fontSizes?: number[]; + colors?: { + [name: string]: string; + }; +} + +/** + * Font Size + */ + +export interface FontSizeProps { + /** + * The fontSize utility parses a component's `fontSize` prop and converts it into a CSS font-size declaration. + * + * - Numbers from 0-8 (or `theme.fontSizes.length`) are converted to values on the [font size scale](#default-theme). + * - Numbers greater than `theme.fontSizes.length` are converted to raw pixel values. + * - String values are passed as raw CSS values. + * - And array values are converted into responsive values. + * + */ + fontSize?: ResponsiveValue>; +} + +export function fontSize(...args: any[]): any; + +/** + * Color + */ + +export interface TextColorProps { + /** + * The color utility parses a component's `color` and `bg` props and converts them into CSS declarations. + * By default the raw value of the prop is returned. + * + * Color palettes can be configured with the ThemeProvider to use keys as prop values, with support for dot notation. + * Array values are converted into responsive values. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/color) + */ + color?: ResponsiveValue; +} + +export function textColor(...args: any[]): any; + +export interface BgColorProps { + /** + * The color utility parses a component's `color` and `bg` props and converts them into CSS declarations. + * By default the raw value of the prop is returned. + * + * Color palettes can be configured with the ThemeProvider to use keys as prop values, with support for dot notation. + * Array values are converted into responsive values. + * + * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) + */ + bg?: ResponsiveValue>; +} + +export function bgColor(...args: any[]): any; + +export interface ColorProps extends TextColorProps, BgColorProps {} + +export function color(...args: any[]): any; + +/** + * Typography + */ +export interface FontFamilyProps { + fontFamily?: ResponsiveValue; +} +export function fontFamily(...args: any[]): any; + +export interface TextAlignProps { + /** + * The text-align CSS property specifies the horizontal alignment of an inline or table-cell box. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) + */ + textAlign?: ResponsiveValue; +} + +export function textAlign(...args: any[]): any; + +export interface LineHeightProps { + /** + * The line-height CSS property sets the amount of space used for lines, such as in text. On block-level elements, + * it specifies the minimum height of line boxes within the element. + * + * On non-replaced inline elements, it specifies the height that is used to calculate line box height. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) + */ + lineHeight?: ResponsiveValue>; +} +export function lineHeight(...args: any[]): any; + +export interface FontWeightProps { + /** + * The font-weight CSS property specifies the weight (or boldness) of the font. + * + * The font weights available to you will depend on the font-family you are using. Some fonts are only available in normal and bold. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) + */ + fontWeight?: ResponsiveValue; +} + +export function fontWeight(...args: any[]): any; + +export interface FontStyleProps { + /** + * The font-style CSS property specifies whether a font should be styled with a normal, italic, + * or oblique face from its font-family. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style) + */ + fontStyle?: ResponsiveValue; +} +export function fontStyle(...args: any[]): any; + +export interface LetterSpacingProps { + /** + * The letter-spacing CSS property sets the spacing behavior between text characters. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) + */ + letterSpacing?: ResponsiveValue>; +} +export function letterSpacing(...args: any[]): any; + +/** + * Layout + */ + +export interface DisplayProps { + /** + * The display CSS property defines the display type of an element, which consists of the two basic qualities + * of how an element generates boxes — the outer display type defining how the box participates in flow layout, + * and the inner display type defining how the children of the box are laid out. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/display) + */ + display?: ResponsiveValue; +} + +export function display(...args: any[]): any; + +export interface MaxWidthProps { + /** + * The max-width CSS property sets the maximum width of an element. + * It prevents the used value of the width property from becoming larger than the value specified by max-width. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) + */ + maxWidth?: ResponsiveValue>; +} + +export function maxWidth(...args: any[]): any; + +export interface MinWidthProps { + /** + * The min-width CSS property sets the minimum width of an element. + * It prevents the used value of the width property from becoming smaller than the value specified for min-width. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) + */ + minWidth?: ResponsiveValue>; +} + +export function minWidth(...args: any[]): any; + +export interface WidthProps { + /** + * The width utility parses a component's `width` prop and converts it into a CSS width declaration. + * + * - Numbers from 0-1 are converted to percentage widths. + * - Numbers greater than 1 are converted to pixel values. + * - String values are passed as raw CSS values. + * - And arrays are converted to responsive width styles. + */ + width?: ResponsiveValue>; +} + +export function width(...args: any[]): any; + +export interface MaxHeightProps { + /** + * The max-height CSS property sets the maximum height of an element. It prevents the used value of the height + * property from becoming larger than the value specified for max-height. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) + */ + maxHeight?: ResponsiveValue>; +} + +export function maxHeight(...args: any[]): any; + +export interface MinHeightProps { + /** + * The min-height CSS property sets the minimum height of an element. It prevents the used value of the height + * property from becoming smaller than the value specified for min-height. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/display) + */ + minHeight?: ResponsiveValue>; +} + +export function minHeight(...args: any[]): any; + +export interface HeightProps { + /** + * The height CSS property specifies the height of an element. By default, the property defines the height of the + * content area. If box-sizing is set to border-box, however, it instead determines the height of the border area. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/height) + */ + height?: ResponsiveValue>; +} + +export function height(...args: any[]): any; + +// TODO: Document, I couldn't find any info on these two properties... + +export interface SizeWidthProps { + size?: ResponsiveValue>; +} + +export function sizeWidth(...args: any[]): any; + +export interface SizeHeightProps { + size?: ResponsiveValue>; +} + +export function sizeHeight(...args: any[]): any; + +export interface SizeProps extends SizeHeightProps, SizeWidthProps {} + +export function size(...args: any[]): any; + +export interface RatioProps { + /** + * The ration is height: 0 & paddingBottom + */ + ratio?: ResponsiveValue; +} + +export function ratio(...args: any[]): any; + +export interface VerticalAlignProps { + /** + * The vertical-align CSS property specifies sets vertical alignment of an inline or table-cell box. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) + */ + verticalAlign?: ResponsiveValue>; +} + +export function verticalAlign(...args: any[]): any; + +/** + * Flexbox + */ + +export interface AlignItemsProps { + /** + * The CSS align-items property sets the align-self value on all direct children as a group. The align-self + * property sets the alignment of an item within its containing block. + * + * In Flexbox it controls the alignment of items on the Cross Axis, in Grid Layout it controls the alignment + * of items on the Block Axis within their grid area. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) + */ + alignItems?: ResponsiveValue; +} + +export function alignItems(...args: any[]): any; + +export interface AlignContentProps { + /** + * The CSS align-content property sets how the browser distributes space between and around content items + * along the cross-axis of a flexbox container, and the main-axis of a grid container. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) + */ + alignContent?: ResponsiveValue; +} + +export function alignContent(...args: any[]): any; + +export interface JustifyItemsProps { + /** + * The CSS justify-items property defines the default justify-self for all items of the box, giving them all + * a default way of justifying each box along the appropriate axis. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items) + */ + justifyItems?: ResponsiveValue; +} + +export interface JustifyContentProps { + /** + * The CSS justify-content property defines how the browser distributes space between and around content items + * along the main-axis of a flex container, and the inline axis of a grid container. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) + */ + justifyContent?: ResponsiveValue; +} + +export function justifyContent(...args: any[]): any; + +export interface FlexWrapProps { + /** + * The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. + * If wrapping is allowed, it sets the direction that lines are stacked. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) + */ + flexWrap?: ResponsiveValue; +} + +export function flexWrap(...args: any[]): any; + +export interface FlexBasisProps { + // TODO: The FlexBasisValue currently really only exists for documentation + // purposes, because flex-basis also accepts `Nem` and `Npx` strings. + // Not sure there’s a way to still have the union values show up as + // auto-completion results. + flexBasis?: ResponsiveValue>; +} + +export function flexBasis(...args: any[]): any; + +export interface FlexDirectionProps { + /** + * The flex-direction CSS property specifies how flex items are placed in the flex container defining the main + * axis and the direction (normal or reversed). + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) + */ + flexDirection?: ResponsiveValue; +} + +export function flexDirection(...args: any[]): any; + +export interface FlexProps { + /** + * The flex CSS property specifies how a flex item will grow or shrink so as to fit the space available in + * its flex container. This is a shorthand property that sets flex-grow, flex-shrink, and flex-basis. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) + */ + flex?: ResponsiveValue>; +} + +export function flex(...args: any[]): any; + +export interface JustifySelfProps { + /** + * The CSS justify-self property set the way a box is justified inside its alignment container along + * the appropriate axis. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self) + */ + justifySelf?: ResponsiveValue; +} + +export function justifySelf(...args: any[]): any; + +export interface AlignSelfProps { + /** + * The align-self CSS property aligns flex items of the current flex line overriding the align-items value. + * + * If any of the item's cross-axis margin is set to auto, then align-self is ignored. In Grid layout align-self + * aligns the item inside the grid area. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) + */ + alignSelf?: ResponsiveValue; +} + +export function alignSelf(...args: any[]): any; + +export interface OrderProps { + /** + * The order CSS property sets the order to lay out an item in a flex or grid container. Items in a container + * are sorted by ascending order value and then by their source code order. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/order) + */ + order?: ResponsiveValue; +} + +export function order(...args: any[]): any; + +/** + * Grid Layout + */ + +export interface GridGapProps { + /** + * The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap + * and column-gap. + * + * @deprecated use gap + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) + */ + gridGap?: ResponsiveValue>; +} + +export function gridGap(...args: any[]): any; + +export interface GridColumnGapProps { + /** + * The column-gap CSS property sets the size of the gap (gutter) between an element's columns. + * + * @deprecated use column-gap + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) + */ + gridColumnGap?: ResponsiveValue>; +} + +export function gridColumnGap(...args: any[]): any; + +export interface GridRowGapProps { + /** + * The row-gap CSS property sets the size of the gap (gutter) between an element's rows. + * + * @deprecated use row-gap + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) + */ + gridRowGap?: ResponsiveValue>; +} + +export function gridRowGap(...args: any[]): any; + +export interface GridColumnProps { + /** + * The grid-column CSS property is a shorthand property for grid-column-start and grid-column-end specifying + * a grid item's size and location within the grid column by contributing a line, a span, or nothing (automatic) + * to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column) + */ + gridColumn?: ResponsiveValue; +} + +export function gridColumn(...args: any[]): any; + +export interface GridRowProps { + /** + * The grid-row CSS property is a shorthand property for grid-row-start and grid-row-end specifying a grid item’s + * size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid + * placement, thereby specifying the inline-start and inline-end edge of its grid area. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row) + */ + gridRow?: ResponsiveValue; +} + +export function gridRow(...args: any[]): any; + +export interface GridAutoFlowProps { + /** + * The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly + * how auto-placed items get flowed into the grid. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) + */ + gridAutoFlow?: ResponsiveValue; +} + +export function gridAutoFlow(...args: any[]): any; + +export interface GridAutoColumnsProps { + /** + * The grid-auto-columns CSS property specifies the size of an implicitly-created grid column track. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns) + */ + gridAutoColumns?: ResponsiveValue>; +} + +export function gridAutoColumns(...args: any[]): any; + +export interface GridAutoRowsProps { + /** + * The grid-auto-rows CSS property specifies the size of an implicitly-created grid row track. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows) + */ + gridAutoRows?: ResponsiveValue>; +} + +export function gridAutoRows(...args: any[]): any; + +export interface GridTemplatesColumnsProps { + /** + * The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) + */ + gridTemplateColumns?: ResponsiveValue< + CSS.GridTemplateColumnsProperty + >; +} + +export function gridTemplateColumns(...args: any[]): any; + +export interface GridTemplatesRowsProps { + /** + * The grid-template-rows CSS property defines the line names and track sizing functions of the grid rows. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-template-rows) + */ + gridTemplateRows?: ResponsiveValue>; +} + +export function gridTemplateRows(...args: any[]): any; + +export interface GridTemplatesAreasProps { + /** + * The grid-template-areas CSS property specifies named grid areas. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas) + */ + gridTemplateAreas?: ResponsiveValue; +} + +export function gridTemplateAreas(...args: any[]): any; + +export interface GridAreaProps { + /** + * The grid-area CSS property is a shorthand property for grid-row-start, grid-column-start, grid-row-end + * and grid-column-end, specifying a grid item’s size and location within the grid row by contributing a line, + * a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area) + */ + gridArea?: ResponsiveValue; +} + +export function gridArea(...args: any[]): any; + +/** + * Borders + */ + +export interface BorderProps { + /** + * The border CSS property sets an element's border. It's a shorthand for border-width, border-style, + * and border-color. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border) + */ + border?: ResponsiveValue>; +} + +export function border(...args: any[]): any; + +export interface BorderTopProps { + /** + * The border-top CSS property is a shorthand that sets the values of border-top-width, border-top-style, + * and border-top-color. These properties describe an element's top border. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top) + */ + borderTop?: ResponsiveValue>; +} + +export function borderTop(...args: any[]): any; + +export interface BorderRightProps { + /** + * The border-right CSS property is a shorthand that sets border-right-width, border-right-style, + * and border-right-color. These properties set an element's right border. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right) + */ + borderRight?: ResponsiveValue>; +} + +export function borderRight(...args: any[]): any; + +export interface BorderBottomProps { + /** + * The border-bottom CSS property sets an element's bottom border. It's a shorthand for + * border-bottom-width, border-bottom-style and border-bottom-color. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom) + */ + borderBottom?: ResponsiveValue>; +} + +export function borderBottom(...args: any[]): any; + +export interface BorderLeftProps { + /** + * The border-left CSS property is a shorthand that sets the values of border-left-width, + * border-left-style, and border-left-color. These properties describe an element's left border. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left) + */ + borderLeft?: ResponsiveValue>; +} + +export function borderLeft(...args: any[]): any; + +export interface BordersProps + extends BorderTopProps, + BorderRightProps, + BorderBottomProps, + BorderLeftProps {} + +export function borders(...args: any[]): any; + +export interface BorderColorProps { + /** + * The border-color shorthand CSS property sets the color of all sides of an element's border. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color) + */ + borderColor?: ResponsiveValue; +} + +export function borderColor(...args: any[]): any; + +export interface BorderRadiusProps { + /** + * The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single + * radius to make circular corners, or two radii to make elliptical corners. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) + */ + borderRadius?: ResponsiveValue>; +} + +export function borderRadius(...args: any[]): any; + +export interface BoxShadowProps { + /** + * The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects + * separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread + * radii, and color. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) + */ + boxShadow?: ResponsiveValue; +} + +export function boxShadow(...arg: any[]): any; + +export interface OpacityProps { + /** + * The opacity CSS property sets the transparency of an element or the degree to which content + * behind an element is visible. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) + */ + opacity?: ResponsiveValue; +} + +export function opacity(...arg: any[]): any; + +export interface OverflowProps { + /** + * The overflow CSS property sets what to do when an element's content is too big to fit in its block + * formatting context. It is a shorthand for overflow-x and overflow-y. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) + */ + overflow?: ResponsiveValue; +} + +export function overflow(...arg: any[]): any; +/** + * Background + */ + +export interface BackgroundProps { + /** + * The background shorthand CSS property sets all background style properties at once, + * such as color, image, origin and size, repeat method, and others. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/background) + */ + background?: ResponsiveValue>; +} + +export function background(...args: any[]): any; + +export interface BackgroundImageProps { + /** + * The background-image CSS property sets one or more background images on an element. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) + */ + backgroundImage?: ResponsiveValue; +} + +export function backgroundImage(...args: any[]): any; + +export interface BackgroundSizeProps { + /** + * The background-size CSS property sets the size of the element's background image. The + * image can be left to its natural size, stretched, or constrained to fit the available space. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) + */ + backgroundSize?: ResponsiveValue>; +} + +export function backgroundSize(...args: any[]): any; + +export interface BackgroundPositionProps { + /** + * The background-position CSS property sets the initial position for each background image. The + * position is relative to the position layer set by background-origin. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position) + */ + backgroundPosition?: ResponsiveValue< + CSS.BackgroundPositionProperty + >; +} + +export function backgroundPosition(...args: any[]): any; + +export interface BackgroundRepeatProps { + /** + * The background-repeat CSS property sets how background images are repeated. A background + * image can be repeated along the horizontal and vertical axes, or not repeated at all. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat) + */ + backgroundRepeat?: ResponsiveValue; +} + +export function backgroundRepeat(...args: any[]): any; + +/** + * Position + */ + +export interface PositionProps { + /** + * The position CSS property specifies how an element is positioned in a document. + * The top, right, bottom, and left properties determine the final location of positioned elements. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/position) + */ + position?: ResponsiveValue; +} + +export function position(...args: any[]): any; + +export interface ZIndexProps { + /** + * The z-index CSS property sets the z-order of a positioned element and its descendants or + * flex items. Overlapping elements with a larger z-index cover those with a smaller one. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) + */ + zIndex?: ResponsiveValue; +} + +export function zIndex(...args: any[]): any; + +export interface TopProps { + /** + * The top CSS property participates in specifying the vertical position of a + * positioned element. It has no effect on non-positioned elements. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/top) + */ + top?: ResponsiveValue>; +} + +export function top(...args: any[]): any; + +export interface RightProps { + /** + * The right CSS property participates in specifying the horizontal position of a + * positioned element. It has no effect on non-positioned elements. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) + */ + right?: ResponsiveValue>; +} + +export function right(...args: any[]): any; + +export interface BottomProps { + /** + * The bottom CSS property participates in specifying the vertical position of a + * positioned element. It has no effect on non-positioned elements. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/top) + */ + bottom?: ResponsiveValue>; +} + +export function bottom(...args: any[]): any; + +export interface LeftProps { + /** + * The left CSS property participates in specifying the horizontal position + * of a positioned element. It has no effect on non-positioned elements. + * + * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/left) + */ + left?: ResponsiveValue>; +} + +export function left(...args: any[]): any; + +export interface TextStyleProps { + textStyle?: ResponsiveValue; +} + +export function textStyle(...args: any[]): any; + +export interface ColorStyleProps { + colors?: ResponsiveValue; +} + +export function colorStyle(...args: any[]): any; + +export interface ButtonStyleProps { + variant?: ResponsiveValue; +} + +export function buttonStyle(...args: any[]): any; + +export interface MixedProps { + key?: any; + // Defaults to "variant" + prop?: string; +} + +export function mixed(...args: any[]): any; diff --git a/types/styled-system/styled-system-tests.tsx b/types/styled-system/styled-system-tests.tsx index 756dd0c039..4608aeebec 100644 --- a/types/styled-system/styled-system-tests.tsx +++ b/types/styled-system/styled-system-tests.tsx @@ -122,12 +122,20 @@ import { ButtonStyleProps, MixedProps, VerticalAlignProps, - verticalAlign + verticalAlign, + px, + createMediaQuery } from "styled-system"; // tslint:disable-next-line:strict-export-declare-modifiers declare const styled: (...props: any[]) => React.ComponentType; +const breakpoints = [480, 960]; + +const breakpointsPx = breakpoints.map(px); + +const mediaQueries = breakpoints.map(createMediaQuery); + const boxStyle = variant({ prop: 'boxStyle', key: 'box',