@pandacss/preset-base 0.54.0 → 1.0.1

package/dist/index.d.mts

@@ -108,6 +108,8 @@ declare const preset: {
         vertical: string;
         icon: string;
         starting: string;
+        noscript: string;
+        invertedColors: string;
     };
     utilities: _pandacss_types.UtilityConfig;
     patterns: {

package/dist/index.d.ts

@@ -108,6 +108,8 @@ declare const preset: {
         vertical: string;
         icon: string;
         starting: string;
+        noscript: string;
+        invertedColors: string;
     };
     utilities: _pandacss_types.UtilityConfig;
     patterns: {

package/dist/index.js

@@ -18,12 +18,12 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  default: () => src_default,
+var index_exports = {};
+__export(index_exports, {
+  default: () => index_default,
   preset: () => preset
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/conditions.ts
 var conditions = {
@@ -49,7 +49,7 @@ var conditions = {
   after: "&::after",
   firstLetter: "&::first-letter",
   firstLine: "&::first-line",
-  marker: "&::marker",
+  marker: "&:is(::marker, ::-webkit-details-marker)",
   selection: "&::selection",
   file: "&::file-selector-button",
   backdrop: "&::backdrop",
@@ -97,7 +97,7 @@ var conditions = {
   atValue: "&[data-state=at-value]",
   default: "&:default",
   optional: "&:optional",
-  open: '&:is([open], [data-open], [data-state="open"])',
+  open: '&:is([open], [data-open], [data-state="open"], :popover-open)',
   closed: '&:is([closed], [data-closed], [data-state="closed"])',
   fullscreen: "&:is(:fullscreen, [data-fullscreen])",
   loading: "&:is([data-loading], [aria-busy=true])",
@@ -123,15 +123,17 @@ var conditions = {
   highContrast: "@media (forced-colors: active)",
   lessContrast: "@media (prefers-contrast: less)",
   moreContrast: "@media (prefers-contrast: more)",
-  ltr: "[dir=ltr] &",
-  rtl: "[dir=rtl] &",
+  ltr: ":where([dir=ltr], :dir(ltr)) &",
+  rtl: ":where([dir=rtl], :dir(rtl)) &",
   scrollbar: "&::-webkit-scrollbar",
   scrollbarThumb: "&::-webkit-scrollbar-thumb",
   scrollbarTrack: "&::-webkit-scrollbar-track",
   horizontal: "&[data-orientation=horizontal]",
   vertical: "&[data-orientation=vertical]",
   icon: "& :where(svg)",
-  starting: "@starting-style"
+  starting: "@starting-style",
+  noscript: "@media (scripting: none)",
+  invertedColors: "@media (inverted-colors: inverted)"
 };
 
 // src/global-css.ts
@@ -619,8 +621,7 @@ var patterns = {
 // src/color-mix-transform.ts
 var createColorMixTransform = (prop) => (value, args) => {
   const mix = args.utils.colorMix(value);
-  if (mix.invalid)
-    return { [prop]: value };
+  if (mix.invalid) return { [prop]: value };
   const cssVar = "--mix-" + prop;
   return {
     [cssVar]: mix.value,
@@ -1513,51 +1514,105 @@ var flexGrid = {
 
 // src/utilities/gradient.ts
 var gradientVia = createColorMixTransform("--gradient-via");
-var gradientTemplate = {
-  "to-t": "linear-gradient(to top, var(--gradient))",
-  "to-tr": "linear-gradient(to top right, var(--gradient))",
-  "to-r": "linear-gradient(to right, var(--gradient))",
-  "to-br": "linear-gradient(to bottom right, var(--gradient))",
-  "to-b": "linear-gradient(to bottom, var(--gradient))",
-  "to-bl": "linear-gradient(to bottom left, var(--gradient))",
-  "to-l": "linear-gradient(to left, var(--gradient))",
-  "to-tl": "linear-gradient(to top left, var(--gradient))"
-};
-var gradientVars = {
-  "--gradient-stops": "var(--gradient-via-stops, var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))",
-  "--gradient": "var(--gradient-via-stops, var(--gradient-stops))"
+var linearGradientDirectionMap = /* @__PURE__ */ new Map([
+  ["to-t", "to top"],
+  ["to-tr", "to top right"],
+  ["to-r", "to right"],
+  ["to-br", "to bottom right"],
+  ["to-b", "to bottom"],
+  ["to-bl", "to bottom left"],
+  ["to-l", "to left"],
+  ["to-tl", "to top left"]
+]);
+var linearGradientValues = (theme) => {
+  return {
+    ...theme("gradients"),
+    ...Object.fromEntries(linearGradientDirectionMap.entries())
+  };
 };
+var gradientStops = "var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))";
+var gradientViaStops = "var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-via) var(--gradient-via-position), var(--gradient-to) var(--gradient-to-position)";
 var backgroundGradients = {
   backgroundGradient: {
     shorthand: "bgGradient",
     className: "bg-grad",
     group: "Background Gradient",
-    values(theme) {
+    values: linearGradientValues,
+    transform(_value, { raw: value, token }) {
+      const tokenValue = token(`gradients.${value}`);
+      if (tokenValue) {
+        return { backgroundImage: tokenValue };
+      }
       return {
-        ...theme("gradients"),
-        ...gradientTemplate
+        "--gradient-stops": gradientStops,
+        "--gradient-position": linearGradientDirectionMap.get(value) || value,
+        backgroundImage: `linear-gradient(var(--gradient-stops))`
       };
-    },
-    transform(value) {
+    }
+  },
+  backgroundLinear: {
+    shorthand: "bgLinear",
+    className: "bg-linear",
+    group: "Background Gradient",
+    values: linearGradientValues,
+    transform(_value, { raw: value, token }) {
+      const tokenValue = token(`gradients.${value}`);
+      if (tokenValue) {
+        return { backgroundImage: tokenValue };
+      }
       return {
-        ...gradientVars,
-        backgroundImage: value
+        "--gradient-stops": gradientStops,
+        "--gradient-position": linearGradientDirectionMap.get(value) || value,
+        backgroundImage: `linear-gradient(var(--gradient-stops))`
       };
     }
   },
-  textGradient: {
-    className: "txt-grad",
+  backgroundRadial: {
+    shorthand: "bgRadial",
+    className: "bg-radial",
     group: "Background Gradient",
-    values(theme) {
+    values: "gradients",
+    transform(_value, { raw: value, token }) {
+      const tokenValue = token(`gradients.${value}`);
+      if (tokenValue) {
+        return { backgroundImage: tokenValue };
+      }
       return {
-        ...theme("gradients"),
-        ...gradientTemplate
+        "--gradient-stops": gradientStops,
+        "--gradient-position": value,
+        backgroundImage: `radial-gradient(var(--gradient-stops,${value}))`
       };
-    },
+    }
+  },
+  backgroundConic: {
+    shorthand: "bgConic",
+    className: "bg-conic",
+    group: "Background Gradient",
     transform(value) {
       return {
-        ...gradientVars,
-        backgroundImage: value,
+        "--gradient-stops": gradientStops,
+        "--gradient-position": value,
+        backgroundImage: `conic-gradient(var(--gradient-stops))`
+      };
+    }
+  },
+  textGradient: {
+    className: "txt-grad",
+    group: "Background Gradient",
+    values: linearGradientValues,
+    transform(_value, { raw: value, token }) {
+      const tokenValue = token(`gradients.${value}`);
+      if (tokenValue) {
+        return {
+          backgroundImage: tokenValue,
+          WebkitBackgroundClip: "text",
+          color: "transparent"
+        };
+      }
+      return {
+        "--gradient-stops": gradientStops,
+        "--gradient-position": linearGradientDirectionMap.get(value) || value,
+        backgroundImage: `linear-gradient(var(--gradient-stops))`,
         WebkitBackgroundClip: "text",
         color: "transparent"
       };
@@ -1601,7 +1656,8 @@ var backgroundGradients = {
       const transformed = gradientVia(value, args);
       return {
         ...transformed,
-        "--gradient-stops": "var(--gradient-from) var(--gradient-from-position), var(--gradient-via) var(--gradient-via-position), var(--gradient-to) var(--gradient-to-position)"
+        "--gradient-stops": "var(--gradient-via-stops)",
+        "--gradient-via-stops": gradientViaStops
       };
     }
   },
@@ -1654,8 +1710,7 @@ var helpers = {
     values: { type: "boolean" },
     group: "Other",
     transform(value) {
-      if (!value)
-        return {};
+      if (!value) return {};
       return {
         outline: "1px solid blue !important",
         "&>*": {
@@ -2388,6 +2443,17 @@ var sizing = {
     className: "max-b",
     group: "Height",
     values: heightValues
+  },
+  boxSize: {
+    className: "size",
+    group: "Width",
+    values: widthValues,
+    transform(value) {
+      return {
+        width: value,
+        height: value
+      };
+    }
   }
 };
 
@@ -3088,8 +3154,7 @@ var typography = {
     values: { type: "boolean" },
     group: "Typography",
     transform(value) {
-      if (!value)
-        return {};
+      if (!value) return {};
       return {
         overflow: "hidden",
         textOverflow: "ellipsis",
@@ -3153,7 +3218,7 @@ var preset = definePreset({
   // globalVars,
   globalCss
 });
-var src_default = preset;
+var index_default = preset;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   preset

package/dist/index.mjs

@@ -22,7 +22,7 @@ var conditions = {
   after: "&::after",
   firstLetter: "&::first-letter",
   firstLine: "&::first-line",
-  marker: "&::marker",
+  marker: "&:is(::marker, ::-webkit-details-marker)",
   selection: "&::selection",
   file: "&::file-selector-button",
   backdrop: "&::backdrop",
@@ -70,7 +70,7 @@ var conditions = {
   atValue: "&[data-state=at-value]",
   default: "&:default",
   optional: "&:optional",
-  open: '&:is([open], [data-open], [data-state="open"])',
+  open: '&:is([open], [data-open], [data-state="open"], :popover-open)',
   closed: '&:is([closed], [data-closed], [data-state="closed"])',
   fullscreen: "&:is(:fullscreen, [data-fullscreen])",
   loading: "&:is([data-loading], [aria-busy=true])",
@@ -96,15 +96,17 @@ var conditions = {
   highContrast: "@media (forced-colors: active)",
   lessContrast: "@media (prefers-contrast: less)",
   moreContrast: "@media (prefers-contrast: more)",
-  ltr: "[dir=ltr] &",
-  rtl: "[dir=rtl] &",
+  ltr: ":where([dir=ltr], :dir(ltr)) &",
+  rtl: ":where([dir=rtl], :dir(rtl)) &",
   scrollbar: "&::-webkit-scrollbar",
   scrollbarThumb: "&::-webkit-scrollbar-thumb",
   scrollbarTrack: "&::-webkit-scrollbar-track",
   horizontal: "&[data-orientation=horizontal]",
   vertical: "&[data-orientation=vertical]",
   icon: "& :where(svg)",
-  starting: "@starting-style"
+  starting: "@starting-style",
+  noscript: "@media (scripting: none)",
+  invertedColors: "@media (inverted-colors: inverted)"
 };
 
 // src/global-css.ts
@@ -592,8 +594,7 @@ var patterns = {
 // src/color-mix-transform.ts
 var createColorMixTransform = (prop) => (value, args) => {
   const mix = args.utils.colorMix(value);
-  if (mix.invalid)
-    return { [prop]: value };
+  if (mix.invalid) return { [prop]: value };
   const cssVar = "--mix-" + prop;
   return {
     [cssVar]: mix.value,
@@ -1486,51 +1487,105 @@ var flexGrid = {
 
 // src/utilities/gradient.ts
 var gradientVia = createColorMixTransform("--gradient-via");
-var gradientTemplate = {
-  "to-t": "linear-gradient(to top, var(--gradient))",
-  "to-tr": "linear-gradient(to top right, var(--gradient))",
-  "to-r": "linear-gradient(to right, var(--gradient))",
-  "to-br": "linear-gradient(to bottom right, var(--gradient))",
-  "to-b": "linear-gradient(to bottom, var(--gradient))",
-  "to-bl": "linear-gradient(to bottom left, var(--gradient))",
-  "to-l": "linear-gradient(to left, var(--gradient))",
-  "to-tl": "linear-gradient(to top left, var(--gradient))"
-};
-var gradientVars = {
-  "--gradient-stops": "var(--gradient-via-stops, var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))",
-  "--gradient": "var(--gradient-via-stops, var(--gradient-stops))"
+var linearGradientDirectionMap = /* @__PURE__ */ new Map([
+  ["to-t", "to top"],
+  ["to-tr", "to top right"],
+  ["to-r", "to right"],
+  ["to-br", "to bottom right"],
+  ["to-b", "to bottom"],
+  ["to-bl", "to bottom left"],
+  ["to-l", "to left"],
+  ["to-tl", "to top left"]
+]);
+var linearGradientValues = (theme) => {
+  return {
+    ...theme("gradients"),
+    ...Object.fromEntries(linearGradientDirectionMap.entries())
+  };
 };
+var gradientStops = "var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))";
+var gradientViaStops = "var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-via) var(--gradient-via-position), var(--gradient-to) var(--gradient-to-position)";
 var backgroundGradients = {
   backgroundGradient: {
     shorthand: "bgGradient",
     className: "bg-grad",
     group: "Background Gradient",
-    values(theme) {
+    values: linearGradientValues,
+    transform(_value, { raw: value, token }) {
+      const tokenValue = token(`gradients.${value}`);
+      if (tokenValue) {
+        return { backgroundImage: tokenValue };
+      }
       return {
-        ...theme("gradients"),
-        ...gradientTemplate
+        "--gradient-stops": gradientStops,
+        "--gradient-position": linearGradientDirectionMap.get(value) || value,
+        backgroundImage: `linear-gradient(var(--gradient-stops))`
       };
-    },
-    transform(value) {
+    }
+  },
+  backgroundLinear: {
+    shorthand: "bgLinear",
+    className: "bg-linear",
+    group: "Background Gradient",
+    values: linearGradientValues,
+    transform(_value, { raw: value, token }) {
+      const tokenValue = token(`gradients.${value}`);
+      if (tokenValue) {
+        return { backgroundImage: tokenValue };
+      }
       return {
-        ...gradientVars,
-        backgroundImage: value
+        "--gradient-stops": gradientStops,
+        "--gradient-position": linearGradientDirectionMap.get(value) || value,
+        backgroundImage: `linear-gradient(var(--gradient-stops))`
       };
     }
   },
-  textGradient: {
-    className: "txt-grad",
+  backgroundRadial: {
+    shorthand: "bgRadial",
+    className: "bg-radial",
     group: "Background Gradient",
-    values(theme) {
+    values: "gradients",
+    transform(_value, { raw: value, token }) {
+      const tokenValue = token(`gradients.${value}`);
+      if (tokenValue) {
+        return { backgroundImage: tokenValue };
+      }
       return {
-        ...theme("gradients"),
-        ...gradientTemplate
+        "--gradient-stops": gradientStops,
+        "--gradient-position": value,
+        backgroundImage: `radial-gradient(var(--gradient-stops,${value}))`
       };
-    },
+    }
+  },
+  backgroundConic: {
+    shorthand: "bgConic",
+    className: "bg-conic",
+    group: "Background Gradient",
     transform(value) {
       return {
-        ...gradientVars,
-        backgroundImage: value,
+        "--gradient-stops": gradientStops,
+        "--gradient-position": value,
+        backgroundImage: `conic-gradient(var(--gradient-stops))`
+      };
+    }
+  },
+  textGradient: {
+    className: "txt-grad",
+    group: "Background Gradient",
+    values: linearGradientValues,
+    transform(_value, { raw: value, token }) {
+      const tokenValue = token(`gradients.${value}`);
+      if (tokenValue) {
+        return {
+          backgroundImage: tokenValue,
+          WebkitBackgroundClip: "text",
+          color: "transparent"
+        };
+      }
+      return {
+        "--gradient-stops": gradientStops,
+        "--gradient-position": linearGradientDirectionMap.get(value) || value,
+        backgroundImage: `linear-gradient(var(--gradient-stops))`,
         WebkitBackgroundClip: "text",
         color: "transparent"
       };
@@ -1574,7 +1629,8 @@ var backgroundGradients = {
       const transformed = gradientVia(value, args);
       return {
         ...transformed,
-        "--gradient-stops": "var(--gradient-from) var(--gradient-from-position), var(--gradient-via) var(--gradient-via-position), var(--gradient-to) var(--gradient-to-position)"
+        "--gradient-stops": "var(--gradient-via-stops)",
+        "--gradient-via-stops": gradientViaStops
       };
     }
   },
@@ -1627,8 +1683,7 @@ var helpers = {
     values: { type: "boolean" },
     group: "Other",
     transform(value) {
-      if (!value)
-        return {};
+      if (!value) return {};
       return {
         outline: "1px solid blue !important",
         "&>*": {
@@ -2361,6 +2416,17 @@ var sizing = {
     className: "max-b",
     group: "Height",
     values: heightValues
+  },
+  boxSize: {
+    className: "size",
+    group: "Width",
+    values: widthValues,
+    transform(value) {
+      return {
+        width: value,
+        height: value
+      };
+    }
   }
 };
 
@@ -3061,8 +3127,7 @@ var typography = {
     values: { type: "boolean" },
     group: "Typography",
     transform(value) {
-      if (!value)
-        return {};
+      if (!value) return {};
       return {
         overflow: "hidden",
         textOverflow: "ellipsis",
@@ -3126,8 +3191,8 @@ var preset = definePreset({
   // globalVars,
   globalCss
 });
-var src_default = preset;
+var index_default = preset;
 export {
-  src_default as default,
+  index_default as default,
   preset
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/preset-base",
-  "version": "0.54.0",
+  "version": "1.0.1",
   "description": "The base preset for Panda CSS that contains the conditions and utilities",
   "author": "Segun Adebayo <joseshegs@gmail.com>",
   "main": "dist/index.js",
@@ -32,7 +32,7 @@
     "dist"
   ],
   "dependencies": {
-    "@pandacss/types": "0.54.0"
+    "@pandacss/types": "1.0.1"
   },
   "scripts": {
     "build": "tsup src/index.ts --format=esm,cjs --dts",