/* ═══════════════════════════════════════════════════════════════════════════ ТЕМА — єдине джерело розмірів, відступів і форми ═══════════════════════════════════════════════════════════════════════════ ЧОМУ ЦЕЙ ФАЙЛ З'ЯВИВСЯ. Виміряно по всіх 32 файлах CSS застосунку: колір 1137 оголошень · 33 значення · 5% повз токен радіус 551 оголошень · 42 значення · 58% повз токен розмір шрифту 216 оголошень · 30 значень · 100% повз токен відступ (gap) 671 оголошень · 33 значення · 100% повз токен padding 581 оголошень · 213 значень · 99% повз токен Колір тему МАВ — і саме тому його вдалось полагодити однією правкою п'яти токенів, коли виявилось, що чотири відтінки холодні. Розмір, відступ і типографіка теми не мали, і кожен новий екран додавав до купи свої числа. 213 різних значень padding — це не система, це 213 окремих рішень, ухвалених у різні дні різними шматками коду. Найкрасномовніше: 62 оголошення відрізняються на ПІВ ПІКСЕЛЯ (11 і 11.5, 12 і 12.5, 13 і 13.5, 14 і 14.5). Цієї різниці не бачить жодне око, але через неї сусідні підписи стоять на різних лініях, і екран виглядає зібраним, а не спроєктованим. ЯК ЦИМ КОРИСТУВАТИСЬ. Нове правило не вигадує число — воно бере щабель: font-size: var(--fs-13); а не font-size: 13.5px gap: var(--sp-3); а не gap: 7px border-radius: var(--r-card) а не border-radius: 14px Якщо потрібного щабля немає — це майже завжди означає, що предмет просить не нового числа, а іншого щабля. Додавати щабель можна, але тоді він додається СЮДИ і стає доступним усім, а не лишається числом в одному правилі. ЩО ЦЕ ДАЄ. Наступна зміна вигляду — це правка тут, а не обхід 3691 правила. Рівно так само, як бурштин замінився на теплий однією правкою кольорових токенів, а не пошуком по файлах. ═══════════════════════════════════════════════════════════════════════ */ :root{ /* ── ТИПОГРАФІКА ────────────────────────────────────────────────────── Дев'ять щаблів замість 28 значень. Межі взято з реального розподілу: кожен щабель стоїть там, де в даних була купа, а не там, де зручно ділиться навпіл. 10 ×22 службова мітка, моно, каптал 11 ×35 підпис під числом, стан, час 12 ×45 вторинний текст, підказка ← найгустіша купа 13 ×36 основний дрібний текст, рядки списків 14 ×20 основний текст 15 ×13 заголовок картки 18 ×16 заголовок розділу 24 ×14 велике число в звіті 32 ×13 число-герой (38 і 40 сюди ж) 🛑 11.5, 12.5, 13.5 і 14.5 щаблями НЕ стали навмисно. Це і є той шум, заради якого файл писався: пів пікселя не читаються як розмір, вони читаються як збій вирівнювання. */ --fs-10: 10px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-18: 18px; --fs-24: 24px; --fs-32: 32px; /* Висота рядка йде за розміром, а не задається щоразу окремо. Дрібний текст потребує щільнішого рядка, великий — вільнішого; коли обидва стоять на 1.5, дрібний розсипається, а великий злипається. */ --lh-tight: 1.2; /* числа й заголовки */ --lh-base: 1.45; /* рядки списків, підписи */ --lh-read: 1.6; /* абзаци, які справді читають */ /* ── ВІДСТУПИ ───────────────────────────────────────────────────────── Крок 2px до 12, далі 4px. Розподіл уже майже такий і був — купи на 2, 4, 6, 8, 10, 12, 14, 16 — але 85 оголошень сиділи на непарних (1, 3, 5, 7, 9, 11) і ламали ритм рівно настільки, щоб це помічалось як неохайність, а не як задум. */ --sp-1: 2px; --sp-2: 4px; --sp-3: 6px; --sp-4: 8px; /* ×159 — найчастіший відступ застосунку */ --sp-5: 10px; /* ×119 */ --sp-6: 12px; --sp-7: 14px; --sp-8: 16px; --sp-10: 20px; --sp-12: 24px; --sp-14: 28px; --sp-16: 32px; /* ── ФОРМА ──────────────────────────────────────────────────────────── Радіуси названі ПРИЗНАЧЕННЯМ, а не числом: правило має казати «це картка», а не «це чотирнадцять». Числа взято з рішення сесії 1 — концентричні 11 / 16 / 22, де внутрішній дорівнює зовнішньому мінус відступ, тож кути вкладених предметів не стирчать назовні. */ --r-mark: 2px; /* маркер стану, смужка */ --r-chip: 6px; /* чип, дрібна мітка */ --r-control:11px; /* кнопка, поле, пункт рейки */ --r-card: 16px; /* картка, панель */ --r-modal: 22px; /* модалка, оверлей */ --r-pill: 999px; /* кругле: аватар, лічильник */ /* ── РУХ ────────────────────────────────────────────────────────────── Одна крива на весь застосунок. Вона ж стоїть у специменах усіх шести сесій; різні криві в сусідніх блоках читаються як різні застосунки. */ --ease: cubic-bezier(.32,.72,0,1); --dur-fast: 120ms; /* стан контрола під пальцем */ --dur-base: 240ms; /* поява картки, згортання */ --dur-slow: 420ms; /* перехід між сценами */ } /* ═══════════════════════════════════════════════════════════════════════════ РЕЦЕПТИ — щоб об'єкт казав, ЩО він таке, а не з яких чисел складається ═══════════════════════════════════════════════════════════════════════════ Щаблі вище прибрали різнобій у числах. Але саме число — не найдорожче, що дублюється. Виміряно по тих самих 32 файлах: 296 правил малюють КАРТКУ (радіус + падінг + заливка) 214 правил малюють РЯДОК (display + gap + падінг) 114 правил задають ТЕКСТ (color + font) Тобто три форми переписані по кількасот разів, щоразу трохи інакше — і кожен новий екран додавав до них ще один варіант. Саме тому я щоразу писав нові дрібні правила (.brt-row, .hp, .mn-*) замість того, щоб узяти готове: готового не було. Тут воно є. Розмітка тепер каже «це картка» і «це рядок», а не перелічує числа. Наступна зміна вигляду карток — правка одного правила, а не 296. 🛑 Рецепти НЕ замінюють наявний CSS і нічого не ламають: вони opt-in. Старі класи працюють як працювали; новий екран збирається з рецептів, а старий переїжджає тоді, коли його однаково торкаються. Іменування коротке навмисно: `t-` (theme). Довгий префікс у розмітці читається гірше за сам вміст, а ці класи стоятимуть майже на всьому. */ /* ── КАРТКА ───────────────────────────────────────────────────────────── Поверхня, на якій живе все інше. Форму тримає ЗАЛИВКА, не рамка — це рішення сесії 1: рамка на кожному предметі і є той дешевий вигляд, з якого починається дизайн-код. */ .t-card{ padding: var(--sp-8) var(--sp-10); border-radius: var(--r-card); background: var(--fill-1); } /* Велика поверхня бере слабшу заливку: щаблі .055/.09 розраховані на предмет розміром із кнопку, і панель на 1200×740 при --fill-1 світиться як окремий об'єкт замість того, щоб бути тлом. */ .t-card-lg{ padding: var(--sp-12) var(--sp-14); background: var(--fill-0) } /* Вкладена картка: радіус на щабель менший, інакше кути стирчать назовні. */ .t-card-in{ padding: var(--sp-5) var(--sp-6); border-radius: var(--r-control); background: var(--fill-0) } /* ── РЯДОК ────────────────────────────────────────────────────────────── Найчастіша форма застосунку після картки: ліворуч коротке, праворуч довге, між ними один відступ. */ .t-row{ display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-5) var(--sp-6); border-radius: var(--r-control); } .t-row-fill{ background: var(--fill-0) } /* Список рядків: розділяє лінія, а не рамка навколо кожного. Лінія між рядками — одне з трьох місць, де лінія лишилась дозволеною. */ .t-rows > .t-row + .t-row{ border-top: 1px solid var(--line) } /* Права частина рядка, яка не має тиснути на ліву. */ .t-row-end{ margin-left: auto; flex: none } /* ── СТОСИ ────────────────────────────────────────────────────────────── Вертикальний і горизонтальний набір без власних чисел. Модифікатор називає щабель, а не піксель: t-stack-4 — це --sp-4, а не «вісім». */ .t-stack{ display: flex; flex-direction: column; gap: var(--sp-4) } .t-stack-2{ gap: var(--sp-2) } .t-stack-6{ gap: var(--sp-6) } .t-stack-8{ gap: var(--sp-8) } .t-stack-12{ gap: var(--sp-12) } .t-cluster{ display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap } .t-cluster-2{ gap: var(--sp-2) } .t-cluster-6{ gap: var(--sp-6) } /* ── ТЕКСТ ────────────────────────────────────────────────────────────── Чотири ролі покривають 114 правил «color + font». Роль, а не розмір: правило має казати «це підпис», а не «це одинадцять і сірий». */ .t-lab{ font: 500 var(--fs-12)/var(--lh-base) var(--sans); color: var(--text-mute) } .t-val{ font: 500 var(--fs-13)/var(--lh-base) var(--sans); color: var(--text) } .t-meta{ font: 500 var(--fs-11)/var(--lh-base) var(--sans); color: var(--text-mute) } .t-title{ font: 700 var(--fs-15)/var(--lh-tight) var(--sans); color: var(--text) } /* Службова мітка над блоком: каптал заборонений (рішення сесії 1 — капси розривають кирилицю), тож роль тримають розмір і колір. */ .t-cap{ font: 600 var(--fs-10)/1 var(--mono); color: var(--text-mute); letter-spacing: .04em } /* ── ЧИСЛО ────────────────────────────────────────────────────────────── Герой звіту. Моноширинний навмисно: табличні цифри не міняють ширину при зміні значення, тож сусідні числа не дригаються при оновленні. */ .t-num{ font: 700 var(--fs-24)/var(--lh-tight) var(--mono); color: var(--text); font-variant-numeric: tabular-nums } .t-num-hero{ font-size: var(--fs-32) } .t-num-sm{ font-size: var(--fs-18) } /* ── ПОРОЖНЬО ─────────────────────────────────────────────────────────── Пунктир із запрошенням, а не сіре «немає даних». Без --danger: порожньо це не аварія, а ще не зроблена робота, і лякати нею означає знецінити справжню аварію, коли вона настане. */ .t-empty{ padding: var(--sp-12); border-radius: var(--r-card); border: 1px dashed rgba(255,255,255,.13); font: 500 var(--fs-13)/var(--lh-base) var(--sans); color: var(--text-mute); text-align: center; }