@mekari/pixel3-theme 0.0.3 → 0.0.4

package/dist/index.js

@@ -25,7 +25,7 @@ __export(theme_exports, {
 module.exports = __toCommonJS(theme_exports);
 
 // src/index.ts
-var import_dev42 = require("@pandacss/dev");
+var import_dev44 = require("@pandacss/dev");
 
 // src/breakpoints.ts
 var breakpoints = {
@@ -71,7 +71,9 @@ var globalCss = (0, import_dev.defineGlobalStyles)({
     background: "var(--mp-colors-white)",
     color: "var(--mp-colors-dark)",
     fontFamily: "var(--mp-fonts-body)",
-    fontSize: "14px",
+    fontSize: "var(--mp-font-sizes-md)",
+    fontWeight: "var(--mp-font-weights-regular)",
+    lineHeight: "var(--mp-line-heights-lg)",
     _dark: {
       colorScheme: "dark"
     }
@@ -204,6 +206,35 @@ var tagSlotRecipe = (0, import_dev3.defineSlotRecipe)({
 
 // src/recipes/avatar.ts
 var import_dev4 = require("@pandacss/dev");
+var variantColor = {
+  gray: {
+    root: { backgroundColor: "gray.50" }
+  },
+  sky: {
+    root: { backgroundColor: "sky.400" }
+  },
+  teal: {
+    root: { backgroundColor: "teal.400" }
+  },
+  violet: {
+    root: { backgroundColor: "violet.400" }
+  },
+  amber: {
+    root: { backgroundColor: "amber.400" }
+  },
+  rose: {
+    root: { backgroundColor: "rose.400" }
+  },
+  stone: {
+    root: { backgroundColor: "stone.400" }
+  },
+  lime: {
+    root: { backgroundColor: "lime.400" }
+  },
+  pink: {
+    root: { backgroundColor: "pink.400" }
+  }
+};
 var avatarSlotRecipe = (0, import_dev4.defineSlotRecipe)({
   className: "avatar",
   jsx: ["MpAvatar", "mp-avatar"],
@@ -251,35 +282,8 @@ var avatarSlotRecipe = (0, import_dev4.defineSlotRecipe)({
         image: { borderRadius: "full" }
       }
     },
-    variantColor: {
-      gray: {
-        root: { backgroundColor: "gray.50" }
-      },
-      sky: {
-        root: { backgroundColor: "sky.400" }
-      },
-      teal: {
-        root: { backgroundColor: "teal.400" }
-      },
-      violet: {
-        root: { backgroundColor: "violet.400" }
-      },
-      amber: {
-        root: { backgroundColor: "amber.400" }
-      },
-      rose: {
-        root: { backgroundColor: "rose.400" }
-      },
-      stone: {
-        root: { backgroundColor: "stone.400" }
-      },
-      lime: {
-        root: { backgroundColor: "lime.400" }
-      },
-      pink: {
-        root: { backgroundColor: "pink.400" }
-      }
-    },
+    "variant-color": variantColor,
+    variantColor,
     size: {
       sm: {
         root: { width: "6", height: "6", fontSize: "xs" },
@@ -482,7 +486,7 @@ var buttonRecipe = (0, import_dev5.defineRecipe)({
       },
       textLink: {
         color: "blue.400",
-        background: "white",
+        background: "transparent",
         borderColor: "white",
         _hover: {
           color: "blue.500"
@@ -492,7 +496,12 @@ var buttonRecipe = (0, import_dev5.defineRecipe)({
         },
         _disabled: {
           cursor: "not-allowed",
-          color: "gray.400"
+          color: "gray.400",
+          borderColor: "transparent",
+          _hover: {
+            borderColor: "transparent",
+            color: "gray.400"
+          }
         },
         _loading: {
           background: "white"
@@ -927,7 +936,8 @@ var textRecipe = (0, import_dev8.defineRecipe)({
       textDecoration: "line-through"
     },
     "&[data-text-link=true]": {
-      textDecoration: "underline"
+      textDecoration: "underline",
+      cursor: "pointer"
     }
   },
   variants: {
@@ -2647,9 +2657,145 @@ var dropzoneSlotRecipe = (0, import_dev28.defineSlotRecipe)({
   }
 });
 
-// src/recipes/banner.ts
+// src/recipes/segmented-control.ts
 var import_dev29 = require("@pandacss/dev");
-var bannerSlotRecipe = (0, import_dev29.defineSlotRecipe)({
+var segmentedControlSlotRecipe = (0, import_dev29.defineSlotRecipe)({
+  className: "segmented-control",
+  jsx: ["MpSegmentedControl", "mp-segmented-control"],
+  slots: ["root", "item", "hidden", "control", "label", "icon"],
+  base: {
+    root: {
+      position: "relative",
+      display: "inline-flex",
+      gap: "1",
+      flexDirection: "row",
+      justifyContent: "var(--mp-segmented-control--justify-content)",
+      alignItems: "center",
+      width: "var(--mp-segmented-control--width)",
+      height: "9.5",
+      borderWidth: "1px",
+      borderColor: "gray.100",
+      borderRadius: "md",
+      outline: "0px solid transparent",
+      padding: "1"
+    },
+    item: {
+      flex: "var(--mp-segmented-control--flex)",
+      cursor: "var(--mp-segmented-control--cursor)"
+    },
+    hidden: {
+      border: "0px",
+      clip: "rect(0px, 0px, 0px, 0px)",
+      margin: "-1px",
+      padding: "0px",
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      height: "1px",
+      width: "1px",
+      position: "absolute"
+    },
+    control: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "var(--mp-segmented-control--justify-content)",
+      height: "7",
+      paddingY: "1",
+      userSelect: "none",
+      borderRadius: "sm",
+      transition: "all 250ms",
+      color: "gray.600",
+      backgroundColor: "white",
+      gap: "var(--mp-segmented-control--gap)",
+      paddingX: "var(--mp-segmented-control--padding-x)",
+      "input[type=radio]:hover:not(:disabled):not(:checked) + &": {
+        color: "blue.700"
+      },
+      "input[type=radio]:checked + &, input[type=radio][aria-checked=mixed] + &": {
+        color: "blue.400",
+        backgroundColor: "blue.50"
+      },
+      "input[type=radio]:disabled + &": {
+        color: "gray.400"
+      },
+      "input[type=radio]:checked:hover:not(:disabled) + &, input[type=radio][aria-checked=mixed]:hover:not(:disabled) + &": {
+        color: "blue.700"
+      },
+      "input[type=radio]:checked:focus + &, input[type=radio][aria-checked=mixed]:focus + &": {
+        color: "blue.700",
+        boxShadow: "outer"
+      },
+      "input[type=radio]:checked:disabled + &, input[type=radio][aria-checked=mixed]:disabled + &": {
+        color: "gray.400",
+        backgroundColor: "gray.50"
+      }
+    },
+    label: {
+      color: "currentColor",
+      fontSize: "md",
+      fontFamily: "body",
+      lineHeight: "md",
+      opacity: "1"
+    },
+    icon: {
+      color: "currentColor"
+    }
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+});
+
+// src/recipes/toast.ts
+var import_dev30 = require("@pandacss/dev");
+var toastSlotRecipe = (0, import_dev30.defineSlotRecipe)({
+  className: "toast",
+  jsx: ["MpToast", "mp-toast"],
+  slots: ["root", "icon", "label"],
+  base: {
+    root: {
+      display: "flex",
+      alignItems: "center",
+      gap: "2",
+      width: "356px",
+      border: "1.5px solid",
+      borderRadius: "md",
+      backgroundColor: "white",
+      padding: "3",
+      boxShadow: "lg",
+      zIndex: "9999"
+    },
+    label: {
+      fontSize: "md"
+    }
+  },
+  variants: {
+    variant: {
+      success: {},
+      error: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "success",
+      css: {
+        root: { borderColor: "green.700" }
+      }
+    },
+    {
+      variant: "error",
+      css: {
+        root: { borderColor: "red.700" }
+      }
+    }
+  ],
+  defaultVariants: {
+    variant: "success"
+  }
+});
+
+// src/recipes/banner.ts
+var import_dev31 = require("@pandacss/dev");
+var bannerSlotRecipe = (0, import_dev31.defineSlotRecipe)({
   className: "banner",
   jsx: ["MpBanner", "mp-banner"],
   slots: ["root", "body"],
@@ -2690,7 +2836,7 @@ var bannerSlotRecipe = (0, import_dev29.defineSlotRecipe)({
     variant: "info"
   }
 });
-var bannerTitleRecipe = (0, import_dev29.defineRecipe)({
+var bannerTitleRecipe = (0, import_dev31.defineRecipe)({
   className: "banner-title",
   jsx: ["MpBannerTitle", "mp-banner-title"],
   base: {
@@ -2707,7 +2853,7 @@ var bannerTitleRecipe = (0, import_dev29.defineRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerDescriptionRecipe = (0, import_dev29.defineRecipe)({
+var bannerDescriptionRecipe = (0, import_dev31.defineRecipe)({
   className: "banner-description",
   jsx: ["MpBannerDescription", "mp-banner-description"],
   base: {
@@ -2722,7 +2868,7 @@ var bannerDescriptionRecipe = (0, import_dev29.defineRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerIconSlotRecipe = (0, import_dev29.defineSlotRecipe)({
+var bannerIconSlotRecipe = (0, import_dev31.defineSlotRecipe)({
   className: "banner-icon",
   jsx: ["MpBannerIcon", "mp-banner-icon"],
   slots: ["root", "custom"],
@@ -2745,7 +2891,7 @@ var bannerIconSlotRecipe = (0, import_dev29.defineSlotRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerLinkRecipe = (0, import_dev29.defineRecipe)({
+var bannerLinkRecipe = (0, import_dev31.defineRecipe)({
   className: "banner-link",
   jsx: ["MpBannerLink", "mp-banner-link"],
   base: {
@@ -2758,7 +2904,7 @@ var bannerLinkRecipe = (0, import_dev29.defineRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerCloseButtonRecipe = (0, import_dev29.defineRecipe)({
+var bannerCloseButtonRecipe = (0, import_dev31.defineRecipe)({
   className: "banner-close-button",
   jsx: ["MpBannerCloseButton", "mp-banner-close-button"],
   base: {
@@ -2822,12 +2968,14 @@ var slotRecipes = {
   uploadListSlotRecipe,
   dropzoneSlotRecipe,
   bannerSlotRecipe,
-  bannerIconSlotRecipe
+  bannerIconSlotRecipe,
+  segmentedControlSlotRecipe,
+  toastSlotRecipe
 };
 
 // src/text-styles.ts
-var import_dev30 = require("@pandacss/dev");
-var textStyles = (0, import_dev30.defineTextStyles)({
+var import_dev32 = require("@pandacss/dev");
+var textStyles = (0, import_dev32.defineTextStyles)({
   overline: { value: { fontSize: "xs", lineHeight: "xs" } },
   body: {
     sm: { value: { fontSize: "sm", lineHeight: "2xl" } },
@@ -2861,11 +3009,11 @@ var textStyles = (0, import_dev30.defineTextStyles)({
 });
 
 // src/tokens/index.ts
-var import_dev41 = require("@pandacss/dev");
+var import_dev43 = require("@pandacss/dev");
 
 // src/tokens/borders.ts
-var import_dev31 = require("@pandacss/dev");
-var borders = import_dev31.defineTokens.borders({
+var import_dev33 = require("@pandacss/dev");
+var borders = import_dev33.defineTokens.borders({
   none: { value: "none" },
   sm: { value: "1px" },
   md: { value: "1.5px" },
@@ -2873,8 +3021,8 @@ var borders = import_dev31.defineTokens.borders({
 });
 
 // src/tokens/colors.ts
-var import_dev32 = require("@pandacss/dev");
-var colors = import_dev32.defineTokens.colors({
+var import_dev34 = require("@pandacss/dev");
+var colors = import_dev34.defineTokens.colors({
   currentcolor: {
     value: "currentcolor",
     description: "Need to add this for Icon usage"
@@ -2913,7 +3061,7 @@ var colors = import_dev32.defineTokens.colors({
     800: { value: "rgba(255, 255, 255, 0.80)" },
     900: { value: "rgba(255, 255, 255, 0.92)" }
   },
-  blackAplpha: {
+  blackAlpha: {
     50: { value: "rgba(0, 0, 0, 0.04)" },
     100: { value: "rgba(0, 0, 0, 0.06)" },
     200: { value: "rgba(0, 0, 0, 0.08)" },
@@ -3027,16 +3175,16 @@ var colors = import_dev32.defineTokens.colors({
 });
 
 // src/tokens/durations.ts
-var import_dev33 = require("@pandacss/dev");
-var durations = import_dev33.defineTokens.durations({
+var import_dev35 = require("@pandacss/dev");
+var durations = import_dev35.defineTokens.durations({
   slow: { value: "100ms" },
   normal: { value: "250ms" },
   fast: { value: "300ms" }
 });
 
 // src/tokens/opacity.ts
-var import_dev34 = require("@pandacss/dev");
-var opacity = import_dev34.defineTokens.opacity({
+var import_dev36 = require("@pandacss/dev");
+var opacity = import_dev36.defineTokens.opacity({
   0: { value: 0 },
   40: { value: 0.4 },
   60: { value: 0.6 },
@@ -3044,8 +3192,8 @@ var opacity = import_dev34.defineTokens.opacity({
 });
 
 // src/tokens/radii.ts
-var import_dev35 = require("@pandacss/dev");
-var radii = import_dev35.defineTokens.radii({
+var import_dev37 = require("@pandacss/dev");
+var radii = import_dev37.defineTokens.radii({
   none: { value: "0" },
   xs: { value: "0.125rem", description: "2px" },
   sm: { value: "0.25rem", description: "4px" },
@@ -3056,8 +3204,8 @@ var radii = import_dev35.defineTokens.radii({
 });
 
 // src/tokens/shadows.ts
-var import_dev36 = require("@pandacss/dev");
-var shadows = import_dev36.defineTokens.shadows({
+var import_dev38 = require("@pandacss/dev");
+var shadows = import_dev38.defineTokens.shadows({
   xs: {
     value: ["0px 0px 2px 0px rgba(0, 0, 0, 0.12)", "0px 2px 4px 0px rgba(0, 0, 0, 0.14)"]
   },
@@ -3097,8 +3245,8 @@ var shadows = import_dev36.defineTokens.shadows({
 });
 
 // src/tokens/sizes.ts
-var import_dev37 = require("@pandacss/dev");
-var sizes = import_dev37.defineTokens.sizes({
+var import_dev39 = require("@pandacss/dev");
+var sizes = import_dev39.defineTokens.sizes({
   0: { value: "0", description: "0px" },
   0.25: { value: "0.0625rem", description: "1px" },
   0.5: { value: "0.125rem", description: "2px" },
@@ -3127,8 +3275,8 @@ var sizes = import_dev37.defineTokens.sizes({
 });
 
 // src/tokens/spacing.ts
-var import_dev38 = require("@pandacss/dev");
-var spacing = import_dev38.defineTokens.spacing({
+var import_dev40 = require("@pandacss/dev");
+var spacing = import_dev40.defineTokens.spacing({
   0: { value: "0", description: "0px" },
   0.5: { value: "0.125rem", description: "2px" },
   1: { value: "0.25rem", description: "4px" },
@@ -3149,8 +3297,8 @@ var spacing = import_dev38.defineTokens.spacing({
 });
 
 // src/tokens/z-index.ts
-var import_dev39 = require("@pandacss/dev");
-var zIndex = import_dev39.defineTokens.zIndex({
+var import_dev41 = require("@pandacss/dev");
+var zIndex = import_dev41.defineTokens.zIndex({
   hide: { value: -1 },
   base: { value: 0 },
   docked: { value: 10 },
@@ -3162,16 +3310,16 @@ var zIndex = import_dev39.defineTokens.zIndex({
 });
 
 // src/tokens/typography.ts
-var import_dev40 = require("@pandacss/dev");
-var fonts = import_dev40.defineTokens.fonts({
+var import_dev42 = require("@pandacss/dev");
+var fonts = import_dev42.defineTokens.fonts({
   body: {
-    value: '"inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+    value: '"Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
   },
   mono: {
     value: 'SFMono-Regular, Menlo, Monaco,Consolas, "Liberation Mono", "Courier New", monospace'
   }
 });
-var fontSizes = import_dev40.defineTokens.fontSizes({
+var fontSizes = import_dev42.defineTokens.fontSizes({
   xs: { value: "0.625rem", description: "10px" },
   sm: { value: "0.75rem", description: "12px" },
   md: { value: "0.875rem", description: "14px" },
@@ -3179,12 +3327,12 @@ var fontSizes = import_dev40.defineTokens.fontSizes({
   xl: { value: "1.25rem", description: "20px" },
   "2xl": { value: "1.5rem", description: "24px" }
 });
-var fontWeights = import_dev40.defineTokens.fontWeights({
+var fontWeights = import_dev42.defineTokens.fontWeights({
   regular: { value: "400" },
   semiBold: { value: "600" },
   bold: { value: "800" }
 });
-var lineHeights = import_dev40.defineTokens.lineHeights({
+var lineHeights = import_dev42.defineTokens.lineHeights({
   xs: { value: 1.2, description: "12px/10px" },
   sm: { value: 1.34, description: "16px/12px or 32px/24px" },
   md: { value: 1.4, description: "28px/20px" },
@@ -3193,7 +3341,7 @@ var lineHeights = import_dev40.defineTokens.lineHeights({
   "2xl": { value: 1.67, description: "20px/12px" },
   "3xl": { value: 1.71, description: "24px/14px" }
 });
-var letterSpacings = import_dev40.defineTokens.letterSpacings({
+var letterSpacings = import_dev42.defineTokens.letterSpacings({
   tighter: { value: "-0.05em" },
   tight: { value: "-0.025em" },
   normal: { value: "0" },
@@ -3203,7 +3351,7 @@ var letterSpacings = import_dev40.defineTokens.letterSpacings({
 });
 
 // src/tokens/index.ts
-var tokens = (0, import_dev41.defineTokens)({
+var tokens = (0, import_dev43.defineTokens)({
   borders,
   colors,
   durations,
@@ -3221,7 +3369,7 @@ var tokens = (0, import_dev41.defineTokens)({
 });
 
 // src/index.ts
-var preset = (0, import_dev42.definePreset)({
+var preset = (0, import_dev44.definePreset)({
   theme: {
     extend: {
       breakpoints,

package/dist/index.mjs

@@ -45,7 +45,9 @@ var globalCss = defineGlobalStyles({
     background: "var(--mp-colors-white)",
     color: "var(--mp-colors-dark)",
     fontFamily: "var(--mp-fonts-body)",
-    fontSize: "14px",
+    fontSize: "var(--mp-font-sizes-md)",
+    fontWeight: "var(--mp-font-weights-regular)",
+    lineHeight: "var(--mp-line-heights-lg)",
     _dark: {
       colorScheme: "dark"
     }
@@ -178,6 +180,35 @@ var tagSlotRecipe = defineSlotRecipe({
 
 // src/recipes/avatar.ts
 import { defineSlotRecipe as defineSlotRecipe2 } from "@pandacss/dev";
+var variantColor = {
+  gray: {
+    root: { backgroundColor: "gray.50" }
+  },
+  sky: {
+    root: { backgroundColor: "sky.400" }
+  },
+  teal: {
+    root: { backgroundColor: "teal.400" }
+  },
+  violet: {
+    root: { backgroundColor: "violet.400" }
+  },
+  amber: {
+    root: { backgroundColor: "amber.400" }
+  },
+  rose: {
+    root: { backgroundColor: "rose.400" }
+  },
+  stone: {
+    root: { backgroundColor: "stone.400" }
+  },
+  lime: {
+    root: { backgroundColor: "lime.400" }
+  },
+  pink: {
+    root: { backgroundColor: "pink.400" }
+  }
+};
 var avatarSlotRecipe = defineSlotRecipe2({
   className: "avatar",
   jsx: ["MpAvatar", "mp-avatar"],
@@ -225,35 +256,8 @@ var avatarSlotRecipe = defineSlotRecipe2({
         image: { borderRadius: "full" }
       }
     },
-    variantColor: {
-      gray: {
-        root: { backgroundColor: "gray.50" }
-      },
-      sky: {
-        root: { backgroundColor: "sky.400" }
-      },
-      teal: {
-        root: { backgroundColor: "teal.400" }
-      },
-      violet: {
-        root: { backgroundColor: "violet.400" }
-      },
-      amber: {
-        root: { backgroundColor: "amber.400" }
-      },
-      rose: {
-        root: { backgroundColor: "rose.400" }
-      },
-      stone: {
-        root: { backgroundColor: "stone.400" }
-      },
-      lime: {
-        root: { backgroundColor: "lime.400" }
-      },
-      pink: {
-        root: { backgroundColor: "pink.400" }
-      }
-    },
+    "variant-color": variantColor,
+    variantColor,
     size: {
       sm: {
         root: { width: "6", height: "6", fontSize: "xs" },
@@ -456,7 +460,7 @@ var buttonRecipe = defineRecipe({
       },
       textLink: {
         color: "blue.400",
-        background: "white",
+        background: "transparent",
         borderColor: "white",
         _hover: {
           color: "blue.500"
@@ -466,7 +470,12 @@ var buttonRecipe = defineRecipe({
         },
         _disabled: {
           cursor: "not-allowed",
-          color: "gray.400"
+          color: "gray.400",
+          borderColor: "transparent",
+          _hover: {
+            borderColor: "transparent",
+            color: "gray.400"
+          }
         },
         _loading: {
           background: "white"
@@ -901,7 +910,8 @@ var textRecipe = defineRecipe2({
       textDecoration: "line-through"
     },
     "&[data-text-link=true]": {
-      textDecoration: "underline"
+      textDecoration: "underline",
+      cursor: "pointer"
     }
   },
   variants: {
@@ -2621,9 +2631,145 @@ var dropzoneSlotRecipe = defineSlotRecipe15({
   }
 });
 
+// src/recipes/segmented-control.ts
+import { defineSlotRecipe as defineSlotRecipe16 } from "@pandacss/dev";
+var segmentedControlSlotRecipe = defineSlotRecipe16({
+  className: "segmented-control",
+  jsx: ["MpSegmentedControl", "mp-segmented-control"],
+  slots: ["root", "item", "hidden", "control", "label", "icon"],
+  base: {
+    root: {
+      position: "relative",
+      display: "inline-flex",
+      gap: "1",
+      flexDirection: "row",
+      justifyContent: "var(--mp-segmented-control--justify-content)",
+      alignItems: "center",
+      width: "var(--mp-segmented-control--width)",
+      height: "9.5",
+      borderWidth: "1px",
+      borderColor: "gray.100",
+      borderRadius: "md",
+      outline: "0px solid transparent",
+      padding: "1"
+    },
+    item: {
+      flex: "var(--mp-segmented-control--flex)",
+      cursor: "var(--mp-segmented-control--cursor)"
+    },
+    hidden: {
+      border: "0px",
+      clip: "rect(0px, 0px, 0px, 0px)",
+      margin: "-1px",
+      padding: "0px",
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      height: "1px",
+      width: "1px",
+      position: "absolute"
+    },
+    control: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "var(--mp-segmented-control--justify-content)",
+      height: "7",
+      paddingY: "1",
+      userSelect: "none",
+      borderRadius: "sm",
+      transition: "all 250ms",
+      color: "gray.600",
+      backgroundColor: "white",
+      gap: "var(--mp-segmented-control--gap)",
+      paddingX: "var(--mp-segmented-control--padding-x)",
+      "input[type=radio]:hover:not(:disabled):not(:checked) + &": {
+        color: "blue.700"
+      },
+      "input[type=radio]:checked + &, input[type=radio][aria-checked=mixed] + &": {
+        color: "blue.400",
+        backgroundColor: "blue.50"
+      },
+      "input[type=radio]:disabled + &": {
+        color: "gray.400"
+      },
+      "input[type=radio]:checked:hover:not(:disabled) + &, input[type=radio][aria-checked=mixed]:hover:not(:disabled) + &": {
+        color: "blue.700"
+      },
+      "input[type=radio]:checked:focus + &, input[type=radio][aria-checked=mixed]:focus + &": {
+        color: "blue.700",
+        boxShadow: "outer"
+      },
+      "input[type=radio]:checked:disabled + &, input[type=radio][aria-checked=mixed]:disabled + &": {
+        color: "gray.400",
+        backgroundColor: "gray.50"
+      }
+    },
+    label: {
+      color: "currentColor",
+      fontSize: "md",
+      fontFamily: "body",
+      lineHeight: "md",
+      opacity: "1"
+    },
+    icon: {
+      color: "currentColor"
+    }
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+});
+
+// src/recipes/toast.ts
+import { defineSlotRecipe as defineSlotRecipe17 } from "@pandacss/dev";
+var toastSlotRecipe = defineSlotRecipe17({
+  className: "toast",
+  jsx: ["MpToast", "mp-toast"],
+  slots: ["root", "icon", "label"],
+  base: {
+    root: {
+      display: "flex",
+      alignItems: "center",
+      gap: "2",
+      width: "356px",
+      border: "1.5px solid",
+      borderRadius: "md",
+      backgroundColor: "white",
+      padding: "3",
+      boxShadow: "lg",
+      zIndex: "9999"
+    },
+    label: {
+      fontSize: "md"
+    }
+  },
+  variants: {
+    variant: {
+      success: {},
+      error: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "success",
+      css: {
+        root: { borderColor: "green.700" }
+      }
+    },
+    {
+      variant: "error",
+      css: {
+        root: { borderColor: "red.700" }
+      }
+    }
+  ],
+  defaultVariants: {
+    variant: "success"
+  }
+});
+
 // src/recipes/banner.ts
-import { defineRecipe as defineRecipe12, defineSlotRecipe as defineSlotRecipe16 } from "@pandacss/dev";
-var bannerSlotRecipe = defineSlotRecipe16({
+import { defineRecipe as defineRecipe12, defineSlotRecipe as defineSlotRecipe18 } from "@pandacss/dev";
+var bannerSlotRecipe = defineSlotRecipe18({
   className: "banner",
   jsx: ["MpBanner", "mp-banner"],
   slots: ["root", "body"],
@@ -2696,7 +2842,7 @@ var bannerDescriptionRecipe = defineRecipe12({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerIconSlotRecipe = defineSlotRecipe16({
+var bannerIconSlotRecipe = defineSlotRecipe18({
   className: "banner-icon",
   jsx: ["MpBannerIcon", "mp-banner-icon"],
   slots: ["root", "custom"],
@@ -2796,7 +2942,9 @@ var slotRecipes = {
   uploadListSlotRecipe,
   dropzoneSlotRecipe,
   bannerSlotRecipe,
-  bannerIconSlotRecipe
+  bannerIconSlotRecipe,
+  segmentedControlSlotRecipe,
+  toastSlotRecipe
 };
 
 // src/text-styles.ts
@@ -2887,7 +3035,7 @@ var colors = defineTokens2.colors({
     800: { value: "rgba(255, 255, 255, 0.80)" },
     900: { value: "rgba(255, 255, 255, 0.92)" }
   },
-  blackAplpha: {
+  blackAlpha: {
     50: { value: "rgba(0, 0, 0, 0.04)" },
     100: { value: "rgba(0, 0, 0, 0.06)" },
     200: { value: "rgba(0, 0, 0, 0.08)" },
@@ -3139,7 +3287,7 @@ var zIndex = defineTokens9.zIndex({
 import { defineTokens as defineTokens10 } from "@pandacss/dev";
 var fonts = defineTokens10.fonts({
   body: {
-    value: '"inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+    value: '"Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
   },
   mono: {
     value: 'SFMono-Regular, Menlo, Monaco,Consolas, "Liberation Mono", "Courier New", monospace'

package/dist/recipes/index.d.mts

@@ -45,6 +45,8 @@ declare const slotRecipes: {
     dropzoneSlotRecipe: _pandacss_types.SlotRecipeConfig;
     bannerSlotRecipe: _pandacss_types.SlotRecipeConfig;
     bannerIconSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    segmentedControlSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    toastSlotRecipe: _pandacss_types.SlotRecipeConfig;
 };
 
 export { recipes, slotRecipes };

package/dist/recipes/index.d.ts

@@ -45,6 +45,8 @@ declare const slotRecipes: {
     dropzoneSlotRecipe: _pandacss_types.SlotRecipeConfig;
     bannerSlotRecipe: _pandacss_types.SlotRecipeConfig;
     bannerIconSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    segmentedControlSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    toastSlotRecipe: _pandacss_types.SlotRecipeConfig;
 };
 
 export { recipes, slotRecipes };

package/dist/recipes/segmented-control.d.mts

@@ -0,0 +1,5 @@
+import * as _pandacss_dev from '@pandacss/dev';
+
+declare const segmentedControlSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+
+export { segmentedControlSlotRecipe };

package/dist/recipes/segmented-control.d.ts

@@ -0,0 +1,5 @@
+import * as _pandacss_dev from '@pandacss/dev';
+
+declare const segmentedControlSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+
+export { segmentedControlSlotRecipe };

package/dist/recipes/toast.d.mts

@@ -0,0 +1,5 @@
+import * as _pandacss_dev from '@pandacss/dev';
+
+declare const toastSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+
+export { toastSlotRecipe };

package/dist/recipes/toast.d.ts

@@ -0,0 +1,5 @@
+import * as _pandacss_dev from '@pandacss/dev';
+
+declare const toastSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+
+export { toastSlotRecipe };

package/dist/tokens/colors.d.mts

@@ -93,7 +93,7 @@ declare const colors: {
             value: string;
         };
     };
-    blackAplpha: {
+    blackAlpha: {
         50: {
             value: string;
         };

package/dist/tokens/colors.d.ts

@@ -93,7 +93,7 @@ declare const colors: {
             value: string;
         };
     };
-    blackAplpha: {
+    blackAlpha: {
         50: {
             value: string;
         };

package/dist/tokens/index.d.mts

@@ -108,7 +108,7 @@ declare const tokens: {
                 value: string;
             };
         };
-        blackAplpha: {
+        blackAlpha: {
             50: {
                 value: string;
             };

package/dist/tokens/index.d.ts

@@ -108,7 +108,7 @@ declare const tokens: {
                 value: string;
             };
         };
-        blackAplpha: {
+        blackAlpha: {
             50: {
                 value: string;
             };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mekari/pixel3-theme",
   "description": "Theme for mekari pixel 3",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "main": "dist/index.js",
   "license": "MIT",
   "files": [
@@ -9,13 +9,13 @@
     "src"
   ],
   "dependencies": {
-    "@pandacss/dev": "0.24.1"
+    "@pandacss/dev": "^0.24.1"
   },
   "peerDependencies": {
     "vue": "^3.4.9"
   },
   "devDependencies": {
-    "@pandacss/types": "0.24.1",
+    "@pandacss/types": "^0.24.1",
     "vue": "^3.4.9"
   },
   "publishConfig": {

package/src/global-css.ts

@@ -5,13 +5,15 @@ export const globalCss = defineGlobalStyles({
     MozOsxFontSmoothing: 'grayscale',
     textRendering: 'optimizeLegibility',
     WebkitFontSmoothing: 'antialiased',
-    WebkitTextSizeAdjust: '100%'
+    WebkitTextSizeAdjust: '100%',
   },
   body: {
     background: 'var(--mp-colors-white)',
     color: 'var(--mp-colors-dark)',
     fontFamily: 'var(--mp-fonts-body)',
-    fontSize: '14px',
+    fontSize: 'var(--mp-font-sizes-md)',
+    fontWeight: 'var(--mp-font-weights-regular)',
+    lineHeight: 'var(--mp-line-heights-lg)',
     _dark: {
       colorScheme: 'dark'
     }

package/src/recipes/avatar.ts

@@ -1,5 +1,35 @@
 import { defineSlotRecipe } from '@pandacss/dev'
 
+const variantColor = {
+  gray: {
+    root: { backgroundColor: 'gray.50' }
+  },
+  sky: {
+    root: { backgroundColor: 'sky.400' }
+  },
+  teal: {
+    root: { backgroundColor: 'teal.400' }
+  },
+  violet: {
+    root: { backgroundColor: 'violet.400' }
+  },
+  amber: {
+    root: { backgroundColor: 'amber.400' }
+  },
+  rose: {
+    root: { backgroundColor: 'rose.400' }
+  },
+  stone: {
+    root: { backgroundColor: 'stone.400' }
+  },
+  lime: {
+    root: { backgroundColor: 'lime.400' }
+  },
+  pink: {
+    root: { backgroundColor: 'pink.400' }
+  }
+}
+
 const avatarSlotRecipe = defineSlotRecipe({
   className: 'avatar',
   jsx: ['MpAvatar', 'mp-avatar'],
@@ -47,35 +77,8 @@ const avatarSlotRecipe = defineSlotRecipe({
         image: { borderRadius: 'full' }
       }
     },
-    variantColor: {
-      gray: {
-        root: { backgroundColor: 'gray.50' }
-      },
-      sky: {
-        root: { backgroundColor: 'sky.400' }
-      },
-      teal: {
-        root: { backgroundColor: 'teal.400' }
-      },
-      violet: {
-        root: { backgroundColor: 'violet.400' }
-      },
-      amber: {
-        root: { backgroundColor: 'amber.400' }
-      },
-      rose: {
-        root: { backgroundColor: 'rose.400' }
-      },
-      stone: {
-        root: { backgroundColor: 'stone.400' }
-      },
-      lime: {
-        root: { backgroundColor: 'lime.400' }
-      },
-      pink: {
-        root: { backgroundColor: 'pink.400' }
-      }
-    },
+    'variant-color': variantColor,
+    variantColor: variantColor,
     size: {
       sm: {
         root: { width: '6', height: '6', fontSize: 'xs' },

package/src/recipes/button.ts

@@ -101,7 +101,7 @@ const buttonRecipe = defineRecipe({
       },
       textLink: {
         color: 'blue.400',
-        background: 'white',
+        background: 'transparent',
         borderColor: 'white',
         _hover: {
           color: 'blue.500'
@@ -111,7 +111,12 @@ const buttonRecipe = defineRecipe({
         },
         _disabled: {
           cursor: 'not-allowed',
-          color: 'gray.400'
+          color: 'gray.400',
+          borderColor: 'transparent',
+          _hover: {
+            borderColor: 'transparent',
+            color: 'gray.400',
+          }
         },
         _loading: {
           background: 'white'

package/src/recipes/index.ts

@@ -24,6 +24,8 @@ import { dividerRecipe } from './divider'
 import { modalSlotRecipe } from './modal'
 import { uploadSlotRecipe, uploadListSlotRecipe } from './upload'
 import { dropzoneSlotRecipe } from './dropzone'
+import { segmentedControlSlotRecipe } from './segmented-control'
+import { toastSlotRecipe } from './toast'
 
 import {
   bannerSlotRecipe,
@@ -79,5 +81,7 @@ export const slotRecipes = {
   uploadListSlotRecipe,
   dropzoneSlotRecipe,
   bannerSlotRecipe,
-  bannerIconSlotRecipe
+  bannerIconSlotRecipe,
+  segmentedControlSlotRecipe,
+  toastSlotRecipe
 }

package/src/recipes/segmented-control.ts

@@ -0,0 +1,91 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const segmentedControlSlotRecipe = defineSlotRecipe({
+  className: 'segmented-control',
+  jsx: ['MpSegmentedControl', 'mp-segmented-control'],
+  slots: ['root', 'item', 'hidden', 'control', 'label', 'icon'],
+  base: {
+    root: {
+      position: 'relative',
+      display: 'inline-flex',
+      gap: '1',
+      flexDirection: 'row',
+      justifyContent: 'var(--mp-segmented-control--justify-content)',
+      alignItems: 'center',
+      width: 'var(--mp-segmented-control--width)',
+      height: '9.5',
+      borderWidth: '1px',
+      borderColor: 'gray.100',
+      borderRadius: 'md',
+      outline: '0px solid transparent',
+      padding: '1'
+    },
+    item: {
+      flex: 'var(--mp-segmented-control--flex)',
+      cursor: 'var(--mp-segmented-control--cursor)'
+    },
+    hidden: {
+      border: '0px',
+      clip: 'rect(0px, 0px, 0px, 0px)',
+      margin: '-1px',
+      padding: '0px',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      height: '1px',
+      width: '1px',
+      position: 'absolute'
+    },
+    control: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'var(--mp-segmented-control--justify-content)',
+      height: '7',
+      paddingY: '1',
+      userSelect: 'none',
+      borderRadius: 'sm',
+      transition: 'all 250ms',
+      color: 'gray.600',
+      backgroundColor: 'white',
+      gap: 'var(--mp-segmented-control--gap)',
+      paddingX: 'var(--mp-segmented-control--padding-x)',
+      'input[type=radio]:hover:not(:disabled):not(:checked) + &': {
+        color: 'blue.700'
+      },
+      'input[type=radio]:checked + &, input[type=radio][aria-checked=mixed] + &': {
+        color: 'blue.400',
+        backgroundColor: 'blue.50'
+      },
+      'input[type=radio]:disabled + &': {
+        color: 'gray.400'
+      },
+      'input[type=radio]:checked:hover:not(:disabled) + &, input[type=radio][aria-checked=mixed]:hover:not(:disabled) + &':
+        {
+          color: 'blue.700'
+        },
+      'input[type=radio]:checked:focus + &, input[type=radio][aria-checked=mixed]:focus + &': {
+        color: 'blue.700',
+        boxShadow: 'outer'
+      },
+      'input[type=radio]:checked:disabled + &, input[type=radio][aria-checked=mixed]:disabled + &':
+        {
+          color: 'gray.400',
+          backgroundColor: 'gray.50'
+        }
+    },
+    label: {
+      color: 'currentColor',
+      fontSize: 'md',
+      fontFamily: 'body',
+      lineHeight: 'md',
+      opacity: '1'
+    },
+    icon: {
+      color: 'currentColor'
+    }
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+})
+
+export { segmentedControlSlotRecipe }

package/src/recipes/text.ts

@@ -10,7 +10,8 @@ export const textRecipe = defineRecipe({
       textDecoration: 'line-through'
     },
     '&[data-text-link=true]': {
-      textDecoration: 'underline'
+      textDecoration: 'underline',
+      cursor: 'pointer'
     }
   },
   variants: {

package/src/recipes/toast.ts

@@ -0,0 +1,49 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const toastSlotRecipe = defineSlotRecipe({
+  className: 'toast',
+  jsx: ['MpToast', 'mp-toast'],
+  slots: ['root', 'icon', 'label'],
+  base: {
+    root: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '2',
+      width: '356px',
+      border: '1.5px solid',
+      borderRadius: 'md',
+      backgroundColor: 'white',
+      padding: '3',
+      boxShadow: 'lg',
+      zIndex: '9999'
+    },
+    label: {
+      fontSize: 'md'
+    }
+  },
+  variants: {
+    variant: {
+      success: {},
+      error: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variant: 'success',
+      css: {
+        root: { borderColor: 'green.700' }
+      }
+    },
+    {
+      variant: 'error',
+      css: {
+        root: { borderColor: 'red.700' }
+      }
+    }
+  ],
+  defaultVariants: {
+    variant: 'success'
+  }
+})
+
+export { toastSlotRecipe }

package/src/tokens/colors.ts

@@ -39,7 +39,7 @@ export const colors = defineTokens.colors({
     800: { value: 'rgba(255, 255, 255, 0.80)' },
     900: { value: 'rgba(255, 255, 255, 0.92)' }
   },
-  blackAplpha: {
+  blackAlpha: {
     50: { value: 'rgba(0, 0, 0, 0.04)' },
     100: { value: 'rgba(0, 0, 0, 0.06)' },
     200: { value: 'rgba(0, 0, 0, 0.08)' },

package/src/tokens/typography.ts

@@ -3,7 +3,7 @@ import { defineTokens } from '@pandacss/dev'
 export const fonts = defineTokens.fonts({
   body: {
     value:
-      '"inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+      '"Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
   },
   mono: {
     value: 'SFMono-Regular, Menlo, Monaco,Consolas, "Liberation Mono", "Courier New", monospace'