@neatui/css 4.0.2 → 4.1.0

package/GUIDE.md

@@ -137,7 +137,7 @@ npm install @neatui/css @neatui/vue
 
 ## 尺寸系统
 
-从3.x升级时，同名尺寸类不保证保持原值。请按 [4.0尺寸迁移指南](./MIGRATION-4.0.md) 的旧值表进行迁移。
+从3.x升级时，同名尺寸类不保证保持原值。请按 [4.0尺寸迁移指南](./MIGRATION-4.0.md) 的旧值表进行迁移。从4.0升级到4.1时，按 [4.1尺寸迁移指南](./MIGRATION-4.1.md) 检查 `*m`、`*l` 档位。
 
 ### 核心概念：S/M/L 矩阵
 
@@ -191,16 +191,16 @@ xl  →  5.5em
 
 中型容器段:
   w-xs*m    // 18em
-  w-xl*m    // 38em
+  w-xl*m    // 28em
 
 大型容器段:
-  w-xs*l    // 42em
-  w-xl*l    // 82em
+  w-xs*l    // 30em
+  w-xl*l    // 70em
 ```
 
 `w/h` 的 `*s/*m/*l` 是分段档位，不是乘法。4.0 起不再生成 `w-sm+` 这类宽高增量类。
 
-**覆盖范围**: 0-82em (0-1312px @ 16px)，共 45 种宽高尺寸
+**覆盖范围**: 0-70em (0-1120px @ 16px)，共 45 种宽高尺寸
 
 ### 应用于各属性
 

package/MIGRATION-4.0.md

@@ -85,6 +85,21 @@ mob:w-ll   20em -> mob:w-ss*m   20em
 | `*m` | 5 | 5.5 | 6 | 6.5 | 7 | 7.5 | 8 | 8.5 | 9 | 9.5 | 10 |
 | `*l` | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
 
+### 早期 3.x 遗留的 `fs-xxs`
+
+早期 3.x 曾生成 `fs-xxs`；后期 3.x 将字号收敛为 `fs-xs ~ fs-xl` 时从
+CSS 源码移除了该档位，但下游项目中仍可能保留大量 `fs-xxs`。迁移时必须显式搜索，
+不能因为最终 3.x 源码中已经没有该类就跳过：
+
+| 早期 3.x 类名 | 旧值 | 4.0 类名 | 新值 | 结果 |
+|---|---:|---|---:|---|
+| `fs-xxs` | 0.7rem | `fs-xs` | 0.6875rem | 近似，-0.0125rem |
+| `fs-xxs+` | 0.75rem | `fs-ss` | 0.75rem | 精确 |
+| `fs-xxs*` | 1.4rem | `fs-lm` | 1.375rem | 近似，-0.025rem |
+
+`fs-xxs-sub`、伪元素变体和响应式前缀使用同一数值映射。例如
+`mob:fs-xxs` 应迁移为 `mob:fs-xs`。
+
 | 3.x 类名 | 旧值 | 4.0 类名 | 新值 | 结果 |
 |---|---:|---|---:|---|
 | `fs-xs` | 0.8rem | `fs-sm` | 0.8125rem | 近似，+0.0125rem |
@@ -135,7 +150,7 @@ mob:w-ll   20em -> mob:w-ss*m   20em
 
 ## 检查清单
 
-1. 搜索所有字号及宽高类，包括动态字符串和响应式前缀。
+1. 搜索所有字号及宽高类，包括动态字符串和响应式前缀；必须单独搜索早期 3.x 遗留的 `fs-xxs`、`fs-xxs+`、`fs-xxs*`。
 2. 根据3.x表计算旧值。
 3. 优先选择4.0精确同值档位。
 4. 没有精确值时记录差值并进行视觉确认。

package/MIGRATION-4.1.md

@@ -0,0 +1,75 @@
+# NeatUI CSS 4.1 迁移指南
+
+4.1 调整了宽高尺寸系统的中型与大型容器段，使常用表单和弹窗宽度获得更细的档位。类名没有删除，但同名 `*m`、`*l` 类的实际值发生了变化，升级时必须检查布局。
+
+以下变化同时适用于响应式前缀，以及 `w / min-w / max-w / h / min-h / max-h` 六组属性。基础段和 `*s` 段保持不变。
+
+## 4.0.0 → 4.1.0 对照表
+
+单位均为 `em`；括号内为根字号或当前元素字号为 `16px` 时的参考像素值。
+
+| 档位 | 4.0.0 | 4.1.0 | 变化 |
+|---|---:|---:|---:|
+| `xs*m` | 18em（288px） | 18em（288px） | 不变 |
+| `ss*m` | 20em（320px） | 19em（304px） | -1em（-16px） |
+| `sm*m` | 22em（352px） | 20em（320px） | -2em（-32px） |
+| `sl*m` | 24em（384px） | 21em（336px） | -3em（-48px） |
+| `ms*m` | 26em（416px） | 22em（352px） | -4em（-64px） |
+| `mm*m` | 28em（448px） | 23em（368px） | -5em（-80px） |
+| `ml*m` | 30em（480px） | 24em（384px） | -6em（-96px） |
+| `ls*m` | 32em（512px） | 25em（400px） | -7em（-112px） |
+| `lm*m` | 34em（544px） | 26em（416px） | -8em（-128px） |
+| `ll*m` | 36em（576px） | 27em（432px） | -9em（-144px） |
+| `xl*m` | 38em（608px） | 28em（448px） | -10em（-160px） |
+| `xs*l` | 42em（672px） | 30em（480px） | -12em（-192px） |
+| `ss*l` | 46em（736px） | 34em（544px） | -12em（-192px） |
+| `sm*l` | 50em（800px） | 38em（608px） | -12em（-192px） |
+| `sl*l` | 54em（864px） | 42em（672px） | -12em（-192px） |
+| `ms*l` | 58em（928px） | 46em（736px） | -12em（-192px） |
+| `mm*l` | 62em（992px） | 50em（800px） | -12em（-192px） |
+| `ml*l` | 66em（1056px） | 54em（864px） | -12em（-192px） |
+| `ls*l` | 70em（1120px） | 58em（928px） | -12em（-192px） |
+| `lm*l` | 74em（1184px） | 62em（992px） | -12em（-192px） |
+| `ll*l` | 78em（1248px） | 66em（1056px） | -12em（-192px） |
+| `xl*l` | 82em（1312px） | 70em（1120px） | -12em（-192px） |
+
+## 保持 4.0.0 实际尺寸
+
+如果升级后必须尽量保持原来的实际宽高，不要保留同名类；应按目标值重新选择 4.1.0 档位。下表列出能够精确对应的常用迁移：
+
+| 4.0.0 类名 | 旧值 | 4.1.0 类名 | 新值 | 结果 |
+|---|---:|---|---:|---|
+| `*-ss*m` | 20em | `*-sm*m` | 20em | 精确 |
+| `*-sm*m` | 22em | `*-ms*m` | 22em | 精确 |
+| `*-sl*m` | 24em | `*-ml*m` | 24em | 精确 |
+| `*-ms*m` | 26em | `*-lm*m` | 26em | 精确 |
+| `*-mm*m` | 28em | `*-xl*m` | 28em | 精确 |
+| `*-ml*m` | 30em | `*-xs*l` | 30em | 精确 |
+| `*-lm*m` | 34em | `*-ss*l` | 34em | 精确 |
+| `*-xl*m` | 38em | `*-sm*l` | 38em | 精确 |
+| `*-xs*l` | 42em | `*-sl*l` | 42em | 精确 |
+| `*-ss*l` | 46em | `*-ms*l` | 46em | 精确 |
+| `*-sm*l` | 50em | `*-mm*l` | 50em | 精确 |
+| `*-sl*l` | 54em | `*-ml*l` | 54em | 精确 |
+| `*-ms*l` | 58em | `*-ls*l` | 58em | 精确 |
+| `*-mm*l` | 62em | `*-lm*l` | 62em | 精确 |
+| `*-ml*l` | 66em | `*-ll*l` | 66em | 精确 |
+| `*-ls*l` | 70em | `*-xl*l` | 70em | 精确 |
+
+这里的 `*` 表示保留原属性前缀。例如：
+
+```text
+w-ss*m       -> w-sm*m
+max-w-xl*m   -> max-w-sm*l
+mob:min-h-ms*l -> mob:min-h-ls*l
+```
+
+4.0.0 中实际使用的 `32 / 36 / 74 / 78 / 82em` 在 4.1.0 中没有精确档位。遇到这些值时，应根据布局选择相邻档位并进行视觉回归；不要仅按档位名称迁移。
+
+## 检查清单
+
+1. 搜索 `*m`、`*l` 宽高类，包括动态字符串和响应式前缀。
+2. 确认同名类缩小后，表单、弹窗、侧栏和固定高度区域是否仍符合预期。
+3. 需要保持旧尺寸时，按实际 `em` 值选择新的档位。
+4. 检查 `w / min-w / max-w / h / min-h / max-h` 六组属性。
+5. 编译 CSS，并在常用桌面与移动视口进行视觉回归。

package/core/trim.scss

@@ -30,30 +30,30 @@ $dimension-s: (
 
 $dimension-m: (
   xs: 18,
-  ss: 20,
-  sm: 22,
-  sl: 24,
-  ms: 26,
-  mm: 28,
-  ml: 30,
-  ls: 32,
-  lm: 34,
-  ll: 36,
-  xl: 38,
+  ss: 19,
+  sm: 20,
+  sl: 21,
+  ms: 22,
+  mm: 23,
+  ml: 24,
+  ls: 25,
+  lm: 26,
+  ll: 27,
+  xl: 28,
 );
 
 $dimension-l: (
-  xs: 42,
-  ss: 46,
-  sm: 50,
-  sl: 54,
-  ms: 58,
-  mm: 62,
-  ml: 66,
-  ls: 70,
-  lm: 74,
-  ll: 78,
-  xl: 82,
+  xs: 30,
+  ss: 34,
+  sm: 38,
+  sl: 42,
+  ms: 46,
+  mm: 50,
+  ml: 54,
+  ls: 58,
+  lm: 62,
+  ll: 66,
+  xl: 70,
 );
 
 @mixin dimension-scale($media, $prefix, $property) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/css",
-  "version": "4.0.2",
+  "version": "4.1.0",
   "description": "neatui",
   "main": "./neatui.scss",
   "license": "MIT",