@neatui/css 1.0.27 → 2.0.0-beta.0

package/components/table/base.scss

@@ -23,9 +23,10 @@
         height: 100%;
         right: -5px;
         top: 0;
-        @include theme {
-          box-shadow: inset 5px 0 5px -5px rgba(co(text), 0.15);
-        }
+        // @include theme {
+        //   box-shadow: inset 5px 0 5px -5px rgba(co(text), 0.15);
+        // }
+        box-shadow: inset 5px 0 5px -5px var(--co-text-ss);
       }
     }
     &[col-fixed-side='r'] {
@@ -38,9 +39,10 @@
         height: 100%;
         left: -5px;
         top: 0;
-        @include theme {
-          box-shadow: inset -5px 0 5px -5px rgba(co(text), 0.15);
-        }
+        // @include theme {
+        //   box-shadow: inset -5px 0 5px -5px rgba(co(text), 0.15);
+        // }
+        box-shadow: inset -5px 0 5px -5px var(--co-text-ss);
       }
     }
   }
@@ -100,13 +102,13 @@
 
   // 固定头部
   .table-head-fixed {
-    @include theme {
-      background: co(fore);
-      box-shadow:
-        0 1px 0 rgba(co(deep), 0.1),
-        0 2px 0 rgba(co(deep), 0.1),
-        0 3px 0 rgba(co(deep), 0.1);
-    }
+    // @include theme {
+    background: var(--co-fore);
+    box-shadow:
+      0 1px 0 var(--co-line-sm),
+      0 2px 0 var(--co-line-sm),
+      0 3px 0 var(--co-line-sm);
+    // }
     position: sticky;
     top: 0;
     z-index: 3;

package/components/table/table@a.scss

@@ -4,9 +4,9 @@
   width: 100%;
 
   th {
-    @include theme {
-      color: co(text);
-    }
+    // @include theme {
+    color: var(--co-text);
+    // }
     // text-align: left;
     font-weight: normal;
   }
@@ -19,9 +19,9 @@
   }
 
   td {
-    @include theme {
-      color: co(read);
-    }
+    // @include theme {
+    color: var(--co-read);
+    // }
   }
 
   &[tirm*='n'] {
@@ -37,9 +37,9 @@
   &[ui-table~='line'] {
     th,
     td {
-      @include theme {
-        border-bottom: 1px solid co(line);
-      }
+      // @include theme {
+      border-bottom: 1px solid var(--co-line);
+      // }
       padding: 0.75em 1em;
 
       &:first-child {
@@ -61,59 +61,59 @@
   &[ui-table~='grid'],
   &[ui-table~='cube'] {
     tr {
-      @include theme {
-        box-shadow: inset 0 -1px 0 0 co(line);
-      }
+      // @include theme {
+      box-shadow: inset 0 -1px 0 0 var(--co-line);
+      // }
       // &:last-child {
       //   box-shadow: 0 0 0 0;
       // }
     }
     th,
     td {
-      @include theme {
-        // border-left: 1px solid co(line);
-        box-shadow: inset 1px 0 0 0 co(line);
-        // border-top: 1px solid co(line);
-        &:first-child {
-          box-shadow: 0 0 0 0;
-        }
+      // @include theme {
+      // border-left: 1px solid var(--co-line);
+      box-shadow: inset 1px 0 0 0 var(--co-line);
+      // border-top: 1px solid var(--co-line);
+      &:first-child {
+        box-shadow: 0 0 0 0;
       }
+      // }
       // padding: 0.75em 1em;
     }
   }
   &[ui-table~='grid'] {
-    @include theme {
-      // border: 1px solid co(line);
-      box-shadow: inset 0 0 0px 1px co(line);
-    }
+    // @include theme {
+    // border: 1px solid var(--co-line);
+    box-shadow: inset 0 0 0px 1px var(--co-line);
+    // }
     border-radius: 0.25em;
     border-left: 0;
     border-top: 0;
     &[trim*='n'] {
       th,
       td {
-        @include theme {
-          border-right: 1px solid co(line);
-        }
+        // @include theme {
+        border-right: 1px solid var(--co-line);
+        // }
         &:first-child {
-          @include theme {
-            border-left: 1px solid co(line);
-          }
+          // @include theme {
+          border-left: 1px solid var(--co-line);
+          // }
         }
       }
       tr:last-child {
         td {
-          @include theme {
-            border-bottom: 1px solid co(line);
-          }
+          // @include theme {
+          border-bottom: 1px solid var(--co-line);
+          // }
         }
       }
       tr:first-child {
         th,
         td {
-          @include theme {
-            border-top: 1px solid co(line);
-          }
+          // @include theme {
+          border-top: 1px solid var(--co-line);
+          // }
         }
       }
     }
@@ -168,9 +168,9 @@
     }
 
     &[trim*='n'] {
-      @include theme {
-        border: 1px solid co(line);
-      }
+      // @include theme {
+      border: 1px solid var(--co-line);
+      // }
     }
 
     th,
@@ -207,9 +207,10 @@
     tr {
       transition: all 0.3s;
       &:hover {
-        @include theme {
-          background-color: rgba(co(weak), 0.5);
-        }
+        // @include theme {
+        //   background-color: rgba(co(weak), 0.5);
+        // }
+        background-color: var(-co-weak-mm);
       }
     }
   }

package/components/table/table@b.scss

@@ -6,9 +6,9 @@
   thead > tr,
   thead > tr th,
   .table-head-fixed {
-    @include theme {
-      background: co(fore);
-    }
+    // @include theme {
+    background: var(--co-fore);
+    // }
   }
   // 表格主体
   tbody {
@@ -17,18 +17,16 @@
         &,
         th,
         td {
-          @include theme {
-            background-color: co(fore);
-          }
+          // @include theme {
+          background-color: var(--co-fore);
+          // }
         }
       }
       &:nth-child(odd) {
         &,
         th,
         td {
-          @include theme {
-            background-color: mix(co(weak), co(fore), 75%);
-          }
+          background-color: var(--co-weak-fore-lm);
         }
       }
     }
@@ -39,24 +37,24 @@
       tr {
         &:nth-child(even) {
           &:hover {
-            @include theme {
-              box-shadow:
-                0 0 0 2px co(fore),
-                0 0 0 3px co(line);
-              z-index: 1;
-              position: relative;
-            }
+            // @include theme {
+            box-shadow:
+              0 0 0 2px var(--co-fore),
+              0 0 0 3px var(--co-line);
+            z-index: 1;
+            position: relative;
+            // }
           }
         }
         &:nth-child(odd) {
           &:hover {
-            @include theme {
-              box-shadow:
-                0 0 0 2px co(weak),
-                0 0 0 3px co(line);
-              z-index: 1;
-              position: relative;
-            }
+            // @include theme {
+            box-shadow:
+              0 0 0 2px co(weak),
+              0 0 0 3px var(--co-line);
+            z-index: 1;
+            position: relative;
+            // }
           }
         }
       }
@@ -68,10 +66,10 @@
   //   th,
   //   td {
   //     &:first-child {
-  //       box-shadow: -3em 0 0 0 co(fore);
+  //       box-shadow: -3em 0 0 0 var(--co-fore);
   //     }
   //     &:last-child {
-  //       box-shadow: 3em 0 0 0 co(fore);
+  //       box-shadow: 3em 0 0 0 var(--co-fore);
   //     }
   //   }
   // }

package/components/table/table@c.scss

@@ -9,10 +9,8 @@
 
   tbody {
     tr {
-      @include theme {
-        box-shadow: inset 0 0 0 1px co(line);
-        border-radius: 0.2em;
-      }
+      box-shadow: inset 0 0 0 1px var(--co-line);
+      border-radius: 0.2em;
     }
   }
 }

package/components/tabs/tabs@a.scss

@@ -10,9 +10,9 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
   overflow-x: auto;
   overflow-y: hidden;
 
-  @include theme {
-    box-shadow: inset 0 -1px 0 co(line);
-  }
+  // @include theme {
+  box-shadow: inset 0 -1px 0 var(--co-line);
+  // }
 
   & > * {
     position: relative;
@@ -30,10 +30,10 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
 
     &.active {
       -webkit-font-smoothing: auto;
-      @include theme {
-        color: co(main);
-        box-shadow: inset 0 -2px 0 co(main);
-      }
+      // @include theme {
+      color: var(--co-main);
+      box-shadow: inset 0 -2px 0 var(--co-main);
+      // }
     }
   }
 

package/components/tabs/tabs@b.scss

@@ -12,9 +12,9 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
   padding: 2px;
   border-radius: 0.5em;
 
-  @include theme {
-    border: 1px solid co(line);
-  }
+  // @include theme {
+  border: 1px solid var(--co-line);
+  // }
 
   & > * {
     cursor: pointer;
@@ -25,10 +25,10 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     padding: 0.5em 1em;
     &.active {
       -webkit-font-smoothing: auto;
-      @include theme {
-        color: co(fore);
-        background: co(main);
-      }
+      // @include theme {
+      color: var(--co-fore);
+      background: var(--co-main);
+      // }
     }
   }
 

package/components/tabs/tabs@c.scss

@@ -12,9 +12,9 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
   padding: 2px;
   border-radius: 0.35em;
 
-  @include theme {
-    background: co(weak);
-  }
+  // @include theme {
+  background: var(--co-weak);
+  // }
 
   & > * {
     cursor: pointer;
@@ -25,10 +25,10 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     padding: 0.5em 1em;
     &.active {
       -webkit-font-smoothing: auto;
-      @include theme {
-        color: co(main);
-        background: co(fore);
-      }
+      // @include theme {
+      color: var(--co-main);
+      background: var(--co-fore);
+      // }
     }
   }
 

package/components/tags/tags@a.scss

@@ -25,26 +25,19 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
     border-radius: 1em 0.2em 0.2em 1em;
   }
 
-  @each $key in $state {
-    @include theme {
-      $val: co($key);
-      $co: mix($val, co(text), 95%);
-      $bg: saturate(rgba($val, 0.06), 20%);
-      $bk: $val;
-
-      @if ($key== 'main') {
-        &,
-        &[ui-tag~='#{$key}'] {
-          color: $co;
-          box-shadow: inset 0 0 0 1px rgba($bk, 0.15);
-          background: $bg;
-        }
-      } @else {
-        &[ui-tag~='#{$key}'] {
-          color: $co;
-          box-shadow: inset 0 0 0 1px rgba($bk, 0.15);
-          background: $bg;
-        }
+  @each $co in $state {
+    @if ($co== 'main') {
+      &,
+      &[ui-tag~='#{$co}'] {
+        color: var(--co-#{$co}-text);
+        box-shadow: inset 0 0 0 1px var(--co-#{$co}-ss);
+        background: var(--bg-#{$co});
+      }
+    } @else {
+      &[ui-tag~='#{$co}'] {
+        color: var(--co-#{$co}-text);
+        box-shadow: inset 0 0 0 1px var(--co-#{$co}-ss);
+        background: var(--bg-#{$co});
       }
     }
   }
@@ -99,26 +92,19 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
   }
 
   // 主题
-  @each $key in $state {
-    @include theme {
-      $val: co($key);
-      $co: mix($val, co(text), 85%);
-      $bg: saturate(rgba($val, 0.06), 20%);
-      $bk: $val;
-
-      @if ($key== 'main') {
-        & > *,
-        &[ui-tags~='#{$key}'] > * {
-          color: $co;
-          box-shadow: inset 0 0 0 1px rgba($bk, 0.15);
-          background: $bg;
-        }
-      } @else {
-        &[ui-tags~='#{$key}'] > * {
-          color: $co;
-          box-shadow: inset 0 0 0 1px rgba($bk, 0.15);
-          background: $bg;
-        }
+  @each $co in $state {
+    @if ($co== 'main') {
+      & > *,
+      &[ui-tags~='#{$co}'] > * {
+        color: var(--co-#{$co}-text);
+        box-shadow: inset 0 0 0 1px var(--co-#{$co}-ss);
+        background: var(--bg-#{$co});
+      }
+    } @else {
+      &[ui-tags~='#{$co}'] > * {
+        color: var(--co-#{$co}-text);
+        box-shadow: inset 0 0 0 1px var(--co-#{$co}-ss);
+        background: var(--bg-#{$co});
       }
     }
   }

package/components/tags/tags@b.scss

@@ -35,24 +35,17 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
   }
 
   // 颜色
-  @each $key in $state {
-    @include theme {
-      $val: co($key);
-      $co: mix($val, co(text), 70%);
-      $bg: saturate(rgba($val, 0.2), 10%);
-      $bk: $val;
-
-      @if ($key== 'main') {
-        &,
-        &[ui-tag~='#{$key}'] {
-          color: $co;
-          background: $bg;
-        }
-      } @else {
-        &[ui-tag~='#{$key}'] {
-          color: $co;
-          background: $bg;
-        }
+  @each $co in $state {
+    @if ($co== 'main') {
+      &,
+      &[ui-tag~='#{$co}'] {
+        color: var(--co-#{$co}-text);
+        background: var(--bg-#{$co});
+      }
+    } @else {
+      &[ui-tag~='#{$co}'] {
+        color: var(--co-#{$co}-text);
+        background: var(--bg-#{$co});
       }
     }
   }
@@ -107,24 +100,17 @@ $sz: 'xs', 's', 'm', 'l', 'xl';
   }
 
   // 主题
-  @each $key in $state {
-    @include theme {
-      $val: co($key);
-      $co: mix($val, co(text), 85%);
-      $bg: saturate(rgba($val, 0.08), 20%);
-      $bk: $val;
-
-      @if ($key== 'main') {
-        & > *,
-        &[ui-tags~='#{$key}'] > * {
-          color: $co;
-          background: $bg;
-        }
-      } @else {
-        &[ui-tags~='#{$key}'] > * {
-          color: $co;
-          background: $bg;
-        }
+  @each $co in $state {
+    @if ($co== 'main') {
+      & > *,
+      &[ui-tags~='#{$co}'] > * {
+        color: var(--co-#{$co}-text);
+        background: var(--bg-#{$co});
+      }
+    } @else {
+      &[ui-tags~='#{$co}'] > * {
+        color: var(--co-#{$co}-text);
+        background: var(--bg-#{$co});
       }
     }
   }

package/components/tips/tips@a.scss

@@ -8,9 +8,9 @@
   // 盒子
   [ui-tips-box] {
     position: absolute;
-    @include theme {
-      background: co(fore);
-    }
+    // @include theme {
+    background: var(--co-fore);
+    // }
     box-shadow: 0 0 0.2em 1px rgba(0, 0, 0, 0.08);
     // padding: 0.5em;
     border-radius: 0.25em;
@@ -39,9 +39,9 @@
       width: 0.5em;
       height: 0.5em;
       transform: rotate(45deg);
-      @include theme {
-        background: co(fore);
-      }
+      // @include theme {
+      background: var(--co-fore);
+      // }
     }
   }
 

package/components/title/title@a.scss

@@ -10,9 +10,9 @@
       height: 0.95em;
       border-radius: 0.1em;
       margin-right: 0.2em;
-      @include theme {
-        background-color: co(main);
-      }
+      // @include theme {
+        background-color: var(--co-main);
+      // }
     }
   }
 }

package/components/title/title@b.scss

@@ -1,7 +1,8 @@
 [ui-title~='@b'] {
   & {
-    @include theme {
-      box-shadow: inset 0 -1px 0 0 co(line);
-    }
+    // @include theme {
+    box-shadow: inset 0 -1px 0 0 var(--co-line);
+    // }
   }
 }
+

package/core/base.scss

@@ -188,6 +188,10 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
+  .#{$d}fw-none {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
   .#{$d}fw-auto {
     font-weight: normal;
     -webkit-font-smoothing: auto;
@@ -348,6 +352,13 @@
   .#{$d}o-ll\+mm {
     opacity: 0.95;
   }
+
+  .#{$d}upper {
+    text-transform: uppercase;
+  }
+  .#{$d}lower {
+    text-transform: lowercase;
+  }
 }
 
 // 桌面
@@ -375,13 +386,6 @@ code,
   max-width: 95rem;
   height: 100%;
   margin: 0 auto;
-  // padding: 0 1rem;
-  // clear: both;
-  // &:after {
-  //   display: table;
-  //   content: '';
-  //   clear: both;
-  // }
 }
 // 全屏的
 [layout='full'] {