From d03fed3293e2887d8cf589959bdc9102e1ba2c98 Mon Sep 17 00:00:00 2001
From: David Montero <davidmonterocrespo24@gmail.com>
Date: Sun, 21 Jun 2026 05:07:43 +0200
Subject: [PATCH] =?UTF-8?q?style(ui):=20solid=20palette=20rebrand=20?=
 =?UTF-8?q?=E2=80=94=20drop=20neon=20outlines=20for=20tokenized=20solid=20?=
 =?UTF-8?q?fills?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Unify the editor toolbar and landing page on the single #0071e3 accent
(token --color-action-primary). Replace the fluorescent cyan/green outline
treatment (Libraries pill, overflow icons, compile/run/stop, feature tiles,
pricing/licensing badges, classroom banner) with solid fills following the
+Add button. Green/red kept solid and semantic-only (run/success, stop/error).
---
 .../src/components/editor/EditorToolbar.css   | 92 +++++++++----------
 .../components/simulator/SimulatorCanvas.css  |  4 +-
 frontend/src/pages/LandingPage.css            | 34 +++----
 frontend/src/tokens/colors.css                |  4 +
 4 files changed, 68 insertions(+), 66 deletions(-)

diff --git a/frontend/src/components/editor/EditorToolbar.css b/frontend/src/components/editor/EditorToolbar.css
index 5b72daa6..a5b299dc 100644
--- a/frontend/src/components/editor/EditorToolbar.css
+++ b/frontend/src/components/editor/EditorToolbar.css
@@ -63,7 +63,7 @@
 }
 .toolbar-center-slot .file-tab-active {
   background: #1e1e1e;
-  border-top: 2px solid #4fc3f7;
+  border-top: 2px solid var(--color-action-primary);
 }
 
 /* ── Divider ─────────────────────────────────────── */
@@ -99,34 +99,34 @@
   cursor: not-allowed;
 }
 
-/* Compile */
+/* Compile — accent blue (token, not neon) */
 .tb-btn-compile {
-  color: #4fc3f7;
+  color: var(--color-action-primary);
 }
 .tb-btn-compile:hover:not(:disabled) {
-  background: rgba(79, 195, 247, 0.12);
-  color: #81d4fa;
+  background: rgba(0, 113, 227, 0.14);
+  color: var(--color-action-primary-hover);
 }
 .tb-btn-compile:active:not(:disabled) {
-  background: rgba(79, 195, 247, 0.2);
+  background: rgba(0, 113, 227, 0.22);
 }
 
-/* Run */
+/* Run — semantic success green (token) */
 .tb-btn-run {
-  color: #4caf50;
+  color: var(--color-feedback-success);
 }
 .tb-btn-run:hover:not(:disabled) {
-  background: rgba(76, 175, 80, 0.12);
-  color: #66bb6a;
+  background: rgba(48, 209, 88, 0.14);
+  color: var(--color-feedback-success);
 }
 
-/* Stop */
+/* Stop — semantic error red (token) */
 .tb-btn-stop {
-  color: #ef5350;
+  color: var(--color-feedback-error);
 }
 .tb-btn-stop:hover:not(:disabled) {
-  background: rgba(239, 83, 80, 0.12);
-  color: #f44336;
+  background: rgba(255, 69, 58, 0.14);
+  color: var(--color-feedback-error);
 }
 
 /* Reset */
@@ -142,25 +142,23 @@
   gap: 4px;
   height: 26px;
   padding: 0 8px 0 7px;
-  border: 1px solid rgba(0, 184, 212, 0.3);
+  border: none;
   border-radius: 5px;
   cursor: pointer;
-  background: rgba(0, 184, 212, 0.08);
-  color: #00e5ff;
+  background: var(--color-action-primary);
+  color: #fff;
   font-size: 11px;
   font-weight: 500;
   font-family: inherit;
   white-space: nowrap;
   transition:
     background 0.15s,
-    border-color 0.15s,
     color 0.15s;
   flex-shrink: 0;
   align-self: center;
 }
 .tb-btn-libraries:hover {
-  background: rgba(0, 184, 212, 0.18);
-  border-color: rgba(0, 184, 212, 0.5);
+  background: var(--color-action-primary-hover);
   color: #fff;
 }
 .tb-libraries-label {
@@ -222,11 +220,11 @@
 
 /* Legacy lib icon-only button (for overflow items) */
 .tb-btn-lib {
-  color: #00b8d4;
+  color: var(--color-action-primary);
 }
 .tb-btn-lib:hover {
-  background: rgba(0, 184, 212, 0.1);
-  color: #00e5ff;
+  background: rgba(0, 113, 227, 0.12);
+  color: var(--color-action-primary-hover);
 }
 
 /* Missing library hint banner */
@@ -235,21 +233,21 @@
   align-items: center;
   gap: 6px;
   padding: 5px 12px;
-  background: rgba(255, 152, 0, 0.1);
-  border-bottom: 1px solid rgba(255, 152, 0, 0.25);
-  color: #ffb74d;
+  background: rgba(255, 159, 10, 0.1);
+  border-bottom: 1px solid rgba(255, 159, 10, 0.25);
+  color: var(--color-feedback-warning);
   font-size: 12px;
   font-family: inherit;
 }
 .tb-lib-hint svg {
   flex-shrink: 0;
-  color: #ffa726;
+  color: var(--color-feedback-warning);
 }
 .tb-lib-hint-btn {
-  background: rgba(0, 184, 212, 0.15);
-  border: 1px solid rgba(0, 184, 212, 0.4);
+  background: var(--color-action-primary);
+  border: none;
   border-radius: 4px;
-  color: #00e5ff;
+  color: #fff;
   font-size: 12px;
   font-weight: 600;
   font-family: inherit;
@@ -258,7 +256,7 @@
   transition: background 0.12s;
 }
 .tb-lib-hint-btn:hover {
-  background: rgba(0, 184, 212, 0.3);
+  background: var(--color-action-primary-hover);
   color: #fff;
 }
 .tb-lib-hint-close {
@@ -284,12 +282,12 @@
   color: #ccc;
 }
 .tb-btn-output-active {
-  color: #4fc3f7;
-  background: rgba(79, 195, 247, 0.1);
+  color: var(--color-action-primary);
+  background: rgba(0, 113, 227, 0.12);
 }
 .tb-btn-output-active:hover {
-  background: rgba(79, 195, 247, 0.18);
-  color: #81d4fa;
+  background: rgba(0, 113, 227, 0.2);
+  color: var(--color-action-primary-hover);
 }
 
 /* ── Spin animation (compiling) ─────────────────── */
@@ -317,13 +315,13 @@
 }
 
 .tb-status-success {
-  color: #4caf50;
-  background: rgba(76, 175, 80, 0.1);
+  color: var(--color-feedback-success);
+  background: rgba(48, 209, 88, 0.1);
 }
 
 .tb-status-error {
-  color: #ef5350;
-  background: rgba(239, 83, 80, 0.1);
+  color: var(--color-feedback-error);
+  background: rgba(255, 69, 58, 0.1);
 }
 
 .tb-status-text {
@@ -334,19 +332,19 @@
 
 /* ── Compile All / Run All buttons ─────────────── */
 .tb-btn-compile-all {
-  color: #80cbc4;
+  color: var(--color-action-primary);
 }
 .tb-btn-compile-all:hover:not(:disabled) {
-  background: rgba(128, 203, 196, 0.12);
-  color: #a7ffeb;
+  background: rgba(0, 113, 227, 0.14);
+  color: var(--color-action-primary-hover);
 }
 
 .tb-btn-run-all {
-  color: #aed581;
+  color: var(--color-feedback-success);
 }
 .tb-btn-run-all:hover:not(:disabled) {
-  background: rgba(174, 213, 129, 0.12);
-  color: #ccff90;
+  background: rgba(48, 209, 88, 0.14);
+  color: var(--color-feedback-success);
 }
 
 /* ── Board context pill ─────────────────────────── */
@@ -381,7 +379,7 @@
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: #4caf50;
+  background: var(--color-feedback-success);
   flex-shrink: 0;
   animation: pulse-run 1.4s ease-in-out infinite;
 }
@@ -456,7 +454,7 @@
 
 .tb-overflow-item svg {
   flex-shrink: 0;
-  color: #00b8d4;
+  color: var(--color-fg-default);
 }
 
 .tb-overflow-label {
diff --git a/frontend/src/components/simulator/SimulatorCanvas.css b/frontend/src/components/simulator/SimulatorCanvas.css
index ef954623..9451feb3 100644
--- a/frontend/src/components/simulator/SimulatorCanvas.css
+++ b/frontend/src/components/simulator/SimulatorCanvas.css
@@ -183,7 +183,7 @@
   gap: 5px;
   padding: 0 10px;
   height: 32px;
-  background: #007acc;
+  background: var(--color-action-primary);
   color: #fff;
   border: none;
   border-radius: 5px;
@@ -195,7 +195,7 @@
 }
 
 .add-component-btn:hover:not(:disabled) {
-  background: #1a8bd4;
+  background: var(--color-action-primary-hover);
 }
 
 .add-component-btn:disabled {
diff --git a/frontend/src/pages/LandingPage.css b/frontend/src/pages/LandingPage.css
index 4b75f0ae..6138ffa3 100644
--- a/frontend/src/pages/LandingPage.css
+++ b/frontend/src/pages/LandingPage.css
@@ -809,10 +809,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(0, 113, 227, 0.12);
+  background: var(--color-action-primary);
   border-radius: 12px;
   margin-bottom: 22px;
-  color: var(--accent);
+  color: #fff;
   flex-shrink: 0;
 }
 
@@ -1140,15 +1140,15 @@
   text-transform: uppercase;
   padding: 4px 10px;
   border-radius: 999px;
-  background: rgba(0, 113, 227, 0.18);
-  color: #4ea3ff;
-  border: 1px solid rgba(0, 113, 227, 0.3);
+  background: var(--color-action-primary);
+  color: #fff;
+  border: none;
 }
 
 .licensing-card-badge-commercial {
-  background: rgba(245, 158, 11, 0.16);
-  color: #f5a623;
-  border-color: rgba(245, 158, 11, 0.3);
+  background: var(--color-feedback-warning);
+  color: #1d1d1f;
+  border: none;
 }
 
 .licensing-card-title {
@@ -1206,7 +1206,7 @@
 
 .ai-card {
   background: linear-gradient(180deg, rgba(0, 113, 227, 0.07), rgba(255, 255, 255, 0.03));
-  border: 1px solid rgba(0, 113, 227, 0.18);
+  border: 1px solid var(--color-border-default);
   border-radius: 18px;
   padding: 28px 26px;
 }
@@ -1262,7 +1262,7 @@
 }
 
 .pricing-card-featured {
-  border-color: rgba(0, 113, 227, 0.55);
+  border-color: var(--color-action-primary);
   background: linear-gradient(180deg, rgba(0, 113, 227, 0.10), rgba(255, 255, 255, 0.04));
 }
 
@@ -1359,13 +1359,13 @@
 }
 
 .pricing-card-cta-secondary {
-  background: transparent;
-  color: var(--text);
-  border: 1px solid rgba(255, 255, 255, 0.18);
+  background: var(--color-action-secondary);
+  color: #fff;
+  border: none;
 }
 
 .pricing-card-cta-secondary:hover {
-  border-color: rgba(255, 255, 255, 0.35);
+  background: var(--color-action-secondary-hover);
 }
 
 .pricing-classroom-banner {
@@ -1378,15 +1378,15 @@
   gap: 14px;
   padding: 14px 22px;
   border-radius: 10px;
-  background: rgba(0, 184, 212, 0.06);
-  border: 1px solid rgba(0, 184, 212, 0.2);
+  background: rgba(0, 113, 227, 0.06);
+  border: 1px solid var(--color-border-default);
   color: #b5b5b5;
   font-size: 14px;
   text-align: center;
 }
 
 .pricing-classroom-banner-cta {
-  color: #4fc3f7;
+  color: var(--color-action-primary);
   font-weight: 600;
   text-decoration: none;
   white-space: nowrap;
diff --git a/frontend/src/tokens/colors.css b/frontend/src/tokens/colors.css
index 50ef2a35..63ba7371 100644
--- a/frontend/src/tokens/colors.css
+++ b/frontend/src/tokens/colors.css
@@ -64,6 +64,10 @@
   --color-border-strong:  rgba(255, 255, 255, 0.16);
 
   /* Semantic — actions */
+  /* Solid UI doctrine: interactive surfaces use SOLID fills of these
+   * tokens (white text/icon, border:none) — never neon hues or
+   * translucent "outline" borders. Green/red are semantic only
+   * (success/error). See branding/README.md "Solid UI doctrine". */
   --color-action-primary:       var(--blue-600);
   --color-action-primary-hover: var(--blue-500);
   --color-action-primary-fg:    var(--gray-0);