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

package/dist/index.mjs

@@ -28,6 +28,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] &",
@@ -409,7 +410,9 @@ var avatarSlotRecipe = defineSlotRecipe2({
   defaultVariants: {
     size: "md",
     variant: "circle"
-  }
+  },
+  // TODO: Check why this recipe need to generate statically
+  staticCss: ["*"]
 });
 var avatarGroupSlotRecipe = defineSlotRecipe2({
   className: "avatar-group",
@@ -483,7 +486,9 @@ var avatarGroupSlotRecipe = defineSlotRecipe2({
     }
   },
   compoundVariants: [],
-  defaultVariants: {}
+  defaultVariants: {},
+  // TODO: Check why this recipe need to generate statically
+  staticCss: ["*"]
 });
 
 // src/recipes/airene-button.ts
@@ -630,6 +635,9 @@ var buttonRecipe = defineRecipe({
     _isFullWidth: {
       width: "full"
     },
+    _isRounded: {
+      borderRadius: "full"
+    },
     _loading: {
       cursor: "wait",
       position: "absolute",
@@ -877,8 +885,14 @@ var buttonRecipe = defineRecipe({
         borderRadius: "sm",
         textStyle: "label.md",
         fontWeight: "regular",
+        _isRounded: {
+          borderRadius: "full"
+        },
         _loading: {
-          borderRadius: "sm"
+          borderRadius: "sm",
+          _isRounded: {
+            borderRadius: "full"
+          }
         },
         _hasIcon: {
           paddingX: "1",
@@ -921,8 +935,14 @@ var buttonRecipe = defineRecipe({
         borderRadius: "md",
         textStyle: "label.md",
         fontWeight: "semiBold",
+        _isRounded: {
+          borderRadius: "full"
+        },
         _loading: {
-          borderRadius: "md"
+          borderRadius: "md",
+          _isRounded: {
+            borderRadius: "full"
+          }
         },
         _hasIcon: {
           paddingX: "2",
@@ -1062,16 +1082,18 @@ var buttonGroupRecipe = 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"
       }
     }
   }
@@ -3081,7 +3103,7 @@ var progressSlotRecipe = defineSlotRecipe12({
       background: "gray.100",
       transition: "all 250ms linear",
       _nextTheme: {
-        background: "background.subtle"
+        background: "background.neutral.subtle"
       }
     },
     linear: {
@@ -3446,7 +3468,17 @@ var modalSlotRecipe = defineSlotRecipe16({
     },
     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",
@@ -3474,6 +3506,11 @@ var modalSlotRecipe = defineSlotRecipe16({
         '&[data-modal-type="drawer"]': {
           borderColor: "border.default"
         }
+      },
+      '&[data-modal-type="drawer"][data-drawer-variant="floating"]': {
+        background: "transparent",
+        borderWidth: "0px !important",
+        p: "3"
       }
     },
     header: {
@@ -6798,6 +6835,7 @@ var spacing = defineTokens8.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" },
@@ -7209,6 +7247,7 @@ import { defineSemanticTokens as defineSemanticTokens3 } from "@pandacss/dev";
 // src/semanticTokens/colors.ts
 import { defineSemanticTokens } from "@pandacss/dev";
 var colors3 = defineSemanticTokens.colors({
+  // BACKGROUND SEMANTIC TOKENS
   background: {
     surface: {
       DEFAULT: {
@@ -7325,7 +7364,7 @@ var colors3 = defineSemanticTokens.colors({
           base: "{colors.neutral.100}",
           _light: "{colors.neutral.100}",
           _dark: "{colors.dark.250}",
-          _enterprise: "{colors.neutral.100}"
+          _enterprise: "{colors.slate.100}"
         }
       },
       subtle: {
@@ -7334,7 +7373,7 @@ var colors3 = defineSemanticTokens.colors({
             base: "{colors.neutral.200}",
             _light: "{colors.neutral.200}",
             _dark: "{colors.dark.300}",
-            _enterprise: "{colors.slate.200}"
+            _enterprise: "{colors.slate.100}"
           }
         },
         hovered: {
@@ -7342,7 +7381,7 @@ var colors3 = defineSemanticTokens.colors({
             base: "{colors.neutral.300}",
             _light: "{colors.neutral.300}",
             _dark: "{colors.dark.350}",
-            _enterprise: "{colors.slate.300}"
+            _enterprise: "{colors.slate.200}"
           }
         },
         pressed: {
@@ -7350,7 +7389,7 @@ var colors3 = defineSemanticTokens.colors({
             base: "{colors.neutral.400}",
             _light: "{colors.neutral.400}",
             _dark: "{colors.dark.400}",
-            _enterprise: "{colors.slate.400}"
+            _enterprise: "{colors.slate.300}"
           }
         },
         selected: {
@@ -7358,7 +7397,7 @@ var colors3 = defineSemanticTokens.colors({
             base: "{colors.neutral.300}",
             _light: "{colors.neutral.300}",
             _dark: "{colors.dark.350}",
-            _enterprise: "{colors.slate.300}"
+            _enterprise: "{colors.slate.200}"
           }
         }
       },
@@ -7392,7 +7431,7 @@ var colors3 = defineSemanticTokens.colors({
             base: "{colors.neutral.900}",
             _light: "{colors.neutral.900}",
             _dark: "{colors.dark.900}",
-            _enterprise: "{colors.neutral.900}"
+            _enterprise: "{colors.slate.900}"
           }
         }
       }
@@ -7456,19 +7495,21 @@ var colors3 = 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}"
+            }
           }
         }
       }
@@ -7479,7 +7520,7 @@ var colors3 = defineSemanticTokens.colors({
           base: "{colors.dark.200}",
           _light: "{colors.dark.200}",
           _dark: "{colors.dark.200}",
-          _enterprise: "{colors.dark.200}"
+          _enterprise: "{colors.dark.250}"
         }
       },
       hovered: {
@@ -7771,13 +7812,45 @@ var colors3 = 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: {
@@ -7813,8 +7886,10 @@ var colors3 = 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
@@ -7826,6 +7901,7 @@ var colors3 = defineSemanticTokens.colors({
     },
     stack: {
       DEFAULT: {
+        deprecated: "use `background.nav.stack` instead",
         value: {
           base: "{colors.neutral.100}",
           _light: "{colors.neutral.100}",
@@ -7834,6 +7910,7 @@ var colors3 = defineSemanticTokens.colors({
         }
       },
       hovered: {
+        deprecated: "use `background.nav.stack.hovered` instead",
         value: {
           base: "#E7EDF5",
           // Doesn't have raw token
@@ -7845,6 +7922,7 @@ var colors3 = defineSemanticTokens.colors({
       }
     }
   },
+  // TEXT SEMANTIC TOKENS
   text: {
     default: {
       DEFAULT: {
@@ -7860,7 +7938,7 @@ var colors3 = defineSemanticTokens.colors({
           base: "{colors.neutral.1000}",
           _light: "{colors.neutral.1000}",
           _dark: "{colors.neutral.1000}",
-          _enterprise: "{colors.slate.1000}"
+          _enterprise: "{colors.dark.100}"
         }
       }
     },
@@ -7878,7 +7956,7 @@ var colors3 = defineSemanticTokens.colors({
           base: "{colors.neutral.800}",
           _light: "{colors.neutral.800}",
           _dark: "{colors.dark.800}",
-          _enterprise: "{colors.neutral.800}"
+          _enterprise: "{colors.slate.800}"
         }
       }
     },
@@ -7887,7 +7965,7 @@ var colors3 = defineSemanticTokens.colors({
         base: "{colors.neutral.600}",
         _light: "{colors.neutral.600}",
         _dark: "{colors.dark.600}",
-        _enterprise: "{colors.slate.600}"
+        _enterprise: "{colors.slate.500}"
       }
     },
     disabled: {
@@ -7921,7 +7999,7 @@ var colors3 = defineSemanticTokens.colors({
         base: "{colors.indigo.700}",
         _light: "{colors.indigo.700}",
         _dark: "{colors.indigo.400}",
-        _enterprise: "{colors.emerald.700}"
+        _enterprise: "{colors.emerald.800}"
       }
     },
     danger: {
@@ -7965,7 +8043,7 @@ var colors3 = defineSemanticTokens.colors({
         base: "{colors.green.800}",
         _light: "{colors.green.800}",
         _dark: "{colors.green.300}",
-        _enterprise: "{colors.green.800}"
+        _enterprise: "{colors.emerald.800}"
       }
     },
     highlight: {
@@ -7981,7 +8059,7 @@ var colors3 = defineSemanticTokens.colors({
         base: "{colors.indigo.800}",
         _light: "{colors.indigo.800}",
         _dark: "{colors.indigo.300}",
-        _enterprise: "{colors.emerald.800}"
+        _enterprise: "{colors.indigo.700}"
       }
     },
     link: {
@@ -7990,7 +8068,8 @@ var colors3 = 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: {
@@ -7998,11 +8077,13 @@ var colors3 = 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: {
@@ -8026,7 +8107,7 @@ var colors3 = defineSemanticTokens.colors({
           base: "{colors.white}",
           _light: "{colors.white}",
           _dark: "{colors.dark.100}",
-          _enterprise: "{colors.white}"
+          _enterprise: "{colors.emerald.100}"
         }
       },
       static: {
@@ -8085,7 +8166,7 @@ var colors3 = defineSemanticTokens.colors({
         base: "{colors.green.700}",
         _light: "{colors.green.700}",
         _dark: "{colors.green.400}",
-        _enterprise: "{colors.green.700}"
+        _enterprise: "{colors.emerald.600}"
       }
     },
     highlight: {
@@ -8093,7 +8174,7 @@ var colors3 = defineSemanticTokens.colors({
         base: "{colors.violet.700}",
         _light: "{colors.violet.700}",
         _dark: "{colors.violet.400}",
-        _enterprise: "{colors.violet.700}"
+        _enterprise: "{colors.orange.700}"
       }
     },
     information: {
@@ -8101,7 +8182,7 @@ var colors3 = defineSemanticTokens.colors({
         base: "{colors.indigo.700}",
         _light: "{colors.indigo.700}",
         _dark: "{colors.indigo.400}",
-        _enterprise: "{colors.emerald.700}"
+        _enterprise: "{colors.indigo.600}"
       }
     },
     subtle: {
@@ -8114,28 +8195,34 @@ var colors3 = 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: {
@@ -8143,7 +8230,7 @@ var colors3 = defineSemanticTokens.colors({
         base: "{colors.neutral.600}",
         _light: "{colors.neutral.600}",
         _dark: "{colors.dark.600}",
-        _enterprise: "{colors.slate.600}"
+        _enterprise: "{colors.slate.400}"
       }
     },
     disabled: {
@@ -8209,7 +8296,7 @@ var colors3 = defineSemanticTokens.colors({
         base: "{colors.indigo.700}",
         _light: "{colors.indigo.700}",
         _dark: "{colors.indigo.400}",
-        _enterprise: "{colors.emerald.700}"
+        _enterprise: "{colors.emerald.800}"
       }
     },
     danger: {
@@ -8217,7 +8304,7 @@ var colors3 = defineSemanticTokens.colors({
         base: "{colors.red.700}",
         _light: "{colors.red.700}",
         _dark: "{colors.red.400}",
-        _enterprise: "{colors.red.700}"
+        _enterprise: "{colors.red.600}"
       }
     },
     warning: {
@@ -8233,7 +8320,7 @@ var colors3 = defineSemanticTokens.colors({
         base: "{colors.green.700}",
         _light: "{colors.green.700}",
         _dark: "{colors.green.400}",
-        _enterprise: "{colors.green.700}"
+        _enterprise: "{colors.emerald.700}"
       }
     },
     highlight: {
@@ -8241,7 +8328,7 @@ var colors3 = defineSemanticTokens.colors({
         base: "{colors.violet.700}",
         _light: "{colors.violet.700}",
         _dark: "{colors.violet.400}",
-        _enterprise: "{colors.violet.700}"
+        _enterprise: "{colors.orange.700}"
       }
     },
     information: {
@@ -8249,10 +8336,11 @@ var colors3 = 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: {

package/dist/semanticTokens/colors.d.mts

@@ -237,19 +237,21 @@ declare const colors: {
                     };
                 };
                 selected: {
-                    value: {
-                        base: string;
-                        _light: string;
-                        _dark: string;
-                        _enterprise: string;
+                    DEFAULT: {
+                        value: {
+                            base: string;
+                            _light: string;
+                            _dark: string;
+                            _enterprise: string;
+                        };
                     };
-                };
-                selectedDisabled: {
-                    value: {
-                        base: string;
-                        _light: string;
-                        _dark: string;
-                        _enterprise: string;
+                    disabled: {
+                        value: {
+                            base: string;
+                            _light: string;
+                            _dark: string;
+                            _enterprise: string;
+                        };
                     };
                 };
             };
@@ -552,6 +554,34 @@ declare const colors: {
                 };
             };
         };
+        nav: {
+            parent: {
+                value: {
+                    base: string;
+                    _light: string;
+                    _dark: string;
+                    _enterprise: string;
+                };
+            };
+            stack: {
+                DEFAULT: {
+                    value: {
+                        base: string;
+                        _light: string;
+                        _dark: string;
+                        _enterprise: string;
+                    };
+                };
+                hovered: {
+                    value: {
+                        base: string;
+                        _light: string;
+                        _dark: string;
+                        _enterprise: string;
+                    };
+                };
+            };
+        };
         header: {
             DEFAULT: {
                 value: {
@@ -591,6 +621,7 @@ declare const colors: {
     };
     nav: {
         parent: {
+            deprecated: string;
             value: {
                 base: string;
                 _light: string;
@@ -600,6 +631,7 @@ declare const colors: {
         };
         stack: {
             DEFAULT: {
+                deprecated: string;
                 value: {
                     base: string;
                     _light: string;
@@ -608,6 +640,7 @@ declare const colors: {
                 };
             };
             hovered: {
+                deprecated: string;
                 value: {
                     base: string;
                     _light: string;
@@ -895,19 +928,21 @@ declare const colors: {
     };
     border: {
         default: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-                _enterprise: string;
+            DEFAULT: {
+                value: {
+                    base: string;
+                    _light: string;
+                    _dark: string;
+                    _enterprise: string;
+                };
             };
-        };
-        subtle: {
-            value: {
-                base: string;
-                _light: string;
-                _dark: string;
-                _enterprise: string;
+            subtle: {
+                value: {
+                    base: string;
+                    _light: string;
+                    _dark: string;
+                    _enterprise: string;
+                };
             };
         };
         bold: {