@neatui/css 2.0.10 → 3.0.0-beta.1

package/core/media.scss

@@ -1,6 +1,20 @@
+@use 'sass:list';
+@use 'sass:string';
+$level: (
+  mob-s: 320px,
+  mob-m: 480px,
+  mob-l: 640px,
+  pad-s: 800px,
+  pad-m: 960px,
+  pad-l: 1120px,
+  dpc-s: 1280px,
+  dpc-m: 1440px,
+  dpc-l: 1600px
+);
+
 // 桌面
 @mixin dpc() {
-  $this: #{nth(&, 1)};
+  $this: #{list.nth(&, 1)};
   @media screen and (min-width: 1120px) {
     @if ($this == '') {
       @content;
@@ -14,7 +28,7 @@
 
 // 平板
 @mixin pad() {
-  $this: #{nth(&, 1)};
+  $this: #{list.nth(&, 1)};
   @media screen and (max-width: 1119px) {
     @if ($this == '') {
       @content;
@@ -28,7 +42,7 @@
 
 // 移动
 @mixin mob() {
-  $this: #{nth(&, 1)};
+  $this: #{list.nth(&, 1)};
   @media screen and (max-width: 799px) {
     @if ($this == '') {
       @content;
@@ -40,24 +54,12 @@
   }
 }
 
-$level: (
-  mob-s: 320px,
-  mob-m: 480px,
-  mob-l: 640px,
-  pad-s: 800px,
-  pad-m: 960px,
-  pad-l: 1120px,
-  dpc-s: 1280px,
-  dpc-m: 1440px,
-  dpc-l: 1600px
-);
-
 // 设备
 @mixin med($p) {
-  $this: #{nth(&, 1)};
+  $this: #{list.nth(&, 1)};
 
-  $r: str-slice($p, 1, 1);
-  $_n: str-slice($p, 2, -1);
+  $r: string.slice($p, 1, 1);
+  $_n: string.slice($p, 2, -1);
 
   // 大于某节点时
   @if ($r == '>') {
@@ -86,8 +88,8 @@ $level: (
       }
     }
     @each $sz in $level {
-      $n: #{nth($sz, 1)};
-      $v: #{nth($sz, 2)};
+      $n: #{list.nth($sz, 1)};
+      $v: #{list.nth($sz, 2)};
       @if ($_n == $n) {
         @media screen and (min-width: $v) {
           @if ($this == '') {
@@ -129,8 +131,8 @@ $level: (
     }
 
     @each $sz in $level {
-      $n: #{nth($sz, 1)};
-      $v: #{nth($sz, 2) - 1};
+      $n: #{list.nth($sz, 1)};
+      $v: #{list.nth($sz, 2) - 1};
       @if ($_n == $n) {
         @media screen and (max-width: $v) {
           @if ($this == '') {
@@ -180,9 +182,9 @@ $level: (
       }
     }
     @each $sz in $level {
-      $n: #{nth($sz, 1)};
-      $v: #{nth($sz, 2)};
-      $m: #{nth($sz, 2) + 159};
+      $n: #{list.nth($sz, 1)};
+      $v: #{list.nth($sz, 2)};
+      $m: #{list.nth($sz, 2) + 159};
       @if ($_n == $n) {
         @if ($_n == 'mob-s') {
           @media screen and (max-width: $m) {
@@ -204,7 +206,7 @@ $level: (
 
 // 大于某节点时
 @each $sz in $level {
-  $n: #{nth($sz, 1)};
+  $n: #{list.nth($sz, 1)};
   [ui-hide~='>#{$n}'] {
     @include med('>#{$n}') {
       display: none !important;
@@ -224,7 +226,7 @@ $level: (
 
 // 小于某节点时
 @each $sz in $level {
-  $n: #{nth($sz, 1)};
+  $n: #{list.nth($sz, 1)};
   [ui-hide~='<#{$n}'] {
     @include med('<#{$n}') {
       display: none !important;
@@ -244,7 +246,7 @@ $level: (
 
 // 等于某节点时
 @each $sz in $level {
-  $n: #{nth($sz, 1)};
+  $n: #{list.nth($sz, 1)};
   [ui-hide~='=#{$n}'] {
     @include med('=#{$n}') {
       display: none !important;

package/core/neatui@core.scss

@@ -2,7 +2,9 @@
 @use 'sass:math';
 // 主题
 @import './theme.scss';
-// 媒体查询
+// 色号
+@import './color.scss';
+// 响应
 @import './media.scss';
 // 重置
 @import './reset.scss';
@@ -10,18 +12,16 @@
 @import './base.scss';
 // 字号
 @import './size.scss';
-// 色号
-@import './color.scss';
 // 栅格
 @import './cols.scss';
 // 微调
 @import './trim.scss';
 // 边框
 @import './border.scss';
-// 弹性布局
+// 布局
 @import './flex.scss';
 // 缩小
-// @import './scale.scss';
+@import './scale.scss';
 // 滚动条
 @import './scroll.scss';
 // 封面

package/core/scale.scss

@@ -1,24 +1,29 @@
-// @mixin scale($d: '') {
-//   $rank: 'xxs', 'xs', 'ss', 'sm', 'sl', 'ms', 'mm', 'ml', 'ls', 'lm', 'll', 'xl', 'xxl';
+@mixin scale($d: '') {
+  $rank: 'xxs', 'xs', 'ss', 'sm', 'sl', 'ms', 'mm', 'ml', 'ls', 'lm', 'll', 'xl', 'xxl';
 
-//   $sz: 0;
-//   @each $k in $rank {
-//     [ui-scale~='#{$k}'] {
-//       transform: scale($sz);
+  $sz: 0;
+  @each $k in $rank {
+    .s-#{$k},
+    [ui-scale~='#{$k}'] {
+      transform: scale($sz);
 
-//       &[ui-scale~='ct'] {
-//         transform-origin: 50% 0%;
-//       }
-//       &[ui-scale~='cb'] {
-//         transform-origin: 50% 100%;
-//       }
-//       &[ui-scale~='lm'] {
-//         transform-origin: 0% 50%;
-//       }
-//       &[ui-scale~='rm'] {
-//         transform-origin: 100% 50%;
-//       }
-//     }
-//     $sz: $sz + 0.1;
-//   }
-// }
+      &.s-ct,
+      &[ui-scale~='ct'] {
+        transform-origin: 50% 0%;
+      }
+      &.s-cb,
+      &[ui-scale~='cb'] {
+        transform-origin: 50% 100%;
+      }
+      &.s-cl,
+      &[ui-scale~='lm'] {
+        transform-origin: 0% 50%;
+      }
+      &.s-cr,
+      &[ui-scale~='rm'] {
+        transform-origin: 100% 50%;
+      }
+    }
+    $sz: $sz + 0.1;
+  }
+}

package/core/scroll.scss

@@ -4,7 +4,7 @@
     scrollbar-width: thin;
     scrollbar-gutter: auto;
     // @include theme {
-    //   scrollbar-color: rgba(co(text), 0.15) transparent;
+    //   scrollbar-color: rgba(var(--co-text), 0.15) transparent;
     // }
     scrollbar-color: var(--co-text-ss) transparent;
 
@@ -19,7 +19,7 @@
       border: 1px solid transparent;
       border-radius: 10px;
       // @include theme {
-      //   background-color: rgba(co(text), 0.15) !important;
+      //   background-color: rgba(var(--co-text), 0.15) !important;
       // }
       background-color: var(--co-text-ss) !important;
       background-clip: content-box;
@@ -102,7 +102,7 @@
 
 ::-webkit-scrollbar-thumb {
   // @include theme {
-  //   background-color: rgba(co(text), 0.15) !important;
+  //   background-color: rgba(var(--co-text), 0.15) !important;
   // }
   background-color: var(--co-text-ss) !important;
 }
@@ -114,7 +114,7 @@
       scrollbar-width: thin;
       scrollbar-gutter: auto;
       // @include theme {
-      //   scrollbar-color: rgba(co(text), 0.15) transparent;
+      //   scrollbar-color: rgba(var(--co-text), 0.15) transparent;
       // }
       scrollbar-color: var(--co-text-ss) transparent;
 
@@ -129,7 +129,7 @@
         border: 1px solid transparent;
         border-radius: 10px;
         // @include theme {
-        //   background-color: rgba(co(text), 0.15) !important;
+        //   background-color: rgba(var(--co-text), 0.15) !important;
         // }
         background-color: var(--co-text-ss) !important;
         background-clip: content-box;

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,9 +1,12 @@
-@use "sass:list";
-@use "sass:meta";
+@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: (
@@ -19,13 +22,13 @@ $theme: if(
       info: #0889e4
     )
   )
-);
+) !default;
 
 // 检测
-@if (global-variable-exists(theme)) {
-  $fa: map-keys($theme);
+@if (meta.global-variable-exists(theme)) {
+  $fa: map.keys($theme);
   $fk: list.nth($fa, 1);
-  @if (length($fa) == 1 and $fk == _sys) {
+  @if (list.length($fa) == 1 and $fk == _sys) {
     @warn '检测到您未定义主题色卡，请遵循 neatui 设计规范建立主题色卡；https://neatui.fekit.cn/#/docs/config';
     @debug '尝试修复错误...';
     @debug '创建系统默认色卡[theme=_sys]';
@@ -39,7 +42,7 @@ $theme: if(
     @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}';
         }
@@ -59,105 +62,105 @@ $theme: if(
       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%)
+      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: 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;
-          }
-        }
-      }
-    }
-  }
-}
+// @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: list.nth(list.nth(&, 1), 1);
-    $n: str-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;
-  }
-}
+// @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() {
@@ -183,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) {
@@ -213,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/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,13 +1,11 @@
 {
   "name": "@neatui/css",
-  "version": "2.0.10",
+  "version": "3.0.0-beta.1",
   "description": "neatui",
   "main": "./neatui.scss",
   "license": "MIT",
   "author": "xiaojunbo",
   "peerDependencies": {},
-  "devDependencies": {
-    "typescript": "^5.1.6"
-  },
+  "devDependencies": {},
   "dependencies": {}
 }