Aethergrid

selfdrive/ui/layouts/settings/starpilot/aethergrid.py

@@ -0,0 +1,623 @@
+from __future__ import annotations
+import pyray as rl
+from collections.abc import Callable
+from openpilot.system.ui.lib.application import gui_app, FontWeight, MousePos
+from openpilot.system.ui.lib.multilang import tr
+from openpilot.system.ui.lib.text_measure import measure_text_cached
+from openpilot.system.ui.widgets import Widget, DialogResult
+
+
+GEOMETRY_OFFSET = 8
+PRESS_DURATION_S = 0.050
+RELEASE_DURATION_S = 0.150
+CANCEL_DURATION_S = 0.050
+TILE_RADIUS = 0.15
+TILE_SEGMENTS = 10
+TILE_PADDING = 20
+SLIDER_BUTTON_SIZE = 60
+
+
+def hex_to_color(hex_str: str) -> rl.Color:
+  hex_str = hex_str.lstrip('#')
+  return rl.Color(int(hex_str[0:2], 16), int(hex_str[2:4], 16), int(hex_str[4:6], 16), 255)
+
+
+def rgb_to_hsl(r: int, g: int, b: int) -> tuple[float, float, float]:
+  rf, gf, bf = r / 255.0, g / 255.0, b / 255.0
+  mx, mn = max(rf, gf, bf), min(rf, gf, bf)
+  l = (mx + mn) / 2.0
+  if mx == mn:
+    return 0.0, 0.0, l
+  d = mx - mn
+  s = d / (2.0 - mx - mn) if l > 0.5 else d / (mx + mn)
+  if mx == rf:
+    h = (gf - bf) / d + (6.0 if gf < bf else 0.0)
+  elif mx == gf:
+    h = (bf - rf) / d + 2.0
+  else:
+    h = (rf - gf) / d + 4.0
+  return h * 60.0, s, l
+
+
+def hsl_to_rgb(h: float, s: float, l: float) -> tuple[int, int, int]:
+  if s == 0.0:
+    v = int(l * 255)
+    return v, v, v
+
+  def hue_to_rgb(p: float, q: float, t: float) -> float:
+    if t < 0: t += 1
+    if t > 1: t -= 1
+    if t < 1 / 6: return p + (q - p) * 6 * t
+    if t < 1 / 2: return q
+    if t < 2 / 3: return p + (q - p) * (2 / 3 - t) * 6
+    return p
+
+  q = l * (1 + s) if l < 0.5 else l + s - l * s
+  p = 2 * l - q
+  h = (h % 360) / 360.0
+  r = max(0, min(255, int(round(hue_to_rgb(p, q, h + 1 / 3) * 255))))
+  g = max(0, min(255, int(round(hue_to_rgb(p, q, h) * 255))))
+  b = max(0, min(255, int(round(hue_to_rgb(p, q, h - 1 / 3) * 255))))
+  return r, g, b
+
+
+def derive_substrate(base: rl.Color) -> rl.Color:
+  h, s, l = rgb_to_hsl(base.r, base.g, base.b)
+  l = max(0.0, l - 0.40)
+  s = min(1.0, s + 0.20)
+  r, g, b = hsl_to_rgb(h, s, l)
+  return rl.Color(r, g, b, 255)
+
+
+def _draw_inner_highlight(rect: rl.Rectangle, radius: float, segments: int):
+  h = rl.Color(255, 255, 255, 89)
+  r2 = max(1.0, rect.height * radius / 2)
+  rl.draw_rectangle_rec(rl.Rectangle(rect.x + r2, rect.y, rect.width - 2 * r2, 2), h)
+  rl.draw_rectangle_rec(rl.Rectangle(rect.x, rect.y + r2, 2, rect.height - 2 * r2), h)
+
+
+def _draw_inner_shadow(rect: rl.Rectangle, radius: float, segments: int):
+  s = rl.Color(0, 0, 0, 64)
+  r2 = max(1.0, rect.height * radius / 2)
+  rl.draw_rectangle_rec(rl.Rectangle(rect.x + r2, rect.y + rect.height - 2, rect.width - 2 * r2, 2), s)
+  rl.draw_rectangle_rec(rl.Rectangle(rect.x + rect.width - 2, rect.y + r2, 2, rect.height - 2 * r2), s)
+
+
+class AetherTile(Widget):
+  def __init__(self, bg_color: rl.Color | str = rl.Color(54, 77, 239, 255), on_click: Callable | None = None):
+    super().__init__()
+    self.bg_color = hex_to_color(bg_color) if isinstance(bg_color, str) else bg_color
+    self.on_click = on_click
+    self._substrate_color = derive_substrate(self.bg_color)
+    self._plate_offset: float = 0.0
+    self._plate_target: float = 0.0
+    self._plate_speed: float = 0.0
+    self._prev_pressed: bool = False
+
+  @property
+  def _hit_rect(self) -> rl.Rectangle:
+    return rl.Rectangle(
+      self._rect.x - GEOMETRY_OFFSET, self._rect.y - GEOMETRY_OFFSET,
+      self._rect.width + 2 * GEOMETRY_OFFSET, self._rect.height + 2 * GEOMETRY_OFFSET,
+    )
+
+  def _handle_mouse_press(self, mouse_pos: MousePos):
+    if rl.check_collision_point_rec(mouse_pos, self._hit_rect):
+      self._is_pressed = True
+      self._plate_target = 1.0
+      self._plate_speed = 1.0 / PRESS_DURATION_S
+
+  def _handle_mouse_release(self, mouse_pos: MousePos):
+    if self._is_pressed:
+      if rl.check_collision_point_rec(mouse_pos, self._hit_rect):
+        self._plate_target = 0.0
+        self._plate_speed = 1.0 / RELEASE_DURATION_S
+        if self.on_click:
+          self.on_click()
+      else:
+        self._plate_target = 0.0
+        self._plate_speed = 1.0 / CANCEL_DURATION_S
+      self._is_pressed = False
+
+  def _animate_plate(self, dt: float):
+    if abs(self._plate_offset - self._plate_target) < 0.01:
+      self._plate_offset = self._plate_target
+      return
+    direction = 1.0 if self._plate_target > self._plate_offset else -1.0
+    self._plate_offset += direction * self._plate_speed * dt
+    self._plate_offset = max(0.0, min(1.0, self._plate_offset))
+
+  def _render_layers(self, rect: rl.Rectangle, radius: float = TILE_RADIUS, segments: int = TILE_SEGMENTS):
+    self._animate_plate(rl.get_frame_time())
+    self.set_rect(rect)
+
+    extrusion_alpha = int(255 * (1.0 - 0.8 * self._plate_offset))
+    substrate = rl.Color(self._substrate_color.r, self._substrate_color.g, self._substrate_color.b, extrusion_alpha)
+    rl.draw_rectangle_rounded(rl.Rectangle(rect.x + GEOMETRY_OFFSET, rect.y + GEOMETRY_OFFSET, rect.width, rect.height), radius, segments, substrate)
+
+    face_x = rect.x + GEOMETRY_OFFSET * self._plate_offset
+    face_y = rect.y + GEOMETRY_OFFSET * self._plate_offset
+    face_rect = rl.Rectangle(face_x, face_y, rect.width, rect.height)
+    rl.draw_rectangle_rounded(face_rect, radius, segments, self.bg_color)
+    _draw_inner_highlight(face_rect, radius, segments)
+    _draw_inner_shadow(face_rect, radius, segments)
+
+    pill_w = rect.width * 0.8
+    pill_h = rect.height * 0.2
+    pill_r = pill_h / 2
+    pill_x = face_x + (rect.width - pill_w) / 2
+    pill_y = face_y + rect.height * 0.08
+    rl.draw_rectangle_rounded(rl.Rectangle(pill_x, pill_y, pill_w, pill_h), 0.5, max(4, int(pill_r)), rl.Color(255, 255, 255, 31))
+
+    return face_rect
+
+  def _draw_text_fit(self, font: rl.Font, text: str, pos: rl.Vector2, max_width: float, font_size: float, align_right: bool = False):
+    size = measure_text_cached(font, text, int(font_size))
+    actual_font_size = font_size
+    if size.x > max_width:
+      actual_font_size = font_size * (max_width / size.x)
+      render_width = max_width
+    else:
+      render_width = size.x
+    nudge_y = (font_size - actual_font_size) / 2
+    draw_x = pos.x
+    if align_right:
+      draw_x = pos.x + max_width - render_width
+    shadow_pos = rl.Vector2(draw_x, pos.y + nudge_y + 1)
+    rl.draw_text_ex(font, text, shadow_pos, actual_font_size, 0, rl.Color(0, 0, 0, 102))
+    rl.draw_text_ex(font, text, rl.Vector2(draw_x, pos.y + nudge_y), actual_font_size, 0, rl.WHITE)
+
+  def _draw_watermark(self, rect: rl.Rectangle, icon: rl.Texture2D | None):
+    if not icon:
+      return
+    rl.begin_scissor_mode(int(rect.x), int(rect.y), int(rect.width), int(rect.height))
+    w_scale = 1.6
+    iw, ih = icon.width * w_scale, icon.height * w_scale
+    ix = rect.x + rect.width - iw - 15
+    iy = rect.y + rect.height - ih - 15
+    rl.draw_texture_pro(icon, rl.Rectangle(0, 0, icon.width, icon.height), rl.Rectangle(ix, iy, iw, ih), rl.Vector2(0, 0), 0, rl.Color(255, 255, 255, 80))
+    rl.end_scissor_mode()
+
+  def _render(self, rect: rl.Rectangle):
+    pass
+
+
+class HubTile(AetherTile):
+  def __init__(self, title: str, desc: str, icon_path: str, on_click: Callable | None = None, starpilot_icon: bool = False, bg_color: rl.Color | str | None = None):
+    if bg_color:
+      super().__init__(bg_color=bg_color, on_click=on_click)
+    else:
+      super().__init__(on_click=on_click)
+    self.title = title
+    self.desc = desc
+    if icon_path:
+      if starpilot_icon: self._icon = gui_app.starpilot_texture(icon_path, 100, 100)
+      else: self._icon = gui_app.texture(icon_path, 100, 100)
+    else: self._icon = None
+    self._font_title = gui_app.font(FontWeight.BOLD)
+    self._font_desc = gui_app.font(FontWeight.NORMAL)
+
+  def _render(self, rect: rl.Rectangle):
+    face = self._render_layers(rect)
+    self._draw_watermark(rect, self._icon)
+    padding = 30
+    if self._icon:
+      siw, sih = self._icon.width * 0.45, self._icon.height * 0.45
+      rl.draw_texture_pro(self._icon, rl.Rectangle(0, 0, self._icon.width, self._icon.height), rl.Rectangle(face.x + padding, face.y + padding, siw, sih), rl.Vector2(0, 0), 0, rl.WHITE)
+    title_x = face.x + padding + (65 if self._icon else 0)
+    max_title_width = face.width - (title_x - face.x) - padding
+    self._draw_text_fit(self._font_title, self.title, rl.Vector2(title_x, face.y + padding + 3), max_title_width, 42)
+
+
+class ToggleTile(AetherTile):
+  def __init__(self, title: str, get_state: Callable[[], bool], set_state: Callable[[bool], None], icon_path: str | None = None,
+               bg_color: rl.Color | str | None = None, desc: str = ""):
+    if bg_color: super().__init__(bg_color=bg_color)
+    else: super().__init__(bg_color=rl.Color(0, 163, 0, 255))
+    self.title = title
+    self.desc = desc
+    self.get_state = get_state
+    self.set_state = set_state
+    self._icon = gui_app.starpilot_texture(icon_path, 80, 80) if icon_path else None
+    self._font = gui_app.font(FontWeight.BOLD)
+    self._font_desc = gui_app.font(FontWeight.NORMAL)
+    self._active_color = self.bg_color
+    self._inactive_color = rl.Color(120, 120, 120, 255)
+
+  def _handle_mouse_release(self, mouse_pos: MousePos):
+    if self._is_pressed:
+      if rl.check_collision_point_rec(mouse_pos, self._hit_rect):
+        self.set_state(not self.get_state())
+        self._plate_target = 0.0
+        self._plate_speed = 1.0 / RELEASE_DURATION_S
+      else:
+        self._plate_target = 0.0
+        self._plate_speed = 1.0 / CANCEL_DURATION_S
+      self._is_pressed = False
+
+  def _render(self, rect: rl.Rectangle):
+    active = self.get_state()
+    self.bg_color = self._active_color if active else self._inactive_color
+    self._substrate_color = derive_substrate(self.bg_color)
+    face = self._render_layers(rect)
+    self._draw_watermark(rect, self._icon)
+    padding = 25
+    if self._icon:
+      siw, sih = self._icon.width * 0.45, self._icon.height * 0.45
+      rl.draw_texture_pro(self._icon, rl.Rectangle(0, 0, self._icon.width, self._icon.height), rl.Rectangle(face.x + padding, face.y + padding, siw, sih), rl.Vector2(0, 0), 0, rl.WHITE)
+    title_x = face.x + padding + (55 if self._icon else 0)
+    max_title_width = face.width - (title_x - face.x) - padding
+    self._draw_text_fit(self._font, self.title, rl.Vector2(title_x, face.y + padding + 2), max_title_width, 35)
+    if self.desc:
+      self._draw_text_fit(self._font_desc, self.desc, rl.Vector2(title_x, face.y + padding + 40), max_title_width, 22)
+    state_text = tr("ON") if active else tr("OFF")
+    ts = measure_text_cached(self._font, state_text, 30)
+    self._draw_text_fit(self._font, state_text, rl.Vector2(face.x + face.width - ts.x - padding, face.y + face.height - 50), ts.x, 30)
+
+
+class ValueTile(AetherTile):
+  def __init__(self, title: str, get_value: Callable[[], str], on_click: Callable, icon_path: str | None = None,
+               bg_color: rl.Color | str | None = None, is_enabled: Callable[[], bool] | None = None, desc: str = ""):
+    super().__init__(bg_color=bg_color, on_click=on_click)
+    self.title = title
+    self.desc = desc
+    self.get_value = get_value
+    self._enabled = is_enabled or (lambda: True)
+    self._icon = gui_app.starpilot_texture(icon_path, 80, 80) if icon_path else None
+    self._font = gui_app.font(FontWeight.BOLD)
+    self._font_desc = gui_app.font(FontWeight.NORMAL)
+    self._active_color = self.bg_color
+    self._disabled_color = rl.Color(120, 120, 120, 255)
+
+  def _render(self, rect: rl.Rectangle):
+    enabled = self.enabled
+    self.bg_color = self._active_color if enabled else self._disabled_color
+    self._substrate_color = derive_substrate(self.bg_color)
+    if not enabled:
+      self._plate_offset = 0.0
+      self._plate_target = 0.0
+    face = self._render_layers(rect)
+    self._draw_watermark(rect, self._icon)
+    padding = 25
+    if self._icon:
+      siw, sih = self._icon.width * 0.45, self._icon.height * 0.45
+      rl.draw_texture_pro(self._icon, rl.Rectangle(0, 0, self._icon.width, self._icon.height), rl.Rectangle(face.x + padding, face.y + padding, siw, sih), rl.Vector2(0, 0), 0, rl.WHITE)
+    title_x = face.x + padding + (55 if self._icon else 0)
+    max_title_width = face.width - (title_x - face.x) - padding
+    self._draw_text_fit(self._font, self.title, rl.Vector2(title_x, face.y + padding + 2), max_title_width, 35)
+    if self.desc:
+      self._draw_text_fit(self._font_desc, self.desc, rl.Vector2(title_x, face.y + padding + 40), max_title_width, 22)
+    val_text = self.get_value()
+    max_val_width = rect.width - 2 * padding
+    self._draw_text_fit(self._font, val_text, rl.Vector2(face.x + padding, face.y + face.height - 55), max_val_width, 35, align_right=True)
+
+
+class AetherSlider(Widget):
+  def __init__(self, min_val: float, max_val: float, step: float, current_val: float, on_change: Callable[[float], None], unit: str = "", labels: dict[float, str] | None = None, color: rl.Color = rl.Color(54, 77, 239, 255)):
+    super().__init__()
+    self.min_val, self.max_val, self.step, self.current_val = min_val, max_val, step, current_val
+    self.on_change, self.unit, self.labels, self.color = on_change, unit, labels or {}, color
+    self._is_dragging = False
+    self._font = gui_app.font(FontWeight.BOLD)
+    self._thumb_offset: float = 0.0
+    self._minus_offset: float = 0.0
+    self._plus_offset: float = 0.0
+    self._minus_pressed = False
+    self._plus_pressed = False
+
+  def _clamp_and_snap(self, val: float) -> float:
+    snapped = round((val - self.min_val) / self.step) * self.step + self.min_val
+    return max(self.min_val, min(self.max_val, snapped))
+
+  def _get_thumb_x(self, rect: rl.Rectangle) -> float:
+    track_x = rect.x + SLIDER_BUTTON_SIZE
+    track_w = rect.width - 2 * SLIDER_BUTTON_SIZE
+    frac = (self.current_val - self.min_val) / (self.max_val - self.min_val)
+    return track_x + frac * track_w
+
+  def _animate_button(self, offset: float, target: float, speed: float, dt: float) -> float:
+    if abs(offset - target) < 0.01:
+      return target
+    direction = 1.0 if target > offset else -1.0
+    new_offset = offset + direction * speed * dt
+    return max(0.0, min(1.0, new_offset))
+
+  def _draw_slider_button(self, rect: rl.Rectangle, label: str):
+    shadow_alpha = int(255 * (1.0 - 0.8 * self._minus_offset if label == "-" else 1.0 - 0.8 * self._plus_offset))
+    offset = self._minus_offset if label == "-" else self._plus_offset
+    substrate = rl.Color(100, 100, 100, shadow_alpha)
+    rl.draw_rectangle_rounded(rl.Rectangle(rect.x + GEOMETRY_OFFSET, rect.y + GEOMETRY_OFFSET, rect.width, rect.height), 0.2, 10, substrate)
+    face_x = rect.x + GEOMETRY_OFFSET * offset
+    face_y = rect.y + GEOMETRY_OFFSET * offset
+    face_rect = rl.Rectangle(face_x, face_y, rect.width, rect.height)
+    btn_color = rl.Color(80, 80, 80, 255)
+    rl.draw_rectangle_rounded(face_rect, 0.2, 10, btn_color)
+    _draw_inner_highlight(face_rect, 0.2, 10)
+    _draw_inner_shadow(face_rect, 0.2, 10)
+    ts = measure_text_cached(self._font, label, 35)
+    label_pos = rl.Vector2(face_x + (rect.width - ts.x) / 2, face_y + (rect.height - ts.y) / 2)
+    rl.draw_text_ex(self._font, label, rl.Vector2(label_pos.x, label_pos.y + 1), 35, 0, rl.Color(0, 0, 0, 102))
+    rl.draw_text_ex(self._font, label, label_pos, 35, 0, rl.WHITE)
+
+  def _render(self, rect: rl.Rectangle):
+    self.set_rect(rect)
+    dt = rl.get_frame_time()
+    if self._is_dragging:
+      self._update_val_from_mouse(rl.get_mouse_position())
+    self._minus_offset = self._animate_button(self._minus_offset, 1.0 if self._minus_pressed else 0.0, 1.0 / PRESS_DURATION_S, dt)
+    self._plus_offset = self._animate_button(self._plus_offset, 1.0 if self._plus_pressed else 0.0, 1.0 / PRESS_DURATION_S, dt)
+    minus_rect = rl.Rectangle(rect.x, rect.y, SLIDER_BUTTON_SIZE, rect.height)
+    plus_rect = rl.Rectangle(rect.x + rect.width - SLIDER_BUTTON_SIZE, rect.y, SLIDER_BUTTON_SIZE, rect.height)
+    self._draw_slider_button(minus_rect, "-")
+    self._draw_slider_button(plus_rect, "+")
+    track_x = rect.x + SLIDER_BUTTON_SIZE
+    track_w = rect.width - 2 * SLIDER_BUTTON_SIZE
+    track_h = 20
+    track_rect = rl.Rectangle(track_x, rect.y + (rect.height - track_h) / 2, track_w, track_h)
+    rl.draw_rectangle_rounded(track_rect, 1.0, 10, rl.Color(50, 50, 50, 255))
+    frac = (self.current_val - self.min_val) / (self.max_val - self.min_val)
+    fill_w = frac * track_w
+    if fill_w > 0:
+      rl.draw_rectangle_rounded(rl.Rectangle(track_x, track_rect.y, fill_w, track_h), 1.0, 10, self.color)
+    n_steps = int(round((self.max_val - self.min_val) / self.step))
+    for i in range(n_steps + 1):
+      tick_x = track_x + (i / n_steps) * track_w
+      tick_h = int(track_h * 0.6)
+      tick_y = track_rect.y + (track_h - tick_h) / 2
+      rl.draw_rectangle_rec(rl.Rectangle(tick_x - 1, tick_y, 2, tick_h), rl.Color(255, 255, 255, 60))
+    thumb_w, thumb_h = 24, 44
+    thumb_x = self._get_thumb_x(rect) - thumb_w / 2
+    thumb_y = rect.y + (rect.height - thumb_h) / 2
+    thumb_offset = GEOMETRY_OFFSET * self._thumb_offset
+    t_substrate = rl.Color(180, 180, 180, int(255 * (1.0 - 0.8 * self._thumb_offset)))
+    rl.draw_rectangle_rounded(rl.Rectangle(thumb_x + GEOMETRY_OFFSET, thumb_y + GEOMETRY_OFFSET, thumb_w, thumb_h), 0.2, 10, t_substrate)
+    t_face_rect = rl.Rectangle(thumb_x + thumb_offset, thumb_y + thumb_offset, thumb_w, thumb_h)
+    rl.draw_rectangle_rounded(t_face_rect, 0.2, 10, rl.WHITE)
+    _draw_inner_highlight(t_face_rect, 0.2, 10)
+    _draw_inner_shadow(t_face_rect, 0.2, 10)
+    val_str = self.labels.get(self.current_val, f"{self.current_val:.2f}".rstrip('0').rstrip('.') + self.unit)
+    ts = measure_text_cached(self._font, val_str, 35)
+    val_pos = rl.Vector2(thumb_x + (thumb_w - ts.x) / 2, thumb_y - 45)
+    rl.draw_text_ex(self._font, val_str, rl.Vector2(val_pos.x, val_pos.y + 1), 35, 0, rl.Color(0, 0, 0, 102))
+    rl.draw_text_ex(self._font, val_str, val_pos, 35, 0, rl.WHITE)
+
+  def _handle_mouse_press(self, mouse_pos: MousePos):
+    if not rl.check_collision_point_rec(mouse_pos, self._rect):
+      return
+    minus_rect = rl.Rectangle(self._rect.x, self._rect.y, SLIDER_BUTTON_SIZE, self._rect.height)
+    plus_rect = rl.Rectangle(self._rect.x + self._rect.width - SLIDER_BUTTON_SIZE, self._rect.y, SLIDER_BUTTON_SIZE, self._rect.height)
+    if rl.check_collision_point_rec(mouse_pos, minus_rect):
+      self._minus_pressed = True
+      return
+    if rl.check_collision_point_rec(mouse_pos, plus_rect):
+      self._plus_pressed = True
+      return
+    thumb_w, thumb_h = 24, 44
+    thumb_x = self._get_thumb_x(self._rect) - thumb_w / 2
+    thumb_y = self._rect.y + (self._rect.height - thumb_h) / 2
+    thumb_rect = rl.Rectangle(thumb_x - 8, thumb_y - 8, thumb_w + 16, thumb_h + 16)
+    if rl.check_collision_point_rec(mouse_pos, thumb_rect):
+      self._is_dragging = True
+      self._thumb_offset = 1.0
+    else:
+      track_x = self._rect.x + SLIDER_BUTTON_SIZE
+      track_w = self._rect.width - 2 * SLIDER_BUTTON_SIZE
+      if track_w > 0:
+        rel_x = max(0.0, min(1.0, (mouse_pos.x - track_x) / track_w))
+        val = self.min_val + rel_x * (self.max_val - self.min_val)
+        snapped = self._clamp_and_snap(val)
+        if snapped != self.current_val:
+          self.current_val = snapped
+          self.on_change(self.current_val)
+
+  def _handle_mouse_release(self, mouse_pos: MousePos):
+    if self._minus_pressed:
+      self._minus_pressed = False
+      if rl.check_collision_point_rec(mouse_pos, rl.Rectangle(self._rect.x, self._rect.y, SLIDER_BUTTON_SIZE, self._rect.height)):
+        new_val = self._clamp_and_snap(self.current_val - self.step)
+        if new_val != self.current_val:
+          self.current_val = new_val
+          self.on_change(self.current_val)
+    if self._plus_pressed:
+      self._plus_pressed = False
+      if rl.check_collision_point_rec(mouse_pos, rl.Rectangle(self._rect.x + self._rect.width - SLIDER_BUTTON_SIZE, self._rect.y, SLIDER_BUTTON_SIZE, self._rect.height)):
+        new_val = self._clamp_and_snap(self.current_val + self.step)
+        if new_val != self.current_val:
+          self.current_val = new_val
+          self.on_change(self.current_val)
+    if self._is_dragging:
+      self._is_dragging = False
+      self._thumb_offset = 0.0
+
+  def _update_val_from_mouse(self, mouse_pos: MousePos):
+    track_x = self._rect.x + SLIDER_BUTTON_SIZE
+    track_w = self._rect.width - 2 * SLIDER_BUTTON_SIZE
+    if track_w <= 0:
+      return
+    rel_x = max(0.0, min(1.0, (mouse_pos.x - track_x) / track_w))
+    val = self.min_val + rel_x * (self.max_val - self.min_val)
+    snapped = self._clamp_and_snap(val)
+    if snapped != self.current_val:
+      self.current_val = snapped
+      self.on_change(self.current_val)
+
+
+class AetherSliderDialog(Widget):
+  def __init__(self, title: str, min_val: float, max_val: float, step: float, current_val: float, on_close: Callable, unit: str = "", labels: dict[float, str] | None = None, color: rl.Color | str = "#F57371"):
+    super().__init__()
+    self.title, self._user_callback = title, on_close
+    self._color = hex_to_color(color) if isinstance(color, str) else color
+    self._font_title, self._font_btn = gui_app.font(FontWeight.BOLD), gui_app.font(FontWeight.BOLD)
+    self._slider = AetherSlider(min_val, max_val, step, current_val, self._on_slider_change, unit, labels, self._color)
+    self._current_val, self._is_pressed_ok, self._is_pressed_cancel = current_val, False, False
+    self._ok_offset: float = 0.0
+    self._cancel_offset: float = 0.0
+
+  def _on_slider_change(self, val):
+    self._current_val = val
+
+  def _handle_mouse_press(self, mouse_pos: MousePos):
+    self._slider._handle_mouse_press(mouse_pos)
+    if rl.check_collision_point_rec(mouse_pos, self._ok_rect):
+      self._is_pressed_ok = True
+      self._ok_offset = 1.0
+    if rl.check_collision_point_rec(mouse_pos, self._cancel_rect):
+      self._is_pressed_cancel = True
+      self._cancel_offset = 1.0
+
+  def _handle_mouse_release(self, mouse_pos: MousePos):
+    self._slider._handle_mouse_release(mouse_pos)
+    if self._is_pressed_ok:
+      self._ok_offset = 0.0
+      if rl.check_collision_point_rec(mouse_pos, self._ok_rect):
+        self._user_callback(DialogResult.CONFIRM, self._current_val)
+        gui_app.set_modal_overlay(None)
+      self._is_pressed_ok = False
+    if self._is_pressed_cancel:
+      self._cancel_offset = 0.0
+      if rl.check_collision_point_rec(mouse_pos, self._cancel_rect):
+        self._user_callback(DialogResult.CANCEL, self._current_val)
+        gui_app.set_modal_overlay(None)
+      self._is_pressed_cancel = False
+
+  def _render(self, rect: rl.Rectangle):
+    rl.draw_rectangle(0, 0, gui_app.width, gui_app.height, rl.Color(0, 0, 0, 160))
+    dialog_w, dialog_h = 1000, 500
+    dx, dy = rect.x + (rect.width - dialog_w) / 2, rect.y + (rect.height - dialog_h) / 2
+    self._ok_rect = rl.Rectangle(dx + dialog_w - 450, dy + dialog_h - 120, 350, 80)
+    self._cancel_rect = rl.Rectangle(dx + 100, dy + dialog_h - 120, 350, 80)
+    d_rect = rl.Rectangle(dx, dy, dialog_w, dialog_h)
+    rl.draw_rectangle_rounded(d_rect, 0.05, 10, rl.Color(30, 30, 30, 255))
+    rl.draw_rectangle_rounded_lines_ex(d_rect, 0.05, 10, 2, self._color)
+    ts = measure_text_cached(self._font_title, self.title, 50)
+    rl.draw_text_ex(self._font_title, self.title, rl.Vector2(dx + (dialog_w - ts.x) / 2, dy + 40), 50, 0, rl.WHITE)
+    slider_rect = rl.Rectangle(dx + 100, dy + 200, dialog_w - 200, 100)
+    self._slider.render(slider_rect)
+    cancel_substrate = derive_substrate(rl.Color(80, 80, 80, 255))
+    c_shadow_alpha = int(255 * (1.0 - 0.8 * self._cancel_offset))
+    rl.draw_rectangle_rounded(rl.Rectangle(self._cancel_rect.x + GEOMETRY_OFFSET, self._cancel_rect.y + GEOMETRY_OFFSET, 350, 80), 0.2, 10, rl.Color(cancel_substrate.r, cancel_substrate.g, cancel_substrate.b, c_shadow_alpha))
+    c_face_x = self._cancel_rect.x + GEOMETRY_OFFSET * self._cancel_offset
+    c_face_y = self._cancel_rect.y + GEOMETRY_OFFSET * self._cancel_offset
+    c_face = rl.Rectangle(c_face_x, c_face_y, 350, 80)
+    rl.draw_rectangle_rounded(c_face, 0.2, 10, rl.Color(80, 80, 80, 255))
+    _draw_inner_highlight(c_face, 0.2, 10)
+    _draw_inner_shadow(c_face, 0.2, 10)
+    cts = measure_text_cached(self._font_btn, tr("CANCEL"), 35)
+    cancel_text_pos = rl.Vector2(c_face_x + (350 - cts.x) / 2, c_face_y + (80 - cts.y) / 2)
+    rl.draw_text_ex(self._font_btn, tr("CANCEL"), rl.Vector2(cancel_text_pos.x, cancel_text_pos.y + 1), 35, 0, rl.Color(0, 0, 0, 102))
+    rl.draw_text_ex(self._font_btn, tr("CANCEL"), cancel_text_pos, 35, 0, rl.WHITE)
+    ok_substrate = derive_substrate(self._color)
+    o_shadow_alpha = int(255 * (1.0 - 0.8 * self._ok_offset))
+    rl.draw_rectangle_rounded(rl.Rectangle(self._ok_rect.x + GEOMETRY_OFFSET, self._ok_rect.y + GEOMETRY_OFFSET, 350, 80), 0.2, 10, rl.Color(ok_substrate.r, ok_substrate.g, ok_substrate.b, o_shadow_alpha))
+    o_face_x = self._ok_rect.x + GEOMETRY_OFFSET * self._ok_offset
+    o_face_y = self._ok_rect.y + GEOMETRY_OFFSET * self._ok_offset
+    o_face = rl.Rectangle(o_face_x, o_face_y, 350, 80)
+    rl.draw_rectangle_rounded(o_face, 0.2, 10, self._color)
+    _draw_inner_highlight(o_face, 0.2, 10)
+    _draw_inner_shadow(o_face, 0.2, 10)
+    ots = measure_text_cached(self._font_btn, tr("OK"), 35)
+    ok_text_pos = rl.Vector2(o_face_x + (350 - ots.x) / 2, o_face_y + (80 - ots.y) / 2)
+    rl.draw_text_ex(self._font_btn, tr("OK"), rl.Vector2(ok_text_pos.x, ok_text_pos.y + 1), 35, 0, rl.Color(0, 0, 0, 102))
+    rl.draw_text_ex(self._font_btn, tr("OK"), ok_text_pos, 35, 0, rl.WHITE)
+    return DialogResult.NO_ACTION
+
+
+class RadioTileGroup(Widget):
+  def __init__(self, title: str, options: list[str], current_index: int, on_change: Callable):
+    super().__init__()
+    self.title, self.options, self.current_index, self.on_change = title, options, current_index, on_change
+    self._font, self._font_title = gui_app.font(FontWeight.BOLD), gui_app.font(FontWeight.NORMAL)
+    self._active_color, self._inactive_color = rl.Color(54, 77, 239, 255), rl.Color(80, 80, 80, 255)
+    self._pressed_index = -1
+    self._option_rects: list[rl.Rectangle] = []
+    self._option_offsets: list[float] = []
+
+  def set_index(self, index: int): self.current_index = index
+
+  def _handle_mouse_press(self, mouse_pos: MousePos):
+    for i, r in enumerate(self._option_rects):
+      hit = rl.Rectangle(r.x - GEOMETRY_OFFSET, r.y - GEOMETRY_OFFSET, r.width + 2 * GEOMETRY_OFFSET, r.height + 2 * GEOMETRY_OFFSET)
+      if rl.check_collision_point_rec(mouse_pos, hit):
+        self._pressed_index = i
+        if i < len(self._option_offsets):
+          self._option_offsets[i] = 1.0
+        return
+
+  def _handle_mouse_release(self, mouse_pos: MousePos):
+    if self._pressed_index != -1:
+      r = self._option_rects[self._pressed_index]
+      hit = rl.Rectangle(r.x - GEOMETRY_OFFSET, r.y - GEOMETRY_OFFSET, r.width + 2 * GEOMETRY_OFFSET, r.height + 2 * GEOMETRY_OFFSET)
+      if rl.check_collision_point_rec(mouse_pos, hit):
+        if self.current_index != self._pressed_index:
+          self.current_index = self._pressed_index
+          self.on_change(self.current_index)
+      if self._pressed_index < len(self._option_offsets):
+        self._option_offsets[self._pressed_index] = 0.0
+      self._pressed_index = -1
+
+  def _render(self, rect: rl.Rectangle):
+    self.set_rect(rect)
+    self._option_rects.clear()
+    while len(self._option_offsets) < len(self.options):
+      self._option_offsets.append(0.0)
+    title_size = measure_text_cached(self._font_title, self.title, 40)
+    rl.draw_text_ex(self._font_title, self.title, rl.Vector2(rect.x, rect.y + (rect.height - title_size.y) / 2), 40, 0, rl.WHITE)
+    padding, option_w = 20, 200
+    start_x = rect.x + rect.width - (len(self.options) * (option_w + padding))
+    for i, opt in enumerate(self.options):
+      r = rl.Rectangle(start_x + i * (option_w + padding), rect.y, option_w, rect.height)
+      self._option_rects.append(r)
+      is_active = i == self.current_index
+      color = self._active_color if is_active else self._inactive_color
+      substrate = derive_substrate(color)
+      offset = self._option_offsets[i] if i < len(self._option_offsets) else 0.0
+      extrusion_alpha = int(255 * (1.0 - 0.8 * offset))
+      rl.draw_rectangle_rounded(rl.Rectangle(r.x + GEOMETRY_OFFSET, r.y + GEOMETRY_OFFSET, r.width, r.height), 0.15, 10, rl.Color(substrate.r, substrate.g, substrate.b, extrusion_alpha))
+      face_x = r.x + GEOMETRY_OFFSET * offset
+      face_y = r.y + GEOMETRY_OFFSET * offset
+      face_rect = rl.Rectangle(face_x, face_y, r.width, r.height)
+      rl.draw_rectangle_rounded(face_rect, 0.15, 10, color)
+      _draw_inner_highlight(face_rect, 0.15, 10)
+      _draw_inner_shadow(face_rect, 0.15, 10)
+      ts = measure_text_cached(self._font, opt, 35)
+      text_pos = rl.Vector2(face_x + (r.width - ts.x) / 2, face_y + (r.height - ts.y) / 2)
+      rl.draw_text_ex(self._font, opt, rl.Vector2(text_pos.x, text_pos.y + 1), 35, 0, rl.Color(0, 0, 0, 102))
+      rl.draw_text_ex(self._font, opt, text_pos, 35, 0, rl.WHITE)
+
+
+class TileGrid(Widget):
+  def __init__(self, columns: int | None = None, padding: int = 20):
+    super().__init__()
+    self._columns, self.padding, self.tiles = columns, padding, []
+
+  def add_tile(self, tile: Widget): self.tiles.append(tile)
+
+  def clear(self): self.tiles.clear()
+
+  def _render(self, rect: rl.Rectangle):
+    self.set_rect(rect)
+    if not self.tiles:
+      return
+    tiles_to_render = list(self.tiles)
+    count = len(tiles_to_render)
+    if self._columns is not None:
+      cols = self._columns
+    else:
+      if count == 1: cols = 1
+      elif count == 2: cols = 2
+      elif count == 3: cols = 3
+      elif count == 4: cols = 2
+      elif count <= 6: cols = 3
+      else: cols = 4
+    rows = (count + cols - 1) // cols
+    tile_h = (rect.height - (self.padding * (rows - 1))) / rows
+    tile_idx = 0
+    for r in range(rows):
+      remaining = count - tile_idx
+      if remaining <= 0: break
+      items_in_row = min(cols, remaining)
+      row_tile_w = (rect.width - (self.padding * (items_in_row - 1))) / items_in_row
+      for c in range(items_in_row):
+        tile = tiles_to_render[tile_idx]
+        tile.render(rl.Rectangle(rect.x + c * (row_tile_w + self.padding), rect.y + r * (tile_h + self.padding), row_tile_w, tile_h))
+        tile_idx += 1

selfdrive/ui/layouts/settings/starpilot/data.py

@@ -27,22 +27,22 @@ class StarPilotDataLayout(StarPilotPanel):
   def __init__(self):
     super().__init__()
     self.CATEGORIES = [
-      {"title": tr_noop("Manage Backups"), "panel": "backups", "icon": "toggle_icons/icon_system.png", "color": "#FA6800"},
-      {"title": tr_noop("Toggle Backups"), "panel": "toggle_backups", "icon": "toggle_icons/icon_system.png", "color": "#FA6800"},
-      {"title": tr_noop("Manage Storage"), "panel": "storage", "icon": "toggle_icons/icon_system.png", "color": "#FA6800"},
+      {"title": tr_noop("Manage Backups"), "panel": "backups", "icon": "toggle_icons/icon_system.png", "color": "#D43D8A"},
+      {"title": tr_noop("Toggle Backups"), "panel": "toggle_backups", "icon": "toggle_icons/icon_system.png", "color": "#D43D8A"},
+      {"title": tr_noop("Manage Storage"), "panel": "storage", "icon": "toggle_icons/icon_system.png", "color": "#D43D8A"},
       {
         "title": tr_noop("Delete Driving Data"),
         "type": "hub",
         "on_click": self._on_delete_driving_data,
         "icon": "toggle_icons/icon_system.png",
-        "color": "#FA6800",
+        "color": "#D43D8A",
       },
       {
         "title": tr_noop("Delete Error Logs"),
         "type": "hub",
         "on_click": self._on_delete_error_logs,
         "icon": "toggle_icons/icon_system.png",
-        "color": "#FA6800",
+        "color": "#D43D8A",
       },
     ]
 
@@ -92,9 +92,9 @@ class StarPilotBackupsLayout(StarPilotPanel):
   def __init__(self):
     super().__init__()
     self.CATEGORIES = [
-      {"title": tr_noop("Create Backup"), "type": "hub", "on_click": self._on_create_backup, "color": "#FA6800"},
-      {"title": tr_noop("Restore Backup"), "type": "hub", "on_click": self._on_restore_backup, "color": "#FA6800"},
-      {"title": tr_noop("Delete Backup"), "type": "hub", "on_click": self._on_delete_backup, "color": "#FA6800"},
+      {"title": tr_noop("Create Backup"), "type": "hub", "on_click": self._on_create_backup, "color": "#D43D8A"},
+      {"title": tr_noop("Restore Backup"), "type": "hub", "on_click": self._on_restore_backup, "color": "#D43D8A"},
+      {"title": tr_noop("Delete Backup"), "type": "hub", "on_click": self._on_delete_backup, "color": "#D43D8A"},
     ]
     self._rebuild_grid()
 
@@ -159,9 +159,9 @@ class StarPilotToggleBackupsLayout(StarPilotPanel):
   def __init__(self):
     super().__init__()
     self.CATEGORIES = [
-      {"title": tr_noop("Create Toggle Backup"), "type": "hub", "on_click": self._on_create, "color": "#FA6800"},
-      {"title": tr_noop("Restore Toggle Backup"), "type": "hub", "on_click": self._on_restore, "color": "#FA6800"},
-      {"title": tr_noop("Delete Toggle Backup"), "type": "hub", "on_click": self._on_delete, "color": "#FA6800"},
+      {"title": tr_noop("Create Toggle Backup"), "type": "hub", "on_click": self._on_create, "color": "#D43D8A"},
+      {"title": tr_noop("Restore Toggle Backup"), "type": "hub", "on_click": self._on_restore, "color": "#D43D8A"},
+      {"title": tr_noop("Delete Toggle Backup"), "type": "hub", "on_click": self._on_delete, "color": "#D43D8A"},
     ]
     self._rebuild_grid()
 
@@ -233,7 +233,7 @@ class StarPilotStorageLayout(StarPilotPanel):
   def __init__(self):
     super().__init__()
     self.CATEGORIES = [
-      {"title": tr_noop("Driving Data"), "type": "value", "get_value": self._get_storage, "on_click": lambda: None, "color": "#FA6800"},
+      {"title": tr_noop("Driving Data"), "type": "value", "get_value": self._get_storage, "on_click": lambda: None, "color": "#D43D8A"},
     ]
     self._rebuild_grid()
 

selfdrive/ui/layouts/settings/starpilot/device.py

@@ -9,35 +9,35 @@ from openpilot.system.ui.widgets import DialogResult
 from openpilot.system.ui.widgets.confirm_dialog import ConfirmDialog
 from openpilot.system.ui.widgets.selection_dialog import SelectionDialog
 from openpilot.selfdrive.ui.layouts.settings.starpilot.panel import StarPilotPanel
-from openpilot.selfdrive.ui.layouts.settings.starpilot.metro import SliderDialog
+from openpilot.selfdrive.ui.layouts.settings.starpilot.aethergrid import AetherSliderDialog
 
 
 class StarPilotDeviceLayout(StarPilotPanel):
   def __init__(self):
     super().__init__()
     self.CATEGORIES = [
-      {"title": tr_noop("Screen Settings"), "panel": "screen", "icon": "toggle_icons/icon_light.png", "color": "#FA6800"},
-      {"title": tr_noop("Device Settings"), "panel": "device_settings", "icon": "toggle_icons/icon_device.png", "color": "#FA6800"},
+      {"title": tr_noop("Screen Settings"), "panel": "screen", "icon": "toggle_icons/icon_light.png", "color": "#D43D8A"},
+      {"title": tr_noop("Device Settings"), "panel": "device_settings", "icon": "toggle_icons/icon_device.png", "color": "#D43D8A"},
       {
         "title": tr_noop("Device Shutdown"),
         "type": "value",
         "get_value": self._get_shutdown_timer,
         "on_click": self._show_shutdown_selector,
-        "color": "#FA6800",
+        "color": "#D43D8A",
       },
       {
         "title": tr_noop("Disable Logging"),
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("NoLogging"),
         "set_state": lambda s: self._params.put_bool("NoLogging", s),
-        "color": "#FA6800",
+        "color": "#D43D8A",
       },
       {
         "title": tr_noop("Disable Uploads"),
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("NoUploads"),
         "set_state": lambda s: self._params.put_bool("NoUploads", s),
-        "color": "#FA6800",
+        "color": "#D43D8A",
       },
       {
         "title": tr_noop("Disable Onroad Uploads"),
@@ -45,7 +45,7 @@ class StarPilotDeviceLayout(StarPilotPanel):
         "param": "DisableOnroadUploads",
         "get_state": lambda: self._params.get_bool("DisableOnroadUploads"),
         "set_state": lambda s: self._params.put_bool("DisableOnroadUploads", s),
-        "color": "#FA6800",
+        "color": "#D43D8A",
       },
       {
         "title": tr_noop("High-Quality Recording"),
@@ -53,7 +53,7 @@ class StarPilotDeviceLayout(StarPilotPanel):
         "param": "HigherBitrate",
         "get_state": lambda: self._params.get_bool("HigherBitrate"),
         "set_state": lambda s: self._on_higher_bitrate_toggle(s),
-        "color": "#FA6800",
+        "color": "#D43D8A",
       },
     ]
 
@@ -122,7 +122,7 @@ class StarPilotDeviceLayout(StarPilotPanel):
     for i in range(4, 34):
       labels[i] = f"{i - 3} " + (tr("hour") if i == 4 else tr("hours"))
 
-    gui_app.set_modal_overlay(SliderDialog(tr("Device Shutdown"), 0, 33, 1, self._params.get_int("DeviceShutdown"), on_close, labels=labels, color="#FA6800"))
+    gui_app.set_modal_overlay(AetherSliderDialog(tr("Device Shutdown"), 0, 33, 1, self._params.get_int("DeviceShutdown"), on_close, labels=labels, color="#D43D8A"))
 
 
 class StarPilotScreenLayout(StarPilotPanel):
@@ -134,35 +134,35 @@ class StarPilotScreenLayout(StarPilotPanel):
         "type": "value",
         "get_value": lambda: self._get_brightness("ScreenBrightness"),
         "on_click": lambda: self._show_brightness_selector("ScreenBrightness"),
-        "color": "#FA6800",
+        "color": "#D43D8A",
       },
       {
         "title": tr_noop("Brightness (Onroad)"),
         "type": "value",
         "get_value": lambda: self._get_brightness("ScreenBrightnessOnroad"),
         "on_click": lambda: self._show_brightness_selector("ScreenBrightnessOnroad"),
-        "color": "#FA6800",
+        "color": "#D43D8A",
       },
       {
         "title": tr_noop("Timeout (Offroad)"),
         "type": "value",
         "get_value": lambda: f"{self._params.get_int('ScreenTimeout')}s",
         "on_click": lambda: self._show_timeout_selector("ScreenTimeout"),
-        "color": "#FA6800",
+        "color": "#D43D8A",
       },
       {
         "title": tr_noop("Timeout (Onroad)"),
         "type": "value",
         "get_value": lambda: f"{self._params.get_int('ScreenTimeoutOnroad')}s",
         "on_click": lambda: self._show_timeout_selector("ScreenTimeoutOnroad"),
-        "color": "#FA6800",
+        "color": "#D43D8A",
       },
       {
         "title": tr_noop("Standby Mode"),
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("StandbyMode"),
         "set_state": lambda s: self._params.put_bool("StandbyMode", s),
-        "color": "#FA6800",
+        "color": "#D43D8A",
       },
     ]
     self._rebuild_grid()
@@ -184,7 +184,7 @@ class StarPilotScreenLayout(StarPilotPanel):
         self._rebuild_grid()
 
     gui_app.set_modal_overlay(
-      SliderDialog(tr(key), 0, 101, 1, self._params.get_int(key), on_close, unit="%", labels={0: tr("Off"), 101: tr("Auto")}, color="#FA6800")
+      AetherSliderDialog(tr(key), 0, 101, 1, self._params.get_int(key), on_close, unit="%", labels={0: tr("Off"), 101: tr("Auto")}, color="#D43D8A")
     )
 
   def _show_timeout_selector(self, key):
@@ -193,7 +193,7 @@ class StarPilotScreenLayout(StarPilotPanel):
         self._params.put_int(key, int(val))
         self._rebuild_grid()
 
-    gui_app.set_modal_overlay(SliderDialog(tr(key), 5, 60, 5, self._params.get_int(key), on_close, unit="s", color="#FA6800"))
+    gui_app.set_modal_overlay(AetherSliderDialog(tr(key), 5, 60, 5, self._params.get_int(key), on_close, unit="s", color="#D43D8A"))
 
 
 class StarPilotDeviceManagementLayout(StarPilotPanel):
@@ -205,21 +205,21 @@ class StarPilotDeviceManagementLayout(StarPilotPanel):
         "type": "value",
         "get_value": lambda: f"{self._params.get_float('LowVoltageShutdown'):.1f}V",
         "on_click": self._show_voltage_selector,
-        "color": "#FA6800",
+        "color": "#D43D8A",
       },
       {
         "title": tr_noop("Raise Temp Limits"),
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("IncreaseThermalLimits"),
         "set_state": lambda s: self._params.put_bool("IncreaseThermalLimits", s),
-        "color": "#FA6800",
+        "color": "#D43D8A",
       },
       {
         "title": tr_noop("Use Konik Server"),
         "type": "toggle",
         "get_state": lambda: self._get_konik_state(),
         "set_state": lambda s: self._on_konik_toggle(s),
-        "color": "#FA6800",
+        "color": "#D43D8A",
       },
     ]
     self._rebuild_grid()
@@ -252,5 +252,5 @@ class StarPilotDeviceManagementLayout(StarPilotPanel):
         self._rebuild_grid()
 
     gui_app.set_modal_overlay(
-      SliderDialog(tr("Low-Voltage Cutoff"), 11.8, 12.5, 0.1, self._params.get_float("LowVoltageShutdown"), on_close, unit="V", color="#FA6800")
+      AetherSliderDialog(tr("Low-Voltage Cutoff"), 11.8, 12.5, 0.1, self._params.get_float("LowVoltageShutdown"), on_close, unit="V", color="#D43D8A")
     )

selfdrive/ui/layouts/settings/starpilot/driving_model.py

@@ -41,21 +41,21 @@ class StarPilotDrivingModelLayout(StarPilotPanel):
         "icon": "toggle_icons/icon_steering.png",
         "on_click": self._on_select_model_clicked,
         "get_value": lambda: self._current_model_name,
-        "color": "#1BA1E2"
+        "color": "#597497"
       },
       {
         "title": tr_noop("Download Models"),
         "type": "hub",
         "icon": "toggle_icons/icon_system.png",
         "on_click": self._on_download_clicked,
-        "color": "#1BA1E2"
+        "color": "#597497"
       },
       {
         "title": tr_noop("Delete Models"),
         "type": "hub",
         "icon": "toggle_icons/icon_system.png",
         "on_click": self._on_delete_clicked,
-        "color": "#1BA1E2"
+        "color": "#597497"
       },
       {
         "title": tr_noop("Model Randomizer"),
@@ -63,7 +63,7 @@ class StarPilotDrivingModelLayout(StarPilotPanel):
         "icon": "toggle_icons/icon_conditional.png",
         "get_state": lambda: self._params.get_bool("ModelRandomizer"),
         "set_state": self._on_model_randomizer_toggled,
-        "color": "#1BA1E2"
+        "color": "#597497"
       },
       {
         "title": tr_noop("Auto Download"),
@@ -71,21 +71,21 @@ class StarPilotDrivingModelLayout(StarPilotPanel):
         "icon": "toggle_icons/icon_system.png",
         "get_state": lambda: self._params.get_bool("AutomaticallyDownloadModels"),
         "set_state": lambda s: self._params.put_bool("AutomaticallyDownloadModels", s),
-        "color": "#1BA1E2"
+        "color": "#597497"
       },
       {
         "title": tr_noop("Blacklist"),
         "type": "hub",
         "icon": "toggle_icons/icon_system.png",
         "on_click": self._on_blacklist_clicked,
-        "color": "#1BA1E2"
+        "color": "#597497"
       },
       {
         "title": tr_noop("Ratings"),
         "type": "hub",
         "icon": "toggle_icons/icon_system.png",
         "on_click": self._on_scores_clicked,
-        "color": "#1BA1E2"
+        "color": "#597497"
       },
     ]
     

selfdrive/ui/layouts/settings/starpilot/lateral.py

@@ -6,20 +6,20 @@ from openpilot.system.ui.widgets import DialogResult
 from openpilot.system.ui.widgets.confirm_dialog import ConfirmDialog
 from openpilot.system.ui.widgets.selection_dialog import SelectionDialog
 from openpilot.selfdrive.ui.layouts.settings.starpilot.panel import StarPilotPanel
-from openpilot.selfdrive.ui.layouts.settings.starpilot.metro import SliderDialog
+from openpilot.selfdrive.ui.layouts.settings.starpilot.aethergrid import AetherSliderDialog
 
 class StarPilotAdvancedLateralLayout(StarPilotPanel):
   def __init__(self):
     super().__init__()
     self.CATEGORIES = [
-      {"title": tr_noop("Actuator Delay"), "type": "value", "get_value": lambda: f"{self._params.get_float('SteerDelay'):.2f}s", "on_click": lambda: self._show_float_selector("SteerDelay", 0.0, 0.5, 0.01, "s"), "icon": "toggle_icons/icon_advanced_lateral_tune.png", "color": "#1BA1E2"},
-      {"title": tr_noop("Friction"), "type": "value", "get_value": lambda: f"{self._params.get_float('SteerFriction'):.3f}", "on_click": lambda: self._show_float_selector("SteerFriction", 0.0, 0.5, 0.005), "icon": "toggle_icons/icon_advanced_lateral_tune.png", "color": "#1BA1E2"},
-      {"title": tr_noop("Kp Factor"), "type": "value", "get_value": lambda: f"{self._params.get_float('SteerKP'):.2f}", "on_click": lambda: self._show_float_selector("SteerKP", 0.5, 2.5, 0.01), "icon": "toggle_icons/icon_advanced_lateral_tune.png", "color": "#1BA1E2"},
-      {"title": tr_noop("Lateral Accel"), "type": "value", "get_value": lambda: f"{self._params.get_float('SteerLatAccel'):.2f}", "on_click": lambda: self._show_float_selector("SteerLatAccel", 0.5, 5.0, 0.01), "icon": "toggle_icons/icon_advanced_lateral_tune.png", "color": "#1BA1E2"},
-      {"title": tr_noop("Steer Ratio"), "type": "value", "get_value": lambda: f"{self._params.get_float('SteerRatio'):.2f}", "on_click": lambda: self._show_float_selector("SteerRatio", 5.0, 25.0, 0.01), "icon": "toggle_icons/icon_advanced_lateral_tune.png", "color": "#1BA1E2"},
-      {"title": tr_noop("Force Auto-Tune On"), "type": "toggle", "get_state": lambda: self._params.get_bool("ForceAutoTune"), "set_state": lambda x: self._params.put_bool("ForceAutoTune", x), "icon": "toggle_icons/icon_tuning.png", "color": "#1BA1E2"},
-      {"title": tr_noop("Force Auto-Tune Off"), "type": "toggle", "get_state": lambda: self._params.get_bool("ForceAutoTuneOff"), "set_state": lambda x: self._params.put_bool("ForceAutoTuneOff", x), "icon": "toggle_icons/icon_tuning.png", "color": "#1BA1E2"},
-      {"title": tr_noop("Force Torque Controller"), "type": "toggle", "get_state": lambda: self._params.get_bool("ForceTorqueController"), "set_state": lambda x: self._on_reboot_toggle("ForceTorqueController", x), "icon": "toggle_icons/icon_advanced_lateral_tune.png", "color": "#1BA1E2"},
+      {"title": tr_noop("Actuator Delay"), "type": "value", "get_value": lambda: f"{self._params.get_float('SteerDelay'):.2f}s", "on_click": lambda: self._show_float_selector("SteerDelay", 0.0, 0.5, 0.01, "s"), "icon": "toggle_icons/icon_advanced_lateral_tune.png", "color": "#597497"},
+      {"title": tr_noop("Friction"), "type": "value", "get_value": lambda: f"{self._params.get_float('SteerFriction'):.3f}", "on_click": lambda: self._show_float_selector("SteerFriction", 0.0, 0.5, 0.005), "icon": "toggle_icons/icon_advanced_lateral_tune.png", "color": "#597497"},
+      {"title": tr_noop("Kp Factor"), "type": "value", "get_value": lambda: f"{self._params.get_float('SteerKP'):.2f}", "on_click": lambda: self._show_float_selector("SteerKP", 0.5, 2.5, 0.01), "icon": "toggle_icons/icon_advanced_lateral_tune.png", "color": "#597497"},
+      {"title": tr_noop("Lateral Accel"), "type": "value", "get_value": lambda: f"{self._params.get_float('SteerLatAccel'):.2f}", "on_click": lambda: self._show_float_selector("SteerLatAccel", 0.5, 5.0, 0.01), "icon": "toggle_icons/icon_advanced_lateral_tune.png", "color": "#597497"},
+      {"title": tr_noop("Steer Ratio"), "type": "value", "get_value": lambda: f"{self._params.get_float('SteerRatio'):.2f}", "on_click": lambda: self._show_float_selector("SteerRatio", 5.0, 25.0, 0.01), "icon": "toggle_icons/icon_advanced_lateral_tune.png", "color": "#597497"},
+      {"title": tr_noop("Force Auto-Tune On"), "type": "toggle", "get_state": lambda: self._params.get_bool("ForceAutoTune"), "set_state": lambda x: self._params.put_bool("ForceAutoTune", x), "icon": "toggle_icons/icon_tuning.png", "color": "#597497"},
+      {"title": tr_noop("Force Auto-Tune Off"), "type": "toggle", "get_state": lambda: self._params.get_bool("ForceAutoTuneOff"), "set_state": lambda x: self._params.put_bool("ForceAutoTuneOff", x), "icon": "toggle_icons/icon_tuning.png", "color": "#597497"},
+      {"title": tr_noop("Force Torque Controller"), "type": "toggle", "get_state": lambda: self._params.get_bool("ForceTorqueController"), "set_state": lambda x: self._on_reboot_toggle("ForceTorqueController", x), "icon": "toggle_icons/icon_advanced_lateral_tune.png", "color": "#597497"},
     ]
     self._rebuild_grid()
 
@@ -28,7 +28,7 @@ class StarPilotAdvancedLateralLayout(StarPilotPanel):
       if res == DialogResult.CONFIRM:
         self._params.put_float(key, float(val))
         self._rebuild_grid()
-    gui_app.set_modal_overlay(SliderDialog(tr(key), min_v, max_v, step, self._params.get_float(key), on_close, unit=unit, color="#1BA1E2"))
+    gui_app.set_modal_overlay(AetherSliderDialog(tr(key), min_v, max_v, step, self._params.get_float(key), on_close, unit=unit, color="#597497"))
 
   def _on_reboot_toggle(self, key, state):
     self._params.put_bool(key, state)
@@ -41,9 +41,9 @@ class StarPilotAlwaysOnLateralLayout(StarPilotPanel):
   def __init__(self):
     super().__init__()
     self.CATEGORIES = [
-      {"title": tr_noop("Always On Lateral"), "type": "toggle", "get_state": lambda: self._params.get_bool("AlwaysOnLateral"), "set_state": lambda x: self._on_reboot_toggle("AlwaysOnLateral", x), "icon": "toggle_icons/icon_always_on_lateral.png", "color": "#1BA1E2"},
-      {"title": tr_noop("Enable With LKAS"), "type": "toggle", "get_state": lambda: self._params.get_bool("AlwaysOnLateralLKAS"), "set_state": lambda x: self._params.put_bool("AlwaysOnLateralLKAS", x), "icon": "toggle_icons/icon_always_on_lateral.png", "color": "#1BA1E2"},
-      {"title": tr_noop("Pause Below"), "type": "value", "get_value": lambda: f"{self._params.get_int('PauseAOLOnBrake')} mph", "on_click": lambda: self._show_speed_selector("PauseAOLOnBrake"), "icon": "toggle_icons/icon_always_on_lateral.png", "color": "#1BA1E2"},
+      {"title": tr_noop("Always On Lateral"), "type": "toggle", "get_state": lambda: self._params.get_bool("AlwaysOnLateral"), "set_state": lambda x: self._on_reboot_toggle("AlwaysOnLateral", x), "icon": "toggle_icons/icon_always_on_lateral.png", "color": "#597497"},
+      {"title": tr_noop("Enable With LKAS"), "type": "toggle", "get_state": lambda: self._params.get_bool("AlwaysOnLateralLKAS"), "set_state": lambda x: self._params.put_bool("AlwaysOnLateralLKAS", x), "icon": "toggle_icons/icon_always_on_lateral.png", "color": "#597497"},
+      {"title": tr_noop("Pause Below"), "type": "value", "get_value": lambda: f"{self._params.get_int('PauseAOLOnBrake')} mph", "on_click": lambda: self._show_speed_selector("PauseAOLOnBrake"), "icon": "toggle_icons/icon_always_on_lateral.png", "color": "#597497"},
     ]
     self._rebuild_grid()
 
@@ -52,7 +52,7 @@ class StarPilotAlwaysOnLateralLayout(StarPilotPanel):
       if res == DialogResult.CONFIRM:
         self._params.put_int(key, int(val))
         self._rebuild_grid()
-    gui_app.set_modal_overlay(SliderDialog(tr(key), 0, 100, 1, self._params.get_int(key), on_close, unit=" mph", color="#1BA1E2"))
+    gui_app.set_modal_overlay(AetherSliderDialog(tr(key), 0, 100, 1, self._params.get_int(key), on_close, unit=" mph", color="#597497"))
 
   def _on_reboot_toggle(self, key, state):
     self._params.put_bool(key, state)
@@ -64,12 +64,12 @@ class StarPilotLaneChangesLayout(StarPilotPanel):
   def __init__(self):
     super().__init__()
     self.CATEGORIES = [
-      {"title": tr_noop("Lane Changes"), "type": "toggle", "get_state": lambda: self._params.get_bool("LaneChanges"), "set_state": lambda s: self._params.put_bool("LaneChanges", s), "icon": "toggle_icons/icon_lane.png", "color": "#1BA1E2"},
-      {"title": tr_noop("Automatic Lane Changes"), "type": "toggle", "get_state": lambda: self._params.get_bool("NudgelessLaneChange"), "set_state": lambda s: self._params.put_bool("NudgelessLaneChange", s), "icon": "toggle_icons/icon_lane.png", "color": "#1BA1E2"},
-      {"title": tr_noop("Lane Change Delay"), "type": "value", "get_value": lambda: f"{self._params.get_float('LaneChangeTime'):.1f}s", "on_click": lambda: self._show_float_selector("LaneChangeTime", 0.0, 5.0, 0.1, "s"), "icon": "toggle_icons/icon_lane.png", "color": "#1BA1E2"},
-      {"title": tr_noop("Min Lane Change Speed"), "type": "value", "get_value": lambda: f"{self._params.get_int('MinimumLaneChangeSpeed')} mph", "on_click": lambda: self._show_speed_selector("MinimumLaneChangeSpeed"), "icon": "toggle_icons/icon_lane.png", "color": "#1BA1E2"},
-      {"title": tr_noop("Minimum Lane Width"), "type": "value", "get_value": lambda: f"{self._params.get_float('LaneDetectionWidth'):.1f} ft", "on_click": lambda: self._show_float_selector("LaneDetectionWidth", 0.0, 15.0, 0.1, " ft"), "icon": "toggle_icons/icon_lane.png", "color": "#1BA1E2"},
-      {"title": tr_noop("One Lane Change Per Signal"), "type": "toggle", "get_state": lambda: self._params.get_bool("OneLaneChange"), "set_state": lambda s: self._params.put_bool("OneLaneChange", s), "icon": "toggle_icons/icon_lane.png", "color": "#1BA1E2"},
+      {"title": tr_noop("Lane Changes"), "type": "toggle", "get_state": lambda: self._params.get_bool("LaneChanges"), "set_state": lambda s: self._params.put_bool("LaneChanges", s), "icon": "toggle_icons/icon_lane.png", "color": "#597497"},
+      {"title": tr_noop("Automatic Lane Changes"), "type": "toggle", "get_state": lambda: self._params.get_bool("NudgelessLaneChange"), "set_state": lambda s: self._params.put_bool("NudgelessLaneChange", s), "icon": "toggle_icons/icon_lane.png", "color": "#597497"},
+      {"title": tr_noop("Lane Change Delay"), "type": "value", "get_value": lambda: f"{self._params.get_float('LaneChangeTime'):.1f}s", "on_click": lambda: self._show_float_selector("LaneChangeTime", 0.0, 5.0, 0.1, "s"), "icon": "toggle_icons/icon_lane.png", "color": "#597497"},
+      {"title": tr_noop("Min Lane Change Speed"), "type": "value", "get_value": lambda: f"{self._params.get_int('MinimumLaneChangeSpeed')} mph", "on_click": lambda: self._show_speed_selector("MinimumLaneChangeSpeed"), "icon": "toggle_icons/icon_lane.png", "color": "#597497"},
+      {"title": tr_noop("Minimum Lane Width"), "type": "value", "get_value": lambda: f"{self._params.get_float('LaneDetectionWidth'):.1f} ft", "on_click": lambda: self._show_float_selector("LaneDetectionWidth", 0.0, 15.0, 0.1, " ft"), "icon": "toggle_icons/icon_lane.png", "color": "#597497"},
+      {"title": tr_noop("One Lane Change Per Signal"), "type": "toggle", "get_state": lambda: self._params.get_bool("OneLaneChange"), "set_state": lambda s: self._params.put_bool("OneLaneChange", s), "icon": "toggle_icons/icon_lane.png", "color": "#597497"},
     ]
     self._rebuild_grid()
 
@@ -78,22 +78,22 @@ class StarPilotLaneChangesLayout(StarPilotPanel):
       if res == DialogResult.CONFIRM:
         self._params.put_int(key, int(val))
         self._rebuild_grid()
-    gui_app.set_modal_overlay(SliderDialog(tr(key), 0, 100, 1, self._params.get_int(key), on_close, unit=" mph", color="#1BA1E2"))
+    gui_app.set_modal_overlay(AetherSliderDialog(tr(key), 0, 100, 1, self._params.get_int(key), on_close, unit=" mph", color="#597497"))
 
   def _show_float_selector(self, key, min_v, max_v, step, unit=""):
     def on_close(res, val):
       if res == DialogResult.CONFIRM:
         self._params.put_float(key, float(val))
         self._rebuild_grid()
-    gui_app.set_modal_overlay(SliderDialog(tr(key), min_v, max_v, step, self._params.get_float(key), on_close, unit=unit, color="#1BA1E2"))
+    gui_app.set_modal_overlay(AetherSliderDialog(tr(key), min_v, max_v, step, self._params.get_float(key), on_close, unit=unit, color="#597497"))
 
 class StarPilotLateralTuneLayout(StarPilotPanel):
   def __init__(self):
     super().__init__()
     self.CATEGORIES = [
-      {"title": tr_noop("Force Turn Desires"), "type": "toggle", "get_state": lambda: self._params.get_bool("TurnDesires"), "set_state": lambda x: self._params.put_bool("TurnDesires", x), "icon": "toggle_icons/icon_lateral_tune.png", "color": "#1BA1E2"},
-      {"title": tr_noop("NNFF"), "type": "toggle", "get_state": lambda: self._params.get_bool("NNFF"), "set_state": lambda x: self._on_reboot_toggle("NNFF", x), "icon": "toggle_icons/icon_lateral_tune.png", "color": "#1BA1E2"},
-      {"title": tr_noop("NNFF Lite"), "type": "toggle", "get_state": lambda: self._params.get_bool("NNFFLite"), "set_state": lambda x: self._on_reboot_toggle("NNFFLite", x), "icon": "toggle_icons/icon_lateral_tune.png", "color": "#1BA1E2"},
+      {"title": tr_noop("Force Turn Desires"), "type": "toggle", "get_state": lambda: self._params.get_bool("TurnDesires"), "set_state": lambda x: self._params.put_bool("TurnDesires", x), "icon": "toggle_icons/icon_lateral_tune.png", "color": "#597497"},
+      {"title": tr_noop("NNFF"), "type": "toggle", "get_state": lambda: self._params.get_bool("NNFF"), "set_state": lambda x: self._on_reboot_toggle("NNFF", x), "icon": "toggle_icons/icon_lateral_tune.png", "color": "#597497"},
+      {"title": tr_noop("NNFF Lite"), "type": "toggle", "get_state": lambda: self._params.get_bool("NNFFLite"), "set_state": lambda x: self._on_reboot_toggle("NNFFLite", x), "icon": "toggle_icons/icon_lateral_tune.png", "color": "#597497"},
     ]
     self._rebuild_grid()
 
@@ -107,7 +107,7 @@ class StarPilotLateralQOLLayout(StarPilotPanel):
   def __init__(self):
     super().__init__()
     self.CATEGORIES = [
-      {"title": tr_noop("Pause Steering Below"), "type": "value", "get_value": lambda: f"{self._params.get_int('PauseLateralSpeed')} mph", "on_click": lambda: self._show_speed_selector("PauseLateralSpeed"), "icon": "toggle_icons/icon_quality_of_life.png", "color": "#1BA1E2"}
+      {"title": tr_noop("Pause Steering Below"), "type": "value", "get_value": lambda: f"{self._params.get_int('PauseLateralSpeed')} mph", "on_click": lambda: self._show_speed_selector("PauseLateralSpeed"), "icon": "toggle_icons/icon_quality_of_life.png", "color": "#597497"}
     ]
     self._rebuild_grid()
 
@@ -116,7 +116,7 @@ class StarPilotLateralQOLLayout(StarPilotPanel):
       if res == DialogResult.CONFIRM:
         self._params.put_int(key, int(val))
         self._rebuild_grid()
-    gui_app.set_modal_overlay(SliderDialog(tr(key), 0, 100, 1, self._params.get_int(key), on_close, unit=" mph", color="#1BA1E2"))
+    gui_app.set_modal_overlay(AetherSliderDialog(tr(key), 0, 100, 1, self._params.get_int(key), on_close, unit=" mph", color="#597497"))
 
 class StarPilotLateralLayout(StarPilotPanel):
   def __init__(self):
@@ -129,11 +129,11 @@ class StarPilotLateralLayout(StarPilotPanel):
       "qol": StarPilotLateralQOLLayout(),
     }
     self.CATEGORIES = [
-      {"title": tr_noop("Advanced Lateral Tuning"), "panel": "advanced_lateral", "icon": "toggle_icons/icon_advanced_lateral_tune.png", "color": "#1BA1E2"},
-      {"title": tr_noop("Always On Lateral"), "panel": "always_on_lateral", "icon": "toggle_icons/icon_always_on_lateral.png", "color": "#1BA1E2"},
-      {"title": tr_noop("Lane Changes"), "panel": "lane_changes", "icon": "toggle_icons/icon_lane.png", "color": "#1BA1E2"},
-      {"title": tr_noop("Lateral Tuning"), "panel": "lateral_tune", "icon": "toggle_icons/icon_lateral_tune.png", "color": "#1BA1E2"},
-      {"title": tr_noop("Quality of Life"), "panel": "qol", "icon": "toggle_icons/icon_quality_of_life.png", "color": "#1BA1E2"},
+      {"title": tr_noop("Advanced Lateral Tuning"), "panel": "advanced_lateral", "icon": "toggle_icons/icon_advanced_lateral_tune.png", "color": "#597497"},
+      {"title": tr_noop("Always On Lateral"), "panel": "always_on_lateral", "icon": "toggle_icons/icon_always_on_lateral.png", "color": "#597497"},
+      {"title": tr_noop("Lane Changes"), "panel": "lane_changes", "icon": "toggle_icons/icon_lane.png", "color": "#597497"},
+      {"title": tr_noop("Lateral Tuning"), "panel": "lateral_tune", "icon": "toggle_icons/icon_lateral_tune.png", "color": "#597497"},
+      {"title": tr_noop("Quality of Life"), "panel": "qol", "icon": "toggle_icons/icon_quality_of_life.png", "color": "#597497"},
     ]
     for name, panel in self._sub_panels.items():
       if hasattr(panel, 'set_navigate_callback'): panel.set_navigate_callback(self._navigate_to)

selfdrive/ui/layouts/settings/starpilot/longitudinal.py

@@ -7,7 +7,7 @@ from openpilot.system.ui.widgets.confirm_dialog import ConfirmDialog
 from openpilot.system.ui.widgets.selection_dialog import SelectionDialog
 from openpilot.system.ui.widgets.input_dialog import InputDialog
 from openpilot.selfdrive.ui.layouts.settings.starpilot.panel import StarPilotPanel
-from openpilot.selfdrive.ui.layouts.settings.starpilot.metro import SliderDialog
+from openpilot.selfdrive.ui.layouts.settings.starpilot.aethergrid import AetherSliderDialog
 
 
 class StarPilotLongitudinalLayout(StarPilotPanel):
@@ -39,14 +39,14 @@ class StarPilotLongitudinalLayout(StarPilotPanel):
     }
 
     self.CATEGORIES = [
-      {"title": tr_noop("Advanced Longitudinal Tuning"), "panel": "advanced", "icon": "toggle_icons/icon_advanced_longitudinal_tune.png", "color": "#1BA1E2"},
-      {"title": tr_noop("Conditional Experimental Mode"), "panel": "conditional", "icon": "toggle_icons/icon_conditional.png", "color": "#1BA1E2"},
-      {"title": tr_noop("Curve Speed Controller"), "panel": "curve", "icon": "toggle_icons/icon_speed_map.png", "color": "#1BA1E2"},
-      {"title": tr_noop("Driving Personalities"), "panel": "personalities", "icon": "toggle_icons/icon_personality.png", "color": "#1BA1E2"},
-      {"title": tr_noop("Longitudinal Tuning"), "panel": "tuning", "icon": "toggle_icons/icon_longitudinal_tune.png", "color": "#1BA1E2"},
-      {"title": tr_noop("Quality of Life"), "panel": "qol", "icon": "toggle_icons/icon_quality_of_life.png", "color": "#1BA1E2"},
-      {"title": tr_noop("Speed Limit Controller"), "panel": "slc", "icon": "toggle_icons/icon_speed_limit.png", "color": "#1BA1E2"},
-      {"title": tr_noop("Weather"), "panel": "weather", "icon": "toggle_icons/icon_rainbow.png", "color": "#1BA1E2"},
+      {"title": tr_noop("Advanced Longitudinal Tuning"), "panel": "advanced", "icon": "toggle_icons/icon_advanced_longitudinal_tune.png", "color": "#597497"},
+      {"title": tr_noop("Conditional Experimental Mode"), "panel": "conditional", "icon": "toggle_icons/icon_conditional.png", "color": "#597497"},
+      {"title": tr_noop("Curve Speed Controller"), "panel": "curve", "icon": "toggle_icons/icon_speed_map.png", "color": "#597497"},
+      {"title": tr_noop("Driving Personalities"), "panel": "personalities", "icon": "toggle_icons/icon_personality.png", "color": "#597497"},
+      {"title": tr_noop("Longitudinal Tuning"), "panel": "tuning", "icon": "toggle_icons/icon_longitudinal_tune.png", "color": "#597497"},
+      {"title": tr_noop("Quality of Life"), "panel": "qol", "icon": "toggle_icons/icon_quality_of_life.png", "color": "#597497"},
+      {"title": tr_noop("Speed Limit Controller"), "panel": "slc", "icon": "toggle_icons/icon_speed_limit.png", "color": "#597497"},
+      {"title": tr_noop("Weather"), "panel": "weather", "icon": "toggle_icons/icon_rainbow.png", "color": "#597497"},
     ]
 
     for name, panel in self._sub_panels.items():
@@ -66,63 +66,63 @@ class StarPilotAdvancedLongitudinalLayout(StarPilotPanel):
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("EVTuning"),
         "set_state": lambda s: self._params.put_bool("EVTuning", s),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Truck Tuning"),
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("TruckTuning"),
         "set_state": lambda s: self._params.put_bool("TruckTuning", s),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Actuator Delay"),
         "type": "value",
         "get_value": lambda: f"{self._params.get_float('LongitudinalActuatorDelay'):.2f}s",
         "on_click": lambda: self._show_float_selector("LongitudinalActuatorDelay", 0.0, 1.0, 0.01, "s"),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Max Acceleration"),
         "type": "value",
         "get_value": lambda: f"{self._params.get_float('MaxDesiredAcceleration'):.1f}m/s²",
         "on_click": lambda: self._show_float_selector("MaxDesiredAcceleration", 0.1, 4.0, 0.1, "m/s²"),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Start Accel"),
         "type": "value",
         "get_value": lambda: f"{self._params.get_float('StartAccel'):.2f}m/s²",
         "on_click": lambda: self._show_float_selector("StartAccel", 0.0, 4.0, 0.01, "m/s²"),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Stop Accel"),
         "type": "value",
         "get_value": lambda: f"{self._params.get_float('StopAccel'):.2f}m/s²",
         "on_click": lambda: self._show_float_selector("StopAccel", -4.0, 0.0, 0.01, "m/s²"),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Stopping Rate"),
         "type": "value",
         "get_value": lambda: f"{self._params.get_float('StoppingDecelRate'):.3f}m/s²",
         "on_click": lambda: self._show_float_selector("StoppingDecelRate", 0.001, 1.0, 0.001, "m/s²"),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("VEgo Starting"),
         "type": "value",
         "get_value": lambda: f"{self._params.get_float('VEgoStarting'):.2f}m/s",
         "on_click": lambda: self._show_float_selector("VEgoStarting", 0.01, 1.0, 0.01, "m/s"),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("VEgo Stopping"),
         "type": "value",
         "get_value": lambda: f"{self._params.get_float('VEgoStopping'):.2f}m/s",
         "on_click": lambda: self._show_float_selector("VEgoStopping", 0.01, 1.0, 0.01, "m/s"),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
     ]
     self._rebuild_grid()
@@ -133,7 +133,7 @@ class StarPilotAdvancedLongitudinalLayout(StarPilotPanel):
         self._params.put_float(key, float(val))
         self._rebuild_grid()
 
-    gui_app.set_modal_overlay(SliderDialog(tr(key), min_v, max_v, step, self._params.get_float(key), on_close, unit=unit, color="#1BA1E2"))
+    gui_app.set_modal_overlay(AetherSliderDialog(tr(key), min_v, max_v, step, self._params.get_float(key), on_close, unit=unit, color="#597497"))
 
 
 class StarPilotConditionalExperimentalLayout(StarPilotPanel):
@@ -146,21 +146,21 @@ class StarPilotConditionalExperimentalLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("ConditionalExperimental"),
         "set_state": lambda s: self._params.put_bool("ConditionalExperimental", s),
         "icon": "toggle_icons/icon_conditional.png",
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Below Speed"),
         "type": "value",
         "get_value": lambda: f"{self._params.get_int('CESpeed')} mph",
         "on_click": lambda: self._show_speed_selector("CESpeed"),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Curves"),
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("CECurves"),
         "set_state": lambda s: self._params.put_bool("CECurves", s),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Curves Lead"),
@@ -168,56 +168,56 @@ class StarPilotConditionalExperimentalLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("CECurvesLead"),
         "set_state": lambda s: self._params.put_bool("CECurvesLead", s),
         "visible": lambda: self._params.get_bool("CECurves"),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Stop Lights"),
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("CEStopLights"),
         "set_state": lambda s: self._params.put_bool("CEStopLights", s),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Lead Detected"),
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("CELead"),
         "set_state": lambda s: self._params.put_bool("CELead", s),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Slower Lead"),
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("CESlowerLead"),
         "set_state": lambda s: self._params.put_bool("CESlowerLead", s),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Stopped Lead"),
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("CEStoppedLead"),
         "set_state": lambda s: self._params.put_bool("CEStoppedLead", s),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Predicted Stop"),
         "type": "value",
         "get_value": lambda: f"{self._params.get_int('CEModelStopTime')}s",
         "on_click": lambda: self._show_int_selector("CEModelStopTime", 0, 10, "s"),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Signal Below"),
         "type": "value",
         "get_value": lambda: f"{self._params.get_int('CESignalSpeed')} mph",
         "on_click": lambda: self._show_speed_selector("CESignalSpeed"),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Speed Lead"),
         "type": "value",
         "get_value": lambda: f"{self._params.get_int('CESpeedLead')} mph",
         "on_click": lambda: self._show_speed_selector("CESpeedLead"),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Signal Lane Detection"),
@@ -225,14 +225,14 @@ class StarPilotConditionalExperimentalLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("CESignalLaneDetection"),
         "set_state": lambda s: self._params.put_bool("CESignalLaneDetection", s),
         "visible": lambda: self._params.get_int("CESignalSpeed") > 0,
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Status Widget"),
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("ShowCEMStatus"),
         "set_state": lambda s: self._params.put_bool("ShowCEMStatus", s),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
     ]
     self._rebuild_grid()
@@ -243,7 +243,7 @@ class StarPilotConditionalExperimentalLayout(StarPilotPanel):
         self._params.put_int(key, int(val))
         self._rebuild_grid()
 
-    gui_app.set_modal_overlay(SliderDialog(tr(key), 0, 100, 1, self._params.get_int(key), on_close, unit=" mph", color="#1BA1E2"))
+    gui_app.set_modal_overlay(AetherSliderDialog(tr(key), 0, 100, 1, self._params.get_int(key), on_close, unit=" mph", color="#597497"))
 
   def _show_int_selector(self, key, min_v, max_v, unit=""):
     def on_close(res, val):
@@ -251,7 +251,7 @@ class StarPilotConditionalExperimentalLayout(StarPilotPanel):
         self._params.put_int(key, int(val))
         self._rebuild_grid()
 
-    gui_app.set_modal_overlay(SliderDialog(tr(key), min_v, max_v, 1, self._params.get_int(key), on_close, unit=unit, color="#1BA1E2"))
+    gui_app.set_modal_overlay(AetherSliderDialog(tr(key), min_v, max_v, 1, self._params.get_int(key), on_close, unit=unit, color="#597497"))
 
 
 class StarPilotCurveSpeedLayout(StarPilotPanel):
@@ -265,7 +265,7 @@ class StarPilotCurveSpeedLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("CurveSpeedController"),
         "set_state": lambda s: self._params.put_bool("CurveSpeedController", s),
         "icon": "toggle_icons/icon_speed_map.png",
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Status Widget"),
@@ -273,7 +273,7 @@ class StarPilotCurveSpeedLayout(StarPilotPanel):
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("ShowCSCStatus"),
         "set_state": lambda s: self._params.put_bool("ShowCSCStatus", s),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Calibrated Lateral Accel"),
@@ -281,7 +281,7 @@ class StarPilotCurveSpeedLayout(StarPilotPanel):
         "type": "value",
         "get_value": lambda: f"{self._params_memory.get_float('CalibratedLateralAcceleration'):.2f} m/s²",
         "on_click": lambda: None,
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Calibration Progress"),
@@ -289,14 +289,14 @@ class StarPilotCurveSpeedLayout(StarPilotPanel):
         "type": "value",
         "get_value": lambda: f"{self._params_memory.get_float('CalibrationProgress'):.2f}%",
         "on_click": lambda: None,
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Reset Curve Data"),
         "desc": tr_noop("Reset collected user data for Curve Speed Controller."),
         "type": "hub",
         "on_click": lambda: self._reset_curve_data(),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
     ]
     self._rebuild_grid()
@@ -316,10 +316,10 @@ class StarPilotPersonalitiesLayout(StarPilotPanel):
   def __init__(self):
     super().__init__()
     self.CATEGORIES = [
-      {"title": tr_noop("Traffic"), "panel": "traffic_personality", "icon": "toggle_icons/icon_personality.png", "color": "#1BA1E2"},
-      {"title": tr_noop("Aggressive"), "panel": "aggressive_personality", "icon": "toggle_icons/icon_personality.png", "color": "#1BA1E2"},
-      {"title": tr_noop("Standard"), "panel": "standard_personality", "icon": "toggle_icons/icon_personality.png", "color": "#1BA1E2"},
-      {"title": tr_noop("Relaxed"), "panel": "relaxed_personality", "icon": "toggle_icons/icon_personality.png", "color": "#1BA1E2"},
+      {"title": tr_noop("Traffic"), "panel": "traffic_personality", "icon": "toggle_icons/icon_personality.png", "color": "#597497"},
+      {"title": tr_noop("Aggressive"), "panel": "aggressive_personality", "icon": "toggle_icons/icon_personality.png", "color": "#597497"},
+      {"title": tr_noop("Standard"), "panel": "standard_personality", "icon": "toggle_icons/icon_personality.png", "color": "#597497"},
+      {"title": tr_noop("Relaxed"), "panel": "relaxed_personality", "icon": "toggle_icons/icon_personality.png", "color": "#597497"},
     ]
     self._rebuild_grid()
 
@@ -336,7 +336,7 @@ class StarPilotPersonalityProfileLayout(StarPilotPanel):
         "type": "value",
         "get_value": lambda: f"{self._params.get_float(self._profile + 'Follow'):.2f}s",
         "on_click": lambda: self._show_float_selector(self._profile + "Follow", follow_min, follow_max, 0.05, "s"),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Follow High"),
@@ -344,48 +344,48 @@ class StarPilotPersonalityProfileLayout(StarPilotPanel):
         "get_value": lambda: f"{self._params.get_float(self._profile + 'FollowHigh'):.2f}s",
         "on_click": lambda: self._show_float_selector(self._profile + "FollowHigh", 1.0, 3.0, 0.05, "s"),
         "visible": lambda: self._profile != "Traffic",
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Accel Smoothness"),
         "type": "value",
         "get_value": lambda: f"{self._params.get_int(self._profile + 'JerkAcceleration')}%",
         "on_click": lambda: self._show_int_selector(self._profile + "JerkAcceleration", 25, 200, "%"),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Brake Smoothness"),
         "type": "value",
         "get_value": lambda: f"{self._params.get_int(self._profile + 'JerkDeceleration')}%",
         "on_click": lambda: self._show_int_selector(self._profile + "JerkDeceleration", 25, 200, "%"),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Safety Gap Bias"),
         "type": "value",
         "get_value": lambda: f"{self._params.get_int(self._profile + 'JerkDanger')}%",
         "on_click": lambda: self._show_int_selector(self._profile + "JerkDanger", 25, 200, "%"),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Slowdown Response"),
         "type": "value",
         "get_value": lambda: f"{self._params.get_int(self._profile + 'JerkSpeedDecrease')}%",
         "on_click": lambda: self._show_int_selector(self._profile + "JerkSpeedDecrease", 25, 200, "%"),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Speed-Up Response"),
         "type": "value",
         "get_value": lambda: f"{self._params.get_int(self._profile + 'JerkSpeed')}%",
         "on_click": lambda: self._show_int_selector(self._profile + "JerkSpeed", 25, 200, "%"),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Reset to Defaults"),
         "type": "hub",
         "on_click": lambda: self._reset_profile(),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
     ]
     self._rebuild_grid()
@@ -405,7 +405,7 @@ class StarPilotPersonalityProfileLayout(StarPilotPanel):
         self._params.put_float(key, float(val))
         self._rebuild_grid()
 
-    gui_app.set_modal_overlay(SliderDialog(tr(key), min_v, max_v, step, self._params.get_float(key), on_close, unit=unit, color="#1BA1E2"))
+    gui_app.set_modal_overlay(AetherSliderDialog(tr(key), min_v, max_v, step, self._params.get_float(key), on_close, unit=unit, color="#597497"))
 
   def _show_int_selector(self, key, min_v, max_v, unit=""):
     def on_close(res, val):
@@ -413,7 +413,7 @@ class StarPilotPersonalityProfileLayout(StarPilotPanel):
         self._params.put_int(key, int(val))
         self._rebuild_grid()
 
-    gui_app.set_modal_overlay(SliderDialog(tr(key), min_v, max_v, 5, self._params.get_int(key), on_close, unit=unit, color="#1BA1E2"))
+    gui_app.set_modal_overlay(AetherSliderDialog(tr(key), min_v, max_v, 5, self._params.get_int(key), on_close, unit=unit, color="#597497"))
 
 
 class StarPilotLongitudinalTuneLayout(StarPilotPanel):
@@ -425,49 +425,49 @@ class StarPilotLongitudinalTuneLayout(StarPilotPanel):
         "type": "value",
         "get_value": lambda: self._params.get("AccelerationProfile", encoding='utf-8') or "Standard",
         "on_click": lambda: self._show_selection("AccelerationProfile", ["Standard", "Eco", "Sport", "Sport+"]),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Deceleration Profile"),
         "type": "value",
         "get_value": lambda: self._params.get("DecelerationProfile", encoding='utf-8') or "Standard",
         "on_click": lambda: self._show_selection("DecelerationProfile", ["Standard", "Eco", "Sport"]),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Human Acceleration"),
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("HumanAcceleration"),
         "set_state": lambda s: self._params.put_bool("HumanAcceleration", s),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Human Following"),
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("HumanFollowing"),
         "set_state": lambda s: self._params.put_bool("HumanFollowing", s),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Human Lane Changes"),
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("HumanLaneChanges"),
         "set_state": lambda s: self._params.put_bool("HumanLaneChanges", s),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Lead Detection"),
         "type": "value",
         "get_value": lambda: f"{self._params.get_int('LeadDetectionThreshold')}%",
         "on_click": lambda: self._show_int_selector("LeadDetectionThreshold", 25, 50, "%"),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Taco Tune"),
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("TacoTune"),
         "set_state": lambda s: self._params.put_bool("TacoTune", s),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
     ]
     self._rebuild_grid()
@@ -486,7 +486,7 @@ class StarPilotLongitudinalTuneLayout(StarPilotPanel):
         self._params.put_int(key, int(val))
         self._rebuild_grid()
 
-    gui_app.set_modal_overlay(SliderDialog(tr(key), min_v, max_v, 1, self._params.get_int(key), on_close, unit=unit, color="#1BA1E2"))
+    gui_app.set_modal_overlay(AetherSliderDialog(tr(key), min_v, max_v, 1, self._params.get_int(key), on_close, unit=unit, color="#597497"))
 
 
 class StarPilotLongitudinalQOLLayout(StarPilotPanel):
@@ -498,49 +498,49 @@ class StarPilotLongitudinalQOLLayout(StarPilotPanel):
         "type": "value",
         "get_value": lambda: f"{self._params.get_int('CustomCruise')} mph",
         "on_click": lambda: self._show_speed_selector("CustomCruise"),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Cruise Long"),
         "type": "value",
         "get_value": lambda: f"{self._params.get_int('CustomCruiseLong')} mph",
         "on_click": lambda: self._show_speed_selector("CustomCruiseLong"),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Reverse Cruise"),
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("ReverseCruise"),
         "set_state": lambda s: self._params.put_bool("ReverseCruise", s),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Force Stops"),
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("ForceStops"),
         "set_state": lambda s: self._params.put_bool("ForceStops", s),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Stopped Distance"),
         "type": "value",
         "get_value": lambda: f"{self._params.get_int('IncreasedStoppedDistance')} ft",
         "on_click": lambda: self._show_int_selector("IncreasedStoppedDistance", 0, 10, " ft"),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Set Speed Offset"),
         "type": "value",
         "get_value": lambda: f"+{self._params.get_int('SetSpeedOffset')} mph",
         "on_click": lambda: self._show_int_selector("SetSpeedOffset", 0, 99, " mph"),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Map Gears"),
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("MapGears"),
         "set_state": lambda s: self._params.put_bool("MapGears", s),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Map Acceleration"),
@@ -548,7 +548,7 @@ class StarPilotLongitudinalQOLLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("MapAcceleration"),
         "set_state": lambda s: self._params.put_bool("MapAcceleration", s),
         "visible": lambda: self._params.get_bool("MapGears"),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Map Deceleration"),
@@ -556,7 +556,7 @@ class StarPilotLongitudinalQOLLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("MapDeceleration"),
         "set_state": lambda s: self._params.put_bool("MapDeceleration", s),
         "visible": lambda: self._params.get_bool("MapGears"),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
     ]
     self._rebuild_grid()
@@ -567,7 +567,7 @@ class StarPilotLongitudinalQOLLayout(StarPilotPanel):
         self._params.put_int(key, int(val))
         self._rebuild_grid()
 
-    gui_app.set_modal_overlay(SliderDialog(tr(key), 0, 100, 1, self._params.get_int(key), on_close, unit=" mph", color="#1BA1E2"))
+    gui_app.set_modal_overlay(AetherSliderDialog(tr(key), 0, 100, 1, self._params.get_int(key), on_close, unit=" mph", color="#597497"))
 
   def _show_int_selector(self, key, min_v, max_v, unit=""):
     def on_close(res, val):
@@ -575,7 +575,7 @@ class StarPilotLongitudinalQOLLayout(StarPilotPanel):
         self._params.put_int(key, int(val))
         self._rebuild_grid()
 
-    gui_app.set_modal_overlay(SliderDialog(tr(key), min_v, max_v, 1, self._params.get_int(key), on_close, unit=unit, color="#1BA1E2"))
+    gui_app.set_modal_overlay(AetherSliderDialog(tr(key), min_v, max_v, 1, self._params.get_int(key), on_close, unit=unit, color="#597497"))
 
 
 class StarPilotSpeedLimitControllerLayout(StarPilotPanel):
@@ -589,31 +589,31 @@ class StarPilotSpeedLimitControllerLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("SpeedLimitController"),
         "set_state": lambda s: self._params.put_bool("SpeedLimitController", s),
         "icon": "toggle_icons/icon_speed_limit.png",
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
-      {"title": tr_noop("SLC Offsets"), "panel": "slc_offsets", "icon": "toggle_icons/icon_speed_limit.png", "color": "#1BA1E2"},
-      {"title": tr_noop("SLC Quality of Life"), "panel": "slc_qol", "icon": "toggle_icons/icon_speed_limit.png", "color": "#1BA1E2"},
-      {"title": tr_noop("SLC Visuals"), "panel": "slc_visuals", "icon": "toggle_icons/icon_speed_limit.png", "color": "#1BA1E2"},
+      {"title": tr_noop("SLC Offsets"), "panel": "slc_offsets", "icon": "toggle_icons/icon_speed_limit.png", "color": "#597497"},
+      {"title": tr_noop("SLC Quality of Life"), "panel": "slc_qol", "icon": "toggle_icons/icon_speed_limit.png", "color": "#597497"},
+      {"title": tr_noop("SLC Visuals"), "panel": "slc_visuals", "icon": "toggle_icons/icon_speed_limit.png", "color": "#597497"},
       {
         "title": tr_noop("Fallback Speed"),
         "type": "value",
         "get_value": lambda: self._params.get("SLCFallback", encoding='utf-8') or "Set Speed",
         "on_click": lambda: self._show_selection("SLCFallback", ["Set Speed", "Experimental Mode", "Previous Limit"]),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Override Speed"),
         "type": "value",
         "get_value": lambda: self._params.get("SLCOverride", encoding='utf-8') or "None",
         "on_click": lambda: self._show_selection("SLCOverride", ["None", "Set With Gas Pedal", "Max Set Speed"]),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Source Priority"),
         "type": "value",
         "get_value": self._get_priority_value,
         "on_click": self._on_priority_clicked,
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
     ]
     self._rebuild_grid()
@@ -683,7 +683,7 @@ class StarPilotSLCOffsetsLayout(StarPilotPanel):
           "type": "value",
           "get_value": lambda k=key: f"{self._params.get_int(k)} mph",
           "on_click": lambda k=key: self._show_speed_selector(k),
-          "color": "#1BA1E2",
+          "color": "#597497",
         }
       )
     self._rebuild_grid()
@@ -694,7 +694,7 @@ class StarPilotSLCOffsetsLayout(StarPilotPanel):
         self._params.put_int(key, int(val))
         self._rebuild_grid()
 
-    gui_app.set_modal_overlay(SliderDialog(tr(key), -99, 100, 1, self._params.get_int(key), on_close, unit=" mph", color="#1BA1E2"))
+    gui_app.set_modal_overlay(AetherSliderDialog(tr(key), -99, 100, 1, self._params.get_int(key), on_close, unit=" mph", color="#597497"))
 
 
 class StarPilotSLCQOLLayout(StarPilotPanel):
@@ -706,14 +706,14 @@ class StarPilotSLCQOLLayout(StarPilotPanel):
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("SetSpeedLimit"),
         "set_state": lambda s: self._params.put_bool("SetSpeedLimit", s),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Confirm New Limits"),
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("SLCConfirmation"),
         "set_state": lambda s: self._params.put_bool("SLCConfirmation", s),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Confirm Lower"),
@@ -721,7 +721,7 @@ class StarPilotSLCQOLLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("SLCConfirmationLower"),
         "set_state": lambda s: self._params.put_bool("SLCConfirmationLower", s),
         "visible": lambda: self._params.get_bool("SLCConfirmation"),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Confirm Higher"),
@@ -729,28 +729,28 @@ class StarPilotSLCQOLLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("SLCConfirmationHigher"),
         "set_state": lambda s: self._params.put_bool("SLCConfirmationHigher", s),
         "visible": lambda: self._params.get_bool("SLCConfirmation"),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Higher Lookahead"),
         "type": "value",
         "get_value": lambda: f"{self._params.get_int('SLCLookaheadHigher')}s",
         "on_click": lambda: self._show_int_selector("SLCLookaheadHigher", 0, 30, "s"),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Lower Lookahead"),
         "type": "value",
         "get_value": lambda: f"{self._params.get_int('SLCLookaheadLower')}s",
         "on_click": lambda: self._show_int_selector("SLCLookaheadLower", 0, 30, "s"),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Mapbox Fallback"),
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("SLCMapboxFiller"),
         "set_state": lambda s: self._params.put_bool("SLCMapboxFiller", s),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
     ]
     self._rebuild_grid()
@@ -761,7 +761,7 @@ class StarPilotSLCQOLLayout(StarPilotPanel):
         self._params.put_int(key, int(val))
         self._rebuild_grid()
 
-    gui_app.set_modal_overlay(SliderDialog(tr(key), min_v, max_v, 1, self._params.get_int(key), on_close, unit=unit, color="#1BA1E2"))
+    gui_app.set_modal_overlay(AetherSliderDialog(tr(key), min_v, max_v, 1, self._params.get_int(key), on_close, unit=unit, color="#597497"))
 
 
 class StarPilotSLCVisualsLayout(StarPilotPanel):
@@ -773,14 +773,14 @@ class StarPilotSLCVisualsLayout(StarPilotPanel):
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("ShowSLCOffset"),
         "set_state": lambda s: self._params.put_bool("ShowSLCOffset", s),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Show Sources"),
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("SpeedLimitSources"),
         "set_state": lambda s: self._params.put_bool("SpeedLimitSources", s),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
     ]
     self._rebuild_grid()
@@ -790,15 +790,15 @@ class StarPilotWeatherLayout(StarPilotPanel):
   def __init__(self):
     super().__init__()
     self.CATEGORIES = [
-      {"title": tr_noop("Low Visibility"), "panel": "low_visibility", "icon": "toggle_icons/icon_rainbow.png", "color": "#1BA1E2"},
-      {"title": tr_noop("Rain"), "panel": "rain", "icon": "toggle_icons/icon_rainbow.png", "color": "#1BA1E2"},
-      {"title": tr_noop("Rainstorms"), "panel": "rainstorm", "icon": "toggle_icons/icon_rainbow.png", "color": "#1BA1E2"},
-      {"title": tr_noop("Snow"), "panel": "snow", "icon": "toggle_icons/icon_rainbow.png", "color": "#1BA1E2"},
+      {"title": tr_noop("Low Visibility"), "panel": "low_visibility", "icon": "toggle_icons/icon_rainbow.png", "color": "#597497"},
+      {"title": tr_noop("Rain"), "panel": "rain", "icon": "toggle_icons/icon_rainbow.png", "color": "#597497"},
+      {"title": tr_noop("Rainstorms"), "panel": "rainstorm", "icon": "toggle_icons/icon_rainbow.png", "color": "#597497"},
+      {"title": tr_noop("Snow"), "panel": "snow", "icon": "toggle_icons/icon_rainbow.png", "color": "#597497"},
       {
         "title": tr_noop("Set Weather Key"),
         "type": "hub",
         "on_click": lambda: self._set_weather_key(),
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
     ]
     self._rebuild_grid()
@@ -839,7 +839,7 @@ class StarPilotWeatherBase(StarPilotPanel):
         "get_value": lambda: f"+{self._params.get_int('IncreaseFollowing' + self._suffix)}s",
         "on_click": lambda: self._show_value_selector("IncreaseFollowing" + self._suffix, 0, 3, 0.5, "s"),
         "icon": "toggle_icons/icon_longitudinal_tune.png",
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Stopped Distance"),
@@ -847,7 +847,7 @@ class StarPilotWeatherBase(StarPilotPanel):
         "get_value": lambda: f"+{self._params.get_int('IncreasedStoppedDistance' + self._suffix)} ft",
         "on_click": lambda: self._show_value_selector("IncreasedStoppedDistance" + self._suffix, 0, 10, 1, " ft"),
         "icon": "toggle_icons/icon_longitudinal_tune.png",
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Reduce Accel"),
@@ -855,7 +855,7 @@ class StarPilotWeatherBase(StarPilotPanel):
         "get_value": lambda: f"{self._params.get_int('ReduceAcceleration' + self._suffix)}%",
         "on_click": lambda: self._show_value_selector("ReduceAcceleration" + self._suffix, 0, 99, 1, "%"),
         "icon": "toggle_icons/icon_longitudinal_tune.png",
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
       {
         "title": tr_noop("Reduce Curve Speed"),
@@ -863,7 +863,7 @@ class StarPilotWeatherBase(StarPilotPanel):
         "get_value": lambda: f"{self._params.get_int('ReduceLateralAcceleration' + self._suffix)}%",
         "on_click": lambda: self._show_value_selector("ReduceLateralAcceleration" + self._suffix, 0, 99, 1, "%"),
         "icon": "toggle_icons/icon_longitudinal_tune.png",
-        "color": "#1BA1E2",
+        "color": "#597497",
       },
     ]
     self._rebuild_grid()
@@ -875,4 +875,4 @@ class StarPilotWeatherBase(StarPilotPanel):
         self._rebuild_grid()
 
     curr = self._params.get_int(key)
-    gui_app.set_modal_overlay(SliderDialog(tr(key), min_v, max_v, step, curr, on_close, unit=unit, color="#1BA1E2"))
+    gui_app.set_modal_overlay(AetherSliderDialog(tr(key), min_v, max_v, step, curr, on_close, unit=unit, color="#597497"))

selfdrive/ui/layouts/settings/starpilot/main_panel.py

@@ -22,7 +22,7 @@ from openpilot.selfdrive.ui.layouts.settings.starpilot.themes import StarPilotTh
 from openpilot.selfdrive.ui.layouts.settings.starpilot.vehicle import StarPilotVehicleSettingsLayout
 from openpilot.selfdrive.ui.layouts.settings.starpilot.wheel import StarPilotWheelLayout
 
-from openpilot.selfdrive.ui.layouts.settings.starpilot.metro import TileGrid, HubTile, RadioTileGroup
+from openpilot.selfdrive.ui.layouts.settings.starpilot.aethergrid import TileGrid, HubTile, RadioTileGroup
 
 STARPILOT_ICONS_DIR = "toggle_icons"
 
@@ -33,42 +33,42 @@ class StarPilotLayout(Widget):
       "icon": "icon_sound.png",
       "desc": "Adjust alert volumes and enable custom notifications.",
       "buttons": [("MANAGE", "SOUNDS", 0)],
-      "color": "#FF0097",
+      "color": "#F57371",
     },
     {
       "title": "Driving Controls",
       "icon": "icon_steering.png",
       "desc": "Fine-tune custom StarPilot acceleration, braking, and steering controls.",
       "buttons": [("DRIVING MODEL", "DRIVING_MODEL", 0), ("GAS / BRAKE", "LONGITUDINAL", 0), ("STEERING", "LATERAL", 0)],
-      "color": "#1BA1E2",
+      "color": "#597497",
     },
     {
       "title": "Navigation",
       "icon": "icon_navigate.png",
       "desc": "Download map data for the Speed Limit Controller.",
       "buttons": [("MAP DATA", "MAPS", 0), ("NAVIGATION", "NAVIGATION", 0)],
-      "color": "#8CBF26",
+      "color": "#68ACA3",
     },
     {
       "title": "System Settings",
       "icon": "icon_system.png",
       "desc": "Manage backups, device settings, screen options, storage, and tools to keep StarPilot running smoothly.",
       "buttons": [("DATA", "DATA", 0), ("DEVICE CONTROLS", "DEVICE", 0), ("UTILITIES", "UTILITIES", 0)],
-      "color": "#FA6800",
+      "color": "#D43D8A",
     },
     {
       "title": "Theme and Appearance",
       "icon": "icon_display.png",
       "desc": "Customize the look of the driving screen and interface, including themes!",
       "buttons": [("APPEARANCE", "VISUALS", 0), ("THEME", "THEMES", 0)],
-      "color": "#A200FF",
+      "color": "#542A71",
     },
     {
       "title": "Vehicle Settings",
       "icon": "icon_vehicle.png",
       "desc": "Configure car-specific options and steering wheel button mappings.",
       "buttons": [("VEHICLE SETTINGS", "VEHICLE", 0), ("WHEEL CONTROLS", "WHEEL", 0)],
-      "color": "#FFC40D",
+      "color": "#786088",
     },
   ]
 

selfdrive/ui/layouts/settings/starpilot/maps.py

@@ -37,7 +37,7 @@ class StarPilotMapRegionLayout(StarPilotPanel):
         "type": "toggle",
         "get_state": lambda k=key: self._get_map_state(k),
         "set_state": lambda s, k=key: self._set_map_state(k, s),
-        "color": "#8CBF26"
+        "color": "#68ACA3"
       })
     self._rebuild_grid()
 
@@ -62,13 +62,13 @@ class StarPilotMapCountriesLayout(StarPilotPanel):
   def __init__(self):
     super().__init__()
     self.CATEGORIES = [
-      {"title": tr_noop("Africa"), "panel": "africa", "icon": "toggle_icons/icon_map.png", "color": "#8CBF26"},
-      {"title": tr_noop("Antarctica"), "panel": "antarctica", "icon": "toggle_icons/icon_map.png", "color": "#8CBF26"},
-      {"title": tr_noop("Asia"), "panel": "asia", "icon": "toggle_icons/icon_map.png", "color": "#8CBF26"},
-      {"title": tr_noop("Europe"), "panel": "europe", "icon": "toggle_icons/icon_map.png", "color": "#8CBF26"},
-      {"title": tr_noop("North America"), "panel": "north_america", "icon": "toggle_icons/icon_map.png", "color": "#8CBF26"},
-      {"title": tr_noop("Oceania"), "panel": "oceania", "icon": "toggle_icons/icon_map.png", "color": "#8CBF26"},
-      {"title": tr_noop("South America"), "panel": "south_america", "icon": "toggle_icons/icon_map.png", "color": "#8CBF26"},
+      {"title": tr_noop("Africa"), "panel": "africa", "icon": "toggle_icons/icon_map.png", "color": "#68ACA3"},
+      {"title": tr_noop("Antarctica"), "panel": "antarctica", "icon": "toggle_icons/icon_map.png", "color": "#68ACA3"},
+      {"title": tr_noop("Asia"), "panel": "asia", "icon": "toggle_icons/icon_map.png", "color": "#68ACA3"},
+      {"title": tr_noop("Europe"), "panel": "europe", "icon": "toggle_icons/icon_map.png", "color": "#68ACA3"},
+      {"title": tr_noop("North America"), "panel": "north_america", "icon": "toggle_icons/icon_map.png", "color": "#68ACA3"},
+      {"title": tr_noop("Oceania"), "panel": "oceania", "icon": "toggle_icons/icon_map.png", "color": "#68ACA3"},
+      {"title": tr_noop("South America"), "panel": "south_america", "icon": "toggle_icons/icon_map.png", "color": "#68ACA3"},
     ]
     self._rebuild_grid()
 
@@ -76,11 +76,11 @@ class StarPilotMapStatesLayout(StarPilotPanel):
   def __init__(self):
     super().__init__()
     self.CATEGORIES = [
-      {"title": tr_noop("Midwest"), "panel": "midwest", "icon": "toggle_icons/icon_map.png", "color": "#8CBF26"},
-      {"title": tr_noop("Northeast"), "panel": "northeast", "icon": "toggle_icons/icon_map.png", "color": "#8CBF26"},
-      {"title": tr_noop("South"), "panel": "south", "icon": "toggle_icons/icon_map.png", "color": "#8CBF26"},
-      {"title": tr_noop("West"), "panel": "west", "icon": "toggle_icons/icon_map.png", "color": "#8CBF26"},
-      {"title": tr_noop("Territories"), "panel": "territories", "icon": "toggle_icons/icon_map.png", "color": "#8CBF26"},
+      {"title": tr_noop("Midwest"), "panel": "midwest", "icon": "toggle_icons/icon_map.png", "color": "#68ACA3"},
+      {"title": tr_noop("Northeast"), "panel": "northeast", "icon": "toggle_icons/icon_map.png", "color": "#68ACA3"},
+      {"title": tr_noop("South"), "panel": "south", "icon": "toggle_icons/icon_map.png", "color": "#68ACA3"},
+      {"title": tr_noop("West"), "panel": "west", "icon": "toggle_icons/icon_map.png", "color": "#68ACA3"},
+      {"title": tr_noop("Territories"), "panel": "territories", "icon": "toggle_icons/icon_map.png", "color": "#68ACA3"},
     ]
     self._rebuild_grid()
 
@@ -106,12 +106,12 @@ class StarPilotMapsLayout(StarPilotPanel):
     }
 
     self.CATEGORIES = [
-      {"title": tr_noop("Download Maps"), "type": "hub", "on_click": self._on_download, "icon": "toggle_icons/icon_map.png", "color": "#8CBF26"},
-      {"title": tr_noop("Auto Update Schedule"), "type": "value", "get_value": lambda: self._params.get("PreferredSchedule", encoding='utf-8') or "Manually", "on_click": self._on_schedule, "icon": "toggle_icons/icon_calendar.png", "color": "#8CBF26"},
-      {"title": tr_noop("Countries"), "panel": "countries", "icon": "toggle_icons/icon_map.png", "color": "#8CBF26"},
-      {"title": tr_noop("U.S. States"), "panel": "states", "icon": "toggle_icons/icon_map.png", "color": "#8CBF26"},
-      {"title": tr_noop("Storage Used"), "type": "value", "get_value": self._get_storage, "on_click": lambda: None, "icon": "toggle_icons/icon_system.png", "color": "#8CBF26"},
-      {"title": tr_noop("Remove Maps"), "type": "hub", "on_click": self._on_remove, "icon": "toggle_icons/icon_map.png", "color": "#8CBF26"},
+      {"title": tr_noop("Download Maps"), "type": "hub", "on_click": self._on_download, "icon": "toggle_icons/icon_map.png", "color": "#68ACA3"},
+      {"title": tr_noop("Auto Update Schedule"), "type": "value", "get_value": lambda: self._params.get("PreferredSchedule", encoding='utf-8') or "Manually", "on_click": self._on_schedule, "icon": "toggle_icons/icon_calendar.png", "color": "#68ACA3"},
+      {"title": tr_noop("Countries"), "panel": "countries", "icon": "toggle_icons/icon_map.png", "color": "#68ACA3"},
+      {"title": tr_noop("U.S. States"), "panel": "states", "icon": "toggle_icons/icon_map.png", "color": "#68ACA3"},
+      {"title": tr_noop("Storage Used"), "type": "value", "get_value": self._get_storage, "on_click": lambda: None, "icon": "toggle_icons/icon_system.png", "color": "#68ACA3"},
+      {"title": tr_noop("Remove Maps"), "type": "hub", "on_click": self._on_remove, "icon": "toggle_icons/icon_map.png", "color": "#68ACA3"},
     ]
     
     for name, panel in self._sub_panels.items():

selfdrive/ui/layouts/settings/starpilot/metro.py

@@ -1,348 +0,0 @@
-from __future__ import annotations
-import pyray as rl
-from collections.abc import Callable
-from openpilot.system.ui.lib.application import gui_app, FontWeight, MousePos
-from openpilot.system.ui.lib.multilang import tr
-from openpilot.system.ui.lib.text_measure import measure_text_cached
-from openpilot.system.ui.widgets import Widget, DialogResult
-
-def hex_to_color(hex_str: str) -> rl.Color:
-  hex_str = hex_str.lstrip('#')
-  return rl.Color(int(hex_str[0:2], 16), int(hex_str[2:4], 16), int(hex_str[4:6], 16), 255)
-
-class MetroTile(Widget):
-  def __init__(self, bg_color: rl.Color | str = rl.Color(54, 77, 239, 255), on_click: Callable | None = None):
-    super().__init__()
-    self.bg_color = hex_to_color(bg_color) if isinstance(bg_color, str) else bg_color
-    self.on_click = on_click
-    self._is_pressed = False
-
-  def _handle_mouse_press(self, mouse_pos: MousePos):
-    if rl.check_collision_point_rec(mouse_pos, self._rect):
-      self._is_pressed = True
-
-  def _handle_mouse_release(self, mouse_pos: MousePos):
-    if self._is_pressed:
-      if rl.check_collision_point_rec(mouse_pos, self._rect) and self.on_click:
-        self.on_click()
-      self._is_pressed = False
-
-  def _draw_text_fit(self, font: rl.Font, text: str, pos: rl.Vector2, max_width: float, font_size: float, align_right: bool = False):
-    """Draws text scaled down to fit within max_width if necessary."""
-    size = measure_text_cached(font, text, int(font_size))
-    actual_font_size = font_size
-    if size.x > max_width:
-      actual_font_size = font_size * (max_width / size.x)
-      render_width = max_width
-    else:
-      render_width = size.x
-    
-    nudge_y = (font_size - actual_font_size) / 2
-    draw_x = pos.x
-    if align_right:
-      draw_x = pos.x + max_width - render_width
-      
-    rl.draw_text_ex(font, text, rl.Vector2(draw_x, pos.y + nudge_y), actual_font_size, 0, rl.WHITE)
-
-  def _draw_watermark(self, rect: rl.Rectangle, icon: rl.Texture2D | None):
-    if not icon:
-      return
-    rl.begin_scissor_mode(int(rect.x), int(rect.y), int(rect.width), int(rect.height))
-    w_scale = 1.6 
-    iw, ih = icon.width * w_scale, icon.height * w_scale
-    ix = rect.x + rect.width - iw - 15
-    iy = rect.y + rect.height - ih - 15
-    rl.draw_texture_pro(icon, rl.Rectangle(0, 0, icon.width, icon.height), rl.Rectangle(ix, iy, iw, ih), rl.Vector2(0, 0), 0, rl.Color(255, 255, 255, 80))
-    rl.end_scissor_mode()
-
-  def _render(self, rect: rl.Rectangle):
-    pass
-
-
-class HubTile(MetroTile):
-  def __init__(self, title: str, desc: str, icon_path: str, on_click: Callable | None = None, starpilot_icon: bool = False, bg_color: rl.Color | str | None = None):
-    if bg_color:
-      super().__init__(bg_color=bg_color, on_click=on_click)
-    else:
-      super().__init__(on_click=on_click)
-    self.title = title
-    self.desc = desc
-    if icon_path:
-      if starpilot_icon: self._icon = gui_app.starpilot_texture(icon_path, 100, 100)
-      else: self._icon = gui_app.texture(icon_path, 100, 100)
-    else: self._icon = None
-    self._font_title = gui_app.font(FontWeight.BOLD)
-    self._font_desc = gui_app.font(FontWeight.NORMAL)
-
-  def _render(self, rect: rl.Rectangle):
-    self.set_rect(rect)
-    r, g, b = max(0, self.bg_color.r - 20), max(0, self.bg_color.g - 20), max(0, self.bg_color.b - 20)
-    color = rl.Color(r, g, b, 255) if self._is_pressed else self.bg_color
-    rl.draw_rectangle_rounded(rect, 0.15, 10, color)
-    self._draw_watermark(rect, self._icon)
-    padding = 30
-    if self._icon:
-      siw, sih = self._icon.width * 0.45, self._icon.height * 0.45
-      rl.draw_texture_pro(self._icon, rl.Rectangle(0, 0, self._icon.width, self._icon.height), rl.Rectangle(rect.x + padding, rect.y + padding, siw, sih), rl.Vector2(0, 0), 0, rl.WHITE)
-    title_x = rect.x + padding + (65 if self._icon else 0)
-    max_title_width = rect.width - (title_x - rect.x) - padding
-    self._draw_text_fit(self._font_title, self.title, rl.Vector2(title_x, rect.y + padding + 3), max_title_width, 42)
-
-
-class ToggleTile(MetroTile):
-  def __init__(self, title: str, get_state: Callable[[], bool], set_state: Callable[[bool], None], icon_path: str | None = None,
-               bg_color: rl.Color | str | None = None, desc: str = ""):
-    if bg_color: super().__init__(bg_color=bg_color)
-    else: super().__init__(bg_color=rl.Color(0, 163, 0, 255))
-    self.title = title
-    self.desc = desc
-    self.get_state = get_state
-    self.set_state = set_state
-    self._icon = gui_app.starpilot_texture(icon_path, 80, 80) if icon_path else None
-    self._font = gui_app.font(FontWeight.BOLD)
-    self._font_desc = gui_app.font(FontWeight.NORMAL)
-    self._active_color = self.bg_color
-    self._inactive_color = rl.Color(120, 120, 120, 255)
-
-  def _handle_mouse_release(self, mouse_pos: MousePos):
-    if self._is_pressed:
-      if rl.check_collision_point_rec(mouse_pos, self._rect):
-        self.set_state(not self.get_state())
-      self._is_pressed = False
-
-  def _render(self, rect: rl.Rectangle):
-    self.set_rect(rect)
-    active = self.get_state()
-    base_color = self._active_color if active else self._inactive_color
-    r, g, b = max(0, base_color.r - 20), max(0, base_color.g - 20), max(0, base_color.b - 20)
-    color = rl.Color(r, g, b, 255) if self._is_pressed else base_color
-    rl.draw_rectangle_rounded(rect, 0.15, 10, color)
-    self._draw_watermark(rect, self._icon)
-    padding = 25
-    if self._icon:
-      siw, sih = self._icon.width * 0.45, self._icon.height * 0.45
-      rl.draw_texture_pro(self._icon, rl.Rectangle(0, 0, self._icon.width, self._icon.height), rl.Rectangle(rect.x + padding, rect.y + padding, siw, sih), rl.Vector2(0, 0), 0, rl.WHITE)
-    title_x = rect.x + padding + (55 if self._icon else 0)
-    max_title_width = rect.width - (title_x - rect.x) - padding
-    self._draw_text_fit(self._font, self.title, rl.Vector2(title_x, rect.y + padding + 2), max_title_width, 35)
-    if self.desc:
-      self._draw_text_fit(self._font_desc, self.desc, rl.Vector2(title_x, rect.y + padding + 40), max_title_width, 22)
-    state_text = tr("ON") if active else tr("OFF")
-    ts = measure_text_cached(self._font, state_text, 30)
-    rl.draw_text_ex(self._font, state_text, rl.Vector2(rect.x + rect.width - ts.x - padding, rect.y + rect.height - 50), 30, 0, rl.WHITE)
-
-
-class ValueTile(MetroTile):
-  def __init__(self, title: str, get_value: Callable[[], str], on_click: Callable, icon_path: str | None = None,
-               bg_color: rl.Color | str | None = None, is_enabled: Callable[[], bool] | None = None, desc: str = ""):
-    super().__init__(bg_color=bg_color, on_click=on_click)
-    self.title = title
-    self.desc = desc
-    self.get_value = get_value
-    # Wire is_enabled into the parent Widget.enabled property
-    self._enabled = is_enabled or (lambda: True)
-    self._icon = gui_app.starpilot_texture(icon_path, 80, 80) if icon_path else None
-    self._font = gui_app.font(FontWeight.BOLD)
-    self._font_desc = gui_app.font(FontWeight.NORMAL)
-    self._active_color = self.bg_color
-    self._disabled_color = rl.Color(120, 120, 120, 255)
-
-  def _render(self, rect: rl.Rectangle):
-    self.set_rect(rect)
-    enabled = self.enabled
-    base_color = self._active_color if enabled else self._disabled_color
-    r, g, b = max(0, base_color.r - 20), max(0, base_color.g - 20), max(0, base_color.b - 20)
-    color = rl.Color(r, g, b, 255) if self._is_pressed and enabled else base_color
-    rl.draw_rectangle_rounded(rect, 0.15, 10, color)
-    self._draw_watermark(rect, self._icon)
-    padding = 25
-    if self._icon:
-      siw, sih = self._icon.width * 0.45, self._icon.height * 0.45
-      rl.draw_texture_pro(self._icon, rl.Rectangle(0, 0, self._icon.width, self._icon.height), rl.Rectangle(rect.x + padding, rect.y + padding, siw, sih), rl.Vector2(0, 0), 0, rl.WHITE)
-    title_x = rect.x + padding + (55 if self._icon else 0)
-    max_title_width = rect.width - (title_x - rect.x) - padding
-    self._draw_text_fit(self._font, self.title, rl.Vector2(title_x, rect.y + padding + 2), max_title_width, 35)
-    if self.desc:
-      self._draw_text_fit(self._font_desc, self.desc, rl.Vector2(title_x, rect.y + padding + 40), max_title_width, 22)
-
-    val_text = self.get_value()
-    # Bottom value: scale to fit if it's too long (common for Car Models)
-    max_val_width = rect.width - 2 * padding
-    val_pos = rl.Vector2(rect.x + padding, rect.y + rect.height - 55)
-    self._draw_text_fit(self._font, val_text, val_pos, max_val_width, 35, align_right=True)
-
-
-class MetroSlider(Widget):
-  def __init__(self, min_val: float, max_val: float, step: float, current_val: float, on_change: Callable[[float], None], unit: str = "", labels: dict[float, str] | None = None, color: rl.Color = rl.Color(54, 77, 239, 255)):
-    super().__init__()
-    self.min_val, self.max_val, self.step, self.current_val = min_val, max_val, step, current_val
-    self.on_change, self.unit, self.labels, self.color = on_change, unit, labels or {}, color
-    self._is_dragging = False
-    self._font = gui_app.font(FontWeight.BOLD)
-
-  def _handle_mouse_press(self, mouse_pos: MousePos):
-    if rl.check_collision_point_rec(mouse_pos, self._rect):
-      self._is_dragging = True
-      self._update_val_from_mouse(mouse_pos)
-
-  def _handle_mouse_release(self, mouse_pos: MousePos):
-    self._is_dragging = False
-
-  def _update_val_from_mouse(self, mouse_pos: MousePos):
-    rel_x = max(0, min(1, (mouse_pos.x - self._rect.x) / self._rect.width))
-    val = self.min_val + rel_x * (self.max_val - self.min_val)
-    snapped = max(self.min_val, min(self.max_val, self.min_val + round((val - self.min_val) / self.step) * self.step))
-    if snapped != self.current_val:
-      self.current_val = snapped
-      self.on_change(self.current_val)
-
-  def _render(self, rect: rl.Rectangle):
-    self.set_rect(rect)
-    if self._is_dragging: self._update_val_from_mouse(rl.get_mouse_position())
-    track_h = 20
-    track_rect = rl.Rectangle(rect.x, rect.y + (rect.height - track_h) / 2, rect.width, track_h)
-    rl.draw_rectangle_rounded(track_rect, 1.0, 10, rl.Color(60, 60, 60, 255))
-    fill_w = ((self.current_val - self.min_val) / (self.max_val - self.min_val)) * rect.width
-    rl.draw_rectangle_rounded(rl.Rectangle(rect.x, rect.y + (rect.height - track_h) / 2, fill_w, track_h), 1.0, 10, self.color)
-    thumb_w, thumb_h = 40, 60
-    thumb_x, thumb_y = rect.x + fill_w - thumb_w / 2, rect.y + (rect.height - thumb_h) / 2
-    rl.draw_rectangle_rounded(rl.Rectangle(thumb_x, thumb_y, thumb_w, thumb_h), 0.2, 10, rl.WHITE)
-    val_str = self.labels.get(self.current_val, f"{self.current_val:.2f}".rstrip('0').rstrip('.') + self.unit)
-    ts = measure_text_cached(self._font, val_str, 35)
-    rl.draw_text_ex(self._font, val_str, rl.Vector2(thumb_x + (thumb_w - ts.x) / 2, thumb_y - 45), 35, 0, rl.WHITE)
-
-
-class SliderDialog(Widget):
-  def __init__(self, title: str, min_val: float, max_val: float, step: float, current_val: float, on_close: Callable, unit: str = "", labels: dict[float, str] | None = None, color: rl.Color | str = "#FF0097"):
-    super().__init__()
-    self.title, self._user_callback = title, on_close
-    self._color = hex_to_color(color) if isinstance(color, str) else color
-    self._font_title, self._font_btn = gui_app.font(FontWeight.BOLD), gui_app.font(FontWeight.BOLD)
-    self._slider = MetroSlider(min_val, max_val, step, current_val, self._on_slider_change, unit, labels, self._color)
-    self._current_val, self._is_pressed_ok, self._is_pressed_cancel = current_val, False, False
-
-  def _on_slider_change(self, val):
-    self._current_val = val
-
-  def _handle_mouse_press(self, mouse_pos: MousePos):
-    self._slider._handle_mouse_press(mouse_pos)
-    if rl.check_collision_point_rec(mouse_pos, self._ok_rect): self._is_pressed_ok = True
-    if rl.check_collision_point_rec(mouse_pos, self._cancel_rect): self._is_pressed_cancel = True
-
-  def _handle_mouse_release(self, mouse_pos: MousePos):
-    self._slider._handle_mouse_release(mouse_pos)
-    if self._is_pressed_ok:
-      if rl.check_collision_point_rec(mouse_pos, self._ok_rect):
-        self._user_callback(DialogResult.CONFIRM, self._current_val)
-        gui_app.set_modal_overlay(None)
-      self._is_pressed_ok = False
-    if self._is_pressed_cancel:
-      if rl.check_collision_point_rec(mouse_pos, self._cancel_rect):
-        self._user_callback(DialogResult.CANCEL, self._current_val)
-        gui_app.set_modal_overlay(None)
-      self._is_pressed_cancel = False
-
-  def _render(self, rect: rl.Rectangle):
-    rl.draw_rectangle(0, 0, gui_app.width, gui_app.height, rl.Color(0, 0, 0, 160))
-    dialog_w, dialog_h = 1000, 500
-    dx, dy = rect.x + (rect.width - dialog_w) / 2, rect.y + (rect.height - dialog_h) / 2
-    self._ok_rect = rl.Rectangle(dx + dialog_w - 450, dy + dialog_h - 120, 350, 80)
-    self._cancel_rect = rl.Rectangle(dx + 100, dy + dialog_h - 120, 350, 80)
-    
-    d_rect = rl.Rectangle(dx, dy, dialog_w, dialog_h)
-    rl.draw_rectangle_rounded(d_rect, 0.05, 10, rl.Color(30, 30, 30, 255))
-    rl.draw_rectangle_rounded_lines(d_rect, 0.05, 10, self._color)
-    ts = measure_text_cached(self._font_title, self.title, 50)
-    rl.draw_text_ex(self._font_title, self.title, rl.Vector2(dx + (dialog_w - ts.x) / 2, dy + 40), 50, 0, rl.WHITE)
-    
-    slider_rect = rl.Rectangle(dx + 100, dy + 200, dialog_w - 200, 100)
-    self._slider.render(slider_rect)
-    
-    # Cancel Button
-    c_color = rl.Color(60, 60, 60, 255) if not self._is_pressed_cancel else rl.Color(40, 40, 40, 255)
-    rl.draw_rectangle_rounded(self._cancel_rect, 0.2, 10, c_color)
-    cts = measure_text_cached(self._font_btn, tr("CANCEL"), 35)
-    rl.draw_text_ex(self._font_btn, tr("CANCEL"), rl.Vector2(self._cancel_rect.x + (350 - cts.x) / 2, self._cancel_rect.y + (80 - cts.y) / 2), 35, 0, rl.WHITE)
-    
-    # OK Button
-    ok_color = self._color if not self._is_pressed_ok else rl.Color(max(0, self._color.r-40), max(0, self._color.g-40), max(0, self._color.b-40), 255)
-    rl.draw_rectangle_rounded(self._ok_rect, 0.2, 10, ok_color)
-    ots = measure_text_cached(self._font_btn, tr("OK"), 35)
-    rl.draw_text_ex(self._font_btn, tr("OK"), rl.Vector2(self._ok_rect.x + (350 - ots.x) / 2, self._ok_rect.y + (80 - ots.y) / 2), 35, 0, rl.WHITE)
-    
-    return DialogResult.NO_ACTION
-
-
-class RadioTileGroup(Widget):
-  def __init__(self, title: str, options: list[str], current_index: int, on_change: Callable):
-    super().__init__()
-    self.title, self.options, self.current_index, self.on_change = title, options, current_index, on_change
-    self._font, self._font_title = gui_app.font(FontWeight.BOLD), gui_app.font(FontWeight.NORMAL)
-    self._bg_color, self._active_color, self._inactive_color = rl.Color(41, 41, 41, 255), rl.Color(54, 77, 239, 255), rl.Color(80, 80, 80, 255)
-    self._pressed_index, self._option_rects = -1, []
-
-  def set_index(self, index: int): self.current_index = index
-
-  def _handle_mouse_press(self, mouse_pos: MousePos):
-    for i, r in enumerate(self._option_rects):
-      if rl.check_collision_point_rec(mouse_pos, r): self._pressed_index = i; return
-
-  def _handle_mouse_release(self, mouse_pos: MousePos):
-    if self._pressed_index != -1:
-      if rl.check_collision_point_rec(mouse_pos, self._option_rects[self._pressed_index]):
-        if self.current_index != self._pressed_index: self.current_index = self._pressed_index; self.on_change(self.current_index)
-      self._pressed_index = -1
-
-  def _render(self, rect: rl.Rectangle):
-    self.set_rect(rect)
-    self._option_rects.clear()
-    title_size = measure_text_cached(self._font_title, self.title, 40)
-    rl.draw_text_ex(self._font_title, self.title, rl.Vector2(rect.x, rect.y + (rect.height - title_size.y) / 2), 40, 0, rl.WHITE)
-    padding, option_w = 20, 200
-    start_x = rect.x + rect.width - (len(self.options) * (option_w + padding))
-    for i, opt in enumerate(self.options):
-      r = rl.Rectangle(start_x + i * (option_w + padding), rect.y, option_w, rect.height)
-      self._option_rects.append(r)
-      is_active = i == self.current_index
-      color = self._active_color if is_active else self._inactive_color
-      if i == self._pressed_index: color = rl.Color(max(0, color.r-20), max(0, color.g-20), max(0, color.b-20), 255)
-      rl.draw_rectangle_rounded(r, 0.15, 10, color)
-      ts = measure_text_cached(self._font, opt, 35)
-      rl.draw_text_ex(self._font, opt, rl.Vector2(r.x + (r.width - ts.x) / 2, r.y + (r.height - ts.y) / 2), 35, 0, rl.WHITE)
-
-
-class TileGrid(Widget):
-  def __init__(self, columns: int | None = None, padding: int = 20):
-    super().__init__()
-    self._columns, self.padding, self.tiles = columns, padding, []
-  def add_tile(self, tile: Widget): self.tiles.append(tile)
-  def clear(self): self.tiles.clear()
-  def _render(self, rect: rl.Rectangle):
-    self.set_rect(rect)
-    if not self.tiles: return
-    
-    # Snapshot the tiles list to prevent IndexError if on_click modifies self.tiles mid-loop
-    tiles_to_render = list(self.tiles)
-    count = len(tiles_to_render)
-    
-    if self._columns is not None: cols = self._columns
-    else:
-      if count == 1: cols = 1
-      elif count == 2: cols = 2
-      elif count == 3: cols = 3
-      elif count == 4: cols = 2
-      elif count <= 6: cols = 3
-      else: cols = 4
-    rows = (count + cols - 1) // cols
-    tile_h = (rect.height - (self.padding * (rows - 1))) / rows
-    
-    tile_idx = 0
-    for r in range(rows):
-      remaining = count - tile_idx
-      if remaining <= 0: break
-      items_in_row = min(cols, remaining)
-      row_tile_w = (rect.width - (self.padding * (items_in_row - 1))) / items_in_row
-      for c in range(items_in_row):
-        tile = tiles_to_render[tile_idx]
-        tile.render(rl.Rectangle(rect.x + c * (row_tile_w + self.padding), rect.y + r * (tile_h + self.padding), row_tile_w, tile_h))
-        tile_idx += 1

selfdrive/ui/layouts/settings/starpilot/navigation.py

@@ -15,24 +15,24 @@ class StarPilotNavigationLayout(StarPilotPanel):
       "mapbox": StarPilotMapboxLayout(),
     }
     self.CATEGORIES = [
-      {"title": tr_noop("Mapbox Credentials"), "panel": "mapbox", "icon": "toggle_icons/icon_navigate.png", "color": "#8CBF26"},
-      {"title": tr_noop("Setup Instructions"), "type": "hub", "on_click": self._on_setup, "icon": "toggle_icons/icon_navigate.png", "color": "#8CBF26"},
+      {"title": tr_noop("Mapbox Credentials"), "panel": "mapbox", "icon": "toggle_icons/icon_navigate.png", "color": "#68ACA3"},
+      {"title": tr_noop("Setup Instructions"), "type": "hub", "on_click": self._on_setup, "icon": "toggle_icons/icon_navigate.png", "color": "#68ACA3"},
       {
         "title": tr_noop("Speed Limit Filler"),
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("SpeedLimitFiller"),
         "set_state": lambda s: self._params.put_bool("SpeedLimitFiller", s),
         "icon": "toggle_icons/icon_speed_limit.png",
-        "color": "#8CBF26",
+        "color": "#68ACA3",
       },
-      {"title": tr_noop("Search Destination"), "type": "hub", "on_click": self._on_search, "icon": "toggle_icons/icon_navigate.png", "color": "#8CBF26"},
+      {"title": tr_noop("Search Destination"), "type": "hub", "on_click": self._on_search, "icon": "toggle_icons/icon_navigate.png", "color": "#68ACA3"},
       {
         "title": tr_noop("Home Address"),
         "type": "value",
         "get_value": lambda: self._params.get("HomeAddress", encoding='utf-8') or tr("Not set"),
         "on_click": self._on_home,
         "icon": "toggle_icons/icon_navigate.png",
-        "color": "#8CBF26",
+        "color": "#68ACA3",
       },
       {
         "title": tr_noop("Work Address"),
@@ -40,7 +40,7 @@ class StarPilotNavigationLayout(StarPilotPanel):
         "get_value": lambda: self._params.get("WorkAddress", encoding='utf-8') or tr("Not set"),
         "on_click": self._on_work,
         "icon": "toggle_icons/icon_navigate.png",
-        "color": "#8CBF26",
+        "color": "#68ACA3",
       },
     ]
     for name, panel in self._sub_panels.items():
@@ -92,14 +92,14 @@ class StarPilotMapboxLayout(StarPilotPanel):
         "type": "value",
         "get_value": self._get_key_display,
         "on_click": lambda: self._on_key("MapboxPublicKey", "pk."),
-        "color": "#8CBF26",
+        "color": "#68ACA3",
       },
       {
         "title": tr_noop("Secret Mapbox Key"),
         "type": "value",
         "get_value": self._get_secret_display,
         "on_click": lambda: self._on_key("MapboxSecretKey", "sk."),
-        "color": "#8CBF26",
+        "color": "#68ACA3",
       },
     ]
     self._rebuild_grid()

selfdrive/ui/layouts/settings/starpilot/panel.py

@@ -33,7 +33,7 @@ class StarPilotPanelInfo:
   instance: Widget
 
 
-from openpilot.selfdrive.ui.layouts.settings.starpilot.metro import TileGrid, HubTile, ToggleTile, ValueTile
+from openpilot.selfdrive.ui.layouts.settings.starpilot.aethergrid import TileGrid, HubTile, ToggleTile, ValueTile
 
 
 class StarPilotPanel(Widget):

selfdrive/ui/layouts/settings/starpilot/sounds.py

@@ -11,7 +11,7 @@ from openpilot.system.ui.widgets.selection_dialog import SelectionDialog
 from openpilot.selfdrive.ui.ui_state import ui_state
 from openpilot.selfdrive.ui.lib.starpilot_state import starpilot_state
 from openpilot.selfdrive.ui.layouts.settings.starpilot.panel import StarPilotPanel
-from openpilot.selfdrive.ui.layouts.settings.starpilot.metro import TileGrid, ToggleTile, SliderDialog
+from openpilot.selfdrive.ui.layouts.settings.starpilot.aethergrid import TileGrid, ToggleTile, AetherSliderDialog
 
 class StarPilotSoundsLayout(StarPilotPanel):
   COOLDOWN_KEY = "SwitchbackModeCooldown"
@@ -48,14 +48,14 @@ class StarPilotSoundsLayout(StarPilotPanel):
         "panel": "volume_control",
         "desc": tr_noop("Adjust volume levels for different alert types."),
         "icon": "toggle_icons/icon_mute.png",
-        "color": "#FF0097"
+        "color": "#F57371"
       },
       {
         "title": tr_noop("StarPilot Alerts"),
         "panel": "custom_alerts",
         "desc": tr_noop("Enable or disable specific StarPilot-only alerts."),
         "icon": "toggle_icons/icon_green_light.png",
-        "color": "#FF0097"
+        "color": "#F57371"
       },
     ]
 
@@ -110,7 +110,7 @@ class StarPilotVolumeControlLayout(StarPilotPanel):
         "get_value": get_val,
         "on_click": on_click,
         "icon": info["icon"],
-        "color": "#FF0097"
+        "color": "#F57371"
       })
 
     def get_cooldown_val():
@@ -127,7 +127,7 @@ class StarPilotVolumeControlLayout(StarPilotPanel):
       "get_value": get_cooldown_val,
       "on_click": self._show_cooldown_selector,
       "icon": self.COOLDOWN_INFO["icon"],
-      "color": "#FF0097"
+      "color": "#F57371"
     })
 
     self._rebuild_grid()
@@ -144,9 +144,9 @@ class StarPilotVolumeControlLayout(StarPilotPanel):
         self._test_sound(key)
         self._rebuild_grid()
 
-    gui_app.set_modal_overlay(SliderDialog(
+    gui_app.set_modal_overlay(AetherSliderDialog(
       tr(info["title"]), 0, 101, 1, current_v, on_close,
-      unit="%", labels={0: tr("Muted"), 101: tr("Auto")}, color="#FF0097"
+      unit="%", labels={0: tr("Muted"), 101: tr("Auto")}, color="#F57371"
     ))
 
   def _show_cooldown_selector(self):
@@ -157,9 +157,9 @@ class StarPilotVolumeControlLayout(StarPilotPanel):
         self._params.put_int(StarPilotSoundsLayout.COOLDOWN_KEY, int(val))
         self._rebuild_grid()
 
-    gui_app.set_modal_overlay(SliderDialog(
+    gui_app.set_modal_overlay(AetherSliderDialog(
       tr(self.COOLDOWN_INFO["title"]), 0, self.COOLDOWN_INFO["max"], 1, current_v, on_close,
-      unit=" min", labels={0: tr("Off")}, color="#FF0097"
+      unit=" min", labels={0: tr("Off")}, color="#F57371"
     ))
 
   @classmethod
@@ -226,7 +226,7 @@ class StarPilotCustomAlertsLayout(StarPilotPanel):
         "get_state": lambda k=key: self._params.get_bool(k),
         "set_state": lambda s, k=key: self._params.put_bool(k, s),
         "icon": info["icon"],
-        "color": "#FF0097",
+        "color": "#F57371",
         "key": key # Store for visibility check
       })
     self._rebuild_grid()

selfdrive/ui/layouts/settings/starpilot/themes.py

@@ -95,7 +95,7 @@ class StarPilotThemesLayout(StarPilotPanel):
         "title": tr_noop("Personalize openpilot"),
         "panel": "personalize",
         "icon": "toggle_icons/icon_frog.png",
-        "color": "#A200FF",
+        "color": "#542A71",
         "desc": tr_noop("Customize the overall look and feel."),
       },
       {
@@ -104,7 +104,7 @@ class StarPilotThemesLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("HolidayThemes"),
         "set_state": lambda s: self._params.put_bool("HolidayThemes", s),
         "icon": "toggle_icons/icon_calendar.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Rainbow Path"),
@@ -112,7 +112,7 @@ class StarPilotThemesLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("RainbowPath"),
         "set_state": lambda s: self._params.put_bool("RainbowPath", s),
         "icon": "toggle_icons/icon_rainbow.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Random Events"),
@@ -120,7 +120,7 @@ class StarPilotThemesLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("RandomEvents"),
         "set_state": lambda s: self._params.put_bool("RandomEvents", s),
         "icon": "toggle_icons/icon_random.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Random Themes"),
@@ -128,9 +128,9 @@ class StarPilotThemesLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("RandomThemes"),
         "set_state": lambda s: self._params.put_bool("RandomThemes", s),
         "icon": "toggle_icons/icon_random_themes.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
-      {"title": tr_noop("Startup Alert"), "type": "hub", "on_click": self._on_startup_alert, "color": "#A200FF"},
+      {"title": tr_noop("Startup Alert"), "type": "hub", "on_click": self._on_startup_alert, "color": "#542A71"},
     ]
 
     for name, panel in self._sub_panels.items():
@@ -175,49 +175,49 @@ class StarPilotPersonalizeLayout(StarPilotPanel):
         "type": "value",
         "get_value": lambda: self._get_theme_value("BootLogo"),
         "on_click": lambda: self._show_theme_selector("BootLogo"),
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Color Scheme"),
         "type": "value",
         "get_value": lambda: self._get_theme_value("ColorScheme"),
         "on_click": lambda: self._show_theme_selector("ColorScheme"),
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Distance Icons"),
         "type": "value",
         "get_value": lambda: self._get_theme_value("DistanceIconPack"),
         "on_click": lambda: self._show_theme_selector("DistanceIconPack"),
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Icon Pack"),
         "type": "value",
         "get_value": lambda: self._get_theme_value("IconPack"),
         "on_click": lambda: self._show_theme_selector("IconPack"),
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Turn Signals"),
         "type": "value",
         "get_value": lambda: self._get_theme_value("SignalAnimation"),
         "on_click": lambda: self._show_theme_selector("SignalAnimation"),
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Sound Pack"),
         "type": "value",
         "get_value": lambda: self._get_theme_value("SoundPack"),
         "on_click": lambda: self._show_theme_selector("SoundPack"),
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Steering Wheel"),
         "type": "value",
         "get_value": lambda: self._get_theme_value("WheelIcon"),
         "on_click": lambda: self._show_theme_selector("WheelIcon"),
-        "color": "#A200FF",
+        "color": "#542A71",
       },
     ]
     self._rebuild_grid()

selfdrive/ui/layouts/settings/starpilot/utilities.py

@@ -44,19 +44,19 @@ class StarPilotUtilitiesLayout(StarPilotPanel):
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("DebugMode"),
         "set_state": lambda s: self._params.put_bool("DebugMode", s),
-        "color": "#FA6800",
+        "color": "#D43D8A",
       },
-      {"title": tr_noop("Flash Panda"), "type": "hub", "on_click": self._on_flash_panda, "color": "#FA6800"},
+      {"title": tr_noop("Flash Panda"), "type": "hub", "on_click": self._on_flash_panda, "color": "#D43D8A"},
       {
         "title": tr_noop("Force Drive State"),
         "type": "value",
         "get_value": self._get_force_drive_state,
         "on_click": self._on_force_drive_state,
-        "color": "#FA6800",
+        "color": "#D43D8A",
       },
-      {"title": tr_noop("Report Issue"), "type": "hub", "on_click": self._on_report_issue, "color": "#FA6800"},
-      {"title": tr_noop("Reset to Defaults"), "type": "hub", "on_click": self._on_reset_defaults, "color": "#FA6800"},
-      {"title": tr_noop("Reset to Stock"), "type": "hub", "on_click": self._on_reset_stock, "color": "#FA6800"},
+      {"title": tr_noop("Report Issue"), "type": "hub", "on_click": self._on_report_issue, "color": "#D43D8A"},
+      {"title": tr_noop("Reset to Defaults"), "type": "hub", "on_click": self._on_reset_defaults, "color": "#D43D8A"},
+      {"title": tr_noop("Reset to Stock"), "type": "hub", "on_click": self._on_reset_stock, "color": "#D43D8A"},
     ]
     self._rebuild_grid()
 

selfdrive/ui/layouts/settings/starpilot/vehicle.py

@@ -10,7 +10,7 @@ from openpilot.system.ui.widgets import DialogResult
 from openpilot.system.ui.widgets.confirm_dialog import ConfirmDialog
 from openpilot.system.ui.widgets.selection_dialog import SelectionDialog
 from openpilot.selfdrive.ui.layouts.settings.starpilot.panel import StarPilotPanel
-from openpilot.selfdrive.ui.layouts.settings.starpilot.metro import SliderDialog, TileGrid, HubTile, ToggleTile, ValueTile
+from openpilot.selfdrive.ui.layouts.settings.starpilot.aethergrid import AetherSliderDialog, TileGrid, HubTile, ToggleTile, ValueTile
 from openpilot.selfdrive.ui.lib.starpilot_state import starpilot_state
 
 MAKE_TO_FOLDER = {
@@ -105,34 +105,34 @@ class StarPilotVehicleSettingsLayout(StarPilotPanel):
         "type": "value",
         "get_value": lambda: self._params.get("CarMake", encoding='utf-8') or tr("None"),
         "on_click": self._on_select_make,
-        "color": "#FFC40D",
+        "color": "#786088",
       },
       {
         "title": tr_noop("Car Model"),
         "type": "value",
         "get_value": lambda: self._params.get("CarModelName", encoding='utf-8') or tr("None"),
         "on_click": self._on_select_model,
-        "color": "#FFC40D",
+        "color": "#786088",
       },
       {
         "title": tr_noop("Disable Fingerprinting"),
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("ForceFingerprint"),
         "set_state": lambda s: self._params.put_bool("ForceFingerprint", s),
-        "color": "#FFC40D",
+        "color": "#786088",
       },
       {
         "title": tr_noop("Disable openpilot Long"),
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("DisableOpenpilotLongitudinal"),
         "set_state": self._on_disable_long,
-        "color": "#FFC40D",
+        "color": "#786088",
       },
-      {"title": tr_noop("GM Settings"), "panel": "gm", "icon": "toggle_icons/icon_vehicle.png", "color": "#FFC40D", "key": "gm"},
-      {"title": tr_noop("HKG Settings"), "panel": "hkg", "icon": "toggle_icons/icon_vehicle.png", "color": "#FFC40D", "key": "hkg"},
-      {"title": tr_noop("Subaru Settings"), "panel": "subaru", "icon": "toggle_icons/icon_vehicle.png", "color": "#FFC40D", "key": "subaru"},
-      {"title": tr_noop("Toyota Settings"), "panel": "toyota", "icon": "toggle_icons/icon_vehicle.png", "color": "#FFC40D", "key": "toyota"},
-      {"title": tr_noop("Vehicle Info"), "panel": "info", "icon": "toggle_icons/icon_vehicle.png", "color": "#FFC40D"},
+      {"title": tr_noop("GM Settings"), "panel": "gm", "icon": "toggle_icons/icon_vehicle.png", "color": "#786088", "key": "gm"},
+      {"title": tr_noop("HKG Settings"), "panel": "hkg", "icon": "toggle_icons/icon_vehicle.png", "color": "#786088", "key": "hkg"},
+      {"title": tr_noop("Subaru Settings"), "panel": "subaru", "icon": "toggle_icons/icon_vehicle.png", "color": "#786088", "key": "subaru"},
+      {"title": tr_noop("Toyota Settings"), "panel": "toyota", "icon": "toggle_icons/icon_vehicle.png", "color": "#786088", "key": "toyota"},
+      {"title": tr_noop("Vehicle Info"), "panel": "info", "icon": "toggle_icons/icon_vehicle.png", "color": "#786088"},
     ]
 
     for name, panel in self._sub_panels.items():
@@ -248,7 +248,7 @@ class StarPilotGMVehicleLayout(StarPilotPanel):
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("GMPedalLongitudinal"),
         "set_state": lambda s: self._params.put_bool("GMPedalLongitudinal", s),
-        "color": "#FFC40D",
+        "color": "#786088",
         "key": "GMPedalLongitudinal",
       },
       {
@@ -256,7 +256,7 @@ class StarPilotGMVehicleLayout(StarPilotPanel):
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("LongPitch"),
         "set_state": lambda s: self._params.put_bool("LongPitch", s),
-        "color": "#FFC40D",
+        "color": "#786088",
         "key": "LongPitch",
       },
       {
@@ -264,14 +264,14 @@ class StarPilotGMVehicleLayout(StarPilotPanel):
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("RemoteStartBootsComma"),
         "set_state": lambda s: self._params.put_bool("RemoteStartBootsComma", s),
-        "color": "#FFC40D",
+        "color": "#786088",
       },
       {
         "title": tr_noop("Volt SNG Hack"),
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("VoltSNG"),
         "set_state": lambda s: self._params.put_bool("VoltSNG", s),
-        "color": "#FFC40D",
+        "color": "#786088",
         "key": "VoltSNG",
       },
     ]
@@ -310,7 +310,7 @@ class StarPilotHKGVehicleLayout(StarPilotPanel):
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("TacoTuneHacks"),
         "set_state": lambda s: self._params.put_bool("TacoTuneHacks", s),
-        "color": "#FFC40D",
+        "color": "#786088",
         "key": "TacoTuneHacks",
       },
     ]
@@ -347,7 +347,7 @@ class StarPilotSubaruVehicleLayout(StarPilotPanel):
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("SubaruSNG"),
         "set_state": lambda s: self._params.put_bool("SubaruSNG", s),
-        "color": "#FFC40D",
+        "color": "#786088",
       },
     ]
     self._rebuild_grid()
@@ -362,35 +362,35 @@ class StarPilotToyotaVehicleLayout(StarPilotPanel):
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("LockDoors"),
         "set_state": lambda s: self._params.put_bool("LockDoors", s),
-        "color": "#FFC40D",
+        "color": "#786088",
       },
       {
         "title": tr_noop("Auto Unlock Doors"),
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("UnlockDoors"),
         "set_state": lambda s: self._params.put_bool("UnlockDoors", s),
-        "color": "#FFC40D",
+        "color": "#786088",
       },
       {
         "title": tr_noop("Lock Doors Timer"),
         "type": "value",
         "get_value": lambda: _lock_doors_timer_labels().get(self._params.get_int('LockDoorsTimer'), f"{self._params.get_int('LockDoorsTimer')}s"),
         "on_click": self._show_lock_timer_selector,
-        "color": "#FFC40D",
+        "color": "#786088",
       },
       {
         "title": tr_noop("Dashboard Speed Offset"),
         "type": "value",
         "get_value": lambda: f"{self._params.get_float('ClusterOffset'):.3f}x",
         "on_click": self._show_offset_selector,
-        "color": "#FFC40D",
+        "color": "#786088",
       },
       {
         "title": tr_noop("Stop-and-Go Hack"),
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("SNGHack"),
         "set_state": lambda s: self._params.put_bool("SNGHack", s),
-        "color": "#FFC40D",
+        "color": "#786088",
         "key": "SNGHack",
       },
       {
@@ -398,7 +398,7 @@ class StarPilotToyotaVehicleLayout(StarPilotPanel):
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("FrogsGoMoosTweak"),
         "set_state": lambda s: self._params.put_bool("FrogsGoMoosTweak", s),
-        "color": "#FFC40D",
+        "color": "#786088",
         "key": "FrogsGoMoosTweak",
       },
     ]
@@ -441,7 +441,7 @@ class StarPilotToyotaVehicleLayout(StarPilotPanel):
         self._rebuild_grid()
 
     gui_app.set_modal_overlay(
-      SliderDialog(tr("Lock Doors Timer"), 0, 300, 5, self._params.get_int("LockDoorsTimer"), on_close, labels=_lock_doors_timer_labels(), color="#FFC40D")
+      AetherSliderDialog(tr("Lock Doors Timer"), 0, 300, 5, self._params.get_int("LockDoorsTimer"), on_close, labels=_lock_doors_timer_labels(), color="#786088")
     )
 
   def _show_offset_selector(self):
@@ -451,7 +451,7 @@ class StarPilotToyotaVehicleLayout(StarPilotPanel):
         self._rebuild_grid()
 
     gui_app.set_modal_overlay(
-      SliderDialog(tr("Dashboard Speed Offset"), 1.000, 1.050, 0.001, self._params.get_float("ClusterOffset"), on_close, unit="x", color="#FFC40D")
+      AetherSliderDialog(tr("Dashboard Speed Offset"), 1.000, 1.050, 0.001, self._params.get_float("ClusterOffset"), on_close, unit="x", color="#786088")
     )
 
 
@@ -464,21 +464,21 @@ class StarPilotVehicleInfoLayout(StarPilotPanel):
         "type": "value",
         "get_value": lambda: tr("Yes") if starpilot_state.car_state.hasRadar else tr("No"),
         "on_click": lambda: None,
-        "color": "#FFC40D",
+        "color": "#786088",
       },
       {
         "title": tr_noop("Longitudinal Support"),
         "type": "value",
         "get_value": lambda: tr("Yes") if starpilot_state.car_state.hasOpenpilotLongitudinal else tr("No"),
         "on_click": lambda: None,
-        "color": "#FFC40D",
+        "color": "#786088",
       },
       {
         "title": tr_noop("Blind Spot Support"),
         "type": "value",
         "get_value": lambda: tr("Yes") if starpilot_state.car_state.hasBSM else tr("No"),
         "on_click": lambda: None,
-        "color": "#FFC40D",
+        "color": "#786088",
       },
       {
         "title": tr_noop("Hardware Detected"),
@@ -498,28 +498,28 @@ class StarPilotVehicleInfoLayout(StarPilotPanel):
           or tr("None")
         ),
         "on_click": lambda: None,
-        "color": "#FFC40D",
+        "color": "#786088",
       },
       {
         "title": tr_noop("Pedal Support"),
         "type": "value",
         "get_value": lambda: tr("Yes") if starpilot_state.car_state.canUsePedal else tr("No"),
         "on_click": lambda: None,
-        "color": "#FFC40D",
+        "color": "#786088",
       },
       {
         "title": tr_noop("SDSU Support"),
         "type": "value",
         "get_value": lambda: tr("Yes") if starpilot_state.car_state.canUseSDSU else tr("No"),
         "on_click": lambda: None,
-        "color": "#FFC40D",
+        "color": "#786088",
       },
       {
         "title": tr_noop("SNG Support"),
         "type": "value",
         "get_value": lambda: tr("Yes") if starpilot_state.car_state.hasSNG else tr("No"),
         "on_click": lambda: None,
-        "color": "#FFC40D",
+        "color": "#786088",
       },
     ]
     self._rebuild_grid()

selfdrive/ui/layouts/settings/starpilot/visuals.py

@@ -5,7 +5,7 @@ from openpilot.system.ui.lib.multilang import tr, tr_noop
 from openpilot.system.ui.widgets import DialogResult
 from openpilot.system.ui.widgets.selection_dialog import SelectionDialog
 from openpilot.selfdrive.ui.layouts.settings.starpilot.panel import StarPilotPanel
-from openpilot.selfdrive.ui.layouts.settings.starpilot.metro import TileGrid, ToggleTile, SliderDialog
+from openpilot.selfdrive.ui.layouts.settings.starpilot.aethergrid import TileGrid, ToggleTile, AetherSliderDialog
 
 
 class StarPilotThemesLayout(StarPilotPanel):
@@ -15,14 +15,14 @@ class StarPilotThemesLayout(StarPilotPanel):
       "personalize": StarPilotPersonalizeLayout(),
     }
     self.CATEGORIES = [
-      {"title": tr_noop("Personalize openpilot"), "panel": "personalize", "icon": "toggle_icons/icon_frog.png", "color": "#A200FF"},
+      {"title": tr_noop("Personalize openpilot"), "panel": "personalize", "icon": "toggle_icons/icon_frog.png", "color": "#542A71"},
       {
         "title": tr_noop("Holiday Themes"),
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("HolidayThemes"),
         "set_state": lambda s: self._params.put_bool("HolidayThemes", s),
         "icon": "toggle_icons/icon_calendar.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Rainbow Path"),
@@ -30,7 +30,7 @@ class StarPilotThemesLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("RainbowPath"),
         "set_state": lambda s: self._params.put_bool("RainbowPath", s),
         "icon": "toggle_icons/icon_rainbow.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Random Events"),
@@ -38,7 +38,7 @@ class StarPilotThemesLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("RandomEvents"),
         "set_state": lambda s: self._params.put_bool("RandomEvents", s),
         "icon": "toggle_icons/icon_random.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Random Themes"),
@@ -46,7 +46,7 @@ class StarPilotThemesLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("RandomThemes"),
         "set_state": lambda s: self._params.put_bool("RandomThemes", s),
         "icon": "toggle_icons/icon_random_themes.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
     ]
     for name, panel in self._sub_panels.items():
@@ -61,13 +61,13 @@ class StarPilotPersonalizeLayout(StarPilotPanel):
   def __init__(self):
     super().__init__()
     self.CATEGORIES = [
-      {"title": tr_noop("Boot Logo"), "type": "hub", "on_click": lambda: self._show_theme_selector("BootLogo"), "color": "#A200FF"},
-      {"title": tr_noop("Color Scheme"), "type": "hub", "on_click": lambda: self._show_theme_selector("ColorScheme"), "color": "#A200FF"},
-      {"title": tr_noop("Distance Icons"), "type": "hub", "on_click": lambda: self._show_theme_selector("DistanceIconPack"), "color": "#A200FF"},
-      {"title": tr_noop("Icon Pack"), "type": "hub", "on_click": lambda: self._show_theme_selector("IconPack"), "color": "#A200FF"},
-      {"title": tr_noop("Turn Signals"), "type": "hub", "on_click": lambda: self._show_theme_selector("SignalAnimation"), "color": "#A200FF"},
-      {"title": tr_noop("Sound Pack"), "type": "hub", "on_click": lambda: self._show_theme_selector("SoundPack"), "color": "#A200FF"},
-      {"title": tr_noop("Steering Wheel"), "type": "hub", "on_click": lambda: self._show_theme_selector("WheelIcon"), "color": "#A200FF"},
+      {"title": tr_noop("Boot Logo"), "type": "hub", "on_click": lambda: self._show_theme_selector("BootLogo"), "color": "#542A71"},
+      {"title": tr_noop("Color Scheme"), "type": "hub", "on_click": lambda: self._show_theme_selector("ColorScheme"), "color": "#542A71"},
+      {"title": tr_noop("Distance Icons"), "type": "hub", "on_click": lambda: self._show_theme_selector("DistanceIconPack"), "color": "#542A71"},
+      {"title": tr_noop("Icon Pack"), "type": "hub", "on_click": lambda: self._show_theme_selector("IconPack"), "color": "#542A71"},
+      {"title": tr_noop("Turn Signals"), "type": "hub", "on_click": lambda: self._show_theme_selector("SignalAnimation"), "color": "#542A71"},
+      {"title": tr_noop("Sound Pack"), "type": "hub", "on_click": lambda: self._show_theme_selector("SoundPack"), "color": "#542A71"},
+      {"title": tr_noop("Steering Wheel"), "type": "hub", "on_click": lambda: self._show_theme_selector("WheelIcon"), "color": "#542A71"},
     ]
     self._rebuild_grid()
 
@@ -94,11 +94,11 @@ class StarPilotVisualsLayout(StarPilotPanel):
       "qol": StarPilotVisualQOLLayout(),
     }
     self.CATEGORIES = [
-      {"title": tr_noop("Advanced UI Controls"), "panel": "advanced", "icon": "toggle_icons/icon_advanced_device.png", "color": "#A200FF"},
-      {"title": tr_noop("Driving Screen Widgets"), "panel": "widgets", "icon": "toggle_icons/icon_display.png", "color": "#A200FF"},
-      {"title": tr_noop("Model UI"), "panel": "model", "icon": "toggle_icons/icon_road.png", "color": "#A200FF"},
-      {"title": tr_noop("Navigation Widgets"), "panel": "navigation", "icon": "toggle_icons/icon_map.png", "color": "#A200FF"},
-      {"title": tr_noop("Quality of Life"), "panel": "qol", "icon": "toggle_icons/icon_quality_of_life.png", "color": "#A200FF"},
+      {"title": tr_noop("Advanced UI Controls"), "panel": "advanced", "icon": "toggle_icons/icon_advanced_device.png", "color": "#542A71"},
+      {"title": tr_noop("Driving Screen Widgets"), "panel": "widgets", "icon": "toggle_icons/icon_display.png", "color": "#542A71"},
+      {"title": tr_noop("Model UI"), "panel": "model", "icon": "toggle_icons/icon_road.png", "color": "#542A71"},
+      {"title": tr_noop("Navigation Widgets"), "panel": "navigation", "icon": "toggle_icons/icon_map.png", "color": "#542A71"},
+      {"title": tr_noop("Quality of Life"), "panel": "qol", "icon": "toggle_icons/icon_quality_of_life.png", "color": "#542A71"},
     ]
     for name, panel in self._sub_panels.items():
       if hasattr(panel, 'set_navigate_callback'):
@@ -119,7 +119,7 @@ class StarPilotAdvancedVisualsLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("HideSpeed"),
         "set_state": lambda s: self._params.put_bool("HideSpeed", s),
         "icon": "toggle_icons/icon_display.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Hide Lead Marker"),
@@ -128,7 +128,7 @@ class StarPilotAdvancedVisualsLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("HideLeadMarker"),
         "set_state": lambda s: self._params.put_bool("HideLeadMarker", s),
         "icon": "toggle_icons/icon_display.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Hide Max Speed"),
@@ -137,7 +137,7 @@ class StarPilotAdvancedVisualsLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("HideMaxSpeed"),
         "set_state": lambda s: self._params.put_bool("HideMaxSpeed", s),
         "icon": "toggle_icons/icon_display.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Hide Alerts"),
@@ -146,7 +146,7 @@ class StarPilotAdvancedVisualsLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("HideAlerts"),
         "set_state": lambda s: self._params.put_bool("HideAlerts", s),
         "icon": "toggle_icons/icon_display.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Hide Speed Limit"),
@@ -155,7 +155,7 @@ class StarPilotAdvancedVisualsLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("HideSpeedLimit"),
         "set_state": lambda s: self._params.put_bool("HideSpeedLimit", s),
         "icon": "toggle_icons/icon_display.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Wheel Speed"),
@@ -164,7 +164,7 @@ class StarPilotAdvancedVisualsLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("WheelSpeed"),
         "set_state": lambda s: self._params.put_bool("WheelSpeed", s),
         "icon": "toggle_icons/icon_display.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
     ]
     self._rebuild_grid()
@@ -201,7 +201,7 @@ class StarPilotVisualWidgetsLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("AccelerationPath"),
         "set_state": lambda s: self._params.put_bool("AccelerationPath", s),
         "icon": "toggle_icons/icon_road.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Adjacent Lanes"),
@@ -210,7 +210,7 @@ class StarPilotVisualWidgetsLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("AdjacentPath"),
         "set_state": lambda s: self._params.put_bool("AdjacentPath", s),
         "icon": "toggle_icons/icon_road.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Blind Spot Path"),
@@ -219,7 +219,7 @@ class StarPilotVisualWidgetsLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("BlindSpotPath"),
         "set_state": lambda s: self._params.put_bool("BlindSpotPath", s),
         "icon": "toggle_icons/icon_road.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Compass"),
@@ -228,7 +228,7 @@ class StarPilotVisualWidgetsLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("Compass"),
         "set_state": lambda s: self._params.put_bool("Compass", s),
         "icon": "toggle_icons/icon_navigate.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Personality Button"),
@@ -237,7 +237,7 @@ class StarPilotVisualWidgetsLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("OnroadDistanceButton"),
         "set_state": lambda s: self._params.put_bool("OnroadDistanceButton", s),
         "icon": "toggle_icons/icon_personality.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Pedal Indicators"),
@@ -246,7 +246,7 @@ class StarPilotVisualWidgetsLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("PedalsOnUI"),
         "set_state": lambda s: self._params.put_bool("PedalsOnUI", s),
         "icon": "toggle_icons/icon_display.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Dynamic Pedals"),
@@ -255,7 +255,7 @@ class StarPilotVisualWidgetsLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("DynamicPedalsOnUI"),
         "set_state": lambda s: self._set_exclusive_pedal("DynamicPedalsOnUI", "StaticPedalsOnUI", s),
         "icon": "toggle_icons/icon_display.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Static Pedals"),
@@ -264,7 +264,7 @@ class StarPilotVisualWidgetsLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("StaticPedalsOnUI"),
         "set_state": lambda s: self._set_exclusive_pedal("StaticPedalsOnUI", "DynamicPedalsOnUI", s),
         "icon": "toggle_icons/icon_display.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Rotating Wheel"),
@@ -273,7 +273,7 @@ class StarPilotVisualWidgetsLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("RotatingWheel"),
         "set_state": lambda s: self._params.put_bool("RotatingWheel", s),
         "icon": "toggle_icons/icon_steering.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
     ]
     self._rebuild_grid()
@@ -326,7 +326,7 @@ class StarPilotModelUILayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("DynamicPathWidth"),
         "set_state": lambda s: self._params.put_bool("DynamicPathWidth", s),
         "icon": "toggle_icons/icon_road.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Lane Line Width"),
@@ -335,7 +335,7 @@ class StarPilotModelUILayout(StarPilotPanel):
         "get_value": lambda: self._get_lane_lines_display(),
         "on_click": lambda: self._show_int_selector("LaneLinesWidth", 0, 24, self._get_lane_lines_unit()),
         "icon": "toggle_icons/icon_road.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Path Edge Width"),
@@ -344,7 +344,7 @@ class StarPilotModelUILayout(StarPilotPanel):
         "get_value": lambda: f"{self._params.get_int('PathEdgeWidth')}%",
         "on_click": lambda: self._show_int_selector("PathEdgeWidth", 0, 100, "%"),
         "icon": "toggle_icons/icon_road.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Path Width"),
@@ -353,7 +353,7 @@ class StarPilotModelUILayout(StarPilotPanel):
         "get_value": lambda: self._get_path_width_display(),
         "on_click": lambda: self._show_path_width_selector(),
         "icon": "toggle_icons/icon_road.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Road Edge Width"),
@@ -362,7 +362,7 @@ class StarPilotModelUILayout(StarPilotPanel):
         "get_value": lambda: self._get_road_edges_display(),
         "on_click": lambda: self._show_int_selector("RoadEdgesWidth", 0, 24, self._get_road_edges_unit()),
         "icon": "toggle_icons/icon_road.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
     ]
     self._rebuild_grid()
@@ -406,7 +406,7 @@ class StarPilotModelUILayout(StarPilotPanel):
         self._params.put_int(key, int(val))
         self._rebuild_grid()
 
-    gui_app.set_modal_overlay(SliderDialog(tr(key), min_v, max_v, 1, self._params.get_int(key), on_close, unit=unit, color="#A200FF"))
+    gui_app.set_modal_overlay(AetherSliderDialog(tr(key), min_v, max_v, 1, self._params.get_int(key), on_close, unit=unit, color="#542A71"))
 
   def _show_float_selector(self, key, min_v, max_v, step, unit="", convert=None, unconvert=None):
     current = self._params.get_float(key)
@@ -421,7 +421,7 @@ class StarPilotModelUILayout(StarPilotPanel):
         self._params.put_float(key, v)
         self._rebuild_grid()
 
-    gui_app.set_modal_overlay(SliderDialog(tr(key), min_v, max_v, step, current, on_close, unit=unit, color="#A200FF"))
+    gui_app.set_modal_overlay(AetherSliderDialog(tr(key), min_v, max_v, step, current, on_close, unit=unit, color="#542A71"))
 
 
 class StarPilotNavigationVisualsLayout(StarPilotPanel):
@@ -434,7 +434,7 @@ class StarPilotNavigationVisualsLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("RoadNameUI"),
         "set_state": lambda s: self._params.put_bool("RoadNameUI", s),
         "icon": "toggle_icons/icon_navigate.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Speed Limits"),
@@ -442,7 +442,7 @@ class StarPilotNavigationVisualsLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("ShowSpeedLimits"),
         "set_state": lambda s: self._params.put_bool("ShowSpeedLimits", s),
         "icon": "toggle_icons/icon_speed_limit.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Mapbox Limits"),
@@ -450,7 +450,7 @@ class StarPilotNavigationVisualsLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("SLCMapboxFiller"),
         "set_state": lambda s: self._params.put_bool("SLCMapboxFiller", s),
         "icon": "toggle_icons/icon_speed_limit.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Vienna Signs"),
@@ -458,7 +458,7 @@ class StarPilotNavigationVisualsLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("UseVienna"),
         "set_state": lambda s: self._params.put_bool("UseVienna", s),
         "icon": "toggle_icons/icon_speed_limit.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
     ]
     self._rebuild_grid()
@@ -476,7 +476,7 @@ class StarPilotVisualQOLLayout(StarPilotPanel):
         "get_value": lambda: tr(self.CAMERA_VIEWS[self._params.get_int('CameraView')]),
         "on_click": lambda: self._show_camera_view_selector(),
         "icon": "toggle_icons/icon_display.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Driver Camera"),
@@ -484,7 +484,7 @@ class StarPilotVisualQOLLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("DriverCamera"),
         "set_state": lambda s: self._params.put_bool("DriverCamera", s),
         "icon": "toggle_icons/icon_display.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
       {
         "title": tr_noop("Stopped Timer"),
@@ -492,7 +492,7 @@ class StarPilotVisualQOLLayout(StarPilotPanel):
         "get_state": lambda: self._params.get_bool("StoppedTimer"),
         "set_state": lambda s: self._params.put_bool("StoppedTimer", s),
         "icon": "toggle_icons/icon_display.png",
-        "color": "#A200FF",
+        "color": "#542A71",
       },
     ]
     self._rebuild_grid()

selfdrive/ui/layouts/settings/starpilot/wheel.py

@@ -30,28 +30,28 @@ class StarPilotWheelLayout(StarPilotPanel):
         "type": "toggle",
         "get_state": lambda: self._params.get_bool("RemapCancelToDistance"),
         "set_state": self._set_cancel_remap_state,
-        "color": "#FFC40D",
+        "color": "#786088",
       },
       {
         "title": tr_noop("Distance Button"),
         "type": "value",
         "get_value": lambda: self._get_action_name("DistanceButtonControl"),
         "on_click": lambda: self._show_action_picker("DistanceButtonControl"),
-        "color": "#FFC40D",
+        "color": "#786088",
       },
       {
         "title": tr_noop("Distance (Long Press)"),
         "type": "value",
         "get_value": lambda: self._get_action_name("LongDistanceButtonControl"),
         "on_click": lambda: self._show_action_picker("LongDistanceButtonControl"),
-        "color": "#FFC40D",
+        "color": "#786088",
       },
       {
         "title": tr_noop("Distance (Very Long)"),
         "type": "value",
         "get_value": lambda: self._get_action_name("VeryLongDistanceButtonControl"),
         "on_click": lambda: self._show_action_picker("VeryLongDistanceButtonControl"),
-        "color": "#FFC40D",
+        "color": "#786088",
       },
       {
         "title": tr_noop("LKAS Button"),
@@ -60,7 +60,7 @@ class StarPilotWheelLayout(StarPilotPanel):
         "on_click": lambda: self._show_action_picker("LKASButtonControl"),
         "is_enabled": lambda: not self._lkas_locked(),
         "key": "LKASButtonControl",
-        "color": "#FFC40D",
+        "color": "#786088",
       },
     ]
     self._rebuild_grid()
@@ -122,7 +122,7 @@ class StarPilotWheelLayout(StarPilotPanel):
     if self._lkas_locked():
       self._force_lkas_no_action()
     if self._tile_grid is None:
-      self._tile_grid = __import__('openpilot.selfdrive.ui.layouts.settings.starpilot.metro', fromlist=['TileGrid']).TileGrid(columns=None, padding=20)
+      self._tile_grid = __import__('openpilot.selfdrive.ui.layouts.settings.starpilot.aethergrid', fromlist=['TileGrid']).TileGrid(columns=None, padding=20)
     self._tile_grid.clear()
     cs = starpilot_state.car_state
     for cat in self.CATEGORIES:
@@ -134,11 +134,11 @@ class StarPilotWheelLayout(StarPilotPanel):
         continue
       tile_type = cat.get("type", "hub")
       if tile_type == "toggle":
-        from openpilot.selfdrive.ui.layouts.settings.starpilot.metro import ToggleTile
+        from openpilot.selfdrive.ui.layouts.settings.starpilot.aethergrid import ToggleTile
 
         tile = ToggleTile(title=tr(cat["title"]), get_state=cat["get_state"], set_state=cat["set_state"], bg_color=cat.get("color"))
       elif tile_type == "value":
-        from openpilot.selfdrive.ui.layouts.settings.starpilot.metro import ValueTile
+        from openpilot.selfdrive.ui.layouts.settings.starpilot.aethergrid import ValueTile
 
         tile = ValueTile(title=tr(cat["title"]), get_value=cat["get_value"], on_click=cat["on_click"], bg_color=cat.get("color"), is_enabled=cat.get("is_enabled"))
       else: