@blockscout/ui-toolkit
Version:
A comprehensive collection of reusable Chakra UI components and theme system for Blockscout's projects
77 lines (76 loc) • 2.19 kB
TypeScript
export declare const recipe: import('@chakra-ui/react').RecipeDefinition<{
size: {
sm: {
textStyle: "sm";
px: "2";
'--input-height': "sizes.8";
};
md: {
textStyle: "sm";
px: "2";
'--input-height': "sizes.10";
};
lg: {
textStyle: "md";
px: "4";
'--input-height': "60px";
};
};
variant: {
outline: {
bg: "input.bg";
borderWidth: "2px";
borderColor: "input.border.filled";
focusVisibleRing: "none";
_placeholder: {
color: "input.placeholder";
};
_placeholderShown: {
borderColor: "input.border";
overflow: "hidden";
textOverflow: "ellipsis";
whiteSpace: "nowrap";
_invalid: {
borderColor: "input.border.error";
};
};
_hover: {
borderColor: "input.border.hover";
};
_focus: {
borderColor: "input.border.focus";
boxShadow: "size.md";
_hover: {
borderColor: "input.border.focus";
};
};
_readOnly: {
userSelect: "all";
pointerEvents: "none";
bg: "input.bg.readOnly";
borderColor: "input.border.readOnly";
_focus: {
borderColor: "input.border.readOnly";
};
_hover: {
borderColor: "input.border.readOnly";
};
};
_disabled: {
opacity: "control.disabled";
};
_invalid: {
borderColor: "input.border.error";
_placeholder: {
color: "input.placeholder.error";
};
_hover: {
borderColor: "input.border.error";
};
};
};
};
floating: {
true: {};
};
}>;