@neatui/css 3.17.0 → 4.0.1

package/MIGRATION-4.0.md

@@ -0,0 +1,144 @@
+# NeatUI CSS 4.0 迁移指南
+
+4.0 收敛了颜色语法，并重建了字号与宽高刻度。迁移时必须按本指南逐项处理，不能只按类名表面含义替换。
+
+## 边框颜色前缀
+
+4.0 将边框颜色前缀从 `bk-` 收敛为 `b-`，不再生成 `bk-*` 兼容类：
+
+| 3.x | 4.0 | CSS 属性 |
+|---|---|---|
+| `bk-line` | `b-line` | `border-color: var(--co-line)` |
+| `bk-main` | `b-main` | `border-color: var(--co-main)` |
+| `bk-main-o-mm` | `b-main-o-mm` | `border-color: var(--co-main-o-mm)` |
+| `bk-main:hover` | `b-main:hover` | hover 边框颜色 |
+
+`b-` 在 4.0 中统一承载边框语义：`b-solid / b-dashed / b-double / b-dotted` 表示样式，`b-xs / b-ss` 表示宽度，`b-line / b-main` 表示颜色。具体含义由后缀词元决定。
+
+## 尺寸迁移
+
+4.0 重建了字号与宽高刻度。迁移时必须先读取 3.x 类名对应的实际值，再选择 4.0 中相同或最接近的档位；不能按 `xs / sm / mm` 等名称直接替换。
+
+以下规则同时适用于响应式前缀，以及 `w / min-w / max-w / h / min-h / max-h` 六组属性。
+
+## 宽高旧值
+
+3.x 基础档从 `0em` 开始，每档增加 `2em`：
+
+| 档位 | no | xs | ss | sm | sl | ms | mm | ml | ls | lm | ll | xl |
+|---|---:|---:|---:|---:|---:|---:|---:|---:|---:|---:|---:|---:|
+| 基础 | 0 | 2 | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 18 | 20 | 22 |
+| `+` | 1 | 3 | 5 | 7 | 9 | 11 | 13 | 15 | 17 | 19 | 21 | 23 |
+| `*s` | 0 | 4 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 |
+| `*m` | 0 | 6 | 12 | 18 | 24 | 30 | 36 | 42 | 48 | 54 | 60 | 66 |
+| `*l` | 0 | 8 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 88 |
+
+## 宽高新值
+
+4.0 的 `*s / *m / *l` 表示分段，不再表示乘法，并且不再生成 `+`：
+
+| 档位 | xs | ss | sm | sl | ms | mm | ml | ls | lm | ll | xl |
+|---|---:|---:|---:|---:|---:|---:|---:|---:|---:|---:|---:|
+| 基础 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 4.5 | 5 | 5.5 |
+| `*s` | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
+| `*m` | 18 | 20 | 22 | 24 | 26 | 28 | 30 | 32 | 34 | 36 | 38 |
+| `*l` | 42 | 46 | 50 | 54 | 58 | 62 | 66 | 70 | 74 | 78 | 82 |
+
+单位均为 `em`。`no` 仍为 `0`。
+
+## NeatUI 内部宽高迁移
+
+当前组件包使用到的旧值按下表迁移：
+
+| 3.x 类名 | 旧值 | 4.0 类名 | 新值 | 结果 |
+|---|---:|---|---:|---|
+| `w/h-xs` | 2em | `w/h-sl` | 2em | 精确 |
+| `w/h-ss` | 4em | `w/h-ls` | 4em | 精确 |
+| `w/h-sm` | 6em | `w/h-xs*s` | 6em | 精确 |
+| `w/h-ms` | 10em | `w/h-ms*s` | 10em | 精确 |
+| `w/h-ms+` | 11em | `w/h-mm*s` | 11em | 精确 |
+| `w/h-mm` | 12em | `w/h-ml*s` | 12em | 精确 |
+| `w/h-ml+` | 15em | `w/h-ll*s` | 15em | 精确 |
+| `w/h-ls` | 16em | `w/h-xl*s` | 16em | 精确 |
+| `w/h-ls+` | 17em | `w/h-xs*m` | 18em | 最近档，增加1em |
+| `w/h-ll` | 20em | `w/h-ss*m` | 20em | 精确 |
+| `w/h-xl` | 22em | `w/h-sm*m` | 22em | 精确 |
+
+属性前缀应保持不变。例如：
+
+```text
+min-h-ms   10em -> min-h-ms*s   10em
+max-h-ls   16em -> max-h-xl*s   16em
+mob:w-ll   20em -> mob:w-ss*m   20em
+```
+
+## 字号旧值与迁移
+
+3.x 字号是不规则序列；4.0 改为四段分级刻度。以下表格直接从 3.x 实际值映射到最终 4.0 档位，不经过 4.0 开发期间尚未大规模使用的中间刻度。
+
+4.0 完整字号值如下，单位均为 `rem`：
+
+| 档位 | xs | ss | sm | sl | ms | mm | ml | ls | lm | ll | xl |
+|---|---:|---:|---:|---:|---:|---:|---:|---:|---:|---:|---:|
+| 基础 | 0.6875 | 0.75 | 0.8125 | 0.875 | 0.9375 | 1 | 1.125 | 1.25 | 1.375 | 1.5 | 1.75 |
+| `*s` | 2 | 2.25 | 2.5 | 2.75 | 3 | 3.25 | 3.5 | 3.75 | 4 | 4.25 | 4.5 |
+| `*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 类名 | 旧值 | 4.0 类名 | 新值 | 结果 |
+|---|---:|---|---:|---|
+| `fs-xs` | 0.8rem | `fs-sm` | 0.8125rem | 近似，+0.0125rem |
+| `fs-ss` | 0.9rem | `fs-sl` | 0.875rem | 近似，-0.025rem |
+| `fs-sm` | 1rem | `fs-mm` | 1rem | 精确 |
+| `fs-sl` | 1.1rem | `fs-ml` | 1.125rem | 近似，+0.025rem |
+| `fs-ms` | 1.2rem | `fs-ls` | 1.25rem | 近似，+0.05rem |
+| `fs-mm` | 1.4rem | `fs-lm` | 1.375rem | 近似，-0.025rem |
+| `fs-ml` | 1.8rem | `fs-xl` | 1.75rem | 近似，-0.05rem |
+| `fs-ls` | 2.2rem | `fs-ss*s` | 2.25rem | 近似，+0.05rem |
+| `fs-lm` | 2.6rem | `fs-sm*s` | 2.5rem | 近似，-0.1rem |
+| `fs-ll` | 3.2rem | `fs-mm*s` | 3.25rem | 近似，+0.05rem |
+| `fs-xl` | 3.8rem | `fs-ls*s` | 3.75rem | 近似，-0.05rem |
+
+旧 `fs-*+` 已删除，逐项迁移如下：
+
+| 3.x 类名 | 旧值 | 4.0 类名 | 新值 | 结果 |
+|---|---:|---|---:|---|
+| `fs-xs+` | 0.85rem | `fs-sl` | 0.875rem | 近似，+0.025rem |
+| `fs-ss+` | 0.95rem | `fs-ms` | 0.9375rem | 近似，-0.0125rem |
+| `fs-sm+` | 1.05rem | `fs-mm` | 1rem | 近似，-0.05rem |
+| `fs-sl+` | 1.15rem | `fs-ml` | 1.125rem | 近似，-0.025rem |
+| `fs-ms+` | 1.25rem | `fs-ls` | 1.25rem | 精确 |
+| `fs-mm+` | 1.5rem | `fs-ll` | 1.5rem | 精确 |
+| `fs-ml+` | 2rem | `fs-xs*s` | 2rem | 精确 |
+| `fs-ls+` | 2.4rem | `fs-sm*s` | 2.5rem | 近似，+0.1rem |
+| `fs-lm+` | 2.8rem | `fs-sl*s` | 2.75rem | 近似，-0.05rem |
+| `fs-ll+` | 3.5rem | `fs-ml*s` | 3.5rem | 精确 |
+| `fs-xl+` | 4.1rem | `fs-lm*s` | 4rem | 近似，-0.1rem |
+
+旧 `fs-*` 翻倍类也已删除，逐项迁移如下：
+
+| 3.x 类名 | 旧值 | 4.0 类名 | 新值 | 结果 |
+|---|---:|---|---:|---|
+| `fs-xs*` | 1.6rem | `fs-ll` | 1.5rem | 近似，-0.1rem |
+| `fs-ss*` | 1.8rem | `fs-xl` | 1.75rem | 近似，-0.05rem |
+| `fs-sm*` | 2rem | `fs-xs*s` | 2rem | 精确 |
+| `fs-sl*` | 2.2rem | `fs-ss*s` | 2.25rem | 近似，+0.05rem |
+| `fs-ms*` | 2.4rem | `fs-sm*s` | 2.5rem | 近似，+0.1rem |
+| `fs-mm*` | 2.8rem | `fs-sl*s` | 2.75rem | 近似，-0.05rem |
+| `fs-ml*` | 3.6rem | `fs-ml*s` | 3.5rem | 近似，-0.1rem |
+| `fs-ls*` | 4.4rem | `fs-xl*s` | 4.5rem | 近似，+0.1rem |
+| `fs-lm*` | 5.2rem | `fs-xs*m` | 5rem | 近似，-0.2rem |
+| `fs-ll*` | 6.4rem | `fs-sl*m` | 6.5rem | 近似，+0.1rem |
+| `fs-xl*` | 7.6rem | `fs-mm*m` | 7.5rem | 近似，-0.1rem |
+
+无法精确匹配的字号应在视觉回归中确认，不要仅凭名称猜测。
+
+## 检查清单
+
+1. 搜索所有字号及宽高类，包括动态字符串和响应式前缀。
+2. 根据3.x表计算旧值。
+3. 优先选择4.0精确同值档位。
+4. 没有精确值时记录差值并进行视觉确认。
+5. 确认代码中不再使用宽高 `+`、旧字号 `+` 或旧字号翻倍 `*`。
+6. 编译 CSS，并验证基础、`*s`、`*m`、`*l` 及响应式选择器均正常生成。
+7. 确认正式代码、组件和文档中不再出现 `bk-*`。

package/README.md

@@ -67,10 +67,18 @@
 
 - 分级字号：
 
-  - `.fs-xxs` ~ `.fs-xxl`: 字体大小（从极小到极大）
-  - `.fs-{size}+`: 增加字号（+0.05rem）
-  - `.fs-{size}*`: 双倍字号
+  - `.fs-xs` ~ `.fs-xl`: 11档基础字号
+  - `.fs-{size}*s`: 展示字号段
+  - `.fs-{size}*m`: 大展示字号段
+  - `.fs-{size}*l`: 巨型字号段
   - `.fs-{size}-sub`: 子元素字号
+  - `.fs-case / .fs-note / .fs-desc / .fs-body / .fs-lead`: 语义字号
+  - `.fs-root`: 重置为 `1rem`
+  - `.fs++ / .fs--`: 相对当前上下文放大或缩小
+
+基础字号在根字号为 `16px` 时对应 `11 / 12 / 13 / 14 / 15 / 16 / 18 / 20 / 22 / 24 / 28px`；随后由 `fs-xs*s` 从 `2rem / 32px` 接续。完整刻度按 `1 / 2 / 4 / 8 / 16px` 分段递增。
+
+4.0 已移除 `fs-{size}+`、`fs-{size}*` 和宽高 `+` 语法，并将 `*s / *m / *l` 改为分段刻度；`fs++ / fs--` 是保留的上下文缩放语法。升级项目请先阅读 [4.0 尺寸迁移指南](./MIGRATION-4.0.md)，按旧实际值选择新档位。
 
 - 行高：
   - `.lh-no`: 无行高
@@ -130,16 +138,25 @@
 
   - `.b-solid`: 实线边框
   - `.b-dashed`: 虚线边框
+  - `.b-double`: 双线边框
   - `.b-dotted`: 点线边框
 
 - 边框宽度：
-  - 全边框：`.b-no` ~ `.b-xl`（0px ~ 1rem）
-  - 水平边框：`.bx-no` ~ `.bx-xl`
-  - 垂直边框：`.by-no` ~ `.by-xl`
-  - 顶部边框：`.bt-no` ~ `.bt-xl`
-  - 右侧边框：`.br-no` ~ `.br-xl`
-  - 底部边框：`.bb-no` ~ `.bb-xl`
-  - 左侧边框：`.bl-no` ~ `.bl-xl`
+  - 全边框：`.b-no` ~ `.b-xx`（0px ~ 12px）
+  - 水平边框：`.bx-no` ~ `.bx-xx`
+  - 垂直边框：`.by-no` ~ `.by-xx`
+  - 顶部边框：`.bt-no` ~ `.bt-xx`
+  - 右侧边框：`.br-no` ~ `.br-xx`
+  - 底部边框：`.bb-no` ~ `.bb-xx`
+  - 左侧边框：`.bl-no` ~ `.bl-xx`
+
+- 边框颜色：
+  - `.b-line`：线条色
+  - `.b-main`：主题主色
+  - `.b-risk`：危险色
+  - `.b-main-o-mm`：带透明度的主题主色
+
+4.0 已将旧的 `bk-*` 前缀收敛为 `b-*`，不再生成兼容类。`b-solid`、`b-xs`、`b-line` 分别表示边框样式、宽度和颜色。
 
 尺寸等级：
 
@@ -149,12 +166,13 @@
 - `sm`: 3px
 - `sl`: 4px
 - `ms`: 5px
-- `mm`: 0.5rem
-- `ml`: 0.6rem
-- `ls`: 0.7rem
-- `lm`: 0.8rem
-- `ll`: 0.9rem
-- `xl`: 1rem
+- `mm`: 6px
+- `ml`: 7px
+- `ls`: 8px
+- `lm`: 9px
+- `ll`: 10px
+- `xl`: 11px
+- `xx`: 12px
 
 ### 5. 主题系统 (theme)
 

package/components/form/base.scss

@@ -265,11 +265,12 @@ $cos: 'main', 'text', 'read', 'note', 'idle', 'case', 'line', 'info', 'well', 'w
 // 清理
 [ui-form-clean] {
   position: relative;
-  display: none;
+  display: inline-block;
   right: 0;
   background: none;
   box-shadow: none;
-  opacity: 0.6;
+  opacity: 0;
+  pointer-events: none;
 
   &::before {
     position: relative;
@@ -289,21 +290,11 @@ $cos: 'main', 'text', 'read', 'note', 'idle', 'case', 'line', 'info', 'well', 'w
     box-shadow: inset 0 0 0 1px currentColor;
   }
 }
-@keyframes am-form-clean {
-  0% {
-    opacity: 0;
-    transform: scale3d(0.5, 0.5, 1);
-  }
-  100% {
-    opacity: 1;
-    transform: scale3d(1, 1, 1);
-  }
-}
 [ui-form] {
   &:hover {
     [ui-form-clean] {
-      display: inline-block;
-      animation: am-form-clean 0.2s;
+      opacity: 0.6;
+      pointer-events: auto;
     }
   }
 }

package/components/form/form@c/base.scss

@@ -25,6 +25,8 @@
   // 清理
   [ui-form-clean] {
     display: inline-block;
+    opacity: 0.6;
+    pointer-events: auto;
 
     color: var(--co-case);
     background:

package/components/load/load@h.scss

@@ -1,23 +1,35 @@
-[ui-load='@h'],
+[ui-load="@h"],
 .ui-load-h {
   @keyframes ui-load-h {
     0%,
     20% {
-      background: radial-gradient(circle at 15% 50%, currentColor 12%, transparent 13%);
+      background: radial-gradient(
+        circle at 15% 50%,
+        currentColor 12%,
+        transparent 13%
+      );
     }
     21%,
     25% {
     }
     25%,
     40% {
-      background: radial-gradient(circle at 50% 50%, currentColor 17%, transparent 18%);
+      background: radial-gradient(
+        circle at 50% 50%,
+        currentColor 17%,
+        transparent 18%
+      );
     }
     41%,
     45% {
     }
     45%,
     60% {
-      background: radial-gradient(circle at 85% 50%, currentColor 12%, transparent 13%);
+      background: radial-gradient(
+        circle at 85% 50%,
+        currentColor 12%,
+        transparent 13%
+      );
     }
     61%,
     100% {
@@ -29,19 +41,22 @@
     display: inline-block;
     width: 1em;
     height: 1em;
-    background: radial-gradient(circle at 15% 50%, rgba(var(--co-text), 0.2) 12%, transparent 13%),
-      radial-gradient(circle at 50% 50%, rgba(var(--co-text), 0.2) 14%, transparent 15%), radial-gradient(circle at 85% 50%, rgba(var(--co-text), 0.2) 9%, transparent 10%);
+    background:
+      radial-gradient(circle at 15% 50%, currentColor 12%, transparent 13%),
+      radial-gradient(circle at 50% 50%, currentColor 14%, transparent 15%),
+      radial-gradient(circle at 85% 50%, currentColor 9%, transparent 10%);
 
     &::after {
       position: absolute;
       display: block;
-      content: '';
+      content: "";
       width: 100%;
       height: 100%;
       left: 0;
       top: 0;
-      color: var(--co-text);
-      animation: ui-load-h 1s cubic-bezier(0.72, 0.115, 0.355, 0.88) infinite both;
+      color: currentColor;
+      animation: ui-load-h 1s cubic-bezier(0.72, 0.115, 0.355, 0.88) infinite
+        both;
     }
   }
 }

package/core/basic.scss

@@ -206,7 +206,13 @@ code,
 
 [layout="full"] {
   &,
-  body {
+  body,
+  #app,
+  #root,
+  #__nuxt,
+  #__next,
+  #svelte,
+  app-root {
     width: 100%;
     height: 100%;
   }
@@ -258,21 +264,6 @@ code,
   }
 }
 
-.bk {
-  &-solid {
-    border-style: solid;
-  }
-  &-dashed {
-    border-style: dashed;
-  }
-  &-double {
-    border-style: double;
-  }
-  &-dotted {
-    border-style: dotted;
-  }
-}
-
 // 省略号
 [ui-omit] {
   overflow: hidden;

package/core/border.scss

@@ -7,6 +7,9 @@
 .b-dashed {
   border-style: dashed;
 }
+.b-double {
+  border-style: double;
+}
 .b-dotted {
   border-style: dotted;
 }

package/core/flex.scss

@@ -192,7 +192,7 @@
 
   [ui-flex~='#{$med}col'] {
     flex-direction: column;
-    [ui-flex~='#{$med}reverse'] {
+    &[ui-flex~='#{$med}reverse'] {
       flex-direction: column-reverse;
     }
   }

package/core/media.scss

@@ -92,7 +92,7 @@ $level: (
           }
         }
       }
-    } @else if ($p == '>pad' or $p == '>dpc-l') {
+    } @else if ($p == '>pad') {
       @media screen and (min-width: 1280px) {
         @if ($this == '') {
           @content;

package/core/shadow.scss

@@ -1,89 +0,0 @@
-// 阴影
-$cos: main, read, case, line, back;
-$szs: xs, ss, sm, sl, ms, mm, ml, ls, lm, ll;
-
-div {
-  width: 5em;
-  height: 2em;
-  margin: 1em;
-  background: #f0f0f0;
-}
-
-.bs {
-  box-shadow: inset 0 0 0 1px currentColor;
-}
-
-.bs-x {
-  box-shadow:
-    inset 1px 0 0 0 currentColor,
-    inset -1px 0 0 0 currentColor;
-}
-
-.bs-y {
-  box-shadow:
-    inset 0 1px 0 0 currentColor,
-    inset 0 -1px 0 0 currentColor;
-}
-
-.bs-l {
-  box-shadow: inset 1px 0 0 0 currentColor;
-}
-
-.bs-r {
-  box-shadow: inset -1px 0 0 0 currentColor;
-}
-
-.bs-t {
-  box-shadow: inset 0 1px 0 0 currentColor;
-}
-
-.bs-b {
-  box-shadow: inset 0 -1px 0 0 currentColor;
-}
-
-/* 主题色 */
-.bs-xs-main {
-  @include theme {
-    box-shadow: inset 0 0 0 1px var(--co-main);
-  }
-}
-
-.bs-x-xs-main {
-  @include theme {
-    box-shadow:
-      inset 1px 0 0 0 var(--co-main),
-      inset -1px 0 0 0 var(--co-main);
-  }
-}
-
-.bs-y-xs-main {
-  @include theme {
-    box-shadow:
-      inset 0 1px 0 0 var(--co-main),
-      inset 0 -1px 0 0 var(--co-main);
-  }
-}
-
-.bs-l-xs-main {
-  @include theme {
-    box-shadow: inset 1px 0 0 0 var(--co-main);
-  }
-}
-
-.bs-r-xs-main {
-  @include theme {
-    box-shadow: inset -1px 0 0 0 var(--co-main);
-  }
-}
-
-.bs-t-xs-main {
-  @include theme {
-    box-shadow: inset 0 1px 0 0 var(--co-main);
-  }
-}
-
-.bs-b-xs-main {
-  @include theme {
-    box-shadow: inset 0 -1px 0 0 var(--co-main);
-  }
-}

package/core/size.scss

@@ -2,9 +2,9 @@
  * 模块：字号
  * 模块类型：b(基础模块)
  * 精度：11档 (xs ss sm sl ms mm ml ls lm ll xl)
- * 分级：3 (s/m/l)
+ * 分级：4段 (base/*s/*m/*l)
  * 适配：桌面 | 平板 | 移动
- * 版本：v0.0.2
+ * 版本：v0.0.3
  * 备注：s->Small 小，m->Middle 中，l->Large 大；x->Extra
  */
 
@@ -26,8 +26,11 @@
 
 // 分级字号
 @mixin randSize($d: '') {
-  $rank: 'xs', 'ss', 'sm', 'sl', 'ms', 'mm', 'ml', 'ls', 'lm', 'll', 'xl';
-  // 分级字号
+  $base-sizes: ('xs' 0.6875rem), ('ss' 0.75rem), ('sm' 0.8125rem), ('sl' 0.875rem), ('ms' 0.9375rem), ('mm' 1rem), ('ml' 1.125rem), ('ls' 1.25rem), ('lm' 1.375rem), ('ll' 1.5rem), ('xl' 1.75rem);
+  $display-sizes: ('xs\\*s' 2rem), ('ss\\*s' 2.25rem), ('sm\\*s' 2.5rem), ('sl\\*s' 2.75rem), ('ms\\*s' 3rem), ('mm\\*s' 3.25rem), ('ml\\*s' 3.5rem), ('ls\\*s' 3.75rem), ('lm\\*s' 4rem), ('ll\\*s' 4.25rem), ('xl\\*s' 4.5rem),
+    ('xs\\*m' 5rem), ('ss\\*m' 5.5rem), ('sm\\*m' 6rem), ('sl\\*m' 6.5rem), ('ms\\*m' 7rem), ('mm\\*m' 7.5rem), ('ml\\*m' 8rem), ('ls\\*m' 8.5rem), ('lm\\*m' 9rem), ('ll\\*m' 9.5rem), ('xl\\*m' 10rem),
+    ('xs\\*l' 11rem), ('ss\\*l' 12rem), ('sm\\*l' 13rem), ('sl\\*l' 14rem), ('ms\\*l' 15rem), ('mm\\*l' 16rem), ('ml\\*l' 17rem), ('ls\\*l' 18rem), ('lm\\*l' 19rem), ('ll\\*l' 20rem), ('xl\\*l' 21rem);
+
   .#{$d}fs-no {
     font-size: 0rem;
   }
@@ -35,54 +38,49 @@
     line-height: 0;
   }
 
-  $sz: 0.7;
-  $add: 0.05;
-  @each $k in $rank {
-    @if ($sz<1.2) {
-      $sz: $sz + 0.1;
-    } @else if ($sz<1.4) {
-      $sz: $sz + 0.2;
-      $add: 0.1;
-    } @else if($sz<2.4) {
-      $sz: $sz + 0.4;
-      $add: 0.2;
-    } @else if($sz<3.4) {
-      $sz: $sz + 0.6;
-      $add: 0.3;
-    } @else {
-      $sz: $sz + 0.8;
-      $add: 0.4;
-    }
-
+  @each $k, $sz in $base-sizes {
     .#{$d}fs-#{$k},
     .#{$d}fs-#{$k}-sub > *,
     .#{$d}fs-#{$k}-sub\:sta > *::before,
     .#{$d}fs-#{$k}-sub\:end > *::after,
     .#{$d}fs-#{$k}\:sta::before,
     .#{$d}fs-#{$k}\:end::after {
-      font-size: #{$sz}rem;
-    }
-    // 加0.05
-    .#{$d}fs-#{$k}\+,
-    .#{$d}fs-#{$k}-sub\+ > *,
-    .#{$d}fs-#{$k}\+\:sta::before,
-    .#{$d}fs-#{$k}\+\:end::after,
-    .#{$d}fs-#{$k}-sub\+\:sta > *::before,
-    .#{$d}fs-#{$k}-sub\+\:end > *::after {
-      font-size: #{$sz + $add}rem;
+      font-size: $sz;
     }
+  }
 
-    // 双倍
-    .#{$d}fs-#{$k}\*,
-    .#{$d}fs-#{$k}-sub\* > *,
-    .#{$d}fs-#{$k}\*\:sta::before,
-    .#{$d}fs-#{$k}\*\:end::after,
-    .#{$d}fs-#{$k}-sub\*\:sta > *::before,
-    .#{$d}fs-#{$k}-sub\*\:end > *::after {
-      font-size: #{$sz * 2}rem;
+  @each $k, $sz in $display-sizes {
+    .#{$d}fs-#{$k} {
+      font-size: $sz;
     }
   }
 
+  .#{$d}fs-case {
+    font-size: 0.625rem;
+  }
+  .#{$d}fs-note {
+    font-size: 0.75rem;
+  }
+  .#{$d}fs-desc {
+    font-size: 0.875rem;
+  }
+  .#{$d}fs-body {
+    font-size: 1rem;
+  }
+  .#{$d}fs-lead {
+    font-size: 1.125rem;
+  }
+
+  .#{$d}fs-root {
+    font-size: 1rem;
+  }
+  .#{$d}fs\+\+ {
+    font-size: 1.0625em;
+  }
+  .#{$d}fs-- {
+    font-size: 0.9375em;
+  }
+
   .#{$d}lh-no {
     line-height: 0;
   }

package/core/theme.scss

@@ -126,7 +126,10 @@ $exclude-keys: (w, b, fore, back, desc, note, case, deep, code, link);
     $s: list.nth($i, 2);
 
     // 动态选择器：首个主题多一个 :root
-    $scope: if($n == $f, ':root', '[theme~="#{$n}"]');
+    $scope: '[theme~="#{$n}"]';
+    @if $n == $f {
+      $scope: ':root';
+    }
     #{$scope} {
       @each $c in $s {
         $k: list.nth($c, 1);
@@ -186,9 +189,9 @@ $exclude-keys: (w, b, fore, back, desc, note, case, deep, code, link);
   .bg-auto\:active:active {
     background-color: currentColor !important;
   }
-  .bk-auto,
-  .bk-auto\:hover:hover,
-  .bk-auto\:active:active {
+  .b-auto,
+  .b-auto\:hover:hover,
+  .b-auto\:active:active {
     border-color: currentColor !important;
   }
 
@@ -209,9 +212,9 @@ $exclude-keys: (w, b, fore, back, desc, note, case, deep, code, link);
       background-color: var(--co-#{$n}) !important;
     }
 
-    .bk-#{$n},
-    .bk-#{$n}\:hover:hover,
-    .bk-#{$n}\:active:active {
+    .b-#{$n},
+    .b-#{$n}\:hover:hover,
+    .b-#{$n}\:active:active {
       border-color: var(--co-#{$n}) !important;
     }
 
@@ -229,9 +232,9 @@ $exclude-keys: (w, b, fore, back, desc, note, case, deep, code, link);
         background-color: var(--co-#{$n}-o-#{$i}) !important;
       }
 
-      .bk-#{$n}-o-#{$i},
-      .bk-#{$n}-o-#{$i}\:hover:hover,
-      .bk-#{$n}-o-#{$i}\:active:active {
+      .b-#{$n}-o-#{$i},
+      .b-#{$n}-o-#{$i}\:hover:hover,
+      .b-#{$n}-o-#{$i}\:active:active {
         border-color: var(--co-#{$n}-o-#{$i}) !important;
       }
 
@@ -262,15 +265,15 @@ $exclude-keys: (w, b, fore, back, desc, note, case, deep, code, link);
           background-color: var(--co-#{$n}-b-#{$i}) !important;
         }
 
-        .bk-#{$n}-w-#{$i},
-        .bk-#{$n}-w-#{$i}\:hover:hover,
-        .bk-#{$n}-w-#{$i}\:active:active {
+        .b-#{$n}-w-#{$i},
+        .b-#{$n}-w-#{$i}\:hover:hover,
+        .b-#{$n}-w-#{$i}\:active:active {
           border-color: var(--co-#{$n}-w-#{$i}) !important;
         }
 
-        .bk-#{$n}-b-#{$i},
-        .bk-#{$n}-b-#{$i}\:hover:hover,
-        .bk-#{$n}-b-#{$i}\:active:active {
+        .b-#{$n}-b-#{$i},
+        .b-#{$n}-b-#{$i}\:hover:hover,
+        .b-#{$n}-b-#{$i}\:active:active {
           border-color: var(--co-#{$n}-b-#{$i}) !important;
         }
       }