@mekari/pixel3-theme 0.2.2-dev.4 → 0.2.2-dev.6

package/dist/index.mjs

@@ -213,7 +213,8 @@ var tagSlotRecipe = defineSlotRecipe({
   defaultVariants: {
     size: "md",
     variant: "gray"
-  }
+  },
+  staticCss: ["*"]
 });
 
 // src/recipes/avatar.ts
@@ -496,7 +497,7 @@ var aireneButtonSlotRecipe = defineSlotRecipe3({
       color: "blue.400!",
       borderRadius: "25px!",
       fontSize: "md",
-      fontWeight: "semiBold",
+      fontWeight: "semiBold!",
       paddingLeft: "0.625rem!",
       paddingRight: "0.625rem!",
       overflow: "hidden",
@@ -621,6 +622,9 @@ var buttonRecipe = defineRecipe({
     transitionDuration: "250ms",
     transitionProperty: "background, border-color, color, box-shadow",
     transitionTimingFunction: "linear",
+    _isFullWidth: {
+      width: "full"
+    },
     _loading: {
       cursor: "wait",
       position: "absolute",
@@ -1819,7 +1823,8 @@ var popoverContentRecipe = defineRecipe5({
   defaultVariants: {
     isDark: false,
     isUnstyled: false
-  }
+  },
+  staticCss: ["*"]
 });
 var popoverListRecipe = defineRecipe5({
   className: "popover-list",
@@ -1866,7 +1871,7 @@ var popoverListItemRecipe = defineRecipe5({
         color: "text.default"
       }
     },
-    _active: {
+    '&[data-active="true"]': {
       background: "ice.50",
       color: "dark",
       outline: 0,
@@ -1898,8 +1903,8 @@ var badgeRecipe = defineRecipe6({
         color: "white"
       },
       subtle: {},
-      "additionalInformation": {},
-      "tableStatus": {},
+      additionalInformation: {},
+      tableStatus: {},
       indicator: {}
     },
     variantColor: {
@@ -4012,7 +4017,8 @@ var toastSlotRecipe = defineSlotRecipe20({
   variants: {
     variant: {
       success: {},
-      error: {}
+      error: {},
+      greeting: {}
     }
   },
   compoundVariants: [
@@ -4037,6 +4043,25 @@ var toastSlotRecipe = defineSlotRecipe20({
           }
         }
       }
+    },
+    {
+      variant: "greeting",
+      css: {
+        root: {
+          borderRadius: "999px",
+          border: "none",
+          backgroundColor: "overlay",
+          _nextTheme: {
+            backgroundColor: "background.overlay"
+          }
+        },
+        label: {
+          color: "white",
+          _nextTheme: {
+            color: "text.inverse-static"
+          }
+        }
+      }
     }
   ],
   defaultVariants: {
@@ -4172,6 +4197,32 @@ var broadcastSlotRecipe = defineSlotRecipe21({
             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"
+          }
+        }
       }
     }
   },
@@ -4895,11 +4946,7 @@ import { defineSlotRecipe as defineSlotRecipe24 } from "@pandacss/dev";
 var carouselSlotRecipe = defineSlotRecipe24({
   className: "carousel",
   jsx: ["MpCarousel", "mp-carousel"],
-  slots: [
-    "root",
-    "buttonRight",
-    "buttonLeft"
-  ],
+  slots: ["root", "buttonRight", "buttonLeft"],
   base: {
     root: {
       display: "block",
@@ -5055,7 +5102,15 @@ import { defineSlotRecipe as defineSlotRecipe26 } from "@pandacss/dev";
 var autocompleteSlotRecipe = defineSlotRecipe26({
   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,
@@ -5101,6 +5156,11 @@ var autocompleteSlotRecipe = defineSlotRecipe26({
     },
     input: {
       cursor: "pointer"
+    },
+    infinityScroll: {
+      height: "1px",
+      width: "100%",
+      marginTop: "-1px"
     }
   }
 });
@@ -5214,11 +5274,13 @@ var timelineLogSlotRecipe = defineSlotRecipe27({
   base: {
     root: {
       display: "flex",
-      flexDirection: "column"
+      flexDirection: "column",
+      gap: "1"
     },
     log: {
       display: "flex",
-      cursor: "pointer"
+      cursor: "pointer",
+      gap: "1"
     },
     logText: {
       color: "gray.400",
@@ -5247,7 +5309,11 @@ var timelineSeparatorSlotRecipe = defineSlotRecipe27({
     root: {
       display: "flex",
       flexDirection: "column",
-      alignItems: "center"
+      alignItems: "center",
+      "&[data-accordion-child=true]": {
+        alignItems: "start",
+        marginLeft: "9px"
+      }
     },
     topConnector: {
       height: "6px",
@@ -5257,8 +5323,20 @@ var timelineSeparatorSlotRecipe = defineSlotRecipe27({
       "&[data-position=first]": {
         backgroundColor: "transparent"
       },
+      "&[data-hide=true]": {
+        backgroundColor: "transparent"
+      },
+      "&[data-accordion-child=true]": {
+        roundedBottom: ""
+      },
       _nextTheme: {
-        backgroundColor: "border.default"
+        backgroundColor: "border.default",
+        "&[data-position=first]": {
+          backgroundColor: "transparent"
+        },
+        "&[data-hide=true]": {
+          backgroundColor: "transparent"
+        }
       }
     },
     bottomConnector: {
@@ -5270,10 +5348,19 @@ var timelineSeparatorSlotRecipe = defineSlotRecipe27({
       "&[data-position=last]": {
         backgroundColor: "transparent"
       },
+      "&[data-hide=true]": {
+        backgroundColor: "transparent"
+      },
+      "&[data-accordion-child=true]": {
+        roundedTop: ""
+      },
       _nextTheme: {
         backgroundColor: "border.default",
         "&[data-position=last]": {
           backgroundColor: "transparent"
+        },
+        "&[data-hide=true]": {
+          backgroundColor: "transparent"
         }
       }
     }
@@ -5805,6 +5892,110 @@ var tourSlotRecipe = defineSlotRecipe31({
   defaultVariants: {}
 });
 
+// src/recipes/textlink.ts
+import { defineRecipe as defineRecipe14 } from "@pandacss/dev";
+var textlinkRecipe = defineRecipe14({
+  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"
+        }
+      }
+    }
+  ]
+});
+
 // src/recipes/index.ts
 var recipes = {
   buttonRecipe,
@@ -5832,7 +6023,8 @@ var recipes = {
   dateItemRecipe,
   monthItemRecipe,
   yearItemRecipe,
-  timeItemRecipe
+  timeItemRecipe,
+  textlinkRecipe
 };
 var slotRecipes = {
   accordionSlotRecipe,
@@ -6242,7 +6434,7 @@ var fontWeights = defineTokens10.fontWeights({
 var lineHeights = defineTokens10.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 },
@@ -6494,16 +6686,28 @@ var spacing2 = defineTokens15.spacing({
 import { defineTokens as defineTokens16 } from "@pandacss/dev";
 var shadows2 = defineTokens16.shadows({
   xs: {
-    value: ["0px 2px 4px 0px {colors.background.shadow}", "0px 0px 2px 0px {colors.background.shadow}"]
+    value: [
+      "0px 2px 4px 0px {colors.background.shadow}",
+      "0px 0px 2px 0px {colors.background.shadow}"
+    ]
   },
   sm: {
-    value: ["0px 10px 15px -3px {colors.background.shadow}", "0px 4px 6px -2px {colors.background.shadow}"]
+    value: [
+      "0px 10px 15px -3px {colors.background.shadow}",
+      "0px 4px 6px -2px {colors.background.shadow}"
+    ]
   },
   md: {
-    value: ["0px 20px 25px -5px {colors.background.shadow}", "0px 10px 10px -5px {colors.background.shadow}"]
+    value: [
+      "0px 20px 25px -5px {colors.background.shadow}",
+      "0px 10px 10px -5px {colors.background.shadow}"
+    ]
   },
   lg: {
-    value: ["0px 25px 30px -10px {colors.background.shadow}", "0px 15px 15px -10px {colors.background.shadow}"]
+    value: [
+      "0px 25px 30px -10px {colors.background.shadow}",
+      "0px 15px 15px -10px {colors.background.shadow}"
+    ]
   },
   focus: {
     value: "0 0 0 1px {colors.border.focused}"
@@ -6932,6 +7136,16 @@ var colors3 = defineSemanticTokens.colors({
           }
         }
       }
+    },
+    airene: {
+      value: {
+        base: "radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%)",
+        // Doens't have raw token
+        _light: "radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%)",
+        // Doesn't have raw token
+        _dark: "radial-gradient(108.28% 139.29% at 0% 0%, #1D2656 0%, #2B2549 100%)"
+        // Doesn't have raw token
+      }
     }
   },
   nav: {

package/dist/recipes/index.d.mts

@@ -27,6 +27,7 @@ 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;

package/dist/recipes/index.d.ts

@@ -27,6 +27,7 @@ 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;

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/dist/semanticTokens/colors.d.mts

@@ -378,6 +378,13 @@ declare const colors: {
                 };
             };
         };
+        airene: {
+            value: {
+                base: string;
+                _light: string;
+                _dark: string;
+            };
+        };
     };
     nav: {
         parent: {

package/dist/semanticTokens/colors.d.ts

@@ -378,6 +378,13 @@ declare const colors: {
                 };
             };
         };
+        airene: {
+            value: {
+                base: string;
+                _light: string;
+                _dark: string;
+            };
+        };
     };
     nav: {
         parent: {

package/dist/semanticTokens/index.d.mts

@@ -379,6 +379,13 @@ declare const semanticTokens: {
                     };
                 };
             };
+            airene: {
+                value: {
+                    base: string;
+                    _light: string;
+                    _dark: string;
+                };
+            };
         };
         nav: {
             parent: {

package/dist/semanticTokens/index.d.ts

@@ -379,6 +379,13 @@ declare const semanticTokens: {
                     };
                 };
             };
+            airene: {
+                value: {
+                    base: string;
+                    _light: string;
+                    _dark: string;
+                };
+            };
         };
         nav: {
             parent: {

package/package.json

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

package/src/conditions.ts

@@ -4,7 +4,8 @@ export const conditions = {
     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])',
@@ -20,6 +21,6 @@ export const conditions = {
     placementRight: '&[data-placement=right]',
     nextTheme: '[data-panda-theme=next] &',
     light: '.light &',
-    dark: '.dark &',
+    dark: '.dark &'
   }
 }

package/src/fonts.ts

@@ -6,7 +6,7 @@ export const globalFontface = {
         'url("https://cdn.mekari.design/fonts/Inter/Inter-Regular.ttf") format("truetype")'
       ],
       fontStyle: 'normal',
-      fontWeight: '400',
+      fontWeight: '400'
       // fontDisplay: 'swap'
     },
     {
@@ -15,7 +15,7 @@ export const globalFontface = {
         'url("https://cdn.mekari.design/fonts/Inter/Inter-SemiBold.ttf") format("truetype")'
       ],
       fontStyle: 'normal',
-      fontWeight: '600',
+      fontWeight: '600'
       // fontDisplay: 'swap'
     },
     {
@@ -24,8 +24,8 @@ export const globalFontface = {
         'url("https://cdn.mekari.design/fonts/Inter/Inter-SemiBoldItalic.ttf") format("truetype")'
       ],
       fontStyle: 'italic',
-      fontWeight: '600',
+      fontWeight: '600'
       // fontDisplay: 'swap'
-    },
+    }
   ]
 }

package/src/global-css.ts

@@ -5,7 +5,7 @@ export const globalCss = defineGlobalStyles({
     MozOsxFontSmoothing: 'grayscale',
     textRendering: 'optimizeLegibility',
     WebkitFontSmoothing: 'antialiased',
-    WebkitTextSizeAdjust: '100%',
+    WebkitTextSizeAdjust: '100%'
   },
   body: {
     background: 'var(--mp-colors-white)',
@@ -18,8 +18,8 @@ export const globalCss = defineGlobalStyles({
       colorScheme: 'dark'
     },
     _nextTheme: {
-      background: 'var(--mp-colors-background-neutral)', 
-      color: 'var(--mp-colors-text-default)',
+      background: 'var(--mp-colors-background-neutral)',
+      color: 'var(--mp-colors-text-default)'
     }
   },
   '*, *::before, *::after': {

package/src/index.ts

@@ -29,7 +29,7 @@ const preset: Preset = definePreset({
     next: {
       tokens: tokensNext,
       semanticTokens
-    },
+    }
   },
   conditions,
   globalCss,

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 }