@mekari/pixel3-theme 0.2.2-dev.3 → 0.2.2-dev.5

package/dist/index.js

@@ -25,7 +25,7 @@ __export(theme_exports, {
 module.exports = __toCommonJS(theme_exports);
 
 // src/index.ts
-var import_dev64 = require("@pandacss/dev");
+var import_dev65 = require("@pandacss/dev");
 
 // src/breakpoints.ts
 var breakpoints = {
@@ -234,18 +234,13 @@ var tagSlotRecipe = (0, import_dev3.defineSlotRecipe)({
           }
         }
       }
-    },
-    {
-      size: "sm",
-      css: {
-        close: { paddingTop: "0" }
-      }
     }
   ],
   defaultVariants: {
     size: "md",
     variant: "gray"
-  }
+  },
+  staticCss: ["*"]
 });
 
 // src/recipes/avatar.ts
@@ -528,7 +523,7 @@ var aireneButtonSlotRecipe = (0, import_dev5.defineSlotRecipe)({
       color: "blue.400!",
       borderRadius: "25px!",
       fontSize: "md",
-      fontWeight: "semiBold",
+      fontWeight: "semiBold!",
       paddingLeft: "0.625rem!",
       paddingRight: "0.625rem!",
       overflow: "hidden",
@@ -653,6 +648,9 @@ var buttonRecipe = (0, import_dev6.defineRecipe)({
     transitionDuration: "250ms",
     transitionProperty: "background, border-color, color, box-shadow",
     transitionTimingFunction: "linear",
+    _isFullWidth: {
+      width: "full"
+    },
     _loading: {
       cursor: "wait",
       position: "absolute",
@@ -1507,15 +1505,15 @@ var selectSlotRecipe = (0, import_dev8.defineSlotRecipe)({
           }
         },
         _focus: {
-          borderColor: "transparent",
+          borderColor: "border.focused",
           boxShadow: "focus",
           _hover: {
-            borderColor: "transparent"
+            borderColor: "border.focused"
           },
           _invalid: {
-            borderColor: "transparent",
+            borderColor: "border.focused",
             _hover: {
-              borderColor: "transparent"
+              borderColor: "border.focused"
             }
           }
         },
@@ -1851,7 +1849,8 @@ var popoverContentRecipe = (0, import_dev13.defineRecipe)({
   defaultVariants: {
     isDark: false,
     isUnstyled: false
-  }
+  },
+  staticCss: ["*"]
 });
 var popoverListRecipe = (0, import_dev13.defineRecipe)({
   className: "popover-list",
@@ -1898,7 +1897,7 @@ var popoverListItemRecipe = (0, import_dev13.defineRecipe)({
         color: "text.default"
       }
     },
-    _active: {
+    '&[data-active="true"]': {
       background: "ice.50",
       color: "dark",
       outline: 0,
@@ -3341,43 +3340,49 @@ var inputTagSlotRecipe = (0, import_dev25.defineSlotRecipe)({
 
 // src/recipes/divider.ts
 var import_dev26 = require("@pandacss/dev");
-var dividerRecipe = (0, import_dev26.defineRecipe)({
+var dividerSlotRecipe = (0, import_dev26.defineSlotRecipe)({
   className: "divider",
   jsx: ["MpDivider", "mp-divider"],
+  slots: ["root", "label"],
   base: {
-    border: 0,
-    opacity: 0.6,
-    color: "rgb(208, 214, 221)",
-    _nextTheme: {
-      color: "border.default",
-      opacity: 1
-    }
-  },
-  variants: {
-    variant: {
-      solid: {
-        borderStyle: "solid"
-      },
-      dashed: {
-        borderStyle: "dashed"
+    root: {
+      position: "relative",
+      borderColor: "gray.100",
+      color: "gray.100",
+      _nextTheme: {
+        color: "text.secondary",
+        borderColor: "border.default"
       }
     },
-    orientation: {
-      horizontal: {
-        borderBottom: "0.0625rem solid",
-        height: "auto",
-        marginY: 2
+    label: {
+      display: "flex",
+      alignItems: "center",
+      borderColor: "gray.100",
+      color: "gray.600",
+      _nextTheme: {
+        color: "text.secondary"
       },
-      vertical: {
-        borderLeft: "0.0625rem solid",
-        height: "auto",
-        marginX: 2
+      _before: {
+        content: '""',
+        flex: 1,
+        borderTopWidth: "0.0625rem",
+        marginRight: "2",
+        borderColor: "gray.100",
+        _nextTheme: {
+          borderColor: "border.default"
+        }
+      },
+      _after: {
+        content: '""',
+        flex: 1,
+        borderTopWidth: "0.0625rem",
+        marginLeft: "2",
+        borderColor: "gray.100",
+        _nextTheme: {
+          borderColor: "border.default"
+        }
       }
     }
-  },
-  compoundVariants: [],
-  defaultVariants: {
-    orientation: "horizontal"
   }
 });
 
@@ -3484,7 +3489,10 @@ var modalSlotRecipe = (0, import_dev27.defineSlotRecipe)({
       top: "0",
       w: "100vw",
       h: "100vh",
-      zIndex: "overlay"
+      zIndex: "overlay",
+      _nextTheme: {
+        background: "background.overlay"
+      }
     }
   },
   variants: {
@@ -4035,7 +4043,8 @@ var toastSlotRecipe = (0, import_dev31.defineSlotRecipe)({
   variants: {
     variant: {
       success: {},
-      error: {}
+      error: {},
+      greeting: {}
     }
   },
   compoundVariants: [
@@ -4060,6 +4069,25 @@ var toastSlotRecipe = (0, import_dev31.defineSlotRecipe)({
           }
         }
       }
+    },
+    {
+      variant: "greeting",
+      css: {
+        root: {
+          borderRadius: "999px",
+          border: "none",
+          backgroundColor: "overlay",
+          _nextTheme: {
+            backgroundColor: "background.overlay"
+          }
+        },
+        label: {
+          color: "white",
+          _nextTheme: {
+            color: "text.inverse-static"
+          }
+        }
+      }
     }
   ],
   defaultVariants: {
@@ -4195,6 +4223,32 @@ var broadcastSlotRecipe = (0, import_dev32.defineSlotRecipe)({
             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"
+          }
+        }
       }
     }
   },
@@ -4702,7 +4756,10 @@ var monthItemRecipe = (0, import_dev34.defineRecipe)({
       color: "gray.400",
       cursor: "not-allowed",
       borderColor: "transparent",
-      backgroundColor: "transparent"
+      backgroundColor: "transparent",
+      _nextTheme: {
+        color: "text.disabled"
+      }
     },
     _nextTheme: {
       color: "text.default"
@@ -4781,7 +4838,10 @@ var yearItemRecipe = (0, import_dev34.defineRecipe)({
       color: "gray.400",
       cursor: "not-allowed",
       borderColor: "transparent",
-      backgroundColor: "transparent"
+      backgroundColor: "transparent",
+      _nextTheme: {
+        color: "text.disabled"
+      }
     },
     _nextTheme: {
       color: "text.default"
@@ -4860,7 +4920,10 @@ var timeItemRecipe = (0, import_dev34.defineRecipe)({
       color: "gray.400",
       cursor: "not-allowed",
       borderColor: "transparent",
-      backgroundColor: "transparent"
+      backgroundColor: "transparent",
+      _nextTheme: {
+        color: "text.disabled"
+      }
     },
     _nextTheme: {
       color: "text.default"
@@ -5069,7 +5132,15 @@ var import_dev37 = require("@pandacss/dev");
 var autocompleteSlotRecipe = (0, import_dev37.defineSlotRecipe)({
   className: "autocomplete",
   jsx: ["MpAutocomplete", "mp-autocomplete"],
-  slots: ["groupText", "popoverContent", "buttonAction", "emptyText", "contentLoading", "input"],
+  slots: [
+    "groupText",
+    "popoverContent",
+    "buttonAction",
+    "emptyText",
+    "contentLoading",
+    "input",
+    "infinityScroll"
+  ],
   base: {
     groupText: {
       px: 3,
@@ -5115,6 +5186,11 @@ var autocompleteSlotRecipe = (0, import_dev37.defineSlotRecipe)({
     },
     input: {
       cursor: "pointer"
+    },
+    infinityScroll: {
+      height: "1px",
+      width: "100%",
+      marginTop: "-1px"
     }
   }
 });
@@ -5228,11 +5304,13 @@ var timelineLogSlotRecipe = (0, import_dev38.defineSlotRecipe)({
   base: {
     root: {
       display: "flex",
-      flexDirection: "column"
+      flexDirection: "column",
+      gap: "1"
     },
     log: {
       display: "flex",
-      cursor: "pointer"
+      cursor: "pointer",
+      gap: "1"
     },
     logText: {
       color: "gray.400",
@@ -5819,6 +5897,110 @@ var tourSlotRecipe = (0, import_dev42.defineSlotRecipe)({
   defaultVariants: {}
 });
 
+// src/recipes/textlink.ts
+var import_dev43 = require("@pandacss/dev");
+var textlinkRecipe = (0, import_dev43.defineRecipe)({
+  className: "textlink",
+  jsx: ["MpTextlink", "mp-textlink"],
+  base: {
+    display: "inline-flex !important",
+    gap: "1",
+    py: "0 !important",
+    px: "2px !important",
+    backgroundColor: "transparent !important",
+    textStyle: "label.md !important",
+    _hover: {
+      textDecoration: "underline"
+    },
+    _loading: {
+      background: "white"
+    }
+  },
+  variants: {
+    variant: {
+      primary: {
+        color: "blue.400",
+        _hover: {
+          color: "blue.400"
+        },
+        _active: {
+          color: "blue.700"
+        },
+        _nextTheme: {
+          color: "text.link",
+          _hover: {
+            color: "text.link"
+          },
+          _active: {
+            color: "text.link.pressed"
+          }
+        }
+      },
+      secondary: {
+        color: "gray.400",
+        _hover: {
+          color: "gray.400"
+        },
+        _active: {
+          color: "gray.700"
+        },
+        _nextTheme: {
+          color: "text.secondary",
+          _hover: {
+            color: "text.secondary"
+          },
+          _active: {
+            color: "text.secondary.pressed"
+          }
+        }
+      },
+      danger: {
+        color: "red.400",
+        _hover: {
+          color: "red.400"
+        },
+        _active: {
+          color: "red.700"
+        },
+        _nextTheme: {
+          color: "text.danger",
+          _hover: {
+            color: "text.danger"
+          },
+          _active: {
+            color: "text.danger.pressed"
+          }
+        }
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      variant: ["primary", "secondary", "danger"],
+      css: {
+        _disabled: {
+          cursor: "not-allowed",
+          color: "gray.100",
+          _hover: {
+            color: "gray.100",
+            textDecoration: "none"
+          },
+          _nextTheme: {
+            color: "text.disabled",
+            _hover: {
+              color: "text.disabled",
+              textDecoration: "none"
+            }
+          }
+        },
+        _focusVisible: {
+          boxShadow: "focus"
+        }
+      }
+    }
+  ]
+});
+
 // src/recipes/index.ts
 var recipes = {
   buttonRecipe,
@@ -5836,7 +6018,6 @@ var recipes = {
   tabSelectedBorderRecipe,
   tableRecipe,
   tableContainerRecipe,
-  dividerRecipe,
   bannerTitleRecipe,
   bannerDescriptionRecipe,
   bannerLinkRecipe,
@@ -5847,11 +6028,13 @@ var recipes = {
   dateItemRecipe,
   monthItemRecipe,
   yearItemRecipe,
-  timeItemRecipe
+  timeItemRecipe,
+  textlinkRecipe
 };
 var slotRecipes = {
   accordionSlotRecipe,
   checkboxSlotRecipe,
+  dividerSlotRecipe,
   radioSlotRecipe,
   sharedSlotRecipe,
   progressSlotRecipe,
@@ -5897,8 +6080,8 @@ var slotRecipes = {
 };
 
 // src/text-styles.ts
-var import_dev43 = require("@pandacss/dev");
-var textStyles = (0, import_dev43.defineTextStyles)({
+var import_dev44 = require("@pandacss/dev");
+var textStyles = (0, import_dev44.defineTextStyles)({
   overline: {
     value: {
       fontFamily: "var(--font-inter)",
@@ -5941,11 +6124,11 @@ var textStyles = (0, import_dev43.defineTextStyles)({
 });
 
 // src/tokens/index.ts
-var import_dev54 = require("@pandacss/dev");
+var import_dev55 = require("@pandacss/dev");
 
 // src/tokens/borders.ts
-var import_dev44 = require("@pandacss/dev");
-var borderWidths = import_dev44.defineTokens.borderWidths({
+var import_dev45 = require("@pandacss/dev");
+var borderWidths = import_dev45.defineTokens.borderWidths({
   none: { value: "none" },
   sm: { value: "1px" },
   md: { value: "1.5px" },
@@ -5953,8 +6136,8 @@ var borderWidths = import_dev44.defineTokens.borderWidths({
 });
 
 // src/tokens/colors.ts
-var import_dev45 = require("@pandacss/dev");
-var colors = import_dev45.defineTokens.colors({
+var import_dev46 = require("@pandacss/dev");
+var colors = import_dev46.defineTokens.colors({
   debug: { value: "blue" },
   currentcolor: { value: "currentcolor" },
   dark: { value: "#232933" },
@@ -6096,16 +6279,16 @@ var colors = import_dev45.defineTokens.colors({
 });
 
 // src/tokens/durations.ts
-var import_dev46 = require("@pandacss/dev");
-var durations = import_dev46.defineTokens.durations({
+var import_dev47 = require("@pandacss/dev");
+var durations = import_dev47.defineTokens.durations({
   slow: { value: "100ms" },
   normal: { value: "250ms" },
   fast: { value: "300ms" }
 });
 
 // src/tokens/opacity.ts
-var import_dev47 = require("@pandacss/dev");
-var opacity = import_dev47.defineTokens.opacity({
+var import_dev48 = require("@pandacss/dev");
+var opacity = import_dev48.defineTokens.opacity({
   0: { value: 0 },
   40: { value: 0.4 },
   60: { value: 0.6 },
@@ -6113,8 +6296,8 @@ var opacity = import_dev47.defineTokens.opacity({
 });
 
 // src/tokens/radii.ts
-var import_dev48 = require("@pandacss/dev");
-var radii = import_dev48.defineTokens.radii({
+var import_dev49 = require("@pandacss/dev");
+var radii = import_dev49.defineTokens.radii({
   none: { value: "0" },
   xs: { value: "0.125rem", description: "2px" },
   sm: { value: "0.25rem", description: "4px" },
@@ -6125,8 +6308,8 @@ var radii = import_dev48.defineTokens.radii({
 });
 
 // src/tokens/shadows.ts
-var import_dev49 = require("@pandacss/dev");
-var shadows = import_dev49.defineTokens.shadows({
+var import_dev50 = require("@pandacss/dev");
+var shadows = import_dev50.defineTokens.shadows({
   xs: {
     value: ["0px 0px 2px 0px rgba(0, 0, 0, 0.12)", "0px 2px 4px 0px rgba(0, 0, 0, 0.14)"]
   },
@@ -6166,8 +6349,8 @@ var shadows = import_dev49.defineTokens.shadows({
 });
 
 // src/tokens/sizes.ts
-var import_dev50 = require("@pandacss/dev");
-var sizes = import_dev50.defineTokens.sizes({
+var import_dev51 = require("@pandacss/dev");
+var sizes = import_dev51.defineTokens.sizes({
   0: { value: "0" },
   0.25: { value: "0.0625rem" },
   0.5: { value: "0.125rem" },
@@ -6196,8 +6379,8 @@ var sizes = import_dev50.defineTokens.sizes({
 });
 
 // src/tokens/spacing.ts
-var import_dev51 = require("@pandacss/dev");
-var spacing = import_dev51.defineTokens.spacing({
+var import_dev52 = require("@pandacss/dev");
+var spacing = import_dev52.defineTokens.spacing({
   0: { value: "0" },
   0.5: { value: "0.125rem", description: "2px" },
   1: { value: "0.25rem", description: "4px" },
@@ -6218,8 +6401,8 @@ var spacing = import_dev51.defineTokens.spacing({
 });
 
 // src/tokens/z-index.ts
-var import_dev52 = require("@pandacss/dev");
-var zIndex = import_dev52.defineTokens.zIndex({
+var import_dev53 = require("@pandacss/dev");
+var zIndex = import_dev53.defineTokens.zIndex({
   hide: { value: -1 },
   base: { value: 0 },
   docked: { value: 10 },
@@ -6231,8 +6414,8 @@ var zIndex = import_dev52.defineTokens.zIndex({
 });
 
 // src/tokens/typography.ts
-var import_dev53 = require("@pandacss/dev");
-var fonts = import_dev53.defineTokens.fonts({
+var import_dev54 = require("@pandacss/dev");
+var fonts = import_dev54.defineTokens.fonts({
   body: {
     value: '"Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
   },
@@ -6240,7 +6423,7 @@ var fonts = import_dev53.defineTokens.fonts({
     value: 'SFMono-Regular, Menlo, Monaco,Consolas, "Liberation Mono", "Courier New", monospace'
   }
 });
-var fontSizes = import_dev53.defineTokens.fontSizes({
+var fontSizes = import_dev54.defineTokens.fontSizes({
   xs: { value: "0.625rem" },
   sm: { value: "0.75rem" },
   md: { value: "0.875rem" },
@@ -6248,21 +6431,21 @@ var fontSizes = import_dev53.defineTokens.fontSizes({
   xl: { value: "1.25rem" },
   "2xl": { value: "1.5rem" }
 });
-var fontWeights = import_dev53.defineTokens.fontWeights({
+var fontWeights = import_dev54.defineTokens.fontWeights({
   regular: { value: "400" },
   semiBold: { value: "600" },
   bold: { value: "800" }
 });
-var lineHeights = import_dev53.defineTokens.lineHeights({
+var lineHeights = import_dev54.defineTokens.lineHeights({
   xs: { value: 1.2 },
   sm: { value: 1.34 },
-  md: { value: 1.4 },
+  md: { value: 1.43 },
   lg: { value: 1.429 },
   xl: { value: 1.5 },
   "2xl": { value: 1.67 },
   "3xl": { value: 1.71 }
 });
-var letterSpacings = import_dev53.defineTokens.letterSpacings({
+var letterSpacings = import_dev54.defineTokens.letterSpacings({
   tighter: { value: "-0.05em" },
   tight: { value: "-0.025em" },
   normal: { value: "0" },
@@ -6272,7 +6455,7 @@ var letterSpacings = import_dev53.defineTokens.letterSpacings({
 });
 
 // src/tokens/index.ts
-var tokens = (0, import_dev54.defineTokens)({
+var tokens = (0, import_dev55.defineTokens)({
   borderWidths,
   colors,
   durations,
@@ -6290,11 +6473,11 @@ var tokens = (0, import_dev54.defineTokens)({
 });
 
 // src/tokens-next/index.ts
-var import_dev60 = require("@pandacss/dev");
+var import_dev61 = require("@pandacss/dev");
 
 // src/tokens-next/borders.ts
-var import_dev55 = require("@pandacss/dev");
-var borderWidths2 = import_dev55.defineTokens.borderWidths({
+var import_dev56 = require("@pandacss/dev");
+var borderWidths2 = import_dev56.defineTokens.borderWidths({
   none: { value: "none" },
   sm: { value: "1px" },
   md: { value: "1.5px" },
@@ -6304,8 +6487,8 @@ var borderWidths2 = import_dev55.defineTokens.borderWidths({
 });
 
 // src/tokens-next/colors.ts
-var import_dev56 = require("@pandacss/dev");
-var colors2 = import_dev56.defineTokens.colors({
+var import_dev57 = require("@pandacss/dev");
+var colors2 = import_dev57.defineTokens.colors({
   debug: { value: "red" },
   currentcolor: { value: "currentcolor" },
   white: { value: "#FFFFFF" },
@@ -6477,8 +6660,8 @@ var colors2 = import_dev56.defineTokens.colors({
 });
 
 // src/tokens-next/radii.ts
-var import_dev57 = require("@pandacss/dev");
-var radii2 = import_dev57.defineTokens.radii({
+var import_dev58 = require("@pandacss/dev");
+var radii2 = import_dev58.defineTokens.radii({
   none: { value: "0" },
   sm: { value: "0.25rem", description: "4px" },
   md: { value: "0.375rem", description: "6px" },
@@ -6488,8 +6671,8 @@ var radii2 = import_dev57.defineTokens.radii({
 });
 
 // src/tokens-next/spacing.ts
-var import_dev58 = require("@pandacss/dev");
-var spacing2 = import_dev58.defineTokens.spacing({
+var import_dev59 = require("@pandacss/dev");
+var spacing2 = import_dev59.defineTokens.spacing({
   0: { value: "0" },
   0.5: { value: "0.125rem", description: "2px" },
   1: { value: "0.25rem", description: "4px" },
@@ -6505,8 +6688,8 @@ var spacing2 = import_dev58.defineTokens.spacing({
 });
 
 // src/tokens-next/shadows.ts
-var import_dev59 = require("@pandacss/dev");
-var shadows2 = import_dev59.defineTokens.shadows({
+var import_dev60 = require("@pandacss/dev");
+var shadows2 = import_dev60.defineTokens.shadows({
   xs: {
     value: ["0px 2px 4px 0px {colors.background.shadow}", "0px 0px 2px 0px {colors.background.shadow}"]
   },
@@ -6534,7 +6717,7 @@ var shadows2 = import_dev59.defineTokens.shadows({
 });
 
 // src/tokens-next/index.ts
-var tokensNext = (0, import_dev60.defineTokens)({
+var tokensNext = (0, import_dev61.defineTokens)({
   borderWidths: borderWidths2,
   colors: colors2,
   durations,
@@ -6552,11 +6735,11 @@ var tokensNext = (0, import_dev60.defineTokens)({
 });
 
 // src/semanticTokens/index.ts
-var import_dev63 = require("@pandacss/dev");
+var import_dev64 = require("@pandacss/dev");
 
 // src/semanticTokens/colors.ts
-var import_dev61 = require("@pandacss/dev");
-var colors3 = import_dev61.defineSemanticTokens.colors({
+var import_dev62 = require("@pandacss/dev");
+var colors3 = import_dev62.defineSemanticTokens.colors({
   background: {
     surface: {
       value: {
@@ -7472,8 +7655,8 @@ var colors3 = import_dev61.defineSemanticTokens.colors({
 });
 
 // src/semanticTokens/spacing.ts
-var import_dev62 = require("@pandacss/dev");
-var spacing3 = import_dev62.defineSemanticTokens.spacing({
+var import_dev63 = require("@pandacss/dev");
+var spacing3 = import_dev63.defineSemanticTokens.spacing({
   "4xs": {
     value: {
       base: "0.125rem"
@@ -7532,7 +7715,7 @@ var spacing3 = import_dev62.defineSemanticTokens.spacing({
 });
 
 // src/semanticTokens/index.ts
-var semanticTokens = (0, import_dev63.defineSemanticTokens)({
+var semanticTokens = (0, import_dev64.defineSemanticTokens)({
   colors: colors3,
   spacing: spacing3
 });
@@ -7571,7 +7754,7 @@ var globalFontface = {
 };
 
 // src/index.ts
-var preset = (0, import_dev64.definePreset)({
+var preset = (0, import_dev65.definePreset)({
   name: "@mekari/pixel3-theme",
   // Main Theme
   theme: {