glasskit

GlassKit 是一个纯 CSS 组件库，围绕玻璃拟态（glassmorphism）美学构建，其 README 描述其灵感来自 Apple 的 iOS 26 "Liquid Glass" 和 visionOS 设计语言。它面向那些希望在不引入 JavaScript 框架或构建步骤的情况下，使应用和界面具有原生且现代感的场景。 仓库包含的内容 - glasskit.css：包含所有组件和设计令牌的核心库 - glasskit.min.css：发布时生成的压缩版本 - glasskit-styles.js：用于 Shadow DOM 内部的可构造样式表（Constructable Stylesheet） - theme-override.css：自定义品牌主题模板，包含四个示例主题（海洋蓝、翡翠绿、玫瑰色和一个空白自定义槽位） - index.html、showcase.html 和 docs.html，以及 de/ 文件夹中的德语翻译页面 - SKILL.md：面向 LLM 和编程助手的结构化组件参考 - 该项目采用 MIT 许可，由 Jungherz GmbH 开发。公开演示、文档和展示页面托管在 glasskit.jungherz.com。 组件与构建块 README 将组件分为：导航与布局（带有极光渐变的背景、导航栏、圆形药丸图标按钮、固定底部标签栏、带有可选附件胶囊的浮动药丸形标签栏变体、折叠面板、分隔线）；内容（标题、卡片、发光卡片变体、徽章、头像、状态通知以及 iOS 风格的分组列表）；操作与反馈（主按钮、次按钮和三级按钮、带有模糊覆盖层的模态框、Toast、带有淡入淡出和缩放动画的锚定弹出框）；以及表单元素（输入框、文本域、选择框、搜索字段、iOS 风格开关、复选框、单选框、范围滑块和进度条）。该项目共提供 24 个组件。 除组件外，该库还提供了带有独立 gl- 前缀的实用类，用于 Flex 布局、间距、文本对齐和尺寸调整，与带有 glass- 前缀的组件类并行。命名遵循类 BEM 约定，因此这些类不会与现有样式表冲突。 主题与设计令牌 支持深色和浅色模式，通过在 html 元素上设置 data-theme 属性进行切换；库中包含一个现成的主题切换组件。几乎所有视觉值都通过 CSS 自定义属性公开：主色和文本颜色、五种玻璃表面渐变、三种模糊级别、卡片/按钮/输入框的圆角、间距比例以及阴影和内阴影令牌。自定义品牌通过声明 --gl-color-primary 及其深色变体来实现；从 1.11.0 版本起，渐变中点、焦点环、按钮发光和范围滑块拇指均由这些值派生。README 指出，品牌变量应在 :root 上声明，因为自定义属性在声明处被替换。 Web Components 与 Shadow DOM 由于外部样式表无法跨越 Shadow 边界，该库导出了一个 ES 模块，提供 glassSheet（一个可分配给 adoptedStyleSheets 的共享 CSSStyleSheet），并提供 css 字符串导出作为备选方案。README 展示了在纯自定义元素、Hybrids.js 和 Lit 中的用法，并指出 --gl-* 自定义属性和主题切换在 Shadow Root 之间依然有效。 安装与兼容性 GlassKit 可以通过 link 标签从 jsDelivr 或 unpkg 加载，通过 npm 安装为 @jungherz-de/glasskit 并从 CSS 或 JavaScript 导入，或直接从 GitHub releases 下载。README 声明其体积为：原始文件 51 KB，压缩后 39 KB，gzipped 后 6.5 KB，且无外部依赖。玻璃效果依赖于 backdrop-filter；README 列出其在 Safari、Chrome/Edge 和 Samsung Internet 中完全支持，在 Firefox 103 及以上版本中支持，并指出在没有 backdrop-filter 的情况下，界面仍可通过定义的纯背景颜色保持可用。 该库被呈现为一个三部分系列的 CSS 基础：GlassKit Elements 为应用 UI 提供原生 JavaScript 自定义元素，GlassKit Web 则是基于相同设计语言、包含区块、i18n 和 SEO 的 Astro 网站模板。项目欢迎贡献，要求遵循类 BEM 命名、现有设计令牌、覆盖深浅模式且触摸目标至少为 44px。