From 7ed1d02271c7b1ed38e6f44925b7393bb1a39458 Mon Sep 17 00:00:00 2001
From: claude <claude@verso>
Date: Thu, 11 Jun 2026 16:44:44 +0000
Subject: [PATCH] =?UTF-8?q?Lumi=C3=A8re:=20replace=20pill=20toggle=20with?=
 =?UTF-8?q?=20rounded-square=20+=20sliding=20indicator?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Code/Visual editor toggle now uses a teal sliding indicator (::before
pseudo-element) that glides between tabs via translateX instead of the
plain background-color crossfade. Container and labels get border-radius:
10px/7px to match the rest of the Lumière toolbar's rounded-square style.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../stylesheets/pages/editor/ide-lumiere.scss | 65 +++++++++++++++++++
 1 file changed, 65 insertions(+)

diff --git a/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss b/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss
index 1854ab44f0..b3dd8f6f19 100644
--- a/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss
+++ b/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss
@@ -276,3 +276,68 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
     box-shadow: 0 2px 8px rgba($lum-teal, 0.35) !important;
   }
 }
+
+// ── Code / Visual editor toggle ────────────────────────────────────────────
+// Replace the pill shape with rounded-square and add a sliding indicator that
+// moves under the active tab instead of a simple background-color crossfade.
+
+[data-lumiere='true'] .toggle-switch {
+  border-radius: 10px;
+  background-color: rgba($lum-teal, 0.07);
+  border: 1px solid rgba($lum-teal, 0.18);
+  padding: 3px;
+  position: relative;
+
+  // Sliding indicator — absolutely positioned under the active label
+  &::before {
+    content: '';
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    // Each tab gets exactly half the inner area (enforced by flex: 1 below)
+    width: calc(50% - 3px);
+    height: calc(100% - 6px);
+    background: $lum-teal;
+    border-radius: 7px;
+    box-shadow: 0 2px 6px rgba($lum-teal, 0.35);
+    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  // Slide the indicator right when Visual is active
+  &:has(input[value='rich-text']:checked)::before {
+    transform: translateX(100%);
+  }
+
+  // Force Code label and Visual span wrapper to equal width
+  > label.toggle-switch-label {
+    flex: 1;
+  }
+
+  > span {
+    flex: 1;
+    display: flex;
+  }
+}
+
+[data-lumiere='true'] .toggle-switch-label {
+  flex: 1;
+  border-radius: 7px;
+  position: relative;
+  z-index: 1;
+  color: $lum-teal;
+  transition: color 0.18s ease;
+}
+
+// Active tab: white text over the teal slider; remove built-in bg/shadow
+[data-lumiere='true'] .toggle-switch-input:checked + .toggle-switch-label {
+  color: #fff;
+  background-color: transparent !important;
+  box-shadow: none !important;
+}
+
+// Disabled tab (Visual locked on non-.tex files)
+[data-lumiere='true'] .toggle-switch-input:disabled + .toggle-switch-label {
+  color: rgba($lum-teal, 0.35);
+}