@neatui/css 5.1.5 → 5.1.6

package/GUIDE.md

@@ -210,7 +210,7 @@ xl  →  5.5em
 | `m-` | margin | `m-ss` | 外边距 0.25em |
 | `w-` | width | `w-ll` | 宽度 5em |
 | `h-` | height | `h-sm` | 高度 1.5em |
-| `r-` | border-radius | `r-ms` | 圆角 0.5em |
+| `r-` | border-radius | `r-ms` | 圆角 0.5em；`*s/*m/*l` 继续放大 |
 | `fs-` | font-size | `fs-lm` | 基础字号 1.375rem |
 
 ### 字号分段扩展
@@ -1227,7 +1227,12 @@ r-xs       // 0.1em
 r-ss ~ r-xl // 0.2em ~ 1.2em
 r-full     // 10000em（胶囊或圆形轮廓）
 
-// 方向圆角
+// 分段扩展，写法同 w/h 的 *s/*m/*l
+r-xs*s ~ r-xl*s // 1.5em ~ 4.5em
+r-xs*m ~ r-xl*m // 6em ~ 16em
+r-xs*l ~ r-xl*l // 20em ~ 60em
+
+// 方向圆角，size 同样支持 *s/*m/*l
 r-t-{size}  // 上方两角
 r-b-{size}  // 下方两角
 r-lt-{size} // 左上
@@ -1236,8 +1241,8 @@ r-lb-{size} // 左下
 r-rb-{size} // 右下
 ```
 
-`size` 为 `no / xs / ss / sm / sl / ms / mm / ml / ls / lm / ll / xl`，
-以上圆角类同时支持 `pad:` 与 `mob:` 响应式前缀。
+`size` 为 `no / xs / ss / sm / sl / ms / mm / ml / ls / lm / ll / xl`。
+`no` 与 `r-full` 没有 `*s/*m/*l`。以上圆角类同时支持 `pad:` 与 `mob:` 响应式前缀。
 
 ### 字体类 (Typography)
 

package/core/trim.scss

@@ -86,6 +86,48 @@ $_radius-scale: (
   xl: 1.2em,
 );
 
+$_radius-s: (
+  xs: 1.5em,
+  ss: 1.8em,
+  sm: 2.1em,
+  sl: 2.4em,
+  ms: 2.7em,
+  mm: 3em,
+  ml: 3.3em,
+  ls: 3.6em,
+  lm: 3.9em,
+  ll: 4.2em,
+  xl: 4.5em,
+);
+
+$_radius-m: (
+  xs: 6em,
+  ss: 7em,
+  sm: 8em,
+  sl: 9em,
+  ms: 10em,
+  mm: 11em,
+  ml: 12em,
+  ls: 13em,
+  lm: 14em,
+  ll: 15em,
+  xl: 16em,
+);
+
+$_radius-l: (
+  xs: 20em,
+  ss: 24em,
+  sm: 28em,
+  sl: 32em,
+  ms: 36em,
+  mm: 40em,
+  ml: 44em,
+  ls: 48em,
+  lm: 52em,
+  ll: 56em,
+  xl: 60em,
+);
+
 @mixin _spacing-properties($properties, $value, $important: false) {
   @each $property in $properties {
     @if $important {
@@ -122,6 +164,32 @@ $_radius-scale: (
   }
 }
 
+@mixin _radius-token($media, $token, $value) {
+  .#{$media}r-#{$token} {
+    border-radius: $value;
+  }
+  .#{$media}r-t-#{$token} {
+    border-top-left-radius: $value;
+    border-top-right-radius: $value;
+  }
+  .#{$media}r-b-#{$token} {
+    border-bottom-right-radius: $value;
+    border-bottom-left-radius: $value;
+  }
+  .#{$media}r-lt-#{$token} {
+    border-top-left-radius: $value;
+  }
+  .#{$media}r-rt-#{$token} {
+    border-top-right-radius: $value;
+  }
+  .#{$media}r-lb-#{$token} {
+    border-bottom-left-radius: $value;
+  }
+  .#{$media}r-rb-#{$token} {
+    border-bottom-right-radius: $value;
+  }
+}
+
 @mixin dimension-scale($media, $prefix, $property) {
   .#{$media}#{$prefix}-no {
     #{$property}: 0;
@@ -172,38 +240,21 @@ $_radius-scale: (
     @include _row-spacing($media, "nl", $sz, $value, (margin-left,));
   }
 
-  // 圆角：总项 < 双角 < 单角
+  // 圆角：总项 < 双角 < 单角；*s/*m/*l 为分段扩展
   .#{$media}r-full {
     border-radius: 10000em;
   }
   @each $sz, $value in $_radius-scale {
-    .#{$media}r-#{$sz} {
-      border-radius: $value;
-    }
+    @include _radius-token($media, $sz, $value);
   }
-  @each $sz, $value in $_radius-scale {
-    .#{$media}r-t-#{$sz} {
-      border-top-left-radius: $value;
-      border-top-right-radius: $value;
-    }
-    .#{$media}r-b-#{$sz} {
-      border-bottom-right-radius: $value;
-      border-bottom-left-radius: $value;
-    }
+  @each $sz, $value in $_radius-s {
+    @include _radius-token($media, "#{$sz}\\*s", $value);
   }
-  @each $sz, $value in $_radius-scale {
-    .#{$media}r-lt-#{$sz} {
-      border-top-left-radius: $value;
-    }
-    .#{$media}r-rt-#{$sz} {
-      border-top-right-radius: $value;
-    }
-    .#{$media}r-lb-#{$sz} {
-      border-bottom-left-radius: $value;
-    }
-    .#{$media}r-rb-#{$sz} {
-      border-bottom-right-radius: $value;
-    }
+  @each $sz, $value in $_radius-m {
+    @include _radius-token($media, "#{$sz}\\*m", $value);
+  }
+  @each $sz, $value in $_radius-l {
+    @include _radius-token($media, "#{$sz}\\*l", $value);
   }
 
   // 偏移量