@neatui/css 1.0.27 → 2.0.0-beta.0

package/components/form/form@b/date.scss

@@ -65,9 +65,9 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
 [ui-form-dropdown='@b'] {
   position: absolute;
   top: 100%;
-  @include theme {
-    background: co(fore);
-  }
+
+  background: var(--co-fore);
+
   left: 0;
   margin-top: 0.5em;
   padding: 0.5em;
@@ -94,9 +94,9 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     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/components/form/form@b/input.scss

@@ -24,9 +24,8 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     line-height: 1.5em;
     padding: 0.5em 0;
     transition: all 0.5s;
-    @include theme {
-      box-shadow: inset 0 -1px 0 0 co(case);
-    }
+
+    box-shadow: inset 0 -1px 0 0 var(--co-case);
 
     display: inline-flex;
     justify-content: space-between;
@@ -37,19 +36,15 @@ $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);
     }
 
     &.form-focus,
     &:focus-within {
-      @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);
-      }
+      background-color: co(fore);
+      box-shadow:
+        inset 0 -1px 0 0 var(--co-main-mm),
+        0 2px 0 0 var(--co-main-ss);
     }
 
     input {
@@ -78,17 +73,13 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
       }
 
       &:-webkit-autofill {
-        @include theme {
-          box-shadow: 0 0 0 1000px co(fore) inset;
-          color: co(read);
-          -webkit-text-fill-color: co(read);
-        }
+        box-shadow: 0 0 0 1000px co(fore) inset;
+        color: co(read);
+        -webkit-text-fill-color: co(read);
       }
 
       &::-webkit-input-placeholder {
-        @include theme {
-          color: rgba(co(read), 0.5);
-        }
+        color: var(--co-read-mm);
       }
     }
 
@@ -113,36 +104,27 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     // 颜色
     @each $c in $co {
       &[ui-form~='co:#{$c}'] {
-        @include theme {
-          color: mix(co($c), co(text), 85%);
-          box-shadow:
-            inset 0 -1px 0 0 rgba(co($c), 0.6),
-            0 2px 0 0 rgba(co($c), 0.15) !important;
-          // background-color: rgba(co($c), 0.03);
-        }
+        color: var(--co-#{$c}-text);
+        box-shadow:
+          inset 0 -1px 0 0 var(--co-#{$c}-ml),
+          0 2px 0 0 var(--co-#{$c}-ss) !important;
       }
 
       &[ui-form~='co:hover:#{$c}'] {
         &:hover {
-          @include theme {
-            color: mix(co($c), co(text), 85%);
-            box-shadow:
-              inset 0 -1px 0 0 rgba(co($c), 0.6),
-              0 2px 0 0 rgba(co($c), 0.15) !important;
-            // background-color: rgba(co($c), 0.03);
-          }
+          color: var(--co-#{$c}-text);
+          box-shadow:
+            inset 0 -1px 0 0 var(--co-#{$c}-ml),
+            0 2px 0 0 var(--co-#{$c}-ss) !important;
         }
       }
 
       &[ui-form~='co:focus:#{$c}'] {
         &:focus-within {
-          @include theme {
-            color: mix(co($c), co(text), 85%);
-            box-shadow:
-              inset 0 -1px 0 0 rgba(co($c), 0.6),
-              0 2px 0 0 rgba(co($c), 0.15) !important;
-            // background-color: rgba(co($c), 0.03);
-          }
+          color: var(--co-#{$c}-text);
+          box-shadow:
+            inset 0 -1px 0 0 var(--co-#{$c}-ml),
+            0 2px 0 0 var(--co-#{$c}-ss) !important;
         }
       }
     }

package/components/form/form@b/radio.scss

@@ -76,9 +76,7 @@ $co: 'info', 'well', 'warn', 'risk';
         animation: am-b-radio 0.3s;
         &,
         & + * {
-          @include theme {
-            color: co(main);
-          }
+          color: var(--co-main);
         }
       }
 

package/components/form/form@b/select.scss

@@ -19,9 +19,9 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
       width: 0.8em;
       height: 0.8em;
       display: inline-block;
-      @include theme {
-        color: co(note);
-      }
+
+      color: var(--co-note);
+
       background:
         linear-gradient(45deg, transparent 51%, currentColor 52%, currentColor 67%, transparent 68%) no-repeat 23.5% 65% / 35% 50%,
         linear-gradient(-45deg, transparent 51%, currentColor 52%, currentColor 67%, transparent 68%) no-repeat 76.5% 65% / 35% 50%;
@@ -31,9 +31,9 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     [ui-form-dropdown] {
       position: absolute;
       top: 100%;
-      @include theme {
-        background: co(fore);
-      }
+
+      background: var(--co-fore);
+
       min-width: 100%;
       max-height: 20rem;
       left: 0;
@@ -62,9 +62,9 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
         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;
@@ -84,9 +84,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
         transition: all 0.35s;
         border-radius: 0.2em;
         &:hover {
-          @include theme {
-            background: co(weak);
-          }
+          background: var(--co-weak);
         }
       }
     }

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

@@ -52,9 +52,9 @@ $co: 'info', 'well', 'warn', 'risk';
       flex-shrink: 0;
       position: relative;
       top: 0.15em;
-      @include theme {
-        background-color: co(fore);
-      }
+
+      background-color: var(--co-fore);
+
       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@b/textarea.scss

@@ -24,59 +24,47 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     border-radius: 0.25em;
     transition: all 0.5s;
 
-    @include theme {
-      box-shadow: inset 0 0 0 1px co(case);
-      background-color: co(fore);
-    }
+    box-shadow: inset 0 0 0 1px var(--co-case);
+    background-color: var(--co-fore);
 
     &: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 {
-      @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);
         }
       }
     }
@@ -84,17 +72,13 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     &,
     textarea {
       &:-webkit-autofill {
-        @include theme {
-          box-shadow: 0 0 0 1000px co(fore) inset;
-          color: co(read);
-          -webkit-text-fill-color: co(read);
-        }
+        box-shadow: 0 0 0 1000px var(--co-fore) inset;
+        color: var(--co-read);
+        -webkit-text-fill-color: var(--co-read);
       }
 
       &::-webkit-input-placeholder {
-        @include theme {
-          color: rgba(co(read), 0.5);
-        }
+        color: var(--co-read-mm);
       }
     }
 

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

@@ -24,10 +24,9 @@
       transition: all 0.5s;
       border-style: solid;
       border-width: 1px;
-      @include theme {
-        border-color: co(line);
-        background-color: co(fore);
-      }
+
+      border-color: var(--co-line);
+      background-color: var(--co-fore);
     }
 
     @keyframes am-file-add {
@@ -71,9 +70,7 @@
           top: 0;
           left: 0;
 
-          @include theme {
-            background-color: co(fore);
-          }
+          background-color: var(--co-fore);
         }
 
         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;
         }
@@ -138,9 +135,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%;
@@ -150,9 +147,7 @@
         opacity: 0;
 
         &:-webkit-autofill {
-          @include theme {
-            box-shadow: 0 0 0 1000px co(fore) inset;
-          }
+          box-shadow: 0 0 0 1000px var(--co-fore) inset;
         }
       }
     }

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

@@ -25,20 +25,17 @@
   // 清理
   [ui-form-clean] {
     display: inline-block;
-    @include theme {
-      color: co(case);
-      background:
-        linear-gradient(45deg, transparent 40%, co(fore) 45%, co(fore) 55%, transparent 60%) no-repeat center / 38% 38%,
-        linear-gradient(-45deg, transparent 40%, co(fore) 45%, co(fore) 55%, transparent 60%) no-repeat center / 38% 38%,
-        radial-gradient(circle at 50% 50%, currentColor 53%, transparent 58%);
-    }
+
+    color: var(--co-case);
+    background:
+      linear-gradient(45deg, transparent 40%, var(--co-fore) 45%, var(--co-fore) 55%, transparent 60%) no-repeat center / 38% 38%,
+      linear-gradient(-45deg, transparent 40%, var(--co-fore) 45%, var(--co-fore) 55%, transparent 60%) no-repeat center / 38% 38%,
+      radial-gradient(circle at 50% 50%, currentColor 53%, transparent 58%);
   }
 
   input:-webkit-autofill {
-    @include theme {
-      box-shadow: 0 0 0 1000px mix(co(weak), co(fore), 50%) inset;
-      color: co(read);
-      -webkit-text-fill-color: co(read);
-    }
+    box-shadow: 0 0 0 1000px var(--bg-weak) inset;
+    color: var(--co-read);
+    -webkit-text-fill-color: var(--co-read);
   }
 }

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

@@ -60,9 +60,8 @@ $co: 'info', 'well', 'warn', 'risk';
       border-radius: 25%;
       transform: scale3d(0.9, 0.9, 1);
       flex-shrink: 0;
-      @include theme {
-        background-color: mix(co(weak), co(fore), 50%);
-      }
+
+      background-color: var(--bg-weak);
 
       &:checked {
         background:
@@ -76,9 +75,7 @@ $co: 'info', 'well', 'warn', 'risk';
         animation: am-checked 0.3s;
         &,
         & + * {
-          @include theme {
-            color: co(main);
-          }
+          color: co(main);
         }
       }
 

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

@@ -35,9 +35,9 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     [ui-form-dropdown] {
       position: absolute;
       top: 100%;
-      @include theme {
-        background: co(fore);
-      }
+
+      background: var(--co-fore);
+
       min-width: 100%;
       max-height: 20rem;
       left: 0;
@@ -66,9 +66,9 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
         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;
@@ -88,9 +88,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
         transition: all 0.35s;
         border-radius: 0.2em;
         &:hover {
-          @include theme {
-            background: co(weak);
-          }
+          background: var(--co-weak);
         }
       }
     }

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

@@ -25,10 +25,9 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     padding: 0.5em;
     border-radius: 0.25em;
     transition: all 0.5s;
-    @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);
 
     display: inline-flex;
     justify-content: space-between;
@@ -39,19 +38,15 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     }
 
     &: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-within {
-      @include theme {
-        background-color: mix(co(weak), co(fore), 50%);
-        box-shadow:
-          inset 0 0 0 1px rgba(co(main), 0.5),
-          0 0 0 2px rgba(co(main), 0.15);
-      }
+      background-color: var(--bg-weak);
+      box-shadow:
+        inset 0 0 0 1px var(--co-main-mm),
+        0 0 0 2px var(--co-main-ss);
     }
 
     input {
@@ -77,17 +72,13 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
       }
 
       &:-webkit-autofill {
-        @include theme {
-          box-shadow: 0 0 0 1000px mix(co(weak), co(fore), 50%) inset;
-          color: co(read);
-          -webkit-text-fill-color: co(read);
-        }
+        box-shadow: 0 0 0 1000px var(--bg-weak) inset;
+        color: co(read);
+        -webkit-text-fill-color: co(read);
       }
 
       &::-webkit-input-placeholder {
-        @include theme {
-          color: rgba(co(read), 0.5);
-        }
+        color: var(--co-read-mm);
       }
     }
 
@@ -112,36 +103,30 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     // 颜色
     @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.03);
-        }
+        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}-xs);
       }
 
       &[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.03);
-          }
+          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}-xs);
         }
       }
 
       &[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.03);
-          }
+          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}-xs);
         }
       }
     }

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

@@ -60,9 +60,8 @@ $co: 'info', 'well', 'warn', 'risk';
       box-shadow: inset 0 0 0 1px currentColor;
       border-radius: 50%;
       flex-shrink: 0;
-      @include theme {
-        background-color: mix(co(weak), co(fore), 50%);
-      }
+
+      background-color: var(--bg-weak);
 
       &:checked {
         background-image: radial-gradient(circle at 50% 50%, currentColor 38%, transparent 40%);
@@ -70,9 +69,7 @@ $co: 'info', 'well', 'warn', 'risk';
         animation: am-radio 0.3s;
         &,
         & + * {
-          @include theme {
-            color: co(main);
-          }
+          color: var(--co-main);
         }
       }
 

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

@@ -16,9 +16,9 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
       height: 0.8em;
       display: inline-block;
       border-radius: 35%;
-      @include theme {
-        color: co(note);
-      }
+
+      color: var(--co-note);
+
       background:
         linear-gradient(45deg, transparent 51%, currentColor 52%, currentColor 67%, transparent 68%) no-repeat 23.5% 65% / 35% 50%,
         linear-gradient(-45deg, transparent 51%, currentColor 52%, currentColor 67%, transparent 68%) no-repeat 76.5% 65% / 35% 50%;
@@ -28,9 +28,9 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     [ui-form-dropdown] {
       position: absolute;
       top: 100%;
-      @include theme {
-        background: co(fore);
-      }
+
+      background: var(--co-fore);
+
       min-width: 100%;
       max-height: 20rem;
       left: 0;
@@ -59,9 +59,9 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
         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;
@@ -81,9 +81,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
         transition: all 0.35s;
         border-radius: 0.2em;
         &:hover {
-          @include theme {
-            background: co(weak);
-          }
+          background: var(--co-weak);
         }
       }
     }