@launchmenu/core
Version:
An environment for visual keyboard controlled applets
155 lines • 12.5 kB
TypeScript
/// <reference types="react" />
import { TPropMapperInputs } from "./_types/TPropMapperInputs";
import { ITheme } from "../../theming/_types/ITheme";
import { TPropMapperOutputs } from "./_types/TPropMapperOutputs";
import { ICssProp } from "../_types/ICssProp";
/**
* All the mapping functions to map properties to css
*/
export declare const cssMappers: {
display: (p: import("./_types/ICssTypes").ICssDisplay) => import("./_types/ICssTypes").ICssDisplay;
/**
* All valid css theming props
*/
position: (p: import("./_types/ICssTypes").ICssPosition) => import("./_types/ICssTypes").ICssPosition;
overflow: (p: import("./_types/ICssTypes").ICssOverflow) => import("./_types/ICssTypes").ICssOverflow;
overflowX: (p: import("./_types/ICssTypes").ICssOverflow) => import("./_types/ICssTypes").ICssOverflow;
overflowY: (p: import("./_types/ICssTypes").ICssOverflow) => import("./_types/ICssTypes").ICssOverflow;
borderStyle: (p: import("./_types/ICssTypes").ICssBorderStyle) => import("./_types/ICssTypes").ICssBorderStyle;
borderTopStyle: (p: import("./_types/ICssTypes").ICssBorderStyle) => import("./_types/ICssTypes").ICssBorderStyle;
borderBottomStyle: (p: import("./_types/ICssTypes").ICssBorderStyle) => import("./_types/ICssTypes").ICssBorderStyle;
borderLeftStyle: (p: import("./_types/ICssTypes").ICssBorderStyle) => import("./_types/ICssTypes").ICssBorderStyle;
borderRightStyle: (p: import("./_types/ICssTypes").ICssBorderStyle) => import("./_types/ICssTypes").ICssBorderStyle;
borderWidth: (p: import("react").Key) => import("react").Key;
borderTopWidth: (p: import("react").Key) => import("react").Key;
borderBottomWidth: (p: import("react").Key) => import("react").Key;
borderLeftWidth: (p: import("react").Key) => import("react").Key;
borderRightWidth: (p: import("react").Key) => import("react").Key;
verticalAlign: (p: import("./_types/ICssTypes").ICssVerticalAlign) => import("./_types/ICssTypes").ICssVerticalAlign;
flexDirection: (p: import("./_types/ICssTypes").ICssFlexDirection) => import("./_types/ICssTypes").ICssFlexDirection;
flexWrap: (p: import("./_types/ICssTypes").ICssFlexWrap) => import("./_types/ICssTypes").ICssFlexWrap;
justifyContent: (p: import("./_types/ICssTypes").ICssJustifyContent) => import("./_types/ICssTypes").ICssJustifyContent;
alignItems: (p: import("./_types/ICssTypes").ICssAlignItems) => import("./_types/ICssTypes").ICssAlignItems;
alignContent: (p: import("./_types/ICssTypes").ICssAlignContent) => import("./_types/ICssTypes").ICssAlignContent;
alignSelf: (p: import("./_types/ICssTypes").ICssAlignSelf) => import("./_types/ICssTypes").ICssAlignSelf;
visibility: (p: import("./_types/ICssTypes").ICssVisibility) => import("./_types/ICssTypes").ICssVisibility;
pointerEvents: (p: import("./_types/ICssTypes").ICssPointerEvents) => import("./_types/ICssTypes").ICssPointerEvents;
whiteSpace: (p: import("./_types/ICssTypes").ICssWhiteSpace) => import("./_types/ICssTypes").ICssWhiteSpace;
float: (p: import("./_types/ICssTypes").ICssFloat) => import("./_types/ICssTypes").ICssFloat;
cursor: (p: import("./_types/ICssTypes").ICssCursor) => import("./_types/ICssTypes").ICssCursor;
boxSizing: (p: import("./_types/ICssTypes").ICssBoxSizing) => import("./_types/ICssTypes").ICssBoxSizing;
textAlign: (p: import("./_types/ICssTypes").ICssTextAlign) => import("./_types/ICssTypes").ICssTextAlign;
zIndex: (p: number) => number;
order: (p: number) => number;
flexGrow: (p: number) => number;
flexShrink: (p: number) => number;
flexBasis: (p: string) => string;
flex: (p: string) => string;
width: (p: import("react").Key) => import("react").Key;
height: (p: import("react").Key) => import("react").Key;
minWidth: (p: import("react").Key) => import("react").Key;
minHeight: (p: import("react").Key) => import("react").Key;
maxWidth: (p: import("react").Key) => import("react").Key;
maxHeight: (p: import("react").Key) => import("react").Key;
opacity: (p: number) => number;
transition: (p: string) => string;
noSelect: (value: boolean) => {
userSelect: string;
} | {
userSelect?: undefined;
};
shadowCut: (value: ("left" | "right" | "top" | "bottom" | undefined)[]) => {
clipPath: string;
};
elevation: (elevation: "medium" | "small" | "extraSmall" | "large" | "extraLarge", theme: ITheme) => {
boxShadow: string;
};
font: (font: "header" | "textField" | "headerLarge" | "paragraph" | "bold", theme: ITheme) => import("../../theming/_types/ITypography").ITypography;
border: (border: "normal" | "thick", theme: ITheme) => import("../../theming/_types/IBorder").IBorder;
borderTop: (border: "normal" | "thick", theme: ITheme) => import("../../theming/_types/IBorder").IBorderTop;
borderBottom: (border: "normal" | "thick", theme: ITheme) => import("../../theming/_types/IBorder").IBorderBottom;
borderLeft: (border: "normal" | "thick", theme: ITheme) => import("../../theming/_types/IBorder").IBorderLeft;
borderRight: (border: "normal" | "thick", theme: ITheme) => import("../../theming/_types/IBorder").IBorderRight;
borderRadius: (radius: "medium" | "small" | "large" | "round", theme: ITheme) => {
borderRadius: number;
};
borderRadiusBottomLeft: (radius: "medium" | "small" | "large" | "round", theme: ITheme) => {
borderBottomLeftRadius: number;
};
borderRadiusBottomRight: (radius: "medium" | "small" | "large" | "round", theme: ITheme) => {
borderBottomRightRadius: number;
};
borderRadiusTopLeft: (radius: "medium" | "small" | "large" | "round", theme: ITheme) => {
borderTopLeftRadius: number;
};
borderRadiusTopRight: (radius: "medium" | "small" | "large" | "round", theme: ITheme) => {
borderTopRightRadius: number;
};
background: (color: "primary" | "secondary" | "tertiary" | "bgPrimary" | "bgSecondary" | "bgTertiary" | "fontPrimary" | "fontSecondary" | "fontTertiary" | "fontBgPrimary" | "fontBgSecondary" | "fontBgTertiary", theme: ITheme) => {
color?: string;
background: string;
};
backgroundColor: (input: "primary" | "secondary" | "tertiary" | "bgPrimary" | "bgSecondary" | "bgTertiary" | "fontPrimary" | "fontSecondary" | "fontTertiary" | "fontBgPrimary" | "fontBgSecondary" | "fontBgTertiary", context: ITheme) => string;
borderColor: (input: "primary" | "secondary" | "tertiary" | "bgPrimary" | "bgSecondary" | "bgTertiary" | "fontPrimary" | "fontSecondary" | "fontTertiary" | "fontBgPrimary" | "fontBgSecondary" | "fontBgTertiary", context: ITheme) => string;
borderTopColor: (input: "primary" | "secondary" | "tertiary" | "bgPrimary" | "bgSecondary" | "bgTertiary" | "fontPrimary" | "fontSecondary" | "fontTertiary" | "fontBgPrimary" | "fontBgSecondary" | "fontBgTertiary", context: ITheme) => string;
borderRightColor: (input: "primary" | "secondary" | "tertiary" | "bgPrimary" | "bgSecondary" | "bgTertiary" | "fontPrimary" | "fontSecondary" | "fontTertiary" | "fontBgPrimary" | "fontBgSecondary" | "fontBgTertiary", context: ITheme) => string;
borderBottomColor: (input: "primary" | "secondary" | "tertiary" | "bgPrimary" | "bgSecondary" | "bgTertiary" | "fontPrimary" | "fontSecondary" | "fontTertiary" | "fontBgPrimary" | "fontBgSecondary" | "fontBgTertiary", context: ITheme) => string;
borderLeftColor: (input: "primary" | "secondary" | "tertiary" | "bgPrimary" | "bgSecondary" | "bgTertiary" | "fontPrimary" | "fontSecondary" | "fontTertiary" | "fontBgPrimary" | "fontBgSecondary" | "fontBgTertiary", context: ITheme) => string;
caretColor: (input: "primary" | "secondary" | "tertiary" | "bgPrimary" | "bgSecondary" | "bgTertiary" | "fontPrimary" | "fontSecondary" | "fontTertiary" | "fontBgPrimary" | "fontBgSecondary" | "fontBgTertiary", context: ITheme) => string;
color: (input: "primary" | "secondary" | "tertiary" | "bgPrimary" | "bgSecondary" | "bgTertiary" | "fontPrimary" | "fontSecondary" | "fontTertiary" | "fontBgPrimary" | "fontBgSecondary" | "fontBgTertiary", context: ITheme) => string;
columnRuleColor: (input: "primary" | "secondary" | "tertiary" | "bgPrimary" | "bgSecondary" | "bgTertiary" | "fontPrimary" | "fontSecondary" | "fontTertiary" | "fontBgPrimary" | "fontBgSecondary" | "fontBgTertiary", context: ITheme) => string;
outlineColor: (input: "primary" | "secondary" | "tertiary" | "bgPrimary" | "bgSecondary" | "bgTertiary" | "fontPrimary" | "fontSecondary" | "fontTertiary" | "fontBgPrimary" | "fontBgSecondary" | "fontBgTertiary", context: ITheme) => string;
textDecorationColor: (input: "primary" | "secondary" | "tertiary" | "bgPrimary" | "bgSecondary" | "bgTertiary" | "fontPrimary" | "fontSecondary" | "fontTertiary" | "fontBgPrimary" | "fontBgSecondary" | "fontBgTertiary", context: ITheme) => string;
margin: typeof import("./cssMappers/cssSpacingMappers").mapSpacingWithAuto;
marginX: (spacing: "none" | "medium" | "small" | "extraSmall" | "large" | "extraLarge" | "auto", theme: ITheme) => {
marginLeft: import("react").Key;
marginRight: import("react").Key;
};
marginY: (spacing: "none" | "medium" | "small" | "extraSmall" | "large" | "extraLarge" | "auto", theme: ITheme) => {
marginTop: import("react").Key;
marginBottom: import("react").Key;
};
marginTop: typeof import("./cssMappers/cssSpacingMappers").mapSpacingWithAuto;
marginRight: typeof import("./cssMappers/cssSpacingMappers").mapSpacingWithAuto;
marginBottom: typeof import("./cssMappers/cssSpacingMappers").mapSpacingWithAuto;
marginLeft: typeof import("./cssMappers/cssSpacingMappers").mapSpacingWithAuto;
padding: (input: "none" | "medium" | "small" | "extraSmall" | "large" | "extraLarge", context: ITheme) => number;
paddingX: (spacing: "none" | "medium" | "small" | "extraSmall" | "large" | "extraLarge", theme: ITheme) => {
paddingLeft: number;
paddingRight: number;
};
paddingY: (spacing: "none" | "medium" | "small" | "extraSmall" | "large" | "extraLarge", theme: ITheme) => {
paddingTop: number;
paddingBottom: number;
};
paddingTop: (input: "none" | "medium" | "small" | "extraSmall" | "large" | "extraLarge", context: ITheme) => number;
paddingRight: (input: "none" | "medium" | "small" | "extraSmall" | "large" | "extraLarge", context: ITheme) => number;
paddingBottom: (input: "none" | "medium" | "small" | "extraSmall" | "large" | "extraLarge", context: ITheme) => number;
paddingLeft: (input: "none" | "medium" | "small" | "extraSmall" | "large" | "extraLarge", context: ITheme) => number;
top: (input: "none" | "medium" | "small" | "extraSmall" | "large" | "extraLarge", context: ITheme) => number;
right: (input: "none" | "medium" | "small" | "extraSmall" | "large" | "extraLarge", context: ITheme) => number;
bottom: (input: "none" | "medium" | "small" | "extraSmall" | "large" | "extraLarge", context: ITheme) => number;
left: (input: "none" | "medium" | "small" | "extraSmall" | "large" | "extraLarge", context: ITheme) => number;
columnWidth: (input: "none" | "medium" | "small" | "extraSmall" | "large" | "extraLarge", context: ITheme) => number;
lineHeight: (input: "none" | "medium" | "small" | "extraSmall" | "large" | "extraLarge", context: ITheme) => number;
outlineOffset: (input: "none" | "medium" | "small" | "extraSmall" | "large" | "extraLarge", context: ITheme) => number;
gap: (input: "none" | "medium" | "small" | "extraSmall" | "large" | "extraLarge", context: ITheme) => number;
};
/**
* All the allowed css props
*/
export declare type ICssMapperProps = TPropMapperInputs<typeof cssMappers>;
/**
* All valid css theming props
*/
export declare type ICssProps = ICssMapperProps & {
css?: ICssProp;
};
/**
* Maps the given theme props to css properties
* @param props The properties to map
* @param theme The theme to use for the mapping
* @returns The pure css properties
*/
export declare function mapCssProps<P extends Partial<ICssProps>>(props: P, theme: ITheme): TPropMapperOutputs<typeof cssMappers, keyof P & keyof typeof cssMappers> & (P["css"] extends (theme: ITheme) => infer V ? V : P["css"]);
//# sourceMappingURL=mapCssProps.d.ts.map