@neatui/css 2.0.10 → 3.0.0-beta.0

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,6 +1,6 @@
 {
   "name": "@neatui/css",
-  "version": "2.0.10",
+  "version": "3.0.0-beta.0",
   "description": "neatui",
   "main": "./neatui.scss",
   "license": "MIT",

package/components/btns/btns@b.scss

@@ -1,190 +0,0 @@
-@import './base.scss';
-
-@use 'sass:math';
-$size: 'xs', 's', 'm', 'l', 'xl';
-$type: 'none', 'main', 'text', 'read', 'weak', 'back', 'info', 'well', 'warn', 'risk';
-
-// 按钮
-[ui-btn~='@b'] {
-  // 基础样式
-  & {
-    position: relative;
-    display: inline-table;
-    height: 2.5em;
-    line-height: 2.5em;
-    padding: 0 1em;
-    border-radius: 0.25em;
-    cursor: pointer;
-    transition: all 50ms;
-    text-align: center;
-    vertical-align: middle;
-    // -webkit-font-smoothing: auto;
-    // -moz-osx-font-smoothing: auto;
-    border: 0;
-    user-select: none;
-    white-space: nowrap;
-    // @include theme {
-    color: var(--co-text);
-    background: var(--co-weak);
-    box-shadow: inset 0 0 0 1px var(--co-line);
-    // }
-  }
-
-  & > * {
-    &.icon {
-      display: inline-block;
-      & + * {
-        margin-left: 0.2em;
-      }
-    }
-  }
-
-  // 绝对尺寸
-  &[ui-btn~=':abs'] {
-    height: 2.5rem;
-    line-height: 2.5rem;
-    padding: 0 1rem;
-    border-radius: 0.25rem;
-  }
-  // 圆弧按钮
-  &[ui-btn~=':round'] {
-    border-radius: 100em;
-  }
-
-  // 移入状态
-  &:hover {
-    // @include theme {
-    box-shadow:
-      inset 0 0 0 1px var(--co-line),
-      inset 0 0 0 100em var(--co-text-xs);
-    // }
-  }
-
-  // 按下状态
-  &:active {
-    transform: scale(0.98, 0.95);
-  }
-
-  // 正方形按钮
-  &[ui-btn~=':square'] {
-    width: 2.5em;
-    padding: 0;
-  }
-
-  // 禁用按钮
-  &[ui-btn~=':disabled'] {
-    pointer-events: none;
-    &,
-    &:hover {
-      opacity: 0.65;
-      box-shadow:
-        inset 0 0 0 1px transparent,
-        inset 0 0 0 100em rgba(0, 0, 0, 0);
-      cursor: not-allowed;
-    }
-    &:active {
-      transform: scale(1, 1);
-      cursor: not-allowed;
-    }
-  }
-
-  // 按钮尺寸
-  $base: 1.5;
-  @each $i in $size {
-    &[ui-btn~='#{$i}'] {
-      height: #{$base}em;
-      line-height: #{$base}em;
-      padding: 0 #{calc(($base - 1) / 2)}em;
-
-      // 方形按钮
-      &[ui-btn~=':square'] {
-        width: #{$base}em;
-        padding: 0;
-      }
-
-      &[ui-btn~=':block'] {
-        width: 100%;
-      }
-
-      &[ui-btn~=':abs'] {
-        height: #{$base}rem;
-        line-height: #{$base}rem;
-        padding: 0 #{calc(($base - 1) / 2)}rem;
-      }
-    }
-    $base: $base + 0.5;
-  }
-
-  // 按钮颜色
-  @each $name in $type {
-    &[ui-btn~='#{$name}'] {
-      @if ($name == 'none' or $name == 'weak' or $name == 'back') {
-        @include theme {
-          background: var(--co-#{$name});
-        }
-        color: inherit;
-      } @else {
-        @include theme {
-          // 背景色
-          $co: var(--co-#{$name});
-          background-image: linear-gradient(180deg, saturate($co, 5%) 0%, mix($co, var(--co-text), 80%) 100%);
-          box-shadow: inset 0 -0.3em 0 0 rgba(0, 0, 0, 0.15);
-
-          // 智能计算文字颜色
-          // $wd: lightness($co) - (saturation($co) / 3);
-          // @if ($wd < 60%) {
-          //   color: #fff;
-          // } @else {
-          //   color: co(back);
-          // }
-          color: co(back);
-        }
-      }
-      box-shadow: inset 0 0 0 1px transparent;
-
-      &:hover {
-        @include theme {
-          box-shadow:
-            inset 0 0 0 1px transparent,
-            inset 0 0 0 100em rgba(var(--co-text), 0.04);
-        }
-      }
-
-      // 边框式
-      &[ui-btn~=':border'] {
-        background: transparent;
-        @include theme {
-          color: var(--co-#{$name});
-          box-shadow:
-            inset 0 0 0 1px var(--co-#{$name}),
-            inset 0 -0.2em 0 0 co(back),
-            inset 0 -0.3em 0 0 var(--co-#{$name});
-        }
-
-        &:hover {
-          @include theme {
-            box-shadow:
-              inset 0 0 0 1px var(--co-#{$name}),
-              inset 0 -0.2em 0 0 co(back),
-              inset 0 -0.3em 0 0 var(--co-#{$name}),
-              inset 0 0 0 100em rgba(var(--co-#{$name}), 0.08);
-          }
-        }
-      }
-
-      // 下划线
-      &[ui-btn~=':underline'] {
-        @include theme {
-          color: var(--co-#{$name});
-        }
-        background: transparent;
-        box-shadow: inset 0 0 0 1px transparent;
-
-        &:hover {
-          box-shadow: inset 0 0 0 1px transparent;
-          text-decoration: underline;
-        }
-      }
-    }
-  }
-}