@commercetools/nimbus 2.0.1-rc2 → 2.0.1-rc3

package/dist/theme/recipes/index.d.ts

@@ -0,0 +1,490 @@
+export declare const recipes: {
+    avatar: import('@chakra-ui/react').RecipeDefinition<{
+        size: {
+            md: {
+                width: number;
+                height: number;
+                textStyle: "sm";
+            };
+            xs: {
+                width: number;
+                height: number;
+                textStyle: "xs";
+            };
+            "2xs": {
+                width: number;
+                height: number;
+                textStyle: "xs";
+            };
+        };
+    }>;
+    badge: import('@chakra-ui/react').RecipeDefinition<{
+        size: {
+            "2xs": {
+                fontSize: "300";
+                gap: "100";
+                h: "600";
+                lineHeight: "350";
+                px: "200";
+                _icon: {
+                    width: "400";
+                    height: "400";
+                };
+            };
+            xs: {
+                fontSize: "350";
+                gap: "100";
+                h: "800";
+                lineHeight: "400";
+                px: "300";
+                _icon: {
+                    width: "500";
+                    height: "500";
+                };
+            };
+            md: {
+                fontSize: "400";
+                gap: "200";
+                h: "1000";
+                lineHeight: "500";
+                px: "400";
+                _icon: {
+                    width: "600";
+                    height: "600";
+                };
+            };
+        };
+    }>;
+    button: import('@chakra-ui/react').RecipeDefinition<{
+        size: {
+            "2xs": {
+                h: "600";
+                minW: "600";
+                fontSize: "300";
+                fontWeight: "500";
+                lineHeight: "400";
+                px: "200";
+                gap: "100";
+                _icon: {
+                    width: "400";
+                    height: "400";
+                };
+            };
+            xs: {
+                h: "800";
+                minW: "800";
+                fontSize: "350";
+                fontWeight: "500";
+                lineHeight: "400";
+                px: "300";
+                gap: "100";
+                _icon: {
+                    width: "500";
+                    height: "500";
+                };
+            };
+            md: {
+                h: "1000";
+                minW: "1000";
+                fontSize: "400";
+                lineHeight: "500";
+                px: "400";
+                gap: "200";
+                _icon: {
+                    width: "600";
+                    height: "600";
+                };
+            };
+        };
+        variant: {
+            solid: {
+                bg: "colorPalette.9";
+                color: "colorPalette.contrast";
+                _hover: {
+                    bg: "colorPalette.10";
+                };
+                _expanded: {
+                    bg: "colorPalette.10";
+                };
+            };
+            subtle: {
+                bg: "colorPalette.3";
+                color: "colorPalette.11";
+                _hover: {
+                    bg: "colorPalette.4";
+                };
+                _expanded: {
+                    bg: "colorPalette.4";
+                };
+            };
+            outline: {
+                borderWidth: "1px";
+                borderColor: "colorPalette.7";
+                color: "colorPalette.11";
+                transitionProperty: "background-color, border-color, color";
+                transitionDuration: "moderate";
+                _hover: {
+                    bg: "colorPalette.3";
+                    borderColor: "colorPalette.8";
+                };
+                _expanded: {
+                    bg: "colorPalette.subtle";
+                };
+            };
+            ghost: {
+                color: "colorPalette.11";
+                _hover: {
+                    bg: "colorPalette.4";
+                };
+                _expanded: {
+                    bg: "colorPalette.4";
+                };
+            };
+            link: {
+                color: "colorPalette.11";
+                _hover: {
+                    textDecoration: "underline";
+                };
+            };
+        };
+        tone: {
+            primary: {
+                colorPalette: "primary";
+            };
+            critical: {
+                colorPalette: "critical";
+            };
+            neutral: {
+                colorPalette: "neutral";
+            };
+            info: {
+                colorPalette: "info";
+            };
+        };
+    }>;
+    code: import('@chakra-ui/react').RecipeDefinition<{
+        variant: {
+            solid: {
+                bg: "colorPalette.4";
+                color: "colorPalette.11";
+            };
+            subtle: {
+                bg: "colorPalette.3";
+                color: "colorPalette.11";
+            };
+            outline: {
+                color: "colorPalette.fg";
+                shadow: "inset 0 0 0px 1px var(--shadow-color)";
+                shadowColor: "colorPalette.muted";
+            };
+            surface: {
+                bg: "colorPalette.subtle";
+                color: "colorPalette.fg";
+                shadow: "inset 0 0 0px 1px var(--shadow-color)";
+                shadowColor: "colorPalette.muted";
+            };
+            plain: {
+                color: "colorPalette.fg";
+            };
+        };
+        size: {
+            xs: {
+                textStyle: "2xs";
+                px: "100";
+                minH: "400";
+            };
+            sm: {
+                textStyle: "xs";
+                px: "150";
+                minH: "500";
+            };
+            md: {
+                textStyle: "sm";
+                px: "200";
+                minH: "600";
+            };
+            lg: {
+                textStyle: "sm";
+                px: "250";
+                minH: "700";
+            };
+        };
+    }>;
+    group: import('@chakra-ui/react').RecipeDefinition<import('@chakra-ui/react').RecipeVariantRecord>;
+    heading: import('@chakra-ui/react').RecipeDefinition<{
+        size: {
+            xs: {
+                textStyle: "xs";
+            };
+            sm: {
+                textStyle: "sm";
+            };
+            md: {
+                textStyle: "md";
+            };
+            lg: {
+                textStyle: "lg";
+            };
+            xl: {
+                textStyle: "xl";
+            };
+            "2xl": {
+                textStyle: "2xl";
+            };
+            "3xl": {
+                textStyle: "3xl";
+            };
+            "4xl": {
+                textStyle: "4xl";
+            };
+            "5xl": {
+                textStyle: "5xl";
+            };
+            "6xl": {
+                textStyle: "6xl";
+            };
+            "7xl": {
+                textStyle: "7xl";
+            };
+        };
+    }>;
+    icon: import('@chakra-ui/react').RecipeDefinition<{
+        size: {
+            "2xs": {
+                boxSize: "600";
+            };
+            xs: {
+                boxSize: "800";
+            };
+            sm: {
+                boxSize: "900";
+            };
+            md: {
+                boxSize: "1000";
+            };
+            lg: {
+                boxSize: "1200";
+            };
+            xl: {
+                boxSize: "1400";
+            };
+        };
+    }>;
+    kbd: import('@chakra-ui/react').RecipeDefinition<import('@chakra-ui/react').RecipeVariantRecord>;
+    link: import('@chakra-ui/react').RecipeDefinition<{
+        size: {
+            xs: {
+                fontSize: "300";
+                lineHeight: "450";
+            };
+            sm: {
+                fontSize: "350";
+                lineHeight: "500";
+            };
+            md: {
+                fontSize: "400";
+                lineHeight: "600";
+            };
+        };
+        fontColor: {
+            primary: {
+                color: "primary";
+            };
+            inherit: {
+                color: "inherit";
+            };
+        };
+    }>;
+    loadingSpinner: import('@chakra-ui/react').RecipeDefinition<{
+        size: {
+            "2xs": {
+                width: "350";
+                height: "350";
+            };
+            xs: {
+                width: "500";
+                height: "500";
+            };
+            sm: {
+                width: "600";
+                height: "600";
+            };
+            md: {
+                width: "800";
+                height: "800";
+            };
+            lg: {
+                width: "1000";
+                height: "1000";
+            };
+        };
+        tone: {
+            primary: {
+                colorPalette: "ctvioletAlpha";
+            };
+            white: {
+                colorPalette: "whiteAlpha";
+            };
+        };
+    }>;
+    popover: import('@chakra-ui/react').RecipeDefinition<import('@chakra-ui/react').RecipeVariantRecord>;
+    radioInput: import('@chakra-ui/react').SlotRecipeDefinition<"option" | "root", {
+        orientation: {
+            horizontal: {
+                root: {
+                    flexDirection: "row";
+                    gap: "600";
+                };
+            };
+            vertical: {
+                root: {
+                    flexDirection: "column";
+                    alignItems: "flex-start";
+                    gap: "400";
+                };
+            };
+        };
+    }>;
+    separator: import('@chakra-ui/react').RecipeDefinition<{
+        orientation: {
+            horizontal: {
+                width: "100%";
+                height: "25";
+            };
+            vertical: {
+                width: "25";
+                height: "100%";
+            };
+        };
+    }>;
+    toggleButton: import('@chakra-ui/react').RecipeDefinition<{
+        size: {
+            "2xs"?: {
+                h: "600";
+                minW: "600";
+                fontSize: "300";
+                fontWeight: "500";
+                lineHeight: "400";
+                px: "200";
+                gap: "100";
+                _icon: {
+                    width: "400";
+                    height: "400";
+                };
+            } | undefined;
+            xs?: {
+                h: "800";
+                minW: "800";
+                fontSize: "350";
+                fontWeight: "500";
+                lineHeight: "400";
+                px: "300";
+                gap: "100";
+                _icon: {
+                    width: "500";
+                    height: "500";
+                };
+            } | undefined;
+            md?: {
+                h: "1000";
+                minW: "1000";
+                fontSize: "400";
+                lineHeight: "500";
+                px: "400";
+                gap: "200";
+                _icon: {
+                    width: "600";
+                    height: "600";
+                };
+            } | undefined;
+        };
+        variant: {
+            outline: {
+                "--button-bg": "transparent";
+                "--button-text": "{colors.colorPalette.11}";
+                "--border-width": "{sizes.25}";
+                "--border-color": "{colors.colorPalette.7}";
+                bg: "var(--button-bg)";
+                boxShadow: "0 0 0 var(--border-width) var(--border-color)";
+                color: "var(--button-text)";
+                "&[data-hovered='true']": {
+                    "--button-bg": "{colors.colorPalette.2}";
+                    "--border-color": "{colors.colorPalette.8}";
+                };
+                "&[data-selected=true]": {
+                    "--button-bg": "{colors.colorPalette.3}";
+                    "--border-color": "{colors.colorPalette.8}";
+                    _hover: {
+                        "--button-bg": "{colors.colorPalette.4}";
+                        "--border-color": "{colors.colorPalette.9}";
+                    };
+                };
+            };
+            ghost: {
+                "--button-text": "{colors.neutral.11}";
+                "--button-bg": "transparent";
+                color: "var(--button-text)";
+                bg: "var(--button-bg)";
+                "&[data-hovered='true']": {
+                    "--button-bg": "{colors.colorPalette.2}";
+                };
+                "&[data-selected='true']": {
+                    "--button-bg": "{colors.colorPalette.3}";
+                    "--button-text": "{colors.colorPalette.11}";
+                    "&[data-hovered='true']": {
+                        "--button-bg": "{colors.colorPalette.4}";
+                    };
+                };
+            };
+        };
+        tone: {
+            primary?: {
+                colorPalette: "primary";
+            } | undefined;
+            critical?: {
+                colorPalette: "critical";
+            } | undefined;
+            neutral?: {
+                colorPalette: "neutral";
+            } | undefined;
+            info?: {
+                colorPalette: "info";
+            } | undefined;
+        };
+    }>;
+    toolbar: import('@chakra-ui/react').RecipeDefinition<{
+        size: {
+            xs: {
+                "--toolbar-spacing": "{spacing.100}";
+                "--divider-size": "{sizes.600}";
+            };
+            md: {
+                "--toolbar-spacing": "{spacing.200}";
+                "--divider-size": "{sizes.800}";
+            };
+        };
+        orientation: {
+            horizontal: {
+                "--toolbar-direction": "row";
+                "& .nimbus-divider": {
+                    height: "var(--divider-size)";
+                    mx: "var(--toolbar-spacing)";
+                };
+            };
+            vertical: {
+                "--toolbar-direction": "column";
+                "& .nimbus-divider": {
+                    width: "var(--divider-size)";
+                    my: "var(--toolbar-spacing)";
+                };
+            };
+        };
+        variant: {
+            plain: {};
+            outline: {
+                boxShadow: "0 0 0 {sizes.25} {colors.neutral.6}";
+            };
+        };
+    }>;
+    tooltip: import('@chakra-ui/react').RecipeDefinition<import('@chakra-ui/react').RecipeVariantRecord>;
+};