@blockscout/ui-toolkit
Version:
A comprehensive collection of reusable Chakra UI components and theme system for Blockscout's projects
68 lines (67 loc) • 1.68 kB
TypeScript
export declare const recipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "track" | "root" | "range" | "valueText", {
variant: {
subtle: {
track: {
bgColor: "progress.track";
};
range: {
bgColor: "selected.option.bg";
};
};
};
shape: {
rounded: {
track: {
borderRadius: "base";
};
};
};
striped: {
true: {
range: {
backgroundImage: "linear-gradient(45deg, var(--stripe-color) 25%, transparent 25%, transparent 50%, var(--stripe-color) 50%, var(--stripe-color) 75%, transparent 75%, transparent)";
backgroundSize: "var(--stripe-size) var(--stripe-size)";
'--stripe-size': "1rem";
'--stripe-color': {
_light: "rgba(255, 255, 255, 0.3)";
_dark: "rgba(0, 0, 0, 0.3)";
};
};
};
};
animated: {
true: {
range: {
'--animate-from': "var(--stripe-size)";
animation: "bg-position 1s linear infinite";
};
};
};
size: {
xs: {
track: {
h: "1";
};
};
sm: {
track: {
h: "2";
};
};
md: {
track: {
h: "3";
};
};
lg: {
track: {
h: "4";
};
};
xl: {
track: {
h: "8";
};
};
};
}>;