@mekari/pixel3-theme 0.2.2-dev.4 → 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 = {
@@ -239,7 +239,8 @@ var tagSlotRecipe = (0, import_dev3.defineSlotRecipe)({
   defaultVariants: {
     size: "md",
     variant: "gray"
-  }
+  },
+  staticCss: ["*"]
 });
 
 // src/recipes/avatar.ts
@@ -522,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",
@@ -647,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",
@@ -1845,7 +1849,8 @@ var popoverContentRecipe = (0, import_dev13.defineRecipe)({
   defaultVariants: {
     isDark: false,
     isUnstyled: false
-  }
+  },
+  staticCss: ["*"]
 });
 var popoverListRecipe = (0, import_dev13.defineRecipe)({
   className: "popover-list",
@@ -1892,7 +1897,7 @@ var popoverListItemRecipe = (0, import_dev13.defineRecipe)({
         color: "text.default"
       }
     },
-    _active: {
+    '&[data-active="true"]': {
       background: "ice.50",
       color: "dark",
       outline: 0,
@@ -4038,7 +4043,8 @@ var toastSlotRecipe = (0, import_dev31.defineSlotRecipe)({
   variants: {
     variant: {
       success: {},
-      error: {}
+      error: {},
+      greeting: {}
     }
   },
   compoundVariants: [
@@ -4063,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: {
@@ -4198,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"
+          }
+        }
       }
     }
   },
@@ -5081,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,
@@ -5127,6 +5186,11 @@ var autocompleteSlotRecipe = (0, import_dev37.defineSlotRecipe)({
     },
     input: {
       cursor: "pointer"
+    },
+    infinityScroll: {
+      height: "1px",
+      width: "100%",
+      marginTop: "-1px"
     }
   }
 });
@@ -5240,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",
@@ -5831,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,
@@ -5858,7 +6028,8 @@ var recipes = {
   dateItemRecipe,
   monthItemRecipe,
   yearItemRecipe,
-  timeItemRecipe
+  timeItemRecipe,
+  textlinkRecipe
 };
 var slotRecipes = {
   accordionSlotRecipe,
@@ -5909,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)",
@@ -5953,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" },
@@ -5965,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" },
@@ -6108,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 },
@@ -6125,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" },
@@ -6137,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)"]
   },
@@ -6178,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" },
@@ -6208,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" },
@@ -6230,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 },
@@ -6243,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"'
   },
@@ -6252,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" },
@@ -6260,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" },
@@ -6284,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,
@@ -6302,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" },
@@ -6316,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" },
@@ -6489,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" },
@@ -6500,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" },
@@ -6517,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}"]
   },
@@ -6546,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,
@@ -6564,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: {
@@ -7484,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"
@@ -7544,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
 });
@@ -7583,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: {

package/dist/index.mjs

@@ -213,7 +213,8 @@ var tagSlotRecipe = defineSlotRecipe({
   defaultVariants: {
     size: "md",
     variant: "gray"
-  }
+  },
+  staticCss: ["*"]
 });
 
 // src/recipes/avatar.ts
@@ -496,7 +497,7 @@ var aireneButtonSlotRecipe = defineSlotRecipe3({
       color: "blue.400!",
       borderRadius: "25px!",
       fontSize: "md",
-      fontWeight: "semiBold",
+      fontWeight: "semiBold!",
       paddingLeft: "0.625rem!",
       paddingRight: "0.625rem!",
       overflow: "hidden",
@@ -621,6 +622,9 @@ var buttonRecipe = defineRecipe({
     transitionDuration: "250ms",
     transitionProperty: "background, border-color, color, box-shadow",
     transitionTimingFunction: "linear",
+    _isFullWidth: {
+      width: "full"
+    },
     _loading: {
       cursor: "wait",
       position: "absolute",
@@ -1819,7 +1823,8 @@ var popoverContentRecipe = defineRecipe5({
   defaultVariants: {
     isDark: false,
     isUnstyled: false
-  }
+  },
+  staticCss: ["*"]
 });
 var popoverListRecipe = defineRecipe5({
   className: "popover-list",
@@ -1866,7 +1871,7 @@ var popoverListItemRecipe = defineRecipe5({
         color: "text.default"
       }
     },
-    _active: {
+    '&[data-active="true"]': {
       background: "ice.50",
       color: "dark",
       outline: 0,
@@ -4012,7 +4017,8 @@ var toastSlotRecipe = defineSlotRecipe20({
   variants: {
     variant: {
       success: {},
-      error: {}
+      error: {},
+      greeting: {}
     }
   },
   compoundVariants: [
@@ -4037,6 +4043,25 @@ var toastSlotRecipe = defineSlotRecipe20({
           }
         }
       }
+    },
+    {
+      variant: "greeting",
+      css: {
+        root: {
+          borderRadius: "999px",
+          border: "none",
+          backgroundColor: "overlay",
+          _nextTheme: {
+            backgroundColor: "background.overlay"
+          }
+        },
+        label: {
+          color: "white",
+          _nextTheme: {
+            color: "text.inverse-static"
+          }
+        }
+      }
     }
   ],
   defaultVariants: {
@@ -4172,6 +4197,32 @@ var broadcastSlotRecipe = defineSlotRecipe21({
             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"
+          }
+        }
       }
     }
   },
@@ -5055,7 +5106,15 @@ import { defineSlotRecipe as defineSlotRecipe26 } from "@pandacss/dev";
 var autocompleteSlotRecipe = defineSlotRecipe26({
   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,
@@ -5101,6 +5160,11 @@ var autocompleteSlotRecipe = defineSlotRecipe26({
     },
     input: {
       cursor: "pointer"
+    },
+    infinityScroll: {
+      height: "1px",
+      width: "100%",
+      marginTop: "-1px"
     }
   }
 });
@@ -5214,11 +5278,13 @@ var timelineLogSlotRecipe = defineSlotRecipe27({
   base: {
     root: {
       display: "flex",
-      flexDirection: "column"
+      flexDirection: "column",
+      gap: "1"
     },
     log: {
       display: "flex",
-      cursor: "pointer"
+      cursor: "pointer",
+      gap: "1"
     },
     logText: {
       color: "gray.400",
@@ -5805,6 +5871,110 @@ var tourSlotRecipe = defineSlotRecipe31({
   defaultVariants: {}
 });
 
+// src/recipes/textlink.ts
+import { defineRecipe as defineRecipe14 } from "@pandacss/dev";
+var textlinkRecipe = defineRecipe14({
+  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,
@@ -5832,7 +6002,8 @@ var recipes = {
   dateItemRecipe,
   monthItemRecipe,
   yearItemRecipe,
-  timeItemRecipe
+  timeItemRecipe,
+  textlinkRecipe
 };
 var slotRecipes = {
   accordionSlotRecipe,
@@ -6242,7 +6413,7 @@ var fontWeights = defineTokens10.fontWeights({
 var lineHeights = defineTokens10.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 },

package/dist/recipes/index.d.mts

@@ -27,6 +27,7 @@ declare const recipes: {
     monthItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     yearItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     timeItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
+    textlinkRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
 };
 declare const slotRecipes: {
     accordionSlotRecipe: _pandacss_types.SlotRecipeConfig;

package/dist/recipes/index.d.ts

@@ -27,6 +27,7 @@ declare const recipes: {
     monthItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     yearItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     timeItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
+    textlinkRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
 };
 declare const slotRecipes: {
     accordionSlotRecipe: _pandacss_types.SlotRecipeConfig;

package/dist/recipes/textlink.d.mts

@@ -0,0 +1,5 @@
+import * as _pandacss_dev from '@pandacss/dev';
+
+declare const textlinkRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+
+export { textlinkRecipe };

package/dist/recipes/textlink.d.ts

@@ -0,0 +1,5 @@
+import * as _pandacss_dev from '@pandacss/dev';
+
+declare const textlinkRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+
+export { textlinkRecipe };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mekari/pixel3-theme",
   "description": "Theme for mekari pixel 3",
-  "version": "0.2.2-dev.4",
+  "version": "0.2.2-dev.5",
   "main": "dist/index.js",
   "license": "MIT",
   "files": [

package/src/recipes/airene-button.ts

@@ -14,7 +14,7 @@ const aireneButtonSlotRecipe = defineSlotRecipe({
       color: 'blue.400!',
       borderRadius: '25px!',
       fontSize: 'md',
-      fontWeight: 'semiBold',
+      fontWeight: 'semiBold!',
       paddingLeft: '0.625rem!',
       paddingRight: '0.625rem!',
       overflow: 'hidden',

package/src/recipes/autocomplete.ts

@@ -3,10 +3,19 @@ import { defineSlotRecipe } from '@pandacss/dev'
 const autocompleteSlotRecipe = 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, py: 2 
+      px: 3,
+      py: 2
     },
     popoverContent: {
       maxHeight: '300px',
@@ -32,24 +41,29 @@ const autocompleteSlotRecipe = defineSlotRecipe({
       _nextTheme: {
         background: 'background.stage',
         borderColor: 'border.default',
-        color: 'text.link',
+        color: 'text.link'
       }
     },
     emptyText: {
-      px: 3, 
+      px: 3,
       py: 2
     },
     contentLoading: {
-      px: 3, 
-      py: 2, 
-      display: 'flex', 
-      alignItems: 'center', 
+      px: 3,
+      py: 2,
+      display: 'flex',
+      alignItems: 'center',
       gap: 3
     },
     input: {
       cursor: 'pointer'
+    },
+    infinityScroll: {
+      height: '1px',
+      width: '100%',
+      marginTop: '-1px'
     }
-  },
+  }
 })
 
 export { autocompleteSlotRecipe }

package/src/recipes/broadcast.ts

@@ -126,7 +126,33 @@ const broadcastSlotRecipe = 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'
+          } 
+        }
+      },
     }
   },
   compoundVariants: [],

package/src/recipes/button.ts

@@ -20,6 +20,9 @@ const buttonRecipe = defineRecipe({
     transitionDuration: '250ms',
     transitionProperty: 'background, border-color, color, box-shadow',
     transitionTimingFunction: 'linear',
+    _isFullWidth: {
+      width: 'full'
+    },
     _loading: {
       cursor: 'wait',
       position: 'absolute',

package/src/recipes/index.ts

@@ -64,6 +64,7 @@ import {
 import { colorPickerSlotRecipe } from './color-picker'
 import { sliderSlotRecipe } from './slider'
 import { tourSlotRecipe } from './tour'
+import { textlinkRecipe } from './textlink'
 
 export const recipes = {
   buttonRecipe,
@@ -91,7 +92,8 @@ export const recipes = {
   dateItemRecipe,
   monthItemRecipe,
   yearItemRecipe,
-  timeItemRecipe
+  timeItemRecipe,
+  textlinkRecipe
 }
 
 export const slotRecipes = {

package/src/recipes/popover.ts

@@ -34,7 +34,8 @@ const popoverContentRecipe = defineRecipe({
   defaultVariants: {
     isDark: false,
     isUnstyled: false
-  }
+  },
+  staticCss: ['*']
 })
 
 const popoverListRecipe = defineRecipe({
@@ -83,7 +84,7 @@ const popoverListItemRecipe = defineRecipe({
         color: 'text.default'
       }
     },
-    _active: {
+    '&[data-active="true"]': {
       background: 'ice.50',
       color: 'dark',
       outline: 0,

package/src/recipes/tag.ts

@@ -124,7 +124,8 @@ const tagSlotRecipe = defineSlotRecipe({
   defaultVariants: {
     size: 'md',
     variant: 'gray'
-  }
+  },
+  staticCss: ['*']
 })
 
 export { tagSlotRecipe }

package/src/recipes/textlink.ts

@@ -0,0 +1,105 @@
+import { defineRecipe } from '@pandacss/dev'
+
+const textlinkRecipe = 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'
+        }
+      }
+    }
+  ]
+})
+
+export { textlinkRecipe}

package/src/recipes/timeline.ts

@@ -109,11 +109,13 @@ const timelineLogSlotRecipe = defineSlotRecipe({
   base: {
     root: {
       display: 'flex',
-      flexDirection: 'column'
+      flexDirection: 'column',
+      gap: '1'
     },
     log: {
       display: 'flex',
-      cursor: 'pointer'
+      cursor: 'pointer',
+      gap: '1'
     },
     logText: {
       color: 'gray.400',

package/src/recipes/toast.ts

@@ -30,7 +30,8 @@ const toastSlotRecipe = defineSlotRecipe({
   variants: {
     variant: {
       success: {},
-      error: {}
+      error: {},
+      greeting: {}
     }
   },
   compoundVariants: [
@@ -55,6 +56,25 @@ const toastSlotRecipe = defineSlotRecipe({
           } 
         }
       }
+    },
+    {
+      variant: 'greeting',
+      css: {
+        root: { 
+          borderRadius: '999px',
+          border: 'none',
+          backgroundColor: 'overlay',
+          _nextTheme: {
+            backgroundColor: 'background.overlay',
+          } 
+        },
+        label: {
+          color: 'white',
+          _nextTheme: {
+            color: 'text.inverse-static',
+          }
+        }
+      }
     }
   ],
   defaultVariants: {

package/src/tokens/typography.ts

@@ -28,7 +28,7 @@ export const fontWeights = defineTokens.fontWeights({
 export const lineHeights = 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 },