Revenue is a link, active users is a button (opened 0 times), conversion counts for 900 ms. Turn on "reduce motion" in the OS and the numbers stop counting.
То же демо, что стоит на странице GrStatistic: ради главной ничего не написано во второй раз.
Гранулярность
136 путей экспорта. Берёте компонент, composable или одну директиву — граф зависимостей на этом заканчивается.
Согласованность
Цвет, отступ и радиус — это роль, а не значение. Обе темы равноправны, и контраст проверяется в обеих.
Своя тема
Ребрендинг — это смена значений токенов. Исходники компонентов при этом не трогаются.
Для разработчика
Типы, авто-импорт, метаданные для IDE. Контракт доступности проверяется гейтом, а не декларируется.
Одна цена, четыре разреза
Одну цифру напечатать было бы проще.
Каждое число снято со сборки и сжато. Фреймворк в них не входит: он ваш, а не мой. Какой из разрезов важен, зависит от того, что вас ограничивает, — поэтому здесь все четыре.
Во что обойдётся начать
8 250B, дальше почти ничего
base + GrButton8 250 B
+ GrCard+ 223 B
+ GrDialog+ 318 B
+ GrDataTable+ 705 B
+ GrSelect+ 2 335 B
Первый компонент несёт токены, обе темы и базовый слой. Следующие четыре вместе стоят меньше трети от него.
Все ли компоненты лёгкие
13.6×разброс по набору
GrBadge1 455 B
GrCard1 870 B
GrAlert2 762 B
GrButton3 391 B
GrTabs4 819 B
GrDialog9 789 B
GrDataTable16 243 B
GrSelect19 819 B
Нет. GrSelect весит почти четырнадцать GrBadge. Если библиотека говорит, что все её компоненты лёгкие, — она их не мерила.
Что вы берёте на себя
0runtime-зависимостей
136 путей экспорта
Под узлом ничего нет. Ваш lock-файл, ваша поверхность аудита и ваш путь обновления остаются вашими, а 136 путей экспорта означают, что граф останавливается там же, где вы.
Во что обходится вторая тема
746B, при любом размере
1 · 7 504 B
2 · 8 250 B
Число почти не меняется между одним компонентом и всеми 77. Отказ от тёмной темы — не то место, где экономят вес.
The same matrix that lived in `playground-5`: for each `tone` you can see live buttons and force-rendered `hover`, `focus`, and `active` states across all `variant`s.
Номер закреплён слева, статус справа — при горизонтальной прокрутке они остаются на месте. Ширина тянется за правый край заголовка; с клавиатуры — стрелками на ручке, Enter возвращает колонку к авторазметке.
Цвет, отступ, радиус, движение и слои — именованные роли, прочитанные из пакета. Меняются значения, компоненты следуют за ними: 197 токенов в обеих темах.