@likec4/styles 1.30.0 → 1.31.0

package/preset.mjs

@@ -1,5 +1,9 @@
 import { defineRecipe, defineSemanticTokens, defineTextStyles, defineTokens, defineUtility, definePreset } from '@pandacss/dev';
 
+const root = ".likec4-root";
+const rootNotReduced = `${root}:not([data-likec4-reduced-graphics])`;
+const nodeOrEdge = `:where(.react-flow__node, .react-flow__edge, .likec4-edge-label-container)`;
+
 const themeColors = [
   "amber",
   "blue",
@@ -2286,23 +2290,23 @@ const conditions = {
     dark: '[data-mantine-color-scheme="dark"] &',
     // This is used to hide certain elements when the diagram is in reduced graphics mode (large)
     reduceGraphics: [
-      ".likec4-root:is([data-likec4-reduced-graphics])",
+      `${root}:is([data-likec4-reduced-graphics])`,
       " &"
     ].join(""),
     // This is used to improve performance when the diagram is in reduced graphics mode
     // and the user is panning around the diagram
     reduceGraphicsOnPan: [
-      ".likec4-root:is(",
+      `${root}:is(`,
       "[data-likec4-reduced-graphics]",
       "[data-likec4-diagram-panning]",
       ") &"
     ].join(""),
     noReduceGraphics: [
-      ".likec4-root:not(",
+      `${root}:not(`,
       "[data-likec4-reduced-graphics]",
       ") &"
     ].join(""),
-    whenPanning: ":is(.likec4-root[data-likec4-diagram-panning]) &",
+    whenPanning: `:is(${root}[data-likec4-diagram-panning]) &`,
     smallZoom: ":where([data-likec4-zoom-small]) &",
     compoundTransparent: ":where([data-compound-transparent]) &",
     edgeActive: ':where([data-likec4-edge-active="true"]) &',
@@ -2315,6 +2319,22 @@ const conditions = {
   }
 };
 
+const patterns = {
+  extend: {
+    vstack: {
+      defaultValues: {
+        alignItems: "stretch",
+        gap: "sm"
+      }
+    },
+    hstack: {
+      defaultValues: {
+        gap: "sm"
+      }
+    }
+  }
+};
+
 const actionBtn = defineRecipe({
   className: "action-btn",
   description: "The styles for the Action Buttons",
@@ -2628,10 +2648,27 @@ const likec4RelationPalette = defineUtility({
     };
   }
 });
+const utilities = {
+  extend: {
+    transition: {
+      values: ["fast"],
+      className: "transition-fast",
+      transform(value, { token }) {
+        if (value !== "fast") {
+          return {
+            transition: value
+          };
+        }
+        return {
+          transition: `all ${token("durations.fast")}  ${token("easings.inOut")}`
+        };
+      }
+    },
+    likec4Palette,
+    likec4RelationPalette
+  }
+};
 
-const root = ".likec4-root";
-const rootNotReduced = `${root}:not([data-likec4-reduced-graphics])`;
-const nodeOrEdge = `:where(.react-flow__node, .react-flow__edge, .likec4-edge-label-container)`;
 const index = definePreset({
   name: "likec4",
   // Whether to use css reset
@@ -2727,27 +2764,9 @@ const index = definePreset({
     }
   },
   conditions,
-  utilities: {
-    extend: {
-      transition: {
-        values: ["fast"],
-        className: "transition-fast",
-        transform(value, { token }) {
-          if (value !== "fast") {
-            return {
-              transition: value
-            };
-          }
-          return {
-            transition: `all ${token("durations.fast")}  ${token("easings.inOut")}`
-          };
-        }
-      },
-      likec4Palette,
-      likec4RelationPalette
-    }
-  },
+  patterns,
+  utilities,
   theme
 });
 
-export { index as default };
+export { index as default, theme };

package/preset.ts

@@ -1,3 +1,3 @@
-import likec4preset from '@likec4/style-preset/src'
+import likec4preset, { theme } from '@likec4/style-preset/src'
 
-export { likec4preset as default }
+export { likec4preset as default, theme }