instrument

Для кого

Для дашбордов, админок и агентских инструментов — интерфейсов, где главное на экране это данные, где сидят часами и где машина работает, а человек за ней наблюдает.

Для чего не подходит. Лендинги, магазины, контентные сайты. Визуальные эффекты ограничены: нет градиентов, свечений, теней на карточках и жирных начертаний; заголовки капсом запрещены правилом.

Возможности

Шесть тем, четыре акцента, пять масштабов, три плотности — четыре независимые оси, все атрибутами разметки. Плотность объявляется на контейнере, а не выбирается вариантом компонента: один атрибут на панели перенастраивает всё внутри неё.

Контраст проверяется машиной. 2208 пар токенов против порогов WCAG во всех темах и акцентах. Инструмент читает настоящий tokens.css и резолвит var(), light-dark() и color-mix() так же, как браузер. То, что сложилось из токенов на экране после вложенности и полупрозрачных слоёв, меряет отдельная проверка по пикселям — её запускают на своём приложении.

Уменьшенное движение не выключает индикаторы. Переходы схлопываются, бесконечные индикаторы активности замедляются: анимация, сжатая до 0.01ms, — это остановка, а остановленный индикатор сообщает, что работа встала.

Скрипт по желанию

CSS работает сам по себе. Отдельный модуль выполняет то, что объявлено разметкой: стрелки в списках и вкладках, копирование, снятие тега, перетаскивание оси. Что именно он делает.

Требования

Chrome 123+ · Safari 17.5+ · Firefox 120+ — по light-dark(), oklch(), каскадным слоям, вложенности, :has() и единице lh. Полифилов нет.

Лицензия

MIT © Innokentiy Sokolov. Исходники, документация и все проверки — в одном репозитории: github.com/keshon/instrument.

Собранный dist/instrument.min.css лежит в репозитории и сверяется с исходником на каждый push.