@neatui/css 2.0.9 → 3.0.0-beta.0

package/core/shadow.scss

@@ -14,11 +14,15 @@ div {
 }
 
 .bs-x {
-  box-shadow: inset 1px 0 0 0 currentColor, inset -1px 0 0 0 currentColor;
+  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;
+  box-shadow:
+    inset 0 1px 0 0 currentColor,
+    inset 0 -1px 0 0 currentColor;
 }
 
 .bs-l {
@@ -40,42 +44,46 @@ div {
 /* 主题色 */
 .bs-xs-main {
   @include theme {
-    box-shadow: inset 0 0 0 1px co(main);
+    box-shadow: inset 0 0 0 1px var(--co-main);
   }
 }
 
 .bs-x-xs-main {
   @include theme {
-    box-shadow: inset 1px 0 0 0 co(main), inset -1px 0 0 0 co(main);
+    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 co(main), inset 0 -1px 0 0 co(main);
+    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 co(main);
+    box-shadow: inset 1px 0 0 0 var(--co-main);
   }
 }
 
 .bs-r-xs-main {
   @include theme {
-    box-shadow: inset -1px 0 0 0 co(main);
+    box-shadow: inset -1px 0 0 0 var(--co-main);
   }
 }
 
 .bs-t-xs-main {
   @include theme {
-    box-shadow: inset 0 1px 0 0 co(main);
+    box-shadow: inset 0 1px 0 0 var(--co-main);
   }
 }
 
 .bs-b-xs-main {
   @include theme {
-    box-shadow: inset 0 -1px 0 0 co(main);
+    box-shadow: inset 0 -1px 0 0 var(--co-main);
   }
 }

package/core/size.scss

@@ -9,6 +9,8 @@
  * 备注：s->Small 小，m->Middle 中，l->Large 大；x->Extra 特大
  */
 
+ @use 'sass:list';
+
 // 全局字号
 @mixin baseSize($sz: 13) {
   $size: 'xs', 's', 'm', 'l', 'xl';
@@ -16,7 +18,7 @@
   @each $i in $size {
     [size='#{$i}'],
     [ui-size='#{$i}'] {
-      $s: index($size, $i) + $sz;
+      $s: list.index($size, $i) + $sz;
       font-size: #{$s}px;
     }
   }

package/core/theme.scss

@@ -1,6 +1,12 @@
+@use 'sass:list';
+@use 'sass:meta';
+@use 'sass:map';
+@use 'sass:color';
+@use 'sass:string';
+
 // 兜底
 $theme: if(
-  global-variable-exists(theme),
+  meta.global-variable-exists(theme),
   $theme,
   (
     _sys: (
@@ -16,13 +22,13 @@ $theme: if(
       info: #0889e4
     )
   )
-);
+) !default;
 
 // 检测
-@if (global-variable-exists(theme)) {
-  $fa: map-keys($theme);
-  $fk: nth($fa, 1);
-  @if (length($fa) == 1 and $fk == _sys) {
+@if (meta.global-variable-exists(theme)) {
+  $fa: map.keys($theme);
+  $fk: list.nth($fa, 1);
+  @if (list.length($fa) == 1 and $fk == _sys) {
     @warn '检测到您未定义主题色卡，请遵循 neatui 设计规范建立主题色卡；https://neatui.fekit.cn/#/docs/config';
     @debug '尝试修复错误...';
     @debug '创建系统默认色卡[theme=_sys]';
@@ -31,12 +37,12 @@ $theme: if(
   }
 
   @each $var in $theme {
-    $n: nth($var, 1);
-    $s: nth($var, 2);
-    @if ($s and type-of($s) == 'map') {
+    $n: list.nth($var, 1);
+    $s: list.nth($var, 2);
+    @if ($s and meta.type-of($s) == 'map') {
       $baseColor: 'main', 'text', 'fore', 'back', 'link', 'code', 'well', 'warn', 'risk';
       @each $baseColorItem in $baseColor {
-        @if (map-has-key($s, $baseColorItem)) {
+        @if (map.has-key($s, $baseColorItem)) {
         } @else {
           @warn '[theme=#{$n}]主题缺少一个关键的基础颜色#{$baseColorItem}';
         }
@@ -49,134 +55,128 @@ $theme: if(
 
 // 扩展颜色
 @each $i in $theme {
-  $n: nth($i, 1);
-  $s: nth($i, 2);
-  @if ($s and type-of($s) == 'map') {
+  $n: list.nth($i, 1);
+  $s: list.nth($i, 2);
+  @if ($s and meta.type-of($s) == 'map') {
     $m: (
       none: transparent,
       w: #ffffff,
       b: #000000,
-      read: mix(map-get($s, 'text'), map-get($s, 'fore'), 85%),
-      desc: mix(map-get($s, 'text'), map-get($s, 'fore'), 55%),
-      note: mix(map-get($s, 'text'), map-get($s, 'fore'), 35%),
-      case: mix(map-get($s, 'text'), map-get($s, 'fore'), 20%),
-      line: mix(map-get($s, 'text'), map-get($s, 'fore'), 10%),
-      weak: mix(map-get($s, 'text'), map-get($s, 'fore'), 4%),
-      deep:
-        rgb(
-          red(map-get($s, 'back')) - (red(map-get($s, 'back')) * 0.05 + 5),
-          green(map-get($s, 'back')) - (green(map-get($s, 'back')) * 0.05 + 5),
-          blue(map-get($s, 'back')) - (blue(map-get($s, 'back')) * 0.05 + 5)
-        ),
+      read: color.mix(map.get($s, 'text'), map.get($s, 'fore'), 85%),
+      desc: color.mix(map.get($s, 'text'), map.get($s, 'fore'), 55%),
+      note: color.mix(map.get($s, 'text'), map.get($s, 'fore'), 35%),
+      case: color.mix(map.get($s, 'text'), map.get($s, 'fore'), 20%),
+      line: color.mix(map.get($s, 'text'), map.get($s, 'fore'), 10%),
+      weak: color.mix(map.get($s, 'text'), map.get($s, 'fore'), 4%)
     );
     // 将扩展颜色加入放题色卡中
-    $theme: map-merge(
+    $theme: map.merge(
       $theme,
       (
-        $n: map-merge($m, $s)
+        $n: map.merge($m, $s)
       )
     );
   }
 }
 
 // 主题
-@mixin theme($n: null) {
-  $hasTheme: map-get($theme, $n);
-  @if ($n != null) {
-    @if ($hasTheme != null) {
-      $t: $hasTheme;
-      $first: nth(nth($theme, 1), 1);
-      $n: $n;
-      $s: #{nth(&, 1)};
-      @if ($s == 'html' or $s == '' or $s == null) {
-        @if ($n == $first) {
-          @at-root html {
-            @content;
-          }
-        } @else {
-          @at-root [theme='#{$n}'] {
-            @content;
-          }
-        }
-      } @else {
-        @if ($n == $first) {
-          @content;
-        } @else {
-          [theme='#{$n}'] & {
-            @content;
-          }
-        }
-      }
-    } @else {
-      @warn '没有指定主题#{$hasTheme}';
-    }
-  } @else {
-    $first: nth(nth($theme, 1), 1);
-    @each $t in $theme {
-      $n: nth($t, 1);
-      $s: #{nth(&, 1)};
-
-      @if ($s == 'html' or $s == ':root' or $s == '' or $s == null) {
-        @if ($n == $first) {
-          @at-root html {
-            @content;
-          }
-        } @else {
-          @at-root [theme='#{$n}'] {
-            @content;
-          }
-        }
-      } @else {
-        @if ($n == $first) {
-          @content;
-        } @else {
-          [theme='#{$n}'] & {
-            @content;
-          }
-        }
-      }
-    }
-  }
-}
+// @mixin theme($n: null) {
+//   $hasTheme: map.get($theme, $n);
+//   @if ($n != null) {
+//     @if ($hasTheme != null) {
+//       $t: $hasTheme;
+//       $first: list.nth(list.nth($theme, 1), 1);
+//       $n: $n;
+//       $s: #{list.nth(&, 1)};
+//       @if ($s == 'html' or $s == '' or $s == null) {
+//         @if ($n == $first) {
+//           @at-root html {
+//             @content;
+//           }
+//         } @else {
+//           @at-root [theme='#{$n}'] {
+//             @content;
+//           }
+//         }
+//       } @else {
+//         @if ($n == $first) {
+//           @content;
+//         } @else {
+//           [theme='#{$n}'] & {
+//             @content;
+//           }
+//         }
+//       }
+//     } @else {
+//       @warn '没有指定主题#{$hasTheme}';
+//     }
+//   } @else {
+//     $first: list.nth(list.nth($theme, 1), 1);
+//     @each $t in $theme {
+//       $n: list.nth($t, 1);
+//       $s: #{list.nth(&, 1)};
+
+//       @if ($s == 'html' or $s == ':root' or $s == '' or $s == null) {
+//         @if ($n == $first) {
+//           @at-root html {
+//             @content;
+//           }
+//         } @else {
+//           @at-root [theme='#{$n}'] {
+//             @content;
+//           }
+//         }
+//       } @else {
+//         @if ($n == $first) {
+//           @content;
+//         } @else {
+//           [theme='#{$n}'] & {
+//             @content;
+//           }
+//         }
+//       }
+//     }
+//   }
+// }
 
 // 颜色
-@function co($a: '') {
-  @if (& != null) {
-    $r: nth(nth(&, 1), 1);
-    $n: str-slice($r, 8, -2);
-    $s: map-get($theme, $n);
-    @if ($s == null) {
-      $n: nth(nth($theme, 1), 1);
-      $s: nth(nth($theme, 1), 2);
-    }
-    @if ($s != null) {
-      @if (map-has-key($s, $a)) {
-        $a: map-get($s, $a);
-      } @else {
-        @debug '当前主题[theme=#{$n}]没有定义颜色名 #{$a}';
-      }
-    }
-    @return $a;
-  } @else {
-    @return transparent;
-  }
-}
+// @function co($a: '') {
+//   @if (& != null) {
+//     $r: list.nth(list.nth(&, 1), 1);
+//     $n: string.slice($r, 8, -2);
+//     $s: map.get($theme, $n);
+//     @if ($s == null) {
+//       $n: list.nth(list.nth($theme, 1), 1);
+//       $s: list.nth(list.nth($theme, 1), 2);
+//     }
+//     @if ($s != null) {
+//       @if (map.has-key($s, $a)) {
+//         $a: map.get($s, $a);
+//       } @else {
+//         @debug '当前主题[theme=#{$n}]没有定义颜色名 #{$a}';
+//       }
+//     }
+//     @return $a;
+//   } @else {
+//     @return transparent;
+//   }
+// }
 
 // 变量
 @mixin vars() {
   $levels: xs, ss, sm, sl, ms, mm, ml, ls, lm, ll, xl;
   $colors: main, text, well, warn, risk;
 
-  $f: nth(nth($theme, 1), 1);
+  $f: list.nth(list.nth($theme, 1), 1);
   @each $i in $theme {
-    $n: nth($i, 1);
-    $s: nth($i, 2);
+    $n: list.nth($i, 1);
+    $s: list.nth($i, 2);
     @if ($n == $f) {
       :root {
         @each $c in $s {
-          $k: nth($c, 1);
-          $v: nth($c, 2);
-          --#{$k}: #{red($v), green($v), blue($v)};
+          $k: list.nth($c, 1);
+          $v: list.nth($c, 2);
+          // --#{$k}: #{red($v), green($v), blue($v)};
           --co-#{$k}: #{$v};
 
           $ls: 0.05;
@@ -186,11 +186,11 @@ $theme: if(
               --co-#{$k}-#{$l}: #{rgba($v, $ls)};
 
               @if ($k != 'w' and $k != 'b') {
-                --co-#{$k}-fore-#{$l}: #{mix($v, map-get($s, 'fore'), $ls * 100%)};
+                --co-#{$k}-fore-#{$l}: #{color.mix($v, map.get($s, 'fore'), $ls * 100%)};
               }
 
               @if ($k == 'main' or $k == 'well' or $k == 'warn' or $k == 'risk') {
-                --co-#{$k}-text-#{$l}: #{mix($v, map-get($s, 'text'), $ls * 100%)};
+                --co-#{$k}-text-#{$l}: #{color.mix($v, map.get($s, 'text'), $ls * 100%)};
               }
             }
             @if ($ls <= 0.1 or $ls >= 0.8) {
@@ -204,9 +204,9 @@ $theme: if(
     } @else {
       [theme~='#{$n}'] {
         @each $c in $s {
-          $k: nth($c, 1);
-          $v: nth($c, 2);
-          --#{$k}: #{red($v), green($v), blue($v)};
+          $k: list.nth($c, 1);
+          $v: list.nth($c, 2);
+          // --#{$k}: #{red($v), green($v), blue($v)};
           --co-#{$k}: #{$v};
 
           $ls: 0.05;
@@ -216,11 +216,11 @@ $theme: if(
               --co-#{$k}-#{$l}: #{rgba($v, $ls)};
 
               @if ($k != 'w' and $k != 'b') {
-                --co-#{$k}-fore-#{$l}: #{mix($v, map-get($s, 'fore'), $ls * 100%)};
+                --co-#{$k}-fore-#{$l}: #{color.mix($v, map.get($s, 'fore'), $ls * 100%)};
               }
 
               @if ($k == 'main' or $k == 'well' or $k == 'warn' or $k == 'risk') {
-                --co-#{$k}-text-#{$l}: #{mix($v, map-get($s, 'text'), $ls * 100%)};
+                --co-#{$k}-text-#{$l}: #{color.mix($v, map.get($s, 'text'), $ls * 100%)};
               }
             }
             @if ($ls <= 0.1 or $ls >= 0.8) {

package/core/trim.scss

@@ -397,65 +397,65 @@
 
   // 缩小
   .#{$media}s-no {
-    transform: scale3d(0, 0, 1);
+    transform: scale(0);
   }
   .#{$media}s-ss {
-    transform: scale3d(0.1, 0.1, 1);
+    transform: scale(0.1);
   }
   .#{$media}s-sm {
-    transform: scale3d(0.2, 0.2, 1);
+    transform: scale(0.2);
   }
   .#{$media}s-sl {
-    transform: scale3d(0.3, 0.3, 1);
+    transform: scale(0.3);
   }
   .#{$media}s-ms {
-    transform: scale3d(0.4, 0.4, 1);
+    transform: scale(0.4);
   }
   .#{$media}s-mm {
-    transform: scale3d(0.5, 0.5, 1);
+    transform: scale(0.5);
   }
   .#{$media}s-ml {
-    transform: scale3d(0.6, 0.6, 1);
+    transform: scale(0.6);
   }
   .#{$media}s-ls {
-    transform: scale3d(0.7, 0.7, 1);
+    transform: scale(0.7);
   }
   .#{$media}s-lm {
-    transform: scale3d(0.8, 0.8, 1);
+    transform: scale(0.8);
   }
   .#{$media}s-ll {
-    transform: scale3d(0.9, 0.9, 1);
+    transform: scale(0.9);
   }
   .#{$media}s-xl {
-    transform: scale3d(0.95, 0.95, 1);
+    transform: scale(0.95);
   }
 
   .#{$media}s-ss\+mm {
-    transform: scale3d(0.15, 0.15, 1);
+    transform: scale(0.15);
   }
   .#{$media}s-sm\+mm {
-    transform: scale3d(0.25, 0.25, 1);
+    transform: scale(0.25);
   }
   .#{$media}s-sl\+mm {
-    transform: scale3d(0.35, 0.35, 1);
+    transform: scale(0.35);
   }
   .#{$media}s-ms\+mm {
-    transform: scale3d(0.45, 0.45, 1);
+    transform: scale(0.45);
   }
   .#{$media}s-mm\+mm {
-    transform: scale3d(0.55, 0.55, 1);
+    transform: scale(0.55);
   }
   .#{$media}s-ml\+mm {
-    transform: scale3d(0.65, 0.65, 1);
+    transform: scale(0.65);
   }
   .#{$media}s-ls\+mm {
-    transform: scale3d(0.75, 0.75, 1);
+    transform: scale(0.75);
   }
   .#{$media}s-lm\+mm {
-    transform: scale3d(0.85, 0.85, 1);
+    transform: scale(0.85);
   }
   .#{$media}s-ll\+mm {
-    transform: scale3d(0.95, 0.95, 1);
+    transform: scale(0.95);
   }
 
   // 旋转

package/core/ux.scss

@@ -35,7 +35,7 @@
     cursor: pointer;
   }
   &:hover {
-    box-shadow: 0 0.1em 0.5em var(--co-deep);
+    box-shadow: 0 0.1em 0.5em var(--co-text-ss);
   }
 }
 
@@ -267,7 +267,7 @@
     top: 130%;
 
     background: var(--co-fore);
-    box-shadow: 0 1px 0.3em 1px var(--co-deep);
+    box-shadow: 0 1px 0.3em 1px var(--co-text-ss);
 
     padding: 1.5rem;
     right: 0.15rem;

package/core/var.scss

@@ -0,0 +1,2 @@
+$sz: 'xs', 's', 'm', 'l', 'xl';
+$co: 'main', 'vice', 'text', 'fore', 'back', 'link', 'code', 'well', 'warn', 'risk';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/css",
-  "version": "2.0.9",
+  "version": "3.0.0-beta.0",
   "description": "neatui",
   "main": "./neatui.scss",
   "license": "MIT",