@mekari/pixel3-theme 0.0.3 → 0.0.5-dev.0

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"
     }
@@ -97,7 +99,8 @@ var tagSlotRecipe = defineSlotRecipe({
       paddingX: "2",
       whiteSpace: "normal",
       overflowWrap: "anywhere",
-      cursor: "var(--mp-tag--cursor)"
+      cursor: "var(--mp-tag--cursor)",
+      height: "fit-content"
     },
     close: {
       position: "absolute!",
@@ -178,6 +181,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 +257,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" },
@@ -363,8 +368,8 @@ var buttonRecipe = defineRecipe({
     display: "inline-flex",
     justifyContent: "center",
     alignItems: "center",
-    alignSelf: "start",
     gap: "2",
+    height: "fit-content",
     borderWidth: "1px",
     whiteSpace: "nowrap",
     userSelect: "none",
@@ -456,7 +461,7 @@ var buttonRecipe = defineRecipe({
       },
       textLink: {
         color: "blue.400",
-        background: "white",
+        background: "transparent",
         borderColor: "white",
         _hover: {
           color: "blue.500"
@@ -466,7 +471,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 +911,8 @@ var textRecipe = defineRecipe2({
       textDecoration: "line-through"
     },
     "&[data-text-link=true]": {
-      textDecoration: "underline"
+      textDecoration: "underline",
+      cursor: "pointer"
     }
   },
   variants: {
@@ -1167,8 +1178,8 @@ var badgeRecipe = defineRecipe6({
     size: {
       sm: {
         fontSize: "xs",
-        fontWeight: "semibold",
-        lineHeight: "1sm",
+        fontWeight: "semiBold",
+        lineHeight: "sm",
         letterSpacing: "normal",
         height: "4"
       },
@@ -2059,7 +2070,7 @@ var progressSlotRecipe = defineSlotRecipe10({
           width: "22px",
           height: "22px",
           background: "transparent",
-          alignSelf: "start"
+          alignSelf: "flex-start"
         }
       }
     }
@@ -2429,7 +2440,7 @@ var uploadListSlotRecipe = defineSlotRecipe14({
       width: "full",
       display: "flex",
       alignItems: "center",
-      justifyContent: "start",
+      justifyContent: "flex-start",
       gap: "3",
       py: "2",
       px: "1",
@@ -2621,9 +2632,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 +2843,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 +2943,9 @@ var slotRecipes = {
   uploadListSlotRecipe,
   dropzoneSlotRecipe,
   bannerSlotRecipe,
-  bannerIconSlotRecipe
+  bannerIconSlotRecipe,
+  segmentedControlSlotRecipe,
+  toastSlotRecipe
 };
 
 // src/text-styles.ts
@@ -2887,7 +3036,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 +3288,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.5-dev.0",
   "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/badge.ts

@@ -26,8 +26,8 @@ const badgeRecipe = defineRecipe({
     size: {
       sm: {
         fontSize: 'xs',
-        fontWeight: 'semibold',
-        lineHeight: '1sm',
+        fontWeight: 'semiBold',
+        lineHeight: 'sm',
         letterSpacing: 'normal',
         height: '4'
       },

package/src/recipes/button.ts

@@ -8,8 +8,8 @@ const buttonRecipe = defineRecipe({
     display: 'inline-flex',
     justifyContent: 'center',
     alignItems: 'center',
-    alignSelf: 'start',
     gap: '2',
+    height: 'fit-content',
     borderWidth: '1px',
     whiteSpace: 'nowrap',
     userSelect: 'none',
@@ -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/progress.ts

@@ -62,7 +62,7 @@ const progressSlotRecipe = defineSlotRecipe({
           width: '22px',
           height: '22px',
           background: 'transparent',
-          alignSelf: 'start'
+          alignSelf: 'flex-start'
         }
       }
     }