@likec4/styles 1.27.0 → 1.27.2

package/dist/styles.css

@@ -39,13 +39,13 @@
     opacity: 0.25;
 }
 
-  .likec4-root:not([data-likec4-reduced-graphics]):not([data-likec4-diagram-panning]) :where(.react-flow__node, .react-flow__edge, .likec4-edge-label-container):has([data-likec4-dimmed]) {
+  .likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__node, .react-flow__edge, .likec4-edge-label-container):has([data-likec4-dimmed]) {
     filter: var(--blur, ) var(--brightness, ) var(--contrast, ) var(--grayscale, ) var(--hue-rotate, ) var(--invert, ) var(--saturate, ) var(--sepia, ) var(--drop-shadow, );
     --grayscale: grayscale(0.85);
     --blur: blur(3px);
 }
 
-  .likec4-root:not([data-likec4-reduced-graphics]):not([data-likec4-diagram-panning]) :where(.react-flow__node, .react-flow__edge, .likec4-edge-label-container):has([data-likec4-dimmed="true"]) {
+  .likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__node, .react-flow__edge, .likec4-edge-label-container):has([data-likec4-dimmed="true"]) {
     --transition-prop: opacity, filter;
     transition-property: opacity, filter;
     --transition-easing: var(--easings-in-out);
@@ -55,10 +55,14 @@
     transition-delay: 200ms;
 }
 
-  [data-mantine-color-scheme="dark"] .likec4-root:not([data-likec4-reduced-graphics]):not([data-likec4-diagram-panning]) .react-flow__edges > svg {
+  [data-mantine-color-scheme="dark"] .likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__edges, .react-flow__edgelabel-renderer) > svg {
     mix-blend-mode: plus-lighter;
 }
 
+  [data-mantine-color-scheme="light"] .likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__edges, .react-flow__edgelabel-renderer) > svg {
+    mix-blend-mode: screen;
+}
+
   :where([data-likec4-text-size='xs']) {
     --likec4-text-size: var(--font-sizes-likec4-xs);
 }
@@ -886,7 +890,7 @@
       --ai-bg: var(--actionbtn-bg-hovered);
 }
 
-    :is(.likec4-root[data-likec4-diagram-panning]) .action-btn {
+    .likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning]) .action-btn {
       display: none;
 }
 
@@ -895,6 +899,7 @@
 }
 
     .action-btn:is(:hover, [data-hover]) {
+      opacity: 1;
       color: var(--actionbtn-color-hovered-btn);
       --ai-bg: var(--actionbtn-bg-hovered-btn);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likec4/styles",
   "license": "MIT",
-  "version": "1.27.0",
+  "version": "1.27.2",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
   "author": "Denis Davydkov <denis@davydkov.com>",
@@ -73,8 +73,8 @@
     "nano-spawn": "^0.2.0",
     "unbuild": "^3.5.0",
     "typescript": "^5.8.2",
-    "@likec4/style-preset": "1.27.0",
-    "@likec4/tsconfig": "1.27.0"
+    "@likec4/style-preset": "1.27.2",
+    "@likec4/tsconfig": "1.27.2"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",

package/preset.d.mts

@@ -2337,10 +2337,11 @@ const actionBtn = defineRecipe({
       "--ai-bg": `var(--actionbtn-bg-hovered)`
     },
     _hover: {
+      opacity: 1,
       color: "var(--actionbtn-color-hovered-btn)",
       "--ai-bg": `var(--actionbtn-bg-hovered-btn)`
     },
-    _whenPanning: {
+    _reduceGraphicsOnPan: {
       display: "none"
     },
     _smallZoom: {
@@ -2626,7 +2627,7 @@ const likec4RelationPalette = defineUtility({
 });
 
 const root = ".likec4-root";
-const rootNotReduced = `${root}:not([data-likec4-reduced-graphics]):not([data-likec4-diagram-panning])`;
+const rootNotReduced = `${root}:not([data-likec4-reduced-graphics])`;
 const nodeOrEdge = `:where(.react-flow__node, .react-flow__edge, .likec4-edge-label-container)`;
 var index = definePreset({
   name: "likec4",
@@ -2699,9 +2700,12 @@ var index = definePreset({
       transitionDuration: "800ms",
       transitionDelay: "200ms"
     },
-    [`[data-mantine-color-scheme="dark"] ${rootNotReduced} .react-flow__edges > svg`]: {
+    [`[data-mantine-color-scheme="dark"] ${rootNotReduced} :where(.react-flow__edges, .react-flow__edgelabel-renderer) > svg`]: {
       mixBlendMode: "plus-lighter"
     },
+    [`[data-mantine-color-scheme="light"] ${rootNotReduced} :where(.react-flow__edges, .react-flow__edgelabel-renderer) > svg`]: {
+      mixBlendMode: "screen"
+    },
     ...globalCss
   },
   staticCss: {

package/preset.mjs

@@ -2337,10 +2337,11 @@ const actionBtn = defineRecipe({
       "--ai-bg": `var(--actionbtn-bg-hovered)`
     },
     _hover: {
+      opacity: 1,
       color: "var(--actionbtn-color-hovered-btn)",
       "--ai-bg": `var(--actionbtn-bg-hovered-btn)`
     },
-    _whenPanning: {
+    _reduceGraphicsOnPan: {
       display: "none"
     },
     _smallZoom: {
@@ -2626,7 +2627,7 @@ const likec4RelationPalette = defineUtility({
 });
 
 const root = ".likec4-root";
-const rootNotReduced = `${root}:not([data-likec4-reduced-graphics]):not([data-likec4-diagram-panning])`;
+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",
@@ -2699,9 +2700,12 @@ const index = definePreset({
       transitionDuration: "800ms",
       transitionDelay: "200ms"
     },
-    [`[data-mantine-color-scheme="dark"] ${rootNotReduced} .react-flow__edges > svg`]: {
+    [`[data-mantine-color-scheme="dark"] ${rootNotReduced} :where(.react-flow__edges, .react-flow__edgelabel-renderer) > svg`]: {
       mixBlendMode: "plus-lighter"
     },
+    [`[data-mantine-color-scheme="light"] ${rootNotReduced} :where(.react-flow__edges, .react-flow__edgelabel-renderer) > svg`]: {
+      mixBlendMode: "screen"
+    },
     ...globalCss
   },
   staticCss: {