@neatui/css 1.0.26 → 2.0.0-beta.0

package/components/form/base.scss

@@ -24,10 +24,11 @@ $cos: 'main', 'text', 'read', 'note', 'idle', 'case', 'line', 'info', 'well', 'w
   min-width: 2em;
   min-height: 1.9em;
 
-  @include theme {
-    background: mix(co(main), co(fore), 85%);
-    color: co(fore);
-  }
+  // @include theme {
+  //   background: mix(co(main), var(--co-fore), 85%);
+  // }
+  background: var(--co-main-fore-ls);
+  color: var(--co-fore);
 
   &::after {
     position: absolute;
@@ -42,9 +43,10 @@ $cos: 'main', 'text', 'read', 'note', 'idle', 'case', 'line', 'info', 'well', 'w
     transition:
       transform 0s,
       opacity 0s;
-    @include theme {
-      border-top-color: mix(co(main), co(fore), 85%);
-    }
+    // @include theme {
+    //   border-top-color: mix(co(main), var(--co-fore), 85%);
+    // }
+    border-top-color: var(--co-main-fore-ls);
   }
 
   &[ui-form-tips~='rt'] {
@@ -76,13 +78,15 @@ $cos: 'main', 'text', 'read', 'note', 'idle', 'case', 'line', 'info', 'well', 'w
 @each $co in $cos {
   [ui-form~='co:#{$co}'] {
     [ui-form-tips] {
-      @include theme {
-        background: mix(co($co), co(fore), 85%);
-      }
+      // @include theme {
+      //   background: mix(var(--co-#{$co}), var(--co-fore), 85%);
+      // }
+      background: var(--co-#{$co}-fore-ls);
       &::after {
-        @include theme {
-          border-top-color: mix(co($co), co(fore), 85%);
-        }
+        // @include theme {
+        //   border-top-color: mix(var(--co-#{$co}), var(--co-fore), 85%);
+        // }
+        border-top-color: var(--co-#{$co}-fore-ls);
       }
     }
   }
@@ -128,9 +132,9 @@ $cos: 'main', 'text', 'read', 'note', 'idle', 'case', 'line', 'info', 'well', 'w
   }
 
   &[ui-form-verify~='ok'] {
-    @include theme {
-      color: co(well);
-    }
+    // @include theme {
+    color: var(--co-well);
+    // }
 
     @keyframes am-verify-ok-1 {
       0% {
@@ -175,9 +179,9 @@ $cos: 'main', 'text', 'read', 'note', 'idle', 'case', 'line', 'info', 'well', 'w
     }
   }
   &[ui-form-verify~='no'] {
-    @include theme {
-      color: co(risk);
-    }
+    // @include theme {
+    color: var(--co-risk);
+    // }
 
     @keyframes am-no-1 {
       0% {
@@ -281,13 +285,13 @@ $cos: 'main', 'text', 'read', 'note', 'idle', 'case', 'line', 'info', 'well', 'w
   display: none;
   // opacity: 0.6;
   right: 100%;
-  @include theme {
-    background: co(fore);
-    box-shadow:
-      -0.2em 0 0px 0.15em co(fore),
-      0.2em 0 0px 0.15em co(fore),
-      0 0 0px 0.15em co(fore);
-  }
+  // @include theme {
+  background: var(--co-fore);
+  box-shadow:
+    -0.2em 0 0px 0.15em var(--co-fore),
+    0.2em 0 0px 0.15em var(--co-fore),
+    0 0 0px 0.15em var(--co-fore);
+  // }
 
   &::before {
     position: absolute;

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

@@ -24,10 +24,10 @@
   }
 
   input:-webkit-autofill {
-    @include theme {
-      box-shadow: 0 0 0 1000px co(fore) inset;
-      color: co(read);
-      -webkit-text-fill-color: co(read);
-    }
+    // @include theme {
+    box-shadow: 0 0 0 1000px var(--co-fore) inset;
+    color: var(--co-read);
+    -webkit-text-fill-color: var(--co-read);
+    // }
   }
 }

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

@@ -48,7 +48,7 @@ $co: 'info', 'well', 'warn', 'risk';
 
       // &.part-selected {
       //   @include theme {
-      //     box-shadow: inset 0 0 0 1px co(main);
+      //     box-shadow: inset 0 0 0 1px var(--co-main);
       //   }
       //   &::before {
       //     width: 50%;
@@ -56,7 +56,7 @@ $co: 'info', 'well', 'warn', 'risk';
       //     left: 24%;
       //     border-radius: 1em;
       //     @include theme {
-      //       background: co(main) !important;
+      //       background: var(--co-main) !important;
       //     }
       //     bottom: 41%;
       //   }
@@ -67,16 +67,14 @@ $co: 'info', 'well', 'warn', 'risk';
         position: absolute;
         content: '';
         display: block;
-        @include theme {
-          background-color: co(fore);
-        }
+
+        background-color: var(--co-fore);
+
         border-radius: 10rem;
       }
 
       &:checked {
-        @include theme {
-          background-color: co(main);
-        }
+        background-color: var(--co-main);
 
         @keyframes am-checkbox-a-1 {
           0% {
@@ -104,9 +102,9 @@ $co: 'info', 'well', 'warn', 'risk';
           left: 20%;
           top: 36%;
           transform: rotate(43deg);
-          @include theme {
-            background-color: co(fore);
-          }
+
+          background-color: var(--co-fore);
+
           transform-origin: 0% 100%;
           animation: am-checkbox-a-1 ease-out 0.35s both;
         }
@@ -118,36 +116,32 @@ $co: 'info', 'well', 'warn', 'risk';
           bottom: 25%;
           transform-origin: 0% 100%;
           transform: rotate(-53deg);
-          @include theme {
-            background-color: co(fore);
-          }
+
+          background-color: var(--co-fore);
+
           animation: am-checkbox-a-2 ease-out 0.35s both;
         }
 
         &,
         & + * {
-          @include theme {
-            color: co(main);
-          }
+          color: var(--co-main);
         }
       }
 
       // 半选
       &.part-checked,
       &[part-checked] {
-        @include theme {
-          background-color: co(main);
-          box-shadow: inset 0 0 0 1px co(main);
-        }
+        background-color: var(--co-main);
+        box-shadow: inset 0 0 0 1px var(--co-main);
 
         &::before {
           width: 50%;
           height: 18%;
           left: 24%;
           border-radius: 1em;
-          @include theme {
-            background: co(fore) !important;
-          }
+
+          background: var(--co-fore) !important;
+
           bottom: 41%;
         }
 
@@ -158,7 +152,7 @@ $co: 'info', 'well', 'warn', 'risk';
         //   top: 36%;
         //   transform: rotate(43deg);
         //   @include theme {
-        //     background-color: co(fore);
+        //     background-color: var(--co-fore);
         //   }
         //   transform-origin: 0% 100%;
         //   animation: am-checkbox-a-1 ease-out 0.35s both;
@@ -172,7 +166,7 @@ $co: 'info', 'well', 'warn', 'risk';
         //   transform-origin: 0% 100%;
         //   transform: rotate(-53deg);
         //   @include theme {
-        //     background-color: co(fore);
+        //     background-color: var(--co-fore);
         //   }
         //   animation: am-checkbox-a-2 ease-out 0.35s both;
         // }
@@ -180,7 +174,7 @@ $co: 'info', 'well', 'warn', 'risk';
         // &,
         // & + * {
         //   @include theme {
-        //     color: co(main);
+        //     color: var(--co-main);
         //   }
         // }
       }

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

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

@@ -27,10 +27,10 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     transition:
       all 0.35s,
       background-color 0s;
-    @include theme {
-      border: 1px solid co(case);
-      background-color: co(fore);
-    }
+    // @include theme {
+    border: 1px solid var(--co-case);
+    background-color: var(--co-fore);
+    // }
 
     display: inline-flex;
     justify-content: space-between;
@@ -41,18 +41,19 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     }
 
     &:hover {
-      @include theme {
-        border: 1px solid rgba(co(main), 0.5);
-      }
+      // @include theme {
+      //   border: 1px solid rgba(var(--co-main), 0.5);
+      // }
+      border: 1px solid var(--co-main-mm);
     }
 
     &.form-focus,
     &:focus-within {
-      @include theme {
-        background-color: co(fore);
-        border: 1px solid rgba(co(main), 0.6);
-        box-shadow: 0 0 0 2px rgba(co(main), 0.15);
-      }
+      // @include theme {
+      background-color: var(--co-fore);
+      border: 1px solid var(--co-main-sl);
+      box-shadow: 0 0 0 2px var(--co-main-ss);
+      // }
     }
 
     input {
@@ -81,17 +82,15 @@ $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);
-        }
+        // @include theme {
+        box-shadow: 0 0 0 1000px var(--co-fore) inset;
+        color: var(--co-read);
+        -webkit-text-fill-color: var(--co-read);
+        // }
       }
 
       &::placeholder {
-        @include theme {
-          color: rgba(co(read), 0.35);
-        }
+        color: var(--co-read-sl);
       }
     }
 
@@ -128,14 +127,15 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     @each $c in $cos {
       &[ui-form~='co:#{$c}'] {
         & {
-          @include theme {
-            color: mix(co($c), co(text), 85%);
-            border: 1px solid rgba(co($c), 0.6);
-          }
+          // @include theme {
+          //   color: var(--co-#{$c}-text);
+          // }
+          color: var(--co-#{$c}-text);
+          border: 1px solid var(--co-#{$c}-ml);
         }
 
         &:focus-within {
-          box-shadow: 0 0 0 2px rgba(co($c), 0.15) !important;
+          box-shadow: 0 0 0 2px var(--co-#{$c}-ss) !important;
         }
       }
     }

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

@@ -73,9 +73,7 @@ $co: 'info', 'well', 'warn', 'risk';
         content: '';
         display: block;
         border-radius: 50%;
-        @include theme {
-          background: co(fore);
-        }
+        background: var(--co-fore);
       }
 
       &:checked {
@@ -85,9 +83,7 @@ $co: 'info', 'well', 'warn', 'risk';
         }
         &,
         & + * {
-          @include theme {
-            color: co(main);
-          }
+          color: var(--co-main);
         }
       }
 

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

@@ -23,9 +23,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%;
@@ -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@a/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@a/textarea.scss

@@ -24,59 +24,51 @@ $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);
-    }
+    // @include theme {
+    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);
-      }
+      // @include theme {
+      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-sm);
     }
 
     // 颜色
     @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}-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.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}-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.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}-xs);
         }
       }
     }
@@ -84,17 +76,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@a/upload.scss

@@ -24,10 +24,9 @@
       transition: all 0.5s;
       border-style: solid;
       border-width: 1px;
-      @include theme {
-        border-color: co(case);
-        background-color: co(fore);
-      }
+
+      border-color: var(--co-case);
+      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,
@@ -91,9 +88,9 @@
           position: absolute;
           width: 100%;
           height: 100%;
-          @include theme {
-            background-color: rgba(co(fore), 0.85);
-          }
+
+          background-color: var(--co-fore-ls);
+
           top: 0;
           right: 0;
         }
@@ -140,9 +137,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%;
@@ -152,9 +149,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@b/base.scss

@@ -24,10 +24,8 @@
   }
 
   input:-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);
   }
 }

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

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