@mekari/pixel3-theme 0.5.0-dev.0 → 0.5.0-dev.2

package/dist/conditions.d.mts

@@ -16,6 +16,7 @@ declare const conditions: {
         hasBorder: string;
         hasBackground: string;
         isFullWidth: string;
+        isRounded: string;
         placementLeft: string;
         placementRight: string;
         nextTheme: string;

package/dist/conditions.d.ts

@@ -16,6 +16,7 @@ declare const conditions: {
         hasBorder: string;
         hasBackground: string;
         isFullWidth: string;
+        isRounded: string;
         placementLeft: string;
         placementRight: string;
         nextTheme: string;

package/dist/index.js

@@ -54,6 +54,7 @@ var conditions = {
     hasBorder: "&[data-has-border=true]",
     hasBackground: "&[data-has-background=true]",
     isFullWidth: "&[data-is-full-width=true]",
+    isRounded: "&[data-is-rounded=true]",
     placementLeft: "&[data-placement=left]",
     placementRight: "&[data-placement=right]",
     nextTheme: "[data-panda-theme=next] &",
@@ -435,7 +436,9 @@ var avatarSlotRecipe = (0, import_dev4.defineSlotRecipe)({
   defaultVariants: {
     size: "md",
     variant: "circle"
-  }
+  },
+  // TODO: Check why this recipe need to generate statically
+  staticCss: ["*"]
 });
 var avatarGroupSlotRecipe = (0, import_dev4.defineSlotRecipe)({
   className: "avatar-group",
@@ -509,7 +512,9 @@ var avatarGroupSlotRecipe = (0, import_dev4.defineSlotRecipe)({
     }
   },
   compoundVariants: [],
-  defaultVariants: {}
+  defaultVariants: {},
+  // TODO: Check why this recipe need to generate statically
+  staticCss: ["*"]
 });
 
 // src/recipes/airene-button.ts
@@ -656,6 +661,9 @@ var buttonRecipe = (0, import_dev6.defineRecipe)({
     _isFullWidth: {
       width: "full"
     },
+    _isRounded: {
+      borderRadius: "full"
+    },
     _loading: {
       cursor: "wait",
       position: "absolute",
@@ -903,8 +911,14 @@ var buttonRecipe = (0, import_dev6.defineRecipe)({
         borderRadius: "sm",
         textStyle: "label.md",
         fontWeight: "regular",
+        _isRounded: {
+          borderRadius: "full"
+        },
         _loading: {
-          borderRadius: "sm"
+          borderRadius: "sm",
+          _isRounded: {
+            borderRadius: "full"
+          }
         },
         _hasIcon: {
           paddingX: "1",
@@ -947,8 +961,14 @@ var buttonRecipe = (0, import_dev6.defineRecipe)({
         borderRadius: "md",
         textStyle: "label.md",
         fontWeight: "semiBold",
+        _isRounded: {
+          borderRadius: "full"
+        },
         _loading: {
-          borderRadius: "md"
+          borderRadius: "md",
+          _isRounded: {
+            borderRadius: "full"
+          }
         },
         _hasIcon: {
           paddingX: "2",
@@ -1088,16 +1108,18 @@ var buttonGroupRecipe = (0, import_dev6.defineRecipe)({
     gap: "var(--mp-button-group-spacing)",
     "&[data-split-button=true]": {
       gap: "0",
-      "& > [data-pixel-component=MpButton]": {
-        _first: {
-          borderTopRightRadius: "none !important",
-          borderBottomRightRadius: "none !important",
-          borderRight: "0 !important"
-        },
-        _last: {
-          borderTopLeftRadius: "none !important",
-          borderBottomLeftRadius: "none !important"
-        }
+      "& > button:first-of-type": {
+        borderTopRightRadius: "none !important",
+        borderBottomRightRadius: "none !important",
+        borderRight: "0 !important"
+      },
+      "& > button:not(:first-of-type):not(:last-of-type)": {
+        borderRadius: "none !important",
+        borderRight: "0 !important"
+      },
+      "& > button:last-of-type": {
+        borderTopLeftRadius: "none !important",
+        borderBottomLeftRadius: "none !important"
       }
     }
   }
@@ -3107,7 +3129,7 @@ var progressSlotRecipe = (0, import_dev23.defineSlotRecipe)({
       background: "gray.100",
       transition: "all 250ms linear",
       _nextTheme: {
-        background: "background.subtle"
+        background: "background.neutral.subtle"
       }
     },
     linear: {
@@ -3472,7 +3494,17 @@ var modalSlotRecipe = (0, import_dev27.defineSlotRecipe)({
     },
     body: {
       p: 4,
-      flex: 1
+      flex: 1,
+      '&[data-drawer-variant="floating"]': {
+        rounded: "lg",
+        background: "background.stage",
+        px: "0",
+        pt: "0",
+        pb: "4",
+        _focus: {
+          outline: "none"
+        }
+      }
     },
     contentRoot: {
       pos: "fixed",
@@ -3500,6 +3532,11 @@ var modalSlotRecipe = (0, import_dev27.defineSlotRecipe)({
         '&[data-modal-type="drawer"]': {
           borderColor: "border.default"
         }
+      },
+      '&[data-modal-type="drawer"][data-drawer-variant="floating"]': {
+        background: "transparent",
+        borderWidth: "0px !important",
+        p: "3"
       }
     },
     header: {
@@ -6824,6 +6861,7 @@ var spacing = import_dev57.defineTokens.spacing({
   1: { value: "0.25rem", description: "4px" },
   1.5: { value: "0.375rem", description: "6px" },
   2: { value: "0.5rem", description: "8px" },
+  2.5: { value: "0.625rem", description: "10px" },
   3: { value: "0.75rem", description: "12px" },
   4: { value: "1rem", description: "16px" },
   5: { value: "1.3rem", description: "20px" },
@@ -7235,6 +7273,7 @@ var import_dev69 = require("@pandacss/dev");
 // src/semanticTokens/colors.ts
 var import_dev67 = require("@pandacss/dev");
 var colors3 = import_dev67.defineSemanticTokens.colors({
+  // BACKGROUND SEMANTIC TOKENS
   background: {
     surface: {
       DEFAULT: {
@@ -7351,7 +7390,7 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
           base: "{colors.neutral.100}",
           _light: "{colors.neutral.100}",
           _dark: "{colors.dark.250}",
-          _enterprise: "{colors.neutral.100}"
+          _enterprise: "{colors.slate.100}"
         }
       },
       subtle: {
@@ -7360,7 +7399,7 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
             base: "{colors.neutral.200}",
             _light: "{colors.neutral.200}",
             _dark: "{colors.dark.300}",
-            _enterprise: "{colors.slate.200}"
+            _enterprise: "{colors.slate.100}"
           }
         },
         hovered: {
@@ -7368,7 +7407,7 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
             base: "{colors.neutral.300}",
             _light: "{colors.neutral.300}",
             _dark: "{colors.dark.350}",
-            _enterprise: "{colors.slate.300}"
+            _enterprise: "{colors.slate.200}"
           }
         },
         pressed: {
@@ -7376,7 +7415,7 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
             base: "{colors.neutral.400}",
             _light: "{colors.neutral.400}",
             _dark: "{colors.dark.400}",
-            _enterprise: "{colors.slate.400}"
+            _enterprise: "{colors.slate.300}"
           }
         },
         selected: {
@@ -7384,7 +7423,7 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
             base: "{colors.neutral.300}",
             _light: "{colors.neutral.300}",
             _dark: "{colors.dark.350}",
-            _enterprise: "{colors.slate.300}"
+            _enterprise: "{colors.slate.200}"
           }
         }
       },
@@ -7418,7 +7457,7 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
             base: "{colors.neutral.900}",
             _light: "{colors.neutral.900}",
             _dark: "{colors.dark.900}",
-            _enterprise: "{colors.neutral.900}"
+            _enterprise: "{colors.slate.900}"
           }
         }
       }
@@ -7482,19 +7521,21 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
           }
         },
         selected: {
-          value: {
-            base: "{colors.indigo.800}",
-            _light: "{colors.indigo.800}",
-            _dark: "{colors.indigo.300}",
-            _enterprise: "{colors.emerald.800}"
-          }
-        },
-        selectedDisabled: {
-          value: {
-            base: "{colors.indigo.200}",
-            _light: "{colors.indigo.200}",
-            _dark: "{colors.indigo.900}",
-            _enterprise: "{colors.emerald.200}"
+          DEFAULT: {
+            value: {
+              base: "{colors.indigo.800}",
+              _light: "{colors.indigo.800}",
+              _dark: "{colors.indigo.300}",
+              _enterprise: "{colors.emerald.800}"
+            }
+          },
+          disabled: {
+            value: {
+              base: "{colors.indigo.200}",
+              _light: "{colors.indigo.200}",
+              _dark: "{colors.indigo.900}",
+              _enterprise: "{colors.emerald.200}"
+            }
           }
         }
       }
@@ -7505,7 +7546,7 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
           base: "{colors.dark.200}",
           _light: "{colors.dark.200}",
           _dark: "{colors.dark.200}",
-          _enterprise: "{colors.dark.200}"
+          _enterprise: "{colors.dark.250}"
         }
       },
       hovered: {
@@ -7797,13 +7838,45 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
         }
       }
     },
+    nav: {
+      parent: {
+        value: {
+          base: "#E7EDF5",
+          // Doesn't have raw token
+          _light: "#E7EDF5",
+          // Doesn't have raw token
+          _dark: "{colors.dark.100}",
+          _enterprise: "{colors.emerald.1000}"
+        }
+      },
+      stack: {
+        DEFAULT: {
+          value: {
+            base: "{colors.neutral.100}",
+            _light: "{colors.neutral.100}",
+            _dark: "{colors.dark}",
+            _enterprise: "{colors.neutral.100}"
+          }
+        },
+        hovered: {
+          value: {
+            base: "#E7EDF5",
+            // Doesn't have raw token
+            _light: "#E7EDF5",
+            // Doesn't have raw token
+            _dark: "{colors.dark.100}",
+            _enterprise: "{colors.emerald.200}"
+          }
+        }
+      }
+    },
     header: {
       DEFAULT: {
         value: {
           base: "{colors.white}",
           _light: "{colors.white}",
           _dark: "{colors.dark.100}",
-          _enterprise: "{colors.white}"
+          _enterprise: "{colors.emerald.1000}"
         }
       },
       menu: {
@@ -7839,8 +7912,10 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
       }
     }
   },
+  // NAVIGATION SEMANTIC TOKENS (REMOVE AFTER NAV IN BACKGROUND IS UPDATED)
   nav: {
     parent: {
+      deprecated: "use `background.nav.parent` instead",
       value: {
         base: "#E7EDF5",
         // Doesn't have raw token
@@ -7852,6 +7927,7 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
     },
     stack: {
       DEFAULT: {
+        deprecated: "use `background.nav.stack` instead",
         value: {
           base: "{colors.neutral.100}",
           _light: "{colors.neutral.100}",
@@ -7860,6 +7936,7 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
         }
       },
       hovered: {
+        deprecated: "use `background.nav.stack.hovered` instead",
         value: {
           base: "#E7EDF5",
           // Doesn't have raw token
@@ -7871,6 +7948,7 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
       }
     }
   },
+  // TEXT SEMANTIC TOKENS
   text: {
     default: {
       DEFAULT: {
@@ -7886,7 +7964,7 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
           base: "{colors.neutral.1000}",
           _light: "{colors.neutral.1000}",
           _dark: "{colors.neutral.1000}",
-          _enterprise: "{colors.slate.1000}"
+          _enterprise: "{colors.dark.100}"
         }
       }
     },
@@ -7904,7 +7982,7 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
           base: "{colors.neutral.800}",
           _light: "{colors.neutral.800}",
           _dark: "{colors.dark.800}",
-          _enterprise: "{colors.neutral.800}"
+          _enterprise: "{colors.slate.800}"
         }
       }
     },
@@ -7913,7 +7991,7 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
         base: "{colors.neutral.600}",
         _light: "{colors.neutral.600}",
         _dark: "{colors.dark.600}",
-        _enterprise: "{colors.slate.600}"
+        _enterprise: "{colors.slate.500}"
       }
     },
     disabled: {
@@ -7947,7 +8025,7 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
         base: "{colors.indigo.700}",
         _light: "{colors.indigo.700}",
         _dark: "{colors.indigo.400}",
-        _enterprise: "{colors.emerald.700}"
+        _enterprise: "{colors.emerald.800}"
       }
     },
     danger: {
@@ -7991,7 +8069,7 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
         base: "{colors.green.800}",
         _light: "{colors.green.800}",
         _dark: "{colors.green.300}",
-        _enterprise: "{colors.green.800}"
+        _enterprise: "{colors.emerald.800}"
       }
     },
     highlight: {
@@ -8007,7 +8085,7 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
         base: "{colors.indigo.800}",
         _light: "{colors.indigo.800}",
         _dark: "{colors.indigo.300}",
-        _enterprise: "{colors.emerald.800}"
+        _enterprise: "{colors.indigo.700}"
       }
     },
     link: {
@@ -8016,7 +8094,8 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
           base: "{colors.indigo.700}",
           _light: "{colors.indigo.700}",
           _dark: "{colors.indigo.400}",
-          _enterprise: "{colors.emerald.700}"
+          _enterprise: "#165082"
+          // Doesn't have raw token
         }
       },
       pressed: {
@@ -8024,11 +8103,13 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
           base: "{colors.indigo.800}",
           _light: "{colors.indigo.800}",
           _dark: "{colors.indigo.300}",
-          _enterprise: "{colors.emerald.800}"
+          _enterprise: "#0D4372"
+          // Doesn't have raw token
         }
       }
     }
   },
+  // ICON SEMANTIC TOKENS
   icon: {
     default: {
       value: {
@@ -8052,7 +8133,7 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
           base: "{colors.white}",
           _light: "{colors.white}",
           _dark: "{colors.dark.100}",
-          _enterprise: "{colors.white}"
+          _enterprise: "{colors.emerald.100}"
         }
       },
       static: {
@@ -8111,7 +8192,7 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
         base: "{colors.green.700}",
         _light: "{colors.green.700}",
         _dark: "{colors.green.400}",
-        _enterprise: "{colors.green.700}"
+        _enterprise: "{colors.emerald.600}"
       }
     },
     highlight: {
@@ -8119,7 +8200,7 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
         base: "{colors.violet.700}",
         _light: "{colors.violet.700}",
         _dark: "{colors.violet.400}",
-        _enterprise: "{colors.violet.700}"
+        _enterprise: "{colors.orange.700}"
       }
     },
     information: {
@@ -8127,7 +8208,7 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
         base: "{colors.indigo.700}",
         _light: "{colors.indigo.700}",
         _dark: "{colors.indigo.400}",
-        _enterprise: "{colors.emerald.700}"
+        _enterprise: "{colors.indigo.600}"
       }
     },
     subtle: {
@@ -8140,28 +8221,34 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
     },
     logo: {
       value: {
-        base: "{colors.neutral.1000}",
-        _light: "{colors.neutral.1000}",
-        _dark: "{colors.neutral.100}",
-        _enterprise: "{colors.slate.1000}"
+        base: "#000000",
+        // Doesn't have raw token
+        _light: "#000000",
+        // Doesn't have raw token
+        _dark: "{colors.white}",
+        _enterprise: "#000000"
+        // Doesn't have raw token
       }
     }
   },
+  // BORDER SEMANTIC TOKENS
   border: {
     default: {
-      value: {
-        base: "{colors.neutral.300}",
-        _light: "{colors.neutral.300}",
-        _dark: "{colors.dark.300}",
-        _enterprise: "{colors.slate.300}"
-      }
-    },
-    subtle: {
-      value: {
-        base: "{colors.neutral.200}",
-        _light: "{colors.neutral.200}",
-        _dark: "{colors.dark.200}",
-        _enterprise: "{colors.slate.200}"
+      DEFAULT: {
+        value: {
+          base: "{colors.neutral.300}",
+          _light: "{colors.neutral.300}",
+          _dark: "{colors.dark.300}",
+          _enterprise: "{colors.slate.300}"
+        }
+      },
+      subtle: {
+        value: {
+          base: "{colors.neutral.200}",
+          _light: "{colors.neutral.200}",
+          _dark: "{colors.dark.200}",
+          _enterprise: "{colors.slate.200}"
+        }
       }
     },
     bold: {
@@ -8169,7 +8256,7 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
         base: "{colors.neutral.600}",
         _light: "{colors.neutral.600}",
         _dark: "{colors.dark.600}",
-        _enterprise: "{colors.slate.600}"
+        _enterprise: "{colors.slate.400}"
       }
     },
     disabled: {
@@ -8235,7 +8322,7 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
         base: "{colors.indigo.700}",
         _light: "{colors.indigo.700}",
         _dark: "{colors.indigo.400}",
-        _enterprise: "{colors.emerald.700}"
+        _enterprise: "{colors.emerald.800}"
       }
     },
     danger: {
@@ -8243,7 +8330,7 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
         base: "{colors.red.700}",
         _light: "{colors.red.700}",
         _dark: "{colors.red.400}",
-        _enterprise: "{colors.red.700}"
+        _enterprise: "{colors.red.600}"
       }
     },
     warning: {
@@ -8259,7 +8346,7 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
         base: "{colors.green.700}",
         _light: "{colors.green.700}",
         _dark: "{colors.green.400}",
-        _enterprise: "{colors.green.700}"
+        _enterprise: "{colors.emerald.700}"
       }
     },
     highlight: {
@@ -8267,7 +8354,7 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
         base: "{colors.violet.700}",
         _light: "{colors.violet.700}",
         _dark: "{colors.violet.400}",
-        _enterprise: "{colors.violet.700}"
+        _enterprise: "{colors.orange.700}"
       }
     },
     information: {
@@ -8275,10 +8362,11 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
         base: "{colors.indigo.700}",
         _light: "{colors.indigo.700}",
         _dark: "{colors.indigo.400}",
-        _enterprise: "{colors.emerald.700}"
+        _enterprise: "{colors.indigo.600}"
       }
     }
   },
+  // CHART SEMANTIC TOKENS
   chart: {
     cat01: {
       DEFAULT: {