@neatui/css 1.0.27 → 2.0.0-beta.0

package/components/form/form@c/switch.scss

@@ -52,9 +52,9 @@ $co: 'info', 'well', 'warn', 'risk';
       flex-shrink: 0;
       position: relative;
       top: 0.15em;
-      @include theme {
-        background-color: mix(co(weak), co(fore), 50%);
-      }
+
+      background-color: var(--bg-weak);
+
       background-image: radial-gradient(circle at 50% 50%, currentColor 28%, transparent 30%);
       background-position-x: -0.2em;
       transition:
@@ -62,16 +62,13 @@ $co: 'info', 'well', 'warn', 'risk';
         background-position-x ease-out 0.3s;
 
       &:checked {
-        @include theme {
-          background-color: co(main);
-          background-image: radial-gradient(circle at 50% 50%, co(fore) 28%, transparent 30%);
-        }
+        background-color: var(--co-main);
+        background-image: radial-gradient(circle at 50% 50%, var(--co-fore) 28%, transparent 30%);
+
         background-position-x: 0.2em;
         &,
         & + * {
-          @include theme {
-            color: co(main);
-          }
+          color: var(--co-main);
         }
       }
 

package/components/form/form@c/textarea.scss

@@ -24,60 +24,48 @@ $co: 'info', 'well', 'warn', 'risk';
     transition: all 0.5s;
     background-color: transparent;
 
-    @include theme {
-      box-shadow: inset 0 0 0 1px co(case);
-      background-color: mix(co(weak), co(fore), 50%);
-    }
+    box-shadow: inset 0 0 0 1px var(--co-case);
+    background-color: var(--bg-weak);
 
     &:hover {
-      @include theme {
-        box-shadow: inset 0 0 0 1px rgba(co(main), 0.5);
-      }
+      box-shadow: inset 0 0 0 1px var(--co-main-mm);
     }
 
     &.form-focus,
     &:focus {
       background-color: transparent;
-      @include theme {
-        box-shadow:
-          inset 0 0 0 1px rgba(co(main), 0.5),
-          0 0 0 2px rgba(co(main), 0.15);
-      }
+      box-shadow:
+        inset 0 0 0 1px var(--co-main-mm),
+        0 0 0 2px var(--co-main-ss);
     }
 
     // 颜色
     @each $c in $co {
       &[ui-form~='co:#{$c}'] {
-        @include theme {
-          color: mix(co($c), co(text), 85%);
-          box-shadow:
-            inset 0 0 0 1px rgba(co($c), 0.6),
-            0 0 0 2px rgba(co($c), 0.15) !important;
-          background-color: rgba(co($c), 0.035);
-        }
+        color: var(--co-#{$c}-text);
+        box-shadow:
+          inset 0 0 0 1px var(--co-#{$c}-ml),
+          0 0 0 2px var(--co-#{$c}-ss) !important;
+        background-color: var(--co-#{$c}-sl);
       }
 
       &[ui-form~='co:hover:#{$c}'] {
         &:hover {
-          @include theme {
-            color: mix(co($c), co(text), 85%);
-            box-shadow:
-              inset 0 0 0 1px rgba(co($c), 0.6),
-              0 0 0 2px rgba(co($c), 0.15) !important;
-            background-color: rgba(co($c), 0.035);
-          }
+          color: var(--co-#{$c}-text);
+          box-shadow:
+            inset 0 0 0 1px var(--co-#{$c}-ml),
+            0 0 0 2px var(--co-#{$c}-ss) !important;
+          background-color: var(--co-#{$c}-sl);
         }
       }
 
       &[ui-form~='co:focus:#{$c}'] {
         &:focus-within {
-          @include theme {
-            color: mix(co($c), co(text), 85%);
-            box-shadow:
-              inset 0 0 0 1px rgba(co($c), 0.6),
-              0 0 0 2px rgba(co($c), 0.15) !important;
-            background-color: rgba(co($c), 0.035);
-          }
+          color: var(--co-#{$c}-text);
+          box-shadow:
+            inset 0 0 0 1px var(--co-#{$c}-ml),
+            0 0 0 2px var(--co-#{$c}-ss) !important;
+          background-color: var(--co-#{$c}-sl);
         }
       }
     }

package/components/form/form@c/upload.scss

@@ -24,10 +24,9 @@
       transition: all 0.5s;
       border-style: solid;
       border-width: 1px;
-      @include theme {
-        border-color: co(line);
-        background-color: mix(co(weak), co(fore), 50%);
-      }
+
+      border-color: var(--co-line);
+      background-color: var(--bg-weak);
     }
 
     @keyframes am-file-add {
@@ -71,9 +70,7 @@
           top: 0;
           left: 0;
 
-          @include theme {
-            background-color: mix(co(weak), co(fore), 50%);
-          }
+          background-color: var(--bg-weak);
         }
 
         img,
@@ -90,9 +87,9 @@
           position: absolute;
           width: 100%;
           height: 100%;
-          @include theme {
-            background-color: rgba(co(fore), 0.85);
-          }
+
+          background-color: var(--co-fore-lm);
+
           top: 0;
           right: 0;
         }
@@ -137,9 +134,9 @@
     [ui-form-input] {
       @extend %item;
       border-style: dashed;
-      @include theme {
-        border-color: co(case);
-      }
+
+      border-color: var(--co-case);
+
       input {
         position: absolute;
         width: 100%;
@@ -149,9 +146,7 @@
         opacity: 0;
 
         &:-webkit-autofill {
-          @include theme {
-            box-shadow: 0 0 0 1000px mix(co(weak), co(fore), 50%) inset;
-          }
+          box-shadow: 0 0 0 1000px var(--bg-weak) inset;
         }
       }
     }

package/components/form/form@d/input.scss

@@ -39,7 +39,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
 
     &:hover {
       @include theme {
-        box-shadow: inset 0 -1px 0 0 rgba(co(main), 0.5);
+        box-shadow: inset 0 -1px 0 0 var(--co-main-mm);
       }
     }
 
@@ -48,8 +48,8 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
       @include theme {
         background-color: co(fore);
         box-shadow:
-          inset 0 -1px 0 0 rgba(co(main), 0.5),
-          0 2px 0 0 rgba(co(main), 0.15);
+          inset 0 -1px 0 0 var(--co-main-mm),
+          0 2px 0 0 var(--co-main-ss);
       }
     }
 
@@ -85,7 +85,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
 
       &::-webkit-input-placeholder {
         @include theme {
-          color: rgba(co(read), 0.5);
+          color: var(--co-read-mm);
         }
       }
     }
@@ -290,10 +290,10 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     @each $c in $co {
       &[ui-form~='co:#{$c}'] {
         @include theme {
-          color: mix(co($c), co(text), 85%);
+          color: var(--co-#{$c}-text);
           box-shadow:
-            inset 0 -1px 0 0 rgba(co($c), 0.6),
-            0 2px 0 0 rgba(co($c), 0.15) !important;
+            inset 0 -1px 0 0 var(--co-#{$c}-ml),
+            0 2px 0 0 var(--co-#{$c}-ss) !important;
           background-color: transparent;
         }
       }
@@ -301,10 +301,10 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
       &[ui-form~='co:hover:#{$c}'] {
         &:hover {
           @include theme {
-            color: mix(co($c), co(text), 85%);
+            color: var(--co-#{$c}-text);
             box-shadow:
-              inset 0 -1px 0 0 rgba(co($c), 0.6),
-              0 2px 0 0 rgba(co($c), 0.15) !important;
+              inset 0 -1px 0 0 var(--co-#{$c}-ml),
+              0 2px 0 0 var(--co-#{$c}-ss) !important;
             background-color: transparent;
           }
         }
@@ -313,10 +313,10 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
       &[ui-form~='co:focus:#{$c}'] {
         &:focus-within {
           @include theme {
-            color: mix(co($c), co(text), 85%);
+            color: var(--co-#{$c}-text);
             box-shadow:
-              inset 0 -1px 0 0 rgba(co($c), 0.6),
-              0 2px 0 0 rgba(co($c), 0.15) !important;
+              inset 0 -1px 0 0 var(--co-#{$c}-ml),
+              0 2px 0 0 var(--co-#{$c}-ss) !important;
             background-color: transparent;
           }
         }

package/components/form/form@d/textarea.scss

@@ -30,7 +30,7 @@ $co: 'info', 'well', 'warn', 'risk';
 
     &:hover {
       @include theme {
-        box-shadow: inset 0 0 0 1px rgba(co(main), 0.5);
+        box-shadow: inset 0 0 0 1px var(--co-main-mm);
       }
     }
 
@@ -38,8 +38,8 @@ $co: 'info', 'well', 'warn', 'risk';
     &:focus {
       @include theme {
         box-shadow:
-          inset 0 0 0 1px rgba(co(main), 0.5),
-          0 0 0 2px rgba(co(main), 0.15);
+          inset 0 0 0 1px var(--co-main-mm),
+          0 0 0 2px var(--co-main-ss);
       }
     }
 
@@ -47,22 +47,22 @@ $co: 'info', 'well', 'warn', 'risk';
     @each $c in $co {
       &[ui-form~='co:#{$c}'] {
         @include theme {
-          color: mix(co($c), co(text), 85%);
+          color: var(--co-#{$c}-text);
           box-shadow:
-            inset 0 0 0 1px rgba(co($c), 0.6),
-            0 0 0 2px rgba(co($c), 0.15) !important;
-          background-color: rgba(co($c), 0.035);
+            inset 0 0 0 1px var(--co-#{$c}-ml),
+            0 0 0 2px var(--co-#{$c}-ss) !important;
+          background-color: var(--co-#{$c}-sl);
         }
       }
 
       &[ui-form~='co:hover:#{$c}'] {
         &:hover {
           @include theme {
-            color: mix(co($c), co(text), 85%);
+            color: var(--co-#{$c}-text);
             box-shadow:
-              inset 0 0 0 1px rgba(co($c), 0.6),
-              0 0 0 2px rgba(co($c), 0.15) !important;
-            background-color: rgba(co($c), 0.035);
+              inset 0 0 0 1px var(--co-#{$c}-ml),
+              0 0 0 2px var(--co-#{$c}-ss) !important;
+            background-color: var(--co-#{$c}-sl);
           }
         }
       }
@@ -70,11 +70,11 @@ $co: 'info', 'well', 'warn', 'risk';
       &[ui-form~='co:focus:#{$c}'] {
         &:focus-within {
           @include theme {
-            color: mix(co($c), co(text), 85%);
+            color: var(--co-#{$c}-text);
             box-shadow:
-              inset 0 0 0 1px rgba(co($c), 0.6),
-              0 0 0 2px rgba(co($c), 0.15) !important;
-            background-color: rgba(co($c), 0.035);
+              inset 0 0 0 1px var(--co-#{$c}-ml),
+              0 0 0 2px var(--co-#{$c}-ss) !important;
+            background-color: var(--co-#{$c}-sl);
           }
         }
       }
@@ -92,7 +92,7 @@ $co: 'info', 'well', 'warn', 'risk';
 
       &::-webkit-input-placeholder {
         @include theme {
-          color: rgba(co(read), 0.5);
+          color: var(--co-read-mm);
         }
       }
     }

package/components/form/form@d/upload.scss

@@ -25,7 +25,7 @@
       border-style: solid;
       border-width: 1px;
       @include theme {
-        border-color: co(line);
+        border-color:var(--co-line)
         background-color: co(fore);
       }
     }
@@ -91,7 +91,7 @@
           width: 100%;
           height: 100%;
           @include theme {
-            background-color: rgba(co(fore), 0.85);
+            background-color: var(--co-fore-lm);
           }
           top: 0;
           right: 0;

package/components/form/mcui@form.scss

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

package/components/form/radio@theme=aa.scss

@@ -49,13 +49,9 @@
 .ui-radio > input + * {
   -webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
-  -o-transition: all 0.3s;
+  -transition: all 0.3s;
   transition: all 0.3s;
 }
-.ui-radio[data-co='vice'] > input:checked + * {
-  background: #ffba46;
-  border: 1px solid #ffa81b;
-}
 .ui-radio[data-co='success'] > input:checked + * {
   background: #7cd22b;
   border: 1px solid #71c323;

package/components/grid/grid@a.scss

@@ -11,12 +11,11 @@
   & > * {
     position: relative;
     padding: 1.5em;
-    @include theme {
-      box-shadow:
-        inset -1px -1px 0 0 co(line),
-        -1px -1px 0 0 co(line);
-      background-color: co(fore);
-    }
+
+    box-shadow:
+      inset -1px -1px 0 0 var(--co-line),
+      -1px -1px 0 0 var(--co-line);
+    background-color: co(fore);
 
     &:hover {
       [ui-grid-select] {
@@ -38,9 +37,8 @@
       left: 0;
       top: 0;
       border-radius: 0.3em;
-      @include theme {
-        background-color: co(weak);
-      }
+
+      background-color: var(--co-weak);
     }
   }
 

package/components/imgs/base.scss

@@ -1,8 +1,7 @@
 [ui-imgs~=':strand'] {
   & > * {
     margin-right: -0.5em;
-    @include theme {
-      background-color: co(fore);
-    }
+
+    background-color: var(--co-fore);
   }
 }

package/components/imgs/imgs@a.scss

@@ -38,10 +38,8 @@
       }
 
       &:hover {
-        @include theme {
-          // border: 1px solid co(text);
-          box-shadow: inset 0 0 0 1px co(text);
-        }
+        box-shadow: inset 0 0 0 1px var(--co-text);
+
         & > * {
           transform: scale3d(0.85, 0.85, 1);
         }
@@ -49,18 +47,14 @@
 
       // 激活
       &.active {
-        @include theme {
-          // border: 1px solid co(main) !important;
-          box-shadow: inset 0 0 0 1px co(main);
-        }
+        // border: 1px solid var(--co-main) !important;
+        box-shadow: inset 0 0 0 1px var(--co-main);
       }
       // 选中
       &.selected,
       &[selected~='1'] {
-        @include theme {
-          // border: 1px solid co(main) !important;
-          box-shadow: inset 0 0 0 1px co(main);
-        }
+        // border: 1px solid var(--co-main) !important;
+        box-shadow: inset 0 0 0 1px var(--co-main);
 
         &::after {
           position: absolute;
@@ -78,10 +72,10 @@
             radial-gradient(circle at 47% 70%, currentColor 9%, transparent 10%), radial-gradient(circle at 53% 62%, currentColor 9%, transparent 10%),
             radial-gradient(circle at 59% 54%, currentColor 9%, transparent 10%), radial-gradient(circle at 65% 46%, currentColor 9%, transparent 10%),
             radial-gradient(circle at 71% 38%, currentColor 8%, transparent 9%);
-          @include theme {
-            background-color: co(main);
-            color: co(back);
-          }
+
+          background-color: var(--co-main);
+          color: var(--co-back);
+
           animation: am-selected 0.2s 0.1s both;
         }
       }
@@ -123,9 +117,7 @@
     @each $co in $color {
       &[#{$n}~='#{$co}'] {
         &#{$sub} {
-          @include theme {
-            box-shadow: inset 0 0 0 1px co($co);
-          }
+          box-shadow: inset 0 0 0 1px var(--co-#{$co});
         }
       }
     }

package/components/imgs/imgs@b.scss

@@ -126,7 +126,7 @@
       &[#{$n}~='#{$co}'] {
         &#{$sub} {
           @include theme {
-            box-shadow: inset 0 0 0 1px co($co);
+            box-shadow: inset 0 0 0 1px var(--co-#{$co});
           }
         }
       }

package/components/line/line@a.scss

@@ -16,9 +16,8 @@
     height: 1px;
     flex-grow: 1;
     flex-shrink: 1;
-    @include theme {
-      background: co(line);
-    }
+
+    background: var(--co-line);
   }
 
   & > * {
@@ -42,9 +41,7 @@
     &[ui-line~='co:#{$co}'] {
       &::before,
       &::after {
-        @include theme {
-          background: co($co);
-        }
+        background: var(--co-#{$co});
       }
     }
   }

package/components/line/line@b.scss

@@ -19,14 +19,10 @@
   }
 
   &::before {
-    @include theme {
-      background: linear-gradient(90deg, transparent 0%, co(line) 10%);
-    }
+    background: linear-gradient(90deg, transparent 0%, var(--co-line) 10%);
   }
   &::after {
-    @include theme {
-      background: linear-gradient(270deg, transparent 0%, co(line) 10%);
-    }
+    background: linear-gradient(270deg, transparent 0%, var(--co-line) 10%);
   }
 
   & > * {
@@ -49,14 +45,10 @@
   @each $co in $cos {
     &[ui-line~='co:#{$co}'] {
       &::before {
-        @include theme {
-          background: linear-gradient(90deg, transparent 0%, co($co) 10%);
-        }
+        background: linear-gradient(90deg, transparent 0%, var(--co-#{$co}) 10%);
       }
       &::after {
-        @include theme {
-          background: linear-gradient(270deg, transparent 0%, co($co) 10%);
-        }
+        background: linear-gradient(270deg, transparent 0%, var(--co-#{$co}) 10%);
       }
     }
   }

package/components/list/list@a.scss

@@ -1,14 +1,13 @@
-$type: 'main', 'vice', 'read', 'info', 'well', 'warn', 'risk';
+$type: 'main', 'read', 'info', 'well', 'warn', 'risk';
 
 [ui-list~='@a'] {
   // 基础样式
   & {
-    @include theme {
-      background-color: co(fore);
-      box-shadow:
-        inset 0 0.3rem 0 0 co(main),
-        inset 0 0 0 1px co(line);
-    }
+    background-color: var(--co-fore);
+    box-shadow:
+      inset 0 0.3rem 0 0 var(--co-main),
+      inset 0 0 0 1px var(--co-line);
+
     border-radius: 0.2rem;
 
     // 标题
@@ -21,9 +20,8 @@ $type: 'main', 'vice', 'read', 'info', 'well', 'warn', 'risk';
       padding: 0;
 
       & > * {
-        @include theme {
-          border-bottom: 1px solid mix(co(line), co(fore), 53%);
-        }
+        border-bottom: 1px solid var(--co-line-fore);
+
         padding: 1rem;
 
         &:last-of-type {
@@ -49,14 +47,11 @@ $type: 'main', 'vice', 'read', 'info', 'well', 'warn', 'risk';
   }
 
   // 主题颜色
-  @each $name in $type {
-    &[ui-list~='#{$name}'] {
-      @include theme {
-        // border-top: 0.3rem solid co($name);
-        box-shadow:
-          inset 0 0.3rem 0 0 co($name),
-          inset 0 0 0 1px co(line);
-      }
+  @each $co in $type {
+    &[ui-list~='#{$co}'] {
+      box-shadow:
+        inset 0 0.3rem 0 0 var(--co-#{$co}),
+        inset 0 0 0 1px var(--co-line);
     }
   }
 }

package/components/list/list@b.scss

@@ -1,4 +1,4 @@
-$cos: 'main', 'vice', 'read', 'info', 'well', 'warn', 'risk';
+$cos: 'main', 'read', 'info', 'well', 'warn', 'risk';
 
 [ui-list~='@b'] {
   // 容器
@@ -15,9 +15,8 @@ $cos: 'main', 'vice', 'read', 'info', 'well', 'warn', 'risk';
       height: 100%;
       top: 0;
       left: auto;
-      @include theme {
-        background: linear-gradient(0deg, rgba(co(line), 0) 0%, co(line) 3%);
-      }
+
+      background: linear-gradient(0deg, rgba(var(--co-line), 0) 0%, var(--co-line) 3%);
     }
   }
 
@@ -40,9 +39,8 @@ $cos: 'main', 'vice', 'read', 'info', 'well', 'warn', 'risk';
       left: 0;
       top: -0.2em;
       margin-left: -0.7em;
-      @include theme {
-        background-image: radial-gradient(at 50% 50%, co(fore) 37%, co(line) 39%, co(line) 47%, co(fore) 49%);
-      }
+
+      background-image: radial-gradient(at 50% 50%, var(--co-fore) 37%, var(--co-line) 39%, var(--co-line) 47%, var(--co-fore) 49%);
     }
 
     &::after {
@@ -64,15 +62,13 @@ $cos: 'main', 'vice', 'read', 'info', 'well', 'warn', 'risk';
     &.active,
     &:hover {
       &::before {
-        @include theme {
-          background-image: radial-gradient(at 50% 50%, co(main) 20%, transparent 23%), radial-gradient(at 50% 50%, co(fore) 37%, co(main) 39%, co(main) 47%, co(fore) 49%);
-        }
+        background-image: radial-gradient(at 50% 50%, var(--co-main) 20%, transparent 23%),
+          radial-gradient(at 50% 50%, var(--co-fore) 37%, var(--co-main) 39%, var(--co-main) 47%, var(--co-fore) 49%);
       }
       &::after {
         font-weight: bold;
-        @include theme {
-          color: co(main);
-        }
+
+        color: var(--co-main);
       }
     }