From 043dfdf798d0c01f34cb12a8ad9f684eaa693004 Mon Sep 17 00:00:00 2001 From: Abbey Yacoe Date: Thu, 14 Nov 2024 16:22:52 +0100 Subject: [PATCH] fix(example-apps): focus state does not update on active --- .../examples/edges/animating-edges-node/xy-theme.css | 5 +++++ .../examples/edges/animating-edges-svg/xy-theme.css | 5 +++++ .../examples/edges/custom-connectionline/xy-theme.css | 5 +++++ .../react/examples/edges/custom-edges/xy-theme.css | 5 +++++ .../examples/edges/delete-edge-on-drop/xy-theme.css | 5 +++++ .../examples/edges/edge-label-renderer/xy-theme.css | 5 +++++ .../react/examples/edges/edge-types/xy-theme.css | 5 +++++ .../react/examples/edges/floating-edges/xy-theme.css | 5 +++++ .../react/examples/edges/markers/xy-theme.css | 5 +++++ .../examples/edges/multi-connection-line/xy-theme.css | 5 +++++ .../react/examples/edges/reconnect-edge/xy-theme.css | 5 +++++ .../examples/edges/simple-floating-edges/xy-theme.css | 5 +++++ .../react/examples/edges/temporary-edges/xy-theme.css | 5 +++++ .../examples/interaction/computing-flows/xy-theme.css | 5 +++++ .../examples/interaction/connection-events/xy-theme.css | 5 +++++ .../react/examples/interaction/context-menu/xy-theme.css | 5 +++++ .../examples/interaction/contextual-zoom/xy-theme.css | 5 +++++ .../examples/interaction/drag-and-drop/xy-theme.css | 5 +++++ .../examples/interaction/interaction-props/xy-theme.css | 5 +++++ .../examples/interaction/prevent-cycles/xy-theme.css | 5 +++++ .../examples/interaction/save-and-restore/xy-theme.css | 5 +++++ .../react/examples/interaction/touch-device/xy-theme.css | 5 +++++ .../react/examples/interaction/validation/xy-theme.css | 5 +++++ .../examples/interaction/zoom-transitions/xy-theme.css | 5 +++++ .../react/examples/layout/dagre/xy-theme.css | 5 +++++ .../examples/layout/elkjs-multiple-handles/xy-theme.css | 5 +++++ .../react/examples/layout/elkjs/xy-theme.css | 5 +++++ .../react/examples/layout/entitree-flex/xy-theme.css | 5 +++++ .../react/examples/layout/horizontal/xy-theme.css | 5 +++++ .../react/examples/layout/sub-flows/xy-theme.css | 5 +++++ .../react/examples/misc/download-image/xy-theme.css | 5 +++++ .../react/examples/misc/overview/xy-theme.css | 9 +++++++++ .../react/examples/misc/provider/xy-theme.css | 5 +++++ .../react/examples/misc/use-react-flow-hook/xy-theme.css | 5 +++++ .../examples/nodes/add-node-on-edge-drop/xy-theme.css | 5 +++++ .../react/examples/nodes/connection-limit/xy-theme.css | 5 +++++ .../react/examples/nodes/custom-node/xy-theme.css | 5 +++++ .../react/examples/nodes/delete-middle-node/xy-theme.css | 5 +++++ .../react/examples/nodes/drag-handle/xy-theme.css | 5 +++++ .../react/examples/nodes/easy-connect/xy-theme.css | 5 +++++ .../react/examples/nodes/hidden/xy-theme.css | 5 +++++ .../react/examples/nodes/intersections/xy-theme.css | 5 +++++ .../react/examples/nodes/node-resizer/xy-theme.css | 5 +++++ .../react/examples/nodes/node-toolbar/xy-theme.css | 5 +++++ .../react/examples/nodes/proximity-connect/xy-theme.css | 5 +++++ .../react/examples/nodes/rotatable-node/xy-theme.css | 5 +++++ .../react/examples/nodes/stress/xy-theme.css | 5 +++++ .../react/examples/nodes/update-node/xy-theme.css | 5 +++++ .../react/examples/styling/dark-mode/xy-theme.css | 5 +++++ 49 files changed, 249 insertions(+) diff --git a/apps/example-apps/react/examples/edges/animating-edges-node/xy-theme.css b/apps/example-apps/react/examples/edges/animating-edges-node/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/edges/animating-edges-node/xy-theme.css +++ b/apps/example-apps/react/examples/edges/animating-edges-node/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/edges/animating-edges-svg/xy-theme.css b/apps/example-apps/react/examples/edges/animating-edges-svg/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/edges/animating-edges-svg/xy-theme.css +++ b/apps/example-apps/react/examples/edges/animating-edges-svg/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/edges/custom-connectionline/xy-theme.css b/apps/example-apps/react/examples/edges/custom-connectionline/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/edges/custom-connectionline/xy-theme.css +++ b/apps/example-apps/react/examples/edges/custom-connectionline/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/edges/custom-edges/xy-theme.css b/apps/example-apps/react/examples/edges/custom-edges/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/edges/custom-edges/xy-theme.css +++ b/apps/example-apps/react/examples/edges/custom-edges/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/edges/delete-edge-on-drop/xy-theme.css b/apps/example-apps/react/examples/edges/delete-edge-on-drop/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/edges/delete-edge-on-drop/xy-theme.css +++ b/apps/example-apps/react/examples/edges/delete-edge-on-drop/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/edges/edge-label-renderer/xy-theme.css b/apps/example-apps/react/examples/edges/edge-label-renderer/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/edges/edge-label-renderer/xy-theme.css +++ b/apps/example-apps/react/examples/edges/edge-label-renderer/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/edges/edge-types/xy-theme.css b/apps/example-apps/react/examples/edges/edge-types/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/edges/edge-types/xy-theme.css +++ b/apps/example-apps/react/examples/edges/edge-types/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/edges/floating-edges/xy-theme.css b/apps/example-apps/react/examples/edges/floating-edges/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/edges/floating-edges/xy-theme.css +++ b/apps/example-apps/react/examples/edges/floating-edges/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/edges/markers/xy-theme.css b/apps/example-apps/react/examples/edges/markers/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/edges/markers/xy-theme.css +++ b/apps/example-apps/react/examples/edges/markers/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/edges/multi-connection-line/xy-theme.css b/apps/example-apps/react/examples/edges/multi-connection-line/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/edges/multi-connection-line/xy-theme.css +++ b/apps/example-apps/react/examples/edges/multi-connection-line/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/edges/reconnect-edge/xy-theme.css b/apps/example-apps/react/examples/edges/reconnect-edge/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/edges/reconnect-edge/xy-theme.css +++ b/apps/example-apps/react/examples/edges/reconnect-edge/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/edges/simple-floating-edges/xy-theme.css b/apps/example-apps/react/examples/edges/simple-floating-edges/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/edges/simple-floating-edges/xy-theme.css +++ b/apps/example-apps/react/examples/edges/simple-floating-edges/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/edges/temporary-edges/xy-theme.css b/apps/example-apps/react/examples/edges/temporary-edges/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/edges/temporary-edges/xy-theme.css +++ b/apps/example-apps/react/examples/edges/temporary-edges/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/interaction/computing-flows/xy-theme.css b/apps/example-apps/react/examples/interaction/computing-flows/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/interaction/computing-flows/xy-theme.css +++ b/apps/example-apps/react/examples/interaction/computing-flows/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/interaction/connection-events/xy-theme.css b/apps/example-apps/react/examples/interaction/connection-events/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/interaction/connection-events/xy-theme.css +++ b/apps/example-apps/react/examples/interaction/connection-events/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/interaction/context-menu/xy-theme.css b/apps/example-apps/react/examples/interaction/context-menu/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/interaction/context-menu/xy-theme.css +++ b/apps/example-apps/react/examples/interaction/context-menu/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/interaction/contextual-zoom/xy-theme.css b/apps/example-apps/react/examples/interaction/contextual-zoom/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/interaction/contextual-zoom/xy-theme.css +++ b/apps/example-apps/react/examples/interaction/contextual-zoom/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/interaction/drag-and-drop/xy-theme.css b/apps/example-apps/react/examples/interaction/drag-and-drop/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/interaction/drag-and-drop/xy-theme.css +++ b/apps/example-apps/react/examples/interaction/drag-and-drop/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/interaction/interaction-props/xy-theme.css b/apps/example-apps/react/examples/interaction/interaction-props/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/interaction/interaction-props/xy-theme.css +++ b/apps/example-apps/react/examples/interaction/interaction-props/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/interaction/prevent-cycles/xy-theme.css b/apps/example-apps/react/examples/interaction/prevent-cycles/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/interaction/prevent-cycles/xy-theme.css +++ b/apps/example-apps/react/examples/interaction/prevent-cycles/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/interaction/save-and-restore/xy-theme.css b/apps/example-apps/react/examples/interaction/save-and-restore/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/interaction/save-and-restore/xy-theme.css +++ b/apps/example-apps/react/examples/interaction/save-and-restore/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/interaction/touch-device/xy-theme.css b/apps/example-apps/react/examples/interaction/touch-device/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/interaction/touch-device/xy-theme.css +++ b/apps/example-apps/react/examples/interaction/touch-device/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/interaction/validation/xy-theme.css b/apps/example-apps/react/examples/interaction/validation/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/interaction/validation/xy-theme.css +++ b/apps/example-apps/react/examples/interaction/validation/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/interaction/zoom-transitions/xy-theme.css b/apps/example-apps/react/examples/interaction/zoom-transitions/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/interaction/zoom-transitions/xy-theme.css +++ b/apps/example-apps/react/examples/interaction/zoom-transitions/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/layout/dagre/xy-theme.css b/apps/example-apps/react/examples/layout/dagre/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/layout/dagre/xy-theme.css +++ b/apps/example-apps/react/examples/layout/dagre/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/layout/elkjs-multiple-handles/xy-theme.css b/apps/example-apps/react/examples/layout/elkjs-multiple-handles/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/layout/elkjs-multiple-handles/xy-theme.css +++ b/apps/example-apps/react/examples/layout/elkjs-multiple-handles/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/layout/elkjs/xy-theme.css b/apps/example-apps/react/examples/layout/elkjs/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/layout/elkjs/xy-theme.css +++ b/apps/example-apps/react/examples/layout/elkjs/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/layout/entitree-flex/xy-theme.css b/apps/example-apps/react/examples/layout/entitree-flex/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/layout/entitree-flex/xy-theme.css +++ b/apps/example-apps/react/examples/layout/entitree-flex/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/layout/horizontal/xy-theme.css b/apps/example-apps/react/examples/layout/horizontal/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/layout/horizontal/xy-theme.css +++ b/apps/example-apps/react/examples/layout/horizontal/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/layout/sub-flows/xy-theme.css b/apps/example-apps/react/examples/layout/sub-flows/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/layout/sub-flows/xy-theme.css +++ b/apps/example-apps/react/examples/layout/sub-flows/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/misc/download-image/xy-theme.css b/apps/example-apps/react/examples/misc/download-image/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/misc/download-image/xy-theme.css +++ b/apps/example-apps/react/examples/misc/download-image/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/misc/overview/xy-theme.css b/apps/example-apps/react/examples/misc/overview/xy-theme.css index 070a1d07..e688dd96 100644 --- a/apps/example-apps/react/examples/misc/overview/xy-theme.css +++ b/apps/example-apps/react/examples/misc/overview/xy-theme.css @@ -53,6 +53,15 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/misc/provider/xy-theme.css b/apps/example-apps/react/examples/misc/provider/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/misc/provider/xy-theme.css +++ b/apps/example-apps/react/examples/misc/provider/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/misc/use-react-flow-hook/xy-theme.css b/apps/example-apps/react/examples/misc/use-react-flow-hook/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/misc/use-react-flow-hook/xy-theme.css +++ b/apps/example-apps/react/examples/misc/use-react-flow-hook/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/nodes/add-node-on-edge-drop/xy-theme.css b/apps/example-apps/react/examples/nodes/add-node-on-edge-drop/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/nodes/add-node-on-edge-drop/xy-theme.css +++ b/apps/example-apps/react/examples/nodes/add-node-on-edge-drop/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/nodes/connection-limit/xy-theme.css b/apps/example-apps/react/examples/nodes/connection-limit/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/nodes/connection-limit/xy-theme.css +++ b/apps/example-apps/react/examples/nodes/connection-limit/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/nodes/custom-node/xy-theme.css b/apps/example-apps/react/examples/nodes/custom-node/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/nodes/custom-node/xy-theme.css +++ b/apps/example-apps/react/examples/nodes/custom-node/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/nodes/delete-middle-node/xy-theme.css b/apps/example-apps/react/examples/nodes/delete-middle-node/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/nodes/delete-middle-node/xy-theme.css +++ b/apps/example-apps/react/examples/nodes/delete-middle-node/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/nodes/drag-handle/xy-theme.css b/apps/example-apps/react/examples/nodes/drag-handle/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/nodes/drag-handle/xy-theme.css +++ b/apps/example-apps/react/examples/nodes/drag-handle/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/nodes/easy-connect/xy-theme.css b/apps/example-apps/react/examples/nodes/easy-connect/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/nodes/easy-connect/xy-theme.css +++ b/apps/example-apps/react/examples/nodes/easy-connect/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/nodes/hidden/xy-theme.css b/apps/example-apps/react/examples/nodes/hidden/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/nodes/hidden/xy-theme.css +++ b/apps/example-apps/react/examples/nodes/hidden/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/nodes/intersections/xy-theme.css b/apps/example-apps/react/examples/nodes/intersections/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/nodes/intersections/xy-theme.css +++ b/apps/example-apps/react/examples/nodes/intersections/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/nodes/node-resizer/xy-theme.css b/apps/example-apps/react/examples/nodes/node-resizer/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/nodes/node-resizer/xy-theme.css +++ b/apps/example-apps/react/examples/nodes/node-resizer/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/nodes/node-toolbar/xy-theme.css b/apps/example-apps/react/examples/nodes/node-toolbar/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/nodes/node-toolbar/xy-theme.css +++ b/apps/example-apps/react/examples/nodes/node-toolbar/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/nodes/proximity-connect/xy-theme.css b/apps/example-apps/react/examples/nodes/proximity-connect/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/nodes/proximity-connect/xy-theme.css +++ b/apps/example-apps/react/examples/nodes/proximity-connect/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/nodes/rotatable-node/xy-theme.css b/apps/example-apps/react/examples/nodes/rotatable-node/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/nodes/rotatable-node/xy-theme.css +++ b/apps/example-apps/react/examples/nodes/rotatable-node/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/nodes/stress/xy-theme.css b/apps/example-apps/react/examples/nodes/stress/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/nodes/stress/xy-theme.css +++ b/apps/example-apps/react/examples/nodes/stress/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/nodes/update-node/xy-theme.css b/apps/example-apps/react/examples/nodes/update-node/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/nodes/update-node/xy-theme.css +++ b/apps/example-apps/react/examples/nodes/update-node/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover); diff --git a/apps/example-apps/react/examples/styling/dark-mode/xy-theme.css b/apps/example-apps/react/examples/styling/dark-mode/xy-theme.css index 070a1d07..2dac6ba1 100644 --- a/apps/example-apps/react/examples/styling/dark-mode/xy-theme.css +++ b/apps/example-apps/react/examples/styling/dark-mode/xy-theme.css @@ -53,6 +53,11 @@ border-color: #d9d9d9; } +.react-flow__node.selectable:focus:active { + box-shadow: var(--xy-node-boxshadow-default); +} + + .react-flow__node.selectable:hover, .react-flow__node.draggable:hover { border-color: var(--xy-theme-hover);