From 0b06e8facdc8a4031fea2b7eba6556c75ef0c0df Mon Sep 17 00:00:00 2001
From: Maxim Dolgolyov <maxim.dolgolyov@gmail.com>
Date: Fri, 22 May 2026 22:06:43 +0300
Subject: [PATCH] refactor(classes): use ls.css design tokens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaced 13 hardcoded brand colors with var() tokens:
- #0F172A → var(--text) in 5 CSS rules and JS-generated strings
- #3D4F6B → var(--text-2) in 3 CSS rules and 2 inline attrs
- #06D6E0 → var(--cyan) in --wc custom property
- Chart bucket/bar colors → var(--pink/amber/cyan/green)

Kept tinted-alpha colors, 90deg gradient bars, #f4f5f8 split layout bg,
#059652 (dark domain green for grade/review status), #06aab3 (status badge),
#c0306a/#c07c00 (grade letter palette), #EF476F (delete icon),
and JS-toggled display:none (incompatible with .hidden class pattern).

Before: ~22 hardcodes | After: ~9 hardcodes (decorative/domain)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/classes.html | 40 ++++++++++++++++++++--------------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/frontend/classes.html b/frontend/classes.html
index f7db738..62c4bc4 100644
--- a/frontend/classes.html
+++ b/frontend/classes.html
@@ -26,7 +26,7 @@
     .cl-item.active { background: rgba(155,93,229,0.09); border-color: rgba(155,93,229,0.22); box-shadow: 0 2px 10px rgba(155,93,229,0.10); }
     .cl-avatar { width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800; color: #fff; }
     .cl-info { flex: 1; min-width: 0; }
-    .cl-name { font-size: 0.88rem; font-weight: 700; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
+    .cl-name { font-size: 0.88rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
     .cl-meta { font-size: 0.73rem; color: var(--text-3); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     .cl-chevron { color: #cbd5e1; flex-shrink: 0; transition: color 0.15s; }
     .cl-item.active .cl-chevron { color: var(--violet); }
@@ -46,7 +46,7 @@
     .cl-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 14px; padding: 80px 40px; text-align: center; }
     .cl-placeholder-icon { width: 72px; height: 72px; border-radius: 22px; background: linear-gradient(135deg, rgba(155,93,229,0.12), rgba(6,214,224,0.08)); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
     .cl-placeholder-icon svg { width: 32px; height: 32px; stroke: var(--violet); stroke-width: 1.6; }
-    .cl-placeholder-title { font-family: 'Unbounded', sans-serif; font-size: 0.95rem; font-weight: 800; color: #0F172A; }
+    .cl-placeholder-title { font-family: 'Unbounded', sans-serif; font-size: 0.95rem; font-weight: 800; color: var(--text); }
     .cl-placeholder-sub { font-size: 0.82rem; color: var(--text-3); max-width: 220px; line-height: 1.6; }
     .cl-detail-wrap { padding: 28px 32px 60px; flex: 1; }
 
@@ -169,7 +169,7 @@
     .notif-empty { padding: 24px 14px; text-align: center; color: var(--text-3); font-size: 0.82rem; }
     .empty { text-align: center; padding: 30px; color: var(--text-3); font-size: 0.88rem; }
     .error { color: var(--pink); font-size: 0.85rem; padding: 8px 0; }
-    .toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); background: #0F172A; color: #fff; padding: 10px 24px; border-radius: var(--r-pill); font-size: 0.85rem; font-weight: 600; z-index: 999; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
+    .toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); background: var(--text); color: #fff; padding: 10px 24px; border-radius: var(--r-pill); font-size: 0.85rem; font-weight: 600; z-index: 999; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
     .toast.show { opacity: 1; }
 
     /* ── Teacher dashboard ── */
@@ -396,7 +396,7 @@
       font-family: 'Manrope', sans-serif; font-size: 0.74rem; font-weight: 700;
       cursor: pointer; transition: all 0.15s;
     }
-    .works-chip.active { background: #0F172A; color: #fff; border-color: #0F172A; }
+    .works-chip.active { background: var(--text); color: #fff; border-color: var(--text); }
     .works-chip:hover:not(.active) { border-color: rgba(155,93,229,0.35); color: var(--violet); }
 
     .work-card {
@@ -410,7 +410,7 @@
     }
     .work-card:hover { box-shadow: 0 6px 24px rgba(15,23,42,0.1); border-color: rgba(15,23,42,0.14); }
     .work-card.reviewed { --wc: #059652; }
-    .work-card.new { --wc: #06D6E0; }
+    .work-card.new { --wc: var(--cyan); }
     .work-icon {
       width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
       background: rgba(155,93,229,0.08); color: var(--violet);
@@ -418,10 +418,10 @@
     }
     .work-icon svg { width: 18px; height: 18px; }
     .work-body { flex: 1; min-width: 0; }
-    .work-student { font-size: 0.88rem; font-weight: 700; color: #0F172A; margin-bottom: 2px; }
+    .work-student { font-size: 0.88rem; font-weight: 700; color: var(--text); margin-bottom: 2px; }
     .work-assign  { font-size: 0.76rem; color: var(--violet); font-weight: 600; margin-bottom: 3px; }
     .work-file    { font-size: 0.74rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-    .work-msg     { font-size: 0.76rem; color: #3D4F6B; margin-top: 5px; line-height: 1.4; font-style: italic; }
+    .work-msg     { font-size: 0.76rem; color: var(--text-2); margin-top: 5px; line-height: 1.4; font-style: italic; }
     .work-note    { font-size: 0.74rem; color: #059652; margin-top: 4px; font-style: italic; }
     .work-meta    { font-size: 0.70rem; color: var(--text-3); white-space: nowrap; flex-shrink: 0; text-align: right; }
     .work-status  {
@@ -452,10 +452,10 @@
     .grade-input-row {
       display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
     }
-    .grade-input-row label { font-size: 0.8rem; font-weight: 600; color: #3D4F6B; white-space: nowrap; }
+    .grade-input-row label { font-size: 0.8rem; font-weight: 600; color: var(--text-2); white-space: nowrap; }
     .grade-input {
       width: 80px; padding: 6px 10px; border: 1.5px solid rgba(15,23,42,0.15); border-radius: 8px;
-      font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 700; color: #0F172A;
+      font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 700; color: var(--text);
       background: #fff; text-align: center;
     }
     .grade-input:focus { outline: none; border-color: var(--violet); }
@@ -489,7 +489,7 @@
       width: 42px; height: 42px; border: 2px solid transparent; border-radius: 10px;
       background: #fff; cursor: pointer; display: flex;
       align-items: center; justify-content: center; transition: all 0.12s;
-      color: #3D4F6B;
+      color: var(--text-2);
     }
     .ip-btn svg { width: 20px; height: 20px; }
     .ip-btn:hover { border-color: rgba(155,93,229,0.3); transform: scale(1.1); color: var(--violet); }
@@ -508,7 +508,7 @@
       cursor: pointer; transition: all 0.12s; flex-shrink: 0;
     }
     .cp-btn:hover { transform: scale(1.2); }
-    .cp-btn.selected { border-color: #0F172A; box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor; }
+    .cp-btn.selected { border-color: var(--text); box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor; }
 
     /* ── Personal assignments ── */
     .cl-personal-sep { height: 1px; background: var(--border); margin: 6px 10px 8px; }
@@ -952,13 +952,13 @@
   <div class="modal-overlay" id="review-modal" onclick="if(event.target===this)closeReviewModal()">
     <div class="modal">
       <div class="modal-title">Работа ученика</div>
-      <div id="rv-student" style="font-size:0.88rem;color:#3D4F6B;font-weight:600;margin-bottom:4px"></div>
+      <div id="rv-student" style="font-size:0.88rem;color:var(--text-2);font-weight:600;margin-bottom:4px"></div>
       <div id="rv-assign"  style="font-size:0.78rem;color:var(--violet);margin-bottom:14px"></div>
       <a id="rv-file-link" class="review-file-link" href="#" target="_blank" style="margin-bottom:14px;display:inline-flex">
         <i data-lucide="download" style="width:14px;height:14px"></i>
         <span id="rv-file-name"></span>
       </a>
-      <div id="rv-message" style="background:#f8f9fc;border-radius:12px;padding:12px 14px;font-size:0.82rem;color:#3D4F6B;line-height:1.5;margin-bottom:14px;display:none"></div>
+      <div id="rv-message" style="background:#f8f9fc;border-radius:12px;padding:12px 14px;font-size:0.82rem;color:var(--text-2);line-height:1.5;margin-bottom:14px;display:none"></div>
       <div class="grade-input-row">
         <label>Оценка (0–100):</label>
         <input class="grade-input" id="rv-grade" type="number" min="0" max="100" placeholder="—" oninput="updateGradeLetter()">
@@ -1802,10 +1802,10 @@
           document.getElementById('res-prog-wrap').style.display = '';
           // Score distribution
           const buckets = [
-            { label: '0–25%',  min: 0,  max: 25,  color: '#F15BB5' },
-            { label: '26–50%', min: 26, max: 50,  color: '#FFB347' },
-            { label: '51–75%', min: 51, max: 75,  color: '#06B6D4' },
-            { label: '76–100%',min: 76, max: 100, color: '#06D664' },
+            { label: '0–25%',  min: 0,  max: 25,  color: 'var(--pink)' },
+            { label: '26–50%', min: 26, max: 50,  color: 'var(--amber)' },
+            { label: '51–75%', min: 51, max: 75,  color: 'var(--cyan)' },
+            { label: '76–100%',min: 76, max: 100, color: 'var(--green)' },
           ];
           const maxCnt = Math.max(...buckets.map(b => done.filter(r => r.percent >= b.min && r.percent <= b.max).length), 1);
           document.getElementById('res-distrib-bars').innerHTML = buckets.map(b => {
@@ -1865,7 +1865,7 @@
         el.innerHTML = `<div style="font-size:0.72rem;color:var(--text-3);margin-bottom:12px">На основе ${session_count} сданных работ. Сортировка: от самых сложных вопросов.</div>` +
           stats.map((q, idx) => {
             const pct   = q.error_pct || 0;
-            const color = pct >= 70 ? '#F15BB5' : pct >= 40 ? '#FFB347' : '#06D664';
+            const color = pct >= 70 ? 'var(--pink)' : pct >= 40 ? 'var(--amber)' : 'var(--green)';
             return `<div class="qs-item">
               <div class="qs-num">${idx+1}</div>
               <div class="qs-text">${esc(q.question_text)}</div>
@@ -2354,7 +2354,7 @@
         const available   = (allCourses || []).filter(c => !assignedIds.has(c.id));
 
         let html = `<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px">
-          <div style="font-family:'Unbounded',sans-serif;font-size:0.82rem;font-weight:800;color:#0F172A">
+          <div style="font-family:'Unbounded',sans-serif;font-size:0.82rem;font-weight:800;color:var(--text)">
             Курсы класса <span style="color:var(--text-3);font-weight:600">(${(courses||[]).length})</span>
           </div>
           ${available.length ? `<button class="btn-ghost" onclick="openAssignCourseModal()" style="font-size:0.8rem">
@@ -2375,7 +2375,7 @@
                 <a href="/course?id=${c.id}" style="flex:1;display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;min-width:0">
                   <span style="font-size:1.6rem">${c.coverEmoji || LS.icon('book-open',20)}</span>
                   <div style="flex:1;min-width:0">
-                    <div style="font-size:0.9rem;font-weight:700;color:#0F172A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${esc(c.title)}</div>
+                    <div style="font-size:0.9rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${esc(c.title)}</div>
                     <div style="font-size:0.74rem;color:var(--text-3);margin-top:2px">${esc(SUBJ_LABEL[c.subjectSlug] || c.subjectSlug || '')} · ${c.lessonCount} уроков</div>
                   </div>
                   <div style="display:flex;align-items:center;gap:8px;flex-shrink:0">