@mekari/pixel3-theme 0.0.5 → 0.0.6-dev.1

package/dist/conditions.d.mts

@@ -10,6 +10,7 @@ declare const conditions: {
         collapsed: string;
         loading: string;
         hasIcon: string;
+        hasLabel: string;
         active: string;
         highlight: string;
         hasBorder: string;

package/dist/conditions.d.ts

@@ -10,6 +10,7 @@ declare const conditions: {
         collapsed: string;
         loading: string;
         hasIcon: string;
+        hasLabel: string;
         active: string;
         highlight: string;
         hasBorder: string;

package/dist/index.js

@@ -25,7 +25,7 @@ __export(theme_exports, {
 module.exports = __toCommonJS(theme_exports);
 
 // src/index.ts
-var import_dev44 = require("@pandacss/dev");
+var import_dev45 = require("@pandacss/dev");
 
 // src/breakpoints.ts
 var breakpoints = {
@@ -48,6 +48,7 @@ var conditions = {
     collapsed: '&:is([aria-collapsed=true], [data-collapsed], [data-state="collapsed"])',
     loading: "& > [data-loading=true], &:is([data-loading], [aria-busy=true])",
     hasIcon: "&[data-has-icon=true]",
+    hasLabel: "&[data-has-label=true]",
     active: "&[data-active=true], [data-active]",
     highlight: "&[data-highlight=true], [data-highlight]",
     hasBorder: "&[data-has-border=true]",
@@ -396,6 +397,7 @@ var buttonRecipe = (0, import_dev5.defineRecipe)({
     alignItems: "center",
     gap: "2",
     height: "fit-content",
+    width: "fit-content",
     borderWidth: "1px",
     whiteSpace: "nowrap",
     userSelect: "none",
@@ -511,8 +513,6 @@ var buttonRecipe = (0, import_dev5.defineRecipe)({
     },
     size: {
       sm: {
-        paddingX: "2",
-        paddingY: "1",
         borderRadius: "sm",
         textStyle: "label.md",
         fontWeight: "regular",
@@ -520,12 +520,15 @@ var buttonRecipe = (0, import_dev5.defineRecipe)({
           borderRadius: "sm"
         },
         _hasIcon: {
-          padding: "1 !important"
+          paddingX: "1",
+          paddingY: "1 !important"
+        },
+        _hasLabel: {
+          paddingX: "2 !important",
+          paddingY: "1"
         }
       },
       md: {
-        paddingX: "4",
-        paddingY: "2",
         borderRadius: "md",
         textStyle: "label.md",
         fontWeight: "semiBold",
@@ -533,7 +536,12 @@ var buttonRecipe = (0, import_dev5.defineRecipe)({
           borderRadius: "md"
         },
         _hasIcon: {
-          padding: "2 !important"
+          paddingX: "1.5",
+          paddingY: "1.5 !important"
+        },
+        _hasLabel: {
+          paddingX: "4 !important",
+          paddingY: "2"
         }
       }
     }
@@ -542,8 +550,6 @@ var buttonRecipe = (0, import_dev5.defineRecipe)({
     {
       variant: ["textLink"],
       css: {
-        paddingX: "0",
-        paddingY: "0",
         borderRadius: "sm",
         _focusVisible: {
           borderColor: "white",
@@ -2794,9 +2800,80 @@ var toastSlotRecipe = (0, import_dev30.defineSlotRecipe)({
   }
 });
 
-// src/recipes/banner.ts
+// src/recipes/broadcast.ts
 var import_dev31 = require("@pandacss/dev");
-var bannerSlotRecipe = (0, import_dev31.defineSlotRecipe)({
+var broadcastSlotRecipe = (0, import_dev31.defineSlotRecipe)({
+  className: "broadcast",
+  jsx: ["MpBroadcast", "mp-broadcast"],
+  slots: ["root", "container", "wrapper", "icon", "content", "textLink", "action", "close"],
+  base: {
+    root: {
+      width: "full",
+      position: "relative"
+    },
+    container: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      paddingY: "2",
+      paddingX: "6"
+    },
+    wrapper: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      width: "var(--mp-broadcast--width)"
+    },
+    icon: {
+      marginRight: "3"
+    },
+    textLink: {
+      flex: "none",
+      textDecoration: "underline",
+      marginLeft: "3"
+    },
+    close: {
+      color: "white!",
+      backgroundColor: "transparent!",
+      borderColor: "transparent!",
+      marginLeft: "3",
+      _hover: {
+        color: "white!"
+      }
+    }
+  },
+  variants: {
+    variant: {
+      announcement: {
+        container: { backgroundColor: "stone.400" },
+        icon: { color: "white" },
+        content: { color: "white" },
+        textLink: { color: "white" }
+      },
+      information: {
+        container: { backgroundColor: "violet.400" },
+        icon: { color: "white" },
+        content: { color: "white" },
+        textLink: { color: "white" }
+      },
+      important: {
+        container: { backgroundColor: "amber.100" },
+        icon: { color: "dark" },
+        content: { color: "dark" },
+        textLink: { color: "dark" }
+      }
+    }
+  },
+  compoundVariants: [],
+  defaultVariants: {
+    variant: "announcement"
+  }
+});
+
+// src/recipes/banner.ts
+var import_dev32 = require("@pandacss/dev");
+var bannerSlotRecipe = (0, import_dev32.defineSlotRecipe)({
   className: "banner",
   jsx: ["MpBanner", "mp-banner"],
   slots: ["root", "body"],
@@ -2837,7 +2914,7 @@ var bannerSlotRecipe = (0, import_dev31.defineSlotRecipe)({
     variant: "info"
   }
 });
-var bannerTitleRecipe = (0, import_dev31.defineRecipe)({
+var bannerTitleRecipe = (0, import_dev32.defineRecipe)({
   className: "banner-title",
   jsx: ["MpBannerTitle", "mp-banner-title"],
   base: {
@@ -2854,7 +2931,7 @@ var bannerTitleRecipe = (0, import_dev31.defineRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerDescriptionRecipe = (0, import_dev31.defineRecipe)({
+var bannerDescriptionRecipe = (0, import_dev32.defineRecipe)({
   className: "banner-description",
   jsx: ["MpBannerDescription", "mp-banner-description"],
   base: {
@@ -2869,7 +2946,7 @@ var bannerDescriptionRecipe = (0, import_dev31.defineRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerIconSlotRecipe = (0, import_dev31.defineSlotRecipe)({
+var bannerIconSlotRecipe = (0, import_dev32.defineSlotRecipe)({
   className: "banner-icon",
   jsx: ["MpBannerIcon", "mp-banner-icon"],
   slots: ["root", "custom"],
@@ -2892,7 +2969,7 @@ var bannerIconSlotRecipe = (0, import_dev31.defineSlotRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerLinkRecipe = (0, import_dev31.defineRecipe)({
+var bannerLinkRecipe = (0, import_dev32.defineRecipe)({
   className: "banner-link",
   jsx: ["MpBannerLink", "mp-banner-link"],
   base: {
@@ -2905,7 +2982,7 @@ var bannerLinkRecipe = (0, import_dev31.defineRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerCloseButtonRecipe = (0, import_dev31.defineRecipe)({
+var bannerCloseButtonRecipe = (0, import_dev32.defineRecipe)({
   className: "banner-close-button",
   jsx: ["MpBannerCloseButton", "mp-banner-close-button"],
   base: {
@@ -2971,12 +3048,13 @@ var slotRecipes = {
   bannerSlotRecipe,
   bannerIconSlotRecipe,
   segmentedControlSlotRecipe,
-  toastSlotRecipe
+  toastSlotRecipe,
+  broadcastSlotRecipe
 };
 
 // src/text-styles.ts
-var import_dev32 = require("@pandacss/dev");
-var textStyles = (0, import_dev32.defineTextStyles)({
+var import_dev33 = require("@pandacss/dev");
+var textStyles = (0, import_dev33.defineTextStyles)({
   overline: { value: { fontSize: "xs", lineHeight: "xs" } },
   body: {
     sm: { value: { fontSize: "sm", lineHeight: "2xl" } },
@@ -3010,11 +3088,11 @@ var textStyles = (0, import_dev32.defineTextStyles)({
 });
 
 // src/tokens/index.ts
-var import_dev43 = require("@pandacss/dev");
+var import_dev44 = require("@pandacss/dev");
 
 // src/tokens/borders.ts
-var import_dev33 = require("@pandacss/dev");
-var borders = import_dev33.defineTokens.borders({
+var import_dev34 = require("@pandacss/dev");
+var borders = import_dev34.defineTokens.borders({
   none: { value: "none" },
   sm: { value: "1px" },
   md: { value: "1.5px" },
@@ -3022,8 +3100,8 @@ var borders = import_dev33.defineTokens.borders({
 });
 
 // src/tokens/colors.ts
-var import_dev34 = require("@pandacss/dev");
-var colors = import_dev34.defineTokens.colors({
+var import_dev35 = require("@pandacss/dev");
+var colors = import_dev35.defineTokens.colors({
   currentcolor: {
     value: "currentcolor",
     description: "Need to add this for Icon usage"
@@ -3176,16 +3254,16 @@ var colors = import_dev34.defineTokens.colors({
 });
 
 // src/tokens/durations.ts
-var import_dev35 = require("@pandacss/dev");
-var durations = import_dev35.defineTokens.durations({
+var import_dev36 = require("@pandacss/dev");
+var durations = import_dev36.defineTokens.durations({
   slow: { value: "100ms" },
   normal: { value: "250ms" },
   fast: { value: "300ms" }
 });
 
 // src/tokens/opacity.ts
-var import_dev36 = require("@pandacss/dev");
-var opacity = import_dev36.defineTokens.opacity({
+var import_dev37 = require("@pandacss/dev");
+var opacity = import_dev37.defineTokens.opacity({
   0: { value: 0 },
   40: { value: 0.4 },
   60: { value: 0.6 },
@@ -3193,8 +3271,8 @@ var opacity = import_dev36.defineTokens.opacity({
 });
 
 // src/tokens/radii.ts
-var import_dev37 = require("@pandacss/dev");
-var radii = import_dev37.defineTokens.radii({
+var import_dev38 = require("@pandacss/dev");
+var radii = import_dev38.defineTokens.radii({
   none: { value: "0" },
   xs: { value: "0.125rem", description: "2px" },
   sm: { value: "0.25rem", description: "4px" },
@@ -3205,8 +3283,8 @@ var radii = import_dev37.defineTokens.radii({
 });
 
 // src/tokens/shadows.ts
-var import_dev38 = require("@pandacss/dev");
-var shadows = import_dev38.defineTokens.shadows({
+var import_dev39 = require("@pandacss/dev");
+var shadows = import_dev39.defineTokens.shadows({
   xs: {
     value: ["0px 0px 2px 0px rgba(0, 0, 0, 0.12)", "0px 2px 4px 0px rgba(0, 0, 0, 0.14)"]
   },
@@ -3246,12 +3324,13 @@ var shadows = import_dev38.defineTokens.shadows({
 });
 
 // src/tokens/sizes.ts
-var import_dev39 = require("@pandacss/dev");
-var sizes = import_dev39.defineTokens.sizes({
+var import_dev40 = require("@pandacss/dev");
+var sizes = import_dev40.defineTokens.sizes({
   0: { value: "0", description: "0px" },
   0.25: { value: "0.0625rem", description: "1px" },
   0.5: { value: "0.125rem", description: "2px" },
   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" },
@@ -3276,13 +3355,15 @@ var sizes = import_dev39.defineTokens.sizes({
 });
 
 // src/tokens/spacing.ts
-var import_dev40 = require("@pandacss/dev");
-var spacing = import_dev40.defineTokens.spacing({
+var import_dev41 = require("@pandacss/dev");
+var spacing = import_dev41.defineTokens.spacing({
   0: { value: "0", description: "0px" },
+  0.25: { value: "0.0625rem", description: "1px" },
   0.5: { value: "0.125rem", description: "2px" },
   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" },
@@ -3298,8 +3379,8 @@ var spacing = import_dev40.defineTokens.spacing({
 });
 
 // src/tokens/z-index.ts
-var import_dev41 = require("@pandacss/dev");
-var zIndex = import_dev41.defineTokens.zIndex({
+var import_dev42 = require("@pandacss/dev");
+var zIndex = import_dev42.defineTokens.zIndex({
   hide: { value: -1 },
   base: { value: 0 },
   docked: { value: 10 },
@@ -3311,8 +3392,8 @@ var zIndex = import_dev41.defineTokens.zIndex({
 });
 
 // src/tokens/typography.ts
-var import_dev42 = require("@pandacss/dev");
-var fonts = import_dev42.defineTokens.fonts({
+var import_dev43 = require("@pandacss/dev");
+var fonts = import_dev43.defineTokens.fonts({
   body: {
     value: '"Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
   },
@@ -3320,7 +3401,7 @@ var fonts = import_dev42.defineTokens.fonts({
     value: 'SFMono-Regular, Menlo, Monaco,Consolas, "Liberation Mono", "Courier New", monospace'
   }
 });
-var fontSizes = import_dev42.defineTokens.fontSizes({
+var fontSizes = import_dev43.defineTokens.fontSizes({
   xs: { value: "0.625rem", description: "10px" },
   sm: { value: "0.75rem", description: "12px" },
   md: { value: "0.875rem", description: "14px" },
@@ -3328,12 +3409,12 @@ var fontSizes = import_dev42.defineTokens.fontSizes({
   xl: { value: "1.25rem", description: "20px" },
   "2xl": { value: "1.5rem", description: "24px" }
 });
-var fontWeights = import_dev42.defineTokens.fontWeights({
+var fontWeights = import_dev43.defineTokens.fontWeights({
   regular: { value: "400" },
   semiBold: { value: "600" },
   bold: { value: "800" }
 });
-var lineHeights = import_dev42.defineTokens.lineHeights({
+var lineHeights = import_dev43.defineTokens.lineHeights({
   xs: { value: 1.2, description: "12px/10px" },
   sm: { value: 1.34, description: "16px/12px or 32px/24px" },
   md: { value: 1.4, description: "28px/20px" },
@@ -3342,7 +3423,7 @@ var lineHeights = import_dev42.defineTokens.lineHeights({
   "2xl": { value: 1.67, description: "20px/12px" },
   "3xl": { value: 1.71, description: "24px/14px" }
 });
-var letterSpacings = import_dev42.defineTokens.letterSpacings({
+var letterSpacings = import_dev43.defineTokens.letterSpacings({
   tighter: { value: "-0.05em" },
   tight: { value: "-0.025em" },
   normal: { value: "0" },
@@ -3352,7 +3433,7 @@ var letterSpacings = import_dev42.defineTokens.letterSpacings({
 });
 
 // src/tokens/index.ts
-var tokens = (0, import_dev43.defineTokens)({
+var tokens = (0, import_dev44.defineTokens)({
   borders,
   colors,
   durations,
@@ -3370,7 +3451,7 @@ var tokens = (0, import_dev43.defineTokens)({
 });
 
 // src/index.ts
-var preset = (0, import_dev44.definePreset)({
+var preset = (0, import_dev45.definePreset)({
   theme: {
     extend: {
       breakpoints,

package/dist/index.mjs

@@ -22,6 +22,7 @@ var conditions = {
     collapsed: '&:is([aria-collapsed=true], [data-collapsed], [data-state="collapsed"])',
     loading: "& > [data-loading=true], &:is([data-loading], [aria-busy=true])",
     hasIcon: "&[data-has-icon=true]",
+    hasLabel: "&[data-has-label=true]",
     active: "&[data-active=true], [data-active]",
     highlight: "&[data-highlight=true], [data-highlight]",
     hasBorder: "&[data-has-border=true]",
@@ -370,6 +371,7 @@ var buttonRecipe = defineRecipe({
     alignItems: "center",
     gap: "2",
     height: "fit-content",
+    width: "fit-content",
     borderWidth: "1px",
     whiteSpace: "nowrap",
     userSelect: "none",
@@ -485,8 +487,6 @@ var buttonRecipe = defineRecipe({
     },
     size: {
       sm: {
-        paddingX: "2",
-        paddingY: "1",
         borderRadius: "sm",
         textStyle: "label.md",
         fontWeight: "regular",
@@ -494,12 +494,15 @@ var buttonRecipe = defineRecipe({
           borderRadius: "sm"
         },
         _hasIcon: {
-          padding: "1 !important"
+          paddingX: "1",
+          paddingY: "1 !important"
+        },
+        _hasLabel: {
+          paddingX: "2 !important",
+          paddingY: "1"
         }
       },
       md: {
-        paddingX: "4",
-        paddingY: "2",
         borderRadius: "md",
         textStyle: "label.md",
         fontWeight: "semiBold",
@@ -507,7 +510,12 @@ var buttonRecipe = defineRecipe({
           borderRadius: "md"
         },
         _hasIcon: {
-          padding: "2 !important"
+          paddingX: "1.5",
+          paddingY: "1.5 !important"
+        },
+        _hasLabel: {
+          paddingX: "4 !important",
+          paddingY: "2"
         }
       }
     }
@@ -516,8 +524,6 @@ var buttonRecipe = defineRecipe({
     {
       variant: ["textLink"],
       css: {
-        paddingX: "0",
-        paddingY: "0",
         borderRadius: "sm",
         _focusVisible: {
           borderColor: "white",
@@ -2768,9 +2774,80 @@ var toastSlotRecipe = defineSlotRecipe17({
   }
 });
 
+// src/recipes/broadcast.ts
+import { defineSlotRecipe as defineSlotRecipe18 } from "@pandacss/dev";
+var broadcastSlotRecipe = defineSlotRecipe18({
+  className: "broadcast",
+  jsx: ["MpBroadcast", "mp-broadcast"],
+  slots: ["root", "container", "wrapper", "icon", "content", "textLink", "action", "close"],
+  base: {
+    root: {
+      width: "full",
+      position: "relative"
+    },
+    container: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      paddingY: "2",
+      paddingX: "6"
+    },
+    wrapper: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      width: "var(--mp-broadcast--width)"
+    },
+    icon: {
+      marginRight: "3"
+    },
+    textLink: {
+      flex: "none",
+      textDecoration: "underline",
+      marginLeft: "3"
+    },
+    close: {
+      color: "white!",
+      backgroundColor: "transparent!",
+      borderColor: "transparent!",
+      marginLeft: "3",
+      _hover: {
+        color: "white!"
+      }
+    }
+  },
+  variants: {
+    variant: {
+      announcement: {
+        container: { backgroundColor: "stone.400" },
+        icon: { color: "white" },
+        content: { color: "white" },
+        textLink: { color: "white" }
+      },
+      information: {
+        container: { backgroundColor: "violet.400" },
+        icon: { color: "white" },
+        content: { color: "white" },
+        textLink: { color: "white" }
+      },
+      important: {
+        container: { backgroundColor: "amber.100" },
+        icon: { color: "dark" },
+        content: { color: "dark" },
+        textLink: { color: "dark" }
+      }
+    }
+  },
+  compoundVariants: [],
+  defaultVariants: {
+    variant: "announcement"
+  }
+});
+
 // src/recipes/banner.ts
-import { defineRecipe as defineRecipe12, defineSlotRecipe as defineSlotRecipe18 } from "@pandacss/dev";
-var bannerSlotRecipe = defineSlotRecipe18({
+import { defineRecipe as defineRecipe12, defineSlotRecipe as defineSlotRecipe19 } from "@pandacss/dev";
+var bannerSlotRecipe = defineSlotRecipe19({
   className: "banner",
   jsx: ["MpBanner", "mp-banner"],
   slots: ["root", "body"],
@@ -2843,7 +2920,7 @@ var bannerDescriptionRecipe = defineRecipe12({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerIconSlotRecipe = defineSlotRecipe18({
+var bannerIconSlotRecipe = defineSlotRecipe19({
   className: "banner-icon",
   jsx: ["MpBannerIcon", "mp-banner-icon"],
   slots: ["root", "custom"],
@@ -2945,7 +3022,8 @@ var slotRecipes = {
   bannerSlotRecipe,
   bannerIconSlotRecipe,
   segmentedControlSlotRecipe,
-  toastSlotRecipe
+  toastSlotRecipe,
+  broadcastSlotRecipe
 };
 
 // src/text-styles.ts
@@ -3226,6 +3304,7 @@ var sizes = defineTokens7.sizes({
   0.25: { value: "0.0625rem", description: "1px" },
   0.5: { value: "0.125rem", description: "2px" },
   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" },
@@ -3253,10 +3332,12 @@ var sizes = defineTokens7.sizes({
 import { defineTokens as defineTokens8 } from "@pandacss/dev";
 var spacing = defineTokens8.spacing({
   0: { value: "0", description: "0px" },
+  0.25: { value: "0.0625rem", description: "1px" },
   0.5: { value: "0.125rem", description: "2px" },
   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" },

package/dist/recipes/broadcast.d.mts

@@ -0,0 +1,5 @@
+import * as _pandacss_dev from '@pandacss/dev';
+
+declare const broadcastSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+
+export { broadcastSlotRecipe };

package/dist/recipes/broadcast.d.ts

@@ -0,0 +1,5 @@
+import * as _pandacss_dev from '@pandacss/dev';
+
+declare const broadcastSlotRecipe: _pandacss_dev.SlotRecipeConfig;
+
+export { broadcastSlotRecipe };

package/dist/recipes/index.d.mts

@@ -47,6 +47,7 @@ declare const slotRecipes: {
     bannerIconSlotRecipe: _pandacss_types.SlotRecipeConfig;
     segmentedControlSlotRecipe: _pandacss_types.SlotRecipeConfig;
     toastSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    broadcastSlotRecipe: _pandacss_types.SlotRecipeConfig;
 };
 
 export { recipes, slotRecipes };

package/dist/recipes/index.d.ts

@@ -47,6 +47,7 @@ declare const slotRecipes: {
     bannerIconSlotRecipe: _pandacss_types.SlotRecipeConfig;
     segmentedControlSlotRecipe: _pandacss_types.SlotRecipeConfig;
     toastSlotRecipe: _pandacss_types.SlotRecipeConfig;
+    broadcastSlotRecipe: _pandacss_types.SlotRecipeConfig;
 };
 
 export { recipes, slotRecipes };

package/dist/tokens/index.d.mts

@@ -534,6 +534,10 @@ declare const tokens: {
             value: string;
             description: string;
         };
+        1.5: {
+            value: string;
+            description: string;
+        };
         2: {
             value: string;
             description: string;
@@ -622,6 +626,10 @@ declare const tokens: {
             value: string;
             description: string;
         };
+        0.25: {
+            value: string;
+            description: string;
+        };
         0.5: {
             value: string;
             description: string;
@@ -638,6 +646,10 @@ declare const tokens: {
             value: string;
             description: string;
         };
+        2.5: {
+            value: string;
+            description: string;
+        };
         3: {
             value: string;
             description: string;

package/dist/tokens/index.d.ts

@@ -534,6 +534,10 @@ declare const tokens: {
             value: string;
             description: string;
         };
+        1.5: {
+            value: string;
+            description: string;
+        };
         2: {
             value: string;
             description: string;
@@ -622,6 +626,10 @@ declare const tokens: {
             value: string;
             description: string;
         };
+        0.25: {
+            value: string;
+            description: string;
+        };
         0.5: {
             value: string;
             description: string;
@@ -638,6 +646,10 @@ declare const tokens: {
             value: string;
             description: string;
         };
+        2.5: {
+            value: string;
+            description: string;
+        };
         3: {
             value: string;
             description: string;

package/dist/tokens/sizes.d.mts

@@ -15,6 +15,10 @@ declare const sizes: {
         value: string;
         description: string;
     };
+    1.5: {
+        value: string;
+        description: string;
+    };
     2: {
         value: string;
         description: string;

package/dist/tokens/sizes.d.ts

@@ -15,6 +15,10 @@ declare const sizes: {
         value: string;
         description: string;
     };
+    1.5: {
+        value: string;
+        description: string;
+    };
     2: {
         value: string;
         description: string;

package/dist/tokens/spacing.d.mts

@@ -3,6 +3,10 @@ declare const spacing: {
         value: string;
         description: string;
     };
+    0.25: {
+        value: string;
+        description: string;
+    };
     0.5: {
         value: string;
         description: string;
@@ -19,6 +23,10 @@ declare const spacing: {
         value: string;
         description: string;
     };
+    2.5: {
+        value: string;
+        description: string;
+    };
     3: {
         value: string;
         description: string;

package/dist/tokens/spacing.d.ts

@@ -3,6 +3,10 @@ declare const spacing: {
         value: string;
         description: string;
     };
+    0.25: {
+        value: string;
+        description: string;
+    };
     0.5: {
         value: string;
         description: string;
@@ -19,6 +23,10 @@ declare const spacing: {
         value: string;
         description: string;
     };
+    2.5: {
+        value: string;
+        description: string;
+    };
     3: {
         value: string;
         description: string;

package/package.json

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

package/src/conditions.ts

@@ -11,6 +11,7 @@ export const conditions = {
     collapsed: '&:is([aria-collapsed=true], [data-collapsed], [data-state="collapsed"])',
     loading: '& > [data-loading=true], &:is([data-loading], [aria-busy=true])',
     hasIcon: '&[data-has-icon=true]',
+    hasLabel: '&[data-has-label=true]',
     active: '&[data-active=true], [data-active]',
     highlight: '&[data-highlight=true], [data-highlight]',
     hasBorder: '&[data-has-border=true]',

package/src/recipes/broadcast.ts

@@ -0,0 +1,72 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const broadcastSlotRecipe = defineSlotRecipe({
+  className: 'broadcast',
+  jsx: ['MpBroadcast', 'mp-broadcast'],
+  slots: ['root', 'container', 'wrapper', 'icon', 'content', 'textLink', 'action', 'close'],
+  base: {
+    root: {
+      width: 'full',
+      position: 'relative'
+    },
+    container: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingY: '2',
+      paddingX: '6'
+    },
+    wrapper: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      width: 'var(--mp-broadcast--width)'
+    },
+    icon: {
+      marginRight: '3'
+    },
+    textLink: {
+      flex: 'none',
+      textDecoration: 'underline',
+      marginLeft: '3'
+    },
+    close: {
+      color: 'white!',
+      backgroundColor: 'transparent!',
+      borderColor: 'transparent!',
+      marginLeft: '3',
+      _hover: {
+        color: 'white!'
+      }
+    }
+  },
+  variants: {
+    variant: {
+      announcement: {
+        container: { backgroundColor: 'stone.400' },
+        icon: { color: 'white' },
+        content: { color: 'white' },
+        textLink: { color: 'white' }
+      },
+      information: {
+        container: { backgroundColor: 'violet.400' },
+        icon: { color: 'white' },
+        content: { color: 'white' },
+        textLink: { color: 'white' }
+      },
+      important: {
+        container: { backgroundColor: 'amber.100' },
+        icon: { color: 'dark' },
+        content: { color: 'dark' },
+        textLink: { color: 'dark' }
+      }
+    },
+  },
+  compoundVariants: [],
+  defaultVariants: {
+    variant: 'announcement'
+  }
+})
+
+export { broadcastSlotRecipe }

package/src/recipes/button.ts

@@ -10,6 +10,7 @@ const buttonRecipe = defineRecipe({
     alignItems: 'center',
     gap: '2',
     height: 'fit-content',
+    width: 'fit-content',
     borderWidth: '1px',
     whiteSpace: 'nowrap',
     userSelect: 'none',
@@ -125,8 +126,6 @@ const buttonRecipe = defineRecipe({
     },
     size: {
       sm: {
-        paddingX: '2',
-        paddingY: '1',
         borderRadius: 'sm',
         textStyle: 'label.md',
         fontWeight: 'regular',
@@ -134,12 +133,15 @@ const buttonRecipe = defineRecipe({
           borderRadius: 'sm'
         },
         _hasIcon: {
-          padding: '1 !important'
+          paddingX: '1',
+          paddingY: '1 !important'
+        },
+        _hasLabel: {
+          paddingX: '2 !important',
+          paddingY: '1',
         }
       },
       md: {
-        paddingX: '4',
-        paddingY: '2',
         borderRadius: 'md',
         textStyle: 'label.md',
         fontWeight: 'semiBold',
@@ -147,7 +149,12 @@ const buttonRecipe = defineRecipe({
           borderRadius: 'md'
         },
         _hasIcon: {
-          padding: '2 !important'
+          paddingX: '1.5',
+          paddingY: '1.5 !important'
+        },
+        _hasLabel: {
+          paddingX: '4 !important',
+          paddingY: '2',
         }
       }
     }
@@ -156,8 +163,6 @@ const buttonRecipe = defineRecipe({
     {
       variant: ['textLink'],
       css: {
-        paddingX: '0',
-        paddingY: '0',
         borderRadius: 'sm',
         _focusVisible: {
           borderColor: 'white',

package/src/recipes/index.ts

@@ -26,6 +26,7 @@ import { uploadSlotRecipe, uploadListSlotRecipe } from './upload'
 import { dropzoneSlotRecipe } from './dropzone'
 import { segmentedControlSlotRecipe } from './segmented-control'
 import { toastSlotRecipe } from './toast'
+import { broadcastSlotRecipe } from './broadcast'
 
 import {
   bannerSlotRecipe,
@@ -83,5 +84,6 @@ export const slotRecipes = {
   bannerSlotRecipe,
   bannerIconSlotRecipe,
   segmentedControlSlotRecipe,
-  toastSlotRecipe
+  toastSlotRecipe,
+  broadcastSlotRecipe
 }

package/src/tokens/sizes.ts

@@ -5,6 +5,7 @@ export const sizes = defineTokens.sizes({
   0.25: { value: '0.0625rem', description: '1px' },
   0.5: { value: '0.125rem', description: '2px' },
   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' },

package/src/tokens/spacing.ts

@@ -2,10 +2,12 @@ import { defineTokens } from '@pandacss/dev'
 
 export const spacing = defineTokens.spacing({
   0: { value: '0', description: '0px' },
+  0.25: { value: '0.0625rem', description: '1px' },
   0.5: { value: '0.125rem', description: '2px' },
   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' },