@mekari/pixel3-theme 0.2.2-dev.0 → 0.2.2-dev.1

package/dist/recipes/airene-button.d.mts

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

package/dist/recipes/airene-button.d.ts

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

package/dist/recipes/index.d.mts

@@ -73,6 +73,7 @@ declare const slotRecipes: {
     colorPickerSlotRecipe: _pandacss_types.SlotRecipeConfig;
     sliderSlotRecipe: _pandacss_types.SlotRecipeConfig;
     tourSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    aireneButtonSlotRecipe: _pandacss_types.SlotRecipeConfig;
 };
 
 export { recipes, slotRecipes };

package/dist/recipes/index.d.ts

@@ -73,6 +73,7 @@ declare const slotRecipes: {
     colorPickerSlotRecipe: _pandacss_types.SlotRecipeConfig;
     sliderSlotRecipe: _pandacss_types.SlotRecipeConfig;
     tourSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    aireneButtonSlotRecipe: _pandacss_types.SlotRecipeConfig;
 };
 
 export { recipes, slotRecipes };

package/dist/tokens/colors.d.mts

@@ -17,6 +17,9 @@ declare const colors: {
     white: {
         value: string;
     };
+    vibrantPurple: {
+        value: string;
+    };
     whiteAlpha: {
         50: {
             value: string;

package/dist/tokens/colors.d.ts

@@ -17,6 +17,9 @@ declare const colors: {
     white: {
         value: string;
     };
+    vibrantPurple: {
+        value: string;
+    };
     whiteAlpha: {
         50: {
             value: string;

package/dist/tokens/index.d.mts

@@ -32,6 +32,9 @@ declare const tokens: {
         white: {
             value: string;
         };
+        vibrantPurple: {
+            value: string;
+        };
         whiteAlpha: {
             50: {
                 value: string;

package/dist/tokens/index.d.ts

@@ -32,6 +32,9 @@ declare const tokens: {
         white: {
             value: string;
         };
+        vibrantPurple: {
+            value: string;
+        };
         whiteAlpha: {
             50: {
                 value: string;

package/dist/tokens-next/colors.d.mts

@@ -8,6 +8,9 @@ declare const colors: {
     white: {
         value: string;
     };
+    vibrantPurple: {
+        value: string;
+    };
     dark: {
         '-100': {
             value: string;

package/dist/tokens-next/colors.d.ts

@@ -8,6 +8,9 @@ declare const colors: {
     white: {
         value: string;
     };
+    vibrantPurple: {
+        value: string;
+    };
     dark: {
         '-100': {
             value: string;

package/dist/tokens-next/index.d.mts

@@ -29,6 +29,9 @@ declare const tokensNext: {
         white: {
             value: string;
         };
+        vibrantPurple: {
+            value: string;
+        };
         dark: {
             '-100': {
                 value: string;

package/dist/tokens-next/index.d.ts

@@ -29,6 +29,9 @@ declare const tokensNext: {
         white: {
             value: string;
         };
+        vibrantPurple: {
+            value: string;
+        };
         dark: {
             '-100': {
                 value: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mekari/pixel3-theme",
   "description": "Theme for mekari pixel 3",
-  "version": "0.2.2-dev.0",
+  "version": "0.2.2-dev.1",
   "main": "dist/index.js",
   "license": "MIT",
   "files": [
@@ -37,6 +37,7 @@
     "build:types": "tsup src --dts-only",
     "types:check": "tsc --noEmit",
     "replace-config": "clean-package",
-    "restore-config": "clean-package restore"
+    "restore-config": "clean-package restore",
+    "types:vue": "vue-tsc --noEmit"
   }
 }

package/src/conditions.ts

@@ -2,7 +2,7 @@ export const conditions = {
   extend: {
     disabled: '&:is(:disabled, [disabled], [aria-disabled=true], [data-disabled])',
     invalid: '&:is([aria-invalid=true], [data-invalid])',
-    active: '&:is(:active, [data-active], [data-active=true])',
+    active: '&:is(:active, [data-active=true])',
     checked: '&:is(:checked, [data-checked], [aria-checked=true], [data-state=checked])',
     indeterminate: '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate])',
     closed: '&:is([data-state=closed])',

package/src/keyframes.ts

@@ -11,5 +11,10 @@ export const keyframes = defineKeyframes({
   },
   spin: {
     '100%': { transform: 'rotate(1turn)' }
+  },
+  'border-shine': {
+    '0%': { backgroundPosition: '0% 20%' },
+    '50%': { backgroundPosition: '100% 50%' },
+    '100%': { backgroundPosition: '0% 100%' }
   }
 })

package/src/recipes/accordion.ts

@@ -2,7 +2,7 @@ import { defineSlotRecipe } from '@pandacss/dev'
 
 export const accordionSlotRecipe = defineSlotRecipe({
   className: 'accordion',
-  slots: ['header', 'item', 'panel'],
+  slots: ['header', 'headerTitle', 'headerDescription', 'item', 'panel'],
   jsx: [
     'MpAccordionHeader',
     'MpAccordionItem',
@@ -13,35 +13,52 @@ export const accordionSlotRecipe = defineSlotRecipe({
   ],
   base: {
     header: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      pt: 3,
+      _disabled: { opacity: '0.4', cursor: 'not-allowed' }
+    },
+    headerTitle: {
       display: 'flex',
       alignItems: 'center',
+      gap: 2,
       width: '100%',
       outline: 0,
-      gap: 4,
-      transition: 'all 0.2s',
-      py: 3,
       fontWeight: 'semiBold',
-      fontSize: 'md',
+      fontSize: 'xl',
       color: 'dark',
-      _disabled: { opacity: '0.4', cursor: 'not-allowed' },
+      transition: 'all 0.2s',
       _nextTheme: {
         color: 'text.default'
       }
     },
+    headerDescription: {
+      color: 'gray.600',
+      lineHeight: 'md',
+      _nextTheme: {
+        color: 'text.secondary'
+      }
+    },
     item: {
       borderBottomWidth: '1px',
       borderColor: 'gray.100',
+      pb: 3,
       _last: {
         borderBottomWidth: '1px',
         borderColor: 'gray.100',
-        _nextTheme: { borderColor: 'border.default' }
+        _nextTheme: { borderColor: 'transparent' }
       },
       _nextTheme: {
         borderColor: 'border.default'
       }
     },
     panel: {
-      py: 3
+      pt: 2,
+      color: 'gray.600',
+      _nextTheme: {
+        color: 'text.secondary'
+      }
     }
   },
   variants: {
@@ -56,9 +73,32 @@ export const accordionSlotRecipe = defineSlotRecipe({
           cursor: 'default'
         }
       }
+    },
+    iconPosition: {
+      start: {
+        headerDescription: {
+          pl: 8
+        },
+        panel: {
+          pl: 8
+        }
+      },
+      end: {
+        headerDescription: {
+          pl: 0
+        },
+        panel: {
+          pl: 0
+        }
+      }
     }
   },
   defaultVariants: {
-    isClickable: true
-  }
+    isClickable: true,
+    iconPosition: 'end'
+  },
+  staticCss: [
+    // Need to generate statically as `start` and `end` values are runtime-determined.
+    { iconPosition: ['*'] }
+  ]
 })

package/src/recipes/airene-button.ts

@@ -0,0 +1,120 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const aireneButtonSlotRecipe = defineSlotRecipe({
+  className: 'airene-button',
+  jsx: ['MpAireneButton', 'mp-airene-button'],
+  slots: ['root', 'badge'],
+  base: {
+    root: {
+      display: 'inline-flex!',
+      justifyContent: 'center',
+      alignItems: 'center',
+      position: 'relative',
+      backgroundColor: 'white',
+      color: 'blue.400!',
+      borderRadius: '25px!',
+      fontSize: 'md',
+      fontWeight: 'semiBold',
+      paddingLeft: '0.625rem!',
+      paddingRight: '0.625rem!',
+      overflow: 'hidden',
+      paddingTop: '7.5px!',
+      paddingBottom: '7.5px!',
+      height: 'auto',
+      zIndex: '1',
+      gap: '0!',
+      transition: 'color 0.3s ease, background-color 0.3s ease',
+      _nextTheme: {
+        backgroundColor: 'background.neutral',
+        color: 'text.link!',
+      },
+      _before: {
+        content: '\'\'',
+        position: 'absolute',
+        top: '-2px',
+        left: '-2px',
+        right: '-2px',
+        bottom: '-2px',
+        borderRadius: '23px',
+        background: 'vibrantPurple',
+        backgroundSize: '200% 200%',
+        animation: 'border-shine 4s linear infinite',
+        transition: 'background-color 0.3s ease',
+        zIndex: '-1',
+      },
+      _after: {
+        content: '\'\'',
+        position: 'absolute',
+        top: '2px',
+        left: '2px',
+        right: '2px',
+        bottom: '2px',
+        borderRadius: '999px',
+        backgroundColor: 'white',
+        zIndex: '-1',
+        _nextTheme: {
+          backgroundColor: 'background.neutral',
+        },
+      },
+      _hover: {
+        _before: {
+          background: 'linear-gradient(90deg, var(--mp-colors-blue-400), var(--mp-colors-blue-400), var(--mp-colors-blue-400))',
+          _nextTheme: {
+            background: 'linear-gradient(90deg, var(--mp-colors-background-brand-bold), var(--mp-colors-background-brand-bold), var(--mp-colors-background-brand-bold))',
+          }
+        }
+      },
+      _active: {
+        _before: {
+          background: 'linear-gradient(90deg, var(--mp-colors-blue-400), var(--mp-colors-blue-400), var(--mp-colors-blue-400))',
+        },
+        _after: {
+          background: 'blue.50',
+        }
+      },
+      _disabled: {
+        color: 'gray.400!',
+        cursor: 'not-allowed',
+        _nextTheme: {
+          color: 'text.placeholder!',
+        },
+        _before: {
+          background: 'gray.50!',
+        },
+        _after: {
+          background: 'gray.50!',
+          _nextTheme: {
+            bacground: '#F0F1F3!',
+          }
+        }
+      }
+    },
+    badge: {
+      display: 'flex',
+      backgroundColor: 'var(--mp-airene-button-badge-background)',
+      borderRadius: '999px',
+      paddingRight: '1',
+      paddingLeft: '0.5',
+      paddingY: '0.5',
+      height: '4',
+      marginLeft: '1',
+      '& > [data-pixel-component=MpIcon]': {
+        width: '3!',
+        height: '3!',
+        '& > path': {
+          fill: 'var(--mp-airene-button-badge-icon)',
+        }
+      },
+      '& > [data-pixel-component=MpText]': {
+        fontSize: '0.625rem!',
+        fontWeight: 'semiBold!',
+        color: 'var(--mp-airene-button-badge-text)'
+      }
+    }
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+})
+
+export { aireneButtonSlotRecipe }

package/src/recipes/avatar.ts

@@ -129,20 +129,20 @@ const avatarSlotRecipe = defineSlotRecipe({
     variantColor: variantColor,
     size: {
       sm: {
-        root: { width: '6', height: '6', fontSize: 'xs' },
-        icon: { width: '4!', height: '4!' }
+        root: { width: '5', height: '5', fontSize: 'sm' },
+        icon: { width: '3!', height: '3!' }
       },
       md: {
-        root: { width: '8', height: '8', fontSize: 'sm' },
-        icon: { width: '5!', height: '5!' }
+        root: { width: '6', height: '6', fontSize: 'md' },
+        icon: { width: '4!', height: '4!' }
       },
       lg: {
-        root: { width: '12', height: '12', fontSize: 'lg' },
-        icon: { width: '8!', height: '8!' }
+        root: { width: '9', height: '9', fontSize: 'sm' },
+        icon: { width: '5!', height: '5!' }
       },
       xl: {
-        root: { width: '20', height: '20', fontSize: '2xl' },
-        icon: { width: '16!', height: '16!' }
+        root: { width: '20', height: '20', fontSize: '32px' },
+        icon: { width: '12!', height: '12!' }
       }
     }
   },
@@ -200,7 +200,7 @@ const avatarGroupSlotRecipe = defineSlotRecipe({
       zIndex: '0'
     },
     excess: {
-      marginLeft: '2',
+      marginLeft: '1',
       color: 'blue.400',
       backgroundColor: 'blue.50',
       fontWeight: 'semiBold',
@@ -219,16 +219,36 @@ const avatarGroupSlotRecipe = defineSlotRecipe({
   variants: {
     size: {
       sm: {
-        excess: { width: '6', height: '6', fontSize: 'xs' }
+        root: { 
+          '& > [data-pixel-component=MpAvatar]': {
+            width: '6.5', height: '6.5', fontSize: 'sm'
+          }
+        },
+        excess: { width: '5', height: '5', fontSize: 'sm' }
       },
       md: {
-        excess: { width: '8', height: '8', fontSize: 'sm' }
+        root: { 
+          '& > [data-pixel-component=MpAvatar]': {
+            width: '7', height: '7', fontSize: 'md'
+          }
+        },
+        excess: { width: '6', height: '6', fontSize: 'md' }
       },
       lg: {
-        excess: { width: '12', height: '12', fontSize: 'lg' }
+        root: { 
+          '& > [data-pixel-component=MpAvatar]': {
+            width: '9.5', height: '9.5', fontSize: 'sm'
+          }
+        },
+        excess: { width: '9', height: '9', fontSize: 'sm' }
       },
       xl: {
-        excess: { width: '20', height: '20', fontSize: '2xl' }
+        root: { 
+          '& > [data-pixel-component=MpAvatar]': {
+            width: '82px', height: '82px', fontSize: '32px'
+          }
+        },
+        excess: { width: '20', height: '20', fontSize: '32px' }
       }
     }
   },

package/src/recipes/banner.ts

@@ -72,7 +72,6 @@ const bannerTitleRecipe = defineRecipe({
     lineHeight: 'md',
     letterSpacing: 'normal',
     color: 'dark',
-    marginTop: '0.5',
     marginBottom: '1',
     _nextTheme: {
       color: 'text.default',