Об этом проекте

GlassKit представляет собой библиотеку компонентов на чистом CSS, построенную вокруг эстетики глассморфизма. В README указано, что она вдохновлена языком дизайна Apple iOS 26 «Liquid Glass» и visionOS. Библиотека ориентирована на приложения и интерфейсы, которые должны выглядеть нативно и современно без использования JavaScript-фреймворков или этапа сборки. Состав репозитория - glasskit.css: основная библиотека, содержащая все компоненты и дизайн-токены. - glasskit.min.css: минифицированная сборка, создаваемая при релизе. - glasskit-styles.js: Constructable Stylesheet для использования внутри Shadow DOM. - theme-override.css: шаблон для пользовательских брендовых тем, включающий четыре примера (Ocean Blue, Emerald Green, Rose и пустой слот для своих настроек). - index.html, showcase.html и docs.html, а также их немецкие переводы в папке de/. - SKILL.md: структурированный справочник компонентов, предназначенный для LLM и помощников по кодингу. Проект распространяется под лицензией MIT и разработан компанией Jungherz GmbH. Публичное демо, документация и витрина доступны по адресу glasskit.jungherz.com. Компоненты и строительные блоки В README компоненты разделены на группы: навигация и макет (фон с градиентом aurora, панель навигации, круглые кнопки-иконки, фиксированная нижняя панель вкладок, плавающий вариант панели вкладок с дополнительной капсулой, аккордеон, разделитель), контент (заголовок, карточка, вариант светящейся карточки, бейдж, аватар, уведомление о статусе и сгруппированный список в стиле iOS), действия и обратная связь (основные, вторичные и третичные кнопки, модальное окно с размытием фона, тост, закрепленный поповер с анимацией затухания и масштабирования), а также элементы форм (поле ввода, текстовая область, селект, поле поиска, переключатель в стиле iOS, чекбокс, радиокнопка, ползунок диапазона и индикатор прогресса). Всего проект предлагает 24 компонента. Помимо компонентов, библиотека предоставляет утилитарные классы с префиксом gl- для flex-макета, отступов, выравнивания текста и размеров, которые дополняют классы компонентов с префиксом glass-. Именование следует конвенции, похожей на BEM, чтобы избежать конфликтов с существующими стилями. Темизация и дизайн-токены Поддерживаются темная и светлая темы, переключение между которыми осуществляется путем установки атрибута data-theme на элементе html; в комплект входит готовый компонент переключателя тем. Почти каждое визуальное значение вынесено в CSS-переменные: основные цвета и цвета текста, пять градаций стеклянных поверхностей, три уровня размытия, радиусы для карточек, кнопок и полей ввода, шкала отступов, а также токены теней и внутренних отступов. Брендирование выполняется через объявление --gl-color-primary и его темного варианта; начиная с версии 1.11.0, средняя точка градиента, кольцо фокуса, свечение кнопок и ползунок диапазона выводятся из этих значений. В README отмечается, что брендовые переменные следует объявлять в :root. Web Components и Shadow DOM Поскольку внешние таблицы стилей не проникают через границу shadow boundary, библиотека экспортирует ES-модуль, предоставляющий glassSheet — общий CSSStyleSheet, который можно назначить в adoptedStyleSheets, а также экспорт строки CSS в качестве резервного варианта. В README показано использование с обычными кастомными элементами, Hybrids.js и Lit, а также отмечено, что пользовательские свойства --gl-* и переключение тем продолжают работать через shadow roots. Установка и совместимость GlassKit можно загрузить с jsDelivr или unpkg через тег link, установить из npm как @jungherjungherz-de/glasskit и импортировать в CSS или JavaScript, либо скачать напрямую из релизов GitHub. Размер библиотеки составляет 51 КБ в исходном виде, 39 КБ в минифицированном и 6,5 КБ в gzipped, внешние зависимости отсутствуют. Эффект стекла основан на backdrop-filter; заявлена полная поддержка в Safari, Chrome/Edge и Samsung Internet, а также поддержка в Firefox начиная с версии 103. При отсутствии backdrop-filter интерфейс остается работоспособным с обычными цветами фона. Библиотека представлена как CSS-фундамент семейства из трех частей: GlassKit Elements предоставляет кастомные элементы на чистом JavaScript для интерфейсов приложений, а GlassKit Web является шаблоном сайта на Astro с разделами, i18n и SEO, построенным на том же языке дизайна. Приглашаются контрибьюторы, соблюдающие BEM-подобное именование, существующие дизайн-токены, поддержку темного/светлого режимов и область нажатия элементов не менее 44px.