@blockscout/ui-toolkit
Version:
A comprehensive collection of reusable Chakra UI components and theme system for Blockscout's projects
76 lines (75 loc) • 2.13 kB
TypeScript
export declare const recipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "startElement" | "endElement" | "closeTrigger", {
size: {
md: {
root: {
px: "1";
py: "0.5";
minH: "6";
gap: "1";
'--tag-avatar-size': "spacing.4";
'--tag-element-size': "spacing.3";
'--tag-element-offset': "0px";
};
label: {
textStyle: "sm";
};
};
lg: {
root: {
px: "6px";
py: "6px";
minH: "8";
minW: "8";
gap: "1";
'--tag-avatar-size': "spacing.4";
'--tag-element-size': "spacing.3";
'--tag-element-offset': "0px";
};
label: {
textStyle: "sm";
};
};
};
variant: {
subtle: {
root: {
bgColor: "tag.root.subtle.bg";
color: "tag.root.subtle.fg";
};
};
clickable: {
root: {
cursor: "pointer";
bgColor: "tag.root.clickable.bg";
color: "tag.root.clickable.fg";
_hover: {
opacity: number;
};
};
};
filter: {
root: {
bgColor: "tag.root.filter.bg";
};
};
select: {
root: {
cursor: "pointer";
bgColor: "tag.root.select.bg";
color: "tag.root.select.fg";
_hover: {
color: "hover";
opacity: number;
};
_selected: {
bgColor: "selected.option.bg";
color: "whiteAlpha.800";
_hover: {
color: "whiteAlpha.800";
opacity: number;
};
};
};
};
};
}>;