Files

T

iu bf11cbada3 chore(openspec): archive material-icons-ui and sync ui-iconography spec

Move the completed material-icons-ui change to
openspec/changes/archive/2026-10-10-material-icons-ui/ and create the
ui-iconography main spec from its ADDED requirements.

2026-10-10 13:20:06 +03:00

3.4 KiB

Raw Permalink Blame History

Proposal

Why

Сейчас все «иконки» в интерфейсе — это эмодзи и юникод-глифы, которые рисует системный шрифт. Они по-разному выглядят в разных ОС и браузерах (проект self-hosted — парк устройств непредсказуем), плохо наследуют цвет темы и семантически неточны: 🌾 для «нейтральной темы», 💻 для «системной», ♥/💬 для метрик. Нужен единый, самодостаточный набор векторных иконок без внешних запросов, согласованный с тремя темами и доступностью.

What Changes

Ввести inline-SVG иконочную систему: спрайт <symbol> + <use>, реестр иконок (registry.ts), компоненты Icon, IconSprite, IconButton.
Заменить все эмодзи/юникод-глифы на SVG-иконки: логотип (📷), переключатель тем (☀️ 🌙 🌾 💻), плейсхолдер обложки (🖼️), лайк/комментарий (♥ 💬), закрытие и стрелки лайтбокса (✕ ‹ ›), «назад» (←).
Добавить ведущие иконки ключевым контролам: создать, загрузить, скачать, сохранить, отправить, удалить, выйти, участники, настройки, share-ссылки, принять инвайт.
Источник данных — Google Material Symbols (стиль outlined) плюс *_fill-варианты для состояний (например, лайк нажат/не нажат). Данные иконок вендорятся в репозиторий, новые зависимости не добавляются.
Проход по доступности: декоративные иконки скрыты от скринридеров (aria-hidden), смысловые/одиночные получают aria-label/role="img", тумблеры тем — aria-pressed.

Capabilities

New Capabilities

ui-iconography: единая inline-SVG система иконок фронтенда, её доступность и наследование цветовых токенов тем.

Modified Capabilities

Нет — существующие спеки описывают доменную логику (albums, auth, photos, …); иконочная система их требований не меняет.

Impact

Код: frontend/src/lib/icons/*, frontend/src/lib/components/Icon.svelte, IconSprite.svelte, IconButton.svelte, правки в +layout.svelte и во всех экранах/компонентах (ThemeSwitcher, PhotoGrid, Lightbox, Uploader, Comments, список альбомов, страница альбома, участники, настройки, инвайт, публичный share).
Зависимости: без новых — данные иконок вендорятся.
Совместимость: backend, API и БД не затрагиваются; меняется только фронтенд-разметка и доступность.

3.4 KiB Raw Permalink Blame History Unescape Escape