@withjoy/joykit/lib/packages/core/common/styledSystem/styledFunctions.d.ts

UI Component Library for Joy web

import { borders, position, top, left, right, bottom, textColor, fontSize, size, display, width, height, overflow, textAlign } from 'styled-system';
import { Theme, TypographyVariant } from '..';
import { JoyKitResponsiveStyleKeys } from './types';
/**
 * NOTE: @types/styled-system typing is incorrect for `LowLevelStylefunctionArguments`
 */
interface StyleFunctionArguments {
    prop: string;
    cssProperty?: string;
    key?: string;
    getter?: () => any;
    transformValue?: (n: string | number, scale: (string | number)[]) => any;
    scale?: Array<string | number>;
    alias?: string;
}
declare type StyleFunction = (...args: any[]) => any;
export declare type StyleFunctionFactory = (args: StyleFunctionArguments) => StyleFunction;
/**
 * Returns a collection of CSS declarations that have been adjusted for responsive styling - if applicable.
 *
 * For example: margin={[1, 2, 3]} will yield a group of styles that map the value from `theme.space[index]` to
 * `theme.breakpoints[index]`.
 */
export declare const styleFunction: StyleFunctionFactory;
export declare const getTypographyStyle: (props: import("styled-components").ThemedStyledProps<{
    typeVariant: TypographyVariant;
}, Theme>) => import("styled-components").FlattenSimpleInterpolation;
export declare const getStyledBorders: typeof borders;
/**
 * Apply `bg` styling declarations
 *
 * The JoyKit styling system will look at `theme.colors` for the appropriate color.
 *
 * @example
 * getStyledColor('action') => theme.colors.action;
 * getStyledColor('action10') => theme.colors.action10;
 */
export declare const getStyledBGColor: StyleFunction;
/**
 * Apply `color` styling declarations
 *
 * The JoyKit styling system will look at `theme.colors` for the appropriate color.
 *
 * @example
 * getStyledColor('action') => theme.colors.action;
 * getStyledColor('action10') => theme.colors.action10;
 */
export declare const getStyledTextColor: typeof textColor;
/**
 * Apply `color` and `bg` styling declarations.
 *
 * The JoyKit styling system will look at `theme.colors` for the appropriate color.
 *
 * @example
 * getStyledColor('action') => theme.colors.action;
 * getStyledColor('action10') => theme.colors.action10;
 */
export declare const getStyledColor: (...args: any[]) => any;
/**
 * Apply `alignItems` styling declarations.
 */
export declare const getStyledAlignItems: StyleFunction;
/**
 * Apply `alignContent` styling declarations.
 */
export declare const getStyledAlignContent: StyleFunction;
/**
 * Apply `justifyItems` styling declarations.
 */
export declare const getStyledJustifyItems: StyleFunction;
/**
 * Apply `justifyContent` styling declarations.
 */
export declare const getStyledJustifyContent: StyleFunction;
/**
 * Apply `flexWrap` styling declarations.
 */
export declare const getStyledFlexWrap: StyleFunction;
/**
 * Apply `flexBasis` styling declarations.
 */
export declare const getStyledFlexBasis: StyleFunction;
/**
 * Apply `flexDireciton` styling declarations.
 */
export declare const getStyledFlexDirection: StyleFunction;
/**
 * Apply `styledFlex` styling declarations.
 */
export declare const getStyledFlex: StyleFunction;
/**
 * Apply `position` styling declarations.
 */
export declare const getStyledJustifySelf: StyleFunction;
export declare const getStyledAlignSelf: StyleFunction;
export declare const getStyledOrder: StyleFunction;
/**
 * Apply `display` styling declarations.
 */
export declare const getStyledDisplay: typeof display;
/**
 * Apply `width` and `height` styling declarations.
 */
export declare const getStyledSize: typeof size;
export declare const getStyledWidth: typeof width;
export declare const getStyledHeight: typeof height;
/**
 * Apply `position` styling declarations.
 */
export declare const getStyledPosition: typeof position;
/**
 * Apply `top` styling declarations.
 *
 * Typically used in conjuction with the `position` prop.
 */
export declare const getStyledTop: typeof top;
/**
 * Apply `left` styling declarations.
 *
 * Typically used in conjuction with the `position` prop.
 */
export declare const getStyledLeft: typeof left;
/**
 * Apply `right` styling declarations.
 *
 * Typically used in conjuction with the `position` prop.
 */
export declare const getStyledRight: typeof right;
/**
 * Apply `bottom` styling declarations.
 *
 * Typically used in conjuction with the `position` prop.
 */
export declare const getStyledBottom: typeof bottom;
export declare const getStyledTransform: StyleFunction;
export declare const getStyledMargin: StyleFunction;
export declare const getStyledMarginTop: StyleFunction;
export declare const getStyledMarginBottom: StyleFunction;
export declare const getStyledMarginLeft: StyleFunction;
export declare const getStyledMarginRight: StyleFunction;
export declare const getStyledPadding: StyleFunction;
export declare const getStyledPaddingTop: StyleFunction;
export declare const getStyledPaddingBottom: StyleFunction;
export declare const getStyledPaddingLeft: StyleFunction;
export declare const getStyledPaddingRight: StyleFunction;
/**
 * Used to handle spacing between components
 */
export declare const getStyledLayoutExternalSpacing: (props: any) => any;
/**
 * Used to handle spacing between components
 */
export declare const getStyledLayoutInternalSpacing: (props: any) => any;
export declare const getStyledOverflow: typeof overflow;
export declare const getStyledFontSize: typeof fontSize;
export declare const getStyledTextAlign: typeof textAlign;
/**
 * A composed function that will process CSS Declarations passed via `BaseComponentProps`
 */
export declare const getStyledBaseComponentProps: (...args: any[]) => any;
export declare const styledFunctions: {
    [key in JoyKitResponsiveStyleKeys]: StyleFunction;
};
/**
 * Most CSS-in-JS libraries accept functions as arguments to create dynamic styles based on props.
 *
 * @param keys Prop keys to be transformed
 */
export declare function withResponsiveStyles(...keys: JoyKitResponsiveStyleKeys[]): (props: any) => any[];
export {};