@neatui/css 3.0.0-beta.8 → 3.0.0

package/core/theme.scss

@@ -1,14 +1,13 @@
+// theme-v3.scss
+
 @use 'sass:list';
 @use 'sass:meta';
 @use 'sass:map';
 @use 'sass:color';
 @use 'sass:string';
 
-// 兜底
-$theme: if(
-  meta.global-variable-exists(theme),
-  $theme,
-  (
+@mixin theme(
+  $theme: (
     _sys: (
       main: #0889e4,
       text: #000000,
@@ -22,10 +21,8 @@ $theme: if(
       info: #0889e4
     )
   )
-) !default;
-
-// 检测
-@if (meta.global-variable-exists(theme)) {
+) {
+  // 检测
   $fa: map.keys($theme);
   $fk: list.nth($fa, 1);
   @if (list.length($fa) == 1 and $fk == _sys) {
@@ -51,122 +48,35 @@ $theme: if(
       @debug '[theme=#{$n}]主题色卡配置错误';
     }
   }
-}
 
-// 扩展颜色
-@each $i in $theme {
-  $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: 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,
-      (
-        $n: map.merge($m, $s)
-      )
-    );
+  // 扩展
+  @each $i in $theme {
+    $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: 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,
+        (
+          $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;
-//           }
-//         }
-//       }
-//     }
-//   }
-// }
-
-// 颜色
-// @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: list.nth(list.nth($theme, 1), 1);
   @each $i in $theme {
     $n: list.nth($i, 1);
@@ -177,7 +87,6 @@ $theme: if(
         @each $c in $s {
           $k: list.nth($c, 1);
           $v: list.nth($c, 2);
-          // --#{$k}: #{red($v), green($v), blue($v)};
           --co-#{$k}: #{$v};
 
           $ls: 0.05;
@@ -185,11 +94,9 @@ $theme: if(
             // 透明度
             @if ($k != 'none') {
               --co-#{$k}-#{$l}: #{rgba($v, $ls)};
-
               @if ($k != 'w' and $k != 'b') {
                 --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}: #{color.mix($v, map.get($s, 'text'), $ls * 100%)};
               }
@@ -207,7 +114,6 @@ $theme: if(
         @each $c in $s {
           $k: list.nth($c, 1);
           $v: list.nth($c, 2);
-          // --#{$k}: #{red($v), green($v), blue($v)};
           --co-#{$k}: #{$v};
 
           $ls: 0.05;
@@ -234,6 +140,143 @@ $theme: if(
       }
     }
   }
-}
 
-@include vars();
+  // 生成颜色
+  html,
+  [theme] {
+    color: var(--co-read);
+    fill: var(--co-read);
+    background-color: var(--co-back);
+  }
+
+  // 自动颜色
+  .co-auto,
+  .co-auto\:hover:hover,
+  .co-auto\:active:active {
+    color: currentColor !important;
+    fill: currentColor !important;
+  }
+
+  .bg-auto,
+  .bg-auto\:hover:hover,
+  .bg-auto\:active:active {
+    background-color: currentColor !important;
+  }
+  .bk-auto,
+  .bk-auto\:hover:hover,
+  .bk-auto\:active:active {
+    border-color: currentColor !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;
+  }
+
+  $f: list.nth(list.nth($theme, 1), 1);
+  @each $i in $theme {
+    $s: list.nth($i, 2);
+    @each $c in $s {
+      $n: list.nth($c, 1);
+      $v: 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;
+      }
+      .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;
+        }
+      }
+    }
+  }
+}

package/core/trim.scss

@@ -1,3 +1,5 @@
+@use './media.scss' as *;
+
 @mixin trim($media: '') {
   $size: (no, xs, ss, sm, sl, ms, mm, ml, ls, lm, ll, xl);
 

package/core/ux.scss

@@ -69,9 +69,11 @@
 // 移入显示
 .parent-hover\:show {
   opacity: 0;
+  pointer-events: none;
 }
 *:hover > .parent-hover\:show {
   opacity: 1;
+  pointer-events: auto;
 }
 
 // 链接图标

package/core/vars.scss

@@ -0,0 +1,3 @@
+// $co: 'none', 'main', 'text', 'read', 'note', 'line', 'case', 'weak', 'fore', 'back', 'info', 'well', 'warn', 'risk';
+// $sz: 'xs', 's', 'm', 'l', 'xl';
+$sz: no, xs, ss, sm, ms, mm, ml, ls, lm, ll, xl;

package/neatui.scss

@@ -1,23 +1,54 @@
-@import './core/neatui@core.scss';
-@import './components/anim/mcui@anim.scss';
-@import './components/btns/mcui@btns.scss';
-@import './components/card/mcui@card.scss';
-@import './components/form/mcui@form.scss';
-@import './components/grid/mcui@grid.scss';
-@import './components/icon/mcui@icon.scss';
-@import './components/imgs/mcui@imgs.scss';
-@import './components/line/mcui@line.scss';
-@import './components/list/mcui@list.scss';
-@import './components/load/mcui@load.scss';
-@import './components/menu/mcui@menu.scss';
-@import './components/navs/mcui@navs.scss';
-@import './components/note/mcui@note.scss';
-@import './components/opts/mcui@opts.scss';
-@import './components/path/mcui@path.scss';
-@import './components/side/mcui@side.scss';
-@import './components/steps/mcui@steps.scss';
-@import './components/table/mcui@table.scss';
-@import './components/tabs/mcui@tabs.scss';
-@import './components/tags/mcui@tags.scss';
-@import './components/tips/mcui@tips.scss';
-@import './components/title/mcui@title.scss';
+// neatui.scss
+
+// 框架核心
+// 重置
+@forward './core/reset.scss';
+// 主题
+@forward './core/theme.scss';
+// 响应
+@forward './core/media.scss';
+// 基础
+@forward './core/basic.scss';
+// 字号
+@forward './core/size.scss';
+// 栅格
+@forward './core/cols.scss';
+// 格子（新）
+@forward './core/grid.scss';
+// 微调
+@forward './core/trim.scss';
+// 边框
+@forward './core/border.scss';
+// 布局
+@forward './core/flex.scss';
+// 缩小
+@forward './core/scale.scss';
+// 滚动
+@forward './core/scroll.scss';
+// 封面
+@forward './core/cover.scss';
+// 交互
+@forward './core/ux.scss';
+
+// 组件
+@forward './components/anim/index.scss';
+@forward './components/btns/index.scss';
+@forward './components/card/index.scss';
+@forward './components/form/index.scss';
+@forward './components/icon/index.scss';
+@forward './components/imgs/index.scss';
+@forward './components/line/index.scss';
+@forward './components/list/index.scss';
+@forward './components/load/index.scss';
+@forward './components/menu/index.scss';
+@forward './components/navs/index.scss';
+@forward './components/note/index.scss';
+@forward './components/opts/index.scss';
+@forward './components/path/index.scss';
+@forward './components/side/index.scss';
+@forward './components/steps/index.scss';
+@forward './components/table/index.scss';
+@forward './components/tabs/index.scss';
+@forward './components/tags/index.scss';
+@forward './components/tips/index.scss';
+@forward './components/title/index.scss';

package/package.json

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

package/components/anim/mcui@anim.scss

@@ -1,22 +0,0 @@
-@import './am-loading.scss';
-@import './am-rotate.scss';
-@import './am-view-aa.scss';
-@import './am-view-ab.scss';
-@import './am-view-ac.scss';
-@import './am-view-ad.scss';
-@import './am-view-ae.scss';
-@import './am-view-af.scss';
-@import './am-view-ag.scss';
-@import './am-view-ah.scss';
-@import './am-view-ai.scss';
-@import './am-view-aj.scss';
-@import './am-view-ak.scss';
-@import './am-view-al.scss';
-@import './am-view-am.scss';
-@import './am-view-an.scss';
-@import './am-view-ao.scss';
-@import './am-view-ap.scss';
-@import './am-view-aq.scss';
-@import './am-view-ar.scss';
-@import './am-view-as.scss';
-@import './am-view-at.scss';

package/components/btns/mcui@btns.scss

@@ -1 +0,0 @@
-@import './btns@a.scss';

package/components/card/mcui@card.scss

@@ -1,2 +0,0 @@
-@import './card@a.scss';
-@import './card@b.scss';

package/components/form/mcui@form.scss

@@ -1,4 +0,0 @@
-@import './form@a';
-@import './form@b';
-@import './form@c';
-// @import './form@d';

package/components/icon/mcui@icon.scss

@@ -1,21 +0,0 @@
-@import './icon@add.scss';
-@import './icon@close.scss';
-@import './icon@down.scss';
-@import './icon@except.scss';
-@import './icon@hook.scss';
-@import './icon@left.scss';
-@import './icon@link.scss';
-@import './icon@menu.scss';
-@import './icon@minus.scss';
-@import './icon@more.scss';
-@import './icon@omit.scss';
-@import './icon@refresh.scss';
-@import './icon@right.scss';
-@import './icon@search.scss';
-@import './icon@time.scss';
-@import './icon@top.scss';
-@import './icon@view.scss';
-@import './icon@drag.scss';
-@import './icon@quit.scss';
-@import './icon@upload.scss';
-@import './icon@download.scss';

package/components/imgs/mcui@imgs.scss

@@ -1 +0,0 @@
-@import './imgs@a.scss';

package/components/line/mcui@line.scss

@@ -1,2 +0,0 @@
-@import './line@a.scss';
-@import './line@b.scss';

package/components/list/mcui@list.scss

@@ -1,2 +0,0 @@
-@import './list@a.scss';
-@import './list@b.scss';

package/components/load/mcui@load.scss

@@ -1,8 +0,0 @@
-@import './load@a.scss';
-@import './load@b.scss';
-@import './load@c.scss';
-@import './load@d.scss';
-@import './load@e.scss';
-@import './load@f.scss';
-@import './load@g.scss';
-@import './load@h.scss';

package/components/menu/mcui@menu.scss

@@ -1 +0,0 @@
-@import './menu@b.scss';

package/components/navs/mcui@navs.scss

@@ -1,2 +0,0 @@
-@import './navs@a.scss';
-@import './navs@b.scss';

package/components/note/mcui@note.scss

@@ -1,2 +0,0 @@
-@import './note@a.scss';
-@import './note@b.scss';

package/components/opts/mcui@opts.scss

@@ -1 +0,0 @@
-@import './opts@a.scss';

package/components/path/mcui@path.scss

@@ -1 +0,0 @@
-@import './path@a.scss';

package/components/steps/mcui@steps.scss

@@ -1,2 +0,0 @@
-@import './steps@a.scss';
-@import './steps@v.scss';

package/components/table/mcui@table.scss

@@ -1,3 +0,0 @@
-@import './table@a.scss';
-@import './table@b.scss';
-@import './table@c.scss';

package/components/tabs/mcui@tabs.scss

@@ -1,3 +0,0 @@
-@import './tabs@a.scss';
-@import './tabs@b.scss';
-@import './tabs@c.scss';

package/components/tags/mcui@tags.scss

@@ -1,2 +0,0 @@
-@import './tags@a.scss';
-@import './tags@b.scss';

package/components/tips/mcui@tips.scss

@@ -1 +0,0 @@
-@import './tips@a.scss';

package/components/title/mcui@title.scss

@@ -1,2 +0,0 @@
-@import './title@a.scss';
-@import './title@b.scss';

package/core/neatui@core.scss

@@ -1,30 +0,0 @@
-@charset "utf-8";
-@use 'sass:math';
-// 主题
-@import './theme.scss';
-// 色号
-@import './color.scss';
-// 响应
-@import './media.scss';
-// 重置
-@import './reset.scss';
-// 基础
-@import './base.scss';
-// 字号
-@import './size.scss';
-// 栅格
-@import './cols.scss';
-// 微调
-@import './trim.scss';
-// 边框
-@import './border.scss';
-// 布局
-@import './flex.scss';
-// 缩小
-@import './scale.scss';
-// 滚动条
-@import './scroll.scss';
-// 封面
-@import './cover.scss';
-// 交互
-@import './ux.scss';