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

style(ui): unify every interactive surface on the single #0071e3 accent 

Sweep all off-brand blues (#007acc logo-blue, #0e639c, #3b82f6) and the neon
cyan family (#4fc3f7, #00b8d4, #00e5ff, rgba 0,184,212 / 0,122,204) across the
editor, simulator, examples gallery and pages to var(--color-action-primary).
The Code/Both/Circuit toggle, board chips, library manager, modals etc. now
match the Libraries / +Add buttons. Also keep the editor Libraries label
visible in the default split (lower the container-query threshold).
This commit is contained in:
David Montero 2026-06-21 05:34:25 +02:00
parent d03fed3293
commit eb6a59adf6
18 changed files with 100 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/App.css
View File

@ -251,7 +251,7 @@ body {
.explorer-resize-handle:hover,
.explorer-resize-handle:active {
background: #007acc;
background: var(--color-action-primary);
}
.editor-wrapper {
@ -283,7 +283,7 @@ body {
.resize-handle:hover,
.resize-handle:active {
background: #007acc;
background: var(--color-action-primary);
}
.resize-handle-grip {
@ -329,7 +329,7 @@ body {
flex-shrink: 0;
height: 44px;
background: #1e1e1e;
border-bottom: 2px solid #007acc;
border-bottom: 2px solid var(--color-action-primary);
z-index: 50;
/* Sits between header and panels */
}
@ -357,9 +357,9 @@ body {
}
.mobile-tab-btn--active {
color: #007acc;
border-bottom-color: #007acc;
background: rgba(0, 122, 204, 0.1);
color: var(--color-action-primary);
border-bottom-color: var(--color-action-primary);
background: rgba(0, 113, 227, 0.1);
}
.mobile-tab-btn:active {

18
frontend/src/components/ComponentPickerModal.css
View File

@ -106,7 +106,7 @@
}
.search-input:focus {
border-color: #007acc;
border-color: var(--color-action-primary);
}
.clear-search-btn {
@ -164,8 +164,8 @@
}
.category-tab.active {
background: #007acc;
border-color: #007acc;
background: var(--color-action-primary);
border-color: var(--color-action-primary);
color: white;
}
@ -229,7 +229,7 @@
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #007acc;
border-top: 4px solid var(--color-action-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@ -257,7 +257,7 @@
.clear-filters-btn {
padding: 10px 20px;
background: #007acc;
background: var(--color-action-primary);
color: white;
border: none;
border-radius: 6px;
@ -286,8 +286,8 @@
}
.component-card:hover {
border-color: #007acc;
box-shadow: 0 4px 12px rgba(0, 122, 204, 0.15);
border-color: var(--color-action-primary);
box-shadow: 0 4px 12px rgba(0, 113, 227, 0.15);
transform: translateY(-2px);
}
@ -416,7 +416,7 @@
}
.search-input:focus {
border-color: #007acc;
border-color: var(--color-action-primary);
}
.search-input::placeholder {
@ -439,7 +439,7 @@
}
.component-card:hover {
border-color: #007acc;
border-color: var(--color-action-primary);
}
.card-thumbnail {

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

@ -164,11 +164,13 @@
.tb-libraries-label {
line-height: 1;
}
/* Hide the label when the toolbar is narrow — icon alone keeps the button
reachable without stealing horizontal space from the file tabs. The
container query reacts to the toolbar's own width, so it triggers when
the user drags the editor/canvas divider, not just on small viewports. */
@container editor-toolbar (max-width: 600px) {
/* Hide the label only when the toolbar is genuinely cramped — keep the
"Libraries" text visible in the default 50/50 split (~376px toolbar) so
the button reads clearly. Below 360px the icon alone keeps it reachable
without stealing horizontal space from the file tabs. The container query
reacts to the toolbar's own width, so it triggers when the user drags the
editor/canvas divider very narrow, not just on small viewports. */
@container editor-toolbar (max-width: 360px) {
.tb-libraries-label {
display: none;
}

6
frontend/src/components/editor/FileExplorer.css
View File

@ -64,7 +64,7 @@
.file-explorer-save-btn:hover {
background: rgba(255, 255, 255, 0.08);
color: #4fc3f7;
color: var(--color-action-primary);
}
.file-explorer-list {
@ -94,7 +94,7 @@
}
.file-explorer-item-active {
background: rgba(79, 195, 247, 0.12);
background: rgba(0, 113, 227, 0.12);
color: #e2e2e2;
}
@ -125,7 +125,7 @@
.file-explorer-rename-input {
flex: 1;
background: #3c3c3c;
border: 1px solid #4fc3f7;
border: 1px solid var(--color-action-primary);
color: #fff;
font-size: 12px;
padding: 1px 4px;

2
frontend/src/components/editor/FileTabs.css
View File

@ -58,7 +58,7 @@
.file-tab-active {
background: #1e1e1e;
color: #fff;
border-top: 2px solid #4fc3f7;
border-top: 2px solid var(--color-action-primary);
}
.file-tab-modified {

8
frontend/src/components/examples/ExamplesGallery.css
View File

@ -287,8 +287,8 @@
border-color 0.15s;
}
.example-copy-link:hover {
color: #4fc3f7;
border-color: #4fc3f7;
color: var(--color-action-primary);
border-color: var(--color-action-primary);
}
.examples-empty {
@ -316,7 +316,7 @@
.examples-empty-reset:hover {
background: var(--bg-elevated);
border-color: var(--accent, #4fc3f7);
border-color: var(--accent, var(--color-action-primary));
}
/* ── Search ──────────────────────────────────────────────────────────── */
@ -373,7 +373,7 @@
}
.examples-search-input:focus {
border-color: var(--accent, #4fc3f7);
border-color: var(--accent, var(--color-action-primary));
background: var(--bg-elevated);
}

14
frontend/src/components/simulator/BoardOptionsModal.css
View File

@ -111,8 +111,8 @@
}
.bom-tab.active {
color: #4fc3f7;
border-bottom-color: #4fc3f7;
color: var(--color-action-primary);
border-bottom-color: var(--color-action-primary);
}
.bom-body {
@ -166,11 +166,11 @@
}
.bom-select:focus {
outline: 1px solid #4fc3f7;
outline: 1px solid var(--color-action-primary);
}
.bom-check {
accent-color: #4fc3f7;
accent-color: var(--color-action-primary);
}
.bom-badge {
@ -233,8 +233,8 @@
}
.bom-btn-primary {
background: #0e639c;
border-color: #0e639c;
background: var(--color-action-primary);
border-color: var(--color-action-primary);
color: #fff;
}
@ -317,7 +317,7 @@
}
.bom-spiffs-add {
background: #0e639c;
background: var(--color-action-primary);
border: none;
color: #fff;
padding: 6px 12px;

2
frontend/src/components/simulator/ComponentPalette.css
View File

@ -46,7 +46,7 @@
.palette-item:hover {
background-color: #4d4d4d;
border-color: #007acc;
border-color: var(--color-action-primary);
}
.palette-item:active {

26
frontend/src/components/simulator/ComponentPropertyDialog.css
View File

@ -146,20 +146,20 @@
}
.pin-role-item--interactive:hover {
background-color: #4a4a4a;
border-color: #007acc;
border-color: var(--color-action-primary);
}
.pin-role-item--interactive:active {
transform: scale(0.98);
background-color: #2a2d2e;
}
.pin-role-item--interactive:focus-visible {
outline: 2px solid #007acc;
outline: 2px solid var(--color-action-primary);
outline-offset: 1px;
}
.pin-role-action {
margin-left: auto;
color: #007acc;
color: var(--color-action-primary);
font-weight: 700;
font-size: 14px;
}
@ -231,12 +231,12 @@
}
.property-edit-select:hover {
border-color: #007acc;
border-color: var(--color-action-primary);
}
.property-edit-select:focus {
border-color: #007acc;
box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.25);
border-color: var(--color-action-primary);
box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.25);
}
.property-edit-select option {
@ -260,12 +260,12 @@
}
.property-edit-input:hover {
border-color: #007acc;
border-color: var(--color-action-primary);
}
.property-edit-input:focus {
border-color: #007acc;
box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.25);
border-color: var(--color-action-primary);
box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.25);
}
.property-actions {
@ -304,14 +304,14 @@
}
.rotate-button {
background-color: #007acc;
background-color: var(--color-action-primary);
color: white;
}
.rotate-button:hover {
background-color: #005a9e;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 122, 204, 0.3);
box-shadow: 0 2px 8px rgba(0, 113, 227, 0.3);
}
.delete-button {
@ -403,7 +403,7 @@
padding: 5px 12px;
border: none;
border-radius: 4px;
background-color: #007acc;
background-color: var(--color-action-primary);
color: #fff;
cursor: pointer;
transition: all 0.2s;
@ -411,7 +411,7 @@
.sd-card-add:hover {
background-color: #005a9e;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 122, 204, 0.3);
box-shadow: 0 2px 8px rgba(0, 113, 227, 0.3);
}
.sd-card-total {
font-size: 11px;

8
frontend/src/components/simulator/InstallLibrariesModal.css
View File

@ -102,7 +102,7 @@
display: flex;
align-items: center;
gap: 8px;
color: #00b8d4;
color: var(--color-action-primary);
font-weight: 500;
}
@ -184,7 +184,7 @@
}
.ilib-badge--installing {
color: #00b8d4;
color: var(--color-action-primary);
background: #0a1f24;
border: 1px solid #005f7a;
}
@ -262,13 +262,13 @@
}
.ilib-btn--primary {
background: #00b8d4;
background: var(--color-action-primary);
color: #000;
}
.ilib-btn--primary:hover:not(:disabled) {
background: #00d4f0;
box-shadow: 0 0 12px rgba(0, 184, 212, 0.4);
box-shadow: 0 0 12px rgba(0, 113, 227, 0.4);
transform: translateY(-1px);
}

14
frontend/src/components/simulator/LibraryManagerModal.css
View File

@ -72,7 +72,7 @@
.lib-icon {
width: 18px;
height: 18px;
color: #00b8d4;
color: var(--color-action-primary);
flex-shrink: 0;
}
@ -120,8 +120,8 @@
}
.lib-tab.active {
color: #00b8d4;
border-bottom-color: #00b8d4;
color: var(--color-action-primary);
border-bottom-color: var(--color-action-primary);
}
/* Status bar */
@ -176,7 +176,7 @@
outline: none;
color: #ddd;
font-size: 14px;
caret-color: #00b8d4;
caret-color: var(--color-action-primary);
}
.lib-search-bar input::placeholder {
@ -186,7 +186,7 @@
.lib-spinner {
width: 16px;
height: 16px;
color: #00b8d4;
color: var(--color-action-primary);
flex-shrink: 0;
animation: spin 0.8s linear infinite;
}
@ -322,7 +322,7 @@
/* Install button */
.lib-install-btn {
background: #00b8d4;
background: var(--color-action-primary);
color: #000;
border: none;
border-radius: 20px;
@ -337,7 +337,7 @@
.lib-install-btn:hover:not(:disabled) {
background: #00d4f0;
box-shadow: 0 0 12px rgba(0, 184, 212, 0.4);
box-shadow: 0 0 12px rgba(0, 113, 227, 0.4);
transform: translateY(-1px);
}

14
frontend/src/components/simulator/Oscilloscope.css
View File

@ -48,14 +48,14 @@
}
.osc-btn:hover {
border-color: #007acc;
border-color: var(--color-action-primary);
color: #fff;
}
.osc-btn-active {
background: #0e3a5a;
border-color: #007acc;
color: #4fc3f7;
border-color: var(--color-action-primary);
color: var(--color-action-primary);
}
.osc-btn-danger {
@ -86,7 +86,7 @@
}
.osc-select:focus {
border-color: #007acc;
border-color: var(--color-action-primary);
}
/* ── Channel picker dropdown ── */
@ -147,8 +147,8 @@
.osc-picker-board-tab.active {
background: #0e3a5a;
border-color: #007acc;
color: #4fc3f7;
border-color: var(--color-action-primary);
color: var(--color-action-primary);
}
.osc-picker-board-label {
@ -182,7 +182,7 @@
.osc-pin-btn:hover {
background: #0e3a5a;
border-color: #007acc;
border-color: var(--color-action-primary);
color: #fff;
}

8
frontend/src/components/simulator/SensorControlPanel.css
View File

@ -127,7 +127,7 @@
width: 14px;
height: 14px;
border-radius: 50%;
background: #007acc;
background: var(--color-action-primary);
cursor: pointer;
transition: background 0.15s;
}
@ -140,7 +140,7 @@
width: 14px;
height: 14px;
border-radius: 50%;
background: #007acc;
background: var(--color-action-primary);
cursor: pointer;
border: none;
}
@ -177,6 +177,6 @@
}
.sensor-trigger-button:active {
background-color: #007acc;
border-color: #007acc;
background-color: var(--color-action-primary);
border-color: var(--color-action-primary);
}

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

@ -97,7 +97,7 @@
}
.board-selector:hover:not(:disabled) {
border-color: #007acc;
border-color: var(--color-action-primary);
}
.board-selector:disabled {
@ -127,14 +127,14 @@
}
.canvas-serial-btn:hover {
border-color: #007acc;
border-color: var(--color-action-primary);
color: #ccc;
}
.canvas-serial-btn-active {
background: #0e3a5a;
border-color: #007acc;
color: #4fc3f7;
border-color: var(--color-action-primary);
color: var(--color-action-primary);
}
/* ── Canvas icon-only buttons (undo/redo, …) ─────── */
@ -158,7 +158,7 @@
}
.canvas-icon-btn:hover:not(:disabled) {
border-color: #007acc;
border-color: var(--color-action-primary);
color: #ccc;
}
@ -314,7 +314,7 @@
left: 50%;
transform: translateX(-50%);
z-index: 100;
background: rgba(0, 122, 204, 0.92);
background: rgba(0, 113, 227, 0.92);
color: #fff;
padding: 8px 16px;
border-radius: 8px;
@ -447,7 +447,7 @@
/* BLE status colours */
.canvas-ble-initialized {
color: #3b82f6;
color: var(--color-action-primary);
}
.canvas-ble-advertising {
color: #6366f1;
@ -462,7 +462,7 @@
transform: scale(0.97);
}
.selection-action-bar button:focus-visible {
outline: 2px solid #007acc;
outline: 2px solid var(--color-action-primary);
outline-offset: 1px;
}

10
frontend/src/desktop/desktop.css
View File

@ -63,7 +63,7 @@
}
.vlx-desktop-welcome-primary {
background: linear-gradient(135deg, #007acc 0%, #005ea1 100%);
background: linear-gradient(135deg, var(--color-action-primary) 0%, #005ea1 100%);
color: #fff;
border: 1px solid #005ea1;
font-weight: 600;
@ -127,7 +127,7 @@
.vlx-desktop-welcome-paste input:focus {
outline: none;
border-color: #007acc;
border-color: var(--color-action-primary);
}
.vlx-desktop-welcome-trust {
@ -307,7 +307,7 @@ body.vlx-desktop-readonly [data-velxio-action="save"] {
width: 28px;
height: 28px;
border-radius: 14px;
background: linear-gradient(135deg, #007acc 0%, #005ea1 100%);
background: linear-gradient(135deg, var(--color-action-primary) 0%, #005ea1 100%);
color: white;
font-size: 14px;
font-weight: 700;
@ -350,7 +350,7 @@ body.vlx-desktop-readonly [data-velxio-action="save"] {
font-size: 13px;
font-weight: 600;
color: white;
background: linear-gradient(135deg, #007acc 0%, #005ea1 100%);
background: linear-gradient(135deg, var(--color-action-primary) 0%, #005ea1 100%);
border: 1px solid #005ea1;
border-radius: 5px;
cursor: pointer;
@ -387,7 +387,7 @@ body.vlx-desktop-readonly [data-velxio-action="save"] {
.vlx-desktop-update-toast-progress-bar {
height: 100%;
background: linear-gradient(90deg, #007acc 0%, #00a4ff 100%);
background: linear-gradient(90deg, var(--color-action-primary) 0%, #00a4ff 100%);
transition: width 0.2s ease;
}

6
frontend/src/pages/DocsPage.css
View File

@ -190,7 +190,7 @@
.docs-sidebar-item--active {
color: var(--accent);
background: rgba(0, 122, 204, 0.12);
background: rgba(0, 113, 227, 0.12);
}
.docs-sidebar-footer {
@ -364,8 +364,8 @@
/* ── Callout ─────────────────────────────────────────────── */
.docs-callout {
background: rgba(0, 122, 204, 0.08);
border: 1px solid rgba(0, 122, 204, 0.25);
background: rgba(0, 113, 227, 0.08);
border: 1px solid rgba(0, 113, 227, 0.25);
border-radius: 6px;
padding: 14px 18px;
font-size: 14px;

8
frontend/src/pages/SEOPage.css
View File

@ -30,7 +30,7 @@
}
.seo-hero h1 .accent {
color: #007acc;
color: var(--color-action-primary);
}
.seo-hero .subtitle {
@ -54,7 +54,7 @@
align-items: center;
gap: 6px;
padding: 12px 26px;
background: #007acc;
background: var(--color-action-primary);
color: #fff;
text-decoration: none;
font-size: 15px;
@ -143,7 +143,7 @@
.seo-card h3 {
font-size: 0.88rem;
font-weight: 600;
color: #007acc;
color: var(--color-action-primary);
margin: 0 0 0.35rem;
letter-spacing: -0.1px;
}
@ -213,7 +213,7 @@
}
.seo-internal-links a {
color: #007acc;
color: var(--color-action-primary);
text-decoration: none;
transition: color 0.15s;
}

14
frontend/src/pages/Velxio2Page.css
View File

@ -18,7 +18,7 @@
}
.v2-hero h1 .accent {
color: #007acc;
color: var(--color-action-primary);
}
.v2-hero .subtitle {
@ -34,13 +34,13 @@
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(0, 122, 204, 0.12);
background: rgba(0, 113, 227, 0.12);
color: #3b9ae8;
font-size: 0.82rem;
font-weight: 600;
padding: 6px 16px;
border-radius: 9999px;
border: 1px solid rgba(0, 122, 204, 0.25);
border: 1px solid rgba(0, 113, 227, 0.25);
margin-bottom: 1.5rem;
letter-spacing: 0.02em;
}
@ -338,16 +338,16 @@
}
.v2-repo-card--primary {
border-color: rgba(0, 122, 204, 0.3);
background: rgba(0, 122, 204, 0.06);
border-color: rgba(0, 113, 227, 0.3);
background: rgba(0, 113, 227, 0.06);
}
.v2-repo-card--primary:hover {
border-color: #007acc;
border-color: var(--color-action-primary);
}
.v2-repo-card--primary h3 {
color: #007acc;
color: var(--color-action-primary);
}
/* ── Bottom community ────────────────────────────────── */