Plass UI
Единый язык оформления из стекла и градиента, выпущенный как библиотека React и как пакет Flutter с одинаковыми именами компонентов. То, что нажимают, окрашено; то, что содержит, прозрачно.
Об этом проекте
Plass UI — один язык дизайна, выпущенный двумя библиотеками. Те же семьдесят девять компонентов, под теми же именами и с теми же числами, доступны проекту на React и приложению на Flutter, поэтому выученное на одной стороне используется на другой, вместо того чтобы две системы разошлись уже к третьему выпуску.
Каждая поверхность отвечает на один вопрос: её нажимают или она что-то содержит? То, что нажимают, — тонированное стекло: градиент, который поворачивается внутри своего цветового семейства, а не темнеет, тень, отброшенная тем же цветом, и свечение, следующее за указателем. То, что содержит, — прозрачное стекло: полупрозрачное, глубоко размытое, обведённое тончайшей белой линией и никогда не окрашенное. Ничего не скошено и ничто не смещается при нажатии, потому что глубину несут свет, цвет и размытие. Каждая точка градиента измерена относительно собственной подписи, так что даже самый светлый угол сохраняет контраст, нужный читателю.
Пять свойств — size, color, variant, density и elevation — держат весь API, а тёмная тема следует платформе с обеих сторон. Пакет для React — ESM, поддаётся tree shaking и имеет одну зависимость времени выполнения; пакет для Flutter не имеет ни одной, ни ресурсов, ни плагинов, ни провайдера. Единственное, чего ни один из них не сделает за вас, — покрасить страницу за стеклом, и ровно для этого есть два токена.
Возможности
Сайт документации
Типы TypeScript
Несколько языков
Проверено тестами
Кроссплатформенность
Доступность из коробки
Тёмная тема
Поддержка tree shaking