@likec4/styles 1.36.0 → 1.37.0

package/dist/tokens/index.mjs

@@ -900,23 +900,23 @@ const tokens = {
     "variable": "var(--shadows-none)"
   },
   "shadows.xs": {
-    "value": "0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1)",
+    "value": "0 1px 3px rgb(0 0 0/5%), 0 1px 2px rgb(0 0 0/10%)",
     "variable": "var(--shadows-xs)"
   },
   "shadows.sm": {
-    "value": "0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 10px 15px -5px, rgba(0, 0, 0, 0.04) 0 7px 7px -5px",
+    "value": "0 1px 3px rgb(0 0 0/5%), 0 10px 15px -5px rgb(0 0 0/5%), 0 7px 7px -5px rgb(0 0 0/4%)",
     "variable": "var(--shadows-sm)"
   },
   "shadows.md": {
-    "value": "0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 20px 25px -5px, rgba(0, 0, 0, 0.04) 0 10px 10px -5px",
+    "value": "0 1px 3px rgb(0 0 0/5%), 0 20px 25px -5px rgb(0 0 0/5%), 0 10px 10px -5px rgb(0 0 0/4%)",
     "variable": "var(--shadows-md)"
   },
   "shadows.lg": {
-    "value": "0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 28px 23px -7px, rgba(0, 0, 0, 0.04) 0 12px 12px -7px",
+    "value": "0 1px 3px rgb(0 0 0/5%), 0 28px 23px -7px rgb(0 0 0/5%), 0 12px 12px -7px rgb(0 0 0/4%)",
     "variable": "var(--shadows-lg)"
   },
   "shadows.xl": {
-    "value": "0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 36px 28px -7px, rgba(0, 0, 0, 0.04) 0 17px 17px -7px",
+    "value": "0 1px 3px rgb(0 0 0/5%), 0 36px 28px -7px rgb(0 0 0/5%), 0 17px 17px -7px rgb(0 0 0/4%)",
     "variable": "var(--shadows-xl)"
   },
   "breakpoints.xs": {

package/dist/types/conditions.d.ts

@@ -240,23 +240,23 @@ export interface Conditions {
 	"_notDisabled": string
 	/** `.likec4-root:is([data-likec4-reduced-graphics]) &` */
 	"_reduceGraphics": string
-	/** `.likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning]) &` */
+	/** `.likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning="true"]) &` */
 	"_reduceGraphicsOnPan": string
 	/** `.likec4-root:not([data-likec4-reduced-graphics]) &` */
 	"_noReduceGraphics": string
-	/** `:is(.likec4-root[data-likec4-diagram-panning]) &` */
+	/** `.likec4-root:is([data-likec4-diagram-panning="true"]) &` */
 	"_whenPanning": string
-	/** `:where([data-likec4-zoom-small]) &` */
+	/** `:where([data-likec4-zoom-small="true"]) &` */
 	"_smallZoom": string
 	/** `:where([data-compound-transparent]) &` */
 	"_compoundTransparent": string
 	/** `:where([data-likec4-edge-active="true"]) &` */
 	"_edgeActive": string
-	/** `:where([data-likec4-hovered="true"]) &` */
+	/** `:where(.react-flow__node, .react-flow__edge):has([data-likec4-hovered="true"]) &` */
 	"_whenHovered": string
 	/** `:where(.react-flow__node.selected, .react-flow__edge.selected) &` */
 	"_whenSelected": string
-	/** `:where([data-likec4-dimmed]) &` */
+	/** `:where(.react-flow__node, .react-flow__edge):has([data-likec4-dimmed]) &` */
 	"_whenDimmed": string
 	/** `:where(.react-flow__node, .react-flow__edge):is(:focus-visible, :focus, :focus-within) &` */
 	"_whenFocused": string

package/dist/types/prop-type.d.ts

@@ -135,7 +135,7 @@ export interface UtilityValues {
 	transitionDelay: Tokens["durations"];
 	transitionDuration: Tokens["durations"];
 	transition: "all" | "common" | "background" | "colors" | "opacity" | "shadow" | "transform" | "fastest" | "faster" | "fast" | "normal" | "slow" | "slower" | "slowest" | "none";
-	animationName: "indicatorStrokeOpacity" | "xyedgeAnimated";
+	animationName: "indicatorOpacity" | "indicatorStrokeOpacity" | "xyedgeAnimated";
 	animationTimingFunction: Tokens["easings"];
 	animationDuration: Tokens["durations"];
 	animationDelay: Tokens["durations"];
@@ -186,7 +186,7 @@ export interface UtilityValues {
 	colorPalette: "mantine" | "mantine.colors.primary" | "mantine.colors" | "mantine.colors.gray" | "mantine.colors.dark" | "mantine.colors.orange" | "mantine.colors.teal" | "mantine.colors.red" | "mantine.colors.green" | "mantine.colors.yellow" | "transparent" | "amber" | "amber.light" | "amber.light.a" | "amber.light.p3" | "amber.light.p3.a" | "amber.dark" | "amber.dark.a" | "amber.dark.p3" | "amber.dark.p3.a" | "amber.a" | "amber.p3" | "amber.p3.a" | "blue" | "blue.light" | "blue.light.a" | "blue.light.p3" | "blue.light.p3.a" | "blue.dark" | "blue.dark.a" | "blue.dark.p3" | "blue.dark.p3.a" | "blue.a" | "blue.p3" | "blue.p3.a" | "crimson" | "crimson.light" | "crimson.light.a" | "crimson.light.p3" | "crimson.light.p3.a" | "crimson.dark" | "crimson.dark.a" | "crimson.dark.p3" | "crimson.dark.p3.a" | "crimson.a" | "crimson.p3" | "crimson.p3.a" | "grass" | "grass.light" | "grass.light.a" | "grass.light.p3" | "grass.light.p3.a" | "grass.dark" | "grass.dark.a" | "grass.dark.p3" | "grass.dark.p3.a" | "grass.a" | "grass.p3" | "grass.p3.a" | "indigo" | "indigo.light" | "indigo.light.a" | "indigo.light.p3" | "indigo.light.p3.a" | "indigo.dark" | "indigo.dark.a" | "indigo.dark.p3" | "indigo.dark.p3.a" | "indigo.a" | "indigo.p3" | "indigo.p3.a" | "lime" | "lime.light" | "lime.light.a" | "lime.light.p3" | "lime.light.p3.a" | "lime.dark" | "lime.dark.a" | "lime.dark.p3" | "lime.dark.p3.a" | "lime.a" | "lime.p3" | "lime.p3.a" | "orange" | "orange.light" | "orange.light.a" | "orange.light.p3" | "orange.light.p3.a" | "orange.dark" | "orange.dark.a" | "orange.dark.p3" | "orange.dark.p3.a" | "orange.a" | "orange.p3" | "orange.p3.a" | "pink" | "pink.light" | "pink.light.a" | "pink.light.p3" | "pink.light.p3.a" | "pink.dark" | "pink.dark.a" | "pink.dark.p3" | "pink.dark.p3.a" | "pink.a" | "pink.p3" | "pink.p3.a" | "purple" | "purple.light" | "purple.light.a" | "purple.light.p3" | "purple.light.p3.a" | "purple.dark" | "purple.dark.a" | "purple.dark.p3" | "purple.dark.p3.a" | "purple.a" | "purple.p3" | "purple.p3.a" | "red" | "red.light" | "red.light.a" | "red.light.p3" | "red.light.p3.a" | "red.dark" | "red.dark.a" | "red.dark.p3" | "red.dark.p3.a" | "red.a" | "red.p3" | "red.p3.a" | "ruby" | "ruby.light" | "ruby.light.a" | "ruby.light.p3" | "ruby.light.p3.a" | "ruby.dark" | "ruby.dark.a" | "ruby.dark.p3" | "ruby.dark.p3.a" | "ruby.a" | "ruby.p3" | "ruby.p3.a" | "teal" | "teal.light" | "teal.light.a" | "teal.light.p3" | "teal.light.p3.a" | "teal.dark" | "teal.dark.a" | "teal.dark.p3" | "teal.dark.p3.a" | "teal.a" | "teal.p3" | "teal.p3.a" | "tomato" | "tomato.light" | "tomato.light.a" | "tomato.light.p3" | "tomato.light.p3.a" | "tomato.dark" | "tomato.dark.a" | "tomato.dark.p3" | "tomato.dark.p3.a" | "tomato.a" | "tomato.p3" | "tomato.p3.a" | "violet" | "violet.light" | "violet.light.a" | "violet.light.p3" | "violet.light.p3.a" | "violet.dark" | "violet.dark.a" | "violet.dark.p3" | "violet.dark.p3.a" | "violet.a" | "violet.p3" | "violet.p3.a" | "yellow" | "yellow.light" | "yellow.light.a" | "yellow.light.p3" | "yellow.light.p3.a" | "yellow.dark" | "yellow.dark.a" | "yellow.dark.p3" | "yellow.dark.p3.a" | "yellow.a" | "yellow.p3" | "yellow.p3.a" | "likec4" | "likec4.background" | "likec4.tag.bg" | "likec4.tag" | "likec4.panel.bg" | "likec4.panel" | "likec4.panel.action-icon.text" | "likec4.panel.action-icon" | "likec4.panel.action-icon.bg" | "likec4.dropdown.bg" | "likec4.dropdown";
 	textStyle: "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "likec4.node.primary" | "likec4.node.secondary";
 	layerStyle: "likec4.tag" | "likec4.panel" | "likec4.dropdown";
-	animationStyle: "indicator" | "xyedgeAnimated";
+	animationStyle: "indicator" | "indicatorOpacity" | "xyedgeAnimated";
 }
 
 

package/dist/types/style-props.d.ts

@@ -5,10 +5,10 @@ import type { CssProperties } from './system-types';
 import type { Token } from '../tokens/index';
 
 type AnyString = (string & {})
-type CssVars = "var(--likec4-palette-fill)" | "var(--likec4-palette-stroke)" | "var(--likec4-palette-hiContrast)" | "var(--likec4-palette-loContrast)" | "var(--likec4-palette-relation-stroke)" | "var(--likec4-palette-relation-label)" | "var(--likec4-palette-relation-label-bg)" | "var(--likec4-text-size)" | "var(--likec4-spacing)" | "var(--text-fz)" | "var(--likec4-icon-size)"
+type CssVars = "var(--likec4-palette-fill)" | "var(--likec4-palette-stroke)" | "var(--likec4-palette-hiContrast)" | "var(--likec4-palette-loContrast)" | "var(--likec4-palette-relation-stroke)" | "var(--likec4-palette-relation-label)" | "var(--likec4-palette-relation-label-bg)" | "var(--likec4-palette-outline)" | "var(--likec4-text-size)" | "var(--likec4-spacing)" | "var(--text-fz)" | "var(--likec4-icon-size)"
 type CssVarValue = ConditionalValue<Token | CssVars | AnyString | (number & {})>
 
-type CssVarKeys = "--likec4-palette-fill" | "--likec4-palette-stroke" | "--likec4-palette-hiContrast" | "--likec4-palette-loContrast" | "--likec4-palette-relation-stroke" | "--likec4-palette-relation-label" | "--likec4-palette-relation-label-bg" | "--likec4-text-size" | "--likec4-spacing" | "--text-fz" | "--likec4-icon-size" | `--${string}` & {}
+type CssVarKeys = "--likec4-palette-fill" | "--likec4-palette-stroke" | "--likec4-palette-hiContrast" | "--likec4-palette-loContrast" | "--likec4-palette-relation-stroke" | "--likec4-palette-relation-label" | "--likec4-palette-relation-label-bg" | "--likec4-palette-outline" | "--likec4-text-size" | "--likec4-spacing" | "--text-fz" | "--likec4-icon-size" | `--${string}` & {}
 
 export type CssVarProperties = {
   [key in CssVarKeys]?: CssVarValue

package/package.json

@@ -2,7 +2,7 @@
   "name": "@likec4/styles",
   "description": "Shared PandaCSS preset and generated styles, used in LikeC4",
   "license": "MIT",
-  "version": "1.36.0",
+  "version": "1.37.0",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
   "author": "Denis Davydkov <denis@davydkov.com>",
@@ -78,8 +78,8 @@
     "nano-spawn": "^1.0.2",
     "unbuild": "3.5.0",
     "typescript": "5.9.2",
-    "@likec4/style-preset": "1.36.0",
-    "@likec4/tsconfig": "1.36.0"
+    "@likec4/style-preset": "1.37.0",
+    "@likec4/tsconfig": "1.37.0"
   },
   "scripts": {
     "typecheck": "tsc --build --verbose",

package/preset.d.mts

@@ -3,10 +3,14 @@ import { Preset } from '@pandacss/dev';
 
 declare const actionBtn: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
 
+declare const compoundNode: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+
 declare const edgeActionBtn: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
 
 declare const elementNodeIcon: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
 
+declare const elementShapeRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+
 declare const likec4tag: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
 
 declare const markdownBlock: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
@@ -14,13 +18,15 @@ declare const markdownBlock: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVari
 declare const navigationPanelActionIcon: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
 
 declare const recipes_actionBtn: typeof actionBtn;
+declare const recipes_compoundNode: typeof compoundNode;
 declare const recipes_edgeActionBtn: typeof edgeActionBtn;
 declare const recipes_elementNodeIcon: typeof elementNodeIcon;
+declare const recipes_elementShapeRecipe: typeof elementShapeRecipe;
 declare const recipes_likec4tag: typeof likec4tag;
 declare const recipes_markdownBlock: typeof markdownBlock;
 declare const recipes_navigationPanelActionIcon: typeof navigationPanelActionIcon;
 declare namespace recipes {
-  export { recipes_actionBtn as actionBtn, recipes_edgeActionBtn as edgeActionBtn, recipes_elementNodeIcon as elementNodeIcon, recipes_likec4tag as likec4tag, recipes_markdownBlock as markdownBlock, recipes_navigationPanelActionIcon as navigationPanelActionIcon };
+  export { recipes_actionBtn as actionBtn, recipes_compoundNode as compoundNode, recipes_edgeActionBtn as edgeActionBtn, recipes_elementNodeIcon as elementNodeIcon, recipes_elementShapeRecipe as elementShapeRecipe, recipes_likec4tag as likec4tag, recipes_markdownBlock as markdownBlock, recipes_navigationPanelActionIcon as navigationPanelActionIcon };
 }
 
 declare const edgeLabel: _pandacss_dev.SlotRecipeConfig;
@@ -1092,6 +1098,14 @@ declare const theme: {
         lg: string;
     };
     keyframes: {
+        indicatorOpacity: {
+            '0%': {
+                opacity: number;
+            };
+            '100%': {
+                opacity: number;
+            };
+        };
         indicatorStrokeOpacity: {
             '0%': {
                 strokeOpacity: number;
@@ -1118,6 +1132,14 @@ declare const theme: {
                 animationName: string;
             };
         };
+        indicatorOpacity: {
+            value: {
+                animationDuration: string;
+                animationIterationCount: string;
+                animationDirection: string;
+                animationName: string;
+            };
+        };
         xyedgeAnimated: {
             value: {
                 animationDuration: string;