Палитра

Иконки

Набор выгружен из Figma и нормализован (scripts/normalize-figma-icon.mjs): из глифа убраны размер, литеральный цвет и приглушённость, в которой его нарисовали. Поэтому иконка красится currentColor — наведите на карточку, глиф поменяет цвет вместе с подписью, отдельного правила для этого не нужно. Суффикс-solid — второе, залитое семейство из макета; опорный экран использует контурное, поэтому оно без суффикса.

• about
• about-solid
• account
• age-18
• arrow-right
• asmr-solid
• bell
• bell-plus-solid
• blog
• bolt-solid
• bookmark
• calendar
• caret-down
• caret-up
• cart
• categories
• categories-solid
• check
• checkbox
• chevron-down
• chevron-left
• chevron-right
• chevron-right-16
• chevron-up
• clock
• close
• comment
• comment-solid
• dashboard
• discord
• download
• edit
• external-link
• eye
• eye-closed
• eye-off-solid
• eye-solid
• features
• fov-200
• fov-200-solid
• hardcore-solid
• heart
• heart-solid
• help
• help-solid
• home-solid
• info
• info-solid
• instagram
• interactive
• location
• lock
• lock-open
• logout
• logout-solid
• mail
• menu
• milf-solid
• model-page
• more
• more-solid
• more-vertical
• passthrough
• passthrough-ai
• passthrough-ai-solid
• passthrough-solid
• phone
• play
• plus
• pornstar-solid
• radio
• reddit
• search
• settings
• share
• shorts
• shuffle
• sign-in
• sign-up
• star
• stereo-3d
• stereo-3d-solid
• subscription
• taboo-solid
• teen-solid
• threesome-solid
• thumb-down
• thumb-up
• thumb-up-solid
• tiktok
• toy-script
• toy-script-ai
• toy-script-ai-solid
• toy-script-solid
• trailer
• twitter
• videos
• view-grid
• view-rows
• vr-cams
• vr-cams-solid
• vr-videos
• vr-videos-solid
• webcam
• young-solid

FilterChips

Замерено в макете: высота 40, иконка 16, подпись 14 Regular. Форма — сознательное отступление: вместо макетных r12/инсет20 взяты пилюля и инсет--space-4 (16), иначе чип читается как ещё одна кнопка. Свежий референс это подтверждает — дуга угла там идёт до 0.48 высоты, то есть пилюля. Состояние несёттолько цвет — вес шрифта не меняется, иначе строка бы дёргалась на каждом клике. Выбранный чип берёт --action-selected-bg: это 700-я ступень бренд-шкалы, намеренно темнее основного действия (500) — выделение сообщает, где вы находитесь, а не просит нажать.

Заливка в покое — --action-quiet-bg, она зависит от подложки: на странице чип светлее фона, в поднятом блоке темнее. Поэтому у компонента нет своего--filter-chip-bg — алиас на :root заморозил бы значение (та же ловушка, что у quiet-кнопки).

Ховер — не токен, а формула.lift() берёт цвет, на котором контрол уже лежит, и поднимает его светлоту в OKLab на--hover-lift (0.035 — ровно шаг между соседними ступенями нейтральной шкалы). Тон и насыщенность подложки сохраняются, поэтому подсветка ей принадлежит, а не просто лежит рядом. Полупрозрачный белый так не умеет — он композитится по-разному на каждом фоне; фиксированная ступень шкалы тоже — она одинакова везде. Наведите на чипы в обоих блоках ниже: правило одно, а цвет подсветкиразный.

Ссылки против кнопок

Форма выбирается по данным, потому что для скринридера это разные вещи. Сhref — это nav со ссылками и aria-current; без него — группа кнопок с aria-pressed. Смешать нельзя: компонент бросит ошибку на сборке.