Колір
Не список, а смуги: кожне сімейство викладене від світлого до темного всередині свого відтінку. Значення й порядок рахує браузер з живого :root, лічильник праворуч каже, скільки разів систему цей токен читає. Нуль означає, що токен нікому не потрібен.
Єдина справжня шкала продукту: 8 сходинок від поверхні до чорнила. Тепла, бо теплу поверхню обрав етап концепту.
Один колір дії і його натиск, плюс дві бліді підкладки. Шкали тут немає і поки не потрібна: акцент у продукті один.
Сім токенів, з яких чотири - той самий вершковий у діапазоні світлоти 95-97. Це дрейф, зібраний як є, і саме ця смуга робить його видимим.
Прийшли з сірого прототипу разом з розміткою.
Значення, яке ще не стало рішенням, не заслуговує на придумане ім'я. Кожен - кандидат у теплу шкалу; лічильник праворуч каже, за який з них варто братися.
Не колір, а прозорість поверх нього, тому шкали не мають. Після кроків 5.9 і 6.0 літералів у компонентах не лишилось жодного: усе, що було разовим rgba(), або отримало роль, або злилося з сусідом. Лічильник праворуч рахує і читання з ролі - примітив, який читає лише роль, робить рівно те, для чого існує.
Порахувано на льоту: пари в одному сімействі, між якими різниця світлоти не більша за 2, а відтінку - за 12. Для ока це один колір, для системи - два імені, і кожне з них хтось колись вибере навмання.
Роль отримує токен, коли вона повторюється, коли вона може розійтися із сусідньою і коли вона фарбує рівно одну поверхню. Поверхня стоїть в імені, поріг і виміряна цифра - у колонці контрасту. Чорнило перевіряється на 4.5:1 (велике - від 24px або 19px bold - на 3:1), заливка й лінія на 3:1 за WCAG 1.4.11.
| Роль | Поверхня | Вказує на | Контраст на білому |
|---|
Кожен файл компонента має дві половини: structure, скопійовану з wireframes/_wf.css, і colour, скопійовану з design/kit/kit.css; друга виграє. Структурна половина носить власні сірі сірого прототипу всередині скорочень - border: 1px solid var(--line-hair) - бо прототип мусить стояти сам. Отже в кольорової половини робота одна: сказати, що кольоровий продукт вирішив інакше.
Чому це не запис походження, хоч і схоже
Заміряно на кроці 7.69, перш ніж щось чіпати: структурна сторона називає колір 328 разів. Кольорова повторила 54 з них тим самим токеном і змінила 22. Тобто повторення застосували до 16% - а 274 кольори їдуть усередині скорочення й у кольоровому блоці не згадані взагалі. Довести той опис до повного означає дописати 274 рядки, які нічого не малюють. Другий послідовний світ - на 55 рядків менший, і взято його. A/B на 40 екранах у чотирьох ширинах: нульовий прохід 0, різниця 0.
Дві речі, які схожі на повторення і лишаються
Колір після скидання. У .acc-links скорочення стоїть у структурі, border: 0 - у запиті max-width: 959px, а це повертає колір на currentColor; кольоровий блок ставить --line-hair назад. Там нічого не малюється, бо товщина 0, але цей рядок - відновлення, а не дублікат, і правило, яке прибирає дублікати, не сміє прибирати відновлення.
Колір, який відрізняється, хай і трохи. Оті 22 - і є весь сенс блоку: --line-strong, що пом'якшується до --line-hair у семи місцях, і верхній край мегаменю, що йде з --line-inverse в --line-action у трьох.
Ворота контрасту в DESIGN-artifacts.md писалися для ціни: акцент на тексті дозволений від 19px bold, і кожна цінова поверхня під це розмірена. Решті продукту цього питання не ставили жодного разу. Крок 7.12 поставив: кожен елемент з --text-action на 146 станах сторінок, виміряний на тому тлі, на якому він реально стоїть, а не на умовному білому.
Шість класів стоять під порогом - і лишаються. Рішення власника, 12.08.2026
Переміряно на кроці 8.19, бо попередній перепис знімався на 40 кольорових екранах, а їх 88. Кожен елемент, якому браузер малює rgb(255,90,0) і який володіє видимими словами, на тому тлі, на яке він реально накладається - на 390 і на 1280, зі всіма відкритими станами. На 390: 18 акцентних форм, 8 не проходять, 62 екземпляри. На 1280: 21 форма, 12 не проходять, 172 екземпляри - це не інші мітки, а той самий продукт на двох ширинах.
| Елемент | Розмір | Тло | Контраст | 390 | 1280 | Що ще каже «тут» |
|---|---|---|---|---|---|---|
.on «Українська» | 14 / 600 | page | 3.13 | – | 82 | галочка ✓ у меню мов |
.uiv-cur знак ₴ | 11-20.9 | page · surface | 3.13 · 2.97 | 56 | 53 | одиниця при цифрі, яка поріг проходить |
.acc-link «Огляд» | 14 / 600 | surface | 2.97 | – | 27 | акцентна смуга ліворуч + іконка |
.acc-link «Клієнти» | 14 / 600 | rgb(242,240,237) | 2.75 | – | 4 | те саме, на глибшому тлі - найгірше в продукті |
.btn--text.btn--inline «Читати більше» | 14 / 700 | page | 3.13 | 4 | 4 | підкреслення + стрілка |
.cbnew | 30 / 600 | surface | 2.97 | 1 | 1 | великий текст за WCAG, промах на 0.03 |
.addr-tag | 10 / 700 | page | 3.13 | 1 | 1 | рамка + місце в картці |
Найбільшу з них жоден перепис досі не малював. .on «Українська» стоїть на 82 екранах із 88 і лежить усередині .wfh-langmenu, яке відкриває toggleLang(). Обхід станів шукав відкривачі за open[A-Z] плюс два імені, набрані руками - і з тих двох toggleDrawer у продукті взагалі не функція, тоді як toggleBurger, toggleDrCat і toggleLang є і не відкривались ніколи. Список із двох - це так само список. Розширено до toggle[A-Z] на 8.19.
Знак ₴ рахували як такий, що проходить, а він ні. Цифра при 20/700 поріг бере; одиниця біля неї малюється 11px/700 і не бере - це 56 із 62 на 390. Число і його одиницю міряли як одне, а їх двоє.
А найбільший рядок старого запису виявився мертвим. .badge «еталон», 28 екземплярів при 2.91 - більше не акцентний: крок 8.10 звів .badge, .addr-tag і .tf-mini в одну форму, і колір поїхав разом із нею. Заміряно зараз на coach-landing: «миттєво» й «опт» чорнильні, 10/700. .menu-val «Популярні» - теж чорнило.
.hptag, 12/500, 5.45) і дозволений за будь-якого кегля: правило, писане в пікселях, забороняло його без причини, яку підтверджує вимір. Рядок кабінету - випадок лише від 960px: нижче активний пункт це помаранчева заливка з чорнильним підписом, 5.4.Темніший помаранчевий не рятує, а коштує другого токена
#D24400 бере 4.5 лише на чистому білому (4.60). На --bg-surface це 4.37, на --bg-sunken 4.04 - тобто саме там, де ці контроли й стоять, він так само не проходить. А на темному тлі падає до 3.71, де нинішній акцент дає 5.45. Щоб пройти скрізь, потрібні два акцентні токени під умовою «світле тло / темне» - проти першого ж правила кольору: один помаранчевий на вигляд. Другий помаранчевий купив би цифру і продав правило.Рішення власника, 12.08.2026: лишити як є. Недобір за AA на акцентному тексті для цієї крамниці прийнятний, і на екранах не змінюється нічого. Те, що лишається дешевим і не витраченим: чорнило. У кожного з шести вже є нетекстовий акцентний сигнал - смуга, галочка, підкреслення, іконка, рамка, - тож чорнило не забирає жодної навігаційної підказки. Шість класів названо саме для цього: щоб рішення можна було відкотити одним рухом, а не шукати заново.
Ролей стало 69, і компонент більше не називає значення
Виміряно перед кроком: компоненти читали роль 2 069 разів і сире значення 211 разів - 145 прямих читань примітиву плюс 66 літералів. Це були не недбалість, а роботи, яких у семантичному шарі не існувало: тиха мітка (стрілка, шеврон, плейсхолдер), закреслена стара ціна, скелетон, скрим, вуаль над фотографією, м'які плашки статусів. Компонент, який називає значення, не перемикається темою - а це рівно те, що робить крок 7.
Додано 20 примітивів і 34 ролі, переписано 154 місця у 45 файлах. Стало: 2 199 читань через роль і 42 прямих - усі 42 в box-shadow (це наступний крок) плюс два метали рівня лояльності, де значення і є сенсом.
| Робота | Було | Стало |
|---|---|---|
| Скрим під діалогом | сім значень: .25 .36 .44 .46 .50 .52 .52 | --scrim-overlay, одне: .52 |
| Тиха мітка | #BBBBBB у 21 місці | --mark-faint |
| Штрихова підкладка | #ECECEC у 13 місцях | --bg-hatch на --warm-200. Спершу звався --bg-skeleton; браузер на кроці 7.28 показав, що жодної скелетонної смуги він не фарбує - лише дві штриховки й одну волосину. Волосина пішла на --line-hair, той самий --warm-200 |
| Закреслена ціна | #AAAAAA у 10 місцях | --text-price-was |
| Вуаль над фото | чотири стопи градієнта літералами | --veil-surface, --veil-page, --veil-inverse |
| М'які плашки статусів | 9 літералів rgba | --bg/-line-success-soft, -bonus-soft, -danger-soft |
Пікселі: 95 814 записів на 78 парах екран×ширина, зрушилось 547 елементів на 34 екранах - і лише колір (заливка 186, лінія 301, чорнило 278, градієнт 6). Верстка, тінь і типографіка не зрушили жодного разу: рухаються тільки ті властивості, про які було рішення.
Ухвалено 13.08.2026: тему беремо, і вона йде після тиражу
Рішення власника. До цього дня темної теми не було ні в списку In, ні в списку Out у CLAUDE.md - тобто вона була не відкладена, а неухвалена: крок з'явився в плані етапу як технічний наслідок ролей, і жодного рішення під ним не стояло. Тепер вона в обсязі MVP, і місце в маршруті назване: етап 09 → Крок 6 (тираж) → Крок 7 (тема) → Крок 8.
Чому після тиражу, а не зараз. 41 екран стає кольоровим саме на Кроці 6. Тема, зроблена до нього, перевіряється на 47 із 88, а решту зустрічає вже позаду себе. Це речення на стенді вже написане один раз: system-page.html у графі «темна тема» каже «не бачена - перевірити немає на чому, кольорового екрана з цими класами не існує». Побудувати тему до тиражу означає написати його ще сорок один раз.
Що вже готово, заміряно 13.08.2026: у файлах компонентів 4512 читань ролі й 0 сирих кольорових значень. Передумова виконана - блок [data-theme="dark"] перевизначає лише semantic, і більше нічого. Тема, яку довелося б робити правками сорока файлів компонентів, розсинхронізувалась би з першою ж зміною; цієї роботи більше немає.
І ще одне заміряне: акцент у темній темі бере AA, якого не бере у світлій
#FF5A00 на нових сходинках дає 5.76 · 5.45 · 5.10 · 4.67 - тобто повне AA для звичайного тексту на кожній поверхні, де слово взагалі може стояти. Нижче 4.5 падає лише доріжка, 3.99, а на доріжці тексту немає.
Отже компроміс A10 - властивість блідих тіл, а не акценту. Той самий знак читає 2.97 на --bg-surface і 5.10 на --warm-850. Рішення власника від 12.08.2026 лишається чинним для світлої теми і не переноситься в темну: будувати її так, ніби недобір за AA успадковується, було б помилкою, яку цей замір уже закрив.
| Що стоїть на дорозі | Розмір | Чия робота |
|---|---|---|
--warm-950 --warm-850 --warm-800 --warm-750 зайшли у шкалу, і смуги вище показують їх серед решти. І виправлено 13.08.2026, крок 7.11. Комірку 900 тримав #1C1C1C - Ink, H0 S0, піксель фірмової плити, який сходинкою теплої шкали не був ніколи, - тож поверхня темної теми вказувала на нейтральний і вся тема сіріла саме там, куди дивишся. Ink пішов зі шкали як --charcoal, 900 знову сходинка, --warm-150 заступив --grey-ed. А світлоти трьох ґрунтів - власника, зняті з його ж прикладу: сторінка L* 2.8, поверхня 7.0, западина 10.9; відтінок перевиведено за правилом сім'ї, бо підібрані рукою тони розходяться (H40 / H30 / H44), а шкала має один | +6 сходинки | зроблено. Правило: H і S беруться в #F2F0ED (локована Warm Neutral із плашки), світлота - з власних кроків світлого кінця в L*: 2.1 / 3.1 / 3.2 / 5.0. #1C1C1C не переобчислювався - дзеркало саме поклало його на другу сходинку |
[data-theme="dark"] не існує в коді. Ім'я зустрічається в усьому репозиторії один раз, і то в цьому абзаці | 0 рядків | Крок 7, це і є сама робота |
Один інлайновий літерал кольору на всіх 88 кольорових екранах - coach-home-free.html:111, background:#fff, успадкований байт у байт із замороженого сірого близнюка | 1 оголошення | Крок 7, і лише в кольоровій копії: інлайн виграє в будь-якого токена, тож тема його не дістане |
Стенд концепту тримає 32 літерали - concept.html 27, directions.html 5 | 32, і всі правильні | нічия: зразок палітри, який показує #FF5A00, мусить бути літералом, інакше він перестає бути зразком |
А одна цифра на цьому стенді була неправдою з кроку 7.30
button.html писав: «шість посилань футера мають inline style - готова стіна перед темною темою». Заміряно в wireframes/_nav.js:1940: їх три, усі на .wff-soc, і несуть вони саме color:inherit без другого оголошення. Шість було правдою до кроку 7.30, який зняв інлайн із юридичного рядка й лишив соціальний - і той самий крок записав правильну трійку в consolidation.md, але назад на цю сторінку її ніхто не переніс. Той самий вид дефекту, що .badge на кроці 8.19: пізніший крок зробив число хибним, а сторінка про це не дізналась.
І «стіна» - не стіна. color:inherit бере колір у батька, батько тематизований, отже під темною темою ці три посилання перемкнуться самі. Стіною є літерал, а літерал на продукті один - той, що рядком вище в таблиці. Стіною color:inherit лишається тільки для власної ролі цих посилань, а це вже не питання теми.