- cart.component.scss: normalize hardcoded hex colors to design tokens
(--text-primary, --text-secondary, --bg-primary/--bg-secondary/
--bg-tertiary, --border-color, --error-color, --success-color,
--warning-color, --shadow-*, --transition-*, --radius-* fallbacks)
across cart items, quantity controls, summary, login gate, terms
checkbox, payment modal, payment-active QR screen, and bank-payment
iframe modal
- cart.component.scss: deduplicate an accidental duplicate
.close-modal-btn rule block (identical CSS repeated twice)
- cart.component.scss: add focus-visible rings to clear-cart, remove,
quantity, checkout, close-modal, retry-payment, copy/open-link,
telegram-login, and card-payment buttons
- cart.component.scss: delivery-required warning now pairs an icon
with the text instead of relying on color/background alone
- cart.component.html: add warning icon + role="alert" to the
delivery-required notice; add aria-live/aria-label to the quantity
value so screen readers announce quantity changes
- delivery-selector.component.scss: normalize hardcoded hex colors to
design tokens; remove dead :host-context(.cart-container.alt) rules
left over after the .alt theme was removed from cart.component in
RC-Visual-02 (cart-container never carries an .alt class anymore);
add hover/focus-visible states to the delivery <select>
Build verified green via `npm run build`.
Out of scope / skipped:
- Did not restructure the payment modal or bank-payment iframe overlay
into shared app-dialog - it has custom multi-step state (creating/
waiting/success/error/timeout) and an already-implemented manual
focus-trap; restructuring it is a composition change, not visual
polish
- Did not convert clearCart()'s native confirm() to a custom
confirm-remove dialog - no existing storefront confirm-dialog
pattern to follow, and adding one is a composition/architecture
change
- spinner-large/spinner-small left untouched per RC-Visual-02 guidance
(in-progress action state, not content loading)
- .email-form block (email/phone capture after payment success) is
dead CSS behind commented-out markup; left in place rather than
deleting, since removing it is a code-cleanup call, not visual
polish
- region-selector/language-selector are header-only, not part of the
cart/checkout flow - left untouched
- no dedicated checkout page exists; checkout is the payment section
of the cart page, covered above
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Mechanical, value-preserving: font-weight: 400/500/600/700 -> var(--font-weight-normal/medium/semibold/bold, <same value>) across src/app.
Note: cart.component.scss now sits ~771 bytes over its per-file budget
in angular.json due to longer var() strings; non-fatal build warning,
noted in docs/UI-DESIGN-REVIEW.md as a follow-up (either bump the
component style budget slightly or accept the warning).
Mechanical sweep for border-radius: 4px/8px/12px/13px/999px replaced
with var(--radius-xs/sm/md/lg/full, <same value>) across src/app.
Only exact matches to existing token values were touched (20px, 16px,
10px, 6px, 3px, 2px etc. were left as-is since no token maps to them
without a visible size change on at least one tenant theme — see
docs/UI-DESIGN-REVIEW.md).
Mechanical, value-preserving substitution: every literal font-size
declaration across src/app (89 files) that matched one of the 9
typography scale steps introduced earlier (--font-size-xs..4xl) was
replaced with var(--font-size-STEP, <same-or-nearest-step-value>).
Values within ~0.03rem/1px of a scale step were snapped to that step
(e.g. 0.85rem and 0.8rem both -> --font-size-sm/0.8125rem; 0.9rem and
0.875rem -> --font-size-base/0.875rem) to consolidate roughly 15
near-duplicate sizes down to the 9-step scale, per the RC design-system
finalization brief. This eliminates most of the font-size fragmentation
found across the app (previously: 0.7/0.72/0.75/0.78/0.8/0.8125/0.85/
0.875/0.9/0.9375/0.95/1/1.05/1.1/1.125/1.15/1.2/1.25/1.3/1.35/1.4/1.5/
1.75/2rem all in live use simultaneously).
Not touched (deliberately, see docs/UI-DESIGN-REVIEW.md): 3rem+ display
sizes (too large a jump to any existing step, would need a --font-size-5xl
addition), font-size values expressed via clamp()/calc(), and any
component listed as intentionally distinct (code-editor syntax tokens,
theme brand colors).
