@mekari/pixel3-theme 0.6.0 → 0.6.1

package/dist/index.js

@@ -91,6 +91,10 @@ var globalCss = (0, import_dev.defineGlobalStyles)({
   "*, *::before, *::after": {
     borderStyle: "solid",
     boxSizing: "border-box"
+  },
+  "[data-sonner-toaster]": {
+    display: "flex",
+    justifyContent: "center"
   }
 });
 
@@ -437,7 +441,6 @@ var avatarSlotRecipe = (0, import_dev4.defineSlotRecipe)({
     size: "md",
     variant: "circle"
   },
-  // TODO: Check why this recipe need to generate statically
   staticCss: ["*"]
 });
 var avatarGroupSlotRecipe = (0, import_dev4.defineSlotRecipe)({
@@ -513,7 +516,6 @@ var avatarGroupSlotRecipe = (0, import_dev4.defineSlotRecipe)({
   },
   compoundVariants: [],
   defaultVariants: {},
-  // TODO: Check why this recipe need to generate statically
   staticCss: ["*"]
 });
 
@@ -932,11 +934,11 @@ var buttonRecipe = (0, import_dev6.defineRecipe)({
           paddingX: "2",
           paddingY: "1",
           _hasIcon: {
-            "[data-icon-position=left]": {
+            "&[data-icon-position=left]": {
               paddingLeft: "1.5",
               paddingRight: "2"
             },
-            "[data-icon-position=right]": {
+            "&[data-icon-position=right]": {
               paddingLeft: "2",
               paddingRight: "1.5"
             }
@@ -945,11 +947,11 @@ var buttonRecipe = (0, import_dev6.defineRecipe)({
             paddingX: "xs",
             paddingY: "3xs",
             _hasIcon: {
-              "[data-icon-position=left]": {
+              "&[data-icon-position=left]": {
                 paddingLeft: "2xs",
                 paddingRight: "xs"
               },
-              "[data-icon-position=right]": {
+              "&[data-icon-position=right]": {
                 paddingLeft: "xs",
                 paddingRight: "2xs"
               }
@@ -983,25 +985,25 @@ var buttonRecipe = (0, import_dev6.defineRecipe)({
           paddingY: "2",
           _hasIcon: {
             "&[data-icon-position=left]": {
-              paddingLeft: "3 !important",
-              paddingRight: "4 !important"
+              paddingLeft: "3",
+              paddingRight: "4"
             },
-            "& [data-icon-position=right]": {
-              paddingLeft: "4 !important",
-              paddingRight: "3 !important"
+            "&[data-icon-position=right]": {
+              paddingLeft: "4",
+              paddingRight: "3"
             }
           },
           _nextTheme: {
             paddingX: "md",
             paddingY: "xs",
             _hasIcon: {
-              "[data-icon-position=left]": {
-                paddingLeft: "sm !important",
-                paddingRight: "md !important"
+              "&[data-icon-position=left]": {
+                paddingLeft: "sm",
+                paddingRight: "md"
               },
-              "[data-icon-position=right]": {
-                paddingLeft: "md !important",
-                paddingRight: "sm !important"
+              "&[data-icon-position=right]": {
+                paddingLeft: "md",
+                paddingRight: "sm"
               }
             }
           }
@@ -1096,7 +1098,6 @@ var buttonRecipe = (0, import_dev6.defineRecipe)({
     variant: "primary",
     size: "md"
   },
-  // TODO: Check why this recipe need to generate statically
   staticCss: ["*"]
 });
 var buttonGroupRecipe = (0, import_dev6.defineRecipe)({
@@ -1297,7 +1298,6 @@ var inputSlotRecipe = (0, import_dev7.defineSlotRecipe)({
     size: "md",
     variant: "outline"
   },
-  // TODO: Check why this recipe need to generate statically
   staticCss: ["*"]
 });
 var inputGroupSlotRecipe = (0, import_dev7.defineSlotRecipe)({
@@ -1459,7 +1459,6 @@ var inputAddonSlotRecipe = (0, import_dev7.defineSlotRecipe)({
     size: "md",
     placement: "left"
   },
-  // TODO: Check why this recipe need to generate statically
   staticCss: ["*"]
 });
 
@@ -1707,7 +1706,6 @@ var iconRecipe = (0, import_dev10.defineRecipe)({
   defaultVariants: {
     size: "md"
   },
-  // TODO: Check why this recipe need to generate statically
   staticCss: ["*"]
 });
 
@@ -1951,7 +1949,8 @@ var badgeRecipe = (0, import_dev14.defineRecipe)({
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: "999px"
+    borderRadius: "999px",
+    width: "fit-content"
   },
   variants: {
     variant: {
@@ -2243,21 +2242,18 @@ var tooltipRecipe = (0, import_dev16.defineRecipe)({
   className: "tooltip",
   jsx: ["MpTooltip", "mp-tooltip"],
   base: {
+    pointerEvents: "none",
+    maxW: "280px",
     px: "2",
     py: "1",
     borderRadius: "sm",
-    fontWeight: "regular",
-    pointerEvents: "none",
-    fontSize: "sm",
-    lineHeight: "20px",
-    shadow: "md",
-    maxW: "300px",
-    zIndex: "tooltip",
-    boxShadow: "sm",
-    bg: "overlay",
-    color: "white",
+    textStyle: "label.md",
     whiteSpace: "normal",
     overflowWrap: "break-word",
+    zIndex: "tooltip",
+    boxShadow: "xs",
+    background: "overlay",
+    color: "white",
     _nextTheme: {
       background: "background.overlay",
       color: "text.inverse.static"
@@ -2302,6 +2298,9 @@ var tabListSlotRecipe = (0, import_dev17.defineSlotRecipe)({
       maxWidth: "full",
       _nextTheme: {
         color: "text.secondary"
+      },
+      "&[data-has-margin-bottom=false]": {
+        marginBottom: 0
       }
     }
   }
@@ -2321,6 +2320,9 @@ var tabRecipe = (0, import_dev17.defineRecipe)({
     pb: "4",
     px: "1",
     color: "gray.600",
+    "[data-has-margin-bottom=false] &": {
+      marginBottom: "0px"
+    },
     _hover: {
       color: "dark"
     },
@@ -2438,10 +2440,8 @@ var tabSelectedBorderRecipe = (0, import_dev17.defineRecipe)({
       false: {
         background: "transparent",
         _groupHover: {
-          background: "gray.400"
-        },
-        _nextTheme: {
-          _groupHover: {
+          background: "gray.400",
+          _nextTheme: {
             background: "border.bold"
           }
         }
@@ -2455,12 +2455,12 @@ var tabSelectedBorderRecipe = (0, import_dev17.defineRecipe)({
       isSelected: true,
       css: {
         background: "blue.400",
-        _groupHover: {
-          background: "blue.400"
-        },
         _nextTheme: {
-          background: "border.selected",
-          _groupHover: {
+          background: "border.selected"
+        },
+        _groupHover: {
+          background: "blue.400",
+          _nextTheme: {
             background: "border.selected"
           }
         }
@@ -3061,7 +3061,7 @@ var tableRecipe = (0, import_dev22.defineRecipe)({
       fontWeight: "regular",
       backgroundColor: "white",
       _nextTheme: {
-        background: "background.neutral"
+        background: "background.stage"
       }
     },
     "& th[data-table-cell-fixed=true], & td[data-table-cell-fixed=true]": {
@@ -3213,7 +3213,6 @@ var formControlSlotRecipe = (0, import_dev24.defineSlotRecipe)({
     },
     required: {
       color: "red.400",
-      marginLeft: "1",
       _nextTheme: {
         color: "text.danger"
       }
@@ -3595,11 +3594,15 @@ var modalSlotRecipe = (0, import_dev27.defineSlotRecipe)({
           height: "100%",
           border: "none",
           borderRadius: "none"
+        },
+        header: {
+          borderTopLeftRadius: "0",
+          borderTopRightRadius: "0"
         }
       },
       false: {
         contentRoot: {
-          top: "3.75rem"
+          top: "80px"
         },
         contentChild: {
           height: "100%",

package/dist/index.mjs

@@ -65,6 +65,10 @@ var globalCss = defineGlobalStyles({
   "*, *::before, *::after": {
     borderStyle: "solid",
     boxSizing: "border-box"
+  },
+  "[data-sonner-toaster]": {
+    display: "flex",
+    justifyContent: "center"
   }
 });
 
@@ -411,7 +415,6 @@ var avatarSlotRecipe = defineSlotRecipe2({
     size: "md",
     variant: "circle"
   },
-  // TODO: Check why this recipe need to generate statically
   staticCss: ["*"]
 });
 var avatarGroupSlotRecipe = defineSlotRecipe2({
@@ -487,7 +490,6 @@ var avatarGroupSlotRecipe = defineSlotRecipe2({
   },
   compoundVariants: [],
   defaultVariants: {},
-  // TODO: Check why this recipe need to generate statically
   staticCss: ["*"]
 });
 
@@ -906,11 +908,11 @@ var buttonRecipe = defineRecipe({
           paddingX: "2",
           paddingY: "1",
           _hasIcon: {
-            "[data-icon-position=left]": {
+            "&[data-icon-position=left]": {
               paddingLeft: "1.5",
               paddingRight: "2"
             },
-            "[data-icon-position=right]": {
+            "&[data-icon-position=right]": {
               paddingLeft: "2",
               paddingRight: "1.5"
             }
@@ -919,11 +921,11 @@ var buttonRecipe = defineRecipe({
             paddingX: "xs",
             paddingY: "3xs",
             _hasIcon: {
-              "[data-icon-position=left]": {
+              "&[data-icon-position=left]": {
                 paddingLeft: "2xs",
                 paddingRight: "xs"
               },
-              "[data-icon-position=right]": {
+              "&[data-icon-position=right]": {
                 paddingLeft: "xs",
                 paddingRight: "2xs"
               }
@@ -957,25 +959,25 @@ var buttonRecipe = defineRecipe({
           paddingY: "2",
           _hasIcon: {
             "&[data-icon-position=left]": {
-              paddingLeft: "3 !important",
-              paddingRight: "4 !important"
+              paddingLeft: "3",
+              paddingRight: "4"
             },
-            "& [data-icon-position=right]": {
-              paddingLeft: "4 !important",
-              paddingRight: "3 !important"
+            "&[data-icon-position=right]": {
+              paddingLeft: "4",
+              paddingRight: "3"
             }
           },
           _nextTheme: {
             paddingX: "md",
             paddingY: "xs",
             _hasIcon: {
-              "[data-icon-position=left]": {
-                paddingLeft: "sm !important",
-                paddingRight: "md !important"
+              "&[data-icon-position=left]": {
+                paddingLeft: "sm",
+                paddingRight: "md"
               },
-              "[data-icon-position=right]": {
-                paddingLeft: "md !important",
-                paddingRight: "sm !important"
+              "&[data-icon-position=right]": {
+                paddingLeft: "md",
+                paddingRight: "sm"
               }
             }
           }
@@ -1070,7 +1072,6 @@ var buttonRecipe = defineRecipe({
     variant: "primary",
     size: "md"
   },
-  // TODO: Check why this recipe need to generate statically
   staticCss: ["*"]
 });
 var buttonGroupRecipe = defineRecipe({
@@ -1271,7 +1272,6 @@ var inputSlotRecipe = defineSlotRecipe4({
     size: "md",
     variant: "outline"
   },
-  // TODO: Check why this recipe need to generate statically
   staticCss: ["*"]
 });
 var inputGroupSlotRecipe = defineSlotRecipe4({
@@ -1433,7 +1433,6 @@ var inputAddonSlotRecipe = defineSlotRecipe4({
     size: "md",
     placement: "left"
   },
-  // TODO: Check why this recipe need to generate statically
   staticCss: ["*"]
 });
 
@@ -1681,7 +1680,6 @@ var iconRecipe = defineRecipe3({
   defaultVariants: {
     size: "md"
   },
-  // TODO: Check why this recipe need to generate statically
   staticCss: ["*"]
 });
 
@@ -1925,7 +1923,8 @@ var badgeRecipe = defineRecipe6({
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: "999px"
+    borderRadius: "999px",
+    width: "fit-content"
   },
   variants: {
     variant: {
@@ -2217,21 +2216,18 @@ var tooltipRecipe = defineRecipe8({
   className: "tooltip",
   jsx: ["MpTooltip", "mp-tooltip"],
   base: {
+    pointerEvents: "none",
+    maxW: "280px",
     px: "2",
     py: "1",
     borderRadius: "sm",
-    fontWeight: "regular",
-    pointerEvents: "none",
-    fontSize: "sm",
-    lineHeight: "20px",
-    shadow: "md",
-    maxW: "300px",
-    zIndex: "tooltip",
-    boxShadow: "sm",
-    bg: "overlay",
-    color: "white",
+    textStyle: "label.md",
     whiteSpace: "normal",
     overflowWrap: "break-word",
+    zIndex: "tooltip",
+    boxShadow: "xs",
+    background: "overlay",
+    color: "white",
     _nextTheme: {
       background: "background.overlay",
       color: "text.inverse.static"
@@ -2276,6 +2272,9 @@ var tabListSlotRecipe = defineSlotRecipe7({
       maxWidth: "full",
       _nextTheme: {
         color: "text.secondary"
+      },
+      "&[data-has-margin-bottom=false]": {
+        marginBottom: 0
       }
     }
   }
@@ -2295,6 +2294,9 @@ var tabRecipe = defineRecipe9({
     pb: "4",
     px: "1",
     color: "gray.600",
+    "[data-has-margin-bottom=false] &": {
+      marginBottom: "0px"
+    },
     _hover: {
       color: "dark"
     },
@@ -2412,10 +2414,8 @@ var tabSelectedBorderRecipe = defineRecipe9({
       false: {
         background: "transparent",
         _groupHover: {
-          background: "gray.400"
-        },
-        _nextTheme: {
-          _groupHover: {
+          background: "gray.400",
+          _nextTheme: {
             background: "border.bold"
           }
         }
@@ -2429,12 +2429,12 @@ var tabSelectedBorderRecipe = defineRecipe9({
       isSelected: true,
       css: {
         background: "blue.400",
-        _groupHover: {
-          background: "blue.400"
-        },
         _nextTheme: {
-          background: "border.selected",
-          _groupHover: {
+          background: "border.selected"
+        },
+        _groupHover: {
+          background: "blue.400",
+          _nextTheme: {
             background: "border.selected"
           }
         }
@@ -3035,7 +3035,7 @@ var tableRecipe = defineRecipe10({
       fontWeight: "regular",
       backgroundColor: "white",
       _nextTheme: {
-        background: "background.neutral"
+        background: "background.stage"
       }
     },
     "& th[data-table-cell-fixed=true], & td[data-table-cell-fixed=true]": {
@@ -3187,7 +3187,6 @@ var formControlSlotRecipe = defineSlotRecipe13({
     },
     required: {
       color: "red.400",
-      marginLeft: "1",
       _nextTheme: {
         color: "text.danger"
       }
@@ -3569,11 +3568,15 @@ var modalSlotRecipe = defineSlotRecipe16({
           height: "100%",
           border: "none",
           borderRadius: "none"
+        },
+        header: {
+          borderTopLeftRadius: "0",
+          borderTopRightRadius: "0"
         }
       },
       false: {
         contentRoot: {
-          top: "3.75rem"
+          top: "80px"
         },
         contentChild: {
           height: "100%",

package/package.json

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

package/src/global-css.ts

@@ -25,5 +25,9 @@ export const globalCss = defineGlobalStyles({
   '*, *::before, *::after': {
     borderStyle: 'solid',
     boxSizing: 'border-box'
+  },
+  '[data-sonner-toaster]': {
+    display: 'flex',
+    justifyContent: 'center'
   }
 })

package/src/recipes/avatar.ts

@@ -187,7 +187,6 @@ const avatarSlotRecipe = defineSlotRecipe({
     size: 'md',
     variant: 'circle'
   },
-  // TODO: Check why this recipe need to generate statically
   staticCss: ['*']
 })
 
@@ -264,7 +263,6 @@ const avatarGroupSlotRecipe = defineSlotRecipe({
   },
   compoundVariants: [],
   defaultVariants: {},
-  // TODO: Check why this recipe need to generate statically
   staticCss: ['*']
 })
 

package/src/recipes/badge.ts

@@ -8,7 +8,8 @@ const badgeRecipe = defineRecipe<RecipeVariantRecord>({
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
-    borderRadius: '999px'
+    borderRadius: '999px',
+    width: 'fit-content'
   },
 
   variants: {

package/src/recipes/button.ts

@@ -295,11 +295,11 @@ const buttonRecipe = defineRecipe({
           paddingX: '2',
           paddingY: '1',
           _hasIcon: {
-            '[data-icon-position=left]': {
+            '&[data-icon-position=left]': {
               paddingLeft: '1.5',
               paddingRight: '2'
             },
-            '[data-icon-position=right]': {
+            '&[data-icon-position=right]': {
               paddingLeft: '2',
               paddingRight: '1.5'
             }
@@ -309,11 +309,11 @@ const buttonRecipe = defineRecipe({
             paddingX: 'xs',
             paddingY: '3xs',
             _hasIcon: {
-              '[data-icon-position=left]': {
+              '&[data-icon-position=left]': {
                 paddingLeft: '2xs',
                 paddingRight: 'xs'
               },
-              '[data-icon-position=right]': {
+              '&[data-icon-position=right]': {
                 paddingLeft: 'xs',
                 paddingRight: '2xs'
               }
@@ -347,12 +347,12 @@ const buttonRecipe = defineRecipe({
           paddingY: '2',
           _hasIcon: {
             '&[data-icon-position=left]': {
-              paddingLeft: '3 !important',
-              paddingRight: '4 !important'
+              paddingLeft: '3',
+              paddingRight: '4'
             },
-            '& [data-icon-position=right]': {
-              paddingLeft: '4 !important',
-              paddingRight: '3 !important'
+            '&[data-icon-position=right]': {
+              paddingLeft: '4',
+              paddingRight: '3'
             }
           },
 
@@ -360,13 +360,13 @@ const buttonRecipe = defineRecipe({
             paddingX: 'md',
             paddingY: 'xs',
             _hasIcon: {
-              '[data-icon-position=left]': {
-                paddingLeft: 'sm !important',
-                paddingRight: 'md !important'
+              '&[data-icon-position=left]': {
+                paddingLeft: 'sm',
+                paddingRight: 'md'
               },
-              '[data-icon-position=right]': {
-                paddingLeft: 'md !important',
-                paddingRight: 'sm !important'
+              '&[data-icon-position=right]': {
+                paddingLeft: 'md',
+                paddingRight: 'sm'
               }
             }
           }
@@ -461,7 +461,6 @@ const buttonRecipe = defineRecipe({
     variant: 'primary',
     size: 'md'
   },
-  // TODO: Check why this recipe need to generate statically
   staticCss: ['*']
 })
 

package/src/recipes/form-control.ts

@@ -16,7 +16,6 @@ const formControlSlotRecipe = defineSlotRecipe({
     },
     required: {
       color: 'red.400',
-      marginLeft: '1',
       _nextTheme: {
         color: 'text.danger'
       }

package/src/recipes/icon.ts

@@ -30,6 +30,5 @@ export const iconRecipe = defineRecipe({
   defaultVariants: {
     size: 'md'
   },
-  // TODO: Check why this recipe need to generate statically
   staticCss: ['*']
 })

package/src/recipes/input.ts

@@ -170,7 +170,6 @@ const inputSlotRecipe = defineSlotRecipe({
     size: 'md',
     variant: 'outline'
   },
-  // TODO: Check why this recipe need to generate statically
   staticCss: ['*']
 })
 
@@ -334,7 +333,6 @@ const inputAddonSlotRecipe = defineSlotRecipe({
     size: 'md',
     placement: 'left'
   },
-  // TODO: Check why this recipe need to generate statically
   staticCss: ['*']
 })
 

package/src/recipes/modal.ts

@@ -130,11 +130,15 @@ export const modalSlotRecipe = defineSlotRecipe({
           height: '100%',
           border: 'none',
           borderRadius: 'none'
+        },
+        header: {
+          borderTopLeftRadius: '0',
+          borderTopRightRadius: '0'
         }
       },
       false: {
         contentRoot: {
-          top: '3.75rem'
+          top: '80px'
         },
         contentChild: {
           height: '100%',

package/src/recipes/table.ts

@@ -102,7 +102,7 @@ const tableRecipe = defineRecipe({
       fontWeight: 'regular',
       backgroundColor: 'white',
       _nextTheme: {
-        background: 'background.neutral'
+        background: 'background.stage'
       }
     },
     '& th[data-table-cell-fixed=true], & td[data-table-cell-fixed=true]': {

package/src/recipes/tabs.ts

@@ -35,6 +35,9 @@ const tabListSlotRecipe = defineSlotRecipe({
       maxWidth: 'full',
       _nextTheme: {
         color: 'text.secondary'
+      },
+      '&[data-has-margin-bottom=false]': {
+        marginBottom: 0
       }
     }
   }
@@ -55,6 +58,11 @@ const tabRecipe = defineRecipe({
     pb: '4',
     px: '1',
     color: 'gray.600',
+
+    '[data-has-margin-bottom=false] &': {
+      marginBottom: '0px'
+    },
+
     _hover: {
       color: 'dark'
     },
@@ -174,10 +182,8 @@ const tabSelectedBorderRecipe = defineRecipe({
       false: {
         background: 'transparent',
         _groupHover: {
-          background: 'gray.400'
-        },
-        _nextTheme: {
-          _groupHover: {
+          background: 'gray.400',
+          _nextTheme: {
             background: 'border.bold'
           }
         }
@@ -191,12 +197,12 @@ const tabSelectedBorderRecipe = defineRecipe({
       isSelected: true,
       css: {
         background: 'blue.400',
-        _groupHover: {
-          background: 'blue.400'
-        },
         _nextTheme: {
-          background: 'border.selected',
-          _groupHover: {
+          background: 'border.selected'
+        },
+        _groupHover: {
+          background: 'blue.400',
+          _nextTheme: {
             background: 'border.selected'
           }
         }

package/src/recipes/tooltip.ts

@@ -4,21 +4,18 @@ const tooltipRecipe = defineRecipe({
   className: 'tooltip',
   jsx: ['MpTooltip', 'mp-tooltip'],
   base: {
+    pointerEvents: 'none',
+    maxW: '280px',
     px: '2',
     py: '1',
     borderRadius: 'sm',
-    fontWeight: 'regular',
-    pointerEvents: 'none',
-    fontSize: 'sm',
-    lineHeight: '20px',
-    shadow: 'md',
-    maxW: '300px',
-    zIndex: 'tooltip',
-    boxShadow: 'sm',
-    bg: 'overlay',
-    color: 'white',
+    textStyle: 'label.md',
     whiteSpace: 'normal',
     overflowWrap: 'break-word',
+    zIndex: 'tooltip',
+    boxShadow: 'xs',
+    background: 'overlay',
+    color: 'white',
     _nextTheme: {
       background: 'background.overlay',
       color: 'text.inverse.static'