מערכת ערכות הנושא והטוקנים החדשה ================================= הדף מרכז את כל הידע המעשי על ארכיטקטורת הצבעים, משתני ה‑CSS והבדיקות שנדרשות לשימור חוויית הממשק בכל שמונה הערכות. זהו מקור האמת עבור כל שינוי עתידי ב‑CSS של ה‑WebApp. .. contents:: :depth: 2 :local: רקע ומוטיבציה ------------- - בריפקטור האחרון הוסרו צבעים ייחודיים מקבצים כגון ``global_search.css`` והופיעו באגים של *black/white zebra*, איבוד גרדיאנטים ולבן מסנוור ב‑Live Preview. - עדכוני Theme נקודתיים בעבר חזרו לצבעים קשיחים (HEX/RGB) ולכן נשברו ב‑Classic/Ocean/Forest שנוספו מאוחר יותר. - מטרת המערכת החדשה: ריכוז כל המשתנים ב‑שלוש שכבות, צמצום FOUC (קביעת ``data-theme`` עוד לפני טעינת ה‑CSS), שימור נגישות וייחודיות, והגדרה ברורה של מה חייב Override בכל Theme. - ההנחיות כאן מחליפות קוד קשיח ותלויות מערכת הפעלה (``prefers-color-scheme``) ומייצרות תשתית אחת עבור Theme Builder, Split View, Collections, Markdown Viewer ועוד. שכבות משתנים וטעינת ``data-theme`` ----------------------------------- **Level 1 – Primitives (:root ב‑``variables.css``)** קבועים לכולם ומרוכזים כיום ב‑``webapp/static/css/variables.css`` (הקובץ נטען מתוך ``base.html`` בתחילת ה‑``). כאן מגדירים צבעי מותג (`--primary`, `--secondary`), צבעי מצב (`--success` וכו'), טוקני סכנה (`--danger-bg`, `--danger-border`, `--text-on-warning`), ערכי markdown (`--md-surface`, `--md-text`), הגדרות כפתור ברירת מחדל וערכי גלאס (`--glass*`). אין להשתמש ב‑HEX מחוץ לקטע זה. **Level 2 – Semantic Tokens per Theme** בלוקים של ``:root[data-theme="..."]`` ב‑``variables.css`` קובעים רקעים (`--bg-*`), טקסט (`--text-*`), כרטיסים (`--card-*`), צבעי קוד, כפתורים (`--btn-primary-*`) וטוקנים ל‑Split View (`--split-preview-*`). Ocean/Forest/Classic/Dim/Nebula/Rose Pine Dawn/High Contrast משתמשות בכל הטוקנים; Dark/Dim/Nebula גם בעבור קבצי CSS ב־``static/css/dark-mode.css`` שנשענים על אותם ערכים גלובליים. **Level 3 – Component Tokens** נוצר רק כשיש צורכי עיצוב ייחודיים: `--search-card-shadow` ב‑``global_search.css``, `--bookmarks-panel-bg` ב‑``bookmarks.css``, משפחת `--split-*` ב‑``split-view.css``. את ערכי ברירת המחדל מגדירים ברכיב עצמו, אך מומלץ להוסיף הפניה ל‑``variables.css`` (או ל‑`:root[data-theme]`) כאשר הרכיב חוצה דפים, כדי למנוע חזרה לצבעים קשיחים. **טעינת המערכת** ``base.html`` קובע ``data-theme`` על `` מתוך `localStorage` כבר ב‑`` כדי למנוע FOUC, ולאחר מכן טוען את ``webapp/static/css/variables.css`` וכל שאר קבצי הרכיבים. כך הטוקנים זמינים עוד לפני טעינת ``dark-mode.css`` / ``high-contrast.css`` / קבצים ייעודיים. Theme Wizard ו‑Theme Builder מזריקים Overrides דינמיים ל‑`` - כאשר מבצעים Override לתמה קיימת (בידיים היום או דרך Theme Builder בעתיד), כתבו את הטוקנים בתוך ``:root[data-theme="ocean"]`` באותו `