maxim.dolgolyov/Learn_System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(lab): phase 3 — token purification across lab.html / lab.css / lab-glue.js

Browse Source 
Replaced ~100 hardcoded brand colors with var() tokens across 3 files.
Kept: tinted-alpha colors (rgba(155,93,229,.x)), canvas fillStyle (vars
don't resolve there), curated SVG card-preview palettes (P_GRAPH, P_MAGNETIC,
etc.), physics-convention colors (#EF476F for positive charges, #4CC9F0 for
negative), slightly-different decorative shades (#EF476F ≠ #F15BB5).

lab.css: #9B5DE5→var(--violet), #06D6E0→var(--cyan), #F15BB5/nscene→var(--pink),
  #0F172A (filter.active)→var(--text), fn-color defaults, trig btn defaults.
lab.html: stat bars, slider labels, info-fn-dot, toggle-dot, panel badges,
  section-specific color coding (violet=wave1/param1, cyan=wave2/param2).
lab-glue.js: toggleTheory() JS style assignments, template-literal HTML headings.

Before: ~265 hardcodes   After: ~60 (canvas+curated+rgba+physics-convention)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-05-22 22:51:28 +03:00
parent 92b5c39860
commit 6792a4a5c7
3 changed files with 150 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/css/lab.css
+19 -19
View File
@@ -17,7 +17,7 @@
border: 1.5px solid rgba(255,255,255,.12);
display: flex; align-items: center; justify-content: center;
}
.lab-hero-icon svg { width: 30px; height: 30px; stroke: #9B5DE5; stroke-width: 1.5; }
.lab-hero-icon svg { width: 30px; height: 30px; stroke: var(--violet); stroke-width: 1.5; }
.lab-hero-title {
font-family: 'Unbounded', sans-serif; font-size: 1.55rem; font-weight: 800;
letter-spacing: -0.02em; margin-bottom: 5px;
@@ -36,7 +36,7 @@
cursor: pointer; transition: all .16s;
}
.lab-filter:hover { border-color: rgba(155,93,229,.4); color: var(--violet); }
.lab-filter.active { background: #0F172A; color: #fff; border-color: #0F172A; }
.lab-filter.active { background: var(--text); color: #fff; border-color: var(--text); }
/* sim grid */
.sim-grid {
@@ -74,7 +74,7 @@
padding: 3px 10px; border-radius: 99px; margin-bottom: 10px;
}
.sim-cat.math { background: rgba(155,93,229,.12); color: var(--violet); }
.sim-cat.phys { background: rgba(6,214,224,.1); color: #06D6E0; }
.sim-cat.phys { background: rgba(6,214,224,.1); color: var(--cyan); }
.sim-title {
font-family: 'Unbounded', sans-serif; font-size: 0.9rem; font-weight: 800;
@@ -171,15 +171,15 @@
}
.fn-label {
font-family: 'Manrope', monospace; font-size: 0.85rem; font-weight: 700;
color: var(--fn-color, #9B5DE5); flex-shrink: 0; letter-spacing: .01em;
color: var(--fn-color, var(--violet)); flex-shrink: 0; letter-spacing: .01em;
}
.fn-row:focus-within { border-color: var(--fn-color, #9B5DE5); }
.fn-row:focus-within { border-color: var(--fn-color, var(--violet)); }
.fn-dot {
width: 12px; height: 12px; border-radius: 50%;
flex-shrink: 0;
background: var(--fn-color, #9B5DE5);
box-shadow: 0 0 6px var(--fn-color, #9B5DE5);
background: var(--fn-color, var(--violet));
box-shadow: 0 0 6px var(--fn-color, var(--violet));
}
.fn-input {
flex: 1; border: none; outline: none; background: transparent;
@@ -493,10 +493,10 @@
/* speed slider — cyan thumb */
#sl-speed::-webkit-slider-thumb {
background: #06D6E0;
background: var(--cyan);
box-shadow: 0 0 6px rgba(6,214,224,.5);
}
#sl-speed::-moz-range-thumb { background: #06D6E0; }
#sl-speed::-moz-range-thumb { background: var(--cyan); }
/* magnetic canvas */
#mag-canvas {
@@ -592,8 +592,8 @@
color: #aaa; font-size: 13px; font-weight: 700; cursor: pointer;
font-family: 'Manrope', sans-serif; transition: .15s;
}
.trig-fn-btn:hover { background: rgba(var(--fc-rgb,155,93,229),0.15); border-color: var(--fc,#9B5DE5); color: var(--fc,#9B5DE5); }
.trig-fn-btn.active { background: rgba(var(--fc-rgb,155,93,229),0.18); border-color: var(--fc,#9B5DE5); color: var(--fc,#9B5DE5); box-shadow: 0 0 8px rgba(var(--fc-rgb,155,93,229),0.3); }
.trig-fn-btn:hover { background: rgba(var(--fc-rgb,155,93,229),0.15); border-color: var(--fc,var(--violet)); color: var(--fc,var(--violet)); }
.trig-fn-btn.active { background: rgba(var(--fc-rgb,155,93,229),0.18); border-color: var(--fc,var(--violet)); color: var(--fc,var(--violet)); box-shadow: 0 0 8px rgba(var(--fc-rgb,155,93,229),0.3); }
/* ── responsive ── */
@media (max-width: 768px) {
@@ -614,7 +614,7 @@
/* Circuit tool buttons */
.circ-tool-btn.active {
background: rgba(155,93,229,0.25) !important;
border-color: #9B5DE5 !important;
border-color: var(--violet) !important;
color: #c4b5fd !important;
}
.circ-top-btn.active { background: rgba(155,93,229,0.35) !important; color: #c4b5fd !important; }
@@ -629,20 +629,20 @@
/* Reaction mode buttons */
.reac-mode-btn.active {
background: rgba(6,214,224,0.18) !important;
border-color: #06D6E0 !important;
color: #06D6E0 !important;
border-color: var(--cyan) !important;
color: var(--cyan) !important;
}
/* Newton law/scene buttons */
.nlaw-btn.active {
background: rgba(6,214,224,0.18) !important;
border-color: #06D6E0 !important;
color: #06D6E0 !important;
border-color: var(--cyan) !important;
color: var(--cyan) !important;
}
.nscene-btn.active {
background: rgba(241,91,181,0.15) !important;
border-color: #F15BB5 !important;
color: #F15BB5 !important;
border-color: var(--pink) !important;
color: var(--pink) !important;
}
/* ── wave mode buttons ── */
@@ -660,7 +660,7 @@
}
.wave-n-btn.active {
background: rgba(255,209,102,.15) !important;
border-color: #FFD166 !important; color: #FFD166 !important;
border-color: #FFD166 !important; color: #FFD166 !important; /* amber — wave harmonic, intentional palette */
}
/* ── theory panel (overlay right sidebar) ── */