@mekari/pixel3-theme 0.2.2-dev.3 → 0.2.2-dev.5

package/dist/recipes/divider.d.mts

@@ -1,5 +1,5 @@
 import * as _pandacss_dev from '@pandacss/dev';
 
-declare const dividerRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+declare const dividerSlotRecipe: _pandacss_dev.SlotRecipeConfig;
 
-export { dividerRecipe };
+export { dividerSlotRecipe };

package/dist/recipes/divider.d.ts

@@ -1,5 +1,5 @@
 import * as _pandacss_dev from '@pandacss/dev';
 
-declare const dividerRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+declare const dividerSlotRecipe: _pandacss_dev.SlotRecipeConfig;
 
-export { dividerRecipe };
+export { dividerSlotRecipe };

package/dist/recipes/index.d.mts

@@ -16,7 +16,6 @@ declare const recipes: {
     tabSelectedBorderRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     tableRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     tableContainerRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
-    dividerRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     bannerTitleRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     bannerDescriptionRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     bannerLinkRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
@@ -28,10 +27,12 @@ declare const recipes: {
     monthItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     yearItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     timeItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
+    textlinkRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
 };
 declare const slotRecipes: {
     accordionSlotRecipe: _pandacss_types.SlotRecipeConfig;
     checkboxSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    dividerSlotRecipe: _pandacss_types.SlotRecipeConfig;
     radioSlotRecipe: _pandacss_types.SlotRecipeConfig;
     sharedSlotRecipe: _pandacss_types.SlotRecipeConfig;
     progressSlotRecipe: _pandacss_types.SlotRecipeConfig;

package/dist/recipes/index.d.ts

@@ -16,7 +16,6 @@ declare const recipes: {
     tabSelectedBorderRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     tableRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     tableContainerRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
-    dividerRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     bannerTitleRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     bannerDescriptionRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     bannerLinkRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
@@ -28,10 +27,12 @@ declare const recipes: {
     monthItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     yearItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
     timeItemRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
+    textlinkRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
 };
 declare const slotRecipes: {
     accordionSlotRecipe: _pandacss_types.SlotRecipeConfig;
     checkboxSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    dividerSlotRecipe: _pandacss_types.SlotRecipeConfig;
     radioSlotRecipe: _pandacss_types.SlotRecipeConfig;
     sharedSlotRecipe: _pandacss_types.SlotRecipeConfig;
     progressSlotRecipe: _pandacss_types.SlotRecipeConfig;

package/dist/recipes/textlink.d.mts

@@ -0,0 +1,5 @@
+import * as _pandacss_dev from '@pandacss/dev';
+
+declare const textlinkRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+
+export { textlinkRecipe };

package/dist/recipes/textlink.d.ts

@@ -0,0 +1,5 @@
+import * as _pandacss_dev from '@pandacss/dev';
+
+declare const textlinkRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+
+export { textlinkRecipe };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mekari/pixel3-theme",
   "description": "Theme for mekari pixel 3",
-  "version": "0.2.2-dev.3",
+  "version": "0.2.2-dev.5",
   "main": "dist/index.js",
   "license": "MIT",
   "files": [

package/src/recipes/airene-button.ts

@@ -14,7 +14,7 @@ const aireneButtonSlotRecipe = defineSlotRecipe({
       color: 'blue.400!',
       borderRadius: '25px!',
       fontSize: 'md',
-      fontWeight: 'semiBold',
+      fontWeight: 'semiBold!',
       paddingLeft: '0.625rem!',
       paddingRight: '0.625rem!',
       overflow: 'hidden',

package/src/recipes/autocomplete.ts

@@ -3,10 +3,19 @@ import { defineSlotRecipe } from '@pandacss/dev'
 const autocompleteSlotRecipe = defineSlotRecipe({
   className: 'autocomplete',
   jsx: ['MpAutocomplete', 'mp-autocomplete'],
-  slots: ['groupText', 'popoverContent', 'buttonAction', 'emptyText', 'contentLoading', 'input'],
+  slots: [
+    'groupText',
+    'popoverContent',
+    'buttonAction',
+    'emptyText',
+    'contentLoading',
+    'input',
+    'infinityScroll'
+  ],
   base: {
     groupText: {
-      px: 3, py: 2 
+      px: 3,
+      py: 2
     },
     popoverContent: {
       maxHeight: '300px',
@@ -32,24 +41,29 @@ const autocompleteSlotRecipe = defineSlotRecipe({
       _nextTheme: {
         background: 'background.stage',
         borderColor: 'border.default',
-        color: 'text.link',
+        color: 'text.link'
       }
     },
     emptyText: {
-      px: 3, 
+      px: 3,
       py: 2
     },
     contentLoading: {
-      px: 3, 
-      py: 2, 
-      display: 'flex', 
-      alignItems: 'center', 
+      px: 3,
+      py: 2,
+      display: 'flex',
+      alignItems: 'center',
       gap: 3
     },
     input: {
       cursor: 'pointer'
+    },
+    infinityScroll: {
+      height: '1px',
+      width: '100%',
+      marginTop: '-1px'
     }
-  },
+  }
 })
 
 export { autocompleteSlotRecipe }

package/src/recipes/broadcast.ts

@@ -126,7 +126,33 @@ const broadcastSlotRecipe = defineSlotRecipe({
             color: 'text.warning.inverse'
           } 
         }
-      }
+      },
+      critical: {
+        container: { 
+          backgroundColor: 'rose.400',
+          _nextTheme: {
+            backgroundColor: 'background.danger.bold',
+          }
+        },
+        icon: { 
+          color: 'white',
+          _nextTheme: {
+            color: 'icon.inverse'
+          }
+        },
+        label: { 
+          color: 'white',
+          _nextTheme: {
+            color: 'text.inverse'
+          }
+        },
+        textLink: { 
+          color: 'white',
+          _nextTheme: {
+            color: 'text.inverse'
+          } 
+        }
+      },
     }
   },
   compoundVariants: [],

package/src/recipes/button.ts

@@ -20,6 +20,9 @@ const buttonRecipe = defineRecipe({
     transitionDuration: '250ms',
     transitionProperty: 'background, border-color, color, box-shadow',
     transitionTimingFunction: 'linear',
+    _isFullWidth: {
+      width: 'full'
+    },
     _loading: {
       cursor: 'wait',
       position: 'absolute',

package/src/recipes/date-picker.ts

@@ -343,10 +343,13 @@ const monthItemRecipe = defineRecipe({
       color: 'gray.400',
       cursor: 'not-allowed',
       borderColor: 'transparent',
-      backgroundColor: 'transparent'
+      backgroundColor: 'transparent',
+      _nextTheme: {
+        color: 'text.disabled'
+      }
     },
     _nextTheme: {
-      color: 'text.default'
+      color: 'text.default',
     }
   },
   variants: {
@@ -423,7 +426,10 @@ const yearItemRecipe = defineRecipe({
       color: 'gray.400',
       cursor: 'not-allowed',
       borderColor: 'transparent',
-      backgroundColor: 'transparent'
+      backgroundColor: 'transparent',
+      _nextTheme: {
+        color: 'text.disabled'
+      }
     },
     _nextTheme: {
       color: 'text.default'
@@ -503,7 +509,10 @@ const timeItemRecipe = defineRecipe({
       color: 'gray.400',
       cursor: 'not-allowed',
       borderColor: 'transparent',
-      backgroundColor: 'transparent'
+      backgroundColor: 'transparent',
+      _nextTheme: {
+        color: 'text.disabled'
+      }
     },
     _nextTheme: {
       color: 'text.default'

package/src/recipes/divider.ts

@@ -1,43 +1,49 @@
-import { defineRecipe } from '@pandacss/dev'
+import { defineSlotRecipe } from '@pandacss/dev'
 
-const dividerRecipe = defineRecipe({
+const dividerSlotRecipe = defineSlotRecipe({
   className: 'divider',
   jsx: ['MpDivider', 'mp-divider'],
+  slots: ['root', 'label'],
   base: {
-    border: 0,
-    opacity: 0.6,
-    color: 'rgb(208, 214, 221)',
-    _nextTheme: {
-      color: 'border.default',
-      opacity: 1,
-    }
-  },
-  variants: {
-    variant: {
-      solid: {
-        borderStyle: 'solid',
-      },
-      dashed: {
-        borderStyle: 'dashed'
+    root: {
+      position: 'relative',
+      borderColor: 'gray.100',
+      color: 'gray.100',
+      _nextTheme: {
+        color: 'text.secondary',
+        borderColor: 'border.default'
       }
     },
-    orientation: {
-      horizontal: {
-        borderBottom: '0.0625rem solid',
-        height: 'auto',
-        marginY: 2
+    label: {
+      display: 'flex',
+      alignItems: 'center',
+      borderColor: 'gray.100',
+      color: 'gray.600',
+      _nextTheme: {
+        color: 'text.secondary',
+      },
+      _before: {
+        content: '""',
+        flex: 1,
+        borderTopWidth: '0.0625rem',
+        marginRight: '2',
+        borderColor: 'gray.100',
+        _nextTheme: {
+          borderColor: 'border.default'
+        },
       },
-      vertical: {
-        borderLeft: '0.0625rem solid',
-        height: 'auto',
-        marginX: 2
+      _after: {
+        content: '""',
+        flex: 1,
+        borderTopWidth: '0.0625rem',
+        marginLeft: '2',
+        borderColor: 'gray.100',
+        _nextTheme: {
+          borderColor: 'border.default'
+        },
       }
     }
-  },
-  compoundVariants: [],
-  defaultVariants: {
-    orientation: 'horizontal'
   }
 })
 
-export { dividerRecipe }
+export { dividerSlotRecipe }

package/src/recipes/index.ts

@@ -21,7 +21,7 @@ import { tableRecipe, tableContainerRecipe } from './table'
 import { progressSlotRecipe } from './progress'
 import { formControlSlotRecipe } from './form-control'
 import { inputTagSlotRecipe } from './input-tag'
-import { dividerRecipe } from './divider'
+import { dividerSlotRecipe } from './divider'
 import { modalSlotRecipe } from './modal'
 import { uploadSlotRecipe, uploadListSlotRecipe } from './upload'
 import { dropzoneSlotRecipe } from './dropzone'
@@ -64,6 +64,7 @@ import {
 import { colorPickerSlotRecipe } from './color-picker'
 import { sliderSlotRecipe } from './slider'
 import { tourSlotRecipe } from './tour'
+import { textlinkRecipe } from './textlink'
 
 export const recipes = {
   buttonRecipe,
@@ -81,7 +82,6 @@ export const recipes = {
   tabSelectedBorderRecipe,
   tableRecipe,
   tableContainerRecipe,
-  dividerRecipe,
   bannerTitleRecipe,
   bannerDescriptionRecipe,
   bannerLinkRecipe,
@@ -92,12 +92,14 @@ export const recipes = {
   dateItemRecipe,
   monthItemRecipe,
   yearItemRecipe,
-  timeItemRecipe
+  timeItemRecipe,
+  textlinkRecipe
 }
 
 export const slotRecipes = {
   accordionSlotRecipe,
   checkboxSlotRecipe,
+  dividerSlotRecipe,
   radioSlotRecipe,
   sharedSlotRecipe,
   progressSlotRecipe,

package/src/recipes/modal.ts

@@ -102,7 +102,10 @@ export const modalSlotRecipe = defineSlotRecipe({
       top: '0',
       w: '100vw',
       h: '100vh',
-      zIndex: 'overlay'
+      zIndex: 'overlay',
+      _nextTheme: {
+        background: 'background.overlay'
+      }
     }
   },
   variants: {

package/src/recipes/popover.ts

@@ -34,7 +34,8 @@ const popoverContentRecipe = defineRecipe({
   defaultVariants: {
     isDark: false,
     isUnstyled: false
-  }
+  },
+  staticCss: ['*']
 })
 
 const popoverListRecipe = defineRecipe({
@@ -83,7 +84,7 @@ const popoverListItemRecipe = defineRecipe({
         color: 'text.default'
       }
     },
-    _active: {
+    '&[data-active="true"]': {
       background: 'ice.50',
       color: 'dark',
       outline: 0,

package/src/recipes/select.ts

@@ -69,15 +69,15 @@ const selectSlotRecipe = defineSlotRecipe({
           }
         },
         _focus: {
-          borderColor: 'transparent',
+          borderColor: 'border.focused',
           boxShadow: 'focus',
           _hover: {
-            borderColor: 'transparent',
+            borderColor: 'border.focused',
           },
           _invalid: {
-            borderColor: 'transparent',
+            borderColor: 'border.focused',
             _hover: {
-              borderColor: 'transparent',
+              borderColor: 'border.focused',
             },
           }
         },

package/src/recipes/tag.ts

@@ -47,20 +47,20 @@ const tagSlotRecipe = defineSlotRecipe({
     size: {
       sm: {
         root: {
-          height: '5',
+          height: '5'
         },
         close: {
           width: '5',
-          height: '5',
+          height: '5'
         }
       },
       md: {
         root: {
-          height: '7',
+          height: '7'
         },
         close: {
           width: '7',
-          height: '7',
+          height: '7'
         }
       }
     },
@@ -71,7 +71,7 @@ const tagSlotRecipe = defineSlotRecipe({
           background: 'gray.50',
           _nextTheme: {
             color: 'text.secondary',
-            background: 'background.neutral.subtle',
+            background: 'background.neutral.subtle'
           }
         }
       },
@@ -81,7 +81,7 @@ const tagSlotRecipe = defineSlotRecipe({
           backgroundColor: 'red.50',
           _nextTheme: {
             color: 'text.danger',
-            background: 'background.danger',
+            background: 'background.danger'
           }
         }
       }
@@ -99,7 +99,7 @@ const tagSlotRecipe = defineSlotRecipe({
           _nextTheme: {
             background: 'background.neutral.subtle',
             boxShadow: '-7px 0px 15px -3px #0000001A',
-            color: 'icon.default',
+            color: 'icon.default'
           }
         }
       }
@@ -115,22 +115,17 @@ const tagSlotRecipe = defineSlotRecipe({
           _nextTheme: {
             background: 'background.danger',
             boxShadow: '-7px 0px 15px -3px #0000001A',
-            color: 'icon.danger',
+            color: 'icon.danger'
           }
         }
       }
-    },
-    {
-      size: 'sm',
-      css: {
-        close: { paddingTop: '0' }
-      }
     }
   ],
   defaultVariants: {
     size: 'md',
     variant: 'gray'
-  }
+  },
+  staticCss: ['*']
 })
 
 export { tagSlotRecipe }

package/src/recipes/textlink.ts

@@ -0,0 +1,105 @@
+import { defineRecipe } from '@pandacss/dev'
+
+const textlinkRecipe = defineRecipe({
+  className: 'textlink',
+  jsx: ['MpTextlink', 'mp-textlink'],
+  base: {
+    display: 'inline-flex !important',
+    gap: '1',
+    py: '0 !important',
+    px: '2px !important',
+    backgroundColor: 'transparent !important',
+    textStyle: 'label.md !important',
+    _hover: {
+      textDecoration: 'underline'
+    },
+    _loading: {
+      background: 'white'
+    },
+  },
+  variants: {
+    variant: {
+      primary: {
+        color: 'blue.400',
+        _hover: {
+          color: 'blue.400'
+        },
+        _active: {
+          color: 'blue.700'
+        },
+        _nextTheme: {
+          color: 'text.link',
+          _hover: {
+            color: 'text.link',
+          },
+          _active: {
+            color: 'text.link.pressed'
+          },
+        }
+      },
+      secondary: {
+        color: 'gray.400',
+        _hover: {
+          color: 'gray.400'
+        },
+        _active: {
+          color: 'gray.700',
+        },
+        _nextTheme: {
+          color: 'text.secondary',
+          _hover: {
+            color: 'text.secondary',
+          },
+          _active: {
+            color: 'text.secondary.pressed'
+          },
+        }
+      },
+      danger: {
+        color: 'red.400',
+        _hover: {
+          color: 'red.400'
+        },
+        _active: {
+          color: 'red.700'
+        },
+        _nextTheme: {
+          color: 'text.danger',
+          _hover: {
+            color: 'text.danger',
+          },
+          _active: {
+            color: 'text.danger.pressed'
+          },
+        }
+      },
+    }
+  },
+  compoundVariants: [
+    {
+      variant: ['primary', 'secondary', 'danger'],
+      css: {
+        _disabled: {
+          cursor: 'not-allowed',
+          color: 'gray.100',
+          _hover: {
+            color: 'gray.100',
+            textDecoration: 'none'
+          },
+          _nextTheme: {
+            color: 'text.disabled',
+            _hover: {
+              color: 'text.disabled',
+              textDecoration: 'none'
+            }
+          }
+        },
+        _focusVisible: {
+          boxShadow: 'focus'
+        }
+      }
+    }
+  ]
+})
+
+export { textlinkRecipe}

package/src/recipes/timeline.ts

@@ -109,11 +109,13 @@ const timelineLogSlotRecipe = defineSlotRecipe({
   base: {
     root: {
       display: 'flex',
-      flexDirection: 'column'
+      flexDirection: 'column',
+      gap: '1'
     },
     log: {
       display: 'flex',
-      cursor: 'pointer'
+      cursor: 'pointer',
+      gap: '1'
     },
     logText: {
       color: 'gray.400',

package/src/recipes/toast.ts

@@ -30,7 +30,8 @@ const toastSlotRecipe = defineSlotRecipe({
   variants: {
     variant: {
       success: {},
-      error: {}
+      error: {},
+      greeting: {}
     }
   },
   compoundVariants: [
@@ -55,6 +56,25 @@ const toastSlotRecipe = defineSlotRecipe({
           } 
         }
       }
+    },
+    {
+      variant: 'greeting',
+      css: {
+        root: { 
+          borderRadius: '999px',
+          border: 'none',
+          backgroundColor: 'overlay',
+          _nextTheme: {
+            backgroundColor: 'background.overlay',
+          } 
+        },
+        label: {
+          color: 'white',
+          _nextTheme: {
+            color: 'text.inverse-static',
+          }
+        }
+      }
     }
   ],
   defaultVariants: {

package/src/tokens/typography.ts

@@ -28,7 +28,7 @@ export const fontWeights = defineTokens.fontWeights({
 export const lineHeights = defineTokens.lineHeights({
   xs: { value: 1.2 },
   sm: { value: 1.34 },
-  md: { value: 1.4 },
+  md: { value: 1.43 },
   lg: { value: 1.429 },
   xl: { value: 1.5 },
   '2xl': { value: 1.67 },