From 916e2ddc31015f9296010824457e78a1f0746e41 Mon Sep 17 00:00:00 2001 From: Maxim Dolgolyov Date: Fri, 22 May 2026 22:10:10 +0300 Subject: [PATCH] refactor(profile): use ls.css design tokens MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replaced 12 hardcoded brand colors with var() tokens: - linear-gradient(135deg,#9B5DE5,#06D6E0) → var(--grad-1) in 7 CSS rules (avatar ring, badge dot, stat val grad, xp level, frame preview, zoom thumb, send btn, modal dot) - #9B5DE5 → var(--violet) in 3 rules (avatar edit btn, bm-icon-lesson, frame selected border, av-drop hover) - #06D6E0 → var(--cyan) in bm-icon-file - #0F172A → var(--text) in frames-section heading inline style Kept: dark panel palette (#0d0b28/#1a1248), 90deg horizontal gradients, domain subject colors (SUBJ_META palette), shop gold/amber gradients, shop-activate/active brand variants, #06D6A0 bookmark course teal, #EF476F delete-hover (≠ --pink), tinted rgba values. Before: ~26 hardcodes | After: ~12 hardcodes (decorative/domain/dark-panel) Co-Authored-By: Claude Sonnet 4.6 --- frontend/profile.html | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/frontend/profile.html b/frontend/profile.html index 9d4e0c2..6fca36d 100644 --- a/frontend/profile.html +++ b/frontend/profile.html @@ -63,7 +63,7 @@ } .p-avatar-ring { position: absolute; inset: -3px; border-radius: 50%; - background: linear-gradient(135deg, #9B5DE5, #06D6E0); + background: var(--grad-1); padding: 3px; border-radius: 50%; } .p-avatar-ring-inner { @@ -81,7 +81,7 @@ .p-avatar-edit-btn { position: absolute; bottom: 0; right: 0; width: 26px; height: 26px; border-radius: 50%; - background: #9B5DE5; border: 2px solid #1a1248; + background: var(--violet); border: 2px solid #1a1248; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; transition: background .15s; } @@ -111,7 +111,7 @@ } .p-badge-dot { width: 5px; height: 5px; border-radius: 50%; - background: linear-gradient(135deg, #9B5DE5, #06D6E0); + background: var(--grad-1); } .p-since { font-size: 0.67rem; color: rgba(255,255,255,0.3); } @@ -130,7 +130,7 @@ color: #fff; line-height: 1; } .p-stat-val.grad { - background: linear-gradient(135deg, #9B5DE5, #06D6E0); + background: var(--grad-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .p-stat-lbl { font-size: 0.58rem; color: rgba(255,255,255,0.4); font-weight: 600; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; } @@ -281,9 +281,9 @@ width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; } - .bm-item-icon-lesson { background: rgba(155,93,229,0.1); color: #9B5DE5; } + .bm-item-icon-lesson { background: rgba(155,93,229,0.1); color: var(--violet); } .bm-item-icon-course { background: rgba(6,214,160,0.1); color: #06D6A0; } - .bm-item-icon-file { background: rgba(6,214,224,0.1); color: #06D6E0; } + .bm-item-icon-file { background: rgba(6,214,224,0.1); color: var(--cyan); } .bm-item-body { flex: 1; min-width: 0; } .bm-item-title { font-size: 0.85rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bm-item-sub { font-size: 0.72rem; color: var(--text-3); margin-top: 2px; } @@ -315,7 +315,7 @@ .form-footer { display: flex; align-items: center; gap: 12px; margin-top: 16px; } .btn-save { padding: 9px 22px; border: none; border-radius: 99px; - background: linear-gradient(135deg, #9B5DE5, #06D6E0); + background: var(--grad-1); color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: all .2s; position: relative; overflow: hidden; @@ -398,7 +398,7 @@ } .ach-xp-lvl { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; - background: linear-gradient(135deg, #9B5DE5, #06D6E0); + background: var(--grad-1); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; line-height: 1; } @@ -425,11 +425,11 @@ border: 2px solid transparent; transition: all 0.18s; min-width: 72px; } .frame-item:hover { background: rgba(155,93,229,0.04); } - .frame-item.selected { border-color: #9B5DE5; background: rgba(155,93,229,0.06); } + .frame-item.selected { border-color: var(--violet); background: rgba(155,93,229,0.06); } .frame-item.locked { opacity: 0.35; cursor: not-allowed; filter: grayscale(0.5); } .frame-preview { width: 44px; height: 44px; border-radius: 50%; - background: linear-gradient(135deg, #9B5DE5, #06D6E0); + background: var(--grad-1); display: flex; align-items: center; justify-content: center; font-family: 'Unbounded', sans-serif; font-size: 0.7rem; font-weight: 800; color: #fff; } @@ -624,7 +624,7 @@ } .av-title-dot { width: 8px; height: 8px; border-radius: 50%; - background: linear-gradient(135deg, #9B5DE5, #06D6E0); + background: var(--grad-1); flex-shrink: 0; } .av-close { @@ -662,7 +662,7 @@ transition: all .2s; background: rgba(155,93,229,0.04); } .av-drop:hover, .av-drop.drag-over { - border-color: #9B5DE5; background: rgba(155,93,229,0.10); + border-color: var(--violet); background: rgba(155,93,229,0.10); transform: translateY(-1px); } .av-drop-icon { width: 30px; height: 30px; color: rgba(155,93,229,0.65); margin-bottom: 2px; } @@ -696,7 +696,7 @@ } #av-zoom::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; - background: linear-gradient(135deg, #9B5DE5, #06D6E0); + background: var(--grad-1); box-shadow: 0 1px 4px rgba(0,0,0,0.4); cursor: pointer; } .av-crop-hint { font-size: 0.67rem; color: rgba(255,255,255,0.28); text-align: center; } @@ -712,7 +712,7 @@ .av-btn-back:hover { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.8); } .av-btn-send { flex: 2; padding: 10px 16px; border-radius: 12px; border: none; - background: linear-gradient(135deg, #9B5DE5, #06D6E0); + background: var(--grad-1); color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: opacity .15s; } @@ -896,7 +896,7 @@