@mekari/pixel3-theme 0.7.2 → 1.0.0-next.0

package/dist/recipes/broadcast.d.mts

@@ -1,5 +1,112 @@
-import * as _pandacss_dev from '@pandacss/dev';
+import * as _pandacss_types from '@pandacss/types';
 
-declare const broadcastSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const broadcastSlotRecipe: _pandacss_types.SlotRecipeConfig<"container" | "icon" | "root" | "close" | "textLink" | "label" | "wrapper" | "action", {
+    variant: {
+        announcement: {
+            container: {
+                backgroundColor: "stone.400";
+                _nextTheme: {
+                    backgroundColor: "background.neutral.bold";
+                };
+            };
+            icon: {
+                color: "white";
+                _nextTheme: {
+                    color: "icon.inverse";
+                };
+            };
+            label: {
+                color: "white";
+                _nextTheme: {
+                    color: "text.inverse";
+                };
+            };
+            textLink: {
+                color: "white";
+                _nextTheme: {
+                    color: "text.inverse";
+                };
+            };
+        };
+        information: {
+            container: {
+                backgroundColor: "violet.400";
+                _nextTheme: {
+                    backgroundColor: "background.highlight.bold";
+                };
+            };
+            icon: {
+                color: "white";
+                _nextTheme: {
+                    color: "icon.inverse.static";
+                };
+            };
+            label: {
+                color: "white";
+                _nextTheme: {
+                    color: "text.inverse";
+                };
+            };
+            textLink: {
+                color: "white";
+                _nextTheme: {
+                    color: "text.inverse";
+                };
+            };
+        };
+        important: {
+            container: {
+                backgroundColor: "amber.100";
+                _nextTheme: {
+                    backgroundColor: "background.warning.bold";
+                };
+            };
+            icon: {
+                color: "dark";
+                _nextTheme: {
+                    color: "icon.warning.inverse";
+                };
+            };
+            label: {
+                color: "dark";
+                _nextTheme: {
+                    color: "text.warning.inverse";
+                };
+            };
+            textLink: {
+                color: "dark";
+                _nextTheme: {
+                    color: "text.warning.inverse";
+                };
+            };
+        };
+        critical: {
+            container: {
+                backgroundColor: "rose.400";
+                _nextTheme: {
+                    backgroundColor: "background.danger.bold";
+                };
+            };
+            icon: {
+                color: "white";
+                _nextTheme: {
+                    color: "icon.inverse";
+                };
+            };
+            label: {
+                color: "white";
+                _nextTheme: {
+                    color: "text.inverse";
+                };
+            };
+            textLink: {
+                color: "white";
+                _nextTheme: {
+                    color: "text.inverse";
+                };
+            };
+        };
+    };
+}>;
 
 export { broadcastSlotRecipe };

package/dist/recipes/broadcast.d.ts

@@ -1,5 +1,112 @@
-import * as _pandacss_dev from '@pandacss/dev';
+import * as _pandacss_types from '@pandacss/types';
 
-declare const broadcastSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+declare const broadcastSlotRecipe: _pandacss_types.SlotRecipeConfig<"container" | "icon" | "root" | "close" | "textLink" | "label" | "wrapper" | "action", {
+    variant: {
+        announcement: {
+            container: {
+                backgroundColor: "stone.400";
+                _nextTheme: {
+                    backgroundColor: "background.neutral.bold";
+                };
+            };
+            icon: {
+                color: "white";
+                _nextTheme: {
+                    color: "icon.inverse";
+                };
+            };
+            label: {
+                color: "white";
+                _nextTheme: {
+                    color: "text.inverse";
+                };
+            };
+            textLink: {
+                color: "white";
+                _nextTheme: {
+                    color: "text.inverse";
+                };
+            };
+        };
+        information: {
+            container: {
+                backgroundColor: "violet.400";
+                _nextTheme: {
+                    backgroundColor: "background.highlight.bold";
+                };
+            };
+            icon: {
+                color: "white";
+                _nextTheme: {
+                    color: "icon.inverse.static";
+                };
+            };
+            label: {
+                color: "white";
+                _nextTheme: {
+                    color: "text.inverse";
+                };
+            };
+            textLink: {
+                color: "white";
+                _nextTheme: {
+                    color: "text.inverse";
+                };
+            };
+        };
+        important: {
+            container: {
+                backgroundColor: "amber.100";
+                _nextTheme: {
+                    backgroundColor: "background.warning.bold";
+                };
+            };
+            icon: {
+                color: "dark";
+                _nextTheme: {
+                    color: "icon.warning.inverse";
+                };
+            };
+            label: {
+                color: "dark";
+                _nextTheme: {
+                    color: "text.warning.inverse";
+                };
+            };
+            textLink: {
+                color: "dark";
+                _nextTheme: {
+                    color: "text.warning.inverse";
+                };
+            };
+        };
+        critical: {
+            container: {
+                backgroundColor: "rose.400";
+                _nextTheme: {
+                    backgroundColor: "background.danger.bold";
+                };
+            };
+            icon: {
+                color: "white";
+                _nextTheme: {
+                    color: "icon.inverse";
+                };
+            };
+            label: {
+                color: "white";
+                _nextTheme: {
+                    color: "text.inverse";
+                };
+            };
+            textLink: {
+                color: "white";
+                _nextTheme: {
+                    color: "text.inverse";
+                };
+            };
+        };
+    };
+}>;
 
 export { broadcastSlotRecipe };

package/dist/recipes/button.d.mts

@@ -1,6 +1,338 @@
-import * as _pandacss_dev from '@pandacss/dev';
+import * as _pandacss_types from '@pandacss/types';
 
-declare const buttonRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
-declare const buttonGroupRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+declare const buttonRecipe: _pandacss_types.RecipeConfig<{
+    variant: {
+        primary: {
+            color: "white";
+            background: "blue.400";
+            borderColor: "blue.400";
+            _hover: {
+                background: "blue.500";
+                borderColor: "blue.500";
+            };
+            _active: {
+                background: "blue.700";
+                borderColor: "blue.700";
+            };
+            _loading: {
+                background: "blue.400";
+            };
+            _nextTheme: {
+                color: "text.inverse";
+                background: "background.brand.bold";
+                borderColor: "background.brand.bold";
+                _hover: {
+                    background: "background.brand.bold.hovered";
+                    borderColor: "background.brand.bold.hovered";
+                };
+                _active: {
+                    background: "background.brand.bold.pressed";
+                    borderColor: "background.brand.bold.pressed";
+                };
+                _loading: {
+                    background: "background.brand.bold";
+                };
+            };
+        };
+        secondary: {
+            color: "blue.400";
+            background: "white";
+            borderColor: "gray.100";
+            _hover: {
+                background: "gray.50";
+                borderColor: "gray.100";
+            };
+            _active: {
+                background: "blue.50";
+                borderColor: "blue.50";
+            };
+            _loading: {
+                background: "white";
+            };
+            _nextTheme: {
+                color: "text.link";
+                background: "background.neutral";
+                borderColor: "border.default";
+                _hover: {
+                    background: "background.neutral.hovered";
+                    borderColor: "border.default";
+                };
+                _active: {
+                    background: "background.neutral.pressed";
+                    borderColor: "border.default";
+                };
+                _loading: {
+                    background: "background.neutral";
+                };
+            };
+        };
+        ghost: {
+            color: "gray.600";
+            background: "transparent";
+            borderColor: "transparent";
+            _hover: {
+                background: "gray.50";
+                borderColor: "gray.50";
+            };
+            _active: {
+                background: "gray.100";
+                borderColor: "gray.100";
+            };
+            _loading: {
+                background: "transparent";
+            };
+            _nextTheme: {
+                color: "text.secondary";
+                background: "transparent";
+                borderColor: "transparent";
+                _hover: {
+                    background: "background.neutral.hovered";
+                    borderColor: "background.neutral.hovered";
+                };
+                _active: {
+                    background: "background.neutral.pressed";
+                    borderColor: "background.neutral.pressed";
+                };
+                _loading: {
+                    background: "transparent";
+                };
+            };
+        };
+        danger: {
+            color: "white";
+            background: "red.400";
+            borderColor: "red.400";
+            _hover: {
+                background: "red.500";
+                borderColor: "red.500";
+            };
+            _active: {
+                background: "red.700";
+                borderColor: "red.700";
+            };
+            _focusVisible: {
+                borderColor: "red.400";
+                boxShadow: "0 0 0 3px #FDECEE";
+            };
+            _loading: {
+                background: "red.400";
+            };
+            _nextTheme: {
+                color: "text.inverse";
+                background: "background.danger.bold";
+                borderColor: "background.danger.bold";
+                _hover: {
+                    background: "background.danger.bold.hovered";
+                    borderColor: "background.danger.bold.hovered";
+                };
+                _active: {
+                    background: "background.danger.bold.pressed";
+                    borderColor: "background.danger.bold.pressed";
+                };
+                _focusVisible: {
+                    borderColor: "border.focused";
+                    boxShadow: "focus";
+                };
+                _loading: {
+                    background: "background.danger.bold";
+                };
+            };
+        };
+        tertiary: {
+            color: "white";
+            background: "#282E33";
+            borderColor: "#282E33";
+            _hover: {
+                background: "#38414A";
+                borderColor: "#38414A";
+            };
+            _active: {
+                background: "#454F59";
+                borderColor: "#454F59";
+            };
+            _loading: {
+                background: "#282E33";
+            };
+            _nextTheme: {
+                color: "text.inverse.static";
+                background: "background.tertiary";
+                borderColor: "background.tertiary";
+                _hover: {
+                    background: "background.tertiary.hovered";
+                    borderColor: "background.tertiary.hovered";
+                };
+                _active: {
+                    background: "background.tertiary.pressed";
+                    borderColor: "background.tertiary.pressed";
+                };
+                _loading: {
+                    background: "background.tertiary";
+                };
+            };
+        };
+        textLink: {
+            color: "blue.400";
+            background: "transparent";
+            borderColor: "transparent";
+            _hover: {
+                color: "blue.500";
+            };
+            _active: {
+                color: "blue.700";
+            };
+            _disabled: {
+                cursor: "not-allowed";
+                color: "gray.400";
+                borderColor: "transparent";
+                _hover: {
+                    borderColor: "transparent";
+                    color: "gray.400";
+                };
+            };
+            _loading: {
+                background: "white";
+            };
+            _nextTheme: {
+                color: "text.link";
+                background: "transparent";
+                borderColor: "transparent";
+                _hover: {
+                    color: "text.link";
+                    textDecoration: "underline";
+                };
+                _active: {
+                    color: "text.link.pressed";
+                };
+                _disabled: {
+                    color: "text.disabled";
+                    _hover: {
+                        color: "text.disabled";
+                        textDecoration: "none";
+                    };
+                };
+                _loading: {
+                    background: "text.inverse";
+                };
+            };
+        };
+        unstyled: {
+            display: "inline";
+            color: "inherit";
+            backgroundColor: "transparent";
+            border: "none";
+            outline: "none";
+            margin: "0";
+            padding: "0";
+            fontSize: "inherit";
+            fontWeight: "inherit";
+            lineHeight: "inherit";
+            userSelect: "inherit";
+            textAlign: "inherit";
+        };
+    };
+    size: {
+        sm: {
+            borderRadius: "sm";
+            textStyle: string;
+            fontWeight: "regular";
+            _isRounded: {
+                borderRadius: "full";
+            };
+            _loading: {
+                borderRadius: "sm";
+                _isRounded: {
+                    borderRadius: "full";
+                };
+            };
+            _hasIcon: {
+                paddingX: string;
+                paddingY: string;
+                _nextTheme: {
+                    paddingX: string;
+                    paddingY: string;
+                };
+            };
+            _hasLabel: {
+                paddingX: string;
+                paddingY: string;
+                _hasIcon: {
+                    '&[data-icon-position=left]': {
+                        paddingLeft: "1.5";
+                        paddingRight: "2";
+                    };
+                    '&[data-icon-position=right]': {
+                        paddingLeft: "2";
+                        paddingRight: "1.5";
+                    };
+                };
+                _nextTheme: {
+                    paddingX: string;
+                    paddingY: string;
+                    _hasIcon: {
+                        '&[data-icon-position=left]': {
+                            paddingLeft: "2xs";
+                            paddingRight: "xs";
+                        };
+                        '&[data-icon-position=right]': {
+                            paddingLeft: "xs";
+                            paddingRight: "2xs";
+                        };
+                    };
+                };
+            };
+        };
+        md: {
+            borderRadius: "md";
+            textStyle: string;
+            fontWeight: "semiBold";
+            _isRounded: {
+                borderRadius: "full";
+            };
+            _loading: {
+                borderRadius: "md";
+                _isRounded: {
+                    borderRadius: "full";
+                };
+            };
+            _hasIcon: {
+                paddingX: string;
+                paddingY: string;
+                _nextTheme: {
+                    paddingX: string;
+                    paddingY: string;
+                };
+            };
+            _hasLabel: {
+                paddingX: string;
+                paddingY: string;
+                _hasIcon: {
+                    '&[data-icon-position=left]': {
+                        paddingLeft: "3";
+                        paddingRight: "4";
+                    };
+                    '&[data-icon-position=right]': {
+                        paddingLeft: "4";
+                        paddingRight: "3";
+                    };
+                };
+                _nextTheme: {
+                    paddingX: string;
+                    paddingY: string;
+                    _hasIcon: {
+                        '&[data-icon-position=left]': {
+                            paddingLeft: "sm";
+                            paddingRight: "md";
+                        };
+                        '&[data-icon-position=right]': {
+                            paddingLeft: "md";
+                            paddingRight: "sm";
+                        };
+                    };
+                };
+            };
+        };
+    };
+}>;
+declare const buttonGroupRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
 
 export { buttonGroupRecipe, buttonRecipe };