lumiglass 0.0.0-stage → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 赵鑫飞 (Zhao Xinfei)
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,3 +1,67 @@
1
- # Temporary Holding Version
1
+ # Lumi Glass · lumiglass
2
2
 
3
- This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
3
+ iOS 液态玻璃(Liquid Glass)风格的纯 CSS 组件库。零依赖、无构建要求,Vue / React / 原生页面都能直接用。
4
+
5
+ ## 特性
6
+
7
+ - **三层配方**:磨砂(backdrop-filter)+ 边缘折射(SVG feDisplacementMap)+ 镜面高光,还原 iOS 26 Liquid Glass 质感
8
+ - **130+ 类名**:按钮、表单、控件、弹层、导航、图表、模板积木,9 大分组
9
+ - **明暗双主题**:`data-theme="dark"` 一键切换,或跟随系统 `prefers-color-scheme`
10
+ - **双端密度**:`body.mobile` 触控密度 / `body.web` 桌面密度,同一套 Token
11
+ - **零依赖**:纯 CSS + 一个可选 JS(折射滤镜注入、指针光斑、主题切换、Toast)
12
+
13
+ ## 安装
14
+
15
+ ```bash
16
+ npm install lumiglass
17
+ ```
18
+
19
+ ## 快速开始
20
+
21
+ ```js
22
+ // Vite / Vue CLI / CRA / Next.js 通用
23
+ import 'lumiglass/css/glass-core.css';
24
+ import 'lumiglass/css/glass-web.css'; // 或 glass-mobile.css
25
+ import 'lumiglass/js/glass.js'; // 可选
26
+ ```
27
+
28
+ ```html
29
+ <body class="web">
30
+ <div class="glass" style="padding:20px;border-radius:20px">
31
+ <h3>我的第一块玻璃</h3>
32
+ <p>把它放在有内容的背景上,折射才会出现。</p>
33
+ </div>
34
+ </body>
35
+ ```
36
+
37
+ ## 包内文件
38
+
39
+ | 文件 | 内容 |
40
+ |---|---|
41
+ | `css/glass-core.css` | 通用层(必引):Token、玻璃基类、按钮、表单、控件、反馈 |
42
+ | `css/glass-web.css` | 网页端:浮动顶栏、应用框架、Bento、表格、定价 |
43
+ | `css/glass-mobile.css` | 手机端:手机壳、Tab Bar、聊天、播放器、钱包、天气 |
44
+ | `css/glass-templates.css` | 模板扩展:管理台图表、官网 Hero、商品卡(按需引) |
45
+ | `css/glass-lg.css` | `.lg` 材质层:与 WebGL 液态引擎配套(案例页/需要折射时引入) |
46
+ | `css/glass-stage.css` | 展示台样式:仅文档/案例页使用,业务页面不需要 |
47
+ | `js/glass.js` | 可选增强:折射滤镜、指针光斑、滚动加厚、主题切换、Toast |
48
+ | `js/glass-liquid-engine.js` | WebGL 折射引擎(与 `glass-lg.css` 配套) |
49
+ | `js/glass-webgl.js` | 全站引导 + autoGlass(引即启用,关闭:`data-lg-engine="off"`) |
50
+
51
+ > 本包与项目根目录 `glass/` 保持同一份源码、同版本发布;请勿单独修改其中一个目录。
52
+
53
+ ## Vue / React 注意事项
54
+
55
+ - 类名直接写 `class` / `className`,无任何包装组件
56
+ - 路由切换后调一次 `LiquidGlass.refresh()`
57
+ - 主题:`LiquidGlass.setTheme('dark')` 或按钮加 `data-theme-toggle`
58
+ - Toast:`LiquidGlass.toast('已保存')`
59
+ - SSR:CSS 正常引;`glass.js` 只在客户端引入
60
+
61
+ 完整文档(组件 API、尺寸速查、无障碍、性能预算):见项目仓库 `docs.html`。
62
+
63
+ ## License
64
+
65
+ MIT © 2026 Zhao Xinfei (赵鑫飞)
66
+
67
+ > Lumi Glass is an independent open-source project. It is not affiliated with, endorsed by, or sponsored by Apple Inc. "Liquid Glass" refers to a visual style inspired by Apple's design language; all code is original.