lingee-ui 0.0.25 → 0.0.27

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.
Files changed (29) hide show
  1. package/README.md +3 -2
  2. package/dist/button/index.d.mts +1 -1
  3. package/dist/button/index.d.ts +1 -1
  4. package/dist/{chunk-2N2YZIHQ.js → chunk-IVBJOGYS.js} +1 -1
  5. package/dist/{chunk-EBYXYMEL.mjs → chunk-VLFNSJ2J.mjs} +1 -1
  6. package/dist/{index-89atTLPD.d.mts → index-7pb5YOcq.d.mts} +2 -2
  7. package/dist/{index-89atTLPD.d.ts → index-7pb5YOcq.d.ts} +2 -2
  8. package/dist/index.css +1 -1
  9. package/dist/index.d.mts +43 -4
  10. package/dist/index.d.ts +43 -4
  11. package/dist/index.js +2 -2
  12. package/dist/index.mjs +2 -2
  13. package/dist/tabs/index.css +1 -1
  14. package/dist/tabs/index.js +1 -1
  15. package/dist/tabs/index.mjs +1 -1
  16. package/dist/tokens.css +1 -1
  17. package/package.json +1 -1
  18. package/skill/AGENTS-SNIPPET.md +35 -10
  19. package/skill/SKILL.md +12 -12
  20. package/skill/VERSION.json +4 -4
  21. package/skill/references/components/color-picker.md +1 -1
  22. package/skill/references/components/date-picker.md +1 -1
  23. package/skill/references/components/dialog.md +1 -1
  24. package/skill/references/components/scroll-area.md +2 -2
  25. package/skill/references/components/sidebar.md +17 -2
  26. package/skill/references/components/slider.md +1 -1
  27. package/skill/references/icons.md +20 -11
  28. package/skill/references/setup.md +11 -3
  29. package/skill/references/tokens.md +36 -9
package/skill/references/setup.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # 接入指南
2
2
 
3
- 组件库 `0.0.25` ｜ 图标库 `1.0.22`
3
+ 组件库 `0.0.27` ｜ 图标库 `1.0.24`
4
4
 
5
5
  ## 安装
6
6
 
@@ -56,14 +56,22 @@ import { LingeeProvider, enUS } from "lingee-ui";
56
56
 
57
57
  需要在业务代码里复用组件库文案时，用 `useLocale()` 取完整语言包，或 `useComponentLocale("Pagination")` 取单个组件的片段。
58
58
 
59
- ## 暗色模式
59
+ ## 主题切换
60
60
 
61
- 给 `<html>` 加 `data-theme="dark"`，全部语义 Token 自动切换：
61
+ 内置亮色（默认）、暗色、暖棕三套主题。给 `<html>` 设 `data-theme`，全部语义 Token 自动切换：
62
62
 
63
63
  ```ts
64
64
  document.documentElement.setAttribute("data-theme", "dark");
65
65
  ```
66
66
 
67
+ | 主题 | `data-theme` | `color-scheme` |
68
+ |------|----------------|------------------|
69
+ | 亮色 | 不设，或 `light` | `light` |
70
+ | 暗色 | `dark` | `dark` |
71
+ | 暖棕 | `warm` | `light` |
72
+
73
+ 暖棕是浅底主题，与亮色只有少数底色不同，差异项见 `references/tokens.md` 的「暖棕主题」。原生控件与滚动条按 `color-scheme` 绘制，它只认 `light` / `dark`，暖棕写 `light`。业务代码按主题分支时只认 `dark`，其余值（含 `warm`）按亮色处理，不要写成「不是 `light` 就是暗色」。
74
+
67
75
  前提是组件与业务样式都只用语义层 `--lg-g-*` 变量。用了 primitives 或硬编码色值的地方不会跟随切换。
68
76
 
69
77
  ## 按需引入
package/skill/references/tokens.md CHANGED
@@ -1,8 +1,10 @@
1
1
  # 语义 Token 全表
2
2
 
3
- 组件库 `0.0.25`。仅列语义层（`--lg-g-*`）。
3
+ 组件库 `0.0.27`。仅列语义层（`--lg-g-*`）。
4
4
 
5
- 亮色与暗色**变量名完全相同**，给 `<html>` 加 `data-theme="dark"` 即自动切换，业务代码只写一次。
5
+ 亮色、暗色与暖棕**变量名完全相同**，给 `<html>` 加 `data-theme="dark"` 或 `data-theme="warm"` 即自动切换，业务代码只写一次。
6
+
7
+ 暖棕与亮色只有少数 Token 取值不同，单独列在「暖棕主题」一节，全表不再重复暖棕列。
6
8
 
7
9
  下表「亮色 / 暗色」列是各主题下的最终色值，用途有两个：
8
10
 
@@ -24,6 +26,15 @@
24
26
  | `var(--lg-g-fg-color-violet-default)` | ~~`--lg-g-fg-color-violet-defauit`~~ |
25
27
  | `var(--lg-g-bg-color-emerald-translucent-soft)` | ~~`--lg-g-bg-color-emeraid-translucent-soft`~~ |
26
28
 
29
+ ## 暖棕主题（2）
30
+
31
+ `data-theme="warm"` 是亮色的浅底变体，只有下列 Token 与亮色取值不同，其余同亮色：
32
+
33
+ | Token | 亮色 | 暖棕 |
34
+ |-------|------|------|
35
+ | `var(--lg-g-bg-color-page-default)` | `#F7F7FA` | `#F5F5F2` |
36
+ | `var(--lg-g-bg-color-navigation)` | `#F1F1F6` | `#F0EFEB` |
37
+
27
38
  ## 前景色 fg（color / fill / stroke）（54）
28
39
 
29
40
  | Token | 亮色 | 暗色 |
@@ -76,12 +87,12 @@
76
87
  | `var(--lg-g-fg-color-lime-low)` | `#74D70B` | `#74D70B` |
77
88
  | `var(--lg-g-fg-color-violet-low)` | `#7858F9` | `#7858F9` |
78
89
  | `var(--lg-g-fg-color-black-title)` | `rgba(0, 0, 0, 0.64)` | `rgba(255, 255, 255, 0.46)` |
79
- | `var(--lg-g-fg-color-black-blue-moderate)` | `rgba(0, 29, 65, 0.18)` | `#FFFFFF` |
80
- | `var(--lg-g-fg-color-black-blue-faint)` | `rgba(0, 29, 65, 0.28)` | `#FFFFFF` |
81
- | `var(--lg-g-fg-color-black-blue-default)` | `rgba(0, 29, 65, 0.46)` | `#FFFFFF` |
82
- | `var(--lg-g-fg-color-black-blue-muted)` | `rgba(0, 29, 65, 0.64)` | `#FFFFFF` |
83
- | `var(--lg-g-fg-color-black-blue-strong)` | `rgba(0, 29, 65, 0.82)` | `#FFFFFF` |
84
- | `var(--lg-g-fg-color-black-blue-intense)` | `rgba(0, 29, 65, 0.94)` | `#FFFFFF` |
90
+ | `var(--lg-g-fg-color-black-blue-moderate)` | `rgba(0, 29, 65, 0.18)` | `rgba(255, 255, 255, 0.18)` |
91
+ | `var(--lg-g-fg-color-black-blue-faint)` | `rgba(0, 29, 65, 0.28)` | `rgba(255, 255, 255, 0.28)` |
92
+ | `var(--lg-g-fg-color-black-blue-default)` | `rgba(0, 29, 65, 0.46)` | `rgba(255, 255, 255, 0.46)` |
93
+ | `var(--lg-g-fg-color-black-blue-muted)` | `rgba(0, 29, 65, 0.64)` | `rgba(255, 255, 255, 0.64)` |
94
+ | `var(--lg-g-fg-color-black-blue-strong)` | `rgba(0, 29, 65, 0.82)` | `rgba(255, 255, 255, 0.82)` |
95
+ | `var(--lg-g-fg-color-black-blue-intense)` | `rgba(0, 29, 65, 0.94)` | `rgba(255, 255, 255, 0.94)` |
85
96
 
86
97
  ## 背景色 bg（background）（108）
87
98
 
@@ -196,7 +207,7 @@
196
207
  | `var(--lg-g-bg-color-black-translucent-muted)` | `rgba(0, 0, 0, 0.02)` | `rgba(255, 255, 255, 0.06)` |
197
208
  | `var(--lg-g-bg-color-color)` | `#E4EEFF` | `#E4EEFF` |
198
209
 
199
- ## 边框色 border（border-color / outline）（45）
210
+ ## 边框色 border（border-color / outline）（61）
200
211
 
201
212
  | Token | 亮色 | 暗色 |
202
213
  |-------|------|------|
@@ -245,6 +256,22 @@
245
256
  | `var(--lg-g-border-color-black-stroke)` | `rgba(0, 0, 0, 0.06)` | `rgba(255, 255, 255, 0.08)` |
246
257
  | `var(--lg-g-border-color-warning-muted)` | `#FFBE90` | `#BA5002` |
247
258
  | `var(--lg-g-border-color-success-muted)` | `#7AEB9C` | `#0C5B31` |
259
+ | `var(--lg-g-border-color-white-heavy)` | `#FFFFFF` | `#FFFFFF` |
260
+ | `var(--lg-g-border-color-primary-translucent-moderate)` | `rgba(109, 128, 255, 0.28)` | `rgba(109, 128, 255, 0.28)` |
261
+ | `var(--lg-g-border-color-warning-translucent-moderate)` | `rgba(255, 119, 0, 0.28)` | `rgba(255, 119, 0, 0.28)` |
262
+ | `var(--lg-g-border-color-danger-translucent-moderate)` | `rgba(255, 41, 59, 0.28)` | `rgba(255, 41, 59, 0.28)` |
263
+ | `var(--lg-g-border-color-success-translucent-moderate)` | `rgba(8, 204, 80, 0.28)` | `rgba(8, 204, 80, 0.28)` |
264
+ | `var(--lg-g-border-color-blue-translucent-moderate)` | `rgba(77, 137, 255, 0.28)` | `rgba(77, 137, 255, 0.28)` |
265
+ | `var(--lg-g-border-color-amber-translucent-moderate)` | `rgba(255, 178, 0, 0.28)` | `rgba(255, 178, 0, 0.28)` |
266
+ | `var(--lg-g-border-color-teal-translucent-moderate)` | `rgba(0, 229, 229, 0.28)` | `rgba(0, 229, 229, 0.28)` |
267
+ | `var(--lg-g-border-color-emerald-translucent-moderate)` | `rgba(8, 199, 135, 0.28)` | `rgba(8, 199, 135, 0.28)` |
268
+ | `var(--lg-g-border-color-lime-translucent-moderate)` | `rgba(116, 215, 11, 0.28)` | `rgba(116, 215, 11, 0.28)` |
269
+ | `var(--lg-g-border-color-cyan-translucent-moderate)` | `rgba(0, 163, 244, 0.28)` | `rgba(0, 163, 244, 0.28)` |
270
+ | `var(--lg-g-border-color-purple-translucent-moderate)` | `rgba(143, 64, 255, 0.28)` | `rgba(143, 64, 255, 0.28)` |
271
+ | `var(--lg-g-border-color-indigo-translucent-moderate)` | `rgba(81, 85, 246, 0.28)` | `rgba(81, 85, 246, 0.28)` |
272
+ | `var(--lg-g-border-color-violet-translucent-moderate)` | `rgba(120, 88, 249, 0.28)` | `rgba(120, 88, 249, 0.28)` |
273
+ | `var(--lg-g-border-color-fuchsia-translucent-moderate)` | `rgba(248, 88, 208, 0.28)` | `rgba(248, 88, 208, 0.28)` |
274
+ | `var(--lg-g-border-color-pink-translucent-moderate)` | `rgba(255, 36, 109, 0.28)` | `rgba(255, 36, 109, 0.28)` |
248
275
 
249
276
  ## 其他（4）
250
277