a2nr
/
velxio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(ui): solid palette rebrand — drop neon outlines for tokenized solid fills 

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).
This commit is contained in:
David Montero 2026-06-21 05:07:43 +02:00
parent e1697dc6f3
commit d03fed3293
4 changed files with 68 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
frontend/src/components/editor/EditorToolbar.css
View File

@ -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 {

4
frontend/src/components/simulator/SimulatorCanvas.css
View File

@ -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 {

34
frontend/src/pages/LandingPage.css
View File

@ -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;

4
frontend/src/tokens/colors.css
View File

@ -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);