@mekari/pixel3-theme 0.2.2-dev.4 → 0.2.2-dev.6

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,
@@ -1924,8 +1929,8 @@ var badgeRecipe = (0, import_dev14.defineRecipe)({
         color: "white"
       },
       subtle: {},
-      "additionalInformation": {},
-      "tableStatus": {},
+      additionalInformation: {},
+      tableStatus: {},
       indicator: {}
     },
     variantColor: {
@@ -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"
+          }
+        }
       }
     }
   },
@@ -4921,11 +4972,7 @@ var import_dev35 = require("@pandacss/dev");
 var carouselSlotRecipe = (0, import_dev35.defineSlotRecipe)({
   className: "carousel",
   jsx: ["MpCarousel", "mp-carousel"],
-  slots: [
-    "root",
-    "buttonRight",
-    "buttonLeft"
-  ],
+  slots: ["root", "buttonRight", "buttonLeft"],
   base: {
     root: {
       display: "block",
@@ -5081,7 +5128,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 +5182,11 @@ var autocompleteSlotRecipe = (0, import_dev37.defineSlotRecipe)({
     },
     input: {
       cursor: "pointer"
+    },
+    infinityScroll: {
+      height: "1px",
+      width: "100%",
+      marginTop: "-1px"
     }
   }
 });
@@ -5240,11 +5300,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",
@@ -5273,7 +5335,11 @@ var timelineSeparatorSlotRecipe = (0, import_dev38.defineSlotRecipe)({
     root: {
       display: "flex",
       flexDirection: "column",
-      alignItems: "center"
+      alignItems: "center",
+      "&[data-accordion-child=true]": {
+        alignItems: "start",
+        marginLeft: "9px"
+      }
     },
     topConnector: {
       height: "6px",
@@ -5283,8 +5349,20 @@ var timelineSeparatorSlotRecipe = (0, import_dev38.defineSlotRecipe)({
       "&[data-position=first]": {
         backgroundColor: "transparent"
       },
+      "&[data-hide=true]": {
+        backgroundColor: "transparent"
+      },
+      "&[data-accordion-child=true]": {
+        roundedBottom: ""
+      },
       _nextTheme: {
-        backgroundColor: "border.default"
+        backgroundColor: "border.default",
+        "&[data-position=first]": {
+          backgroundColor: "transparent"
+        },
+        "&[data-hide=true]": {
+          backgroundColor: "transparent"
+        }
       }
     },
     bottomConnector: {
@@ -5296,10 +5374,19 @@ var timelineSeparatorSlotRecipe = (0, import_dev38.defineSlotRecipe)({
       "&[data-position=last]": {
         backgroundColor: "transparent"
       },
+      "&[data-hide=true]": {
+        backgroundColor: "transparent"
+      },
+      "&[data-accordion-child=true]": {
+        roundedTop: ""
+      },
       _nextTheme: {
         backgroundColor: "border.default",
         "&[data-position=last]": {
           backgroundColor: "transparent"
+        },
+        "&[data-hide=true]": {
+          backgroundColor: "transparent"
         }
       }
     }
@@ -5831,6 +5918,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 +6049,8 @@ var recipes = {
   dateItemRecipe,
   monthItemRecipe,
   yearItemRecipe,
-  timeItemRecipe
+  timeItemRecipe,
+  textlinkRecipe
 };
 var slotRecipes = {
   accordionSlotRecipe,
@@ -5909,8 +6101,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 +6145,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 +6157,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 +6300,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 +6317,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 +6329,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 +6370,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 +6400,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 +6422,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 +6435,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 +6444,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 +6452,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 +6476,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 +6494,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 +6508,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 +6681,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 +6692,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,19 +6709,31 @@ 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}"]
+    value: [
+      "0px 2px 4px 0px {colors.background.shadow}",
+      "0px 0px 2px 0px {colors.background.shadow}"
+    ]
   },
   sm: {
-    value: ["0px 10px 15px -3px {colors.background.shadow}", "0px 4px 6px -2px {colors.background.shadow}"]
+    value: [
+      "0px 10px 15px -3px {colors.background.shadow}",
+      "0px 4px 6px -2px {colors.background.shadow}"
+    ]
   },
   md: {
-    value: ["0px 20px 25px -5px {colors.background.shadow}", "0px 10px 10px -5px {colors.background.shadow}"]
+    value: [
+      "0px 20px 25px -5px {colors.background.shadow}",
+      "0px 10px 10px -5px {colors.background.shadow}"
+    ]
   },
   lg: {
-    value: ["0px 25px 30px -10px {colors.background.shadow}", "0px 15px 15px -10px {colors.background.shadow}"]
+    value: [
+      "0px 25px 30px -10px {colors.background.shadow}",
+      "0px 15px 15px -10px {colors.background.shadow}"
+    ]
   },
   focus: {
     value: "0 0 0 1px {colors.border.focused}"
@@ -6546,7 +6750,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 +6768,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: {
@@ -6958,6 +7162,16 @@ var colors3 = import_dev61.defineSemanticTokens.colors({
           }
         }
       }
+    },
+    airene: {
+      value: {
+        base: "radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%)",
+        // Doens't have raw token
+        _light: "radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%)",
+        // Doesn't have raw token
+        _dark: "radial-gradient(108.28% 139.29% at 0% 0%, #1D2656 0%, #2B2549 100%)"
+        // Doesn't have raw token
+      }
     }
   },
   nav: {
@@ -7484,8 +7698,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 +7758,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 +7797,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: {