Tweak light mode colors (#10013)

### Related
* Part of #9953 

### What
Add specific light mode colors for:
* bread crumbs
* blueprint time panel
* loop selection
* loop-all button

Author: emilk

crates/viewer/re_selection_panel/src/item_heading_with_breadcrumbs.rs

@@ -51,10 +51,11 @@ pub fn item_heading_with_breadcrumbs(
 
                 // First the C>R>U>M>B>S>
                 {
+                    let breadcrumb_text_color = ui.design_tokens().breadcrumb_text_color();
                     let previous_style = ui.style().clone();
                     // Dimmer colors for breadcrumbs
                     let visuals = ui.visuals_mut();
-                    visuals.widgets.inactive.fg_stroke.color = egui::hex_color!("#6A8CD0"); // TODO(#3133): use design tokens
+                    visuals.widgets.inactive.fg_stroke.color = breadcrumb_text_color;
                     item_bread_crumbs_ui(ctx, viewport, ui, item);
                     ui.set_style(previous_style);
                 }
@@ -251,7 +252,7 @@ pub fn separator_icon_ui(ui: &mut egui::Ui) {
     ui.add(
         icons::BREADCRUMBS_SEPARATOR
             .as_image()
-            .tint(ui.visuals().text_color().gamma_multiply(0.65)),
+            .tint(ui.design_tokens().breadcrumb_separator_color()),
     );
 }
 

crates/viewer/re_time_panel/src/time_control_ui.rs

@@ -195,8 +195,7 @@ You can also define your own timelines, e.g. for sensor time or camera frame num
                     }
                 }
                 Looping::All => {
-                    ui.visuals_mut().selection.bg_fill =
-                        re_ui::DesignTokens::loop_everything_color();
+                    ui.visuals_mut().selection.bg_fill = ui.design_tokens().loop_everything_color();
                     if ui
                         .large_button_selected(icon, true)
                         .on_hover_text("Looping entire recording")

crates/viewer/re_time_panel/src/time_selection_ui.rs

@@ -1,6 +1,7 @@
 use egui::{CursorIcon, Id, NumExt as _, Rect};
 
 use re_log_types::{Duration, ResolvedTimeRangeF, TimeInt, TimeReal, TimeType};
+use re_ui::UiExt as _;
 use re_viewer_context::{Looping, TimeControl};
 
 use super::time_ranges_ui::TimeRangesUi;
@@ -26,9 +27,11 @@ pub fn loop_selection_ui(
     let is_active = time_ctrl.looping() == Looping::Selection;
 
     let selection_color = if is_active {
-        re_ui::DesignTokens::loop_selection_color().gamma_multiply(0.7)
+        ui.design_tokens().loop_selection_color()
     } else {
-        re_ui::DesignTokens::loop_selection_color().gamma_multiply(0.5)
+        ui.design_tokens()
+            .loop_selection_color()
+            .gamma_multiply(0.7)
     };
 
     let pointer_pos = ui.input(|i| i.pointer.hover_pos());

crates/viewer/re_ui/src/design_token_colors.rs

@@ -1,7 +1,7 @@
 #![allow(clippy::unwrap_used)]
 #![allow(clippy::enum_glob_use)] // Nice to have for the color variants
 
-use egui::{Color32, Theme};
+use egui::{Color32, Theme, hex_color};
 
 use crate::{
     DesignTokens,
@@ -61,13 +61,19 @@ impl DesignTokens {
     }
 
     /// The color we use to mean "loop this selection"
-    pub fn loop_selection_color() -> Color32 {
-        Color32::from_rgb(1, 37, 105) // from figma 2023-02-09
+    pub fn loop_selection_color(&self) -> Color32 {
+        match self.theme {
+            Theme::Dark => hex_color!("#012569B2"),
+            Theme::Light => hex_color!("#6386C9B2"),
+        }
     }
 
     /// The color we use to mean "loop all the data"
-    pub fn loop_everything_color() -> Color32 {
-        Color32::from_rgb(2, 80, 45) // from figma 2023-02-09
+    pub fn loop_everything_color(&self) -> Color32 {
+        match self.theme {
+            Theme::Dark => Color32::from_rgb(2, 80, 45), // from figma 2023-02-09
+            Theme::Light => hex_color!("#06A35C"),
+        }
     }
 
     /// Used by the "add view or container" modal.
@@ -86,6 +92,27 @@ impl DesignTokens {
         }
     }
 
+    pub fn breadcrumb_text_color(&self) -> Color32 {
+        match self.theme {
+            Theme::Dark => egui::hex_color!("#6A8CD0"),
+            Theme::Light => self.color(ColorToken::blue(S300)),
+        }
+    }
+
+    pub fn breadcrumb_separator_color(&self) -> Color32 {
+        match self.theme {
+            Theme::Dark => self.color(ColorToken::blue(S500)),
+            Theme::Light => self.color(ColorToken::blue(S400)),
+        }
+    }
+
+    pub fn blueprint_time_panel_bg_fill(&self) -> Color32 {
+        match self.theme {
+            Theme::Dark => egui::hex_color!("#141326"),
+            Theme::Light => self.color(ColorToken::blue(S900)),
+        }
+    }
+
     /// Color for notification panel background
     pub fn notification_panel_background_color(&self) -> Color32 {
         match self.theme {

crates/viewer/re_ui/src/design_tokens.rs

@@ -16,14 +16,15 @@ use crate::{
 #[derive(Debug)]
 pub struct DesignTokens {
     pub theme: egui::Theme,
-    pub json: serde_json::Value,
+
+    typography: Typography,
 
     /// Color table for all colors used in the UI.
     ///
     /// Loaded at startup from `design_tokens.json`.
     pub(crate) color_table: ColorTable, // Not public, because all colors should go via design_token_colors.rs
 
-    // TODO(ab): get rid of these, they should be function calls like the rest.
+    // TODO(ab): get rid of these, they should be function calls in design_token_colors.rs like the rest.
     pub top_bar_color: Color32,
     pub bottom_bar_color: Color32,
     pub bottom_bar_stroke: egui::Stroke,
@@ -36,16 +37,27 @@ pub struct DesignTokens {
 impl DesignTokens {
     /// Load design tokens from `data/design_tokens_*.json`.
     pub fn load(theme: Theme) -> Self {
-        match theme {
+        let json: serde_json::Value = match theme {
             egui::Theme::Dark => {
-                let json: serde_json::Value =
-                    serde_json::from_str(include_str!("../data/design_tokens_dark.json"))
-                        .expect("Failed to parse data/design_tokens_dark.json");
+                serde_json::from_str(include_str!("../data/design_tokens_dark.json"))
+                    .expect("Failed to parse data/design_tokens_dark.json")
+            }
+
+            egui::Theme::Light => {
+                serde_json::from_str(include_str!("../data/design_tokens_light.json"))
+                    .expect("Failed to parse data/design_tokens_light.json")
+            }
+        };
 
-                let color_table = load_color_table(&json);
+        let typography: Typography = get_alias(&json, "{Alias.Typography.Default.value}");
 
+        let color_table = load_color_table(&json);
+
+        match theme {
+            egui::Theme::Dark => {
                 Self {
                     theme,
+                    typography,
                     top_bar_color: color_table.gray(S100),
                     bottom_bar_color: color_table.gray(S150),
                     bottom_bar_stroke: egui::Stroke::new(1.0, color_table.gray(S250)),
@@ -58,19 +70,13 @@ impl DesignTokens {
                     shadow_gradient_dark_start: Color32::from_black_alpha(77), //TODO(ab): use ColorToken!
                     tab_bar_color: color_table.gray(S200),
                     native_frame_stroke: egui::Stroke::new(1.0, color_table.gray(S250)),
-                    json,
                     color_table,
                 }
             }
             egui::Theme::Light => {
-                let json: serde_json::Value =
-                    serde_json::from_str(include_str!("../data/design_tokens_light.json"))
-                        .expect("Failed to parse data/design_tokens_light.json");
-
-                let color_table = load_color_table(&json);
-
                 Self {
                     theme,
+                    typography,
                     top_bar_color: color_table.gray(S800),
                     bottom_bar_color: color_table.gray(S950),
                     bottom_bar_stroke: egui::Stroke::new(1.0, color_table.gray(S800)),
@@ -83,7 +89,6 @@ impl DesignTokens {
                     shadow_gradient_dark_start: Color32::from_black_alpha(10), //TODO(ab): use ColorToken!
                     tab_bar_color: color_table.gray(S900),
                     native_frame_stroke: egui::Stroke::new(1.0, color_table.gray(S250)),
-                    json,
                     color_table,
                 }
             }
@@ -110,11 +115,8 @@ impl DesignTokens {
     }
 
     pub(crate) fn set_fonts(&self, ctx: &egui::Context) {
-        let typography_default: Typography =
-            get_alias(&self.json, "{Alias.Typography.Default.value}");
-
-        assert_eq!(typography_default.fontFamily, "Inter");
-        assert_eq!(typography_default.fontWeight, "Medium");
+        assert_eq!(self.typography.fontFamily, "Inter");
+        assert_eq!(self.typography.fontWeight, "Medium");
         let mut font_definitions = egui::FontDefinitions::default();
         font_definitions.font_data.insert(
             "Inter-Medium".into(),
@@ -131,10 +133,7 @@ impl DesignTokens {
     }
 
     fn set_text_styles(&self, egui_style: &mut egui::Style) {
-        let typography_default: Typography =
-            get_alias(&self.json, "{Alias.Typography.Default.value}");
-
-        let font_size = parse_px(&typography_default.fontSize);
+        let font_size = parse_px(&self.typography.fontSize);
 
         for text_style in [
             egui::TextStyle::Body,
@@ -609,7 +608,7 @@ fn follow_path<'json>(
 // ----------------------------------------------------------------------------
 
 #[allow(non_snake_case)]
-#[derive(serde::Deserialize)]
+#[derive(Debug, serde::Deserialize)]
 struct Typography {
     fontSize: String,
     fontWeight: String,

crates/viewer/re_viewer/src/app_state.rs

@@ -467,7 +467,7 @@ impl AppState {
                         // Give the blueprint time panel a distinct color from the normal time panel:
                         ui.design_tokens()
                             .bottom_panel_frame()
-                            .fill(egui::hex_color!("#141326")),
+                            .fill(ui.design_tokens().blueprint_time_panel_bg_fill()),
                     );
 
                     {