Sign In

Палитра

Временная страница для проверки токенов и компонентов. Разбита на табы, слаг таба — в пути: перезагрузка (в том числе HMR) оставляет на текущем. Таб-бар — наш жеFilterChips.

Slider + BestStarCard

Слайдер ничего не знает о содержимом — это просто рельса, на которую кладут что угодно. Прокрутка нативная, поэтому работает трекпадом, свайпом и с клавиатуры (рельса в табе); стрелки только вызывают scrollBy. Шторка и стрелка появляютсятолько с той стороны, где есть что показать, и не перехватывают клики — иначе первая и последняя карточка стали бы недоступны.

Затемнение уходит в --surface-current, а не в цвет страницы: слайдер внутри карточки должен растворяться в карточке. Ниже тот же слайдер на двух подложках — сравните края.

Внутри поднятой карточки

Состояния карточки

Наведите: аватар плавно наезжает внутри круга, имя уходит в --text-brand(бренд 500 — временно, по просьбе; как текст он даёт 2.9:1, ниже порога AA, поэтому под замену). Избранное — не размер, а transform: активное чуть крупнее и растёт дальше на ховере, при этом строка не дёргается. Кольцо шортсов нарисовано маской поверх залитого круга, а не бордером — градиентную рамку иначе не получить, а зазор должен оставаться прозрачным.

Stepper — степпер-пагинатор

Точки кликабельны: гнездо активной раскрывается шириной, а пилюля переезжает к нему отдельным слоем — её цель считается арифметикой (index × (точка + гэп): всё левее актива всегда по 8px), поэтому ширина и переезд не рассинхронизируются. Гнездо — чёрное намеренно, а не --surface-sunken (тот светлее карточки): канавка должна читаться и на плашке, и на фото баннера. Наружу компонент кидаетstepper:change, внутрь принимает stepper:set — двумя разными каналами, чтобы владелец и степпер не закольцевали друг друга.

Со второй активной и тремя точками: