@mekari/pixel3-theme 0.0.1-alpha.0 → 0.0.2

package/src/recipes/accordion.ts

@@ -0,0 +1,57 @@
+// import { accordionAnatomy } from "@ark-ui/anatomy";
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const accordion = defineSlotRecipe({
+  className: 'accordion',
+  slots: ['root', 'item', 'trigger', 'content'],
+  base: {
+    root: {
+      divideY: '1px',
+      width: 'full'
+    },
+    trigger: {
+      alignItems: 'center',
+      color: 'fg.default',
+      cursor: 'pointer',
+      display: 'flex',
+      fontWeight: 'normal',
+      justifyContent: 'space-between',
+      textStyle: 'lg',
+      width: 'full',
+      fontSize: 'lg'
+    },
+    content: {
+      color: 'fg.muted',
+      display: 'grid',
+      gridTemplateRows: '0fr',
+      transitionProperty: 'grid-template-rows, padding-bottom',
+      transitionDuration: 'normal',
+      transitionTimingFunction: 'default',
+      _open: {
+        gridTemplateRows: '1fr'
+      },
+      '& > div': {
+        overflow: 'hidden'
+      }
+    }
+  },
+  defaultVariants: {
+    size: 'md'
+  },
+  variants: {
+    size: {
+      md: {
+        trigger: {
+          py: '4'
+        },
+        content: {
+          pb: '6',
+          pr: '8',
+          _closed: {
+            pb: '0'
+          }
+        }
+      }
+    }
+  }
+})

package/src/recipes/avatar.ts

@@ -0,0 +1,179 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const avatarSlotRecipe = defineSlotRecipe({
+  className: 'avatar',
+  jsx: ['MpAvatar', 'mp-avatar'],
+  slots: ['root', 'fallback', 'image', 'icon'],
+  base: {
+    root: {
+      color: 'white',
+      position: 'relative',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      verticalAlign: 'top',
+      flexShrink: '0',
+      fontWeight: 'semiBold',
+      textTransform: 'uppercase',
+      userSelect: 'none',
+      backgroundColor: 'var(--mp-avatar--background-color)',
+      borderColor: 'var(--mp-avatar--border-color)',
+      marginLeft: 'var(--mp-avatar--margin-left)',
+      cursor: 'var(--mp-avatar--cursor)',
+      _hasBorder: {
+        borderWidth: '0.125rem'
+      }
+    },
+    fallback: {
+      width: '100%',
+      height: '100%',
+      visibility: 'var(--mp-avatar--visibility)',
+      display: 'var(--mp-avatar--display)'
+    },
+    image: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover'
+    }
+  },
+  variants: {
+    variant: {
+      square: {
+        root: { borderRadius: 'md' },
+        image: { borderRadius: 'md' }
+      },
+      circle: {
+        root: { borderRadius: 'full' },
+        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' }
+      }
+    },
+    size: {
+      sm: {
+        root: { width: '6', height: '6', fontSize: 'xs' },
+        icon: { width: '4!', height: '4!' }
+      },
+      md: {
+        root: { width: '8', height: '8', fontSize: 'sm' },
+        icon: { width: '5!', height: '5!' }
+      },
+      lg: {
+        root: { width: '12', height: '12', fontSize: 'lg' },
+        icon: { width: '8!', height: '8!' }
+      },
+      xl: {
+        root: { width: '20', height: '20', fontSize: '2xl' },
+        icon: { width: '16!', height: '16!' }
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      size: 'sm',
+      variant: 'square',
+      css: {
+        root: { borderRadius: 'sm' },
+        image: { borderRadius: 'sm' }
+      }
+    },
+    {
+      size: 'lg',
+      variant: 'square',
+      css: {
+        root: { borderRadius: 'lg' },
+        image: { borderRadius: 'lg' }
+      }
+    },
+    {
+      size: 'xl',
+      variant: 'square',
+      css: {
+        root: { borderRadius: 'xl' },
+        image: { borderRadius: 'xl' }
+      }
+    },
+    {
+      variantColor: 'gray',
+      css: {
+        root: { color: 'gray.600' }
+      }
+    }
+  ],
+  defaultVariants: {
+    size: 'md',
+    variant: 'circle'
+  }
+})
+
+const avatarGroupSlotRecipe = defineSlotRecipe({
+  className: 'avatar-group',
+  jsx: ['MpAvatarGroup', 'mp-avatar-group'],
+  slots: ['root', 'excess'],
+  base: {
+    root: {
+      display: 'flex',
+      alignItems: 'center',
+      zIndex: '0'
+    },
+    excess: {
+      marginLeft: '2',
+      color: 'blue.400',
+      backgroundColor: 'blue.50',
+      fontWeight: 'semiBold',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 'full',
+      userSelect: 'none',
+      cursor: 'var(--mp-avatar-group--cursor)'
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        excess: { width: '6', height: '6', fontSize: 'xs' }
+      },
+      md: {
+        excess: { width: '8', height: '8', fontSize: 'sm' }
+      },
+      lg: {
+        excess: { width: '12', height: '12', fontSize: 'lg' }
+      },
+      xl: {
+        excess: { width: '20', height: '20', fontSize: '2xl' }
+      }
+    }
+  },
+  compoundVariants: [],
+  defaultVariants: {}
+})
+
+export { avatarSlotRecipe, avatarGroupSlotRecipe }

package/src/recipes/badge.ts

@@ -0,0 +1,166 @@
+import { defineRecipe } from '@pandacss/dev'
+
+const badgeRecipe = defineRecipe({
+  className: 'badge',
+  jsx: ['MpBadge', 'mp-badge'],
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    borderRadius: '999px'
+  },
+
+  variants: {
+    variant: {
+      solid: {
+        color: 'white'
+      },
+      subtle: {}
+    },
+    variantColor: {
+      blue: {},
+      green: {},
+      orange: {},
+      red: {},
+      gray: {}
+    },
+    size: {
+      sm: {
+        fontSize: 'xs',
+        fontWeight: 'semibold',
+        lineHeight: '1sm',
+        letterSpacing: 'normal',
+        height: '4'
+      },
+      md: {
+        fontSize: 'md',
+        fontWeight: 'regular',
+        lineHeight: 'md',
+        letterSpacing: 'normal',
+        height: '5'
+      }
+    }
+  },
+
+  compoundVariants: [
+    // Size
+    {
+      variant: 'solid',
+      size: 'md',
+      css: {
+        paddingX: '1.5',
+        paddingY: '0.5'
+      }
+    },
+    {
+      variant: 'solid',
+      size: 'sm',
+      css: {
+        paddingX: '1',
+        paddingY: '0.5'
+      }
+    },
+    {
+      variant: 'subtle',
+      size: 'md',
+      css: {
+        paddingX: '2',
+        paddingY: '0'
+      }
+    },
+    {
+      variant: 'subtle',
+      size: 'sm',
+      css: {
+        paddingX: '1',
+        paddingY: '0'
+      }
+    },
+
+    // Solid
+    {
+      variant: 'solid',
+      variantColor: 'blue',
+      css: {
+        backgroundColor: 'sky.400'
+      }
+    },
+    {
+      variant: 'solid',
+      variantColor: 'green',
+      css: {
+        backgroundColor: 'teal.400'
+      }
+    },
+    {
+      variant: 'solid',
+      variantColor: 'orange',
+      css: {
+        backgroundColor: 'amber.400'
+      }
+    },
+    {
+      variant: 'solid',
+      variantColor: 'red',
+      css: {
+        backgroundColor: 'rose.400'
+      }
+    },
+    {
+      variant: 'solid',
+      variantColor: 'gray',
+      css: {
+        backgroundColor: 'stone.400'
+      }
+    },
+
+    // Subtle
+    {
+      variant: ['subtle'],
+      variantColor: 'blue',
+      css: {
+        backgroundColor: 'blue.50',
+        color: 'blue.700'
+      }
+    },
+    {
+      variant: ['subtle'],
+      variantColor: 'green',
+      css: {
+        backgroundColor: 'green.50',
+        color: 'green.700'
+      }
+    },
+    {
+      variant: ['subtle'],
+      variantColor: 'orange',
+      css: {
+        backgroundColor: 'orange.50',
+        color: 'orange.700'
+      }
+    },
+    {
+      variant: ['subtle'],
+      variantColor: 'red',
+      css: {
+        backgroundColor: 'red.50',
+        color: 'red.700'
+      }
+    },
+    {
+      variant: ['subtle'],
+      variantColor: 'gray',
+      css: {
+        backgroundColor: 'gray.50',
+        color: 'black'
+      }
+    }
+  ],
+
+  defaultVariants: {
+    variant: 'solid',
+    size: 'md',
+    variantColor: 'blue'
+  }
+})
+
+export { badgeRecipe }

package/src/recipes/banner.ts

@@ -0,0 +1,143 @@
+import { defineRecipe, defineSlotRecipe } from '@pandacss/dev'
+
+const bannerSlotRecipe = defineSlotRecipe({
+  className: 'banner',
+  jsx: ['MpBanner', 'mp-banner'],
+  slots: ['root', 'body'],
+  base: {
+    root: {
+      display: 'flex',
+      position: 'relative',
+      alignItems: 'var(--mp-banner--align-items)',
+      borderRadius: 'md',
+      paddingY: 'var(--mp-banner--padding-y)',
+      paddingX: 'var(--mp-banner--padding-x)'
+    },
+    body: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      width: 'full'
+    }
+  },
+  variants: {
+    variant: {
+      info: {
+        root: { backgroundColor: 'blue.50' }
+      },
+      success: {
+        root: { backgroundColor: 'green.50' }
+      },
+      danger: {
+        root: { backgroundColor: 'red.50' }
+      },
+      warning: {
+        root: { backgroundColor: 'orange.50' }
+      }
+    }
+  },
+  compoundVariants: [],
+  defaultVariants: {
+    variant: 'info'
+  }
+})
+
+const bannerTitleRecipe = defineRecipe({
+  className: 'banner-title',
+  jsx: ['MpBannerTitle', 'mp-banner-title'],
+  base: {
+    fontFamily: 'body',
+    fontSize: 'md',
+    fontWeight: 'semiBold',
+    lineHeight: 'md',
+    letterSpacing: 'normal',
+    color: 'dark',
+    marginTop: '0.5',
+    marginBottom: '1.5'
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+})
+
+const bannerDescriptionRecipe = defineRecipe({
+  className: 'banner-description',
+  jsx: ['MpBannerDescription', 'mp-banner-description'],
+  base: {
+    fontFamily: 'body',
+    fontSize: 'md',
+    fontWeight: 'regular',
+    lineHeight: 'md',
+    letterSpacing: 'normal',
+    color: 'dark'
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+})
+
+const bannerIconSlotRecipe = defineSlotRecipe({
+  className: 'banner-icon',
+  jsx: ['MpBannerIcon', 'mp-banner-icon'],
+  slots: ['root', 'custom'],
+  base: {
+    root: {
+      marginRight: '3'
+    },
+    custom: {
+      flexShrink: '0',
+      backfaceVisibility: 'hidden',
+      width: '6',
+      height: '6',
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      marginRight: '3',
+      color: 'var(--mp-banner-icon--color)'
+    }
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+})
+
+const bannerLinkRecipe = defineRecipe({
+  className: 'banner-link',
+  jsx: ['MpBannerLink', 'mp-banner-link'],
+  base: {
+    display: 'flex',
+    gap: '4',
+    marginBottom: 'var(--mp-banner-link--margin-bottom)',
+    marginTop: 'var(--mp-banner-link--margin-top)'
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+})
+
+const bannerCloseButtonRecipe = defineRecipe({
+  className: 'banner-close-button',
+  jsx: ['MpBannerCloseButton', 'mp-banner-close-button'],
+  base: {
+    position: 'absolute',
+    top: 'var(--mp-banner-close-button--top)',
+    right: 'var(--mp-banner-close-button--right)',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '6',
+    height: '6',
+    cursor: 'pointer'
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+})
+
+export {
+  bannerSlotRecipe,
+  bannerTitleRecipe,
+  bannerDescriptionRecipe,
+  bannerIconSlotRecipe,
+  bannerLinkRecipe,
+  bannerCloseButtonRecipe
+}