@pandacss/preset-base 0.28.0 → 0.29.0

package/dist/index.js

@@ -117,6 +117,18 @@ var conditions = {
   vertical: "&[data-orientation=vertical]"
 };
 
+// src/color-mix-transform.ts
+var createColorMixTransform = (prop) => (value, args) => {
+  const mix = args.utils.colorMix(value);
+  if (mix.invalid)
+    return { [prop]: value };
+  const cssVar = "--mix-" + prop;
+  return {
+    [cssVar]: mix.value,
+    [prop]: `var(${cssVar}, ${mix.color})`
+  };
+};
+
 // src/utilities/background.ts
 var background = {
   backgroundPosition: {
@@ -148,12 +160,14 @@ var background = {
   background: {
     shorthand: "bg",
     className: "bg",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("background")
   },
   backgroundColor: {
     shorthand: "bgColor",
     className: "bg",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("backgroundColor")
   },
   backgroundOrigin: {
     shorthand: "bgOrigin",
@@ -228,32 +242,26 @@ var background = {
   gradientFrom: {
     className: "from",
     values: "colors",
-    transform(value) {
-      return {
-        "--gradient-from": value
-      };
-    }
+    transform: createColorMixTransform("--gradient-from")
   },
   gradientTo: {
     className: "to",
     values: "colors",
-    transform(value) {
-      return {
-        "--gradient-to": value
-      };
-    }
+    transform: createColorMixTransform("--gradient-to")
   },
   gradientVia: {
     className: "via",
     values: "colors",
-    transform(value) {
+    transform(value, args) {
+      const transformed = gradientVia(value, args);
       return {
-        "--gradient-via-stops": "var(--gradient-from), var(--gradient-via), var(--gradient-to)",
-        "--gradient-via": value
+        ...transformed,
+        "--gradient-via-stops": "var(--gradient-from), var(--gradient-via), var(--gradient-to)"
       };
     }
   }
 };
+var gradientVia = createColorMixTransform("--gradient-via");
 
 // src/utilities/border.ts
 var border = {
@@ -400,7 +408,8 @@ var border = {
   },
   borderColor: {
     className: "border",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("borderColor")
   },
   borderInline: {
     className: "border-x",
@@ -415,7 +424,8 @@ var border = {
   borderInlineColor: {
     className: "border-x",
     values: "colors",
-    shorthand: "borderXColor"
+    shorthand: "borderXColor",
+    transform: createColorMixTransform("borderInlineColor")
   },
   borderBlock: {
     className: "border-y",
@@ -430,7 +440,8 @@ var border = {
   borderBlockColor: {
     className: "border-y",
     values: "colors",
-    shorthand: "borderYColor"
+    shorthand: "borderYColor",
+    transform: createColorMixTransform("borderBlockColor")
   },
   borderLeft: {
     className: "border-l",
@@ -438,7 +449,8 @@ var border = {
   },
   borderLeftColor: {
     className: "border-l",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("borderLeftColor")
   },
   borderInlineStart: {
     className: "border-s",
@@ -453,7 +465,8 @@ var border = {
   borderInlineStartColor: {
     className: "border-s",
     values: "colors",
-    shorthand: "borderStartColor"
+    shorthand: "borderStartColor",
+    transform: createColorMixTransform("borderInlineStartColor")
   },
   borderRight: {
     className: "border-r",
@@ -461,7 +474,8 @@ var border = {
   },
   borderRightColor: {
     className: "border-r",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("borderRightColor")
   },
   borderInlineEnd: {
     className: "border-e",
@@ -476,7 +490,8 @@ var border = {
   borderInlineEndColor: {
     className: "border-e",
     values: "colors",
-    shorthand: "borderEndColor"
+    shorthand: "borderEndColor",
+    transform: createColorMixTransform("borderInlineEndColor")
   },
   borderTop: {
     className: "border-t",
@@ -484,7 +499,8 @@ var border = {
   },
   borderTopColor: {
     className: "border-t",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("borderTopColor")
   },
   borderBottom: {
     className: "border-b",
@@ -492,7 +508,8 @@ var border = {
   },
   borderBottomColor: {
     className: "border-b",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("borderBottomColor")
   },
   borderBlockEnd: {
     className: "border-be",
@@ -500,7 +517,8 @@ var border = {
   },
   borderBlockEndColor: {
     className: "border-be",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("borderBlockEndColor")
   },
   borderBlockStart: {
     className: "border-bs",
@@ -508,7 +526,23 @@ var border = {
   },
   borderBlockStartColor: {
     className: "border-bs",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("borderBlockStartColor")
+  }
+};
+
+// src/utilities/container.ts
+var container = {
+  container: {
+    className: "cq"
+  },
+  containerName: {
+    className: "cq-name",
+    property: "containerName",
+    values: "containerNames"
+  },
+  containerType: {
+    className: "cq-type"
   }
 };
 
@@ -574,11 +608,9 @@ var divide = {
   divideColor: {
     className: "divide",
     values: "colors",
-    transform(value) {
+    transform(value, args) {
       return {
-        "& > :not([hidden]) ~ :not([hidden])": {
-          borderColor: value
-        }
+        "& > :not([hidden]) ~ :not([hidden])": divideColor(value, args)
       };
     }
   },
@@ -594,6 +626,7 @@ var divide = {
     }
   }
 };
+var divideColor = createColorMixTransform("borderColor");
 
 // src/utilities/effects.ts
 var effects = {
@@ -609,11 +642,7 @@ var effects = {
     shorthand: "shadowColor",
     className: "shadow",
     values: "colors",
-    transform(value) {
-      return {
-        "--shadow-color": value
-      };
-    }
+    transform: createColorMixTransform("--shadow-color")
   },
   mixBlendMode: {
     className: "mix-blend"
@@ -1045,11 +1074,13 @@ var helpers = {
 var interactivity = {
   accentColor: {
     className: "accent",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("accentColor")
   },
   caretColor: {
     className: "caret",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("caretColor")
   },
   scrollBehavior: {
     className: "scroll"
@@ -1428,7 +1459,8 @@ var outline = {
   outlineColor: {
     className: "ring",
     values: "colors",
-    shorthand: "ringColor"
+    shorthand: "ringColor",
+    transform: createColorMixTransform("outlineColor")
   },
   outline: {
     className: "ring",
@@ -1448,6 +1480,58 @@ var outline = {
   }
 };
 
+// src/utilities/polyfill.ts
+var polyfill = {
+  appearance: {
+    className: "appearance",
+    transform(value) {
+      return { appearance: value, WebkitAppearance: value };
+    }
+  },
+  backfaceVisibility: {
+    className: "backface",
+    transform(value) {
+      return { backfaceVisibility: value, WebkitBackfaceVisibility: value };
+    }
+  },
+  clipPath: {
+    className: "clip-path",
+    transform(value) {
+      return { clipPath: value, WebkitClipPath: value };
+    }
+  },
+  hyphens: {
+    className: "hyphens",
+    transform(value) {
+      return { hyphens: value, WebkitHyphens: value };
+    }
+  },
+  mask: {
+    className: "mask",
+    transform(value) {
+      return { mask: value, WebkitMask: value };
+    }
+  },
+  maskImage: {
+    className: "mask-image",
+    transform(value) {
+      return { maskImage: value, WebkitMaskImage: value };
+    }
+  },
+  maskSize: {
+    className: "mask-size",
+    transform(value) {
+      return { maskSize: value, WebkitMaskSize: value };
+    }
+  },
+  textSizeAdjust: {
+    className: "text-size-adjust",
+    transform(value) {
+      return { textSizeAdjust: value, WebkitTextSizeAdjust: value };
+    }
+  }
+};
+
 // src/utilities/sizing.ts
 var widthValues = (theme) => ({
   auto: "auto",
@@ -1678,11 +1762,13 @@ var spacing = {
 var svg = {
   fill: {
     className: "fill",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("fill")
   },
   stroke: {
     className: "stroke",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("stroke")
   },
   strokeWidth: {
     className: "stroke-w",
@@ -1878,7 +1964,8 @@ var transitions = {
 var typography = {
   color: {
     className: "text",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("color")
   },
   fontFamily: {
     className: "font",
@@ -1923,11 +2010,13 @@ var typography = {
   },
   textDecorationColor: {
     className: "text-decor",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("textDecorationColor")
   },
   textEmphasisColor: {
     className: "text-emphasis",
-    values: "colors"
+    values: "colors",
+    transform: createColorMixTransform("textEmphasisColor")
   },
   textDecorationStyle: {
     className: "decoration"
@@ -1996,58 +2085,6 @@ var typography = {
   }
 };
 
-// src/utilities/polyfill.ts
-var polyfill = {
-  appearance: {
-    className: "appearance",
-    transform(value) {
-      return { appearance: value, WebkitAppearance: value };
-    }
-  },
-  backfaceVisibility: {
-    className: "backface",
-    transform(value) {
-      return { backfaceVisibility: value, WebkitBackfaceVisibility: value };
-    }
-  },
-  clipPath: {
-    className: "clip-path",
-    transform(value) {
-      return { clipPath: value, WebkitClipPath: value };
-    }
-  },
-  hyphens: {
-    className: "hyphens",
-    transform(value) {
-      return { hyphens: value, WebkitHyphens: value };
-    }
-  },
-  mask: {
-    className: "mask",
-    transform(value) {
-      return { mask: value, WebkitMask: value };
-    }
-  },
-  maskImage: {
-    className: "mask-image",
-    transform(value) {
-      return { maskImage: value, WebkitMaskImage: value };
-    }
-  },
-  maskSize: {
-    className: "mask-size",
-    transform(value) {
-      return { maskSize: value, WebkitMaskSize: value };
-    }
-  },
-  textSizeAdjust: {
-    className: "text-size-adjust",
-    transform(value) {
-      return { textSizeAdjust: value, WebkitTextSizeAdjust: value };
-    }
-  }
-};
-
 // src/utilities/index.ts
 var utilities = Object.assign(
   {},
@@ -2069,7 +2106,8 @@ var utilities = Object.assign(
   interactivity,
   svg,
   helpers,
-  polyfill
+  polyfill,
+  container
 );
 
 // src/patterns.ts
@@ -2113,8 +2151,12 @@ var stack = definePattern({
     direction: { type: "property", value: "flexDirection" },
     gap: { type: "property", value: "gap" }
   },
+  defaultValues: {
+    direction: "column",
+    gap: "10px"
+  },
   transform(props) {
-    const { align, justify, direction = "column", gap = "10px", ...rest } = props;
+    const { align, justify, direction, gap, ...rest } = props;
     return {
       display: "flex",
       flexDirection: direction,
@@ -2131,8 +2173,11 @@ var vstack = definePattern({
     justify: { type: "property", value: "justifyContent" },
     gap: { type: "property", value: "gap" }
   },
+  defaultValues: {
+    gap: "10px"
+  },
   transform(props) {
-    const { justify, gap = "10px", ...rest } = props;
+    const { justify, gap, ...rest } = props;
     return {
       display: "flex",
       alignItems: "center",
@@ -2149,8 +2194,11 @@ var hstack = definePattern({
     justify: { type: "property", value: "justifyContent" },
     gap: { type: "property", value: "gap" }
   },
+  defaultValues: {
+    gap: "10px"
+  },
   transform(props) {
-    const { justify, gap = "10px", ...rest } = props;
+    const { justify, gap, ...rest } = props;
     return {
       display: "flex",
       alignItems: "center",
@@ -2218,10 +2266,12 @@ var grid = definePattern({
     columns: { type: "number" },
     minChildWidth: { type: "token", value: "sizes", property: "width" }
   },
-  transform(props, { map }) {
-    const regex = /\d+(cm|in|pt|em|px|rem|vh|vmax|vmin|vw|ch|lh|%)$/;
-    const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", columns, minChildWidth, ...rest } = props;
-    const getValue = (v) => regex.test(v) ? v : `token(sizes.${v}, ${v})`;
+  defaultValues(props) {
+    return { gap: props.columnGap || props.rowGap ? void 0 : "10px" };
+  },
+  transform(props, { map, isCssUnit }) {
+    const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props;
+    const getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`;
     return {
       display: "grid",
       gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${getValue(v)}, 1fr))`) : void 0,
@@ -2277,7 +2327,7 @@ var wrap = definePattern({
     };
   }
 });
-var container = definePattern({
+var container2 = definePattern({
   transform(props) {
     return {
       position: "relative",
@@ -2340,8 +2390,12 @@ var divider = definePattern({
     thickness: { type: "token", value: "sizes", property: "borderWidth" },
     color: { type: "token", value: "colors", property: "borderColor" }
   },
+  defaultValues: {
+    orientation: "horizontal",
+    thickness: "1px"
+  },
   transform(props, { map }) {
-    const { orientation = "horizontal", thickness = "1px", color, ...rest } = props;
+    const { orientation, thickness, color, ...rest } = props;
     return {
       "--thickness": thickness,
       width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),
@@ -2403,8 +2457,12 @@ var float = definePattern({
       ]
     }
   },
+  defaultValues(props) {
+    const offset = props.offset || "0";
+    return { offset, offsetX: offset, offsetY: offset, placement: "top-end" };
+  },
   transform(props, { map }) {
-    const { offset = "0", offsetX = offset, offsetY = offset, placement = "top-end", ...rest } = props;
+    const { offset, offsetX, offsetY, placement, ...rest } = props;
     return {
       display: "inline-flex",
       justifyContent: "center",
@@ -2445,11 +2503,16 @@ var bleed = definePattern({
     inline: { type: "property", value: "marginInline" },
     block: { type: "property", value: "marginBlock" }
   },
-  transform(props) {
-    const { inline = "0", block = "0", ...rest } = props;
+  defaultValues: {
+    inline: "0",
+    block: "0"
+  },
+  transform(props, { map, isCssUnit, isCssVar }) {
+    const { inline, block, ...rest } = props;
+    const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
     return {
-      "--bleed-x": `spacing.${inline}`,
-      "--bleed-y": `spacing.${block}`,
+      "--bleed-x": map(inline, valueFn),
+      "--bleed-y": map(block, valueFn),
       marginInline: "calc(var(--bleed-x, 0) * -1)",
       marginBlock: "calc(var(--bleed-y, 0) * -1)",
       ...rest
@@ -2464,6 +2527,23 @@ var visuallyHidden = definePattern({
     };
   }
 });
+var cq = definePattern({
+  properties: {
+    name: { type: "token", value: "containerNames", property: "containerName" },
+    type: { type: "property", value: "containerType" }
+  },
+  defaultValues: {
+    type: "inline-size"
+  },
+  transform(props) {
+    const { name, type, ...rest } = props;
+    return {
+      containerType: type,
+      containerName: name,
+      ...rest
+    };
+  }
+});
 var patterns = {
   box,
   flex,
@@ -2480,11 +2560,12 @@ var patterns = {
   grid,
   gridItem,
   wrap,
-  container,
+  container: container2,
   divider,
   float,
   bleed,
-  visuallyHidden
+  visuallyHidden,
+  cq
 };
 
 // src/index.ts