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

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

@@ -0,0 +1,26 @@
+declare const radii: {
+    none: {
+        value: string;
+    };
+    sm: {
+        value: string;
+        description: string;
+    };
+    md: {
+        value: string;
+        description: string;
+    };
+    lg: {
+        value: string;
+        description: string;
+    };
+    xl: {
+        value: string;
+        description: string;
+    };
+    full: {
+        value: string;
+    };
+};
+
+export { radii };

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

@@ -0,0 +1,26 @@
+declare const radii: {
+    none: {
+        value: string;
+    };
+    sm: {
+        value: string;
+        description: string;
+    };
+    md: {
+        value: string;
+        description: string;
+    };
+    lg: {
+        value: string;
+        description: string;
+    };
+    xl: {
+        value: string;
+        description: string;
+    };
+    full: {
+        value: string;
+    };
+};
+
+export { radii };

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

@@ -0,0 +1,28 @@
+declare const shadows: {
+    xs: {
+        value: string[];
+    };
+    sm: {
+        value: string[];
+    };
+    md: {
+        value: string[];
+    };
+    lg: {
+        value: string[];
+    };
+    focus: {
+        value: string;
+    };
+    outline: {
+        value: string;
+    };
+    outer: {
+        value: string;
+    };
+    none: {
+        value: string;
+    };
+};
+
+export { shadows };

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

@@ -0,0 +1,28 @@
+declare const shadows: {
+    xs: {
+        value: string[];
+    };
+    sm: {
+        value: string[];
+    };
+    md: {
+        value: string[];
+    };
+    lg: {
+        value: string[];
+    };
+    focus: {
+        value: string;
+    };
+    outline: {
+        value: string;
+    };
+    outer: {
+        value: string;
+    };
+    none: {
+        value: string;
+    };
+};
+
+export { shadows };

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

@@ -0,0 +1,51 @@
+declare const spacing: {
+    0: {
+        value: string;
+    };
+    0.5: {
+        value: string;
+        description: string;
+    };
+    1: {
+        value: string;
+        description: string;
+    };
+    1.5: {
+        value: string;
+        description: string;
+    };
+    2: {
+        value: string;
+        description: string;
+    };
+    3: {
+        value: string;
+        description: string;
+    };
+    4: {
+        value: string;
+        description: string;
+    };
+    5: {
+        value: string;
+        description: string;
+    };
+    6: {
+        value: string;
+        description: string;
+    };
+    8: {
+        value: string;
+        description: string;
+    };
+    10: {
+        value: string;
+        description: string;
+    };
+    20: {
+        value: string;
+        description: string;
+    };
+};
+
+export { spacing };

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

@@ -0,0 +1,51 @@
+declare const spacing: {
+    0: {
+        value: string;
+    };
+    0.5: {
+        value: string;
+        description: string;
+    };
+    1: {
+        value: string;
+        description: string;
+    };
+    1.5: {
+        value: string;
+        description: string;
+    };
+    2: {
+        value: string;
+        description: string;
+    };
+    3: {
+        value: string;
+        description: string;
+    };
+    4: {
+        value: string;
+        description: string;
+    };
+    5: {
+        value: string;
+        description: string;
+    };
+    6: {
+        value: string;
+        description: string;
+    };
+    8: {
+        value: string;
+        description: string;
+    };
+    10: {
+        value: string;
+        description: string;
+    };
+    20: {
+        value: string;
+        description: string;
+    };
+};
+
+export { spacing };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mekari/pixel3-theme",
   "description": "Theme for mekari pixel 3",
-  "version": "0.2.1",
+  "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,9 +2,9 @@ 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=true])',
     checked: '&:is(:checked, [data-checked], [aria-checked=true], [data-state=checked])',
-    indeterminate:
-      '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate])',
+    indeterminate: '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate])',
     closed: '&:is([data-state=closed])',
     open: '&:is([open], [data-state=open])',
     hidden: '&:is([hidden])',
@@ -12,12 +12,14 @@ export const conditions = {
     loading: '& > [data-loading=true], &:is([data-loading], [aria-busy=true])',
     hasIcon: '&[data-has-icon=true]',
     hasLabel: '&[data-has-label=true]',
-    active: '&[data-active=true], [data-active]',
     highlight: '&[data-highlight=true], [data-highlight]',
     hasBorder: '&[data-has-border=true]',
     hasBackground: '&[data-has-background=true]',
     isFullWidth: '&[data-is-full-width=true]',
     placementLeft: '&[data-placement=left]',
-    placementRight: '&[data-placement=right]'
+    placementRight: '&[data-placement=right]',
+    nextTheme: '[data-panda-theme=next] &',
+    light: '.light &',
+    dark: '.dark &',
   }
 }

package/src/global-css.ts

@@ -16,6 +16,10 @@ export const globalCss = defineGlobalStyles({
     lineHeight: 'var(--mp-line-heights-lg)',
     _dark: {
       colorScheme: 'dark'
+    },
+    _nextTheme: {
+      background: 'var(--mp-colors-background-neutral)', 
+      color: 'var(--mp-colors-text-default)',
     }
   },
   '*, *::before, *::after': {

package/src/index.ts

@@ -7,23 +7,36 @@ import { keyframes } from './keyframes'
 import { recipes, slotRecipes } from './recipes'
 import { textStyles } from './text-styles'
 import { tokens } from './tokens'
+import { tokensNext } from './tokens-next'
+import { semanticTokens } from './semanticTokens'
 import { globalFontface } from './fonts'
 
 const preset: Preset = definePreset({
   name: '@mekari/pixel3-theme',
+  // Main Theme
   theme: {
     extend: {
+      tokens,
       breakpoints,
       keyframes,
       textStyles,
-      tokens,
       recipes,
       slotRecipes
     }
   },
+  // Alternate Theme
+  themes: {
+    next: {
+      tokens: tokensNext,
+      semanticTokens
+    },
+  },
   conditions,
-  globalFontface,
   globalCss,
+  staticCss: {
+    themes: ['next']
+  },
+  globalFontface,
   globalVars: {
     '--font-inter': 'Inter, sans-serif'
   }

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,25 +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',
-      _last: { borderBottomWidth: '1px', borderColor: 'gray.100' }
+      pb: 3,
+      _last: {
+        borderBottomWidth: '1px',
+        borderColor: 'gray.100',
+        _nextTheme: { borderColor: 'transparent' }
+      },
+      _nextTheme: {
+        borderColor: 'border.default'
+      }
     },
     panel: {
-      py: 3
+      pt: 2,
+      color: 'gray.600',
+      _nextTheme: {
+        color: 'text.secondary'
+      }
     }
   },
   variants: {
@@ -46,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/autocomplete.ts

@@ -28,7 +28,12 @@ const autocompleteSlotRecipe = defineSlotRecipe({
       zIndex: '999',
       py: 2,
       height: '9.5',
-      _hover: { color: 'blue.500' }
+      _hover: { color: 'blue.500', _nextTheme: { color: 'text.link' } },
+      _nextTheme: {
+        background: 'background.stage',
+        borderColor: 'border.default',
+        color: 'text.link',
+      }
     },
     emptyText: {
       px: 3,