@blockscout/ui-toolkit/dist/theme/recipes/skeleton.recipe.d.ts

A comprehensive collection of reusable Chakra UI components and theme system for Blockscout's projects

export declare const recipe: import('@chakra-ui/react').RecipeDefinition<{
    loading: {
        reset: {};
    };
    state: {
        loading: {
            borderRadius: "base";
            boxShadow: "none";
            backgroundClip: "padding-box";
            cursor: "default";
            color: "transparent";
            borderWidth: "0px";
            pointerEvents: "none";
            userSelect: "none";
            '&::before, &::after, *': {
                visibility: "hidden";
            };
        };
    };
    variant: {
        pulse: {
            background: "bg.emphasized";
            animation: "pulse";
            animationDuration: "var(--duration, 1.2s)";
        };
        shine: {
            '--animate-from': "100%";
            '--animate-to': "-100%";
            '--start-color': "colors.skeleton.bg.start";
            '--end-color': "colors.skeleton.bg.end";
            backgroundImage: "linear-gradient(90deg,var(--start-color) 8%,var(--end-color) 18%,var(--start-color) 33%)";
            backgroundColor: "transparent";
            backgroundSize: "200% 100%";
            animation: "bg-position var(--duration, 2s) linear infinite";
        };
        none: {
            animation: "none";
        };
    };
}>;