@neatui/css 3.10.3 → 3.10.5

package/core/theme.scss

@@ -7,6 +7,10 @@
 @use 'sass:string';
 @use 'sass:math';
 
+// 颜色分级
+$levels: xxs, xs, ss, sm, sl, ms, mm, ml, ls, lm, ll, xl, xxl;
+$exclude-keys: (w, b, fore, back, desc, note, case, deep, code, link);
+
 // 整数颜色计算
 @function mix-int($c1, $c2, $w) {
   $mix: color.mix($c1, $c2, $w);
@@ -33,6 +37,20 @@
   @return mix-int(black, $c, $w);
 }
 
+@function merge-theme($theme) {
+  $out: ();
+  @each $themeName, $colors in $theme {
+    @if meta.type-of($colors) == 'map' {
+      @each $key in map.keys($colors) {
+        @if not list.index($out, $key) {
+          $out: list.append($out, $key, comma);
+        }
+      }
+    }
+  }
+  @return $out;
+}
+
 @mixin theme(
   $theme: (
     _sys: (
@@ -100,93 +118,49 @@
     }
   }
 
-  // 生成变量
-  $levels: xxs, xs, ss, sm, sl, ms, mm, ml, ls, lm, ll, xl, xxl;
-  $colors: main, text, well, warn, risk;
+  // 第一主题
   $f: list.nth(list.nth($theme, 1), 1);
+
   @each $i in $theme {
     $n: list.nth($i, 1);
     $s: list.nth($i, 2);
-    @if ($n == $f) {
-      :root,
-      [theme~='#{$n}'] {
-        @each $c in $s {
-          $k: list.nth($c, 1);
-          $v: list.nth($c, 2);
-          --co-#{$k}: #{$v};
-          @if ($k != 'w' and $k != 'b') {
-            --co-#{$k}-fore: #{mix-int($v, map.get($s, 'fore'), 100%)};
-          }
-          @if ($k == 'main' or $k == 'well' or $k == 'warn' or $k == 'risk' or $k == 'info') {
-            --co-#{$k}-text: #{mix-int($v, map.get($s, 'text'), 100%)};
-          }
 
-          $ls: 0.035;
-          @each $l in $levels {
-            // 透明度
-            @if ($k != 'none') {
-              --co-#{$k}-#{$l}: #{rgba($v, $ls)};
-              @if ($k != 'w' and $k != 'b') {
-                --co-#{$k}-fore-#{$l}: #{mix-int($v, map.get($s, 'fore'), $ls * 100%)};
-              }
-              @if ($k == 'main' or $k == 'well' or $k == 'warn' or $k == 'risk' or $k == 'info') {
-                --co-#{$k}-text-#{$l}: #{mix-int($v, map.get($s, 'text'), $ls * 100%)};
-              }
-            }
+    // 动态选择器：首个主题多一个 :root
+    $scope: if($n == $f, ':root', '[theme~="#{$n}"]');
+    #{$scope} {
+      @each $c in $s {
+        $k: list.nth($c, 1);
+        $v: list.nth($c, 2);
 
-            @if ($ls == 0.035) {
-              $ls: 0.05;
-            } @else if($ls <= 0.1 or $ls >= 0.8) {
-              $ls: $ls + 0.05;
-            } @else {
-              $ls: $ls + 0.1;
-            }
-          }
-        }
-      }
-    } @else {
-      [theme~='#{$n}'] {
-        @each $c in $s {
-          $k: list.nth($c, 1);
-          $v: list.nth($c, 2);
-          --co-#{$k}: #{$v};
+        // 颜色变量
+        --co-#{$k}: #{$v};
 
-          @if ($k != 'w' and $k != 'b') {
-            --co-#{$k}-fore: #{mix-int($v, map.get($s, 'fore'), 100%)};
-          }
+        // 透明度梯度
+        $ls: 0.035;
+        @each $l in $levels {
+          @if ($k != 'none') {
+            // @TODO 最新版本规划
+            --co-#{$k}-o-#{$l}: #{rgba($v, $ls)};
 
-          @if ($k == 'main' or $k == 'well' or $k == 'warn' or $k == 'risk' or $k == 'info') {
-            --co-#{$k}-text: #{mix-int($v, map.get($s, 'text'), 100%)};
+            // @if not list.index($exclude-keys, $k) {
+            --co-#{$k}-w-#{$l}: #{mix-int($v, map.get($s, 'fore'), $ls * 100%)};
+            --co-#{$k}-b-#{$l}: #{mix-int($v, map.get($s, 'text'), $ls * 100%)};
+            // }
           }
 
-          $ls: 0.035;
-          @each $l in $levels {
-            // 透明度
-            @if ($k != 'none') {
-              --co-#{$k}-#{$l}: #{rgba($v, $ls)};
-
-              @if ($k != 'w' and $k != 'b') {
-                --co-#{$k}-fore-#{$l}: #{mix-int($v, map.get($s, 'fore'), $ls * 100%)};
-              }
-
-              @if ($k == 'main' or $k == 'well' or $k == 'warn' or $k == 'risk' or $k == 'info') {
-                --co-#{$k}-text-#{$l}: #{mix-int($v, map.get($s, 'text'), $ls * 100%)};
-              }
-            }
-            @if ($ls == 0.035) {
-              $ls: 0.05;
-            } @else if($ls <= 0.1 or $ls >= 0.8) {
-              $ls: $ls + 0.05;
-            } @else {
-              $ls: $ls + 0.1;
-            }
+          @if ($ls == 0.035) {
+            $ls: 0.05;
+          } @else if ($ls <= 0.1 or $ls >= 0.8) {
+            $ls: $ls + 0.05;
+          } @else {
+            $ls: $ls + 0.1;
           }
         }
       }
     }
   }
 
-  // 生成颜色
+  // 全局颜色
   html,
   [theme] {
     color: var(--co-text);
@@ -218,114 +192,65 @@
     border-color: currentColor !important;
   }
 
-  // 随机颜色
-  .bg-0 {
-    background-color: var(--co-main);
-  }
+  // 合并主题
+  $themes: merge-theme($theme);
+  // 生成样式
+  @each $n in $themes {
+    .co-#{$n},
+    .co-#{$n}\:hover:hover,
+    .co-#{$n}\:active:active {
+      color: var(--co-#{$n}) !important;
+      fill: var(--co-#{$n}) !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;
-  }
+    .bg-#{$n},
+    .bg-#{$n}\:hover:hover,
+    .bg-#{$n}\:active:active {
+      background-color: var(--co-#{$n}) !important;
+    }
 
-  $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;
+    .bk-#{$n},
+    .bk-#{$n}\:hover:hover,
+    .bk-#{$n}\:active:active {
+      border-color: var(--co-#{$n}) !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;
+    @each $i in $levels {
+      .co-#{$n}-o-#{$i},
+      .co-#{$n}-o-#{$i}\:hover:hover,
+      .co-#{$n}-o-#{$i}\:active:active,
+      .co-#{$n}-w-#{$i},
+      .co-#{$n}-w-#{$i}\:hover:hover,
+      .co-#{$n}-w-#{$i}\:active:active,
+      .co-#{$n}-b-#{$i},
+      .co-#{$n}-b-#{$i}\:hover:hover,
+      .co-#{$n}-b-#{$i}\:active:active {
+        color: var(--co-#{$n}-o-#{$i}) !important;
+        fill: var(--co-#{$n}-o-#{$i}) !important;
       }
-      .bk-#{$n},
-      .bk-#{$n}\:hover:hover,
-      .bk-#{$n}\:active:active {
-        border-color: var(--co-#{$n}) !important;
+
+      .bg-#{$n}-o-#{$i},
+      .bg-#{$n}-o-#{$i}\:hover:hover,
+      .bg-#{$n}-o-#{$i}\:active:active,
+      .bg-#{$n}-w-#{$i},
+      .bg-#{$n}-w-#{$i}\:hover:hover,
+      .bg-#{$n}-w-#{$i}\:active:active,
+      .bg-#{$n}-b-#{$i},
+      .bg-#{$n}-b-#{$i}\:hover:hover,
+      .bg-#{$n}-b-#{$i}\:active:active {
+        background-color: var(--co-#{$n}-o-#{$i}) !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;
-        }
+      .bk-#{$n}-o-#{$i},
+      .bk-#{$n}-o-#{$i}\:hover:hover,
+      .bk-#{$n}-o-#{$i}\:active:active,
+      .bk-#{$n}-w-#{$i},
+      .bk-#{$n}-w-#{$i}\:hover:hover,
+      .bk-#{$n}-w-#{$i}\:active:active,
+      .bk-#{$n}-b-#{$i},
+      .bk-#{$n}-b-#{$i}\:hover:hover,
+      .bk-#{$n}-b-#{$i}\:active:active {
+        border-color: var(--co-#{$n}-o-#{$i}) !important;
       }
     }
   }

package/core/trim.scss

@@ -409,24 +409,6 @@
     }
     $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;
@@ -469,24 +451,6 @@
     }
     $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

@@ -23,7 +23,7 @@
     cursor: pointer;
   }
   &:hover {
-    box-shadow: inset 0 0 0 100em var(--co-text-xxs);
+    box-shadow: inset 0 0 0 100em var(--co-text-o-xxs);
   }
 }
 
@@ -35,7 +35,7 @@
     cursor: pointer;
   }
   &:hover {
-    box-shadow: 0 0.1em 0.5em var(--co-text-xxs);
+    box-shadow: 0 0.1em 0.5em var(--co-text-o-xxs);
   }
 }
 
@@ -282,7 +282,7 @@
     top: 130%;
 
     background: var(--co-fore);
-    box-shadow: 0 1px 0.3em 1px var(--co-text-ss);
+    box-shadow: 0 1px 0.3em 1px var(--co-text-o-ss);
 
     padding: 1.5rem;
     right: 0.15rem;

package/package.json

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