@neatui/css 4.2.2 → 4.2.4
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/GUIDE.md +1 -1
- package/README.md +3 -0
- package/components/btns/README.md +1 -0
- package/components/btns/base.scss +1 -1
- package/components/btns/btns@a.scss +3 -3
- package/components/btns/btns@b.scss +3 -3
- package/core/ux.scss +6 -4
- package/dist/neatui.css +206 -104
- package/dist/neatui.min.css +1 -1
- package/dist/neatui.preview.css +206 -104
- package/dist/neatui.preview.min.css +1 -1
- package/package.json +2 -1
- package/tokens/grammar.cjs +310 -0
- package/tokens/neatui.tokens.json +1 -1
package/GUIDE.md
CHANGED
|
@@ -1350,7 +1350,7 @@ cursor-move
|
|
|
1350
1350
|
- `ux-click[-sub] / hover-underline / ui-hover=":underline"`:始终显示
|
|
1351
1351
|
pointer 与下划线,不会绑定 click 或 hover 事件;
|
|
1352
1352
|
- `ux-scale`:`:active` 时缩放到 `.95`;
|
|
1353
|
-
- `parent-hover:show / parent-hover:hide`:父级 hover 时只改变
|
|
1353
|
+
- `parent-hover:show / parent-hover:hide`:父级 `:hover` 或 `.active` 时只改变
|
|
1354
1354
|
opacity 与 pointer-events,DOM 节点始终保留;
|
|
1355
1355
|
- `ev-none|auto[-sub|-sun]`:以 `!important` 控制 self、直接子级或孙级的
|
|
1356
1356
|
pointer-events。
|
package/README.md
CHANGED
|
@@ -28,8 +28,11 @@ $theme: ( light: (...), dark: (...) );
|
|
|
28
28
|
```bash
|
|
29
29
|
yarn tokens:generate # 同步 VS Code 快照 + 文档 Token 索引
|
|
30
30
|
yarn tokens:check # 校验快照未漂移
|
|
31
|
+
yarn validate --class "n-mm co-risk" --attr 'ui-flex="row xm"'
|
|
31
32
|
```
|
|
32
33
|
|
|
34
|
+
`yarn validate` 用同一份 schema 校验 class / `ui-flex` 等托管属性,拦住 Tailwind 式漂移写法。
|
|
35
|
+
|
|
33
36
|
## 特性
|
|
34
37
|
|
|
35
38
|
- 🎨 主题系统:种子色推导,多主题切换
|
|
@@ -30,6 +30,7 @@ yarn add @neatui/btns
|
|
|
30
30
|
| ---- | ---- | -------------------------------------------------------- |
|
|
31
31
|
| 主体 | main | 跟随主题风格主体色 |
|
|
32
32
|
| 主体 | vice | 跟随主题风格辅助色 |
|
|
33
|
+
| 描述 | desc | 描述文字色(text 与 fore 的 55% 混合) |
|
|
33
34
|
| 提倡 | well | 代表提倡的,安全的,推荐的,成功的,建议用户点击的 |
|
|
34
35
|
| 警告 | warn | 代表警告的,需再次确认的,并非绝对安全的,需要用户慎重的 |
|
|
35
36
|
| 风险 | risk | 代表失败的,危险的,错误的,有风险的,不建议用户操作的 |
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
@use './../../core/media.scss' as *;
|
|
3
3
|
|
|
4
4
|
$size: 'xs', 's', 'm', 'l', 'xl';
|
|
5
|
-
$type: none, main, vice, text, link, read, note, case, line, weak, back, info, well, warn, risk, w, b;
|
|
5
|
+
$type: none, main, vice, text, link, read, desc, note, case, line, weak, back, info, well, warn, risk, w, b;
|
|
6
6
|
|
|
7
7
|
[ui-btn] {
|
|
8
8
|
& {
|
|
@@ -174,11 +174,11 @@ body [ui-btn~='@a'] {
|
|
|
174
174
|
} @else {
|
|
175
175
|
color: var(--co-#{$name});
|
|
176
176
|
}
|
|
177
|
-
border: 1px solid var(--co-#{$name});
|
|
177
|
+
border: 1px solid var(--co-#{$name}-o-lm);
|
|
178
178
|
|
|
179
179
|
&:hover,
|
|
180
180
|
&.active {
|
|
181
|
-
border: 1px solid var(--co-#{$name});
|
|
181
|
+
border: 1px solid var(--co-#{$name}-o-lm);
|
|
182
182
|
box-shadow: inset 0 0 0 100em var(--co-#{$name}-xs);
|
|
183
183
|
}
|
|
184
184
|
}
|
|
@@ -379,7 +379,7 @@ body [ui-btn~='@a'] {
|
|
|
379
379
|
} @else {
|
|
380
380
|
color: var(--co-#{$name});
|
|
381
381
|
}
|
|
382
|
-
border: 1px solid var(--co-#{$name});
|
|
382
|
+
border: 1px solid var(--co-#{$name}-o-lm);
|
|
383
383
|
|
|
384
384
|
&:hover,
|
|
385
385
|
&.active {
|
|
@@ -172,11 +172,11 @@ body [ui-btn~='@b'] {
|
|
|
172
172
|
} @else {
|
|
173
173
|
color: var(--co-#{$name});
|
|
174
174
|
}
|
|
175
|
-
border: 1px solid var(--co-#{$name});
|
|
175
|
+
border: 1px solid var(--co-#{$name}-o-lm);
|
|
176
176
|
|
|
177
177
|
&:hover,
|
|
178
178
|
&.active {
|
|
179
|
-
border: 1px solid var(--co-#{$name});
|
|
179
|
+
border: 1px solid var(--co-#{$name}-o-lm);
|
|
180
180
|
box-shadow: inset 0 0 0 100em var(--co-#{$name}-xs);
|
|
181
181
|
}
|
|
182
182
|
}
|
|
@@ -368,7 +368,7 @@ body [ui-btn~='@b'] {
|
|
|
368
368
|
} @else {
|
|
369
369
|
color: var(--co-#{$name});
|
|
370
370
|
}
|
|
371
|
-
border: 1px solid var(--co-#{$name});
|
|
371
|
+
border: 1px solid var(--co-#{$name}-o-lm);
|
|
372
372
|
|
|
373
373
|
&:hover,
|
|
374
374
|
&.active {
|
package/core/ux.scss
CHANGED
|
@@ -64,22 +64,24 @@
|
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
-
//
|
|
67
|
+
// 移入显示(父级 :hover 或 .active 同效)
|
|
68
68
|
.parent-hover\:show {
|
|
69
69
|
opacity: 0;
|
|
70
70
|
pointer-events: none;
|
|
71
71
|
transition: opacity 0.1s;
|
|
72
72
|
}
|
|
73
|
-
*:hover > .parent-hover\:show
|
|
73
|
+
*:hover > .parent-hover\:show,
|
|
74
|
+
*.active > .parent-hover\:show {
|
|
74
75
|
opacity: 1;
|
|
75
76
|
pointer-events: auto;
|
|
76
77
|
}
|
|
77
78
|
|
|
78
|
-
//
|
|
79
|
+
// 移入隐藏(父级 :hover 或 .active 同效)
|
|
79
80
|
.parent-hover\:hide {
|
|
80
81
|
transition: opacity 0.1s;
|
|
81
82
|
}
|
|
82
|
-
*:hover > .parent-hover\:hide
|
|
83
|
+
*:hover > .parent-hover\:hide,
|
|
84
|
+
*.active > .parent-hover\:hide {
|
|
83
85
|
opacity: 0;
|
|
84
86
|
pointer-events: none;
|
|
85
87
|
}
|