misp-ui-library-test 0.0.1

package/dist/theme-chalk/tag/index.scss

@@ -0,0 +1,138 @@
+
+@import '../variables.scss';
+@import '../mixins.scss';
+
+@mixin genTheme($backgroundColorWeight, $borderColorWeight, $fontColorWeight) {
+  background-color: color-mix(in srgb, var(--primary-blue) $backgroundColorWeight, transparent calc(100% - #{$backgroundColorWeight}));
+  border-color: color-mix(in srgb, var(--primary-blue) $borderColorWeight, transparent calc(100% - #{$borderColorWeight}));
+  color: color-mix(in srgb, var(--primary-blue) $fontColorWeight, transparent calc(100% - #{$fontColorWeight}));
+  @include when(hit) {
+    border-color: var(--primary-blue);
+  }
+  .ui-tag__close {
+    color: color-mix(in srgb, var(--primary-blue) $fontColorWeight, transparent calc(100% - #{$fontColorWeight}));
+  }
+
+  &.ui-tag--info {
+    background-color: color-mix(in srgb, var(--sd-bg) $backgroundColorWeight, transparent calc(100% - #{$backgroundColorWeight}));
+    border-color: color-mix(in srgb, var(--primary-line) $borderColorWeight, transparent calc(100% - #{$borderColorWeight}));
+    color: color-mix(in srgb, var(--sd-text) $fontColorWeight, transparent calc(100% - #{$fontColorWeight}));
+    @include when(hit) {
+      border-color: var(--disable-text);
+    }
+    .ui-tag__close {
+      color: color-mix(in srgb, var(--disable-text) $fontColorWeight, transparent calc(100% - #{$fontColorWeight}));
+    }
+  }
+
+  &.ui-tag--success {
+    background-color: color-mix(in srgb, var(--success) $backgroundColorWeight, transparent calc(100% - #{$backgroundColorWeight}));
+    border-color: color-mix(in srgb, var(--success) $borderColorWeight, transparent calc(100% - #{$borderColorWeight}));
+    color: color-mix(in srgb, var(--success) $fontColorWeight, transparent calc(100% - #{$fontColorWeight}));
+    @include when(hit) {
+      border-color: var(--success);
+    }
+    .ui-tag__close {
+      color: color-mix(in srgb, var(--success) $fontColorWeight, transparent calc(100% - #{$fontColorWeight}));
+    }
+  }
+
+  &.ui-tag--warning {
+    background-color: color-mix(in srgb, var(--warning) $backgroundColorWeight, transparent calc(100% - #{$backgroundColorWeight}));
+    border-color: color-mix(in srgb, var(--warning) $borderColorWeight, transparent calc(100% - #{$borderColorWeight}));
+    color: color-mix(in srgb, var(--warning) $fontColorWeight, transparent calc(100% - #{$fontColorWeight}));
+    @include when(hit) {
+      border-color: var(--warning);
+    }
+    .ui-tag__close {
+      color: color-mix(in srgb, var(--warning) $fontColorWeight, transparent calc(100% - #{$fontColorWeight}));
+    }
+  }
+
+  &.ui-tag--danger {
+    background-color: color-mix(in srgb, var(--danger) $backgroundColorWeight, transparent calc(100% - #{$backgroundColorWeight}));
+    border-color: color-mix(in srgb, var(--danger) $borderColorWeight, transparent calc(100% - #{$borderColorWeight}));
+    color: color-mix(in srgb, var(--danger) $fontColorWeight, transparent calc(100% - #{$fontColorWeight}));
+    @include when(hit) {
+      border-color: var(--danger);
+    }
+    .ui-tag__close {
+      color: color-mix(in srgb, var(--danger) $fontColorWeight, transparent calc(100% - #{$fontColorWeight}));
+    }
+  }
+}
+
+@include b(tag) {
+  @include genTheme(10%, 70%, 100%);
+  display: inline-block;
+  height: initial;
+  line-height: initial;
+  padding: 3px 4px;
+  font-size: 16px;
+  color: var(--primary-blue);
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  .ui-icon-close {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    text-align: center;
+    position: relative;
+    cursor: pointer;
+    font-size: 12px;
+    vertical-align: middle;
+    top: -2px;
+    right: 0px;
+    &::before {
+      display: block;
+    }
+    &:hover {
+      opacity: .8;
+    }
+  }
+  @include m(dark) {
+    @include genTheme(90%, 100%, 0%);
+  }
+  @include m(plain) {
+    @include genTheme(0, 40%, 100%);
+  }
+  @include m(medium) {
+    font-size: 14px;
+    .ui-icon-close {
+      transform: scale(.8);
+      transform-origin: 50% 50%;
+    }
+  }
+  @include m(small) {
+    font-size: 12px;
+    .ui-icon-close {
+      top: -1px;
+      margin-left: 2px;
+      transform: scale(.8);
+      transform-origin: 50% 50%;
+    }
+  }
+  @include m(mini) {
+    font-size: 10px;
+    .ui-icon-close {
+      top: -1px;
+      margin-left: 2px;
+      transform: scale(.7);
+      transform-origin: 50% 50%;
+    }
+  }
+}
+
+.ui-zoom-in-center-enter-active,
+.ui-zoom-in-center-leave-active {
+  transition: all 0.3s cubic-bezier(.55,0,.1,1);
+}
+
+.ui-zoom-in-center-enter,
+.ui-zoom-in-center-leave-active {
+  opacity: 0;
+  transform: scale(0);
+}

package/dist/theme-chalk/themes/blue.scss

@@ -0,0 +1,76 @@
+
+// 蓝色主题配置
+$blue-theme: (
+  // 基础颜色
+  base-blue: #324157,
+  base-red: #C03639,
+  base-pink: #E65D6E,
+  base-green: #30B08F,
+  base-tiffany: #4AB7BD,
+  base-yellow: #FEC171,
+  base-panGreen: #30B08F,
+
+  // 主题色
+  primary-blue: #002A72,
+  primary-blue-light: #E8F4FF,
+  dark-blue: #001a4d,
+  light-blue: #79BBFF,
+  blue-bg: #e8f4ff,
+  md-blue: #4F9BE8,
+  extra-light-blue: #BEE6FF,
+
+  // 黑色系列
+  primary-black: #000000,
+  sd-black: #505363,
+  td-black: #909399,
+  fr-black: #A6AEBE,
+  dis-black: #D4D9E2,
+  light-bg: #F4F5F7,
+
+  // 红色系列
+  extra-light-red: #EEAAAA,
+  light-red: #EA6C6C,
+  red-danger: #E60000,
+  sd-red: #AD0000,
+  success-light: #E3F9E9,
+  danger-light: #FFE1DC,
+  warning-light: #FFF0D6,
+
+  // 黄色系列
+  yellow-light-extra: #FFF5B8,
+  yellow-light: #FFE26B,
+  yellow-warning: #E6A23C,
+  sd-yellow: #BE7200,
+
+  // 橙色系列
+  extra-light-orange: #FFD0B3,
+  light-orange: #FFB76D,
+  primary-orange: #FF8000,
+  sd-orange: #D16900,
+
+  // 绿色系列
+  extra-light-green: #AFE6CA,
+  light-green: #A4DB8A,
+  green-success: #71BE4C,
+  sd-green: #4B7A34,
+
+  // 青色系列
+  extra-light-aquamarine: #C2F9F0,
+  light-aquamarine: #91F0F0,
+  primary-aquamarine: #0CCAD8,
+  sd-aquamarine: #03AAB6,
+
+  // 紫色系列
+  extra-light-purple: #FAC7FF,
+  light-purple: #E56EC9,
+  primary-purple: #BB24B3,
+  sd-purple: #800080,
+
+  // 基础界面颜色
+  bg-color: #e8f4ff,
+  text-color: #2c3e50,
+  border-color: #b3d8ff,
+  hover-color: #d9ecff,
+  menu-text-color: #2c3e50,
+  menu-active-color: #002A72
+);

package/dist/theme-chalk/themes/dark.scss

@@ -0,0 +1,99 @@
+
+// 深色主题配置
+$dark-theme: (
+  // 文本颜色
+  primary-text: #FFFFFF,
+  sd-text: #E8E8E8,
+  td-text: #9F9F9F,
+  fr-text: #606060,
+  disable-text: #646775,
+  click-text: #4188FF,
+  click-disable-text: #77AEE5,
+  white: #FFFFFF,
+
+  // 蓝色系列
+  primary-blue: #4188FF,
+  primary-blue-light: #1E2C60,
+  sd-blue: #A7DBFA,
+  md-blue: #4F9BE8,
+  fr-blue: #1D4993,
+  fifth-blue: #1E2C60,
+
+  // 背景色
+  base-bg: #191B29,
+  sd-bg: #000000,
+  md-bg: #242636,
+  fr-bg: #2C3040,
+  blue-bg: #112653,
+  blue-bg-2: #1E2C60,
+  tg-bg: #191B29,
+  popup-bg: #3E445250,
+  box-shadow-3: 0px 0px 6px 0px #00000072,
+
+  // 边框线
+  primary-line: #505363,
+
+  // 状态颜色
+  success: #A4DB8A,
+  success-light: #0B7046,
+  danger: #FB6E77,
+  danger-light: #90142A,
+  warning: #FBCC30,
+  warning-light: #83630C,
+
+  // 蓝色图表
+  blue-1: #D5EBFF,
+  blue-2: #B3D1FD,
+  blue-3: #87BBFA,
+  blue-4: #5DA3EA,
+  blue-5: #0F548D,
+  blue-6: #033175,
+
+  // 绿色图表
+  green-1: #B3E8D1,
+  green-2: #71D5AE,
+  green-3: #37BF8E,
+  green-4: #1D8A66,
+  green-5: #0B7046,
+  green-6: #004C23,
+
+  // 青色图表
+  aquamarine-1: #DEFFFA,
+  aquamarine-2: #BCF0E7,
+  aquamarine-3: #9CDFDF,
+  aquamarine-4: #5BB8BF,
+  aquamarine-5: #0A8089,
+  aquamarine-6: #0C5B64,
+
+  // 黄色图表
+  yellow-1: #FFF0D6,
+  yellow-2: #F9DEA7,
+  yellow-3: #EDC66B,
+  yellow-4: #D19E09,
+  yellow-5: #83630C,
+  yellow-6: #533D01,
+
+  // 橙色图表
+  orange-1: #FFD8AD,
+  orange-2: #FFB97D,
+  orange-3: #EB955B,
+  orange-4: #C8662B,
+  orange-5: #903C0B,
+  orange-6: #612100,
+
+  // 红色图表
+  red-1: #FFD6D8,
+  red-2: #FFB5B8,
+  red-3: #FF9195,
+  red-4: #E35661,
+  red-5: #90142A,
+  red-6: #500113,
+
+  // 紫色图表
+  purple-1: #FFDBFD,
+  purple-2: #E5A5DB,
+  purple-3: #F092D7,
+  purple-4: #F36FC6,
+  purple-5: #962772,
+  purple-6: #720450
+);

package/dist/theme-chalk/themes/index.scss

@@ -0,0 +1,260 @@
+
+// 导入各个主题配置
+@import './light.scss';
+@import './dark.scss';
+@import './blue.scss';
+
+// 合并所有主题
+$themes: (
+  "light": $light-theme,
+  "dark": $dark-theme,
+  "blue": $blue-theme
+);
+
+// 生成 CSS 变量
+:root {
+  // 默认使用 light 主题
+  @each $key, $value in map-get($themes, "light") {
+    --#{'' + $key}: #{$value};
+  }
+
+  @each $theme-name, $theme-map in $themes {
+    &[data-theme="#{$theme-name}"] {
+      @each $key, $value in $theme-map {
+        --#{'' + $key}: #{$value};
+      }
+    }
+  }
+}
+
+// 文本颜色
+$primary-text: var(--primary-text);
+$sd-text: var(--sd-text);
+$td-text: var(--td-text);
+$fr-text: var(--fr-text);
+$disable-text: var(--disable-text);
+$click-text: var(--click-text);
+$click-disable-text: var(--click-disable-text);
+$white: var(--white);
+
+// 蓝色系列
+$primary-blue: var(--primary-blue);
+$primary-blue-light: var(--primary-blue-light);
+$sd-blue: var(--sd-blue);
+$md-blue: var(--md-blue);
+$fr-blue: var(--fr-blue);
+$fifth-blue: var(--fifth-blue);
+$blue-bg: var(--blue-bg);
+$blue-bg-2: var(--blue-bg-2);
+$tg-bg: var(--tg-bg);
+$popup-bg: var(--popup-bg);
+$box-shadow-3: var(--box-shadow-3);
+
+// 背景色
+$base-bg: var(--base-bg);
+$sd-bg: var(--sd-bg);
+$md-bg: var(--md-bg);
+$fr-bg: var(--fr-bg);
+
+// 边框线
+$primary-line: var(--primary-line);
+
+// 状态颜色
+$success: var(--success);
+$success-light: var(--success-light);
+$danger: var(--danger);
+$danger-light: var(--danger-light);
+$warning: var(--warning);
+$warning-light: var(--warning-light);
+
+// z-index
+$index-normal: 1;
+$index-top: 1000;
+$index-popover: 2000;
+$index-modal: 3000;
+$index-notification: 4000;
+$index-message: 5000;
+
+// 图表颜色系列
+// 蓝色图表
+$blue-1: var(--blue-1);
+$blue-2: var(--blue-2);
+$blue-3: var(--blue-3);
+$blue-4: var(--blue-4);
+$blue-5: var(--blue-5);
+$blue-6: var(--blue-6);
+
+// 绿色图表
+$green-1: var(--green-1);
+$green-2: var(--green-2);
+$green-3: var(--green-3);
+$green-4: var(--green-4);
+$green-5: var(--green-5);
+$green-6: var(--green-6);
+
+// 青色图表
+$aquamarine-1: var(--aquamarine-1);
+$aquamarine-2: var(--aquamarine-2);
+$aquamarine-3: var(--aquamarine-3);
+$aquamarine-4: var(--aquamarine-4);
+$aquamarine-5: var(--aquamarine-5);
+$aquamarine-6: var(--aquamarine-6);
+
+// 黄色图表
+$yellow-1: var(--yellow-1);
+$yellow-2: var(--yellow-2);
+$yellow-3: var(--yellow-3);
+$yellow-4: var(--yellow-4);
+$yellow-5: var(--yellow-5);
+$yellow-6: var(--yellow-6);
+
+// 橙色图表
+$orange-1: var(--orange-1);
+$orange-2: var(--orange-2);
+$orange-3: var(--orange-3);
+$orange-4: var(--orange-4);
+$orange-5: var(--orange-5);
+$orange-6: var(--orange-6);
+
+// 红色图表
+$red-1: var(--red-1);
+$red-2: var(--red-2);
+$red-3: var(--red-3);
+$red-4: var(--red-4);
+$red-5: var(--red-5);
+$red-6: var(--red-6);
+
+// 紫色图表
+$purple-1: var(--purple-1);
+$purple-2: var(--purple-2);
+$purple-3: var(--purple-3);
+$purple-4: var(--purple-4);
+$purple-5: var(--purple-5);
+$purple-6: var(--purple-6);
+
+// 导出变量给 JavaScript 使用
+:export {
+  // 文本颜色
+  primaryText: $primary-text;
+  sdText: $sd-text;
+  tdText: $td-text;
+  frText: $fr-text;
+  disableText: $disable-text;
+  clickText: $click-text;
+  clickDisableText: $click-disable-text;
+  white: $white;
+
+  // 蓝色系列
+  primaryBlue: $primary-blue;
+  primaryBlueLight: $primary-blue-light;
+  sdBlue: $sd-blue;
+  mdBlue: $md-blue;
+  frBlue: $fr-blue;
+  fifthBlue: $fifth-blue;
+
+  // 背景色
+  baseBg: $base-bg;
+  sdBg: $sd-bg;
+  mdBg: $md-bg;
+  frBg: $fr-bg;
+  blueBg: $blue-bg;
+  blueBg2: $blue-bg-2;
+  tgBg: $tg-bg;
+
+  popupBg: $popup-bg;
+  boxShadow3: $box-shadow-3;
+
+  // 边框线
+  primaryLine: $primary-line;
+
+  // 状态颜色
+  success: $success;
+  successLight: $success-light;
+  danger: $danger;
+  dangerLight: $danger-light;
+  warning: $warning;
+  warningLight: $warning-light;
+
+  // 图表颜色系列
+  // 蓝色图表
+  blue1: $blue-1;
+  blue2: $blue-2;
+  blue3: $blue-3;
+  blue4: $blue-4;
+  blue5: $blue-5;
+  blue6: $blue-6;
+
+  // 绿色图表
+  green1: $green-1;
+  green2: $green-2;
+  green3: $green-3;
+  green4: $green-4;
+  green5: $green-5;
+  green6: $green-6;
+
+  // 青色图表
+  aquamarine1: $aquamarine-1;
+  aquamarine2: $aquamarine-2;
+  aquamarine3: $aquamarine-3;
+  aquamarine4: $aquamarine-4;
+  aquamarine5: $aquamarine-5;
+  aquamarine6: $aquamarine-6;
+
+  // 黄色图表
+  yellow1: $yellow-1;
+  yellow2: $yellow-2;
+  yellow3: $yellow-3;
+  yellow4: $yellow-4;
+  yellow5: $yellow-5;
+  yellow6: $yellow-6;
+
+  // 橙色图表
+  orange1: $orange-1;
+  orange2: $orange-2;
+  orange3: $orange-3;
+  orange4: $orange-4;
+  orange5: $orange-5;
+  orange6: $orange-6;
+
+  // 红色图表
+  red1: $red-1;
+  red2: $red-2;
+  red3: $red-3;
+  red4: $red-4;
+  red5: $red-5;
+  red6: $red-6;
+
+  // 紫色图表
+  purple1: $purple-1;
+  purple2: $purple-2;
+  purple3: $purple-3;
+  purple4: $purple-4;
+  purple5: $purple-5;
+  purple6: $purple-6;
+}
+
+// body {
+//   background-color: $sd-bg;
+//   color: $primary-text;
+//   transition: all 0.3s ease;
+// }
+
+// .ui-dropdown-menu {
+//   background-color: $base-bg;
+//   border-color: $primary-line;
+//   .ui-dropdown-menu__item {
+//     color: $primary-text;
+//     &:hover {
+//       background-color: $blue-bg;
+//     }
+//     &.is-active {
+//       color: $primary-blue;
+//       background-color: $blue-bg;
+//     }
+//   }
+// }
+// .hover-effect {
+//   &:hover {
+//     background-color: $blue-bg;
+//   }
+// }

package/dist/theme-chalk/themes/light.scss

@@ -0,0 +1,99 @@
+
+// 浅色主题配置
+$light-theme: (
+  // 文本颜色
+  primary-text: #000000,
+  sd-text: #505363,
+  td-text: #909399,
+  fr-text: #A6AEBE,
+  disable-text: #D4D9E2,
+  click-text: #006EDC,
+  click-disable-text: #B3D5F7,
+  white: #FFFFFF,
+
+  // 蓝色系列
+  primary-blue: #006EDC,
+  primary-blue-light: #ECF5FF,
+  sd-blue: #002A72,
+  md-blue: #4F9BE8,
+  fr-blue: #79BBFF,
+  fifth-blue: #BEE6FF,
+
+  // 背景色
+  base-bg: #FFFFFF,
+  sd-bg: #ECEDF0,
+  md-bg: #FBFCFD,
+  fr-bg: #F4F5F7,
+  blue-bg: #F1F6FF,
+  blue-bg-2: #87BBFA,
+  tg-bg: #f4f4f5,
+  popup-bg: #00000050,
+  box-shadow-3: 1px 3px 6px 0px #00000016,
+
+  // 边框线
+  primary-line: #E4E7ED,
+
+  // 状态颜色
+  success: #2BA471,
+  success-light: #E3F9E9,
+  danger: #D54941,
+  danger-light: #FFE1DC,
+  warning: #F5BA18,
+  warning-light: #FFF0D6,
+
+  // 蓝色图表
+  blue-1: #194F9F,
+  blue-2: #1B73BB,
+  blue-3: #5DA3EA,
+  blue-4: #87BBFA,
+  blue-5: #B3D1FD,
+  blue-6: #D5EBFF,
+
+  // 绿色图表
+  green-1: #005334,
+  green-2: #006C45,
+  green-3: #2BA471,
+  green-4: #56C08D,
+  green-5: #AFE6CA,
+  green-6: #E3F9E9,
+
+  // 青色图表
+  aquamarine-1: #23737C,
+  aquamarine-2: #03AAB6,
+  aquamarine-3: #4EC4CD,
+  aquamarine-4: #9CDFDF,
+  aquamarine-5: #BCF0E7,
+  aquamarine-6: #DEFFFA,
+
+  // 黄色图表
+  yellow-1: #654900,
+  yellow-2: #99740F,
+  yellow-3: #D19E09,
+  yellow-4: #EDC66B,
+  yellow-5: #F9DEA7,
+  yellow-6: #FFF0D6,
+
+  // 橙色图表
+  orange-1: #5D2802,
+  orange-2: #994C0A,
+  orange-3: #C47738,
+  orange-4: #EAA87E,
+  orange-5: #F6D0B9,
+  orange-6: #FFE8DB,
+
+  // 红色图表
+  red-1: #5E0000,
+  red-2: #841616,
+  red-3: #BC3D37,
+  red-4: #EA6E64,
+  red-5: #F4B4AC,
+  red-6: #FFE1DC,
+
+  // 紫色图表
+  purple-1: #660058,
+  purple-2: #984280,
+  purple-3: #CB6B96,
+  purple-4: #E891BE,
+  purple-5: #F6AFD1,
+  purple-6: #FFDDEA
+);