mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-10-03 22:37:03 +00:00
Merge pull request #26649 from zephraph/styled-system
Add styled-system
This commit is contained in:
Orta
Vendored
+603
@@ -0,0 +1,603 @@
|
||||
// Type definitions for styled-system 2.3
|
||||
// Project: https://github.com/jxnblk/styled-system#readme
|
||||
// Definitions by: Marshall Bowers <https://github.com/maxdeviant>
|
||||
// Ben McCormick <https://github.com/phobon>
|
||||
// Justin Bennett <https://github.com/zephraph>
|
||||
// Christopher Pappas <https://github.com/damassi>
|
||||
// Eloy Durán <https://github.com/alloy>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.6
|
||||
|
||||
/**
|
||||
* Core
|
||||
*/
|
||||
|
||||
export type GlobalStyleValues = "inherit" | "initial" | "unset";
|
||||
|
||||
export interface BaseTheme {
|
||||
breakpoints?: number[];
|
||||
space?: number[];
|
||||
fontSizes?: number[];
|
||||
colors?: {
|
||||
[name: string]: string;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Space
|
||||
*/
|
||||
|
||||
export type ResponsiveValue<T> = T | Array<T | null>;
|
||||
|
||||
export type SpaceValue = number | string;
|
||||
export type ResponsiveSpaceValue = ResponsiveValue<SpaceValue>;
|
||||
|
||||
export interface SpaceProps {
|
||||
m?: ResponsiveSpaceValue;
|
||||
mt?: ResponsiveSpaceValue;
|
||||
mr?: ResponsiveSpaceValue;
|
||||
mb?: ResponsiveSpaceValue;
|
||||
ml?: ResponsiveSpaceValue;
|
||||
mx?: ResponsiveSpaceValue;
|
||||
my?: ResponsiveSpaceValue;
|
||||
p?: ResponsiveSpaceValue;
|
||||
pt?: ResponsiveSpaceValue;
|
||||
pr?: ResponsiveSpaceValue;
|
||||
pb?: ResponsiveSpaceValue;
|
||||
pl?: ResponsiveSpaceValue;
|
||||
px?: ResponsiveSpaceValue;
|
||||
py?: ResponsiveSpaceValue;
|
||||
}
|
||||
|
||||
export function space(...args: any[]): any;
|
||||
|
||||
/**
|
||||
* Width
|
||||
*/
|
||||
|
||||
export type WidthValue = number | string;
|
||||
export type ResponsiveWidthValue = ResponsiveValue<WidthValue>;
|
||||
|
||||
export interface WidthProps {
|
||||
width?: ResponsiveWidthValue;
|
||||
}
|
||||
|
||||
export interface MinWidthProps {
|
||||
minWidth?: ResponsiveWidthValue;
|
||||
}
|
||||
|
||||
export interface MaxWidthProps {
|
||||
maxWidth?: ResponsiveWidthValue;
|
||||
}
|
||||
|
||||
export function width(...args: any[]): any;
|
||||
export function minWidth(...args: any[]): any;
|
||||
export function maxWidth(...args: any[]): any;
|
||||
|
||||
/**
|
||||
* Height
|
||||
*/
|
||||
|
||||
export type HeightValue = number | string;
|
||||
export type ResponsiveHeightValue = ResponsiveValue<HeightValue>;
|
||||
|
||||
export interface HeightProps {
|
||||
height?: ResponsiveHeightValue;
|
||||
}
|
||||
|
||||
export interface MinHeightProps {
|
||||
minHeight?: ResponsiveHeightValue;
|
||||
}
|
||||
|
||||
export interface MaxHeightProps {
|
||||
maxHeight?: ResponsiveHeightValue;
|
||||
}
|
||||
|
||||
export function height(...args: any[]): any;
|
||||
export function minHeight(...args: any[]): any;
|
||||
export function maxHeight(...args: any[]): any;
|
||||
|
||||
/**
|
||||
* Font Size
|
||||
*/
|
||||
|
||||
export type FontSizeValue = number | string;
|
||||
export type ResponsiveFontSizeValue = ResponsiveValue<FontSizeValue>;
|
||||
|
||||
export interface FontSizeProps {
|
||||
fontSize?: ResponsiveFontSizeValue;
|
||||
}
|
||||
|
||||
export function fontSize(...args: any[]): any;
|
||||
|
||||
/**
|
||||
* Color
|
||||
*/
|
||||
export type ColorValue = string;
|
||||
export type ResponsiveColorValue = ResponsiveValue<ColorValue>;
|
||||
|
||||
export interface ColorProps {
|
||||
color?: ResponsiveColorValue;
|
||||
}
|
||||
|
||||
export function color(...args: any[]): any;
|
||||
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
export interface FontFamilyProps {
|
||||
fontFamily?: string;
|
||||
}
|
||||
export function fontFamily(...args: any[]): any;
|
||||
|
||||
export type TextAlignValue =
|
||||
| "left"
|
||||
| "right"
|
||||
| "center"
|
||||
| "justify"
|
||||
| "justify-all"
|
||||
| "start"
|
||||
| "end"
|
||||
| "match-parent";
|
||||
export type ResponsiveTextAlignValue = ResponsiveValue<TextAlignValue>;
|
||||
|
||||
export interface TextAlignProps {
|
||||
textAlign?: ResponsiveTextAlignValue;
|
||||
}
|
||||
|
||||
export function textAlign(...args: any[]): any;
|
||||
|
||||
export type LineHeightValue = number | string;
|
||||
export type ResponsiveLineHeightValue = ResponsiveValue<LineHeightValue>;
|
||||
export interface LineHeightProps {
|
||||
lineHeight?: ResponsiveLineHeightValue;
|
||||
}
|
||||
export function lineHeight(...args: any[]): any;
|
||||
|
||||
export type FontWeightValue =
|
||||
| GlobalStyleValues
|
||||
| "normal"
|
||||
| "bold"
|
||||
| "lighter"
|
||||
| "bolder"
|
||||
| number;
|
||||
|
||||
export interface FontWeightProps {
|
||||
fontWeight?: FontWeightValue;
|
||||
}
|
||||
|
||||
export function fontWeight(...args: any[]): any;
|
||||
|
||||
export type LetterSpacingValue = number | string;
|
||||
export type ResponsiveLetterSpacingValue = ResponsiveValue<LetterSpacingValue>;
|
||||
export interface LetterSpacingProps {
|
||||
letterSpacing?: ResponsiveLetterSpacingValue;
|
||||
}
|
||||
export function letterSpacing(...args: any[]): any;
|
||||
|
||||
/**
|
||||
* Layout
|
||||
*/
|
||||
|
||||
export type DisplayValue =
|
||||
| "inline"
|
||||
| "block"
|
||||
| "contents"
|
||||
| "flex"
|
||||
| "grid"
|
||||
| "inline-block";
|
||||
export type ResponsiveDisplayValue = ResponsiveValue<DisplayValue>;
|
||||
export interface DisplayProps {
|
||||
display?: ResponsiveDisplayValue;
|
||||
}
|
||||
|
||||
export function display(...args: any[]): any;
|
||||
|
||||
export interface SizeProps {
|
||||
size?: ResponsiveWidthValue | ResponsiveHeightValue;
|
||||
}
|
||||
|
||||
export function size(...args: any[]): any;
|
||||
|
||||
export type RatioValue = SpaceValue;
|
||||
|
||||
export interface RatioProps {
|
||||
ratio?: RatioValue;
|
||||
}
|
||||
|
||||
export function ratio(...args: any[]): any;
|
||||
|
||||
/**
|
||||
* Flexbox
|
||||
*/
|
||||
|
||||
export type AlignItemsValue =
|
||||
| "normal"
|
||||
| "stretch"
|
||||
| "center"
|
||||
| "start"
|
||||
| "end"
|
||||
| "flex-start"
|
||||
| "flex-end"
|
||||
| "self-start"
|
||||
| "self-end"
|
||||
| "left"
|
||||
| "right"
|
||||
| "baseline"
|
||||
| "first baseline"
|
||||
| "last baseline"
|
||||
| "safe center"
|
||||
| "unsafe center";
|
||||
export type ResponsiveAlignItemsValue = ResponsiveValue<AlignItemsValue>;
|
||||
|
||||
export interface AlignItemsProps {
|
||||
align?: ResponsiveAlignItemsValue;
|
||||
alignItems?: ResponsiveAlignItemsValue;
|
||||
}
|
||||
|
||||
export function alignItems(...args: any[]): any;
|
||||
|
||||
export type JustifyContentValue =
|
||||
| "center"
|
||||
| "start"
|
||||
| "end"
|
||||
| "flex-start"
|
||||
| "flex-end"
|
||||
| "left"
|
||||
| "right"
|
||||
| "baseline"
|
||||
| "first baseline"
|
||||
| "last baseline"
|
||||
| "space-between"
|
||||
| "space-around"
|
||||
| "space-evenly"
|
||||
| "stretch"
|
||||
| "safe center"
|
||||
| "unsafe center";
|
||||
export type ResponsiveJustifyContentValue = ResponsiveValue<
|
||||
JustifyContentValue
|
||||
>;
|
||||
|
||||
export interface JustifyContentProps {
|
||||
justify?: ResponsiveJustifyContentValue;
|
||||
justifyContent?: ResponsiveJustifyContentValue;
|
||||
}
|
||||
|
||||
export function justifyContent(...args: any[]): any;
|
||||
|
||||
export type FlexWrapValue = true | "nowrap" | "wrap" | "wrap-reverse";
|
||||
|
||||
export interface FlexWrapProps {
|
||||
flexWrap?: FlexWrapValue;
|
||||
}
|
||||
|
||||
export function flexWrap(...args: any[]): any;
|
||||
|
||||
export type FlexDirectionValue =
|
||||
| GlobalStyleValues
|
||||
| "row"
|
||||
| "row-reverse"
|
||||
| "column"
|
||||
| "column-reverse";
|
||||
|
||||
export type ResponsiveFlexDirectionValue = ResponsiveValue<FlexDirectionValue>;
|
||||
|
||||
export interface FlexDirectionProps {
|
||||
flexDirection?: ResponsiveFlexDirectionValue;
|
||||
}
|
||||
|
||||
export function flexDirection(...args: any[]): any;
|
||||
|
||||
export type FlexValue = number | string;
|
||||
export type ResponsiveFlexValue = ResponsiveValue<FlexValue>;
|
||||
|
||||
export interface FlexProps {
|
||||
flex?: ResponsiveFlexValue;
|
||||
}
|
||||
|
||||
export function flex(...args: any[]): any;
|
||||
|
||||
export type AlignContentValue =
|
||||
| GlobalStyleValues
|
||||
| "center"
|
||||
| "start"
|
||||
| "end"
|
||||
| "flex-start"
|
||||
| "flex-end"
|
||||
| "normal"
|
||||
| "baseline"
|
||||
| "first baseline"
|
||||
| "last baseline"
|
||||
| "space-between"
|
||||
| "space-around"
|
||||
| "space-evenly"
|
||||
| "stretch"
|
||||
| "safe center"
|
||||
| "unsafe center";
|
||||
export type ResponsiveAlignContentValue = ResponsiveValue<AlignContentValue>;
|
||||
|
||||
export interface AlignContentProps {
|
||||
alignContent?: ResponsiveAlignItemsValue;
|
||||
}
|
||||
|
||||
export function alignContent(...args: any[]): any;
|
||||
|
||||
export type JustifySelfValue =
|
||||
| GlobalStyleValues
|
||||
| "auto"
|
||||
| "normal"
|
||||
| "stretch"
|
||||
| "center"
|
||||
| "start"
|
||||
| "end"
|
||||
| "flex-start"
|
||||
| "flex-end"
|
||||
| "self-start"
|
||||
| "self-end"
|
||||
| "left"
|
||||
| "right"
|
||||
| "baseline"
|
||||
| "first baseline"
|
||||
| "last baseline"
|
||||
| "safe center"
|
||||
| "unsafe center";
|
||||
|
||||
export type ResponsiveJustifySelfValue = ResponsiveValue<JustifySelfValue>;
|
||||
|
||||
export interface JustifySelfProps {
|
||||
justifySelf?: ResponsiveJustifySelfValue;
|
||||
}
|
||||
|
||||
export function justifySelf(...args: any[]): any;
|
||||
|
||||
export type AlignSelfValue =
|
||||
| "auto"
|
||||
| "normal"
|
||||
| "center"
|
||||
| "start"
|
||||
| "end"
|
||||
| "self-start"
|
||||
| "self-end"
|
||||
| "flex-start"
|
||||
| "flex-end"
|
||||
| "left"
|
||||
| "right"
|
||||
| "baseline"
|
||||
| "first baseline"
|
||||
| "last baseline"
|
||||
| "stretch"
|
||||
| "safe center"
|
||||
| "unsafe center";
|
||||
export type ResponsiveAlignSelfValue = ResponsiveValue<AlignSelfValue>;
|
||||
|
||||
export interface AlignSelfProps {
|
||||
alignSelf?: ResponsiveAlignSelfValue;
|
||||
}
|
||||
|
||||
export function alignSelf(...args: any[]): any;
|
||||
|
||||
export type OrderValue = GlobalStyleValues | number;
|
||||
export type ResponsiveOrderValue = ResponsiveValue<OrderValue>;
|
||||
|
||||
export interface OrderProps {
|
||||
order?: ResponsiveOrderValue;
|
||||
}
|
||||
|
||||
export function order(...args: any[]): any;
|
||||
|
||||
export type FlexBasisValue =
|
||||
| GlobalStyleValues
|
||||
| "auto"
|
||||
| "fill"
|
||||
| "max-content"
|
||||
| "min-content"
|
||||
| "fit-content"
|
||||
| "content";
|
||||
|
||||
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?: FlexBasisValue | string;
|
||||
}
|
||||
|
||||
export function flexBasis(...args: any[]): any;
|
||||
|
||||
/**
|
||||
* Grid Layout
|
||||
*/
|
||||
|
||||
// TODO: Add grid values
|
||||
|
||||
/**
|
||||
* Background
|
||||
*/
|
||||
|
||||
export type BackgroundValue = string;
|
||||
export interface BackgroundProps {
|
||||
background?: BackgroundValue;
|
||||
bg?: BackgroundValue;
|
||||
}
|
||||
|
||||
export function background(...args: any[]): any;
|
||||
|
||||
export type BackgroundImageValue = string;
|
||||
export interface BackgroundImageProps {
|
||||
/**
|
||||
* Value will be wrapped in url()
|
||||
*/
|
||||
backgroundImage?: BackgroundImageValue;
|
||||
}
|
||||
|
||||
export function backgroundImage(...args: any[]): any;
|
||||
|
||||
export type BackgroundSizeValue = string;
|
||||
export interface BackgroundSizeProps {
|
||||
backgroundSize?: BackgroundSizeValue;
|
||||
}
|
||||
|
||||
export function backgroundSize(...args: any[]): any;
|
||||
|
||||
export type BackgroundPositionValue = string;
|
||||
export interface BackgroundPositionProps {
|
||||
backgroundPosition?: BackgroundPositionValue;
|
||||
}
|
||||
|
||||
export function backgroundPosition(...args: any[]): any;
|
||||
|
||||
export type BackgroundRepeatValue = string;
|
||||
export interface BackgroundRepeatProps {
|
||||
backgroundRepeat?: BackgroundRepeatValue;
|
||||
}
|
||||
|
||||
export function backgroundRepeat(...args: any[]): any;
|
||||
|
||||
/**
|
||||
* Misc
|
||||
*/
|
||||
|
||||
export type BorderRadiusValue = string | number;
|
||||
export interface BorderRadiusProps {
|
||||
borderRadius?: BorderRadiusValue;
|
||||
}
|
||||
export function borderRadius(...args: any[]): any;
|
||||
|
||||
export type BorderColorValue = string;
|
||||
export interface BorderColorProps {
|
||||
borderColor?: BorderColorValue;
|
||||
}
|
||||
export function borderColor(...args: any[]): any;
|
||||
|
||||
export type BorderValue = string | number;
|
||||
export type ResponsiveBorderValue = ResponsiveValue<BorderValue>;
|
||||
export interface BorderProps {
|
||||
border?: ResponsiveBorderValue;
|
||||
borderTop?: ResponsiveBorderValue;
|
||||
borderRight?: ResponsiveBorderValue;
|
||||
borderBottom?: ResponsiveBorderValue;
|
||||
borderLeft?: ResponsiveBorderValue;
|
||||
}
|
||||
export function borders(...args: any[]): any;
|
||||
|
||||
export type BoxShadowValue = string | number;
|
||||
export interface BoxShadowProps {
|
||||
boxShadow?: BoxShadowValue;
|
||||
}
|
||||
export function boxShadow(...arg: any[]): any;
|
||||
|
||||
/**
|
||||
* Position
|
||||
*/
|
||||
|
||||
export type PositionValue =
|
||||
| "static"
|
||||
| "relative"
|
||||
| "absolute"
|
||||
| "sticky"
|
||||
| "fixed";
|
||||
export type ResponsivePositionValue = ResponsiveValue<PositionValue>;
|
||||
export interface PositionProps {
|
||||
position?: ResponsivePositionValue;
|
||||
}
|
||||
export function position(...args: any[]): any;
|
||||
|
||||
export type ZIndexValue = GlobalStyleValues | "auto" | number;
|
||||
|
||||
export interface ZIndexProps {
|
||||
zIndex?: ZIndexValue;
|
||||
}
|
||||
export function zIndex(...args: any[]): any;
|
||||
|
||||
export type TopValue = string | number;
|
||||
export type ResponsiveTopValue = ResponsiveValue<TopValue>;
|
||||
export interface TopProps {
|
||||
top?: ResponsiveTopValue;
|
||||
}
|
||||
export function top(...args: any[]): any;
|
||||
|
||||
export type RightValue = string | number;
|
||||
export type ResponsiveRightValue = ResponsiveValue<RightValue>;
|
||||
export interface RightProps {
|
||||
right?: ResponsiveRightValue;
|
||||
}
|
||||
export function right(...args: any[]): any;
|
||||
|
||||
export type BottomValue = string | number;
|
||||
export type ResponsiveBottomValue = ResponsiveValue<BottomValue>;
|
||||
export interface BottomProps {
|
||||
bottom?: ResponsiveBottomValue;
|
||||
}
|
||||
export function bottom(...args: any[]): any;
|
||||
|
||||
export type LeftValue = string | number;
|
||||
export type ResponsiveLeftValue = ResponsiveValue<LeftValue>;
|
||||
export interface LeftProps {
|
||||
left?: ResponsiveLeftValue;
|
||||
}
|
||||
export function left(...args: any[]): any;
|
||||
|
||||
/**
|
||||
* Pseudo-classes
|
||||
*/
|
||||
|
||||
export interface PseudoStyleValue {
|
||||
color?: ColorValue;
|
||||
backgroundColor?: ColorValue;
|
||||
borderColor?: BorderColorValue;
|
||||
boxShadow?: BoxShadowValue;
|
||||
textDecoration?: string;
|
||||
}
|
||||
export type HoverValue = PseudoStyleValue;
|
||||
export interface HoverProps {
|
||||
hover?: HoverValue;
|
||||
}
|
||||
export function hover(...args: any[]): any;
|
||||
|
||||
export type FocusValue = PseudoStyleValue;
|
||||
export interface FocusProps {
|
||||
focus?: FocusValue;
|
||||
}
|
||||
export function focus(...args: any[]): any;
|
||||
|
||||
export type ActiveValue = PseudoStyleValue;
|
||||
export interface ActiveProps {
|
||||
active?: ActiveValue;
|
||||
}
|
||||
export function active(...args: any[]): any;
|
||||
|
||||
export type DisabledValue = PseudoStyleValue;
|
||||
export interface DisabledProps {
|
||||
disabledStyle?: DisabledValue;
|
||||
}
|
||||
export function disabled(...args: any[]): any;
|
||||
|
||||
/**
|
||||
* Utilities
|
||||
*/
|
||||
|
||||
export function theme(keys: string): any;
|
||||
export function themeGet(keys: string, fallback?: string): any;
|
||||
|
||||
export function cleanElement(component: any): any;
|
||||
|
||||
export function removeProps(props: any): any;
|
||||
|
||||
/**
|
||||
* Low-level style export functions
|
||||
*/
|
||||
|
||||
export interface LowLevelStylefunctionArguments {
|
||||
prop: string;
|
||||
cssProperty?: string;
|
||||
key?: string;
|
||||
numberToPx?: boolean;
|
||||
alias?: string;
|
||||
getter?: () => any;
|
||||
}
|
||||
|
||||
export function style(args: LowLevelStylefunctionArguments): any;
|
||||
|
||||
export function responsiveStyle(args: LowLevelStylefunctionArguments): any;
|
||||
|
||||
export function pseudoStyle(args: LowLevelStylefunctionArguments): any;
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"styled-components": "^3.3.2"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,351 @@
|
||||
// Example uses styled-components, but styled-system works with most other css-in-js libraries as well
|
||||
import * as React from "react";
|
||||
import styled from "styled-components";
|
||||
import {
|
||||
themeGet,
|
||||
space,
|
||||
width,
|
||||
fontSize,
|
||||
color,
|
||||
fontFamily,
|
||||
display,
|
||||
SpaceProps,
|
||||
WidthProps,
|
||||
ColorProps,
|
||||
DisplayProps,
|
||||
FontSizeProps,
|
||||
FontFamilyProps,
|
||||
textAlign,
|
||||
TextAlignProps,
|
||||
background,
|
||||
BackgroundProps,
|
||||
maxWidth,
|
||||
MaxWidthProps,
|
||||
lineHeight,
|
||||
LineHeightProps,
|
||||
FontWeightProps,
|
||||
fontWeight,
|
||||
letterSpacing,
|
||||
LetterSpacingProps,
|
||||
minWidth,
|
||||
MinWidthProps,
|
||||
HeightProps,
|
||||
height,
|
||||
MaxHeightProps,
|
||||
maxHeight,
|
||||
minHeight,
|
||||
MinHeightProps,
|
||||
size,
|
||||
SizeProps,
|
||||
RatioProps,
|
||||
ratio,
|
||||
alignItems,
|
||||
AlignItemsProps,
|
||||
AlignContentProps,
|
||||
alignContent,
|
||||
justifyContent,
|
||||
JustifyContentProps,
|
||||
FlexWrapProps,
|
||||
flexWrap,
|
||||
flexBasis,
|
||||
FlexBasisProps,
|
||||
borderColor,
|
||||
BorderColorProps,
|
||||
flexDirection,
|
||||
FlexDirectionProps,
|
||||
flex,
|
||||
FlexProps,
|
||||
justifySelf,
|
||||
JustifySelfProps,
|
||||
alignSelf,
|
||||
AlignSelfProps,
|
||||
borders,
|
||||
BorderProps,
|
||||
borderRadius,
|
||||
BorderRadiusProps,
|
||||
position,
|
||||
PositionProps,
|
||||
zIndex,
|
||||
ZIndexProps,
|
||||
top,
|
||||
bottom,
|
||||
left,
|
||||
right,
|
||||
TopProps,
|
||||
BottomProps,
|
||||
LeftProps,
|
||||
RightProps,
|
||||
boxShadow,
|
||||
BoxShadowProps,
|
||||
backgroundImage,
|
||||
backgroundPosition,
|
||||
backgroundRepeat,
|
||||
backgroundSize,
|
||||
BackgroundImageProps,
|
||||
BackgroundPositionProps,
|
||||
BackgroundRepeatProps,
|
||||
BackgroundSizeProps,
|
||||
hover,
|
||||
HoverProps,
|
||||
focus,
|
||||
FocusProps,
|
||||
active,
|
||||
ActiveProps,
|
||||
disabled,
|
||||
DisabledProps
|
||||
} from "styled-system";
|
||||
|
||||
interface BoxProps
|
||||
extends SpaceProps,
|
||||
WidthProps,
|
||||
FontSizeProps,
|
||||
ColorProps,
|
||||
DisplayProps,
|
||||
BackgroundProps,
|
||||
MaxWidthProps,
|
||||
MinWidthProps,
|
||||
HeightProps,
|
||||
MaxHeightProps,
|
||||
MinHeightProps,
|
||||
SizeProps,
|
||||
RatioProps,
|
||||
BorderColorProps,
|
||||
FlexProps,
|
||||
JustifySelfProps,
|
||||
AlignSelfProps,
|
||||
BorderProps,
|
||||
BorderRadiusProps,
|
||||
PositionProps,
|
||||
ZIndexProps,
|
||||
TopProps,
|
||||
BottomProps,
|
||||
LeftProps,
|
||||
RightProps,
|
||||
BoxShadowProps,
|
||||
BackgroundImageProps,
|
||||
BackgroundPositionProps,
|
||||
BackgroundRepeatProps,
|
||||
BackgroundSizeProps,
|
||||
HoverProps,
|
||||
FocusProps,
|
||||
ActiveProps,
|
||||
DisabledProps {}
|
||||
const Box = styled.div.attrs<BoxProps>({})`
|
||||
|
||||
border-radius: ${themeGet("radii.small", "4px")};
|
||||
${space}
|
||||
${width}
|
||||
${fontSize}
|
||||
${color}
|
||||
${display}
|
||||
${background}
|
||||
${maxWidth}
|
||||
${minWidth}
|
||||
${height}
|
||||
${maxHeight}
|
||||
${minHeight}
|
||||
${size}
|
||||
${ratio}
|
||||
${borderColor}
|
||||
${flex}
|
||||
${justifySelf}
|
||||
${alignSelf}
|
||||
${borders}
|
||||
${borderRadius}
|
||||
${position}
|
||||
${zIndex}
|
||||
${top}
|
||||
${bottom}
|
||||
${left}
|
||||
${right}
|
||||
${boxShadow}
|
||||
${backgroundImage}
|
||||
${backgroundPosition}
|
||||
${backgroundRepeat}
|
||||
${backgroundSize}
|
||||
${hover}
|
||||
${focus}
|
||||
${active}
|
||||
${disabled}
|
||||
`;
|
||||
|
||||
interface TextProps
|
||||
extends FontSizeProps,
|
||||
FontFamilyProps,
|
||||
TextAlignProps,
|
||||
LineHeightProps,
|
||||
FontWeightProps,
|
||||
LetterSpacingProps {}
|
||||
const Text = styled.div.attrs<TextProps>({})`
|
||||
${fontSize};
|
||||
${fontFamily};
|
||||
${textAlign};
|
||||
${lineHeight};
|
||||
${fontWeight};
|
||||
${letterSpacing};
|
||||
`;
|
||||
|
||||
interface FlexComponentProps
|
||||
extends AlignItemsProps,
|
||||
AlignContentProps,
|
||||
JustifyContentProps,
|
||||
FlexWrapProps,
|
||||
FlexBasisProps,
|
||||
FlexDirectionProps {}
|
||||
const Flex = styled.div.attrs<FlexComponentProps>({})`
|
||||
${alignItems};
|
||||
${alignContent};
|
||||
${justifyContent};
|
||||
${flexWrap};
|
||||
${flexBasis};
|
||||
${flexDirection};
|
||||
`;
|
||||
|
||||
const test = () => (
|
||||
<div>
|
||||
// width: 50%
|
||||
<Box width={1 / 2} />
|
||||
// font-size: 20px (theme.fontSizes[4])
|
||||
<Box fontSize={4} />
|
||||
// margin: 16px (theme.space[2])
|
||||
<Box m={2} />
|
||||
// padding: 32px (theme.space[3])
|
||||
<Box p={3} />
|
||||
// color
|
||||
<Box color="tomato" />
|
||||
// color: #333 (theme.colors.gray[0])
|
||||
<Box color="grays.0" />
|
||||
// background color
|
||||
<Box bg="tomato" />
|
||||
// responsive width
|
||||
<Box width={[1, 1 / 2, 1 / 4]} />
|
||||
// responsive font-size
|
||||
<Box fontSize={[2, 3, 4]} />
|
||||
// responsive margin
|
||||
<Box m={[1, 2, 3]} />
|
||||
// responsive padding
|
||||
<Box p={[1, 2, 3]} />
|
||||
// examples (margin prop) // sets margin value of `theme.space[2]`
|
||||
<Box m={2} />
|
||||
// sets margin value of `-1 * theme.space[2]`
|
||||
<Box m={-2} />
|
||||
// sets a margin value of `16px` since it's greater than
|
||||
`theme.space.length`
|
||||
<Box m={16} />
|
||||
// sets margin `'auto'`
|
||||
<Box m="auto" />
|
||||
// sets margin `8px` on all viewports and `16px` from the smallest
|
||||
breakpoint and up
|
||||
<Box m={[1, 2]} />
|
||||
// examples // width `50%`
|
||||
<Box width={1 / 2} />
|
||||
// width `256px`
|
||||
<Box width={256} />
|
||||
// width `'2em'`
|
||||
<Box width="2em" />
|
||||
// width `100%` on all viewports and `50%` from the smallest breakpoint
|
||||
and up
|
||||
<Box width={[1, 1 / 2]} />
|
||||
// examples // font-size of `theme.fontSizes[3]`
|
||||
<Text fontSize={3} />
|
||||
// font-size `32px`
|
||||
<Text fontSize={32} />
|
||||
// font-size `'2em'`
|
||||
<Text fontSize="2em" />
|
||||
// font-size `10px` on all viewports and `12px` from the smallest
|
||||
breakpoint and up
|
||||
<Text fontSize={[10, 12]} />
|
||||
// examples // picks the value defined in `theme.colors['blue']`
|
||||
<Box color="blue" />
|
||||
// picks up a nested color value using dot notation //
|
||||
`theme.colors['gray'][0]`
|
||||
<Box color="gray.0" />
|
||||
// raw CSS color value
|
||||
<Box color="#f00" />
|
||||
// fontFamily
|
||||
<Text fontFamily="mono" />
|
||||
// textAlign (responsive)
|
||||
<Text textAlign="center" />
|
||||
<Text textAlign={["center", "left"]} />
|
||||
// lineHeight
|
||||
<Text lineHeight="1.25" />
|
||||
// fontWeight
|
||||
<Text fontWeight="bold" />
|
||||
// letterSpacing
|
||||
<Text letterSpacing="0.1em" />
|
||||
// display (responsive)
|
||||
<Box display="inline-block" />
|
||||
<Box display={["block", "inline-block"]} />
|
||||
// maxWidth (responsive)
|
||||
<Box maxWidth={1024} />
|
||||
<Box maxWidth={[768, null, null, 1024]} />
|
||||
// minWidth (responsive)
|
||||
<Box minWidth={128} />
|
||||
<Box minWidth={[96, 128]} />
|
||||
// height (responsive)
|
||||
<Box height={64} />
|
||||
<Box height={[48, 64]} />
|
||||
// maxHeight (responsive)
|
||||
<Box maxHeight={512} />
|
||||
<Box maxHeight={[384, 512]} />
|
||||
// minHeight (responsive)
|
||||
<Box minHeight={512} />
|
||||
<Box minHeight={[384, 512]} />
|
||||
// size (responsive, width & height)
|
||||
<Box size={32} />
|
||||
<Box size={[32, 48]} />
|
||||
// ratio (height: 0 & paddingBottom)
|
||||
<Box ratio={3 / 4} />
|
||||
// alignItems (responsive)
|
||||
<Flex alignItems="center" />
|
||||
// alignContent (responsive)
|
||||
<Flex alignContent="center" />
|
||||
// justifyContent (responsive)
|
||||
<Flex justifyContent="center" />
|
||||
// flexWrap (responsive)
|
||||
<Flex flexWrap="wrap" />
|
||||
// flexBasis (responsive)
|
||||
<Flex flexBasis="auto" />
|
||||
// flexDirection (responsive)
|
||||
<Flex flexDirection="column" />
|
||||
// flex (responsive)
|
||||
<Box flex="1 1 auto" />
|
||||
// justifySelf (responsive)
|
||||
<Box justifySelf="center" />
|
||||
// alignSelf (responsive)
|
||||
<Box alignSelf="center" />
|
||||
<Box border="1px solid" />
|
||||
<Box borderTop="1px solid" />
|
||||
<Box borderRight="1px solid" />
|
||||
<Box borderBottom="1px solid" />
|
||||
<Box borderLeft="1px solid" />
|
||||
// borderColor
|
||||
<Box borderColor="blue" />
|
||||
// borderRadius
|
||||
<Box borderRadius={4} />
|
||||
// position (responsive)
|
||||
<Box position="absolute" />
|
||||
// zIndex
|
||||
<Box zIndex={2} />
|
||||
// top, right, bottom, left (responsive)
|
||||
<Box top="0" right="0" bottom="0" left="0" />
|
||||
// boxShadow
|
||||
<Box boxShadow={1} />
|
||||
// backgroundImage, backgroundSize, backgroundPosition, backgroundRepeat
|
||||
<Box
|
||||
backgroundImage="kitten.png"
|
||||
backgroundSize="cover"
|
||||
backgroundPosition="center"
|
||||
backgroundRepeat="repeat-x"
|
||||
/>
|
||||
<Box
|
||||
hover={{
|
||||
textDecoration: "underline",
|
||||
color: "blue"
|
||||
}}
|
||||
/>
|
||||
<Box focus={{ color: "blue" }} />
|
||||
<Box active={{ color: "navy" }} />
|
||||
<Box disabledStyle={{ color: "gray" }} />
|
||||
</div>
|
||||
);
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": ["es6"],
|
||||
"jsx": "react",
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true,
|
||||
"baseUrl": "../",
|
||||
"typeRoots": ["../"],
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": ["index.d.ts", "styled-system-tests.tsx"]
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
{ "extends": "dtslint/dt.json" }
|
||||
Reference in New Issue
Block a user