@pandacss/preset-base 0.6.0 → 0.8.0

package/dist/index.d.mts

@@ -80,7 +80,7 @@ declare const preset: {
         light: string;
         osDark: string;
         osLight: string;
-        highConstrast: string;
+        highContrast: string;
         lessContrast: string;
         moreContrast: string;
         ltr: string;

package/dist/index.d.ts

@@ -80,7 +80,7 @@ declare const preset: {
         light: string;
         osDark: string;
         osLight: string;
-        highConstrast: string;
+        highContrast: string;
         lessContrast: string;
         moreContrast: string;
         ltr: string;

package/dist/index.js

@@ -104,7 +104,7 @@ var conditions = {
   light: " &.light, .light &",
   osDark: "@media (prefers-color-scheme: dark)",
   osLight: "@media (prefers-color-scheme: light)",
-  highConstrast: "@media (forced-colors: active)",
+  highContrast: "@media (forced-colors: active)",
   lessContrast: "@media (prefers-contrast: less)",
   moreContrast: "@media (prefers-contrast: more)",
   ltr: "[dir=ltr] &",
@@ -608,7 +608,7 @@ var effects = {
     className: "contrast",
     transform(value) {
       return {
-        "--contrast": `constrast(${value})`
+        "--contrast": `contrast(${value})`
       };
     }
   },
@@ -712,7 +712,7 @@ var effects = {
     className: "backdrop-contrast",
     transform(value) {
       return {
-        "--backdrop-contrast": `constrast(${value})`
+        "--backdrop-contrast": `contrast(${value})`
       };
     }
   },
@@ -1250,7 +1250,8 @@ var layout = {
     }
   },
   zIndex: {
-    className: "z"
+    className: "z",
+    values: "zIndex"
   },
   boxSizing: {
     className: "box"
@@ -1767,10 +1768,32 @@ var transforms = {
 };
 
 // src/utilities/transitions.ts
+var createTransition = (value) => ({
+  transitionProperty: `var(--transition-prop, ${value})`,
+  transitionTimingFunction: "var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1))",
+  transitionDuration: "var(--transition-duration, 150ms)"
+});
+var transitionMap = {
+  all: createTransition("all"),
+  common: createTransition(
+    "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter"
+  ),
+  background: createTransition("background, background-color"),
+  colors: createTransition("color, background-color, border-color, outline-color, text-decoration-color, fill, stroke"),
+  opacity: createTransition("opacity"),
+  shadow: createTransition("box-shadow"),
+  transform: createTransition("transform")
+};
 var transitions = {
   transitionTimingFunction: {
     className: "ease",
-    values: "easings"
+    values: "easings",
+    transform(value) {
+      return {
+        "--transition-easing": value,
+        transitionTimingFunction: value
+      };
+    }
   },
   transitionDelay: {
     className: "delay",
@@ -1778,19 +1801,28 @@ var transitions = {
   },
   transitionDuration: {
     className: "duration",
-    values: "durations"
+    values: "durations",
+    transform(value) {
+      return {
+        "--transition-duration": value,
+        transitionDuration: value
+      };
+    }
   },
   transitionProperty: {
+    className: "transition-prop",
+    transform(value) {
+      return {
+        "--transition-prop": value,
+        transitionProperty: value
+      };
+    }
+  },
+  transition: {
     className: "transition",
-    values: {
-      all: "all",
-      none: "none",
-      opacity: "opacity",
-      shadow: "box-shadow",
-      transform: "transform",
-      base: "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
-      background: "background, background-color",
-      colors: "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke"
+    values: Object.keys(transitionMap),
+    transform(value) {
+      return transitionMap[value] ?? { transition: value };
     }
   },
   animation: {

package/dist/index.mjs

@@ -77,7 +77,7 @@ var conditions = {
   light: " &.light, .light &",
   osDark: "@media (prefers-color-scheme: dark)",
   osLight: "@media (prefers-color-scheme: light)",
-  highConstrast: "@media (forced-colors: active)",
+  highContrast: "@media (forced-colors: active)",
   lessContrast: "@media (prefers-contrast: less)",
   moreContrast: "@media (prefers-contrast: more)",
   ltr: "[dir=ltr] &",
@@ -581,7 +581,7 @@ var effects = {
     className: "contrast",
     transform(value) {
       return {
-        "--contrast": `constrast(${value})`
+        "--contrast": `contrast(${value})`
       };
     }
   },
@@ -685,7 +685,7 @@ var effects = {
     className: "backdrop-contrast",
     transform(value) {
       return {
-        "--backdrop-contrast": `constrast(${value})`
+        "--backdrop-contrast": `contrast(${value})`
       };
     }
   },
@@ -1223,7 +1223,8 @@ var layout = {
     }
   },
   zIndex: {
-    className: "z"
+    className: "z",
+    values: "zIndex"
   },
   boxSizing: {
     className: "box"
@@ -1740,10 +1741,32 @@ var transforms = {
 };
 
 // src/utilities/transitions.ts
+var createTransition = (value) => ({
+  transitionProperty: `var(--transition-prop, ${value})`,
+  transitionTimingFunction: "var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1))",
+  transitionDuration: "var(--transition-duration, 150ms)"
+});
+var transitionMap = {
+  all: createTransition("all"),
+  common: createTransition(
+    "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter"
+  ),
+  background: createTransition("background, background-color"),
+  colors: createTransition("color, background-color, border-color, outline-color, text-decoration-color, fill, stroke"),
+  opacity: createTransition("opacity"),
+  shadow: createTransition("box-shadow"),
+  transform: createTransition("transform")
+};
 var transitions = {
   transitionTimingFunction: {
     className: "ease",
-    values: "easings"
+    values: "easings",
+    transform(value) {
+      return {
+        "--transition-easing": value,
+        transitionTimingFunction: value
+      };
+    }
   },
   transitionDelay: {
     className: "delay",
@@ -1751,19 +1774,28 @@ var transitions = {
   },
   transitionDuration: {
     className: "duration",
-    values: "durations"
+    values: "durations",
+    transform(value) {
+      return {
+        "--transition-duration": value,
+        transitionDuration: value
+      };
+    }
   },
   transitionProperty: {
+    className: "transition-prop",
+    transform(value) {
+      return {
+        "--transition-prop": value,
+        transitionProperty: value
+      };
+    }
+  },
+  transition: {
     className: "transition",
-    values: {
-      all: "all",
-      none: "none",
-      opacity: "opacity",
-      shadow: "box-shadow",
-      transform: "transform",
-      base: "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
-      background: "background, background-color",
-      colors: "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke"
+    values: Object.keys(transitionMap),
+    transform(value) {
+      return transitionMap[value] ?? { transition: value };
     }
   },
   animation: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/preset-base",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "The base preset for Panda CSS that contains the conditions and utilities",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -14,7 +14,7 @@
     "dist"
   ],
   "dependencies": {
-    "@pandacss/types": "0.6.0"
+    "@pandacss/types": "0.8.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format=esm,cjs --dts",