/** * cart-added.css — potwierdzenie „dodano do koszyka" na przycisku zakupu. * * KOMPONENT, NIE SEKCJA (decyzja Andrzeja, 2026-08-31): ten sam efekt ma * wejść na każdy przycisk „Dodaj do koszyka" w sklepie (pasek szybkiego * zakupu dziś; hero produktu, volume-picker, starter-kit-buy, cross-sell, * doradca kalkulatora — w kolejnych krokach). Pełny opis użycia: * docs/cart-added-effect.md. * * CO SIĘ DZIEJE. Trzy takty, każdy czytelny osobno: * 1. busy — koszyk na przycisku kołysze się (obrót ±8°), etykieta mówi * „Dodaję…", przycisk ma aria-busy, ale NIE disabled: stan wyłączenia * w przepisie rangi 1 maluje szarość „niedostępne", a to nie jest * ten komunikat. Powtórne kliknięcie ignoruje skrypt konsumenta. * Sygnał „coś się dzieje" bez kółeczka ładowania, którego paleta * nie ma. * 2. done — przycisk PRZESKAKUJE w panel odwrócony (--dc-surface-inverse: * grafit w motywie jasnym, krem w ciemnym) ze złotą obwódką z rangi 1, * koszyk ustępuje miejsca ptaszkowi, który wskakuje z lekkim obrotem * (0.4 → 1.18 → 1), a wokół przycisku rozchodzi się i gaśnie * pojedyncza ZŁOTA aureola. Etykieta: „Dodano". * 3. powrót — konsument zdejmuje atrybut, przycisk wraca do złota przez * własne przejście background-color / box-shadow. * * DLACZEGO TAK, A NIE INACZEJ: * - Na przycisku zamiast dymka: potwierdzenie stoi DOKŁADNIE tam, gdzie * klient patrzy (na przycisku, który kliknął), a nie w rogu ekranu, * gdzie komunikat pływający musiałby konkurować z nagłówkiem i paskiem. * - Grafit + złoto zamiast zieleni sukcesu (uwaga Andrzeja, 2026-08-31: * „zbyt zielony, nie trzyma się kupy z naszą stylistyką"). Pierwsza * wersja brała --dc-success; zieleń jest w palecie kolorem komunikatu * (notice.css), nie kolorem marki, i na złotym przycisku czytała się * jak obcy element. Panel odwrócony ze złotą obwódką to para, którą * sklep już zna (najazd .dc-product-hero__assistant, help-cta), więc * „stempel" należy do tej samej rodziny co przycisk, który zastępuje. * - Aureola jednorazowa, nie pętla: jedno „tąpnięcie", które oko łapie * kątem, a potem spokój. Pętla robiłaby z przycisku reklamę. * - Skok koloru bez przejścia: gradient CTA (background-image) nie ma * przejścia do koloru jednolitego, a próba udawania go warstwą byłaby * droższa niż warta — skok + aureola czytają się jako stempel. * - Tekst na panelu odwróconym to --dc-surface (biel w jasnym, #1C1A17 * w ciemnym) — dokładnie para inverse / surface z najazdu asystenta. * Kontrast zmierzony na pikselach: patrz docs/cart-added-effect.md. * - Cień --dc-shadow-md zamiast złotej poświaty rangi 1: poświata * --dc-shadow-accent należy do złota; pod grafitem czytałaby się jak * resztka poprzedniego stanu. * * KONTRAKT ZNACZNIKÓW (patrz docs/cart-added-effect.md): * * Stany: atrybut data-dc-cart-added = "" | "busy" | "done". Ustawia * go skrypt konsumenta, on też podmienia etykietę i po ~2,5 s zdejmuje * stan. Komponent nie ma własnego skryptu — celowo: każdy konsument ma * już własną obsługę koszyka, a stan to jeden atrybut. * * .dc-cart-added-bump — klasa pomocnicza na licznik koszyka w nagłówku * (albo dowolny inny element): jednorazowy podskok tą samą klatką co * ptaszek. Konsument dodaje ją po podmianie fragmentów i zdejmuje na * animationend, żeby następny zakup mógł ją dodać znowu. * * Wymaga tokens.css i base.css. Przycisk-gospodarz musi mieć własny * przepis rangi 1 (gradient, obwódka, cień) — komponent podmienia tylko * to, co różni stan done, i pilnuje, żeby jego selektory (0,2,0) wygrały * z przepisem sekcji (0,1,0). * * CO JEST TU LICZBĄ, A NIE TOKENEM (reguła 17, punkt 5): * 1. kąty obrotu (±8°, −12°, 3°) i skale (0.4, 1.18) klatek — kształt * ruchu, nie wymiar; * 2. udziały color-mix() (55 %, 0 %) — jak w notice.css; * 3. mnożniki czasu (× 2) na tokenach czasu — komponent nie wprowadza * własnego tokenu dla jednego efektu. */ /* ========================================================================== 1. GOSPODARZ isolation: aureola (::after) leży pod treścią przycisku, ale nad tłem strony; position dla ::after. ========================================================================== */ .dc-cart-added { position: relative; isolation: isolate; } .dc-cart-added__icon, .dc-cart-added__check { display: inline-flex; flex: none; line-height: var(--dc-leading-icon); } /* Ptaszek nieobecny poza stanem done (reguła 11: display, nie opacity). */ .dc-cart-added__check { display: none; } /* ========================================================================== 2. BUSY — koszyk się kołysze ========================================================================== */ .dc-cart-added[data-dc-cart-added='busy'] .dc-cart-added__icon { transform-origin: 50% 100%; animation: dc-cart-added-rock calc(var(--dc-duration-slow) * 2) var(--dc-ease) infinite alternate; } @keyframes dc-cart-added-rock { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } } /* ========================================================================== 3. DONE — panel odwrócony, ptaszek, złota aureola ========================================================================== */ /* Trzy selektory, nie jeden: przepis rangi 1 w sekcji ma :hover:enabled i :active:enabled (0,3,0) i stoi PÓŹNIEJ w kolejności arkuszy (components → sections). Po kliknięciu kursor wciąż leży na przycisku, więc sam selektor stanu (0,2,0) przegrywał z najazdem — zmierzone 2026-08-31: tło rgba(201,168,76,.5) zamiast zieleni. Warianty z pseudoklasą mają (0,4,0) i wygrywają; wariant bazowy obsługuje przycisk bez kursora. */ .dc-cart-added[data-dc-cart-added='done'], .dc-cart-added[data-dc-cart-added='done']:hover:enabled, .dc-cart-added[data-dc-cart-added='done']:active:enabled { border-color: var(--dc-accent-a50); background-color: var(--dc-surface-inverse); background-image: none; color: var(--dc-surface); box-shadow: var(--dc-shadow-md); } .dc-cart-added[data-dc-cart-added='done'] .dc-cart-added__icon { display: none; } .dc-cart-added[data-dc-cart-added='done'] .dc-cart-added__check { display: inline-flex; animation: dc-cart-added-pop var(--dc-duration-slower) var(--dc-ease-out) both; } .dc-cart-added[data-dc-cart-added='done']::after { content: ''; position: absolute; z-index: -1; inset: calc(var(--dc-border) * -1); border-radius: inherit; pointer-events: none; animation: dc-cart-added-halo calc(var(--dc-duration-slower) * 2) var(--dc-ease-out) both; } @keyframes dc-cart-added-pop { 0% { transform: scale(0.4) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.18) rotate(3deg); opacity: 1; } 100% { transform: none; opacity: 1; } } @keyframes dc-cart-added-halo { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dc-accent) 55%, transparent); } to { box-shadow: 0 0 0 var(--dc-space-16) color-mix(in srgb, var(--dc-accent) 0%, transparent); } } /* ========================================================================== 4. PODSKOK LICZNIKA ========================================================================== */ .dc-cart-added-bump { animation: dc-cart-added-pop var(--dc-duration-slower) var(--dc-ease-out); } /* ========================================================================== 5. OGRANICZONY RUCH (reguła 12) Zostaje sama zmiana koloru i ikony — to informacja; ruch był ozdobą. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .dc-cart-added[data-dc-cart-added='busy'] .dc-cart-added__icon, .dc-cart-added[data-dc-cart-added='done'] .dc-cart-added__check, .dc-cart-added[data-dc-cart-added='done']::after, .dc-cart-added-bump { animation: none; } }