Make labels in spatial view translucent

## After
<img width="238" height="193" alt="image"
src="https://github.com/user-attachments/assets/e2ec234d-c17f-4ed7-abce-c782854ec992"
/>

<img width="208" height="166" alt="image"
src="https://github.com/user-attachments/assets/cca7a353-6bcd-43de-a240-ae75163aa95a"
/>

<img width="373" height="173" alt="image"
src="https://github.com/user-attachments/assets/88ab0ae2-0ef8-48fa-a0c1-3719043235ad"
/>

<img width="188" height="162" alt="image"
src="https://github.com/user-attachments/assets/cae245f9-fb9a-4144-95cc-62071cadaaae"
/>

## Before
The labels would cover the actual data

<img width="358" height="236" alt="image"
src="https://github.com/user-attachments/assets/4577ec96-da78-4c19-8f34-919ae3def378"
/>

<img width="225" height="156" alt="image"
src="https://github.com/user-attachments/assets/1c67d5c3-4da3-464e-8bde-2ba5f7586629"
/>

<img width="515" height="214" alt="image"
src="https://github.com/user-attachments/assets/454298e4-bc86-48d4-918e-c9fae5bc89d4"
/>

Source-Ref: 5904b3167ca4a833a9a52b65e1e161785869c7f7

Author: emilk

crates/viewer/re_ui/data/dark_theme.ron

@@ -6,6 +6,8 @@
   "modal_button_width": 50,
   "default_modal_width": 400,
 
+  "spatial_label_bg_opacity": 0.5,
+
   "loop_selection_alpha": 0.55, // Multiplied with selection_bg_fill
   "loop_selection_alpha_inactive": 0.20, // Multiplied with selection_bg_fill
 

crates/viewer/re_ui/data/light_theme.ron

@@ -6,6 +6,8 @@
   "modal_button_width": 50,
   "default_modal_width": 400,
 
+  "spatial_label_bg_opacity": 0.5,
+
   "loop_selection_alpha": 0.55, // Multiplied with selection_bg_fill
   "loop_selection_alpha_inactive": 0.20, // Multiplied with selection_bg_fill
 

crates/viewer/re_ui/src/design_tokens.rs

@@ -76,6 +76,9 @@ pub struct DesignTokens {
     pub success_text_color: Color32,
     pub info_text_color: Color32,
 
+    /// Opacity multiplier for the background of 2D labels in spatial views.
+    pub spatial_label_bg_opacity: f32,
+
     /// Background color for viewport views.
     pub viewport_background: Color32,
 
@@ -287,6 +290,8 @@ impl DesignTokens {
             success_text_color: get_color("success_text_color"),
             info_text_color: get_color("info_text_color"),
 
+            spatial_label_bg_opacity: get_scalar("spatial_label_bg_opacity")?,
+
             viewport_background: get_color("viewport_background"),
 
             highlight_color: get_color("highlight_color"),

crates/viewer/re_view_spatial/src/ui.rs

@@ -215,29 +215,26 @@ pub fn create_labels(
     for label in labels {
         let (wrap_width, text_anchor_pos) = match label.target {
             UiLabelTarget::Rect(rect) => {
-                // TODO(#1640): 2D labels are not visible in 3D for now.
                 if spatial_kind == SpatialViewKind::ThreeD {
-                    continue;
+                    continue; // TODO(#1640): 2D labels are not visible in 3D for now.
                 }
                 let rect_in_ui = ui_from_scene.transform_rect(rect);
                 (
                     // Place the text centered below the rect
                     (rect_in_ui.width() - 4.0).at_least(60.0),
-                    rect_in_ui.center_bottom() + egui::vec2(0.0, 3.0),
+                    rect_in_ui.center_bottom(),
                 )
             }
             UiLabelTarget::Point2D(pos) => {
-                // TODO(#1640): 2D labels are not visible in 3D for now.
                 if spatial_kind == SpatialViewKind::ThreeD {
-                    continue;
+                    continue; // TODO(#1640): 2D labels are not visible in 3D for now.
                 }
                 let pos_in_ui = ui_from_scene.transform_pos(pos);
-                (f32::INFINITY, pos_in_ui + egui::vec2(0.0, 3.0))
+                (f32::INFINITY, pos_in_ui)
             }
             UiLabelTarget::Position3D(pos) => {
-                // TODO(#1640): 3D labels are not visible in 2D for now.
                 if spatial_kind == SpatialViewKind::TwoD {
-                    continue;
+                    continue; // TODO(#1640): 3D labels are not visible in 2D for now.
                 }
                 let pos_in_ui = ui_from_world_3d * pos.extend(1.0);
                 if pos_in_ui.w <= 0.0 {
@@ -277,9 +274,10 @@ pub fn create_labels(
             })
         });
 
-        let text_rect = egui::Align2::CENTER_TOP
-            .anchor_rect(egui::Rect::from_min_size(text_anchor_pos, galley.size()));
-        let bg_rect = text_rect.expand2(egui::vec2(4.0, 2.0));
+        let offset = egui::vec2(0.0, 5.0); // Add some margin
+        let text_rect =
+            egui::Align2::CENTER_TOP.anchor_size(text_anchor_pos + offset, galley.size());
+        let bg_rect = text_rect.expand2(egui::vec2(2.0, 0.0));
 
         let highlight = highlights
             .entity_highlight(label.labeled_instance.entity_path_hash)
@@ -301,6 +299,9 @@ pub fn create_labels(
             HoverHighlight::Hovered => parent_ui.style().visuals.widgets.hovered.bg_fill,
         };
 
+        let background_color =
+            background_color.gamma_multiply(parent_ui.tokens().spatial_label_bg_opacity);
+
         let rect_stroke = if is_error {
             egui::Stroke::new(1.0, parent_ui.style().visuals.error_fg_color)
         } else {