@neatui/css 3.0.0-beta.9 → 3.0.0

package/core/theme-v2.scss

@@ -0,0 +1,378 @@
+@use 'sass:list';
+@use 'sass:meta';
+@use 'sass:map';
+@use 'sass:color';
+@use 'sass:string';
+
+// 兜底
+$theme: if(
+  meta.global-variable-exists(theme),
+  $theme,
+  (
+    _sys: (
+      main: #0889e4,
+      text: #000000,
+      fore: #ffffff,
+      back: #f5f5f5,
+      link: #d07950,
+      code: #e23861,
+      well: #4bbc73,
+      warn: #fb9a2a,
+      risk: #f95850,
+      info: #0889e4
+    )
+  )
+) !default;
+
+// 检测
+@if (meta.global-variable-exists(theme)) {
+  $fa: map.keys($theme);
+  $fk: list.nth($fa, 1);
+  @if (list.length($fa) == 1 and $fk == _sys) {
+    @warn '检测到您未定义主题色卡，请遵循 neatui 设计规范建立主题色卡；https://neatui.fekit.cn/#/docs/config';
+    @debug '尝试修复错误...';
+    @debug '创建系统默认色卡[theme=_sys]';
+  } @else {
+    @debug '检测到主题色卡[theme=#{$fk}]';
+  }
+
+  @each $var in $theme {
+    $n: list.nth($var, 1);
+    $s: list.nth($var, 2);
+    @if ($s and meta.type-of($s) == 'map') {
+      $baseColor: 'main', 'text', 'fore', 'back', 'link', 'code', 'well', 'warn', 'risk';
+      @each $baseColorItem in $baseColor {
+        @if (map.has-key($s, $baseColorItem)) {
+        } @else {
+          @warn '[theme=#{$n}]主题缺少一个关键的基础颜色#{$baseColorItem}';
+        }
+      }
+    } @else {
+      @debug '[theme=#{$n}]主题色卡配置错误';
+    }
+  }
+}
+
+// 扩展颜色
+@each $i in $theme {
+  $n: list.nth($i, 1);
+  $s: list.nth($i, 2);
+  @if ($s and meta.type-of($s) == 'map') {
+    $m: (
+      none: transparent,
+      w: #ffffff,
+      b: #000000,
+      read: color.mix(map.get($s, 'text'), map.get($s, 'fore'), 85%),
+      desc: color.mix(map.get($s, 'text'), map.get($s, 'fore'), 55%),
+      note: color.mix(map.get($s, 'text'), map.get($s, 'fore'), 35%),
+      case: color.mix(map.get($s, 'text'), map.get($s, 'fore'), 20%),
+      line: color.mix(map.get($s, 'text'), map.get($s, 'fore'), 10%),
+      weak: color.mix(map.get($s, 'text'), map.get($s, 'fore'), 4%)
+    );
+    // 将扩展颜色加入放题色卡中
+    $theme: map.merge(
+      $theme,
+      (
+        $n: map.merge($m, $s)
+      )
+    );
+  }
+}
+
+// 主题
+// @mixin theme($n: null) {
+//   $hasTheme: map.get($theme, $n);
+//   @if ($n != null) {
+//     @if ($hasTheme != null) {
+//       $t: $hasTheme;
+//       $first: list.nth(list.nth($theme, 1), 1);
+//       $n: $n;
+//       $s: #{list.nth(&, 1)};
+//       @if ($s == 'html' or $s == '' or $s == null) {
+//         @if ($n == $first) {
+//           @at-root html {
+//             @content;
+//           }
+//         } @else {
+//           @at-root [theme='#{$n}'] {
+//             @content;
+//           }
+//         }
+//       } @else {
+//         @if ($n == $first) {
+//           @content;
+//         } @else {
+//           [theme='#{$n}'] & {
+//             @content;
+//           }
+//         }
+//       }
+//     } @else {
+//       @warn '没有指定主题#{$hasTheme}';
+//     }
+//   } @else {
+//     $first: list.nth(list.nth($theme, 1), 1);
+//     @each $t in $theme {
+//       $n: list.nth($t, 1);
+//       $s: #{list.nth(&, 1)};
+
+//       @if ($s == 'html' or $s == ':root' or $s == '' or $s == null) {
+//         @if ($n == $first) {
+//           @at-root html {
+//             @content;
+//           }
+//         } @else {
+//           @at-root [theme='#{$n}'] {
+//             @content;
+//           }
+//         }
+//       } @else {
+//         @if ($n == $first) {
+//           @content;
+//         } @else {
+//           [theme='#{$n}'] & {
+//             @content;
+//           }
+//         }
+//       }
+//     }
+//   }
+// }
+
+// 颜色
+// @function co($a: '') {
+//   @if (& != null) {
+//     $r: list.nth(list.nth(&, 1), 1);
+//     $n: string.slice($r, 8, -2);
+//     $s: map.get($theme, $n);
+//     @if ($s == null) {
+//       $n: list.nth(list.nth($theme, 1), 1);
+//       $s: list.nth(list.nth($theme, 1), 2);
+//     }
+//     @if ($s != null) {
+//       @if (map.has-key($s, $a)) {
+//         $a: map.get($s, $a);
+//       } @else {
+//         @debug '当前主题[theme=#{$n}]没有定义颜色名 #{$a}';
+//       }
+//     }
+//     @return $a;
+//   } @else {
+//     @return transparent;
+//   }
+// }
+
+// 变量
+@mixin vars() {
+  $levels: xs, ss, sm, sl, ms, mm, ml, ls, lm, ll, xl;
+  $colors: main, text, well, warn, risk;
+
+  $f: list.nth(list.nth($theme, 1), 1);
+  @each $i in $theme {
+    $n: list.nth($i, 1);
+    $s: list.nth($i, 2);
+    @if ($n == $f) {
+      :root,
+      [theme~='#{$n}'] {
+        @each $c in $s {
+          $k: list.nth($c, 1);
+          $v: list.nth($c, 2);
+          --co-#{$k}: #{$v};
+
+          $ls: 0.05;
+          @each $l in $levels {
+            // 透明度
+            @if ($k != 'none') {
+              --co-#{$k}-#{$l}: #{rgba($v, $ls)};
+              @if ($k != 'w' and $k != 'b') {
+                --co-#{$k}-fore-#{$l}: #{color.mix($v, map.get($s, 'fore'), $ls * 100%)};
+              }
+              @if ($k == 'main' or $k == 'well' or $k == 'warn' or $k == 'risk') {
+                --co-#{$k}-text-#{$l}: #{color.mix($v, map.get($s, 'text'), $ls * 100%)};
+              }
+            }
+            @if ($ls <= 0.1 or $ls >= 0.8) {
+              $ls: $ls + 0.05;
+            } @else {
+              $ls: $ls + 0.1;
+            }
+          }
+        }
+      }
+    } @else {
+      [theme~='#{$n}'] {
+        @each $c in $s {
+          $k: list.nth($c, 1);
+          $v: list.nth($c, 2);
+          --co-#{$k}: #{$v};
+
+          $ls: 0.05;
+          @each $l in $levels {
+            // 透明度
+            @if ($k != 'none') {
+              --co-#{$k}-#{$l}: #{rgba($v, $ls)};
+
+              @if ($k != 'w' and $k != 'b') {
+                --co-#{$k}-fore-#{$l}: #{color.mix($v, map.get($s, 'fore'), $ls * 100%)};
+              }
+
+              @if ($k == 'main' or $k == 'well' or $k == 'warn' or $k == 'risk') {
+                --co-#{$k}-text-#{$l}: #{color.mix($v, map.get($s, 'text'), $ls * 100%)};
+              }
+            }
+            @if ($ls <= 0.1 or $ls >= 0.8) {
+              $ls: $ls + 0.05;
+            } @else {
+              $ls: $ls + 0.1;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@include vars();
+
+@mixin color() {
+  html,
+  [theme] {
+    color: var(--co-read);
+    fill: var(--co-read);
+    background-color: var(--co-back);
+  }
+
+  // 自动颜色
+  .co-auto,
+  .co-auto\:hover:hover,
+  .co-auto\:active:active {
+    color: currentColor !important;
+    fill: currentColor !important;
+  }
+
+  .bg-auto,
+  .bg-auto\:hover:hover,
+  .bg-auto\:active:active {
+    background-color: currentColor !important;
+  }
+  .bk-auto,
+  .bk-auto\:hover:hover,
+  .bk-auto\:active:active {
+    border-color: currentColor !important;
+  }
+
+  // 随机颜色
+  .bg-0 {
+    background-color: var(--co-main);
+  }
+
+  .bg-1 {
+    background-color: #0084ff;
+  }
+  .bg-2 {
+    background-color: #30d158;
+  }
+  .bg-3 {
+    background-color: #5e5ce6;
+  }
+  .bg-4 {
+    background-color: #ff9f0a;
+  }
+  .bg-5 {
+    background-color: #ff375f;
+  }
+  .bg-6 {
+    background-color: #af52de;
+  }
+  .bg-7 {
+    background-color: #ff453a;
+  }
+  .bg-8 {
+    background-color: #af52de;
+  }
+  .bg-9 {
+    background-color: #5ac8fa;
+  }
+  .bg-10 {
+    background-color: #ffcc00;
+  }
+  .bg-11 {
+    background-color: #8e8e93;
+  }
+  .bg-12 {
+    background-color: #bad80a;
+  }
+  .bg-13 {
+    background-color: #1d6fa3;
+  }
+  .bg-14 {
+    background-color: #fd6585;
+  }
+  .bg-15 {
+    background-color: #df5900;
+  }
+  .bg-16 {
+    background-color: #3388ff;
+  }
+  .bg-17 {
+    background-color: #623aa2;
+  }
+  .bg-18 {
+    background-color: #d939cd;
+  }
+  .bg-19 {
+    background-color: #f55555;
+  }
+  .bg-20 {
+    background-color: #bb4e75;
+  }
+
+  $f: list.nth(list.nth($theme, 1), 1);
+  @each $i in $theme {
+    $s: list.nth($i, 2);
+    @each $c in $s {
+      $n: list.nth($c, 1);
+      $v: list.nth($c, 2);
+      // @include color(list.nth($c, 1), list.nth($c, 2));
+      $levels: xs, ss, sm, sl, ms, mm, ml, ls, lm, ll, xl;
+
+      .co-#{$n},
+      .co-#{$n}\:hover:hover,
+      .co-#{$n}\:active:active {
+        color: var(--co-#{$n}) !important;
+        fill: var(--co-#{$n}) !important;
+      }
+      .bg-#{$n},
+      .bg-#{$n}\:hover:hover,
+      .bg-#{$n}\:active:active {
+        background-color: var(--co-#{$n}) !important;
+      }
+      .bk-#{$n},
+      .bk-#{$n}\:hover:hover,
+      .bk-#{$n}\:active:active {
+        border-color: var(--co-#{$n}) !important;
+      }
+
+      @each $i in $levels {
+        .co-#{$n}-#{$i},
+        .co-#{$n}-#{$i}\:hover:hover,
+        .co-#{$n}-#{$i}\:active:active {
+          color: var(--co-#{$n}-#{$i}) !important;
+          fill: var(--co-#{$n}-#{$i}) !important;
+        }
+        .bg-#{$n}-#{$i},
+        .bg-#{$n}-#{$i}\:hover:hover,
+        .bg-#{$n}-#{$i}\:active:active {
+          background-color: var(--co-#{$n}-#{$i}) !important;
+        }
+        .bk-#{$n}-#{$i},
+        .bk-#{$n}-#{$i}\:hover:hover,
+        .bk-#{$n}-#{$i}\:active:active {
+          border-color: var(--co-#{$n}-#{$i}) !important;
+        }
+      }
+    }
+  }
+}
+
+@include color();