Геометрія
Кожна шкала - драбина з лічильником читань. Радіус свою вже закрив, відступ ще ні, і на сторінці видно, чим вони відрізняються. Значення прочитані з живого :root.
Ширина теж геометрія, і живе вона поруч: дві точки, контейнер, міра рядка і сітка - на сторінці «Адаптив». Пари теми ці токени не мають, бо тема міняє колір, а не геометрію.
Чотири сходинки і дві форми, після зведення на кроці 5.5. Було тринадцять плюс чотири літерали. Прибрані сходинки видалені з файлу, а не позначені застарілими: сходинка, якої не можна назвати, не потрапить у код випадково - тільки це й тримає шкалу шкалою.
2 · 4 · 8 · 12 · 16 · 24 · 32 · 40. Сітка 8px від вісімки вгору, півкроки по 4 нижче шістнадцяти, і 2 на оптичний зсув. Було 27 сходинок, що стояли через 1px від 1 до 18.
Читалися при цьому всі, мертвих не було - і саме тому справа була не в токенах, а в кроці драбини. Драбина з кроком 1px нічого не забороняє: коли є і 11, і 12, і 13, будь-яке число, яке набрала рука, вже «у шкалі». Тепер між сходинками є відстань, і кожна робить видиму роботу.
Нічия тут іде вгору (6 → 8, 10 → 12, 14 → 16), протилежно до правила радіуса - і навмисно: для кута менше заокруглення означає серйозніше, для відступу більше простору означає спокійніше. Принцип 4 обслуговується повітрям між речами і тісним кутом на них.
Ще 13 одноразових компонувальних чисел лишились літералами там, де стоять: відступ, ужитий один раз, це вимір, а не щабель.
Дев'ять розмірів для квадратних контролів і аватарів. Компонувальні ширини (1200 / 860 / 720) лишились літералами в тому компоненті, який володіє розкладкою: це не шкала, це конкретна сітка.
Усі три фотографії товару - 2048 × 2048, і кожна рамка малює їх вписаними (center/74-86% no-repeat). Тому рамка, яка не квадратна, лишає навколо квадратного предмета нерівне повітря: на 1280 фото картки виходило 196.8 у коробці 246 × 270.59 - 24.6 збоку і 36.9 згори й знизу.
Неквадратна форма була 10/11, і вона прийшла з _wf.css:482 ще на етапі 04, до того як з'явилась хоч одна фотографія. У DESIGN-artifacts.md запису про неї немає, отже її походження - [?]: це заглушка каркаса, яку ніхто не перерішив, коли приїхали фото.
Одне правило, п'ять рамок, на дві декларації менше
Продукт уже наполовину пішов від 10/11 сам: .pcard-l .lph і .gal .gmain стояли на aspect-ratio: 1, п'ять з дев'яти кадрів були квадратні, а .pcard .ph перемикався на 1/1 під 620 і всередині .pmini. Лишалось, що скелет завантаження обіцяв 10/11 над карткою, яка малює 1/1: на 390 це 171 × 188.09 проти 171 × 171, стрибок на 17px - саме на телефоні, де живе 91 із 171-піксельних карток.
Зведені: .pcard .ph, .skcard .skimg, .ci-ph, .ob-line .ph, .oh-thumbs i. Два оголошення при цьому видалені, а не додані - обидва перевизначення, які вже казали 1, тепер повторюють базове правило.
Квадрат беруть по ширині, ніколи по висоті: ширину пакує рядок і вже називає колонка сітки, висота вільна. Два з трьох кадрів не коштували нічого (.ci-ph і .ob-line .ph не найвищі у своєму рядку); стрічка історії замовлень найвища - її рядок став на 4px нижчим.
Це правило не про банер і не про тло. .hdeal .hd-ph (гумовий, min-height:180), .cart-behind .ph-card (150 за шухлядою) і .pd-img (16/6, смуга опису) теж кадрують фотографію, але їхню форму задає їхнє місце, а не предмет у кадрі.
Розмір кадру - інше питання, і воно ще відкрите: дев'ять імен, вісім розмірів (34 / 40 / 46 / 46 / 52 / 56-84 / 60 / 70 / 74). Чотири з них - щаблі драбини, записані токенами, п'ять - літерали. Див. аркуш рішень, рядок A6.
Як коробка каже, що вона квадратна - і це не вибір написання. aspect-ratio: 1, коли коробка не обирає свою ширину: та приходить з колонки сітки, з точки перелому або зі сторінки. width і height, коли розмір - одне фіксоване число, яке коробка тримає сама. Заміряно на 7.69: п'ять правил з першого боку, і всі п'ять - кадри фотографій; 110 з другого, і це гліфи, аватари, спінери й контроли. gallery.css тримає по одному з кожного - .gal .gmain гумовий, .gal .gthumb рівно 70 - і аркуш рішень прочитав це як «один файл каже квадрат двома способами». Це один файл, у якому лежать дві різні коробки.
Тінь відповідає на одне питання - наскільки високо це над поверхнею. Тому відповідь - шкала, а не вигадка в кожному компоненті: було 47 різних значень у 97 оголошеннях, той самий флаєр стояв на 12/30, 14/34, 16/36 і 18/44 у чотирьох файлах.
Три з них - не висота. Панель, прибита до низу екрана, кидає тінь вгору, шухляда - вбік, а рінг це стан, намальований ореолом. Тримати їх на одній драбині з висотою означало б плутати «високо» з «у фокусі».
47 значень - 12 рівнів і 3 рінги
До кроку тінь була єдиним місцем системи, де рішення ухвалювалось у кожному компоненті заново: 97 оголошень, 47 різних значень, і жодної драбини. Діалоги стояли на 20/50, 24/64, 28/70 і 6/24 - чотири висоти для одного «це замість сторінки».
Рінги винесені з тіні навмисно: 0 0 0 3px - це не відстань, а стан, намальований ореолом. Тримати фокус на драбині висот означало б сказати, що поле у фокусі «вище» за сусіднє.
Пікселі: зрушилось 307 елементів на 34 екранах - і лише box-shadow. Верстка, колір і типографіка не зрушили жодного разу. Плюс 4 подвійні оголошення прибрано: те саме правило оголошувало тінь двічі - у структурному блоці й у кольоровому - і після зведення обидва казали одне й те саме.
Токенами вони бути не можуть: власна властивість не працює всередині @media, тож набір записується як конвенція, а не як значення. Межа на N пишеться (min-width: Npx) з широкого боку і (max-width: N-1px) з вузького; будь-яке інше написання перекриває один піксель, і на ньому спрацьовують обидва правила.
До 7.70 цей набір вважали записаним у DESIGN-artifacts.md. Його там немає: ні точки перелому, ні @media, ні слова про адаптивність, і рівно одне тризначне значення в px на 111 рядків - замір контрасту. Тепер набір живе в tokens.css і на цій сторінці, і більше ніде.
| Межа | Файлів | Хто на неї спирається |
|---|
Причина при кожному числі - [?], окрім двох: 760 у seo-text це ширина його ж колонки читання, а 420 у restock-note це межа змісту із заміром, записаним поруч. Решта чисел працює, і жоден файл не каже, чому саме воно. Це не привід їх зводити - межа, на яку погодились два файли, це рішення, а не дрейф - це привід не додавати наступну без причини.
Те, що не належить жодному компоненту: ресет, scroll-padding-top:100px під злиплу шапку, overflow-anchor:none проти мерехтіння при її стисканні, padding-bottom:60px на мобільному під таб-бар і поріг 16px на текстових полях, нижче якого iOS зумить сторінку.