glasscn-core 0.2.0 → 0.3.0
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/README.md +4 -12
- package/package.json +1 -1
- package/src/bridge/auto.css +9 -10
- package/src/index.css +1 -2
- package/src/palettes/ember-slate.css +11 -26
- package/src/palettes/emerald-mist.css +14 -29
- package/src/palettes/liquid-light.css +15 -94
- package/src/palettes/ocean-frost.css +14 -29
- package/src/palettes/soft-bloom.css +14 -29
- package/src/palettes/switchable.css +10 -120
- package/src/palettes/warm-sunset.css +14 -29
- package/src/primitives/backdrop.css +16 -16
- package/src/primitives/fallback.css +3 -12
- package/src/primitives/interaction.css +6 -0
- package/src/primitives/surface.css +27 -7
- package/src/tokens/elevation.css +48 -43
- package/src/tokens/palette.css +18 -30
- package/src/tokens/primitives.css +22 -15
package/README.md
CHANGED
|
@@ -24,8 +24,7 @@ npm i glasscn-core
|
|
|
24
24
|
```css
|
|
25
25
|
@import "tailwindcss";
|
|
26
26
|
/* ... 你原有的 shadcn :root / .dark 变量 ... */
|
|
27
|
-
@import "glasscn-core";
|
|
28
|
-
@import "glasscn-core/palettes/switchable.css"; /* 想运行时切调色再加 */
|
|
27
|
+
@import "glasscn-core"; /* ← 加这一行 */
|
|
29
28
|
```
|
|
30
29
|
|
|
31
30
|
```html
|
|
@@ -43,17 +42,10 @@ npm i glasscn-core
|
|
|
43
42
|
`prefers-reduced-transparency`、`prefers-contrast`、`prefers-reduced-motion`、
|
|
44
43
|
打印、性能降级六种情况。
|
|
45
44
|
|
|
46
|
-
##
|
|
45
|
+
## 统一主题（替代 palette 体系）
|
|
47
46
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
`ember-slate`（默认）· `ocean-frost` · `soft-bloom` · `warm-sunset` ·
|
|
53
|
-
`emerald-mist` · `liquid-light`（唯一浅色）。
|
|
54
|
-
|
|
55
|
-
**六套里玻璃填充完全一致**，换的只是背后的光斑和强调色——玻璃永远是
|
|
56
|
-
`rgba(255,255,255,N)` 白色中性。这是这套设计的核心规则。
|
|
47
|
+
新版默认使用统一玻璃主题，不再以 palette 作为主路径。
|
|
48
|
+
旧项目若仍写了 `data-glass-palette`，会自动回落到同一套统一主题（兼容层）。
|
|
57
49
|
|
|
58
50
|
## 按需引入
|
|
59
51
|
|
package/package.json
CHANGED
package/src/bridge/auto.css
CHANGED
|
@@ -217,22 +217,21 @@
|
|
|
217
217
|
--glass-shadow: var(--glass-shadow-overlay);
|
|
218
218
|
}
|
|
219
219
|
|
|
220
|
-
/*
|
|
221
|
-
比 modal 稍薄但饱和更高 —— 菜单浮在内容正上方很近的距离，
|
|
222
|
-
太厚会让下面的内容彻底消失，失去空间关系。 */
|
|
220
|
+
/* 菜单类：统一归入 floating 层级，保留更高饱和以增强近场分离。 */
|
|
223
221
|
[data-slot="dropdown-menu-content"],
|
|
224
222
|
[data-slot="dropdown-menu-sub-content"],
|
|
225
223
|
[data-slot="context-menu-content"],
|
|
226
224
|
[data-slot="menubar-content"],
|
|
227
225
|
[data-slot="select-content"] {
|
|
228
|
-
--glass-blur:
|
|
229
|
-
--glass-saturate:
|
|
230
|
-
--glass-fill-current:
|
|
231
|
-
--glass-shadow:
|
|
232
|
-
--popover: rgb(var(--glass-white) /
|
|
233
|
-
border-color: rgb(var(--glass-white) / 0.
|
|
226
|
+
--glass-blur: var(--glass-blur-floating-tier);
|
|
227
|
+
--glass-saturate: 190%;
|
|
228
|
+
--glass-fill-current: var(--glass-fill-floating-tier);
|
|
229
|
+
--glass-shadow: var(--glass-shadow-floating-tier);
|
|
230
|
+
--popover: rgb(var(--glass-white) / var(--glass-fill-floating-tier));
|
|
231
|
+
border-color: rgb(var(--glass-white) / 0.2);
|
|
234
232
|
box-shadow:
|
|
235
|
-
0
|
|
233
|
+
0 0.5px 0 0 rgb(var(--glass-white) / 0.32) inset,
|
|
234
|
+
var(--glass-inner-glow),
|
|
236
235
|
var(--glass-shadow);
|
|
237
236
|
overflow: hidden;
|
|
238
237
|
}
|
package/src/index.css
CHANGED
|
@@ -5,8 +5,7 @@
|
|
|
5
5
|
*
|
|
6
6
|
* @import "tailwindcss";
|
|
7
7
|
* ... shadcn 的 :root / .dark 变量 ...
|
|
8
|
-
* @import "glasscn-core";
|
|
9
|
-
* @import "glasscn-core/palettes/switchable.css"; ← 想运行时切调色再加
|
|
8
|
+
* @import "glasscn-core"; ← 这一行
|
|
10
9
|
*
|
|
11
10
|
* 顺序很重要：glasscn 要在 shadcn 变量之后，才能接管 --card / --popover 等。
|
|
12
11
|
*
|
|
@@ -1,35 +1,20 @@
|
|
|
1
1
|
/* ============================================================================
|
|
2
|
-
* glasscn-core/palettes/
|
|
2
|
+
* glasscn-core/palettes/LEGACY — 兼容层（已弃用）
|
|
3
3
|
* ----------------------------------------------------------------------------
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
* 2. 运行时切换 —— <html data-glass-palette="ember-slate">
|
|
7
|
-
*
|
|
8
|
-
* 玻璃填充在所有调色里都是白色中性，这里只换背景光斑、强调色和文字色调。
|
|
4
|
+
* 统一玻璃主题已替代 palette 体系。该文件仅保留旧 import 不报错，
|
|
5
|
+
* 并回落到统一主题，不再提供独立视觉风格。
|
|
9
6
|
* ==========================================================================*/
|
|
10
7
|
|
|
11
|
-
:root
|
|
12
|
-
|
|
13
|
-
--glass-bg-
|
|
14
|
-
--glass-
|
|
15
|
-
--glass-blob-
|
|
16
|
-
--glass-blob-
|
|
8
|
+
:root,
|
|
9
|
+
:root[data-glass-palette] {
|
|
10
|
+
--glass-bg-base: #090f1d;
|
|
11
|
+
--glass-bg-mid: #121b2f;
|
|
12
|
+
--glass-blob-1: #60a5fa;
|
|
13
|
+
--glass-blob-2: #a78bfa;
|
|
14
|
+
--glass-blob-3: #22d3ee;
|
|
17
15
|
--glass-accent: #f59e0b;
|
|
18
16
|
--glass-accent-hover: #fbbf24;
|
|
19
17
|
--glass-accent-fg: #1a1206;
|
|
20
|
-
--glass-text-rgb:
|
|
21
|
-
color-scheme: dark;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
:root[data-glass-palette="ember-slate"] {
|
|
25
|
-
--glass-bg-base: #100d0a;
|
|
26
|
-
--glass-bg-mid: #1c1510;
|
|
27
|
-
--glass-blob-1: #c2410c;
|
|
28
|
-
--glass-blob-2: #78350f;
|
|
29
|
-
--glass-blob-3: #f59e0b;
|
|
30
|
-
--glass-accent: #f59e0b;
|
|
31
|
-
--glass-accent-hover: #fbbf24;
|
|
32
|
-
--glass-accent-fg: #1a1206;
|
|
33
|
-
--glass-text-rgb: 255 248 240;
|
|
18
|
+
--glass-text-rgb: 244 248 255;
|
|
34
19
|
color-scheme: dark;
|
|
35
20
|
}
|
|
@@ -1,35 +1,20 @@
|
|
|
1
1
|
/* ============================================================================
|
|
2
|
-
* glasscn-core/palettes/
|
|
2
|
+
* glasscn-core/palettes/LEGACY — 兼容层（已弃用）
|
|
3
3
|
* ----------------------------------------------------------------------------
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
* 2. 运行时切换 —— <html data-glass-palette="emerald-mist">
|
|
7
|
-
*
|
|
8
|
-
* 玻璃填充在所有调色里都是白色中性，这里只换背景光斑、强调色和文字色调。
|
|
4
|
+
* 统一玻璃主题已替代 palette 体系。该文件仅保留旧 import 不报错，
|
|
5
|
+
* 并回落到统一主题，不再提供独立视觉风格。
|
|
9
6
|
* ==========================================================================*/
|
|
10
7
|
|
|
11
|
-
:root
|
|
12
|
-
|
|
13
|
-
--glass-bg-
|
|
14
|
-
--glass-
|
|
15
|
-
--glass-blob-
|
|
16
|
-
--glass-blob-
|
|
17
|
-
--glass-
|
|
18
|
-
--glass-accent
|
|
19
|
-
--glass-accent-
|
|
20
|
-
--glass-
|
|
21
|
-
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
:root[data-glass-palette="emerald-mist"] {
|
|
25
|
-
--glass-bg-base: #051a0a;
|
|
26
|
-
--glass-bg-mid: #0a2a14;
|
|
27
|
-
--glass-blob-1: #10b981;
|
|
28
|
-
--glass-blob-2: #d4af37;
|
|
29
|
-
--glass-blob-3: #065f46;
|
|
30
|
-
--glass-accent: #34d399;
|
|
31
|
-
--glass-accent-hover: #6ee7b7;
|
|
32
|
-
--glass-accent-fg: #04170a;
|
|
33
|
-
--glass-text-rgb: 240 253 244;
|
|
8
|
+
:root,
|
|
9
|
+
:root[data-glass-palette] {
|
|
10
|
+
--glass-bg-base: #090f1d;
|
|
11
|
+
--glass-bg-mid: #121b2f;
|
|
12
|
+
--glass-blob-1: #60a5fa;
|
|
13
|
+
--glass-blob-2: #a78bfa;
|
|
14
|
+
--glass-blob-3: #22d3ee;
|
|
15
|
+
--glass-accent: #f59e0b;
|
|
16
|
+
--glass-accent-hover: #fbbf24;
|
|
17
|
+
--glass-accent-fg: #1a1206;
|
|
18
|
+
--glass-text-rgb: 244 248 255;
|
|
34
19
|
color-scheme: dark;
|
|
35
20
|
}
|
|
@@ -1,99 +1,20 @@
|
|
|
1
1
|
/* ============================================================================
|
|
2
|
-
* glasscn-core/palettes/
|
|
2
|
+
* glasscn-core/palettes/LEGACY — 兼容层（已弃用）
|
|
3
3
|
* ----------------------------------------------------------------------------
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
* 2. 运行时切换 —— <html data-glass-palette="liquid-light">
|
|
7
|
-
*
|
|
8
|
-
* 玻璃填充在所有调色里都是白色中性，这里只换背景光斑、强调色和文字色调。
|
|
4
|
+
* 统一玻璃主题已替代 palette 体系。该文件仅保留旧 import 不报错，
|
|
5
|
+
* 并回落到统一主题，不再提供独立视觉风格。
|
|
9
6
|
* ==========================================================================*/
|
|
10
7
|
|
|
11
|
-
:root
|
|
12
|
-
|
|
13
|
-
--glass-bg-
|
|
14
|
-
--glass-
|
|
15
|
-
--glass-blob-
|
|
16
|
-
--glass-blob-
|
|
17
|
-
--glass-
|
|
18
|
-
--glass-accent
|
|
19
|
-
--glass-accent-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
并把描边换成暗色 —— 否则面板边界会整个消失。 */
|
|
24
|
-
--glass-fill: 0.45;
|
|
25
|
-
--glass-fill-hover: 0.58;
|
|
26
|
-
--glass-border-alpha: 0.6;
|
|
27
|
-
--glass-border-alpha-hover: 0.8;
|
|
28
|
-
|
|
29
|
-
/* 浅色下玻璃更厚：blur 24 / saturate 200%，高光更亮更粗，
|
|
30
|
-
并且底边多一道极淡的暗线 —— 浅底上只有顶高光会让面板"飘"，
|
|
31
|
-
底边那道暗线把它按回平面里。 */
|
|
32
|
-
--glass-blur-base: 24px;
|
|
33
|
-
--glass-saturate: 200%;
|
|
34
|
-
--glass-specular: 0.8;
|
|
35
|
-
--glass-specular-size: 0 2px 0 0;
|
|
36
|
-
--glass-underline: 0 -1px 0 0 rgb(0 0 0 / 0.06) inset;
|
|
37
|
-
|
|
38
|
-
--glass-shadow-base: 0 8px 32px rgb(0 0 0 / 0.12);
|
|
39
|
-
--glass-shadow-hover: 0 16px 48px rgb(0 0 0 / 0.18);
|
|
40
|
-
|
|
41
|
-
/* 浅色下文字是近黑，不是深灰 —— 深灰压在接近透明的玻璃上会糊 */
|
|
42
|
-
--glass-text-rgb: 20 16 12;
|
|
43
|
-
--glass-text-primary: rgb(var(--glass-text-rgb) / 0.9);
|
|
44
|
-
--glass-text-secondary: rgb(var(--glass-text-rgb) / 0.62);
|
|
45
|
-
--glass-text-muted: rgb(var(--glass-text-rgb) / 0.45);
|
|
46
|
-
|
|
47
|
-
--glass-danger: #b91c1c;
|
|
48
|
-
--glass-danger-fg: #fff5f5;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
:root[data-glass-palette="liquid-light"] {
|
|
52
|
-
--glass-bg-base: #f0ebe3;
|
|
53
|
-
--glass-bg-mid: #e6dfd4;
|
|
54
|
-
--glass-blob-1: #a78bfa;
|
|
55
|
-
--glass-blob-2: #5eead4;
|
|
56
|
-
--glass-blob-3: #fb923c;
|
|
57
|
-
--glass-accent: #7c3aed;
|
|
58
|
-
--glass-accent-hover: #8b5cf6;
|
|
59
|
-
--glass-accent-fg: #faf7ff;
|
|
60
|
-
color-scheme: light;
|
|
61
|
-
|
|
62
|
-
/* 浅底上的玻璃：白色填充在白底上几乎看不见，所以要拉高不透明度，
|
|
63
|
-
并把描边换成暗色 —— 否则面板边界会整个消失。 */
|
|
64
|
-
--glass-fill: 0.45;
|
|
65
|
-
--glass-fill-hover: 0.58;
|
|
66
|
-
--glass-border-alpha: 0.6;
|
|
67
|
-
--glass-border-alpha-hover: 0.8;
|
|
68
|
-
|
|
69
|
-
/* 浅色下玻璃更厚：blur 24 / saturate 200%，高光更亮更粗，
|
|
70
|
-
并且底边多一道极淡的暗线 —— 浅底上只有顶高光会让面板"飘"，
|
|
71
|
-
底边那道暗线把它按回平面里。 */
|
|
72
|
-
--glass-blur-base: 24px;
|
|
73
|
-
--glass-saturate: 200%;
|
|
74
|
-
--glass-specular: 0.8;
|
|
75
|
-
--glass-specular-size: 0 2px 0 0;
|
|
76
|
-
--glass-underline: 0 -1px 0 0 rgb(0 0 0 / 0.06) inset;
|
|
77
|
-
|
|
78
|
-
--glass-shadow-base: 0 8px 32px rgb(0 0 0 / 0.12);
|
|
79
|
-
--glass-shadow-hover: 0 16px 48px rgb(0 0 0 / 0.18);
|
|
80
|
-
|
|
81
|
-
/* 浅色下文字是近黑，不是深灰 —— 深灰压在接近透明的玻璃上会糊 */
|
|
82
|
-
--glass-text-rgb: 20 16 12;
|
|
83
|
-
--glass-text-primary: rgb(var(--glass-text-rgb) / 0.9);
|
|
84
|
-
--glass-text-secondary: rgb(var(--glass-text-rgb) / 0.62);
|
|
85
|
-
--glass-text-muted: rgb(var(--glass-text-rgb) / 0.45);
|
|
86
|
-
|
|
87
|
-
--glass-danger: #b91c1c;
|
|
88
|
-
--glass-danger-fg: #fff5f5;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
/* 浅色下四档填充一起抬，否则 flat 档（输入框、徽章）会彻底消失 */
|
|
92
|
-
:root, :root[data-glass-palette="liquid-light"] {
|
|
93
|
-
--glass-fill-flat: 0.36;
|
|
94
|
-
--glass-fill-raised: 0.45;
|
|
95
|
-
--glass-fill-overlay: 0.58;
|
|
96
|
-
--glass-fill-modal: 0.7;
|
|
97
|
-
--glass-fill-nav: 0.42;
|
|
98
|
-
--glass-scrim: rgb(60 45 30 / 0.35);
|
|
8
|
+
:root,
|
|
9
|
+
:root[data-glass-palette] {
|
|
10
|
+
--glass-bg-base: #090f1d;
|
|
11
|
+
--glass-bg-mid: #121b2f;
|
|
12
|
+
--glass-blob-1: #60a5fa;
|
|
13
|
+
--glass-blob-2: #a78bfa;
|
|
14
|
+
--glass-blob-3: #22d3ee;
|
|
15
|
+
--glass-accent: #f59e0b;
|
|
16
|
+
--glass-accent-hover: #fbbf24;
|
|
17
|
+
--glass-accent-fg: #1a1206;
|
|
18
|
+
--glass-text-rgb: 244 248 255;
|
|
19
|
+
color-scheme: dark;
|
|
99
20
|
}
|
|
@@ -1,35 +1,20 @@
|
|
|
1
1
|
/* ============================================================================
|
|
2
|
-
* glasscn-core/palettes/
|
|
2
|
+
* glasscn-core/palettes/LEGACY — 兼容层（已弃用）
|
|
3
3
|
* ----------------------------------------------------------------------------
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
* 2. 运行时切换 —— <html data-glass-palette="ocean-frost">
|
|
7
|
-
*
|
|
8
|
-
* 玻璃填充在所有调色里都是白色中性，这里只换背景光斑、强调色和文字色调。
|
|
4
|
+
* 统一玻璃主题已替代 palette 体系。该文件仅保留旧 import 不报错，
|
|
5
|
+
* 并回落到统一主题，不再提供独立视觉风格。
|
|
9
6
|
* ==========================================================================*/
|
|
10
7
|
|
|
11
|
-
:root
|
|
12
|
-
|
|
13
|
-
--glass-bg-
|
|
14
|
-
--glass-
|
|
15
|
-
--glass-blob-
|
|
16
|
-
--glass-blob-
|
|
17
|
-
--glass-
|
|
18
|
-
--glass-accent
|
|
19
|
-
--glass-accent-
|
|
20
|
-
--glass-
|
|
21
|
-
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
:root[data-glass-palette="ocean-frost"] {
|
|
25
|
-
--glass-bg-base: #030d1a;
|
|
26
|
-
--glass-bg-mid: #07182b;
|
|
27
|
-
--glass-blob-1: #06b6d4;
|
|
28
|
-
--glass-blob-2: #0ea5e9;
|
|
29
|
-
--glass-blob-3: #6366f1;
|
|
30
|
-
--glass-accent: #22d3ee;
|
|
31
|
-
--glass-accent-hover: #67e8f9;
|
|
32
|
-
--glass-accent-fg: #031018;
|
|
33
|
-
--glass-text-rgb: 240 249 255;
|
|
8
|
+
:root,
|
|
9
|
+
:root[data-glass-palette] {
|
|
10
|
+
--glass-bg-base: #090f1d;
|
|
11
|
+
--glass-bg-mid: #121b2f;
|
|
12
|
+
--glass-blob-1: #60a5fa;
|
|
13
|
+
--glass-blob-2: #a78bfa;
|
|
14
|
+
--glass-blob-3: #22d3ee;
|
|
15
|
+
--glass-accent: #f59e0b;
|
|
16
|
+
--glass-accent-hover: #fbbf24;
|
|
17
|
+
--glass-accent-fg: #1a1206;
|
|
18
|
+
--glass-text-rgb: 244 248 255;
|
|
34
19
|
color-scheme: dark;
|
|
35
20
|
}
|
|
@@ -1,35 +1,20 @@
|
|
|
1
1
|
/* ============================================================================
|
|
2
|
-
* glasscn-core/palettes/
|
|
2
|
+
* glasscn-core/palettes/LEGACY — 兼容层（已弃用）
|
|
3
3
|
* ----------------------------------------------------------------------------
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
* 2. 运行时切换 —— <html data-glass-palette="soft-bloom">
|
|
7
|
-
*
|
|
8
|
-
* 玻璃填充在所有调色里都是白色中性，这里只换背景光斑、强调色和文字色调。
|
|
4
|
+
* 统一玻璃主题已替代 palette 体系。该文件仅保留旧 import 不报错，
|
|
5
|
+
* 并回落到统一主题，不再提供独立视觉风格。
|
|
9
6
|
* ==========================================================================*/
|
|
10
7
|
|
|
11
|
-
:root
|
|
12
|
-
|
|
13
|
-
--glass-bg-
|
|
14
|
-
--glass-
|
|
15
|
-
--glass-blob-
|
|
16
|
-
--glass-blob-
|
|
17
|
-
--glass-
|
|
18
|
-
--glass-accent
|
|
19
|
-
--glass-accent-
|
|
20
|
-
--glass-
|
|
21
|
-
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
:root[data-glass-palette="soft-bloom"] {
|
|
25
|
-
--glass-bg-base: #1a0e1c;
|
|
26
|
-
--glass-bg-mid: #2a1830;
|
|
27
|
-
--glass-blob-1: #c084fc;
|
|
28
|
-
--glass-blob-2: #f472b6;
|
|
29
|
-
--glass-blob-3: #818cf8;
|
|
30
|
-
--glass-accent: #e879f9;
|
|
31
|
-
--glass-accent-hover: #f0abfc;
|
|
32
|
-
--glass-accent-fg: #1a0a1c;
|
|
33
|
-
--glass-text-rgb: 253 244 255;
|
|
8
|
+
:root,
|
|
9
|
+
:root[data-glass-palette] {
|
|
10
|
+
--glass-bg-base: #090f1d;
|
|
11
|
+
--glass-bg-mid: #121b2f;
|
|
12
|
+
--glass-blob-1: #60a5fa;
|
|
13
|
+
--glass-blob-2: #a78bfa;
|
|
14
|
+
--glass-blob-3: #22d3ee;
|
|
15
|
+
--glass-accent: #f59e0b;
|
|
16
|
+
--glass-accent-hover: #fbbf24;
|
|
17
|
+
--glass-accent-fg: #1a1206;
|
|
18
|
+
--glass-text-rgb: 244 248 255;
|
|
34
19
|
color-scheme: dark;
|
|
35
20
|
}
|
|
@@ -1,129 +1,19 @@
|
|
|
1
1
|
/* ============================================================================
|
|
2
|
-
* glasscn-core/palettes/switchable —
|
|
2
|
+
* glasscn-core/palettes/switchable — 兼容层（已弃用）
|
|
3
3
|
* ----------------------------------------------------------------------------
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
* 特异性 :root[data-glass-palette] = (0,2,0)，稳压 tokens/palette.css 的
|
|
7
|
-
* :root = (0,1,0)，所以 @import 顺序不影响结果。
|
|
8
|
-
* 不写属性时回落到 Ember & Slate。
|
|
4
|
+
* 旧版通过 data-glass-palette 切换六套调色。
|
|
5
|
+
* 新版已收敛为统一主题，保留该文件仅为兼容旧项目，不再产生视觉分叉。
|
|
9
6
|
* ==========================================================================*/
|
|
10
7
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
--glass-bg-
|
|
14
|
-
--glass-
|
|
15
|
-
--glass-blob-
|
|
16
|
-
--glass-blob-
|
|
17
|
-
--glass-blob-3: #f59e0b;
|
|
8
|
+
:root[data-glass-palette] {
|
|
9
|
+
--glass-bg-base: #090f1d;
|
|
10
|
+
--glass-bg-mid: #121b2f;
|
|
11
|
+
--glass-blob-1: #60a5fa;
|
|
12
|
+
--glass-blob-2: #a78bfa;
|
|
13
|
+
--glass-blob-3: #22d3ee;
|
|
18
14
|
--glass-accent: #f59e0b;
|
|
19
15
|
--glass-accent-hover: #fbbf24;
|
|
20
16
|
--glass-accent-fg: #1a1206;
|
|
21
|
-
--glass-text-rgb:
|
|
17
|
+
--glass-text-rgb: 244 248 255;
|
|
22
18
|
color-scheme: dark;
|
|
23
19
|
}
|
|
24
|
-
|
|
25
|
-
/* --- Ocean Frost —— 深海蓝底 + 青蓝靛光斑。冷静、克制，适合数据密集界面 --- */
|
|
26
|
-
:root[data-glass-palette="ocean-frost"] {
|
|
27
|
-
--glass-bg-base: #030d1a;
|
|
28
|
-
--glass-bg-mid: #07182b;
|
|
29
|
-
--glass-blob-1: #06b6d4;
|
|
30
|
-
--glass-blob-2: #0ea5e9;
|
|
31
|
-
--glass-blob-3: #6366f1;
|
|
32
|
-
--glass-accent: #22d3ee;
|
|
33
|
-
--glass-accent-hover: #67e8f9;
|
|
34
|
-
--glass-accent-fg: #031018;
|
|
35
|
-
--glass-text-rgb: 240 249 255;
|
|
36
|
-
color-scheme: dark;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
/* --- Soft Bloom —— 紫调暗底 + 紫粉靛光斑。柔和、有情绪，适合内容型与创意类界面 --- */
|
|
40
|
-
:root[data-glass-palette="soft-bloom"] {
|
|
41
|
-
--glass-bg-base: #1a0e1c;
|
|
42
|
-
--glass-bg-mid: #2a1830;
|
|
43
|
-
--glass-blob-1: #c084fc;
|
|
44
|
-
--glass-blob-2: #f472b6;
|
|
45
|
-
--glass-blob-3: #818cf8;
|
|
46
|
-
--glass-accent: #e879f9;
|
|
47
|
-
--glass-accent-hover: #f0abfc;
|
|
48
|
-
--glass-accent-fg: #1a0a1c;
|
|
49
|
-
--glass-text-rgb: 253 244 255;
|
|
50
|
-
color-scheme: dark;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
/* --- Warm Sunset —— 红褐底 + 橙粉琥珀光斑。热烈，适合营销页与落地页 --- */
|
|
54
|
-
:root[data-glass-palette="warm-sunset"] {
|
|
55
|
-
--glass-bg-base: #1a0a0a;
|
|
56
|
-
--glass-bg-mid: #2b1210;
|
|
57
|
-
--glass-blob-1: #f97316;
|
|
58
|
-
--glass-blob-2: #ec4899;
|
|
59
|
-
--glass-blob-3: #f59e0b;
|
|
60
|
-
--glass-accent: #fb923c;
|
|
61
|
-
--glass-accent-hover: #fdba74;
|
|
62
|
-
--glass-accent-fg: #1a0a06;
|
|
63
|
-
--glass-text-rgb: 255 245 237;
|
|
64
|
-
color-scheme: dark;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
/* --- Emerald Mist —— 墨绿底 + 翠绿金光斑。沉稳，适合金融与仪表盘 --- */
|
|
68
|
-
:root[data-glass-palette="emerald-mist"] {
|
|
69
|
-
--glass-bg-base: #051a0a;
|
|
70
|
-
--glass-bg-mid: #0a2a14;
|
|
71
|
-
--glass-blob-1: #10b981;
|
|
72
|
-
--glass-blob-2: #d4af37;
|
|
73
|
-
--glass-blob-3: #065f46;
|
|
74
|
-
--glass-accent: #34d399;
|
|
75
|
-
--glass-accent-hover: #6ee7b7;
|
|
76
|
-
--glass-accent-fg: #04170a;
|
|
77
|
-
--glass-text-rgb: 240 253 244;
|
|
78
|
-
color-scheme: dark;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
/* --- Liquid Glass / Light —— 暖米白底 + 紫青橙光斑。唯一的浅色调色，玻璃更实、高光更厚 --- */
|
|
82
|
-
:root[data-glass-palette="liquid-light"] {
|
|
83
|
-
--glass-bg-base: #f0ebe3;
|
|
84
|
-
--glass-bg-mid: #e6dfd4;
|
|
85
|
-
--glass-blob-1: #a78bfa;
|
|
86
|
-
--glass-blob-2: #5eead4;
|
|
87
|
-
--glass-blob-3: #fb923c;
|
|
88
|
-
--glass-accent: #7c3aed;
|
|
89
|
-
--glass-accent-hover: #8b5cf6;
|
|
90
|
-
--glass-accent-fg: #faf7ff;
|
|
91
|
-
color-scheme: light;
|
|
92
|
-
|
|
93
|
-
/* 浅底上的玻璃：白色填充在白底上几乎看不见，所以要拉高不透明度，
|
|
94
|
-
并把描边换成暗色 —— 否则面板边界会整个消失。 */
|
|
95
|
-
--glass-fill: 0.45;
|
|
96
|
-
--glass-fill-hover: 0.58;
|
|
97
|
-
--glass-border-alpha: 0.6;
|
|
98
|
-
--glass-border-alpha-hover: 0.8;
|
|
99
|
-
|
|
100
|
-
/* 浅色下玻璃更厚：blur 24 / saturate 200%，高光更亮更粗，
|
|
101
|
-
并且底边多一道极淡的暗线 —— 浅底上只有顶高光会让面板"飘"，
|
|
102
|
-
底边那道暗线把它按回平面里。 */
|
|
103
|
-
--glass-blur-base: 24px;
|
|
104
|
-
--glass-saturate: 200%;
|
|
105
|
-
--glass-specular: 0.8;
|
|
106
|
-
--glass-specular-size: 0 2px 0 0;
|
|
107
|
-
--glass-underline: 0 -1px 0 0 rgb(0 0 0 / 0.06) inset;
|
|
108
|
-
|
|
109
|
-
--glass-shadow-base: 0 8px 32px rgb(0 0 0 / 0.12);
|
|
110
|
-
--glass-shadow-hover: 0 16px 48px rgb(0 0 0 / 0.18);
|
|
111
|
-
|
|
112
|
-
/* 浅色下文字是近黑，不是深灰 —— 深灰压在接近透明的玻璃上会糊 */
|
|
113
|
-
--glass-text-rgb: 20 16 12;
|
|
114
|
-
--glass-text-primary: rgb(var(--glass-text-rgb) / 0.9);
|
|
115
|
-
--glass-text-secondary: rgb(var(--glass-text-rgb) / 0.62);
|
|
116
|
-
--glass-text-muted: rgb(var(--glass-text-rgb) / 0.45);
|
|
117
|
-
|
|
118
|
-
--glass-danger: #b91c1c;
|
|
119
|
-
--glass-danger-fg: #fff5f5;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
:root[data-glass-palette="liquid-light"] {
|
|
123
|
-
--glass-fill-flat: 0.36;
|
|
124
|
-
--glass-fill-raised: 0.45;
|
|
125
|
-
--glass-fill-overlay: 0.58;
|
|
126
|
-
--glass-fill-modal: 0.7;
|
|
127
|
-
--glass-fill-nav: 0.42;
|
|
128
|
-
--glass-scrim: rgb(60 45 30 / 0.35);
|
|
129
|
-
}
|
|
@@ -1,35 +1,20 @@
|
|
|
1
1
|
/* ============================================================================
|
|
2
|
-
* glasscn-core/palettes/
|
|
2
|
+
* glasscn-core/palettes/LEGACY — 兼容层（已弃用）
|
|
3
3
|
* ----------------------------------------------------------------------------
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
* 2. 运行时切换 —— <html data-glass-palette="warm-sunset">
|
|
7
|
-
*
|
|
8
|
-
* 玻璃填充在所有调色里都是白色中性，这里只换背景光斑、强调色和文字色调。
|
|
4
|
+
* 统一玻璃主题已替代 palette 体系。该文件仅保留旧 import 不报错，
|
|
5
|
+
* 并回落到统一主题，不再提供独立视觉风格。
|
|
9
6
|
* ==========================================================================*/
|
|
10
7
|
|
|
11
|
-
:root
|
|
12
|
-
|
|
13
|
-
--glass-bg-
|
|
14
|
-
--glass-
|
|
15
|
-
--glass-blob-
|
|
16
|
-
--glass-blob-
|
|
17
|
-
--glass-
|
|
18
|
-
--glass-accent
|
|
19
|
-
--glass-accent-
|
|
20
|
-
--glass-
|
|
21
|
-
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
:root[data-glass-palette="warm-sunset"] {
|
|
25
|
-
--glass-bg-base: #1a0a0a;
|
|
26
|
-
--glass-bg-mid: #2b1210;
|
|
27
|
-
--glass-blob-1: #f97316;
|
|
28
|
-
--glass-blob-2: #ec4899;
|
|
29
|
-
--glass-blob-3: #f59e0b;
|
|
30
|
-
--glass-accent: #fb923c;
|
|
31
|
-
--glass-accent-hover: #fdba74;
|
|
32
|
-
--glass-accent-fg: #1a0a06;
|
|
33
|
-
--glass-text-rgb: 255 245 237;
|
|
8
|
+
:root,
|
|
9
|
+
:root[data-glass-palette] {
|
|
10
|
+
--glass-bg-base: #090f1d;
|
|
11
|
+
--glass-bg-mid: #121b2f;
|
|
12
|
+
--glass-blob-1: #60a5fa;
|
|
13
|
+
--glass-blob-2: #a78bfa;
|
|
14
|
+
--glass-blob-3: #22d3ee;
|
|
15
|
+
--glass-accent: #f59e0b;
|
|
16
|
+
--glass-accent-hover: #fbbf24;
|
|
17
|
+
--glass-accent-fg: #1a1206;
|
|
18
|
+
--glass-text-rgb: 244 248 255;
|
|
34
19
|
color-scheme: dark;
|
|
35
20
|
}
|
|
@@ -21,10 +21,10 @@
|
|
|
21
21
|
transform: translate3d(0, 0, 0) scale(1);
|
|
22
22
|
}
|
|
23
23
|
33% {
|
|
24
|
-
transform: translate3d(
|
|
24
|
+
transform: translate3d(7%, -7%, 0) scale(1.08);
|
|
25
25
|
}
|
|
26
26
|
66% {
|
|
27
|
-
transform: translate3d(-
|
|
27
|
+
transform: translate3d(-6%, 5%, 0) scale(0.94);
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
|
|
@@ -59,32 +59,32 @@
|
|
|
59
59
|
|
|
60
60
|
/* blob 1 —— 左上，最大最亮 */
|
|
61
61
|
&::before {
|
|
62
|
-
width:
|
|
63
|
-
height:
|
|
62
|
+
width: 620px;
|
|
63
|
+
height: 620px;
|
|
64
64
|
top: -12%;
|
|
65
65
|
left: -8%;
|
|
66
|
-
opacity: 0.
|
|
66
|
+
opacity: 0.46;
|
|
67
67
|
background: radial-gradient(
|
|
68
68
|
circle at 50% 50%,
|
|
69
69
|
var(--glass-blob-1) 0%,
|
|
70
70
|
transparent 68%
|
|
71
71
|
);
|
|
72
|
-
filter: blur(
|
|
72
|
+
filter: blur(78px);
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
/* blob 2 —— 右下 */
|
|
76
76
|
&::after {
|
|
77
|
-
width:
|
|
78
|
-
height:
|
|
77
|
+
width: 500px;
|
|
78
|
+
height: 500px;
|
|
79
79
|
right: -6%;
|
|
80
80
|
bottom: -10%;
|
|
81
|
-
opacity: 0.
|
|
81
|
+
opacity: 0.42;
|
|
82
82
|
background: radial-gradient(
|
|
83
83
|
circle at 50% 50%,
|
|
84
84
|
var(--glass-blob-2) 0%,
|
|
85
85
|
transparent 68%
|
|
86
86
|
);
|
|
87
|
-
filter: blur(
|
|
87
|
+
filter: blur(78px);
|
|
88
88
|
animation-delay: -4s;
|
|
89
89
|
}
|
|
90
90
|
}
|
|
@@ -98,19 +98,19 @@
|
|
|
98
98
|
content: "";
|
|
99
99
|
position: fixed;
|
|
100
100
|
z-index: -1;
|
|
101
|
-
top:
|
|
102
|
-
left:
|
|
103
|
-
width:
|
|
104
|
-
height:
|
|
101
|
+
top: 36%;
|
|
102
|
+
left: 48%;
|
|
103
|
+
width: 390px;
|
|
104
|
+
height: 390px;
|
|
105
105
|
border-radius: 50%;
|
|
106
106
|
pointer-events: none;
|
|
107
|
-
opacity: 0.
|
|
107
|
+
opacity: 0.36;
|
|
108
108
|
background: radial-gradient(
|
|
109
109
|
circle at 50% 50%,
|
|
110
110
|
var(--glass-blob-3) 0%,
|
|
111
111
|
transparent 68%
|
|
112
112
|
);
|
|
113
|
-
filter: blur(
|
|
113
|
+
filter: blur(78px);
|
|
114
114
|
will-change: transform;
|
|
115
115
|
animation: glass-blob-float 10s var(--glass-ease-in-out) -7s infinite;
|
|
116
116
|
}
|
|
@@ -9,23 +9,14 @@
|
|
|
9
9
|
* 降级方向和亮色主题相反：这里要退到**接近不透明的暗色**，
|
|
10
10
|
* 不是白色。白色 0.94 压在近黑底上会变成一块刺眼的白板。
|
|
11
11
|
*
|
|
12
|
-
*
|
|
13
|
-
* 调色用 :root[data-glass-palette="x"]（0,2,0）声明变量，
|
|
14
|
-
* 会稳压这里的 :root（0,1,0）。不加的话用户一旦切换调色，
|
|
15
|
-
* 整层无障碍降级就被静默压掉——自动化测不出来，只有真实用户会踩到。
|
|
12
|
+
* 这一整层带 !important：必须压住组件层与运行时状态，确保降级永远生效。
|
|
16
13
|
* ==========================================================================*/
|
|
17
14
|
|
|
18
|
-
/*
|
|
15
|
+
/* 降级用的实底。统一主题下固定深色，保证可读性。 */
|
|
19
16
|
:root {
|
|
20
|
-
--glass-solid:
|
|
17
|
+
--glass-solid: 16 22 34;
|
|
21
18
|
}
|
|
22
19
|
|
|
23
|
-
:root[data-glass-palette="ocean-frost"] { --glass-solid: 6 16 30; }
|
|
24
|
-
:root[data-glass-palette="soft-bloom"] { --glass-solid: 28 16 32; }
|
|
25
|
-
:root[data-glass-palette="warm-sunset"] { --glass-solid: 30 14 12; }
|
|
26
|
-
:root[data-glass-palette="emerald-mist"] { --glass-solid: 8 28 16; }
|
|
27
|
-
:root[data-glass-palette="liquid-light"] { --glass-solid: 244 240 233; }
|
|
28
|
-
|
|
29
20
|
/* --- 1. 浏览器不支持 backdrop-filter ------------------------------------- */
|
|
30
21
|
|
|
31
22
|
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
|
|
@@ -35,7 +35,9 @@
|
|
|
35
35
|
background-color: rgb(var(--glass-white) / var(--glass-fill-hover));
|
|
36
36
|
border-color: var(--glass-border-hover);
|
|
37
37
|
box-shadow:
|
|
38
|
+
0 0.5px 0 0 rgb(var(--glass-white) / var(--glass-border-top-alpha)) inset,
|
|
38
39
|
var(--glass-specular-size) var(--glass-specular-color) inset,
|
|
40
|
+
var(--glass-inner-glow),
|
|
39
41
|
var(--glass-shadow-hover);
|
|
40
42
|
}
|
|
41
43
|
|
|
@@ -106,7 +108,9 @@
|
|
|
106
108
|
outline: none;
|
|
107
109
|
border-color: rgb(var(--glass-white) / 0.3);
|
|
108
110
|
box-shadow:
|
|
111
|
+
0 0.5px 0 0 rgb(var(--glass-white) / var(--glass-border-top-alpha)) inset,
|
|
109
112
|
var(--glass-specular-size) var(--glass-specular-color) inset,
|
|
113
|
+
var(--glass-inner-glow),
|
|
110
114
|
0 0 0 1px rgb(var(--glass-white) / 0.3),
|
|
111
115
|
0 0 0 4px color-mix(in oklab, var(--glass-accent) 35%, transparent),
|
|
112
116
|
var(--glass-shadow);
|
|
@@ -139,6 +143,7 @@
|
|
|
139
143
|
border-radius: var(--glass-radius-pill);
|
|
140
144
|
box-shadow:
|
|
141
145
|
0 1px 0 0 rgb(var(--glass-white) / 0.25) inset,
|
|
146
|
+
var(--glass-inner-glow),
|
|
142
147
|
0 8px 24px -8px color-mix(in oklab, var(--glass-accent) 60%, transparent);
|
|
143
148
|
transition-property: transform, filter, box-shadow;
|
|
144
149
|
transition-duration: var(--glass-duration), var(--glass-duration-color), var(--glass-duration);
|
|
@@ -149,6 +154,7 @@
|
|
|
149
154
|
filter: brightness(1.1);
|
|
150
155
|
box-shadow:
|
|
151
156
|
0 1px 0 0 rgb(var(--glass-white) / 0.3) inset,
|
|
157
|
+
var(--glass-inner-glow),
|
|
152
158
|
0 14px 32px -10px color-mix(in oklab, var(--glass-accent) 70%, transparent);
|
|
153
159
|
}
|
|
154
160
|
|
|
@@ -14,11 +14,19 @@
|
|
|
14
14
|
|
|
15
15
|
@utility glass-surface {
|
|
16
16
|
background-color: rgb(var(--glass-white) / var(--glass-fill-current));
|
|
17
|
+
background-image: linear-gradient(
|
|
18
|
+
138deg,
|
|
19
|
+
rgb(var(--glass-white) / calc(var(--glass-fill-current) + 0.08)) 0%,
|
|
20
|
+
rgb(var(--glass-white) / calc(var(--glass-fill-current) + 0.02)) 42%,
|
|
21
|
+
rgb(var(--glass-white) / calc(var(--glass-fill-current) + 0.04)) 100%
|
|
22
|
+
);
|
|
17
23
|
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
|
|
18
24
|
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
|
|
19
|
-
border: var(--glass-border-width) solid var(--glass-border);
|
|
25
|
+
border: var(--glass-border-width) solid rgb(var(--glass-white) / var(--glass-border-bottom-alpha));
|
|
20
26
|
box-shadow:
|
|
27
|
+
0 0.5px 0 0 rgb(var(--glass-white) / var(--glass-border-top-alpha)) inset,
|
|
21
28
|
var(--glass-specular-size) var(--glass-specular-color) inset,
|
|
29
|
+
var(--glass-inner-glow),
|
|
22
30
|
var(--glass-underline),
|
|
23
31
|
var(--glass-shadow);
|
|
24
32
|
border-radius: var(--glass-radius-card);
|
|
@@ -75,6 +83,11 @@
|
|
|
75
83
|
|
|
76
84
|
@utility glass-nav {
|
|
77
85
|
background-color: rgb(var(--glass-white) / var(--glass-fill-nav));
|
|
86
|
+
background-image: linear-gradient(
|
|
87
|
+
180deg,
|
|
88
|
+
rgb(var(--glass-white) / 0.2) 0%,
|
|
89
|
+
rgb(var(--glass-white) / var(--glass-fill-nav)) 75%
|
|
90
|
+
);
|
|
78
91
|
-webkit-backdrop-filter: blur(var(--glass-blur-nav)) saturate(var(--glass-saturate));
|
|
79
92
|
backdrop-filter: blur(var(--glass-blur-nav)) saturate(var(--glass-saturate));
|
|
80
93
|
border: 0;
|
|
@@ -117,14 +130,21 @@
|
|
|
117
130
|
太厚会让下面的内容彻底消失，失去空间关系。 */
|
|
118
131
|
|
|
119
132
|
@utility glass-menu {
|
|
120
|
-
background-color: rgb(var(--glass-white) /
|
|
121
|
-
-
|
|
122
|
-
|
|
123
|
-
|
|
133
|
+
background-color: rgb(var(--glass-white) / var(--glass-fill-floating-tier));
|
|
134
|
+
background-image: linear-gradient(
|
|
135
|
+
140deg,
|
|
136
|
+
rgb(var(--glass-white) / 0.26) 0%,
|
|
137
|
+
rgb(var(--glass-white) / 0.12) 52%,
|
|
138
|
+
rgb(var(--glass-white) / 0.16) 100%
|
|
139
|
+
);
|
|
140
|
+
-webkit-backdrop-filter: blur(var(--glass-blur-floating-tier)) saturate(190%);
|
|
141
|
+
backdrop-filter: blur(var(--glass-blur-floating-tier)) saturate(190%);
|
|
142
|
+
border: var(--glass-border-width) solid rgb(var(--glass-white) / 0.2);
|
|
124
143
|
border-radius: var(--glass-radius-card);
|
|
125
144
|
box-shadow:
|
|
126
|
-
0
|
|
127
|
-
|
|
145
|
+
0 0.5px 0 0 rgb(var(--glass-white) / 0.32) inset,
|
|
146
|
+
var(--glass-inner-glow),
|
|
147
|
+
var(--glass-shadow-floating-tier);
|
|
128
148
|
overflow: hidden;
|
|
129
149
|
}
|
|
130
150
|
|
package/src/tokens/elevation.css
CHANGED
|
@@ -1,51 +1,56 @@
|
|
|
1
1
|
/* ============================================================================
|
|
2
|
-
* glasscn-core —
|
|
2
|
+
* glasscn-core — 玻璃层级 (Elevation Scale)
|
|
3
3
|
* ----------------------------------------------------------------------------
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
* flat 输入框 / 徽章 / 表格 blur 16 fill .06
|
|
8
|
-
* raised 卡片 / 次级按钮 / 标签页 blur 20 fill .08 ← 规范里的"默认玻璃"
|
|
9
|
-
* overlay 导航 / 浮层 / 侧边栏 blur 24 fill .10
|
|
10
|
-
* modal 对话框 / 抽屉 / 命令面板 blur 28 fill .12 saturate 200%
|
|
11
|
-
*
|
|
12
|
-
* 规范另一条硬约束：模糊层最多叠三层。再多性能会塌，画面也会浑。
|
|
13
|
-
* 嵌套保护在 bridge/auto.css 里，内层玻璃自动退回无模糊的薄玻璃。
|
|
4
|
+
* 统一三档语义：base / raised / floating。
|
|
5
|
+
* 为兼容现有 bridge 与工具类，保留 flat/overlay/modal 的别名变量映射。
|
|
14
6
|
* ==========================================================================*/
|
|
15
7
|
|
|
16
8
|
:root {
|
|
17
|
-
/* ---
|
|
18
|
-
--glass-blur-
|
|
19
|
-
--glass-fill-
|
|
20
|
-
--glass-shadow-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
--glass-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
--glass-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
--glass-
|
|
42
|
-
--glass-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
--glass-
|
|
46
|
-
--glass-
|
|
47
|
-
|
|
48
|
-
|
|
9
|
+
/* --- base：贴近背景 ------------------------------------------------------ */
|
|
10
|
+
--glass-blur-base-tier: calc(var(--glass-blur-base) * 0.88);
|
|
11
|
+
--glass-fill-base-tier: 0.08;
|
|
12
|
+
--glass-shadow-base-tier:
|
|
13
|
+
0 4px 14px rgb(0 0 0 / 0.2),
|
|
14
|
+
0 1px 3px rgb(0 0 0 / 0.12);
|
|
15
|
+
|
|
16
|
+
/* --- raised：默认交互面 -------------------------------------------------- */
|
|
17
|
+
--glass-blur-raised-tier: var(--glass-blur-base);
|
|
18
|
+
--glass-fill-raised-tier: var(--glass-fill);
|
|
19
|
+
--glass-shadow-raised-tier: var(--glass-shadow-base);
|
|
20
|
+
|
|
21
|
+
/* --- floating：浮层与弹层 ------------------------------------------------ */
|
|
22
|
+
--glass-blur-floating-tier: calc(var(--glass-blur-base) * 1.28);
|
|
23
|
+
--glass-fill-floating-tier: 0.14;
|
|
24
|
+
--glass-shadow-floating-tier:
|
|
25
|
+
0 18px 52px rgb(0 0 0 / 0.38),
|
|
26
|
+
0 6px 20px rgb(0 0 0 / 0.24);
|
|
27
|
+
|
|
28
|
+
/* --- 兼容别名（旧命名） -------------------------------------------------- */
|
|
29
|
+
--glass-blur-flat: var(--glass-blur-base-tier);
|
|
30
|
+
--glass-fill-flat: var(--glass-fill-base-tier);
|
|
31
|
+
--glass-shadow-flat: var(--glass-shadow-base-tier);
|
|
32
|
+
|
|
33
|
+
--glass-blur-raised: var(--glass-blur-raised-tier);
|
|
34
|
+
--glass-fill-raised: var(--glass-fill-raised-tier);
|
|
35
|
+
--glass-shadow-raised: var(--glass-shadow-raised-tier);
|
|
36
|
+
|
|
37
|
+
--glass-blur-overlay: var(--glass-blur-floating-tier);
|
|
38
|
+
--glass-fill-overlay: var(--glass-fill-floating-tier);
|
|
39
|
+
--glass-shadow-overlay: var(--glass-shadow-floating-tier);
|
|
40
|
+
|
|
41
|
+
--glass-blur-modal: calc(var(--glass-blur-base) * 1.44);
|
|
42
|
+
--glass-fill-modal: 0.18;
|
|
43
|
+
--glass-saturate-modal: 190%;
|
|
44
|
+
--glass-shadow-modal:
|
|
45
|
+
0 24px 72px rgb(0 0 0 / 0.45),
|
|
46
|
+
0 10px 26px rgb(0 0 0 / 0.28);
|
|
47
|
+
|
|
48
|
+
--glass-fill-nav: 0.09;
|
|
49
|
+
--glass-blur-nav: var(--glass-blur-floating-tier);
|
|
50
|
+
|
|
51
|
+
--glass-scrim: rgb(0 0 0 / 0.5);
|
|
52
|
+
--glass-scrim-blur: calc(var(--glass-blur-base) * 0.45);
|
|
53
|
+
|
|
49
54
|
--glass-blur: var(--glass-blur-raised);
|
|
50
55
|
--glass-fill-current: var(--glass-fill-raised);
|
|
51
56
|
--glass-shadow: var(--glass-shadow-raised);
|
package/src/tokens/palette.css
CHANGED
|
@@ -1,45 +1,33 @@
|
|
|
1
1
|
/* ============================================================================
|
|
2
|
-
* glasscn-core —
|
|
2
|
+
* glasscn-core — 统一玻璃主题 (Unified Theme)
|
|
3
3
|
* ----------------------------------------------------------------------------
|
|
4
|
-
*
|
|
4
|
+
* 参考 glass-ui 的冷调玻璃层次（更干净的模糊 + 更自然的边缘光），
|
|
5
|
+
* 但保留 glasscn 的暗色基调和可读性约束。
|
|
5
6
|
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* 见 palettes/ 目录里另外五套。
|
|
7
|
+
* 注意：这里定义的是"背景与强调色"，不是玻璃填充。玻璃填充始终白中性，
|
|
8
|
+
* 规则仍由 tokens/primitives.css 里的 --glass-white / --glass-fill* 约束。
|
|
9
9
|
* ==========================================================================*/
|
|
10
10
|
|
|
11
11
|
:root {
|
|
12
|
-
/* ---
|
|
13
|
-
--glass-bg-base: #
|
|
14
|
-
--glass-bg-mid: #
|
|
12
|
+
/* --- 底：冷调深色，保留低饱和留白 ---------------------------------------- */
|
|
13
|
+
--glass-bg-base: #090f1d;
|
|
14
|
+
--glass-bg-mid: #121b2f;
|
|
15
15
|
|
|
16
|
-
/* ---
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
--glass-blob-
|
|
20
|
-
--glass-blob-2: #c2410c; /* 赭石 */
|
|
21
|
-
--glass-blob-3: #78350f; /* 深琥珀棕 */
|
|
16
|
+
/* --- 光斑：向 glass-ui 靠拢的青蓝紫，但留一丝暖色品牌气质 ----------------- */
|
|
17
|
+
--glass-blob-1: #60a5fa; /* 冷蓝主光 */
|
|
18
|
+
--glass-blob-2: #a78bfa; /* 紫色次光 */
|
|
19
|
+
--glass-blob-3: #22d3ee; /* 青色边光 */
|
|
22
20
|
|
|
23
|
-
/* ---
|
|
21
|
+
/* --- 强调色：延续 glasscn 的琥珀识别 ------------------------------------- */
|
|
24
22
|
--glass-accent: #f59e0b;
|
|
25
23
|
--glass-accent-hover: #fbbf24;
|
|
26
|
-
--glass-accent-fg: #1a1206;
|
|
24
|
+
--glass-accent-fg: #1a1206;
|
|
27
25
|
|
|
28
|
-
/* --- 文字
|
|
29
|
-
|
|
30
|
-
--glass-text-rgb: 255 248 240;
|
|
26
|
+
/* --- 文字 ---------------------------------------------------------------- */
|
|
27
|
+
--glass-text-rgb: 244 248 255;
|
|
31
28
|
--glass-text-primary: rgb(var(--glass-text-rgb) / 0.95);
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
这里统一走同一个 rgb 三元组，色相差异交给光斑去表达。 */
|
|
35
|
-
--glass-text-secondary: rgb(var(--glass-text-rgb) / 0.68);
|
|
36
|
-
|
|
37
|
-
/* 弱化文字 0.35 —— 规范定位是"占位符、标签"。
|
|
38
|
-
注意它在 WCAG 下只有约 3.3:1，达不到 4.5:1，
|
|
39
|
-
所以只能用于占位符和纯装饰性文字。真正的次要正文走 secondary。
|
|
40
|
-
bridge.css 里 --muted-foreground 映射到 secondary 而不是这里，
|
|
41
|
-
就是为了防止这一条被误用。 */
|
|
42
|
-
--glass-text-muted: rgb(var(--glass-text-rgb) / 0.38);
|
|
29
|
+
--glass-text-secondary: rgb(var(--glass-text-rgb) / 0.72);
|
|
30
|
+
--glass-text-muted: rgb(var(--glass-text-rgb) / 0.44);
|
|
43
31
|
|
|
44
32
|
/* --- 语义色 ------------------------------------------------------------- */
|
|
45
33
|
--glass-danger: #f87171;
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
* 想换整体气质，换的是背后光斑（blob）的颜色，不是玻璃的颜色。
|
|
11
11
|
* 这条一破，玻璃立刻变成"有色半透明塑料片"。
|
|
12
12
|
*
|
|
13
|
-
*
|
|
13
|
+
* 暗色优先：统一主题默认写在 :root，不依赖 palette 切换。
|
|
14
14
|
* ==========================================================================*/
|
|
15
15
|
|
|
16
16
|
:root {
|
|
@@ -18,17 +18,17 @@
|
|
|
18
18
|
|
|
19
19
|
/* --- 折射 -------------------------------------------------------------- */
|
|
20
20
|
/* 模糊基数。所有档位由它派生，改这一个值整体调厚度。 */
|
|
21
|
-
--glass-blur-base:
|
|
21
|
+
--glass-blur-base: 18px;
|
|
22
22
|
|
|
23
23
|
/* saturate 必须和 blur 一起用。只有 blur 的话，背后的颜色透过来会发灰，
|
|
24
24
|
看着像磨砂塑料；saturate 让颜色"绽"出来，这才是玻璃感的真正来源。 */
|
|
25
|
-
--glass-saturate:
|
|
25
|
+
--glass-saturate: 170%;
|
|
26
26
|
--glass-brightness: 1;
|
|
27
27
|
|
|
28
28
|
/* --- 玻璃填充（白色中性，不可改成有色） -------------------------------- */
|
|
29
29
|
--glass-white: 255 255 255;
|
|
30
|
-
--glass-fill: 0.
|
|
31
|
-
--glass-fill-hover: 0.
|
|
30
|
+
--glass-fill: 0.1;
|
|
31
|
+
--glass-fill-hover: 0.15;
|
|
32
32
|
|
|
33
33
|
/* 通透度是独立于调色的一条轴。三档，靠 data-glass-density 切换，
|
|
34
34
|
见 primitives/surface.css 末尾。
|
|
@@ -37,15 +37,18 @@
|
|
|
37
37
|
heavy 接近不透明，戏剧化、可读性最好 */
|
|
38
38
|
|
|
39
39
|
/* --- 边缘光学 ---------------------------------------------------------- */
|
|
40
|
-
--glass-border-alpha: 0.
|
|
41
|
-
--glass-border-alpha-hover: 0.
|
|
40
|
+
--glass-border-alpha: 0.16;
|
|
41
|
+
--glass-border-alpha-hover: 0.28;
|
|
42
42
|
--glass-border-width: 1px;
|
|
43
|
+
--glass-border-top-alpha: 0.34;
|
|
44
|
+
--glass-border-bottom-alpha: 0.1;
|
|
43
45
|
|
|
44
46
|
/* 高光 (specular)：顶边 1px 内阴影，模拟玻璃的物理厚度接到顶光。
|
|
45
47
|
这是 Apple Liquid Glass 的签名，也是"真玻璃"和"一块模糊的板子"
|
|
46
48
|
之间唯一的区别。不可省。 */
|
|
47
|
-
--glass-specular: 0.
|
|
49
|
+
--glass-specular: 0.24;
|
|
48
50
|
--glass-specular-size: 0 1px 0 0;
|
|
51
|
+
--glass-inner-glow: 0 0 20px rgb(var(--glass-white) / 0.08) inset;
|
|
49
52
|
|
|
50
53
|
/* 底边暗线：暗色下不需要（背景本来就暗），浅色调色里会打开。
|
|
51
54
|
默认 none，靠调色覆写。 */
|
|
@@ -53,8 +56,12 @@
|
|
|
53
56
|
|
|
54
57
|
/* --- 投影 --------------------------------------------------------------- */
|
|
55
58
|
/* 比常规暗色 UI 更深，玻璃需要更强的投影才能从背景里分离出来 */
|
|
56
|
-
--glass-shadow-base:
|
|
57
|
-
|
|
59
|
+
--glass-shadow-base:
|
|
60
|
+
0 10px 30px rgb(0 0 0 / 0.28),
|
|
61
|
+
0 2px 8px rgb(0 0 0 / 0.14);
|
|
62
|
+
--glass-shadow-hover:
|
|
63
|
+
0 18px 46px rgb(0 0 0 / 0.34),
|
|
64
|
+
0 4px 14px rgb(0 0 0 / 0.2);
|
|
58
65
|
|
|
59
66
|
/* --- 运动 --------------------------------------------------------------- */
|
|
60
67
|
/* 缓动哲学对齐 Apple（阻尼比 + 响应，见 WWDC「流体界面」）：
|
|
@@ -62,10 +69,10 @@
|
|
|
62
69
|
被甩出去的，不该弹；过冲只属于带着动量的手势（拨开关、倾斜回弹）。
|
|
63
70
|
旧版把过冲曲线用在所有 hover 上，手感是"弹跳的塑料"，已废弃。 */
|
|
64
71
|
--glass-duration-fast: 80ms; /* active 要"啪"地一下，不能拖 */
|
|
65
|
-
--glass-duration:
|
|
72
|
+
--glass-duration: 220ms; /* 位移/投影 */
|
|
66
73
|
--glass-duration-slow: 600ms; /* 滚动揭示专用，只有它配用慢档 */
|
|
67
|
-
--glass-duration-color:
|
|
68
|
-
--glass-duration-enter:
|
|
74
|
+
--glass-duration-color: 140ms; /* 颜色反馈比位移快一拍 */
|
|
75
|
+
--glass-duration-enter: 220ms; /* 浮层物化入场 */
|
|
69
76
|
--glass-duration-exit: 160ms; /* 退场比入场快 -- 离开不该有仪式感 */
|
|
70
77
|
|
|
71
78
|
/* 阻尼 1.0 · 响应 ~0.35s：transform 和投影的默认曲线 */
|
|
@@ -78,12 +85,12 @@
|
|
|
78
85
|
--glass-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
|
79
86
|
|
|
80
87
|
/* --- 交互位移 ----------------------------------------------------------- */
|
|
81
|
-
--glass-lift:
|
|
88
|
+
--glass-lift: 3px;
|
|
82
89
|
--glass-press: 1px;
|
|
83
90
|
--glass-press-scale: 0.97;
|
|
84
91
|
|
|
85
92
|
/* --- 微光扫过 (shimmer) -------------------------------------------------- */
|
|
86
|
-
--glass-shimmer-alpha: 0.
|
|
93
|
+
--glass-shimmer-alpha: 0.12;
|
|
87
94
|
--glass-shimmer-angle: -20deg;
|
|
88
95
|
--glass-shimmer-duration: 900ms;
|
|
89
96
|
|