Компонент · рівень 2

Логотип бренду

Шість чужих логотипів у ряд на головній: Optimum Nutrition, OstroVit, Power Pro. Робота 4 без жодного слова - ми возимо те, що ви вже знаєте. І всередині - найакуратніший запасний варіант у продукті: коробка сама помічає, що картинка не прийшла.

рівень 2design/system/components/brand-logo.css34 рядки9 селекторів28 оголошень5 екранів24 логотипи
Анатомія

Розмітка звідси - та сама, що на home-buyer.html. Наведіть: сірий логотип бере свій колір.

Optimum NutritionOptimum OstroVitOstroVit Power ProPower Pro SporterSporter NOW FoodsNOW Foods MutantMutant
1Сітка .brandrow - 3 колонки до 620 і 6 від 620. Не флекс: шість логотипів різної ширини мусять стояти в рівних коробках, інакше ряд читається як список важливості
2Коробка 62 заввишки, край-волосина. Висота фіксована, щоб широкий логотип не робив свою клітинку вищою за сусідні
3Логотип - не більше 34 заввишки, object-fit: contain, grayscale(1) при непрозорості .86
4Наведення - три речі одночасно: край в акцент, підпис темніє, з логотипа сходить сірість. Бренд «оживає» тільки під курсором
5Підпис .bnm - слово замість картинки, і його не видно, доки картинка є

Чому сіре. Шість чужих палітр поруч із єдиним помаранчевим системи - це шість конкурентів за увагу на головній. Знебарвлення робить із них фактуру, а не рекламу: ряд каже «ці бренди тут є», і жоден із них не голосніший за кнопку.

Запасний варіант, який працює видаленням
<img src="..." alt="Optimum Nutrition" onerror="this.remove()"><span class="bnm">Optimum</span> .brandbox:has(img) .bnm { display: none }

Картинка не завантажилась - розмітка прибирає її з дерева, після чого :has(img) перестає збігатись, і слово з'являється саме собою. Жодного класу-стану, жодного «якщо»: коробка не питає, чи картинка вдалась, вона питає, чи картинка є.

Заміряно на home-buyer.htmlЗначення
коробок / з картинкою6 / 6
.bnm у першоїdisplay: none
картинка34 x 34, grayscale(1), непрозорість .86
сітка на 1280шість колонок по 162, крок 12
висота коробки62

Ім'я бренду при цьому не зникає ніколи. Поки картинка є, посилання зветься її alt; коли її немає - словом у .bnm. Читач з екрана чує «Optimum Nutrition» в обох випадках, і саме тому підпис можна ховати через display: none, а не тримати прихованим текстом.

Правило

Запасний варіант краще виводити з наявності, а не з прапорця. Прапорець хтось мусить поставити й не забути зняти; :has() над реальним деревом не має чого забувати.
Стани
СтанЩо робитьЧому так
спокійсірий логотип, .86, край-волосинафактура, а не реклама
наведенняколір повертається, край в акцент, підпис темнієбренд оживає тільки тоді, коли ним цікавляться
картинки немаєз'являється слово .bnm, 14/700розібрано вище, і воно не потребує жодного класу
до 620три колонки замість шестишість логотипів по 52px на телефоні не читаються
фокускільце браузера, синє rgb(0, 95, 204)заміряно натисканням Tab, :focus-visible справді збігся. Те саме, що в .relbox і .certthumb
Правило і антиправило

Правило

Чужий знак працює на довіру мовчки. Ряд логотипів не потребує заголовка «нам довіряють»: людина впізнає банку, яку бачила в залі, і це переконливіше за будь-яке речення про це.

Антиправило

Не став логотип бренду, якого не возиш. Знак у цьому ряду - обіцянка, що товар цієї марки в каталозі є. Порожня видача за натиском коштує дорожче, ніж коротший ряд.
Коробка на картці

.brandbox--card - та сама коробка логотипа, але на картці бренда в сітці: вища за рядкову, бо на картці логотип є головним, а не підписом.

Optimum Nutrition
Холостий контроль

Сторінка звіряє себе з файлом: 3 власні класи і 2 стани.

ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4

Від якого порогу: --bp-grid-2col, і воно вже стояло на реєстрі. Що саме міняється: ряд логотипів іде з трьох колонок у шість. Раунд молекул не змінив тут нічого, і це виправлення переклички: файл був у списку кандидатів на auto-fit, а замір показав ту саму причину, що й у плиток цілей - логотипів шість, збалансовані розкладки це 3 і 6, і заповнення дорогою дало б 4+2. Колонка виходить 88px і на 320, і на 620.
Рух

Робота: ВІДПОВІДЬ. Рухається: рамка, колір, filter і прозорість логотипа. Тривалість --dur-fast (150ms), крива --ease-standard. Значення читаються через var(): підміна токена в браузері веде за собою кожне з них, тобто числа у файлі немає. При prefers-reduced-motion рух зникає, а стан лишається.

Токени

Прочитані з brand-logo.css: 5 семантичних ролей і 8 примітивів.

Семантичні ролі (5)Примітиви (8)
--bg-page --line-action --line-hair --text-body --text-secondary--dur-fast --ease-standard --fs-14 --fw-bold --radius-12 --size-52 --space-12 --space-16

Повз шкалу чотири числа: 1px волосини, 62px висоти коробки, 34px стелі логотипа і 620px точки перелому. Перші три - розміри цього малюнка й нікого більше; 620 - друга за вжитком точка перелому системи, вона стоїть у дев'яти файлах і має свій рядок у tokens.css з кроку 7.70.

A/B

Цей файл крок 7.80 не змінював. Три проходи по 40 екранах: нульовий прохід 0, різниця 0.

Вирішувач по всіх 8 селекторах: жодного мертвого оголошення. Одна лінія тут уже зникала - на 7.69, коли колірний блок повторював значення, яке структура вже поставила.

Немає в коді -> етап 09

Чого бракує

  • Стан «жодного логотипа не завантажилось» - шість слів у рамках виглядають як зламаний блок, і нічого цього не помічає
  • Скільки брендів у ряду - шість написані вручну; правила «які шість» немає
  • Своє кільце фокуса - разом із .relbox і .certthumb. Питання відкрите
  • .bnm обрізається - «BioTechUSA» у 162px коробці на 1280 влазить, у 3-колонковій на 360 - [?], довших назв у коді немає, щоб перевірити

Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.