@neatui/css 1.0.27 → 2.0.0-beta.0

package/components/btns/btns@a.scss

@@ -1,6 +1,6 @@
 @use 'sass:math';
 $size: xs, s, m, l, xl;
-$type: none, main, vice, text, link, read, note, case, line, weak, back, info, well, warn, risk, w, b;
+$type: none, main, text, link, read, note, case, line, weak, back, info, well, warn, risk, w, b;
 
 // 基础
 %btnBase {
@@ -23,9 +23,7 @@ $type: none, main, vice, text, link, read, note, case, line, weak, back, info, w
     white-space: nowrap;
     color: inherit;
     box-shadow: inset 0 0 0 1px currentColor;
-    @include theme {
-      background: co(weak);
-    }
+    background: co(var(--co-weak));
   }
 
   & > * {
@@ -43,12 +41,6 @@ body [ui-btn~='@a'] {
   // 基础样式
   @extend %btnBase;
 
-  // &[ui-btn~=':flex'] {
-  //   display: inline-flex;
-  //   justify-content: center;
-  //   align-items: center;
-  // }
-
   // 绝对尺寸
   &[ui-btn~=':abs'] {
     height: 2.5rem;
@@ -63,11 +55,9 @@ body [ui-btn~='@a'] {
 
   // 移入状态
   &:hover {
-    @include theme {
-      box-shadow:
-        inset 0 0 0 1px co(line),
-        inset 0 0 0 100em rgba(co(text), 0.04);
-    }
+    box-shadow:
+      inset 0 0 0 1px var(--co-line),
+      inset 0 0 0 100em var(--co-text-xs);
   }
 
   // 按下状态
@@ -169,58 +159,46 @@ body [ui-btn~='@a'] {
   // 按钮颜色
   @each $name in $type {
     &[ui-btn~='#{$name}'] {
-      @if ($name == 'none' or $name == 'weak' or $name == 'back') {
-        @include theme {
-          background: co($name);
-        }
+      @if ($name == 'none' or $name == 'var(--co-weak)' or $name == 'back') {
+        // @include theme {
+        background: var(--co-#{$name});
+        // }
         color: inherit;
       } @else {
-        @include theme {
-          // 背景色
-          background: co($name);
-          color: co(fore);
-        }
+        // @include theme {
+        // 背景色
+        background: var(--co-#{$name});
+        color: var(--co-fore);
+        // }
       }
       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(co(text), 0.04);
-        }
+        box-shadow:
+          inset 0 0 0 1px transparent,
+          inset 0 0 0 100em var(--co-text-xs);
       }
 
       // 边框式
       &[ui-btn~=':border'] {
         background: transparent;
         @if ($name == 'line' or $name == 'case') {
-          @include theme {
-            color: co(read);
-          }
+          color: var(--co-read);
         } @else {
-          @include theme {
-            color: co($name);
-          }
-        }
-        @include theme {
-          box-shadow: inset 0 0 0 1px co($name);
+          color: var(--co-#{$name});
         }
+        box-shadow: inset 0 0 0 1px var(--co-#{$name});
 
         &:hover {
-          @include theme {
-            box-shadow:
-              inset 0 0 0 1px co($name),
-              inset 0 0 0 100em rgba(co($name), 0.08);
-          }
+          box-shadow:
+            inset 0 0 0 1px var(--co-#{$name}),
+            inset 0 0 0 100em var(--co-#{$name}-xs);
         }
       }
 
       // 下划线
       &[ui-btn~=':underline'] {
-        @include theme {
-          color: co($name);
-        }
+        color: var(--co-#{$name});
         background: transparent;
         box-shadow: inset 0 0 0 1px transparent;
 
@@ -291,11 +269,9 @@ body [ui-btn~='@a'] {
 
   // 移入状态
   & > *:hover {
-    @include theme {
-      box-shadow:
-        inset 0 0 0 1px co(line),
-        inset 0 0 0 100em rgba(co(text), 0.04);
-    }
+    box-shadow:
+      inset 0 0 0 1px var(--co-line),
+      inset 0 0 0 100em var(--co-text-xs);
   }
 
   // 按下状态
@@ -336,7 +312,6 @@ body [ui-btn~='@a'] {
     &[ui-btns~='#{$i}'] {
       & > * {
         height: #{$base}em;
-        // line-height: #{$base}em;
         padding: 0 #{calc(($base - 0.5) / 2)}em;
       }
 
@@ -348,7 +323,6 @@ body [ui-btn~='@a'] {
 
       &[ui-btns~=':abs'] > * {
         height: #{$base}rem;
-        // line-height: #{$base}rem;
         padding: 0 #{calc(($base - 0.5) / 2)}rem;
       }
     }
@@ -357,7 +331,6 @@ body [ui-btn~='@a'] {
       &[ui-btns~='mob-#{$i}'] {
         & > * {
           height: #{$base}em;
-          // line-height: #{$base}em;
           padding: 0 #{calc(($base - 0.5) / 2)}em;
         }
 
@@ -369,7 +342,6 @@ body [ui-btn~='@a'] {
 
         &[ui-btns~=':abs'] > * {
           height: #{$base}rem;
-          // line-height: #{$base}rem;
           padding: 0 #{calc(($base - 0.5) / 2)}rem;
         }
       }
@@ -378,7 +350,6 @@ body [ui-btn~='@a'] {
       &[ui-btns~='pad-#{$i}'] {
         & > * {
           height: #{$base}em;
-          // line-height: #{$base}em;
           padding: 0 #{calc(($base - 0.5) / 2)}em;
         }
 
@@ -390,7 +361,6 @@ body [ui-btn~='@a'] {
 
         &[ui-btns~=':abs'] > * {
           height: #{$base}rem;
-          // line-height: #{$base}rem;
           padding: 0 #{calc(($base - 0.5) / 2)}rem;
         }
       }
@@ -404,26 +374,20 @@ body [ui-btn~='@a'] {
     &[ui-btns~='#{$name}'] {
       & > * {
         @if ($name == 'none' or $name == 'weak' or $name == 'back') {
-          @include theme {
-            background: co($name);
-          }
+          background: var(--co-#{$name});
           color: inherit;
         } @else {
-          @include theme {
-            // 背景色
-            background: co($name);
-            color: co(fore);
-          }
+          // 背景色
+          background: var(--co-#{$name});
+          color: var(--co-fore);
         }
 
         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(co(text), 0.04);
-          }
+          box-shadow:
+            inset 0 0 0 1px transparent,
+            inset 0 0 0 100em var(--co-text-xs);
         }
       }
 
@@ -431,32 +395,22 @@ body [ui-btn~='@a'] {
       &[ui-btns~=':border'] > * {
         background: transparent;
         @if ($name == 'line') {
-          @include theme {
-            color: co(read);
-          }
+          color: var(--co-read);
         } @else {
-          @include theme {
-            color: co($name);
-          }
-        }
-        @include theme {
-          box-shadow: inset 0 0 0 1px co($name);
+          color: var(--co-#{$name});
         }
+        box-shadow: inset 0 0 0 1px var(--co-#{$name});
 
         &:hover {
-          @include theme {
-            box-shadow:
-              inset 0 0 0 1px co($name),
-              inset 0 0 0 100em rgba(co($name), 0.08);
-          }
+          box-shadow:
+            inset 0 0 0 1px var(--co-#{$name}),
+            inset 0 0 0 100em var(--co-#{$name}-xs);
         }
       }
 
       // 下划线
       &[ui-btns~=':underline'] > * {
-        @include theme {
-          color: co($name);
-        }
+        color: var(--co-#{$name});
         background: transparent;
         box-shadow: inset 0 0 0 1px transparent;
 

package/components/btns/btns@b.scss

@@ -1,6 +1,6 @@
 @use 'sass:math';
 $size: 'xs', 's', 'm', 'l', 'xl';
-$type: 'none', 'main', 'vice', 'text', 'read', 'weak', 'back', 'info', 'well', 'warn', 'risk';
+$type: 'none', 'main', 'text', 'read', 'weak', 'back', 'info', 'well', 'warn', 'risk';
 
 // 按钮
 [ui-btn~='@b'] {
@@ -21,11 +21,11 @@ $type: 'none', 'main', 'vice', 'text', 'read', 'weak', 'back', 'info', 'well', '
     border: 0;
     user-select: none;
     white-space: nowrap;
-    @include theme {
-      color: co(text);
-      background: co(weak);
-      box-shadow: inset 0 0 0 1px co(line);
-    }
+    // @include theme {
+    color: var(--co-text);
+    background: var(--co-weak);
+    box-shadow: inset 0 0 0 1px var(--co-line);
+    // }
   }
 
   & > * {
@@ -51,11 +51,11 @@ $type: 'none', 'main', 'vice', 'text', 'read', 'weak', 'back', 'info', 'well', '
 
   // 移入状态
   &:hover {
-    @include theme {
-      box-shadow:
-        inset 0 0 0 1px co(line),
-        inset 0 0 0 100em rgba(co(text), 0.04);
-    }
+    // @include theme {
+    box-shadow:
+      inset 0 0 0 1px var(--co-line),
+      inset 0 0 0 100em var(--co-text-xs);
+    // }
   }
 
   // 按下状态
@@ -118,14 +118,14 @@ $type: 'none', 'main', 'vice', 'text', 'read', 'weak', 'back', 'info', 'well', '
     &[ui-btn~='#{$name}'] {
       @if ($name == 'none' or $name == 'weak' or $name == 'back') {
         @include theme {
-          background: co($name);
+          background: var(--co-#{$name});
         }
         color: inherit;
       } @else {
         @include theme {
           // 背景色
-          $co: co($name);
-          background-image: linear-gradient(180deg, saturate($co, 5%) 0%, mix($co, co(text), 80%) 100%);
+          $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);
 
           // 智能计算文字颜色
@@ -144,7 +144,7 @@ $type: 'none', 'main', 'vice', 'text', 'read', 'weak', 'back', 'info', 'well', '
         @include theme {
           box-shadow:
             inset 0 0 0 1px transparent,
-            inset 0 0 0 100em rgba(co(text), 0.04);
+            inset 0 0 0 100em rgba(var(--co-text), 0.04);
         }
       }
 
@@ -152,20 +152,20 @@ $type: 'none', 'main', 'vice', 'text', 'read', 'weak', 'back', 'info', 'well', '
       &[ui-btn~=':border'] {
         background: transparent;
         @include theme {
-          color: co($name);
+          color: var(--co-#{$name});
           box-shadow:
-            inset 0 0 0 1px co($name),
+            inset 0 0 0 1px var(--co-#{$name}),
             inset 0 -0.2em 0 0 co(back),
-            inset 0 -0.3em 0 0 co($name);
+            inset 0 -0.3em 0 0 var(--co-#{$name});
         }
 
         &:hover {
           @include theme {
             box-shadow:
-              inset 0 0 0 1px co($name),
+              inset 0 0 0 1px var(--co-#{$name}),
               inset 0 -0.2em 0 0 co(back),
-              inset 0 -0.3em 0 0 co($name),
-              inset 0 0 0 100em rgba(co($name), 0.08);
+              inset 0 -0.3em 0 0 var(--co-#{$name}),
+              inset 0 0 0 100em rgba(var(--co-#{$name}), 0.08);
           }
         }
       }
@@ -173,7 +173,7 @@ $type: 'none', 'main', 'vice', 'text', 'read', 'weak', 'back', 'info', 'well', '
       // 下划线
       &[ui-btn~=':underline'] {
         @include theme {
-          color: co($name);
+          color: var(--co-#{$name});
         }
         background: transparent;
         box-shadow: inset 0 0 0 1px transparent;

package/components/btns/btns@c.scss

@@ -1,6 +1,6 @@
 @use 'sass:math';
 $size: 'xs', 's', 'm', 'l', 'xl';
-$type: 'none', 'main', 'vice', 'text', 'read', 'weak', 'back', 'info', 'well', 'warn', 'risk';
+$type: 'none', 'main', 'text', 'read', 'weak', 'back', 'info', 'well', 'warn', 'risk';
 
 // 按钮
 [ui-btn~='@c'] {
@@ -22,7 +22,7 @@ $type: 'none', 'main', 'vice', 'text', 'read', 'weak', 'back', 'info', 'well', '
     @include theme {
       color: co(text);
       background: co(weak);
-      box-shadow: inset 0 0 0 1px co(line);
+      box-shadow: inset 0 0 0 1pxvar (--co-line);
     }
   }
 

package/components/btns/mcui@btns.scss

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

package/components/card/card@a.scss

@@ -1,4 +1,4 @@
-$co: 'none', 'main', 'vice', 'text', 'read', 'note', 'line', 'case', 'weak', 'fore', 'back', 'info', 'well', 'warn', 'risk';
+$co: 'none', 'main', 'text', 'read', 'note', 'line', 'case', 'weak', 'fore', 'back', 'info', 'well', 'warn', 'risk';
 $sz: 'xs', 's', 'm', 'l', 'xl';
 
 @mixin card_a($name: 'ui-card', $group: 0, $path: '') {
@@ -10,15 +10,15 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     transition: box-shadow 0.3s;
 
     &.active {
-      @include theme {
-        border: 1px solid co(read);
-      }
+      // @include theme {
+      border: 1px solid var(--co-read);
+      // }
     }
 
     & > * {
-      @include theme {
-        background-color: co(fore);
-      }
+      // @include theme {
+      background-color: var(--co-fore);
+      // }
 
       &:first-child {
         border-top-left-radius: 0.4em;
@@ -70,9 +70,9 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
           all 0.2s,
           padding 0.35s,
           margin 0.35s;
-        @include theme {
-          background: rgba(co(fore), 0.8);
-        }
+        // @include theme {
+        background: var(--co-fore-lm);
+        // }
         padding: 1em 1.5em;
         margin-bottom: 1px;
       }
@@ -102,17 +102,17 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     // 头部
     [ui-card-head] {
       // margin-bottom: 2px;
-      @include theme {
-        border-bottom: 2px solid rgba(co(back), 0.7);
-      }
+      // @include theme {
+      border-bottom: 2px solid var(--co-back-ls);
+      // }
     }
 
     // 底部
     [ui-card-foot] {
       // margin-top: 1px;
-      @include theme {
-        border-top: 1px solid rgba(co(back), 0.7);
-      }
+      // @include theme {
+      border-top: 1px solid var(--co-back-ls);
+      // }
     }
   }
 
@@ -120,38 +120,38 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     // 背景
     &[#{$name}~='bg:#{$i}']#{$path} {
       & > * {
-        @include theme {
-          background-color: co($i);
-        }
+        // @include theme {
+        background-color: var(--co-#{$i});
+        // }
 
         &[ui-card-tool] {
-          @include theme {
-            background-color: rgba(co($i), 0.8);
-          }
+          // @include theme {
+          background-color: var(--co-#{$i}-lm);
+          // }
         }
       }
     }
 
     // 边框
     &[#{$name}~='bk:#{$i}']#{$path} {
-      @include theme {
-        border: 1px solid co($i);
-      }
+      // @include theme {
+      border: 1px solid var(--co-#{$i});
+      // }
     }
 
     // 颜色
     &[#{$name}~='co:#{$i}']#{$path} {
-      @include theme {
-        color: co($i);
-      }
+      // @include theme {
+      color: var(--co-#{$i});
+      // }
     }
   }
   // 交互
   &[#{$name}~='ux:hover']#{$path} {
     &:hover {
-      @include theme {
-        box-shadow: 0 1px 6px co(deep);
-      }
+      // @include theme {
+      box-shadow: 0 1px 6px var(--co-text-xs);
+      // }
     }
   }
 
@@ -193,9 +193,9 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     top: 0;
     z-index: 10;
     overflow: auto;
-    @include theme {
-      background-color: co(back);
-    }
+    // @include theme {
+    background-color: var(--co-back);
+    // }
 
     [ui-card-body] {
       overflow: auto;
@@ -224,9 +224,9 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     top: 0;
     z-index: 10;
     overflow: auto;
-    @include theme {
-      background-color: co(back);
-    }
+    // @include theme {
+    background-color: var(--co-back);
+    // }
 
     [ui-card-body] {
       overflow: auto;

package/components/card/card@b.scss

@@ -6,16 +6,16 @@
       position: relative;
       transition: box-shadow 0.3s;
       border-radius: 0.4em;
-      @include theme {
-        background: co(fore);
-        &:hover {
-          box-shadow: 0 1px 6px co(line);
-        }
+      // @include theme {
+      background: var(--co-fore);
+      &:hover {
+        box-shadow: 0 1px 6px var(--co-line);
       }
+      // }
       &.active {
-        @include theme {
-          border: 1px solid co(read);
-        }
+        // @include theme {
+        border: 1px solid var(--co-read);
+        // }
       }
 
       // 标题
@@ -26,9 +26,9 @@
           padding: 0 1rem;
           line-height: 3.5rem;
         }
-        @include theme {
-          border-bottom: 1px solid rgba(co(line), 0.5);
-        }
+        // @include theme {
+        border-bottom: 1px solid var(--co-line-mm);
+        // }
       }
       // 主体
       [ui-card-body] {

package/components/cite/cite@a.scss

@@ -17,8 +17,7 @@ $state: 'main', 'read', 'well', 'warn', 'risk', 'info';
   @each $key in $state {
     @include theme {
       $co: co($key);
-      $bk: co(line);
-      @if ($key== 'main') {
+      $bk:var(--co-line) @if ($key== 'main') {
         &,
         &[ui-cite~='#{$key}'] {
           @include cite($co, $bk);

package/components/demo/demo@a.scss

@@ -2,7 +2,7 @@
   & {
     border-radius: 0.25em;
     @include theme {
-      border: 1px solid co(line);
+      border: 1px solidvar(--co-line)
     }
   }
 
@@ -17,8 +17,8 @@
     text-align: center;
     padding: 0.25em;
     @include theme {
-      border-top: 1px solid co(line);
-      border-bottom: 1px solid co(line);
+      border-top: 1px solidvar(--co-line)
+      border-bottom: 1px solidvar(--co-line)
       background-color: rgba(co(weak), 0.5);
     }
   }