Limit light selection to "widget-colored" widgets only (#11358)

Fixes #10862

Before, we set selection to whit on entire node, but this looked bad in Table Widget.

[Screencast From 2024-10-18 15-23-40.webm](https://github.com/user-attachments/assets/cdc3e5f0-05f3-4858-ac98-c634ca283244)

CHANGELOG.md

@@ -7,10 +7,12 @@
 - [Rows and Columns may be now reordered by dragging in Table Input
   Widget][11271]
 - [Copying and pasting in Table Editor Widget now works properly][11332]
+- [Fix invisible selection in Table Input Widget][11358]
 
 [11151]: https://github.com/enso-org/enso/pull/11151
 [11271]: https://github.com/enso-org/enso/pull/11271
 [11332]: https://github.com/enso-org/enso/pull/11332
+[11358]: https://github.com/enso-org/enso/pull/11358
 
 #### Enso Standard Library
 

app/gui/src/project-view/assets/base.css

@@ -23,6 +23,7 @@
   --color-widget: rgb(255 255 255 / 0.12);
   --color-widget-focus: rgb(255 255 255 / 0.25);
   --color-widget-selected: rgb(255 255 255 / 0.58);
+  --color-widget-selection: rgba(255 255 255 / 0.2);
   --color-port-connected: rgb(255 255 255 / 0.15);
 
   /* colors for specific icons */

app/gui/src/project-view/components/GraphEditor/GraphNodes.vue

@@ -106,8 +106,4 @@ const graphNodeSelections = shallowRef<HTMLElement>()
   contain: layout size style;
   will-change: transform;
 }
-
-.layer:deep(::selection) {
-  background-color: rgba(255, 255, 255, 20%);
-}
 </style>

app/gui/src/project-view/components/GraphEditor/widgets/WidgetText.vue

@@ -132,5 +132,9 @@ export const widgetDefinition = defineWidget(
     outline: none;
     background: var(--color-widget-focus);
   }
+
+  &:deep(::selection) {
+    background: var(--color-widget-selection);
+  }
 }
 </style>

app/gui/src/project-view/components/widgets/NumericInputWidget.vue

@@ -159,6 +159,9 @@ defineExpose({
   &:focus {
     background: var(--color-widget-focus);
   }
+  &::selection {
+    background: var(--color-widget-selection);
+  }
 }
 
 .NumericInputWidget.slider {