@neatui/css 3.16.1 → 4.0.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;
         }
       }

package/core/trim.scss

@@ -1,5 +1,87 @@
 @use "./media.scss" as *;
 
+$dimension-base: (
+  xs: 0.5,
+  ss: 1,
+  sm: 1.5,
+  sl: 2,
+  ms: 2.5,
+  mm: 3,
+  ml: 3.5,
+  ls: 4,
+  lm: 4.5,
+  ll: 5,
+  xl: 5.5,
+);
+
+$dimension-s: (
+  xs: 6,
+  ss: 7,
+  sm: 8,
+  sl: 9,
+  ms: 10,
+  mm: 11,
+  ml: 12,
+  ls: 13,
+  lm: 14,
+  ll: 15,
+  xl: 16,
+);
+
+$dimension-m: (
+  xs: 18,
+  ss: 20,
+  sm: 22,
+  sl: 24,
+  ms: 26,
+  mm: 28,
+  ml: 30,
+  ls: 32,
+  lm: 34,
+  ll: 36,
+  xl: 38,
+);
+
+$dimension-l: (
+  xs: 42,
+  ss: 46,
+  sm: 50,
+  sl: 54,
+  ms: 58,
+  mm: 62,
+  ml: 66,
+  ls: 70,
+  lm: 74,
+  ll: 78,
+  xl: 82,
+);
+
+@mixin dimension-scale($media, $prefix, $property) {
+  .#{$media}#{$prefix}-no {
+    #{$property}: 0;
+  }
+  @each $sz, $value in $dimension-base {
+    .#{$media}#{$prefix}-#{$sz} {
+      #{$property}: #{$value}em;
+    }
+  }
+  @each $sz, $value in $dimension-s {
+    .#{$media}#{$prefix}-#{$sz}\*s {
+      #{$property}: #{$value}em;
+    }
+  }
+  @each $sz, $value in $dimension-m {
+    .#{$media}#{$prefix}-#{$sz}\*m {
+      #{$property}: #{$value}em;
+    }
+  }
+  @each $sz, $value in $dimension-l {
+    .#{$media}#{$prefix}-#{$sz}\*l {
+      #{$property}: #{$value}em;
+    }
+  }
+}
+
 @mixin trim($media: "") {
   $size: (no, xs, ss, sm, sl, ms, mm, ml, ls, lm, ll, xl);
 
@@ -369,106 +451,14 @@
   }
 
   // 宽度
-  $w_base: 0;
-  @each $sz in $size {
-    .#{$media}w-#{$sz} {
-      width: #{$w_base}em;
-      &\+ {
-        width: #{$w_base + 1}em;
-      }
-      &\*s {
-        width: #{$w_base * 2}em;
-      }
-      &\*m {
-        width: #{$w_base * 3}em;
-      }
-      &\*l {
-        width: #{$w_base * 4}em;
-      }
-    }
-    .#{$media}min-w-#{$sz} {
-      min-width: #{$w_base}em;
-      &\+ {
-        min-width: #{$w_base + 1}em;
-      }
-      &\*s {
-        min-width: #{$w_base * 2}em;
-      }
-      &\*m {
-        min-width: #{$w_base * 3}em;
-      }
-      &\*l {
-        min-width: #{$w_base * 4}em;
-      }
-    }
-    .#{$media}max-w-#{$sz} {
-      max-width: #{$w_base}em;
-      &\+ {
-        max-width: #{$w_base + 1}em;
-      }
-      &\*s {
-        max-width: #{$w_base * 2}em;
-      }
-      &\*m {
-        max-width: #{$w_base * 3}em;
-      }
-      &\*l {
-        max-width: #{$w_base * 4}em;
-      }
-    }
-    $w_base: $w_base + 2;
-  }
+  @include dimension-scale($media, "w", width);
+  @include dimension-scale($media, "min-w", min-width);
+  @include dimension-scale($media, "max-w", max-width);
 
   // 高度
-  $h_base: 0;
-  @each $sz in $size {
-    .#{$media}h-#{$sz} {
-      height: #{$h_base}em;
-      &\+ {
-        height: #{$h_base + 1}em;
-      }
-      &\*s {
-        height: #{$h_base * 2}em;
-      }
-      &\*m {
-        height: #{$h_base * 3}em;
-      }
-      &\*l {
-        height: #{$h_base * 4}em;
-      }
-    }
-    .#{$media}min-h-#{$sz} {
-      min-height: #{$h_base}em;
-      &\+ {
-        min-height: #{$h_base + 1}em;
-      }
-      &\*s {
-        min-height: #{$h_base * 2}em;
-      }
-      &\*m {
-        min-height: #{$h_base * 3}em;
-      }
-      &\*l {
-        min-height: #{$h_base * 4}em;
-      }
-    }
-    .#{$media}max-h-#{$sz} {
-      max-height: #{$h_base}em;
-      &\+ {
-        max-height: #{$h_base + 1}em;
-      }
-      &\*s {
-        max-height: #{$h_base * 2}em;
-      }
-      &\*m {
-        max-height: #{$h_base * 3}em;
-      }
-      &\*l {
-        max-height: #{$h_base * 4}em;
-      }
-    }
-    $h_base: $h_base + 2;
-  }
+  @include dimension-scale($media, "h", height);
+  @include dimension-scale($media, "min-h", min-height);
+  @include dimension-scale($media, "max-h", max-height);
 
   // 缩小
   .#{$media}s-no {

package/index.scss

@@ -0,0 +1 @@
+@forward './neatui.scss';

package/package.json

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