@neatui/css 2.0.10 → 3.0.0-beta.1

package/components/path/README.md

@@ -82,8 +82,8 @@ $theme: (
   top: 0;
 
   @include theme {
-    background-color: co(back);
-    color: co(text);
+    background-color: var(--co-back);
+    color: var(--co-text);
   }
 }
 ```

package/components/table/base.scss

@@ -24,7 +24,7 @@
         right: -5px;
         top: 0;
         // @include theme {
-        //   box-shadow: inset 5px 0 5px -5px rgba(co(text), 0.15);
+        //   box-shadow: inset 5px 0 5px -5px rgba(var(--co-text), 0.15);
         // }
         box-shadow: inset 5px 0 5px -5px var(--co-text-ss);
       }
@@ -40,7 +40,7 @@
         left: -5px;
         top: 0;
         // @include theme {
-        //   box-shadow: inset -5px 0 5px -5px rgba(co(text), 0.15);
+        //   box-shadow: inset -5px 0 5px -5px rgba(var(--co-text), 0.15);
         // }
         box-shadow: inset -5px 0 5px -5px var(--co-text-ss);
       }

package/components/table/table@a.scss

@@ -208,7 +208,7 @@
       transition: all 0.3s;
       &:hover {
         // @include theme {
-        //   background-color: rgba(co(weak), 0.5);
+        //   background-color: rgba(var(--co-weak), 0.5);
         // }
         background-color: var(-co-weak-mm);
       }

package/components/table/table@b.scss

@@ -50,7 +50,7 @@
           &:hover {
             // @include theme {
             box-shadow:
-              0 0 0 2px co(weak),
+              0 0 0 2px var(--co-weak),
               0 0 0 3px var(--co-line);
             z-index: 1;
             position: relative;

package/components/tips/base.scss

@@ -20,7 +20,7 @@
       right: 0.75em;
       bottom: -0.25em;
       left: auto;
-      box-shadow: 1px 1px 0.2em 0 var(--co-deep);
+      box-shadow: 1px 1px 0.2em 0 var(--co-text-ss);
     }
   }
   [ui-tips-box~='tc'] {
@@ -43,7 +43,7 @@
       bottom: -0.25em;
       left: 50%;
       margin-left: -0.25em;
-      box-shadow: 1px 1px 0.2em 0 var(--co-deep);
+      box-shadow: 1px 1px 0.2em 0 var(--co-text-ss);
     }
   }
   [ui-tips-box~='tr'] {
@@ -65,7 +65,7 @@
       right: auto;
       bottom: -0.25em;
       left: 0.75em;
-      box-shadow: 1px 1px 0.2em 0 var(--co-deep);
+      box-shadow: 1px 1px 0.2em 0 var(--co-text-ss);
     }
   }
 
@@ -88,7 +88,7 @@
       right: -0.25em;
       bottom: 0.75em;
       left: auto;
-      box-shadow: 1px -1px 0.2em 0 var(--co-deep);
+      box-shadow: 1px -1px 0.2em 0 var(--co-text-ss);
     }
   }
   [ui-tips-box~='lm'] {
@@ -110,7 +110,7 @@
       bottom: auto;
       left: auto;
       margin-top: -0.25em;
-      box-shadow: 1px -1px 0.2em 0 var(--co-deep);
+      box-shadow: 1px -1px 0.2em 0 var(--co-text-ss);
     }
   }
   [ui-tips-box~='lb'] {
@@ -131,7 +131,7 @@
       right: -0.25em;
       bottom: auto;
       left: auto;
-      box-shadow: 1px -1px 0.2em 0 var(--co-deep);
+      box-shadow: 1px -1px 0.2em 0 var(--co-text-ss);
     }
   }
 
@@ -167,7 +167,7 @@
       left: -0.25em;
       bottom: 0.75em;
       right: auto;
-      box-shadow: -1px 1px 0.2em 0 var(--co-deep);
+      box-shadow: -1px 1px 0.2em 0 var(--co-text-ss);
     }
   }
   [ui-tips-box~='rm'] {
@@ -190,7 +190,7 @@
       bottom: auto;
       right: auto;
       margin-top: -0.25em;
-      box-shadow: -1px 1px 0.2em 0 var(--co-deep);
+      box-shadow: -1px 1px 0.2em 0 var(--co-text-ss);
     }
   }
   [ui-tips-box~='rb'] {
@@ -212,7 +212,7 @@
       left: -0.25em;
       bottom: auto;
       right: auto;
-      box-shadow: -1px 1px 0.2em 0 var(--co-deep);
+      box-shadow: -1px 1px 0.2em 0 var(--co-text-ss);
     }
   }
 
@@ -237,7 +237,7 @@
       right: 1em;
       top: -0.25em;
       left: auto;
-      box-shadow: -1px -1px 0.2em 0 var(--co-deep);
+      box-shadow: -1px -1px 0.2em 0 var(--co-text-ss);
     }
   }
   [ui-tips-box~='bc'] {
@@ -261,7 +261,7 @@
       top: -0.25em;
       left: 50%;
       margin-left: -0.25em;
-      box-shadow: -1px -1px 0.2em 0 var(--co-deep);
+      box-shadow: -1px -1px 0.2em 0 var(--co-text-ss);
     }
   }
   [ui-tips-box~='br'] {
@@ -284,7 +284,7 @@
       right: auto;
       top: -0.25em;
       left: 0.75em;
-      box-shadow: -1px -1px 0.2em 0 var(--co-deep);
+      box-shadow: -1px -1px 0.2em 0 var(--co-text-ss);
     }
   }
 

package/components/tips/tips@a.scss

@@ -12,7 +12,7 @@
     background: var(--co-fore);
     // }
     // box-shadow: 0 0 0.2em 1px rgba(0, 0, 0, 0.08);
-    box-shadow: 0 0 0.2em 1px var(--co-deep);
+    box-shadow: 0 0 0.2em 1px var(--co-text-ss);
     // padding: 0.5em;
     border-radius: 0.25em;
     pointer-events: none;

package/core/README.md

@@ -82,8 +82,8 @@ $theme: (
   top: 0;
 
   @include theme {
-    background-color: co(back);
-    color: co(text);
+    background-color: var(--co-back);
+    color: var(--co-text);
   }
 }
 ```

package/core/color.scss

@@ -1,12 +1,13 @@
-html {
-  color: var(--co-read);
-  fill: var(--co-read);
-  background-color: var(--co-back);
-}
+@use 'sass:list';
 
-@mixin color($n, $v) {
-  $levels: xs, ss, sm, sl, ms, mm, ml, ls, lm, ll, xl;
+@mixin color() {
+  html {
+    color: var(--co-read);
+    fill: var(--co-read);
+    background-color: var(--co-back);
+  }
 
+  // 自动颜色
   .co-auto,
   .co-auto\:hover:hover,
   .co-auto\:active:active {
@@ -25,129 +26,118 @@ html {
     border-color: currentColor !important;
   }
 
-  .co-#{$n},
-  .co-#{$n}\:hover:hover,
-  .co-#{$n}\:active:active {
-    color: var(--co-#{$n}) !important;
-    fill: var(--co-#{$n}) !important;
-  }
-  .bg-#{$n},
-  .bg-#{$n}\:hover:hover,
-  .bg-#{$n}\:active:active {
-    background-color: var(--co-#{$n}) !important;
-  }
-  .bk-#{$n},
-  .bk-#{$n}\:hover:hover,
-  .bk-#{$n}\:active:active {
-    border-color: var(--co-#{$n}) !important;
+  // 随机颜色
+  .bg-0 {
+    background-color: var(--co-main);
   }
 
-  @each $i in $levels {
-    .co-#{$n}-#{$i},
-    .co-#{$n}-#{$i}\:hover:hover,
-    .co-#{$n}-#{$i}\:active:active {
-      color: var(--co-#{$n}-#{$i}) !important;
-      fill: var(--co-#{$n}-#{$i}) !important;
-    }
-    .bg-#{$n}-#{$i},
-    .bg-#{$n}-#{$i}\:hover:hover,
-    .bg-#{$n}-#{$i}\:active:active {
-      background-color: var(--co-#{$n}-#{$i}) !important;
-    }
-    .bk-#{$n}-#{$i},
-    .bk-#{$n}-#{$i}\:hover:hover,
-    .bk-#{$n}-#{$i}\:active:active {
-      border-color: var(--co-#{$n}-#{$i}) !important;
-    }
+  .bg-1 {
+    background-color: #0084ff;
+  }
+  .bg-2 {
+    background-color: #30d158;
+  }
+  .bg-3 {
+    background-color: #5e5ce6;
+  }
+  .bg-4 {
+    background-color: #ff9f0a;
+  }
+  .bg-5 {
+    background-color: #ff375f;
+  }
+  .bg-6 {
+    background-color: #af52de;
+  }
+  .bg-7 {
+    background-color: #ff453a;
+  }
+  .bg-8 {
+    background-color: #af52de;
+  }
+  .bg-9 {
+    background-color: #5ac8fa;
+  }
+  .bg-10 {
+    background-color: #ffcc00;
+  }
+  .bg-11 {
+    background-color: #8e8e93;
+  }
+  .bg-12 {
+    background-color: #bad80a;
+  }
+  .bg-13 {
+    background-color: #1d6fa3;
+  }
+  .bg-14 {
+    background-color: #fd6585;
+  }
+  .bg-15 {
+    background-color: #df5900;
+  }
+  .bg-16 {
+    background-color: #3388ff;
+  }
+  .bg-17 {
+    background-color: #623aa2;
+  }
+  .bg-18 {
+    background-color: #d939cd;
+  }
+  .bg-19 {
+    background-color: #f55555;
+  }
+  .bg-20 {
+    background-color: #bb4e75;
   }
-}
 
-@mixin colors($d: '') {
-  $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);
-    @if ($n == $f) {
-      html {
-        @each $c in $s {
-          @include color(nth($c, 1), nth($c, 2));
-        }
+    $s: list.nth($i, 2);
+    @each $c in $s {
+      $n: list.nth($c, 1);
+      $v: list.nth($c, 2);
+      // @include color(list.nth($c, 1), list.nth($c, 2));
+      $levels: xs, ss, sm, sl, ms, mm, ml, ls, lm, ll, xl;
+
+      .co-#{$n},
+      .co-#{$n}\:hover:hover,
+      .co-#{$n}\:active:active {
+        color: var(--co-#{$n}) !important;
+        fill: var(--co-#{$n}) !important;
+      }
+      .bg-#{$n},
+      .bg-#{$n}\:hover:hover,
+      .bg-#{$n}\:active:active {
+        background-color: var(--co-#{$n}) !important;
       }
-    } @else {
-      [theme~='#{$n}'] {
-        @each $c in $s {
-          @include color(nth($c, 1), nth($c, 2));
+      .bk-#{$n},
+      .bk-#{$n}\:hover:hover,
+      .bk-#{$n}\:active:active {
+        border-color: var(--co-#{$n}) !important;
+      }
+
+      @each $i in $levels {
+        .co-#{$n}-#{$i},
+        .co-#{$n}-#{$i}\:hover:hover,
+        .co-#{$n}-#{$i}\:active:active {
+          color: var(--co-#{$n}-#{$i}) !important;
+          fill: var(--co-#{$n}-#{$i}) !important;
+        }
+        .bg-#{$n}-#{$i},
+        .bg-#{$n}-#{$i}\:hover:hover,
+        .bg-#{$n}-#{$i}\:active:active {
+          background-color: var(--co-#{$n}-#{$i}) !important;
+        }
+        .bk-#{$n}-#{$i},
+        .bk-#{$n}-#{$i}\:hover:hover,
+        .bk-#{$n}-#{$i}\:active:active {
+          border-color: var(--co-#{$n}-#{$i}) !important;
         }
       }
     }
   }
 }
 
-// 随机背景色
-.bg-0 {
-  background-color: var(--co-main);
-}
-
-.bg-1 {
-  background-color: #0084ff;
-}
-.bg-2 {
-  background-color: #30d158;
-}
-.bg-3 {
-  background-color: #5e5ce6;
-}
-.bg-4 {
-  background-color: #ff9f0a;
-}
-.bg-5 {
-  background-color: #ff375f;
-}
-.bg-6 {
-  background-color: #af52de;
-}
-.bg-7 {
-  background-color: #ff453a;
-}
-.bg-8 {
-  background-color: #af52de;
-}
-.bg-9 {
-  background-color: #5ac8fa;
-}
-.bg-10 {
-  background-color: #ffcc00;
-}
-.bg-11 {
-  background-color: #8e8e93;
-}
-.bg-12 {
-  background-color: #bad80a;
-}
-.bg-13 {
-  background-color: #1d6fa3;
-}
-.bg-14 {
-  background-color: #fd6585;
-}
-.bg-15 {
-  background-color: #df5900;
-}
-.bg-16 {
-  background-color: #3388ff;
-}
-.bg-17 {
-  background-color: #623aa2;
-}
-.bg-18 {
-  background-color: #d939cd;
-}
-.bg-19 {
-  background-color: #f55555;
-}
-.bg-20 {
-  background-color: #bb4e75;
-}
-
-// 桌面
-@include colors();
+@include color();

package/core/cols.scss

@@ -1,3 +1,6 @@
+@use 'sass:list';
+@use 'sass:math';
+
 @mixin cols($cols: 24, $base: 160, $space: 1) {
   [ui-row] {
     & {
@@ -93,14 +96,14 @@
   $level2: 'mob', '', '', 'pad', '', '', 'dpc', '', '';
 
   @each $i in $level {
-    $d: nth($level2, index($level, $i));
+    $d: list.nth($level2, list.index($level, $i));
     // 遍历断点
     $base: $base + 160;
     // 基础
     @if ($i == 'mob-s') {
       @for $n from 0 through $cols {
         // 宽度
-        $w: calc(floor(calc(100% / $cols * $n) * 100000) / 100000);
+        $w: calc(math.floor(calc(100% / $cols * $n) * 100000) / 100000);
         [ui-row~='mob-#{$n}'] > *,
         [ui-row~='#{$i}-#{$n}'] > *,
         [ui-row] [ui-col~='mob-#{$n}'],
@@ -112,7 +115,7 @@
       @media (min-width: #{$base}px) {
         @for $n from 0 through $cols {
           // 宽度
-          $w: calc((floor((calc(100% / $cols) * $n) * 100000) / 100000));
+          $w: calc((math.floor((calc(100% / $cols) * $n) * 100000) / 100000));
           @if ($d != '') {
             // 三端
             [ui-row~='#{$d}-#{$n}'] > *,