@neatui/css 1.0.27 → 2.0.0-beta.1

package/core/theme.scss

@@ -1,89 +1,98 @@
-$default: (
-  '_sys': (
-    main: #d52932,
-    vice: #67337d,
-    text: #111,
-    fore: #fff,
-    back: #f7f7f7,
-    land: #ff9900,
-    link: #0d66d0,
-    code: #e23861,
-    well: #4bbc73,
-    warn: #fb9a2a,
-    risk: #f95850,
-    info: #0889e4
+// 兜底
+$theme: if(
+  global-variable-exists(theme),
+  $theme,
+  (
+    _sys: (
+      main: #0889e4,
+      text: #000000,
+      fore: #ffffff,
+      back: #f5f5f5,
+      link: #d07950,
+      code: #e23861,
+      well: #4bbc73,
+      warn: #fb9a2a,
+      risk: #f95850,
+      info: #0889e4
+    )
   )
 );
 
 // 检测
 @if (global-variable-exists(theme)) {
-  // 检测关键的基础颜色是否完整
+  $fa: map-keys($theme);
+  $fk: nth($fa, 1);
+  @if (length($fa) == 1 and $fk == _sys) {
+    @warn '检测到您未定义主题色卡，请遵循 neatui 设计规范建立主题色卡；https://neatui.fekit.cn/#/docs/config';
+    @debug '尝试修复错误...';
+    @debug '创建系统默认色卡[theme=_sys]';
+  } @else {
+    @debug '检测到主题色卡[theme=#{$fk}]';
+  }
+
   @each $var in $theme {
     $n: nth($var, 1);
     $s: nth($var, 2);
-    @debug '检测到主题色卡[theme=#{$n}]';
-
-    // @debug '检查主题关键颜色是否完整!';
-    $baseColor: 'main', 'text', 'fore', 'back', 'link', 'code', 'well', 'warn', 'risk', 'info';
-    @each $baseColorItem in $baseColor {
-      @if (map-has-key($s, $baseColorItem)) {
-      } @else {
-        @error '[theme=#{$n}]主题缺少一个关键的基础颜色#{$baseColorItem}';
+    @if ($s and type-of($s) == 'map') {
+      $baseColor: 'main', 'text', 'fore', 'back', 'link', 'code', 'well', 'warn', 'risk';
+      @each $baseColorItem in $baseColor {
+        @if (map-has-key($s, $baseColorItem)) {
+        } @else {
+          @warn '[theme=#{$n}]主题缺少一个关键的基础颜色#{$baseColorItem}';
+        }
       }
+    } @else {
+      @debug '[theme=#{$n}]主题色卡配置错误';
     }
   }
-} @else {
-  @debug '未定义基础色卡，请遵循MCUI设计规范建立主题色卡；https://mcui.asnowsoft.com/#/start/design';
-  @debug '尝试修复错误...';
-  @debug '创建系统默认色卡[theme=_sys]';
-  $theme: $default !global;
 }
 
 // 扩展颜色
 @each $i in $theme {
   $n: nth($i, 1);
   $s: nth($i, 2);
-  $m: (
-    read: mix(map-get($s, 'text'), map-get($s, 'fore'), 80%),
-    desc: mix(map-get($s, 'text'), map-get($s, 'fore'), 55%),
-    note: mix(map-get($s, 'text'), map-get($s, 'fore'), 35%),
-    idle: mix(map-get($s, 'text'), map-get($s, 'fore'), 25%),
-    case: mix(map-get($s, 'text'), map-get($s, 'fore'), 20%),
-    line: mix(map-get($s, 'text'), map-get($s, 'fore'), 8%),
-    weak: mix(map-get($s, 'text'), map-get($s, 'fore'), 3%),
-    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)
-      ),
-    none: transparent,
-    w: #fff,
-    b: #000
-  );
-  // 将扩展颜色加入放题色卡中
-  $theme: map-merge(
-    $theme,
-    (
-      $n: map-merge($m, $s)
-    )
-  ) !global;
+  @if ($s and 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%),
+      // idle: mix(map-get($s, 'text'), map-get($s, 'fore'), 25%),
+      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'), 3%),
+      // 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)
+      //   ),
+    );
+    // 将扩展颜色加入放题色卡中
+    $theme: map-merge(
+      $theme,
+      (
+        $n: map-merge($m, $s)
+      )
+    );
+  }
 }
 
 // 主题
-@mixin theme($themeName: null) {
-  $hasTheme: map-get($theme, $themeName);
-  @if ($themeName != null) {
+@mixin theme($n: null) {
+  $hasTheme: map-get($theme, $n);
+  @if ($n != null) {
     @if ($hasTheme != null) {
       $t: $hasTheme;
       $first: nth(nth($theme, 1), 1);
-      $n: $themeName;
-      $this: #{nth(&, 1)};
-      @if ($this == 'html' or $this == '' or $this == null) {
+      $n: $n;
+      $s: #{nth(&, 1)};
+      @if ($s == 'html' or $s == '' or $s == null) {
         @if ($n == $first) {
-          @at-root html,
-            [theme],
-            [theme='#{$n}'] {
+          @at-root html {
             @content;
           }
         } @else {
@@ -101,18 +110,17 @@ $default: (
         }
       }
     } @else {
-      @debug '没有指定主题#{$hasTheme}';
+      @warn '没有指定主题#{$hasTheme}';
     }
   } @else {
     $first: nth(nth($theme, 1), 1);
     @each $t in $theme {
       $n: nth($t, 1);
-      $this: #{nth(&, 1)};
-      @if ($this == 'html' or $this == ':root' or $this == '' or $this == null) {
+      $s: #{nth(&, 1)};
+
+      @if ($s == 'html' or $s == ':root' or $s == '' or $s == null) {
         @if ($n == $first) {
-          @at-root html,
-            [theme],
-            [theme='#{$n}'] {
+          @at-root html {
             @content;
           }
         } @else {
@@ -143,7 +151,6 @@ $default: (
       $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);
@@ -152,5 +159,128 @@ $default: (
       }
     }
     @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);
+  @each $i in $theme {
+    $n: nth($i, 1);
+    $s: nth($i, 2);
+    @if ($n == $f) {
+      html {
+        @each $c in $s {
+          $k: nth($c, 1);
+          $v: nth($c, 2);
+          --#{$k}: #{red($v), green($v), blue($v)};
+          --co-#{$k}: #{$v};
+
+          $ls: 0.05;
+          @each $l in $levels {
+            // 透明度
+            @if ($k != 'none') {
+              --co-#{$k}-#{$l}: #{rgba($v, $ls)};
+
+              @if ($k != 'w' and $k != 'b') {
+                --co-#{$k}-fore-#{$l}: #{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%)};
+              }
+            }
+            @if ($ls <= 0.1 or $ls >= 0.8) {
+              $ls: $ls + 0.05;
+            } @else {
+              $ls: $ls + 0.1;
+            }
+          }
+        }
+
+        // 文本颜色
+        // --co-main-text: #{mix(map-get($s, 'main'), map-get($s, 'text'), 85%)};
+        // --co-well-text: #{mix(map-get($s, 'well'), map-get($s, 'text'), 85%)};
+        // --co-warn-text: #{mix(map-get($s, 'warn'), map-get($s, 'text'), 85%)};
+        // --co-risk-text: #{mix(map-get($s, 'risk'), map-get($s, 'text'), 85%)};
+
+        // --co-line-fore: #{mix(map-get($s, 'line'), map-get($s, 'fore'), 70%)};
+        // --bg-main: #{saturate(rgba(map-get($s, 'main'), 0.05), 20%)};
+        // --bg-weak: #{mix(map-get($s, 'weak'), map-get($s, 'fore'), 75%)};
+        // --bg-well: #{saturate(rgba(map-get($s, 'well'), 0.05), 20%)};
+        // --bg-warn: #{saturate(rgba(map-get($s, 'warn'), 0.05), 20%)};
+        // --bg-risk: #{saturate(rgba(map-get($s, 'risk'), 0.05), 20%)};
+        // --bg-info: #{saturate(rgba(map-get($s, 'info'), 0.05), 20%)};
+        // --bg-well: #{rgba(map-get($s, 'well'), 0.08)};
+        // --bg-warn: #{rgba(map-get($s, 'warn'), 0.08)};
+        // --bg-risk: #{rgba(map-get($s, 'risk'), 0.08)};
+
+        // @each $k in $colors {
+        //   $v: map-get($s, $k);
+        //   $ls: 0.05;
+        //   @each $l in $levels {
+        //     // 透明度
+        //     --co-#{$k}-#{$l}: #{rgba($v, $ls)};
+        //     // 增亮度
+        //     --bg-#{$k}-#{$l}: #{saturate(rgba($v, $ls), 20%)};
+        //     @if ($ls == 0.05 or $ls == 0.9) {
+        //       $ls: $ls + 0.05;
+        //     } @else {
+        //       $ls: $ls + 0.1;
+        //     }
+        //   }
+        // }
+      }
+    } @else {
+      [theme~='#{$n}'] {
+        @each $c in $s {
+          $k: nth($c, 1);
+          $v: nth($c, 2);
+          @if ($k != 'none') {
+            --co-#{$k}: #{$v};
+          }
+
+          $ls: 0.05;
+          @each $l in $levels {
+            // 透明度
+            --co-#{$k}-#{$l}: #{rgba($v, $ls)};
+            @if ($ls <= 0.1 or $ls >= 0.8) {
+              $ls: $ls + 0.05;
+            } @else {
+              $ls: $ls + 0.1;
+            }
+          }
+        }
+
+        // 文本颜色
+        // --co-main-text: #{mix(map-get($s, 'main'), map-get($s, 'text'), 85%)};
+        // --co-well-text: #{mix(map-get($s, 'well'), map-get($s, 'text'), 85%)};
+        // --co-warn-text: #{mix(map-get($s, 'warn'), map-get($s, 'text'), 85%)};
+        // --co-risk-text: #{mix(map-get($s, 'risk'), map-get($s, 'text'), 85%)};
+
+        // @each $k in $colors {
+        //   $v: map-get($s, $k);
+        //   $ls: 0.05;
+        //   @each $l in $levels {
+        //     // 透明度
+        //     --co-#{$k}-#{$l}: #{rgba($v, $ls)};
+        //     // 增亮度
+        //     --bg-#{$k}-#{$l}: #{saturate(rgba($v, $ls), 20%)};
+        //     @if ($ls == 0.05 or $ls == 0.9) {
+        //       $ls: $ls + 0.05;
+        //     } @else {
+        //       $ls: $ls + 0.1;
+        //     }
+        //   }
+        // }
+      }
+    }
+  }
+}
+
+@include vars();

package/core/trim.scss

@@ -322,6 +322,24 @@
     }
     $w_base: $w_base + 2;
   }
+  .#{$media}w-auto {
+    width: auto;
+  }
+  .#{$media}min-w-auto {
+    min-width: auto;
+  }
+  .#{$media}max-w-auto {
+    max-width: auto;
+  }
+  .#{$media}w-full {
+    width: 100%;
+  }
+  .#{$media}min-w-full {
+    min-width: 100%;
+  }
+  .#{$media}max-w-full {
+    max-width: 100%;
+  }
 
   // 高度
   $h_base: 0;
@@ -355,6 +373,24 @@
     }
     $h_base: $h_base + 2;
   }
+  .#{$media}h-auto {
+    height: auto;
+  }
+  .#{$media}min-h-auto {
+    min-height: auto;
+  }
+  .#{$media}max-h-auto {
+    max-height: auto;
+  }
+  .#{$media}h-full {
+    height: 100%;
+  }
+  .#{$media}min-h-full {
+    min-height: 100%;
+  }
+  .#{$media}max-h-full {
+    max-height: 100%;
+  }
 
   // 缩小
   .#{$media}s-no {

package/core/ux.scss

@@ -19,17 +19,13 @@
     cursor: pointer;
   }
   &:hover {
-    @include theme {
-      box-shadow: inset 0 0 0 100em co(weak);
-    }
+    box-shadow: inset 0 0 0 100em rgba(0, 0, 0, 0.05);
   }
 }
 
 // 移入阴影
 .ux-shadow:hover {
-  @include theme {
-    box-shadow: 0 0.1em 0.5em co(deep);
-  }
+  box-shadow: 0 0.1em 0.5em var(--co-deep);
 }
 
 // 点击效果
@@ -98,9 +94,8 @@
 
   &:hover {
     transition: color 0.35s;
-    @include theme {
-      color: co(link);
-    }
+
+    color: var(--co-link);
   }
 }
 
@@ -125,9 +120,8 @@
 
   &:hover {
     transition: color 0.35s;
-    @include theme {
-      color: co(link);
-    }
+
+    color: var(--co-link);
 
     &::before {
       transform: scale(1);
@@ -251,10 +245,10 @@
   .downmenu {
     position: absolute;
     top: 130%;
-    @include theme {
-      background: co(fore);
-      box-shadow: 0 1px 0.3em 1px co(deep);
-    }
+
+    background: var(--co-fore);
+    box-shadow: 0 1px 0.3em 1px var(--co-deep);
+
     padding: 1.5rem;
     right: 0.15rem;
     min-width: 10.5rem;
@@ -295,9 +289,9 @@
       box-sizing: content-box;
       width: 0.5em;
       height: 0.5em;
-      @include theme {
-        background: co(fore);
-      }
+
+      background: var(--co-fore);
+
       top: -0.25em;
       left: 50%;
       margin-left: -0.25em;

package/neatui.scss

@@ -1,4 +1,4 @@
-@import './core/mcui@core.scss';
+@import './core/neatui@core.scss';
 @import './components/anim/mcui@anim.scss';
 @import './components/btns/mcui@btns.scss';
 @import './components/card/mcui@card.scss';

package/package.json

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

package/components/paging/mc-paging-ui1503.scss

@@ -1,106 +0,0 @@
-/*主体*/
-/*辅助*/
-/*辅助*/
-/*阅读(默认)*/
-/*辅助阅读*/
-/*信息*/
-/*成功*/
-/*提醒/警告*/
-/*错误/强调*/
-/*黑色*/
-/*白色*/
-/*UI1502---xui-paging (css)---STA*/
-.mc-paging[data-mcui=ui1503] > .mc-paging-nav {
-  display: inline-block;
-  list-style: none;
-  position: relative;
-}
-.mc-paging[data-mcui=ui1503] > .mc-paging-nav > * {
-  display: inline-block;
-  float: left;
-  min-width: 2.5rem;
-  height: 2.5rem;
-  line-height: 2.4rem;
-  position: relative;
-  background: #ffffff;
-  border: 1px solid #dfdfdf;
-  text-align: center;
-  cursor: pointer;
-  transition: background 0.2s;
-  -moz-transition: background 0.2s;
-  -webkit-transition: background 0.2s;
-  -o-transition: all 0.2s;
-  margin-right: -1px;
-}
-.mc-paging[data-mcui=ui1503] > .mc-paging-nav > *.group {
-  width: 6rem;
-  margin-right: 5px;
-  border: 0;
-}
-.mc-paging[data-mcui=ui1503] > .mc-paging-nav > *:first-child {
-  border-radius: 3px 0 0 3px;
-}
-.mc-paging[data-mcui=ui1503] > .mc-paging-nav > *:last-child {
-  border: 1px solid #dfdfdf;
-  border-radius: 0 3px 3px 0;
-}
-.mc-paging[data-mcui=ui1503] > .mc-paging-nav > *.prve:after,
-.mc-paging[data-mcui=ui1503] > .mc-paging-nav > *.next:after {
-  display: inline-block;
-  content: "";
-  width: 0.45rem;
-  height: 0.45rem;
-  border: 0.45rem solid transparent;
-}
-.mc-paging[data-mcui=ui1503] > .mc-paging-nav > *.prve:after {
-  border-right-color: #999999;
-  margin-left: -0.45rem;
-}
-.mc-paging[data-mcui=ui1503] > .mc-paging-nav > *.next:after {
-  border-left-color: #999999;
-  margin-right: -0.45rem;
-}
-.mc-paging[data-mcui=ui1503] > .mc-paging-nav > *.frist:before,
-.mc-paging[data-mcui=ui1503] > .mc-paging-nav > *.last:before {
-  display: inline-block;
-  content: "";
-  width: 2px;
-  height: .9rem;
-  background: #999999;
-  border-radius: 1px;
-}
-.mc-paging[data-mcui=ui1503] > .mc-paging-nav > *.frist:after,
-.mc-paging[data-mcui=ui1503] > .mc-paging-nav > *.last:after {
-  display: inline-block;
-  content: "";
-  width: 0.45rem;
-  height: 0.45rem;
-  border: 0.45rem solid transparent;
-}
-.mc-paging[data-mcui=ui1503] > .mc-paging-nav > *.last:before {
-  margin-right: -0.8rem;
-}
-.mc-paging[data-mcui=ui1503] > .mc-paging-nav > *.frist:after {
-  border-right-color: #999999;
-  margin-left: -0.2rem;
-}
-.mc-paging[data-mcui=ui1503] > .mc-paging-nav > *.last:after {
-  border-left-color: #999999;
-  margin-right: -0.6rem;
-}
-/*---UI1503 xui-paging END---*/
-.mc-paging[data-mcui=ui1503][data-sz=s] > .mc-paging-nav > * {
-  min-width: 2.5rem;
-  height: 2.5rem;
-  line-height: 2.4rem;
-}
-.mc-paging[data-mcui=ui1503][data-sz=m] > .mc-paging-nav > * {
-  min-width: 3rem;
-  height: 3rem;
-  line-height: 3rem;
-}
-.mc-paging[data-mcui=ui1503][data-sz=l] > .mc-paging-nav > * {
-  min-width: 3.5rem;
-  height: 3.5rem;
-  line-height: 3.4rem;
-}