@neatui/css 1.0.27 → 2.0.0-beta.1

package/components/load/load@a.scss

@@ -26,18 +26,17 @@
       left: 25%;
       top: 25%;
       border-radius: 1em;
-      @include theme {
-        color: co(text);
-        box-shadow:
-          -1em 0 rgba(co(text), 0.7),
-          1em 0 rgba(co(text), 0.3),
-          0 1em rgba(co(text), 0.5),
-          0 -1em rgba(co(text), 0.9),
-          -0.7em 0.7em rgba(co(text), 0.6),
-          0.7em -0.7em rgba(co(text), 1),
-          -0.7em -0.7em rgba(co(text), 0.8),
-          0.7em 0.7em rgba(co(text), 0.4);
-      }
+      color: var(--co-text);
+      box-shadow:
+        -1em 0 var(--co-text-ls),
+        1em 0 var(--co-text-sl),
+        0 1em var(--co-text-mm),
+        0 -1em var(--co-text-ll),
+        -0.7em 0.7em var(--co-text-ml),
+        0.7em -0.7em var(--co-text),
+        -0.7em -0.7em var(--co-text-lm),
+        0.7em 0.7em var(--co-text-ms);
+
       transform: rotate3d(0, 0, 1, 6deg) scale(0.45);
     }
   }

package/components/load/load@e.scss

@@ -15,9 +15,7 @@
     width: 1em;
     height: 1em;
     border-radius: 50%;
-    @include theme {
-      border: 1px solid currentColor;
-    }
+    border: 1px solid currentColor;
     border-right-color: transparent !important;
     animation: ui-load-e 1.5s linear infinite both;
   }

package/components/load/load@h.scss

@@ -29,10 +29,8 @@
     display: inline-block;
     width: 1em;
     height: 1em;
-    @include theme {
-      background: radial-gradient(circle at 15% 50%, rgba(co(text), 0.2) 12%, transparent 13%), radial-gradient(circle at 50% 50%, rgba(co(text), 0.2) 14%, transparent 15%),
-        radial-gradient(circle at 85% 50%, rgba(co(text), 0.2) 9%, transparent 10%);
-    }
+    background: radial-gradient(circle at 15% 50%, rgba(var(--co-text), 0.2) 12%, transparent 13%),
+      radial-gradient(circle at 50% 50%, rgba(var(--co-text), 0.2) 14%, transparent 15%), radial-gradient(circle at 85% 50%, rgba(var(--co-text), 0.2) 9%, transparent 10%);
 
     &::after {
       position: absolute;
@@ -42,9 +40,7 @@
       height: 100%;
       left: 0;
       top: 0;
-      @include theme {
-        color: co(text);
-      }
+      color: var(--co-text);
       animation: ui-load-h 1s cubic-bezier(0.72, 0.115, 0.355, 0.88) infinite both;
     }
   }

package/components/menu/menu@b.scss

@@ -29,9 +29,7 @@
         &:hover,
         & .active {
           & > a {
-            @include theme {
-              color: co(main);
-            }
+            color: var(--co-main);
           }
 
           .mc-menu-list-two {
@@ -50,9 +48,9 @@
       min-width: 10rem;
       left: 50%;
       padding: 2rem;
-      @include theme {
-        background: co(back);
-      }
+
+      background: var(--co-back);
+
       line-height: 3rem;
       transform: translate3d(-50%, 1rem, 0);
       opacity: 0;
@@ -64,9 +62,7 @@
         white-space: nowrap;
 
         &:hover {
-          @include theme {
-            color: co(main);
-          }
+          color: var(--co-main);
         }
       }
 
@@ -75,9 +71,9 @@
         content: '';
         display: block;
         border: 0.5rem solid transparent;
-        @include theme {
-          border-bottom-color: co(back);
-        }
+
+        border-bottom-color: var(--co-back);
+
         width: 1rem;
         height: 1rem;
         left: 50%;
@@ -103,16 +99,13 @@
       padding: 0;
       left: 0;
       top: 0;
-      @include theme {
-        background: co(back);
-      }
+
+      background: var(--co-back);
 
       & > input {
         width: 8rem;
         height: 2.5rem;
-        @include theme {
-          background: co(weak);
-        }
+        background: var(--co-weak);
         border-radius: 2.5rem;
       }
     }
@@ -138,9 +131,8 @@
       &:checked + .mc-menu-icon {
         &:after {
           border-radius: 30%;
-          @include theme {
-            background: linear-gradient(45deg, transparent 45%, co(read) 45%, co(read) 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, co(read) 45%, co(read) 55%, transparent 55%);
-          }
+          background: linear-gradient(45deg, transparent 45%, var(--co-read) 45%, var(--co-read) 55%, transparent 55%),
+            linear-gradient(-45deg, transparent 45%, var(--co-read) 45%, var(--co-read) 55%, transparent 55%);
         }
 
         & + .mc-menu-list {
@@ -178,10 +170,8 @@
       overflow-x: hidden;
       overflow-y: auto;
       -webkit-overflow-scrolling: touch;
-      @include theme {
-        background: co(back);
-        border-top: 1px solid co(line);
-      }
+      background: var(--co-back);
+      border-top: 1px solid var(--co-line);
 
       // 开关按钮
       //& > label {
@@ -212,17 +202,13 @@
       // 搜索框
       & > .head-search {
         padding-top: 3rem;
-        @include theme {
-          border-top: 1px solid co(line);
-        }
+        border-top: 1px solid var(--co-line);
 
         .head-search-list {
           padding: 1em 0;
 
           & > * {
-            @include theme {
-              border-bottom: 1px dotted co(line);
-            }
+            border-bottom: 1px dotted var(--co-line);
           }
         }
 
@@ -230,9 +216,9 @@
           width: 100%;
           height: 3rem;
           border-radius: 3px;
-          @include theme {
-            background: co(weak);
-          }
+
+          background: var(--co-weak);
+
           padding: 1em;
         }
       }
@@ -262,9 +248,9 @@
       z-index: 11;
       width: 1.5rem;
       height: 1.5rem;
-      @include theme {
-        border: 1px solid co(read);
-      }
+
+      border: 1px solid var(--co-read);
+
       border-radius: 0.25rem;
       vertical-align: middle;
       top: -0.1rem;
@@ -285,9 +271,11 @@
         height: 100%;
         content: '';
         display: block;
-        @include theme {
-          background: linear-gradient(0deg, transparent 42%, co(read) 0%, co(read) 57%, transparent 0%), linear-gradient(90deg, transparent 75%, co(back) 76%), linear-gradient(0deg, transparent 10%, co(read) 0%, co(read) 25%, transparent 0%), linear-gradient(0deg, transparent 75%, co(read) 0%, co(read) 90%, transparent 0%);
-        }
+
+        background: linear-gradient(0deg, transparent 42%, var(--co-read) 0%, var(--co-read) 57%, transparent 0%), linear-gradient(90deg, transparent 75%, var(--co-back) 76%),
+          linear-gradient(0deg, transparent 10%, var(--co-read) 0%, var(--co-read) 25%, transparent 0%),
+          linear-gradient(0deg, transparent 75%, var(--co-read) 0%, var(--co-read) 90%, transparent 0%);
+
         transform: scale3d(1, 1, 1);
         transition: all 0.1s;
       }

package/components/navs/navs@a.scss

@@ -24,14 +24,11 @@
   &,
   &[ui-navs~='text'] {
     & > * {
-      @include theme {
-        color: co(text);
-      }
+      color: var(--co-text);
+
       &.active {
         & > *:first-child {
-          @include theme {
-            color: co(main);
-          }
+          color: var(--co-main);
         }
       }
     }
@@ -39,14 +36,11 @@
 
   &[ui-navs~='read'] {
     & > * {
-      @include theme {
-        color: co(read);
-      }
+      color: var(--co-read);
+
       &.active {
         & > *:first-child {
-          @include theme {
-            color: mix(co(main), co(read), 45%);
-          }
+          color: var(--co-main-text);
         }
       }
     }
@@ -54,15 +48,11 @@
 
   &[ui-navs~='note'] {
     & > * {
-      @include theme {
-        color: co(note);
-      }
+      color: var(--co-note);
+
       &.active {
         & > *:first-child {
-          @include theme {
-            // color: co(main);
-            color: mix(co(main), co(back), 45%);
-          }
+          color: var(--co-main-text);
         }
       }
     }
@@ -70,14 +60,11 @@
 
   &[ui-navs~='back'] {
     & > * {
-      @include theme {
-        color: rgba(co(back), 0.9);
-      }
+      color: var(--co-back--ll);
+
       &.active {
         & > *:first-child {
-          @include theme {
-            color: co(back);
-          }
+          color: var(--co-back);
         }
       }
     }

package/components/navs/navs@b.scss

@@ -8,10 +8,8 @@
 
     &:hover {
       & > * {
-        @include theme {
-          text-decoration: underline;
-          opacity: 0.8;
-        }
+        text-decoration: underline;
+        opacity: 0.8;
       }
     }
     &:active {
@@ -34,14 +32,11 @@
   &,
   &[ui-navs~='text'] {
     & > * {
-      @include theme {
-        color: co(text);
-      }
+      color: var(--co-text);
+
       &.active {
         & > *:first-child {
-          @include theme {
-            color: co(main);
-          }
+          color: var(--co-main);
         }
       }
     }
@@ -49,14 +44,11 @@
 
   &[ui-navs~='read'] {
     & > * {
-      @include theme {
-        color: co(read);
-      }
+      color: var(--co-read);
+
       &.active {
         & > *:first-child {
-          @include theme {
-            color: mix(co(main), co(read), 45%);
-          }
+          color: var(--co-main-text);
         }
       }
     }
@@ -64,15 +56,11 @@
 
   &[ui-navs~='note'] {
     & > * {
-      @include theme {
-        color: co(note);
-      }
+      color: var(--co-note);
+
       &.active {
         & > *:first-child {
-          @include theme {
-            // color: co(main);
-            color: mix(co(main), co(back), 45%);
-          }
+          color: var(--co-main-text);
         }
       }
     }
@@ -80,14 +68,11 @@
 
   &[ui-navs~='back'] {
     & > * {
-      @include theme {
-        color: rgba(co(back), 0.7);
-      }
+      color: var(--co-back-ls);
+
       &.active {
         & > *:first-child {
-          @include theme {
-            color: co(back);
-          }
+          color: var(--co-back);
         }
       }
     }

package/components/note/note@a.scss

@@ -5,22 +5,17 @@ $cos: 'main', 'well', 'warn', 'risk', 'info';
     width: 100%;
     padding: 0.5em 1em;
     border-radius: 0.25rem;
-
-    @include theme {
-      color: co(read);
-      box-shadow: inset 0 0 0 1px co(line);
-      background: co(weak);
-    }
+    color: var(--co-read);
+    box-shadow: inset 0 0 0 1px var(--co-read-sl);
+    background: var(--co-read-xs);
   }
 
   // 颜色
-  @each $key in $cos {
-    &[ui-note~='#{$key}'] {
-      @include theme {
-        color: mix(co($key), co(text), 85%);
-        box-shadow: inset 0 0 0 1px rgba(co($key), 0.3);
-        background: saturate(rgba(co($key), 0.06), 20%);
-      }
+  @each $co in $cos {
+    &[ui-note~='#{$co}'] {
+      color: var(--co-#{$co});
+      box-shadow: inset 0 0 0 1px var(--co-#{$co}-sl);
+      background: var(--co-#{$co}-xs);
     }
   }
 }

package/components/note/note@b.scss

@@ -1,33 +1,19 @@
-$co: 'main', 'text', 'read', 'well', 'warn', 'risk', 'info';
+$co: 'main', 'well', 'warn', 'risk';
 
 [ui-note~='@b'] {
   width: 100%;
   padding: 0.5em 1em;
   border-radius: 0.1em;
 
-  @mixin note($co, $bg, $bk) {
-    color: $co;
-    border-left: 0.15em solid $bk;
-    background: $bg;
-  }
+  color: var(--co-read);
+  background: var(--co-read-ss);
+  border-left: 2px solid var(--co-read);
 
   @each $key in $co {
-    @include theme {
-      $val: co($key);
-      $co: mix($val, co(text), 85%);
-      $bg: saturate(rgba($val, 0.1), 20%);
-      $bk: $val;
-
-      @if ($key== 'main') {
-        &,
-        &[ui-note~='#{$key}'] {
-          @include note($co, $bg, $bk);
-        }
-      } @else {
-        &[ui-note~='#{$key}'] {
-          @include note($co, $bg, $bk);
-        }
-      }
+    &[ui-note~='#{$key}'] {
+      color: var(--co-#{$key});
+      background: var(--co-#{$key}-ss);
+      border-left: 2px solid var(--co-#{$key});
     }
   }
 }

package/components/opts/opts@a.scss

@@ -4,14 +4,11 @@
     padding: 0.5em;
     border-radius: 0.25em;
     cursor: pointer;
-    @include theme {
-      box-shadow: inset 0 0 0 1px co(case);
-    }
+
+    box-shadow: inset 0 0 0 1px var(--co-case);
 
     &.active {
-      @include theme {
-        box-shadow: inset 0 0 0 1px co(main);
-      }
+      box-shadow: inset 0 0 0 1px var(--co-main);
 
       &::after {
         position: absolute;
@@ -29,10 +26,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(fore);
-        }
+
+        background-color: var(--co-main);
+        color: co(fore);
+
         -webkit-animation: am-selected 0.2s 0.1s both;
         animation: am-selected 0.2s 0.1s both;
       }

package/components/path/path@a.scss

@@ -9,17 +9,13 @@
       transition: all 0.3s;
       @include dpc {
         &:hover {
-          @include theme {
-            color: co(main);
-          }
+          color: var(--co-main);
         }
       }
 
       @include pad {
         &:active {
-          @include theme {
-            color: co(main);
-          }
+          color: var(--co-main);
         }
       }
 

package/components/steps/steps@a.scss

@@ -35,9 +35,7 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
       border-radius: 2px;
       left: 0;
       top: 0.75em;
-      @include theme {
-        background: radial-gradient(circle at 50% 50%, transparent 2%, co(case) 2.1%) no-repeat center / 100em 100%;
-      }
+      background: radial-gradient(circle at 50% 50%, transparent 2%, var(--co-case) 2.1%) no-repeat center / 100em 100%;
     }
     &::after {
       position: absolute;
@@ -49,39 +47,29 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
       margin-left: -0.75em;
       top: 0;
       border-radius: 50%;
-      @include theme {
-        border: 1px solid co(case);
-      }
+      border: 1px solid var(--co-case);
     }
 
     &.done {
-      @include theme {
-        color: co(well);
-      }
+      color: var(--co-well);
+
       &::before {
-        @include theme {
-          background: radial-gradient(circle at 50% 50%, transparent 2%, co(well) 2.1%) no-repeat center / 100em 100%;
-        }
+        background: radial-gradient(circle at 50% 50%, transparent 2%, var(--co-well) 2.1%) no-repeat center / 100em 100%;
       }
       &::after {
-        @include theme {
-          border: 1px solid co(well);
-        }
+        border: 1px solid var(--co-well);
         @extend %icon-hook;
       }
     }
 
     &.fail {
-      @include theme {
-        color: co(risk);
-      }
+      color: var(--co-risk);
+
       &::before {
-        @include theme {
-          background: radial-gradient(circle at 50% 50%, transparent 2%, co(risk) 2.1%) no-repeat center / 100em 100%;
-        }
+        background: radial-gradient(circle at 50% 50%, transparent 2%, var(--co-risk) 2.1%) no-repeat center / 100em 100%;
       }
       &::after {
-        border: 1px solid co(risk);
+        border: 1px solid var(--co-risk);
         @extend %icon-close;
       }
     }

package/components/steps/steps@v.scss

@@ -22,9 +22,8 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     padding-left: 2em;
     padding-bottom: 1.5em;
     flex-grow: 1;
-    @include theme {
-      color: co(note);
-    }
+
+    color: var(--co-note);
 
     &:last-child {
       padding-bottom: 0;
@@ -44,9 +43,8 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
       left: 0.55em;
       top: 1.5em;
       bottom: 0.3em;
-      @include theme {
-        background: co(case);
-      }
+
+      background: var(--co-case);
     }
     &::after {
       position: absolute;
@@ -59,62 +57,52 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
       left: 0%;
       top: 0;
       border-radius: 50%;
-      @include theme {
-        color: co(note);
-        border: 1px solid co(note);
-      }
+
+      color: var(--co-note);
+      border: 1px solid var(--co-note);
     }
 
     &.done {
-      @include theme {
-        color: co(main);
-      }
+      color: var(--co-main);
+
       &::before {
-        @include theme {
-          background: co(main);
-        }
+        background: var(--co-main);
       }
       &::after {
         content: '';
-        @include theme {
-          color: co(main);
-          border: 1px solid co(main);
-        }
+
+        color: var(--co-main);
+        border: 1px solid var(--co-main);
+
         @extend %icon-hook;
       }
     }
 
     &.fail {
-      @include theme {
-        color: co(risk);
-      }
+      color: var(--co-risk);
+
       &::before {
-        @include theme {
-          background: co(risk);
-        }
+        background: var(--co-risk);
       }
       &::after {
         content: '';
-        @include theme {
-          color: co(risk);
-          border: 1px solid co(risk);
-        }
+
+        color: var(--co-risk);
+        border: 1px solid var(--co-risk);
+
         @extend %icon-close;
       }
     }
 
     &.curr {
       &::before {
-        @include theme {
-          background: co(read);
-        }
+        background: var(--co-read);
       }
       &::after {
         content: '';
-        @include theme {
-          color: co(read);
-          border: 1px solid co(read);
-        }
+        color: var(--co-read);
+        border: 1px solid var(--co-read);
+
         @extend %icon-more;
       }
     }