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

Замовлення оформлено

Тіло сторінки підтвердження, вузол 6.2. Плита успіху, чек із рядками замовлення й підсумком, факти доставки й оплати, і панель, що або пропонує акаунт (кінець гостя), або підтверджує, що все вже збережено (кінець з акаунтом).

рівень 3design/system/components/order-placed.css182 рядки24 класів1 поріг · --bp-shell-wide2 сірі екрани
Як цей компонент замовили

Перший компонент проєкту, замовлений субагентом, який зупинився. Він не намалював нічого й не лишив чернетки: віддав сім замовлень із зоною і сірим джерелом кожного. dry-run.mjs передбачив це ще на етапі 08 - «23 класи родини op-*, без компонента», тобто тіло екрана цілком.

А architecture.md A19 казав протилежне, і це знахідка під знахідкою. A19 називає op-* і відкладає: «це робота екрана, і етапи 09-12 зроблять її, не чіпаючи систему». Але екран не має права на власні стилі - правило 10 у design/system/CLAUDE.md і дев'ять знаків. Два речення можуть бути істинними разом лише якщо 6.2 збирається з наявних компонентів - а плити результату не було ніколи.

Анатомія

Розмітка звідси - та сама, що в сірому оригіналі wireframes/order-placed.html.

Замовлення №1024 прийнято

Ми надіслали SMS із підтвердженням на +380 ** *** 45 67. Трек-номер надішлемо у SMS, щойно замовлення зберемо.

Ваше замовлення

фото
Optimum Nutrition · США
Gold Standard 100% Whey 2270 г
Подвійний шоколад · 2270 г
1 290 ₴× 1
фото
Optimum Nutrition · США
Creatine Monohydrate 500 г
Без смаку · 500 г
549 ₴× 1
Товари (2)1 839 ₴
Доставка60 ₴
Разом1 899 ₴

Доставка та оплата

Доставка
Нова Пошта, відділення № 12Одеса · Вікторія Коваль
Оплата
Сплачено карткою онлайн
+18 ₴ бонусів нарахуємо після отримання замовлення.

Створіть акаунт

Історія замовлень, збережені адреси й бонуси - без пароля, за номером телефону.

Створити акаунт Відстежити замовлення Продовжити покупки
1Плита .op-hero - м'яке тло успіху, волосина, радіус 12. Не залита: принцип 4 тримає сторінку спокійною, і замовлення, яке дійшло, не святкує
2Диск .op-check - 64, біле тло сторінки, грань і чорнило успіху. Це .cv-ok .m (46) на розмір більший, бо момент більший. 2.5px грані сірого -> одна волосина: система малює одну товщину
3Рядок чека .op-item - не .ob-line і не .ci: у першого немає слотів бренда й варіанта і він несе «Залишити відгук», другий несе степер і «Видалити». Тут нічого змінити не можна - це чек
4Рамка фото .op-thumb - квадрат, 52. Сірий малював 52 × 58, до того як правило 7.68 сказало «коробка, що обрамляє фото товару, - квадратна»
5Мітка оплати .op-paid::before - ✓ малюється, ніколи не набирається. accept.mjs валить компонент, що малює гліф, який розмітка теж друкує; сіра розмітка тут не друкує нічого
Нічого тут не є новим виглядом

Кожне оголошення - це сірий оригінал, перекладений картою tools/grey-vars.mjs, або скопійоване з сусіда, якого система вже вирішила:

ЩоЗвідки
плита успіху.cv-ok (coach-verify.css) - м'яке тло, волосина, радіус 12, диск білий зі знаком успіху
рамка фотоproduct-thumb.css - квадрат, радіус 8, запале тло, волосина
сильна грань панелі.acc-tier (account-shell.css:59) відповів на сіре 1.5px solid var(--dark) токеном --line-strong
поріг 860уже в реєстрі: --bp-shell-wide, дзеркало 859

Числа поза рампою прилипають до сходинки, і зміна названа. 13.5 і 11.5 не існують на жодній шкалі системи; 10 і 6 не є радіусами; 60 не є розміром. Єдине число, що лишилось літералом, несе [?] - ширина колонки 53.75rem. І це НЕ --bp-shell-wide, хоч число те саме: той токен - точка адаптиву, а тут контейнер, і саме цю помилку крок 10.6b упіймав на .pf-note, який носив --bp-grid-2col як міру читання.

Стани

Власних станів компонент не має: на сторінці підтвердження нічого не наводиться й нічого не натискається, крім кнопок, які належать button.css. Те, що виглядає як стан, - це дві редакції правої панелі, і вони обидві базові.

Історію та бонуси збережено

Замовлення вже у вашому кабінеті - разом із трек-номером, щойно він з'явиться.

1.op-offer - кінець гостя: запрошення. Сильна грань, бо це дія, якої ще не зробили
2.op-saved - кінець з акаунтом: квитанція. Волосина й тепла поверхня, бо тут нема чого робити
Пари теми немає, і це правило

Жодного блоку [data-theme="dark"]. Кожен колір тут - семантична роль, а роль уже несе обидві половини в tokens.css. Другий блок був би другою редакцією ухваленого рішення.

Токени

Прочитані з order-placed.css: 11 семантичних ролей і 28 примітивів.

Семантичні ролі (11)Примітиви (28)
--bg-success-soft --bg-sunken --bg-surface --line-hair --line-strong --line-success --line-success-soft --text-muted --text-primary --text-secondary --text-success--container-text --fs-12 --fs-14 --fs-16 --fs-20 --fs-24 --fs-30 --fs-8 --fw-black --fw-bold --fw-regular --fw-semibold --lh-airy --lh-snug --ls-caps --ls-lead --radius-12 --radius-8 --radius-circle --size-52 --size-64 --space-12 --space-16 --space-2 --space-24 --space-32 --space-4 --space-8
Холостий контроль

Сторінка звіряє себе з файлом: 24 власних класів і 0 станів, які вона може назвати, але не показати наживо.

Немає в коді
  • Плита результату як ПАТЕРН - ця форма стоїть у продукті під сімома іменами (.cv-ok, .co-err-*, .co-proc-*, .sys-*, .emptybox, .errbox, диск авторизації). Правило вимагає трьох екранів; тут сім. Не взято за рішенням власника, з числом, у backlog.md
  • Липкий відступ 120px - це заміряна висота власної шапки, а не сходинка. [?]
  • Ширина колонки 53.75rem - 860 не має сходинки як контейнер. [?]
  • Фото товару в рядку чека - .op-thumb показує слово «фото». checkout-form.css дає своїм рядкам справжні знімки через .co-line[data-img]; тут такого немає. Питання субагента, не закрите: 6.2 лишається без фото чи винен рядок data-img