recastui
Version:
Solidjs components library focused on usability, whitelabel theming, accessibility and developer experience
217 lines (216 loc) • 7.81 kB
TypeScript
/*!
* Original code by Theme-ui
* MIT Licensed, Copyright (c) Brent Jackson.
*
* Credits to the Theme-ui team:
* https://github.com/system-ui/theme-ui/blob/develop/packages/css/src/index.ts
*/
import type { RecastUIStyleObject, CSSObject } from './types';
import { CSSAttribute } from '../types';
import { Theme } from '../theme';
export * from './types';
/**
* Allows for nested scales with shorthand values
* @example
* {
* colors: {
* primary: { __default: '#00f', light: '#33f' }
* }
* }
* css({ color: 'primary' }); // { color: '#00f' }
* css({ color: 'primary.light' }) // { color: '#33f' }
*/
export declare const RECAST_UI_DEFAULT_KEY = "__default";
/**
* Extracts value under path from a deeply nested object.
* Used for Themes, variants and Theme UI style objects.
* Given a path to object with `__default` key, returns the value under that key.
*
* @param obj a theme, variant or style object
* @param path path separated with dots (`.`)
* @param fallback default value returned if get(obj, path) is not found
* @param p
* @param undef
*/
export declare function get(obj: object, path: string | number | undefined, fallback?: unknown, p?: number, undef?: unknown): any;
export declare const getObjectWithVariants: (obj: any, theme: Theme) => CSSObject;
export declare const defaultBreakpoints: string[];
export declare const baseColors: {
white: string;
black: string;
gray: string[];
blue: string;
indigo: string;
purple: string;
pink: string;
red: string;
orange: string;
yellow: string;
green: string;
teal: string;
cyan: string;
};
export declare const colors: Theme['colors'];
export declare const space: Theme['space'];
export declare const multiples: {
marginX: string[];
marginY: string[];
paddingX: string[];
paddingY: string[];
scrollMarginX: string[];
scrollMarginY: string[];
scrollPaddingX: string[];
scrollPaddingY: string[];
size: string[];
};
export declare const scales: {
readonly color: "colors";
readonly background: "colors";
readonly backgroundColor: "colors";
readonly borderColor: "colors";
readonly caretColor: "colors";
readonly columnRuleColor: "colors";
readonly outlineColor: "colors";
readonly textDecorationColor: "colors";
readonly opacity: "opacities";
readonly transition: "transitions";
readonly margin: "space";
readonly marginTop: "space";
readonly marginRight: "space";
readonly marginBottom: "space";
readonly marginLeft: "space";
readonly marginX: "space";
readonly marginY: "space";
readonly marginBlock: "space";
readonly marginBlockEnd: "space";
readonly marginBlockStart: "space";
readonly marginInline: "space";
readonly marginInlineEnd: "space";
readonly marginInlineStart: "space";
readonly padding: "space";
readonly paddingTop: "space";
readonly paddingRight: "space";
readonly paddingBottom: "space";
readonly paddingLeft: "space";
readonly paddingX: "space";
readonly paddingY: "space";
readonly paddingBlock: "space";
readonly paddingBlockEnd: "space";
readonly paddingBlockStart: "space";
readonly paddingInline: "space";
readonly paddingInlineEnd: "space";
readonly paddingInlineStart: "space";
readonly scrollMargin: "space";
readonly scrollMarginTop: "space";
readonly scrollMarginRight: "space";
readonly scrollMarginBottom: "space";
readonly scrollMarginLeft: "space";
readonly scrollMarginX: "space";
readonly scrollMarginY: "space";
readonly scrollPadding: "space";
readonly scrollPaddingTop: "space";
readonly scrollPaddingRight: "space";
readonly scrollPaddingBottom: "space";
readonly scrollPaddingLeft: "space";
readonly scrollPaddingX: "space";
readonly scrollPaddingY: "space";
readonly inset: "space";
readonly insetBlock: "space";
readonly insetBlockEnd: "space";
readonly insetBlockStart: "space";
readonly insetInline: "space";
readonly insetInlineEnd: "space";
readonly insetInlineStart: "space";
readonly top: "space";
readonly right: "space";
readonly bottom: "space";
readonly left: "space";
readonly gridGap: "space";
readonly gridColumnGap: "space";
readonly gridRowGap: "space";
readonly gap: "space";
readonly columnGap: "space";
readonly rowGap: "space";
readonly fontFamily: "fonts";
readonly fontSize: "fontSizes";
readonly fontWeight: "fontWeights";
readonly lineHeight: "lineHeights";
readonly letterSpacing: "letterSpacings";
readonly border: "borders";
readonly borderTop: "borders";
readonly borderRight: "borders";
readonly borderBottom: "borders";
readonly borderLeft: "borders";
readonly borderWidth: "borderWidths";
readonly borderStyle: "borderStyles";
readonly borderRadius: "radii";
readonly borderTopRightRadius: "radii";
readonly borderTopLeftRadius: "radii";
readonly borderBottomRightRadius: "radii";
readonly borderBottomLeftRadius: "radii";
readonly borderTopWidth: "borderWidths";
readonly borderTopColor: "colors";
readonly borderTopStyle: "borderStyles";
readonly borderBottomWidth: "borderWidths";
readonly borderBottomColor: "colors";
readonly borderBottomStyle: "borderStyles";
readonly borderLeftWidth: "borderWidths";
readonly borderLeftColor: "colors";
readonly borderLeftStyle: "borderStyles";
readonly borderRightWidth: "borderWidths";
readonly borderRightColor: "colors";
readonly borderRightStyle: "borderStyles";
readonly borderBlock: "borders";
readonly borderBlockColor: "colors";
readonly borderBlockEnd: "borders";
readonly borderBlockEndColor: "colors";
readonly borderBlockEndStyle: "borderStyles";
readonly borderBlockEndWidth: "borderWidths";
readonly borderBlockStart: "borders";
readonly borderBlockStartColor: "colors";
readonly borderBlockStartStyle: "borderStyles";
readonly borderBlockStartWidth: "borderWidths";
readonly borderBlockStyle: "borderStyles";
readonly borderBlockWidth: "borderWidths";
readonly borderEndEndRadius: "radii";
readonly borderEndStartRadius: "radii";
readonly borderInline: "borders";
readonly borderInlineColor: "colors";
readonly borderInlineEnd: "borders";
readonly borderInlineEndColor: "colors";
readonly borderInlineEndStyle: "borderStyles";
readonly borderInlineEndWidth: "borderWidths";
readonly borderInlineStart: "borders";
readonly borderInlineStartColor: "colors";
readonly borderInlineStartStyle: "borderStyles";
readonly borderInlineStartWidth: "borderWidths";
readonly borderInlineStyle: "borderStyles";
readonly borderInlineWidth: "borderWidths";
readonly borderStartEndRadius: "radii";
readonly borderStartStartRadius: "radii";
readonly columnRuleWidth: "borderWidths";
readonly boxShadow: "shadows";
readonly textShadow: "shadows";
readonly zIndex: "zIndices";
readonly width: "sizes";
readonly minWidth: "sizes";
readonly maxWidth: "sizes";
readonly height: "sizes";
readonly minHeight: "sizes";
readonly maxHeight: "sizes";
readonly flexBasis: "sizes";
readonly size: "sizes";
readonly blockSize: "sizes";
readonly inlineSize: "sizes";
readonly maxBlockSize: "sizes";
readonly maxInlineSize: "sizes";
readonly minBlockSize: "sizes";
readonly minInlineSize: "sizes";
readonly columnWidth: "sizes";
readonly fill: "colors";
readonly stroke: "colors";
};
declare type CssPropsArgument = {
theme: Theme;
} | Theme;
export declare const systemCss: (args?: RecastUIStyleObject) => (props?: CssPropsArgument) => CSSAttribute;